From 2a35b0323720a68ba0010d300e4f43941199c2f1 Mon Sep 17 00:00:00 2001 From: wisonic-s Date: Tue, 31 Mar 2026 00:23:43 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=B0=9D=E8=AF=95=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=BE=AA=E7=8E=AF=E4=BE=9D=E8=B5=96=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../custom-component/v-query/Component.vue | 25 +++---------------- .../src/custom-component/v-query/Select.vue | 7 ++---- .../src/custom-component/v-query/Tree.vue | 7 ++---- .../src/store/modules/appearance.ts | 24 +----------------- core/core-frontend/src/utils/color.ts | 23 +++++++++++++++++ 5 files changed, 32 insertions(+), 54 deletions(-) diff --git a/core/core-frontend/src/custom-component/v-query/Component.vue b/core/core-frontend/src/custom-component/v-query/Component.vue index b41d6c69e6..14cb969a20 100644 --- a/core/core-frontend/src/custom-component/v-query/Component.vue +++ b/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' }) 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 70c3b547a6..423be7a118 100644 --- a/core/core-frontend/src/custom-component/v-query/Select.vue +++ b/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(() => { 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 dfa39a3c11..d0b371498f 100644 --- a/core/core-frontend/src/custom-component/v-query/Tree.vue +++ b/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) }) diff --git a/core/core-frontend/src/store/modules/appearance.ts b/core/core-frontend/src/store/modules/appearance.ts index 1add1da78c..86176af9e1 100644 --- a/core/core-frontend/src/store/modules/appearance.ts +++ b/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/' diff --git a/core/core-frontend/src/utils/color.ts b/core/core-frontend/src/utils/color.ts index 6719b751e3..f16f4f5269 100644 --- a/core/core-frontend/src/utils/color.ts +++ b/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')} + ` +}