From d7b383077faf5306d82374a84013b234bfc3f2c2 Mon Sep 17 00:00:00 2001
From: Lewis_yan <lewis_yan@avc.co>
Date: Thu, 9 Apr 2026 09:37:44 +0800
Subject: [PATCH] feat(i18n): adapt config module to use i18n keys

Replace hardcoded Chinese strings with t('message.pages.config.*') calls
in index.vue, addTabs.vue, and addContent.vue to support multilingual.
---
 .../system/config/components/addContent.vue   | 64 ++++++++++---------
 .../system/config/components/addTabs.vue      | 29 +++++----
 web/src/views/system/config/index.vue         | 15 +++--
 3 files changed, 58 insertions(+), 50 deletions(-)

diff --git a/web/src/views/system/config/components/addContent.vue b/web/src/views/system/config/components/addContent.vue
index e7e9e4d..1f65711 100644
--- a/web/src/views/system/config/components/addContent.vue
+++ b/web/src/views/system/config/components/addContent.vue
@@ -1,58 +1,62 @@
 <template>
 	<div style="padding: 20px">
 		<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
-			<el-form-item label="所属分组" prop="parent">
-				<el-select v-model="form.parent" placeholder="请选择分组" clearable>
+			<el-form-item :label="t('message.pages.config.form.parent')" prop="parent">
+				<el-select v-model="form.parent" :placeholder="t('message.pages.config.form.parentPlaceholder')" clearable>
 					<el-option :label="item.title" :value="item.id" :key="index" v-for="(item, index) in parentOptions"></el-option>
 				</el-select>
 			</el-form-item>
-			<el-form-item label="标题" prop="title">
-				<el-input v-model="form.title" placeholder="请输入" clearable></el-input>
+			<el-form-item :label="t('message.pages.config.form.title')" prop="title">
+				<el-input v-model="form.title" :placeholder="t('message.pages.config.form.titlePlaceholder')" clearable></el-input>
 			</el-form-item>
-			<el-form-item label="key值" prop="key">
-				<el-input v-model="form.key" placeholder="请输入" clearable></el-input>
+			<el-form-item :label="t('message.pages.config.form.key')" prop="key">
+				<el-input v-model="form.key" :placeholder="t('message.pages.config.form.keyPlaceholder')" clearable></el-input>
 			</el-form-item>
-			<el-form-item label="表单类型" prop="form_item_type">
-				<el-select v-model="form.form_item_type" placeholder="请选择" clearable>
+			<el-form-item :label="t('message.pages.config.form.formItemType')" prop="form_item_type">
+				<el-select v-model="form.form_item_type" :placeholder="t('message.pages.config.form.formItemTypePlaceholder')" clearable>
 					<el-option :label="item.label" :value="item.value" :key="index" v-for="(item, index) in dictionary('config_form_type')"></el-option>
 				</el-select>
 			</el-form-item>
 			<el-form-item
 				v-if="[4, 5, 6].indexOf(form.form_item_type) > -1"
-				label="字典key"
+				:label="t('message.pages.config.form.dictKey')"
 				prop="setting"
-				:rules="[{ required: true, message: '不能为空' }]"
+				:rules="[{ required: true, message: t('message.pages.config.validation.dictKeyRequired') }]"
 			>
-				<el-input v-model="form.setting" placeholder="请输入dictionary中key值" clearable></el-input>
+				<el-input v-model="form.setting" :placeholder="t('message.pages.config.form.dictKeyPlaceholder')" clearable></el-input>
 			</el-form-item>
 			<div v-if="[13, 14].indexOf(form.form_item_type) > -1">
 				<associationTable ref="associationTableRef" v-model="form.setting" @updateVal="associationTableUpdate"></associationTable>
 			</div>
-			<el-form-item label="校验规则">
-				<el-select v-model="form.rule" multiple placeholder="请选择(可多选)" clearable>
+			<el-form-item :label="t('message.pages.config.form.validationRule')">
+				<el-select v-model="form.rule" multiple :placeholder="t('message.pages.config.form.validationRulePlaceholder')" clearable>
 					<el-option :label="item.label" :value="item.value" :key="index" v-for="(item, index) in ruleOptions"></el-option>
 				</el-select>
 			</el-form-item>
