重构风格设置代码组织方式

src/components/GlobalSetting.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import navDark from '@/assets/svg/nav-theme-dark.svg'
-import navLight from '@/assets/svg/nav-theme-light.svg'
-import headerDark from '@/assets/svg/header-theme-dark.svg'
 import { useThemeStore } from '@/stores/theme'
+import { themeStyleList } from '@/utils/constants'
 
 const props = defineProps({
   modelValue: Boolean
@@ -44,26 +42,6 @@ const themeColors = [
 ]
 
 const themeStyle = computed(() => themeStore.themeStyle)
-const styleList = [
-  {
-    name: 'nav-dark',
-    img: navDark,
-    bgColor: '#001529',
-    textColor: '#BBB'
-  },
-  {
-    name: 'nav-light',
-    img: navLight,
-    bgColor: '#fff',
-    textColor: '#303133'
-  },
-  {
-    name: 'header-dark',
-    img: headerDark,
-    bgColor: '#001529',
-    textColor: '#BBB'
-  }
-]
 </script>
 
 <template>
@@ -82,7 +60,12 @@ const styleList = [
     </el-space>
     <el-divider>整体风格</el-divider>
     <el-space wrap :size="20">
-      <div class="relative" v-for="(item, index) in styleList" :key="index" @click="themeStore.setThemeStyle(item)">
+      <div
+        class="relative"
+        v-for="(item, index) in themeStyleList"
+        :key="index"
+        @click="themeStore.setThemeStyle(item.name)"
+      >
         <img :src="item.img" alt="" />
         <div class="absolute right-10px bottom-10px" v-if="item.name === themeStyle.name">
           <el-icon :color="themeColor" size="18"><Check /></el-icon>

src/config/defaultSetting.ts

@@ -1,14 +1,7 @@
-import navLight from '@/assets/svg/nav-theme-light.svg'
-
 export default {
   title: '方是科技管理系统',
   logo: '/logo.png',
   homeRouteName: 'home',
   themeColor: '#1890ff',
-  themeStyle: {
-    name: 'nav-light',
-    img: navLight,
-    bgColor: '#fff',
-    textColor: '--el-menu-text-color'
-  } // nav-dark  nav-light  header-dark
+  themeStyle: 'nav-light' // nav-dark  nav-light  header-dark
 }

src/stores/theme.ts

@@ -1,10 +1,13 @@
 import config from '@/config/defaultSetting'
 import colorUtil from '@/utils/color'
-import type { themeStyle } from '@/types/themeStyle'
+import { themeStyleList } from '@/utils/constants'
 
 export const useThemeStore = defineStore('theme', () => {
   const themeColor = useStorage('themeColor', config.themeColor)
-  const themeStyle = useStorage('themeStyle', config.themeStyle)
+  const themeStyleName = useStorage('themeStyle', config.themeStyle)
+  const themeStyle = computed(
+    () => themeStyleList.find(item => item.name === themeStyleName.value) || themeStyleList[0]
+  )
 
   const setThemeColor = (color: string) => {
     themeColor.value = color
@@ -21,8 +24,8 @@ export const useThemeStore = defineStore('theme', () => {
     }
   }
 
-  const setThemeStyle = (style: themeStyle) => {
-    themeStyle.value = style
+  const setThemeStyle = (style: string) => {
+    themeStyleName.value = style
     initThemeStyle()
   }
   const initThemeStyle = () => {

src/utils/constants.ts

@@ -1,4 +1,8 @@
 import type { BasicForm } from '@/types/form'
+import type { themeStyle } from '@/types/themeStyle'
+import navDark from '@/assets/svg/nav-theme-dark.svg'
+import navLight from '@/assets/svg/nav-theme-light.svg'
+import headerDark from '@/assets/svg/header-theme-dark.svg'
 
 export const orgFormConfig = reactive<BasicForm>({
   span: 24,
@@ -42,3 +46,24 @@ export const orgFormConfig = reactive<BasicForm>({
     }
   ]
 })
+
+export const themeStyleList: themeStyle[] = [
+  {
+    name: 'nav-dark',
+    img: navDark,
+    bgColor: '#001529',
+    textColor: '#BBB'
+  },
+  {
+    name: 'nav-light',
+    img: navLight,
+    bgColor: '#fff',
+    textColor: '#303133'
+  },
+  {
+    name: 'header-dark',
+    img: headerDark,
+    bgColor: '#001529',
+    textColor: '#BBB'
+  }
+]