feat: add international language support for basicForm page; 🌟

新增：標準表單页面增加国际化语言支持；

src/pages/form/basic/BasicForm.vue

@@ -2,51 +2,51 @@
   <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
     <a-form>
       <a-form-item
-        label="标题"
+        :label="$t('title')"
         :labelCol="{span: 7}"
         :wrapperCol="{span: 10}"
       >
-        <a-input placeholder="给目标起个名字" />
+        <a-input :placeholder="$t('titleInput')" />
       </a-form-item>
       <a-form-item
-        label="起止日期"
+        :label="$t('date')"
         :labelCol="{span: 7}"
         :wrapperCol="{span: 10}"
       >
         <a-range-picker style="width: 100%" />
       </a-form-item>
       <a-form-item
-        label="目标描述"
+        :label="$t('describe')"
         :labelCol="{span: 7}"
         :wrapperCol="{span: 10}"
       >
-        <a-textarea rows="4" placeholder="请输入你阶段性工作目标"/>
+        <a-textarea rows="4" :placeholder="$t('describeInput')"/>
       </a-form-item>
       <a-form-item
-        label="衡量标准"
+        :label="$t('metrics')"
         :labelCol="{span: 7}"
         :wrapperCol="{span: 10}"
       >
-        <a-textarea rows="4" placeholder="请输入衡量标准"/>
+        <a-textarea rows="4" :placeholder="$t('metricsInput')"/>
       </a-form-item>
       <a-form-item
-        label="客户"
+        :label="$t('customer')"
         :labelCol="{span: 7}"
         :wrapperCol="{span: 10}"
         :required="false"
       >
-        <a-input placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"/>
+        <a-input :placeholder="$t('customerInput')"/>
       </a-form-item>
       <a-form-item
-        label="邀评人"
+        :label="$t('critics')"
         :labelCol="{span: 7}"
         :wrapperCol="{span: 10}"
         :required="false"
       >
-        <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人"/>
+        <a-input :placeholder="$t('criticsInput')"/>
       </a-form-item>
       <a-form-item
-        label="权重"
+        :label="$t('weight')"
         :labelCol="{span: 7}"
         :wrapperCol="{span: 10}"
         :required="false"
@@ -55,28 +55,26 @@
         <span>%</span>
       </a-form-item>
       <a-form-item
-        label="目标公开"
+        :label="$t('disclosure')"
         :labelCol="{span: 7}"
         :wrapperCol="{span: 10}"
         :required="false"
-        help="客户、邀评人默认被分享"
+        :help="$t('disclosureDesc')"
       >
         <a-radio-group v-model="value">
-          <a-radio :value="1">公开</a-radio>
+          <a-radio :value="1">{{$t('public')}}</a-radio>
-          <a-radio :value="2">部分公开</a-radio>
+          <a-radio :value="2">{{$t('partially')}}</a-radio>
-          <a-radio :value="3">不公开</a-radio>
+          <a-radio :value="3">{{$t('private')}}</a-radio>
         </a-radio-group>
-        <a-form-item>
         <a-select mode="multiple" v-if="value === 2">
-            <a-select-option value="4">同事一</a-select-option>
+          <a-select-option value="4">{{$t('colleague1')}}</a-select-option>
-            <a-select-option value="5">同事二</a-select-option>
+          <a-select-option value="5">{{$t('colleague2')}}</a-select-option>
-            <a-select-option value="6">同事三</a-select-option>
+          <a-select-option value="6">{{$t('colleague3')}}</a-select-option>
         </a-select>
       </a-form-item>
-      </a-form-item>
+      <a-form-item style="margin-top: 24px" :wrapperCol="{span: 10, offset: 7}">
-      <a-form-item :wrapperCol="{span: 10, offset: 7}">
+        <a-button type="primary">{{$t('submit')}}</a-button>
-        <a-button type="primary">提交</a-button>
+        <a-button style="margin-left: 8px">{{$t('save')}}</a-button>
-        <a-button style="margin-left: 8px">保存</a-button>
       </a-form-item>
     </a-form>
   </a-card>
@@ -85,11 +83,16 @@
 <script>
 export default {
   name: 'BasicForm',
+  i18n: require('./i18n'),
   data () {
     return {
-      desc: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
       value: 1
     }
+  },
+  computed: {
+    desc() {
+      return this.$t('pageDesc')
+    }
   }
 }
 </script>

src/pages/form/basic/i18n.js

