From 45ccfddba57f2435650fc63c8ee51b94f74159b4 Mon Sep 17 00:00:00 2001
From: Gary Fu <xuebaiyouling@gmail.com>
Date: Sun, 17 Dec 2023 15:11:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BD=E9=99=85=E5=8C=96=E3=80=81=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                     |  2 +-
 src/components/TopNav.vue       | 24 +++++++++---------------
 src/languages/MessagesConfig.js |  2 +-
 src/languages/messages_cn.js    |  1 -
 src/languages/messages_en.js    |  1 -
 src/store.js                    |  2 +-
 src/stores/globalConfig.js      | 12 ------------
 src/stores/globalConfigStore.js | 25 +++++++++++++++++++++++++
 8 files changed, 37 insertions(+), 32 deletions(-)
 delete mode 100644 src/stores/globalConfig.js
 create mode 100644 src/stores/globalConfigStore.js

diff --git a/src/App.vue b/src/App.vue
index e4ffa9e..2be0b2d 100644
--- a/src/App.vue
+++ b/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()
diff --git a/src/components/TopNav.vue b/src/components/TopNav.vue
index 77c9c56..68c2b28 100644
--- a/src/components/TopNav.vue
+++ b/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
-  emit('update:collapseLeft', isCollapseLeft.value)
+  globalConfigStore.collapseLeft()
+  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') }}
diff --git a/src/languages/MessagesConfig.js b/src/languages/MessagesConfig.js
index 474f41d..aba1e62 100644
--- a/src/languages/MessagesConfig.js
+++ b/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的语言配置
diff --git a/src/languages/messages_cn.js b/src/languages/messages_cn.js
index b15b42a..2c0ba90 100644
--- a/src/languages/messages_cn.js
+++ b/src/languages/messages_cn.js
@@ -9,7 +9,6 @@ export default {
       theme: '主题',
       themeDefault: '默认',
       themeDark: '黑色',
-      themePurple: '紫色',
       personalCenter: '个人中心',
       personalInfo: '个人资料',
       about: '关于',
diff --git a/src/languages/messages_en.js b/src/languages/messages_en.js
index 346a2d2..18a4819 100644
--- a/src/languages/messages_en.js
+++ b/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',
diff --git a/src/store.js b/src/store.js
index 3655fe5..4bee36c 100644
--- a/src/store.js
+++ b/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) {
diff --git a/src/stores/globalConfig.js b/src/stores/globalConfig.js
deleted file mode 100644
index 969c6d9..0000000
--- a/src/stores/globalConfig.js
+++ /dev/null
@@ -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
-})
diff --git a/src/stores/globalConfigStore.js b/src/stores/globalConfigStore.js
new file mode 100644
index 0000000..cbf3eae
--- /dev/null
+++ b/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
+})