fix: save apperance by localstorage

Signed-off-by: Kaifuny <superbiger.github@gmail.com>

contact-frontend/package.json

@@ -24,6 +24,7 @@
     "idb": "^7.1.1",
     "pinia": "^2.1.4",
     "vue": "^3.3.4",
+    "vue-i18n": "9.3.0-beta.19",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
@@ -46,7 +47,6 @@
     "typescript": "^5.0.2",
     "vite": "^4.4.0",
     "vitest": "^0.33.0",
-    "vue-i18n": "^9.2.2",
     "vue-tsc": "^1.8.3"
   },
   "msw": {

contact-frontend/packages/apps/web/src/layouts/NavLayout.vue

@@ -39,35 +39,37 @@ const dropdownMenus = [
   { label: '退出登录', value: 'logout' },
 ]
 
-const current = ref<string>(ROUTE_NAME.DASHBOARD_INDEX)
+const drawerShow = ref(false)
+const currentPath = ref<string>(ROUTE_NAME.DASHBOARD_INDEX)
+
 const path = window.location.pathname.split('/')[1]
 switch (path) {
   case 'dashboard':
-    current.value = ROUTE_NAME.DASHBOARD_INDEX
+    currentPath.value = ROUTE_NAME.DASHBOARD_INDEX
     break
   case 'chat':
-    current.value = ROUTE_NAME.CHAT_INDEX
+    currentPath.value = ROUTE_NAME.CHAT_INDEX
     break
   case 'work-order':
-    current.value = ROUTE_NAME.WORK_ORDER_INDEX
+    currentPath.value = ROUTE_NAME.WORK_ORDER_INDEX
     break
   case 'seats':
-    current.value = ROUTE_NAME.SEATS_INDEX
+    currentPath.value = ROUTE_NAME.SEATS_INDEX
     break
   case 'organization':
-    current.value = ROUTE_NAME.ORGANIZATION_INDEX
+    currentPath.value = ROUTE_NAME.ORGANIZATION_INDEX
     break
   case 'setting':
-    current.value = ROUTE_NAME.SETTING_INDEX
+    currentPath.value = ROUTE_NAME.SETTING_INDEX
     break
   case 'system':
-    current.value = ROUTE_NAME.SYSTEM_INDEX
+    currentPath.value = ROUTE_NAME.SYSTEM_INDEX
     break
   case 'profile':
-    current.value = ROUTE_NAME.PROFILE_INDEX
+    currentPath.value = ROUTE_NAME.PROFILE_INDEX
     break
   default:
-    current.value = ROUTE_NAME.PAGE_NOT_FOUND
+    currentPath.value = ROUTE_NAME.PAGE_NOT_FOUND
 }
 const router = useRouter()
 
@@ -82,8 +84,6 @@ function handleClickNav(name: string) {
   }
   router.push({ name })
 }
-
-const active = ref(false)
 </script>
 <template>
   <div class="flex flex-col h-screen bg-gray-100">
@@ -92,7 +92,7 @@ const active = ref(false)
       到期（剩余30天），如继续试用请联系管理员
     </n-alert>
     <Nav
-      v-model:current="current"
+      v-model:current="currentPath"
       avatar-url="https://avatars.githubusercontent.com/u/16386583?v=4"
       :navigations="navigations"
       :dropdown-menus="dropdownMenus"
@@ -100,7 +100,7 @@ const active = ref(false)
     >
       <template #production>
         <div class="flex items-center space-x-2">
-          <div class="text-sm">XX公司官网</div>
+          <div class="text-sm">XX 公司官网</div>
           <span>-</span>
           <div class="text-sm">默认客服部门</div>
         </div>
@@ -114,7 +114,7 @@ const active = ref(false)
           class="flex items-center cursor-pointer"
           :component="NotificationsOutline"
           size="25"
-          @click="active = !active"
+          @click="drawerShow = !drawerShow"
         />
       </n-badge>
 
@@ -151,7 +151,7 @@ const active = ref(false)
       <router-view></router-view>
     </div>
     <n-drawer
-      v-model:show="active"
+      v-model:show="drawerShow"
       :width="502"
       :height="200"
       placement="right"

