From 798772d5b29241582644b0fe9a426d0a2bbed89f Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 25 Nov 2024 22:47:33 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=9B=BD=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../io/dataease/MybatisPlusGenerator.java     |   2 +-
 .../dashboard-style/OverallSetting.vue        |   8 +-
 .../data-visualization/CanvasAttr.vue         |  36 +-
 .../data-visualization/ComponentToolBar.vue   |   5 +-
 .../data-visualization/DvToolbar.vue          |  43 +-
 .../data-visualization/RealTimeListTree.vue   |   6 +-
 .../canvas/ContextMenuDetails.vue             | 102 +--
 .../visualization/CanvasBaseSetting.vue       |  15 +-
 .../visualization/CanvasCacheDialog.vue       |  10 +-
 .../components/visualization/LinkJumpSet.vue  |  53 +-
 .../components/visualization/LinkageSet.vue   |  42 +-
 .../visualization/LinkageSetOption.vue        |  20 +-
 .../visualization/OuterParamsSet.vue          |  90 ++-
 .../visualization/OuterParamsSetDS.vue        | 662 ------------------
 .../common/ComponentPosition.vue              |   9 +-
 .../component-background/CanvasBackground.vue |  10 +-
 .../canvas-filter-btn/Component.vue           |   4 +-
 .../common/CarouselSetting.vue                |  12 +-
 .../custom-component/common/CommonAttr.vue    |  17 +-
 .../common/CommonBorderSetting.vue            |  24 +-
 .../custom-component/common/CommonEvent.vue   |  14 +-
 .../common/CommonStyleSet.vue                 |  27 +-
 .../common/ComponentConfig.ts                 |  92 ++-
 .../component-group/MediaGroup.vue            |  11 +-
 .../component-group/MoreComGroup.vue          |   7 +-
 .../component-group/QueryGroup.vue            |   5 +-
 .../component-group/TextGroup.vue             |   7 +-
 .../src/custom-component/component-list.ts    |  84 +--
 .../custom-component/de-tabs/Component.vue    |  10 +-
 .../de-tabs/CustomTabsSort.vue                |   4 +-
 .../de-time-clock/CustomAttr.vue              |   2 +-
 .../de-time-clock/TimeClockFormat.vue         |   7 +-
 .../src/custom-component/de-video/Attr.vue    |   5 +-
 .../picture-group/PictureGroupUploadAttr.vue  |  18 +-
 .../src/custom-component/picture/Attr.vue     |  25 +-
 .../custom-component/picture/Component.vue    |  12 +-
 .../custom-component/pop-area/Component.vue   |   5 +-
 core/core-frontend/src/locales/en.ts          | 102 +++
 core/core-frontend/src/locales/tw.ts          | 100 +++
 core/core-frontend/src/locales/zh-CN.ts       | 451 +++++++++---
 .../editor/common/ChartTemplateInfo.vue       |   6 +-
 .../editor/dataset-select/DatasetSelect.vue   |   4 +-
 .../editor/editor-senior/Senior.vue           |  22 +-
 .../editor/editor-style/ChartStyle.vue        |  19 +-
 .../views/chart/components/editor/index.vue   |   4 +-
 .../chart/components/editor/util/chart.ts     |   4 +-
 .../src/views/common/DeAppApply.vue           |  37 +-
 .../src/views/common/DeResourceCreateOpt.vue  |   4 +-
 .../src/views/common/DeResourceGroupOpt.vue   |  48 +-
 .../src/views/common/DeResourceTree.vue       |  64 +-
 .../src/views/common/MultiplexingCanvas.vue   |  24 +-
 .../views/dashboard/DashboardPreviewShow.vue  |  10 +-
 .../dashboard/MobileBackgroundSelector.vue    |   6 +-
 .../src/views/dashboard/MobileConfigPanel.vue |  21 +-
 .../src/views/dashboard/index.vue             |  10 +-
 .../MultiplexPreviewShow.vue                  |  13 +-
 .../data-visualization/PreviewCanvas.vue      |   2 +-
 .../PreviewCanvasMobile.vue                   |   6 +-
 .../views/data-visualization/PreviewHead.vue  |  16 +-
 .../views/data-visualization/PreviewShow.vue  |   8 +-
 .../src/views/data-visualization/index.vue    |  12 +-
 61 files changed, 1265 insertions(+), 1233 deletions(-)
 delete mode 100644 core/core-frontend/src/components/visualization/OuterParamsSetDS.vue

