@qin-ui/antdv-next-pro 1.1.14 → 1.1.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AI-CONTEXT.md +270 -23
- package/README.md +31 -14
- package/api.json +29 -1
- package/bin/init-ai.mjs +404 -49
- package/es/index.d.ts +24 -3
- package/package.json +1 -1
package/AI-CONTEXT.md
CHANGED
|
@@ -1,37 +1,284 @@
|
|
|
1
|
-
# @qin-ui/antdv-next-pro
|
|
1
|
+
# @qin-ui/antdv-next-pro — AI 上下文
|
|
2
2
|
|
|
3
|
-
>
|
|
3
|
+
> Schema-driven Vue 3 高级组件库,基于 antdv-next。用 JavaScript 对象描述 UI,而非在模板中堆砌组件标签。
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
---
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
## 1. 架构概览
|
|
8
|
+
|
|
9
|
+
### 1.1 三层架构
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
┌─────────────────────────────────────────────────┐
|
|
13
|
+
│ Field[] 配置层(用户编写的 JS 对象) │
|
|
14
|
+
├─────────────────────────────────────────────────┤
|
|
15
|
+
│ @qin-ui/antdv-next-pro(Schema 解析 + 属性分层) │
|
|
16
|
+
│ 逐层剥离 → Grid→a-col, FormItem→a-form-item, │
|
|
17
|
+
│ 剩余属性→输入控件 │
|
|
18
|
+
├─────────────────────────────────────────────────┤
|
|
19
|
+
│ antdv-next(Vue 3 组件库) │
|
|
20
|
+
│ a-input / a-select / a-date-picker / a-table ... │
|
|
21
|
+
└─────────────────────────────────────────────────┘
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
ProForm/ProTable 是**渲染引擎**,不是组件库。Field 属性被逐层剥离分发到不同层级的 antdv-next 组件。
|
|
25
|
+
|
|
26
|
+
### 1.2 组件解析链
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
Field.component → componentMap[component] → antdv-next 组件
|
|
30
|
+
'input' → Input (a-input)
|
|
31
|
+
'select' → Select (a-select)
|
|
32
|
+
'switch' → Switch (a-switch)
|
|
33
|
+
'custom' → VueComponent (直接渲染)
|
|
34
|
+
'my-custom' → ProComponentProvider 注入的自定义组件
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### 1.3 内置组件映射表
|
|
38
|
+
|
|
39
|
+
| component | antdv-next 组件 | 常用输入控件层透传 Props |
|
|
40
|
+
| :------------------ | :-------------- | :------------------------------------------------------------------- |
|
|
41
|
+
| `input` | Input | placeholder, maxlength, allowClear, addonBefore, addonAfter, showCount |
|
|
42
|
+
| `textarea` | TextArea | rows, maxlength, showCount, autoSize |
|
|
43
|
+
| `input-password` | InputPassword | placeholder, maxlength, visibilityToggle |
|
|
44
|
+
| `input-otp` | InputOTP | length, mask, separator |
|
|
45
|
+
| `input-search` | InputSearch | placeholder, loading, onSearch |
|
|
46
|
+
| `input-number` | InputNumber | min, max, step, precision, formatter, parser |
|
|
47
|
+
| `select` | Select | **options**, mode, showSearch, allowClear, maxTagCount, loading |
|
|
48
|
+
| `auto-complete` | AutoComplete | **options**, filterOption, allowClear |
|
|
49
|
+
| `cascader` | Cascader | **options**, fieldNames, showSearch, expandTrigger |
|
|
50
|
+
| `date-picker` | DatePicker | picker, format, showTime, disabledDate, allowClear |
|
|
51
|
+
| `range-picker` | RangePicker | format, showTime, disabledDate, allowClear |
|
|
52
|
+
| `time-picker` | TimePicker | format, showSecond, allowClear, hourStep |
|
|
53
|
+
| `time-range-picker` | TimeRangePicker | format, allowClear |
|
|
54
|
+
| `checkbox-group` | CheckboxGroup | **options**, direction |
|
|
55
|
+
| `radio-group` | RadioGroup | **options**, direction, buttonStyle |
|
|
56
|
+
| `switch` | Switch | checkedChildren, unCheckedChildren, loading |
|
|
57
|
+
| `slider` | Slider | min, max, step, marks, range, tooltip |
|
|
58
|
+
| `tree-select` | TreeSelect | **treeData**, showSearch, treeCheckable |
|
|
59
|
+
| `transfer` | Transfer | **dataSource**, **titles**, **targetKeys**, showSearch |
|
|
60
|
+
| `custom` | 自定义 | component 传入 Vue 组件或 h() 渲染函数 |
|
|
61
|
+
|
|
62
|
+
> **写任何输入控件属性前,必须查阅 [antdv-next 文档](https://antdv-next.com/llms-full-cn.txt) 确认属性名和类型。**
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## 2. 属性分层传递(核心规则)
|
|
67
|
+
|
|
68
|
+
Field 属性逐层剥离,分发到渲染树的不同目标:
|
|
69
|
+
|
|
70
|
+
```html
|
|
71
|
+
<a-col :span="8">
|
|
72
|
+
<a-form-item label="城市" :rules="[...]">
|
|
73
|
+
<a-select placeholder="选择" :options="[...]" />
|
|
74
|
+
</a-form-item>
|
|
75
|
+
</a-col>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### 属性归属
|
|
79
|
+
|
|
80
|
+
**Grid 层 → `<a-col>`**(仅 grid 启用时生效)
|
|
81
|
+
`span`, `order`, `offset`, `push`, `pull`, `flex`, `xs`, `sm`, `md`, `lg`, `xl`, `xxl`
|
|
82
|
+
|
|
83
|
+
**FormItem 层 → `<a-form-item>`**
|
|
84
|
+
`label`, `rules`, `colon`, `labelAlign`, `labelCol`, `wrapperCol`, `tooltip`, `extra`, `help`, `validateFirst`, `validateTrigger`, `valuePropName`, `normalize`, `formItemClass`, `formItemStyle`, `formItemContainer`, `formItemDataAttrs`
|
|
85
|
+
|
|
86
|
+
**输入控件层 → 输入组件**
|
|
87
|
+
其余所有属性(`disabled`, `placeholder`, `allowClear`, `options`, `showSearch`, `maxlength`, `mode`, `componentDataAttrs`, `componentClass`, `componentStyle` 等)
|
|
88
|
+
|
|
89
|
+
**ProForm 消费(不绑定 DOM):** `component`, `fields`, `hidden`, `slots`, `modelProp`, `valueFormatter`, `componentContainer`, `extraProps`
|
|
90
|
+
|
|
91
|
+
### modelProp
|
|
92
|
+
|
|
93
|
+
决定 `v-model:xxx` 绑定变量名:
|
|
94
|
+
- 默认 `'value'` → `v-model:value`
|
|
95
|
+
- Switch/Checkbox 使用 `'checked'`
|
|
96
|
+
- **ProComponentProvider 已为 `switch` 预设 `modelProp: 'checked'`**,通常无需手动指定
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## 3. 渐进式用法
|
|
101
|
+
|
|
102
|
+
### 第一阶段:配置驱动
|
|
103
|
+
|
|
104
|
+
**禁止在模板中手写 `<a-form-item>` 或 `<a-input>`。**
|
|
105
|
+
|
|
106
|
+
```typescript
|
|
107
|
+
import { ProForm, useForm } from '@qin-ui/antdv-next-pro';
|
|
108
|
+
|
|
109
|
+
const form = useForm({ username: '', password: '' }, [
|
|
110
|
+
{
|
|
111
|
+
path: 'username',
|
|
112
|
+
component: 'input',
|
|
113
|
+
label: '用户名',
|
|
114
|
+
placeholder: '请输入用户名',
|
|
115
|
+
rules: [{ required: true, message: '请输入' }],
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
path: 'password',
|
|
119
|
+
component: 'input-password',
|
|
120
|
+
label: '密码',
|
|
121
|
+
placeholder: '请输入密码',
|
|
122
|
+
rules: [{ required: true, message: '请输入' }],
|
|
123
|
+
},
|
|
124
|
+
]);
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
```html
|
|
128
|
+
<template>
|
|
129
|
+
<ProForm :form="form" />
|
|
130
|
+
</template>
|
|
9
131
|
```
|
|
10
132
|
|
|
11
|
-
|
|
133
|
+
### 第二阶段:字段联动
|
|
12
134
|
|
|
13
|
-
|
|
135
|
+
`disabled`、`hidden`、`rules` 等控制属性支持多种联动方式:
|
|
14
136
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
- `ProComponentProvider` - 全局配置提供者
|
|
137
|
+
```typescript
|
|
138
|
+
import { computed, ref } from 'vue';
|
|
18
139
|
|
|
19
|
-
|
|
140
|
+
const form = useForm({ hasLimit: false, limitCount: undefined }, [
|
|
141
|
+
{ path: 'hasLimit', component: 'switch', label: '开启限制' },
|
|
142
|
+
{
|
|
143
|
+
path: 'limitCount',
|
|
144
|
+
component: 'input-number',
|
|
145
|
+
label: '限制次数',
|
|
146
|
+
// 方式一:computed() — 声明式,推荐用于初始化时已知的联动
|
|
147
|
+
disabled: computed(() => !form.formData.hasLimit),
|
|
148
|
+
rules: computed(() => [
|
|
149
|
+
{ required: form.formData.hasLimit, message: '请输入' },
|
|
150
|
+
]),
|
|
151
|
+
},
|
|
152
|
+
]);
|
|
20
153
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
- `useFormRef()` - 表单组件引用
|
|
24
|
-
- `useTable<D, T>()` - 创建表格实例
|
|
154
|
+
// 方式二:ref() — 适合外部状态控制
|
|
155
|
+
const isDisabled = ref(false); // disabled: isDisabled
|
|
25
156
|
|
|
26
|
-
|
|
157
|
+
// 方式三:setField() — 命令式,适合运行时事件触发
|
|
158
|
+
form.setField('limitCount', { disabled: true });
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
**选择:** 初始化联动 → `computed()`;运行时事件 → `setField()`;外部共享状态 → `ref()`。代码越简单越好。
|
|
162
|
+
|
|
163
|
+
### 第三阶段:自定义扩展
|
|
164
|
+
|
|
165
|
+
```typescript
|
|
166
|
+
import { h } from 'vue';
|
|
167
|
+
|
|
168
|
+
const form = useForm({ agreement: false }, [
|
|
169
|
+
{
|
|
170
|
+
path: 'agreement',
|
|
171
|
+
component: (p, ctx) => h(MyCheckbox, { ...p, ...ctx.attrs }),
|
|
172
|
+
modelProp: 'checked',
|
|
173
|
+
rules: [{ validator: (_, val) => val ? Promise.resolve() : Promise.reject('请同意') }],
|
|
174
|
+
},
|
|
175
|
+
]);
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
```html
|
|
179
|
+
<ProForm :form="form">
|
|
180
|
+
<!-- 同名插槽接管渲染,scoped 内置 value/checked 等绑定参数 -->
|
|
181
|
+
<template #agreement="scoped">
|
|
182
|
+
<a-checkbox v-bind="scoped">同意协议</a-checkbox>
|
|
183
|
+
</template>
|
|
184
|
+
</ProForm>
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
---
|
|
188
|
+
|
|
189
|
+
## 4. 反模式
|
|
190
|
+
|
|
191
|
+
```ts
|
|
192
|
+
// ❌ 不要手写 a-form-item — ProForm 自动渲染
|
|
193
|
+
// ❌ 不要猜测属性名 — 必须查阅 antdv-next 文档
|
|
194
|
+
{ path: 'city', component: 'select', searchable: true } // 错:Select 没有 searchable
|
|
195
|
+
{ path: 'city', component: 'select', showSearch: true } // 对:查阅文档后使用 showSearch
|
|
196
|
+
|
|
197
|
+
// ❌ path 必须精确对应 formData 中的键名,否则数据/校验丢失
|
|
198
|
+
// ✅ 联动优先用 computed(),运行时用 setField(),不要过度设计
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
---
|
|
202
|
+
|
|
203
|
+
## 5. ProComponentProvider:全局默认配置
|
|
204
|
+
|
|
205
|
+
应用顶层统一配置所有子组件默认属性。
|
|
206
|
+
|
|
207
|
+
**INJECT_CONFIG 预设默认值:**
|
|
208
|
+
|
|
209
|
+
| 组件 | 预设默认值 |
|
|
210
|
+
| :---------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- |
|
|
211
|
+
| `switch` | `{ modelProp: 'checked' }` |
|
|
212
|
+
| `input` | `{ maxlength: 100, allowClear: true, placeholder: '请输入' }` |
|
|
213
|
+
| `textarea` | `{ maxlength: 200, autoSize: {minRows:3,maxRows:6}, showCount: true, allowClear: true, placeholder: '请输入' }` |
|
|
214
|
+
| `select` / `cascader` / `auto-complete` | `{ allowClear: true, placeholder: '请选择', getPopupContainer }` |
|
|
215
|
+
| `input-number` | `{ max: 10^15, min: -(10^15), controls: false, placeholder: '请输入', style: {width:'100%'} }` |
|
|
216
|
+
| `date-picker` / `range-picker` / `time-*` | `{ allowClear: true, getPopupContainer, style: {width:'100%'} }` |
|
|
217
|
+
| `pro-table` | `{ pagination: {showTotal, showSizeChanger, showQuickJumper}, searchFormConfig: {layout:'grid'}, control: true, addIndexColumn: true }` |
|
|
218
|
+
| `pro-form` | `{ grid: { gutter: {xs:8, sm:16, md:16, lg:24} } }` |
|
|
219
|
+
| `pro-form-item` | `{ validateFirst: true, span: 8 }` |
|
|
220
|
+
|
|
221
|
+
**优先级:** Field 级别配置 > `componentVars` > `INJECT_CONFIG` 预设
|
|
222
|
+
|
|
223
|
+
```vue
|
|
224
|
+
<template>
|
|
225
|
+
<ProComponentProvider :component-vars="config">
|
|
226
|
+
<ProForm :form="form" />
|
|
227
|
+
<ProTable :table="table" />
|
|
228
|
+
</ProComponentProvider>
|
|
229
|
+
</template>
|
|
230
|
+
|
|
231
|
+
<script setup lang="ts">
|
|
232
|
+
import { ProComponentProvider } from '@qin-ui/antdv-next-pro';
|
|
233
|
+
|
|
234
|
+
const config = {
|
|
235
|
+
'pro-form-item': { validateFirst: true, span: 6 },
|
|
236
|
+
input: { maxlength: 200 },
|
|
237
|
+
select: { showSearch: true },
|
|
238
|
+
'pro-table': { addIndexColumn: false },
|
|
239
|
+
};
|
|
240
|
+
</script>
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
---
|
|
244
|
+
|
|
245
|
+
## 6. ProTable 速览
|
|
246
|
+
|
|
247
|
+
```vue
|
|
248
|
+
<script setup lang="ts">
|
|
249
|
+
import { ProTable, useTable } from '@qin-ui/antdv-next-pro';
|
|
250
|
+
|
|
251
|
+
type Row = { id: number; name: string; status: string };
|
|
252
|
+
|
|
253
|
+
const table = useTable<Row>({
|
|
254
|
+
columns: [
|
|
255
|
+
{ title: 'ID', dataIndex: 'id', width: 80 },
|
|
256
|
+
{ title: '姓名', dataIndex: 'name', width: 120 },
|
|
257
|
+
{ title: '状态', dataIndex: 'status', width: 100 },
|
|
258
|
+
],
|
|
259
|
+
// searchFields 格式与 ProForm fields 完全一致,支持相同的分层剥离机制
|
|
260
|
+
searchFields: [
|
|
261
|
+
{ path: 'name', component: 'input', placeholder: '搜索姓名' },
|
|
262
|
+
{ path: 'status', component: 'select', options: [...], placeholder: '状态' },
|
|
263
|
+
],
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
// searchForm 是 ProForm 实例,可使用所有表单方法
|
|
267
|
+
table.searchForm.setField('name', { placeholder: '请输入' });
|
|
268
|
+
</script>
|
|
269
|
+
|
|
270
|
+
<template>
|
|
271
|
+
<ProTable :table="table" :search="() => fetchData()" addIndexColumn immediateSearch />
|
|
272
|
+
</template>
|
|
273
|
+
```
|
|
27
274
|
|
|
28
|
-
|
|
275
|
+
---
|
|
29
276
|
|
|
30
|
-
|
|
277
|
+
## 7. 参考
|
|
31
278
|
|
|
32
|
-
|
|
279
|
+
按优先级查阅:
|
|
33
280
|
|
|
34
|
-
-
|
|
35
|
-
|
|
36
|
-
-
|
|
37
|
-
-
|
|
281
|
+
1. **`node_modules/@qin-ui/antdv-next-pro/api.json`** — 结构化 API 元数据(函数签名、类型定义、JSDoc 示例)
|
|
282
|
+
2. **`node_modules/@qin-ui/antdv-next-pro/README.md`** — 完整使用文档和代码示例
|
|
283
|
+
3. **`https://antdv-next.com/llms-full-cn.txt`** — antdv-next 全部组件 API(确认输入控件层属性时必查)
|
|
284
|
+
4. **`https://antdv-next.com/llms-semantic-cn.md`** — antdv-next 组件语义化 DOM 结构(自定义样式时必查)
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @qin-ui/antdv-next-pro
|
|
2
2
|
|
|
3
|
-
> 基于 **antdv-next
|
|
3
|
+
> 基于 **antdv-next**(Vue 3 组件库,对齐 Ant Design 设计规范)和 **Vue 3.x** 的二次封装高级组件库,提供高度可配置、Schema 驱动的 `ProForm`、`ProTable` 和 `ProComponentProvider`。
|
|
4
4
|
|
|
5
5
|
<p align="center">
|
|
6
6
|
<img src="https://img.shields.io/badge/antdv--next-v1.1%2B-blue" alt="antdv-next" />
|
|
@@ -65,7 +65,7 @@ const form = useForm<FormData>({}, [
|
|
|
65
65
|
|
|
66
66
|
| 属性/方法 | 类型 | 说明 |
|
|
67
67
|
| :------------------------- | :------------------------------- | :-------------------------------------------------------- |
|
|
68
|
-
| `formRef` | `Ref<FormInstance \| undefined>` |
|
|
68
|
+
| `formRef` | `Ref<FormInstance \| undefined>` | **antdv-next 原生 [FormInstance](https://antdv-next.com/components/form-cn#api)** 引用,可直接调用 `validate()`、`resetFields()`、`validateFields([paths])`、`clearValidate([paths])` 等原生方法 |
|
|
69
69
|
| `formData` | `Reactive<D>` | 响应式表单数据对象 |
|
|
70
70
|
| `fields` | `Ref<Field<D>[]>` | 响应式字段配置数组 |
|
|
71
71
|
| `getFormData(path?)` | `(path?) => any` | 读取表单字段或整个表单的值(支持深层路径) |
|
|
@@ -75,11 +75,12 @@ const form = useForm<FormData>({}, [
|
|
|
75
75
|
|
|
76
76
|
### `ProForm` Props
|
|
77
77
|
|
|
78
|
-
| 属性
|
|
79
|
-
|
|
|
80
|
-
| `form`
|
|
81
|
-
| `grid`
|
|
82
|
-
|
|
|
78
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
79
|
+
| :--------- | :-------------------------------------------- | :------ | :----------------------------------------------------------- |
|
|
80
|
+
| `form` | `Form<D>` | - | `useForm` 返回的实例 |
|
|
81
|
+
| `grid` | `boolean \| GridProps` | `false` | 是否启用 Grid 网格布局 |
|
|
82
|
+
| `disabled` | `boolean` | `false` | 是否全局禁用整个表单 |
|
|
83
|
+
| 其余属性 | 继承 antdv-next [`FormProps`](https://antdv-next.com/components/form-cn#api) | - | 如 `labelCol`、`wrapperCol`、`labelAlign`、`colon` 等,直接透传至 antdv-next `Form` 组件 |
|
|
83
84
|
|
|
84
85
|
---
|
|
85
86
|
|
|
@@ -110,7 +111,7 @@ const form = useForm<FormData>({}, [
|
|
|
110
111
|
| `componentContainer` | `Component` | 表单输入组件的外层包裹容器组件 |
|
|
111
112
|
| `componentDataAttrs` | `Record<string, string>` | 附加到输入组件 DOM 节点上的自定义 data 属性 |
|
|
112
113
|
| `valueFormatter` | `ValueFormatter` | 字段值格式化与转换器(支持 get/set 双向处理器) |
|
|
113
|
-
| `modelProp` | `string` | 双向绑定的数据名,默认 `'value'`
|
|
114
|
+
| `modelProp` | `string` | 双向绑定的数据名,默认 `'value'`。Switch/Checkbox 使用 `'checked'`,**ProComponentProvider 已为 `switch` 预设此值** |
|
|
114
115
|
|
|
115
116
|
> [!NOTE]
|
|
116
117
|
> **响应式支持**:除了 `component`、`fields`、`slots`、`modelProp`、`formItemContainer`、`componentContainer`、`valueFormatter` 之外,所有属性均高度支持 `Ref` 或 `ComputedRef` 响应式数据。
|
|
@@ -221,7 +222,22 @@ const table = useTable<Row>({
|
|
|
221
222
|
| `dataSource` | `T[]` | 静态初始数据源数组 |
|
|
222
223
|
| `pageParam` | `PageParam` | 初始分页参数(current, pageSize, total) |
|
|
223
224
|
| `searchParam` | `DeepPartial<D>` | 搜索栏表单初始填充数据 |
|
|
224
|
-
| `searchFields` | `Fields<D>` | 搜索栏字段 Schema
|
|
225
|
+
| `searchFields` | `Fields<D>` | 搜索栏字段 Schema 配置,**格式与 ProForm 的 `fields` 完全一致**,同样支持配置驱动渲染和属性透传 |
|
|
226
|
+
|
|
227
|
+
### `useTable` 返回值 (Table 实例)
|
|
228
|
+
|
|
229
|
+
| 属性/方法 | 类型 | 说明 |
|
|
230
|
+
| :-------------------- | :------------------------ | :------------------------------------------------------------------- |
|
|
231
|
+
| `columns` | `Ref<Column<T>[]>` | 响应式表格列配置数组 |
|
|
232
|
+
| `dataSource` | `Ref<T[]>` | 响应式表格数据源 |
|
|
233
|
+
| `pageParam` | `Reactive<PageParam>` | 响应式分页参数:`{ current, pageSize, total }` |
|
|
234
|
+
| `searchForm` | `Form<D>` | 搜索栏 ProForm 实例,可通过 `searchForm.formData` 获取搜索条件,也可调用其所有字段操作方法 |
|
|
235
|
+
| `setColumn` | `(path, col, opts?)` | 动态合并/覆盖列配置(`opts.updateType: 'merge' \| 'rewrite'`) |
|
|
236
|
+
| `deleteColumn` | `(path, opts?)` | 根据 dataIndex 路径或查找函数删除列 |
|
|
237
|
+
| `appendColumn` | `(path, col, opts?)` | 在指定列后追加新列 |
|
|
238
|
+
| `prependColumn` | `(path, col, opts?)` | 在指定列前插入新列 |
|
|
239
|
+
| `setPageParam` | `(pageParam)` | 更新分页参数(支持局部属性或函数式更新) |
|
|
240
|
+
| `resetQueryParams` | `()` | 重置分页状态和搜索表单数据至初始值 |
|
|
225
241
|
|
|
226
242
|
### `ProTable` Props
|
|
227
243
|
|
|
@@ -234,23 +250,24 @@ const table = useTable<Row>({
|
|
|
234
250
|
| `control` | `boolean \| { sizeControl, columnControl }` | `true` | 是否展示表格右上角尺寸调节和列显示控制条 |
|
|
235
251
|
| `searchFormConfig` | `SearchFormConfig` | - | 搜索栏表单的排版布局及展开/收起配置参数 |
|
|
236
252
|
| `tableContainer` | `Component \| false` | - | 表格区域外层自定义包裹组件 |
|
|
253
|
+
| 其余属性 | 继承 antdv-next [`TableProps`](https://antdv-next.com/components/table-cn#api) | - | 如 `bordered`、`loading`、`size`、`pagination` 等,直接透传至 antdv-next `Table` 组件 |
|
|
237
254
|
|
|
238
255
|
---
|
|
239
256
|
|
|
240
|
-
## ⚙️
|
|
257
|
+
## ⚙️ ProComponentProvider
|
|
241
258
|
|
|
242
|
-
全局或局部的默认配置提供者,通过在最外层包裹 `
|
|
259
|
+
全局或局部的默认配置提供者,通过在最外层包裹 `ProComponentProvider`,传入 `componentVars` 属性,能够极其优雅地控制其所有子组件的默认配置。
|
|
243
260
|
|
|
244
261
|
```vue
|
|
245
262
|
<template>
|
|
246
|
-
<
|
|
263
|
+
<ProComponentProvider :component-vars="config">
|
|
247
264
|
<ProForm :form="form" />
|
|
248
265
|
<ProTable :table="table" />
|
|
249
|
-
</
|
|
266
|
+
</ProComponentProvider>
|
|
250
267
|
</template>
|
|
251
268
|
|
|
252
269
|
<script setup lang="ts">
|
|
253
|
-
import {
|
|
270
|
+
import { ProComponentProvider } from '@qin-ui/antdv-next-pro';
|
|
254
271
|
|
|
255
272
|
const config = {
|
|
256
273
|
'pro-form': { grid: { gutter: 24 } },
|
package/api.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"generatedAt": "2026-
|
|
2
|
+
"generatedAt": "2026-07-06T09:29:07.307Z",
|
|
3
3
|
"name": "@qin-ui/antdv-next-pro",
|
|
4
4
|
"api": [
|
|
5
5
|
{
|
|
@@ -38,6 +38,13 @@
|
|
|
38
38
|
"signature": "<SlotComponent>",
|
|
39
39
|
"description": "插槽渲染辅助组件。用于在表单或表格的自定义插槽中动态渲染外部传入的 VNode、渲染函数或静态字符串。"
|
|
40
40
|
},
|
|
41
|
+
{
|
|
42
|
+
"name": "BaseComponentMap",
|
|
43
|
+
"type": "type",
|
|
44
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
45
|
+
"signature": "export type BaseComponentMap =",
|
|
46
|
+
"description": "内置组件映射表\nantdv-next 内置支持的组件类型映射。\n每个 key 对应 Field 配置中 `component` 可使用的字符串值,\nvalue 为实际渲染的 antdv-next 组件。"
|
|
47
|
+
},
|
|
41
48
|
{
|
|
42
49
|
"name": "ComponentMap",
|
|
43
50
|
"type": "interface",
|
|
@@ -55,6 +62,13 @@
|
|
|
55
62
|
"signature": "export type ComponentName =\n | keyof BaseComponentMap\n | keyof ComponentMap\n | 'custom';",
|
|
56
63
|
"description": "组件名称联合类型\n所有支持的组件名称"
|
|
57
64
|
},
|
|
65
|
+
{
|
|
66
|
+
"name": "componentMap",
|
|
67
|
+
"type": "function",
|
|
68
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
69
|
+
"signature": "export const componentMap: BaseComponentMap =",
|
|
70
|
+
"description": "组件名称到 antdv-next 组件的运行时映射\nProForm 通过此映射将 Field 配置中的 component 字符串解析为实际 Vue 组件。\n例如 `component: 'input'` → `Input`, `component: 'select'` → `Select`。"
|
|
71
|
+
},
|
|
58
72
|
{
|
|
59
73
|
"name": "useFormData",
|
|
60
74
|
"type": "function",
|
|
@@ -137,6 +151,20 @@
|
|
|
137
151
|
"```ts\nconst { formRef, setFormRef } = useFormRef()\nawait formRef.value?.validate()\nformRef.value?.resetFields()\n```"
|
|
138
152
|
]
|
|
139
153
|
},
|
|
154
|
+
{
|
|
155
|
+
"name": "Base",
|
|
156
|
+
"type": "type",
|
|
157
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
158
|
+
"signature": "export type Base<D extends Data = Data> =\n | BaseWithFields<D>\n | BaseWithoutFields<D>;",
|
|
159
|
+
"description": "字段配置的基础公共类型\n定义了 ProForm 字段配置的**保留属性**(由 ProForm 自身消费,不会透传给底层组件):\n- path, label, component - 字段标识与渲染\n- hidden, disabled, rules - 字段状态与校验\n- span, slots, grid, fields - 布局与嵌套\n- modelProp, valueFormatter - 双向绑定与值转换\n- formItemStyle/Class/Container/DataAttrs - FormItem 容器样式\n- componentStyle/Class/Container/DataAttrs - 输入组件样式\n- extraProps - 自定义扩展属性\n**重要:所有未在此列出的属性将直接 v-bind 透传到底层 antdv-next 组件。**"
|
|
160
|
+
},
|
|
161
|
+
{
|
|
162
|
+
"name": "FieldTypeMap",
|
|
163
|
+
"type": "type",
|
|
164
|
+
"package": "@qin-ui/antdv-next-pro",
|
|
165
|
+
"signature": "export type FieldTypeMap<D extends Data = Data> =",
|
|
166
|
+
"description": "字段类型映射集合\n将每个 component 字符串映射到其对应的 antdv-next 组件 Props 类型。\n例如 `component: 'select'` 时,Field 获得 Select 组件的所有 Props(options, mode, showSearch 等)作为类型提示。\n`component: 'custom'` 支持通过渲染函数或直接传入 Vue 组件进行完全自定义渲染。"
|
|
167
|
+
},
|
|
140
168
|
{
|
|
141
169
|
"name": "Field",
|
|
142
170
|
"type": "type",
|
package/bin/init-ai.mjs
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* @qin-ui
|
|
4
|
+
* @qin-ui/antdv-next-pro AI 上下文初始化 CLI 工具
|
|
5
5
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
6
|
+
* 在消费方项目中生成分层 AI 上下文文件,使 AI 工具能够:
|
|
7
|
+
* 1. 理解 @qin-ui/antdv-next-pro 的 Schema 驱动架构
|
|
8
|
+
* 2. 掌握属性透传规则(何时查阅 antdv-next 文档)
|
|
9
|
+
* 3. 快速获取完整 API 参考和 antdv-next 查阅指南
|
|
8
10
|
*
|
|
9
11
|
* 用法:
|
|
10
12
|
* npx @qin-ui/antdv-next-pro init-ai
|
|
@@ -28,43 +30,351 @@ const PKG_SHORT = PKG_NAME.replace(/^@qin-ui\//, '');
|
|
|
28
30
|
|
|
29
31
|
// ==================== 终端颜色 ====================
|
|
30
32
|
|
|
31
|
-
const green =
|
|
32
|
-
const cyan =
|
|
33
|
-
const bold =
|
|
34
|
-
const
|
|
33
|
+
const green = s => `\x1b[32m${s}\x1b[0m`;
|
|
34
|
+
const cyan = s => `\x1b[36m${s}\x1b[0m`;
|
|
35
|
+
const bold = s => `\x1b[1m${s}\x1b[0m`;
|
|
36
|
+
const yellow = s => `\x1b[33m${s}\x1b[0m`;
|
|
37
|
+
const dim = s => `\x1b[2m${s}\x1b[0m`;
|
|
35
38
|
|
|
36
|
-
// ====================
|
|
39
|
+
// ==================== 内容读取 ====================
|
|
37
40
|
|
|
38
|
-
function
|
|
39
|
-
const filePath = path.join(PKG_ROOT,
|
|
41
|
+
function readPackageFile(filename) {
|
|
42
|
+
const filePath = path.join(PKG_ROOT, filename);
|
|
40
43
|
if (fs.existsSync(filePath)) {
|
|
41
44
|
return fs.readFileSync(filePath, 'utf-8').trim();
|
|
42
45
|
}
|
|
43
|
-
return
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
function getAiContextContent() {
|
|
50
|
+
return readPackageFile('AI-CONTEXT.md') || `# ${PKG_NAME}\n\n> 基于 Vue 3 的配置驱动组件库。`;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function getReadmeContent() {
|
|
54
|
+
return readPackageFile('README.md') || '';
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
function getApiJsonContent() {
|
|
58
|
+
try {
|
|
59
|
+
const raw = readPackageFile('api.json');
|
|
60
|
+
if (!raw) return null;
|
|
61
|
+
return JSON.parse(raw);
|
|
62
|
+
} catch {
|
|
63
|
+
return null;
|
|
64
|
+
}
|
|
44
65
|
}
|
|
45
66
|
|
|
46
|
-
|
|
67
|
+
// ==================== 内容生成 ====================
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* 生成 rules 文件内容(Instructions 层)
|
|
71
|
+
* 包含:架构关系、透传规则、反模式、antdv-next 资源链接
|
|
72
|
+
*/
|
|
73
|
+
function getRulesContent() {
|
|
47
74
|
const aiContext = getAiContextContent();
|
|
48
|
-
|
|
75
|
+
|
|
76
|
+
return [
|
|
77
|
+
'---',
|
|
78
|
+
`description: "${PKG_NAME} 组件库使用规范 — Schema 驱动、属性透传规则"`,
|
|
79
|
+
'globs: ["**/*.vue", "**/*.ts", "**/*.tsx"]',
|
|
80
|
+
'alwaysApply: false',
|
|
81
|
+
'---',
|
|
82
|
+
'',
|
|
49
83
|
aiContext,
|
|
50
84
|
'',
|
|
51
|
-
'
|
|
85
|
+
'---',
|
|
86
|
+
'',
|
|
87
|
+
'## 📌 本地参考文件',
|
|
52
88
|
'',
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
`-
|
|
89
|
+
'本规则文件提供了核心架构和用法指南。需要完整 API 参考时,请阅读以下文件:',
|
|
90
|
+
'',
|
|
91
|
+
`- **\`.agents/docs/${PKG_SHORT}-api.md\`** — 完整 API 文档(组件、Hooks、类型、Field 配置参考)`,
|
|
92
|
+
`- **\`.agents/docs/antdv-next-reference.md\`** — antdv-next 底层组件查阅指南(llms 链接、常用 Props 速查)`,
|
|
93
|
+
`- **\`node_modules/${PKG_NAME}/api.json\`** — 结构化 API 元数据(函数签名、类型定义)`,
|
|
56
94
|
'',
|
|
57
95
|
].join('\n');
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* 生成 API 文档内容(Resources 层)
|
|
100
|
+
* 从 README.md + api.json 合并提取完整 API 参考
|
|
101
|
+
*/
|
|
102
|
+
function getApiDocContent() {
|
|
103
|
+
const readme = getReadmeContent();
|
|
104
|
+
const apiJson = getApiJsonContent();
|
|
58
105
|
|
|
59
|
-
|
|
106
|
+
const sections = [];
|
|
107
|
+
|
|
108
|
+
sections.push(`# ${PKG_NAME} — 完整 API 参考`, '');
|
|
109
|
+
sections.push(`> 自动生成自 README.md 和 api.json。版本: ${PKG_JSON.version}`, '');
|
|
110
|
+
|
|
111
|
+
// README 内容(已包含完整的使用文档)
|
|
112
|
+
if (readme) {
|
|
113
|
+
sections.push(readme);
|
|
114
|
+
sections.push('');
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// 结构化 API 元数据
|
|
118
|
+
if (apiJson && apiJson.api && apiJson.api.length > 0) {
|
|
119
|
+
sections.push('---');
|
|
120
|
+
sections.push('');
|
|
121
|
+
sections.push('## 📊 结构化 API 元数据(自动提取自源码 JSDoc)');
|
|
122
|
+
sections.push('');
|
|
123
|
+
|
|
124
|
+
for (const item of apiJson.api) {
|
|
125
|
+
const typeLabel = {
|
|
126
|
+
component: '🧩 组件',
|
|
127
|
+
function: '🔧 函数/Hook',
|
|
128
|
+
type: '📐 类型',
|
|
129
|
+
interface: '📋 接口',
|
|
130
|
+
constant: '📌 常量',
|
|
131
|
+
}[item.type] || '📄';
|
|
132
|
+
|
|
133
|
+
sections.push(`### ${typeLabel} \`${item.name}\``);
|
|
134
|
+
sections.push('');
|
|
135
|
+
sections.push(`**类型:** ${item.type}`);
|
|
136
|
+
if (item.signature) {
|
|
137
|
+
sections.push('');
|
|
138
|
+
sections.push('```typescript');
|
|
139
|
+
sections.push(item.signature);
|
|
140
|
+
sections.push('```');
|
|
141
|
+
}
|
|
142
|
+
if (item.description) {
|
|
143
|
+
sections.push('');
|
|
144
|
+
sections.push(item.description);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
if (item.typeParams && item.typeParams.length > 0) {
|
|
148
|
+
sections.push('');
|
|
149
|
+
sections.push('**泛型参数:**');
|
|
150
|
+
for (const tp of item.typeParams) {
|
|
151
|
+
const extras = [];
|
|
152
|
+
if (tp.extends) extras.push(`extends ${tp.extends}`);
|
|
153
|
+
if (tp.default) extras.push(`默认 ${tp.default}`);
|
|
154
|
+
const extra = extras.length ? ` (${extras.join(', ')})` : '';
|
|
155
|
+
sections.push(`- \`${tp.name}\`${extra}`);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
if (item.params && item.params.length > 0) {
|
|
160
|
+
sections.push('');
|
|
161
|
+
sections.push('**参数:**');
|
|
162
|
+
sections.push('');
|
|
163
|
+
sections.push('| 参数名 | 类型 | 可选 | 描述 |');
|
|
164
|
+
sections.push('| :--- | :--- | :--- | :--- |');
|
|
165
|
+
for (const p of item.params) {
|
|
166
|
+
sections.push(`| \`${p.name}\` | \`${p.type}\` | ${p.optional ? '是' : '否'} | ${p.description} |`);
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
if (item.returns) {
|
|
171
|
+
sections.push('');
|
|
172
|
+
sections.push(`**返回值:** ${item.returns}`);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
if (item.examples && item.examples.length > 0) {
|
|
176
|
+
sections.push('');
|
|
177
|
+
sections.push('**示例:**');
|
|
178
|
+
for (const ex of item.examples) {
|
|
179
|
+
sections.push('');
|
|
180
|
+
sections.push(ex);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
sections.push('');
|
|
185
|
+
sections.push('---');
|
|
186
|
+
sections.push('');
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
return sections.join('\n');
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
/**
|
|
194
|
+
* 生成 antdv-next 查阅指南(Reference 层)
|
|
195
|
+
* 说明底层组件关系 + llms 资源 + 常用 Props 速查
|
|
196
|
+
*/
|
|
197
|
+
function getAntdvReferenceContent() {
|
|
60
198
|
return [
|
|
199
|
+
'# antdv-next 底层组件查阅指南',
|
|
200
|
+
'',
|
|
201
|
+
`> ${PKG_NAME} 基于 **antdv-next**(Vue 3 组件库,对齐 Ant Design 设计规范)封装。`,
|
|
202
|
+
'> 所有在 Field 配置中编写的非保留属性,会经过 Grid→Col / FormItem→a-form-item 逐层剥离后,剩余属性透传给输入控件。',
|
|
203
|
+
'',
|
|
61
204
|
'---',
|
|
62
|
-
|
|
63
|
-
'
|
|
64
|
-
'
|
|
205
|
+
'',
|
|
206
|
+
'## 1. antdv-next 与 @qin-ui/antdv-next-pro 的关系',
|
|
207
|
+
'',
|
|
208
|
+
`${PKG_NAME} 是 **Schema 驱动渲染引擎**,antdv-next 是 **UI 组件实现**。`,
|
|
209
|
+
`查阅底层组件 API 时,请使用 antdv-next 官方文档(见第 2 节),而非 ant-design-vue 文档。`,
|
|
210
|
+
'',
|
|
211
|
+
'Field 配置中的属性通过两阶段分流:',
|
|
212
|
+
'',
|
|
213
|
+
'**第一阶段(GroupedFieldAttrs):**',
|
|
214
|
+
'- 显式解构消费:path, fields, hidden, span, slots, formItemStyle/Class/Container 等',
|
|
215
|
+
'- 剩余属性按 key 名匹配:',
|
|
216
|
+
' - 命中 antdv-next Col props → gridItemProps → `<a-col>`',
|
|
217
|
+
' - 命中 antdv-next FormItem props → formItemProps → `<a-form-item>`',
|
|
218
|
+
' - 其余 → componentProps → BaseField',
|
|
219
|
+
'',
|
|
220
|
+
'**第二阶段(BaseField):**',
|
|
221
|
+
'- 解构消费:valueFormatter, modelProp, componentStyle/Class/Container, slots',
|
|
222
|
+
'- v-model 绑定消费:modelBindingProp + onUpdate 回调',
|
|
223
|
+
'- 其余(包括 disabled)→ v-bind 到输入组件',
|
|
224
|
+
'',
|
|
225
|
+
`例如 \`{ path:'city', component:'select', label:'城市', span:8, placeholder:'选择', options:[...] }\`:`,
|
|
226
|
+
`- span → 命中 Col props → \`<a-col :span="8">\``,
|
|
227
|
+
`- label → 命中 FormItem props → \`<a-form-item label="城市">\``,
|
|
228
|
+
`- placeholder, options → 均未命中 Col/FormItem props → BaseField → \`<a-select>\``,
|
|
229
|
+
'',
|
|
230
|
+
'**关键规则:编写 Field 属性前,务必查阅 antdv-next 文档确认属性的正确名称和所属组件。**',
|
|
231
|
+
'',
|
|
232
|
+
'---',
|
|
233
|
+
'',
|
|
234
|
+
'## 2. antdv-next 文档资源',
|
|
235
|
+
'',
|
|
236
|
+
'### 在线文档(AI 可直接 fetch)',
|
|
237
|
+
'',
|
|
238
|
+
'| 资源 | URL | 内容 |',
|
|
239
|
+
'|:--|:--|:--|',
|
|
240
|
+
'| llms.txt | https://antdv-next.com/llms.txt | 文档索引(轻量) |',
|
|
241
|
+
'| llms-full-cn.txt | https://antdv-next.com/llms-full-cn.txt | **完整组件 API 文档(中文)** |',
|
|
242
|
+
'| llms-semantic-cn.md | https://antdv-next.com/llms-semantic-cn.md | 组件语义化 DOM 结构 |',
|
|
243
|
+
'',
|
|
244
|
+
'### Agent Skills(推荐安装)',
|
|
245
|
+
'',
|
|
246
|
+
'```bash',
|
|
247
|
+
'npx skills add antdv-next/skills',
|
|
248
|
+
'```',
|
|
249
|
+
'',
|
|
250
|
+
'安装后 AI 获得三级按需加载能力:',
|
|
251
|
+
'- Level 1 (~100 tokens): 始终加载的元数据',
|
|
252
|
+
'- Level 2 (<5k tokens): 触发时加载的组件使用指南',
|
|
253
|
+
'- Level 3 (按需): 完整组件 API 文档',
|
|
254
|
+
'',
|
|
65
255
|
'---',
|
|
66
256
|
'',
|
|
67
|
-
|
|
257
|
+
'## 3. 常用透传属性速查',
|
|
258
|
+
'',
|
|
259
|
+
'> ⚠️ 以下仅为高频使用的属性速查表,**并非完整列表**。',
|
|
260
|
+
'> 完整属性列表请查阅 [llms-full-cn.txt](https://antdv-next.com/llms-full-cn.txt)。',
|
|
261
|
+
'',
|
|
262
|
+
'### Input 系列 (input / textarea / input-password / input-search)',
|
|
263
|
+
'',
|
|
264
|
+
'| 属性 | 类型 | 说明 |',
|
|
265
|
+
'|:--|:--|:--|',
|
|
266
|
+
'| placeholder | string | 占位文本 |',
|
|
267
|
+
'| maxlength | number | 最大字符数 |',
|
|
268
|
+
'| allowClear | boolean | 是否显示清除按钮 |',
|
|
269
|
+
'| showCount | boolean | 是否显示字数统计 |',
|
|
270
|
+
'| addonBefore | string\\|slot | 前置标签 |',
|
|
271
|
+
'| addonAfter | string\\|slot | 后置标签 |',
|
|
272
|
+
'| prefix | string\\|slot | 前缀图标 |',
|
|
273
|
+
'| suffix | string\\|slot | 后缀图标 |',
|
|
274
|
+
'',
|
|
275
|
+
'### Select',
|
|
276
|
+
'',
|
|
277
|
+
'| 属性 | 类型 | 说明 |',
|
|
278
|
+
'|:--|:--|:--|',
|
|
279
|
+
'| options | {label,value}[] | 选项数据 |',
|
|
280
|
+
'| mode | \'multiple\'\\|\'tags\' | 选择模式 |',
|
|
281
|
+
'| showSearch | boolean | 是否支持搜索 |',
|
|
282
|
+
'| filterOption | function | 自定义过滤逻辑 |',
|
|
283
|
+
'| allowClear | boolean | 是否显示清除按钮 |',
|
|
284
|
+
'| maxTagCount | number | 最多显示标签数 |',
|
|
285
|
+
'| loading | boolean | 加载状态 |',
|
|
286
|
+
'| bordered | boolean | 是否有边框 |',
|
|
287
|
+
'',
|
|
288
|
+
'### DatePicker / RangePicker',
|
|
289
|
+
'',
|
|
290
|
+
'| 属性 | 类型 | 说明 |',
|
|
291
|
+
'|:--|:--|:--|',
|
|
292
|
+
'| picker | \'date\'\\|\'week\'\\|\'month\'\\|\'year\' | 选择器类型 (DatePicker) |',
|
|
293
|
+
'| format | string | 日期格式 |',
|
|
294
|
+
'| valueFormat | string | 值格式 |',
|
|
295
|
+
'| showTime | boolean\\|object | 是否显示时间选择 |',
|
|
296
|
+
'| disabledDate | function | 禁用日期 |',
|
|
297
|
+
'| allowClear | boolean | 是否显示清除按钮 |',
|
|
298
|
+
'',
|
|
299
|
+
'### InputNumber',
|
|
300
|
+
'',
|
|
301
|
+
'| 属性 | 类型 | 说明 |',
|
|
302
|
+
'|:--|:--|:--|',
|
|
303
|
+
'| min | number | 最小值 |',
|
|
304
|
+
'| max | number | 最大值 |',
|
|
305
|
+
'| step | number | 步长 |',
|
|
306
|
+
'| precision | number | 小数精度 |',
|
|
307
|
+
'| formatter | function | 格式化函数 |',
|
|
308
|
+
'| parser | function | 解析函数 |',
|
|
309
|
+
'',
|
|
310
|
+
'### Switch',
|
|
311
|
+
'',
|
|
312
|
+
'| 属性 | 类型 | 说明 |',
|
|
313
|
+
'|:--|:--|:--|',
|
|
314
|
+
'| checkedChildren | string\\|slot | 选中时内容 |',
|
|
315
|
+
'| unCheckedChildren | string\\|slot | 非选中时内容 |',
|
|
316
|
+
'| loading | boolean | 加载状态 |',
|
|
317
|
+
'| size | \'default\'\\|\'small\' | 尺寸 |',
|
|
318
|
+
'',
|
|
319
|
+
`> ⚠️ Switch 的 v-model 绑定属性是 \`checked\` 而非 \`value\`。`,
|
|
320
|
+
`> **但 ${PKG_NAME} 的 ProComponentProvider 已为 switch 预设了 \`modelProp: 'checked'\`,因此 Field 中通常无需手动指定。**`,
|
|
321
|
+
'',
|
|
322
|
+
'### Cascader',
|
|
323
|
+
'',
|
|
324
|
+
'| 属性 | 类型 | 说明 |',
|
|
325
|
+
'|:--|:--|:--|',
|
|
326
|
+
'| options | CascaderOption[] | 级联选项 |',
|
|
327
|
+
'| fieldNames | object | 自定义字段名 |',
|
|
328
|
+
'| showSearch | boolean | 是否支持搜索 |',
|
|
329
|
+
'| allowClear | boolean | 是否显示清除按钮 |',
|
|
330
|
+
'| expandTrigger | \'click\'\\|\'hover\' | 展开触发方式 |',
|
|
331
|
+
'',
|
|
332
|
+
'### TreeSelect',
|
|
333
|
+
'',
|
|
334
|
+
'| 属性 | 类型 | 说明 |',
|
|
335
|
+
'|:--|:--|:--|',
|
|
336
|
+
'| treeData | TreeNode[] | 树形数据 |',
|
|
337
|
+
'| showSearch | boolean | 是否支持搜索 |',
|
|
338
|
+
'| allowClear | boolean | 是否显示清除按钮 |',
|
|
339
|
+
'| treeCheckable | boolean | 是否显示复选框 |',
|
|
340
|
+
'| fieldNames | object | 自定义字段名 |',
|
|
341
|
+
'',
|
|
342
|
+
'### RadioGroup / CheckboxGroup',
|
|
343
|
+
'',
|
|
344
|
+
'| 属性 | 类型 | 说明 |',
|
|
345
|
+
'|:--|:--|:--|',
|
|
346
|
+
'| options | {label,value}[] | 选项数据 |',
|
|
347
|
+
'| direction | \'horizontal\'\\|\'vertical\' | 排列方向 (RadioGroup) |',
|
|
348
|
+
'| buttonStyle | \'outline\'\\|\'solid\' | 按钮样式 (RadioGroup) |',
|
|
349
|
+
'',
|
|
350
|
+
'---',
|
|
351
|
+
'',
|
|
352
|
+
'## 4. ProTable Column 属性(继承 antdv-next ColumnType)',
|
|
353
|
+
'',
|
|
354
|
+
`${PKG_NAME} 的 Column 类型继承自 antdv-next 的 ColumnType,支持所有原生列属性:`,
|
|
355
|
+
'',
|
|
356
|
+
'| 常用属性 | 类型 | 说明 |',
|
|
357
|
+
'|:--|:--|:--|',
|
|
358
|
+
'| dataIndex | Path<D> | 列数据字段路径(类型安全) |',
|
|
359
|
+
'| title | string | 列标题 |',
|
|
360
|
+
'| width | number\\|string | 列宽 |',
|
|
361
|
+
'| fixed | \'left\'\\|\'right\' | 固定列 |',
|
|
362
|
+
'| align | \'left\'\\|\'center\'\\|\'right\' | 对齐方式 |',
|
|
363
|
+
'| sorter | boolean\\|function | 排序 |',
|
|
364
|
+
'| customRender | function | 自定义渲染(antdv-next 中取代 slots) |',
|
|
365
|
+
'| hidden | boolean | 列显隐(@qin-ui 扩展属性) |',
|
|
366
|
+
'',
|
|
367
|
+
'> 更多属性查阅 [antdv-next Table 文档](https://antdv-next.com/llms-full-cn.txt)',
|
|
368
|
+
'',
|
|
369
|
+
'---',
|
|
370
|
+
'',
|
|
371
|
+
'## 5. 组件语义化 DOM 结构',
|
|
372
|
+
'',
|
|
373
|
+
'antdv-next 的每个组件都有明确的语义化 DOM 结构(如 `root`、`content`、`icon`、`popup` 等),',
|
|
374
|
+
'方便通过 CSS class 或 componentVars 进行精准样式覆盖。',
|
|
375
|
+
'',
|
|
376
|
+
'完整语义描述查阅:[llms-semantic-cn.md](https://antdv-next.com/llms-semantic-cn.md)',
|
|
377
|
+
'',
|
|
68
378
|
].join('\n');
|
|
69
379
|
}
|
|
70
380
|
|
|
@@ -76,31 +386,44 @@ function ensureDir(dirPath) {
|
|
|
76
386
|
}
|
|
77
387
|
}
|
|
78
388
|
|
|
389
|
+
function writeFileWithLog(filePath, content, label) {
|
|
390
|
+
const dir = path.dirname(filePath);
|
|
391
|
+
ensureDir(dir);
|
|
392
|
+
const existed = fs.existsSync(filePath);
|
|
393
|
+
fs.writeFileSync(filePath, content, 'utf-8');
|
|
394
|
+
const status = existed ? yellow('[更新]') : green('[创建]');
|
|
395
|
+
console.log(` ${status} ${cyan(label)}`);
|
|
396
|
+
}
|
|
397
|
+
|
|
79
398
|
// ==================== CLI 入口 ====================
|
|
80
399
|
|
|
81
400
|
function printHelp() {
|
|
82
401
|
console.log(`
|
|
83
|
-
${bold(`${PKG_NAME} CLI
|
|
402
|
+
${bold(`${PKG_NAME} CLI — AI 上下文初始化`)}
|
|
84
403
|
|
|
85
404
|
${bold('用法:')}
|
|
86
405
|
npx ${PKG_NAME} init-ai
|
|
87
406
|
|
|
88
|
-
${bold('
|
|
89
|
-
|
|
407
|
+
${bold('说明:')}
|
|
408
|
+
在项目中生成分层 AI 上下文文件,使 AI 工具能够深度理解和规范使用 ${PKG_NAME}。
|
|
409
|
+
|
|
410
|
+
生成的文件结构:
|
|
411
|
+
.agents/
|
|
412
|
+
rules/
|
|
413
|
+
${PKG_SHORT}.md 规则文件(架构、透传规则、反模式)
|
|
414
|
+
docs/
|
|
415
|
+
${PKG_SHORT}-api.md API 参考(完整文档 + 结构化元数据)
|
|
416
|
+
antdv-next-reference.md antdv-next 底层组件查阅指南
|
|
90
417
|
|
|
91
418
|
${bold('选项:')}
|
|
92
419
|
--help 显示帮助信息
|
|
93
|
-
|
|
94
|
-
${bold('说明:')}
|
|
95
|
-
该命令将采用统一的 Agentic 标准,在项目的 .agents/rules/ 目录下
|
|
96
|
-
生成上下文文件。兼容支持读取 .agents 的主流 AI IDE 和 CLI 工具。
|
|
97
420
|
`);
|
|
98
421
|
}
|
|
99
422
|
|
|
100
423
|
function main() {
|
|
101
424
|
const args = process.argv.slice(2);
|
|
102
|
-
const subcommand = args.find(
|
|
103
|
-
const flags = args.filter(
|
|
425
|
+
const subcommand = args.find(a => !a.startsWith('-'));
|
|
426
|
+
const flags = args.filter(a => a.startsWith('-'));
|
|
104
427
|
|
|
105
428
|
if (!subcommand || flags.includes('--help') || flags.includes('-h')) {
|
|
106
429
|
printHelp();
|
|
@@ -108,35 +431,67 @@ function main() {
|
|
|
108
431
|
}
|
|
109
432
|
|
|
110
433
|
if (subcommand !== 'init-ai') {
|
|
111
|
-
console.error(
|
|
434
|
+
console.error(`\n ❌ 未知命令: ${subcommand}\n`);
|
|
112
435
|
printHelp();
|
|
113
436
|
process.exit(1);
|
|
114
437
|
}
|
|
115
438
|
|
|
116
439
|
console.log('');
|
|
117
|
-
console.log(bold(`📦 ${PKG_NAME} — AI 上下文初始化
|
|
440
|
+
console.log(bold(`📦 ${PKG_NAME} — AI 上下文初始化 v${PKG_JSON.version}`));
|
|
441
|
+
console.log(dim(` 基于 antdv-next 的 Schema 驱动组件库`));
|
|
118
442
|
console.log('');
|
|
119
|
-
|
|
120
|
-
const content = getUnifiedAgentContent();
|
|
121
|
-
const dirPath = '.agents/rules';
|
|
122
|
-
const fileName = `${PKG_SHORT}.md`;
|
|
123
|
-
|
|
124
|
-
const fullDir = path.join(process.cwd(), dirPath);
|
|
125
|
-
const fullPath = path.join(fullDir, fileName);
|
|
126
443
|
|
|
127
|
-
|
|
128
|
-
|
|
444
|
+
// 1. 生成 Rules 文件
|
|
445
|
+
console.log(bold('📋 规则层 (Rules)'));
|
|
446
|
+
const rulesContent = getRulesContent();
|
|
447
|
+
writeFileWithLog(
|
|
448
|
+
path.join(process.cwd(), '.agents/rules', `${PKG_SHORT}.md`),
|
|
449
|
+
rulesContent,
|
|
450
|
+
`.agents/rules/${PKG_SHORT}.md`
|
|
451
|
+
);
|
|
452
|
+
console.log(dim(' → 架构概览、属性透传决策树、渐进用法、反模式'));
|
|
453
|
+
console.log('');
|
|
129
454
|
|
|
130
|
-
|
|
131
|
-
console.log(
|
|
455
|
+
// 2. 生成 API 文档
|
|
456
|
+
console.log(bold('📖 参考层 (Docs)'));
|
|
457
|
+
const apiDocContent = getApiDocContent();
|
|
458
|
+
writeFileWithLog(
|
|
459
|
+
path.join(process.cwd(), '.agents/docs', `${PKG_SHORT}-api.md`),
|
|
460
|
+
apiDocContent,
|
|
461
|
+
`.agents/docs/${PKG_SHORT}-api.md`
|
|
462
|
+
);
|
|
463
|
+
console.log(dim(' → 完整 README 文档 + 结构化 API 元数据'));
|
|
464
|
+
console.log('');
|
|
132
465
|
|
|
466
|
+
// 3. 生成 antdv-next 查阅指南
|
|
467
|
+
const refContent = getAntdvReferenceContent();
|
|
468
|
+
writeFileWithLog(
|
|
469
|
+
path.join(process.cwd(), '.agents/docs', 'antdv-next-reference.md'),
|
|
470
|
+
refContent,
|
|
471
|
+
'.agents/docs/antdv-next-reference.md'
|
|
472
|
+
);
|
|
473
|
+
console.log(dim(' → antdv-next 关系说明、llms 资源链接、常用透传属性速查'));
|
|
133
474
|
console.log('');
|
|
134
|
-
|
|
475
|
+
|
|
476
|
+
// 4. 完成提示
|
|
477
|
+
console.log(green('✅ 完成!已生成分层 AI 上下文文件。'));
|
|
478
|
+
console.log('');
|
|
479
|
+
console.log(`${bold('📂 生成的文件:')}`);
|
|
480
|
+
console.log(` ${cyan('.agents/')}`);
|
|
481
|
+
console.log(` ├── ${cyan('rules/')}`);
|
|
482
|
+
console.log(` │ └── ${cyan(PKG_SHORT + '.md')} ${dim('← 核心规则(AI 优先读取)')}`);
|
|
483
|
+
console.log(` └── ${cyan('docs/')}`);
|
|
484
|
+
console.log(` ├── ${cyan(PKG_SHORT + '-api.md')} ${dim('← 完整 API 参考')}`);
|
|
485
|
+
console.log(` └── ${cyan('antdv-next-reference.md')} ${dim('← antdv-next 查阅指南')}`);
|
|
486
|
+
console.log('');
|
|
487
|
+
|
|
488
|
+
console.log(`${bold('🔄 建议的下一步:')}`);
|
|
489
|
+
console.log(` 1. 提交 ${cyan('.agents/')} 目录到 Git 仓库,团队共享`);
|
|
490
|
+
console.log(` 2. ${bold('安装 antdv-next Agent Skills')}(强烈推荐):`);
|
|
491
|
+
console.log(` ${cyan('npx skills add antdv-next/skills')}`);
|
|
492
|
+
console.log(` 3. ${dim('(可选)下载 antdv-next 完整文档到本地:')}`);
|
|
493
|
+
console.log(` ${dim('curl -o .agents/docs/antdv-next-full.txt https://antdv-next.com/llms-full-cn.txt')}`);
|
|
135
494
|
console.log('');
|
|
136
|
-
console.log(`${bold('下一步:')}`);
|
|
137
|
-
console.log(
|
|
138
|
-
` 将 ${cyan(dirPath)} 目录提交到 Git,团队即可自动享受 AI 增强\n`
|
|
139
|
-
);
|
|
140
495
|
}
|
|
141
496
|
|
|
142
497
|
main();
|
package/es/index.d.ts
CHANGED
|
@@ -129,7 +129,19 @@ declare type AllowStringKey<T, Prefix extends string = ''> = {
|
|
|
129
129
|
} extends infer Obj ? Obj[keyof Obj] : never;
|
|
130
130
|
|
|
131
131
|
/**
|
|
132
|
-
*
|
|
132
|
+
* 字段配置的基础公共类型
|
|
133
|
+
* @description 定义了 ProForm 字段配置的**保留属性**(由 ProForm 自身消费,不会透传给底层组件):
|
|
134
|
+
* - path, label, component - 字段标识与渲染
|
|
135
|
+
* - hidden, disabled, rules - 字段状态与校验
|
|
136
|
+
* - span, slots, grid, fields - 布局与嵌套
|
|
137
|
+
* - modelProp, valueFormatter - 双向绑定与值转换
|
|
138
|
+
* - formItemStyle/Class/Container/DataAttrs - FormItem 容器样式
|
|
139
|
+
* - componentStyle/Class/Container/DataAttrs - 输入组件样式
|
|
140
|
+
* - extraProps - 自定义扩展属性
|
|
141
|
+
*
|
|
142
|
+
* **重要:所有未在此列出的属性将直接 v-bind 透传到底层 antdv-next 组件。**
|
|
143
|
+
*
|
|
144
|
+
* @public
|
|
133
145
|
*/
|
|
134
146
|
declare type Base<D extends Data = Data> = BaseWithFields<D> | BaseWithoutFields<D>;
|
|
135
147
|
|
|
@@ -237,7 +249,11 @@ declare type BaseCommon<D extends Data = Data> = {
|
|
|
237
249
|
|
|
238
250
|
/**
|
|
239
251
|
* 内置组件映射表
|
|
240
|
-
* @description antdv-next
|
|
252
|
+
* @description antdv-next 内置支持的组件类型映射。
|
|
253
|
+
* 每个 key 对应 Field 配置中 `component` 可使用的字符串值,
|
|
254
|
+
* value 为实际渲染的 antdv-next 组件。
|
|
255
|
+
*
|
|
256
|
+
* @public
|
|
241
257
|
*/
|
|
242
258
|
declare type BaseComponentMap = {
|
|
243
259
|
'input': typeof Input;
|
|
@@ -724,7 +740,12 @@ declare type FieldFindBy<D extends Data, F extends BaseField<D> = BaseField<D>>
|
|
|
724
740
|
export declare type Fields<D extends Data = Data> = Array<Field<ComponentName, D>>;
|
|
725
741
|
|
|
726
742
|
/**
|
|
727
|
-
*
|
|
743
|
+
* 字段类型映射集合
|
|
744
|
+
* @description 将每个 component 字符串映射到其对应的 antdv-next 组件 Props 类型。
|
|
745
|
+
* 例如 `component: 'select'` 时,Field 获得 Select 组件的所有 Props(options, mode, showSearch 等)作为类型提示。
|
|
746
|
+
* `component: 'custom'` 支持通过渲染函数或直接传入 Vue 组件进行完全自定义渲染。
|
|
747
|
+
*
|
|
748
|
+
* @public
|
|
728
749
|
*/
|
|
729
750
|
declare type FieldTypeMap<D extends Data = Data> = {
|
|
730
751
|
[K in ComponentName]: K extends 'custom' ? WithCommon<{
|