@qin-ui/element-plus-pro 1.0.7 → 1.1.0

package/AI-CONTEXT.md

@@ -1,37 +1,241 @@
-# @qin-ui/element-plus-pro
+# @qin-ui/element-plus-pro — AI 上下文
 
-> 基于 Element Plus 的配置驱动表单和表格组件库。
+基于 **element-plus**（Vue 3，el- 前缀）的 Schema 驱动高级组件库。用 JS 对象描述 UI，而非模板堆砌组件标签。
 
-## 安装
+---
 
-```bash
-npm install @qin-ui/element-plus-pro element-plus vue
+## 1. 架构概览
+
+### 1.1 三层架构
+
+```
+┌─────────────────────────────────────────────────┐
+│  Field[] 配置层（用户编写的 JS 对象）             │
+│  { path:'name', component:'input', span:8, ... } │
+├─────────────────────────────────────────────────┤
+│  @qin-ui/element-plus-pro（Schema 解析 + 组件解析）│
+│  属性分层剥离 → Grid→el-col, FormItem→el-form-item, 剩余→输入控件 │
+├─────────────────────────────────────────────────┤
+│  element-plus（Vue 3 组件库，el- 前缀）           │
+│  el-input / el-select / el-date-picker / el-table ...│
+└─────────────────────────────────────────────────┘
+```
+
+ProForm/ProTable 是**渲染引擎**，不是组件库。Field 属性被逐层剥离，分发到不同层级的 el-\* 组件。
+
+### 1.2 内置组件映射表
+
+| Field `component`  | 渲染的 el 组件    | 子类型（`type`）                                                                   | 常用透传 Props（示例）                                                                    |
+| :----------------- | :---------------- | :--------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------- |
+| `'input'`          | el-input          | textarea, password                                                                 | placeholder, maxlength, clearable, showWordLimit, showPassword, autosize                  |
+| `'input-number'`   | el-input-number   | —                                                                                  | min, max, step, precision, controls, placeholder                                          |
+| `'autocomplete'`   | el-autocomplete   | —                                                                                  | placeholder, clearable, fetchSuggestions, triggerOnFocus                                  |
+| `'select'`         | el-select         | —                                                                                  | **options**, multiple, filterable, clearable, allowCreate, loading, remote, remoteMethod  |
+| `'cascader'`       | el-cascader       | —                                                                                  | **options**, props, filterable, clearable, showAllLevels                                  |
+| `'date-picker'`    | el-date-picker    | date, daterange, datetime, datetimerange, week, month, monthrange, year, yearrange | format, valueFormat, disabledDate, clearable, startPlaceholder, endPlaceholder, shortcuts |
+| `'time-picker'`    | el-time-picker    | —                                                                                  | format, clearable, isRange, startPlaceholder, endPlaceholder                              |
+| `'time-select'`    | el-time-select    | —                                                                                  | start, end, step, clearable, minTime, maxTime                                             |
+| `'checkbox-group'` | el-checkbox-group | —                                                                                  | **options**, min, max, disabled                                                           |
+| `'radio-group'`    | el-radio-group    | —                                                                                  | **options**, disabled, size                                                               |
+| `'switch'`         | el-switch         | —                                                                                  | activeText, inactiveText, activeValue, inactiveValue, loading, size                       |
+| `'slider'`         | el-slider         | —                                                                                  | min, max, step, showStops, range, marks                                                   |
+| `'tree-select'`    | el-tree-select    | —                                                                                  | **data**, filterable, clearable, checkStrictly, props, multiple, showCheckbox             |
+| `'transfer'`       | el-transfer       | —                                                                                  | **data**, **titles**, filterable, filterMethod, props                                     |
+| `'custom'`         | 自定义            | —                                                                                  | component 直接传入 Vue 组件或 h() 渲染函数                                                |
+
+> **编写任何控件属性前，必须查阅 [element-plus 官方文档](https://element-plus.org/) 确认属性名和类型。**
+
+---
+
+## 2. 属性分层传递（核心规则）
+
+Field 属性按渲染目标逐层剥离：
+
+```
+<el-col :span="8">              <!-- Grid 层 -->
+  <el-form-item label="城市">    <!-- FormItem 层 -->
+    <el-select v-model="..." placeholder="选择" />  <!-- 输入控件层 -->
+  </el-form-item>
+</el-col>
 ```
 
-## 核心导出
+**Grid 层 → `<el-col>`**（仅 grid 启用时）：`span`, `offset`, `push`, `pull`, `xs`, `sm`, `md`, `lg`, `xl`
+
+**FormItem 层 → `<el-form-item>`**：`label`, `rules`, `error`, `required`, `size`, `showMessage`, `inlineMessage`, `labelWidth`；`formItemClass`/`formItemStyle`→`class`/`style`；`formItemDataAttrs`→`data-*`
 
-### 组件
+**输入控件层 → 输入组件**：其余所有属性（`disabled`, `placeholder`, `clearable`, `options`, `filterable`, `maxlength`, `multiple` 等）；`componentClass`/`componentStyle`→`class`/`style`；`componentDataAttrs`→`data-*`
 
-- `ProForm` - 配置驱动表单组件
-- `ProTable` - 配置驱动表格组件
-- `ProComponentProvider` - 全局配置提供者
+**渲染逻辑消费（不绑定 DOM）**：`component`, `fields`, `hidden`, `slots`, `modelProp`, `valueFormatter`, `componentContainer`, `extraProps`
 
-### Hooks
+### 2.1 modelProp
 
-- `useForm<D>()` - 创建表单实例
-- `useFields<D>()` - 字段配置管理
-- `useFormRef()` - 表单组件引用
-- `useTable<D, T>()` - 创建表格实例
+决定 `v-model:xxx` 的绑定变量名：
 
-## 字段配置（Field）
+- 默认 `modelProp: 'modelValue'` → `v-model`（element-plus 惯例）
+- **ProComponentProvider 已为 `switch` 预设 `modelProp: 'modelValue'`**，通常无需手动指定
+- 自定义场景：`modelProp: 'visible'` → `v-model:visible`
+
+### 2.2 element-plus 命名约定
+
+- 使用 `clearable`（不是 `allowClear`）
+- el-form-item 插槽为 `label` 和 `error`；其他 slot key 透传到底层输入组件（如 el-input 的 `prefix`/`suffix`/`append`/`prepend`）
+
+---
+
+## 3. 渐进式用法
+
+### 第一阶段：基础渲染
+
+完全依赖 Field 配置，**禁止手写 `<el-form-item>` 或 `<el-input>`**。
+
+```ts
+const form = useForm({ username: '', password: '' }, [
+  {
+    path: 'username',
+    component: 'input',
+    label: '用户名',
+    placeholder: '请输入',
+    rules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+  },
+  {
+    path: 'password',
+    component: 'input',
+    type: 'password',
+    label: '密码',
+    rules: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  },
+]);
+// 模板：<ProForm :form="form" />
+```
+
+### 第二阶段：字段联动
+
+`disabled`, `hidden`, `rules` 等控制属性支持三种方式：
+
+```ts
+// computed() — 声明式，初始化联动首选
+disabled: computed(() => !form.formData.hasLimit),
+
+// ref() — 外部共享状态
+const isDisabled = ref(false);
+
+// setField() — 运行时命令式
+form.setField('limitCount', { disabled: true });
+```
+
+**选择：初始化联动→`computed()`；事件触发→`setField()`；共享状态→`ref()`。**
+
+### 第三阶段：自定义组件
+
+```ts
+// h() 挂载自定义组件
+{ path: 'key', component: (p, ctx) => h(CustomInput, { ...p, ...ctx.attrs }) }
+```
+
+```html
+<!-- 同名插槽接管渲染，scoped 内置所有绑定参数 -->
+<ProForm :form="form">
+  <template #agreement="scoped">
+    <el-checkbox v-bind="scoped">阅读并同意协议</el-checkbox>
+  </template>
+</ProForm>
+```
+
+---
+
+## 4. 反模式
+
+```html
+<!-- ❌ 禁止在 ProForm 内手写 el-form-item -->
+<ProForm :form="form">
+  <el-form-item label="姓名"
+    ><el-input v-model="form.formData.name"
+  /></el-form-item>
+</ProForm>
+```
+
+```ts
+// ❌ 不查文档盲目猜测 — element-plus 用 filterable，不是 searchable
+{ path: 'city', component: 'select', searchable: true }
+// ✅ 查 element-plus 文档确认后
+{ path: 'city', component: 'select', filterable: true }
+
+// span→Grid 层(el-col)；placeholder→控件层(el-input)
+{ path: 'name', component: 'input', span: 12, placeholder: '请输入' }
+```
+
+---
+
+## 5. ProComponentProvider：全局默认配置
+
+统一配置子组件默认属性，避免逐字段重复。
+
+### INJECT_CONFIG 预设默认值
+
+| 组件                          | 预设默认值                                                                                                                                                                                                                         |
+| :---------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `switch`                      | `{ modelProp: 'modelValue' }`                                                                                                                                                                                                      |
+| `input`                       | `{ maxlength: 100, clearable: true, placeholder: '请输入' }`                                                                                                                                                                       |
+| `input.textarea`              | `{ maxlength: 200, autosize: {minRows:3,maxRows:6}, showWordLimit: true, clearable: true, placeholder: '请输入' }`                                                                                                                 |
+| `input.password`              | `{ maxlength: 100, clearable: true, showPassword: true, placeholder: '请输入' }`                                                                                                                                                   |
+| `select` / `cascader`         | `{ clearable: true, placeholder: '请选择' }`                                                                                                                                                                                       |
+| `input-number`                | `{ max: 10^15-1, min: -(10^15+1), controls: false, placeholder: '请输入', style: {width:'100%'} }`                                                                                                                                 |
+| `date-picker` 系列            | `{ style: {width:'100%'} }` + 各子类型专用占位符                                                                                                                                                                                   |
+| `time-picker` / `time-select` | `{ style: {width:'100%'}, placeholder: '请选择' }`                                                                                                                                                                                 |
+| `tree-select`                 | `{ clearable: true, placeholder: '请选择' }`                                                                                                                                                                                       |
+| `pro-table`                   | `{ pagination: {layout:'total,sizes,prev,pager,next,jumper',pageSizes:[10,20,30,40,50,100],background:true}, searchFormConfig: {layout:'grid',expand:{minExpandRows:2,expandStatus:false}}, control: true, addIndexColumn: true }` |
+| `pro-form`                    | `{ grid: { gutter: 24 } }`                                                                                                                                                                                                         |
+| `pro-form-item`               | `{ span: 8 }`                                                                                                                                                                                                                      |
+
+### 优先级（高→低）
+
+1. Field 级别配置
+2. `ProComponentProvider` 的 `componentVars` 参数
+3. `INJECT_CONFIG` 内置预设
+
+### 覆盖示例
+
+```vue
+<template>
+  <ProComponentProvider :component-vars="config">
+    <ProForm :form="form" />
+  </ProComponentProvider>
+</template>
+<script setup lang="ts">
+const config = {
+  'pro-form-item': { span: 6 },
+  input: { maxlength: 200 },
+  select: { filterable: true },
+};
+</script>
+```
+
+---
+
+## 6. ProTable 速览
+
+```ts
+const table = useTable<any, Row>({
+  columns: [
+    { prop: 'id', label: 'ID', width: 80 },
+    { prop: 'name', label: '姓名', width: 120 },
+  ],
+  // searchFields 与 ProForm fields 格式一致，支持相同分层剥离
+  searchFields: [
+    { path: 'name', component: 'input', placeholder: '搜索' },
+    { path: 'status', component: 'select', options: [...] },
+  ],
+  data: [],
+});
+// 模板：<ProTable :table="table" :search="() => fetchData()" immediateSearch />
+```
 
-每个字段支持：`path`, `label`, `component`, `hidden`, `disabled`, `rules`, `valueFormatter`, `fields`, `grid`, `slots`, `componentStyle`, `componentClass`, `componentContainer`, `formItemStyle`, `formItemClass`, `formItemContainer`, `modelProp`
+> element-plus Table Column 用 `prop`（非 `dataIndex`），数据源用 `data`（非 `dataSource`）。
 
-内置组件：input, input-number, autocomplete, select, cascader, date-picker, time-picker, time-select, checkbox-group, radio-group, switch, slider, tree-select, transfer, custom
+---
 
-## 表格列配置（Column）
+## 7. 关键参考
 
-- `dataIndex` - 数据路径（优先使用）
-- `key` - 列标识（dataIndex 不满足时使用）
-- `hidden` - 是否隐藏
-- 所有 Element Plus TableColumn 属性
+1. **`node_modules/@qin-ui/element-plus-pro/api.json`** — 结构化 API 元数据
+2. **`node_modules/@qin-ui/element-plus-pro/README.md`** — 完整文档和示例
+3. **[https://element-plus.org/](https://element-plus.org/)** — 确认控件属性时必查

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2023-present pro-components
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/api.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-06-08T06:46:58.908Z",
+  "generatedAt": "2026-07-09T04:30:17.104Z",
   "name": "@qin-ui/element-plus-pro",
   "api": [
     {
@@ -12,25 +12,25 @@
         "```vue\n<ProComponentProvider\n:componentVars=\"{ 'input': { placeholder: '请输入' } }\"\n>\n<ProForm :form=\"form\" :fields=\"fields\" />\n</ProComponentProvider>\n```"
       ]
     },
