feat: 增加设置主题色功能

src/store/modules/app.js

@@ -8,13 +8,15 @@
 
 import { defineStore } from 'pinia'
 import { useDark } from '@vueuse/core'
-import { defaultLayout, naiveThemeOverrides } from '@/settings'
+import { generate, getRgbStr } from '@arco-design/color'
+import { defaultLayout, defaultPrimaryColor, naiveThemeOverrides } from '@/settings'
 
 export const useAppStore = defineStore('app', {
   state: () => ({
     collapsed: false,
     isDark: useDark(),
     layout: defaultLayout,
+    primaryColor: defaultPrimaryColor,
     naiveThemeOverrides,
   }),
   actions: {
@@ -30,9 +32,25 @@ export const useAppStore = defineStore('app', {
     setLayout(v) {
       this.layout = v
     },
+    setPrimaryColor(color) {
+      this.primaryColor = color
+    },
+    setThemeColor(color = this.primaryColor, isDark = this.isDark) {
+      const colors = generate(color, {
+        list: true,
+        dark: isDark,
+      })
+      document.body.style.setProperty('--primary-color', getRgbStr(colors[5]))
+      this.naiveThemeOverrides.common = Object.assign(this.naiveThemeOverrides.common || {}, {
+        primaryColor: colors[5],
+        primaryColorHover: colors[4],
+        primaryColorSuppl: colors[4],
+        primaryColorPressed: colors[6],
+      })
+    },
   },
   persist: {
-    paths: ['collapsed', 'naiveThemeOverrides'],
+    paths: ['collapsed', 'layout', 'primaryColor', 'naiveThemeOverrides'],
     storage: sessionStorage,
   },
 })