refactor(web-antd): 移除vue3-colorpicker依赖并使用antdv-next的ColorPicker

替换vue3-colorpicker为antdv-next内置的ColorPicker组件,简化依赖并统一组件库
This commit is contained in:
dap 2026-01-13 20:59:21 +08:00
parent 0ab5c46812
commit 2d68ff0d61
2 changed files with 5 additions and 17 deletions

View File

@ -53,8 +53,7 @@
"tinymce": "7.9.1", "tinymce": "7.9.1",
"unplugin-vue-components": "^0.27.3", "unplugin-vue-components": "^0.27.3",
"vue": "catalog:", "vue": "catalog:",
"vue-router": "catalog:", "vue-router": "catalog:"
"vue3-colorpicker": "^2.3.0"
}, },
"devDependencies": { "devDependencies": {
"@types/lodash-es": "^4.17.12" "@types/lodash-es": "^4.17.12"

View File

@ -3,15 +3,10 @@ import type { RadioChangeEvent } from 'antdv-next';
import { computed } from 'vue'; import { computed } from 'vue';
import { usePreferences } from '@vben/preferences'; import { ColorPicker, RadioGroup, Select } from 'antdv-next';
import { RadioGroup, Select } from 'antdv-next';
import { ColorPicker } from 'vue3-colorpicker';
import { tagSelectOptions } from '#/components/dict'; import { tagSelectOptions } from '#/components/dict';
import 'vue3-colorpicker/style.css';
/** /**
* 需要禁止透传 * 需要禁止透传
* 不禁止会有奇怪的bug 会绑定到selectType上 * 不禁止会有奇怪的bug 会绑定到selectType上
@ -50,11 +45,6 @@ function handleSelectTypeChange(e: RadioChangeEvent) {
// hex // hex
color.value = e.target.value === 'custom' ? '#1677ff' : undefined; color.value = e.target.value === 'custom' ? '#1677ff' : undefined;
} }
const { isDark } = usePreferences();
const theme = computed(() => {
return isDark.value ? 'black' : 'white';
});
</script> </script>
<template> <template>
@ -75,12 +65,11 @@ const theme = computed(() => {
placeholder="请选择标签样式" placeholder="请选择标签样式"
@deselect="$emit('deselect')" @deselect="$emit('deselect')"
/> />
<ColorPicker <ColorPicker
v-if="selectType === 'custom'" v-if="selectType === 'custom'"
disable-alpha v-model:value="color"
format="hex" show-text
v-model:pure-color="color"
:theme="theme"
/> />
</div> </div>
</template> </template>