From 211f2377567695cd2872af844a3c042e2d7cf46d Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 22 Nov 2024 13:12:20 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BB=84=E4=BB=B6=E5=86=85?=
 =?UTF-8?q?=E9=83=A8=E5=AD=97=E4=BD=93=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard-style/OverallSetting.vue              |  6 +++++-
 .../data-visualization/canvas/CanvasCore.vue        |  8 ++++++++
 .../data-visualization/canvas/ComponentWrapper.vue  |  7 +++++++
 .../components/visualization/CanvasBaseSetting.vue  |  6 +++++-
 .../src/components/visualization/ViewTrackBar.vue   | 11 ++++++++++-
 .../src/custom-component/de-tabs/Component.vue      | 13 ++++++++++++-
 .../src/custom-component/picture/Component.vue      |  2 +-
 .../src/custom-component/user-view/Component.vue    |  6 ++++++
 .../src/custom-component/v-query/Component.vue      |  3 +--
 .../src/custom-component/v-query/DynamicTime.vue    |  7 +++++++
 .../custom-component/v-query/DynamicTimeRange.vue   |  6 ++++++
 .../v-query/DynamicTimeRangeFiltering.vue           |  7 +++++++
 .../src/custom-component/v-query/Select.vue         |  1 +
 core/core-frontend/src/utils/canvasUtils.ts         |  6 +++++-
 core/core-frontend/src/views/canvas/DeCanvas.vue    |  7 +++++++
 .../views/components/ChartComponentG2Plot.vue       |  6 ++++++
 .../views/components/ChartComponentS2.vue           |  6 ++++++
 .../src/views/chart/components/views/index.vue      |  5 +++++
 core/core-frontend/src/views/dashboard/index.vue    |  1 +
 .../src/views/mobile/panel/MobileInPc.vue           |  1 +
 20 files changed, 107 insertions(+), 8 deletions(-)

diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
index f04209fb99..0fa80ad43b 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
@@ -298,7 +298,11 @@ const onRefreshChange = val => {
   themeChange()
 }
 const fontFamilyChange = () => {
-  appearanceStore.setCurrentFont(canvasStyleData.fontFamily)
+  appearanceStore.setCurrentFont(canvasStyleData.value.fontFamily)
+  document.documentElement.style.setProperty(
+    '--de-canvas_custom_font',
+    `${canvasStyleData.value.fontFamily}`
+  )
 }
 
 const themeChange = (modifyName?) => {
diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index 063dd6c8d8..4253cef799 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -172,6 +172,11 @@ const props = defineProps({
     type: Boolean,
     required: false,
     default: true
+  },
+  fontFamily: {
+    type: String,
+    required: false,
+    default: 'inherit'
   }
 })
 
