重构themeStore

src/components/GlobalHeader.vue

@@ -4,9 +4,14 @@ import { useUserStore } from '@/stores/user'
 import config from '@/config/defaultSetting'
 import avatar from '@/assets/images/avatar.png'
 import { ElMessageBox } from 'element-plus'
+import router from '@/router'
 
 const iconSize = ref('22')
 
+const handleLogoClick = () => {
+  router.push({ name: config.homeRouteName })
+}
+
 // 菜单收缩展开切换
 const menuStore = useMenuStore()
 const [value, toggle] = useToggle()
@@ -42,7 +47,11 @@ const settingVisible = ref(false)
 
 <template>
   <header class="layout-header">
-    <div class="logo flex items-center justify-center" :class="{ collapse: value }">
+    <div
+      class="logo flex items-center justify-center cursor-pointer"
+      :class="{ collapse: value }"
+      @click="handleLogoClick"
+    >
       <img :src="config.logo" class="h-36px" />
       <div class="ml-2" :class="{ hidden: value }">{{ config.title }}</div>
     </div>

src/stores/router.ts

@@ -46,7 +46,6 @@ function filterAsyncRouter(routerMap: RouteRecordRaw[], role: any[]) {
 // 过滤掉hidden为true的路由
 function filterMenuRouter(routerMap: RouteRecordRaw[]) {
   const accessedRouters = routerMap.filter(route => {
-    console.log(route)
     if (!route.hidden) {
       if (route.children && route.children.length) {
         route.children = filterMenuRouter(route.children)

src/stores/theme.ts

@@ -1,26 +1,27 @@
 import config from '@/config/defaultSetting'
 import colorUtil from '@/utils/color'
 
-export const useThemeStore = defineStore({
-  id: 'theme',
-  state: () => ({
-    themeColor: localStorage.getItem('themeColor') || config.themeColor
-  }),
-  actions: {
-    setThemeColor(themeColor: string) {
-      this.themeColor = themeColor
-      localStorage.setItem('themeColor', themeColor)
-      this.initThemeColor()
-    },
-    initThemeColor() {
-      const primary = this.themeColor
-      document.documentElement.style.setProperty('--el-color-primary', primary)
-      for (let i = 1; i <= 9; i++) {
-        document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorUtil.lighten(primary, i / 10))
-      }
-      for (let i = 1; i <= 9; i++) {
-        document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorUtil.darken(primary, i / 10))
-      }
+export const useThemeStore = defineStore('theme', () => {
+  const themeColor = useStorage('themeColor', config.themeColor)
+
+  const setThemeColor = (color: string) => {
+    themeColor.value = color
+    initThemeColor()
+  }
+  const initThemeColor = () => {
+    const primary = themeColor.value
+    document.documentElement.style.setProperty('--el-color-primary', primary)
+    for (let i = 1; i <= 9; i++) {
+      document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorUtil.lighten(primary, i / 10))
+    }
+    for (let i = 1; i <= 9; i++) {
+      document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorUtil.darken(primary, i / 10))
     }
   }
+
+  return {
+    themeColor,
+    setThemeColor,
+    initThemeColor
+  }
 })

src/views/exception/403.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
 <template>
-  <exception></exception>
+  <exception type="403"></exception>
 </template>

src/views/exception/404.vue

@@ -1,3 +1,3 @@
 <template>
-  <exception></exception>
+  <exception type="404"></exception>
 </template>

src/views/exception/500.vue

@@ -1,3 +1,3 @@
 <template>
-  <exception></exception>
+  <exception type="500"></exception>
 </template>