fix(查询组件): 查询组件背景色匹配仪表板深色模式

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 {