From 2882409ce2e572d557be0f0e5571cad386e467fd Mon Sep 17 00:00:00 2001
From: chansee97 <chen.dev@foxmail.com>
Date: Wed, 27 Mar 2024 00:21:11 +0800
Subject: [PATCH] feat: support change multiple colors

---
 package.json                              |   2 +
 src/layouts/BasicLayout/index.vue         |   2 +-
 src/layouts/components/header/Setting.vue |  73 ++++++++++++++--
 src/store/app/index.ts                    | 102 +++++++++++++++++++++-
 src/store/app/theme.json                  |  21 ++++-
 src/views/userCenter/index.vue            |   4 +-
 6 files changed, 189 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 0182cee..6cf365e 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@tinymce/tinymce-vue": "^5.1.1",
     "@vueuse/core": "^10.9.0",
     "alova": "^2.17.1",
+    "chroma-js": "^2.4.2",
     "echarts": "^5.5.0",
     "md-editor-v3": "^4.11.3",
     "nprogress": "^0.2.0",
@@ -67,6 +68,7 @@
     "@antfu/eslint-config": "^2.8.3",
     "@iconify-json/icon-park-outline": "^1.1.15",
     "@iconify/vue": "^4.1.1",
+    "@types/chroma-js": "^2.4.4",
     "@types/node": "^20.11.28",
     "@types/nprogress": "^0.2.3",
     "@types/qs": "^6.9.12",
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index 6238bfd..fc46383 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -31,7 +31,7 @@ const appStore = useAppStore()
       :collapsed="appStore.collapsed"
       :collapsed-width="64"
       collapse-mode="width"
-      :width="220"
+      :width="240"
       :inverted="appStore.invertedSider"
     >
       <Logo v-if="appStore.showLogo" />
diff --git a/src/layouts/components/header/Setting.vue b/src/layouts/components/header/Setting.vue
index 9c51419..f8f312a 100644
--- a/src/layouts/components/header/Setting.vue
+++ b/src/layouts/components/header/Setting.vue
@@ -38,6 +38,38 @@ const transitionSelectorOptions = [
     value: 'fade',
   },
 ]
+
+const palette = [
+  '#ffb8b8',
+  '#d03050',
+  '#F0A020',
+  '#fff200',
+  '#ffda79',
+  '#18A058',
+  '#006266',
+  '#22a6b3',
+  '#18dcff',
+  '#2080F0',
+  '#c56cf0',
+  '#be2edd',
+  '#706fd3',
+  '#4834d4',
+  '#130f40',
+  '#4b4b4b',
+]
+
+function resetSetting() {
+  window.$dialog.warning({
+    title: '警告',
+    content: '你确定？',
+    positiveText: '确定',
+    negativeText: '不确定',
+    onPositiveClick: () => {
+      appStore.resetAlltheme()
+      window.$message.success('重置成功')
+    },
+  })
+}
 </script>
 
 <template>
