feat: 色彩选择器新增：主题和水印

2024-07-23 11:15:43 +08:00 · 2024-07-23 11:15:43 +08:00 · 5c784289ad
commit 5c784289ad
parent e8bc442848
5 changed files with 127 additions and 29 deletions
--- a/package.json
+++ b/package.json
@ -43,7 +43,9 @@
    "sortablejs": "^1.15.2",
    "vue": "^3.4.21",
    "vue-codemirror6": "^1.3.0",
+    "vue-color-kit": "^1.0.6",
    "vue-i18n": "10.0.0-alpha.3",
+    "vue-pick-colors": "^1.7.6",
    "vue-router": "^4.3.0",
    "vuedraggable": "^4.1.0",
    "xgplayer": "^3.0.18"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -62,9 +62,15 @@ importers:
      vue-codemirror6:
        specifier: ^1.3.0
        version: 1.3.0(@lezer/common@1.2.1)(vue@3.4.21(typescript@5.4.3))
+      vue-color-kit:
+        specifier: ^1.0.6
+        version: 1.0.6(vue@3.4.21(typescript@5.4.3))
      vue-i18n:
        specifier: 10.0.0-alpha.3
        version: 10.0.0-alpha.3(vue@3.4.21(typescript@5.4.3))
+      vue-pick-colors:
+        specifier: ^1.7.6
+        version: 1.7.6(@popperjs/core@2.11.8)(vue@3.4.21(typescript@5.4.3))
      vue-router:
        specifier: ^4.3.0
        version: 4.3.0(vue@3.4.21(typescript@5.4.3))
@ -149,7 +155,7 @@ importers:
        version: 5.4.3
      unplugin-auto-import:
        specifier: ^0.17.5
-        version: 0.17.5(rollup@4.13.0)
+        version: 0.17.5(@vueuse/core@10.11.0(vue@3.4.21(typescript@5.4.3)))(rollup@4.13.0)
      unplugin-vue-components:
        specifier: ^0.26.0
        version: 0.26.0(@babel/parser@7.24.1)(rollup@4.13.0)(vue@3.4.21(typescript@5.4.3))
@ -831,6 +837,9 @@ packages:
    resolution: {integrity: sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==}
    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}

+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
  '@resvg/resvg-js-android-arm-eabi@2.4.1':
    resolution: {integrity: sha512-AA6f7hS0FAPpvQMhBCf6f1oD1LdlqNXKCxAAPpKh6tR11kqV0YIB9zOlIYgITM14mq2YooLFl6XIbbvmY+jwUw==}
    engines: {node: '>= 10'}
@ -1049,6 +1058,9 @@ packages:
  '@types/svgo@2.6.4':
    resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}

+  '@types/web-bluetooth@0.0.20':
+    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
+
  '@typescript-eslint/eslint-plugin@7.3.1':
    resolution: {integrity: sha512-STEDMVQGww5lhCuNXVSQfbfuNII5E08QWkvAw5Qwf+bj2WT+JkG1uc+5/vXA3AOYMDHVOSpL+9rcbEUiHIm2dw==}
    engines: {node: ^18.18.0 || >=20.0.0}
@ -1253,6 +1265,15 @@ packages:
  '@vue/shared@3.4.21':
    resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==}

+  '@vueuse/core@10.11.0':
+    resolution: {integrity: sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==}
+
+  '@vueuse/metadata@10.11.0':
+    resolution: {integrity: sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==}
+
+  '@vueuse/shared@10.11.0':
+    resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
+
  '@wangeditor/basic-modules@1.1.7':
    resolution: {integrity: sha512-cY9CPkLJaqF05STqfpZKWG4LpxTMeGSIIF1fHvfm/mz+JXatCagjdkbxdikOuKYlxDdeqvOeBmsUBItufDLXZg==}
    peerDependencies:
@ -3704,6 +3725,11 @@ packages:
    peerDependencies:
      vue: ^2.7.14 || ^3.4

+  vue-color-kit@1.0.6:
+    resolution: {integrity: sha512-56oSUp8hGIZ3E4ayZLqTDAb2C7VzaWAC1EVUsZEvPCD2wiiiFd2L2BiEGN1ingfz538sYWKNXxMZQGslqbMiBg==}
+    peerDependencies:
+      vue: ^3.0.5
+
  vue-demi@0.14.7:
    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
    engines: {node: '>=12'}
@ -3738,6 +3764,12 @@ packages:
    peerDependencies:
      vue: ^3.0.0

