fix: 尝试修复循环依赖问题

core/core-frontend/src/custom-component/v-query/Component.vue

@@ -2,14 +2,13 @@
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import eventBus from '@/utils/eventBus'
-import colorFunctions from 'less/lib/less/functions/color.js'
-import colorTree from 'less/lib/less/tree/color.js'
 import { isISOMobile, isMobile } from '@/utils/utils'
 import { cloneDeep } from 'lodash-es'
 import { ElMessage } from 'element-plus-secondary'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import QueryConditionConfiguration from './QueryConditionConfiguration.vue'
 import type { ComponentInfo } from '@/api/chart'
+import { mixColor } from '@/utils/color'
 import { infoFormat } from './options'
 import {
   onBeforeUnmount,
@@ -166,20 +165,8 @@ const btnHoverStyle = computed(() => {
 
   return {
     rawColor: customStyle.btnColor ?? '#3370ff',
-    hoverColor: customStyle.btnColor
-      ? colorFunctions
-          .mix(new colorTree('ffffff'), new colorTree(btnColor), {
-            value: 15
-          })
-          .toRGB()
-      : '#5285FF',
-    activeColor: customStyle.btnColor
-      ? colorFunctions
-          .mix(new colorTree('000000'), new colorTree(btnColor), {
-            value: 15
-          })
-          .toRGB()
-      : '#2B5FD9'
+    hoverColor: customStyle.btnColor ? mixColor('ffffff', btnColor, 0.15) : '#5285FF',
+    activeColor: customStyle.btnColor ? mixColor('000000', btnColor, 0.15) : '#2B5FD9'
   }
 })
 
@@ -197,11 +184,7 @@ const btnPrimaryActiveColor = computed(() => {
 
 const tagColor = computed(() => {
   if (customStyle.background && !customStyle.background.toLowerCase().includes('#ffffff')) {
-    return colorFunctions
-      .mix(new colorTree('ffffff'), new colorTree(customStyle.background.substr(1)), {
-        value: 15
-      })
-      .toRGB()
+    return mixColor('ffffff', customStyle.background.substr(1), 0.15)
   }
   return '#f0f2f5'
 })

core/core-frontend/src/custom-component/v-query/Select.vue

@@ -22,10 +22,9 @@ import Flat from './Flat.vue'
 import eventBus from '@/utils/eventBus'
 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'
 import { isMobile } from '@/utils/utils'
+import { mixColor } from '@/utils/color'
 
 interface SelectConfig {
   selectValue: any
@@ -747,9 +746,7 @@ const tagColor = computed(() => {
     ? customStyle.background
     : colorStringToHex(customStyle.background)
 
-  return colorFunctions
-    .mix(new colorTree('ffffff'), new colorTree(hexColor.substr(1)), { value: 20 })
-    .toRGB()
+  return mixColor('ffffff', hexColor.substr(1), 0.2)
 })
 
 const tagWidth = computed(() => {

core/core-frontend/src/custom-component/v-query/Tree.vue

@@ -15,9 +15,8 @@ import {
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { cloneDeep, debounce, sortBy } 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'
+import { mixColor } from '@/utils/color'
 
 interface SelectConfig {
   selectValue: any
@@ -390,9 +389,7 @@ const tagColor = computed(() => {
     ? customStyle.background
     : colorStringToHex(customStyle.background)
 
-  return colorFunctions
-    .mix(new colorTree('ffffff'), new colorTree(hexColor.substr(1)), { value: 20 })
-    .toRGB()
+  return mixColor('ffffff', hexColor.substr(1), 0.2)
 })
 </script>
 

core/core-frontend/src/store/modules/appearance.ts

@@ -5,29 +5,7 @@ import { uiLoadApi } from '@/api/login'
 import { useCache } from '@/hooks/web/useCache'
 import { useEmbedded } from '@/store/modules/embedded'
 import { setTitle } from '@/utils/utils'
-
-const mixColor = (color1: string, color2: string, weight: number) => {
-  weight = Math.max(Math.min(Number(weight), 100), 0) / 100
-  color1 = color1.replace('#', '')
-  color2 = color2.replace('#', '')
-  const r = Math.round(
-    parseInt(color1.substring(0, 2), 16) * weight +
-      parseInt(color2.substring(0, 2), 16) * (1 - weight)
-  )
-  const g = Math.round(
-    parseInt(color1.substring(2, 4), 16) * weight +
-      parseInt(color2.substring(2, 4), 16) * (1 - weight)
-  )
-  const b = Math.round(
-    parseInt(color1.substring(4, 6), 16) * weight +
-      parseInt(color2.substring(4, 6), 16) * (1 - weight)
-  )
-  return `#
-  ${r.toString(16).padStart(2, '0')}
-  ${g.toString(16).padStart(2, '0')}
-  ${b.toString(16).padStart(2, '0')}
-  `
-}
+import { mixColor } from '@/utils/color'
 
 const basePath = import.meta.env.VITE_API_BASEPATH
 const baseUrl = basePath + '/appearance/image/'

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

@@ -47,3 +47,26 @@ export function getCSSVariable(element = document.body, property = '--ed-color-p
   const style = window.getComputedStyle(element)
   return style.getPropertyValue(property) || '#3370FF'
 }
+
+export const mixColor = (color1: string, color2: string, weight: number) => {
+  weight = Math.max(Math.min(Number(weight), 100), 0) / 100
+  color1 = color1.replace('#', '')
+  color2 = color2.replace('#', '')
+  const r = Math.round(
+    parseInt(color1.substring(0, 2), 16) * weight +
+      parseInt(color2.substring(0, 2), 16) * (1 - weight)
+  )
+  const g = Math.round(
+    parseInt(color1.substring(2, 4), 16) * weight +
+      parseInt(color2.substring(2, 4), 16) * (1 - weight)
+  )
+  const b = Math.round(
+    parseInt(color1.substring(4, 6), 16) * weight +
+      parseInt(color2.substring(4, 6), 16) * (1 - weight)
+  )
+  return `#
+  ${r.toString(16).padStart(2, '0')}
+  ${g.toString(16).padStart(2, '0')}
+  ${b.toString(16).padStart(2, '0')}
+  `
+}