From ad6074d80f2eb6f4f189d6097289fa60e8fcaf2d Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Fri, 4 Jul 2025 13:46:10 +0800
Subject: [PATCH] feat: Internationalization

---
 frontend/src/components/layout/Workspace.vue  |  2 +-
 frontend/src/i18n/en.json                     | 31 ++++++-
 frontend/src/i18n/zh-CN.json                  | 31 ++++++-
 frontend/src/views/ds/Card.vue                | 40 ++++++--
 frontend/src/views/ds/DataTable.vue           | 93 +++++++++++++------
 frontend/src/views/ds/Datasource.vue          | 49 ++++++----
 frontend/src/views/ds/DatasourceForm.vue      | 10 +-
 frontend/src/views/ds/DatasourceList.vue      |  6 +-
 frontend/src/views/ds/DatasourceListSide.vue  |  4 +-
 frontend/src/views/ds/ParamsForm.vue          |  6 +-
 frontend/src/views/system/model/Card.vue      |  4 +-
 frontend/src/views/system/model/Model.vue     | 22 +++--
 frontend/src/views/system/model/ModelForm.vue |  2 +-
 frontend/src/views/system/model/ModelList.vue |  4 +-
 .../src/views/system/model/ModelListSide.vue  |  4 +-
 15 files changed, 218 insertions(+), 90 deletions(-)

diff --git a/frontend/src/components/layout/Workspace.vue b/frontend/src/components/layout/Workspace.vue
index 09320e5b..31cc242f 100644
--- a/frontend/src/components/layout/Workspace.vue
+++ b/frontend/src/components/layout/Workspace.vue
@@ -56,7 +56,7 @@ const handleDefaultWorkspaceChange = (item: any) => {
         v-model="workspaceKeywords"
         clearable
         style="width: 100%; margin-right: 12px"
-        placeholder="通过名称搜索"
+        :placeholder="$t('datasource.search_by_name')"
       >
         <template #prefix>
           <el-icon>
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 7220de58..922bbe8d 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -59,6 +59,7 @@
     "type": "Data Source Type",
     "status": "Status",
     "actions": "Actions",
+    "pieces_in_total": "Showing {ms} records out of {msg}",
     "test_connection": "Test Connection",
     "connection_success": "Connection Successful",
     "connection_failed": "Connection Failed, Please Check Configuration",
@@ -135,9 +136,35 @@
         "success": "Connect success",
         "failed": "Connect failed"
       },
-      "timeout":"Timeout(second)"
+      "timeout": "Timeout(second)"
     }
   },
+  "datasource": {
+    "search_by_name": "Search by Name",
+    "search": "Search",
+    "all_types": "All types",
+    "new_data_source": "New data source",
+    "open_query": "Open query",
+    "edit": "Edit",
+    "source_connection_failed": "Data source connection failed",
+    "confirm": "Confirm",
+    "enabled_status": "Enabled status",
+    "custom_notes": "Custom notes",
+    "field_type": "Field type",
+    "field_name": "Field name",
+    "relevant_content_found": "No relevant content found",
+    "please_enter": "Please enter",
+    "table_notes": "Table notes",
+    "field_notes": "Field notes",
+    "select_all": "Select all",
+    "mysql_data_source": "Modify MySQL data source",
+    "configuration_information": "Configuration information",
+    "data_source": "Do you want to delete the data source: {msg}?",
+    "operate_with_caution": "After being deleted, the data source cannot be intelligently counted. Please operate with caution.",
+    "data_source_de": "Unable to delete data source: {msg}",
+    "cannot_be_deleted": "The chart of the dashboard uses this data source and cannot be deleted.",
+    "got_it": "Got it"
+  },
   "chat": {
     "chart_type": {
       "table": "Table",
@@ -174,4 +201,4 @@
     "back_community": "Restore to Community Edition",
     "confirm_tips": "Are you sure to restore to Community Edition?"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json
index c4321944..de00385b 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -58,6 +58,7 @@
     "name": "数据源名称",
     "type": "数据源类型",
     "status": "状态",
+    "pieces_in_total": "显示 {ms} 条数据，共 {msg} 条",
     "actions": "操作",
     "test_connection": "测试连接",
     "connection_success": "连接成功",
@@ -135,9 +136,35 @@
         "success": "连接成功",
         "failed": "连接失败"
       },
-      "timeout":"查询超时(秒)"
+      "timeout": "查询超时(秒)"
     }
   },
