Merge pull request #13490 from dataease/pr@dev-v2@refactor_font-inner

refactor: 组件内部字体适配

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?) => {

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>
     <!-- 右击菜单 -->

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>

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()

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)

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 {

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
       >

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>

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;

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>

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>

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>

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;
   }

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 })
   })
 }

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>

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"

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"

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('')

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>
       <!-- 右侧侧组件列表 -->

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>