From 7b186dbe38a29bac1ec4d5ecded0f203498fdfca Mon Sep 17 00:00:00 2001
From: candi <i@candi.love>
Date: Fri, 1 Aug 2025 13:26:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=96=B0=E7=9A=84=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/package.json                    |  4 +-
 .../system/dict/data/tag-style-picker.vue     | 41 +++++++++++++++----
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index fa2ac67a..358d323b 100644
--- a/apps/web-antd/package.json
+++ b/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",
diff --git a/apps/web-antd/src/views/system/dict/data/tag-style-picker.vue b/apps/web-antd/src/views/system/dict/data/tag-style-picker.vue
index ab76b7dd..a6d63d2e 100644
--- a/apps/web-antd/src/views/system/dict/data/tag-style-picker.vue
+++ b/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>