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

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>

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: {

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: {

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,

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: {

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: '颜色',
+        name: $t('page.proNaive.form.basic.color'),
-        items: [{ name: '红' }, { name: '橙' }]
+        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 @click="fillValues">{{ $t('page.proNaive.form.basic.fillValue') }}</NButton>
-          <NButton attr-type="reset">重置</NButton>
+          <NButton attr-type="reset">{{ $t('page.proNaive.form.basic.reset') }}</NButton>
-          <NButton type="primary" attr-type="submit" :loading="submiting">提交</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: $t('page.proNaive.form.basic.normal'), value: 0 },
-                { label: '异常', value: 1 }
+                { 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: '颜色',
+                name: $t('page.proNaive.form.basic.color'),
-                items: [{ name: '红' }, { name: '橙' }]
+                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 }">

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> = [
+const columns = computed<ProSearchFormColumns<Info>>(() => {
+  return [
     {
-    title: '应用名称',
+      title: $t('page.proNaive.form.query.appName'),
       path: 'appName'
     },
     {
-    title: '创建时间',
+      title: $t('page.proNaive.form.query.createTime'),
       path: 'createTime',
       field: 'date'
     },
     {
-    title: '应用状态',
+      title: $t('page.proNaive.form.query.appStatus'),
       path: 'appStatus'
     },
     {
-    title: '响应日期',
+      title: $t('page.proNaive.form.query.responseDate'),
       path: 'responseDate',
       field: 'date-time'
     },
     {
-    title: '结束日期',
+      title: $t('page.proNaive.form.query.endDate'),
       path: 'endTime',
       field: 'date'
     }
   ];
+});
 
-const columns2 = Array.from({ length: 20 }, (_, i) => ({
+const columns2 = computed(() => {
-  title: `字段${i}`,
+  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>

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="$t('page.proNaive.form.step.step1.title')" />
-          <NStep title="表单2" />
+          <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 />
+            <ProInput :title="$t('page.proNaive.form.step.step1.field')" path="form1Field" required />
-            <NButton @click="toNextStepAfterValidated">下一步</NButton>
+            <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 :disabled="submiting" @click="step -= 1">
-              <NButton type="primary" attr-type="submit" :loading="submiting">提交</NButton>
+                {{ $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>

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 }>>([
+const columns = computed<ProDataTableColumns<{ src: any; title: string; now: number }>>(() => {
+  return [
     {
-    title: '可复制文本',
+      title: $t('page.proNaive.table.remote.replicableText'),
       render: row => renderProCopyableText(row.title)
     },
     {
-    title: 'tags',
+      title: $t('page.proNaive.table.remote.tags'),
       render: row => renderProTags(row.title)
     },
     {
-    title: '日期格式化',
+      title: $t('page.proNaive.table.remote.dateFormatting'),
       render: row =>
         renderProDateText(row.now, {
           pattern: 'quarter'
         })
     },
     {
-    title: '图片',
+      title: $t('page.proNaive.table.remote.image'),
       width: 200,
       render: row => renderProImages(row.src)
     }
-]);
+  ];
+});
 
-const searchColumns: ProSearchFormColumns<{
+const searchColumns = computed<
+  ProSearchFormColumns<{
     name: string;
     endTime: number;
     createTime: number;
     responseTime: number;
-}> = [
+  }>
+>(() => {
+  return [
     {
-    title: '名称',
+      title: $t('page.proNaive.table.remote.name'),
       path: 'name'
     },
     {
-    title: '创建时间',
+      title: $t('page.proNaive.table.remote.createTime'),
       path: 'createTime',
       field: 'date'
     },
     {
-    title: '响应时间',
+      title: $t('page.proNaive.table.remote.responseTime'),
       path: 'responseTime',
       field: 'date'
     },
     {
-    title: '响应时间',
+      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>

src/views/pro-naive/table/row-edit/index.vue

@@ -1,8 +1,9 @@
 <script setup lang="tsx">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
-import { NButton, NFlex } from 'naive-ui';
+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,49 +22,52 @@ 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> = [
+const columns = computed<ProEditDataTableColumns<DataSourceType>>(() => {
+  return [
     {
-    title: 'Title',
+      title: $t('page.proNaive.table.rowEdit.name'),
       path: 'title',
       field: 'input',
       width: 200
     },
     {
-    title: '时间',
+      title: $t('page.proNaive.table.rowEdit.time'),
       path: 'now',
       field: 'date-time',
       width: 200
     },
     {
-    title: '评分',
+      title: $t('page.proNaive.table.rowEdit.score'),
       path: 'rate',
       field: 'rate'
     },
     {
-    title: '操作',
+      title: $t('page.proNaive.table.rowEdit.action'),
       width: 120,
       fixed: 'right',
       render: (row, rowIndex, { remove, editable }) => {
@@ -69,12 +75,12 @@ const columns: ProEditDataTableColumns<DataSourceType> = [
           <NFlex>
             {editable ? (
               <NButton text={true} type="primary" onClick={() => cancelEditable(row.id)}>
-              保存
+                {$t('page.proNaive.table.rowEdit.save')}
               </NButton>
             ) : (
               [
                 <NButton text={true} type="primary" onClick={() => editableKeys.value.push(row.id)}>
-                编辑
+                  {$t('page.proNaive.table.rowEdit.edit')}
                 </NButton>,
                 <NButton
                   text={true}
@@ -84,7 +90,7 @@ const columns: ProEditDataTableColumns<DataSourceType> = [
                     cancelEditable(row.id);
                   }}
                 >
-                删除
+                  {$t('page.proNaive.table.rowEdit.delete')}
                 </NButton>
               ]
             )}
@@ -93,6 +99,7 @@ const columns: ProEditDataTableColumns<DataSourceType> = [
       }
     }
   ];
+});
 </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 attr-type="reset">{{ $t('page.proNaive.table.rowEdit.reset') }}</NButton>
-            <NButton type="primary" attr-type="submit">提交</NButton>
+            <NButton type="primary" attr-type="submit">{{ $t('page.proNaive.table.rowEdit.submit') }}</NButton>
           </NFlex>
         </template>
       </ProEditDataTable>