切换新的颜色选择器

apps/web-antd/package.json

@@ -54,8 +54,8 @@
     "tinymce": "^7.3.0",
     "unplugin-vue-components": "^0.27.3",
     "vue": "catalog:",
-    "vue-router": "catalog:",
-    "vue3-colorpicker": "^2.3.0"
+    "vue-accessible-color-picker": "^5.3.1",
+    "vue-router": "catalog:"
   },
   "devDependencies": {
     "@types/crypto-js": "^4.2.2",

apps/web-antd/src/views/system/dict/data/tag-style-picker.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import type { RadioChangeEvent } from 'ant-design-vue';
 
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 import { usePreferences } from '@vben/preferences';
 
 import { RadioGroup, Select } from 'ant-design-vue';
-import { ColorPicker } from 'vue3-colorpicker';
+import { ColorPicker } from 'vue-accessible-color-picker';
 
 import { tagSelectOptions } from '#/components/dict';
 
-import 'vue3-colorpicker/style.css';
+
 
 /**
  * 需要禁止透传
@@ -51,10 +51,18 @@ function handleSelectTypeChange(e: RadioChangeEvent) {
   color.value = e.target.value === 'custom' ? '#1677ff' : undefined;
 }
 
+function handleColorChange(event: any) {
+  if (event && event.colors && event.colors.hex) {
+    color.value = event.colors.hex;
+  }
+}
+
 const { isDark } = usePreferences();
 const theme = computed(() => {
   return isDark.value ? 'black' : 'white';
 });
+
+const popoverVisible = ref(false);
 </script>
 
 <template>
@@ -75,12 +83,27 @@ const theme = computed(() => {
       placeholder="请选择标签样式"
       @deselect="$emit('deselect')"
     />
-    <ColorPicker
+    <Popover
       v-if="selectType === 'custom'"
-      disable-alpha
-      format="hex"
-      v-model:pure-color="color"
-      :theme="theme"
-    />
+      v-model:open="popoverVisible"
+      trigger="click"
+      placement="bottom"
+    >
+      <template #content>
+        <ColorPicker
+          :color="color"
+          @color-change="handleColorChange"
+          :theme="theme"
+          format="hex"
+        />
+      </template>
+      <div
+        class="h-8 w-8 cursor-pointer rounded border"
+        :style="{ backgroundColor: color || '#1677ff' }"
+      ></div>
+    </Popover>
   </div>
 </template>
+<style>
+@import url('vue-accessible-color-picker/styles');
+</style>