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 af0a20114c..960f8054b8 100644 --- a/core/core-frontend/src/custom-component/v-query/Select.vue +++ b/core/core-frontend/src/custom-component/v-query/Select.vue @@ -17,6 +17,8 @@ import { enumValueObj, type EnumValue, getEnumValue } from '@/api/dataset' import { cloneDeep, debounce } from 'lodash-es' 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' interface SelectConfig { selectValue: any @@ -89,6 +91,7 @@ const isConfirmSearch = inject('is-confirm-search', Function, true) const queryConditionWidth = inject('com-width', Function, true) const cascadeList = inject('cascade-list', Function, true) const setCascadeDefault = inject('set-cascade-default', Function, true) +const customStyle: any = inject('$custom-style-filter') const placeholderText = computed(() => { if (placeholder?.value?.placeholderShow) { @@ -669,6 +672,63 @@ 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' + 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() +}) + const tagWidth = computed(() => { return (getCustomWidth() - 65) / 2 + 'px' }) @@ -775,6 +835,7 @@ 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 {