From 946b7b4f1fed2ad7ad2accca83a3ae3c34d1d939 Mon Sep 17 00:00:00 2001
From: Shenhan11 <1670285296@qq.com>
Date: Wed, 24 Dec 2025 20:02:45 +0800
Subject: [PATCH] feat(i18n): add internationalization for common UI components

Signed-off-by: Shenhan11 <1670285296@qq.com>
---
 .../vgpu/views/monitor/overview/getOptions.js  |  3 ++-
 .../vgpu/views/monitor/overview/index.vue      | 10 +++++-----
 packages/web/src/components/CodePre.vue        |  5 ++++-
 packages/web/src/components/Confirm/index.js   |  5 +++--
 packages/web/src/components/Confirm/index.vue  |  5 +++--
 packages/web/src/components/FilterInput.vue    |  7 +++++--
 .../web/src/components/FormPlus/FormItem.vue   |  6 ++++--
 .../web/src/components/FormPlus/FormList.vue   |  9 ++++++---
 packages/web/src/components/FormPlus/index.vue |  4 +++-
 packages/web/src/components/FormPlusDrawer.vue |  7 +++++--
 packages/web/src/components/Message/index.js   |  4 +++-
 packages/web/src/components/RadioPlus.vue      |  7 +++++--
 .../web/src/components/TablePlus/SearchTag.vue |  7 +++++--
 packages/web/src/components/TextPlus.vue       |  4 +++-
 packages/web/src/locales/en.js                 | 17 +++++++++++++++++
 packages/web/src/locales/zh.js                 | 18 +++++++++++++++++-
 packages/web/src/utils/index.js                |  3 ++-
 packages/web/src/utils/request.js              |  5 +++--
 packages/web/src/views/error-page/401.vue      |  2 +-
 19 files changed, 96 insertions(+), 32 deletions(-)

diff --git a/packages/web/projects/vgpu/views/monitor/overview/getOptions.js b/packages/web/projects/vgpu/views/monitor/overview/getOptions.js
index db2f2324..dd4e4dad 100644
--- a/packages/web/projects/vgpu/views/monitor/overview/getOptions.js
+++ b/packages/web/projects/vgpu/views/monitor/overview/getOptions.js
@@ -2,6 +2,7 @@ import { timeParse } from '@/utils';
 import { cloneDeep } from 'lodash';
 import nodeApi from '~/vgpu/api/node';
 import { ElMessage } from 'element-plus';