-			<el-form-item label="提示信息" prop="placeholder">
-				<el-input v-model="form.placeholder" placeholder="请输入" clearable></el-input>
+			<el-form-item :label="t('message.pages.config.form.placeholder')" prop="placeholder">
+				<el-input v-model="form.placeholder" :placeholder="t('message.pages.config.form.placeholderPlaceholder')" clearable></el-input>
 			</el-form-item>
-			<el-form-item label="排序" prop="sort">
+			<el-form-item :label="t('message.pages.config.form.sort')" prop="sort">
 				<el-input-number v-model="form.sort" :min="0" :max="99"></el-input-number>
 			</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.buttons.createNow') }}</el-button>
 			</el-form-item>
 		</el-form>
 	</div>
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import * as api from '../api';
 import associationTable from './components/associationTable.vue';
-import {ref, reactive, onMounted, inject} from 'vue';
+import { ref, reactive, onMounted, inject } from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
 import { successMessage } from '/@/utils/message';
 import { dictionary } from '/@/utils/dictionary';
+
+const { t } = useI18n();
+
 let form: any = reactive({
 	parent: null,
 	title: null,
@@ -67,44 +71,44 @@ const rules = reactive<FormRules>({
 	parent: [
 		{
 			required: true,
-			message: '请选择',
+			message: t('message.pages.config.validation.parentRequired'),
 		},
 	],
 	title: [
 		{
 			required: true,
-			message: '请输入',
+			message: t('message.pages.config.validation.titleRequired'),
 		},
 	],
 	key: [
 		{
 			required: true,
-			message: '请输入',
+			message: t('message.pages.config.validation.keyRequired'),
 		},
 		{
 			pattern: /^[A-Za-z0-9_]+$/,
-			message: '请输入数字、字母或下划线',
+			message: t('message.pages.config.validation.keyFormat2'),
 		},
 	],
 	form_item_type: [
 		{
 			required: true,
-			message: '请输入',
+			message: t('message.pages.config.validation.formItemTypeRequired'),
 		},
 	],
 });
 let parentOptions: any = ref([]);
 let ruleOptions = ref([
 	{
-		label: '必填项',
+		label: t('message.pages.config.validationRules.required'),
 		value: '{"required": true, "message": "必填项不能为空"}',
 	},
 	{
-		label: '邮箱',
+		label: t('message.pages.config.validationRules.email'),
 		value: '{ "type": "email", "message": "请输入正确的邮箱地址"}',
 	},
 	{
-		label: 'URL地址',
+		label: t('message.pages.config.validationRules.url'),
 		value: '{ "type": "url", "message": "请输入正确的URL地址"}',
 	},
 ]);
@@ -119,16 +123,16 @@ const getParent = () => {
 		});
 };
 