+  vue-pick-colors@1.7.6:
+    resolution: {integrity: sha512-+PgTwdmHZS0sDV3/7BHaNSMrCSWwvmHj+Yh6G7/XGGPUQX/9tbgBrfNoZ5rS3plnW8lU9a+xkbhCnphXwvpg3A==}
+    peerDependencies:
+      '@popperjs/core': ^2.11.2
+      vue: ^3.2.26
+
  vue-router@4.3.0:
    resolution: {integrity: sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==}
    peerDependencies:
@ -4568,6 +4600,8 @@ snapshots:

  '@pkgr/core@0.1.1': {}

+  '@popperjs/core@2.11.8': {}
+
  '@resvg/resvg-js-android-arm-eabi@2.4.1':
    optional: true

@ -4731,6 +4765,9 @@ snapshots:
    dependencies:
      '@types/node': 20.11.30

+  '@types/web-bluetooth@0.0.20':
+    optional: true
+
  '@typescript-eslint/eslint-plugin@7.3.1(@typescript-eslint/parser@7.3.1(eslint@8.57.0)(typescript@5.4.3))(eslint@8.57.0)(typescript@5.4.3)':
    dependencies:
      '@eslint-community/regexpp': 4.10.0
@ -5095,6 +5132,28 @@ snapshots:

  '@vue/shared@3.4.21': {}