+    {
+      "name": "ContainerFragment",
+      "type": "component",
+      "package": "@qin-ui/element-plus-pro",
+      "signature": "<ContainerFragment>",
+      "description": "容器分片渲染组件。用于动态渲染表单行或表单项的外部包裹容器（例如 Grid 行、Col 列等布局容器）。"
+    },
     {
       "name": "ProForm",
       "type": "component",
       "package": "@qin-ui/element-plus-pro",
       "signature": "<ProForm>",
-      "description": "@qin-ui/element-plus-pro 配置驱动表单组件\n通过配置驱动的方式快速构建表单，支持：\n- 字段联动、嵌套字段、自定义组件、网格布局",
+      "description": "@qin-ui/element-plus-pro 配置驱动表单组件\n架构设计说明 (Architecture Overview)\n[ 数据层 (Core) ]  =>  [ 绑定层 (ProForm) ]  =>  [ 渲染层 (BaseFormItem / BaseField) ]\n1. 数据隔离：ProForm 本身不负责存储和管理表单状态，所有核心状态（formData, fields, 校验规则）\n均交由底层的 `useForm`（@qin-ui/pro-components-core）驱动。\n2. 上下文透传：通过 `provide` 将核心状态下发给子组件，避免了深层嵌套的 Props 传递。\n3. 递归渲染：网格布局和具体字段的解析交由 `<BaseFormItem>` 递归完成，实现了 UI 布局与表单逻辑的解耦。\n通过配置驱动的方式快速构建表单，支持：\n- 字段联动、嵌套字段、自定义组件、网格布局",
       "typeParams": [
         {
           "name": "F"
         }
       ]
     },