@@ -0,0 +1,79 @@
+module.exports = {
+  messages: {
+    CN: {
+      pageDesc: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+      title: '标题',
+      titleInput: '给目标起个名字',
+      date: '起止日期',
+      describe: '目标描述',
+      describeInput: '请输入你阶段性工作目标',
+      metrics: '衡量标准',
+      metricsInput: '请输入衡量标准',
+      customer: '客户',
+      customerInput: '请描述你服务的客户，内部客户直接 @姓名／工号',
+      critics: '邀评人',
+      criticsInput: '请直接 @姓名／工号，最多可邀请 5 人',
+      weight: '权重',
+      disclosure: '目标公开',
+      disclosureDesc: '客户、邀评人默认被分享',
+      public: '公开',
+      partially: '部分公开',
+      private: '不公开',
+      submit: '提交',
+      save: '保存',
+      colleague1: '同事甲',
+      colleague2: '同事乙',
+      colleague3: '同事丙'
+    },
+    HK: {
+      pageDesc: '表單頁用於向用戶收集或驗證信息，基礎表單常見於數據項較少的表單場景。',
+      title: '標題',
+      titleInput: '給目標起個名字',
+      date: '起止日期',
+      describe: '目標描述',
+      describeInput: '請輸入你階段性的工作目標',
+      metrics: '衡量標準',
+      metricsInput: '請輸入衡量標準',
+      customer: '客戶',
+      customerInput: '請描述你服務的客戶，內部客戶直接 @姓名／工號',
+      critics: '邀評人',
+      criticsInput: '請直接 @姓名／工號，最多可邀請 5 人',
+      weight: '圈中人',
+      disclosure: '目標公開',
+      disclosureDesc: '客戶、邀評人默認被分享',
+      public: '公開',
+      partially: '部分公開',
+      private: '不公開',
+      submit: '提交',
+      save: '保存',
+      colleague1: '同事甲',
+      colleague2: '同事乙',
+      colleague3: '同事丙'
+    },
+    US: {
+      pageDesc: 'Form pages are used to collect or verify information to users, and basic forms are common in scenarios where there are fewer data items.',
+      title: 'Title',
+      titleInput: 'Give the target a name',
+      date: 'Start and end date',
+      describe: 'Goal description',
+      describeInput: 'Please enter your work goals',
+      metrics: 'Metrics',
+      metricsInput: 'Please enter a metric',
+      customer: 'Customer',
+      customerInput: 'Please describe your customer service, internal customers directly @ Name / job number',
+      critics: 'Inviting critics',
+      criticsInput: 'Please direct @ Name / job number, you can invite up to 5 people',
+      weight: 'Weight',
+      disclosure: 'Target disclosure',
+      disclosureDesc: 'Customers and invitees are shared by default',
+      public: 'Public',
+      partially: 'Partially public',
+      private: 'Private',
+      submit: 'Submit',
+      save: 'Save',
+      colleague1: 'Colleague A',
+      colleague2: 'Colleague B',
+      colleague3: 'Colleague C'
+    }
+  }
+}

src/router/index.js

@@ -7,9 +7,9 @@ import ServerError from '@/pages/exception/500'
 import PageView from '@/layouts/PageView'
 import RouteView from '@/layouts/RouteView'
 import MenuView from '@/layouts/MenuView'
-import BasicForm from '@/pages/form/BasicForm'
+import BasicForm from '@/pages/form/basic/BasicForm'
-import StepForm from '@/pages/form/stepForm/StepForm'
+import StepForm from '@/pages/form/step/StepForm'
-import AdvancedForm from '@/pages/form/advancedForm/AdvancedForm'
+import AdvancedForm from '@/pages/form/advance/AdvancedForm'
 import Success from '@/pages/result/Success'
 import Error from '@/pages/result/Error'
 import QueryList from '@/pages/list/QueryList'

src/router/lazy.js

@@ -52,17 +52,17 @@ export default new Router({
             {
               path: 'basic',
               name: '基础表单',
-              component: () => import('@/pages/form/BasicForm'),
+              component: () => import('@/pages/form/basic/BasicForm'),
             },
             {
               path: 'step',
               name: '分步表单',
-              component: () => import('@/pages/form/stepForm/StepForm'),
+              component: () => import('@/pages/form/step/StepForm'),
             },
             {
               path: 'advance',
               name: '高级表单',
-              component: () => import('@/pages/form/advancedForm/AdvancedForm'),
+              component: () => import('@/pages/form/advance/AdvancedForm'),
             }
           ]
         },