@@ -1628,6 +1633,7 @@ defineExpose({
         :dv-info="dvInfo"
         :canvas-active="canvasActive"
         :show-position="'canvas'"
+        :font-family="fontFamily"
       />
       <component
         v-else-if="item.component.includes('Svg')"
@@ -1646,6 +1652,7 @@ defineExpose({
         :active="item.id === curComponentId"
         :canvas-active="canvasActive"
         :show-position="'edit'"
+        :font-family="fontFamily"
       />
       <component
         v-else
@@ -1664,6 +1671,7 @@ defineExpose({
         :active="item.id === curComponentId"
         :canvas-active="canvasActive"
         :show-position="'edit'"
+        :font-family="fontFamily"
       />
     </Shape>
     <!-- 右击菜单 -->
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index 4fc82cdac1..aef95bbb7d 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -107,6 +107,12 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'common'
+  },
+  // 字体
+  fontFamily: {
+    type: String,
+    required: false,
+    default: 'inherit'
   }
 })
 const {
@@ -424,6 +430,7 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
           :disabled="true"
           :is-edit="false"
           :suffix-id="suffixId"
+          :font-family="fontFamily"
           @onPointClick="onPointClick"
         />
       </div>
diff --git a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
index 2cf666b38f..4d0cb6d3fa 100644
--- a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
+++ b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
@@ -96,7 +96,11 @@ const fontFamily = CHART_FONT_FAMILY.concat(
   }))
 )
 const onFontFamilyChange = () => {
-  appearanceStore.setCurrentFont(canvasStyleData.fontFamily)
+  appearanceStore.setCurrentFont(canvasStyleData.value.fontFamily)
+  document.documentElement.style.setProperty(
+    '--de-canvas_custom_font',
+    `${canvasStyleData.value.fontFamily}`
+  )
 }
 const onThemeChange = () => {
   snapshotStore.recordSnapshotCache()
diff --git a/core/core-frontend/src/components/visualization/ViewTrackBar.vue b/core/core-frontend/src/components/visualization/ViewTrackBar.vue
index cafa0ace5d..7611ff7350 100644
--- a/core/core-frontend/src/components/visualization/ViewTrackBar.vue
+++ b/core/core-frontend/src/components/visualization/ViewTrackBar.vue
@@ -3,7 +3,11 @@
     <el-dropdown :teleported="false" trigger="click">
       <input id="input" ref="trackButton" type="button" hidden />
       <template #dropdown>
-        <el-dropdown-menu class="track-menu" :append-to-body="false">
+        <el-dropdown-menu
+          class="track-menu"
+          :style="{ 'font-family': fontFamily }"
+          :append-to-body="false"
+        >
           <el-dropdown-item
             v-for="(item, key) in trackMenu"
             :key="key"
@@ -27,6 +31,11 @@ const props = defineProps({
   trackMenu: {
     type: Array,
     required: true
+  },
+  fontFamily: {
+    type: String,
+    required: false,
+    default: 'inherit'
   }
 })
 const { trackMenu } = toRefs(props)
diff --git a/core/core-frontend/src/custom-component/de-tabs/Component.vue b/core/core-frontend/src/custom-component/de-tabs/Component.vue
index 7d78e97910..1fd447001b 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue
@@ -42,7 +42,7 @@
                   <el-icon v-if="isEdit"><ArrowDown /></el-icon>
                 </span>
                 <template #dropdown>
-                  <el-dropdown-menu>
+                  <el-dropdown-menu :style="{ 'font-family': fontFamily }">
                     <el-dropdown-item :command="beforeHandleCommand('editTitle', tabItem)">
                       编辑标题
                     </el-dropdown-item>
@@ -77,6 +77,7 @@
           :canvas-id="element.id + '--' + tabItem.name"
           :class="moveActive ? 'canvas-move-in' : ''"
           :canvas-active="editableTabsValue === tabItem.name"
+          :font-family="fontFamily"
         ></de-canvas>
         <de-preview
           v-else
@@ -90,6 +91,7 @@
           :preview-active="editableTabsValue === tabItem.name"
           :show-position="showPosition"
           :outer-scale="scale"
+          :font-family="fontFamily"
           :outer-search-count="searchCount"
         ></de-preview>
       </div>
@@ -190,6 +192,12 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 0
+  },
+  // 仪表板字体
+  fontFamily: {
+    type: String,
+    required: false,
+    default: 'inherit'
   }
 })
 const {
@@ -566,6 +574,9 @@ onBeforeMount(() => {
   :deep(.ed-tabs__content) {
     height: calc(100% - 46px) !important;
   }
+  :deep(.ed-tabs__item) {
+    font-family: inherit;
+  }
 }
 
 .ed-tabs-dark {
diff --git a/core/core-frontend/src/custom-component/picture/Component.vue b/core/core-frontend/src/custom-component/picture/Component.vue
index 883a5d2df0..9e56fde491 100644
--- a/core/core-frontend/src/custom-component/picture/Component.vue
+++ b/core/core-frontend/src/custom-component/picture/Component.vue
@@ -8,7 +8,7 @@
     />
     <div v-else class="pic-upload">
       <span
-        ><el-button @click="uploadImg" text style="color: #646a73" icon="Plus"
+        ><el-button @click="uploadImg" text style="font-family: inherit; color: #646a73" icon="Plus"
           >请上传图片...</el-button
         ></span
       >
diff --git a/core/core-frontend/src/custom-component/user-view/Component.vue b/core/core-frontend/src/custom-component/user-view/Component.vue
index 822a8d75dd..b8bd60cff0 100644
--- a/core/core-frontend/src/custom-component/user-view/Component.vue
+++ b/core/core-frontend/src/custom-component/user-view/Component.vue
@@ -58,6 +58,11 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'common'
+  },
+  fontFamily: {
+    type: String,
+    required: false,
+    default: 'inherit'
   }
 })
 
