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

refactor: 组件内部字体适配
2025-02-25 03:52:59 +08:00 · 2024-11-22 13:16:18 +08:00 · 2024-11-22 13:16:18 +08:00 · 32b3cf6b0b
commit 32b3cf6b0b
parent a443c846cc 211f237756
20 changed files with 107 additions and 8 deletions
--- 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?) => {
--- 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>
    <!-- 右击菜单 -->
--- 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>
--- 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()
--- 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)
--- 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 {
--- 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
      >
--- 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>
--- 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;
--- 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>
--- 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>
--- 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>
--- 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;
  }
--- 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 })
  })
 }
--- 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>
--- 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"
--- 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"
--- 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('')
--- 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>
      <!-- 右侧侧组件列表 -->
--- 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>