feat: Internationalization

Author: dataeaseShu

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>

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?"
   }
-}
+}

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": "确定还原至社区版？"
   }
-}
+}

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>

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,22 +245,27 @@ 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>
                     </el-tooltip>
                   </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,29 +277,38 @@ 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>
     </div>
   </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;
+          }
         }
       }
     }