feat(projects): 添加 pro-naive-ui 表单和表格示例

src/locales/langs/en-us.ts

@@ -180,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',

src/locales/langs/zh-cn.ts

@@ -180,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': '隐藏子菜单',

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"),
 };

src/router/elegant/routes.ts

@@ -622,6 +622,82 @@ export const generatedRoutes: GeneratedRoute[] = [
       }
     ]
   },
+  {
+    name: 'pro-naive',
+    path: '/pro-naive',
+    component: 'layout.base',
+    meta: {
+      title: 'pro-naive',
+      i18nKey: 'route.pro-naive'
+    },
+    children: [
+      {
+        name: 'pro-naive_form',
+        path: '/pro-naive/form',
+        meta: {
+          title: 'pro-naive_form',
+          i18nKey: 'route.pro-naive_form'
+        },
+        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'
+        },
+        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',

src/router/elegant/transform.ts

@@ -233,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"
 };
 

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']

src/typings/elegant-router.d.ts

@@ -87,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";
   };
 
@@ -145,6 +153,7 @@ declare module "@elegant-router/types" {
     | "manage"
     | "multi-menu"
     | "plugin"
+    | "pro-naive"
     | "user-center"
   >;
 
@@ -207,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"
   >;
 

src/views/pro-naive/form/basic/index.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMessage } from 'naive-ui';
+import { createProForm } from 'pro-naive-ui';
+
+const submiting = ref(false);
+const message = useMessage();
+
+const form = createProForm({
+  initialValues: {
+    attributes: [
+      {
+        name: '颜色',
+        items: [{ name: '红' }, { name: '橙' }]
+      }
+    ]
+  },
+  onReset: () => {
+    message.success('重置成功');
+  },
+  onSubmit: async values => {
+    console.log(values);
+    submiting.value = true;
+    await delay(1000);
+    message.success('提交成功');
+    submiting.value = false;
+  }
+});
+
+function delay(time: number) {
+  return new Promise<void>(resolve => {
+    setTimeout(resolve, time);
+  });
+}
+
+function fillValues() {
+  const values = {
+    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>
+  <ProForm
+    :form="form"
+    :loading="submiting"
+    :rules="{
+      appName: {
+        required: true
+      }
+    }"
+  >
+    <ProCard 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>
+        </NFlex>
+      </template>
+      <NGrid cols="1 s:2 l:3" :x-gap="16" responsive="screen">
+        <NGi>
+          <ProInput title="应用名称" tooltip="应用名称" path="appName" />
+        </NGi>
+        <NGi>
+          <ProSelect
+            title="应用状态"
+            path="appStatus"
+            :field-props="{
+              options: [
+                { label: '正常', value: 0 },
+                { label: '异常', value: 1 }
+              ]
+            }"
+          />
+        </NGi>
+        <NGi>
+          <ProDate title="创建时间" path="createTime" />
+        </NGi>
+        <NGi>
+          <ProDate title="响应日期" path="responseDate" required />
+        </NGi>
+        <NGi :span="3">
+          <ProFormList
+            title="规格信息"
+            path="attributes"
+            :min="1"
+            :creator-initial-value="
+              () => ({
+                name: '颜色',
+                items: [{ name: '红' }, { name: '橙' }]
+              })
+            "
+            :copy-button-props="false"
+            :creator-button-props="{
+              content: '添加规格项'
+            }"
+          >
+            <template #item="{ index, itemDom, actionDom }">
+              <NCard size="small" embedded :title="`规格${index + 1}`" class="mb-8px">
+                <template #header-extra>
+                  <component :is="actionDom" />
+                </template>
+                <component :is="itemDom" />
+              </NCard>
+            </template>
+            <ProInput
+              title="规格名"
+              path="name"
+              :field-props="{
+                class: 'w-230px!'
+              }"
+            />
+            <ProFormList
+              title="规格值"
+              path="items"
+              :min="1"
+              :creator-button-props="{
+                dashed: false,
+                block: false,
+                renderIcon: undefined,
+                ghost: true,
+                text: true,
+                type: 'info',
+                content: '新建'
+              }"
+              :copy-button-props="false"
+              :remove-button-props="{
+                tooltip: '删除'
+              }"
+            >
+              <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>
+</template>

