From 524c42f8c77bcd5d93484bcbee721b6cd9ebe296 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 02 Apr 2025 18:46:02 +0800
Subject: [PATCH] feat: 全局组件自动注册
---
src/components/global/publicTitle.vue | 33 ++++++++
src/main.js | 134 +++++++++++++++++----------------
src/components/index.js | 36 +++-----
3 files changed, 117 insertions(+), 86 deletions(-)
diff --git a/src/components/global/publicTitle.vue b/src/components/global/publicTitle.vue
new file mode 100644
index 0000000..ded5b43
--- /dev/null
+++ b/src/components/global/publicTitle.vue
@@ -0,0 +1,33 @@
+<!--
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2024-10-25 18:41:39
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2025-04-02 18:26:00
+ * @FilePath: \command-center-dashboard\src\components\publicTitle\publicTitle.vue
+ * @Description:
+ *
+ * Copyright (c) 2024 by shuishen, All Rights Reserved.
+-->
+<template>
+ <div class="title-box">
+ <div class="title">
+ <slot name="titleName"></slot>
+ </div>
+ </div>
+</template>
+
+<style lang="scss" scoped>
+.title {
+ margin-left: 30px;
+ text-align: left;
+ font-size: 18px;
+ font-family: Alibaba PuHuiTi;
+ font-weight: 700;
+ font-style: italic;
+ color: transparent;
+ text-shadow: 0 2px 8px rgba(5, 28, 55, .42);
+ background-image: linear-gradient(180deg, rgba(14, 197, 236, .36) 5%, rgba(49, 190, 255, .36) 20%, #fff 40%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparen;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index 3101eb5..13c740d 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,22 +1,16 @@
-/*
- * @Author: shuishen 1109946754@qq.com
- * @Date: 2024-10-25 15:20:05
- * @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2024-11-08 20:11:39
- * @FilePath: \bigScreen\src\components\index.js
- * @Description:
- *
- * Copyright (c) 2024 by shuishen, All Rights Reserved.
- */
-/*
- **全局注册组件
- ** 放在components/global文件夹下
- */
import { defineAsyncComponent } from 'vue'
-const components = import.meta.glob('./global/*.vue') // 异步方式
-export default function install (app) {
- for (const [key, value] of Object.entries(components)) {
- const name = key.slice(key.lastIndexOf('/') + 1, key.lastIndexOf('.'))
- app.component(name, defineAsyncComponent(value))
- }
-}
+
+export default {
+ install (app) {
+ // 匹配当前目录下所有.vue文件（包括子目录）
+ const components = import.meta.glob('./global/*.vue', { eager: true })
+
+
+ for (const [path, module] of Object.entries(components)) {
+ // 提取组件名（去除路径和扩展名）
+ const name = path.split('/').pop()?.replace('.vue', '') || ''
+ // 注册组件
+ app.component(name, (module).default)
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index e4cf81b..e333796 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,83 +1,87 @@
-import { createApp } from 'vue';
-import website from './config/website';
-import axios from './axios';
-import router from './router/';
-import store from './store';
-import i18n from './lang/';
-import { language, messages } from './lang/';
-import * as ElementPlusIconsVue from '@element-plus/icons-vue';
-import ElementPlus from 'element-plus';
-import 'element-plus/dist/index.css';
-import Avue from '@smallwei/avue';
-import '@smallwei/avue/lib/index.css';
-import avueUeditor from 'avue-plugin-ueditor';
-import crudCommon from '@/mixins/crud.js';
-import { getScreen } from './utils/util';
-import './permission';
-import error from './error';
-import App from './App.vue';
-import 'animate.css';
-import dayjs from 'dayjs';
-import 'styles/common.scss';
+import { createApp } from 'vue'
+import website from './config/website'
+import axios from './axios'
+import router from './router/'
+import store from './store'
+import i18n from './lang/'
+import { language, messages } from './lang/'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import Avue from '@smallwei/avue'
+import '@smallwei/avue/lib/index.css'
+import avueUeditor from 'avue-plugin-ueditor'
+import crudCommon from '@/mixins/crud.js'
+import { getScreen } from './utils/util'
+import './permission'
+import error from './error'
+import App from './App.vue'
+import 'animate.css'
+import dayjs from 'dayjs'
+import 'styles/common.scss'
// 系统组件
-import debug from './debug';
-import VueClipboard from 'vue3-clipboard';
-import highlight from './components/highlight/main.vue';
-import codeEditor from './components/code-editor/main.vue';
-import basicBlock from './components/basic-block/main.vue';
-import basicContainer from './components/basic-container/main.vue';
-import SvgIcon from './components/SvgIcon.vue';
-import thirdRegister from './components/third-register/main.vue';
-import flowDesign from './components/flow-design/main.vue';
-import flowDesignStep from './components/flow-design-step/main.vue';
+import debug from './debug'
+import VueClipboard from 'vue3-clipboard'
+import highlight from './components/highlight/main.vue'
+import codeEditor from './components/code-editor/main.vue'
+import basicBlock from './components/basic-block/main.vue'
+import basicContainer from './components/basic-container/main.vue'
+import SvgIcon from './components/SvgIcon.vue'
+import thirdRegister from './components/third-register/main.vue'
+import flowDesign from './components/flow-design/main.vue'
+import flowDesignStep from './components/flow-design-step/main.vue'
// 业务组件
// import codeSetting from './views/tool/codesetting.vue';
// import formSetting from './views/tool/formsetting.vue';
// import tenantPackage from './views/system/tenantpackage.vue';
// import tenantDatasource from './views/system/tenantdatasource.vue';
-import { onResize, pxToRem } from '@/utils/rem';
+// 全局组件
+import globalComponents from '@/components'
+
+import { onResize, pxToRem } from '@/utils/rem'
onResize()
import 'virtual:svg-icons-register'
-window.$crudCommon = crudCommon;
-debug();
-window.axios = axios;
-const app = createApp(App);
+window.$crudCommon = crudCommon
+debug()
+window.axios = axios
+const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
- app.component(key, component);
+ app.component(key, component)
}
-app.component('basicContainer', basicContainer);
-app.component('basicBlock', basicBlock);
-app.component('highlight', highlight);
-app.component('codeEditor', codeEditor);
-app.component('thirdRegister', thirdRegister);
-app.component('flowDesign', flowDesign);
-app.component('flowDesignStep', flowDesignStep);
-app.component('SvgIcon', SvgIcon);
+app.component('basicContainer', basicContainer)
+app.component('basicBlock', basicBlock)
+app.component('highlight', highlight)
+app.component('codeEditor', codeEditor)
+app.component('thirdRegister', thirdRegister)
+app.component('flowDesign', flowDesign)
+app.component('flowDesignStep', flowDesignStep)
+app.component('SvgIcon', SvgIcon)
// app.component('codeSetting', codeSetting);
// app.component('formSetting', formSetting);
// app.component('tenantPackage', tenantPackage);
// app.component('tenantDatasource', tenantDatasource);
-app.config.globalProperties.$app = app;
-app.config.globalProperties.$dayjs = dayjs;
-app.config.globalProperties.website = website;
-app.config.globalProperties.getScreen = getScreen;
-app.config.globalProperties.pxToRem = pxToRem;
+app.config.globalProperties.$app = app
+app.config.globalProperties.$dayjs = dayjs
+app.config.globalProperties.website = website
+app.config.globalProperties.getScreen = getScreen
+app.config.globalProperties.pxToRem = pxToRem
-app.use(error);
-app.use(i18n);
-app.use(store);
-app.use(router);
+app.use(error)
+app.use(i18n)
+app.use(store)
+app.use(router)
app.use(ElementPlus, {
- locale: messages[language],
-});
+ locale: messages[language],
+})
app.use(Avue, {
- axios,
- calcHeight: 10,
- locale: messages[language],
-});
-app.use(avueUeditor, { axios });
+ axios,
+ calcHeight: 10,
+ locale: messages[language],
+})
+app.use(avueUeditor, { axios })
app.use(VueClipboard, {
- autoSetContainer: true,
- appendToBody: true, // 这可以帮助解决一些更复杂的使用场景下的问题
-});
-app.mount('#app');
+ autoSetContainer: true,
+ appendToBody: true, // 这可以帮助解决一些更复杂的使用场景下的问题
+})
+app.use(globalComponents)
+app.mount('#app')
--
Gitblit v1.9.3