feat: 新增主题颜色选择

src/store/modules/designStore/designStore.d.ts

@@ -1,12 +1,21 @@
 import { ThemeEnum } from '@/enums/styleEnum'
 
+export type AppThemeColorType = {
+  CMYK: number[]
+  RGB: number[]
+  hex: string
+  name: string
+  pinyin: string
+}
+
 export interface DesignStateType {
   // 是否是深色主题
   darkTheme: boolean
   // 主题名称
   themeName: ThemeEnum
-  //系统风格
+  //色号
   appTheme: string
+  appThemeDetail: AppThemeColorType | null
   //系统内置风格
-  appThemeList: string[]
+  appThemeList: AppThemeColorType[]
 }

src/store/modules/designStore/designStore.ts

@@ -1,13 +1,13 @@
 import { defineStore } from 'pinia'
 import { theme } from '@/settings/designSetting'
-import { DesignStateType } from './designStore.d'
+import { DesignStateType, AppThemeColorType } from './designStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { ThemeEnum } from '@/enums/styleEnum'
 
 const { GO_DESIGN_STORE } = StorageEnum
 
-const { darkTheme, appTheme, appThemeList } = theme
+const { darkTheme, appTheme, appThemeList, appThemeDetail } = theme
 
 const storageDesign = getLocalStorage(GO_DESIGN_STORE)
 
@@ -21,6 +21,7 @@ export const useDesignStore = defineStore({
       themeName: (darkTheme && ThemeEnum.dark) || ThemeEnum.light,
       // 颜色色号
       appTheme,
+      appThemeDetail,
       // 颜色列表
       appThemeList,
     },
@@ -31,15 +32,24 @@ export const useDesignStore = defineStore({
     getAppTheme(): string {
       return this.appTheme
     },
-    getAppThemeList(): string[] {
+    getAppThemeDetail(): AppThemeColorType | null {
+      return this.appThemeDetail
+    },
+    getAppThemeList(): AppThemeColorType[] {
       return this.appThemeList
     }
   },
   actions: {
+    // 切换主题
     changeTheme(): void {
       this.darkTheme = !this.darkTheme
       this.themeName = this.darkTheme ? ThemeEnum.dark : ThemeEnum.light
       setLocalStorage(GO_DESIGN_STORE, this.$state)
     },
+    // 设置颜色
+    setAppColor(color: AppThemeColorType): void {
+      this.appTheme = color.hex
+      this.appThemeDetail = color
+    }
   }
 })