From ca28e53feec9d45150da41999750d4fb07b2788c Mon Sep 17 00:00:00 2001 From: dataeaseShu Date: Thu, 14 Aug 2025 10:58:07 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E6=9F=A5=E8=AF=A2=E7=BB=84=E4=BB=B6):=20?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E4=B8=8B=E6=8B=89=E7=BB=84=E4=BB=B6tag?= =?UTF-8?q?=E8=83=8C=E6=99=AF=E9=A2=9C=E8=89=B2=E8=87=AA=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/custom-component/v-query/Select.vue | 56 +++---------------- .../src/custom-component/v-query/Tree.vue | 22 ++++++++ core/core-frontend/src/utils/color.ts | 44 +++++++++++++++ 3 files changed, 74 insertions(+), 48 deletions(-) create mode 100644 core/core-frontend/src/utils/color.ts diff --git a/core/core-frontend/src/custom-component/v-query/Select.vue b/core/core-frontend/src/custom-component/v-query/Select.vue index 960f8054b8..4361462428 100644 --- a/core/core-frontend/src/custom-component/v-query/Select.vue +++ b/core/core-frontend/src/custom-component/v-query/Select.vue @@ -19,6 +19,7 @@ import { useEmitt } from '@/hooks/web/useEmitt' import { useI18n } from '@/hooks/web/useI18n' import colorFunctions from 'less/lib/less/functions/color.js' import colorTree from 'less/lib/less/tree/color.js' +import { colorStringToHex } from '@/utils/color' interface SelectConfig { selectValue: any @@ -672,53 +673,12 @@ onMounted(() => { Boolean(document.querySelector('.datav-preview')) }) -function rgbToHex(r, g, b) { - // 确保数值在0-255范围内 - r = Math.max(0, Math.min(255, r)) - g = Math.max(0, Math.min(255, g)) - b = Math.max(0, Math.min(255, b)) - - // 转换为16进制并补零 - const hexR = r.toString(16).padStart(2, '0') - const hexG = g.toString(16).padStart(2, '0') - const hexB = b.toString(16).padStart(2, '0') - - return `#${hexR}${hexG}${hexB}`.toUpperCase() -} -function rgbaToHex(r, g, b, a) { - // 处理RGB部分 - const hexR = Math.max(0, Math.min(255, r)).toString(16).padStart(2, '0') - const hexG = Math.max(0, Math.min(255, g)).toString(16).padStart(2, '0') - const hexB = Math.max(0, Math.min(255, b)).toString(16).padStart(2, '0') - - // 处理透明度（可选） - const hexA = - a !== undefined - ? Math.round(Math.max(0, Math.min(1, a)) * 255) - .toString(16) - .padStart(2, '0') - : '' - - return `#${hexR}${hexG}${hexB}${hexA}`.toUpperCase() -} - -function colorStringToHex(colorStr) { - // 提取颜色值 - const rgbRegex = - /^(rgb|rgba)\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)$/ - const match = colorStr.match(rgbRegex) - if (!match) return null - - const r = parseInt(match[2]) - const g = parseInt(match[3]) - const b = parseInt(match[4]) - const a = match[5] ? parseFloat(match[5]) : undefined - - return a !== undefined ? rgbaToHex(r, g, b, a) : rgbToHex(r, g, b) -} - -const bgColor = computed(() => { - if (!customStyle || customStyle.background === '#FFFFFF') return '#f4f4f5' +const tagColor = computed(() => { + if ( + !customStyle || + ['#FFFFFF', 'rgba(255, 255, 255, 1)', 'rgb(255, 255, 255)'].includes(customStyle.background) + ) + return '' if (customStyle.background === '#131C42') return 'rgb(38, 53, 82)' const hexColor = customStyle.background.startsWith('#') ? customStyle.background @@ -758,6 +718,7 @@ defineExpose({ :popper-class="popperClass" multiple show-checked + :tagColor="tagColor" scrollbar-always-on clearable :style="selectStyle" @@ -835,7 +796,6 @@ defineExpose({ :deep(.ed-select__selected-item) { .ed-tag { max-width: v-bind(tagWidth) !important; - --ed-tag-bg-color: v-bind(bgColor) !important; } .ed-select__tags-text { diff --git a/core/core-frontend/src/custom-component/v-query/Tree.vue b/core/core-frontend/src/custom-component/v-query/Tree.vue index 0b5ff7c753..b2f8f65a59 100644 --- a/core/core-frontend/src/custom-component/v-query/Tree.vue +++ b/core/core-frontend/src/custom-component/v-query/Tree.vue @@ -13,6 +13,10 @@ import { } from 'vue' import { cloneDeep, debounce } from 'lodash-es' import { getFieldTree } from '@/api/dataset' +import colorFunctions from 'less/lib/less/functions/color.js' +import colorTree from 'less/lib/less/tree/color.js' +import { colorStringToHex } from '@/utils/color' + interface SelectConfig { selectValue: any defaultMapValue: any @@ -35,6 +39,7 @@ interface SelectConfig { multiple: boolean } +const customStyle: any = inject('$custom-style-filter') const props = defineProps({ config: { type: Object as PropType, @@ -272,6 +277,22 @@ const getCustomWidth = () => { const selectStyle = computed(() => { return props.isConfig ? {} : { width: getCustomWidth() + 'px' } }) + +const tagColor = computed(() => { + if ( + !customStyle || + ['#FFFFFF', 'rgba(255, 255, 255, 1)', 'rgb(255, 255, 255)'].includes(customStyle.background) + ) + return '' + if (customStyle.background === '#131C42') return 'rgb(38, 53, 82)' + const hexColor = customStyle.background.startsWith('#') + ? customStyle.background + : colorStringToHex(customStyle.background) + + return colorFunctions + .mix(new colorTree('ffffff'), new colorTree(hexColor.substr(1)), { value: 20 }) + .toRGB() +})