feat(查询组件): 支持下拉组件tag背景颜色自定义

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 {

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<SelectConfig>,
@@ -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()
+})
 </script>
 
 <template>
@@ -290,6 +311,7 @@ const selectStyle = computed(() => {
     :filter-node-method="filterMethod"
     :showWholePath="showWholePath"
     collapse-tags-tooltip
+    :tagColor="tagColor"
     :key="'multipleTree' + getCustomWidth()"
     filterable
     :style="selectStyle"

core/core-frontend/src/utils/color.ts

@@ -0,0 +1,44 @@
+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()
+}
+
+export 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)
+}