国际化、主题处理

src/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useGlobalConfigStore } from '@/stores/globalConfig'
+import { useGlobalConfigStore } from '@/stores/globalConfigStore'
 import { $changeLocale, elementLocale } from '@/languages/MessagesConfig'
 
 const globalConfigStore = useGlobalConfigStore()

src/components/TopNav.vue

@@ -1,22 +1,16 @@
 <script setup>
 
-import { ref } from 'vue'
-import { useDark } from '@vueuse/core'
 import { Check } from '@element-plus/icons-vue'
-import { useGlobalConfigStore } from '@/stores/globalConfig'
+import { useGlobalConfigStore } from '@/stores/globalConfigStore'
 
 const globalConfigStore = useGlobalConfigStore()
 
-const isCollapseLeft = ref(false)
-
 const emit = defineEmits(['update:collapseLeft'])
 const updateCollapseLeft = () => {
-  isCollapseLeft.value = !isCollapseLeft.value
+  globalConfigStore.collapseLeft()
-  emit('update:collapseLeft', isCollapseLeft.value)
+  emit('update:collapseLeft', globalConfigStore.isCollapseLeft)
 }
 
-const isDark = useDark()
-
 defineProps({
   collapseLeft: {
     type: Boolean
@@ -30,10 +24,10 @@ defineProps({
   >
     <el-menu-item @click="updateCollapseLeft">
       <template #title>
-        <el-icon v-if="!isCollapseLeft">
+        <el-icon v-if="!globalConfigStore.isCollapseLeft">
           <Fold />
         </el-icon>
-        <el-icon v-if="isCollapseLeft">
+        <el-icon v-if="globalConfigStore.isCollapseLeft">
           <Expand />
         </el-icon>
         <span>&nbsp;</span>
@@ -69,18 +63,18 @@ defineProps({
       </template>
       <el-menu-item
         index="2-1"
-        @click="isDark=false"
+        @click="globalConfigStore.changeTheme(false)"
       >
-        <el-icon v-if="!isDark">
+        <el-icon v-if="!globalConfigStore.isDarkTheme">
           <Check />
         </el-icon>
         {{ $t('common.label.themeDefault') }}
       </el-menu-item>
       <el-menu-item
         index="2-2"
-        @click="isDark=true"
+        @click="globalConfigStore.changeTheme(true)"
       >
-        <el-icon v-if="isDark">
+        <el-icon v-if="globalConfigStore.isDarkTheme">
           <Check />
         </el-icon>
         {{ $t('common.label.themeDark') }}

src/languages/MessagesConfig.js

@@ -6,7 +6,7 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import en from 'element-plus/dist/locale/en.mjs'
 import 'dayjs/locale/zh-cn'
 import dayjs from 'dayjs'
-import { useGlobalConfigStore } from '@/stores/globalConfig'
+import { useGlobalConfigStore } from '@/stores/globalConfigStore'
 
 const DEFAULT_LOCALE = 'zh-CN'
 dayjs.locale(DEFAULT_LOCALE) // dayjs的语言配置

src/languages/messages_cn.js

@@ -9,7 +9,6 @@ export default {
       theme: '主题',
       themeDefault: '默认',
       themeDark: '黑色',
-      themePurple: '紫色',
       personalCenter: '个人中心',
       personalInfo: '个人资料',
       about: '关于',

src/languages/messages_en.js

@@ -9,7 +9,6 @@ export default {
       theme: 'Themes',
       themeDefault: 'default',
       themeDark: 'dark',
-      themePurple: 'purple',
       personalCenter: 'Personal Center',
       personalInfo: 'Personal Info',
       about: 'About',

src/store.js

@@ -1,6 +1,6 @@
 import { defineStore, createPinia } from 'pinia'
 import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
-import { useGlobalConfigStore } from '@/stores/globalConfig'
+import { useGlobalConfigStore } from '@/stores/globalConfigStore'
 
 export const usePinia = {
   install (app) {

src/stores/globalConfig.js

@@ -1,12 +0,0 @@
-import { ref } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useGlobalConfigStore = defineStore('globalConfig', () => {
-  const currentLocale = ref('zh-CN')
-  const changeLocale = function (locale) {
-    currentLocale.value = locale
-  }
-  return { currentLocale, changeLocale }
-}, {
-  persist: true
-})

src/stores/globalConfigStore.js

@@ -0,0 +1,25 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { useDark } from '@vueuse/core'
+
+export const useGlobalConfigStore = defineStore('globalConfig', () => {
+  const currentLocale = ref('zh-CN')
+  const isDarkTheme = useDark()
+  const isCollapseLeft = ref(false)
+  return {
+    currentLocale,
+    isDarkTheme,
+    isCollapseLeft,
+    changeLocale (locale) {
+      currentLocale.value = locale
+    },
+    changeTheme (dark) {
+      isDarkTheme.value = dark
+    },
+    collapseLeft () {
+      isCollapseLeft.value = !isCollapseLeft.value
+    }
+  }
+}, {
+  persist: true
+})