国际化、主题处理

src/App.vue

@@ -1,9 +1,13 @@
 <script setup>
+import { useGlobalConfigStore } from '@/stores/globalConfig'
+import { $changeLocale, elementLocale } from '@/languages/MessagesConfig'
 
+const globalConfigStore = useGlobalConfigStore()
+$changeLocale(globalConfigStore.currentLocale)
 </script>
 
 <template>
-  <el-config-provider :locale="$currentLocale.localeData">
+  <el-config-provider :locale="elementLocale.localeData">
     <router-view />
   </el-config-provider>
 </template>

src/components/TopNav.vue

@@ -1,6 +1,11 @@
 <script setup>
 
 import { ref } from 'vue'
+import { useDark } from '@vueuse/core'
+import { Check } from '@element-plus/icons-vue'
+import { useGlobalConfigStore } from '@/stores/globalConfig'
+
+const globalConfigStore = useGlobalConfigStore()
 
 const isCollapseLeft = ref(false)
 
@@ -10,6 +15,8 @@ const updateCollapseLeft = () => {
   emit('update:collapseLeft', isCollapseLeft.value)
 }
 
+const isDark = useDark()
+
 defineProps({
   collapseLeft: {
     type: Boolean
@@ -41,12 +48,18 @@ defineProps({
         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>
@@ -54,15 +67,24 @@ defineProps({
       <template #title>
         {{ $t('common.label.theme') }}
       </template>
-      <el-menu-item index="2-1">
+      <el-menu-item
+        index="2-1"
+        @click="isDark=false"
+      >
+        <el-icon v-if="!isDark">
+          <Check />
+        </el-icon>
         {{ $t('common.label.themeDefault') }}
       </el-menu-item>
-      <el-menu-item index="2-2">
+      <el-menu-item
+        index="2-2"
+        @click="isDark=true"
+      >
+        <el-icon v-if="isDark">
+          <Check />
+        </el-icon>
         {{ $t('common.label.themeDark') }}
       </el-menu-item>
-      <el-menu-item index="2-3">
-        {{ $t('common.label.themePurple') }}
-      </el-menu-item>
     </el-sub-menu>
     <el-sub-menu index="3">
       <template #title>

src/languages/MessagesConfig.js

@@ -1,11 +1,12 @@
 import { createI18n } from 'vue-i18n'
-import { reactive } from 'vue'
+import { ref } from 'vue'
 import messagesCn from './messages_cn'
 import messagesEn from './messages_en'
 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'
 
 const DEFAULT_LOCALE = 'zh-CN'
 dayjs.locale(DEFAULT_LOCALE) // dayjs的语言配置
@@ -20,20 +21,20 @@ const i18n = createI18n({
   } // set locale messages
 })
 
-const $currentLocale = reactive({ // 用于element-plus
+export const elementLocale = ref({ // 用于element-plus
   localeData: zhCn
 })
 
-const $changeLocale = function (locale) {
-  this.$i18n.locale = locale
-  this.$currentLocale.localeData = locale === DEFAULT_LOCALE ? zhCn : en
+export const $changeLocale = function (locale) {
+  i18n.global.locale.value = locale
+  elementLocale.value.localeData = locale === DEFAULT_LOCALE ? zhCn : en
   dayjs.locale(locale.toLowerCase())
+  useGlobalConfigStore().changeLocale(locale)
 }
 
 export default {
   install (app) {
     app.use(i18n)
-    app.config.globalProperties.$currentLocale = $currentLocale
     app.config.globalProperties.$changeLocale = $changeLocale
   }
 }

src/main.js

@@ -1,8 +1,9 @@
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 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 messagesConfig from '@/languages/MessagesConfig'
 
@@ -13,7 +14,7 @@ import './assets/main.css'
 
 const app = createApp(App)
 
-app.use(createPinia())
+app.use(usePinia)
 app.use(router)
 app.use(ElementPlus)
 app.use(messagesConfig)

src/store.js

@@ -0,0 +1,17 @@
+import { defineStore, createPinia } from 'pinia'
+import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
+import { useGlobalConfigStore } from '@/stores/globalConfig'
+
+export const usePinia = {
+  install (app) {
+    const pinia = createPinia()
+    pinia.use(piniaPluginPersistedState)
+    app.use(pinia)
+    return pinia
+  }
+}
+export const useStore = defineStore('store', () => {
+  return {
+    globalConfig: useGlobalConfigStore()
+  }
+})

src/stores/counter.js

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

src/stores/globalConfig.js

@@ -7,4 +7,6 @@ export const useGlobalConfigStore = defineStore('globalConfig', () => {
     currentLocale.value = locale
   }
   return { currentLocale, changeLocale }
+}, {
+  persist: true
 })