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

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>