fix(darkmode): modify to useDark

build/plugins/mock.ts

@@ -2,6 +2,6 @@ import { viteMockServe } from 'vite-plugin-mock' // https://github.com/vbenjs/vi
 
 export default viteMockServe({
   mockPath: 'mock',
-  enable: true,
+  // enable: true,
   // watchFiles: false,
 })

package.json

@@ -59,7 +59,7 @@
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.2",
     "md-editor-v3": "^4.2.0",
-    "pinia": "^2.1.3",
+    "pinia": "^2.1.4",
     "pinia-plugin-persist": "^1.0.0",
     "qs": "^6.11.2",
     "vue": "^3.3.4",
@@ -81,10 +81,10 @@
     "commitizen": "^4.2.6",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^7.0.0",
-    "eslint": "^8.42.0",
+    "eslint": "^8.43.0",
     "husky": "^8.0.3",
     "less": "^4.1.3",
-    "lint-staged": "^13.1.0",
+    "lint-staged": "^13.2.2",
     "mockjs": "^1.1.0",
     "naive-ui": "^2.34.4",
     "rollup-plugin-visualizer": "^5.9.0",
@@ -97,9 +97,9 @@
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vite-plugin-vue-devtools": "^0.2.0",
+    "vite-plugin-vue-devtools": "^0.2.1",
     "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.6.5"
+    "vue-tsc": "^1.8.1"
   },
   "lint-staged": {
     "*.{js,jsx,mjs,ts,tsx,json,md,yml}": [

src/App.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
 import type { GlobalThemeOverrides } from 'naive-ui'
-import { dateZhCN, useOsTheme, zhCN } from 'naive-ui'
+import { darkTheme, dateZhCN, zhCN } from 'naive-ui'
 import { useAppStore } from './store'
 import themeConfig from './theme.json'
 
 const locale = zhCN
 const dateLocale = dateZhCN
 const appStore = useAppStore()
-const osThemeRef = useOsTheme()
-appStore.setDarkMode(osThemeRef.value === 'dark')
+// const osThemeRef = useOsTheme()
+// appStore.toggleDarkMode(osThemeRef.value === 'dark')
 
 const themeOverrides: GlobalThemeOverrides = {} || themeConfig
 </script>
 
 <template>
   <n-config-provider
-    class="wh-full" :theme="appStore.darkTheme" :locale="locale" :date-locale="dateLocale"
+    class="wh-full" :theme="appStore.darkMode ? darkTheme : null" :locale="locale" :date-locale="dateLocale"
     :theme-overrides="themeOverrides"
   >
     <naive-provider><router-view /></naive-provider>

src/main.ts

@@ -3,27 +3,32 @@ import AppLoading from './components/common/appLoading.vue'
 import { setupRouter } from './router'
 import { setupAssets } from './plugins'
 import { setupStore } from './store'
-
 import { setupDirectives } from './directive'
 
 async function setupApp() {
   // 引入静态资源
   setupAssets()
+
+  // 创建vue实例
+  const app = createApp(App)
+
+  // 安装pinia全局状态库
+  setupStore(app)
+
   // 载入全局loading加载状态
   const appLoading = createApp(AppLoading)
   appLoading.mount('#appLoading')
 
-  // 创建vue实例
-  const app = createApp(App)
-  // 安装pinia全局状态库
-  setupStore (app)
   // 安装自定义指令
   setupDirectives(app)
+
   // 安装router
   await setupRouter(app)
-  // 挂载
-  app.mount('#app')
+
   // 卸载载入动画
   appLoading.unmount()
+
+  // 挂载
+  app.mount('#app')
 }
 await setupApp()

src/store/index.ts

@@ -2,8 +2,9 @@ import piniaPluginPersist from 'pinia-plugin-persist'
 import type { App } from 'vue'
 
 export function setupStore(app: App) {
-  const store = createPinia()
-  store.use(piniaPluginPersist)
-  app.use(store)
+  const pinia = createPinia()
+  pinia.use(piniaPluginPersist)
+  app.use(pinia)
 }
+
 export * from './modules'

src/store/modules/app.ts

@@ -1,6 +1,3 @@
-import type { GlobalTheme } from 'naive-ui'
-import { darkTheme } from 'naive-ui'
-
 interface AppStatus {
   readonly footerText: string
   collapsed: boolean
@@ -8,7 +5,6 @@ interface AppStatus {
   darkMode: boolean
   grayMode: boolean
   colorWeak: boolean
-  darkTheme: GlobalTheme | null
   loadFlag: boolean
   showLogo: boolean
   showTabs: boolean
@@ -23,16 +19,19 @@ const docEle = document.documentElement
 
 const { isFullscreen, toggle } = useFullscreen(docEle)
 
+const isDark = useDark({
+  storageKey: 'admin-dark-mode',
+})
+
 export const useAppStore = defineStore('app-store', {
   state: (): AppStatus => {
     return {
       footerText: 'Copyright ©2023 Ench Admin',
       collapsed: false,
-      fullScreen: isFullscreen.value,
-      darkMode: false,
+      fullScreen: false,
+      darkMode: isDark.value,
       grayMode: false,
       colorWeak: false,
-      darkTheme: null,
       loadFlag: true,
       showLogo: true,
       showTabs: true,
@@ -54,22 +53,14 @@ export const useAppStore = defineStore('app-store', {
       await toggle()
     },
     /* 切换主题 亮/深色 */
-    toggleDarkMode() {
-      this.darkMode = !this.darkMode
-      if (this.darkMode)
-        this.darkTheme = darkTheme
-      else this.darkTheme = null
-    },
-    /* 设置主题深色 */
-    setDarkMode(mode: boolean) {
-      if (mode) {
-        this.darkMode = true
-        this.darkTheme = darkTheme
-      }
-      else {
-        this.darkMode = false
-        this.darkTheme = null
-      }
+    toggleDarkMode(mode?: boolean) {
+      if (typeof mode === 'boolean')
+        isDark.value = mode
+
+      else
+        isDark.value = !isDark.value
+
+      this.darkMode = isDark.value
     },
     /**
      * @description: 页面内容重载

src/store/modules/auth.ts

@@ -4,7 +4,6 @@ import { router } from '@/router'
 import { useAppRouter } from '@/hooks'
 import { local } from '@/utils'
 
-const routeStore = useRouteStore()
 const emptyInfo: Auth.UserInfo = {
   userId: 0,
   userName: '',
@@ -35,6 +34,7 @@ export const useAuthStore = defineStore('auth-store', {
       // 清除本地缓存
       this.clearAuthStorage()
       // 清空路由、菜单等数据
+      const routeStore = useRouteStore()
       routeStore.resetRouteStore()
       this.$reset()
       if (route.meta.requiresAuth)
@@ -66,7 +66,7 @@ export const useAuthStore = defineStore('auth-store', {
       const catchSuccess = await this.catchUserInfo(data)
 
       // 添加路由和菜单
-      // const { initAuthRoute } = useRouteStore()
+      const routeStore = useRouteStore()
       await routeStore.initAuthRoute()
 
       // 登录写入信息成功