@@ -87,6 +92,7 @@ const onPointClick = param => {
       :search-count="searchCount"
       :disabled="disabled"
       :suffixId="suffixId"
+      :font-family="fontFamily"
       @onPointClick="onPointClick"
     ></chart>
   </div>
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 4c4b5b7905..31f883a9d5 100644
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/core/core-frontend/src/custom-component/v-query/Component.vue
@@ -698,6 +698,7 @@ const autoStyle = computed(() => {
           <el-button
             :disabled="showPosition === 'preview' || mobileInPc"
             @click="addCriteriaConfigOut"
+            style="font-family: inherit"
             text
           >
             {{ t('v_query.add_query_condition') }}
@@ -825,7 +826,6 @@ const autoStyle = computed(() => {
       justify-content: center;
       color: #646a73;
       text-align: center;
-      font-family: var(--de-custom_font, 'PingFang');
       font-size: 16px;
       font-style: normal;
       font-weight: 400;
@@ -900,7 +900,6 @@ const autoStyle = computed(() => {
           text-overflow: ellipsis;
           white-space: nowrap;
           color: #1f2329;
-          font-family: var(--de-custom_font, 'PingFang');
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/core/core-frontend/src/custom-component/v-query/DynamicTime.vue b/core/core-frontend/src/custom-component/v-query/DynamicTime.vue
index 98607b4190..95f8e6456b 100644
--- a/core/core-frontend/src/custom-component/v-query/DynamicTime.vue
+++ b/core/core-frontend/src/custom-component/v-query/DynamicTime.vue
@@ -167,6 +167,13 @@ onBeforeMount(() => {
     v-model="selectValue"
     :type="config.timeGranularity"
     :prefix-icon="Calendar"
+    :popper-class="'custom-dynamic-time-popper_class'"
     :placeholder="$t('commons.date.select_date_time')"
   />
 </template>
+
+<style lang="less">
+.custom-dynamic-time-popper_class {
+  font-family: var(--de-canvas_custom_font);
+}
+</style>
diff --git a/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue b/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
index 04f2535d0e..aa36a05b45 100644
--- a/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
+++ b/core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue
@@ -170,8 +170,14 @@ const formatDate = computed(() => {
     :type="config.timeGranularityMultiple"
     :prefix-icon="Calendar"
     :format="formatDate"
+    :popper-class="'custom-dynamic-time-range-popper_class'"
     :range-separator="$t('cron.to')"
     :start-placeholder="$t('datasource.start_time')"
     :end-placeholder="$t('datasource.end_time')"
   />
 </template>
+<style lang="less">
+.custom-dynamic-time-range-popper_class {
+  font-family: var(--de-canvas_custom_font);
+}
+</style>
diff --git a/core/core-frontend/src/custom-component/v-query/DynamicTimeRangeFiltering.vue b/core/core-frontend/src/custom-component/v-query/DynamicTimeRangeFiltering.vue
index 4715db89dd..270d53edbd 100644
--- a/core/core-frontend/src/custom-component/v-query/DynamicTimeRangeFiltering.vue
+++ b/core/core-frontend/src/custom-component/v-query/DynamicTimeRangeFiltering.vue
@@ -147,8 +147,15 @@ const formatDate = computed(() => {
     :type="timeInterval"
     :prefix-icon="Calendar"
     :format="formatDate"
+    :popper-class="'custom-dynamic-time-range-filter-popper_class'"
     :range-separator="$t('cron.to')"
     :start-placeholder="$t('datasource.start_time')"
     :end-placeholder="$t('datasource.end_time')"
   />
 </template>
+
+<style lang="less">
+.custom-dynamic-time-range-filter-popper_class {
+  font-family: var(--de-canvas_custom_font);
+}
+</style>
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 920bf6e3e1..2cc0c9b969 100644
--- a/core/core-frontend/src/custom-component/v-query/Select.vue
+++ b/core/core-frontend/src/custom-component/v-query/Select.vue
@@ -648,6 +648,7 @@ defineExpose({
 <style lang="less">
 .filter-select-popper_class {
   --ed-fill-color-light: #f5f7fa47;
+  font-family: var(--de-canvas_custom_font);
   .ed-vl__window.ed-select-dropdown__list {
     min-width: 200px;
   }
diff --git a/core/core-frontend/src/utils/canvasUtils.ts b/core/core-frontend/src/utils/canvasUtils.ts
index 561688a741..75f926fc6a 100644
--- a/core/core-frontend/src/utils/canvasUtils.ts
+++ b/core/core-frontend/src/utils/canvasUtils.ts
@@ -348,7 +348,11 @@ export function initCanvasDataPrepare(dvId, busiFlag, callBack) {
       dvInfo.type === 'dashboard' && canvasStyleResult['dashboard'].gap === 'yes'
         ? canvasStyleResult['dashboard'].gapSize
         : 0
-    appearanceStore.setCurrentFont(canvasStyleData.fontFamily)
+    appearanceStore.setCurrentFont(canvasStyleResult.fontFamily)
+    document.documentElement.style.setProperty(
+      '--de-canvas_custom_font',
+      `${canvasStyleResult.fontFamily}`
+    )
     callBack({ canvasDataResult, canvasStyleResult, dvInfo, canvasViewInfoPreview, curPreviewGap })
   })
 }
diff --git a/core/core-frontend/src/views/canvas/DeCanvas.vue b/core/core-frontend/src/views/canvas/DeCanvas.vue
index f698f2d6c2..1be5155bd9 100644
--- a/core/core-frontend/src/views/canvas/DeCanvas.vue
+++ b/core/core-frontend/src/views/canvas/DeCanvas.vue
@@ -39,6 +39,12 @@ const props = defineProps({
     type: Number,
     required: false,
     default: 1
+  },
+  // 仪表板字体
+  fontFamily: {
+    type: String,
+    required: false,
+    default: 'inherit'
   }
 })
 const { canvasStyleData, componentData, canvasViewInfo, canvasId, canvasActive, outerScale } =
@@ -321,6 +327,7 @@ defineExpose({
         :base-margin-top="baseMarginTop"
         :base-width="baseWidth"
         :base-height="baseHeight"
+        :font-family="fontFamily"
         @scrollCanvasToTop="scrollTo(1)"
       ></canvas-core>
     </div>
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
index 35174072d9..e8c60059f8 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue
@@ -68,6 +68,11 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'common'
+  },
+  fontFamily: {
+    type: String,
+    required: false,
+    default: 'inherit'
   }
 })
 
@@ -568,6 +573,7 @@ onBeforeUnmount(() => {
     <view-track-bar
       ref="viewTrack"
       :track-menu="trackMenu"
+      :font-family="fontFamily"
       class="track-bar"
       :style="state.trackBarStyle"
       @trackClick="trackClick"
diff --git a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
index c5f2ba5e41..b75e0aa298 100644
--- a/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
+++ b/core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue
@@ -83,6 +83,11 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'common'
+  },
+  fontFamily: {
+    type: String,
+    required: false,
+    default: 'inherit'
   }
 })
 
@@ -659,6 +664,7 @@ const tablePageClass = computed(() => {
     <view-track-bar
       ref="viewTrack"
       :track-menu="trackMenu"
+      :font-family="fontFamily"
       class="track-bar"
       :style="state.trackBarStyle"
       @trackClick="trackClick"
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 856d49a1e0..2d94dbe92e 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -130,6 +130,11 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'common'
+  },
+  fontFamily: {
+    type: String,
+    required: false,
+    default: 'inherit'
   }
 })
 const dynamicAreaId = ref('')
diff --git a/core/core-frontend/src/views/dashboard/index.vue b/core/core-frontend/src/views/dashboard/index.vue
index ebea2a420d..58b676b4f8 100644
--- a/core/core-frontend/src/views/dashboard/index.vue
+++ b/core/core-frontend/src/views/dashboard/index.vue
@@ -273,6 +273,7 @@ onUnmounted(() => {
           :component-data="componentData"
           :canvas-style-data="canvasStyleData"
           :canvas-view-info="canvasViewInfo"
+          :font-family="canvasStyleData.fontFamily"
         ></de-canvas>
       </main>
       <!-- 右侧侧组件列表 -->
diff --git a/core/core-frontend/src/views/mobile/panel/MobileInPc.vue b/core/core-frontend/src/views/mobile/panel/MobileInPc.vue
index 47de2ffd8f..37a2f0c200 100644
--- a/core/core-frontend/src/views/mobile/panel/MobileInPc.vue
+++ b/core/core-frontend/src/views/mobile/panel/MobileInPc.vue
@@ -20,6 +20,7 @@ const state = reactive({
       :component-data="componentData"
       :canvas-style-data="canvasStyleData"
       :canvas-view-info="canvasViewInfo"
+      :font-family="canvasStyleData.fontFamily"
     ></de-canvas>
   </div>
 </template>