diff --git a/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java b/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java
index ab90be4089..e648e87858 100644
--- a/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java
+++ b/core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java
@@ -25,7 +25,7 @@ public class MybatisPlusGenerator {
     /**
      * 这是要生成代码的表名称
      */
-    private static final String TABLE_NAME = "visualization_link_jump_target_view_info";
+    private static final String TABLE_NAME = "data_visualization_info";
 
     /**
      * 下面两个配置基本上不用动
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 23c49227dc..458ba5ca0b 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
@@ -27,7 +27,7 @@
       v-if="dvInfo.type === 'dashboard'"
       class="form-item"
       :class="'form-item-' + themes"
-      label="仪表板字体选择"
+      :label="t('visualization.font_family_select')"
     >
       <el-select :effect="themes" v-model="canvasStyleData.fontFamily" @change="fontFamilyChange()">
         <el-option
@@ -203,10 +203,10 @@
         @change="themeChange"
       >
         <span class="data-area-label">
-          <span style="margin-right: 4px"> 显示放大、导出等悬浮按钮 </span>
+          <span style="margin-right: 4px"> {{ t('visualization.button_tips') }}</span>
           <el-tooltip class="item" :effect="toolTip" placement="bottom">
             <template #content>
-              <div>预览时启用</div>
+              <div>{{ t('visualization.effective_during_preview') }}</div>
             </template>
             <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
               <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
@@ -221,7 +221,7 @@
         size="small"
         v-model="canvasStyleData.dashboard.showGrid"
         @change="themeChange"
-        >显示辅助网格</el-checkbox
+        >{{ t('visualization.display_auxiliary_grid') }}</el-checkbox
       >
     </el-form-item>
   </el-form>
diff --git a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
index a664d55c08..6e802a12cb 100644
--- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
+++ b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
@@ -14,18 +14,19 @@ import CanvasBackground from '@/components/visualization/component-background/Ca
 import SeniorStyleSetting from '@/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue'
 import Icon from '../icon-custom/src/Icon.vue'
 import CanvasBaseSetting from '@/components/visualization/CanvasBaseSetting.vue'
+import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const { canvasStyleData, canvasViewInfo } = storeToRefs(dvMainStore)
 let canvasAttrInit = false
 
 const canvasAttrActiveNames = ref(['size', 'baseSetting', 'background', 'color'])
-
+const { t } = useI18n()
 const screenAdaptorList = [
-  { label: '宽度优先', value: 'widthFirst' },
-  { label: '高度优先', value: 'heightFirst' },
-  { label: '铺满全屏', value: 'full' },
-  { label: '不缩放', value: 'keep' }
+  { label: t('visualization.screen_adaptor_width_first'), value: 'widthFirst' },
+  { label: t('visualization.screen_adaptor_height_first'), value: 'heightFirst' },
+  { label: t('visualization.screen_adaptor_full'), value: 'full' },
+  { label: t('visualization.screen_adaptor_keep'), value: 'keep' }
 ]
 const init = () => {
   nextTick(() => {
@@ -89,7 +90,7 @@ onMounted(() => {
 <template>
   <div class="attr-container de-collapse-style">
     <el-collapse v-model="canvasAttrActiveNames">
-      <el-collapse-item effect="dark" title="尺寸" name="size">
+      <el-collapse-item effect="dark" :title="t('visualization.size')" name="size">
         <el-form label-position="left" :label-width="14">
           <el-row :gutter="8" class="m-size">
             <el-col :span="12">
@@ -121,10 +122,10 @@ onMounted(() => {
           </el-row>
           <el-row v-if="canvasStyleData.screenAdaptor">
             <el-form-item style="margin-top: 16px">
-              <span class="form-item-scroll"> 缩放方式 </span>
+              <span class="form-item-scroll"> {{ t('visualization.screen_adaptor') }} </span>
               <el-tooltip class="item" effect="dark" placement="top">
                 <template #content>
-                  <div>预览时生效</div>
+                  <div>{{ t('visualization.effective_during_preview') }}</div>
                 </template>
                 <el-icon class="hint-icon--dark">
                   <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
@@ -149,21 +150,30 @@ onMounted(() => {
           </el-row>
         </el-form>
       </el-collapse-item>
-      <el-collapse-item effect="dark" title="基础配置" name="baseSetting">
+      <el-collapse-item effect="dark" :title="t('visualization.base_config')" name="baseSetting">
         <canvas-base-setting themes="dark"></canvas-base-setting>
       </el-collapse-item>
-      <el-collapse-item effect="dark" title="背景" name="background">
+      <el-collapse-item effect="dark" :title="t('visualization.background')" name="background">
         <canvas-background themes="dark"></canvas-background>
       </el-collapse-item>
-      <el-collapse-item effect="dark" title="配色" name="color" class="no-padding no-border-bottom">
+      <el-collapse-item
+        effect="dark"
+        :title="t('visualization.color_config')"
+        name="color"
+        class="no-padding no-border-bottom"
+      >
         <component-color-selector themes="dark" @onColorChange="onColorChange" />
       </el-collapse-item>
-      <el-collapse-item effect="dark" title="刷新配置" name="overallSetting">
+      <el-collapse-item
+        effect="dark"
+        :title="t('visualization.refresh_config')"
+        name="overallSetting"
+      >
         <overall-setting themes="dark" />
       </el-collapse-item>
       <el-collapse-item
         effect="dark"
-        title="高级样式设置"
+        :title="t('visualization.advanced_style_settings')"
         name="seniorStyleSetting"
         class="no-padding no-border-bottom"
       >
diff --git a/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue b/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
index db9f35b289..7f03e43ee1 100644
--- a/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
+++ b/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
@@ -8,12 +8,13 @@ import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { changeSizeWithScale } from '@/utils/changeComponentsSizeWithScale'
 import { useEmitt } from '@/hooks/web/useEmitt'
+import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 const { canvasStyleData, editMode } = storeToRefs(dvMainStore)
 const snapshotStore = snapshotStoreWithOut()
 const scale = ref(60)
 const scaleChangeReady = ref(true)
-
+const { t } = useI18n()
 const handleScaleChange = () => {
   if (scaleChangeReady.value) {
     scaleChangeReady.value = false
@@ -148,7 +149,7 @@ onUnmounted(() => {
         <Icon name="dv-max"><dvMax class="svg-icon"></dvMax></Icon
       ></el-icon>
       <el-divider direction="vertical" class="custom-divider_scale" />
-      <el-tooltip effect="ndark" content="定位到中心点" placement="top">
+      <el-tooltip effect="ndark" :content="t('visualization.locate_tips')" placement="top">
         <el-icon @click="reposition" class="hover-icon-custom" style="margin-right: 12px">
           <Icon name="dv-reposition"><dvReposition class="svg-icon"></dvReposition></Icon
         ></el-icon>
diff --git a/core/core-frontend/src/components/data-visualization/DvToolbar.vue b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
index 09e18c7993..c317c7c6e1 100644
--- a/core/core-frontend/src/components/data-visualization/DvToolbar.vue
+++ b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
@@ -41,7 +41,7 @@ import DeAppApply from '@/views/common/DeAppApply.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
-import { checkCanvasChange } from '@/api/visualization/dataVisualization'
+import { useI18n } from '@/hooks/web/useI18n'
 let nameEdit = ref(false)
 let inputName = ref('')
 let nameInput = ref(null)
@@ -59,6 +59,7 @@ const dvModel = 'dataV'
 const outerParamsSetRef = ref(null)
 const fullScreeRef = ref(null)
 const userStore = useUserStoreWithOut()
+const { t } = useI18n()
 
 const props = defineProps({
   createType: {
@@ -209,7 +210,7 @@ const backToMain = () => {
     url = url + '?dvId=' + dvInfo.value.id
   }
   if (styleChangeTimes.value > 0) {
-    ElMessageBox.confirm('当前的更改尚未保存，确定退出吗？', {
+    ElMessageBox.confirm(t('visualization.change_save_tips'), {
       confirmButtonType: 'primary',
       type: 'warning',
       autofocus: false,
@@ -343,7 +344,7 @@ const fullScreenPreview = () => {
             is-label
             :base-width="410"
             :icon-name="dvView"
-            title="图表"
+            :title="t('visualization.view')"
           >
             <user-view-group></user-view-group>
           </component-group>
@@ -352,11 +353,16 @@ const fullScreenPreview = () => {
             :show-split-line="true"
             is-label
             :icon-name="dvFilter"
-            title="查询组件"
+            :title="t('visualization.query_component')"
           >
             <query-group :dv-model="dvModel"></query-group>
           </component-group>
-          <component-group is-label :base-width="215" :icon-name="dvText" title="文本">
+          <component-group
+            is-label
+            :base-width="215"
+            :icon-name="dvText"
+            :title="t('visualization.text_html')"
+          >
             <text-group></text-group>
           </component-group>
           <component-group
@@ -364,14 +370,19 @@ const fullScreenPreview = () => {
             placement="bottom"
             :base-width="328"
             :icon-name="dvMedia"
-            title="媒体"
+            :title="t('visualization.media')"
           >
             <media-group></media-group>
           </component-group>
           <component-group is-label :base-width="115" :icon-name="dvTab" title="Tab">
             <tabs-group :dv-model="dvModel"></tabs-group>
           </component-group>
-          <component-group is-label :base-width="215" :icon-name="dvMoreCom" title="更多">
+          <component-group
+            is-label
+            :base-width="215"
+            :icon-name="dvMoreCom"
+            :title="t('visualization.more')"
+          >
             <more-com-group></more-com-group>
           </component-group>
           <component-group
@@ -379,23 +390,27 @@ const fullScreenPreview = () => {
             :base-width="410"
             :icon-name="dvMaterial"
             :show-split-line="true"
-            title="素材"
+            :title="t('visualization.source_material')"
           >
             <common-group></common-group>
           </component-group>
           <component-button-label
             :icon-name="icon_copy_filled"
-            title="复用"
+            :title="t('visualization.multiplexing')"
             is-label
             @customClick="multiplexingCanvasOpen"
           ></component-button-label>
         </div>
       </template>
       <div class="right-area">
-        <el-tooltip effect="dark" content="外部参数设置" placement="bottom">
+        <el-tooltip
+          effect="dark"
+          :content="t('visualization.external_parameter_settings')"
+          placement="bottom"
+        >
           <component-button
             v-show="editMode === 'edit'"
-            tips="外部参数设置"
+            :tips="t('visualization.external_parameter_settings')"
             @custom-click="openOuterParamsSet"
             :icon-name="icon_params_setting"
           />
@@ -408,10 +423,10 @@ const fullScreenPreview = () => {
           class="preview-button"
           type="primary"
         >
-          编辑
+          {{ t('visualization.edit') }}
         </el-button>
         <el-button v-else class="preview-button" @click="fullScreenPreview" style="float: right">
-          预览
+          {{ t('visualization.preview') }}
         </el-button>
         <el-button
           @click="saveCanvasWithCheck()"
@@ -419,7 +434,7 @@ const fullScreenPreview = () => {
           style="float: right; margin-right: 12px"
           type="primary"
         >
-          保存
+          {{ t('visualization.save') }}
         </el-button>
       </div>
     </div>
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
index edf0673689..d1f6c0e466 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
@@ -79,6 +79,7 @@ import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
 import RealTimeGroup from '@/components/data-visualization/RealTimeGroup.vue'
 import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/contextmenu'
 import RealTimeTab from '@/components/data-visualization/RealTimeTab.vue'
+import { useI18n } from '@/hooks/web/useI18n'
 const dropdownMore = ref(null)
 const lockStore = lockStoreWithOut()
 
@@ -87,6 +88,7 @@ const snapshotStore = snapshotStoreWithOut()
 const layerStore = layerStoreWithOut()
 const composeStore = composeStoreWithOut()
 const contextmenuStore = contextmenuStoreWithOut()
+const { t } = useI18n()
 
 const { areaData, isCtrlOrCmdDown, isShiftDown, laterIndex } = storeToRefs(composeStore)
 
@@ -398,7 +400,7 @@ const canvasChange = () => {
   <div class="real-time-component-list">
     <button hidden="true" id="close-button"></button>
     <div class="layer-area" @click="areaClick('hidden')" :class="{ activated: hiddenAreaActive }">
-      <span>弹窗区域({{ popComponentData.length }})</span>
+      <span>{{ t('visualization.pop_area') }}({{ popComponentData.length }})</span>
       <el-switch v-model="canvasStyleData.popupAvailable" @change="canvasChange" size="small" />
     </div>
     <el-row class="list-wrap">
@@ -475,7 +477,7 @@ const canvasChange = () => {
       @click="areaClick('base')"
       :class="{ activated: baseAreaActive }"
     >
-      <span>大屏区域({{ baseComponentData.length }})</span>
+      <span>{{ t('visualization.screen_area') }}({{ baseComponentData.length }})</span>
     </div>
     <el-row class="list-wrap">
       <div class="list-container" @contextmenu="handleContextMenu">
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
index 104db7660b..c5266d4035 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
@@ -12,6 +12,7 @@ import eventBus from '@/utils/eventBus'
 import { componentArraySort, getCurInfo } from '@/store/modules/data-visualization/common'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { XpackComponent } from '@/components/plugin'
+import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 const copyStore = copyStoreWithOut()
 const lockStore = lockStoreWithOut()
@@ -31,7 +32,7 @@ const props = defineProps({
 })
 
 const { activePosition } = toRefs(props)
-
+const { t } = useI18n()
 const popComponentDataLength = computed(
   () => componentData.value.filter(ele => ele.category === 'hidden').length
 )
@@ -238,7 +239,9 @@ const editQueryCriteria = () => {
   <div class="context-menu-base context-menu-details" @mousedown="handleComposeMouseDown">
     <ul @mouseup="handleMouseUp">
       <template v-if="areaData.components.length">
-        <li @mousedown="handleComposeMouseDown" @click="componentCompose">组合</li>
+        <li @mousedown="handleComposeMouseDown" @click="componentCompose">
+          {{ t('visualization.view_group') }}
+        </li>
         <el-dropdown
           style="width: 100%"
           trigger="hover"
@@ -248,55 +251,68 @@ const editQueryCriteria = () => {
         >
           <li>
             <div>
-              <span>对齐</span><el-icon><ArrowRight /></el-icon>
+              <span>{{ t('visualization.alignment') }}</span
+              ><el-icon><ArrowRight /></el-icon>
             </div>
           </li>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item style="width: 118px" @click="alignment('left')"
-                >左对齐</el-dropdown-item
-              >
-              <el-dropdown-item style="width: 118px" @click="alignment('right')"
-                >右对齐</el-dropdown-item
-              >
-              <el-dropdown-item @click="alignment('top')">上对齐</el-dropdown-item>
-              <el-dropdown-item @click="alignment('bottom')">下对齐</el-dropdown-item>
-              <el-dropdown-item @click="alignment('transverse')">水平居中</el-dropdown-item>
-              <el-dropdown-item @click="alignment('direction')">垂直居中</el-dropdown-item>
+              <el-dropdown-item style="width: 118px" @click="alignment('left')">{{
+                t('visualization.left_justifying')
+              }}</el-dropdown-item>
+              <el-dropdown-item style="width: 118px" @click="alignment('right')">{{
+                t('visualization.right_justifying')
+              }}</el-dropdown-item>
+              <el-dropdown-item @click="alignment('top')">{{
+                t('visualization.top_justifying')
+              }}</el-dropdown-item>
+              <el-dropdown-item @click="alignment('bottom')">{{
+                t('visualization.bottom_justifying')
+              }}</el-dropdown-item>
+              <el-dropdown-item @click="alignment('transverse')">{{
+                t('visualization.horizontally_centered')
+              }}</el-dropdown-item>
+              <el-dropdown-item @click="alignment('direction')">{{
+                t('visualization.vertically_centered')
+              }}</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
         <el-divider class="custom-divider" />
-        <li @click="copy">复制</li>
-        <li @click="paste">粘贴</li>
-        <li @click="cut">剪切</li>
+        <li @click="copy">{{ t('visualization.copy') }}</li>
+        <li @click="paste">{{ t('visualization.paste') }}</li>
+        <li @click="cut">{{ t('visualization.cut') }}</li>
         <el-divider class="custom-divider" />
-        <li @click="deleteComponent">删除</li>
+        <li @click="deleteComponent">{{ t('visualization.delete') }}</li>
       </template>
       <li
         v-show="!(!curComponent || curComponent['isLock'] || curComponent['component'] != 'Group')"
         @click="decompose()"
       >
-        取消组合
+        {{ t('visualization.cancel_group') }}
       </li>
       <el-divider class="custom-divider" v-show="composeDivider" />
       <template v-if="curComponent">
         <template v-if="!curComponent['isLock'] && curComponent.category === 'hidden'">
-          <li @click="categoryChange('base')">移动到大屏显示区</li>
-          <li @click="editQueryCriteria">编辑</li>
-          <li v-if="activePosition === 'aside'" @click="rename">重命名</li>
-          <li @click="copy">复制</li>
-          <li @click="paste">粘贴</li>
+          <li @click="categoryChange('base')">{{ t('visualization.move_to_screen_show') }}</li>
+          <li @click="editQueryCriteria">{{ t('visualization.edit') }}</li>
+          <li v-if="activePosition === 'aside'" @click="rename">{{ t('visualization.rename') }}</li>
+          <li @click="copy">{{ t('visualization.copy') }}</li>
+          <li @click="paste">{{ t('visualization.paste') }}</li>
           <el-divider class="custom-divider" />
-          <li @click="deleteComponent">删除</li>
+          <li @click="deleteComponent">{{ t('visualization.delete') }}</li>
         </template>
         <template v-if="!curComponent['isLock'] && curComponent.category !== 'hidden'">
-          <li v-if="curComponent.component === 'VQuery'" @click="editQueryCriteria">编辑</li>
-          <li @click="upComponent">上移一层</li>
-          <li @click="downComponent">下移一层</li>
-          <li @click="topComponent">置于顶层</li>
-          <li @click="bottomComponent">置于底层</li>
-          <li @click="customSort" v-if="curComponent.component === 'DeTabs'">排序</li>
+          <li v-if="curComponent.component === 'VQuery'" @click="editQueryCriteria">
+            {{ t('visualization.edit') }}
+          </li>
+          <li @click="upComponent">{{ t('visualization.up_component') }}</li>
+          <li @click="downComponent">{{ t('visualization.down_component') }}</li>
+          <li @click="topComponent">{{ t('visualization.top_component') }}</li>
+          <li @click="bottomComponent">{{ t('visualization.bottom_component') }}</li>
+          <li @click="customSort" v-if="curComponent.component === 'DeTabs'">
+            {{ t('visualization.sort') }}
+          </li>
           <xpack-component
             :chart="curComponent"
             is-screen
@@ -310,23 +326,27 @@ const editQueryCriteria = () => {
               popComponentDataLength === 0
             "
           >
-            移动到大屏弹窗区
+            {{ t('visualization.move_to_pop_area') }}
           </li>
           <el-divider class="custom-divider" />
-          <li @click="hide" v-show="curComponent['isShow']">隐藏</li>
-          <li @click="show" v-show="!curComponent['isShow']">取消隐藏</li>
-          <li @click="lock">锁定</li>
+          <li @click="hide" v-show="curComponent['isShow']">{{ t('visualization.hidden') }}</li>
+          <li @click="show" v-show="!curComponent['isShow']">
+            {{ t('visualization.cancel_hidden') }}
+          </li>
+          <li @click="lock">{{ t('visualization.lock') }}</li>
           <el-divider class="custom-divider" />
-          <li v-if="activePosition === 'aside'" @click="rename">重命名</li>
-          <li @click="copy">复制</li>
-          <li @click="paste">粘贴</li>
-          <li @click="cut">剪切</li>
+          <li v-if="activePosition === 'aside'" @click="rename">{{ t('visualization.rename') }}</li>
+          <li @click="copy">{{ t('visualization.copy') }}</li>
+          <li @click="paste">{{ t('visualization.paste') }}</li>
+          <li @click="cut">{{ t('visualization.cut') }}</li>
           <el-divider class="custom-divider" />
-          <li @click="deleteComponent">删除</li>
+          <li @click="deleteComponent">{{ t('visualization.delete') }}</li>
         </template>
-        <li v-if="curComponent['isLock']" @click="unlock">解锁</li>
+        <li v-if="curComponent['isLock']" @click="unlock">{{ t('visualization.unlock') }}</li>
       </template>
-      <li v-else-if="!curComponent && !areaData.components.length" @click="paste">粘贴</li>
+      <li v-else-if="!curComponent && !areaData.components.length" @click="paste">
+        {{ t('visualization.paste') }}
+      </li>
     </ul>
   </div>
 </template>
diff --git a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
index 79bff7f493..5854484f87 100644
--- a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
+++ b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
@@ -4,7 +4,7 @@
       <el-form-item
         class="form-item no-margin-bottom"
         :class="'form-item-' + themes"
-        label="数据大屏字体选择"
+        :label="t('visualization.screen_font_family_select')"
       >
         <el-select
           :effect="themes"
@@ -28,10 +28,10 @@
           @change="onThemeChange"
         >
           <div style="display: flex; line-height: 14px">
-            <span style="margin-right: 4px">显示弹窗区查询按钮</span>
+            <span style="margin-right: 4px">{{ t('visualization.show_pop_button') }}</span>
             <el-tooltip class="item" :effect="themes" placement="bottom">
               <template #content>
-                <div>预览时启用</div>
+                <div>{{ t('visualization.effective_during_preview') }}</div>
               </template>
               <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
                 <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
@@ -49,10 +49,10 @@
           @change="onThemeChange"
         >
           <div style="display: flex; line-height: 14px">
-            <span style="margin-right: 4px">显示放大、导出等悬浮按钮</span>
+            <span style="margin-right: 4px">{{ t('visualization.show_zoom_button') }}</span>
             <el-tooltip class="item" :effect="themes" placement="bottom">
               <template #content>
-                <div>预览时启用</div>
+                <div>{{ t('visualization.effective_during_preview') }}</div>
               </template>
               <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
                 <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
@@ -68,7 +68,7 @@
           size="small"
           v-model="canvasStyleData.dashboard.showGrid"
           @change="onThemeChange"
-          >显示辅助网格</el-checkbox
+          >{{ t('visualization.display_auxiliary_grid') }}</el-checkbox
         >
       </el-form-item>
     </el-form>
@@ -85,8 +85,9 @@ 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'
 import { adaptTitleFontFamilyAll } from '@/utils/canvasStyle'
+import { useI18n } from '@/hooks/web/useI18n'
 const snapshotStore = snapshotStoreWithOut()
-
+const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const { canvasStyleData } = storeToRefs(dvMainStore)
 const appearanceStore = useAppearanceStoreWithOut()
diff --git a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
index afa943b166..ef2faa023e 100644
--- a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
+++ b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
@@ -21,8 +21,10 @@
     </el-row>
     <template #footer>
       <div class="dialog-footer">
-        <el-button size="mini" @click="doUseCache(false)">否 </el-button>
-        <el-button type="primary" size="mini" @click="doUseCache(true)">是 </el-button>
+        <el-button size="mini" @click="doUseCache(false)">{{ t('visualization.yes') }} </el-button>
+        <el-button type="primary" size="mini" @click="doUseCache(true)">{{
+          t('visualization.no')
+        }}</el-button>
       </div>
     </template>
   </el-dialog>
@@ -50,8 +52,8 @@ const dialogInit = initInfo => {
   const canvasTypeName =
     initInfo.canvasType === 'dataV' ? t('work_branch.big_data_screen') : t('work_branch.dashboard')
   dialogInfo.resourceId = initInfo.resourceId
-  dialogInfo.title = '存在未保存的' + canvasTypeName
-  dialogInfo.tips = canvasTypeName + '存在未保存的修改，立即恢复？'
+  dialogInfo.title = t('visualization.no_save_tips', [canvasTypeName])
+  dialogInfo.tips = canvasTypeName + t('visualization.no_save_tips2')
   dialogShow.value = true
 }
 
diff --git a/core/core-frontend/src/components/visualization/LinkJumpSet.vue b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
index 85e262c6ed..f9eaee9198 100644
--- a/core/core-frontend/src/components/visualization/LinkJumpSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
@@ -12,7 +12,7 @@
     <div @keydown.stop @keyup.stop v-if="state.initState" style="height: 550px">
       <el-row style="flex-direction: row">
         <div class="top-area">
-          <span class="top-area-text">已选图表：</span>
+          <span class="top-area-text">{{ t('visualization.selected_view') }}：</span>
           <span class="top-area-value">
             <Icon class-name="view-type-icon"
               ><component
@@ -22,7 +22,7 @@
             ></Icon>
             {{ state.curJumpViewInfo.title }}</span
           >
-          <span class="top-area-text margin-left">所用数据集：</span>
+          <span class="top-area-text margin-left">{{ t('visualization.used_dataset') }}：</span>
           <span class="top-area-value">
             <Icon name="dataset-outline"
               ><datasetOutline style="vertical-align: -0.2em" class="svg-icon view-type-icon"
@@ -35,9 +35,9 @@
         <el-row class="preview">
           <el-col :span="8" style="height: 100%; overflow-y: auto">
             <el-row class="tree-head">
-              <span class="head-text">选择字段</span>
+              <span class="head-text">{{ t('visualization.to_select_view') }}</span>
               <span class="head-filter">
-                仅看已选
+                {{ t('visualization.show_selected_only') }}
                 <el-switch size="small" v-model="state.showSelected" />
               </span>
             </el-row>
@@ -126,12 +126,12 @@
                   v-if="state.linkJumpInfo?.jumpType === 'newPop'"
                 >
                   <template #label>
-                    <span class="title">窗口大小</span>
+                    <span class="title">{{ t('visualization.window_size') }}</span>
                   </template>
                   <el-radio-group class="larger-radio" v-model="state.linkJumpInfo.windowSize">
-                    <el-radio label="large">大</el-radio>
-                    <el-radio label="middle">中</el-radio>
-                    <el-radio label="small">小</el-radio>
+                    <el-radio label="large">{{ t('visualization.window_size_large') }}</el-radio>
+                    <el-radio label="middle">{{ t('visualization.window_size_middle') }}</el-radio>
+                    <el-radio label="small">{{ t('visualization.window_size_small') }}</el-radio>
                   </el-radio-group>
                 </el-form-item>
               </el-header>
@@ -161,7 +161,9 @@
                         </div>
                         <div style="flex: 1">
                           <el-form-item>
-                            <template #label> 目标{{ resourceType }} </template>
+                            <template #label>
+                              {{ t('visualization.target') }}{{ resourceType }}
+                            </template>
                             <el-tree-select
                               v-model="state.linkJumpInfo.targetDvId"
                               :data="state.panelList"
@@ -198,13 +200,15 @@
                       </div>
                       <div class="jump-com-list">
                         <el-tabs size="small" v-model="state.activeCollapse">
-                          <el-tab-pane label="联动图表" name="view"> </el-tab-pane>
-                          <el-tab-pane label="携带查询条件" name="filter"> </el-tab-pane>
+                          <el-tab-pane :label="t('visualization.linkage_view')" name="view">
+                          </el-tab-pane>
+                          <el-tab-pane :label="t('visualization.with_filter_params')" name="filter">
+                          </el-tab-pane>
                         </el-tabs>
                       </div>
                       <template v-if="state.activeCollapse === 'view'">
                         <el-row style="margin-bottom: 8px" :gutter="8">
-                          <el-col :span="7"> 源字段 </el-col>
+                          <el-col :span="7"> {{ t('visualization.source_field') }} </el-col>
                           <el-col :span="2"></el-col>
                           <el-col :span="7" style="margin-left: -2.9%">
                             {{ t('visualization.link_view_field') }}
@@ -225,7 +229,7 @@
                               <div style="flex: 1">
                                 <el-select
                                   v-model="targetViewInfo.sourceFieldActiveId"
-                                  :placeholder="'请选择字段'"
+                                  :placeholder="t('chart.pls_select_field')"
                                   style="width: 100%"
                                 >
                                   <el-option
@@ -260,7 +264,7 @@
                                 <el-select
                                   v-model="targetViewInfo.targetViewId"
                                   :disabled="!targetViewInfo.sourceFieldActiveId"
-                                  :placeholder="'请选择图表'"
+                                  :placeholder="t('visualization.select_view')"
                                   style="width: 100%"
                                   @change="viewInfoOnChange(targetViewInfo)"
                                 >
@@ -291,7 +295,7 @@
                               <div style="flex: 1; margin: 0 8px">
                                 <el-select
                                   v-model="targetViewInfo.targetFieldId"
-                                  :placeholder="'请选择字段'"
+                                  :placeholder="t('visualization.pls_select_field')"
                                   :disabled="fieldIdDisabledCheck(targetViewInfo)"
                                   style="width: 100%"
                                 >
@@ -349,18 +353,21 @@
                       <template v-if="state.activeCollapse === 'filter'">
                         <template v-if="state.currentOutParams.length === 0">
                           <span
-                            >目标仪表板无外部参数，因此无法携带条件查询，如有需要，<a
+                            >{{ t('visualization.link_target_tips1')
+                            }}<a
                               class="target_jump"
                               @click="resourceEdit(state.linkJumpInfo.targetDvId)"
-                              >请前往设置外部参数</a
+                              >{{ t('visualization.link_target_tips2') }}</a
                             ></span
                           >
                         </template>
                         <template v-if="state.currentOutParams.length > 0">
                           <el-row style="margin-bottom: 8px" :gutter="8">
-                            <el-col :span="12"> 源条件 </el-col>
+                            <el-col :span="12"> {{ t('visualization.source_filter') }} </el-col>
                             <el-col :span="1"></el-col>
-                            <el-col :span="10" style="margin-left: -2.9%"> 联动外部参数 </el-col>
+                            <el-col :span="10" style="margin-left: -2.9%">
+                              {{ t('visualization.link_outer_params') }}
+                            </el-col>
                           </el-row>
                           <div class="main-scrollbar-container">
                             <el-scrollbar height="fit-content" max-height="178px">
@@ -376,7 +383,7 @@
                                 <div style="flex: 1">
                                   <el-select
                                     v-model="targetViewInfo.sourceFieldActiveId"
-                                    :placeholder="'请选择字段'"
+                                    :placeholder="t('chart.pls_select_field')"
                                     style="width: 100%"
                                   >
                                     <el-option
@@ -412,7 +419,7 @@
                                   <el-select
                                     v-model="targetViewInfo.targetViewId"
                                     :disabled="!targetViewInfo.sourceFieldActiveId"
-                                    :placeholder="'请选择参数'"
+                                    :placeholder="t('visualization.select_param')"
                                     style="width: 100%"
                                     @change="viewInfoOnChange(targetViewInfo)"
                                   >
@@ -931,10 +938,6 @@ const deleteLinkJumpFieldById = targetId => {
   }
 }
 
-const deleteLinkJumpField = index => {
-  state.linkJumpInfo.targetViewInfoList.splice(index, 1)
-}
-
 const fieldIdDisabledCheck = targetViewInfo => {
   return (
     (state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
diff --git a/core/core-frontend/src/components/visualization/LinkageSet.vue b/core/core-frontend/src/components/visualization/LinkageSet.vue
index 0e1e68a017..794bed43a8 100644
--- a/core/core-frontend/src/components/visualization/LinkageSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkageSet.vue
@@ -2,7 +2,6 @@
   <el-dialog
     ref="enlargeDialog"
     :append-to-body="true"
-    :title="t('visualization.linkage_setting')"
     v-model="dialogShow"
     width="70vw"
     top="10vh"
@@ -12,10 +11,18 @@
       v-if="curComponent && curComponent.actionSelection"
       :action-selection="customLinkageActive"
     ></linkage-set-option>
-    <div v-loading="loading" @keydown.stop @keyup.stop v-if="state.initState" style="height: 550px">
+    <div
+      v-loading="loading"
+      @keydown.stop
+      @keyup.stop
+      v-if="state.initState"
+      style="height: 550px; margin-top: 22px"
+    >
       <el-row style="flex-direction: row">
         <div class="top-area">
-          <span class="top-area-text" style="margin-left: 0">已选图表：</span>
+          <span class="top-area-text" style="margin-left: 0"
+            >{{ t('visualization.selected_view') }}：</span
+          >
           <span class="top-area-value">
             <Icon class-name="view-type-icon"
               ><component
@@ -25,7 +32,7 @@
             ></Icon>
             {{ state.curLinkageViewInfo.title }}</span
           >
-          <span class="top-area-text">所用数据集：</span>
+          <span class="top-area-text">{{ t('visualization.used_dataset') }}：</span>
           <span class="top-area-value">
             <Icon class-name="view-type-icon" name="dataset-outline"
               ><datasetOutline style="vertical-align: -0.2em" class="svg-icon view-type-icon"
@@ -38,9 +45,10 @@
         <el-row class="preview">
           <el-col :span="8" style="height: 100%; overflow-y: auto">
             <el-row class="tree-head">
-              <span class="head-text">选择图表</span>
+              <span class="head-text">{{ t('visualization.to_select_view') }}</span>
               <span class="head-filter"
-                >仅看已选 <el-switch size="small" v-model="state.showSelected" />
+                >{{ t('visualization.show_selected_only') }}
+                <el-switch size="small" v-model="state.showSelected" />
               </span>
             </el-row>
             <el-row class="tree-dataset-head" v-show="sameDsShow"
@@ -48,13 +56,13 @@
                 ><el-icon class="toggle-icon" @click="() => (toggleSameDs = !toggleSameDs)">
                   <CaretBottom v-show="toggleSameDs" />
                   <CaretRight v-show="!toggleSameDs" /> </el-icon
-                ><span>同数据集</span></span
+                ><span>{{ t('visualization.same_dataset') }}</span></span
               >
               <el-checkbox
                 v-model="sameDatasetComponentCheckAll"
                 :indeterminate="checkAllIsIndeterminate"
                 @change="batchSelectChange"
-                >全选</el-checkbox
+                >{{ t('visualization.select_all') }}</el-checkbox
               ></el-row
             >
             <el-tree
@@ -62,7 +70,7 @@
               class="custom-tree"
               menu
               ref="linkageInfoTree"
-              :empty-text="'暂无可用图表'"
+              :empty-text="t('visualization.no_available_view')"
               :filter-node-method="filterNodeMethod"
               :data="curLinkageTargetViewsInfoSameDs"
               node-key="targetViewId"
@@ -103,7 +111,7 @@
                 ><el-icon class="toggle-icon" @click="() => (toggleDiffDs = !toggleDiffDs)">
                   <CaretBottom v-show="toggleDiffDs" />
                   <CaretRight v-show="!toggleDiffDs" /> </el-icon
-                ><span>不同数据集</span></span
+                ><span>{{ t('visualization.diff_dataset') }}</span></span
               >
             </el-row>
             <el-tree
@@ -111,7 +119,7 @@
               class="custom-tree"
               menu
               ref="linkageInfoTreeDiffDs"
-              :empty-text="'暂无可用图表'"
+              :empty-text="t('visualization.no_available_view')"
               :filter-node-method="filterNodeMethod"
               :data="curLinkageTargetViewsInfoDiffDs"
               node-key="targetViewId"
@@ -149,11 +157,11 @@
             </el-tree>
           </el-col>
           <el-col :span="16" class="preview-show">
-            <el-row class="content-head">配置图表间的字段关联关系</el-row>
+            <el-row class="content-head">{{ t('visualization.linkage_setting_tips1') }}</el-row>
             <el-row v-if="state.linkageInfo && state.linkageInfo.linkageActive">
               <el-row style="margin-top: 5px">
                 <div style="display: flex" class="inner-content">
-                  <div style="flex: 1">当前图表源字段</div>
+                  <div style="flex: 1">{{ t('visualization.current_chart_source_field') }}</div>
                   <div style="width: 36px"></div>
                   <div style="flex: 1">
                     {{ t('visualization.link_view_field') }}
@@ -170,7 +178,7 @@
                       <div class="select-filed">
                         <el-select
                           v-model="itemLinkage.sourceField"
-                          :placeholder="'请选择字段'"
+                          :placeholder="t('chart.pls_select_field')"
                           style="width: 100%"
                         >
                           <el-option
@@ -243,7 +251,7 @@
                 </div>
                 <el-row style="width: 100%; padding-left: 16px">
                   <el-button type="primary" icon="Plus" text @click="addLinkageField('', '')">
-                    追加联动依赖字段
+                    {{ t('visualization.add_linkage_dependency_fields') }}
                   </el-button>
                 </el-row>
               </el-row>
@@ -252,7 +260,9 @@
               <Icon name="dv-empty"
                 ><dvEmpty style="width: 125px; height: 125px" class="svg-icon"
               /></Icon>
-              <span style="margin-top: 8px; font-size: 14px">请先勾选需要联动的图表</span>
+              <span style="margin-top: 8px; font-size: 14px">
+                {{ t('visualization.select_linkage_tips') }}</span
+              >
             </el-row>
           </el-col>
         </el-row>
diff --git a/core/core-frontend/src/components/visualization/LinkageSetOption.vue b/core/core-frontend/src/components/visualization/LinkageSetOption.vue
index c96b9ce83c..61f10dbbff 100644
--- a/core/core-frontend/src/components/visualization/LinkageSetOption.vue
+++ b/core/core-frontend/src/components/visualization/LinkageSetOption.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, toRefs } from 'vue'
 import { propTypes } from '@/utils/propTypes'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 
 const props = defineProps({
   title: propTypes.string,
@@ -31,20 +33,27 @@ const { title, themes, actionSelection } = toRefs(props)
 <template>
   <el-popover placement="right-start" :width="baseWidth" trigger="click" :show-arrow="false">
     <template #reference>
-      <el-icon class="option-set"><Setting /></el-icon>
+      <span class="option-set ed-dialog__title"
+        >{{ t('visualization.linkage_setting') }}
+        <el-icon style="margin: 5px 0 0 5px"><Setting /></el-icon
+      ></span>
     </template>
     <el-row>
-      如果联动维度已配置钻取，点击维度将
+      {{ t('visualization.select_linkage_tips') }}
       <el-radio-group
         style="margin-top: 12px"
         v-model="actionSelection.linkageActive"
         @change="selectionChange"
       >
         <el-radio label="custom"
-          ><span style="font-weight: normal">弹出浮框，由用户选择联动或者下钻</span></el-radio
+          ><span style="font-weight: normal">
+            {{ t('visualization.linkage_option1') }}
+          </span></el-radio
         >
         <el-radio label="auto"
-          ><span style="font-weight: normal">同时触发联动和下钻</span></el-radio
+          ><span style="font-weight: normal">{{
+            t('visualization.linkage_option2')
+          }}</span></el-radio
         >
       </el-radio-group>
     </el-row>
@@ -53,7 +62,8 @@ const { title, themes, actionSelection } = toRefs(props)
 <style lang="less" scoped>
 .option-set {
   position: absolute;
-  left: 90px;
+  display: flex;
+  left: 24px;
   top: 30px;
 }
 </style>
diff --git a/core/core-frontend/src/components/visualization/OuterParamsSet.vue b/core/core-frontend/src/components/visualization/OuterParamsSet.vue
index c9af78a35d..ee5f24ecdc 100644
--- a/core/core-frontend/src/components/visualization/OuterParamsSet.vue
+++ b/core/core-frontend/src/components/visualization/OuterParamsSet.vue
@@ -2,7 +2,7 @@
   <el-dialog
     class="params-class"
     :append-to-body="true"
-    title="外部参数设置"
+    :title="t('visualization.outer_param_set')"
     v-model="state.outerParamsSetVisible"
     width="80vw"
     top="10vh"
@@ -13,7 +13,7 @@
         <el-row class="preview">
           <el-col :span="6" class="preview-left">
             <el-row class="tree-head">
-              <span class="head-text">参数列表</span>
+              <span class="head-text">{{ t('visualization.params_list') }}</span>
               <span class="head-filter">
                 <el-button type="primary" icon="Plus" text @click="addOuterParamsInfo"> </el-button>
               </span>
@@ -52,7 +52,9 @@
                       <span class="tree-select-field" v-else-if="data.paramName">
                         {{ data.paramName }}
                       </span>
-                      <span class="tree-select-field" v-else> 未配置参数名 </span>
+                      <span class="tree-select-field" v-else
+                        >{{ t('visualization.no_setting_params_name_tip') }}
+                      </span>
                     </span>
                     <span class="icon-more">
                       <handle-more
@@ -70,7 +72,9 @@
           </el-col>
           <el-col :span="13" class="preview-show">
             <el-row v-if="state.curNodeId">
-              <el-row class="new-params-title"> 选择参数关联组件 </el-row>
+              <el-row class="new-params-title">
+                {{ t('visualization.select_params_connect_component') }}
+              </el-row>
               <el-row class="new-params-filter" v-if="state.outerParamsInfo?.filterInfo?.length">
                 <div style="display: flex" class="inner-content">
                   <div style="width: 16px; margin-top: 2px" class="expand-custom-outer">
@@ -81,8 +85,8 @@
                       </el-icon>
                     </div>
                   </div>
-                  <div style="flex: 1">查询组件</div>
-                  <div style="flex: 1">关联条件</div>
+                  <div style="flex: 1">{{ t('visualization.filter_component') }}</div>
+                  <div style="flex: 1">{{ t('visualization.connection_condition') }}</div>
                 </div>
                 <div class="outer-filter-content">
                   <div
@@ -104,7 +108,7 @@
                         v-model="baseFilter.filterSelected"
                         filterable
                         style="width: 100%"
-                        placeholder="请选择查询条件"
+                        :placeholder="t('visualization.select_query_condition')"
                         clearable
                       >
                         <el-option
@@ -130,8 +134,8 @@
                       </el-icon>
                     </div>
                   </div>
-                  <div style="flex: 1">图表</div>
-                  <div style="flex: 1">关联字段或参数</div>
+                  <div style="flex: 1">{{ t('visualization.view') }}</div>
+                  <div style="flex: 1">{{ t('visualization.connection_params_fields') }}</div>
                 </div>
                 <div class="outer-dataset-content">
                   <div
@@ -173,8 +177,14 @@
                               class="params-select--header"
                               v-model="baseDatasetInfo.activelist"
                             >
-                              <el-tab-pane label="字段" name="dimensionList"></el-tab-pane>
-                              <el-tab-pane label="参数" name="parameterList"></el-tab-pane>
+                              <el-tab-pane
+                                :label="t('visualization.fields')"
+                                name="dimensionList"
+                              ></el-tab-pane>
+                              <el-tab-pane
+                                :label="t('visualization.params')"
+                                name="parameterList"
+                              ></el-tab-pane>
                             </el-tabs>
                           </template>
                           <el-option
@@ -202,7 +212,9 @@
 
                     <div class="ds-view-content" v-show="baseDatasetInfo.viewExpand">
                       <div style="display: flex; width: 100%; height: 22px">
-                        <div class="ds-content-title">选择关联的图表</div>
+                        <div class="ds-content-title">
+                          {{ t('visualization.select_params_connect_view') }}
+                        </div>
                         <div class="custom-view-diver"></div>
                         <div>
                           <el-checkbox
@@ -211,7 +223,7 @@
                             :indeterminate="baseDatasetInfo.checkAllIsIndeterminate"
                             :disabled="!baseDatasetInfo.fieldIdSelected"
                             @change="batchSelectChange($event, baseDatasetInfo)"
-                            >全选</el-checkbox
+                            >{{ t('visualization.select_all') }}</el-checkbox
                           >
                         </div>
                       </div>
@@ -246,22 +258,30 @@
               </el-row>
             </el-row>
             <div v-else class="empty">
-              <empty-background description="请配置参数" img-type="noneWhite" />
+              <empty-background
+                :description="t('visualization.setting_params_tips')"
+                img-type="noneWhite"
+              />
             </div>
           </el-col>
           <el-col :span="5" class="params-attach-setting">
             <el-row v-if="state.curNodeId">
-              <el-row class="new-params-title"> 参数配置 </el-row>
+              <el-row class="new-params-title">{{ t('visualization.setting_params') }} </el-row>
               <el-row class="params-attach-content">
                 <el-row>
-                  <el-checkbox v-model="state.outerParamsInfo.required">必填 </el-checkbox>
+                  <el-checkbox v-model="state.outerParamsInfo.required"
+                    >{{ t('visualization.required') }}
+                  </el-checkbox>
                 </el-row>
                 <el-row>
-                  <el-checkbox v-model="state.outerParamsInfo.enabledDefault">默认值 </el-checkbox>
+                  <el-checkbox v-model="state.outerParamsInfo.enabledDefault"
+                    >{{ t('visualization.default_value') }}
+                  </el-checkbox>
                   <el-tooltip class="item" placement="bottom">
                     <template #content>
                       <div>
-                        请使用JSON数组格式 示例: <br />单值 ["name1"], 多值 ["name1","name2"]
+                        {{ t('visualization.default_value_tips1') }} <br />
+                        {{ t('visualization.default_value_tips2') }}
                       </div>
                     </template>
                     <el-icon class="hint-icon">
@@ -271,7 +291,7 @@
                 </el-row>
                 <el-input
                   :ref="el => setArgRef(el, state.outerParamsInfo.paramsInfoId)"
-                  placeholder='请输入参数,如:["name1"]'
+                  :placeholder="t('visualization.default_value_tips3')"
                   v-model="state.outerParamsInfo.defaultValue"
                   type="textarea"
                   :autosize="{ minRows: 4, maxRows: 8 }"
@@ -333,12 +353,12 @@ const state = reactive({
   outerParamsSetVisible: false,
   optMenu: [
     {
-      label: '重命名',
+      label: t('visualization.rename'),
       svgName: edit,
       command: 'rename'
     },
     {
-      label: '删除',
+      label: t('visualization.delete'),
       svgName: _delete,
       command: 'delete'
     }
@@ -383,17 +403,17 @@ const state = reactive({
   currentLinkPanelViewArray: [],
   viewIdFieldArrayMap: {},
   widgetSubjectsTrans: {
-    timeYearWidget: '年份过滤组件',
-    timeMonthWidget: '年月过滤组件',
-    timeDateWidget: '日期过滤组件',
-    timeDateRangeWidget: '日期范围过滤组件',
-    textSelectWidget: '文本下拉过滤组件',
-    textSelectGridWidget: '文本列表过滤组件',
-    textInputWidget: '文本搜索过滤组件',
-    textSelectTreeWidget: '下拉树过滤组件',
-    numberSelectWidget: '数字下拉过滤组件',
-    numberSelectGridWidget: '数字列表过滤组件',
-    numberRangeWidget: '数值区间过滤组件'
+    timeYearWidget: t('visualization.time_year_widget'),
+    timeMonthWidget: t('visualization.time_month_widget'),
+    timeDateWidget: t('visualization.time_date_widget'),
+    timeDateRangeWidget: t('visualization.time_date_range_widget'),
+    textSelectWidget: t('visualization.text_select_widget'),
+    textSelectGridWidget: t('visualization.time_year_widget'),
+    textInputWidget: t('visualization.text_input_widget'),
+    textSelectTreeWidget: t('visualization.text_select_tree_widget'),
+    numberSelectWidget: t('visualization.number_select_widget'),
+    numberSelectGridWidget: t('visualization.number_select_grid_widget'),
+    numberRangeWidget: t('visualization.number_range_widget')
   }
 })
 
@@ -433,7 +453,7 @@ const validateArgs = (val, id) => {
     if (!child) {
       const errorDom = document.createElement('div')
       errorDom.className = 'error-msg'
-      errorDom.innerText = '格式错误'
+      errorDom.innerText = t('visualization.format_error')
       e.parentNode.appendChild(errorDom)
     }
     return false
@@ -636,7 +656,7 @@ const save = () => {
   })
   if (checkErrorNum > 0) {
     ElMessage({
-      message: `参数${checkMessage}默认值格式不正确！`,
+      message: t('visualization.params_setting_check_message'),
       type: 'warning',
       showClose: true
     })
@@ -644,7 +664,7 @@ const save = () => {
   }
   if (checkNullErrorNum > 0) {
     ElMessage({
-      message: `存在未配置的参数名或者参数名称重复！`,
+      message: t('visualization.params_setting_check_message_tips'),
       type: 'warning',
       showClose: true
     })
diff --git a/core/core-frontend/src/components/visualization/OuterParamsSetDS.vue b/core/core-frontend/src/components/visualization/OuterParamsSetDS.vue
deleted file mode 100644
index bfd1d7ad56..0000000000
--- a/core/core-frontend/src/components/visualization/OuterParamsSetDS.vue
+++ /dev/null
@@ -1,662 +0,0 @@
-<template>
-  <el-dialog
-    class="params-class"
-    :append-to-body="true"
-    title="外部参数设置"
-    v-model="state.outerParamsSetVisible"
-    width="70vw"
-    top="10vh"
-    trigger="click"
-  >
-    <el-row style="height: 550px">
-      <el-row v-loading="state.loading">
-        <el-row class="preview">
-          <el-col :span="8" style="height: 100%; overflow-y: hidden">
-            <el-row class="tree-head">
-              <span class="head-text">参数列表</span>
-              <span class="head-filter">
-                <el-button type="primary" icon="Plus" text @click="addOuterParamsInfo"> </el-button>
-              </span>
-            </el-row>
-            <el-row class="tree-content">
-              <el-tree
-                class="custom-tree"
-                menu
-                ref="outerParamsInfoTree"
-                :data="state.outerParamsInfoArray"
-                node-key="id"
-                highlight-current
-                :props="state.treeProp"
-                @node-click="nodeClick"
-              >
-                <template #default="{ node, data }">
-                  <span class="custom-tree-node">
-                    <span>
-                      <div @click.stop>
-                        <span class="auth-span">
-                          <el-checkbox
-                            v-model="data.checked"
-                            @change="sourceFieldCheckedChange(data)"
-                          />
-                        </span>
-                      </div>
-                    </span>
-                    <span :id="'paramName-' + data.paramsInfoId">
-                      <el-input
-                        v-if="curEditDataId === data.paramsInfoId"
-                        v-model="data.paramName"
-                        size="small"
-                        :placeholder="$t('visualization.input_param_name')"
-                        @blur="closeEdit"
-                      />
-                      <span class="tree-select-field" v-else-if="data.paramName">
-                        {{ data.paramName }}
-                      </span>
-                      <span class="tree-select-field" v-else> 未配置参数名 </span>
-                    </span>
-                    <span class="icon-more">
-                      <handle-more
-                        style="margin-right: 10px"
-                        @handle-command="cmd => outerParamsOperation(cmd, node, data)"
-                        :menu-list="state.optMenu"
-                        :icon-name="icon_more_outlined"
-                        placement="bottom-start"
-                      ></handle-more>
-                    </span>
-                  </span>
-                </template>
-              </el-tree>
-            </el-row>
-          </el-col>
-          <el-col :span="16" class="preview-show">
-            <el-row v-if="state.curNodeId">
-              <el-row style="margin-top: 5px">
-                <div style="display: flex" class="inner-content">
-                  <div style="flex: 1">联动组件</div>
-                  <div style="width: 36px"></div>
-                  <div style="flex: 1">联动组件字段</div>
-                  <div style="width: 32px"></div>
-                </div>
-                <div style="width: 100%; max-height: 350px; overflow-y: auto">
-                  <div
-                    style="display: flex; padding: 0 16px 8px"
-                    v-for="(targetViewInfo, index) in state.outerParamsInfo.targetViewInfoList"
-                    :key="index"
-                  >
-                    <div style="flex: 1">
-                      <div class="select-filed">
-                        <el-select
-                          v-model="targetViewInfo.targetViewId"
-                          filterable
-                          style="width: 100%"
-                          size="small"
-                          :placeholder="t('visualization.please_select')"
-                          @change="viewInfoOnChange(targetViewInfo)"
-                        >
-                          <el-option
-                            v-for="item in state.currentLinkPanelViewArray.filter(
-                              curItem =>
-                                !viewSelectedField.includes(curItem.id) ||
-                                curItem.id === targetViewInfo.targetViewId
-                            )"
-                            :key="item.id"
-                            :label="item.title"
-                            :value="item.id"
-                          >
-                            <Icon class-name="view-type-icon"
-                              ><component
-                                class="svg-icon view-type-icon"
-                                style="margin-right: 4px"
-                                :is="iconChartMap[item.type]"
-                              ></component
-                            ></Icon>
-                            <span style="font-size: 12px"> {{ item.title }}</span>
-                          </el-option>
-                        </el-select>
-                      </div>
-                    </div>
-                    <el-icon class="link-icon-join">
-                      <Icon name="dv-link-target"
-                        ><dvLinkTarget style="width: 20px; height: 20px" class="svg-icon"
-                      /></Icon>
-                    </el-icon>
-                    <div style="flex: 1">
-                      <div class="select-filed">
-                        <el-select
-                          v-model="targetViewInfo.targetFieldId"
-                          filterable
-                          :disabled="fieldIdDisabledCheck(targetViewInfo)"
-                          style="width: 100%"
-                          size="small"
-                          :placeholder="t('visualization.please_select')"
-                        >
-                          <el-option
-                            v-for="viewField in getFieldArray(targetViewInfo.targetViewId)"
-                            :key="viewField.id"
-                            :label="viewField.name"
-                            :value="viewField.id"
-                          >
-                            <Icon
-                              style="width: 14px; height: 14px"
-                              :className="`field-icon-${fieldType[viewField.deType]}`"
-                              ><component
-                                :is="iconFieldMap[fieldType[viewField.deType]]"
-                              ></component
-                            ></Icon>
-                            <span style="font-size: 12px">{{ viewField.name }}</span>
-                          </el-option>
-                        </el-select>
-                      </div>
-                    </div>
-                    <el-button class="m-del-icon-btn" text @click="deleteOuterParamsField(index)">
-                      <el-icon size="20px">
-                        <Icon name="icon_delete-trash_outlined"
-                          ><icon_deleteTrash_outlined class="svg-icon"
-                        /></Icon>
-                      </el-icon>
-                    </el-button>
-                  </div>
-                </div>
-
-                <el-row style="width: 100%; padding-left: 16px">
-                  <el-button type="primary" icon="Plus" text @click="addOuterParamsField">
-                    {{ t('visualization.add_param_link_field') }}
-                  </el-button>
-                </el-row>
-              </el-row>
-            </el-row>
-            <div v-else class="empty">
-              <empty-background description="请配置参数" img-type="noneWhite" />
-            </div>
-          </el-col>
-        </el-row>
-      </el-row>
-      <el-row class="root-class">
-        <el-button size="small" @click="cancel()">{{ t('commons.cancel') }} </el-button>
-        <el-button type="primary" size="small" @click="save()"
-          >{{ t('commons.confirm') }}
-        </el-button>
-      </el-row>
-    </el-row>
-  </el-dialog>
-</template>
-
-<script setup lang="ts">
-import _delete from '@/assets/svg/delete.svg'
-import edit from '@/assets/svg/edit.svg'
-import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
-import dvLinkTarget from '@/assets/svg/dv-link-target.svg'
-import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
-import { ref, reactive, computed, nextTick } from 'vue'
-import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-import { storeToRefs } from 'pinia'
-import { ElMessage } from 'element-plus-secondary'
-import { useI18n } from '@/hooks/web/useI18n'
-import { deepCopy } from '@/utils/utils'
-import generateID from '@/utils/generateID'
-import { queryWithVisualizationId, updateOuterParamsSet } from '@/api/visualization/outerParams'
-import { viewDetailList } from '@/api/visualization/dataVisualization'
-import checkArrayRepeat from '@/utils/check'
-import HandleMore from '@/components/handle-more/src/HandleMore.vue'
-import { fieldType } from '@/utils/attr'
-import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
-import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
-import { iconChartMap } from '../icon-group/chart-list'
-import { iconFieldMap } from '../icon-group/field-list'
-const dvMainStore = dvMainStoreWithOut()
-const { dvInfo, componentData } = storeToRefs(dvMainStore)
-const outerParamsInfoTree = ref(null)
-const { t } = useI18n()
-const curEditDataId = ref(null)
-const snapshotStore = snapshotStoreWithOut()
-
-const state = reactive({
-  loading: false,
-  outerParamsSetVisible: false,
-  optMenu: [
-    {
-      label: '重命名',
-      svgName: edit,
-      command: 'rename'
-    },
-    {
-      label: '删除',
-      svgName: _delete,
-      command: 'delete'
-    }
-  ],
-  treeProp: {
-    id: 'paramsInfoId',
-    label: 'paramName',
-    children: 'children'
-  },
-  outerParams: {
-    checked: false,
-    outerParamsInfoArray: []
-  },
-  outerParamsInfoArray: [],
-  mapOuterParamsInfoArray: {},
-  panelList: [],
-  curNodeId: null,
-  outerParamsInfo: {
-    content: '',
-    linkType: '',
-    targetViewInfoList: [],
-    paramsInfoId: null
-  },
-  currentFiledTreeNode: null,
-  defaultOuterParamsInfo: {
-    paramName: '',
-    checked: true,
-    targetViewInfoList: []
-  },
-  defaultTargetViewInfo: {
-    targetViewId: null,
-    targetFieldId: null
-  },
-  currentLinkPanelViewArray: [],
-  viewIdFieldArrayMap: {},
-  widgetSubjectsTrans: {
-    timeYearWidget: '年份过滤组件',
-    timeMonthWidget: '年月过滤组件',
-    timeDateWidget: '日期过滤组件',
-    timeDateRangeWidget: '日期范围过滤组件',
-    textSelectWidget: '文本下拉过滤组件',
-    textSelectGridWidget: '文本列表过滤组件',
-    textInputWidget: '文本搜索过滤组件',
-    textSelectTreeWidget: '下拉树过滤组件',
-    numberSelectWidget: '数字下拉过滤组件',
-    numberSelectGridWidget: '数字列表过滤组件',
-    numberRangeWidget: '数值区间过滤组件'
-  }
-})
-
-const viewSelectedField = computed(() =>
-  state.outerParamsInfo?.targetViewInfoList?.map(targetViewInfo => targetViewInfo.targetViewId)
-)
-
-const closeEdit = () => {
-  curEditDataId.value = null
-}
-
-const outerParamsOperation = (cmd, node, data) => {
-  if (cmd === 'rename') {
-    curEditDataId.value = data.paramsInfoId
-  } else if (cmd === 'delete') {
-    removeOuterParamsInfo(node, data)
-  }
-}
-
-const fieldIdDisabledCheck = targetViewInfo => {
-  return (
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
-  )
-}
-
-const getFieldArray = id => {
-  return state.viewIdFieldArrayMap[id]
-}
-
-const initParams = () => {
-  // 获取当前仪表板外部跳转信息
-  queryWithVisualizationId(dvInfo.value.id).then(rsp => {
-    state.outerParams = rsp.data
-    state.outerParamsInfoArray = state.outerParams?.outerParamsInfoArray
-    if (state.outerParamsInfoArray.length >= 1) {
-      state.outerParamsInfoArray.forEach(outerParamsInfo => {
-        state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
-      })
-      state.curNodeId = null
-      nextTick(() => {
-        // outerParamsInfoTree.value.setCurrentKey(firstNode.paramsInfoId)
-        // nodeClick(firstNode)
-      })
-    }
-  })
-  getPanelViewList(dvInfo.value.id)
-}
-
-const cancel = () => {
-  state.outerParamsSetVisible = false
-}
-
-const save = () => {
-  if (checkArrayRepeat(state.outerParams.outerParamsInfoArray, 'paramName')) {
-    ElMessage.warning({
-      message: t('visualization.repeat_params'),
-      showClose: true
-    })
-    return
-  }
-  updateOuterParamsSet(state.outerParams).then(() => {
-    ElMessage({
-      message: t('commons.save_success'),
-      type: 'success',
-      showClose: true
-    })
-    snapshotStore.recordSnapshotCache('renderChart')
-    cancel()
-  })
-}
-
-const nodeClick = data => {
-  state.outerParamsInfo = state.mapOuterParamsInfoArray[data.paramsInfoId]
-  state.curNodeId = data.paramsInfoId
-}
-
-// 获取当前图表字段 关联仪表板的图表信息列表
-const getPanelViewList = dvId => {
-  viewDetailList(dvId).then(rsp => {
-    state.viewIdFieldArrayMap = {}
-    state.currentLinkPanelViewArray = rsp.data
-    if (state.currentLinkPanelViewArray) {
-      state.currentLinkPanelViewArray.forEach(view => {
-        state.viewIdFieldArrayMap[view.id] = view.tableFields
-      })
-    }
-    // 增加过滤组件匹配
-    componentData.value.forEach(componentItem => {
-      if (componentItem.component === 'VQuery') {
-        componentItem.propValue.forEach(filterItem => {
-          state.currentLinkPanelViewArray.push({
-            id: filterItem.id,
-            type: 'filter',
-            name: filterItem.name,
-            title: filterItem.name
-          })
-          state.viewIdFieldArrayMap[filterItem.id] = [
-            { id: 'empty', name: t('visualization.filter_no_select') }
-          ]
-        })
-      }
-    })
-  })
-}
-
-const addOuterParamsField = () => {
-  state.outerParamsInfo.targetViewInfoList.push({
-    targetViewId: '',
-    targetFieldId: ''
-  })
-}
-const deleteOuterParamsField = index => {
-  state.outerParamsInfo.targetViewInfoList.splice(index, 1)
-}
-
-const viewInfoOnChange = targetViewInfo => {
-  if (
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
-  ) {
-    targetViewInfo.targetFieldId = 'empty'
-  } else {
-    targetViewInfo.targetFieldId = null
-  }
-}
-const sourceFieldCheckedChange = data => {
-  if (data.checked) {
-    state.outerParams.checked = true
-  }
-  nextTick(() => {
-    outerParamsInfoTree.value.setCurrentKey(data.paramsInfoId)
-    nodeClick(data)
-  })
-}
-
-const addOuterParamsInfo = () => {
-  state.outerParams.checked = true
-  const outerParamsInfo = deepCopy(state.defaultOuterParamsInfo)
-  outerParamsInfo['paramsInfoId'] = generateID()
-  state.outerParamsInfoArray.push(outerParamsInfo)
-  state.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
-  curEditDataId.value = outerParamsInfo['paramsInfoId']
-}
-
-const removeOuterParamsInfo = (node, data) => {
-  const parent = node.parent
-  const children = parent.data.children || parent.data
-  const index = children.findIndex(d => d.paramsInfoId === data.paramsInfoId)
-  children.splice(index, 1)
-  if (data.paramsInfoId === state.outerParamsInfo.paramsInfoId) {
-    delete state.mapOuterParamsInfoArray[data.paramsInfoId]
-    state.curNodeId = null
-  }
-}
-
-const optInit = () => {
-  state.outerParamsSetVisible = true
-  initParams()
-}
-
-defineExpose({
-  optInit
-})
-</script>
-
-<style scoped lang="less">
-.root-class {
-  margin: 15px 0px 5px;
-  justify-content: right;
-}
-
-.preview {
-  margin-top: 5px;
-  border: 1px solid #e6e6e6;
-  border-radius: 4px;
-  height: 470px !important;
-  overflow: hidden;
-  background-size: 100% 100% !important;
-}
-
-.tree-head {
-  height: 40px;
-  line-height: 40px;
-  font-size: 12px;
-  color: #3d4d66;
-  .head-text {
-    margin-left: 16px;
-    font-weight: 500;
-    font-size: 14px;
-    color: #1f2329;
-  }
-  .head-filter {
-    flex: 1;
-    text-align: right;
-    margin-right: 16px;
-    font-weight: 400;
-    font-size: 12px;
-    color: #646a73;
-  }
-}
-
-:deep(.ed-row) {
-  width: 100%;
-}
-
-.m-del-icon-btn {
-  color: #646a73;
-  margin-top: 4px;
-  margin-left: 4px;
-
-  &:hover {
-    background: rgba(31, 35, 41, 0.1) !important;
-  }
-  &:focus {
-    background: rgba(31, 35, 41, 0.1) !important;
-  }
-  &:active {
-    background: rgba(31, 35, 41, 0.2) !important;
-  }
-}
-
-.empty {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.preview-show {
-  border-left: 1px solid #e6e6e6;
-  background-size: 100% 100% !important;
-}
-
-.view-type-icon {
-  color: var(--ed-color-primary);
-  width: 22px;
-  height: 16px;
-}
-
-.custom-tree {
-  height: 100%;
-  width: 100%;
-  overflow-y: auto;
-}
-
-.custom-tree-node {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-
-  .icon-more {
-    margin-left: auto;
-    visibility: hidden;
-  }
-
-  &:hover .icon-more {
-    margin-left: auto;
-    visibility: visible;
-  }
-}
-
-.link-icon-join {
-  font-size: 20px;
-  margin-top: 7px;
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
-.inner-content {
-  width: 100%;
-  padding: 16px 16px 8px 16px;
-  font-size: 14px !important;
-}
-
-.slot-class {
-  color: white;
-}
-
-.bottom {
-  margin-top: 15px;
-  text-align: center;
-}
-
-.ellip {
-  /*width: 100%;*/
-  margin-left: 10px;
-  margin-right: 10px;
-  overflow: hidden; /*超出部分隐藏*/
-  white-space: nowrap; /*不换行*/
-  text-overflow: ellipsis; /*超出部分文字以...显示*/
-  text-align: center;
-  background-color: #f7f8fa;
-  color: #3d4d66;
-  font-size: 12px;
-  line-height: 24px;
-  height: 24px;
-  border-radius: 3px;
-}
-
-.select-filed {
-  /*width: 100%;*/
-  overflow: hidden; /*超出部分隐藏*/
-  white-space: nowrap; /*不换行*/
-  text-overflow: ellipsis; /*超出部分文字以...显示*/
-  color: #3d4d66;
-  font-size: 12px;
-  line-height: 35px;
-  height: 35px;
-  border-radius: 3px;
-}
-
-:deep(.ed-popover) {
-  height: 200px;
-  overflow: auto;
-}
-
-.custom-position {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  flex-flow: row nowrap;
-  color: #9ea6b2;
-}
-
-.tree-style {
-  padding: 10px 15px;
-  height: 100%;
-  overflow-y: auto;
-}
-
-:deep(.vue-treeselect__control) {
-  height: 28px;
-}
-
-:deep(.vue-treeselect__single-value) {
-  color: #606266;
-  line-height: 28px !important;
-}
-
-.auth-span {
-  float: right;
-  width: 40px;
-  margin-right: 5px;
-}
-
-.tree-content {
-  height: calc(100% - 70px);
-  overflow-y: auto;
-}
-
-.tree-bottom {
-  margin-top: 7px;
-  text-align: center;
-}
-
-:deep(.vue-treeselect__placeholder) {
-  line-height: 28px;
-}
-
-:deep(.ed-tree--highlight-current .ed-tree-node.is-current > .ed-tree-node__content) {
-  background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1)) !important;
-}
-
-.tree-content ::deep(.ed-input__inner) {
-  background: transparent;
-  border: 0px !important;
-}
-
-.params-class ::deep(.ed-dialog__title) {
-  font-size: 14px;
-}
-
-.params-class ::deep(.ed-dialog__headerbtn) {
-  z-index: 2;
-}
-
-.params-class ::deep(.ed-dialog__header) {
-  padding: 20px 20px 0;
-}
-
-.params-class ::deep(.ed-dialog__body) {
-  padding: 10px 20px 20px;
-}
-</style>
diff --git a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue
index 45cf6ac003..2fd6f6be09 100644
--- a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue
+++ b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue
@@ -28,7 +28,7 @@
         v-model="curComponent['resizeInnerKeep']"
         @change="snapshotChange"
       >
