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

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>

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>

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>

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>

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>

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>