feat(projects): pro-naive-ui 示例支持多语言

2025-12-21 15:25:58 +08:00 · 2025-05-15 23:37:10 +08:00
parent 471e7a40e4
commit 02d3d5767e
10 changed files with 468 additions and 182 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { NConfigProvider, darkTheme } from 'naive-ui';
+import { darkTheme } from 'naive-ui';
 import type { WatermarkProps } from 'naive-ui';
 import { useAppStore } from './store/modules/app';
 import { useThemeStore } from './store/modules/theme';
@@ -41,7 +41,7 @@ const watermarkProps = computed<WatermarkProps>(() => {
 </script>

 <template>
-  <NConfigProvider
+  <ProConfigProvider
    :theme="naiveDarkTheme"
    :theme-overrides="themeStore.naiveTheme"
    :locale="naiveLocale"
@@ -52,7 +52,7 @@ const watermarkProps = computed<WatermarkProps>(() => {
      <RouterView class="bg-layout" />
      <NWatermark v-if="themeStore.watermark.visible" v-bind="watermarkProps" />
    </AppProvider>
-  </NConfigProvider>
+  </ProConfigProvider>
 </template>

 <style scoped></style>
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -379,6 +379,82 @@ const local: App.I18n.Schema = {
        triggerAllRequest: 'Manually Trigger All Automated Requests'
      }
    },
+    proNaive: {
+      form: {
+        basic: {
+          title: 'Basic Example',
+          appName: 'ApplicationName',
+          appStatus: 'ApplicationStatus',
+          createTime: 'CreateTime',
+          responseDate: 'ResponseDate',
+          specificationInfo: 'SpecificationInfo',
+          specificate: 'Specificate',
+          specificationName: 'SpecificationName',
+          specificationValue: 'SpecificationValue',
+          specificationColorRed: 'Red',
+          specificationColorOrange: 'Orange',
+          addSpecificateItem: 'Add Specificate Item',
+          fillValue: 'FillValue',
+          reset: 'Reset',
+          submit: 'Submit',
+          add: 'Add',
+          delete: 'Delete',
+          color: 'Color',
+          normal: 'Normal',
+          anomaly: 'Anomaly'
+        },
+        query: {
+          title1: 'Query Example, which expands by default',
+          title2: 'Query Example, which fold by default, and two lines are retained when folding',
+          appName: 'ApplicationName',
+          appStatus: 'ApplicationStatus',
+          createTime: 'CreateTime',
+          responseDate: 'ResponseDate',
+          endDate: 'EndDate',
+          field: 'Field'
+        },
+        step: {
+          title: 'Step Form',
+          step1: {
+            title: 'Form 1',
+            field: 'Form 1 field',
+            nextStep: 'Next Step'
+          },
+          step2: {
+            title: 'Form 2',
+            field: 'Form 2 field',
+            prevStep: 'Prev Step',
+            submit: 'Submit'
+          }
+        }
+      },
+      table: {
+        remote: {
+          filterCondition: 'Filter Condition',
+          name: 'Name',
+          createTime: 'CreateTime',
+          responseTime: 'ResponseTime',
+          title: 'Remote Loading',
+          replicableText: 'Replicable Text',
+          tags: 'Tags',
+          dateFormatting: 'Date Formatting',
+          image: 'Image'
+        },
+        rowEdit: {
+          title: 'Edit Table',
+          reset: 'Reset',
+          submit: 'Submit',
+          edit: 'Edit',
+          delete: 'Delete',
+          save: 'Save',
+          task: 'Task',
+          score: 'Score',
+          time: 'Time',
+          name: 'Name',
+          action: 'Action'
+        }
+      }
+    },
    manage: {
      common: {
        status: {
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -379,6 +379,82 @@ const local: App.I18n.Schema = {
        triggerAllRequest: '手动触发所有自动请求'
      }
    },
+    proNaive: {
+      form: {
+        basic: {
+          title: '基础示例',
+          appName: '应用名称',
+          appStatus: '应用状态',
+          createTime: '创建时间',
+          responseDate: '响应日期',
+          specificationInfo: '规格信息',
+          specificate: '规格',
+          specificationName: '规格名',
+          specificationValue: '规格值',
+          specificationColorRed: '红',
+          specificationColorOrange: '橙',
+          addSpecificateItem: '添加规格项',
+          fillValue: '填充值',
+          reset: '重置',
+          submit: '提交',
+          add: '新建',
+          delete: '删除',
+          color: '颜色',
+          normal: '正常',
+          anomaly: '异常'
+        },
+        query: {
+          title1: '查询表单，默认展开',
+          title2: '查询表单，默认折叠，折叠时保留2行',
+          appName: '应用名称',
+          appStatus: '应用状态',
+          createTime: '创建时间',
+          responseDate: '响应日期',
+          endDate: '结束日期',
+          field: '字段'
+        },
+        step: {
+          title: '分步表单',
+          step1: {
+            title: '表单1',
+            field: '表单1字段',
+            nextStep: '下一步'
+          },
+          step2: {
+            title: '表单2',
+            field: '表单2字段',
+            prevStep: '上一步',
+            submit: '提交'
+          }
+        }
+      },
+      table: {
+        remote: {
+          filterCondition: '筛选条件',
+          name: '名称',
+          createTime: '创建时间',
+          responseTime: '响应时间',
+          title: '远程加载',
+          replicableText: '可复制文本',
+          tags: 'tags',
+          dateFormatting: '日期格式化',
+          image: '图片'
+        },
+        rowEdit: {
+          title: '编辑表格',
+          reset: '重置',
+          submit: '提交',
+          edit: '编辑',
+          delete: '删除',
+          save: '保存',
+          task: '任务',
+          score: '评分',
+          time: '时间',
+          name: '名称',
+          action: '操作'
+        }
+      }
+    },
    manage: {
      common: {
        status: {
--- a/src/locales/naive.ts
+++ b/src/locales/naive.ts
@@ -1,5 +1,6 @@
-import { dateEnUS, dateZhCN, enUS, zhCN } from 'naive-ui';
+import { dateEnUS, dateZhCN, enUS } from 'naive-ui';
 import type { NDateLocale, NLocale } from 'naive-ui';
+import { zhCN } from 'pro-naive-ui';

 export const naiveLocales: Record<App.I18n.LangType, NLocale> = {
  'zh-CN': zhCN,
--- a/src/typings/app.d.ts
+++ b/src/typings/app.d.ts
@@ -554,6 +554,82 @@ declare namespace App {
            triggerAllRequest: string;
          };
        };
+        proNaive: {
+          form: {
+            basic: {
+              title: string;
+              appName: string;
+              appStatus: string;
+              createTime: string;
+              responseDate: string;
+              specificationInfo: string;
+              specificate: string;
+              specificationName: string;
+              specificationValue: string;
+              specificationColorRed: string;
+              specificationColorOrange: string;
+              addSpecificateItem: string;
+              fillValue: string;
+              reset: string;
+              submit: string;
+              add: string;
+              delete: string;
+              color: string;
+              normal: string;
+              anomaly: string;
+            };
+            query: {
+              title1: string;
+              title2: string;
+              appName: string;
+              appStatus: string;
+              createTime: string;
+              responseDate: string;
+              endDate: string;
+              field: string;
+            };
+            step: {
+              title: string;
+              step1: {
+                title: string;
+                field: string;
+                nextStep: string;
+              };
+              step2: {
+                title: string;
+                field: string;
+                prevStep: string;
+                submit: string;
+              };
+            };
+          };
+          table: {
+            remote: {
+              filterCondition: string;
+              name: string;
+              createTime: string;
+              responseTime: string;
+              title: string;
+              replicableText: string;
+              tags: string;
+              dateFormatting: string;
+              image: string;
+            };
+            rowEdit: {
+              title: string;
+              reset: string;
+              submit: string;
+              edit: string;
+              delete: string;
+              save: string;
+              task: string;
+              score: string;
+              time: string;
+              name: string;
+              action: string;
+            };
+          };
+        };
        manage: {
          common: {
            status: {
--- a/src/views/pro-naive/form/basic/index.vue
+++ b/src/views/pro-naive/form/basic/index.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import { useMessage } from 'naive-ui';
 import { createProForm } from 'pro-naive-ui';
+import { $t } from '@/locales';

 const submiting = ref(false);
 const message = useMessage();
@@ -10,19 +11,21 @@ const form = createProForm({
  initialValues: {
    attributes: [
      {
-        name: '颜色',
-        items: [{ name: '红' }, { name: '橙' }]
+        name: $t('page.proNaive.form.basic.color'),
+        items: [
+          { name: $t('page.proNaive.form.basic.specificationColorRed') },
+          { name: $t('page.proNaive.form.basic.specificationColorOrange') }
+        ]
      }
    ]
  },
  onReset: () => {
-    message.success('重置成功');
+    message.success('reset success');
  },
  onSubmit: async values => {
-    console.log(values);
    submiting.value = true;
    await delay(1000);
-    message.success('提交成功');
+    message.success(JSON.stringify(values));
    submiting.value = false;
  }
 });
@@ -35,7 +38,7 @@ function delay(time: number) {

 function fillValues() {
  const values = {
-    appName: '应用名称',
+    appName: $t('page.proNaive.form.basic.appName'),
    appStatus: 0,
    responseDate: Date.now()
  };
@@ -62,54 +65,68 @@ function fillValues() {
      }
    }"
  >
-    <ProCard title="基础示例" :show-collapse="false">
+    <ProCard :title="$t('page.proNaive.form.basic.title')" :show-collapse="false">
      <template #header-extra>
        <NFlex>
-          <NButton @click="fillValues">填充值</NButton>
-          <NButton attr-type="reset">重置</NButton>
-          <NButton type="primary" attr-type="submit" :loading="submiting">提交</NButton>
+          <NButton @click="fillValues">{{ $t('page.proNaive.form.basic.fillValue') }}</NButton>
+          <NButton attr-type="reset">{{ $t('page.proNaive.form.basic.reset') }}</NButton>
+          <NButton type="primary" attr-type="submit" :loading="submiting">
+            {{ $t('page.proNaive.form.basic.submit') }}
+          </NButton>
        </NFlex>
      </template>
      <NGrid cols="1 s:2 l:3" :x-gap="16" responsive="screen">
        <NGi>
-          <ProInput title="应用名称" tooltip="应用名称" path="appName" />
+          <ProInput
+            :title="$t('page.proNaive.form.basic.appName')"
+            :tooltip="$t('page.proNaive.form.basic.appName')"
+            path="appName"
+          />
        </NGi>
        <NGi>
          <ProSelect
-            title="应用状态"
+            :title="$t('page.proNaive.form.basic.appStatus')"
            path="appStatus"
            :field-props="{
              options: [
-                { label: '正常', value: 0 },
-                { label: '异常', value: 1 }
+                { label: $t('page.proNaive.form.basic.normal'), value: 0 },
+                { label: $t('page.proNaive.form.basic.anomaly'), value: 1 }
              ]
            }"
          />
        </NGi>
        <NGi>
-          <ProDate title="创建时间" path="createTime" />
+          <ProDate :title="$t('page.proNaive.form.basic.createTime')" path="createTime" />
        </NGi>
        <NGi>
-          <ProDate title="响应日期" path="responseDate" required />
+          <ProDate :title="$t('page.proNaive.form.basic.responseDate')" path="responseDate" required />
        </NGi>
        <NGi :span="3">
          <ProFormList
-            title="规格信息"
+            :title="$t('page.proNaive.form.basic.specificationInfo')"
            path="attributes"
            :min="1"
            :creator-initial-value="
              () => ({
-                name: '颜色',
-                items: [{ name: '红' }, { name: '橙' }]
+                name: $t('page.proNaive.form.basic.color'),
+                items: [
+                  { name: $t('page.proNaive.form.basic.specificationColorRed') },
+                  { name: $t('page.proNaive.form.basic.specificationColorOrange') }
+                ]
              })
            "
            :copy-button-props="false"
            :creator-button-props="{
-              content: '添加规格项'
+              content: $t('page.proNaive.form.basic.addSpecificateItem')
            }"
          >
            <template #item="{ index, itemDom, actionDom }">
-              <NCard size="small" embedded :title="`规格${index + 1}`" class="mb-8px">
+              <NCard
+                size="small"
+                embedded
+                :title="`${$t('page.proNaive.form.basic.specificate')}${index + 1}`"
+                class="mb-8px"
+              >
                <template #header-extra>
                  <component :is="actionDom" />
                </template>
@@ -117,14 +134,14 @@ function fillValues() {
              </NCard>
            </template>
            <ProInput
-              title="规格名"
+              :title="$t('page.proNaive.form.basic.specificationName')"
              path="name"
              :field-props="{
                class: 'w-230px!'
              }"
            />
            <ProFormList
-              title="规格值"
+              :title="$t('page.proNaive.form.basic.specificationValue')"
              path="items"
              :min="1"
              :creator-button-props="{
@@ -134,11 +151,11 @@ function fillValues() {
                ghost: true,
                text: true,
                type: 'info',
-                content: '新建'
+                content: $t('page.proNaive.form.basic.add')
              }"
              :copy-button-props="false"
              :remove-button-props="{
-                tooltip: '删除'
+                tooltip: $t('page.proNaive.form.basic.delete')
              }"
            >
              <template #item="{ itemDom, actionDom }">
--- a/src/views/pro-naive/form/query/index.vue
+++ b/src/views/pro-naive/form/query/index.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import { useMessage } from 'naive-ui';
 import type { ProSearchFormColumns } from 'pro-naive-ui';
 import { createProSearchForm } from 'pro-naive-ui';
+import { $t } from '@/locales';

 interface Info {
  appName: string;
@@ -13,11 +15,14 @@ interface Info {

 const loading = ref(false);
 const loading2 = ref(false);
+const message = useMessage();

 const form = createProSearchForm<Partial<Info>>({
-  onReset: console.log,
+  onReset: () => {
+    message.success('reset success');
+  },
  onSubmit: async values => {
-    console.log(values);
+    message.success(JSON.stringify(values));
    loading.value = true;
    await delay(1500);
    loading.value = false;
@@ -26,45 +31,51 @@ const form = createProSearchForm<Partial<Info>>({

 const form2 = createProSearchForm<Partial<Info>>({
  defaultCollapsed: true,
-  onReset: console.log,
+  onReset: () => {
+    message.success('reset success');
+  },
  onSubmit: async values => {
-    console.log(values);
+    message.success(JSON.stringify(values));
    loading2.value = true;
    await delay(1500);
    loading2.value = false;
  }
 });

-const columns: ProSearchFormColumns<Info> = [
-  {
-    title: '应用名称',
-    path: 'appName'
-  },
-  {
-    title: '创建时间',
-    path: 'createTime',
-    field: 'date'
-  },
-  {
-    title: '应用状态',
-    path: 'appStatus'
-  },
-  {
-    title: '响应日期',
-    path: 'responseDate',
-    field: 'date-time'
-  },
-  {
-    title: '结束日期',
-    path: 'endTime',
-    field: 'date'
-  }
-];
+const columns = computed<ProSearchFormColumns<Info>>(() => {
+  return [
+    {
+      title: $t('page.proNaive.form.query.appName'),
+      path: 'appName'
+    },
+    {
+      title: $t('page.proNaive.form.query.createTime'),
+      path: 'createTime',
+      field: 'date'
+    },
+    {
+      title: $t('page.proNaive.form.query.appStatus'),
+      path: 'appStatus'
+    },
+    {
+      title: $t('page.proNaive.form.query.responseDate'),
+      path: 'responseDate',
+      field: 'date-time'
+    },
+    {
+      title: $t('page.proNaive.form.query.endDate'),
+      path: 'endTime',
+      field: 'date'
+    }
+  ];
+});

-const columns2 = Array.from({ length: 20 }, (_, i) => ({
-  title: `字段${i}`,
-  path: `field${i}`
-}));
+const columns2 = computed(() => {
+  return Array.from({ length: 20 }, (_, i) => ({
+    title: `${$t('page.proNaive.form.query.field')}${i}`,
+    path: `field${i}`
+  }));
+});

 function delay(time: number) {
  return new Promise<void>(resolve => {
@@ -75,10 +86,10 @@ function delay(time: number) {

 <template>
  <div class="bg-#fff">
-    <ProCard title="查询表单，默认展开" :show-collapse="false">
+    <ProCard :title="$t('page.proNaive.form.query.title1')" :show-collapse="false">
      <ProSearchForm :form="form" :loading="loading" :columns="columns" />
    </ProCard>
-    <ProCard class="mt-12px" title="查询表单，默认折叠，折叠时保留2行" :show-collapse="false">
+    <ProCard class="mt-12px" :title="$t('page.proNaive.form.query.title2')" :show-collapse="false">
      <ProSearchForm :form="form2" :loading="loading2" :columns="columns2" :collapsed-rows="2" />
    </ProCard>
  </div>
--- a/src/views/pro-naive/form/step/index.vue
+++ b/src/views/pro-naive/form/step/index.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 import { useMessage } from 'naive-ui';
 import { createProForm } from 'pro-naive-ui';
+import { $t } from '@/locales';

 const step = ref(1);
 const submiting = ref(false);
@@ -37,24 +38,28 @@ function delay(time: number) {

 <template>
  <div class="color-#fff">
-    <ProCard title="分步表单" :segmented="{ content: true }" :show-collapse="false">
+    <ProCard :title="$t('page.proNaive.form.step.title')" :segmented="{ content: true }" :show-collapse="false">
      <div class="flex flex-col items-center justify-center">
        <NSteps :current="step" class="mb-50px ml-200px w-60%">
-          <NStep title="表单1" />
-          <NStep title="表单2" />
+          <NStep :title="$t('page.proNaive.form.step.step1.title')" />
+          <NStep :title="$t('page.proNaive.form.step.step2.title')" />
        </NSteps>
        <template v-if="step === 1">
          <ProForm :form="form" label-placement="left">
-            <ProInput title="表单1字段" path="form1Field" required />
-            <NButton @click="toNextStepAfterValidated">下一步</NButton>
+            <ProInput :title="$t('page.proNaive.form.step.step1.field')" path="form1Field" required />
+            <NButton @click="toNextStepAfterValidated">{{ $t('page.proNaive.form.step.step1.nextStep') }}</NButton>
          </ProForm>
        </template>
        <template v-if="step === 2">
          <ProForm :form="form2" :loading="submiting" label-placement="left">
-            <ProInput title="表单2字段" path="form2Field" required />
+            <ProInput :title="$t('page.proNaive.form.step.step2.field')" path="form2Field" required />
            <NFlex>
-              <NButton :disabled="submiting" @click="step -= 1">上一步</NButton>
-              <NButton type="primary" attr-type="submit" :loading="submiting">提交</NButton>
+              <NButton :disabled="submiting" @click="step -= 1">
+                {{ $t('page.proNaive.form.step.step2.prevStep') }}
+              </NButton>
+              <NButton type="primary" attr-type="submit" :loading="submiting">
+                {{ $t('page.proNaive.form.step.step2.submit') }}
+              </NButton>
            </NFlex>
          </ProForm>
        </template>
--- a/src/views/pro-naive/table/remote/index.vue
+++ b/src/views/pro-naive/table/remote/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed } from 'vue';
 import type { ProDataTableColumns, ProSearchFormColumns } from 'pro-naive-ui';
 import {
  createProSearchForm,
@@ -9,9 +9,10 @@ import {
  renderProTags,
  useNDataTable
 } from 'pro-naive-ui';
+import { $t } from '@/locales';

 function fetchList(params: any, values: any) {
-  console.log(params, values, '@@@');
+  console.log(params, values);
  return new Promise<{ total: number; list: any[] }>(resolve => {
    setTimeout(() => {
      resolve({
@@ -48,55 +49,61 @@ function fetchList(params: any, values: any) {
  });
 }

-const columns = ref<ProDataTableColumns<{ src: any; title: string; now: number }>>([
-  {
-    title: '可复制文本',
-    render: row => renderProCopyableText(row.title)
-  },
-  {
-    title: 'tags',
-    render: row => renderProTags(row.title)
-  },
-  {
-    title: '日期格式化',
-    render: row =>
-      renderProDateText(row.now, {
-        pattern: 'quarter'
-      })
-  },
-  {
-    title: '图片',
-    width: 200,
-    render: row => renderProImages(row.src)
-  }
-]);
+const columns = computed<ProDataTableColumns<{ src: any; title: string; now: number }>>(() => {
+  return [
+    {
+      title: $t('page.proNaive.table.remote.replicableText'),
+      render: row => renderProCopyableText(row.title)
+    },
+    {
+      title: $t('page.proNaive.table.remote.tags'),
+      render: row => renderProTags(row.title)
+    },
+    {
+      title: $t('page.proNaive.table.remote.dateFormatting'),
+      render: row =>
+        renderProDateText(row.now, {
+          pattern: 'quarter'
+        })
+    },
+    {
+      title: $t('page.proNaive.table.remote.image'),
+      width: 200,
+      render: row => renderProImages(row.src)
+    }
+  ];
+});

-const searchColumns: ProSearchFormColumns<{
-  name: string;
-  endTime: number;
-  createTime: number;
-  responseTime: number;
-}> = [
-  {
-    title: '名称',
-    path: 'name'
-  },
-  {
-    title: '创建时间',
-    path: 'createTime',
-    field: 'date'
-  },
-  {
-    title: '响应时间',
-    path: 'responseTime',
-    field: 'date'
-  },
-  {
-    title: '响应时间',
-    path: 'responseTime',
-    field: 'date'
-  }
-];
+const searchColumns = computed<
+  ProSearchFormColumns<{
+    name: string;
+    endTime: number;
+    createTime: number;
+    responseTime: number;
+  }>
+>(() => {
+  return [
+    {
+      title: $t('page.proNaive.table.remote.name'),
+      path: 'name'
+    },
+    {
+      title: $t('page.proNaive.table.remote.createTime'),
+      path: 'createTime',
+      field: 'date'
+    },
+    {
+      title: $t('page.proNaive.table.remote.responseTime'),
+      path: 'responseTime',
+      field: 'date'
+    },
+    {
+      title: $t('page.proNaive.table.remote.responseTime'),
+      path: 'responseTime',
+      field: 'date'
+    }
+  ];
+});

 const searchForm = createProSearchForm({
  initialValues: {
@@ -117,9 +124,16 @@ const {

 <template>
  <div class="flex flex-col">
-    <ProCard title="筛选条件" class="mb-24px" :show-collapse="false">
+    <ProCard :title="$t('page.proNaive.table.remote.filterCondition')" class="mb-24px" :show-collapse="false">
      <ProSearchForm :form="searchForm" label-placement="left" :columns="searchColumns" v-bind="proSearchFormProps" />
    </ProCard>
-    <ProDataTable title="远程加载" size="small" flex-height :columns="columns" row-key="no" v-bind="tableProps" />
+    <ProDataTable
+      :title="$t('page.proNaive.table.remote.title')"
+      size="small"
+      flex-height
+      :columns="columns"
+      row-key="no"
+      v-bind="tableProps"
+    />
  </div>
 </template>
--- a/src/views/pro-naive/table/row-edit/index.vue
+++ b/src/views/pro-naive/table/row-edit/index.vue
@@ -1,8 +1,9 @@
 <script setup lang="tsx">
-import { ref } from 'vue';
-import { NButton, NFlex } from 'naive-ui';
+import { computed, ref } from 'vue';
+import { NButton, NFlex, useMessage } from 'naive-ui';
 import type { ProEditDataTableColumns } from 'pro-naive-ui';
 import { createProForm } from 'pro-naive-ui';
+import { $t } from '@/locales';

 interface DataSourceType {
  id: string;
@@ -11,7 +12,9 @@ interface DataSourceType {
  rate?: number;
 }

+const message = useMessage();
 const editableKeys = ref<string[]>([]);
+
 const form = createProForm({
  initialValues: {
    list: [
@@ -19,80 +22,84 @@ const form = createProForm({
        id: '1',
        now: Date.now(),
        rate: 4,
-        title: '任务一'
+        title: `${$t('page.proNaive.table.rowEdit.task')}1`
      },
      {
        id: '2',
        now: Date.now(),
        rate: 3,
-        title: '任务二'
+        title: `${$t('page.proNaive.table.rowEdit.task')}2`
      },
      {
        id: '3',
        now: Date.now(),
        rate: 5,
-        title: '任务三'
+        title: `${$t('page.proNaive.table.rowEdit.task')}3`
      }
    ]
  },
-  onSubmit: console.log
+  onSubmit: values => {
+    message.success(JSON.stringify(values));
+  }
 });

 function cancelEditable(id: string) {
  editableKeys.value = editableKeys.value.filter(key => key !== id);
 }

-const columns: ProEditDataTableColumns<DataSourceType> = [
-  {
-    title: 'Title',
-    path: 'title',
-    field: 'input',
-    width: 200
-  },
-  {
-    title: '时间',
-    path: 'now',
-    field: 'date-time',
-    width: 200
-  },
-  {
-    title: '评分',
-    path: 'rate',
-    field: 'rate'
-  },
-  {
-    title: '操作',
-    width: 120,
-    fixed: 'right',
-    render: (row, rowIndex, { remove, editable }) => {
-      return (
-        <NFlex>
-          {editable ? (
-            <NButton text={true} type="primary" onClick={() => cancelEditable(row.id)}>
-              保存
-            </NButton>
-          ) : (
-            [
-              <NButton text={true} type="primary" onClick={() => editableKeys.value.push(row.id)}>
-                编辑
-              </NButton>,
-              <NButton
-                text={true}
-                type="error"
-                onClick={() => {
-                  remove(rowIndex);
-                  cancelEditable(row.id);
-                }}
-              >
-                删除
+const columns = computed<ProEditDataTableColumns<DataSourceType>>(() => {
+  return [
+    {
+      title: $t('page.proNaive.table.rowEdit.name'),
+      path: 'title',
+      field: 'input',
+      width: 200
+    },
+    {
+      title: $t('page.proNaive.table.rowEdit.time'),
+      path: 'now',
+      field: 'date-time',
+      width: 200
+    },
+    {
+      title: $t('page.proNaive.table.rowEdit.score'),
+      path: 'rate',
+      field: 'rate'
+    },
+    {
+      title: $t('page.proNaive.table.rowEdit.action'),
+      width: 120,
+      fixed: 'right',
+      render: (row, rowIndex, { remove, editable }) => {
+        return (
+          <NFlex>
+            {editable ? (
+              <NButton text={true} type="primary" onClick={() => cancelEditable(row.id)}>
+                {$t('page.proNaive.table.rowEdit.save')}
              </NButton>
-            ]
-          )}
-        </NFlex>
-      );
+            ) : (
+              [
+                <NButton text={true} type="primary" onClick={() => editableKeys.value.push(row.id)}>
+                  {$t('page.proNaive.table.rowEdit.edit')}
+                </NButton>,
+                <NButton
+                  text={true}
+                  type="error"
+                  onClick={() => {
+                    remove(rowIndex);
+                    cancelEditable(row.id);
+                  }}
+                >
+                  {$t('page.proNaive.table.rowEdit.delete')}
+                </NButton>
+              ]
+            )}
+          </NFlex>
+        );
+      }
    }
-  }
-];
+  ];
+});
 </script>

 <template>
@@ -112,11 +119,14 @@ const columns: ProEditDataTableColumns<DataSourceType> = [
          record: () => ({ id: Date.now() })
        }"
        row-key="id"
+        :field-props="{
+          title: $t('page.proNaive.table.rowEdit.title')
+        }"
      >
        <template #toolbar>
          <NFlex>
-            <NButton attr-type="reset">重置</NButton>
-            <NButton type="primary" attr-type="submit">提交</NButton>
+            <NButton attr-type="reset">{{ $t('page.proNaive.table.rowEdit.reset') }}</NButton>
+            <NButton type="primary" attr-type="submit">{{ $t('page.proNaive.table.rowEdit.submit') }}</NButton>
          </NFlex>
        </template>
      </ProEditDataTable>