From b81f54751bbe46992dfd835f5a71d20665f10f8b Mon Sep 17 00:00:00 2001 From: ulleo Date: Mon, 2 Dec 2024 17:35:13 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E8=A1=A8):=20=E6=8C=87=E6=A0=87?= =?UTF-8?q?=E5=8D=A1=E3=80=81=E4=BA=91=E8=AF=8D=E5=9B=BE=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E5=AD=97=E4=BD=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #13408 --- .../indicator/DeIndicator.vue | 29 +++++++++++-------- core/core-frontend/src/utils/canvasStyle.ts | 12 +++++--- .../components/IndicatorNameSelector.vue | 13 +++++++-- .../components/IndicatorValueSelector.vue | 12 ++++++-- .../js/panel/charts/others/word-cloud.ts | 2 +- .../views/chart/components/views/index.vue | 1 + 6 files changed, 48 insertions(+), 21 deletions(-) diff --git a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue index 08adfa4842..96ee5508d9 100644 --- a/core/core-frontend/src/custom-component/indicator/DeIndicator.vue +++ b/core/core-frontend/src/custom-component/indicator/DeIndicator.vue @@ -43,6 +43,11 @@ const props = defineProps({ type: String, required: false, default: 'common' + }, + fontFamily: { + type: String, + required: false, + default: 'inherit' } }) @@ -195,8 +200,8 @@ const indicatorClass = ref({ color: thresholdColor.value.color, 'font-size': DEFAULT_INDICATOR_STYLE.fontSize + 'px', 'font-family': defaultTo( - CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily], - DEFAULT_INDICATOR_STYLE.fontFamily + props.fontFamily, + CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily] ), 'font-weight': DEFAULT_INDICATOR_STYLE.isBolder ? 'bold' : 'normal', 'font-style': DEFAULT_INDICATOR_STYLE.isItalic ? 'italic' : 'normal', @@ -209,8 +214,8 @@ const indicatorSuffixClass = ref({ color: DEFAULT_INDICATOR_STYLE.suffixColor, 'font-size': DEFAULT_INDICATOR_STYLE.suffixFontSize + 'px', 'font-family': defaultTo( - CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.suffixFontFamily], - DEFAULT_INDICATOR_STYLE.suffixFontFamily + props.fontFamily, + CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily] ), 'font-weight': DEFAULT_INDICATOR_STYLE.suffixIsBolder ? 'bold' : 'normal', 'font-style': DEFAULT_INDICATOR_STYLE.suffixIsItalic ? 'italic' : 'normal', @@ -233,8 +238,8 @@ const indicatorNameClass = ref({ color: DEFAULT_INDICATOR_NAME_STYLE.color, 'font-size': DEFAULT_INDICATOR_NAME_STYLE.fontSize + 'px', 'font-family': defaultTo( - CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_NAME_STYLE.fontFamily], - DEFAULT_INDICATOR_NAME_STYLE.fontFamily + props.fontFamily, + CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily] ), 'font-weight': DEFAULT_INDICATOR_NAME_STYLE.isBolder ? 'bold' : 'normal', 'font-style': DEFAULT_INDICATOR_NAME_STYLE.isItalic ? 'italic' : 'normal', @@ -296,8 +301,8 @@ const renderChart = async view => { color: thresholdColor.value.color, 'font-size': indicator.fontSize + 'px', 'font-family': defaultTo( - CHART_FONT_FAMILY_MAP[indicator.fontFamily], - DEFAULT_INDICATOR_STYLE.fontFamily + indicator.fontFamily, + CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.fontFamily] ), 'font-weight': indicator.isBolder ? 'bold' : 'normal', 'font-style': indicator.isItalic ? 'italic' : 'normal', @@ -311,8 +316,8 @@ const renderChart = async view => { color: suffixColor, 'font-size': indicator.suffixFontSize + 'px', 'font-family': defaultTo( - CHART_FONT_FAMILY_MAP[indicator.suffixFontFamily], - DEFAULT_INDICATOR_STYLE.suffixFontFamily + indicator.suffixFontFamily, + CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_STYLE.suffixFontFamily] ), 'font-weight': indicator.suffixIsBolder ? 'bold' : 'normal', 'font-style': indicator.suffixIsItalic ? 'italic' : 'normal', @@ -336,8 +341,8 @@ const renderChart = async view => { color: nameColor, 'font-size': indicatorName.fontSize + 'px', 'font-family': defaultTo( - CHART_FONT_FAMILY_MAP[indicatorName.fontFamily], - DEFAULT_INDICATOR_NAME_STYLE.fontFamily + indicatorName.fontFamily, + CHART_FONT_FAMILY_MAP[DEFAULT_INDICATOR_NAME_STYLE.fontFamily] ), 'font-weight': indicatorName.isBolder ? 'bold' : 'normal', 'font-style': indicatorName.isItalic ? 'italic' : 'normal', diff --git a/core/core-frontend/src/utils/canvasStyle.ts b/core/core-frontend/src/utils/canvasStyle.ts index 7d2267b6c0..4c764c9066 100644 --- a/core/core-frontend/src/utils/canvasStyle.ts +++ b/core/core-frontend/src/utils/canvasStyle.ts @@ -427,10 +427,14 @@ export function adaptCurTheme(customStyle, customAttr) { export function adaptTitleFontFamily(fontFamily, viewInfo) { if (viewInfo) { - viewInfo.customStyle['text']['fontFamily'] = defaultTo( - CHART_FONT_FAMILY_MAP_TRANS[fontFamily], - fontFamily - ) + const _fontFamily = defaultTo(CHART_FONT_FAMILY_MAP_TRANS[fontFamily], fontFamily) + viewInfo.customStyle['text']['fontFamily'] = _fontFamily + //针对指标卡设置字体 + if (viewInfo.type === 'indicator') { + viewInfo.customAttr['indicator']['fontFamily'] = fontFamily + viewInfo.customAttr['indicator']['suffixFontFamily'] = fontFamily + viewInfo.customAttr['indicatorName']['fontFamily'] = fontFamily + } } } diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue index 3f46e15314..dd677a5108 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue @@ -9,17 +9,21 @@ import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_INDICATOR_NAME_STYLE, - DEFAULT_BASIC_STYLE + DEFAULT_BASIC_STYLE, + CHART_FONT_FAMILY_ORIGIN } from '@/views/chart/components/editor/util/chart' import { cloneDeep, defaultsDeep } from 'lodash-es' import Icon from '@/components/icon-custom/src/Icon.vue' import { hexColorToRGBA } from '@/views/chart/components/js/util' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { storeToRefs } from 'pinia' +import { useAppearanceStoreWithOut } from '@/store/modules/appearance' const { t } = useI18n() const dvMainStore = dvMainStoreWithOut() const { batchOptStatus } = storeToRefs(dvMainStore) +const appearanceStore = useAppearanceStoreWithOut() + const props = defineProps({ chart: { type: Object, @@ -39,7 +43,12 @@ const toolTip = computed(() => { return props.themes === 'dark' ? 'ndark' : 'dark' }) const predefineColors = COLOR_PANEL -const fontFamily = CHART_FONT_FAMILY +const fontFamily = CHART_FONT_FAMILY_ORIGIN.concat( + appearanceStore.fontList.map(ele => ({ + name: ele.name, + value: ele.name + })) +) const fontLetterSpace = CHART_FONT_LETTER_SPACE const state = reactive({ diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue index 3ce1c376af..968a66caae 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue @@ -15,7 +15,8 @@ import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_INDICATOR_STYLE, - DEFAULT_BASIC_STYLE + DEFAULT_BASIC_STYLE, + CHART_FONT_FAMILY_ORIGIN } from '@/views/chart/components/editor/util/chart' import { cloneDeep, defaultsDeep } from 'lodash-es' import { ElIcon, ElInput } from 'element-plus-secondary' @@ -23,8 +24,10 @@ import Icon from '@/components/icon-custom/src/Icon.vue' import { hexColorToRGBA } from '@/views/chart/components/js/util' import { storeToRefs } from 'pinia' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' +import { useAppearanceStoreWithOut } from '@/store/modules/appearance' const dvMainStore = dvMainStoreWithOut() const { batchOptStatus } = storeToRefs(dvMainStore) +const appearanceStore = useAppearanceStoreWithOut() const { t } = useI18n() @@ -47,7 +50,12 @@ const toolTip = computed(() => { return props.themes === 'dark' ? 'ndark' : 'dark' }) const predefineColors = COLOR_PANEL -const fontFamily = CHART_FONT_FAMILY +const fontFamily = CHART_FONT_FAMILY_ORIGIN.concat( + appearanceStore.fontList.map(ele => ({ + name: ele.name, + value: ele.name + })) +) const fontLetterSpace = CHART_FONT_LETTER_SPACE const state = reactive({ diff --git a/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts b/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts index 0e5c057de3..ec5a9920e4 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/charts/others/word-cloud.ts @@ -99,7 +99,7 @@ export class WordCloud extends G2PlotChartView { weightField: 'value', colorField: 'field', wordStyle: { - fontFamily: 'Verdana', + fontFamily: chart.fontFamily ? chart.fontFamily : 'Verdana', fontSize: (misc.wordSizeRange ?? DEFAULT_MISC.wordSizeRange) as [number, number], rotation: [0, 0], padding: misc.wordSpacing ?? DEFAULT_MISC.wordSpacing diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue index 38d54bb3e6..a7d0e15b19 100644 --- a/core/core-frontend/src/views/chart/components/views/index.vue +++ b/core/core-frontend/src/views/chart/components/views/index.vue @@ -1142,6 +1142,7 @@ const titleTooltipWidth = computed(() => { :view="view" :show-position="showPosition" :suffixId="suffixId" + :font-family="fontFamily" />