国际化、主题处理

src/components/LeftMenu.vue

@@ -1,66 +0,0 @@
-<script setup>
-defineProps({
-  collapseLeft: {
-    type: Boolean
-  }
-})
-</script>
-
-<template>
-  <el-scrollbar>
-    <el-menu
-      :collapse="collapseLeft"
-      :default-openeds="['1']"
-    >
-      <el-menu-item index="0">
-        <span>Simple Element Plus</span>
-        <div v-if="collapseLeft">
-          SEP
-        </div>
-      </el-menu-item>
-      <el-sub-menu index="1">
-        <template #title>
-          <el-icon><setting /></el-icon>
-          <span>{{ $t('menu.label.systemManagement') }}</span>
-        </template>
-        <el-menu-item index="1-1">
-          <el-icon><user /></el-icon>
-          <span>{{ $t('menu.label.userManagement') }}</span>
-        </el-menu-item>
-        <el-menu-item index="1-2">
-          <el-icon><Menu /></el-icon>
-          <span>{{ $t('menu.label.roleManagement') }}</span>
-        </el-menu-item>
-        <el-menu-item index="1-3">
-          <el-icon><lock /></el-icon>
-          <span>{{ $t('menu.label.authorityManagement') }}</span>
-        </el-menu-item>
-        <el-menu-item index="1-4">
-          <el-icon><Menu /></el-icon>
-          <span>{{ $t('menu.label.menuManagement') }}</span>
-        </el-menu-item>
-      </el-sub-menu>
-      <el-sub-menu index="2">
-        <template #title>
-          <el-icon><WarningFilled /></el-icon>
-          <span>{{ $t('menu.label.errorPage') }}</span>
-        </template>
-        <el-menu-item index="2-1">
-          <el-icon><Warning /></el-icon>
-          <span>{{ $t('menu.label.errorPage404') }}</span>
-        </el-menu-item>
-        <el-menu-item index="2-2">
-          <el-icon><Warning /></el-icon>
-          <span>{{ $t('menu.label.errorPage403') }}</span>
-        </el-menu-item>
-        <el-menu-item index="2-3">
-          <el-icon><Warning /></el-icon>
-          <span>{{ $t('menu.label.errorPage500') }}</span>
-        </el-menu-item>
-      </el-sub-menu>
-    </el-menu>
-  </el-scrollbar>
-</template>
-
-<style scoped>
-</style>

src/components/TopNav.vue

@@ -1,102 +0,0 @@
-<script setup>
-
-import { Check } from '@element-plus/icons-vue'
-import { useGlobalConfigStore } from '@/stores/globalConfigStore'
-
-const globalConfigStore = useGlobalConfigStore()
-
-const emit = defineEmits(['update:collapseLeft'])
-const updateCollapseLeft = () => {
-  globalConfigStore.collapseLeft()
-  emit('update:collapseLeft', globalConfigStore.isCollapseLeft)
-}
-
-defineProps({
-  collapseLeft: {
-    type: Boolean
-  }
-})
-</script>
-<template>
-  <el-menu
-    mode="horizontal"
-    :ellipsis="false"
-  >
-    <el-menu-item @click="updateCollapseLeft">
-      <template #title>
-        <el-icon v-if="!globalConfigStore.isCollapseLeft">
-          <Fold />
-        </el-icon>
-        <el-icon v-if="globalConfigStore.isCollapseLeft">
-          <Expand />
-        </el-icon>
-        <span>&nbsp;</span>
-      </template>
-    </el-menu-item>
-    <div class="flex-grow" />
-    <el-sub-menu index="1">
-      <template #title>
-        <span>{{ $t('common.label.language') }}</span>
-      </template>
-      <el-menu-item
-        index="1-1"
-        @click="$changeLocale('zh-CN')"
-      >
-        <el-icon v-if="globalConfigStore.currentLocale==='zh-CN'">
-          <Check />
-        </el-icon>
-        {{ $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>
-        {{ $t('common.label.langEn') }}
-      </el-menu-item>
-    </el-sub-menu>
-    <el-sub-menu index="2">
-      <template #title>
-        {{ $t('common.label.theme') }}
-      </template>
-      <el-menu-item
-        index="2-1"
-        @click="globalConfigStore.changeTheme(false)"
-      >
-        <el-icon v-if="!globalConfigStore.isDarkTheme">
-          <Check />
-        </el-icon>
-        {{ $t('common.label.themeDefault') }}
-      </el-menu-item>
-      <el-menu-item
-        index="2-2"
-        @click="globalConfigStore.changeTheme(true)"
-      >
-        <el-icon v-if="globalConfigStore.isDarkTheme">
-          <Check />
-        </el-icon>
-        {{ $t('common.label.themeDark') }}
-      </el-menu-item>
-    </el-sub-menu>
-    <el-sub-menu index="3">
-      <template #title>
-        {{ $t('common.label.personalCenter') }}
-      </template>
-      <el-menu-item index="3-1">
-        {{ $t('common.label.personalInfo') }}
-      </el-menu-item>
-      <el-menu-item index="3-2">
-        {{ $t('common.label.about') }}
-      </el-menu-item>
-      <el-menu-item index="3-3">
-        {{ $t('common.label.logout') }}
-      </el-menu-item>
-    </el-sub-menu>
-  </el-menu>
-</template>
-
-<style scoped>
-
-</style>

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))
+    }
+  }
+}