+import i18n from '@/locales';
 
 export const getResourceStatus = (statusConfig) => {
   return {
@@ -280,7 +281,7 @@ export const handleChartClick = async (params, router) => {
     const uuid = node.uid;
     router.push(`/admin/vgpu/node/admin/${uuid}?nodeName=${name}`);
   } else {
-    ElMessage.error('节点未找到');
+    ElMessage.error(i18n.global.t('node.nodeNotFound'));
   }
 };
 
diff --git a/packages/web/projects/vgpu/views/monitor/overview/index.vue b/packages/web/projects/vgpu/views/monitor/overview/index.vue
index 2f5ffd21..d320b26f 100644
--- a/packages/web/projects/vgpu/views/monitor/overview/index.vue
+++ b/packages/web/projects/vgpu/views/monitor/overview/index.vue
@@ -158,7 +158,7 @@ const _cardGaugeConfig = useInstantVector([
     percentQuery: `avg(sum (hami_container_vgpu_allocated) by (instance))/avg(sum (hami_vgpu_count) by (instance)) *100`,
     total: 0,
     used: 0,
-    unit: '个',
+    unit: t('common.unitCount'),
   },
   {
     title: 'computeAllocRate',
@@ -224,19 +224,19 @@ const resourceOverview = computed(() => [
     title: t('dashboard.node'),
     count: resourceCounts.node,
     icon: 'vgpu-node',
-    unit: '个',
+    unit: t('common.unitCount'),
   },
   {
     title: t('dashboard.card'),
     count: resourceCounts.card,
     icon: 'vgpu-gpu-d',
-    unit: '张',
+    unit: t('common.unitSheet'),
   },
   {
     title: t('dashboard.vgpu'),
     count: resourceCounts.vgpu,
     icon: 'vgpu-card',
-    unit: '个',
+    unit: t('common.unitCount'),
   },
   {
     title: t('dashboard.compute'),
@@ -286,7 +286,7 @@ const cardDetail = useInstantVector([
     title: 'vGPU',
     count: 0,
     query: 'avg(hami_vgpu_count)',
-    unit: '个',
+    unit: t('common.unitCount'),
     icon: 'gpu2',
   },
   {
diff --git a/packages/web/src/components/CodePre.vue b/packages/web/src/components/CodePre.vue
index 1929faad..b5cab3a8 100644
--- a/packages/web/src/components/CodePre.vue
+++ b/packages/web/src/components/CodePre.vue
@@ -9,6 +9,9 @@
 
 <script setup>
 import { ElMessage } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
   value: String,
@@ -22,7 +25,7 @@ const handleCopy = () => {
   document.execCommand('copy');
   document.body.removeChild(textarea);
 
-  ElMessage.success('复制成功');
+  ElMessage.success(t('common.copySuccess'));
 };
 </script>
 
diff --git a/packages/web/src/components/Confirm/index.js b/packages/web/src/components/Confirm/index.js
index ba3486ec..0ed3f41c 100644
--- a/packages/web/src/components/Confirm/index.js
+++ b/packages/web/src/components/Confirm/index.js
@@ -1,5 +1,6 @@
 import ConfirmComponent from './index.vue'
 import { createVNode, render } from 'vue'
+import i18n from '@/locales'
 
 const Confirm = {
     install(app) {
@@ -8,8 +9,8 @@ const Confirm = {
         app.config.globalProperties.$Confirm = (confirmText, confirmObj, fn) => {
             if(JSON.stringify(confirmObj) === '{}') {
                 confirmObj = {
-                    confirmButtonText: '确定',
-                    cancelButtonText: '取消',
+                    confirmButtonText: i18n.global.t('common.confirm'),
+                    cancelButtonText: i18n.global.t('common.cancel'),
                     type: '',
                 }
             }
diff --git a/packages/web/src/components/Confirm/index.vue b/packages/web/src/components/Confirm/index.vue
index 7748bb0d..aade99e3 100644
--- a/packages/web/src/components/Confirm/index.vue
+++ b/packages/web/src/components/Confirm/index.vue
@@ -65,6 +65,7 @@
 
 <script>
 import { Modal } from 'bootstrap';
+import i18n from '@/locales';
 
 export default {
   //   props: {
@@ -92,8 +93,8 @@ export default {
       removeModal: null,
       fn: null,
       confirmObj: {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+        confirmButtonText: i18n.global.t('common.confirm'),
+        cancelButtonText: i18n.global.t('common.cancel'),
         type: '',
       },
       confirmText: '',
diff --git a/packages/web/src/components/FilterInput.vue b/packages/web/src/components/FilterInput.vue
index 7db84d25..61201ddd 100644
--- a/packages/web/src/components/FilterInput.vue
+++ b/packages/web/src/components/FilterInput.vue
@@ -24,7 +24,7 @@
       >
         <el-input
           v-model="searchVal"
-          placeholder="请输入搜索关键词"
+          :placeholder="t('common.searchKeyword')"
           @keyup.enter="handleSearch"
           clearable
           @focus="openSearchDropdown"
@@ -49,6 +49,9 @@
 import { ref, computed } from 'vue';
 import { ElMessage } from 'element-plus';
 import { omit } from 'lodash';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
   modelValue: Object, //数据源，双向绑定
@@ -111,7 +114,7 @@ const handleSearch = () => {
       source.filters?.find((item) => item.text === textQ)?.value || textQ;
     emit('update:modelValue', { ...props.modelValue, [type]: value });
   } else {
-    ElMessage.error('输入不合法');
+    ElMessage.error(t('common.inputInvalid'));
   }
 
   searchVal.value = '';
diff --git a/packages/web/src/components/FormPlus/FormItem.vue b/packages/web/src/components/FormPlus/FormItem.vue
index a0c87537..29360cf5 100644
--- a/packages/web/src/components/FormPlus/FormItem.vue
+++ b/packages/web/src/components/FormPlus/FormItem.vue
@@ -28,7 +28,7 @@
     <el-input
       v-model="value"
       autocomplete="off"
-      placeholder="请输入"
+      :placeholder="t('common.pleaseInput')"
       v-if="component === 'input'"
       v-bind="componentProps"
       class="form-item-input"
@@ -173,6 +173,7 @@ import {
   inject,
   watchEffect,
 } from 'vue';
+import { useI18n } from 'vue-i18n';
 import FormList from './FormList.vue';
 import TableSelect from './TableSelect';
 import Cascader from './elements/Cascader.vue';
@@ -278,6 +279,7 @@ const value = computed({
 });
 
 const schema = inject('$schema', {});
+const { t } = useI18n();
 
 const computeRules = computed(() => {
   const { rules, required } = props;
@@ -287,7 +289,7 @@ const computeRules = computed(() => {
   if (required) {
     ruleData.push({
       required: true,
-      message: '该字段是必填字段',
+      message: t('common.fieldRequired'),
       trigger: 'blur',
     });
   }
diff --git a/packages/web/src/components/FormPlus/FormList.vue b/packages/web/src/components/FormPlus/FormList.vue
index 1e18a519..029f2c8a 100644
--- a/packages/web/src/components/FormPlus/FormList.vue
+++ b/packages/web/src/components/FormPlus/FormList.vue
@@ -71,7 +71,7 @@
           {{ item.label }}
           <el-tooltip
             effect="dark"
-            content="以 art. 为前缀的属性不支持修改和删除"
+            :content="t('common.artPrefixTip')"
             placement="top"
             v-if="item.tip"
           >
@@ -97,7 +97,7 @@
       <template #append>
         <div class="table-append">
           <el-button v-if="allowAdd && !isMax" @click="add" :icon="Plus"
-            >增加</el-button
+            >{{ addTitle || t('common.add') }}</el-button
           >
         </div>
       </template>
@@ -127,6 +127,9 @@ import {
 import { Plus, Minus } from '@element-plus/icons-vue';
 import { deepParse } from '@/utils/form';
 import FormItem from './FormItem.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
   modelValue: Array,
@@ -169,7 +172,7 @@ const props = defineProps({
   },
   addTitle: {
     type: String,
-    default: '增加',
+    default: '',
   },
   or: Boolean,
 });
diff --git a/packages/web/src/components/FormPlus/index.vue b/packages/web/src/components/FormPlus/index.vue
index fc141a34..0237eda0 100644
--- a/packages/web/src/components/FormPlus/index.vue
+++ b/packages/web/src/components/FormPlus/index.vue
@@ -27,12 +27,14 @@ import {
 import { ElMessage } from 'element-plus';
 import { timeParse, parseMemory } from '@/utils';
 import { useStore } from 'vuex';
+import { useI18n } from 'vue-i18n';
 import { parseFormItems, handleLinkages } from './utils';
 import FormRender from './FormRender.vue';
 
 const formRef = ref(null);
 
 const store = useStore();
+const { t } = useI18n();
 
 const props = defineProps({
   // 表单数据源，双向绑定
@@ -88,7 +90,7 @@ const submit = async () => {
     //转化成普通对象，便于阅读
     return { ...form.value };
   } catch (e) {
-    ElMessage.error('表单填写校验不通过！');
+    ElMessage.error(t('common.formValidationFailed'));
     return Promise.reject(e);
   }
 };
diff --git a/packages/web/src/components/FormPlusDrawer.vue b/packages/web/src/components/FormPlusDrawer.vue
index 9eb6e3ac..9e1e7053 100644
--- a/packages/web/src/components/FormPlusDrawer.vue
+++ b/packages/web/src/components/FormPlusDrawer.vue
@@ -18,8 +18,8 @@
     <slot />
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="visible = false">取消</el-button>
-        <el-button type="primary" @click="handleOk">确定</el-button>
+        <el-button @click="visible = false">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="handleOk">{{ t('common.confirm') }}</el-button>
       </div>
     </template>
   </el-drawer>
@@ -27,6 +27,9 @@
 
 <script setup>
 import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const formPlusRef = ref(null);
 
diff --git a/packages/web/src/components/Message/index.js b/packages/web/src/components/Message/index.js
index c4b329b1..cfa3d8bd 100644
--- a/packages/web/src/components/Message/index.js
+++ b/packages/web/src/components/Message/index.js
@@ -1,12 +1,14 @@
 import MessageComponent from './index.vue'
 import { createVNode, render } from 'vue'
+import i18n from '@/locales'
+
 const Message = {
     install(app) {
       const Vnode = createVNode(MessageComponent)
   		render(Vnode, document.body)
       app.config.globalProperties.$Message = (type, msg, duration) => {
         if(!msg){
-            msg = type==='success'?'操作成功':type==='info'?'消息提示':type==='warning'?'操作警告':type==='danger'?'操作失败':''
+            msg = type==='success'?i18n.global.t('common.operationSuccess'):type==='info'?i18n.global.t('common.messageTip'):type==='warning'?i18n.global.t('common.operationWarning'):type==='danger'?i18n.global.t('common.operationFailed'):''
         }
         duration = duration || 2000
 				Vnode.component.ctx.showMessage(type, msg, duration)
diff --git a/packages/web/src/components/RadioPlus.vue b/packages/web/src/components/RadioPlus.vue
index 4ee8c267..3e23dc44 100644
--- a/packages/web/src/components/RadioPlus.vue
+++ b/packages/web/src/components/RadioPlus.vue
@@ -1,7 +1,7 @@
 <template>
   <el-radio-group
     v-model="selectVal"
-    :placeholder="placeholder"
+    :placeholder="placeholder || t('common.pleaseSelect')"
     :disabled="disabled"
     @change="selectChange"
     :class="{ 'radio-plus': true, renderLabelIcon }"
@@ -65,6 +65,9 @@ import {
 } from 'vue';
 import { isString, isEqual, debounce } from 'lodash';
 import request from '@/utils/request';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
   modelValue: {},
@@ -74,7 +77,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '请选择',
+    default: '',
   },
   disabled: {
     type: Boolean,
diff --git a/packages/web/src/components/TablePlus/SearchTag.vue b/packages/web/src/components/TablePlus/SearchTag.vue
index e377abdb..63305340 100644
--- a/packages/web/src/components/TablePlus/SearchTag.vue
+++ b/packages/web/src/components/TablePlus/SearchTag.vue
@@ -9,6 +9,9 @@
 import { computed, isVNode } from 'vue';
 import { isArray } from 'lodash';
 import { ElPopover, ElTag } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
   label: String,
@@ -24,7 +27,7 @@ const parseValue = computed(() => {
     return (
       <ElPopover trigger="hover">
         {{
-          reference: () => <span>{props.value.length}个</span>,
+          reference: () => <span>{props.value.length}{t('common.unitCount')}</span>,
           default: () => (
             <div
               style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}
@@ -40,6 +43,6 @@ const parseValue = computed(() => {
   }
   const index = ['true', 'false'].indexOf(props.value);
   if (index == -1) return props.value;
-  return index == 0 ? '是' : '否';
+  return index == 0 ? t('common.yes') : t('common.no');
 });
 </script>
diff --git a/packages/web/src/components/TextPlus.vue b/packages/web/src/components/TextPlus.vue
index 8e9f304a..9776e49e 100644
--- a/packages/web/src/components/TextPlus.vue
+++ b/packages/web/src/components/TextPlus.vue
@@ -10,8 +10,10 @@
 <script setup>
 import { ElMessage } from 'element-plus';
 import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
 
 const router = useRouter();
+const { t } = useI18n();
 
 const props = defineProps({
   text: String,
@@ -27,7 +29,7 @@ const handleCopy = () => {
   document.execCommand('copy');
   document.body.removeChild(textarea);
 
-  ElMessage.success('复制成功');
+  ElMessage.success(t('common.copySuccess'));
 };
 
 const handleClick = () => {
diff --git a/packages/web/src/locales/en.js b/packages/web/src/locales/en.js
index 9ced8df5..1eb9e185 100644
--- a/packages/web/src/locales/en.js
+++ b/packages/web/src/locales/en.js
@@ -25,6 +25,22 @@ export default {
     advanced: 'Advanced',
     operation: 'Operation',
     details: 'Details',
+    formValidationFailed: 'Form validation failed!',
+    requestError: 'Request error',
+    tip: 'Tip',
+    copySuccess: 'Copy successful',
+    inputInvalid: 'Invalid input',
+    operationSuccess: 'Operation successful',
+    messageTip: 'Message',
+    operationWarning: 'Operation warning',
+    operationFailed: 'Operation failed',
+    fieldRequired: 'This field is required',
+    yes: 'Yes',
+    no: 'No',
+    unitCount: '',
+    unitSheet: '',
+    artPrefixTip: 'Properties prefixed with art. cannot be modified or deleted',
+    searchKeyword: 'Search keyword',
   },
   routes: {
     gpuAdmin: 'GPU',
@@ -214,6 +230,7 @@ export default {
       backHome: 'Back to home',
       backPrevious: 'Back to previous page',
       back: 'Back',
+      dialogTitle: 'Just Look',
     }
   },
   timeRange: {
diff --git a/packages/web/src/locales/zh.js b/packages/web/src/locales/zh.js
index f32934ac..26c3c532 100644
--- a/packages/web/src/locales/zh.js
+++ b/packages/web/src/locales/zh.js
@@ -2,7 +2,6 @@ export default {
   common: {
     language: '中文',
     lang: { zh: '中文', en: 'English' },
-    lang: { zh: '中文', en: 'English' },
     switchLanguage: '切换语言',
     profile: '个人中心',
     logout: '退出登录',
@@ -26,6 +25,22 @@ export default {
     advanced: '高级',
     operation: '操作',
     details: '详情',
+    formValidationFailed: '表单填写校验不通过！',
+    requestError: '请求异常',
+    tip: '提示',
+    copySuccess: '复制成功',
+    inputInvalid: '输入不合法',
+    operationSuccess: '操作成功',
+    messageTip: '消息提示',
+    operationWarning: '操作警告',
+    operationFailed: '操作失败',
+    fieldRequired: '该字段是必填字段',
+    yes: '是',
+    no: '否',
+    unitCount: '个',
+    unitSheet: '张',
+    artPrefixTip: '以 art. 为前缀的属性不支持修改和删除',
+    searchKeyword: '搜索关键词',
   },
   routes: {
     gpuAdmin: 'GPU 管理',
@@ -215,6 +230,7 @@ export default {
       backHome: '回首页',
       backPrevious: '返回上一个页面',
       back: '返回',
+      dialogTitle: '随便看',
     }
   },
   timeRange: {
diff --git a/packages/web/src/utils/index.js b/packages/web/src/utils/index.js
index c030cd9e..dbbb2655 100644
--- a/packages/web/src/utils/index.js
+++ b/packages/web/src/utils/index.js
@@ -1,5 +1,6 @@
 import { isFunction } from 'lodash';
 import { ElMessage } from 'element-plus';
+import i18n from '@/locales';
 /**
  * Created by PanJiaChen on 16/11/18.
  */
@@ -538,7 +539,7 @@ export function copy(str) {
   document.execCommand('copy');
   document.body.removeChild(textarea);
 
-  ElMessage.success('复制成功');
+  ElMessage.success(i18n.global.t('common.copySuccess'));
 }
 
 export function roundToDecimal(num, decimalPlaces) {
diff --git a/packages/web/src/utils/request.js b/packages/web/src/utils/request.js
index dda79325..f41db603 100644
--- a/packages/web/src/utils/request.js
+++ b/packages/web/src/utils/request.js
@@ -1,6 +1,7 @@
 import axios from 'axios';
 
 import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
+import i18n from '@/locales';
 
 const service = axios.create({
   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
@@ -36,11 +37,11 @@ service.interceptors.response.use(
   async (response) => {
     const res = response.data;
     // if the custom code is not 0, it is judged as an error.
-    if (res.code != null && res.code > 0 && res.code != 200) {
+    if (res.code !== null && res.code > 0 && res.code !== 200) {
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
         // to re-login
-        await ElMessageBox.alert('请求异常', '提示');
+        await ElMessageBox.alert(i18n.global.t('common.requestError'), i18n.global.t('common.tip'));
       } else {
         ElNotification({
           title: res.reason,
diff --git a/packages/web/src/views/error-page/401.vue b/packages/web/src/views/error-page/401.vue
index 81aa5fbf..7515d7a1 100644
--- a/packages/web/src/views/error-page/401.vue
+++ b/packages/web/src/views/error-page/401.vue
@@ -28,7 +28,7 @@
         />
       </el-col>
     </el-row>
-    <el-dialog v-model:visible="dialogVisible" title="随便看">
+    <el-dialog v-model:visible="dialogVisible" :title="$t('error.401.dialogTitle')">
       <img :src="ewizardClap" class="pan-img" />
     </el-dialog>
   </div>