feat: support change multiple colors

2025-04-05 19:41:59 +08:00 · 2024-03-27 00:21:11 +08:00 · 2024-03-27 00:21:11 +08:00 · 2882409ce2
commit 2882409ce2
parent 6af26f2eab
6 changed files with 189 additions and 15 deletions
--- 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",
--- 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" />
--- 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>
--- 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() {
--- 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"
  }
 }
--- 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>