From 763a312ed586a608341b7af6f30c94a5fa91083b Mon Sep 17 00:00:00 2001
From: Lewis_yan <lewis_yan@avc.co>
Date: Thu, 9 Apr 2026 09:42:26 +0800
Subject: [PATCH] feat(i18n): adapt config tab cards and nested components to
 use i18n

Apply PR 157 i18n pattern to formContent, associationTable, and crudTable:
- formContent: useI18n, $t() in template, themeConfig.globalI18n in API,
  title_i18n fallback for display
- associationTable: $t() for labels and placeholders
- crudTable: useI18n for FastCRUD column titles and validation
---
 .../components/associationTable.vue           | 16 +++----
 .../components/components/crudTable.vue       | 22 +++++----
 .../system/config/components/formContent.vue  | 46 +++++++++++--------
 3 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/web/src/views/system/config/components/components/associationTable.vue b/web/src/views/system/config/components/components/associationTable.vue
index 32af76b..63d0d25 100644
--- a/web/src/views/system/config/components/components/associationTable.vue
+++ b/web/src/views/system/config/components/components/associationTable.vue
@@ -1,32 +1,32 @@
 <template>
 	<div>
 		<el-form :model="formObj" ref="associationRef">
-			<el-form-item label="关联表" prop="table" :rules="[{ required: true, message: '必填项', trigger: 'blur' }]">
-				<el-select v-model="formObj.table" filterable clearable placeholder="请选择" @change="handleChange">
+			<el-form-item :label="$t('message.pages.config.associationTable.tableLabel')" prop="table" :rules="[{ required: true, message: $t('message.pages.config.associationTable.required'), trigger: 'blur' }]">
+				<el-select v-model="formObj.table" filterable clearable :placeholder="$t('message.pages.config.associationTable.selectTable')" @change="handleChange">
 					<el-option v-for="item in tableOptions" :key="item.table" :label="item.tableName" :value="item.table">
 						<span style="float: left">{{ item.tableName }}</span>
 						<span style="float: right; color: #8492a6; font-size: 13px">{{ item.table }}</span>
 					</el-option>
 				</el-select>
 			</el-form-item>
-			<el-form-item label="显示字段" prop="field" :rules="[{ required: true, message: '必填项', trigger: 'blur' }]">
-				<el-select v-model="formObj.field" filterable clearable placeholder="请选择">
+			<el-form-item :label="$t('message.pages.config.associationTable.displayField')" prop="field" :rules="[{ required: true, message: $t('message.pages.config.associationTable.required'), trigger: 'blur' }]">
+				<el-select v-model="formObj.field" filterable clearable :placeholder="$t('message.pages.config.associationTable.selectField')">
 					<el-option v-for="item in labelOptions" :key="item.table" :label="item.title" :value="item.field">
 						<span style="float: left">{{ item.field }}</span>
 						<span style="float: right; color: #8492a6; font-size: 13px">{{ item.title }}</span>
 					</el-option>
 				</el-select>
 			</el-form-item>
-			<el-form-item label="储存字段" prop="primarykey" :rules="[{ required: true, message: '必填项', trigger: 'blur' }]">
-				<el-select v-model="formObj.primarykey" filterable clearable placeholder="请选择">
+			<el-form-item :label="$t('message.pages.config.associationTable.storageField')" prop="primarykey" :rules="[{ required: true, message: $t('message.pages.config.associationTable.required'), trigger: 'blur' }]">
+				<el-select v-model="formObj.primarykey" filterable clearable :placeholder="$t('message.pages.config.associationTable.selectField')">
 					<el-option v-for="(item, index) in labelOptions" :key="index" :label="item.title" :value="item.field">
 						<span style="float: left">{{ item.field }}</span>
 						<span style="float: right; color: #8492a6; font-size: 13px">{{ item.title }}</span>
 					</el-option>
 				</el-select>
 			</el-form-item>
-			<el-form-item label="过滤条件" prop="oldSearchField" :rules="[{ required: true, message: '必填项', trigger: 'blur' }]">
-				<el-select v-model="formObj.oldSearchField" multiple filterable clearable placeholder="请选择" @change="handleSearch">
+			<el-form-item :label="$t('message.pages.config.associationTable.filterCondition')" prop="oldSearchField" :rules="[{ required: true, message: $t('message.pages.config.associationTable.required'), trigger: 'blur' }]">
+				<el-select v-model="formObj.oldSearchField" multiple filterable clearable :placeholder="$t('message.pages.config.associationTable.selectField')" @change="handleSearch">
 					<el-option v-for="(item, index) in labelOptions" :key="index" :label="item.title" :value="item.field">
 						<span style="float: left">{{ item.field }}</span>
 						<span style="float: right; color: #8492a6; font-size: 13px">{{ item.title }}</span>