@@ -48,7 +80,7 @@ const transitionSelectorOptions = [
           <i-icon-park-outline-setting-two />
           <n-drawer v-model:show="drawerActive" :width="300">
             <n-drawer-content title="系统设置" closable>
-              <n-space vertical size="large">
+              <n-space vertical>
                 <n-divider>主题设置</n-divider>
                 <n-space justify="space-between">
                   深色模式
@@ -65,12 +97,37 @@ const transitionSelectorOptions = [
                 <n-space align="center" justify="space-between">
                   主题色
                   <n-color-picker
-                    v-model:value="appStore.theme.common.primaryColor" class="w-7em" :swatches="[
-                      '#18A058',
-                      '#2080F0',
-                      '#F0A020',
-                      '#d03050',
-                    ]" :show-alpha="false"
+                    v-model:value="appStore.primaryColor"
+                    class="w-7em" :swatches="palette" :show-alpha="false"
+                    @complete="appStore.setPrimaryColor"
+                  />
+                </n-space>
+                <n-space align="center" justify="space-between">
+                  提示色
+                  <n-color-picker
+                    v-model:value="appStore.infoColor"
+                    class="w-7em" :swatches="palette" :show-alpha="false" @complete="appStore.setInfoColor"
+                  />
+                </n-space>
+                <n-space align="center" justify="space-between">
+                  成功色
+                  <n-color-picker
+                    v-model:value="appStore.successColor"
+                    class="w-7em" :swatches="palette" :show-alpha="false" @complete="appStore.setSuccessColor"
+                  />
+                </n-space>
+                <n-space align="center" justify="space-between">
+                  警告色
+                  <n-color-picker
+                    v-model:value="appStore.warningColor"
+                    class="w-7em" :swatches="palette" :show-alpha="false" @complete="appStore.setWarningColor"
+                  />
+                </n-space>
+                <n-space align="center" justify="space-between">
+                  错误色
+                  <n-color-picker
+                    v-model:value="appStore.errorColor"
+                    class="w-7em" :swatches="palette" :show-alpha="false" @complete="appStore.setErrorColor"
                   />
                 </n-space>
                 <n-space align="center" justify="space-between">
@@ -114,7 +171,7 @@ const transitionSelectorOptions = [
               </n-space>
 
               <template #footer>
-                <n-button type="error" @click="appStore.resetAlltheme">
+                <n-button type="error" @click="resetSetting">
                   重置设置
                 </n-button>
               </template>
diff --git a/src/store/app/index.ts b/src/store/app/index.ts
index 2672d0e..26428db 100644
--- a/src/store/app/index.ts
+++ b/src/store/app/index.ts
@@ -1,10 +1,15 @@
 import type { GlobalThemeOverrides } from 'naive-ui'
+import chroma from 'chroma-js'
 import themeConfig from './theme.json'
 
 type TransitionAnimation = '' | 'fade-slide' | 'fade-bottom' | 'fade-scale' | 'zoom-fade' | 'zoom-out'
 interface AppStatus {
-  readonly footerText: string
   theme: GlobalThemeOverrides
+  primaryColor: string
+  infoColor: string
+  successColor: string
+  warningColor: string
+  errorColor: string
   collapsed: boolean
   fullScreen: boolean
   darkMode: boolean
@@ -33,8 +38,12 @@ const isDark = useDark({
 export const useAppStore = defineStore('app-store', {
   state: (): AppStatus => {
     return {
-      footerText: 'Copyright ©2023 Nova Admin',
       theme: themeConfig,
+      primaryColor: '#18a058',
+      infoColor: '#2080f0',
+      successColor: '#18a058',
+      warningColor: '#f0a020',
+      errorColor: '#d03050',
       collapsed: false,
       fullScreen: false,
       darkMode: isDark.value,
@@ -53,8 +62,95 @@ export const useAppStore = defineStore('app-store', {
     }
   },
   actions: {
+    // 重置所有设置
     resetAlltheme() {
-      this.$reset()
+      this.theme = themeConfig
+      this.primaryColor = '#18a058'
+      this.infoColor = '#2080f0'
+      this.successColor = '#18a058'
+      this.warningColor = '#f0a020'
+      this.errorColor = '#d03050'
+      this.collapsed = false
+      this.fullScreen = false
+      this.darkMode = isDark.value
+      this.grayMode = false
+      this.colorWeak = false
+      this.loadFlag = true
+      this.showLogo = true
+      this.showTabs = true
+      this.showBreadcrumb = true
+      this.showBreadcrumbIcon = true
+      this.fixedHeader = false
+      this.invertedSider = false
+      this.invertedHeader = false
+      this.showWatermark = false
+      this.transitionAnimation = 'fade-slide'
+
+      // 重置所有配色
+      this.setPrimaryColor(this.primaryColor)
+      this.setInfoColor(this.infoColor)
+      this.setSuccessColor(this.successColor)
+      this.setWarningColor(this.warningColor)
+      this.setErrorColor(this.errorColor)
+    },
+
+    /* 设置主题色 */
+    setPrimaryColor(color: string) {
+      const brightenColor = chroma(color).brighten(1).hex()
+      const darkenColor = chroma(color).darken(1).hex()
+      Object.assign(this.theme.common, {
+        primaryColor: color,
+        primaryColorHover: brightenColor,
+        primaryColorPressed: darkenColor,
+        primaryColorSuppl: brightenColor,
+      })
+    },
+
+    /* 设置信息色 */
+    setInfoColor(color: string) {
+      const brightenColor = chroma(color).brighten(1).hex()
+      const darkenColor = chroma(color).darken(1).hex()
+      Object.assign(this.theme.common, {
+        infoColor: color,
+        infoColorHover: brightenColor,
+        infoColorPressed: darkenColor,
+        infoColorSuppl: brightenColor,
+      })
+    },
+
+    /* 设置成功色 */
+    setSuccessColor(color: string) {
+      const brightenColor = chroma(color).brighten(1).hex()
+      const darkenColor = chroma(color).darken(1).hex()
+      Object.assign(this.theme.common, {
+        successColor: color,
+        successColorHover: brightenColor,
+        successColorPressed: darkenColor,
+        successColorSuppl: brightenColor,
+      })
+    },
+
+    /* 设置警告色 */
+    setWarningColor(color: string) {
+      const brightenColor = chroma(color).brighten(1).hex()
+      const darkenColor = chroma(color).darken(1).hex()
+      Object.assign(this.theme.common, {
+        warningColor: color,
+        warningColorHover: brightenColor,
+        warningColorPressed: darkenColor,
+        warningColorSuppl: brightenColor,
+      })
+    },
+    /* 设置错误色 */
+    setErrorColor(color: string) {
+      const brightenColor = chroma(color).brighten(1).hex()
+      const darkenColor = chroma(color).darken(1).hex()
+      Object.assign(this.theme.common, {
+        errorColor: color,
+        errorColorHover: brightenColor,
+        errorColorPressed: darkenColor,
+        errorColorSuppl: brightenColor,
+      })
     },
     /* 切换侧边栏收缩 */
     toggleCollapse() {
diff --git a/src/store/app/theme.json b/src/store/app/theme.json
index fb91f62..06b7d75 100644
--- a/src/store/app/theme.json
+++ b/src/store/app/theme.json
@@ -1,5 +1,24 @@
 {
   "common": {
-    "primaryColor": "#165DFF"
+    "primaryColor": "#18a058",
+    "primaryColorHover": "#36ad6a",
+    "primaryColorPressed": "#0c7a43",
+    "primaryColorSuppl": "#36ad6a",
+    "infoColor": "#2080f0",
+    "infoColorHover": "#4098fc",
+    "infoColorPressed": "#1060c9",
+    "infoColorSuppl": "#4098fc",
+    "successColor": "#18a058",
+    "successColorHover": "#36ad6a",
+    "successColorPressed": "#0c7a43",
+    "successColorSuppl": "#36ad6a",
+    "warningColor": "#f0a020",
+    "warningColorHover": "#fcb040",
+    "warningColorPressed": "#c97c10",
+    "warningColorSuppl": "#fcb040",
+    "errorColor": "#d03050",
+    "errorColorHover": "#de576d",
+    "errorColorPressed": "#ab1f3f",
+    "errorColorSuppl": "#de576d"
   }
 }
diff --git a/src/views/userCenter/index.vue b/src/views/userCenter/index.vue
index 97e44d0..41b3dca 100644
--- a/src/views/userCenter/index.vue
+++ b/src/views/userCenter/index.vue
@@ -53,7 +53,7 @@ function handleValidateClick() {
               {{ userInfo?.id }}
             </n-descriptions-item>
             <n-descriptions-item label="用户名">
-              {{ userInfo?.userName }}
+              {{ userInfo?.username }}
             </n-descriptions-item>
             <n-descriptions-item label="真实名称">
               {{ userInfo?.nickname }}
@@ -80,7 +80,7 @@ function handleValidateClick() {
               <n-input v-model:value="formValue.phone" placeholder="电话号码" />
             </n-form-item>
             <n-form-item>
-              <n-button attr-type="button" block @click="handleValidateClick">
+              <n-button type="primary" attr-type="button" block @click="handleValidateClick">
                 验证
               </n-button>
             </n-form-item>