-        调整大小保持内部组件尺寸
+        {{ t('visualization.keep_size') }}
       </el-checkbox>
     </el-form-item>
     <el-form-item class="form-item" :class="'form-item-' + themes">
@@ -39,7 +39,7 @@
         v-model="curComponent['maintainRadio']"
         @change="maintainRadioChange"
       >
-        保持宽高比
+        {{ t('visualization.keep_ratio') }}
       </el-checkbox>
     </el-form-item>
     <el-row v-if="curComponent && curComponent.multiDimensional">
@@ -51,7 +51,7 @@
             v-model="curComponent.multiDimensional.enable"
             @change="multiDimensionalChange"
           >
-            3D旋转
+            {{ t('visualization.rotation_3d') }}
           </el-checkbox>
         </el-form-item>
         <template v-if="curComponent.multiDimensional.enable">
@@ -109,10 +109,11 @@ import _ from 'lodash'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import { groupSizeStyleAdaptor, groupStyleRevert } from '@/utils/style'
 import { isGroupCanvas, isTabCanvas } from '@/utils/canvasUtils'
+import { useI18n } from '@/hooks/web/useI18n'
 const parentNode = ref(null)
 const canvasId = ref('canvas-main')
 const snapshotStore = snapshotStoreWithOut()
-
+const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const { curComponent, canvasStyleData } = storeToRefs(dvMainStore)
 const positionMounted = ref({
diff --git a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue b/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
index bdbba43e7a..e87657a0a0 100644
--- a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
+++ b/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
@@ -21,7 +21,7 @@
           v-model="dvInfo.selfWatermarkStatus"
           @change="onBackgroundChange"
         >
-          水印
+          {{ t('visualization.watermark') }}}
         </el-checkbox>
       </el-form-item>
       <el-form-item class="form-item no-margin-bottom" :class="'form-item-' + themes">
@@ -31,7 +31,7 @@
           v-model="canvasStyleData.backgroundColorSelect"
           @change="onBackgroundChange"
         >
-          {{ $t('chart.color') }}
+          {{ t('chart.color') }}
         </el-checkbox>
       </el-form-item>
 
@@ -94,7 +94,7 @@
                 class="image-hint"
                 :class="`image-hint_${themes}`"
               >
-                支持JPG、PNG、GIF、SVG
+                {{ t('visualization.pic_upload_tips2') }}
               </span>
               <el-button
                 size="small"
@@ -104,7 +104,7 @@
                 @click="goFile"
                 :disabled="!canvasStyleData.backgroundImageEnable"
               >
-                重新上传
+                {{ t('visualization.re_upload') }}
               </el-button>
             </el-row>
           </div>
@@ -168,7 +168,7 @@ const goFile = () => {
 }
 
 const sizeMessage = () => {
-  ElMessage.success('图片大小不符合')
+  ElMessage.success(t('visualization.pic_size_error'))
 }
 
 const reUpload = e => {
diff --git a/core/core-frontend/src/custom-component/canvas-filter-btn/Component.vue b/core/core-frontend/src/custom-component/canvas-filter-btn/Component.vue
index 89a55c4a40..edc33a5635 100644
--- a/core/core-frontend/src/custom-component/canvas-filter-btn/Component.vue
+++ b/core/core-frontend/src/custom-component/canvas-filter-btn/Component.vue
@@ -1,6 +1,6 @@
 <!-- IconSlider.vue -->
 <template>
-  <el-tooltip offset="22" effect="dark" placement="left" content="查询">
+  <el-tooltip offset="22" effect="dark" placement="left" :content="t('visualization.query')">
     <div class="canvas-filter" @mousedown.stop @mousedup.stop>
       <div class="icon-slider" @mouseenter="slideOut" @mouseleave="slideBack">
         <div
@@ -21,10 +21,12 @@ import { computed, ref } from 'vue'
 import { ElTooltip } from 'element-plus-secondary'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
+import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 const offset = ref(0)
 const slideDistance = ref(14) // 滑动距离
 const { canvasState } = storeToRefs(dvMainStore)
+const { t } = useI18n()
 
 const filterActive = computed(() => canvasState.value.curPointArea === 'hidden')
 const slideOut = () => {
diff --git a/core/core-frontend/src/custom-component/common/CarouselSetting.vue b/core/core-frontend/src/custom-component/common/CarouselSetting.vue
index 98c590b3fd..5b26cd9c71 100644
--- a/core/core-frontend/src/custom-component/common/CarouselSetting.vue
+++ b/core/core-frontend/src/custom-component/common/CarouselSetting.vue
@@ -6,6 +6,8 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
 import CollapseSwitchItem from '../../components/collapse-switch-item/src/CollapseSwitchItem.vue'
 import Icon from '../../components/icon-custom/src/Icon.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 
 const snapshotStore = snapshotStoreWithOut()
 
@@ -58,7 +60,7 @@ const handleInput = value => {
     v-model="carouselInfo.enable"
     name="carouselInfo"
     @modelChange="onSettingChange"
-    title="轮播"
+    :title="t('visualization.carousel')"
   >
     <el-row class="custom-row" style="margin-top: -8px">
       <el-form label-position="top" @submit.prevent>
@@ -67,11 +69,13 @@ const handleInput = value => {
           :class="'form-item-' + themes"
           style="width: 50%; margin-bottom: 0"
         >
-          <span style="font-size: 12px">轮播时间（秒）</span>
+          <span style="font-size: 12px">{{ t('visualization.carousel_time') }}</span>
           <el-tooltip class="item" :effect="themes" placement="top">
             <template #content>
-              <div>轮播退出编辑模式才开生效</div>
-              <div v-if="element.innerType === 'picture-group'">启用条件样式后，轮播失效</div>
+              <div>{{ t('visualization.carousel_tips') }}</div>
+              <div v-if="element.innerType === 'picture-group'">
+                {{ t('visualization.carousel_tips2') }}
+              </div>
             </template>
             <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
               <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index c4bc31860d..821b9ecdc6 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -111,12 +111,17 @@ onMounted(() => {
 <template>
   <div class="v-common-attr" ref="containerRef">
     <el-collapse v-model="activeName" @change="onChange()">
-      <el-collapse-item :effect="themes" title="位置" name="position" v-if="positionComponentShow">
+      <el-collapse-item
+        :effect="themes"
+        :title="t('visualization.position')"
+        name="position"
+        v-if="positionComponentShow"
+      >
         <component-position :themes="themes" />
       </el-collapse-item>
       <el-collapse-item
         :effect="themes"
-        title="背景"
+        :title="t('visualization.background')"
         name="background"
         v-if="element && backgroundCustomShow"
       >
@@ -135,7 +140,7 @@ onMounted(() => {
         v-model="element.style.showTabTitle"
         @modelChange="val => onStyleAttrChange({ key: 'showTabTitle', value: val })"
         :themes="themes"
-        title="Tab标签"
+        :title="t('visualization.tab_title')"
         name="tabTitle"
         class="common-style-area"
       >
@@ -148,7 +153,7 @@ onMounted(() => {
       <el-collapse-item
         v-if="styleShow"
         :effect="themes"
-        title="样式"
+        :title="t('visualization.style')"
         name="style"
         class="common-style-area"
       >
@@ -161,7 +166,7 @@ onMounted(() => {
       <el-collapse-item
         v-if="element && element.events && eventsShow"
         :effect="themes"
-        title="事件"
+        :title="t('visualization.event')"
         name="events"
         class="common-style-area"
       >
@@ -172,7 +177,7 @@ onMounted(() => {
         v-model="element.style.borderActive"
         @modelChange="val => onStyleAttrChange({ key: 'borderActive', value: val })"
         :themes="themes"
-        title="边框"
+        :title="t('visualization.board')"
         name="borderSetting"
         class="common-style-area"
       >
diff --git a/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue b/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
index 04f6addc30..49f5cd68f9 100644
--- a/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
+++ b/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
@@ -5,10 +5,12 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
+import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 
 const snapshotStore = snapshotStoreWithOut()
 const { canvasStyleData, curComponent } = storeToRefs(dvMainStore)
+const { t } = useI18n()
 
 const props = withDefaults(
   defineProps<{
@@ -86,12 +88,12 @@ watch(
         <el-row style="display: flex">
           <el-form-item
             style="width: 70px"
-            label="颜色"
+            :label="t('visualization.color')"
             class="form-item"
             :class="'form-item-' + themes"
           >
             <el-color-picker
-              title="颜色"
+              :title="t('visualization.color')"
               v-model="styleForm.borderColor"
               class="color-picker-style"
               :triggerWidth="65"
@@ -104,12 +106,12 @@ watch(
           </el-form-item>
           <el-form-item
             style="width: 150px"
-            label="线宽"
+            :label="t('visualization.board_width')"
             class="form-item"
             :class="'form-item-' + themes"
           >
             <el-input-number
-              title="线宽"
+              :title="t('visualization.board_width')"
               :min="0"
               :max="50"
               :effect="themes"
@@ -126,12 +128,12 @@ watch(
         <el-row style="display: flex">
           <el-form-item
             style="width: 70px"
-            label="颜色"
+            :label="t('visualization.color')"
             class="form-item"
             :class="'form-item-' + themes"
           >
             <el-color-picker
-              title="颜色"
+              :title="t('visualization.color')"
               v-model="styleForm.borderColor"
               class="color-picker-style"
               :triggerWidth="65"
@@ -145,12 +147,12 @@ watch(
           </el-form-item>
           <el-form-item
             style="width: 150px"
-            label="圆角"
+            :label="t('visualization.board_radius')"
             class="form-item"
             :class="'form-item-' + themes"
           >
             <el-input-number
-              title="圆角"
+              :title="t('visualization.board_radius')"
               :effect="themes"
               :min="0"
               :max="200"
@@ -165,7 +167,7 @@ watch(
         <el-row style="display: flex">
           <el-form-item
             style="width: 70px"
-            label="样式"
+            :label="t('visualization.style')"
             class="form-item"
             :class="'form-item-' + themes"
           >
@@ -187,12 +189,12 @@ watch(
           </el-form-item>
           <el-form-item
             style="width: 150px"
-            label="线宽"
+            :label="t('visualization.board_width')"
             class="form-item"
             :class="'form-item-' + themes"
           >
             <el-input-number
-              title="线宽"
+              :title="t('visualization.board_width')"
               :min="0"
               :max="50"
               :effect="themes"
diff --git a/core/core-frontend/src/custom-component/common/CommonEvent.vue b/core/core-frontend/src/custom-component/common/CommonEvent.vue
index 7edf494e45..4d70a19acc 100644
--- a/core/core-frontend/src/custom-component/common/CommonEvent.vue
+++ b/core/core-frontend/src/custom-component/common/CommonEvent.vue
@@ -5,7 +5,9 @@ import { ElFormItem, ElIcon } from 'element-plus-secondary'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import Icon from '../../components/icon-custom/src/Icon.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
+const { t } = useI18n()
 
 const snapshotStore = snapshotStoreWithOut()
 
@@ -46,11 +48,11 @@ const onJumpValueChange = () => {
           size="small"
           v-model="eventsInfo.checked"
           @change="onEventChange"
-          >开启事件绑定</el-checkbox
+          >{{ t('visualization.enable_event_binding') }}</el-checkbox
         >
         <el-tooltip class="item" :effect="themes" placement="top">
           <template #content>
-            <div>事件绑定需退出编辑模式后生效,富文本开启绑定事件则内部点击事件失效</div>
+            <div>{{ t('visualization.event_binding_tips') }}</div>
           </template>
           <el-icon class="hint-icon" :class="{ 'hint-icon--dark': themes === 'dark' }">
             <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
@@ -89,7 +91,7 @@ const onJumpValueChange = () => {
           :effect="themes"
           :disabled="!eventsInfo.checked"
           clearable
-          :placeholder="'请输入跳转地址'"
+          :placeholder="t('visualization.input_url_tips')"
           @change="onJumpValueChange"
         />
       </el-form-item>
@@ -106,9 +108,9 @@ const onJumpValueChange = () => {
           :disabled="!eventsInfo.checked"
           @change="onJumpValueChange"
         >
-          <el-radio :effect="themes" label="_blank">新开页面</el-radio>
-          <el-radio :effect="themes" label="_self">当前页面</el-radio>
-          <el-radio :effect="themes" label="newPop">弹窗页面</el-radio>
+          <el-radio :effect="themes" label="_blank">{{ t('visualization.new_window') }}</el-radio>
+          <el-radio :effect="themes" label="_self">{{ t('visualization.now_window') }}</el-radio>
+          <el-radio :effect="themes" label="newPop">{{ t('visualization.pop_window') }}</el-radio>
         </el-radio-group>
       </el-form-item>
     </el-form>
diff --git a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
index 1429d17c54..e074a77497 100644
--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@@ -415,20 +415,25 @@ const state = reactive({
 })
 
 const styleColorKeyArray = [
-  { value: 'color', label: '颜色', width: 90, icon: dvStyleColor },
+  { value: 'color', label: t('visualization.color'), width: 90, icon: dvStyleColor },
   {
     value: 'headFontColor',
-    label: '头部字体颜色',
+    label: t('visualization.head_font_color'),
     width: 90,
     icon: dvStyleHeadFontColor
   },
   {
     value: 'headFontActiveColor',
-    label: '激活字体颜色',
+    label: t('visualization.head_font_active_color'),
     width: 90,
     icon: dvStyleHeadFontActiveColor
   },
-  { value: 'backgroundColor', label: '背景色', width: 90, icon: dvStyleBackgroundColor }
+  {
+    value: 'backgroundColor',
+    label: t('visualization.background_color'),
+    width: 90,
+    icon: dvStyleBackgroundColor
+  }
 ]
 
 const letterSpacingList = computed(() => {
@@ -455,7 +460,7 @@ const fontSizeList = computed(() => {
 const styleOptionKeyArrayPre = [
   {
     value: 'fontFamily',
-    label: '字体',
+    label: t('visualization.font_family'),
     customOption: fontFamilyList,
     width: '188px',
     icon: dvStyleFontFamily
@@ -466,21 +471,21 @@ const styleOptionKeyArrayPre = [
 const styleOptionMountedKeyArray = [
   {
     value: 'letterSpacing',
-    label: '字间距',
+    label: t('visualization.letter_spacing'),
     customOption: letterSpacingList.value,
     width: '90px',
     icon: dvStyleLetterSpacing
   },
   {
     value: 'fontSize',
-    label: '字体大小',
+    label: t('visualization.font_size'),
     customOption: fontSizeList.value,
     width: '90px',
     icon: dvStyleFontSize
   },
   {
     value: 'activeFontSize',
-    label: '激活字体大小',
+    label: t('visualization.active_font_size'),
     customOption: fontSizeList.value,
     width: '90px',
     icon: dvStyleActiveFont
@@ -491,21 +496,21 @@ const styleOptionMountedKeyArray = [
 const styleOptionKeyArray = [
   {
     value: 'scrollSpeed',
-    label: '滚动速度',
+    label: t('visualization.scroll_speed'),
     customOption: scrollSpeedList,
     width: '90px',
     icon: dvStyleScrollSpeed
   },
   {
     value: 'opacity',
-    label: '不透明度',
+    label: t('visualization.opacity'),
     customOption: opacitySizeList,
     width: '90px',
     icon: dvStyleOpacity
   },
   {
     value: 'backdropFilter',
-    label: '背景模糊',
+    label: t('visualization.background_opacity'),
     customOption: backdropBlurList,
     width: '90px',
     icon: dvStyleBlur
diff --git a/core/core-frontend/src/custom-component/common/ComponentConfig.ts b/core/core-frontend/src/custom-component/common/ComponentConfig.ts
index 4de0c716d7..685cc0ba3a 100644
--- a/core/core-frontend/src/custom-component/common/ComponentConfig.ts
+++ b/core/core-frontend/src/custom-component/common/ComponentConfig.ts
@@ -10,36 +10,98 @@ import board_9 from '@/assets/svg/board_9.svg'
 import graphicalCircular from '@/assets/svg/graphical-circular.svg'
 import graphicalRect from '@/assets/svg/graphical-rect.svg'
 import graphicalTriangle from '@/assets/svg/graphical-triangle.svg'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 export const CANVAS_MATERIAL = [
   {
     category: 'CanvasBoard',
-    title: '边框',
+    title: t('visualization.board'),
     span: 8,
     details: [
-      { value: 'board_1', type: 'outer_svg', title: '边框1', icon: board_1 },
-      { value: 'board_2', type: 'outer_svg', title: '边框2', icon: board_2 },
-      { value: 'board_3', type: 'outer_svg', title: '边框3', icon: board_3 },
-      { value: 'board_4', type: 'outer_svg', title: '边框4', icon: board_4 },
-      { value: 'board_5', type: 'outer_svg', title: '边框5', icon: board_5 },
-      { value: 'board_6', type: 'outer_svg', title: '边框6', icon: board_6 },
-      { value: 'board_7', type: 'outer_svg', title: '边框7', icon: board_7 },
-      { value: 'board_8', type: 'outer_svg', title: '边框8', icon: board_8 },
-      { value: 'board_9', type: 'outer_svg', title: '边框9', icon: board_9 }
+      {
+        value: 'board_1',
+        type: 'outer_svg',
+        title: t('visualization.board_name', [1]),
+        icon: board_1
+      },
+      {
+        value: 'board_2',
+        type: 'outer_svg',
+        title: t('visualization.board_name', [2]),
+        icon: board_2
+      },
+      {
+        value: 'board_3',
+        type: 'outer_svg',
+        title: t('visualization.board_name', [3]),
+        icon: board_3
+      },
+      {
+        value: 'board_4',
+        type: 'outer_svg',
+        title: t('visualization.board_name', [4]),
+        icon: board_4
+      },
+      {
+        value: 'board_5',
+        type: 'outer_svg',
+        title: t('visualization.board_name', [5]),
+        icon: board_5
+      },
+      {
+        value: 'board_6',
+        type: 'outer_svg',
+        title: t('visualization.board_name', [6]),
+        icon: board_6
+      },
+      {
+        value: 'board_7',
+        type: 'outer_svg',
+        title: t('visualization.board_name', [7]),
+        icon: board_7
+      },
+      {
+        value: 'board_8',
+        type: 'outer_svg',
+        title: t('visualization.board_name', [8]),
+        icon: board_8
+      },
+      {
+        value: 'board_9',
+        type: 'outer_svg',
+        title: t('visualization.board_name', [9]),
+        icon: board_9
+      }
     ]
   },
   {
     category: 'DeGraphical',
-    title: '图形',
+    title: t('visualization.graphic'),
     span: 8,
     details: [
-      { value: 'RectShape', type: 'graphical', title: '矩形', icon: graphicalRect },
-      { value: 'SvgTriangle', type: 'graphical', title: '三角形', icon: graphicalTriangle },
-      { value: 'CircleShape', type: 'graphical', title: '圆形', icon: graphicalCircular }
+      {
+        value: 'RectShape',
+        type: 'graphical',
+        title: t('visualization.rect_shape'),
+        icon: graphicalRect
+      },
+      {
+        value: 'SvgTriangle',
+        type: 'graphical',
+        title: t('visualization.triangle'),
+        icon: graphicalTriangle
+      },
+      {
+        value: 'CircleShape',
+        type: 'graphical',
+        title: t('visualization.circle_shape'),
+        icon: graphicalCircular
+      }
     ]
   },
   {
     category: 'CanvasIcon',
-    title: '图标',
+    title: t('visualization.icon'),
     span: 4,
     details: [
       { value: 'Plus', type: 'inner_svg', icon: 'Plus' },
diff --git a/core/core-frontend/src/custom-component/component-group/MediaGroup.vue b/core/core-frontend/src/custom-component/component-group/MediaGroup.vue
index 1e1f5e5112..760499ae13 100644
--- a/core/core-frontend/src/custom-component/component-group/MediaGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/MediaGroup.vue
@@ -7,7 +7,8 @@ import { toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import DragComponent from '@/custom-component/component-group/DragComponent.vue'
 import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
-
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 const props = defineProps({
   propValue: {
     type: Array,
@@ -51,7 +52,7 @@ const handleDragEnd = e => {
       class="media-component"
       :themes="themes"
       :icon="dvPictureShow"
-      label="图片"
+      :label="t('visualization.picture')"
       drag-info="Picture&Picture"
       v-on:click="newComponent('Picture', 'Picture')"
     ></drag-component>
@@ -59,7 +60,7 @@ const handleDragEnd = e => {
       class="media-component"
       :themes="themes"
       :icon="iconVideo"
-      label="视频"
+      :label="t('visualization.video')"
       drag-info="DeVideo&DeVideo"
       v-on:click="newComponent('DeVideo', 'DeVideo')"
     ></drag-component>
@@ -67,7 +68,7 @@ const handleDragEnd = e => {
       class="media-component"
       :themes="themes"
       :icon="iconStream"
-      label="流媒体"
+      :label="t('visualization.stream_media')"
       drag-info="DeStreamMedia&DeStreamMedia"
       v-on:click="newComponent('DeStreamMedia', 'DeStreamMedia')"
     ></drag-component>
@@ -75,7 +76,7 @@ const handleDragEnd = e => {
       class="media-component"
       :themes="themes"
       :icon="pictureGroupOrigin"
-      label="图片组"
+      :label="t('visualization.pic_group')"
       drag-info="UserView&picture-group"
       v-on:click="newComponent('UserView', 'picture-group')"
     ></drag-component>
diff --git a/core/core-frontend/src/custom-component/component-group/MoreComGroup.vue b/core/core-frontend/src/custom-component/component-group/MoreComGroup.vue
index b137ac6381..667a6d24c7 100644
--- a/core/core-frontend/src/custom-component/component-group/MoreComGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/MoreComGroup.vue
@@ -4,7 +4,8 @@ import { toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import DragComponent from '@/custom-component/component-group/DragComponent.vue'
 import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
-
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 const props = defineProps({
   propValue: {
     type: Array,
@@ -47,14 +48,14 @@ const handleDragEnd = e => {
     <drag-component
       :themes="themes"
       name="YYYY-MM-DD 08:00:00"
-      label="日期时间"
+      :label="t('visualization.date_time')"
       drag-info="DeTimeClock&DeTimeClock"
       v-on:click="newComponent('DeTimeClock')"
     ></drag-component>
     <drag-component
       :themes="themes"
       :icon="dbMoreWeb"
-      label="网页"
+      :label="t('visualization.web')"
       drag-info="DeFrame&DeFrame"
       v-on:click="newComponent('DeFrame')"
     ></drag-component>
diff --git a/core/core-frontend/src/custom-component/component-group/QueryGroup.vue b/core/core-frontend/src/custom-component/component-group/QueryGroup.vue
index 7deedae929..f4a6439718 100644
--- a/core/core-frontend/src/custom-component/component-group/QueryGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/QueryGroup.vue
@@ -4,7 +4,8 @@ import { toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import DragComponent from '@/custom-component/component-group/DragComponent.vue'
 import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
-
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 const props = defineProps({
   propValue: {
     type: Array,
@@ -53,7 +54,7 @@ const newComponent = componentName => {
     <drag-component
       :themes="themes"
       :icon="dvFilterShow"
-      label="查询组件"
+      :label="t('visualization.query_component')"
       drag-info="VQuery&VQuery"
     ></drag-component>
   </div>
diff --git a/core/core-frontend/src/custom-component/component-group/TextGroup.vue b/core/core-frontend/src/custom-component/component-group/TextGroup.vue
index 3c35f3fe4d..9729dbb1de 100644
--- a/core/core-frontend/src/custom-component/component-group/TextGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/TextGroup.vue
@@ -5,7 +5,8 @@ import { toRefs } from 'vue'
 import eventBus from '@/utils/eventBus'
 import DragComponent from '@/custom-component/component-group/DragComponent.vue'
 import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils'
-
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 const props = defineProps({
   propValue: {
     type: Array,
@@ -49,7 +50,7 @@ const newComponent = (componentName, innerType) => {
     <drag-component
       :themes="themes"
       :icon="dvRichText"
-      label="富文本"
+      :label="t('visualization.rich_text')"
       drag-info="UserView&rich-text"
       v-on:click="newComponent('UserView', 'rich-text')"
     ></drag-component>
@@ -57,7 +58,7 @@ const newComponent = (componentName, innerType) => {
       v-if="dvModel === 'dataV'"
       :themes="themes"
       :icon="dvScrollText"
-      label="跑马灯"
+      :label="t('visualization.scroll_text')"
       drag-info="ScrollText&ScrollText"
       v-on:click="newComponent('ScrollText', 'ScrollText')"
     ></drag-component>
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 73e5a4491d..dc2c348da1 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -2,6 +2,8 @@
 import { deepCopy } from '@/utils/utils'
 import { guid } from '@/views/visualized/data/dataset/form/util'
 import { getViewConfig } from '@/views/chart/components/editor/util/chart'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 
 export const commonStyle = {
   rotate: 0,
@@ -24,13 +26,13 @@ export const BASE_EVENTS = {
   showTips: false,
   type: 'jump', // openHidden  jump
   typeList: [
-    { key: 'jump', label: '跳转' },
-    { key: 'download', label: '下载' },
-    { key: 'share', label: '分享' },
-    { key: 'fullScreen', label: '全屏' },
-    { key: 'showHidden', label: '弹窗区域' },
-    { key: 'refreshDataV', label: '刷新' },
-    { key: 'refreshView', label: '刷新图表' }
+    { key: 'jump', label: t('visualization.jump') },
+    { key: 'download', label: t('visualization.download') },
+    { key: 'share', label: t('visualization.share') },
+    { key: 'fullScreen', label: t('visualization.fullscreen') },
+    { key: 'showHidden', label: t('visualization.pop_area') },
+    { key: 'refreshDataV', label: t('visualization.refresh') },
+    { key: 'refreshView', label: t('visualization.refresh_view') }
   ],
   jump: {
     value: 'https://',
@@ -255,8 +257,8 @@ export const commonAttr = {
 const list = [
   {
     component: 'Group',
-    name: '组合',
-    label: '组合',
+    name: t('visualization.view_group'),
+    label: t('visualization.view_group'),
     propValue: '&nbsp;',
     icon: 'icon_graphical',
     innerType: 'Group',
@@ -268,8 +270,8 @@ const list = [
   {
     id: 100000001,
     component: 'GroupArea',
-    name: '组合区域',
-    label: '组合区域',
+    name: 'group_area',
+    label: 'group_area',
     propValue: '&nbsp;',
     icon: 'icon_graphical',
     innerType: 'GroupArea',
@@ -280,8 +282,8 @@ const list = [
   },
   {
     component: 'VQuery',
-    name: '查询',
-    label: '查询',
+    name: t('visualization.query'),
+    label: t('visualization.query'),
     propValue: '',
     icon: 'icon_search',
     innerType: 'VQuery',
@@ -307,8 +309,8 @@ const list = [
   },
   {
     component: 'UserView',
-    name: '图表',
-    label: '图表',
+    name: t('visualization.view'),
+    label: t('visualization.view'),
     propValue: { textValue: '', urlList: [] },
     icon: 'bar',
     innerType: 'bar',
@@ -328,8 +330,8 @@ const list = [
   },
   {
     component: 'DeVideo',
-    name: '视频',
-    label: '视频',
+    name: t('visualization.video'),
+    label: t('visualization.video'),
     innerType: 'DeVideo',
     editing: false,
     canvasActive: false,
@@ -347,8 +349,8 @@ const list = [
   },
   {
     component: 'DeStreamMedia',
-    name: '流媒体',
-    label: '流媒体',
+    name: t('visualization.stream_media'),
+    label: t('visualization.stream_media'),
     innerType: 'DeStreamMedia',
     editing: false,
     canvasActive: false,
@@ -366,8 +368,8 @@ const list = [
   },
   {
     component: 'DeFrame',
-    name: '网页',
-    label: '网页',
+    name: t('visualization.web'),
+    label: t('visualization.web'),
     innerType: 'DeFrame',
     editing: false,
     canvasActive: false,
@@ -386,8 +388,8 @@ const list = [
   },
   {
     component: 'DeTimeClock',
-    name: '时间组件',
-    label: '时间组件',
+    name: t('visualization.time_component'),
+    label: t('visualization.time_component'),
     icon: 'dv-more-time-clock',
     innerType: 'DeTimeClock',
     editing: false,
@@ -417,8 +419,8 @@ const list = [
   },
   {
     component: 'Picture',
-    name: '图片',
-    label: '图片',
+    name: t('visualization.picture'),
+    label: t('visualization.picture'),
     icon: 'dv-picture-real',
     innerType: 'Picture',
     editing: false,
@@ -443,8 +445,8 @@ const list = [
   },
   {
     component: 'CanvasIcon',
-    name: '图标',
-    label: '图标',
+    name: t('visualization.icon'),
+    label: t('visualization.icon'),
     propValue: '',
     icon: 'other_material_icon',
     innerType: '',
@@ -463,8 +465,8 @@ const list = [
   },
   {
     component: 'CanvasBoard',
-    name: '边框',
-    label: '边框',
+    name: t('visualization.border'),
+    label: t('visualization.border'),
     propValue: '',
     icon: 'other_material_board',
     innerType: '',
@@ -483,8 +485,8 @@ const list = [
   },
   {
     component: 'RectShape',
-    name: '矩形',
-    label: '矩形',
+    name: t('visualization.rect_shape'),
+    label: t('visualization.rect_shape'),
     propValue: '&nbsp;',
     icon: 'icon_graphical',
     style: {
@@ -497,8 +499,8 @@ const list = [
   },
   {
     component: 'CircleShape',
-    name: '圆形',
-    label: '圆形',
+    name: t('visualization.circle_shape'),
+    label: t('visualization.circle_shape'),
     propValue: '&nbsp;',
     icon: 'icon_graphical',
     style: {
@@ -513,8 +515,8 @@ const list = [
   },
   {
     component: 'SvgTriangle',
-    name: '三角形',
-    label: '三角形',
+    name: t('visualization.triangle'),
+    label: t('visualization.triangle'),
     icon: 'icon_graphical',
     propValue: '',
     style: {
@@ -528,12 +530,12 @@ const list = [
   },
   {
     component: 'DeTabs',
-    name: '选项卡',
-    label: '选项卡',
+    name: t('visualization.tabs'),
+    label: t('visualization.tabs'),
     propValue: [
       {
         name: 'tab',
-        title: '新建Tab',
+        title: t('visualization.new_tab'),
         componentData: [],
         closable: true
       }
@@ -560,9 +562,9 @@ const list = [
   },
   {
     component: 'ScrollText',
-    name: '跑马灯',
-    label: '跑马灯',
-    propValue: '双击编辑文字',
+    name: t('visualization.scroll_text'),
+    label: t('visualization.scroll_text'),
+    propValue: t('visualization.component_input_tips'),
     innerType: 'ScrollText',
     icon: 'scroll-text',
     x: 1,
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 8f60470351..33c1d9a7cb 100644
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue
@@ -44,16 +44,16 @@
                 <template #dropdown>
                   <el-dropdown-menu :style="{ 'font-family': fontFamily }">
                     <el-dropdown-item :command="beforeHandleCommand('editTitle', tabItem)">
-                      编辑标题
+                      {{ t('visualization.edit_title') }}
                     </el-dropdown-item>
                     <el-dropdown-item :command="beforeHandleCommand('copyCur', tabItem)">
-                      复制
+                      {{ t('visualization.copy') }}
                     </el-dropdown-item>
                     <el-dropdown-item
                       v-if="element.propValue.length > 1"
                       :command="beforeHandleCommand('deleteCur', tabItem)"
                     >
-                      删除
+                      {{ t('visualization.delete') }}
                     </el-dropdown-item>
                   </el-dropdown-menu>
                 </template>
@@ -146,11 +146,13 @@ import { getPanelAllLinkageInfo } from '@/api/visualization/linkage'
 import { dataVTabComponentAdd, groupSizeStyleAdaptor } from '@/utils/style'
 import { deepCopyTabItemHelper } from '@/store/modules/data-visualization/copy'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const { tabMoveInActiveId, bashMatrixInfo, editMode, mobileInPc } = storeToRefs(dvMainStore)
 const tabComponentRef = ref(null)
 let carouselTimer = null
+const { t } = useI18n()
 
 const props = defineProps({
   canvasStyleData: {
@@ -271,7 +273,7 @@ function addTab() {
   const newName = guid()
   const newTab = {
     name: newName,
-    title: '新建Tab',
+    title: t('visualization.new_tab'),
     componentData: [],
     closable: true
   }
diff --git a/core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue b/core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue
index 0cda9736b8..704f076e57 100644
--- a/core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue
@@ -3,7 +3,7 @@
     ref="enlargeDialog"
     destroy-on-close
     :append-to-body="true"
-    :title="'自定义排序'"
+    :title="t('visualization.custom_sort')"
     v-model="dialogShow"
     width="30vw"
     top="10vh"
@@ -63,6 +63,8 @@ const save = () => {
   eventBus.emit('onTabSortChange-' + config.value.id)
   closeDialog()
 }
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 
 defineExpose({
   sortInit
diff --git a/core/core-frontend/src/custom-component/de-time-clock/CustomAttr.vue b/core/core-frontend/src/custom-component/de-time-clock/CustomAttr.vue
index c66d0e3fb6..f0b6af4fba 100644
--- a/core/core-frontend/src/custom-component/de-time-clock/CustomAttr.vue
+++ b/core/core-frontend/src/custom-component/de-time-clock/CustomAttr.vue
@@ -14,7 +14,7 @@ const { curComponent } = storeToRefs(dvMainStore)
 </script>
 
 <template>
-  <el-collapse-item :effect="themes" title="位置" name="position" v-if="!dashboardActive">
+  <el-collapse-item :effect="themes" :title="t('visualization.position')" name="position" v-if="!dashboardActive">
     <component-position :themes="themes" />
   </el-collapse-item>
 </template>
diff --git a/core/core-frontend/src/custom-component/de-time-clock/TimeClockFormat.vue b/core/core-frontend/src/custom-component/de-time-clock/TimeClockFormat.vue
index 21ffaf5cc4..7367ed0d5d 100644
--- a/core/core-frontend/src/custom-component/de-time-clock/TimeClockFormat.vue
+++ b/core/core-frontend/src/custom-component/de-time-clock/TimeClockFormat.vue
@@ -1,7 +1,7 @@
 <template>
   <el-row>
     <el-form ref="form">
-      <el-form-item v-show="formatInfo.showDate" label="显示日期">
+      <el-form-item v-show="formatInfo.showDate" :label="t('visualization.show_data')">
         <el-select
           v-model="formatInfo.dateFormat"
           :effect="themes"
@@ -17,7 +17,7 @@
         </el-select>
       </el-form-item>
 
-      <el-form-item label="显示时间">
+      <el-form-item :label="t('visualization.show_time')">
         <el-select
           v-model="formatInfo.timeFormat"
           :effect="themes"
@@ -41,7 +41,8 @@
 
 <script setup lang="ts">
 import { reactive, toRefs } from 'vue'
-
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 const state = reactive({
   timeOptions: [
     { value: 'hh:mm:ss', label: 'hh:mm:ss' },
diff --git a/core/core-frontend/src/custom-component/de-video/Attr.vue b/core/core-frontend/src/custom-component/de-video/Attr.vue
index f0df900754..617af317f3 100644
--- a/core/core-frontend/src/custom-component/de-video/Attr.vue
+++ b/core/core-frontend/src/custom-component/de-video/Attr.vue
@@ -3,7 +3,7 @@
     <CommonAttr :themes="themes" :element="curComponent">
       <el-collapse-item
         :effect="themes"
-        title="链接信息"
+        :title="t('visualization.link_info')"
         name="videoLinks"
         v-if="curComponent && curComponent.videoLinks && !mobileInPc"
       >
@@ -18,8 +18,11 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import CommonAttr from '@/custom-component/common/CommonAttr.vue'
 import { storeToRefs } from 'pinia'
 import VideoLinks from '@/custom-component/de-video/VideoLinks.vue'
+import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 const { curComponent, mobileInPc } = storeToRefs(dvMainStore)
+const { t } = useI18n()
+
 withDefaults(
   defineProps<{
     themes?: EditorTheme
diff --git a/core/core-frontend/src/custom-component/picture-group/PictureGroupUploadAttr.vue b/core/core-frontend/src/custom-component/picture-group/PictureGroupUploadAttr.vue
index 2bed7b5107..b698f20922 100644
--- a/core/core-frontend/src/custom-component/picture-group/PictureGroupUploadAttr.vue
+++ b/core/core-frontend/src/custom-component/picture-group/PictureGroupUploadAttr.vue
@@ -116,7 +116,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <el-collapse-item :effect="themes" title="图片组" name="picture">
+  <el-collapse-item :effect="themes" :title="t('visualization.pic_group')" name="picture">
     <el-row class="img-area" :class="`img-area_${themes}`">
       <el-col style="width: 130px !important">
         <el-upload
@@ -141,14 +141,14 @@ onBeforeUnmount(() => {
     </el-row>
     <el-row>
       <span style="margin-top: 2px" class="image-hint" :class="`image-hint_${themes}`">
-        支持JPG、PNG、GIF、SVG
+        {{ t('visualization.pic_upload_tips2') }}
       </span>
     </el-row>
     <el-row class="pic-adaptor">
       <el-form-item
         v-if="curComponent.style.adaptation"
         class="form-item form-item-custom"
-        label="图片适应方式"
+        :label="t('visualization.pic_adaptor_type')"
         size="small"
         :effect="themes"
       >
@@ -158,9 +158,15 @@ onBeforeUnmount(() => {
           @change="onStyleChange"
           :effect="themes"
         >
-          <el-radio label="adaptation" :effect="themes">适应组件</el-radio>
-          <el-radio label="original" :effect="themes">原始尺寸</el-radio>
-          <el-radio label="equiratio" :effect="themes">等比适应</el-radio>
+          <el-radio label="adaptation" :effect="themes">{{
+            t('visualization.pic_adaptation')
+          }}</el-radio>
+          <el-radio label="original" :effect="themes">{{
+            t('visualization.pic_original')
+          }}</el-radio>
+          <el-radio label="equiratio" :effect="themes">{{
+            t('visualization.pic_equiratio')
+          }}</el-radio>
         </el-radio-group>
       </el-form-item>
     </el-row>
diff --git a/core/core-frontend/src/custom-component/picture/Attr.vue b/core/core-frontend/src/custom-component/picture/Attr.vue
index e7f6e50c8d..10ee5c9f12 100644
--- a/core/core-frontend/src/custom-component/picture/Attr.vue
+++ b/core/core-frontend/src/custom-component/picture/Attr.vue
@@ -124,7 +124,12 @@ onBeforeUnmount(() => {
       :background-color-picker-width="197"
       :background-border-select-width="197"
     >
-      <el-collapse-item :effect="themes" title="图片" name="picture" v-show="!mobileInPc">
+      <el-collapse-item
+        :effect="themes"
+        :title="t('visualization.picture')"
+        name="picture"
+        v-show="!mobileInPc"
+      >
         <el-row class="img-area" :class="`img-area_${themes}`">
           <el-col style="width: 130px !important">
             <el-upload
@@ -152,7 +157,7 @@ onBeforeUnmount(() => {
             class="image-hint"
             :class="`image-hint_${themes}`"
           >
-            支持JPG、PNG、GIF、SVG
+            {{ t('visualization.pic_upload_tips2') }}
           </span>
 
           <el-button
@@ -162,14 +167,14 @@ onBeforeUnmount(() => {
             text
             @click="goFile"
           >
-            重新上传
+            {{ t('visualization.re_upload') }}
           </el-button>
         </el-row>
         <el-row class="pic-adaptor">
           <el-form-item
             v-if="curComponent.style.adaptation"
             class="form-item"
-            label="图片适应方式"
+            :label="t('visualization.pic_adaptor_type')"
             size="small"
             :effect="themes"
             :class="'form-item-' + themes"
@@ -180,9 +185,15 @@ onBeforeUnmount(() => {
               @change="onStyleChange"
               :effect="themes"
             >
-              <el-radio label="adaptation" :effect="themes">适应组件</el-radio>
-              <el-radio label="original" :effect="themes">原始尺寸</el-radio>
-              <el-radio label="equiratio" :effect="themes">等比适应</el-radio>
+              <el-radio label="adaptation" :effect="themes">{{
+                t('visualization.pic_adaptation')
+              }}</el-radio>
+              <el-radio label="original" :effect="themes">{{
+                t('visualization.pic_original')
+              }}</el-radio>
+              <el-radio label="equiratio" :effect="themes">{{
+                t('visualization.pic_equiratio')
+              }}</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-row>
diff --git a/core/core-frontend/src/custom-component/picture/Component.vue b/core/core-frontend/src/custom-component/picture/Component.vue
index 9e56fde491..6ae7ee2c19 100644
--- a/core/core-frontend/src/custom-component/picture/Component.vue
+++ b/core/core-frontend/src/custom-component/picture/Component.vue
@@ -8,8 +8,12 @@
     />
     <div v-else class="pic-upload">
       <span
-        ><el-button @click="uploadImg" text style="font-family: inherit; color: #646a73" icon="Plus"
-          >请上传图片...</el-button
+        ><el-button
+          @click="uploadImg"
+          text
+          style="font-family: inherit; color: #646a73"
+          icon="Plus"
+          >{{ t('visualization.pic_upload_tips') }}</el-button
         ></span
       >
     </div>
@@ -20,8 +24,8 @@
 import { CSSProperties, computed, nextTick, toRefs } from 'vue'
 import { imgUrlTrans } from '@/utils/imgUtils'
 import eventBus from '@/utils/eventBus'
-import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-const dvMainStore = dvMainStoreWithOut()
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 
 const props = defineProps({
   propValue: {
diff --git a/core/core-frontend/src/custom-component/pop-area/Component.vue b/core/core-frontend/src/custom-component/pop-area/Component.vue
index 13313ca504..885838b985 100644
--- a/core/core-frontend/src/custom-component/pop-area/Component.vue
+++ b/core/core-frontend/src/custom-component/pop-area/Component.vue
@@ -33,7 +33,7 @@
         @dragover="handleDragOver"
         @dragleave="handleDragLeave"
       >
-        <span>可点击或拖拽查询组件到此位置，点击预览可查看弹窗区</span>
+        <span>{{ t('visualization.pop_area_tips') }}</span>
       </div>
     </div>
   </div>
@@ -51,9 +51,12 @@ import eventBus from '@/utils/eventBus'
 import ComponentWrapper from '@/components/data-visualization/canvas/ComponentWrapper.vue'
 import { ElMessage } from 'element-plus-secondary'
 import { storeToRefs } from 'pinia'
+import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const areaActive = ref(false)
+const { t } = useI18n()
+
 const props = defineProps({
   dvInfo: {
     type: Object,
diff --git a/core/core-frontend/src/locales/en.ts b/core/core-frontend/src/locales/en.ts
index bffff6860d..db6c6fe944 100644
--- a/core/core-frontend/src/locales/en.ts
+++ b/core/core-frontend/src/locales/en.ts
@@ -2743,6 +2743,108 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     column_name: 'Field name'
   },
   visualization: {
+    new: 'New',
+    new_folder: 'New Folder',
+    new_screen: 'New Data Screen',
+    new_dashboard: 'New Dashboard',
+    new_from_template: 'Create from Template',
+    folder: 'Folder',
+    copy: 'Copy',
+    move_to: 'Move to',
+    rename: 'Rename',
+    name: 'Name',
+    name_repeat: 'Name Repeated',
+    input_name_tips: 'Please enter the {0} name',
+    select_target_folder: 'Please select a target folder',
+    select_target_tips: 'Cannot select itself, please choose another folder',
+    input_tips: 'Please enter a name',
+    position: 'Position',
+    ds_group_name: 'Dataset Group Name',
+    ds_group_position: 'Dataset Group Position',
+    datasource_info: 'Datasource Information',
+    app_datasource: 'Application Datasource',
+    sys_datasource: 'System Datasource',
+    select_folder: 'Please select a folder',
+    belong_folder: 'Belonging Folder',
+    no_content: 'No related content found',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    select_ds_group_folder: 'Please select the dataset group folder',
+    app_no_datasource_tips: 'There are unconfigured data sources',
+    dataset: 'Dataset',
+    delete: 'Delete',
+    delete_success: 'Deleted Successfully',
+    save_success: 'Saved Successfully',
+    change_save_tips: 'The current changes are unsaved. Are you sure you want to exit?',
+    mobile_config: 'Mobile Configuration',
+    visualization_component: 'Visualization Component',
+    component_style: 'Component Style',
+    whole_style: 'Overall Style',
+    time_asc: 'Sort by Time Ascending',
+    time_desc: 'Sort by Time Descending',
+    name_asc: 'Sort by Name Ascending',
+    name_desc: 'Sort by Name Descending',
+    delete_tips: 'Deleting this will remove all resources under this folder. Proceed with caution.',
+    delete_warn: 'Are you sure you want to delete this {0}?',
+    save_app: 'Save Application',
+    base_info: 'Basic Information',
+    close: 'Close',
+    adapt_new_subject: 'Adapt to New Theme',
+    export_tips:
+      '{0} in the current dashboard is a template chart and cannot be exported. Please configure the dataset first!',
+    preview_select_tips: 'Please select a dashboard on the left',
+    have_none_resource: 'No Dashboard Available',
+    attribute: 'Attribute',
+    dashboard_configuration: 'Dashboard Configuration',
+    batch_style_set: 'Batch Style Settings',
+    pic_import_tips: 'Supports JPG, PNG, GIF, SVG, and size not exceeding {0}',
+    pic_size_error: 'Image size does not meet requirements',
+    re_upload: 'Re-upload',
+    screen_configuration: 'Screen Configuration',
+    mobile_ios_tips: 'May not display on iOS',
+    layer_management: 'Layer Management',
+    hold_canvas_tips: 'Hold spacebar to drag the canvas',
+    keep_subject: 'Keep Original Style',
+    select_component: 'Select Component',
+    show_selected_only: 'Show Selected Only',
+    no_available_component: 'No Available Components',
+    no_selected_component: 'No Selected Component',
+    no_params_tips: 'Parameters cannot be empty',
+    cancel_store: 'Cancel Favorite',
+    creator: 'Creator',
+    fullscreen: 'Fullscreen',
+    edit: 'Edit',
+    refresh_data: 'Refresh Data',
+    export_as: 'Export as',
+    select_screen_tips: 'Please select a data screen on the left',
+    no_screen: 'No Data Screen Available',
+    query: 'Query',
+    carousel: 'Carousel',
+    carousel_time: 'Carousel Time (seconds)',
+    carousel_tips: 'Carousel will take effect after exiting edit mode',
+    carousel_tips2: 'Conditional styles disable carousel',
+    background: 'Background',
+    tab_title: 'Tab Title',
+    style: 'Style',
+    event: 'Event',
+    board: 'Border',
+    color: 'Color',
+    board_width: 'Border Width',
+    board_radius: 'Border Radius',
+    enable_event_binding: 'Enable Event Binding',
+    event_binding_tips:
+      'Event binding takes effect after exiting edit mode. For rich text, enabling binding will disable internal click events.',
+    input_url_tips: 'Please enter the redirect URL',
+    edit_title: 'Edit Title',
+    custom_sort: 'Custom Sort',
+    show_data: 'Show Date',
+    show_time: 'Show Time',
+    link_info: 'Link Information',
+    pic_upload_tips: 'Please upload an image...',
+    pic_group: 'Image Group',
+    pic_upload_tips2: 'Supports JPG, PNG, GIF, SVG',
+    pic_adaptor_type: 'Image Adaptation Mode',
+    pop_area_tips: 'Click or drag a query component here. Click preview to see the pop-up area.',
     out_params_no_select: 'External parameters do not need to be selected',
     filter_no_select: 'Filter components do not need to be selected',
     forbidden_copy: 'Current components are not allowed to be copied',
diff --git a/core/core-frontend/src/locales/tw.ts b/core/core-frontend/src/locales/tw.ts
index 88d20438c6..d0852ad9de 100644
--- a/core/core-frontend/src/locales/tw.ts
+++ b/core/core-frontend/src/locales/tw.ts
@@ -2673,6 +2673,106 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    new: '新建',
+    new_folder: '新建文件夾',
+    new_screen: '新建數據大屏',
+    new_dashboard: '新建儀表板',
+    new_from_template: '從模板新建',
+    folder: '文件夾',
+    copy: '複製',
+    move_to: '移動到',
+    rename: '重命名',
+    name: '名稱',
+    name_repeat: '名稱重複',
+    input_name_tips: '請輸入{0}名稱',
+    select_target_folder: '請選擇目標文件夾',
+    select_target_tips: '不能選擇自身，請選擇其他文件夾',
+    input_tips: '請輸入名稱',
+    position: '所在位置',
+    ds_group_name: '數據集分組名稱',
+    ds_group_position: '數據集分組位置',
+    datasource_info: '數據源信息',
+    app_datasource: '應用數據源',
+    sys_datasource: '系統數據源',
+    select_folder: '請選擇所屬文件夾',
+    belong_folder: '所屬文件夾',
+    no_content: '沒有找到相關內容',
+    confirm: '確認',
+    cancel: '取消',
+    select_ds_group_folder: '請選擇數據集分組所屬文件夾',
+    app_no_datasource_tips: '存在未配置的數據源',
+    dataset: '數據集',
+    delete: '刪除',
+    delete_success: '刪除成功',
+    save_success: '保存成功',
+    change_save_tips: '當前的更改尚未保存，確定退出嗎？',
+    mobile_config: '移動端配置',
+    visualization_component: '可視化組件',
+    component_style: '組件樣式',
+    whole_style: '整體樣式',
+    time_asc: '按時間升序',
+    time_desc: '按時間降序',
+    name_asc: '按名稱升序',
+    name_desc: '按名稱降序',
+    delete_tips: '刪除後，此文件夾下的所有資源都會被刪除，請謹慎操作。',
+    delete_warn: '確定刪除該{0}嗎？',
+    save_app: '保存應用',
+    base_info: '基本信息',
+    close: '關閉',
+    adapt_new_subject: '適應新主題',
+    export_tips: '當前儀表板中{0}屬於模板圖表，無法導出，請先設置數據集！',
+    preview_select_tips: '請在左側選擇儀表板',
+    have_none_resource: '暫無儀表板',
+    attribute: '屬性',
+    dashboard_configuration: '儀表板配置',
+    batch_style_set: '批量設置樣式',
+    pic_import_tips: '支持JPG、PNG、GIF、SVG，大小不超過 {0}',
+    pic_size_error: '圖片大小不符合',
+    re_upload: '重新上傳',
+    screen_configuration: '儀表板配置',
+    mobile_ios_tips: 'IOS可能無法顯示',
+    layer_management: '圖層管理',
+    hold_canvas_tips: '按住空格可拖動畫布',
+    keep_subject: '保持源樣式',
+    select_component: '選擇組件',
+    show_selected_only: '選擇組件',
+    no_available_component: '當前沒有可用的組件',
+    no_selected_component: '當前選擇的組件',
+    no_params_tips: '參數不能為空',
+    cancel_store: '取消收藏',
+    creator: '創建人',
+    fullscreen: '全屏',
+    edit: '編輯',
+    refresh_data: '刷新數據',
+    export_as: '導出為',
+    select_screen_tips: '請在左側選擇數據大屏',
+    no_screen: '暫無數據大屏',
+    query: '查詢',
+    carousel: '輪播',
+    carousel_time: '輪播時間（秒）',
+    carousel_tips: '輪播退出編輯模式才可生效',
+    carousel_tips2: '啟用條件樣式後，輪播失效',
+    background: '背景',
+    tab_title: 'Tab標籤',
+    style: '樣式',
+    event: '事件',
+    board: '邊框',
+    color: '顏色',
+    board_width: '線寬',
+    board_radius: '圓角',
+    enable_event_binding: '開啟事件綁定',
+    event_binding_tips: '事件綁定需退出編輯模式後生效，富文本開啟綁定事件則內部點擊事件失效',
+    input_url_tips: '請輸入跳轉地址',
+    edit_title: '編輯標題',
+    custom_sort: '自定義排序',
+    show_data: '顯示日期',
+    show_time: '顯示時間',
+    link_info: '鏈接信息',
+    pic_upload_tips: '請上傳圖片...',
+    pic_group: '圖片組',
+    pic_upload_tips2: '支持JPG、PNG、GIF、SVG',
+    pic_adaptor_type: '圖片適應方式',
+    pop_area_tips: '可點擊或拖拽查詢組件到此位置，點擊預覽可查看彈窗區',
     out_params_no_select: '外部參數無需選擇',
     filter_no_select: '過濾元件無需選擇',
     forbidden_copy: '目前元件不允許複製',
diff --git a/core/core-frontend/src/locales/zh-CN.ts b/core/core-frontend/src/locales/zh-CN.ts
index c2beecc97a..8c144350b8 100644
--- a/core/core-frontend/src/locales/zh-CN.ts
+++ b/core/core-frontend/src/locales/zh-CN.ts
@@ -87,96 +87,6 @@ export default {
     mobile: '移动端',
     client: '客户端'
   },
-  template_manage: {
-    name_already_exists_type: '分类名称已存在',
-    the_same_category: '同一分类下，该模板名称已存在',
-    name: '模板管理',
-    rename: '重命名',
-    edit_template: '编辑模板',
-    import_template: '导入模板',
-    template_name: '模板名称',
-    keywords: '搜索关键字',
-    catalog_name: '分类名称',
-    search_result: '的搜索结果',
-    search_result_unit: '个',
-    selected_count: '已选 {0} 项',
-    select_all_count: '全选 {0} 项',
-    add_catalog: '添加分类',
-    edit_catalog: '修改分类',
-    select_catalog: '选择分类',
-    no_selectable_catalog: '暂无可选分类',
-    please_select_catalog: '请选择分类',
-    no_template: '暂无模板',
-    not_found: '没有找到相关模板',
-    delete_failed_hint: '无法删除分类',
-    delete_failed_tip: '请先移除该分类下所有模板再进行删除分类操作',
-    delete_failed_confirm: '知道了',
-    delete_hint: '确定删除该模板吗?',
-    delete_batch_hint: '确定删除{0}个模板吗？',
-    add_success: '添加成功',
-    edit_success: '修改成功',
-    import_success: '导入成功',
-    cover_success: '覆盖成功',
-    cover_exists_hint: '当前分类存在相同模板名称，是否覆盖？',
-    template_size_hint: '模板大小需小于35MB',
-    hint: '提示',
-    relevant_content_found: '没有找到相关内容',
-    no_catalog: '当前无分类',
-    delete_catalog_hint: '确定删除该分类吗？',
-    delete_catalog_tip: '删除后不可恢复，是否继续？',
-    illegal_name_hint: '不合法命名，请更换！',
-    exists_name_hint: '当前名称已在模版管理中存在，请修改',
-    get_download_link_hint: '未获取模板下载链接请联系模板市场官方',
-    search_result_count: '的搜索结果是 {0} 个',
-    template_center: '模版中心',
-    preview: '预览'
-  },
-  work_branch: {
-    back_to_work_branch: '返回工作台',
-    recommended_dashboard: '推荐仪表板',
-    template_market_official: '未获取模板下载链接请联系模板市场官方',
-    create_quickly: '快速创建',
-    permission_to_create: '缺少创建权限',
-    new_using_template: '使用模板新建',
-    template_center: '模板中心',
-    view_all: '查看全部',
-    relevant_templates_found: '没有找到相关模板',
-    last_edited_by: '最近编辑人',
-    last_edit_time: '最近编辑时间',
-    big_data_screen: '数据大屏',
-    big_screen: '大屏',
-    dashboard: '仪表板',
-    data_set: '数据集',
-    data_source: '数据源',
-    recently_used: '最近使用',
-    my_collection: '我的收藏',
-    relevant_content_found: '没有找到相关内容',
-    no_content_yet: '暂无内容',
-    no_favorites_yet: '暂无收藏',
-    permission_denied: '没有权限',
-    search_keyword: '搜索关键词',
-    new_page_preview: '新页面预览',
-    cancel_favorites: '取消收藏',
-    open_dataset: '打开数据集',
-    administrator_for_authorization: '没有任何业务菜单权限，请联系管理员授权',
-    public_link_share: '公共链接分享',
-    share_time_limit: '必须大于当前时间',
-    ticket_setting: 'Ticket 设置',
-    cannot_share_link: '已经开启全局禁用分享，分享功能暂不可用，请联系管理员！',
-    open_link_hint: '开启后，用户可以通过该链接访问',
-    uuid_checker: '仅支持8-16位(字母数字)，请重新输入！',
-    error_password_hint: '密码格式错误，请重新填写！',
-    error_link_hint: '链接格式错误，请重新填写！',
-    password_null_hint: '密码不能为空，请重新输入！',
-    password_hint: "密码必须是包含数字、字母、特殊字符[!{'@'}#$%^&*()_+]的4-10位字符串",
-    max_ticket_count: '最多支持创建5个Ticket',
-    last: '上一个',
-    next: '下一个',
-    recommend: '推荐',
-    recent: '最近使用',
-    all_types: '全部类型',
-    all_source: '全部来源'
-  },
   data_set: {
     to_nth_digits: '保留第M至N位',
     the_column_permissions: '确定删除列权限吗?',
@@ -2675,6 +2585,242 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    new: '新建',
+    new_folder: '新建文件夹',
+    new_screen: '新建数据大屏',
+    new_dashboard: '新建仪表板',
+    new_from_template: '从模板新建',
+    folder: '文件夹',
+    copy: '复制',
+    move_to: '移动到',
+    rename: '重命名',
+    name: '名称',
+    name_repeat: '名称重复',
+    input_name_tips: '请输入{0}名称',
+    select_target_folder: '请选择目标文件夹',
+    select_target_tips: '不能选择自身，请选择其他文件夹',
+    input_tips: '请输入名称',
+    position: '所在位置',
+    ds_group_name: '数据集分组名称',
+    ds_group_position: '数据集分组位置',
+    datasource_info: '数据源信息',
+    app_datasource: '应用数据源',
+    sys_datasource: '系统数据源',
+    select_folder: '请选择所属文件夹',
+    belong_folder: '所属文件夹',
+    no_content: '没有找到相关内容',
+    confirm: '确认',
+    cancel: '取消',
+    select_ds_group_folder: '请选择数据集分组所属文件夹',
+    app_no_datasource_tips: '存在未配置的数据源',
+    dataset: '数据集',
+    delete: '删除',
+    delete_success: '删除成功',
+    save_success: '保存成功',
+    change_save_tips: '当前的更改尚未保存，确定退出吗？',
+    mobile_config: '移动端配置',
+    visualization_component: '可视化组件',
+    component_style: '组件样式',
+    whole_style: '整体样式',
+    time_asc: '按时间升序',
+    time_desc: '按时间降序',
+    name_asc: '按名称升序',
+    name_desc: '按名称降序',
+    delete_tips: '删除后，此文件夹下的所有资源都会被删除，请谨慎操作。',
+    delete_warn: '确定删除该{0}吗？',
+    save_app: '保存应用',
+    base_info: '基本信息',
+    close: '关闭',
+    adapt_new_subject: '适应新主题',
+    export_tips: '当前仪表板中{0}属于模版图表，无法导出，请先设置数据集！',
+    preview_select_tips: '请在左侧选择仪表板',
+    have_none_resource: '暂无仪表板',
+    attribute: '属性',
+    dashboard_configuration: '仪表板配置',
+    batch_style_set: '批量设置样式',
+    pic_import_tips: '支持JPG、PNG、GIF、SVG，大小不超过 {0}',
+    pic_size_error: '图片大小不符合',
+    re_upload: '重新上传',
+    screen_configuration: '仪表板配置',
+    mobile_ios_tips: 'IOS可能无法显示',
+    layer_management: '图层管理',
+    hold_canvas_tips: '按住空格可拖动画布',
+    keep_subject: '保持源样式',
+    select_component: '选择组件',
+    show_selected_only: '选择组件',
+    no_available_component: '当前没有可用的组件',
+    no_selected_component: '当前选择的组件',
+    no_params_tips: '参数不能为空',
+    cancel_store: '取消收藏',
+    creator: '创建人',
+    fullscreen: '全屏',
+    edit: '编辑',
+    refresh_data: '刷新数据',
+    export_as: '导出为',
+    select_screen_tips: '请在左侧选择数据大屏',
+    no_screen: '暂无数据大屏',
+    query: '查询',
+    carousel: '轮播',
+    carousel_time: '轮播时间（秒）',
+    carousel_tips: '轮播退出编辑模式才开生效',
+    carousel_tips2: '启用条件样式后，轮播失效',
+    background: '背景',
+    tab_title: 'Tab标签',
+    style: '样式',
+    event: '事件',
+    board: '边框',
+    color: '颜色',
+    board_width: '线宽',
+    board_radius: '圆角',
+    enable_event_binding: '开启事件绑定',
+    event_binding_tips: '事件绑定需退出编辑模式后生效,富文本开启绑定事件则内部点击事件失效',
+    input_url_tips: '请输入跳转地址',
+    edit_title: '编辑标题',
+    custom_sort: '自定义排序',
+    show_data: '显示日期',
+    show_time: '显示时间',
+    link_info: '链接信息',
+    pic_upload_tips: '请上传图片...',
+    pic_group: '图片组',
+    pic_upload_tips2: '支持JPG、PNG、GIF、SVG',
+    pic_adaptor_type: '图片适应方式',
+    pop_area_tips: '可点击或拖拽查询组件到此位置，点击预览可查看弹窗区',
+    view: '图表',
+    query_component: '查询组件',
+    media: '媒体',
+    more: '更多',
+    source_material: '素材',
+    text_html: '文本',
+    external_parameter_settings: '外部参数设置',
+    screen_config: '大屏配置',
+    screen_adaptor: '缩放方式',
+    screen_adaptor_width_first: '宽度优先',
+    screen_adaptor_height_first: '高度优先',
+    screen_adaptor_full: '铺满全屏',
+    screen_adaptor_keep: '不缩放',
+    effective_during_preview: '预览时生效',
+    base_config: '基础配置',
+    color_config: '配色',
+    refresh_config: '刷新配置',
+    advanced_style_settings: '高级样式设置',
+    size: '尺寸',
+    font_family_select: '仪表板字体选择',
+    screen_font_family_select: '数据大屏字体选择',
+    button_tips: '显示放大、导出等悬浮按钮',
+    display_auxiliary_grid: '显示辅助网格',
+    show_pop_button: '显示弹窗区查询按钮',
+    show_zoom_button: '显示放大、导出等悬浮按钮',
+    keep_ratio: '保持宽高比',
+    rotation_3d: '3D旋转',
+    keep_size: '调整大小保持内部组件尺寸',
+    no_save_tips: '存在未保存的{0}',
+    no_save_tips2: '存在未保存的修改，立即恢复？',
+    locate_tips: '定位到中心点',
+    new_tab: '新建Tab',
+    pop_area: '弹窗区域',
+    refresh_view: '刷新图表',
+    view_group: '组合',
+    video: '视频',
+    stream_media: '流媒体',
+    web: '网页',
+    time_component: '时间组件',
+    picture: '图片',
+    icon: '图标',
+    rect_shape: '矩形',
+    circle_shape: '圆形',
+    triangle: '三角形',
+    tabs: '选项卡',
+    scroll_text: '跑马灯',
+    component_input_tips: '双击编辑文字',
+    screen_area: '大屏区域',
+    rich_text: '富文本',
+    date_time: '日期时间',
+    board_name: '边框{0}',
+    graphic: '图形',
+    selected_tips: '已选 {0} 项',
+    params_list: '参数列表',
+    params: '参数',
+    no_setting_params_name_tip: '未配置参数名',
+    select_params_connect_component: '选择参数关联组件',
+    connection_condition: '关联条件',
+    connection_params_fields: '关联字段或参数',
+    fields: '字段',
+    select_all: '全选',
+    select_params_connect_view: '选择关联的图表',
+    setting_params_tips: '请配置参数',
+    setting_params: '参数配置',
+    required: '必填',
+    default_value: '默认值',
+    default_value_tips1: '请使用JSON数组格式 示例:',
+    default_value_tips2: '单值 ["name1"], 多值 ["name1","name2"]',
+    default_value_tips3: '请输入参数,如:["name1"]',
+    time_year_widget: '年份过滤组件',
+    time_month_widget: '年月过滤组件',
+    time_date_widget: '日期过滤组件',
+    time_date_range_widget: '日期范围过滤组件',
+    text_select_widget: '文本下拉过滤组件',
+    text_select_grid_widget: '文本列表过滤组件',
+    text_input_widget: '文本搜索过滤组件',
+    text_select_tree_widget: '下拉树过滤组件',
+    number_select_widget: '数字下拉过滤组件',
+    number_select_grid_widget: '数字列表过滤组件',
+    number_range_widget: '数值区间过滤组件',
+    format_error: '格式错误',
+    params_setting_check_message: '参数{0}默认值格式不正确！',
+    params_setting_check_message_tips: '存在未配置的参数名或者参数名称重复！',
+    already_setting: '已设置',
+    bubble_dynamic_effect: '气泡动效',
+    save_page_tips: '请先保存当前页面',
+    selected_view: '已选图表',
+    used_dataset: '所用数据集',
+    to_select_view: '选择图表',
+    show_selected_only: '仅看已选',
+    same_dataset: '同数据集',
+    diff_dataset: '不同数据集',
+    no_available_view: '暂无可用图表',
+    linkage_setting_tips1: '配置图表间的字段关联关系',
+    current_chart_source_field: '当前图表源字段',
+    add_linkage_dependency_fields: '追加联动依赖字段',
+    select_linkage_tips: '请先勾选需要联动的图表',
+    linkage_option_tips1: '如果联动维度已配置钻取，点击维度将',
+    linkage_option1: '弹出浮框，由用户选择联动或者下钻',
+    linkage_option2: '同时触发联动和下钻',
+    window_size: '窗口大小',
+    window_size_large: '大',
+    window_size_middle: '中',
+    window_size_small: '小',
+    target: '目标',
+    linkage_view: '联动图表',
+    with_filter_params: '携带查询条件',
+    source_field: '源字段',
+    source_filter: '源条件',
+    link_target_tips1: '目标仪表板无外部参数，因此无法携带条件查询，如有需要，',
+    link_target_tips2: '目标仪表板无外部参数，因此无法携带条件查询，如有需要，',
+    link_outer_params: '联动外部参数',
+    indicator_name: '指标名称',
+    component_size: '大小',
+    component_annotation: '标注',
+    alignment: '对齐',
+    left_justifying: '左对齐',
+    right_justifying: '右对齐',
+    top_justifying: '上对齐',
+    bottom_justifying: '下对齐',
+    horizontally_centered: '水平居中',
+    vertically_centered: '垂直居中',
+    cancel_group: '取消组合',
+    move_to_screen_show: '移动到大屏显示区',
+    move_to_pop_area: '移动到大屏弹窗区',
+    sort: '排序',
+    hidden: '隐藏',
+    cancel_hidden: '取消隐藏',
+    template_view_tips: '当前为模板图表，请更换数据集...',
+    download: '下载',
+    refresh: '刷新',
+    head_font_color: '头部字体颜色',
+    head_font_active_color: '激活字体颜色',
+    background_color: '背景色',
+    active_font_size: '激活字体大小',
+    scroll_speed: '滚动速度',
     out_params_no_select: '外部参数无需选择',
     filter_no_select: '过滤组件无需选择',
     forbidden_copy: '当前组件不允许复制',
@@ -2685,7 +2831,6 @@ export default {
     unpublished_tips: '取消发布后，该仪表板不能被查看。确定要取消发布？',
     position_adjust_component: '位置调整',
     active_font_size: '选中字体大小',
-    carousel: '轮播',
     enable_carousel: '启用轮播',
     switch_time: '切换时间',
     position_adjust: '位置',
@@ -2697,7 +2842,6 @@ export default {
     down: '下载',
     mobile_style_setting: '样式设置',
     mobile_style_setting_tips: '自定义移动端背景',
-    board: '边框',
     text: '文字',
     board_background: '背景',
     title_color: '标题颜色',
@@ -2733,7 +2877,6 @@ export default {
     market_network_tips:
       '查看模板市场模板需要服务器与模板市场(https://templates.dataease.cn)连通，请检查网络...',
     enter_name_tips: '请输入仪表板名称',
-    name: '名称',
     apply_template: '应用模板',
     style_template: '样式模板',
     all_type: '全部分类',
@@ -2760,7 +2903,6 @@ export default {
     card_color_matching: '卡片配色',
     table_color_matching: '表格配色',
     background_color: '背景颜色',
-    more: '更多',
     level: '层级',
     enlarge: '放大',
     panel_style: '仪表板样式',
@@ -2779,8 +2921,6 @@ export default {
     json_params_error: '第三方参数解析失败，请检查参数格式是否正确',
     inner_padding: '内边距',
     board_radio: '圆角',
-    background: '背景',
-    component_style: '组件样式',
     web_set_tips: '部分网站可能设置不允许嵌入而无法显示',
     repeat_params: '存在名称重复的参数',
     enable_outer_param_set: '启用外部参数设置',
@@ -2827,22 +2967,14 @@ export default {
     panel_list: '仪表板',
     groupAdd: '新建目录',
     panelAdd: '新建仪表板',
-    delete: '删除',
-    move_to: '移动到',
-    rename: '重命名',
     import: '导入模板',
     tips: '提示',
     confirm_delete: '确认删除',
-    delete_success: '删除成功',
-    confirm: '确认',
-    cancel: '取消',
     search: '搜索',
     back: '返回',
-    view: '图表',
     module: '组件',
     filter_module: '查询组件',
     select_by_module: '按组件选择',
-    edit: '编辑',
     sys_template: '系统模板',
     user_template: '用户模板',
     add_category: '添加分类',
@@ -2888,7 +3020,6 @@ export default {
     custom_scope: '控制范围',
     binding_parameters: '参数',
     multiple_choice: '多选',
-    show_time: '显示时间',
     single_choice: '单选',
     field: '字段',
     unshared_people: '未分享人员',
@@ -2896,20 +3027,19 @@ export default {
     error_data: '获取数据出错，请联系管理员',
     canvas_size: '画布大小',
     canvas_scale: '画布比例',
-    style: '样式',
     clean_canvas: '清空画布',
     insert_picture: '插入图片',
     redo: '重做',
     undo: '撤销',
     panelNull: '这是个空的仪表板，可以通过编辑来丰富内容',
-    copy: '复制',
     paste: '粘贴',
     cut: '剪切',
     lock: '锁定',
-    topComponent: '置顶',
-    bottomComponent: '置底',
-    upComponent: '上移',
-    downComponent: '下移',
+    unlock: '解锁',
+    top_component: '置于顶层',
+    bottom_component: '置于底层',
+    up_component: '上移一层',
+    down_component: '下移一层',
     linkage_setting: '联动设置',
     add_tab: '新增Tab',
     open_aided_design: '打开组件辅助设计',
@@ -2921,20 +3051,20 @@ export default {
     top: 'y 坐标',
     height: '高',
     width: '宽',
-    color: '颜色',
     backgroundColor: '背景色',
     borderStyle: '边框风格',
     borderWidth: '边框宽度',
     borderColor: '边框颜色',
     borderRadius: '圆角',
-    fontSize: '字体大小',
+    font_size: '字体大小',
     fontWeight: '字体粗细',
     lineHeight: '行高',
-    letterSpacing: '字间距',
+    letter_spacing: '字间距',
     padding: '内间距',
     margin: '外间距',
     textAlign: '左右对齐',
     opacity: '不透明度',
+    background_opacity: '背景模糊',
     verticalAlign: '上下对齐',
     text_align_left: '左对齐',
     text_align_center: '左右居中',
@@ -2944,7 +3074,6 @@ export default {
     vertical_align_bottom: '下对齐',
     border_style_solid: '实线',
     border_style_dashed: '虚线',
-    select_component: '请选择组件',
     other_module: '其他',
     content: '内容',
     default_panel_name: '默认仪表板名称',
@@ -3044,6 +3173,98 @@ export default {
     export_time: '导出时间',
     you_can_type_here: '可以在这里输入其他内容'
   },
+  template_manage: {
+    name_already_exists_type: '分类名称已存在',
+    the_same_category: '同一分类下，该模板名称已存在',
+    name: '模板管理',
+    rename: '重命名',
+    edit_template: '编辑模板',
+    import_template: '导入模板',
+    template_name: '模板名称',
+    keywords: '搜索关键字',
+    catalog_name: '分类名称',
+    search_result: '的搜索结果',
+    search_result_unit: '个',
+    selected_count: '已选 {0} 项',
+    select_all_count: '全选 {0} 项',
+    add_catalog: '添加分类',
+    edit_catalog: '修改分类',
+    select_catalog: '选择分类',
+    no_selectable_catalog: '暂无可选分类',
+    please_select_catalog: '请选择分类',
+    no_template: '暂无模板',
+    not_found: '没有找到相关模板',
+    delete_failed_hint: '无法删除分类',
+    delete_failed_tip: '请先移除该分类下所有模板再进行删除分类操作',
+    delete_failed_confirm: '知道了',
+    delete_hint: '确定删除该模板吗?',
+    delete_batch_hint: '确定删除{0}个模板吗？',
+    add_success: '添加成功',
+    edit_success: '修改成功',
+    import_success: '导入成功',
+    cover_success: '覆盖成功',
+    cover_exists_hint: '当前分类存在相同模板名称，是否覆盖？',
+    template_size_hint: '模板大小需小于35MB',
+    hint: '提示',
+    relevant_content_found: '没有找到相关内容',
+    no_catalog: '当前无分类',
+    delete_catalog_hint: '确定删除该分类吗？',
+    delete_catalog_tip: '删除后不可恢复，是否继续？',
+    illegal_name_hint: '不合法命名，请更换！',
+    exists_name_hint: '当前名称已在模版管理中存在，请修改',
+    get_download_link_hint: '未获取模板下载链接请联系模板市场官方',
+    search_result_count: '的搜索结果是 {0} 个',
+    template_center: '模版中心',
+    preview: '预览'
+  },
+  work_branch: {
+    new_empty: '空白新建',
+    new_folder: '新建文件夹',
+    back_to_work_branch: '返回工作台',
+    recommended_dashboard: '推荐仪表板',
+    template_market_official: '未获取模板下载链接请联系模板市场官方',
+    create_quickly: '快速创建',
+    permission_to_create: '缺少创建权限',
+    new_using_template: '使用模板新建',
+    template_center: '模板中心',
+    view_all: '查看全部',
+    relevant_templates_found: '没有找到相关模板',
+    last_edited_by: '最近编辑人',
+    last_edit_time: '最近编辑时间',
+    big_data_screen: '数据大屏',
+    big_screen: '大屏',
+    dashboard: '仪表板',
+    data_set: '数据集',
+    data_source: '数据源',
+    recently_used: '最近使用',
+    my_collection: '我的收藏',
+    relevant_content_found: '没有找到相关内容',
+    no_content_yet: '暂无内容',
+    no_favorites_yet: '暂无收藏',
+    permission_denied: '没有权限',
+    search_keyword: '搜索关键词',
+    new_page_preview: '新页面预览',
+    cancel_favorites: '取消收藏',
+    open_dataset: '打开数据集',
+    administrator_for_authorization: '没有任何业务菜单权限，请联系管理员授权',
+    public_link_share: '公共链接分享',
+    share_time_limit: '必须大于当前时间',
+    ticket_setting: 'Ticket 设置',
+    cannot_share_link: '已经开启全局禁用分享，分享功能暂不可用，请联系管理员！',
+    open_link_hint: '开启后，用户可以通过该链接访问',
+    uuid_checker: '仅支持8-16位(字母数字)，请重新输入！',
+    error_password_hint: '密码格式错误，请重新填写！',
+    error_link_hint: '链接格式错误，请重新填写！',
+    password_null_hint: '密码不能为空，请重新输入！',
+    password_hint: "密码必须是包含数字、字母、特殊字符[!{'@'}#$%^&*()_+]的4-10位字符串",
+    max_ticket_count: '最多支持创建5个Ticket',
+    last: '上一个',
+    next: '下一个',
+    recommend: '推荐',
+    recent: '最近使用',
+    all_types: '全部类型',
+    all_source: '全部来源'
+  },
   link_ticket: {
     require: '必选',
     back: '返回公共链接设置页面',
diff --git a/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue b/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
index a0bddde1ab..7dd2256b41 100644
--- a/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
+++ b/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
@@ -1,5 +1,7 @@
 <script lang="tsx" setup>
 import dvUpArrow from '@/assets/svg/dv-up-arrow.svg'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 </script>
 
 <template>
@@ -7,7 +9,9 @@ import dvUpArrow from '@/assets/svg/dv-up-arrow.svg'
     <Icon class-name="item-icon" name="dv-up-arrow"><dvUpArrow class="svg-icon item-icon" /></Icon>
     <div>
       <el-button style="opacity: 1 !important" type="warning" size="mini" round>
-        <span style="font-weight: bold; opacity: 1"> 当前为模板图表，请更换数据集...</span>
+        <span style="font-weight: bold; opacity: 1">{{
+          t('visualization.template_view_tips')
+        }}</span>
       </el-button>
     </div>
   </div>
diff --git a/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue b/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
index 3361cb378b..6148b9d127 100644
--- a/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
@@ -45,7 +45,9 @@ const orgCheck = ref(true)
 
 const datasetTree = ref<Tree[]>([])
 
-const sourceName = computed(() => (props.sourceType === 'datasource' ? '数据源' : '数据集'))
+const sourceName = computed(() =>
+  props.sourceType === 'datasource' ? t('visualization.datasource') : t('visualization.dataset')
+)
 
 const sortTypeChange = arr => {
   const sortType = wsCache.get('TreeSort-dataset') || 'time_desc'
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
index ac98da5158..464626a4f4 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
@@ -149,7 +149,7 @@ const showProperties = (prop: EditorProperty) => {
 
 const linkJumpSetOpen = () => {
   if (!dvInfo.value.id) {
-    ElMessage.warning('请先保存当前页面')
+    ElMessage.warning(t('visualization.save_page_tips'))
     return
   }
   //跳转设置需要先触发保存
@@ -159,7 +159,7 @@ const linkJumpSetOpen = () => {
 }
 const linkageSetOpen = () => {
   if (!dvInfo.value.id) {
-    ElMessage.warning('请先保存当前页面')
+    ElMessage.warning(t('visualization.save_page_tips'))
     return
   }
   //跳转设置需要先触发保存
@@ -328,16 +328,18 @@ const removeJumpSenior = () => {
             v-if="showProperties('linkage')"
             :themes="themes"
             name="linkage"
-            :title="'联动设置'"
+            :title="t('visualization.linkage_setting')"
             v-model="chart.linkageActive"
             @modelChange="linkageActiveChange"
           >
             <div class="inner-container">
-              <span class="label" :class="'label-' + props.themes">联动设置</span>
+              <span class="label" :class="'label-' + props.themes">{{
+                t('visualization.linkage_setting')
+              }}</span>
               <span class="right-btns">
                 <template v-if="seniorCounts.linkageCount > 0">
                   <span class="set-text-info" :class="{ 'set-text-info-dark': themes === 'dark' }">
-                    已设置
+                    {{ t('visualization.already_setting') }}
                   </span>
                   <button
                     :class="'label-' + props.themes"
@@ -377,16 +379,18 @@ const removeJumpSenior = () => {
             v-if="showProperties('jump-set') && !isDataEaseBi"
             :themes="themes"
             name="jumpSet"
-            :title="'跳转设置'"
+            :title="t('visualization.jump_set')"
             v-model="chart.jumpActive"
             @modelChange="linkJumpActiveChange"
           >
             <div class="inner-container">
-              <span class="label" :class="'label-' + props.themes">跳转设置</span>
+              <span class="label" :class="'label-' + props.themes">{{
+                t('visualization.jump_set')
+              }}</span>
               <span class="right-btns">
                 <template v-if="seniorCounts.jumpCount">
                   <span class="set-text-info" :class="{ 'set-text-info-dark': themes === 'dark' }">
-                    已设置
+                    {{ t('visualization.already_setting') }}
                   </span>
                   <button
                     :class="'label-' + props.themes"
@@ -424,7 +428,7 @@ const removeJumpSenior = () => {
           </collapse-switch-item>
           <collapse-switch-item
             :effect="themes"
-            title="气泡动效"
+            :title="t('visualization.bubble_dynamic_effect')"
             :change-model="chart.senior.bubbleCfg"
             v-if="showProperties('bubble-animate')"
             v-model="chart.senior.bubbleCfg.enable"
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
index 3d4aa62abf..4fe128cacc 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@@ -263,7 +263,7 @@ watch(
           <el-collapse-item
             :effect="themes"
             name="position"
-            :title="'位置'"
+            :title="t('visualization.position')"
             v-if="positionComponentShow"
           >
             <component-position :themes="themes" />
@@ -334,7 +334,7 @@ watch(
           <el-collapse-item
             :effect="themes"
             name="background"
-            title="背景"
+            :title="t('visualization.background')"
             v-if="showProperties('background-overall-component') && commonBackgroundPop"
           >
             <background-overall-common
@@ -349,7 +349,7 @@ watch(
             v-model="commonBorderPop.borderActive"
             @modelChange="val => onActiveChange(val)"
             :themes="themes"
-            :title="'边框'"
+            :title="t('visualization.board')"
             name="borderSetting"
             class="common-style-area"
           >
@@ -359,7 +359,12 @@ watch(
               @onStyleAttrChange="onStyleAttrChange"
             ></common-border-setting>
           </collapse-switch-item>
-          <el-collapse-item :effect="themes" name="events" title="事件" v-if="eventsShow">
+          <el-collapse-item
+            :effect="themes"
+            name="events"
+            :title="t('visualization.event')"
+            v-if="eventsShow"
+          >
             <common-event :themes="themes" :events-info="eventInfo"></common-event>
           </el-collapse-item>
           <el-collapse-item
@@ -384,7 +389,7 @@ watch(
             v-if="showProperties('indicator-name-selector')"
             :change-model="chart.customAttr.indicatorName"
             @modelChange="val => onIndicatorNameChange(val, 'show')"
-            title="指标名称"
+            :title="t('visualization.indicator_name')"
             name="indicator-name"
           >
             <indicator-name-selector
@@ -401,7 +406,7 @@ watch(
             :effect="themes"
             v-if="showProperties('misc-selector') && !chart.type.includes('mix')"
             name="size"
-            title="大小"
+            :title="t('visualization.component_size')"
           >
             <misc-selector
               :property-inner="propertyInnerAll['misc-selector']"
@@ -545,7 +550,7 @@ watch(
           <el-collapse-item
             :effect="themes"
             name="flowMapPointSelector"
-            title="标注"
+            :title="t('visualization.component_annotation')"
             v-if="showProperties('flow-map-point-selector')"
           >
             <flow-map-point-selector
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 284ae6d600..a6e20c17df 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -3237,7 +3237,7 @@ const deleteChartFieldItem = id => {
             <Expand v-else class="collapse-icon" />
           </el-icon>
           <div v-if="canvasCollapse.datasetAreaCollapse" class="collapse-title">
-            <span style="font-size: 14px">数据集</span>
+            <span style="font-size: 14px">{{ t('visualization.dataset') }}</span>
           </div>
           <el-container
             v-if="!canvasCollapse.datasetAreaCollapse"
@@ -3245,7 +3245,7 @@ const deleteChartFieldItem = id => {
             class="dataset-area view-panel-row"
           >
             <el-header class="editor-title">
-              <span style="font-size: 14px">数据集</span>
+              <span style="font-size: 14px">{{ t('visualization.dataset') }}</span>
             </el-header>
             <el-main class="dataset-main-top">
               <el-row class="dataset-select">
diff --git a/core/core-frontend/src/views/chart/components/editor/util/chart.ts b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
index 28d1f9a69e..dd01e913c8 100644
--- a/core/core-frontend/src/views/chart/components/editor/util/chart.ts
+++ b/core/core-frontend/src/views/chart/components/editor/util/chart.ts
@@ -1517,14 +1517,14 @@ export const CHART_TYPE_CONFIGS = [
         render: 'custom',
         category: 'quota',
         value: 'rich-text',
-        title: '富文本',
+        title: t('visualization.rich-text'),
         icon: 'rich-text'
       },
       {
         render: 'custom',
         category: 'quota',
         value: 'picture-group',
-        title: '图片组',
+        title: t('visualization.picture-group'),
         icon: 'picture-group'
       }
     ]
diff --git a/core/core-frontend/src/views/common/DeAppApply.vue b/core/core-frontend/src/views/common/DeAppApply.vue
index 3349ae7b36..19b8fb6fc6 100644
--- a/core/core-frontend/src/views/common/DeAppApply.vue
+++ b/core/core-frontend/src/views/common/DeAppApply.vue
@@ -1,6 +1,6 @@
 <template>
   <el-drawer
-    :title="'保存应用'"
+    :title="t('visualization.save_app')"
     v-model="state.appApplyDrawer"
     custom-class="de-app-drawer"
     :show-close="false"
@@ -19,12 +19,16 @@
         label-position="top"
       >
         <div class="de-row-rules" style="margin: 0 0 16px">
-          <span>基本信息</span>
+          <span>{{ t('visualization.base_info') }}</span>
         </div>
-        <el-form-item :label="dvPreName + '名称'" prop="name">
-          <el-input v-model="state.form.name" autocomplete="off" :placeholder="'请输入名称'" />
+        <el-form-item :label="dvPreName + t('visualization.name')" prop="name">
+          <el-input
+            v-model="state.form.name"
+            autocomplete="off"
+            :placeholder="t('visualization.input_tips')"
+          />
         </el-form-item>
-        <el-form-item :label="dvPreName + '所在位置'" prop="pid">
+        <el-form-item :label="dvPreName + t('visualization.position')" prop="pid">
           <el-tree-select
             style="width: 100%"
             @keydown.stop
@@ -47,14 +51,14 @@
             </template>
           </el-tree-select>
         </el-form-item>
-        <el-form-item :label="'数据集分组名称'" prop="datasetFolderName">
+        <el-form-item :label="t('visualization.ds_group_name')" prop="datasetFolderName">
           <el-input
             v-model="state.form.datasetFolderName"
             autocomplete="off"
-            :placeholder="'请输入名称'"
+            :placeholder="t('visualization.input_tips')"
           />
         </el-form-item>
-        <el-form-item label="数据集分组位置" prop="datasetFolderPid">
+        <el-form-item :label="t('visualization.ds_group_position')" prop="datasetFolderPid">
           <el-tree-select
             style="width: 100%"
             @keydown.stop
@@ -78,12 +82,13 @@
           </el-tree-select>
         </el-form-item>
         <div class="de-row-rules" style="margin: 0 0 16px">
-          <span>数据源信息</span>
+          <span>{{ t('visualization.datasource_info') }}</span>
         </div>
         <el-row class="datasource-link">
           <el-row class="head">
-            <el-col :span="11">应用数据源</el-col><el-col :span="2"></el-col
-            ><el-col :span="11">系统数据源</el-col>
+            <el-col :span="11">{{ t('visualization.app_datasource') }}</el-col
+            ><el-col :span="2"></el-col
+            ><el-col :span="11">{{ t('visualization.sys_datasource') }}</el-col>
           </el-row>
           <el-row
             :key="index"
@@ -204,7 +209,7 @@ const state = reactive({
   },
   form: {
     pid: '',
-    name: '新建',
+    name: t('visualization.new'),
     datasetFolderPid: null,
     datasetFolderName: null
   },
@@ -221,7 +226,7 @@ const state = reactive({
     pid: [
       {
         required: true,
-        message: '请选择所属文件夹',
+        message: t('visualization.select_folder'),
         trigger: 'blur'
       }
     ],
@@ -237,7 +242,7 @@ const state = reactive({
     datasetFolderPid: [
       {
         required: true,
-        message: '请选择数据集分组所属文件夹',
+        message: t('visualization.select_ds_group_folder'),
         trigger: 'blur'
       }
     ]
@@ -263,7 +268,7 @@ const initData = () => {
     dfs(res as unknown as BusiTreeNode[])
     state.dsTree = (res as unknown as BusiTreeNode[]) || []
     if (state.dsTree.length && state.dsTree[0].name === 'root' && state.dsTree[0].id === '0') {
-      state.dsTree[0].name = '数据集'
+      state.dsTree[0].name = t('visualization.dataset')
     }
   })
 }
@@ -314,7 +319,7 @@ const saveApp = () => {
     }
   })
   if (!datasourceMatchReady) {
-    ElMessage.error('存在未配置的数据源')
+    ElMessage.error(t('visualization.app_no_datasource_tips'))
     return
   }
   appSaveForm.value?.validate(valid => {
diff --git a/core/core-frontend/src/views/common/DeResourceCreateOpt.vue b/core/core-frontend/src/views/common/DeResourceCreateOpt.vue
index ae185f4dd7..5657e68d0e 100644
--- a/core/core-frontend/src/views/common/DeResourceCreateOpt.vue
+++ b/core/core-frontend/src/views/common/DeResourceCreateOpt.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     class="create-dialog"
-    title="从模板新建"
+    :title="t('visualization.new_from_template')"
     v-model="state.dialogShow"
     width="700"
     :before-close="close"
@@ -32,7 +32,7 @@
         </el-col>
       </el-row>
       <el-row style="margin-top: 5px">
-        <el-col :span="4" class="name-area">名称</el-col>
+        <el-col :span="4" class="name-area">{{ t('visualization.name') }}</el-col>
         <el-col :span="20">
           <el-input v-model="state.dvCreateInfo.name" clearable size="small" />
         </el-col>
diff --git a/core/core-frontend/src/views/common/DeResourceGroupOpt.vue b/core/core-frontend/src/views/common/DeResourceGroupOpt.vue
index 3e885122ff..8a1b8ffcb3 100644
--- a/core/core-frontend/src/views/common/DeResourceGroupOpt.vue
+++ b/core/core-frontend/src/views/common/DeResourceGroupOpt.vue
@@ -78,7 +78,7 @@ const nameRepeat = value => {
 }
 const nameValidator = (_, value, callback) => {
   if (nameRepeat(value)) {
-    callback(new Error('名称重复'))
+    callback(new Error(t('visualization.name_repeat')))
   } else {
     callback()
   }
@@ -105,7 +105,7 @@ const filterMethod = value => {
 const resetForm = () => {
   dialogTitle.value = null
   resourceFormNameLabel.value = ''
-  resourceForm.name = '新建'
+  resourceForm.name = t('visualization.new')
   resourceForm.pid = ''
   resourceDialogShow.value = false
 }
@@ -121,12 +121,15 @@ const dfs = (arr: BusiTreeNode[]) => {
 
 const getDialogTitle = exec => {
   return {
-    newFolder: '新建文件夹',
-    newLeaf: props.curCanvasType === 'dataV' ? '新建数据大屏' : '新建仪表板',
-    move: '移动到',
-    copy: '复制' + sourceLabel.value,
-    rename: '重命名',
-    newLeafAfter: '所属文件夹'
+    newFolder: t('visualization.new_folder'),
+    newLeaf:
+      props.curCanvasType === 'dataV'
+        ? t('visualization.new_screen')
+        : t('visualization.new_dashboard'),
+    move: t('visualization.move_to'),
+    copy: t('visualization.copy') + sourceLabel.value,
+    rename: t('visualization.rename'),
+    newLeafAfter: t('visualization.belong_folder')
   }[exec]
 }
 const placeholder = ref('')
@@ -134,16 +137,17 @@ const placeholder = ref('')
 const optInit = (type, data: BusiTreeNode, exec, parentSelect = false) => {
   showParentSelected.value = parentSelect
   nodeType.value = type
-  const optSource = data.leaf || type === 'leaf' ? sourceLabel.value : '文件夹'
-  placeholder.value =
+  const optSource = data.leaf || type === 'leaf' ? sourceLabel.value : t('visualization.folder')
+  const placeholderLabel =
     data.leaf || type === 'leaf'
       ? props.curCanvasType === 'dataV'
-        ? '请输入数据大屏名称'
-        : '请输入仪表板名称'
-      : '请输入文件夹名称'
+        ? t('visualization.screen')
+        : t('visualization.dashboard')
+      : t('visualization.folder')
+  placeholder.value = t('visualization.input_name_tips', [placeholderLabel])
   filterText.value = ''
   dialogTitle.value = getDialogTitle(exec) + ('rename' === exec ? optSource : '')
-  resourceFormNameLabel.value = (exec === 'move' ? '' : optSource) + '名称'
+  resourceFormNameLabel.value = (exec === 'move' ? '' : optSource) + t('visualization.name')
   const request = { busiFlag: curCanvasType.value, leaf: false, weight: 7 }
   if (['newFolder'].includes(exec)) {
     resourceForm.name = ''
@@ -226,17 +230,17 @@ const nodeClick = (data: BusiTreeNode) => {
 
 const checkParent = params => {
   if (params.pid !== 0 && !params.pid) {
-    ElMessage.error('请选择目标文件夹')
+    ElMessage.error(t('visualization.select_target_folder'))
     return false
   }
   // 如果有搜索需要校验当前pName 是否包含关键字（解决先点击再搜索后，未点击搜索结果也可以移动的问题）
   if (filterText.value && !resourceForm.pName.includes(filterText.value)) {
-    ElMessage.error('请选择目标文件夹')
+    ElMessage.error(t('visualization.select_target_folder'))
     return false
   }
   // 点击后不能选择自身作为父ID
   if (params.pid === params.id) {
-    ElMessage.warning('不能选择自身，请选择其他文件夹')
+    ElMessage.warning(t('visualization.select_target_tips'))
     return
   }
   return true
@@ -336,7 +340,7 @@ const emits = defineEmits(['finish'])
           v-model="resourceForm.name"
         />
       </el-form-item>
-      <el-form-item v-if="showPid" :label="'所属文件夹'" prop="pid">
+      <el-form-item v-if="showPid" :label="t('visualization.belong_folder')" prop="pid">
         <el-tree-select
           style="width: 100%"
           @keydown.stop
@@ -392,14 +396,16 @@ const emits = defineEmits(['finish'])
           </el-tree>
           <div v-if="searchEmpty" class="empty-search">
             <img :src="nothingTree" />
-            <span>没有找到相关内容</span>
+            <span>{{ t('visualization.no_content') }}</span>
           </div>
         </div>
       </div>
     </el-form>
     <template #footer>
-      <el-button secondary @click="resetForm()">取消 </el-button>
-      <el-button type="primary" @click="saveResource()">确认 </el-button>
+      <el-button secondary @click="resetForm()">{{ t('visualization.cancel') }} </el-button>
+      <el-button type="primary" @click="saveResource()"
+        >{{ t('visualization.confirm') }}
+      </el-button>
     </template>
   </el-dialog>
 </template>
diff --git a/core/core-frontend/src/views/common/DeResourceTree.vue b/core/core-frontend/src/views/common/DeResourceTree.vue
index e95360fa89..1d2d37d55e 100644
--- a/core/core-frontend/src/views/common/DeResourceTree.vue
+++ b/core/core-frontend/src/views/common/DeResourceTree.vue
@@ -76,7 +76,7 @@ const anyManage = ref(false)
 const { curCanvasType, showPosition } = toRefs(props)
 const resourceLabel =
   curCanvasType.value === 'dataV' ? t('work_branch.big_data_screen') : t('work_branch.dashboard')
-const newResourceLabel = '新建' + resourceLabel
+const newResourceLabel = t('visualization.new') + resourceLabel
 const selectedNodeKey = ref(null)
 const filterText = ref(null)
 const expandedArray = ref([])
@@ -90,17 +90,17 @@ const state = reactive({
   originResourceTree: [] as BusiTreeNode[],
   folderMenuList: [
     {
-      label: '移动到',
+      label: t('visualization.move_to'), //'移动到'
       command: 'move',
       svgName: dvMove
     },
     {
-      label: '重命名',
+      label: t('visualization.rename'), //'重命名'
       command: 'rename',
       svgName: dvRename
     },
     {
-      label: '删除',
+      label: t('visualization.delete'), // 删除
       command: 'delete',
       svgName: dvDelete,
       divided: true
@@ -108,20 +108,20 @@ const state = reactive({
   ],
   sortType: [
     {
-      label: '按时间升序',
+      label: t('visualization.time_asc'), //'按时间升序'
       value: 'time_asc'
     },
     {
-      label: '按时间降序',
+      label: t('visualization.time_desc'), //'按时间降序'
       value: 'time_desc'
     },
     {
-      label: '按名称升序',
+      label: t('visualization.name_asc'), //'按名称升序'
       value: 'name_asc'
     },
     {
-      label: '按名称降序',
-      value: 'time_asc'
+      label: t('visualization.name_desc'), //'按名称降序'
+      value: 'name_desc'
     }
   ],
   templateCreatePid: 0
@@ -136,7 +136,7 @@ const isEmbedded = computed(() => appStore.getIsDataEaseBi || appStore.getIsIfra
 const resourceTypeList = computed(() => {
   const list = [
     {
-      label: '空白新建',
+      label: t('work_branch.new_empty'), //'空白新建',
       svgName: dvSvgType.value,
       command: 'newLeaf'
     },
@@ -146,7 +146,7 @@ const resourceTypeList = computed(() => {
       command: 'newFromTemplate'
     },
     {
-      label: '新建文件夹',
+      label: t('work_branch.new_folder'), //'新建文件夹'
       divided: true,
       svgName: dvFolder,
       command: 'newFolder'
@@ -162,22 +162,22 @@ const { handleDrop, allowDrop, handleDragStart } = treeDraggbleChart(
 const menuList = computed(() => {
   const list = [
     {
-      label: '复制',
+      label: t('visualization.copy'), //'复制',
       command: 'copy',
       svgName: dvCopyDark
     },
     {
-      label: '移动到',
+      label: t('visualization.move_to'), //'移动到',
       command: 'move',
       svgName: dvMove
     },
     {
-      label: '重命名',
+      label: t('visualization.rename'), //'重命名',
       command: 'rename',
       svgName: dvRename
     },
     {
-      label: '删除',
+      label: t('visualization.delete'), //'删除',
       command: 'delete',
       svgName: dvDelete,
       divided: true
@@ -289,19 +289,17 @@ const emit = defineEmits(['nodeClick'])
 
 const operation = (cmd: string, data: BusiTreeNode, nodeType: string) => {
   if (cmd === 'delete') {
-    const msg = data.leaf ? '' : '删除后，此文件夹下的所有资源都会被删除，请谨慎操作。'
-    ElMessageBox.confirm(
-      data.leaf ? '确定删除该' + resourceLabel + '吗？' : '确定删除该文件夹吗？',
-      {
-        confirmButtonType: 'danger',
-        type: 'warning',
-        tip: msg,
-        autofocus: false,
-        showClose: false
-      }
-    ).then(() => {
+    const msg = data.leaf ? '' : t('visualization.delete_tips')
+    const tips_label = data.leaf ? resourceLabel : t('visualization.folder')
+    ElMessageBox.confirm(t('visualization.delete_tips', tips_label), {
+      confirmButtonType: 'danger',
+      type: 'warning',
+      tip: msg,
+      autofocus: false,
+      showClose: false
+    }).then(() => {
       deleteLogic(data.id, curCanvasType.value).then(() => {
-        ElMessage.success('删除成功')
+        ElMessage.success(t('visualization.delete_success'))
         getTree()
       })
     })
@@ -477,20 +475,20 @@ const getDefaultExpandedKeys = () => {
 
 const sortList = [
   {
-    name: '按创建时间升序',
+    name: t('visualization.time_asc'),
     value: 'time_asc'
   },
   {
-    name: '按创建时间降序',
+    name: t('visualization.time_desc'),
     value: 'time_desc',
     divided: true
   },
   {
-    name: '按照名称升序',
+    name: t('visualization.name_asc'),
     value: 'name_asc'
   },
   {
-    name: '按照名称降序',
+    name: t('visualization.name_desc'),
     value: 'name_desc'
   }
 ]
@@ -556,7 +554,7 @@ defineExpose({
       <div class="icon-methods" v-show="showPosition === 'preview'">
         <span class="title"> {{ resourceLabel }} </span>
         <div v-if="rootManage" class="flex-align-center">
-          <el-tooltip content="新建文件夹" placement="top" effect="dark">
+          <el-tooltip :content="t('work_branch.new_folder')" placement="top" effect="dark">
             <el-icon
               class="custom-icon btn"
               style="margin-right: 20px"
@@ -579,7 +577,7 @@ defineExpose({
                     <el-icon :class="`handle-icon color-${curCanvasType}`">
                       <Icon><component class="svg-icon" :is="dvSvgType"></component></Icon>
                     </el-icon>
-                    空白新建
+                    {{ t('work_branch.new_empty') }}
                   </el-dropdown-item>
                   <el-dropdown-item @click="addOperation('newFromTemplate', null, 'leaf', true)">
                     <el-icon class="handle-icon">
diff --git a/core/core-frontend/src/views/common/MultiplexingCanvas.vue b/core/core-frontend/src/views/common/MultiplexingCanvas.vue
index e353d359ab..5098484b9c 100644
--- a/core/core-frontend/src/views/common/MultiplexingCanvas.vue
+++ b/core/core-frontend/src/views/common/MultiplexingCanvas.vue
@@ -4,7 +4,7 @@
     size="90%"
     v-model="dialogShow"
     trigger="click"
-    title="复用"
+    :title="t('visualization.multiplexing')"
     custom-class="custom-drawer"
   >
     <dashboard-preview-show
@@ -24,10 +24,10 @@
     <template #footer>
       <el-row class="multiplexing-footer">
         <el-col class="adapt-count">
-          <span>已选 {{ selectComponentCount }} 项</span>
+          <span>{{ (t('visualization.component_style'), [selectComponentCount]) }}</span>
         </el-col>
         <el-col class="adapt-select">
-          <span class="adapt-text"> 组件样式： </span>
+          <span class="adapt-text">{{ t('visualization.component_style') }} ： </span>
           <el-select
             style="width: 120px"
             v-model="multiplexingStyleAdapt"
@@ -42,13 +42,15 @@
             />
           </el-select>
         </el-col>
-        <el-button class="close-button" @click="dialogShow = false">关闭</el-button>
+        <el-button class="close-button" @click="dialogShow = false">{{
+          t('visualization.close')
+        }}</el-button>
         <el-button
           type="primary"
           :disabled="!selectComponentCount"
           class="confirm-button"
           @click="saveMultiplexing"
-          >复用</el-button
+          >{{ t('visualization.multiplexing') }}</el-button
         >
       </el-row>
     </template>
@@ -63,22 +65,22 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import PreviewShow from '@/views/data-visualization/PreviewShow.vue'
+import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const dialogShow = ref(false)
 const copyStore = copyStoreWithOut()
 const multiplexingPreviewShowRef = ref(null)
 const { multiplexingStyleAdapt, curMultiplexingComponents } = storeToRefs(dvMainStore)
+const curDvType = ref('dashboard')
+const { t } = useI18n()
+const selectComponentCount = computed(() => Object.keys(curMultiplexingComponents.value).length)
 const state = reactive({
   copyOptions: [
-    { label: '适应新主题', value: true },
-    { label: '保持源样式', value: false }
+    { label: t('visualization.adapt_new_subject'), value: true },
+    { label: t('visualization.keep_subject'), value: false }
   ]
 })
-const curDvType = ref('dashboard')
-
-const selectComponentCount = computed(() => Object.keys(curMultiplexingComponents.value).length)
-
 const dialogInit = (dvType = 'dashboard') => {
   curDvType.value = dvType
   dialogShow.value = true
diff --git a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue b/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
index fc78405a43..b57d941749 100644
--- a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
+++ b/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
@@ -19,6 +19,7 @@ import { ElMessage } from 'element-plus-secondary'
 import AppExportForm from '@/components/de-app/AppExportForm.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { useUserStoreWithOut } from '@/store/modules/user'
+import { useI18n } from '@/hooks/web/useI18n'
 const userStore = useUserStoreWithOut()
 
 const userName = computed(() => userStore.getName)
@@ -44,6 +45,7 @@ const state = reactive({
 const { fullscreenFlag, canvasViewDataInfo } = storeToRefs(dvMainStore)
 
 const { width, node } = useMoveLine('DASHBOARD')
+const { t } = useI18n()
 
 const props = defineProps({
   showPosition: {
@@ -137,7 +139,7 @@ const downloadAsAppTemplate = downloadType => {
 const downLoadToAppPre = () => {
   const result = checkTemplate()
   if (result && result.length > 0) {
-    ElMessage.warning(`当前仪表板中[${result}]属于模版图表，无法导出，请先设置数据集！`)
+    ElMessage.warning(t('visualization.export_tips', [result]))
   } else {
     appExportFormRef.value.init({
       appName: state.dvInfo.name,
@@ -290,15 +292,15 @@ defineExpose({
         </div>
       </template>
       <template v-else-if="hasTreeData && mounted">
-        <empty-background description="请在左侧选择仪表板" img-type="select" />
+        <empty-background :description="t('visualization.preview_select_tips')" img-type="select" />
       </template>
       <template v-else-if="mounted">
-        <empty-background description="暂无仪表板" img-type="none">
+        <empty-background :description="t('visualization.have_none_resource')" img-type="none">
           <el-button v-if="rootManage && !isDataEaseBi" @click="createNew" type="primary">
             <template #icon>
               <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
             </template>
-            {{ $t('commons.create') }}{{ $t('chart.dashboard') }}
+            {{ t('commons.create') }}{{ t('chart.dashboard') }}
           </el-button>
         </empty-background>
       </template>
diff --git a/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue b/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
index beb6eb16ab..90eae71388 100644
--- a/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
+++ b/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
@@ -94,7 +94,7 @@
                 class="image-hint"
                 :class="`image-hint_${themes}`"
               >
-                支持JPG、PNG、GIF、SVG，大小不超过 1M
+                {{ t('visualization.pic_import_tips', ['1M']) }}
               </span>
               <el-button
                 size="small"
@@ -104,7 +104,7 @@
                 @click="goFile"
                 :disabled="!canvasStyleData.mobileSetting.backgroundImageEnable"
               >
-                重新上传
+                {{ t('visualization.re_upload') }}
               </el-button>
             </el-row>
           </div>
@@ -159,7 +159,7 @@ const goFile = () => {
 }
 
 const sizeMessage = () => {
-  ElMessage.success('图片大小不符合')
+  ElMessage.success(t('visualization.pic_size_error'))
 }
 
 const reUpload = e => {
diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
index f732b8068c..a8fb55430a 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -16,6 +16,8 @@ import { debounce } from 'lodash-es'
 import mobileHeader from '@/assets/img/mobile-header.png'
 import ComponentStyleEditor from '@/views/common/ComponentStyleEditor.vue'
 import { deepCopy } from '@/utils/utils'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 
 const dvMainStore = dvMainStoreWithOut()
 const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore)
@@ -191,7 +193,7 @@ const hanedleMessage = event => {
 const saveCanvasWithCheckFromMobile = () => {
   snapshotStore.resetStyleChangeTimes()
   canvasSave(() => {
-    ElMessage.success('保存成功')
+    ElMessage.success(t('visualization.save_success'))
   })
 }
 const loadCanvasData = () => {
@@ -256,7 +258,7 @@ const handleBack = () => {
     mobileStatusChange('mobilePatch', undefined)
     return
   }
-  ElMessageBox.confirm('当前的更改尚未保存，确定退出吗？', {
+  ElMessageBox.confirm(t('visualization.change_save_tips'), {
     confirmButtonType: 'primary',
     type: 'warning',
     autofocus: false,
@@ -314,11 +316,12 @@ const save = () => {
       <div class="config-panel-foot"></div>
     </div>
     <div class="mobile-com-list">
-      <div class="config-mobile-sidebar">移动端配置</div>
+      <div class="config-mobile-sidebar">{{ t('visualization.mobile_config') }}</div>
       <el-tabs size="small" v-model="activeCollapse">
-        <el-tab-pane label="可视化组件" name="com"> </el-tab-pane>
-        <el-tab-pane label="组件样式" name="componentStyle"> </el-tab-pane>
-        <el-tab-pane label="整体样式" name="style"> </el-tab-pane>
+        <el-tab-pane :label="t('visualization.visualization_component')" name="com"> </el-tab-pane>
+        <el-tab-pane :label="t('visualization.component_style')" name="componentStyle">
+        </el-tab-pane>
+        <el-tab-pane label="t('visualization.whole_style')" name="style"> </el-tab-pane>
       </el-tabs>
       <template v-if="!mobileLoading">
         <div class="config-mobile-tab" v-show="activeCollapse === 'style'">
@@ -352,9 +355,9 @@ const save = () => {
               />
             </div>
             <div class="mobile-com-mask" @click="addToMobile(item)">
-              <span v-show="item.component === 'DeStreamMedia'" style="color: #909399"
-                >IOS可能无法显示</span
-              >
+              <span v-show="item.component === 'DeStreamMedia'" style="color: #909399">{{
+                t('visualization.mobile_ios_tips')
+              }}</span>
             </div>
             <div class="pc-select-to-mobile" @click="addToMobile(item)" v-if="!mobileLoading"></div>
           </div>
diff --git a/core/core-frontend/src/views/dashboard/index.vue b/core/core-frontend/src/views/dashboard/index.vue
index 58b676b4f8..7dc04d537c 100644
--- a/core/core-frontend/src/views/dashboard/index.vue
+++ b/core/core-frontend/src/views/dashboard/index.vue
@@ -31,6 +31,7 @@ const interactiveStore = interactiveStoreWithOut()
 import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import eventBus from '@/utils/eventBus'
+import { useI18n } from '@/hooks/web/useI18n'
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
 const canvasCacheOutRef = ref(null)
@@ -60,6 +61,7 @@ const {
 const dataInitState = ref(false)
 const appStore = useAppStoreWithOut()
 const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
+const { t } = useI18n()
 
 const state = reactive({
   datasetTree: [],
@@ -86,7 +88,9 @@ const otherEditorShow = computed(() => {
 })
 
 const otherEditorTitle = computed(() => {
-  return curComponent.value?.component === 'UserView' ? '属性' : curComponent.value?.label || '属性'
+  return curComponent.value?.component === 'UserView'
+    ? t('visualization.attribute')
+    : curComponent.value?.label || t('visualization.attribute')
 })
 
 const viewEditorShow = computed(() => {
@@ -292,7 +296,7 @@ onUnmounted(() => {
       <dv-sidebar
         v-show="!curComponent && !batchOptStatus"
         :theme-info="'light'"
-        title="仪表板配置"
+        :title="t('visualization.dashboard_configuration')"
         :width="420"
         aside-position="right"
         class="left-sidebar"
@@ -309,7 +313,7 @@ onUnmounted(() => {
       <dv-sidebar
         v-if="batchOptStatus"
         :theme-info="'light'"
-        title="批量设置样式"
+        :title="t('visualization.batch_style_set')"
         :width="280"
         aside-position="right"
         class="left-sidebar"
diff --git a/core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue b/core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue
index bb4229b321..b925176b29 100644
--- a/core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue
+++ b/core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue
@@ -16,8 +16,10 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { getCanvasStyle } from '@/utils/style'
 import EmptyBackground from '../../components/empty-background/src/EmptyBackground.vue'
 import { iconChartMap } from '@/components/icon-group/chart-list'
+import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 const viewShow = ref(true)
+const { t } = useI18n()
 
 const props = defineProps({
   canvasStyleData: {
@@ -160,14 +162,15 @@ onBeforeMount(() => {
       <el-row class="tree-head">
         <span class="head-text">选择组件</span>
         <span class="head-filter"
-          >仅看已选 <el-switch size="small" v-model="state.showSelected" />
+          >{{ t('visualization.show_selected_only') }}
+          <el-switch size="small" v-model="state.showSelected" />
         </span>
       </el-row>
       <el-tree
         class="custom-tree-multiplex"
         menu
         ref="multiplexInfoTree"
-        :empty-text="'暂无可用组件'"
+        :empty-text="t('visualization.no_available_component')"
         :filter-node-method="filterNodeMethod"
         :data="curMultiplexTargetComponentsInfo"
         node-key="targetViewId"
@@ -215,7 +218,11 @@ onBeforeMount(() => {
             :dv-info="dvInfo"
             :canvas-view-info="canvasViewInfo"
           />
-          <empty-background v-else description="当前未选择组件" img-type="select" />
+          <empty-background
+            v-else
+            :description="t('visualization.no_selected_component')"
+            img-type="select"
+          />
         </div>
       </div>
     </el-col>
diff --git a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
index c3af3f48ce..c05b946d2f 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
@@ -211,7 +211,7 @@ defineExpose({
       :download-status="downloadStatus"
       :show-pop-bar="true"
     ></de-preview>
-    <empty-background v-if="!state.initState" description="参数不能为空" img-type="noneWhite" />
+    <empty-background v-if="!state.initState" :description="t('visualization.no_params_tips')" img-type="noneWhite" />
   </div>
   <XpackComponent
     jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvTmV3V2luZG93SGFuZGxlcg=="
diff --git a/core/core-frontend/src/views/data-visualization/PreviewCanvasMobile.vue b/core/core-frontend/src/views/data-visualization/PreviewCanvasMobile.vue
index 6e15d96767..53bdc9cf13 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewCanvasMobile.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewCanvasMobile.vue
@@ -174,7 +174,11 @@ defineExpose({
       :is-selector="props.isSelector"
     ></de-preview>
   </div>
-  <empty-background v-if="!state.initState" description="参数不能为空" img-type="noneWhite" />
+  <empty-background
+    v-if="!state.initState"
+    :description="t('visualization.no_params_tips')"
+    img-type="noneWhite"
+  />
   <XpackComponent
     jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvTmV3V2luZG93SGFuZGxlcg=="
     @loaded="XpackLoaded"
diff --git a/core/core-frontend/src/views/data-visualization/PreviewHead.vue b/core/core-frontend/src/views/data-visualization/PreviewHead.vue
index 11e20e1394..91477dd1a0 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewHead.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewHead.vue
@@ -114,7 +114,7 @@ const initOpenHandler = newWindow => {
 
     <el-tooltip
       effect="dark"
-      :content="favorited ? '取消收藏' : t('visualization.store')"
+      :content="favorited ? t('visualization.cancel_store') : t('visualization.store')"
       placement="top"
     >
       <el-icon
@@ -132,7 +132,9 @@ const initOpenHandler = newWindow => {
     </el-tooltip>
     <el-divider style="margin: 0 16px 0 7px" direction="vertical" />
     <div class="create-area flex-align-center">
-      <span style="line-height: 22px">创建人:{{ dvInfo.creatorName }}</span>
+      <span style="line-height: 22px"
+        >{{ t('visualization.creator') }}:{{ dvInfo.creatorName }}</span
+      >
       <el-popover show-arrow :offset="8" placement="bottom" width="400" trigger="hover">
         <template #reference>
           <el-icon class="info-tips"
@@ -151,7 +153,7 @@ const initOpenHandler = newWindow => {
         <template #icon>
           <icon name="icon_pc_fullscreen"><icon_pc_fullscreen class="svg-icon" /></icon>
         </template>
-        全屏</el-button
+        {{ t('visualization.fullscreen') }}</el-button
       >
       <el-button secondary @click="preview()">
         <template #icon>
@@ -169,7 +171,7 @@ const initOpenHandler = newWindow => {
         <template #icon>
           <icon name="icon_edit_outlined"><icon_edit_outlined class="svg-icon" /></icon>
         </template>
-        编辑</el-button
+        {{ t('visualization.edit') }}</el-button
       >
       <el-dropdown trigger="click">
         <el-icon class="head-more-icon">
@@ -177,7 +179,9 @@ const initOpenHandler = newWindow => {
         </el-icon>
         <template #dropdown>
           <el-dropdown-menu style="width: 130px">
-            <el-dropdown-item icon="Refresh" @click="reload()">刷新数据 </el-dropdown-item>
+            <el-dropdown-item icon="Refresh" @click="reload()"
+              >{{ t('visualization.refresh_data') }}
+            </el-dropdown-item>
             <el-dropdown
               style="width: 100%; overflow: hidden"
               trigger="hover"
@@ -186,7 +190,7 @@ const initOpenHandler = newWindow => {
             >
               <div class="ed-dropdown-menu__item flex-align-center icon">
                 <el-icon><Download /></el-icon>
-                导出为&nbsp;&nbsp;&nbsp;&nbsp;
+                {{ t('visualization.export_as') }}&nbsp;&nbsp;&nbsp;&nbsp;
                 <el-icon><ArrowRight /></el-icon>
               </div>
               <template #dropdown>
diff --git a/core/core-frontend/src/views/data-visualization/PreviewShow.vue b/core/core-frontend/src/views/data-visualization/PreviewShow.vue
index 6b44b7dc19..032bf803ff 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewShow.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewShow.vue
@@ -21,9 +21,11 @@ import { ElMessage } from 'element-plus-secondary'
 import { useEmitt } from '@/hooks/web/useEmitt'
 
 import { useUserStoreWithOut } from '@/store/modules/user'
+import { useI18n } from '@/hooks/web/useI18n'
 const userStore = useUserStoreWithOut()
 
 const userName = computed(() => userStore.getName)
+const { t } = useI18n()
 
 const dvMainStore = dvMainStoreWithOut()
 const { dvInfo, canvasViewDataInfo } = storeToRefs(dvMainStore)
@@ -300,15 +302,15 @@ onBeforeMount(() => {
         </div>
       </template>
       <template v-else-if="hasTreeData && mounted">
-        <empty-background description="请在左侧选择数据大屏" img-type="select" />
+        <empty-background :description="t('visualization.select_screen_tips')" img-type="select" />
       </template>
       <template v-else-if="mounted">
-        <empty-background description="暂无数据大屏" img-type="none">
+        <empty-background :description="t('visualization.no_screen')" img-type="none">
           <el-button v-if="rootManage && !isDataEaseBi" @click="createNew" type="primary">
             <template #icon>
               <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
             </template>
-            {{ $t('commons.create') }}{{ $t('work_branch.big_data_screen') }}
+            {{ t('commons.create') }}{{ t('work_branch.big_data_screen') }}
           </el-button>
         </empty-background>
       </template>
diff --git a/core/core-frontend/src/views/data-visualization/index.vue b/core/core-frontend/src/views/data-visualization/index.vue
index 610d336f9f..d013b5136f 100644
--- a/core/core-frontend/src/views/data-visualization/index.vue
+++ b/core/core-frontend/src/views/data-visualization/index.vue
@@ -46,10 +46,12 @@ import { useRequestStoreWithOut } from '@/store/modules/request'
 import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import ChartStyleBatchSet from '@/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue'
 import CustomTabsSort from '@/custom-component/de-tabs/CustomTabsSort.vue'
+import { useI18n } from '@/hooks/web/useI18n'
 const interactiveStore = interactiveStoreWithOut()
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
 const dvPreviewRef = ref(null)
+const { t } = useI18n()
 const eventCheck = e => {
   if (e.key === 'screen-weight' && !compareStorage(e.oldValue, e.newValue)) {
     const opt = embeddedStore.opt || router.currentRoute.value.query.opt
@@ -486,7 +488,7 @@ eventBus.on('tabSort', tabSort)
     >
       <!-- 左侧组件列表 -->
       <dv-sidebar
-        :title="'图层管理'"
+        :title="t('visualization.layer_management')"
         :width="180"
         :scroll-width="3"
         :aside-position="'left'"
@@ -545,7 +547,9 @@ eventBus.on('tabSort', tabSort)
                 :base-width="state.baseWidth"
               >
                 <template v-slot:canvasDragTips>
-                  <div class="canvas-drag-tip">按住空格可拖动画布</div>
+                  <div class="canvas-drag-tip">
+                    {{ t('visualization.hold_canvas_tips') }}按住空格可拖动画布
+                  </div>
                 </template>
               </canvas-core>
             </div>
@@ -571,7 +575,7 @@ eventBus.on('tabSort', tabSort)
           </dv-sidebar>
           <dv-sidebar
             v-show="canvasPropertiesShow"
-            :title="'大屏配置'"
+            :title="t('visualization.screen_config')"
             :width="240"
             :side-name="'canvas'"
             :aside-position="'right'"
@@ -595,7 +599,7 @@ eventBus.on('tabSort', tabSort)
         <dv-sidebar
           v-if="batchOptStatus"
           :theme-info="'dark'"
-          title="批量设置样式"
+          :title="t('visualization.batch_style_set')"
           :width="280"
           aside-position="right"
           class="left-sidebar"