contact-frontend/packages/modules/common/src/store/modules/apperance.ts

@@ -1,18 +1,24 @@
 import { defineStore } from 'pinia'
 import { Apperance } from '@cskefu/models'
+import { useStorage } from '@vueuse/core'
 
 export const useApperance = defineStore('alerts', {
-  state: (): Apperance => ({ lang: 'zh-CN', darkMode: false }),
+  state: () => ({
+    apperance: useStorage<Apperance>('apperance', {
+      lang: 'zh-CN',
+      darkMode: false,
+    }),
+  }),
   getters: {
-    isDarkMode: (state) => state.darkMode,
+    isDarkMode: (state) => state.apperance.darkMode,
-    getLang: (state) => state.lang,
+    getLang: (state) => state.apperance.lang,
   },
   actions: {
     toggleDarkMode() {
-      this.darkMode = !this.darkMode
+      this.apperance.darkMode = !this.apperance.darkMode
     },
-    changeLang(lang: string) {
+    setLang(lang: string) {
-      this.lang = lang
+      this.apperance.lang = lang
     },
   },
 })

contact-frontend/packages/modules/i18n/package.json

@@ -3,6 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "dependencies": {
+    "@cskefu/models": "*"
+  },
   "exports": {
     ".": {
       "import": {

contact-frontend/packages/modules/i18n/src/index.ts

@@ -1,6 +1,9 @@
 import { App } from 'vue'
 import { createI18n } from 'vue-i18n'
 import _ from 'lodash-es'
+import { useLocalStorage } from '@vueuse/core'
+
+import { Apperance } from '@cskefu/models'
 
 /**
  * 语言支持类型
@@ -10,14 +13,21 @@ export const defaultLocale = 'zh-CN'
 const localPathPrefix = './locales/'
 
 const getValidLocale = (defaults: string = defaultLocale): string => {
-  const locale = window.localStorage.getItem('locale')
+  const storage = useLocalStorage<Apperance>('apperance', {
-  if (locale && locales.includes(locale)) {
+    lang: defaults,
-    return locale
+    darkMode: false,
-  }
+  })
+
   const param = new URLSearchParams(window.location.search).get('lang')
   if (param && locales.includes(param)) {
-    return param
+    storage.value.lang = param
   }
+
+  const lang = storage.value?.lang || defaults
+  if (locales.includes(lang)) {
+    return lang
+  }
+
   return defaults
 }
 

contact-frontend/packages/modules/i18n/tsconfig.json

@@ -2,12 +2,13 @@
   "extends": "../../../tsconfig.json",
   "include": ["src/**/*.ts"],
   "compilerOptions": {
+    "baseUrl": "./",
     "types": ["vite/client"],
     "composite": true,
     "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "resolvePackageJsonExports": false,
+    "resolvePackageJsonExports": true,
     "allowSyntheticDefaultImports": true,
   }
 }

contact-frontend/pnpm-lock.yaml

@@ -26,13 +26,16 @@ importers:
       vue:
         specifier: ^3.3.4
         version: 3.3.4
+      vue-i18n:
+        specifier: 9.3.0-beta.19
+        version: 9.3.0-beta.19(vue@3.3.4)
       vue-router:
         specifier: ^4.2.4
         version: 4.2.4(vue@3.3.4)
     devDependencies:
       '@intlify/unplugin-vue-i18n':
         specifier: ^0.12.0
-        version: 0.12.0(vue-i18n@9.2.2)
+        version: 0.12.0(vue-i18n@9.3.0-beta.19)
       '@types/lodash-es':
         specifier: ^4.17.8
         version: 4.17.8
@@ -87,9 +90,6 @@ importers:
       vitest:
         specifier: ^0.33.0
         version: 0.33.0
-      vue-i18n:
-        specifier: ^9.2.2
-        version: 9.2.2(vue@3.3.4)
       vue-tsc:
         specifier: ^1.8.3
         version: 1.8.3(typescript@5.1.6)
@@ -163,7 +163,11 @@ importers:
         specifier: '*'
         version: link:../models
 
-  packages/modules/i18n: {}
+  packages/modules/i18n:
+    dependencies:
+      '@cskefu/models':
+        specifier: '*'
+        version: link:../models
 
   packages/modules/mocks: {}
 
@@ -1123,7 +1127,7 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-  /@intlify/bundle-utils@7.0.2(vue-i18n@9.2.2):
+  /@intlify/bundle-utils@7.0.2(vue-i18n@9.3.0-beta.19):
     resolution: {integrity: sha512-8wbx9xhbawBFTE5LPTECiK26RRqrNS31jyWSur72ZXZZ4it5jiZTcG6eUJlNirr4+jXYio2DGY299JsGVT4cpw==}
     engines: {node: '>= 14.16'}
     peerDependencies:
@@ -1144,34 +1148,31 @@ packages:
       magic-string: 0.30.1
       mlly: 1.4.0
       source-map-js: 1.0.2
-      vue-i18n: 9.2.2(vue@3.3.4)
+      vue-i18n: 9.3.0-beta.19(vue@3.3.4)
       yaml-eslint-parser: 0.3.2
     dev: true
 
-  /@intlify/core-base@9.2.2:
+  /@intlify/core-base@9.3.0-beta.19:
-    resolution: {integrity: sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==}
+    resolution: {integrity: sha512-mlpVZ1w6ZwnP9QZAs+RzGuFMCuYjZPboX3hX7JzhV49vUcsLj0R4667cmcLpPZzXJguIy/zaqbIyoUvLV8HONQ==}
-    engines: {node: '>= 14'}
+    engines: {node: '>= 16'}
     dependencies:
-      '@intlify/devtools-if': 9.2.2
+      '@intlify/devtools-if': 9.3.0-beta.19
-      '@intlify/message-compiler': 9.2.2
+      '@intlify/message-compiler': 9.3.0-beta.19
-      '@intlify/shared': 9.2.2
+      '@intlify/shared': 9.3.0-beta.19
-      '@intlify/vue-devtools': 9.2.2
+      '@intlify/vue-devtools': 9.3.0-beta.19
-    dev: true
 
-  /@intlify/devtools-if@9.2.2:
+  /@intlify/devtools-if@9.3.0-beta.19:
-    resolution: {integrity: sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==}
+    resolution: {integrity: sha512-L4NyqMcuQURejKy9XX0m/2kb37f56NAUvbiXKRx96pahSBclY6T+E0TrKXup0Hx6T0qY55QYGRwyVLeHXIHAMA==}
-    engines: {node: '>= 14'}
+    engines: {node: '>= 16'}
     dependencies:
-      '@intlify/shared': 9.2.2
+      '@intlify/shared': 9.3.0-beta.19
-    dev: true
 
-  /@intlify/message-compiler@9.2.2:
+  /@intlify/message-compiler@9.3.0-beta.19:
-    resolution: {integrity: sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==}
+    resolution: {integrity: sha512-5RBn5tMOsWh5FqM65IfEJvfpRS8R0lHEUVNDa2rNc9Y7oGEI7swezlbFqU9Kc5FyHy5Kx2jHtdgFIipDwnIYFQ==}
-    engines: {node: '>= 14'}
+    engines: {node: '>= 16'}
     dependencies:
-      '@intlify/shared': 9.2.2
+      '@intlify/shared': 9.3.0-beta.19
       source-map: 0.6.1
-    dev: true
 
   /@intlify/message-compiler@9.3.0-beta.24:
     resolution: {integrity: sha512-prhHATkgp0mpPqoVgiAtLmUc1JMvs8fMH6w53AVEBn+VF87dLhzanfmWY5FoZWORG51ag54gBDBOoM/VFv3m3A==}
@@ -1181,10 +1182,9 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
-  /@intlify/shared@9.2.2:
+  /@intlify/shared@9.3.0-beta.19:
-    resolution: {integrity: sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==}
+    resolution: {integrity: sha512-+lhQggrLvlQ/O5OmIYAc9gadcYXMoaDi0Doef+X/f6TLZFr9PTMjOpBWmpwNNHi026e54jckntUn6GzqDtIN4w==}
-    engines: {node: '>= 14'}
+    engines: {node: '>= 16'}
-    dev: true
 
   /@intlify/shared@9.3.0-beta.20:
     resolution: {integrity: sha512-RucSPqh8O9FFxlYUysQTerSw0b9HIRpyoN1Zjogpm0qLiHK+lBNSa5sh1nCJ4wSsNcjphzgpLQCyR60GZlRV8g==}
@@ -1196,7 +1196,7 @@ packages:
     engines: {node: '>= 16'}
     dev: true
 
-  /@intlify/unplugin-vue-i18n@0.12.0(vue-i18n@9.2.2):
+  /@intlify/unplugin-vue-i18n@0.12.0(vue-i18n@9.3.0-beta.19):
     resolution: {integrity: sha512-L155p03eZpzYUIU1YKbb38xq++GcaW6bsqo800GdonmkQXY8nc4/HsKQRQY5lRoAOkbhO0Vyt7yrsU11vVrqnw==}
     engines: {node: '>= 14.16'}
     peerDependencies:
@@ -1211,7 +1211,7 @@ packages:
       vue-i18n-bridge:
         optional: true
     dependencies:
-      '@intlify/bundle-utils': 7.0.2(vue-i18n@9.2.2)
+      '@intlify/bundle-utils': 7.0.2(vue-i18n@9.3.0-beta.19)
       '@intlify/shared': 9.3.0-beta.20
       '@rollup/pluginutils': 5.0.2
       '@vue/compiler-sfc': 3.3.4
@@ -1223,19 +1223,18 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
       unplugin: 1.3.2
-      vue-i18n: 9.2.2(vue@3.3.4)
+      vue-i18n: 9.3.0-beta.19(vue@3.3.4)
     transitivePeerDependencies:
       - rollup
       - supports-color
     dev: true
 
-  /@intlify/vue-devtools@9.2.2:
+  /@intlify/vue-devtools@9.3.0-beta.19:
-    resolution: {integrity: sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==}
+    resolution: {integrity: sha512-7yz8sUbovPUIf8sCX3+sMdw/xEyeHKBCc7Agxcxv54PiQz3zwsVl0hC1X+JXUy46FiPsMEoFfY8O27xOFLupaw==}
-    engines: {node: '>= 14'}
+    engines: {node: '>= 16'}
     dependencies:
-      '@intlify/core-base': 9.2.2
+      '@intlify/core-base': 9.3.0-beta.19
-      '@intlify/shared': 9.2.2
+      '@intlify/shared': 9.3.0-beta.19
-    dev: true
 
   /@jest/schemas@29.6.0:
     resolution: {integrity: sha512-rxLjXyJBTL4LQeJW3aKo0M/+GkCOXsO+8i9Iu7eDb6KwtP65ayoDsitrdPBtujxQ88k4wI2FNYfa6TOGwSn6cQ==}
@@ -3969,7 +3968,6 @@ packages:
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
@@ -4446,18 +4444,17 @@ packages:
       - supports-color
     dev: true
 
-  /vue-i18n@9.2.2(vue@3.3.4):
+  /vue-i18n@9.3.0-beta.19(vue@3.3.4):
-    resolution: {integrity: sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==}
+    resolution: {integrity: sha512-1pbEcoAbxaAPuR5hODnQJ5CtIimnVD+aUVnCztuuRaOZPLP1i4FxkWVvb1lu8JIRC5pePyODZxi3yoy3PUYheA==}
-    engines: {node: '>= 14'}
+    engines: {node: '>= 16'}
     peerDependencies:
       vue: ^3.0.0
     dependencies:
-      '@intlify/core-base': 9.2.2
+      '@intlify/core-base': 9.3.0-beta.19
-      '@intlify/shared': 9.2.2
+      '@intlify/shared': 9.3.0-beta.19
-      '@intlify/vue-devtools': 9.2.2
+      '@intlify/vue-devtools': 9.3.0-beta.19
       '@vue/devtools-api': 6.5.0
       vue: 3.3.4
-    dev: true
 
   /vue-router@4.2.4(vue@3.3.4):
     resolution: {integrity: sha512-9PISkmaCO02OzPVOMq2w82ilty6+xJmQrarYZDkjZBfl4RvYAlt4PKnEX21oW4KTtWfa9OuO/b3qk1Od3AEdCQ==}