-    {
-      "name": "ContainerFragment",
-      "type": "component",
-      "package": "@qin-ui/element-plus-pro",
-      "signature": "<ContainerFragment>",
-      "description": "容器分片渲染组件。用于动态渲染表单行或表单项的外部包裹容器（例如 Grid 行、Col 列等布局容器）。"
-    },
     {
       "name": "SlotComponent",
       "type": "component",
@@ -59,9 +59,9 @@
       "name": "useFormData",
       "type": "function",
       "package": "@qin-ui/element-plus-pro",
-      "signature": "export const useFormData = <D extends Data = Data>(\n  initFormData?: ExtendWithAny<DeepPartial<D>>\n) =>",
+      "signature": "export const useFormData = <D extends Data = Data>(\n  initFormData?: ExtendWithAny<DeepPartial<D>>\n): UseFormDataReturn<D> =>",
       "description": "表单数据处理 Hook\n提供响应式表单数据的管理能力，支持：\n- 响应式数据存储（基于 Vue reactive）\n- 深层路径读写（支持点号分隔，如 'address.city'）\n- 类型安全的路径提示（传入泛型 D 后，path 参数可获得类型推导）\n- 父子表单自动注入（非根表单会从注入中获取数据）",
-      "returns": "{Function} .setFormData(path, value) - 设置指定路径的数据",
+      "returns": "{UseFormDataReturn<D>} 表单数据操作对象",
       "typeParams": [
         {
           "name": "D"
@@ -75,15 +75,16 @@
       "name": "useFields",
       "type": "function",
       "package": "@qin-ui/element-plus-pro",
-      "signature": "export const useFields = _useFields as",
-      "description": "类型安全的 re-export。将 core useFields 的泛型参数绑定为本地类型：\n- 字段类型 F → Field<ComponentName, D>（支持 Element Plus 组件类型推导）\n- FormItem 实例 → Element Plus 的 FormItemInstance",
+      "signature": "export function useFields<D extends Data = Data>(\n  initFields?: Fields<D>\n): UseFieldsReturn<D, Field<ComponentName, D>, FormItemInstance>;",
+      "description": "字段配置管理 Hook\n基于 `@qin-ui/pro-components-core` 的 `useFields`，将泛型参数绑定为 Element Plus 的本地类型：\n- 字段类型 F -> `Field<ComponentName, D>`（支持 Element Plus 组件类型推导）\n- FormItem 实例 -> Element Plus 的 `FormItemInstance`\n提供对字段配置数组的增删改查操作，支持：\n- 通过路径字符串或查找函数定位字段\n- 深层嵌套字段的遍历和匹配\n- 字段配置的合并/覆盖更新\n- 字段的添加、插入、删除\n- 父级字段查找\n- `fields` - 字段配置数组（响应式 Ref\\<F[]\\>）\n- `getField(path)` - 获取字段配置，支持路径字符串或查找函数\n- `setField(path, field, options?)` - 更新字段配置，默认合并模式\n- `deleteField(path, options?)` - 删除字段配置\n- `appendField(path, field, options?)` - 在指定字段后追加\n- `prependField(path, field, options?)` - 在指定字段前插入\n- `getParentField(path, options?)` - 获取父级字段配置",
+      "returns": "字段操作对象，包含以下属性：",
       "typeParams": [
         {
           "name": "D"
         }
       ],
       "examples": [
-        "```ts\ninterface User { name: string; age: number }\n\nconst { fields, getField, setField } = useFields<User>([\n{ path: 'name', label: '姓名', component: 'input' },\n{ path: 'age', label: '年龄', component: 'input-number' },\n])\n```"
+        "```ts\ninterface User { name: string; age: number }\n\nconst { fields, getField, setField } = useFields<User>([\n{ path: 'name', label: '姓名', component: 'input' },\n{ path: 'age', label: '年龄', component: 'input-number' },\n])\n\n// 通过路径获取\ngetField('name')\n// 通过查找函数获取\ngetField(f => f.label === '姓名')\n// 更新字段（合并模式）\nsetField('name', { label: '用户名', disabled: true })\n```"
       ]
     },
     {
@@ -91,14 +92,14 @@
       "type": "type",
       "package": "@qin-ui/element-plus-pro",
       "signature": "export type UseFields<D extends Data = Data> = ReturnType<typeof useFields<D>>;",
-      "description": "useFields 返回值类型，固定为本地 Fields<D>"
+      "description": "useFields 返回值类型"
     },
     {
       "name": "Form",
       "type": "type",
       "package": "@qin-ui/element-plus-pro",
       "signature": "export type Form<\n  D extends Data = Data,\n  F extends Field<ComponentName, D> = Field<ComponentName, D>,\n> = _Form<D, F, FormInstance>;",
-      "description": "在 core Form 类型的基础上：\n1. 将字段类型 F 默认绑定为本地 Field<ComponentName, D>，支持 Element Plus 所有内置组件类型\n2. 将底层表单实例 I 绑定为 Element Plus 的 FormInstance，使 formRef 获得完整的类型提示",
+      "description": "表单实例类型\n在 core Form 类型的基础上，将字段类型 F 绑定为本地 Field<ComponentName, D>，\n将底层表单实例 I 绑定为 Element Plus 的 FormInstance，使 formRef 获得完整的类型提示。\n1. `setFormData(path, value)` - 设置指定路径的值<br>\n2. `setFormData(path, prev => newVal)` - 函数式更新<br>\n3. `setFormData({ ... })` - 批量覆盖整个表单",
       "typeParams": [
         {
           "name": "D"
@@ -106,32 +107,36 @@
         {
           "name": "F"
         }
+      ],
+      "examples": [
+        "```ts\ninterface User { name: string; age: number }\nconst form: Form<User> = useForm({ name: '张三', age: 25 })\n\nform.formData.name           // 直接读写响应式数据\nform.getFormData('name')     // 通过路径读取\nform.setFormData('name', '李四')  // 更新数据\nform.formRef.value?.validate()    // 访问底层 Form 实例\n```"
       ]
     },
     {
       "name": "useForm",
       "type": "function",
       "package": "@qin-ui/element-plus-pro",
-      "signature": "export const useForm = _useForm as",
-      "description": "创建 @qin-ui/element-plus-pro 表单实例的 Hook\n类型安全的 re-export。将 core useForm 的泛型参数绑定为本地类型：\n- 字段类型 F → Field<ComponentName, D>（支持 Element Plus 组件类型推导）\n- 表单实例 → Element Plus 的 FormInstance",
+      "signature": "export function useForm<D extends Data = Data>(\n  initFormData?: ExtendWithAny<DeepPartial<D>>,\n  initFields?: Field<ComponentName, D>[],\n  root?: boolean\n): Form<D, Field<ComponentName, D>>;",
+      "description": "创建表单实例的 Hook\n基于 `@qin-ui/pro-components-core` 的 `useForm`，将泛型参数绑定为 Element Plus 的本地类型：\n- 字段类型 F -> `Field<ComponentName, D>`（支持 Element Plus 所有内置组件类型推导）\n- 表单实例 -> Element Plus 的 `FormInstance`（使 formRef 获得完整的类型提示）\n表单实例组合了三个子模块的能力：\n- **useFormData**：表单数据管理（响应式数据、读写、批量更新）\n- **useFields**：字段配置管理（增删改查字段配置，支持嵌套）\n- **useFormRef**：底层 Form 组件实例引用",
+      "returns": "{Form<D>} 表单实例，包含数据操作、字段操作和 ref 操作",
       "typeParams": [
         {
           "name": "D"
         }
       ],
       "examples": [
-        "```ts\ninterface User { name: string; age: number }\n\nconst form = useForm<User>(\n{ name: '张三', age: 25 },\n[\n{ path: 'name', label: '姓名', component: 'input' },\n{ path: 'age', label: '年龄', component: 'input-number' },\n]\n)\n```"
+        "```ts\ninterface User { name: string; age: number }\n\n// 方式一：同时传入初始数据和字段\nconst form = useForm<User>(\n{ name: '张三', age: 25 },\n[\n{ path: 'name', label: '姓名', component: 'input' },\n{ path: 'age', label: '年龄', component: 'input-number' },\n],\ntrue\n)\n\n// 方式二：仅设置 root 标识\nconst form = useForm<User>(true)\n\n// 使用\nconst { formData, formRef, fields, setFormData, getField } = form\nsetFormData('name', '李四')\nawait formRef.value?.validate()\n```"
       ]
     },
     {
       "name": "useFormRef",
       "type": "function",
       "package": "@qin-ui/element-plus-pro",
-      "signature": "export const useFormRef = _useFormRef as",
-      "description": "类型安全的 re-export。将 core useFormRef 的泛型参数绑定为 Element Plus 的 FormInstance，\n使 formRef 获取到完整的 Element Plus Form 组件 API 类型提示。",
-      "returns": "{Function} .setFormRef(inst) - 设置表单组件实例",
+      "signature": "export function useFormRef(): UseFormRefReturn<FormInstance>",
+      "description": "表单组件实例引用 Hook\n基于 `@qin-ui/pro-components-core` 的 `useFormRef`，将泛型参数绑定为 Element Plus 的 `FormInstance`，\n使 formRef 获取到完整的 Element Plus Form 组件 API 类型提示（如 `validate()`、`resetFields()` 等）。\n`formRef` 由 ProForm 组件内部自动通过 `setFormRef` 绑定，无需手动调用。\n- `formRef` — Element Plus Form 组件实例的响应式引用（`Ref<FormInstance | undefined>`）\n- `setFormRef(inst)` — 设置 Form 组件实例，由 ProForm 内部自动调用",
+      "returns": "表单组件实例引用管理对象：",
       "examples": [
-        "```ts\nconst { formRef, setFormRef } = useFormRef()\nawait formRef.value?.validate()\nformRef.value?.resetFields()\n```"
+        "```ts\nconst { formRef, setFormRef } = useFormRef()\n\n// formRef 由 ProForm 自动绑定，可直接使用\nawait formRef.value?.validate()\nformRef.value?.resetFields()\nformRef.value?.scrollToField('username')\n```"
       ]
     },
     {
@@ -190,7 +195,7 @@
       "type": "type",
       "package": "@qin-ui/element-plus-pro",
       "signature": "export type Table<\n  D extends Data = Data,\n  T extends Data = ExtendWithAny<D>,\n> = Omit<_Table<D, T, Column<T>>, 'dataSource'> &",
-      "description": "在 core Table 类型的基础上：\n1. 将列类型 C 绑定为本地 Column<T>\n2. 将 dataSource 重命名为 data（Element Plus 使用 data 而非 dataSource）",
+      "description": "表格实例类型\n在 core Table 类型的基础上，将列类型 C 绑定为本地 Column<T>，\n并将 dataSource 重命名为 data（Element Plus 使用 data 而非 dataSource），\n使 columns 操作获得 Element Plus 表格列的完整属性类型提示。",
       "typeParams": [
         {
           "name": "D"
@@ -198,14 +203,26 @@
         {
           "name": "T"
         }
+      ],
+      "examples": [
+        "```ts\ninterface SearchParams { keyword: string }\ninterface User { name: string; age: number }\n\nconst table: Table<SearchParams, User> = useTable({\ncolumns: [{ prop: 'name', title: '姓名' }],\n})\n\ntable.columns.value                  // 访问列配置\ntable.setColumn('name', { width: 150 }) // 更新列\ntable.setPageParam({ current: 2 })      // 切换页码\ntable.searchForm.setFormData('keyword', '搜索词') // 操作搜索表单\n```"
       ]
     },
     {
       "name": "useTable",
       "type": "function",
       "package": "@qin-ui/element-plus-pro",
-      "signature": "export const useTable = <\n  D extends Data = Data,\n  T extends Data = ExtendWithAny<D>,\n>(\n  params: UseTableParams<D, T> = {}",
-      "description": "创建 @qin-ui/element-plus-pro 表格实例的 Hook\n基于 core useTable 封装，适配 Element Plus 的 API 风格：\n- 数据源使用 `data` 而非 `dataSource`",
+      "signature": "export function useTable<\n  D extends Data = Data,\n  T extends Data = ExtendWithAny<D>,\n>(params: UseTableParams<D, T> = {}): Table<D, T>",
+      "description": "创建表格实例的 Hook\n基于 `@qin-ui/pro-components-core` 的 `useTable` 封装，适配 Element Plus 的 API 风格：\n- 数据源使用 `data` 而非 `dataSource`\n是 ProTable 组件的核心 Hook，提供了：\n- 列配置管理（增删改查）\n- 数据源管理\n- 分页管理\n- 搜索表单集成（内部使用 useForm）\n- 查询参数重置",
+      "params": [
+        {
+          "name": "params",
+          "type": "object",
+          "optional": false,
+          "description": "表格配置参数"
+        }
+      ],
+      "returns": "{Table<D, T>} 表格实例",
       "typeParams": [
         {
           "name": "D"
@@ -215,7 +232,7 @@
         }
       ],
       "examples": [
-        "```ts\ninterface User { name: string; age: number }\n\nconst table = useTable<User>({\ncolumns: [\n{ prop: 'name', title: '姓名', width: 120 },\n{ prop: 'age', title: '年龄', width: 80 },\n],\ndata: [],\npageParam: { current: 1, pageSize: 20, total: 0 },\n})\n```"
+        "```ts\ninterface SearchParams { keyword: string }\ninterface User { name: string; age: number; email: string }\n\nconst table = useTable<SearchParams, User>({\ncolumns: [\n{ prop: 'name', title: '姓名', width: 120 },\n{ prop: 'age', title: '年龄', width: 80 },\n],\ndata: [],\npageParam: { current: 1, pageSize: 20, total: 0 },\nsearchParam: { keyword: '' },\nsearchFields: [\n{ path: 'keyword', label: '关键词', component: 'input' },\n],\n})\n```"
       ]
     }
   ]