diff --git a/web/src/views/system/config/components/components/crudTable.vue b/web/src/views/system/config/components/components/crudTable.vue
index 1bfcfe9..c533d27 100644
--- a/web/src/views/system/config/components/components/crudTable.vue
+++ b/web/src/views/system/config/components/components/crudTable.vue
@@ -6,7 +6,8 @@
 </template>
 
 <script setup lang="ts">
-import {computed, defineComponent, onMounted, watch} from "vue";
+import { computed, defineComponent, onMounted, watch } from "vue";
+import { useI18n } from "vue-i18n";
 import {CreateCrudOptionsProps, CreateCrudOptionsRet, useFs, AddReq,
   compute,
   DelReq,
@@ -14,6 +15,7 @@ import {CreateCrudOptionsProps, CreateCrudOptionsRet, useFs, AddReq,
   EditReq,
   UserPageQuery,
   UserPageRes} from "@fast-crud/fast-crud";
+const { t } = useI18n();
 const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   return {
     crudOptions: {
@@ -51,38 +53,38 @@ const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsPr
       },
       columns: {
         title: {
-          title: "标题",
+          title: t('message.pages.config.formContent.variableTitle'),
           form:{
             component:{
-              placeholder:"请输入标题"
+              placeholder: t('message.pages.config.formContent.titlePlaceholder'),
             },
             rules:[{
               required: true,
-              message: '必须填写',
+              message: t('message.pages.config.validation.titleRequired'),
             }]
           }
         },
         key: {
-          title: "键名",
+          title: t('message.pages.config.formContent.variableName'),
           form:{
             component:{
-              placeholder:"请输入键名"
+              placeholder: t('message.pages.config.formContent.keyPrefix'),
             },
             rules:[{
               required: true,
-              message: '必须填写',
+              message: t('message.pages.config.validation.keyRequired'),
             }]
           }
         },
         value: {
-          title: "键值",
+          title: t('message.pages.config.formContent.variableValue'),
           form:{
             component:{
-              placeholder:"请输入键值"
+              placeholder: t('message.pages.config.formContent.variableValue'),
             },
             rules:[{
               required: true,
-              message: '必须填写',
+              message: t('message.pages.config.validation.dictKeyRequired'),
             }]
           }
         }
diff --git a/web/src/views/system/config/components/formContent.vue b/web/src/views/system/config/components/formContent.vue
index 16faf51..616ee70 100644
--- a/web/src/views/system/config/components/formContent.vue
+++ b/web/src/views/system/config/components/formContent.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :span="4">变量标题</el-col>
-      <el-col :span="4">变量名</el-col>
-      <el-col :span="10">变量值</el-col>
-      <el-col :span="2" :offset="1">是否前端配置</el-col>
-      <el-col :span="3" >操作</el-col>
+      <el-col :span="4">{{ $t('message.pages.config.formContent.variableTitle') }}</el-col>
+      <el-col :span="4">{{ $t('message.pages.config.formContent.variableName') }}</el-col>
+      <el-col :span="10">{{ $t('message.pages.config.formContent.variableValue') }}</el-col>
+      <el-col :span="2" :offset="1">{{ $t('message.pages.config.formContent.isFrontendConfig') }}</el-col>
+      <el-col :span="3" >{{ $t('message.pages.config.formContent.actions') }}</el-col>
     </el-row>
     <el-form ref="formRef" :model="formData" label-width="0px" label-position="left" style="margin-top: 20px">
       <el-form-item
@@ -15,11 +15,11 @@
           v-for="(item, index) in formList"
       >
         <el-col :span="4">
-          <el-input v-if="item.edit" v-model="item.title" style="display: inline-block; width: 200px" placeholder="请输入标题"></el-input>
-          <span v-else>{{ item.title }}</span>
+          <el-input v-if="item.edit" v-model="item.title" style="display: inline-block; width: 200px" :placeholder="$t('message.pages.config.formContent.titlePlaceholder')"></el-input>
+          <span v-else>{{ item.title_i18n || item.title }}</span>
         </el-col>
         <el-col :span="4" >
-          <el-input v-if="item.edit" v-model="item.new_key" style="width: 200px" placeholder="请输入变量key">
+          <el-input v-if="item.edit" v-model="item.new_key" style="width: 200px" :placeholder="$t('message.pages.config.formContent.keyPrefix')">
             <template slot="prepend">
               <span style="padding: 0px 5px">{{ editableTabsItem.key }}</span>
             </template>
@@ -118,7 +118,7 @@
                 list-type="picture-card"
             >
               <i class="el-icon-plus"></i>
-              <div slot="tip" class="el-upload__tip">请选取图片,并且只能上传jpg/png文件</div>
+              <div slot="tip" class="el-upload__tip">{{ $t('message.pages.config.formContent.selectImageTip') }}</div>
             </el-upload>
             <el-dialog :visible.sync="dialogImgVisible">
               <img width="100%" :src="dialogImageUrl" alt="" />
@@ -150,7 +150,7 @@
                 list-type="picture-card"
             >
               <i class="el-icon-plus"></i>
-              <div slot="tip" class="el-upload__tip">请选取图片,并且只能上传jpg/png文件</div>
+              <div slot="tip" class="el-upload__tip">{{ $t('message.pages.config.formContent.selectImageTip') }}</div>
             </el-upload>
             <el-dialog :visible.sync="dialogImgVisible">
               <img width="100%" :src="dialogImageUrl" alt="" />
@@ -182,9 +182,9 @@
           <el-switch v-model="item.status" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
         </el-col>
         <el-col :span="3">
-          <el-button v-if="item.edit" size="mini" type="primary" :icon="Finished" @click="onEditSave(item)">保存</el-button>
+          <el-button v-if="item.edit" size="mini" type="primary" :icon="Finished" @click="onEditSave(item)">{{ $t('message.pages.config.formContent.save') }}</el-button>
           <el-button v-else size="mini" type="primary" :icon="Edit" @click="onEdit(index)"></el-button>
-          <el-popconfirm title="确定删除该条数据吗？" @confirm="onDelRow(item)">
+          <el-popconfirm :title="$t('message.pages.config.formContent.deleteConfirm')" @confirm="onDelRow(item)">
             <template #reference>
               <el-button size="mini" type="danger" :icon="Delete" ></el-button>
             </template>
@@ -192,13 +192,14 @@
         </el-col>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit(formRef)">确定</el-button>
+        <el-button type="primary" @click="onSubmit(formRef)">{{ $t('message.pages.config.formContent.submit') }}</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import * as api from '../api';
 import { dictionary } from '/@/utils/dictionary';
 import { getBaseURL } from '/@/utils/baseUrl';
@@ -208,6 +209,11 @@ import { successMessage, errorMessage } from '/@/utils/message';
 import { Session } from '/@/utils/storage';
 import {Edit,Finished,Delete} from "@element-plus/icons-vue";
 import crudTable from "./components/crudTable.vue"
+import { storeToRefs } from 'pinia';
+import pinia from '/@/stores/index';
+import { useThemeConfig } from '/@/stores/themeConfig';
+const { t } = useI18n();
+const { themeConfig } = storeToRefs(useThemeConfig(pinia));
 const props = defineProps(['options', 'editableTabsItem']);
 
 let formData: any = ref({});
@@ -223,7 +229,7 @@ let uploadImgKey = ref(null);
 
 // 获取数据
 const getInit = () => {
-  api.GetList({ parent: props.options.id, limit: 999 }).then((res: any) => {
+  api.GetList({ parent: props.options.id, limit: 999, language: themeConfig.value.globalI18n }).then((res: any) => {
     let data = res.data;
     formList.value = data;
     const _formData: any = {};
@@ -257,7 +263,7 @@ const onSubmit = (formEl: FormInstance | undefined) => {
         if (['img', 'imgs'].indexOf(item.form_item_type_label) > -1) {
           for (const arr of item.rule) {
             if (arr.required && item.value === null) {
-              errorMessage(item.title + '不能为空');
+              errorMessage(item.title + t('message.pages.config.validation.dictKeyRequired'));
               return;
             }
           }
@@ -270,7 +276,7 @@ const onSubmit = (formEl: FormInstance | undefined) => {
   formEl.validate((valid:any) => {
     if (valid) {
       api.saveContent(formList.value).then((res:any) => {
-        successMessage('保存成功');
+        successMessage(t('message.pages.config.messages.saveSuccess'));
         refreshView&&refreshView();
       });
     } else {
@@ -304,7 +310,7 @@ const handleUploadSuccess = (response: any, file: any, fileList: any, imgKey: an
     const { name } = file;
     const type = isImage(name);
     if (!type) {
-      errorMessage('只允许上传图片');
+      errorMessage(t('message.pages.config.messages.invalidImage'));
     } else {
       const uploadImgKey = formData[imgKey];
       if (!uploadImgKey || uploadImgKey === '') {
@@ -318,18 +324,18 @@ const handleUploadSuccess = (response: any, file: any, fileList: any, imgKey: an
       formData[imgKey].push(dict);
     }
   } else {
-    errorMessage('上传失败,' + JSON.stringify(msg));
+    errorMessage(t('message.pages.config.messages.uploadFailed') + ',' + JSON.stringify(msg));
   }
 };
 
 // 上传失败
 const handleError = () => {
-  errorMessage('上传失败');
+  errorMessage(t('message.pages.config.messages.uploadFailed'));
 };
 
 // 上传超出限制
 const handleExceed = () => {
-  errorMessage('超过文件上传数量');
+  errorMessage(t('message.pages.config.messages.exceedFileLimit'));
 };
 
 // 删除时的钩子