国际化、主题处理

src/components/common-icon/index.vue

@@ -0,0 +1,16 @@
+<script setup>
+defineProps({
+  icon: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <el-icon>
+    <component
+      :is="icon"
+    />
+  </el-icon>
+</template>

src/components/index.js

@@ -0,0 +1,14 @@
+import { defineAsyncComponent } from 'vue'
+
+/**
+ * 自定义通用组件自动注册
+ */
+export default {
+  install (app) {
+    const components = import.meta.glob('./*/index.vue')
+    for (const [filePath, componentFn] of Object.entries(components)) {
+      const compName = filePath.split('/')[1]
+      app.component(compName, defineAsyncComponent(componentFn))
+    }
+  }
+}

src/layout/TopNav.vue

@@ -42,18 +42,20 @@ defineProps({
         index="1-1"
         @click="$changeLocale('zh-CN')"
       >
-        <el-icon v-if="globalConfigStore.currentLocale==='zh-CN'">
-          <Check />
-        </el-icon>
+        <common-icon
+          v-if="globalConfigStore.currentLocale==='zh-CN'"
+          icon="check"
+        />
         {{ $t('common.label.langCn') }}
       </el-menu-item>
       <el-menu-item
         index="1-2"
         @click="$changeLocale('en-US')"
       >
-        <el-icon v-if="globalConfigStore.currentLocale==='en-US'">
-          <Check />
-        </el-icon>
+        <common-icon
+          v-if="globalConfigStore.currentLocale==='en-US'"
+          icon="check"
+        />
         {{ $t('common.label.langEn') }}
       </el-menu-item>
     </el-sub-menu>

src/main.js

@@ -3,7 +3,8 @@ import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-import { usePinia } from '@/store'
+import { usePinia } from '@/stores'
+import commons from '@/components'
 
 import messagesConfig from '@/languages/MessagesConfig'
 
@@ -18,6 +19,7 @@ app.use(usePinia)
 app.use(router)
 app.use(ElementPlus)
 app.use(messagesConfig)
+app.use(commons)
 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)

src/views/HomeView.vue

@@ -1,13 +1,12 @@
 <script setup>
-import LeftMenu from '@/components/LeftMenu.vue'
-import TopNav from '@/components/TopNav.vue'
+import LeftMenu from '@/layout/LeftMenu.vue'
+import TopNav from '@/layout/TopNav.vue'
 import { ref } from 'vue'
 import dayjs from 'dayjs'
 
 const collapseLeft = ref(false)
 
 const value1 = ref(new Date())
-const color = ref('rgba(19, 206, 102, 0.8)')
 
 const testDay = function () {
   return dayjs.weekdays()
@@ -33,10 +32,6 @@ const testDay = function () {
           type="date"
           placeholder="Pick a day"
         />
-        <el-color-picker
-          v-model="color"
-          show-alpha
-        />
         {{ testDay() }}
         {{ $i18n.locale }}
       </el-main>