feat: 优化表格组件

.env

@@ -1,42 +1,30 @@
-# ============================================================
+# =====================================================================================
-# 项目配置文件
+# 应用配置
-# ============================================================
+# =====================================================================================
-
 # 网站标题
 VITE_APP_TITLE = 绝弹管理系统
-
 # 网站副标题
 VITE_APP_SUBTITLE = 快速开发web应用的模板工具
-
 # Axios基本URL
 VITE_APP_API_BASE_URL = /api
 
-
+# =====================================================================================
-
-# ============================================================
 # 开发设置
-# ============================================================
+# =====================================================================================
-
 # API接口地址(开发环境)
 VITE_API_BASE_URL = http://127.0.0.1:3030
-
 # API代理地址(开发环境)
 VITE_API_PROXY_URL = /api
-
 # API文档地址(开发环境) 备注：需为openapi规范的json文件
 VITE_API_DOCS_URL = http://127.0.0.1:3030/openapi.json
-
 # 端口号(开发环境)
 VITE_DEV_PORT = 3020
-
 # 主机地址(开发环境)
 VITE_DEV_HOST = 0.0.0.0
 
-
+# =====================================================================================
-
-# ============================================================
 # 构建设置
-# ============================================================
+# =====================================================================================
-
+# 构建时加载的文件后缀.
-# 构建时加载的文件后缀. 例如：设置为todo则会首先尝试加载index.todo.vue文件，不存在时再加载index.vue文件
+# 例如：设置为todo则会首先尝试加载index.todo.vue文件，不存在时再加载index.vue文件
 VITE_BUILD_EXTENSION = todo

scripts/openapi/README.md

@@ -0,0 +1,4 @@
+## 修改
+
+route-docs.ejs
+- 移除 `@description` 关键字

scripts/openapi/template/README.md

@@ -1,2 +0,0 @@
-# 修改
-- procedure-call.ejs 添加return

scripts/openapi/template/route-docs.ejs

@@ -4,7 +4,7 @@ const { _, formatDescription, fmtToJSDocLine, pascalCase, require } = utils;
 const { raw, request, routeName } = route;
 
 const jsDocDescription = raw.description ?
