feat(projects): add example for pro-naive-ui.

2025-11-14 04:33:41 +08:00 · 2025-05-16 13:06:59 +08:00
parent 9a294204a2
commit ff83d333a5
22 changed files with 1172 additions and 1 deletions
--- a/src/locales/langs/en-us.ts
+++ b/src/locales/langs/en-us.ts
@@ -170,6 +170,7 @@ const local: App.I18n.Schema = {
    document_vite: 'Vite Document',
    document_unocss: 'UnoCSS Document',
    document_naive: 'Naive UI Document',
+    'document_pro-naive': 'Pro Naive UI Document',
    document_antd: 'Ant Design Vue Document',
    document_alova: 'Alova Document',
    'user-center': 'User Center',
@@ -179,6 +180,14 @@ const local: App.I18n.Schema = {
    alova_request: 'Alova Request',
    alova_user: 'User List',
    alova_scenes: 'Scenario Request',
+    'pro-naive': 'Pro Naive Example',
+    'pro-naive_form': 'Form',
+    'pro-naive_form_basic': 'Basic Form',
+    'pro-naive_form_query': 'Query Form',
+    'pro-naive_form_step': 'Step Form',
+    'pro-naive_table': 'Table',
+    'pro-naive_table_remote': 'Remote',
+    'pro-naive_table_row-edit': 'Row Edit',
    function_tab: 'Tab',
    'function_multi-tab': 'Multi Tab',
    'function_hide-child': 'Hide Child',
@@ -370,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
@@ -170,6 +170,7 @@ const local: App.I18n.Schema = {
    document_vite: 'Vite文档',
    document_unocss: 'UnoCSS文档',
    document_naive: 'Naive UI文档',
+    'document_pro-naive': 'Pro Naive UI文档',
    document_antd: 'Ant Design Vue文档',
    document_alova: 'Alova文档',
    'user-center': '个人中心',
@@ -179,6 +180,14 @@ const local: App.I18n.Schema = {
    alova_request: 'alova请求',
    alova_user: '用户列表',
    alova_scenes: '场景化请求',
+    'pro-naive': 'Pro Naive UI 示例',
+    'pro-naive_form': '表单',
+    'pro-naive_form_basic': '基础表单',
+    'pro-naive_form_query': '查询表单',
+    'pro-naive_form_step': '分步表单',
+    'pro-naive_table': '表格',
+    'pro-naive_table_remote': '远程加载',
+    'pro-naive_table_row-edit': '行编辑',
    function_tab: '标签页',
    'function_multi-tab': '多标签页',
    'function_hide-child': '隐藏子菜单',
@@ -370,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/main.ts
+++ b/src/main.ts
@@ -1,6 +1,13 @@
 import { createApp } from 'vue';
 import './plugins/assets';
-import { setupAppVersionNotification, setupDayjs, setupIconifyOffline, setupLoading, setupNProgress } from './plugins';
+import {
+  setupAppVersionNotification,
+  setupDayjs,
+  setupIconifyOffline,
+  setupLoading,
+  setupNProgress,
+  setupProNaiveComponents
+} from './plugins';
 import { setupStore } from './store';
 import { setupRouter } from './router';
 import { setupI18n } from './locales';
@@ -21,6 +28,8 @@ async function setupApp() {

  await setupRouter(app);

+  setupProNaiveComponents(app);
+
  setupI18n(app);

  setupAppVersionNotification();
--- a/src/plugins/components.ts
+++ b/src/plugins/components.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import { ProDate, ProDateTime, ProInput, ProRate, create } from 'pro-naive-ui';
+
+/** pro-naive-ui 支持配置表单的按需加载，所以需要注册 */
+export function setupProNaiveComponents(app: App) {
+  const proNaive = create({
+    components: [ProInput, ProDate, ProDateTime, ProRate]
+  });
+  app.use(proNaive);
+}
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1,5 +1,6 @@
 export * from './loading';
 export * from './nprogress';
+export * from './components';
 export * from './iconify';
 export * from './dayjs';
 export * from './app';
--- a/src/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@@ -58,5 +58,10 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
  plugin_tables_vtable: () => import("@/views/plugin/tables/vtable/index.vue"),
  plugin_typeit: () => import("@/views/plugin/typeit/index.vue"),
  plugin_video: () => import("@/views/plugin/video/index.vue"),
+  "pro-naive_form_basic": () => import("@/views/pro-naive/form/basic/index.vue"),
+  "pro-naive_form_query": () => import("@/views/pro-naive/form/query/index.vue"),
+  "pro-naive_form_step": () => import("@/views/pro-naive/form/step/index.vue"),
+  "pro-naive_table_remote": () => import("@/views/pro-naive/table/remote/index.vue"),
+  "pro-naive_table_row-edit": () => import("@/views/pro-naive/table/row-edit/index.vue"),
  "user-center": () => import("@/views/user-center/index.vue"),
 };
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -622,6 +622,86 @@ export const generatedRoutes: GeneratedRoute[] = [
      }
    ]
  },
+  {
+    name: 'pro-naive',
+    path: '/pro-naive',
+    component: 'layout.base',
+    meta: {
+      title: 'pro-naive',
+      i18nKey: 'route.pro-naive',
+      order: 7,
+      icon: 'material-symbols-light:demography-outline-rounded'
+    },
+    children: [
+      {
+        name: 'pro-naive_form',
+        path: '/pro-naive/form',
+        meta: {
+          title: 'pro-naive_form',
+          i18nKey: 'route.pro-naive_form',
+          icon: 'fluent:form-28-regular'
+        },
+        children: [
+          {
+            name: 'pro-naive_form_basic',
+            path: '/pro-naive/form/basic',
+            component: 'view.pro-naive_form_basic',
+            meta: {
+              title: 'pro-naive_form_basic',
+              i18nKey: 'route.pro-naive_form_basic'
+            }
+          },
+          {
+            name: 'pro-naive_form_query',
+            path: '/pro-naive/form/query',
+            component: 'view.pro-naive_form_query',
+            meta: {
+              title: 'pro-naive_form_query',
+              i18nKey: 'route.pro-naive_form_query'
+            }
+          },
+          {
+            name: 'pro-naive_form_step',
+            path: '/pro-naive/form/step',
+            component: 'view.pro-naive_form_step',
+            meta: {
+              title: 'pro-naive_form_step',
+              i18nKey: 'route.pro-naive_form_step'
+            }
+          }
+        ]
+      },
+      {
+        name: 'pro-naive_table',
+        path: '/pro-naive/table',
+        meta: {
+          title: 'pro-naive_table',
+          i18nKey: 'route.pro-naive_table',
+          icon: 'mynaui:table'
+        },
+        children: [
+          {
+            name: 'pro-naive_table_remote',
+            path: '/pro-naive/table/remote',
+            component: 'view.pro-naive_table_remote',
+            meta: {
+              title: 'pro-naive_table_remote',
+              i18nKey: 'route.pro-naive_table_remote'
+            }
+          },
+          {
+            name: 'pro-naive_table_row-edit',
+            path: '/pro-naive/table/row-edit',
+            component: 'view.pro-naive_table_row-edit',
+            meta: {
+              title: 'pro-naive_table_row-edit',
+              i18nKey: 'route.pro-naive_table_row-edit'
+            }
+          }
+        ]
+      }
+    ]
+  },
  {
    name: 'user-center',
    path: '/user-center',
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@@ -174,6 +174,7 @@ const routeMap: RouteMap = {
  "document_vite": "/document/vite",
  "document_unocss": "/document/unocss",
  "document_naive": "/document/naive",
+  "document_pro-naive": "/document/pro-naive",
  "document_antd": "/document/antd",
  "document_alova": "/document/alova",
  "403": "/403",
@@ -232,6 +233,14 @@ const routeMap: RouteMap = {
  "plugin_tables_vtable": "/plugin/tables/vtable",
  "plugin_typeit": "/plugin/typeit",
  "plugin_video": "/plugin/video",
+  "pro-naive": "/pro-naive",
+  "pro-naive_form": "/pro-naive/form",
+  "pro-naive_form_basic": "/pro-naive/form/basic",
+  "pro-naive_form_query": "/pro-naive/form/query",
+  "pro-naive_form_step": "/pro-naive/form/step",
+  "pro-naive_table": "/pro-naive/table",
+  "pro-naive_table_remote": "/pro-naive/table/remote",
+  "pro-naive_table_row-edit": "/pro-naive/table/row-edit",
  "user-center": "/user-center"
 };

--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -91,6 +91,20 @@ const customRoutes: CustomRoute[] = [
          icon: 'logos:naiveui'
        }
      },
+      {
+        name: 'document_pro-naive',
+        path: '/document/pro-naive',
+        component: 'view.iframe-page',
+        props: {
+          url: 'https://naive-ui.pro-components.cn/'
+        },
+        meta: {
+          title: 'document_pro-naive',
+          i18nKey: 'route.document_pro-naive',
+          order: 6,
+          icon: 'logos:naiveui'
+        }
+      },
      {
        name: 'document_alova',
        path: '/document/alova',
--- 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/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -102,6 +102,8 @@ declare module 'vue' {
    NSpace: typeof import('naive-ui')['NSpace']
    NSpin: typeof import('naive-ui')['NSpin']
    NStatistic: typeof import('naive-ui')['NStatistic']
+    NStep: typeof import('naive-ui')['NStep']
+    NSteps: typeof import('naive-ui')['NSteps']
    NSwitch: typeof import('naive-ui')['NSwitch']
    NTab: typeof import('naive-ui')['NTab']
    NTabPane: typeof import('naive-ui')['NTabPane']
@@ -112,6 +114,16 @@ declare module 'vue' {
    NTree: typeof import('naive-ui')['NTree']
    NWatermark: typeof import('naive-ui')['NWatermark']
    PinToggler: typeof import('./../components/common/pin-toggler.vue')['default']
+    ProCard: typeof import('pro-naive-ui')['ProCard']
+    ProConfigProvider: typeof import('pro-naive-ui')['ProConfigProvider']
+    ProDataTable: typeof import('pro-naive-ui')['ProDataTable']
+    ProDate: typeof import('pro-naive-ui')['ProDate']
+    ProEditDataTable: typeof import('pro-naive-ui')['ProEditDataTable']
+    ProForm: typeof import('pro-naive-ui')['ProForm']
+    ProFormList: typeof import('pro-naive-ui')['ProFormList']
+    ProInput: typeof import('pro-naive-ui')['ProInput']
+    ProSearchForm: typeof import('pro-naive-ui')['ProSearchForm']
+    ProSelect: typeof import('pro-naive-ui')['ProSelect']
    ReloadButton: typeof import('./../components/common/reload-button.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@@ -28,6 +28,7 @@ declare module "@elegant-router/types" {
    "document_vite": "/document/vite";
    "document_unocss": "/document/unocss";
    "document_naive": "/document/naive";
+    "document_pro-naive": "/document/pro-naive";
    "document_antd": "/document/antd";
    "document_alova": "/document/alova";
    "403": "/403";
@@ -86,6 +87,14 @@ declare module "@elegant-router/types" {
    "plugin_tables_vtable": "/plugin/tables/vtable";
    "plugin_typeit": "/plugin/typeit";
    "plugin_video": "/plugin/video";
+    "pro-naive": "/pro-naive";
+    "pro-naive_form": "/pro-naive/form";
+    "pro-naive_form_basic": "/pro-naive/form/basic";
+    "pro-naive_form_query": "/pro-naive/form/query";
+    "pro-naive_form_step": "/pro-naive/form/step";
+    "pro-naive_table": "/pro-naive/table";
+    "pro-naive_table_remote": "/pro-naive/table/remote";
+    "pro-naive_table_row-edit": "/pro-naive/table/row-edit";
    "user-center": "/user-center";
  };

@@ -117,6 +126,7 @@ declare module "@elegant-router/types" {
    | "document_vite"
    | "document_unocss"
    | "document_naive"
+    | "document_pro-naive"
    | "document_antd"
    | "document_alova"
  >;
@@ -143,6 +153,7 @@ declare module "@elegant-router/types" {
    | "manage"
    | "multi-menu"
    | "plugin"
+    | "pro-naive"
    | "user-center"
  >;

@@ -205,6 +216,11 @@ declare module "@elegant-router/types" {
    | "plugin_tables_vtable"
    | "plugin_typeit"
    | "plugin_video"
+    | "pro-naive_form_basic"
+    | "pro-naive_form_query"
+    | "pro-naive_form_step"
+    | "pro-naive_table_remote"
+    | "pro-naive_table_row-edit"
    | "user-center"
  >;

@@ -224,6 +240,7 @@ declare module "@elegant-router/types" {
    | "document_vite"
    | "document_unocss"
    | "document_naive"
+    | "document_pro-naive"
    | "document_antd"
    | "document_alova"
  >;
--- a/src/views/pro-naive/ConfigProvider.vue
+++ b/src/views/pro-naive/ConfigProvider.vue
@@ -0,0 +1,17 @@
+<script setup lang="tsx">
+import { computed } from 'vue';
+import { zhCN } from 'pro-naive-ui';
+import { useAppStore } from '@/store/modules/app';
+
+const appStore = useAppStore();
+
+const locale = computed(() => {
+  return appStore.locale === 'zh-CN' ? zhCN : undefined;
+});
+</script>
+
+<template>
+  <ProConfigProvider :locale="locale" class="h-full">
+    <slot></slot>
+  </ProConfigProvider>
+</template>
--- a/src/views/pro-naive/form/basic/index.vue
+++ b/src/views/pro-naive/form/basic/index.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMessage } from 'naive-ui';
+import { createProForm, zhCN } from 'pro-naive-ui';
+import { $t } from '@/locales';
+import ConfigProvider from '../../ConfigProvider.vue';
+
+const submiting = ref(false);
+const message = useMessage();
+
+const form = createProForm({
+  initialValues: {
+    attributes: [
+      {
+        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('reset success');
+  },
+  onSubmit: async values => {
+    submiting.value = true;
+    await delay(1000);
+    message.success(JSON.stringify(values));
+    submiting.value = false;
+  }
+});
+
+function delay(time: number) {
+  return new Promise<void>(resolve => {
+    setTimeout(resolve, time);
+  });
+}
+
+function fillValues() {
+  const values = {
+    appName: $t('page.proNaive.form.basic.appName'),
+    appStatus: 0,
+    responseDate: Date.now()
+  };
+  // 方式一：直接修改 form.values.value
+  // form.values.value.appName = '应用名称';
+  // form.values.value.appStatus = 0;
+  // form.values.value.responseDate = Date.now();
+
+  // 方式二：使用 Object.assign
+  Object.assign(form.values.value, values);
+
+  // 方式三：直接重写 form.values.value
+  // form.values.value = {...}
+}
+</script>
+
+<template>
+  <ConfigProvider :locale="zhCN">
+    <ProForm
+      :form="form"
+      :loading="submiting"
+      :rules="{
+        appName: {
+          required: true
+        }
+      }"
+    >
+      <ProCard :title="$t('page.proNaive.form.basic.title')" :show-collapse="false">
+        <template #header-extra>
+          <NFlex>
+            <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="$t('page.proNaive.form.basic.appName')"
+              :tooltip="$t('page.proNaive.form.basic.appName')"
+              path="appName"
+            />
+          </NGi>
+          <NGi>
+            <ProSelect
+              :title="$t('page.proNaive.form.basic.appStatus')"
+              path="appStatus"
+              :field-props="{
+                options: [
+                  { label: $t('page.proNaive.form.basic.normal'), value: 0 },
+                  { label: $t('page.proNaive.form.basic.anomaly'), value: 1 }
+                ]
+              }"
+            />
+          </NGi>
+          <NGi>
+            <ProDate :title="$t('page.proNaive.form.basic.createTime')" path="createTime" />
+          </NGi>
+          <NGi>
+            <ProDate :title="$t('page.proNaive.form.basic.responseDate')" path="responseDate" required />
+          </NGi>
+          <NGi :span="3">
+            <ProFormList
+              :title="$t('page.proNaive.form.basic.specificationInfo')"
+              path="attributes"
+              :min="1"
+              :creator-initial-value="
+                () => ({
+                  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: $t('page.proNaive.form.basic.addSpecificateItem')
+              }"
+            >
+              <template #item="{ index, itemDom, actionDom }">
+                <NCard
+                  size="small"
+                  embedded
+                  :title="`${$t('page.proNaive.form.basic.specificate')}${index + 1}`"
+                  class="mb-8px"
+                >
+                  <template #header-extra>
+                    <component :is="actionDom" />
+                  </template>
+                  <component :is="itemDom" />
+                </NCard>
+              </template>
+              <ProInput
+                :title="$t('page.proNaive.form.basic.specificationName')"
+                path="name"
+                :field-props="{
+                  class: 'w-230px!'
+                }"
+              />
+              <ProFormList
+                :title="$t('page.proNaive.form.basic.specificationValue')"
+                path="items"
+                :min="1"
+                :creator-button-props="{
+                  dashed: false,
+                  block: false,
+                  renderIcon: undefined,
+                  ghost: true,
+                  text: true,
+                  type: 'info',
+                  content: $t('page.proNaive.form.basic.add')
+                }"
+                :copy-button-props="false"
+                :remove-button-props="{
+                  tooltip: $t('page.proNaive.form.basic.delete')
+                }"
+              >
+                <template #item="{ itemDom, actionDom }">
+                  <div class="me-25px inline-flex">
+                    <component :is="itemDom" />
+                    <div class="ml-8px">
+                      <component :is="actionDom" />
+                    </div>
+                  </div>
+                </template>
+                <ProInput
+                  path="name"
+                  :field-props="{
+                    class: 'w-104px!'
+                  }"
+                />
+              </ProFormList>
+            </ProFormList>
+          </NGi>
+        </NGrid>
+      </ProCard>
+    </ProForm>
+  </ConfigProvider>
+</template>
--- a/src/views/pro-naive/form/query/index.vue
+++ b/src/views/pro-naive/form/query/index.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+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';
+import ConfigProvider from '../../ConfigProvider.vue';
+
+interface Info {
+  appName: string;
+  appStatus: string;
+  createTime: number;
+  responseDate: number;
+  endTime: number;
+}
+
+const loading = ref(false);
+const loading2 = ref(false);
+const message = useMessage();
+
+const form = createProSearchForm<Partial<Info>>({
+  onReset: () => {
+    message.success('reset success');
+  },
+  onSubmit: async values => {
+    message.success(JSON.stringify(values));
+    loading.value = true;
+    await delay(1500);
+    loading.value = false;
+  }
+});
+
+const form2 = createProSearchForm<Partial<Info>>({
+  defaultCollapsed: true,
+  onReset: () => {
+    message.success('reset success');
+  },
+  onSubmit: async values => {
+    message.success(JSON.stringify(values));
+    loading2.value = true;
+    await delay(1500);
+    loading2.value = false;
+  }
+});
+
+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 = 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 => {
+    setTimeout(resolve, time);
+  });
+}
+</script>
+
+<template>
+  <ConfigProvider>
+    <div class="bg-#fff">
+      <ProCard :title="$t('page.proNaive.form.query.title1')" :show-collapse="false">
+        <ProSearchForm :form="form" :loading="loading" :columns="columns" />
+      </ProCard>
+      <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>
+  </ConfigProvider>
+</template>
--- a/src/views/pro-naive/form/step/index.vue
+++ b/src/views/pro-naive/form/step/index.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMessage } from 'naive-ui';
+import { createProForm } from 'pro-naive-ui';
+import { $t } from '@/locales';
+import ConfigProvider from '../../ConfigProvider.vue';
+
+const step = ref(1);
+const submiting = ref(false);
+const message = useMessage();
+const form = createProForm();
+
+const form2 = createProForm({
+  onSubmit: async values => {
+    submiting.value = true;
+    await delay(1000);
+    message.success(
+      JSON.stringify({
+        ...form.values.value,
+        ...values
+      })
+    );
+    submiting.value = false;
+  }
+});
+
+function toNextStepAfterValidated() {
+  form.validate()?.then(() => {
+    step.value += 1;
+  });
+}
+
+function delay(time: number) {
+  return new Promise<void>(resolve => {
+    setTimeout(resolve, time);
+  });
+}
+</script>
+
+<template>
+  <ConfigProvider>
+    <div class="color-#fff">
+      <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="$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="$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="$t('page.proNaive.form.step.step2.field')" path="form2Field" required />
+              <NFlex>
+                <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>
+        </div>
+      </ProCard>
+    </div>
+  </ConfigProvider>
+</template>
--- a/src/views/pro-naive/table/remote/index.vue
+++ b/src/views/pro-naive/table/remote/index.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { ProDataTableColumns, ProSearchFormColumns } from 'pro-naive-ui';
+import {
+  createProSearchForm,
+  renderProCopyableText,
+  renderProDateText,
+  renderProImages,
+  renderProTags,
+  useNDataTable
+} from 'pro-naive-ui';
+import { $t } from '@/locales';
+import ConfigProvider from '../../ConfigProvider.vue';
+
+function fetchList(params: any, values: any) {
+  console.log(params, values);
+  return new Promise<{ total: number; list: any[] }>(resolve => {
+    setTimeout(() => {
+      resolve({
+        total: 987,
+        list: [
+          {
+            now: Date.now(),
+            src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
+            no: '3',
+            title: 'Wonderwall',
+            length: '4:18'
+          },
+          { now: Date.now(), src: '', no: '', title: "Don't Look Back in Anger", length: '4:48' },
+          { now: Date.now(), src: undefined, no: '12', title: 'Champagne Supernova', length: '7:27' },
+          { now: Date.now(), src: null, no: '33', title: 'Wonderwall', length: '4:18' },
+          { now: Date.now(), src: [], no: '44', title: "Don't Look Back in Anger", length: '4:48' },
+          {
+            now: Date.now(),
+            src: [
+              'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
+              'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg'
+            ],
+            no: '122',
+            title: 'Champagne Supernova',
+            length: '7:27'
+          },
+          { now: Date.now(), src: '', no: '333', title: 'Wonderwall', length: '4:18' },
+          { now: Date.now(), src: '', no: '4444', title: "Don't Look Back in Anger", length: '4:48' },
+          { now: Date.now(), src: '', no: '1222', title: 'Champagne Supernova', length: '7:27' },
+          { now: Date.now(), src: '', no: '33333', title: 'Wonderwall', length: '4:18' }
+        ]
+      });
+    }, 1500);
+  });
+}
+
+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 = 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: {
+    responseTime: Date.now()
+  }
+});
+
+const {
+  table: { tableProps },
+  search: { proSearchFormProps }
+} = useNDataTable(
+  ({ current, pageSize, filters, sorter }, values) => fetchList({ current, pageSize, filters, sorter }, values),
+  {
+    form: searchForm
+  }
+);
+</script>
+
+<template>
+  <ConfigProvider>
+    <div class="h-full flex flex-col">
+      <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="$t('page.proNaive.table.remote.title')"
+        size="small"
+        flex-height
+        :columns="columns"
+        row-key="no"
+        v-bind="tableProps"
+      />
+    </div>
+  </ConfigProvider>
+</template>
--- a/src/views/pro-naive/table/row-edit/index.vue
+++ b/src/views/pro-naive/table/row-edit/index.vue
@@ -0,0 +1,138 @@
+<script setup lang="tsx">
+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';
+import ConfigProvider from '../../ConfigProvider.vue';
+
+interface DataSourceType {
+  id: string;
+  title?: string;
+  now?: number;
+  rate?: number;
+}
+
+const message = useMessage();
+const editableKeys = ref<string[]>([]);
+
+const form = createProForm({
+  initialValues: {
+    list: [
+      {
+        id: '1',
+        now: Date.now(),
+        rate: 4,
+        title: `${$t('page.proNaive.table.rowEdit.task')}1`
+      },
+      {
+        id: '2',
+        now: Date.now(),
+        rate: 3,
+        title: `${$t('page.proNaive.table.rowEdit.task')}2`
+      },
+      {
+        id: '3',
+        now: Date.now(),
+        rate: 5,
+        title: `${$t('page.proNaive.table.rowEdit.task')}3`
+      }
+    ]
+  },
+  onSubmit: values => {
+    message.success(JSON.stringify(values));
+  }
+});
+
+function cancelEditable(id: string) {
+  editableKeys.value = editableKeys.value.filter(key => key !== 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>
+            ) : (
+              [
+                <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>
+  <ConfigProvider>
+    <ProForm :form="form" label-placement="left">
+      <ProConfigProvider
+        :prop-overrides="{
+          ProFormItem: {
+            showFeedback: false
+          }
+        }"
+      >
+        <ProEditDataTable
+          v-model:editable-keys="editableKeys"
+          path="list"
+          :columns="columns"
+          :record-creator-props="{
+            record: () => ({ id: Date.now() })
+          }"
+          row-key="id"
+          :field-props="{
+            title: $t('page.proNaive.table.rowEdit.title')
+          }"
+        >
+          <template #toolbar>
+            <NFlex>
+              <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>
+      </ProConfigProvider>
+    </ProForm>
+  </ConfigProvider>
+</template>