+  '@vueuse/core@10.11.0(vue@3.4.21(typescript@5.4.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.0
+      '@vueuse/shared': 10.11.0(vue@3.4.21(typescript@5.4.3))
+      vue-demi: 0.14.8(vue@3.4.21(typescript@5.4.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    optional: true
+
+  '@vueuse/metadata@10.11.0':
+    optional: true
+
+  '@vueuse/shared@10.11.0(vue@3.4.21(typescript@5.4.3))':
+    dependencies:
+      vue-demi: 0.14.8(vue@3.4.21(typescript@5.4.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    optional: true
+
  '@wangeditor/basic-modules@1.1.7(@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2))(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)':
    dependencies:
      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4))(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.7)(slate@0.72.8)(snabbdom@3.6.2)
@ -7580,7 +7639,7 @@ snapshots:

  universalify@2.0.1: {}

-  unplugin-auto-import@0.17.5(rollup@4.13.0):
+  unplugin-auto-import@0.17.5(@vueuse/core@10.11.0(vue@3.4.21(typescript@5.4.3)))(rollup@4.13.0):
    dependencies:
      '@antfu/utils': 0.7.7
      '@rollup/pluginutils': 5.1.0(rollup@4.13.0)
@ -7590,6 +7649,8 @@ snapshots:
      minimatch: 9.0.3
      unimport: 3.7.1(rollup@4.13.0)
      unplugin: 1.10.0
+    optionalDependencies:
+      '@vueuse/core': 10.11.0(vue@3.4.21(typescript@5.4.3))
    transitivePeerDependencies:
      - rollup

@ -7692,6 +7753,10 @@ snapshots:
      - '@lezer/common'
      - '@vue/composition-api'

+  vue-color-kit@1.0.6(vue@3.4.21(typescript@5.4.3)):
+    dependencies:
+      vue: 3.4.21(typescript@5.4.3)
+
  vue-demi@0.14.7(vue@3.4.21(typescript@5.4.3)):
    dependencies:
      vue: 3.4.21(typescript@5.4.3)
@ -7720,6 +7785,11 @@ snapshots:
      '@vue/devtools-api': 6.6.1
      vue: 3.4.21(typescript@5.4.3)

+  vue-pick-colors@1.7.6(@popperjs/core@2.11.8)(vue@3.4.21(typescript@5.4.3)):
+    dependencies:
+      '@popperjs/core': 2.11.8
+      vue: 3.4.21(typescript@5.4.3)
+
  vue-router@4.3.0(vue@3.4.21(typescript@5.4.3)):
    dependencies:
      '@vue/devtools-api': 6.6.1
--- a/src/layout/components/Header/components/system-settings/index.vue
+++ b/src/layout/components/Header/components/system-settings/index.vue
@ -29,7 +29,13 @@
        <div class="title">水印设置</div>
        <div class="flex-row">
          <div>水印颜色</div>
-          <!-- <a-color-picker v-model="watermarkStyle.color" format="rgb" :history-colors="['#00000026']" /> -->
+          <pick-colors
+            v-model:value="watermarkStyle.color"
+            show-alpha
+            format="rgb"
+            :z-index="2000"
+            :theme="darkMode ? 'dark' : 'light'"
+          />
        </div>
        <div class="flex-row">
          <div>水印文案</div>
@ -53,14 +59,25 @@
 </template>

 <script setup lang="ts">
+import PickColors from "vue-pick-colors";
 import { storeToRefs } from "pinia";
 import { useRoutesListStore } from "@/store/modules/route-list";
 import { useThemeConfig } from "@/store/modules/theme-config";
 import { currentlyRoute } from "@/router/route-output";
 const themeStore = useThemeConfig();
 const routerStore = useRoutesListStore();
-const { collapsed, isAccordion, isBreadcrumb, isTabs, isFooter, watermark, watermarkStyle, watermarkRotate, watermarkGap } =
-  storeToRefs(themeStore);
+const {
+  collapsed,
+  isAccordion,
+  isBreadcrumb,
+  isTabs,
+  isFooter,
+  watermark,
+  watermarkStyle,
+  watermarkRotate,
+  watermarkGap,
+  darkMode
+} = storeToRefs(themeStore);
 const { tabsList, cacheRoutes } = storeToRefs(routerStore);
 const route = useRoute();
 const props = defineProps({
@ -75,7 +92,7 @@ const onWatermarkGap = (e: number) => {
  watermarkGap.value = watermarkGap.value.map(() => e);
 };

-/* 
+/*
  是否关闭tabs栏
  如果关闭，那么所有tabs全部取消、所有页面缓存全部取消
  如果开启，那么添加当前路由到tabs
--- a/src/layout/components/Header/components/theme-settings/index.vue
+++ b/src/layout/components/Header/components/theme-settings/index.vue
@ -18,13 +18,13 @@
      <div class="box-gap">
        <a-divider orientation="center">主题设置</a-divider>
        <div class="flex-center">
-          <!-- <a-color-picker
-            v-model="themeColor"
-            hide-trigger
-            show-preset
-            :preset-colors="presetColors"
-            @change="themeColorChange"
-          /> -->
+          <ColorPicker
+            :theme="darkMode ? 'dark' : 'light'"
+            sucker-hide
+            :colors-default="presetColors"
+            :color="themeColor"
+            @change-color="themeColorChange"
+          />
        </div>
      </div>
      <div class="box-gap">
@ -55,11 +55,12 @@
 import { storeToRefs } from "pinia";
 import { useThemeConfig } from "@/store/modules/theme-config";
 import { useThemeMethods } from "@/hooks/useThemeMethods";
+import { ColorPicker } from "vue-color-kit";
+import "vue-color-kit/dist/vue-color-kit.css";

 const themeStore = useThemeConfig();
-// themeColor,
-// presetColors,
-const { layoutType, colorWeakMode, grayMode, darkMode, asideDark, transitionPage } = storeToRefs(themeStore);
+const { layoutType, colorWeakMode, grayMode, darkMode, asideDark, transitionPage, themeColor, presetColors } =
+  storeToRefs(themeStore);

 const layoutList = reactive({
  layoutDefaults: {
@ -83,13 +84,27 @@ const transitions = ref([
  { value: "fadeInOut", label: "轻过渡" },
  { value: "cardInOut", label: "卡片" }
 ]);
-// 主题色设置
-// const themeColorChange = (value: string) => {
-//   themeColor.value = value;
-//   const { setThemeColor } = useThemeMethods();
-//   setThemeColor();
-// };

+interface IThemeColor {
+  hex: string;
+  hsv: {
+    h: number;
+    s: number;
+    v: number;
+  };
+  rgba: {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+  };
+}
+// 主题色设置
+const themeColorChange = (value: IThemeColor) => {
+  themeColor.value = value.hex;
+  const { setThemeColor } = useThemeMethods();
+  setThemeColor();
+};
 // 色弱模式
 const onColorWeak = () => {
  const { setColorWeak } = useThemeMethods();
--- a/src/store/modules/theme-config.ts
+++ b/src/store/modules/theme-config.ts
@ -61,19 +61,13 @@ export const useThemeConfig = defineStore("theme-config", {
      "#FADC19",
      "#9FDB1D",
      "#00B42A",
-      "#14C9C9",
      "#3491FA",
      "#c34d9c",
      "#722ED1",
-      "#D91AD9",
-      "#F5319D",
-      "#67C23A",
      "#E6A23C",
      "#F56C6C",
      "#409EFF",
-      "#a27b42",
-      "#dfc683",
-      "#59a680",
+      "#42b883",
      "#b1d391"
    ]
  }),