Merge pull request #13475 from dataease/pr@dev-v2@feat_canvas-font-family

feat(数据大屏、仪表板): 仪表板数据大屏支持整体字体更换 #13408

core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue

@@ -23,6 +23,21 @@
         </color-button>
       </el-space>
     </el-form-item>
+    <el-form-item
+      v-if="dvInfo.type === 'dashboard'"
+      class="form-item"
+      :class="'form-item-' + themes"
+      label="仪表板字体选择"
+    >
+      <el-select :effect="themes" v-model="canvasStyleData.fontFamily" @change="styleChange">
+        <el-option
+          v-for="option in fontFamily"
+          :key="option.value"
+          :label="option.name"
+          :value="option.value"
+        />
+      </el-select>
+    </el-form-item>
     <el-form-item
       v-if="dvInfo.type === 'dashboard'"
       class="form-item"
@@ -225,6 +240,7 @@ import {
   LIGHT_THEME_DASHBOARD_BACKGROUND
 } from '@/utils/canvasStyle'
 import {
+  CHART_FONT_FAMILY,
   DEFAULT_COLOR_CASE_DARK,
   DEFAULT_COLOR_CASE_LIGHT,
   DEFAULT_TAB_COLOR_CASE_DARK,
@@ -245,8 +261,11 @@ import {
   COMMON_COMPONENT_BACKGROUND_DARK,
   COMMON_COMPONENT_BACKGROUND_LIGHT
 } from '@/custom-component/component-list'
-import { ElFormItem, ElIcon, ElMessage, ElSpace } from 'element-plus-secondary'
+import { ElFormItem, ElIcon, ElSpace } from 'element-plus-secondary'
 import Icon from '@/components/icon-custom/src/Icon.vue'
+import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
+const appearanceStore = useAppearanceStoreWithOut()
+
 const snapshotStore = snapshotStoreWithOut()
 const props = defineProps({
   themes: {
@@ -254,6 +273,12 @@ const props = defineProps({
     default: 'light'
   }
 })
+const fontFamily = CHART_FONT_FAMILY.concat(
+  appearanceStore.fontList.map(ele => ({
+    name: ele.name,
+    value: ele.name
+  }))
+)
 const toolTip = computed(() => {
   return props.themes === 'dark' ? 'ndark' : 'dark'
 })
@@ -271,6 +296,9 @@ const onRefreshChange = val => {
   }
   themeChange()
 }
+const styleChange = () => {
+  snapshotStore.recordSnapshotCache('renderChart')
+}
 
 const themeChange = (modifyName?) => {
   if (modifyName === 'themeColor') {

core/core-frontend/src/components/visualization/CanvasBaseSetting.vue

@@ -1,6 +1,21 @@
 <template>
   <div style="width: 100%" ref="bgForm">
     <el-form label-position="top" style="width: 100%; margin-bottom: 16px">
+      <el-form-item
+        class="form-item no-margin-bottom"
+        :class="'form-item-' + themes"
+        label="数据大屏字体选择"
+      >
+        <el-select :effect="themes" v-model="canvasStyleData.fontFamily" @change="onThemeChange">
+          <el-option
+            v-for="option in fontFamily"
+            :key="option.value"
+            :label="option.name"
+            :value="option.value"
+          />
+        </el-select>
+      </el-form-item>
+
       <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
         <el-checkbox
           size="small"
@@ -63,11 +78,19 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { ElFormItem, ElIcon } from 'element-plus-secondary'
 import Icon from '../icon-custom/src/Icon.vue'
+import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
+import { CHART_FONT_FAMILY } from '@/views/chart/components/editor/util/chart'
 const snapshotStore = snapshotStoreWithOut()
 
 const dvMainStore = dvMainStoreWithOut()
 const { canvasStyleData } = storeToRefs(dvMainStore)
-
+const appearanceStore = useAppearanceStoreWithOut()
+const fontFamily = CHART_FONT_FAMILY.concat(
+  appearanceStore.fontList.map(ele => ({
+    name: ele.name,
+    value: ele.name
+  }))
+)
 const onThemeChange = () => {
   snapshotStore.recordSnapshotCache()
 }

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

@@ -223,6 +223,7 @@ export function historyAdaptor(
   canvasVersion
 ) {
   //历史字段适配
+  canvasStyleResult['fontFamily'] = canvasStyleResult['fontFamily'] || 'PingFang'
   canvasStyleResult.dashboard['showGrid'] = canvasStyleResult.dashboard['showGrid'] || false
   canvasStyleResult.dashboard['matrixBase'] = canvasStyleResult.dashboard['matrixBase'] || 4
   canvasStyleResult.component['seniorStyleSetting'] =

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

@@ -200,7 +200,8 @@ export function getCanvasStyle(canvasStyleData, canvasId = 'canvas-main') {
     backgroundColor,
     backgroundImageEnable,
     fontSize,
-    mobileSetting
+    mobileSetting,
+    fontFamily
   } = canvasStyleData
   const style = { fontSize: fontSize + 'px', color: canvasStyleData.color }
   if (isMainCanvas(canvasId)) {
@@ -225,6 +226,7 @@ export function getCanvasStyle(canvasStyleData, canvasId = 'canvas-main') {
         style['background'] = `url(${imgUrlTrans(background)}) no-repeat`
       }
     }
+    style['font-family'] = fontFamily
   }
 
   return style

core/core-frontend/src/views/chart/components/editor/util/dataVisualization.ts

@@ -102,7 +102,8 @@ export const DEFAULT_CANVAS_STYLE_DATA_BASE = {
   background: '',
   openCommonStyle: true,
   opacity: 1, // 废弃
-  fontSize: 14
+  fontSize: 14,
+  fontFamily: 'PingFang' //字体设置 默认PingFang
 }
 
 // 基础亮色主题