-    ` * @description ${formatDescription(raw.description, true)}` :
+    ` * ${formatDescription(raw.description, true)}` :
     fmtToJSDocLine('No description', { eol: false });
 const jsDocLines = _.compact([
     _.size(raw.tags) && ` * @tags ${raw.tags.join(", ")}`,

src/api/service/index.ts

@@ -178,10 +178,6 @@ export interface UpdateRoleDto {
   permissions?: Permission[];
 }
 
-export type CreatePostDto = object;
-
-export type UpdatePostDto = object;
-
 export interface CreatePermissionDto {
   name: string;
   slug: string;
@@ -194,16 +190,68 @@ export interface UpdatePermissionDto {
   description?: string;
 }
 
+export interface CreateUploadDto {
+  /** @format binary */
+  file: File;
+}
+
+export type CreatePostDto = object;
+
+export interface Post {
+  /**
+   * 文章标题
+   * @example "文章标题"
+   */
+  title: string;
+  /**
+   * 文章描述
+   * @example "文章描述"
+   */
+  description: string;
+  /**
+   * 文章内容
+   * @example "文章内容"
+   */
+  content: string;
+  /**
+   * 文章作者
+   * @example "文章作者"
+   */
+  author: User;
+}
+
+export type UpdatePostDto = object;
+
+export interface Response {
+  /**
+   * 状态码
+   * @format int32
+   * @example 2000
+   */
+  code: number;
+  /**
+   * 提示信息
+   * @example "请求成功"
+   */
+  message: string;
+}
+
 export interface GetUsersParams {
+  /**
+   * 用户昵称
+   * @example "绝弹"
+   */
   nickname?: string;
   /**
    * 页码
    * @min 1
+   * @example 1
    */
   page?: number;
   /**
    * 每页条数
    * @min 1
+   * @example 10
    */
   size?: number;
 }
@@ -339,7 +387,7 @@ export class HttpClient<SecurityDataType = unknown> {
 }
 
 /**
- * @title 绝弹应用接口文档
+ * @title Appnify接口文档
  * @version 1.0
  * @externalDocs /openapi.json
  * @contact
@@ -349,15 +397,19 @@ export class HttpClient<SecurityDataType = unknown> {
 export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDataType> {
   user = {
     /**
-     * No description
+     * 创建用户
      *
      * @tags user
      * @name AddUser
-     * @summary 创建用户
      * @request POST:/api/v1/users
      */
     addUser: (data: CreateUserDto, params: RequestParams = {}) => {
-      return this.request<number, any>({
+      return this.request<
+        Response & {
+          data?: number;
+        },
+        any
+      >({
         path: `/api/v1/users`,
         method: "POST",
         body: data,
@@ -372,11 +424,16 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      *
      * @tags user
      * @name GetUsers
-     * @summary 批量查询
+     * @summary 批量查询用户
      * @request GET:/api/v1/users
      */
     getUsers: (query: GetUsersParams, params: RequestParams = {}) => {
-      return this.request<User[], any>({
+      return this.request<
+        Response & {
+          data?: User[];
+        },
+        any
+      >({
         path: `/api/v1/users`,
         method: "GET",
         query: query,
@@ -394,7 +451,12 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * @request GET:/api/v2/users/{id}
      */
     getUserv2: (id: number, params: RequestParams = {}) => {
-      return this.request<User, any>({
+      return this.request<
+        Response & {
+          data?: User;
+        },
+        any
+      >({
         path: `/api/v2/users/${id}`,
         method: "GET",
         format: "json",
@@ -406,11 +468,11 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * No description
      *
      * @tags user
-     * @name SetUser
+     * @name UpdateUser
      * @summary 更新用户
      * @request PATCH:/api/v1/users/{id}
      */
-    setUser: (id: number, data: UpdateUserDto, params: RequestParams = {}) => {
+    updateUser: (id: number, data: UpdateUserDto, params: RequestParams = {}) => {
       return this.request<void, any>({
         path: `/api/v1/users/${id}`,
         method: "PATCH",
@@ -424,11 +486,11 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * No description
      *
      * @tags user
-     * @name DelUser
+     * @name DeleteUser
      * @summary 删除用户
      * @request DELETE:/api/v1/users/{id}
      */
-    delUser: (id: number, params: RequestParams = {}) => {
+    deleteUser: (id: number, params: RequestParams = {}) => {
       return this.request<void, any>({
         path: `/api/v1/users/${id}`,
         method: "DELETE",
@@ -446,7 +508,12 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * @request POST:/api/v1/auth/login
      */
     login: (data: AuthUserDto, params: RequestParams = {}) => {
-      return this.request<string, void>({
+      return this.request<
+        Response & {
+          data?: string;
+        },
+        void
+      >({
         path: `/api/v1/auth/login`,
         method: "POST",
         body: data,
@@ -466,7 +533,12 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * @request POST:/api/v1/roles
      */
     addRole: (data: CreateRoleDto, params: RequestParams = {}) => {
-      return this.request<number, any>({
+      return this.request<
+        Response & {
+          data?: number;
+        },
+        any
+      >({
         path: `/api/v1/roles`,
         method: "POST",
         body: data,
@@ -501,7 +573,12 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * @request GET:/api/v1/roles/{id}
      */
     getRole: (id: string, params: RequestParams = {}) => {
-      return this.request<string, any>({
+      return this.request<
+        Response & {
+          data?: string;
+        },
+        any
+      >({
         path: `/api/v1/roles/${id}`,
         method: "GET",
         format: "json",
@@ -518,12 +595,11 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * @request PATCH:/api/v1/roles/{id}
      */
     updateRole: (id: string, data: UpdateRoleDto, params: RequestParams = {}) => {
-      return this.request<string, any>({
+      return this.request<void, any>({
         path: `/api/v1/roles/${id}`,
         method: "PATCH",
         body: data,
         type: ContentType.Json,
-        format: "json",
         ...params,
       });
     },
@@ -537,7 +613,12 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * @request DELETE:/api/v1/roles/{id}
      */
     delRole: (id: string, params: RequestParams = {}) => {
-      return this.request<string, any>({
+      return this.request<
+        Response & {
+          data?: string;
+        },
+        any
+      >({
         path: `/api/v1/roles/${id}`,
         method: "DELETE",
         format: "json",
@@ -545,181 +626,6 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
       });
     },
   };
-  upload = {
-    /**
-     * No description
-     *
-     * @tags upload
-     * @name Upload
-     * @summary 上传文件
-     * @request POST:/api/v1/upload
-     */
-    upload: (params: RequestParams = {}) => {
-      return this.request<number, any>({
-        path: `/api/v1/upload`,
-        method: "POST",
-        format: "json",
-        ...params,
-      });
-    },
-
-    /**
-     * No description
-     *
-     * @tags upload
-     * @name GetUploads
-     * @summary 批量查询
-     * @request GET:/api/v1/upload
-     */
-    getUploads: (params: RequestParams = {}) => {
-      return this.request<void, any>({
-        path: `/api/v1/upload`,
-        method: "GET",
-        ...params,
-      });
-    },
-
-    /**
-     * No description
-     *
-     * @tags upload
-     * @name GetUpload
-     * @summary 查询
-     * @request GET:/api/v1/upload/{id}
-     */
-    getUpload: (id: string, params: RequestParams = {}) => {
-      return this.request<string, any>({
-        path: `/api/v1/upload/${id}`,
-        method: "GET",
-        format: "json",
-        ...params,
-      });
-    },
-
-    /**
-     * No description
-     *
-     * @tags upload
-     * @name UpdateUpload
-     * @summary 更新
-     * @request PATCH:/api/v1/upload/{id}
-     */
-    updateUpload: (id: string, params: RequestParams = {}) => {
-      return this.request<string, any>({
-        path: `/api/v1/upload/${id}`,
-        method: "PATCH",
-        format: "json",
-        ...params,
-      });
-    },
-
-    /**
-     * No description
-     *
-     * @tags upload
-     * @name DelUpload
-     * @summary 删除
-     * @request DELETE:/api/v1/upload/{id}
-     */
-    delUpload: (id: string, params: RequestParams = {}) => {
-      return this.request<string, any>({
-        path: `/api/v1/upload/${id}`,
-        method: "DELETE",
-        format: "json",
-        ...params,
-      });
-    },
-  };
-  post = {
-    /**
-     * No description
-     *
-     * @tags post
-     * @name AddPost
-     * @summary 创建文章
-     * @request POST:/api/v1/post
-     */
-    addPost: (data: CreatePostDto, params: RequestParams = {}) => {
-      return this.request<string, any>({
-        path: `/api/v1/post`,
-        method: "POST",
-        body: data,
-        type: ContentType.Json,
-        format: "json",
-        ...params,
-      });
-    },
-
-    /**
-     * No description
-     *
-     * @tags post
-     * @name GetPosts
-     * @summary 批量查询文章
-     * @request GET:/api/v1/post
-     */
-    getPosts: (params: RequestParams = {}) => {
-      return this.request<string, any>({
-        path: `/api/v1/post`,
-        method: "GET",
-        format: "json",
-        ...params,
-      });
-    },
-
-    /**
-     * No description
-     *
-     * @tags post
-     * @name GetPost
-     * @summary 查询文章
-     * @request GET:/api/v1/post/{id}
-     */
-    getPost: (id: string, params: RequestParams = {}) => {
-      return this.request<string, any>({
-        path: `/api/v1/post/${id}`,
-        method: "GET",
-        format: "json",
-        ...params,
-      });
-    },
-
-    /**
-     * No description
-     *
-     * @tags post
-     * @name UpdatePost
-     * @summary 更新文章
-     * @request PATCH:/api/v1/post/{id}
-     */
-    updatePost: (id: string, data: UpdatePostDto, params: RequestParams = {}) => {
-      return this.request<string, any>({
-        path: `/api/v1/post/${id}`,
-        method: "PATCH",
-        body: data,
-        type: ContentType.Json,
-        format: "json",
-        ...params,
-      });
-    },
-
-    /**
-     * No description
-     *
-     * @tags post
-     * @name DelPost
-     * @summary 删除文章
-     * @request DELETE:/api/v1/post/{id}
-     */
-    delPost: (id: string, params: RequestParams = {}) => {
-      return this.request<string, any>({
-        path: `/api/v1/post/${id}`,
-        method: "DELETE",
-        format: "json",
-        ...params,
-      });
-    },
-  };
   permission = {
     /**
      * No description
@@ -730,7 +636,12 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * @request POST:/api/v1/permissions
      */
     addPermission: (data: CreatePermissionDto, params: RequestParams = {}) => {
-      return this.request<number, any>({
+      return this.request<
+        Response & {
+          data?: number;
+        },
+        any
+      >({
         path: `/api/v1/permissions`,
         method: "POST",
         body: data,
@@ -765,7 +676,12 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * @request GET:/api/v1/permissions/{id}
      */
     getPermission: (id: string, params: RequestParams = {}) => {
-      return this.request<string, any>({
+      return this.request<
+        Response & {
+          data?: string;
+        },
+        any
+      >({
         path: `/api/v1/permissions/${id}`,
         method: "GET",
         format: "json",
@@ -782,12 +698,11 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * @request PATCH:/api/v1/permissions/{id}
      */
     updatePermission: (id: string, data: UpdatePermissionDto, params: RequestParams = {}) => {
-      return this.request<string, any>({
+      return this.request<void, any>({
         path: `/api/v1/permissions/${id}`,
         method: "PATCH",
         body: data,
         type: ContentType.Json,
-        format: "json",
         ...params,
       });
     },
@@ -801,7 +716,12 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
      * @request DELETE:/api/v1/permissions/{id}
      */
     delPermission: (id: string, params: RequestParams = {}) => {
-      return this.request<string, any>({
+      return this.request<
+        Response & {
+          data?: string;
+        },
+        any
+      >({
         path: `/api/v1/permissions/${id}`,
         method: "DELETE",
         format: "json",
@@ -809,4 +729,208 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
       });
     },
   };
+  upload = {
+    /**
+     * No description
+     *
+     * @tags upload
+     * @name Upload
+     * @summary 上传文件
+     * @request POST:/api/v1/upload
+     */
+    upload: (data: CreateUploadDto, params: RequestParams = {}) => {
+      return this.request<
+        Response & {
+          data?: number;
+        },
+        any
+      >({
+        path: `/api/v1/upload`,
+        method: "POST",
+        body: data,
+        type: ContentType.FormData,
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * No description
+     *
+     * @tags upload
+     * @name GetUploads
+     * @summary 批量查询
+     * @request GET:/api/v1/upload
+     */
+    getUploads: (params: RequestParams = {}) => {
+      return this.request<void, any>({
+        path: `/api/v1/upload`,
+        method: "GET",
+        ...params,
+      });
+    },
+
+    /**
+     * No description
+     *
+     * @tags upload
+     * @name GetUpload
+     * @summary 查询
+     * @request GET:/api/v1/upload/{id}
+     */
+    getUpload: (id: string, params: RequestParams = {}) => {
+      return this.request<
+        Response & {
+          data?: string;
+        },
+        any
+      >({
+        path: `/api/v1/upload/${id}`,
+        method: "GET",
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * No description
+     *
+     * @tags upload
+     * @name UpdateUpload
+     * @summary 更新
+     * @request PATCH:/api/v1/upload/{id}
+     */
+    updateUpload: (id: string, params: RequestParams = {}) => {
+      return this.request<
+        Response & {
+          data?: string;
+        },
+        any
+      >({
+        path: `/api/v1/upload/${id}`,
+        method: "PATCH",
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * No description
+     *
+     * @tags upload
+     * @name DelUpload
+     * @summary 删除
+     * @request DELETE:/api/v1/upload/{id}
+     */
+    delUpload: (id: string, params: RequestParams = {}) => {
+      return this.request<
+        Response & {
+          data?: string;
+        },
+        any
+      >({
+        path: `/api/v1/upload/${id}`,
+        method: "DELETE",
+        format: "json",
+        ...params,
+      });
+    },
+  };
+  post = {
+    /**
+     * No description
+     *
+     * @tags post
+     * @name AddPost
+     * @summary 创建文章
+     * @request POST:/api/v1/post
+     */
+    addPost: (data: CreatePostDto, params: RequestParams = {}) => {
+      return this.request<
+        Response & {
+          data?: number;
+        },
+        any
+      >({
+        path: `/api/v1/post`,
+        method: "POST",
+        body: data,
+        type: ContentType.Json,
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * No description
+     *
+     * @tags post
+     * @name GetPosts
+     * @summary 批量查询文章
+     * @request GET:/api/v1/post
+     */
+    getPosts: (params: RequestParams = {}) => {
+      return this.request<void, any>({
+        path: `/api/v1/post`,
+        method: "GET",
+        ...params,
+      });
+    },
+
+    /**
+     * No description
+     *
+     * @tags post
+     * @name GetPost
+     * @summary 查询文章
+     * @request GET:/api/v1/post/{id}
+     */
+    getPost: (id: string, params: RequestParams = {}) => {
+      return this.request<
+        Response & {
+          data?: Post;
+        },
+        any
+      >({
+        path: `/api/v1/post/${id}`,
+        method: "GET",
+        format: "json",
+        ...params,
+      });
+    },
+
+    /**
+     * No description
+     *
+     * @tags post
+     * @name UpdatePost
+     * @summary 更新文章
+     * @request PATCH:/api/v1/post/{id}
+     */
+    updatePost: (id: string, data: UpdatePostDto, params: RequestParams = {}) => {
+      return this.request<void, any>({
+        path: `/api/v1/post/${id}`,
+        method: "PATCH",
+        body: data,
+        type: ContentType.Json,
+        ...params,
+      });
+    },
+
+    /**
+     * No description
+     *
+     * @tags post
+     * @name DelPost
+     * @summary 删除文章
+     * @request DELETE:/api/v1/post/{id}
+     */
+    delPost: (id: string, params: RequestParams = {}) => {
+      return this.request<void, any>({
+        path: `/api/v1/post/${id}`,
+        method: "DELETE",
+        ...params,
+      });
+    },
+  };
 }

src/components/form/form-modal.tsx

@@ -25,7 +25,7 @@ export const FormModal = defineComponent({
      * 触发元素
      */
     trigger: {
-      type: [Boolean, Object] as PropType<
+      type: [Boolean, Function, Object] as PropType<
         | boolean
         | ((props: { model: any; items: any[] }) => VNode)
         | {

src/components/table/table.config.tsx

@@ -49,7 +49,8 @@ export const config = {
   },
   columnButtonBase: {
     buttonProps: {
-      type: "primary",
+      // type: "text",
+      size: "mini",
     },
   },
   columnButtonDelete: {

src/components/table/table.tsx

@@ -5,7 +5,6 @@ import { Form, FormInstance, FormModal, FormModalInstance, FormModalProps, FormP
 import { config } from "./table.config";
 
 type DataFn = (search: Record<string, any>, paging: { page: number; size: number }) => Promise<any>;
-type Data = BaseData[] | DataFn;
 
 /**
  * 表格组件
@@ -16,9 +15,10 @@ export const Table = defineComponent({
   props: {
     /**
      * 表格数据
+     * @description 可以是数组或者函数，函数返回值为`{ data: BaseData[], total: number }`类型
      */
     data: {
-      type: [Array, Function] as PropType<Data>,
+      type: [Array, Function] as PropType<BaseData[] | DataFn>,
     },
     /**
      * 表格列设置
@@ -159,9 +159,16 @@ export const Table = defineComponent({
 
         <div class={`mb-2 flex justify-between ${!this.inlined && "mt-2"}`}>
           <div class="flex-1 flex gap-2">
-            {this.create && <FormModal ref="createRef" onSubmited={this.reloadData} {...(this.create as any)}></FormModal>}
+            {this.create && (
+              <FormModal ref="createRef" onSubmited={this.reloadData} {...(this.create as any)}></FormModal>
+            )}
             {this.modify && (
-              <FormModal ref="modifyRef" onSubmited={this.reloadData} trigger={false} {...(this.modify as any)}></FormModal>
+              <FormModal
+                {...(this.modify as any)}
+                ref="modifyRef"
+                onSubmited={this.reloadData}
+                trigger={false}
+              ></FormModal>
             )}
             {this.$slots.action?.()}
           </div>

src/components/table/use-interface.ts

@@ -20,72 +20,71 @@ interface UseColumnRenderOptions {
 
 export interface TableColumnButton {
   /**
-   * button text
+   * 按钮文本
    */
   text?: string;
 
   /**
-   * button type
+   * 操作类型
    */
   type?: "delete" | "modify";
 
   /**
-   * onClick callback
+   * 处理函数
    */
   onClick?: (data: UseColumnRenderOptions, openModify?: (model: Record<string, any>) => void) => void;
 
   /**
-   * disable button dynamicly
+   * 是否禁用按钮
    */
   disabled?: (data: UseColumnRenderOptions) => boolean;
 
   /**
-   * show or hide button dynamicly
+   * 是否显示按钮
    */
   visible?: (data: UseColumnRenderOptions) => boolean;
 
   /**
-   * props for `Button`
+   * 传递给按钮的props
    */
   buttonProps?: Partial<Omit<InstanceType<typeof Link>["$props"], "onClick" | "disabled">>;
 }
 
 export interface UseTableColumn extends TableColumnData {
   /**
-   * column type
+   * 表格列类型
    */
   type?: "index" | "button";
 
   /**
-   * only for `type: "button"`
+   * 按钮配置列表
    */
   buttons?: TableColumnButton[];
 }
 
-type ExtendableFormItem = (
-  | string
-  | ({
-      /**
-       * 继承common.items中指定field值的项
-       */
-      extend?: string;
-    } & Partial<IFormItem>)
-  | IFormItem
-)[];
-
 export interface UseTableOptions extends Omit<TableProps, "search" | "create" | "modify" | "columns"> {
   /**
-   * columns config, extends from `TableColumnData`
+   * 表格列配置
    * @see https://arco.design/web-vue/components/table/#tablecolumn
    */
   columns: UseTableColumn[];
   /**
-   * search form config
+   * 搜索表单配置
    * @see FormProps
    */
-  search?: Partial<{
+  search?: Partial<
-    [k in keyof FormProps]: k extends "items" ? ExtendableFormItem : FormProps[k];
+    Omit<FormProps, "items"> & {
-  }>;
+      /**
+       * 表单项
+       */
+      items?: (Partial<IFormItem> & {
+        /**
+         * 继承common.items中指定field值的项
+         */
+        extend?: string;
+      })[];
+    }
+  >;
   /**
    * common props for `create` and `modify` modal
    * @see FormModalProps
@@ -94,19 +93,22 @@ export interface UseTableOptions extends Omit<TableProps, "search" | "create" |
   /**
    * 新建弹窗配置
    */
-  create?: Partial<
+  create?: FormModalProps;
-    {
-      [k in keyof FormModalProps]: k extends "items"
-        ? (string | (IFormItem & { extend: string }))[]
-        : FormModalProps[k];
-    } & { extend: boolean }
-  >;
   /**
    * 新建弹窗配置
    */
   modify?: Partial<
-    { [k in keyof FormModalProps]: k extends "items" ? (string | IFormItem)[] : FormModalProps[k] } & {
+    Omit<FormModalProps, "items"> & {
+      /**
+       * 是否继承`create`弹窗配置
+       */
       extend: boolean;
+      items?: (FormModalProps["items"][number] & {
+        /**
+         * 继承`create`弹窗配置中指定field值的项
+         */
+        extend?: string;
+      })[];
     }
   >;
   /**

src/components/table/use-table.tsx

@@ -1,38 +1,24 @@
 import { Link, Message, Modal, TableColumnData } from "@arco-design/web-vue";
-import { defaultsDeep, isArray, isFunction, mergeWith } from "lodash-es";
+import { defaultsDeep, isArray, isFunction, merge } from "lodash-es";
 import { reactive } from "vue";
 import { useFormModal } from "../form";
 import { TableInstance } from "./table";
 import { config } from "./table.config";
 import { UseTableOptions } from "./use-interface";
 
-const merge = (...args: any[]) => {
-  return mergeWith({}, ...args, (obj: any, src: any) => {
-    if (Array.isArray(obj) && Array.isArray(src)) {
-      return obj.concat(src);
-    }
-    return undefined;
-  });
-};
-
-const has = (obj: any, key: string) => Object.prototype.hasOwnProperty.call(obj, key);
-
-const propTruly = (obj: any, key: string) => !has(obj, key) || !!obj[key];
-
 /**
- * 提供便捷语法，构建传给Table组件的参数
+ * 表格组件hook
  * @see src/components/table/use-table.tsx
  */
 export const useTable = (optionsOrFn: UseTableOptions | (() => UseTableOptions)): any => {
   const options: UseTableOptions = typeof optionsOrFn === "function" ? optionsOrFn() : optionsOrFn;
   const columns: TableColumnData[] = [];
-
   const getTable = (): TableInstance => (columns as any).instance;
 
   /**
    * 表格列处理
    */
-  options.columns.forEach((column) => {
+  for (const column of options.columns) {
     if (column.type === "index") {
       defaultsDeep(column, config.columnIndex);
     }
@@ -92,29 +78,29 @@ export const useTable = (optionsOrFn: UseTableOptions | (() => UseTableOptions))
     }
 
     columns.push({ ...config.columnBase, ...column });
-  });
+  }
 
-  const itemsMap = options.common?.items?.reduce((map, item) => {
+  /**
-    map[item.field] = item;
+   * 新增表单处理
-    return map;
+   */
-  }, {} as any);
+  if (options.create) {
+    options.create = useFormModal(options.create as any) as any;
+  }
 
   /**
    * 搜索表单的处理
    */
   if (options.search && options.search.items) {
     const searchItems: any[] = [];
+    const createItems = options.create?.items ?? [];
     for (const item of options.search.items) {
-      if (typeof item === "string") {
+      if (item.extend) {
-        if (!itemsMap[item]) {
+        const createItem = createItems.find((i) => i.field === item.extend);
-          throw new Error(`search item ${item} not found in common items`);
+        if (createItem) {
+          const mergedItem = merge({}, createItem, item);
+          searchItems.push(mergedItem);
+          continue;
         }
-        searchItems.push(itemsMap[item]);
-        continue;
-      }
-      if ("extend" in item && item.extend && itemsMap[item.extend]) {
-        searchItems.push(merge({}, itemsMap[item.extend], item));
-        continue;
       }
       searchItems.push(item);
     }
@@ -122,18 +108,25 @@ export const useTable = (optionsOrFn: UseTableOptions | (() => UseTableOptions))
     options.search.items = searchItems;
   }
 
-  /**
-   * 新增表单处理
-   */
-  if (options.create && propTruly(options.create, "extend")) {
-    options.create = useFormModal(merge(options.common, options.create)) as any;
-  }
-
   /**
    * 修改表单处理
    */
-  if (options.modify && propTruly(options.modify, "extend")) {
+  if (options.modify) {
-    options.modify = useFormModal(merge(options.common, options.modify)) as any;
+    if (options.modify.extend && options.create) {
+      const createItems = options.create.items;
+      const modifyItems = options.modify.items;
+      if (modifyItems && createItems) {
+        for (let i = 0; i < modifyItems.length; i++) {
+          if (modifyItems[i].extend) {
+            modifyItems[i] = merge({}, createItems[i], modifyItems[i]);
+          }
+        }
+      }
+      const merged = merge({}, options.create, options.modify);
+      options.modify = useFormModal(merged as any) as any;
+    } else {
+      options.modify = useFormModal(options.modify as any) as any;
+    }
   }
 
   return reactive({ ...options, columns });

src/pages/user/index.vue

@@ -10,136 +10,142 @@ import { Table, useTable } from "@/components";
 import { dayjs } from "@/plugins";
 import { Avatar, Button } from "@arco-design/web-vue";
 
-const table = useTable({
+const table = useTable(() => {
-  data: async (model, paging) => {
+  const nicknameRender = ({ record }: any) => {
-    return api.user.getUsers({ ...model, ...paging });
+    return (
-  },
+      <div class="flex items-center">
-  columns: [
+        <Avatar size={32}>
-    {
+          <img src={record.avatar} alt="" />
-      type: "index",
+        </Avatar>
+        <span class="ml-2 flex-1 flex flex-col overflow-hidden">
+          <span>{record.nickname}</span>
+          <span class="text-gray-400 text-xs truncate">账号：{record.username}</span>
+        </span>
+      </div>
+    );
+  };
+  return {
+    data: async (model, paging) => {
+      return api.user.getUsers({ ...model, ...paging });
     },
-    {
+    columns: [
-      title: "用户昵称",
+      {
-      dataIndex: "username",
+        type: "index",
-      width: 200,
-      render({ record }) {
-        return (
-          <div class="flex items-center">
-            <Avatar size={32}>
-              <img src={record.avatar} alt="" />
-            </Avatar>
-            <span class="ml-2 flex-1 flex flex-col overflow-hidden">
-              <span>{record.nickname}</span>
-              <span class="text-gray-400 text-xs truncate">账号：{record.username}</span>
-            </span>
-          </div>
-        );
       },
-    },
+      {
-    {
+        title: "用户昵称",
-      title: "用户描述",
+        dataIndex: "username",
-      dataIndex: "description",
+        width: 200,
-    },
+        render: nicknameRender,
-    {
+      },
-      title: "用户邮箱",
+      {
-      dataIndex: "email",
+        title: "用户描述",
-    },
+        dataIndex: "description",
-    {
+      },
-      title: "创建时间",
+      {
-      dataIndex: "createdAt",
+        title: "用户邮箱",
-      width: 200,
+        dataIndex: "email",
-      render: ({ record }) => dayjs(record.createdAt).format(),
+      },
-    },
+      {
-    {
+        title: "创建时间",
-      title: "操作",
+        dataIndex: "createdAt",
-      type: "button",
+        width: 200,
-      width: 70,
+        render: ({ record }) => dayjs(record.createdAt).format(),
-      buttons: [
+      },
+      {
+        title: "操作",
+        type: "button",
+        width: 148,
+        buttons: [
+          {
+            type: "modify",
+            text: "修改",
+          },
+          {
+            type: "delete",
+            text: "删除",
+            onClick: async (data) => {
+              return api.user.deleteUser(data.record.id);
+            },
+          },
+        ],
+      },
+    ],
+    search: {
+      items: [
         {
-          type: "modify",
+          extend: "username",
-          text: "修改",
+          required: false,
         },
       ],
     },
-  ],
+    create: {
-  common: {
+      title: "新建用户",
-    model: {
+      trigger: () => (
-      avatarUrl: "",
-    },
-    items: [
-      {
-        field: "username",
-        label: "登录账号",
-        type: "input",
-        required: true,
-      },
-      {
-        field: "nickname",
-        label: "用户昵称",
-        type: "input",
-      },
-      {
-        field: "description",
-        label: "个人描述",
-        type: "input",
-      },
-      {
-        field: "password",
-        label: "密码",
-        type: "password",
-      },
-      {
-        label: "头像",
-        field: "avatar?avatarUrl",
-        type: "select",
-      },
-      {
-        field: "startTime:endTime",
-        label: "日期范围",
-        type: "dateRange",
-        nodeProps: {},
-      },
-    ],
-    modalProps: {
-      width: 772,
-      maskClosable: false,
-    },
-    formProps: {
-      layout: "vertical",
-      class: "!grid grid-cols-2 gap-x-3",
-    },
-  },
-  search: {
-    items: [
-      {
-        extend: "username",
-        required: false,
-      },
-    ],
-  },
-  create: {
-    title: "新建用户",
-    trigger: () => {
-      return (
         <Button type="primary">
           {{
-            icon: () => <i class="icon-park-outline-people-plus-one"></i>,
+            icon: () => <i class="icon-park-outline-people-plus-one" />,
             default: () => "添加",
           }}
         </Button>
-      );
+      ),
+      modalProps: {
+        width: 772,
+        maskClosable: false,
+      },
+      formProps: {
+        layout: "vertical",
+        class: "!grid grid-cols-2 gap-x-3",
+      },
+      model: {
+        avatarUrl: "",
+      },
+      items: [
+        {
+          field: "username",
+          label: "登录账号",
+          type: "input",
+          required: true,
+        },
+        {
+          field: "nickname",
+          label: "用户昵称",
+          type: "input",
+        },
+        {
+          field: "description",
+          label: "个人描述",
+          type: "input",
+        },
+        {
+          field: "password",
+          label: "密码",
+          type: "password",
+        },
+        {
+          label: "头像",
+          field: "avatar?avatarUrl",
+          type: "select",
+        },
+        {
+          field: "startTime:endTime",
+          label: "日期范围",
+          type: "dateRange",
+          nodeProps: {},
+        },
+      ],
+      submit: ({ model }) => {
+        console.log(model);
+      },
     },
-    submit: ({ model }) => {
+    modify: {
-      console.log(model);
+      extend: true,
+      title: "修改用户",
+      submit: ({ model }) => {
+        return api.user.updateUser(model.id, model);
+      },
     },
-  },
+  };
-  modify: {
-    extend: true,
-    title: "修改用户",
-    submit: ({ model }) => {
-      console.log(model);
-    },
-  },
 });
 </script>
 

src/types/auto-component.d.ts

@@ -11,23 +11,16 @@ declare module '@vue/runtime-core' {
     ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
     ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
     AButton: typeof import('@arco-design/web-vue')['Button']
-    ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
     AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
     ADoption: typeof import('@arco-design/web-vue')['Doption']
     ADrawer: typeof import('@arco-design/web-vue')['Drawer']
     ADropdown: typeof import('@arco-design/web-vue')['Dropdown']
-    AForm: typeof import('@arco-design/web-vue')['Form']
-    AFormItem: typeof import('@arco-design/web-vue')['FormItem']
-    AInput: typeof import('@arco-design/web-vue')['Input']
-    AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
     ALayout: typeof import('@arco-design/web-vue')['Layout']
     ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent']
     ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
     ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider']
-    ALink: typeof import('@arco-design/web-vue')['Link']
     AMenu: typeof import('@arco-design/web-vue')['Menu']
     AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
-    ASpace: typeof import('@arco-design/web-vue')['Space']
     ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
     ATag: typeof import('@arco-design/web-vue')['Tag']
     ATooltip: typeof import('@arco-design/web-vue')['Tooltip']