@aspire-ui/element-component-pro 1.0.1 → 1.0.3

package/README.md

@@ -54,12 +54,10 @@ import { ProTable, ProForm } from 'element-component-pro'
 ```vue
 <template>
   <ProTable
-    ref="tableRef"
     :columns="columns"
-    :request="fetchTableData"
-    show-search
-    show-tool-bar
-    show-pagination
+    :api="fetchTableData"
+    row-key="id"
+    :pagination="{ pageSize: 10 }"
   />
 </template>
 
@@ -81,11 +79,145 @@ const columns: ProColumn[] = [
 
 const fetchTableData = async (params) => {
   const res = await api.getList(params)
-  return { data: res.list, total: res.total }
+  // ProTable 约定返回 { list, total }，与 VbenAdmin 一致
+  return { list: res.list, total: res.total }
 }
 </script>
 ```
 
+### ProTable + useProTable（tableAction）
+
+参考 VbenAdmin 的 `useTable`，ProTable 提供 `useProTable` Hook，对外暴露 `tableAction` 方法。**可选传入 props**：`useProTable(props)` 支持传入 `ProTableProps` 或 `Ref<ProTableProps>`，会在表格 `@register` 时通过 `setProps` 应用，且 props 为响应式时变更会自动同步到表格（类型 `UseProTablePropsReactive`）。
+
+```vue
+<template>
+  <ProTable
+    @register="registerTable"
+    title="用户列表"
+    :columns="columns"
+    :api="fetchTableData"
+    row-key="id"
+    :row-selection="{ type: 'checkbox' }"
+  />
+</template>
+
+<script setup lang="ts">
+import { ProTable, useProTable } from 'element-component-pro'
+import type { ProColumn, TableActionType } from 'element-component-pro'
+
+const columns: ProColumn[] = [
+  { title: 'ID', dataIndex: 'id', width: 80 },
+  { title: '姓名', dataIndex: 'name', width: 120 },
+  { title: '年龄', dataIndex: 'age', width: 80 },
+]
+
+const [registerTable, tableAction] = useProTable()
+
+const reload = () => {
+  // 支持传入 page / pageSize / searchInfo，与 VbenAdmin 对齐
+  tableAction.reload({ page: 1 })
+}
+</script>
+```
+
+**TableActionType 常用方法（与 VbenAdmin BasicTable 对齐）：**
+
+| 方法 | 说明 |
+|------|------|
+| `setProps` | 动态更新 ProTable Props，例如列配置、分页配置等 |
+| `reload(opt?: FetchParams)` | 重新请求数据，支持指定页码、每页条数、搜索参数 |
+| `setLoading(loading: boolean)` | 手动切换表格 loading 状态 |
+| `getDataSource()` / `setTableData(data)` | 获取 / 设置当前表格数据 |
+| `getRawDataSource()` | 获取接口原始返回数据（未经过 afterFetch） |
+| `getColumns()` / `setColumns(cols)` | 获取 / 设置列配置，支持传 `ProColumn[]` 或列 key 数组 |
+| `setPagination(info)` | 设置分页信息（page、pageSize、total） |
+| `getSelectRowKeys()` / `getSelectRows()` | 获取当前选中行的 keys / 行数据 |
+| `getRowSelection()` | 获取当前行选择配置（rowSelection） |
+| `setSelectedRowKeys(keys)` / `clearSelectedRowKeys()` | 设置 / 清空选中行 |
+| `deleteSelectRowByKey(key)` | 取消勾选指定 key 的行 |
+| `updateTableDataRecord(rowKey, record)` | 按 rowKey 更新某一行（局部刷新，不重新请求接口） |
+| `deleteTableDataRecord(rowKey)` | 按 rowKey 删除行（支持单个或数组） |
+| `insertTableDataRecord(record, index?)` | 在指定位置插入一行数据 |
+| `getPaginationRef()` | 获取当前分页信息 `{ page, pageSize, total }` |
+| `getShowPagination()` / `setShowPagination(show)` | 获取 / 设置是否显示分页 |
+| `expandAll()` / `collapseAll()` | 展开 / 折叠树形表格所有行 |
+
+### ProTable 操作列 + TableAction 组件
+
+参考 VbenAdmin 的 `TableAction`，ProTable 提供了独立的 `TableAction` 组件，用于快速渲染「编辑 / 删除 / 更多」等操作按钮。
+
+```vue
+<template>
+  <ProTable
+    title="操作列示例"
+    :columns="columns"
+    :data-source="data"
+    :action-column="{ title: 'Action', dataIndex: 'action', width: 220, fixed: 'right' }"
+  >
+    <template #bodyCell="{ column, record }">
+      <!-- 只处理 action 列，其它列仍按默认方式渲染（与 Vben bodyCell 行为一致） -->
+      <template v-if="column.dataIndex === 'action'">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              onClick: () => handleEdit(record),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              color: 'error',
+              popConfirm: {
+                title: '确认删除该行？',
+                confirm: () => handleDelete(record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </template>
+  </ProTable>
+</template>
+
+<script setup lang="ts">
+import { ProTable, TableAction } from 'element-component-pro'
+import type { ProColumn } from 'element-component-pro'
+
+const columns: ProColumn[] = [
+  { title: '姓名', dataIndex: 'name', width: 120 },
+  { title: '年龄', dataIndex: 'age', width: 80 },
+  { title: '地址', dataIndex: 'address', minWidth: 200 },
+]
+
+const data = [
+  { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
+  { id: 2, name: '李四', age: 32, address: '上海市浦东新区' },
+]
+
+const handleEdit = (record: Record<string, unknown>) => {
+  console.log('编辑', record)
+}
+const handleDelete = (record: Record<string, unknown>) => {
+  console.log('删除', record)
+}
+</script>
+```
+
+**TableActionItem 支持的字段（与 VbenAdmin ActionItem 对齐）：**
+
+- **label**：按钮文本
+- **icon**：图标 class（可传 Element UI 图标或自定义 iconfont）
+- **color**：`success / error / warning`，内部映射为对应按钮类型
+- **type**：直接透传给 `el-button` 的 `type`
+- **props**：额外的按钮 props
+- **disabled**：是否禁用
+- **divider**：是否在该操作后显示分隔线
+- **ifShow**：是否显示当前操作项（支持函数）
+- **tooltip**：字符串或 Tooltip 配置对象
+- **popConfirm**：气泡确认配置 `{ title, okText, cancelText, confirm, cancel }`
+- **onClick**：点击回调
+
 ## ProForm
 
 参考 [Vben Admin Form](https://doc.vvbin.cn/components/form.html)，支持 Schema 驱动、useForm、render/slot、动态显示等。
@@ -182,8 +314,10 @@ const handleSubmit = (values) => {
 
 ## 示例与文档
 
-- **示例**：运行 `npm run dev` 后访问开发预览，包含 ProForm 基础、useForm、高级特性等示例
+- **示例**：运行 `npm run dev` 后访问开发预览，包含 ProTable、ProForm、componentSettings 测试等示例
+- **ProTable 文档**：[docs/ProTable.md](./docs/ProTable.md)
 - **ProForm 文档**：[docs/ProForm.md](./docs/ProForm.md)
+- **组件默认配置**：[docs/ComponentSetting.md](./docs/ComponentSetting.md)（`useComponentSetting`）
 
 ## 开发
 

package/dist/ProForm/ApiSelect.vue.d.ts

@@ -0,0 +1,67 @@
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    value?: unknown;
+    /** 拉取选项的接口，返回 Promise<Array<{ label, value }>> 或 { list: [] }；可接收当前 params 作为参数 */
+    api?: (params?: Record<string, unknown>) => Promise<unknown>;
+    /** 请求参数，变化时会重新拉取 options */
+    params?: Record<string, unknown>;
+    /** 是否懒加载：为 true 时在展开下拉时再请求数据，不在挂载时请求 */
+    lazy?: boolean;
+    /** 接口返回列表中「标签」字段名，默认 'label' */
+    labelField?: string;
+    /** 接口返回列表中「值」字段名，默认 'value' */
+    valueField?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    filterable?: boolean;
+    multiple?: boolean;
+}>, {
+    labelField: string;
+    valueField: string;
+    lazy: boolean;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: unknown) => void;
+}, string, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    value?: unknown;
+    /** 拉取选项的接口，返回 Promise<Array<{ label, value }>> 或 { list: [] }；可接收当前 params 作为参数 */
+    api?: (params?: Record<string, unknown>) => Promise<unknown>;
+    /** 请求参数，变化时会重新拉取 options */
+    params?: Record<string, unknown>;
+    /** 是否懒加载：为 true 时在展开下拉时再请求数据，不在挂载时请求 */
+    lazy?: boolean;
+    /** 接口返回列表中「标签」字段名，默认 'label' */
+    labelField?: string;
+    /** 接口返回列表中「值」字段名，默认 'value' */
+    valueField?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    filterable?: boolean;
+    multiple?: boolean;
+}>, {
+    labelField: string;
+    valueField: string;
+    lazy: boolean;
+}>>>, {
+    lazy: boolean;
+    labelField: string;
+    valueField: string;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/ProForm/ProForm.vue.d.ts

@@ -5,7 +5,7 @@ declare function __VLS_template(): Partial<Record<string, (_: {
     schema: {
         field: string;
         label: string;
-        component?: "input" | "select" | "date-picker" | "date-range" | "input-number" | "switch" | "cascader" | "checkbox" | "radio" | undefined;
+        component?: (import('..').ProFormBuiltInComponent | import('..').ProFormCustomComponent) | undefined;
         componentProps?: (Record<string, unknown> | ((params: import('..').RenderCallbackParams & {
             formActionType?: FormActionType;
         }) => Record<string, unknown>)) | undefined;
@@ -72,6 +72,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     resetFunc?: () => Promise<void>;
     submitOnReset?: boolean;
     formListeners?: FormListeners;
+    /** 自定义组件映射（组件名 -> 组件），供 schema.component 使用 */
+    components?: Record<string, unknown>;
 }>, {
     labelWidth: string;
     labelPosition: string;
@@ -146,6 +148,8 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_WithDefaults<
     resetFunc?: () => Promise<void>;
     submitOnReset?: boolean;
     formListeners?: FormListeners;
+    /** 自定义组件映射（组件名 -> 组件），供 schema.component 使用 */
+    components?: Record<string, unknown>;
 }>, {
     labelWidth: string;
     labelPosition: string;

package/dist/ProForm/ProFormItem.vue.d.ts

@@ -14,12 +14,16 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_TypePropsToRu
     formDisabled?: boolean;
     autoPlaceholder?: boolean;
     formActionType?: import('../types').FormActionType;
+    /** 自定义组件映射（由 ProForm 传入） */
+    customComponents?: Record<string, unknown>;
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     schema: ProFormSchema;
     formModel: Record<string, unknown>;
     formDisabled?: boolean;
     autoPlaceholder?: boolean;
     formActionType?: import('../types').FormActionType;
+    /** 自定义组件映射（由 ProForm 传入） */
+    customComponents?: Record<string, unknown>;
 }>>>, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/dist/ProForm/TreeSelect.vue.d.ts

@@ -0,0 +1,64 @@
+declare const _default: import('vue').DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    value?: unknown;
+    /** 树数据，直接传入时优先使用，不请求 api */
+    treeData?: unknown[];
+    api?: (params?: Record<string, unknown>) => Promise<unknown>;
+    params?: Record<string, unknown>;
+    lazy?: boolean;
+    labelField?: string;
+    valueField?: string;
+    childrenField?: string;
+    filterable?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+}>, {
+    labelField: string;
+    valueField: string;
+    childrenField: string;
+    lazy: boolean;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (value: unknown) => void;
+}, string, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    value?: unknown;
+    /** 树数据，直接传入时优先使用，不请求 api */
+    treeData?: unknown[];
+    api?: (params?: Record<string, unknown>) => Promise<unknown>;
+    params?: Record<string, unknown>;
+    lazy?: boolean;
+    labelField?: string;
+    valueField?: string;
+    childrenField?: string;
+    filterable?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+}>, {
+    labelField: string;
+    valueField: string;
+    childrenField: string;
+    lazy: boolean;
+}>>>, {
+    lazy: boolean;
+    labelField: string;
+    valueField: string;
+    childrenField: string;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};