src/views/pro-naive/form/query/index.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { ProSearchFormColumns } from 'pro-naive-ui';
+import { createProSearchForm } from 'pro-naive-ui';
+
+interface Info {
+  appName: string;
+  appStatus: string;
+  createTime: number;
+  responseDate: number;
+  endTime: number;
+}
+
+const loading = ref(false);
+const loading2 = ref(false);
+
+const form = createProSearchForm<Partial<Info>>({
+  onReset: console.log,
+  onSubmit: async values => {
+    console.log(values);
+    loading.value = true;
+    await delay(1500);
+    loading.value = false;
+  }
+});
+
+const form2 = createProSearchForm<Partial<Info>>({
+  defaultCollapsed: true,
+  onReset: console.log,
+  onSubmit: async values => {
+    console.log(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 columns2 = Array.from({ length: 20 }, (_, i) => ({
+  title: `字段${i}`,
+  path: `field${i}`
+}));
+
+function delay(time: number) {
+  return new Promise<void>(resolve => {
+    setTimeout(resolve, time);
+  });
+}
+</script>
+
+<template>
+  <div class="bg-#fff">
+    <ProCard title="查询表单，默认展开" :show-collapse="false">
+      <ProSearchForm :form="form" :loading="loading" :columns="columns" />
+    </ProCard>
+    <ProCard class="mt-12px" title="查询表单，默认折叠，折叠时保留2行" :show-collapse="false">
+      <ProSearchForm :form="form2" :loading="loading2" :columns="columns2" :collapsed-rows="2" />
+    </ProCard>
+  </div>
+</template>

src/views/pro-naive/form/step/index.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMessage } from 'naive-ui';
+import { createProForm } from 'pro-naive-ui';
+
+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>
+  <div class="color-#fff">
+    <ProCard 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" />
+        </NSteps>
+        <template v-if="step === 1">
+          <ProForm :form="form" label-placement="left">
+            <ProInput title="表单1字段" path="form1Field" required />
+            <NButton @click="toNextStepAfterValidated">下一步</NButton>
+          </ProForm>
+        </template>
+        <template v-if="step === 2">
+          <ProForm :form="form2" :loading="submiting" label-placement="left">
+            <ProInput title="表单2字段" path="form2Field" required />
+            <NFlex>
+              <NButton :disabled="submiting" @click="step -= 1">上一步</NButton>
+              <NButton type="primary" attr-type="submit" :loading="submiting">提交</NButton>
+            </NFlex>
+          </ProForm>
+        </template>
+      </div>
+    </ProCard>
+  </div>
+</template>

src/views/pro-naive/table/remote/index.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { ProDataTableColumns, ProSearchFormColumns } from 'pro-naive-ui';
+import {
+  createProSearchForm,
+  renderProCopyableText,
+  renderProDateText,
+  renderProImages,
+  renderProTags,
+  useNDataTable
+} from 'pro-naive-ui';
+
+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 = 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 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 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>
+  <div class="flex flex-col">
+    <ProCard title="筛选条件" 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" />
+  </div>
+</template>

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

@@ -0,0 +1,125 @@
+<script setup lang="tsx">
+import { ref } from 'vue';
+import { NButton, NFlex } from 'naive-ui';
+import type { ProEditDataTableColumns } from 'pro-naive-ui';
+import { createProForm } from 'pro-naive-ui';
+
+interface DataSourceType {
+  id: string;
+  title?: string;
+  now?: number;
+  rate?: number;
+}
+
+const editableKeys = ref<string[]>([]);
+const form = createProForm({
+  initialValues: {
+    list: [
+      {
+        id: '1',
+        now: Date.now(),
+        rate: 4,
+        title: '任务一'
+      },
+      {
+        id: '2',
+        now: Date.now(),
+        rate: 3,
+        title: '任务二'
+      },
+      {
+        id: '3',
+        now: Date.now(),
+        rate: 5,
+        title: '任务三'
+      }
+    ]
+  },
+  onSubmit: console.log
+});
+
+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);
+                }}
+              >
+                删除
+              </NButton>
+            ]
+          )}
+        </NFlex>
+      );
+    }
+  }
+];
+</script>
+
+<template>
+  <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"
+      >
+        <template #toolbar>
+          <NFlex>
+            <NButton attr-type="reset">重置</NButton>
+            <NButton type="primary" attr-type="submit">提交</NButton>
+          </NFlex>
+        </template>
+      </ProEditDataTable>
+    </ProConfigProvider>
+  </ProForm>
+</template>