refactor(page-table, page-dialog-form): 实现国际化自动响应，移除提前翻译逻辑

1. 为page-table和page-dialog-form添加内部$t翻译逻辑，支持语言切换自动更新
2. 移除data()中提前翻译的k()辅助函数，改为直接传入i18n key
3. 更新文档说明最新的i18n使用规范，新增迁移指南文档
4. 修复工厂区域页面的国际化调用方式，统一使用this.key()传参

src/components/page-dialog-form/index.vue

@@ -8,7 +8,7 @@
     不支持复杂表单联动——如有需要，通过默认插槽自定义内容。
 
     依赖：element-ui 的 <el-dialog> <el-form> <el-input> <el-select>
-    i18n：由调用方负责翻译，组件直接渲染传入的文本
+    i18n：组件内部通过 $t() 翻译传入的 i18n key，切换语言时自动响应
 
     @author 前端团队
     @since  2026-05
@@ -22,7 +22,7 @@
   -->
   <el-dialog
     :visible.sync="visibleProxy"
-    :title="title"
+    :title="$t(title)"
     :width="width"
     :close-on-click-modal="false"
     :destroy-on-close="true"
@@ -37,7 +37,7 @@
     <el-form
       ref="form"
       :model="formData"
-      :rules="rules"
+      :rules="translatedRules"
       :label-width="labelWidth || '100px'"
     >
       <!--
@@ -51,7 +51,7 @@
       <el-form-item
         v-for="col in flatFormCols"
         :key="col.prop"
-        :label="col.label"
+        :label="$t(col.label)"
         :prop="col.prop"
       >
         <!-- ===== 输入框类型 ===== -->
@@ -64,7 +64,7 @@
         <el-input
           v-if="col.type === 'input'"
           v-model="formData[col.prop]"
-          :placeholder="col.placeholder"
+          :placeholder="$t(col.placeholder)"
           :type="col.inputType || 'text'"
           :autosize="col.autosize"
           :clearable="col.clearable !== false"
@@ -79,7 +79,7 @@
         <el-select
           v-else-if="col.type === 'select'"
           v-model="formData[col.prop]"
-          :placeholder="col.placeholder"
+          :placeholder="$t(col.placeholder)"
           :clearable="col.clearable !== false"
           :style="col.style"
           :filterable="col.filterable !== false"
@@ -107,8 +107,8 @@
       由调用方负责翻译，传已翻译的文本即可
     -->
     <template #footer>
-      <el-button @click="onClose">{{ cancelText }}</el-button>
-      <el-button type="primary" :loading="submitting" @click="onSubmit">{{ confirmText }}</el-button>
+      <el-button @click="onClose">{{ $t(cancelText) }}</el-button>
+      <el-button type="primary" :loading="submitting" @click="onSubmit">{{ $t(confirmText) }}</el-button>
     </template>
   </el-dialog>
 </template>
@@ -243,6 +243,15 @@ export default {
      */
     flatFormCols () {
       return this.formCols.flat()
+    },
+
+    translatedRules () {
+      const rules = this.rules || {}
+      const translated = {}
+      for (const [field, validators] of Object.entries(rules)) {
+        translated[field] = validators.map(v => ({ ...v, message: this.$t(v.message) }))
+      }
+      return translated
     }
   },
   methods: {
@@ -258,7 +267,6 @@ export default {
     onSubmit () {
       this.$refs.form.validate((valid, invalidFields) => {
         if (!valid) {
-          // 验证失败：取第一条错误信息提示用户
           const firstKey = Object.keys(invalidFields)[0]
           if (firstKey && invalidFields[firstKey].length) {
             const msg = invalidFields[firstKey][0].message

src/components/page-table/index.vue

@@ -35,7 +35,7 @@
           :disabled="btn.needSelection && !selectedCount"
           @click="btn.onClick"
         >
-          {{ btn.label }}
+          {{ $t(btn.label) }}
         </el-button>
         <!-- 自定义工具栏内容：如打印按钮、列筛选器等 -->
         <slot name="toolbar-extra" />
@@ -91,7 +91,7 @@
             :key="'idx-' + col.idx"
             type="index"
             :width="col.width"
-            :label="col.label || '#'"
+            :label="$t(col.label) || '#'"
           />
           <!-- 3. 操作列：自动渲染 rowButtons（编辑/删除等行内按钮） -->
           <!--
@@ -382,6 +382,9 @@ export default {
       delete attrs.idx
       delete attrs.slot
       delete attrs.headerSlot
+      if (attrs.label) {
+        attrs.label = this.$t(attrs.label)
+      }
       return attrs
     },
 

src/views/production-master-data/factory-model/factory-area/index.vue

@@ -58,8 +58,8 @@
       :rules="rules"
       :label-width="'100px'"
       :submitting="submitting"
-      :confirm-text="$t(key('confirm'))"
-      :cancel-text="$t(key('cancel'))"
+      :confirm-text="key('confirm')"
+      :cancel-text="key('cancel')"
       @submit="onDialogSubmit"
       @close="onDialogClose"
     />
@@ -84,8 +84,6 @@ export default {
   components: { PageTable, PageDialogForm },
   mixins: [i18nMixin('page.production_master_data.factory_model.factory_area')],
   data () {
-    const t = this.$t.bind(this)
-    const k = (s) => t(this.key(s))
     return {
       loading: false,
       submitting: false,
@@ -100,12 +98,12 @@ export default {
       formData: { code: '', name: '', remark: '' },
       rules: {
         code: [
-          { required: true, message: k('enter_code'), trigger: 'blur' },
-          { min: 1, max: 100, message: k('remark_length'), trigger: 'blur' }
+          { required: true, message: this.key('enter_code'), trigger: 'blur' },
+          { min: 1, max: 100, message: this.key('remark_length'), trigger: 'blur' }
         ],
         name: [
-          { required: true, message: k('enter_name'), trigger: 'blur' },
-          { min: 1, max: 100, message: k('remark_length'), trigger: 'blur' }
+          { required: true, message: this.key('enter_name'), trigger: 'blur' },
+          { min: 1, max: 100, message: this.key('remark_length'), trigger: 'blur' }
         ]
       },
       columns: [],
@@ -116,8 +114,8 @@ export default {
           {
             type: 'input',
             prop: 'code',
-            label: k('code'),
-            placeholder: k('enter_code'),
+            label: this.key('code'),
+            placeholder: this.key('enter_code'),
             clearable: true,
             style: { width: '90%' }
           }
@@ -126,8 +124,8 @@ export default {
           {
             type: 'input',
             prop: 'name',
-            label: k('name'),
-            placeholder: k('enter_name'),
+            label: this.key('name'),
+            placeholder: this.key('enter_name'),
             clearable: true,
             style: { width: '90%' }
           }
@@ -138,8 +136,8 @@ export default {
             prop: 'remark',
             inputType: 'textarea',
             autosize: { minRows: 2, maxRows: 6 },
-            label: k('remark'),
-            placeholder: k('remark_required'),
+            label: this.key('remark'),
+            placeholder: this.key('remark_required'),
             clearable: true,
             style: { width: '90%' }
           }