+  "datasource": {
+    "search_by_name": "通过名称搜索",
+    "search": "搜索",
+    "all_types": "全部类型",
+    "new_data_source": "新建数据源",
+    "open_query": "开启问数",
+    "edit": "编辑",
+    "source_connection_failed": "数据源连接失败",
+    "confirm": "确定",
+    "enabled_status": "启用状态",
+    "custom_notes": "自定义备注",
+    "field_type": "字段类型",
+    "field_name": "字段名称",
+    "relevant_content_found": "没有找到相关内容",
+    "please_enter": "请输入",
+    "table_notes": "表备注",
+    "field_notes": "字段备注",
+    "select_all": "全选",
+    "mysql_data_source": "修改 MySQL 数据源",
+    "configuration_information": "配置信息",
+    "data_source": "是否删除数据源：{msg}？",
+    "operate_with_caution": "被删除后，将无法对该数据源进行智能问数，请谨慎操作。",
+    "data_source_de": "无法删除数据源：{msg}",
+    "cannot_be_deleted": "仪表板的图表使用了该数据源，不可删除。",
+    "got_it": "知道了"
+  },
   "chat": {
     "chart_type": {
       "table": "明细表",
@@ -174,4 +201,4 @@
     "back_community": "还原至社区版",
     "confirm_tips": "确定还原至社区版？"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/views/ds/Card.vue b/frontend/src/views/ds/Card.vue
index 7ff12d16..31604e0e 100644
--- a/frontend/src/views/ds/Card.vue
+++ b/frontend/src/views/ds/Card.vue
@@ -4,6 +4,8 @@ import delIcon from '@/assets/svg/icon_delete.svg'
 import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
 import icon_form_outlined from '@/assets/svg/icon_form_outlined.svg'
 import icon_chat_outlined from '@/assets/svg/icon_chat_outlined.svg'
+import { ref, unref } from 'vue'
+import { ClickOutside as vClickOutside } from 'element-plus-secondary'
 
 import edit from '@/assets/svg/icon_edit_outlined.svg'
 
@@ -31,7 +33,7 @@ const handleEdit = () => {
 }
 
 const handleDel = () => {
-  emits('del', props.id)
+  emits('del')
 }
 
 const handleQuestion = () => {
@@ -41,6 +43,11 @@ const handleQuestion = () => {
 const dataTableDetail = () => {
   emits('dataTableDetail')
 }
+const buttonRef = ref()
+const popoverRef = ref()
+const onClickOutside = () => {
+  unref(popoverRef).popperRef?.delayHide?.()
+}
 </script>
 
 <template>
@@ -63,30 +70,43 @@ const dataTableDetail = () => {
         </el-icon>
         {{ rate }}
       </div>
-      <div class="methods">
+      <div click.stop class="methods">
         <el-button type="primary" style="margin-right: 8px" @click.stop="handleQuestion">
           <el-icon style="margin-right: 2px" size="12">
             <icon_chat_outlined></icon_chat_outlined>
           </el-icon>
-          开启问数
+          {{ $t('datasource.open_query') }}
         </el-button>
-        <el-popover click.stop :teleported="false" popper-class="popover-card" placement="bottom">
-          <template #reference>
-            <el-icon class="more" size="16"> <icon_more_outlined></icon_more_outlined> </el-icon
-          ></template>
-
+        <el-icon
+          ref="buttonRef"
+          v-click-outside="onClickOutside"
+          @click.stop
+          class="more"
+          size="16"
+        >
+          <icon_more_outlined></icon_more_outlined>
+        </el-icon>
+        <el-popover
+          ref="popoverRef"
+          :virtual-ref="buttonRef"
+          virtual-triggering
+          trigger="click"
+          :teleported="false"
+          popper-class="popover-card"
+          placement="bottom"
+        >
           <div class="content">
             <div class="item" @click.stop="handleEdit">
               <el-icon size="16">
                 <edit></edit>
               </el-icon>
-              编辑
+              {{ $t('datasource.edit') }}
             </div>
             <div class="item" @click.stop="handleDel">
               <el-icon size="16">
                 <delIcon></delIcon>
               </el-icon>
-              删除
+              {{ $t('dashboard.delete') }}
             </div>
           </div>
         </el-popover>
diff --git a/frontend/src/views/ds/DataTable.vue b/frontend/src/views/ds/DataTable.vue
index 8fd03997..ee8a1ffe 100644
--- a/frontend/src/views/ds/DataTable.vue
+++ b/frontend/src/views/ds/DataTable.vue
@@ -59,7 +59,8 @@ const tableListWithSearch = computed(() => {
     ele.name.toLowerCase().includes(keywords.value.toLowerCase())
   )
 })
-
+const total = ref(1000)
+const showNum = ref(100)
 const currentTable = ref<any>({})
 const ds = ref<any>({})
 const btnSelect = ref('q')
@@ -169,7 +170,7 @@ const changeStatus = (row: any) => {
 <template>
   <div class="data-table no-padding">
     <div class="info">
-      数据源
+      {{ $t('ds.title') }}
       <el-icon size="12">
         <icon_right_outlined></icon_right_outlined>
       </el-icon>
@@ -178,12 +179,20 @@ const changeStatus = (row: any) => {
     <div class="content">
       <div class="side-list">
         <div class="select-table_top">
-          数据表
-          <el-icon size="18" @click="handleSelectTableList">
-            <icon_form_outlined></icon_form_outlined>
-          </el-icon>
+          {{ $t('ds.tables') }}
+
+          <el-tooltip effect="dark" :content="$t('ds.form.choose_tables')" placement="top">
+            <el-icon size="18" @click="handleSelectTableList">
+              <icon_form_outlined></icon_form_outlined>
+            </el-icon>
+          </el-tooltip>
         </div>
-        <el-input v-model="keywords" clearable style="width: 232px" placeholder="搜索">
+        <el-input
+          v-model="keywords"
+          clearable
+          style="width: 232px"
+          :placeholder="$t('datasource.search')"
+        >
           <template #prefix>
             <el-icon>
               <icon_searchOutline_outlined class="svg-icon" />
@@ -206,7 +215,7 @@ const changeStatus = (row: any) => {
           </div>
           <EmptyBackground
             v-if="!!keywords && !tableListWithSearch.length"
-            :description="'没有找到相关内容'"
+            :description="$t('datasource.relevant_content_found')"
             img-type="tree"
             style="width: 100%; margin-top: 100px"
           />
@@ -217,7 +226,8 @@ const changeStatus = (row: any) => {
         <div class="table-name">
           <div class="name">{{ currentTable.table_name }}</div>
           <div class="notes">
-            {{ currentTable.custom_comment }}
+            {{ $t('about.remark') }}:
+            {{ currentTable.custom_comment || '-' }}
             <el-icon style="margin-left: 8px; cursor: pointer" size="16" @click="editTable">
               <edit></edit>
             </el-icon>
@@ -235,14 +245,19 @@ const changeStatus = (row: any) => {
 
           <div class="preview-or-schema">
             <el-table v-if="btnSelect === 'd'" :data="fieldList" style="width: 100%">
-              <el-table-column prop="field_name" :label="t('ds.field.name')" width="180" />
-              <el-table-column prop="field_type" :label="t('ds.field.type')" width="180" />
-              <el-table-column prop="field_comment" :label="t('ds.field.comment')" />
-              <el-table-column :label="t('ds.field.custom_comment')">
+              <el-table-column prop="field_name" :label="t('datasource.field_name')" width="180" />
+              <el-table-column prop="field_type" :label="t('datasource.field_type')" width="180" />
+              <el-table-column prop="field_comment" :label="t('about.remark')" />
+              <el-table-column :label="t('datasource.custom_notes')">
                 <template #default="scope">
                   <div class="field-comment">
                     <span>{{ scope.row.custom_comment }}</span>
-                    <el-tooltip :offset="14" effect="dark" content="编辑" placement="top">
+                    <el-tooltip
+                      :offset="14"
+                      effect="dark"
+                      :content="$t('datasource.edit')"
+                      placement="top"
+                    >
                       <el-icon class="action-btn" size="16" @click="editField(scope.row)">
                         <edit></edit>
                       </el-icon>
@@ -250,7 +265,7 @@ const changeStatus = (row: any) => {
                   </div>
                 </template>
               </el-table-column>
-              <el-table-column :label="t('ds.field.status')" width="180">
+              <el-table-column :label="t('datasource.enabled_status')" width="180">
                 <template #default="scope">
                   <div style="display: flex; align-items: center">
                     <el-switch
@@ -262,15 +277,19 @@ const changeStatus = (row: any) => {
                 </template>
               </el-table-column>
             </el-table>
-
-            <el-table v-else :data="previewData.data" style="width: 100%; height: 600px">
-              <el-table-column
-                v-for="(c, index) in previewData.fields"
-                :key="index"
-                :prop="c"
-                :label="c"
-              />
-            </el-table>
+            <template v-else>
+              <div class="preview-num">
+                {{ t('ds.pieces_in_total', { msg: total, ms: showNum }) }}
+              </div>
+              <el-table :data="previewData.data" style="width: 100%; height: 600px">
+                <el-table-column
+                  v-for="(c, index) in previewData.fields"
+                  :key="index"
+                  :prop="c"
+                  :label="c"
+                />
+              </el-table>
+            </template>
           </div>
         </div>
       </div>
@@ -278,13 +297,18 @@ const changeStatus = (row: any) => {
   </div>
   <el-dialog
     v-model="tableDialog"
-    :title="t('ds.edit.table_comment')"
+    :title="t('datasource.table_notes')"
     width="600"
     :destroy-on-close="true"
     :close-on-click-modal="false"
     @closed="closeTable"
   >
-    <el-input v-model="tableComment" :rows="3" type="textarea" />
+    <el-input
+      :placeholder="$t('datasource.please_enter')"
+      v-model="tableComment"
+      :rows="3"
+      type="textarea"
+    />
     <div style="display: flex; justify-content: flex-end; margin-top: 20px">
       <el-button @click="closeTable">{{ t('common.cancel') }}</el-button>
       <el-button type="primary" @click="saveTable">{{ t('common.confirm') }}</el-button>
@@ -293,13 +317,18 @@ const changeStatus = (row: any) => {
 
   <el-dialog
     v-model="fieldDialog"
-    :title="t('ds.edit.field_comment')"
+    :title="t('datasource.field_notes')"
     width="600"
     :destroy-on-close="true"
     :close-on-click-modal="false"
     @closed="closeField"
   >
-    <el-input v-model="fieldComment" :rows="3" type="textarea" />
+    <el-input
+      :placeholder="$t('datasource.please_enter')"
+      v-model="fieldComment"
+      :rows="3"
+      type="textarea"
+    />
     <div style="display: flex; justify-content: flex-end; margin-top: 20px">
       <el-button @click="closeField">{{ t('common.cancel') }}</el-button>
       <el-button type="primary" @click="saveField">{{ t('common.confirm') }}</el-button>
@@ -467,6 +496,14 @@ const changeStatus = (row: any) => {
               }
             }
           }
+
+          .preview-num {
+            margin: 12px 0;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 22px;
+            color: #646a73;
+          }
         }
       }
     }
diff --git a/frontend/src/views/ds/Datasource.vue b/frontend/src/views/ds/Datasource.vue
index efc34f1f..7e67e817 100644
--- a/frontend/src/views/ds/Datasource.vue
+++ b/frontend/src/views/ds/Datasource.vue
@@ -14,6 +14,7 @@ import DatasourceForm from './DatasourceForm.vue'
 import { datasourceApi } from '@/api/datasource'
 import Card from './Card.vue'
 import { dsTypeWithImg } from './js/ds-type'
+import { useI18n } from 'vue-i18n'
 
 interface Datasource {
   name: string
@@ -23,6 +24,7 @@ interface Datasource {
   id?: string
 }
 
+const { t } = useI18n()
 const keywords = ref('')
 const defaultDatasourceKeywords = ref('')
 const datasourceConfigvVisible = ref(false)
@@ -77,17 +79,28 @@ const handleAddDatasource = () => {
   datasourceConfigvVisible.value = true
 }
 
-const deleteHandler = (id: any) => {
-  ElMessageBox.confirm('Are you sure to delete?', 'Warning', {
-    confirmButtonText: 'OK',
-    cancelButtonText: 'Cancel',
-    type: 'warning',
+const deleteHandler = (item: any) => {
+  ElMessageBox.confirm(t('datasource.data_source_de', { msg: item.name }), {
+    tip: t('datasource.cannot_be_deleted'),
+    cancelButtonText: t('datasource.got_it'),
+    showConfirmButton: false,
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  })
+  return
+  ElMessageBox.confirm(t('datasource.data_source', { msg: item.name }), {
+    confirmButtonType: 'danger',
+    tip: t('datasource.operate_with_caution'),
+    confirmButtonText: t('dashboard.delete'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
   })
     .then(() => {
-      datasourceApi.delete(id).then(() => {
+      datasourceApi.delete(item.id).then(() => {
         ElMessage({
           type: 'success',
-          message: 'Delete completed',
+          message: t('dashboard.delete_success'),
         })
         search()
       })
@@ -148,13 +161,13 @@ const dataTableDetail = (ele: any) => {
 <template>
   <div v-show="!currentDataTable" class="datasource-config">
     <div class="datasource-methods">
-      <span class="title">数据源</span>
+      <span class="title">{{ $t('ds.title') }}</span>
       <div class="button-input">
         <el-input
           v-model="keywords"
           clearable
           style="width: 240px; margin-right: 12px"
-          placeholder="搜索"
+          :placeholder="$t('datasource.search')"
         >
           <template #prefix>
             <el-icon>
@@ -166,7 +179,7 @@ const dataTableDetail = (ele: any) => {
         <el-popover popper-class="system-default_datasource" placement="bottom">
           <template #reference>
             <el-button secondary>
-              全部类型
+              {{ $t('datasource.all_types') }}
               <el-icon style="margin-left: 8px">
                 <arrow_down></arrow_down>
               </el-icon> </el-button
@@ -176,7 +189,7 @@ const dataTableDetail = (ele: any) => {
               v-model="defaultDatasourceKeywords"
               clearable
               style="width: 100%; margin-right: 12px"
-              placeholder="通过名称搜索"
+              :placeholder="$t('datasource.search_by_name')"
             >
               <template #prefix>
                 <el-icon>
@@ -209,13 +222,13 @@ const dataTableDetail = (ele: any) => {
           <template #icon>
             <icon_add_outlined></icon_add_outlined>
           </template>
-          新建数据源
+          {{ $t('datasource.new_data_source') }}
         </el-button>
       </div>
     </div>
     <EmptyBackground
       v-if="!!keywords && !datasourceListWithSearch.length"
-      :description="'没有找到相关内容'"
+      :description="$t('datasource.relevant_content_found')"
       img-type="tree"
     />
 
@@ -228,7 +241,7 @@ const dataTableDetail = (ele: any) => {
         :type="ele.type"
         :rate="ele.rate"
         @edit="handleEditDatasource(ele)"
-        @del="deleteHandler"
+        @del="deleteHandler(ele)"
         @data-table-detail="dataTableDetail(ele)"
       ></Card>
     </div>
@@ -242,17 +255,17 @@ const dataTableDetail = (ele: any) => {
       :show-close="false"
     >
       <template #header="{ close }">
-        <span style="white-space: nowrap">新建数据源</span>
+        <span style="white-space: nowrap">{{ $t('datasource.new_data_source') }}</span>
         <div v-if="!editDatasource" class="flex-center" style="width: 100%">
           <el-steps custom style="max-width: 500px; flex: 1" :active="activeStep" align-center>
             <el-step>
-              <template #title> 选择数据源 </template>
+              <template #title> {{ $t('qa.select_datasource') }} </template>
             </el-step>
             <el-step>
-              <template #title> 配置信息 </template>
+              <template #title> {{ $t('datasource.configuration_information') }} </template>
             </el-step>
             <el-step>
-              <template #title> 选择数据表 </template>
+              <template #title> {{ $t('ds.form.choose_tables') }} </template>
             </el-step>
           </el-steps>
         </div>
diff --git a/frontend/src/views/ds/DatasourceForm.vue b/frontend/src/views/ds/DatasourceForm.vue
index 7e6b47d8..5ec11c56 100644
--- a/frontend/src/views/ds/DatasourceForm.vue
+++ b/frontend/src/views/ds/DatasourceForm.vue
@@ -491,12 +491,14 @@ defineExpose({
         </div>
       </el-form>
       <div v-show="activeStep === 2" v-loading="tableListLoading" class="select-data_table">
-        <div class="title">选择数据表 ({{ checkList.length }}/ {{ tableList.length }})</div>
+        <div class="title">
+          {{ $t('ds.form.choose_tables') }} ({{ checkList.length }}/ {{ tableList.length }})
+        </div>
         <el-input
           v-model="keywords"
           clearable
           style="width: 100%; margin-bottom: 16px"
-          placeholder="搜索"
+          :placeholder="$t('datasource.search')"
         >
           <template #prefix>
             <el-icon>
@@ -511,12 +513,12 @@ defineExpose({
               :indeterminate="isIndeterminate"
               @change="handleCheckAllChange"
             >
-              全选
+              {{ t('datasource.select_all') }}
             </el-checkbox>
           </div>
           <EmptyBackground
             v-if="!!keywords && !tableListWithSearch.length"
-            :description="'没有找到相关内容'"
+            :description="$t('datasource.relevant_content_found')"
             img-type="tree"
             style="width: 100%"
           />
diff --git a/frontend/src/views/ds/DatasourceList.vue b/frontend/src/views/ds/DatasourceList.vue
index bcf9f256..487b6704 100644
--- a/frontend/src/views/ds/DatasourceList.vue
+++ b/frontend/src/views/ds/DatasourceList.vue
@@ -27,12 +27,12 @@ const handleModelClick = (item: any) => {
 
 <template>
   <div class="model-list">
-    <div class="title">选择数据源</div>
+    <div class="title">{{ $t('qa.select_datasource') }}</div>
     <el-input
       v-model="keywords"
       clearable
       style="width: 100%; margin-right: 12px"
-      placeholder="搜索"
+      :placeholder="$t('datasource.search')"
     >
       <template #prefix>
         <el-icon>
@@ -52,7 +52,7 @@ const handleModelClick = (item: any) => {
       </div>
       <EmptyBackground
         v-if="!!keywords && !modelListWithSearch.length"
-        :description="'没有找到相关内容'"
+        :description="$t('datasource.relevant_content_found')"
         img-type="tree"
         style="width: 100%; margin-top: 100px"
       />
diff --git a/frontend/src/views/ds/DatasourceListSide.vue b/frontend/src/views/ds/DatasourceListSide.vue
index ece6f551..0dab68fe 100644
--- a/frontend/src/views/ds/DatasourceListSide.vue
+++ b/frontend/src/views/ds/DatasourceListSide.vue
@@ -39,7 +39,7 @@ const handleModelClick = (item: any) => {
       v-model="keywords"
       clearable
       style="width: 232px; margin: 16px 0 8px 24px"
-      placeholder="搜索"
+      :placeholder="$t('datasource.search')"
     >
       <template #prefix>
         <el-icon>
@@ -60,7 +60,7 @@ const handleModelClick = (item: any) => {
       </div>
       <EmptyBackground
         v-if="!!keywords && !modelListWithSearch.length"
-        :description="'没有找到相关内容'"
+        :description="$t('datasource.relevant_content_found')"
         img-type="tree"
         style="width: 100%; margin-top: 100px"
       />
diff --git a/frontend/src/views/ds/ParamsForm.vue b/frontend/src/views/ds/ParamsForm.vue
index ff486950..f8e2fa43 100644
--- a/frontend/src/views/ds/ParamsForm.vue
+++ b/frontend/src/views/ds/ParamsForm.vue
@@ -45,7 +45,7 @@ defineExpose({
     :show-close="false"
   >
     <template #header="{ close }">
-      <span style="white-space: nowrap">选择数据表</span>
+      <span style="white-space: nowrap">{{ $t('ds.form.choose_tables') }}</span>
       <el-icon style="cursor: pointer" @click="close">
         <icon_close_outlined></icon_close_outlined>
       </el-icon>
@@ -58,8 +58,8 @@ defineExpose({
       @refresh="refresh"
     ></DatasourceForm>
     <template #footer>
-      <el-button secondary @click="beforeClose"> 取消 </el-button>
-      <el-button type="primary" @click="save"> 保存 </el-button>
+      <el-button secondary @click="beforeClose"> {{ $t('common.cancel') }} </el-button>
+      <el-button type="primary" @click="save"> {{ $t('common.save') }} </el-button>
     </template>
   </el-drawer>
 </template>
diff --git a/frontend/src/views/system/model/Card.vue b/frontend/src/views/system/model/Card.vue
index b8ecc5ae..fdbfe9b9 100644
--- a/frontend/src/views/system/model/Card.vue
+++ b/frontend/src/views/system/model/Card.vue
@@ -47,14 +47,14 @@ const handleDel = () => {
       <span class="value"> {{ baseModle }}</span>
     </div>
     <div class="methods">
-      <el-tooltip :offset="14" effect="dark" content="编辑" placement="top">
+      <el-tooltip :offset="14" effect="dark" :content="$t('datasource.edit')" placement="top">
         <el-icon size="16" @click="handleEdit">
           <edit></edit>
         </el-icon>
       </el-tooltip>
       <template v-if="!isDefault">
         <span class="divide"></span>
-        <el-tooltip :offset="14" effect="dark" content="删除" placement="top">
+        <el-tooltip :offset="14" effect="dark" :content="$t('dashboard.delete')" placement="top">
           <el-icon size="16" @click="handleDel">
             <delIcon></delIcon>
           </el-icon>
diff --git a/frontend/src/views/system/model/Model.vue b/frontend/src/views/system/model/Model.vue
index c641aad4..79a08eb8 100644
--- a/frontend/src/views/system/model/Model.vue
+++ b/frontend/src/views/system/model/Model.vue
@@ -14,6 +14,7 @@ import ModelForm from './ModelForm.vue'
 import { modelApi } from '@/api/system'
 import Card from './Card.vue'
 import { getModelTypeName } from '@/entity/CommonEntity.ts'
+import { useI18n } from 'vue-i18n'
 
 interface Model {
   name: string
@@ -22,6 +23,7 @@ interface Model {
   id?: string
 }
 
+const { t } = useI18n()
 const keywords = ref('')
 const defaultModelKeywords = ref('')
 const modelConfigvVisible = ref(false)
@@ -70,15 +72,15 @@ const beforeClose = () => {
   ElMessageBox.confirm('是否设置 Azure OpenAI 123 为系统默认模型？', {
     confirmButtonType: 'primary',
     tip: '系统默认模型被替换后，智能问数的结果将会受到影响，请谨慎操作。',
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
+    confirmButtonText: t('datasource.confirm'),
+    cancelButtonText: t('common.cancel'),
     customClass: 'confirm-no_icon',
     autofocus: false,
   })
   ElMessageBox.confirm('是否设置 Azure OpenAI 123 为系统默认模型？', {
     confirmButtonType: 'danger',
-    confirmButtonText: '删除',
-    cancelButtonText: '取消',
+    confirmButtonText: t('dashboard.delete'),
+    cancelButtonText: t('common.cancel'),
     customClass: 'confirm-no_icon',
     autofocus: false,
   })
@@ -196,7 +198,7 @@ const submit = (item: any) => {
           v-model="keywords"
           clearable
           style="width: 240px; margin-right: 12px"
-          placeholder="搜索"
+          :placeholder="$t('datasource.search')"
         >
           <template #prefix>
             <el-icon>
@@ -219,7 +221,7 @@ const submit = (item: any) => {
               v-model="defaultModelKeywords"
               clearable
               style="width: 100%; margin-right: 12px"
-              placeholder="通过名称搜索"
+              :placeholder="t('datasource.search_by_name')"
             >
               <template #prefix>
                 <el-icon>
@@ -258,7 +260,7 @@ const submit = (item: any) => {
     </div>
     <EmptyBackground
       v-if="!!keywords && !modelListWithSearch.length"
-      :description="'没有找到相关内容'"
+      :description="$t('datasource.relevant_content_found')"
       img-type="tree"
     />
 
@@ -312,9 +314,9 @@ const submit = (item: any) => {
         @submit="submit"
       ></ModelForm>
       <template #footer>
-        <el-button secondary @click="cancel"> 取消 </el-button>
-        <el-button secondary @click="preStep"> 上一步 </el-button>
-        <el-button type="primary" @click="saveModel"> 保存 </el-button>
+        <el-button secondary @click="cancel"> {{ $t('common.cancel') }} </el-button>
+        <el-button secondary @click="preStep"> {{ $t('ds.previous') }} </el-button>
+        <el-button type="primary" @click="saveModel"> {{ $t('common.save') }} </el-button>
       </template>
     </el-drawer>
   </div>
diff --git a/frontend/src/views/system/model/ModelForm.vue b/frontend/src/views/system/model/ModelForm.vue
index c2ec0bcf..b757c737 100644
--- a/frontend/src/views/system/model/ModelForm.vue
+++ b/frontend/src/views/system/model/ModelForm.vue
@@ -233,7 +233,7 @@ defineExpose({
     <el-drawer v-model="paramsFormDrawer" :size="600" title="添加参数">
       <ParamsForm ref="paramsFormRef" @submit="submit"></ParamsForm>
       <template #footer>
-        <el-button secondary @click="cancel"> 取消 </el-button>
+        <el-button secondary @click="cancel"> {{ $t('common.cancel') }} </el-button>
         <el-button type="primary" @click="addParams"> 添加 </el-button>
       </template>
     </el-drawer>
diff --git a/frontend/src/views/system/model/ModelList.vue b/frontend/src/views/system/model/ModelList.vue
index 0271b025..f69bb9a4 100644
--- a/frontend/src/views/system/model/ModelList.vue
+++ b/frontend/src/views/system/model/ModelList.vue
@@ -39,7 +39,7 @@ const handleModelClick = (item: any) => {
       v-model="keywords"
       clearable
       style="width: 100%; margin-right: 12px"
-      placeholder="搜索"
+      :placeholder="$t('datasource.search')"
     >
       <template #prefix>
         <el-icon>
@@ -59,7 +59,7 @@ const handleModelClick = (item: any) => {
       </div>
       <EmptyBackground
         v-if="!!keywords && !modelListWithSearch.length"
-        :description="'没有找到相关内容'"
+        :description="$t('datasource.relevant_content_found')"
         img-type="tree"
         style="width: 100%; margin-top: 100px"
       />
diff --git a/frontend/src/views/system/model/ModelListSide.vue b/frontend/src/views/system/model/ModelListSide.vue
index c63d9c5f..78552e96 100644
--- a/frontend/src/views/system/model/ModelListSide.vue
+++ b/frontend/src/views/system/model/ModelListSide.vue
@@ -46,7 +46,7 @@ const handleModelClick = (item: any) => {
       v-model="keywords"
       clearable
       style="width: 232px; margin: 16px 0 8px 24px"
-      placeholder="搜索"
+      :placeholder="$t('datasource.search')"
     >
       <template #prefix>
         <el-icon>
@@ -67,7 +67,7 @@ const handleModelClick = (item: any) => {
       </div>
       <EmptyBackground
         v-if="!!keywords && !modelListWithSearch.length"
-        :description="'没有找到相关内容'"
+        :description="$t('datasource.relevant_content_found')"
         img-type="tree"
         style="width: 100%; margin-top: 100px"
       />