-const refreshView:any = inject('refreshView')
+const refreshView: any = inject('refreshView');
 const onSubmit = async (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	await formEl.validate((valid, fields) => {
 		if (valid) {
 			api.AddObj(form).then((res: any) => {
 				if (res.code == 2000) {
-          successMessage('新增成功');
-          refreshView()
-        }
+					successMessage(t('message.pages.config.messages.addSuccess'));
+					refreshView();
+				}
 			});
 		} else {
 			console.log('error submit!', fields);
diff --git a/web/src/views/system/config/components/addTabs.vue b/web/src/views/system/config/components/addTabs.vue
index eef9018..596361c 100644
--- a/web/src/views/system/config/components/addTabs.vue
+++ b/web/src/views/system/config/components/addTabs.vue
@@ -1,26 +1,29 @@
 <template>
 	<div style="padding: 20px">
 		<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
-			<el-form-item label="标题" prop="title">
+			<el-form-item :label="t('message.pages.config.form.title')" prop="title">
 				<el-input v-model="form.title"></el-input>
 			</el-form-item>
-			<el-form-item label="key值" prop="key">
+			<el-form-item :label="t('message.pages.config.form.key')" prop="key">
 				<el-input v-model="form.key"></el-input>
 			</el-form-item>
 			<el-form-item>
-				<el-button type="primary" @click="onSubmit(formRef)">立即创建</el-button>
-				<el-button>取消</el-button>
+				<el-button type="primary" @click="onSubmit(formRef)">{{ t('message.pages.config.buttons.createNow') }}</el-button>
+				<el-button>{{ t('message.pages.config.buttons.cancel') }}</el-button>
 			</el-form-item>
 		</el-form>
 	</div>
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
 import * as api from '../api';
-import {ref, reactive, inject} from 'vue';
+import { ref, reactive, inject } from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
 import { successMessage } from '/@/utils/message';
 
+const { t } = useI18n();
+
 let form = reactive({
 	title: null,
 	key: null,
@@ -30,33 +33,31 @@ const rules = reactive<FormRules>({
 	title: [
 		{
 			required: true,
-			message: '请输入',
+			message: t('message.pages.config.validation.titleRequired'),
 		},
 	],
 	key: [
 		{
 			required: true,
-			message: '请输入',
+			message: t('message.pages.config.validation.keyRequired'),
 		},
 		{
 			pattern: /^[A-Za-z0-9]+$/,
-			message: '只能是英文和数字',
+			message: t('message.pages.config.validation.keyFormat'),
 		},
 	],
 });
 
-
-const refreshView:any = inject('refreshView')
+const refreshView: any = inject('refreshView');
 const onSubmit = async (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	await formEl.validate((valid, fields) => {
 		if (valid) {
 			api.AddObj(form).then((res: any) => {
 				if (res.code == 2000) {
-          successMessage('新增成功');
-          refreshView()
-        }
-
+					successMessage(t('message.pages.config.messages.addSuccess'));
+					refreshView();
+				}
 			});
 		} else {
 			console.log('error submit!', fields);
diff --git a/web/src/views/system/config/index.vue b/web/src/views/system/config/index.vue
index c0bfb7c..9b8ebd5 100644
--- a/web/src/views/system/config/index.vue
+++ b/web/src/views/system/config/index.vue
@@ -4,24 +4,24 @@
 			<el-header>
 				<div class="yxt-flex-between">
 					<div>
-						<el-tag>系统配置:您可以对您的网站进行自定义配置</el-tag>
+						<el-tag>{{ t('message.pages.config.header.tagText') }}</el-tag>
 					</div>
 					<div>
 						<el-button-group>
-							<el-button type="primary" size="small" :icon="FolderAdd" @click="tabsDrawer = true"> 添加分组 </el-button>
-							<el-button size="small" type="warning" :icon="Edit" @click="contentDrawer = true"> 添加内容 </el-button>
+							<el-button type="primary" size="small" :icon="FolderAdd" @click="tabsDrawer = true"> {{ t('message.pages.config.buttons.addGroup') }} </el-button>
+							<el-button size="small" type="warning" :icon="Edit" @click="contentDrawer = true"> {{ t('message.pages.config.buttons.addContent') }} </el-button>
 						</el-button-group>
 					</div>
 				</div>
 			</el-header>
 		</div>
 		<div>
-			<el-drawer v-if="tabsDrawer" title="添加分组" v-model="tabsDrawer" direction="rtl" size="30%">
+			<el-drawer v-if="tabsDrawer" :title="t('message.pages.config.dialog.addGroup')" v-model="tabsDrawer" direction="rtl" size="30%">
 				<addTabs></addTabs>
 			</el-drawer>
 		</div>
 		<div>
-			<el-drawer v-if="contentDrawer" title="添加内容" v-model="contentDrawer" direction="rtl" size="30%">
+			<el-drawer v-if="contentDrawer" :title="t('message.pages.config.dialog.addContent')" v-model="contentDrawer" direction="rtl" size="30%">
 				<addContent></addContent>
 			</el-drawer>
 		</div>
@@ -40,12 +40,15 @@
 </template>
 
 <script lang="ts" setup name="config">
+import { useI18n } from 'vue-i18n';
 import { Edit, FolderAdd } from '@element-plus/icons-vue';
 import * as api from './api';
 import addTabs from './components/addTabs.vue';
 import addContent from './components/addContent.vue';
 import formContent from './components/formContent.vue';
 import { ref, onMounted } from 'vue';
+
+const { t } = useI18n();
 let tabsDrawer = ref(false);
 let contentDrawer = ref(false);
 let editableTabsValue = ref('base');
@@ -60,7 +63,7 @@ const getTabs = () => {
 		.then((res: any) => {
 			let data = res.data;
 			data.push({
-				title: '无',
+				title: t('message.pages.config.tabs.none'),
 				icon: 'el-icon-plus',
 				key: 'null',
 			});