feat: 优化表格参数

README.md

@@ -56,7 +56,7 @@ pnpm dev
 
 - 以文件夹为路由，读取该文件夹下 index.vue 的信息作为路由信息，其他文件会跳过，可以包含子文件夹作为嵌套路由
 - 在 src/pages 的文件夹层级，作为菜单层级，路由层级最终只有 2 层(配合 keep-alive 缓存)
-- 在 src/pages 目录下，以 _ 开头的文件夹作为 1 级路由，其他作为 2 级路由，也就是应用路由
+- 在 src/pages 目录下，以 \_ 开头的文件夹作为 1 级路由，其他作为 2 级路由，也就是应用路由
 - 子文件夹下，只有 index.vue 文件有效，其他文件会忽略，这些文件可以作为子组件使用
 - components 目录会被忽视。
 - xxx.xx.xx 文件会被忽视，例如 index.my.vue 文件。
@@ -76,7 +76,7 @@ pnpm dev
 
 目前支持的参数，如下：
 
-```ts
+````ts
 interface RouteMeta {
   /**
    * 页面标题
@@ -140,7 +140,7 @@ interface RouteMeta {
    */
   link?: string;
 }
-```
+````
 
 ### 嵌套布局
 
@@ -174,8 +174,6 @@ interface RouteMeta {
 
 用户登陆后获取的权限，应存储在 userStore.auth 字段中，在路由的 beforeEach 守卫中，会比较两个是否匹配，匹配上则继续，否则会显示如下 403 页面：
 
-![Alt text](image.png)
-
 ### 动态路由
 
 相比于比较流行的加法挂载，我更倾向于减法挂载。即默认加载完所有路由，在 beforeEach 钩子根据权限移除不必要的路由。
@@ -190,20 +188,11 @@ interface RouteMeta {
 
 ```html
 <script>
-defineOptions({
+  defineOptions({
-  name: "MyPage"
+    name: 'MyPage',
-})
+  });
 </script>
-<route>
+<route> { "meta": { // 组件名字 "name": "MyPage", // 开启缓存 "cache": true } } </route>
-{
-  "meta": {
-    // 组件名字
-    "name": "MyPage",
-    // 开启缓存
-    "cache": true
-  }
-}
-</route>
 ```
 
 ### 条件加载
@@ -218,7 +207,7 @@ VITE_EXTENSION = my
 
 ### 图标样式
 
-基于 [UnoCSS]() 插件，可使用类似 TailwindCSS 的原子样式快速开发，同时默认安装icon-park-outline 图标库，只需引用类名即可得到 SVG 图标。这在路由菜单等需要动态渲染时非常有用，同时所有样式类和图标类都是按需打包的，示例：
+基于 [UnoCSS]() 插件，可使用类似 TailwindCSS 的原子样式快速开发，同时默认安装 icon-park-outline 图标库，只需引用类名即可得到 SVG 图标。这在路由菜单等需要动态渲染时非常有用，同时所有样式类和图标类都是按需打包的，示例：
 
 ```html
 <i class="text-sm icon-park-outline-home" />
@@ -262,13 +251,13 @@ enum MediaEnum {
 const media = defineConstants([
   {
     value: MediaEnum.VIDEO,
-    label: "视频",
+    label: '视频',
-    color: "red",
+    color: 'red',
   },
   {
     value: MediaEnum.IMAGE,
-    label: "图片",
+    label: '图片',
-    color: "blue",
+    color: 'blue',
   },
 ]);
 
@@ -288,7 +277,7 @@ media.val(); // [1, 2]
   <table ref="tableRef" v-bind="table" />
 </template>
 <script>
-  import { Table, useTable } from "@/components";
+  import { Table, useTable } from '@/components';
 
   const table = useTable({
     // 数据源配置，可以是数组或返回对象的异步函数
@@ -299,8 +288,8 @@ media.val(); // [1, 2]
     // 表格列配置
     columns: [
       {
-        title: "用户名",
+        title: '用户名',
-        dataIndex: "name",
+        dataIndex: 'name',
       },
     ],
 
@@ -313,21 +302,21 @@ media.val(); // [1, 2]
     search: {
       items: [
         {
-          field: "username",
+          field: 'username',
-          label: "用户名",
+          label: '用户名',
-          type: "input",
+          type: 'input',
         },
       ],
     },
 
     // 新增表单弹窗的配置，类型为useFormModal的入参
     create: {
-      title: "新增用户",
+      title: '新增用户',
       items: [
         {
-          field: "username",
+          field: 'username',
-          label: "用户名",
+          label: '用户名',
-          type: "input",
+          type: 'input',
         },
       ],
       submit: async ({ model }) => {
@@ -337,12 +326,12 @@ media.val(); // [1, 2]
 
     // 修改表单弹窗的配置，类型为useFormModal的入参
     modify: {
-      title: "修改用户",
+      title: '修改用户',
       items: [
         {
-          field: "username",
+          field: 'username',
-          label: "用户名",
+          label: '用户名',
-          type: "input",
+          type: 'input',
         },
       ],
       submit: async ({ model }) => {
@@ -352,6 +341,7 @@ media.val(); // [1, 2]
   });
 </script>
 ```
+
 提示：以上每个参数都有类型提示，原组件每个参数都可透传，封装遵循扩展而非限制原则。
 
 ### 自动导入

scripts/vite/plugin-info.ts

@@ -46,10 +46,10 @@ const getBuildInfo = async () => {
   const version = commits ? `${latestTag}.${commits}` : `v${pkg.version}`;
   const content = `欢迎访问！版本: ${version}  标识: ${hash}  构建: ${time}`;
   const style = `"color: #09f; font-weight: 900;", "font-size: 12px; color: #09f; font-family: ''"`;
-  const vString = `var __APP_VERSION__ = '${version}';\n`;
+  const vString = `\n        var __APP_VERSION__ = '${version}';\n`;
-  const hString = `var __APP_HASH__ = '${hash}';\n`;
+  const hString = `        var __APP_HASH__ = '${hash}';\n`;
-  const dString = `var __APP_DATE__ = '${time}';\n`;
+  const dString = `        var __APP_DATE__ = '${time}';\n`;
-  const lString = `console.log(\`%c${LOGO} \n%c${content}\n\`, ${style});\n`;
+  const lString = `        console.log(\`%c${LOGO} \n%c${content}\n\`, ${style});\n`;
   return vString + hString + dString + lString;
 };
 

src/components/AnTable.1/index.ts

@@ -1,5 +1,3 @@
 export * from './Table';
 export * from './useTable';
-export * from './useTableColumns';
+
-export * from './useSearchForm';
-export * from './useModiyForm';

src/components/AnTable.1/useModiyForm.tsx

@@ -1,8 +1,8 @@
-import { FormItem, FormModalUseOptions, useFormModalProps, AnFormModalProps } from '@/components/AnForm';
+import { AnFormModalProps, FormItem, FormModalUseOptions, useFormModalProps } from '@/components/AnForm';
-import { cloneDeep, merge } from 'lodash-es';
+import { cloneDeep, defaults, merge } from 'lodash-es';
+import { AnTableInstance } from './Table';
 import { ExtendFormItem } from './useSearchForm';
 import { TableUseOptions } from './useTable';
-import { AnTableInstance } from './Table';
 
 export type ModifyForm = Omit<FormModalUseOptions, 'items' | 'trigger'> & {
   /**
@@ -31,17 +31,24 @@ export function useModifyForm(options: TableUseOptions, createModel: Recordable,
     return undefined;
   }
 
-  for(const column of columns ?? []) {
+  for (const column of columns ?? []) {
-    if(column.type === 'button') {
+    if (column.type === 'button') {
-      const btn = column.buttons.find(i => i.type === 'modify')
+      const btn = column.buttons.find(i => i.type === 'modify');
-      if(!btn) {
+      if (!btn) {
         column.buttons.unshift({
           text: '修改',
           type: 'modify',
           onClick({ record }) {
             tableRef.value?.modifyRef?.open(record);
-          }
+          },
-        })
+        });
+      } else {
+        const onClick = btn.onClick;
+        defaults(btn, { text: '修改' });
+        btn.onClick = props => {
+          const data = onClick?.(props) ?? props.record;
+          tableRef.value?.modifyRef?.open(data);
+        };
       }
       break;
     }

src/components/AnTable.1/useTableColumns.tsx

@@ -182,7 +182,7 @@ function useTableIndexColumn() {}
 function useTableButtonColumn(column: TableButtonColumn & TableColumnData, tableRef: Ref<AnTableInstance | null>) {
   const items: TableColumnButton[] = [];
 
-  defaultsDeep(column, { align: 'right' });
+  defaultsDeep(column, { align: 'right', title: '操作' });
 
   for (let button of column.buttons) {
     if (button.type === 'delete') {

src/pages/home/index.vue

@@ -71,8 +71,8 @@
 </template>
 
 <script setup lang="tsx">
-import { useUserStore } from '@/store/user';
 import { useTable } from '@/components/AnTable.1';
+import { useUserStore } from '@/store/user';
 
 const UserTable = useTable(instance => {
   return {
@@ -95,7 +95,6 @@ const UserTable = useTable(instance => {
         title: '操作',
         type: 'button',
         width: 200,
-        align: 'right',
         buttons: [
           {
             text: '测试',
@@ -143,9 +142,13 @@ const UserTable = useTable(instance => {
       },
     },
     tableSlots: {
-      // 'pagination-left': () => {
+      'pagination-left': () => {
-      //   return <a-button>测试1</a-button>;
+        return (
-      // },
+          <div class="flex-1 flex items-center">
+            <a-button>测试</a-button>
+          </div>
+        );
+      },
       // 'pagination-right': () => {
       //   return <a-button>测试1</a-button>;
       // },