@qin-ui/element-plus-pro 1.1.3 → 1.1.4
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 +79 -253
- package/README.md +36 -28
- package/api.json +1 -1
- package/bin/init-ai.mjs +132 -40
- package/package.json +3 -3
package/AI-CONTEXT.md
CHANGED
|
@@ -3,19 +3,18 @@
|
|
|
3
3
|
基于 element-plus v2.x（`el-` 前缀）封装的 Schema 驱动组件库。
|
|
4
4
|
用 JS 配置对象描述 UI，不写 `<el-*>` 模板堆叠。ProForm/ProTable 是渲染引擎，所有真实 UI 来自 element-plus。
|
|
5
5
|
|
|
6
|
-
##
|
|
6
|
+
## 安装与使用
|
|
7
7
|
|
|
8
8
|
```bash
|
|
9
9
|
pnpm add @qin-ui/element-plus-pro # peerDeps: element-plus ^2.13.6, vue ^3.5
|
|
10
10
|
```
|
|
11
11
|
|
|
12
12
|
```ts
|
|
13
|
-
|
|
14
|
-
import '@qin-ui/element-plus-pro
|
|
15
|
-
app.use(ElementPlusPro); // 全局注册 ProForm / ProTable / ProComponentProvider
|
|
13
|
+
// 按需引入（推荐）
|
|
14
|
+
import { ProForm, ProTable, useForm, useTable } from '@qin-ui/element-plus-pro';
|
|
16
15
|
```
|
|
17
16
|
|
|
18
|
-
##
|
|
17
|
+
## 核心心智模型
|
|
19
18
|
|
|
20
19
|
**1. 配置驱动**：`useForm(数据, Field[])` / `useTable({ columns, searchFields })` 生成实例，组件接收实例。
|
|
21
20
|
|
|
@@ -31,7 +30,9 @@ app.use(ElementPlusPro); // 全局注册 ProForm / ProTable / ProComponentProvid
|
|
|
31
30
|
> 规则：`span` 给 Grid，`label`/`rules` 给 FormItem，其余给输入控件。
|
|
32
31
|
> **element-plus 命名约定**：用 `clearable`（不是 `allowClear`）、`showWordLimit`（不是 `showCount`）、`autosize`（小写 d）；el-form-item 插槽为 `label` 和 `error`。
|
|
33
32
|
|
|
34
|
-
##
|
|
33
|
+
## 速查
|
|
34
|
+
|
|
35
|
+
### component 映射（Field.component 字符串 -> element-plus 组件）
|
|
35
36
|
|
|
36
37
|
`input`->el-input · `input-number`->el-input-number · `autocomplete`->el-autocomplete · `select`->el-select ·
|
|
37
38
|
`cascader`->el-cascader · `date-picker`->el-date-picker · `time-picker`->el-time-picker · `time-select`->el-time-select ·
|
|
@@ -42,292 +43,113 @@ app.use(ElementPlusPro); // 全局注册 ProForm / ProTable / ProComponentProvid
|
|
|
42
43
|
> `date-picker` 通过 `type` 子类型区分：`date`/`dates`/`daterange`/`datetime`/`datetimerange`/`week`/`month`/`monthrange`/`months`/`year`/`yearrange`/`years`。
|
|
43
44
|
> 写 Field 中输入控件的具体属性前，**属性名/类型以 https://element-plus.org 官方文档为准**。
|
|
44
45
|
|
|
45
|
-
|
|
46
|
+
### 隐式默认行为（INJECT_CONFIG，易踩坑）
|
|
46
47
|
|
|
47
48
|
由 `ProComponentProvider` 注入，优先级低于 Field 配置。**不写也有这些默认值，需知晓以免行为与预期不符：**
|
|
48
49
|
|
|
49
|
-
| component
|
|
50
|
-
|
|
|
51
|
-
| `switch`
|
|
52
|
-
| `input`
|
|
53
|
-
| `input.textarea`
|
|
54
|
-
| `input.password`
|
|
55
|
-
| `input-number`
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `pro-form
|
|
60
|
-
| `pro-
|
|
50
|
+
| component | 默认预设 |
|
|
51
|
+
| :-------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
52
|
+
| `switch` | `{ modelProp: 'modelValue' }` -> v-model 绑 `modelValue`（element-plus 惯例，即 `v-model`） |
|
|
53
|
+
| `input` | `{ maxlength: 100, clearable: true, placeholder: '请输入' }` |
|
|
54
|
+
| `input.textarea` | `{ maxlength: 200, autosize: {minRows:3,maxRows:6}, showWordLimit: true, clearable: true, placeholder: '请输入' }` |
|
|
55
|
+
| `input.password` | `{ showPassword: true, maxlength: 100, clearable: true, placeholder: '请输入' }` |
|
|
56
|
+
| `input-number` | `{ max: 1e15-1, min: -(1e15+1), controls: false, placeholder: '请输入', style:{width:'100%'} }` |
|
|
57
|
+
| `autocomplete` | `{ clearable: true, placeholder: '请输入' }` |
|
|
58
|
+
| `select` / `cascader` / `tree-select` | `{ clearable: true, placeholder: '请选择' }` |
|
|
59
|
+
| `date-picker` / `time-picker` / `time-select` | `{ style:{width:'100%'}, placeholder: '请选择' }` |
|
|
60
|
+
| `pro-form` | `{ grid: { gutter: 24 } }` |
|
|
61
|
+
| `pro-form-item` | `{ span: 8 }` |
|
|
62
|
+
| `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 }` |
|
|
61
63
|
|
|
62
64
|
> `modelProp` 控制 v-model 绑定名，element-plus 默认 `'modelValue'`（即 `v-model`）。
|
|
63
|
-
> `date-picker` 支持按 type 子类型分别预设：`date-picker.date` / `.daterange` / `.datetime` / `.week` / `.month` / `.monthrange` / `.year` / `.yearrange`
|
|
64
|
-
|
|
65
|
-
## useForm -- 表单实例
|
|
66
|
-
|
|
67
|
-
```ts
|
|
68
|
-
// 重载一（常用）：初始数据 + 字段配置
|
|
69
|
-
const form = useForm<User>(
|
|
70
|
-
{ name: '张三', age: 25 }, // initFormData
|
|
71
|
-
[
|
|
72
|
-
{
|
|
73
|
-
path: 'name',
|
|
74
|
-
label: '姓名',
|
|
75
|
-
component: 'input',
|
|
76
|
-
rules: [{ required: true }],
|
|
77
|
-
},
|
|
78
|
-
] // Field[]
|
|
79
|
-
);
|
|
80
|
-
// 重载二：仅拿实例（root=true/false）
|
|
81
|
-
const form = useForm<User>(true);
|
|
82
|
-
```
|
|
65
|
+
> `date-picker` 支持按 type 子类型分别预设：`date-picker.date` / `.dates` / `.daterange` / `.datetime` / `.datetimerange` / `.week` / `.month` / `.monthrange` / `.months` / `.year` / `.yearrange` / `.years`，范围类型自带 `startPlaceholder`/`endPlaceholder`。
|
|
66
|
+
> `checkbox-group` / `radio-group` / `slider` / `transfer` 无预设（`{}`）。
|
|
83
67
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
| 成员 | 说明 |
|
|
87
|
-
| :------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------- |
|
|
88
|
-
| `form.formData` | 响应式数据，可直接读写，支持深层路径 `formData.address.city` |
|
|
89
|
-
| `form.getFormData(path)` / `form.setFormData(path, value)` | 路径读写；setFormData 还支持 `setFormData(path, prev=>new)` 和 `setFormData({...})` 批量覆盖 |
|
|
90
|
-
| `form.fields` | 字段配置数组（Ref） |
|
|
91
|
-
| `form.getField(path)` / `form.setField(path, patch)` | 字段增改查；setField 默认合并，`{updateType:'rewrite'}` 覆盖 |
|
|
92
|
-
| `form.deleteField` / `form.appendField` / `form.prependField` / `form.getParentField` | 字段增删 |
|
|
93
|
-
| `form.formRef` | 底层 element-plus Form 实例引用（Ref），`formRef.value?.validate()` / `.resetFields()` |
|
|
94
|
-
|
|
95
|
-
## ProForm 最小示例
|
|
96
|
-
|
|
97
|
-
```vue
|
|
98
|
-
<script setup lang="ts">
|
|
99
|
-
import { ProForm, useForm } from '@qin-ui/element-plus-pro';
|
|
100
|
-
interface User {
|
|
101
|
-
username: string;
|
|
102
|
-
age: number;
|
|
103
|
-
gender: string;
|
|
104
|
-
}
|
|
105
|
-
const form = useForm<User>({ username: '', age: 18, gender: 'male' }, [
|
|
106
|
-
{
|
|
107
|
-
path: 'username',
|
|
108
|
-
component: 'input',
|
|
109
|
-
label: '用户名',
|
|
110
|
-
rules: [{ required: true, trigger: 'blur' }],
|
|
111
|
-
},
|
|
112
|
-
{ path: 'age', component: 'input-number', label: '年龄', min: 1, max: 150 },
|
|
113
|
-
{
|
|
114
|
-
path: 'gender',
|
|
115
|
-
component: 'select',
|
|
116
|
-
label: '性别',
|
|
117
|
-
options: [
|
|
118
|
-
{ label: '男', value: 'male' },
|
|
119
|
-
{ label: '女', value: 'female' },
|
|
120
|
-
],
|
|
121
|
-
},
|
|
122
|
-
]);
|
|
123
|
-
const submit = async () => {
|
|
124
|
-
await form.formRef.value?.validate();
|
|
125
|
-
console.log(form.formData);
|
|
126
|
-
};
|
|
127
|
-
</script>
|
|
128
|
-
<template>
|
|
129
|
-
<ProForm :form="form" />
|
|
130
|
-
<el-button type="primary" @click="submit">提交</el-button>
|
|
131
|
-
</template>
|
|
132
|
-
```
|
|
68
|
+
### 不支持响应式的属性（不能包 ref/computed）
|
|
133
69
|
|
|
134
|
-
|
|
70
|
+
`component` / `formItemContainer` / `componentContainer` / `valueFormatter` / `fields` / `slots` / `modelProp`。
|
|
135
71
|
|
|
136
|
-
|
|
137
|
-
`teleport 插槽注入` > `ProComponentProvider.componentMap` > `内置 componentMap` > `原始 component 值`
|
|
72
|
+
## 实例成员速查
|
|
138
73
|
|
|
139
|
-
###
|
|
140
|
-
|
|
141
|
-
`component` 直接传组件对象，**必须用 `markRaw` 包裹**。
|
|
74
|
+
### useForm -- 表单实例
|
|
142
75
|
|
|
143
76
|
```ts
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
{ path: 'code', label: '验证码', component: markRaw(MyInput) }
|
|
77
|
+
useForm(initFormData, Field[], root = true) // 重载一（常用）：初始数据 + 字段配置
|
|
78
|
+
useForm(true | false) // 重载二：仅拿实例（root）
|
|
147
79
|
```
|
|
148
80
|
|
|
149
|
-
|
|
150
|
-
> 类型上 `component` 接受 `RenderComponentType | Raw<RenderComponentType>`，`Raw<T>` 即 markRaw 的类型标记。
|
|
151
|
-
> 此字段不支持响应式（不能包 ref/computed）。
|
|
81
|
+
返回 `Form` 实例（**`formData` 是 reactive 对象，不用 `.value`**）：
|
|
152
82
|
|
|
153
|
-
|
|
83
|
+
| 成员 | 说明 |
|
|
84
|
+
| :------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------- |
|
|
85
|
+
| `form.formData` | 响应式数据，可直接读写，支持深层路径 `formData.address.city` |
|
|
86
|
+
| `form.getFormData(path)` | 路径读取；无参返回 `undefined` |
|
|
87
|
+
| `form.setFormData(path, value)` / `setFormData(path, prev=>new)` | 路径写入，支持函数式 |
|
|
88
|
+
| `form.setFormData({...})` / `setFormData(prev => ({...prev, name:'新'}))` | 批量覆盖整个表单，支持函数式（先清空再写入） |
|
|
89
|
+
| `form.fields` | 字段配置数组（Ref） |
|
|
90
|
+
| `form.getField(path)` / `getField(fn)` | 字段查找，支持路径或查找函数；`{all:true}` 返回所有匹配数组 |
|
|
91
|
+
| `form.setField(path, patch)` / `setField(path, prev=>({...}))` | 字段增改查；默认合并，`{updateType:'rewrite'}` 覆盖；支持函数式更新；`{all:true}` 批量更新所有匹配 |
|
|
92
|
+
| `form.deleteField` / `form.appendField` / `form.prependField` / `form.getParentField` | 字段增删查；均支持 `{all:true}`；`appendField(undefined, f)` 末尾追加、`prependField(undefined, f)` 开头插入，入参可为数组 |
|
|
93
|
+
| `form.formRef` | 底层 element-plus Form 实例引用（Ref），`formRef.value?.validate()` / `.resetFields()` |
|
|
154
94
|
|
|
155
|
-
|
|
95
|
+
### useTable -- 表格实例
|
|
156
96
|
|
|
157
97
|
```ts
|
|
158
|
-
|
|
159
|
-
import MyInput from './MyInput.vue';
|
|
160
|
-
{ path: 'code', label: '验证码', component: (p, ctx) => h(MyInput, { ...p, ...ctx.attrs }) }
|
|
98
|
+
useTable({ columns, data, pageParam, searchParam, searchFields }); // 数据源用 data（非 dataSource）
|
|
161
99
|
```
|
|
162
100
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
在根用 `componentMap` 注册，Field 里用字符串引用。**可覆盖内置组件**（如 `input: MyInput` 替换全局 input）。
|
|
166
|
-
|
|
167
|
-
```vue
|
|
168
|
-
<script setup lang="ts">
|
|
169
|
-
import { ProComponentProvider } from '@qin-ui/element-plus-pro';
|
|
170
|
-
import MyRichTextEditor from './components/MyRichTextEditor.vue';
|
|
171
|
-
const componentMap = { 'rich-editor': MyRichTextEditor };
|
|
172
|
-
</script>
|
|
173
|
-
<template>
|
|
174
|
-
<ProComponentProvider :component-map="componentMap">
|
|
175
|
-
<ProForm :form="form" />
|
|
176
|
-
</ProComponentProvider>
|
|
177
|
-
</template>
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
**追加全局声明获取强类型补全**（项目任意 `.d.ts`）：
|
|
181
|
-
|
|
182
|
-
```ts
|
|
183
|
-
declare module '@qin-ui/element-plus-pro' {
|
|
184
|
-
interface ComponentMap {
|
|
185
|
-
'rich-editor': typeof MyRichTextEditor;
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
// 之后 component: 'rich-editor' 即获精准属性类型联想
|
|
189
|
-
```
|
|
101
|
+
返回 `Table` 实例（**数据源字段名为 `data`，非 `dataSource`**）：
|
|
190
102
|
|
|
191
|
-
|
|
103
|
+
| 成员 | 说明 |
|
|
104
|
+
| :-------------------------------------------------------------------- | :----------------------------------------------------- |
|
|
105
|
+
| `table.columns` / `table.data` | 列配置 / 数据源（Ref，element-plus 语义） |
|
|
106
|
+
| `table.pageParam` | 分页参数（reactive）：`current` / `pageSize` / `total` |
|
|
107
|
+
| `table.searchForm` | 搜索表单实例（Form 类型，所有 useForm 方法可用） |
|
|
108
|
+
| `table.setColumn` / `deleteColumn` / `appendColumn` / `prependColumn` | 列增删改查（用法同 setField，支持 `{all:true}`） |
|
|
109
|
+
| `table.setPageParam(patch)` | 设置分页参数 |
|
|
110
|
+
| `table.resetQueryParams()` | 重置分页到第一页 + 恢复搜索条件到初始值 |
|
|
192
111
|
|
|
193
|
-
|
|
112
|
+
## 关键约定
|
|
194
113
|
|
|
195
|
-
|
|
196
|
-
<ProForm :form="form">
|
|
197
|
-
<template #agreement="scoped">
|
|
198
|
-
<el-checkbox v-bind="scoped">同意协议</el-checkbox>
|
|
199
|
-
</template>
|
|
200
|
-
</ProForm>
|
|
201
|
-
```
|
|
114
|
+
### 自定义组件
|
|
202
115
|
|
|
203
|
-
|
|
116
|
+
`Field.component` 解析优先级（高 -> 低）：`teleport 插槽注入` > `ProComponentProvider.componentMap` > `内置 componentMap` > `原始 component 值`。
|
|
204
117
|
|
|
205
|
-
|
|
206
|
-
- 单字段、需动态拼装 props -> 方式 2（render 函数）
|
|
207
|
-
- 多处复用 / 替换内置组件 -> 方式 3（componentMap + 声明扩充）
|
|
208
|
-
- 简单声明式替换、不想写 h() -> 方式 4（scoped slot）
|
|
118
|
+
四种接入方式（完整代码见 skills）：
|
|
209
119
|
|
|
210
|
-
|
|
120
|
+
- **方式 1** `markRaw(SFC)`：单字段复用 SFC（**必须 markRaw**，否则被 Vue 深度代理触发性能警告）
|
|
121
|
+
- **方式 2** render 函数 `(props, ctx) => VNode`：需动态拼装 props
|
|
122
|
+
- **方式 3** `ProComponentProvider` 注入 `componentMap`：全局复用 / 覆盖内置组件，可追加 `declare module` 声明获强类型
|
|
123
|
+
- **方式 4** 模板 scoped slot：插槽名 = 字段 `path`，`v-bind="scoped"` 转发（teleport 机制，优先级最高）
|
|
211
124
|
|
|
212
|
-
|
|
213
|
-
- **接收 path**：组件会收到 `path` prop（字段路径）
|
|
214
|
-
- **属性透传**：Field 上除框架级属性外（component/hidden/modelProp/valueFormatter/fields/slots/formItemContainer/componentContainer/extraProps 等），其余作为 attrs 透传给自定义组件
|
|
125
|
+
约定：默认 v-model 绑 `modelValue`，他 prop 用 `modelProp` 指定；组件会收到 `path` prop；除框架级属性外其余作 attrs 透传。
|
|
215
126
|
|
|
216
|
-
|
|
127
|
+
### valueFormatter -- 字段值转换
|
|
217
128
|
|
|
218
|
-
|
|
129
|
+
控制表单值与组件值之间的转换。**在表单数据写入前（computed setter 中，于 `onUpdate:modelValue` 写回前）执行**，支持两种形态：
|
|
219
130
|
|
|
220
131
|
```ts
|
|
221
|
-
// 函数形态：(新值, 旧值) => 转换后的值，写回 formData
|
|
132
|
+
// 函数形态：(新值, 旧值) => 转换后的值，写回 formData。仅 set（写入）方向生效，读取时不转换
|
|
222
133
|
{ path: 'name', valueFormatter: (val, oldVal) => val?.trim() }
|
|
223
134
|
|
|
224
|
-
// 对象形态：get 读出时转换，set
|
|
135
|
+
// 对象形态：get 读出时转换，set 写入时转换（双向）
|
|
225
136
|
{ path: 'birthday', component: 'date-picker',
|
|
226
|
-
valueFormatter: {
|
|
227
|
-
get: (val) => val ? new Date(val) : null, // formData -> 组件显示
|
|
228
|
-
set: (val) => val ? dayjs(val).format('YYYY-MM-DD') : null, // 组件 -> formData
|
|
229
|
-
} }
|
|
137
|
+
valueFormatter: { get: v => v ? new Date(v) : null, set: v => v ? dayjs(v).format('YYYY-MM-DD') : null } }
|
|
230
138
|
```
|
|
231
139
|
|
|
232
|
-
|
|
140
|
+
### ProTable -- 配置驱动表格
|
|
233
141
|
|
|
234
|
-
|
|
235
|
-
const table = useTable<SearchParams, User>({
|
|
236
|
-
columns: [{ prop: 'name', label: '姓名', width: 120 }],
|
|
237
|
-
data: [], // 数据源（element-plus 用 data，非 dataSource）
|
|
238
|
-
pageParam: { current: 1, pageSize: 10, total: 0 }, // 默认值
|
|
239
|
-
searchParam: { keyword: '', status: '' },
|
|
240
|
-
searchFields: [ // 与 ProForm 同一套 Field[] 格式
|
|
241
|
-
{ path: 'keyword', component: 'input', label: '关键词' },
|
|
242
|
-
{ path: 'status', component: 'select', label: '状态', options: [...] },
|
|
243
|
-
],
|
|
244
|
-
});
|
|
245
|
-
```
|
|
142
|
+
透传所有 element-plus `TableProps`（`& Omit<TableProps,'data'>`），可直接写 `row-key` / `bordered` / `stripe` 等原生属性；`size`、`loading` 是 v-model。
|
|
246
143
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
| 成员 | 说明 |
|
|
250
|
-
| :-------------------------------------------------------------------- | :----------------------------------------------------- |
|
|
251
|
-
| `table.columns` | 列配置（Ref） |
|
|
252
|
-
| `table.data` | 表格数据源（Ref，element-plus 语义） |
|
|
253
|
-
| `table.pageParam` | 分页参数（reactive）：`current` / `pageSize` / `total` |
|
|
254
|
-
| `table.searchForm` | 搜索表单实例（Form 类型，所有 useForm 方法可用） |
|
|
255
|
-
| `table.setColumn` / `deleteColumn` / `appendColumn` / `prependColumn` | 列增删改查（用法同 setField） |
|
|
256
|
-
| `table.setPageParam(patch)` | 设置分页参数 |
|
|
257
|
-
| `table.resetQueryParams()` | 重置分页到第一页 + 恢复搜索条件到初始值 |
|
|
258
|
-
|
|
259
|
-
## ProTable -- 配置驱动表格
|
|
260
|
-
|
|
261
|
-
**关键：ProTable 透传所有 element-plus TableProps**（`& TableProps`），可直接写 `row-key` / `bordered` / `stripe` / `row-selection` 等原生属性；`size`、`loading` 是 v-model。
|
|
262
|
-
|
|
263
|
-
| prop | 说明 |
|
|
264
|
-
| :----------------- | :-------------------------------------------------------------- |
|
|
265
|
-
| `table` | useTable 实例 |
|
|
266
|
-
| `search` | 数据查询方法 `() => Promise`，ProTable 内部调用它（非自动触发） |
|
|
267
|
-
| `addIndexColumn` | 首列插入 index 列 |
|
|
268
|
-
| `immediateSearch` | onMounted 时立即触发一次 search |
|
|
269
|
-
| `control` | 是否显示 size/列控制按钮，可 `{sizeControl, columnControl}` |
|
|
270
|
-
| `searchFormConfig` | 搜索栏配置，含 `hidden`（隐藏搜索区）、`container` |
|
|
271
|
-
| `tableContainer` | 表格区容器 |
|
|
144
|
+
关键 prop：`table`（useTable 实例）、`search`（数据查询方法 `() => Promise`，ProTable 内部调用，非自动触发）、`addIndexColumn`、`immediateSearch`、`control`、`searchFormConfig`（含 `hidden`/`container`/`layout`/`expand`）、`tableContainer`、`columns`（覆盖实例列配置）、`data`（覆盖实例数据源）、`pagination`（`false` | 分页属性）。
|
|
272
145
|
|
|
273
146
|
**数据流**：搜索->重置分页到第 1 页->调 `search()`；分页/排序变化->更新 `pageParam`->调 `search()`；重置->`resetQueryParams()`->调 `search()`。
|
|
274
147
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
继承 element-plus `TableColumnCtx`，**所有原生列属性可用**（`prop` / `label` / `width` / `fixed` / `align` / `sortable` / `formatter` / `filters`…）。新增：
|
|
278
|
-
|
|
279
|
-
- `prop`：列数据字段（主用），对应数据源 key
|
|
280
|
-
- `hidden`：隐藏该列（配合列控制，支持响应式）
|
|
281
|
-
- `render(scope)`：自定义渲染函数，接收行 scope，**优先级高于 `formatter`**
|
|
282
|
-
|
|
283
|
-
> element-plus Table 列用 `prop`（不是 `dataIndex`），数据源用 `data`（不是 `dataSource`）。
|
|
284
|
-
|
|
285
|
-
## ProTable 最小示例
|
|
286
|
-
|
|
287
|
-
```vue
|
|
288
|
-
<script setup lang="ts">
|
|
289
|
-
import { ProTable, useTable } from '@qin-ui/element-plus-pro';
|
|
290
|
-
interface User {
|
|
291
|
-
id: number;
|
|
292
|
-
name: string;
|
|
293
|
-
status: string;
|
|
294
|
-
}
|
|
295
|
-
interface Search {
|
|
296
|
-
keyword: string;
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
const table = useTable<Search, User>({
|
|
300
|
-
columns: [
|
|
301
|
-
{ prop: 'name', label: '姓名', width: 120 },
|
|
302
|
-
{ prop: 'status', label: '状态' },
|
|
303
|
-
],
|
|
304
|
-
searchFields: [{ path: 'keyword', component: 'input', label: '关键词' }],
|
|
305
|
-
});
|
|
306
|
-
|
|
307
|
-
const fetchData = async () => {
|
|
308
|
-
// 组装查询参数：搜索条件 + 分页
|
|
309
|
-
const res = await api.list({
|
|
310
|
-
...table.searchForm.formData,
|
|
311
|
-
...table.pageParam,
|
|
312
|
-
});
|
|
313
|
-
table.data.value = res.data;
|
|
314
|
-
table.setPageParam({ total: res.total });
|
|
315
|
-
};
|
|
316
|
-
</script>
|
|
317
|
-
<template>
|
|
318
|
-
<ProTable :table="table" :search="fetchData" row-key="id" immediate-search />
|
|
319
|
-
</template>
|
|
320
|
-
```
|
|
148
|
+
### Column -- 列配置
|
|
321
149
|
|
|
322
|
-
|
|
150
|
+
继承 element-plus `TableColumnCtx`（除 `prop`/`property`/`children`/`render`），所有原生列属性可用。新增：`prop`（列数据路径，主用，对应数据源 key）、`key`（辅助标识，优先级更低）、`hidden`（隐藏该列，配合列控制）、`render(scope)`（自定义渲染函数，接收 `{ row, column, $index, cellValue }`，优先级高于 `formatter`）。
|
|
323
151
|
|
|
324
|
-
|
|
325
|
-
disabled: computed(() => !form.formData.enabled), // A 声明式，初始化时已知（首选）
|
|
326
|
-
const isDisabled = ref(false); // B 外部共享状态
|
|
327
|
-
form.setField('limitCount', { disabled: true }); // C 命令式，事件驱动
|
|
328
|
-
```
|
|
329
|
-
|
|
330
|
-
> **不支持响应式**（不能包 ref/computed）的属性：`component` / `formItemContainer` / `componentContainer` / `valueFormatter` / `fields` / `slots` / `modelProp`。
|
|
152
|
+
> element-plus Table 列用 `prop`（不是 `dataIndex`），数据源用 `data`（不是 `dataSource`），v-model 用 `modelValue`（不是 `value`）。
|
|
331
153
|
|
|
332
154
|
## 反模式
|
|
333
155
|
|
|
@@ -340,6 +162,10 @@ form.setField('limitCount', { disabled: true }); // C 命令式，事件驱
|
|
|
340
162
|
|
|
341
163
|
## 按需深查
|
|
342
164
|
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
-
|
|
165
|
+
完整 API（详细签名、参数表、完整示例、ProTable Slots、ProComponentProvider 用法）：
|
|
166
|
+
|
|
167
|
+
- `.agents/skills/element-plus-pro/SKILL.md` — skills 入口（速查 + 参考导航）
|
|
168
|
+
- `.agents/skills/element-plus-pro/references/README.md` — 完整使用文档与进阶示例
|
|
169
|
+
- `.agents/skills/element-plus-pro/references/api.md` — 结构化 API 元数据
|
|
170
|
+
- `node_modules/@qin-ui/element-plus-pro/README.md` — 完整用法与进阶示例
|
|
171
|
+
- element-plus 组件属性查阅官方文档：https://element-plus.org
|
package/README.md
CHANGED
|
@@ -46,7 +46,8 @@ npx @qin-ui/element-plus-pro init-ai
|
|
|
46
46
|
将在项目中生成双载体 AI 上下文，使 Cursor / Claude Code / Codex 等 AI 工具深度理解本库的 Schema 驱动用法与属性透传规则：
|
|
47
47
|
|
|
48
48
|
- `AGENTS.md` - 核心使用规则（跨工具开放约定，会话时自动注入，AI 默认加载）
|
|
49
|
-
- `.agents/skills/element-plus-pro.md`
|
|
49
|
+
- `.agents/skills/element-plus-pro/SKILL.md` — skills 入口（速查 + 参考导航）
|
|
50
|
+
- `.agents/skills/element-plus-pro/references/` — 完整使用文档与结构化 API 元数据
|
|
50
51
|
|
|
51
52
|
> 生成的 `AGENTS.md` 使用标记区块写入，重复执行 `init-ai` 可安全更新，不影响项目内其他库的指令。建议将生成的文件提交到 Git 仓库，团队共享 AI 上下文。
|
|
52
53
|
|
|
@@ -200,21 +201,22 @@ ProForm/ProTable 是渲染引擎，所有真实 UI 来自 element-plus。**Field
|
|
|
200
201
|
|
|
201
202
|
ProComponentProvider 内置了一套默认属性预设，**即使不配置 `component-vars` 也会生效**。Field 配置优先级最高，会覆盖这些预设。以下为各组件的内置默认值（写代码时需知晓，避免行为与预期不符）：
|
|
202
203
|
|
|
203
|
-
| component
|
|
204
|
-
|
|
|
205
|
-
| `switch`
|
|
206
|
-
| `input`
|
|
207
|
-
| `input.textarea`
|
|
208
|
-
| `input.password`
|
|
209
|
-
| `input-number`
|
|
210
|
-
| `select` / `cascader` / `
|
|
211
|
-
| `
|
|
212
|
-
| `
|
|
213
|
-
| `pro-form
|
|
214
|
-
| `pro-
|
|
204
|
+
| component | 默认预设 |
|
|
205
|
+
| :-------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
206
|
+
| `switch` | `{ modelProp: 'modelValue' }` -- v-model 绑定 `modelValue`（element-plus 惯例，即 `v-model`） |
|
|
207
|
+
| `input` | `{ maxlength: 100, clearable: true, placeholder: '请输入' }` |
|
|
208
|
+
| `input.textarea` | `{ maxlength: 200, autosize: { minRows: 3, maxRows: 6 }, showWordLimit: true, clearable: true, placeholder: '请输入' }` |
|
|
209
|
+
| `input.password` | `{ showPassword: true, maxlength: 100, clearable: true, placeholder: '请输入' }` |
|
|
210
|
+
| `input-number` | `{ max: 1e15-1, min: -(1e15+1), controls: false, placeholder: '请输入', style: { width: '100%' } }` |
|
|
211
|
+
| `select` / `cascader` / `tree-select` | `{ clearable: true, placeholder: '请选择' }` |
|
|
212
|
+
| `autocomplete` | `{ clearable: true, placeholder: '请输入' }` |
|
|
213
|
+
| `date-picker` / `time-picker` / `time-select` | `{ style: { width: '100%' }, placeholder: '请选择' }` |
|
|
214
|
+
| `pro-form` | `{ grid: { gutter: 24 } }` |
|
|
215
|
+
| `pro-form-item` | `{ span: 8 }` |
|
|
216
|
+
| `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 }` |
|
|
215
217
|
|
|
216
218
|
> `modelProp` 控制 v-model 绑定的属性名，element-plus 默认 `'modelValue'`（即 `v-model`）。`switch` 经预设同样为 `modelValue`，通常无需手动设置。
|
|
217
|
-
> `date-picker` 支持按 type 子类型分别预设：`date-picker.date` / `.daterange` / `.datetime` / `.week` / `.month` / `.monthrange` / `.year` / `.yearrange` 等。
|
|
219
|
+
> `date-picker` 支持按 type 子类型分别预设：`date-picker.date` / `.dates` / `.daterange` / `.datetime` / `.datetimerange` / `.week` / `.month` / `.monthrange` / `.months` / `.year` / `.yearrange` / `.years` 等。
|
|
218
220
|
|
|
219
221
|
---
|
|
220
222
|
|
|
@@ -241,7 +243,12 @@ ProComponentProvider 内置了一套默认属性预设，**即使不配置 `comp
|
|
|
241
243
|
| 参数名 | 说明 | 类型 | 默认值 |
|
|
242
244
|
| :----------------- | :-------------------------------------------------------- | :------------------------------------- | :------ |
|
|
243
245
|
| `table` | 由 `useTable` 返回的表格实例 | `Table` | - |
|
|
246
|
+
| `columns` | 覆盖实例列配置，传入后优先于 `table.columns` | `Column[]` | - |
|
|
247
|
+
| `data` | 覆盖实例数据源，传入后优先于 `table.data` | `T[]` | - |
|
|
248
|
+
| `pagination` | 分页配置，传 `false` 禁用分页 | `false \| PaginationProps` | - |
|
|
244
249
|
| `search` | 触发表格查询的回调函数，需返回 Promise 或直接返回查询数据 | `(params: any) => Promise<any> \| any` | - |
|
|
250
|
+
| `size` | 表格尺寸（v-model） | `string` | - |
|
|
251
|
+
| `loading` | 表格加载状态（v-model） | `boolean` | - |
|
|
245
252
|
| `addIndexColumn` | 是否自动在表格首列插入序号列 | `boolean` | `false` |
|
|
246
253
|
| `immediateSearch` | 表格挂载时（onMounted）是否立即触发一次 `search` 查询 | `boolean` | `false` |
|
|
247
254
|
| `control` | 是否在表格右上角工具栏中展示尺寸调节和列动态显示控制按钮 | `boolean` | `true` |
|
|
@@ -302,19 +309,19 @@ const form = useForm<D>(initFormData?, initFields?, root?)
|
|
|
302
309
|
|
|
303
310
|
#### 返回值 (Form 实例)
|
|
304
311
|
|
|
305
|
-
| 属性/方法
|
|
306
|
-
|
|
|
307
|
-
| `formData`
|
|
308
|
-
| `fields`
|
|
309
|
-
| `formRef`
|
|
310
|
-
| `getFormData(path)`
|
|
311
|
-
| `setFormData(path, val)`
|
|
312
|
-
| `getField(path, opts?)`
|
|
313
|
-
| `setField(path, patch, opts?)`
|
|
314
|
-
| `deleteField(path)`
|
|
315
|
-
| `appendField(path, field)`
|
|
316
|
-
| `prependField(path, field)`
|
|
317
|
-
| `getParentField(path)`
|
|
312
|
+
| 属性/方法 | 说明 | 类型 |
|
|
313
|
+
| :--------------------------------- | :----------------------------------------------------------------------------------------------------------------------------- | :------------------------------- |
|
|
314
|
+
| `formData` | 响应式表单数据对象（由 reactive 包装） | `Reactive<D>` |
|
|
315
|
+
| `fields` | 响应式表单字段配置数组引用 | `Ref<Field[]>` |
|
|
316
|
+
| `formRef` | 底层 Element Plus `el-form` 的组件引用实例 | `Ref<FormInstance \| undefined>` |
|
|
317
|
+
| `getFormData(path)` | 安全获取指定字段路径（支持深层 'a.b'）的数据值 | `(path) => any` |
|
|
318
|
+
| `setFormData(path, val)` | 安全更新指定路径的值，支持 4 种形态：路径+值、路径+函数、批量对象、函数式批量 `setFormData(prev => ({...}))` | `(path, val) => void` |
|
|
319
|
+
| `getField(path, opts?)` | 获取指定 path 的字段配置，支持查找函数定位，支持配置 `{ all: true }` 获取所有匹配项 | `(path, opts) => Field` |
|
|
320
|
+
| `setField(path, patch, opts?)` | 默认合并更新字段配置；`{updateType:'rewrite'}` 覆盖；支持函数式 `setField(path, prev=>({...}))`；`{all:true}` 批量更新所有匹配 | `(path, patch, opts) => void` |
|
|
321
|
+
| `deleteField(path, opts?)` | 删除字段配置；`{all:true}` 删除所有匹配的字段 | `(path, opts?) => void` |
|
|
322
|
+
| `appendField(path, field, opts?)` | 在指定字段后追加新字段（入参可为数组）；`undefined` 在末尾追加；`{all:true}` 所有匹配后追加 | `(path, field, opts?) => void` |
|
|
323
|
+
| `prependField(path, field, opts?)` | 在指定字段前插入新字段（入参可为数组）；`undefined` 在开头插入；`{all:true}` 所有匹配前插入 | `(path, field, opts?) => void` |
|
|
324
|
+
| `getParentField(path, opts?)` | 查找父级字段配置；`{all:true}` 返回所有匹配的父级字段 | `(path, opts?) => Field` |
|
|
318
325
|
|
|
319
326
|
---
|
|
320
327
|
|
|
@@ -358,6 +365,7 @@ const table = useTable<D, T>({
|
|
|
358
365
|
- **原生列属性支持**：`prop`、`label`、`width`、`fixed`、`align`、`sortable`、`filters`、`filterMethod`、`children` 等
|
|
359
366
|
- **原生格式化支持**：`formatter`
|
|
360
367
|
- **Pro 级扩展属性**：
|
|
368
|
+
- `key` (辅助标识，优先级低于 `prop`)
|
|
361
369
|
- `hidden` (是否隐藏列，支持响应式)
|
|
362
370
|
- `render(scope)` (自定义渲染插槽，接收行参数)
|
|
363
371
|
|
|
@@ -397,7 +405,7 @@ const table = useTable<D, T>({
|
|
|
397
405
|
|
|
398
406
|
#### `valueFormatter` 字段值转换
|
|
399
407
|
|
|
400
|
-
|
|
408
|
+
控制表单值与组件值之间的转换。在表单数据写入前（computed setter 中，于 `onUpdate:modelValue` 写回前）执行，支持两种形态。**函数形态仅 set（写入）方向生效，读取时不转换；对象形态 get/set 双向生效：**
|
|
401
409
|
|
|
402
410
|
```ts
|
|
403
411
|
// 函数形态：(新值, 旧值) => 转换后的值，写回 formData
|
package/api.json
CHANGED
package/bin/init-ai.mjs
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
+
/* global process -- Node.js CLI 脚本 */
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* @qin-ui/element-plus-pro AI 上下文初始化 CLI 工具
|
|
5
6
|
*
|
|
6
7
|
* 在消费方项目中生成双载体 AI 上下文：
|
|
7
8
|
* 1. 根目录 AGENTS.md -- 核心使用规则，跨工具自动注入（主载体）
|
|
8
|
-
* 2. .agents/skills/{pkg}.md
|
|
9
|
+
* 2. .agents/skills/{pkg}/SKILL.md + references/ -- 分层参考文档，支持 skills 发现的工具按需逐层调取（参考载体）
|
|
9
10
|
*
|
|
10
11
|
* 用法:
|
|
11
12
|
* npx @qin-ui/element-plus-pro init-ai
|
|
@@ -50,7 +51,10 @@ function readPackageFile(filename) {
|
|
|
50
51
|
}
|
|
51
52
|
|
|
52
53
|
function getAiContextContent() {
|
|
53
|
-
return
|
|
54
|
+
return (
|
|
55
|
+
readPackageFile('AI-CONTEXT.md') ||
|
|
56
|
+
`# ${PKG_NAME}\n\n> 基于 Vue 3 的配置驱动组件库。`
|
|
57
|
+
);
|
|
54
58
|
}
|
|
55
59
|
|
|
56
60
|
function getReadmeContent() {
|
|
@@ -142,46 +146,82 @@ function writeAgentsMd(cwd) {
|
|
|
142
146
|
// ==================== Skills（参考载体，按需调取）====================
|
|
143
147
|
|
|
144
148
|
/**
|
|
145
|
-
* 生成
|
|
146
|
-
*
|
|
149
|
+
* 生成 SKILL.md 内容
|
|
150
|
+
* = skill frontmatter + AI-CONTEXT.md 速查内容 + references 导航
|
|
151
|
+
* 供支持 skills 发现的工具按需调取，精准定位后查阅 references
|
|
147
152
|
*/
|
|
148
|
-
function
|
|
149
|
-
const
|
|
150
|
-
const apiJson = getApiJsonContent();
|
|
151
|
-
|
|
153
|
+
function getSkillMainContent() {
|
|
154
|
+
const aiContext = getAiContextContent();
|
|
152
155
|
const sections = [];
|
|
153
156
|
|
|
154
157
|
// skill frontmatter
|
|
155
158
|
sections.push('---');
|
|
156
159
|
sections.push(`name: ${PKG_SHORT}`);
|
|
157
160
|
sections.push(
|
|
158
|
-
`description: ${PKG_NAME}
|
|
161
|
+
`description: ${PKG_NAME} 使用指南 - 组件、Hooks、类型、Field/Column 配置。Schema 驱动的配置式组件库。当需要组件映射、默认预设、属性透传规则或完整用法时按需调取。`
|
|
159
162
|
);
|
|
160
163
|
sections.push('---');
|
|
161
164
|
sections.push('');
|
|
162
165
|
|
|
163
|
-
|
|
164
|
-
sections.push(
|
|
166
|
+
// AI-CONTEXT.md 速查内容（与 AGENTS.md 主载体同源，确保一致）
|
|
167
|
+
sections.push(aiContext);
|
|
168
|
+
sections.push('');
|
|
165
169
|
|
|
166
|
-
//
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
170
|
+
// references 导航
|
|
171
|
+
sections.push('---');
|
|
172
|
+
sections.push('');
|
|
173
|
+
sections.push('## 参考文档');
|
|
174
|
+
sections.push('');
|
|
175
|
+
sections.push(
|
|
176
|
+
`以下文件位于 \`.agents/skills/${PKG_SHORT}/references/\`，可在需要精确细节时进一步查阅：`
|
|
177
|
+
);
|
|
178
|
+
sections.push('');
|
|
179
|
+
sections.push(
|
|
180
|
+
`- [references/README.md](references/README.md) — 完整使用文档与进阶示例`
|
|
181
|
+
);
|
|
182
|
+
sections.push(
|
|
183
|
+
`- [references/api.md](references/api.md) — 结构化 API 元数据（函数签名、参数类型、返回值，提取自源码 JSDoc）`
|
|
184
|
+
);
|
|
185
|
+
sections.push(`- 底层组件属性查阅 element-plus 官方文档：https://element-plus.org`);
|
|
186
|
+
sections.push('');
|
|
187
|
+
|
|
188
|
+
return sections.join('\n');
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/**
|
|
192
|
+
* 生成 references/api.md 内容（结构化 API 元数据 + skill frontmatter）
|
|
193
|
+
* 从 api.json 提取 @public 标记的 JSDoc，含签名、参数、返回值、示例
|
|
194
|
+
*/
|
|
195
|
+
function getSkillApiContent() {
|
|
196
|
+
const apiJson = getApiJsonContent();
|
|
197
|
+
const sections = [];
|
|
198
|
+
|
|
199
|
+
// skill frontmatter
|
|
200
|
+
sections.push('---');
|
|
201
|
+
sections.push(`name: ${PKG_SHORT}-api`);
|
|
202
|
+
sections.push(
|
|
203
|
+
`description: ${PKG_NAME} 结构化 API 元数据 - 函数签名、参数类型、返回值、示例。从源码 JSDoc（@public 标记）自动提取。`
|
|
204
|
+
);
|
|
205
|
+
sections.push('---');
|
|
206
|
+
sections.push('');
|
|
207
|
+
|
|
208
|
+
sections.push(`# ${PKG_NAME} - 结构化 API 元数据`, '');
|
|
209
|
+
sections.push(
|
|
210
|
+
`> 自动提取自源码 JSDoc（\`@public\` 标记）。版本: ${PKG_JSON.version}`,
|
|
211
|
+
''
|
|
212
|
+
);
|
|
171
213
|
|
|
172
214
|
// 结构化 API 元数据
|
|
173
215
|
if (apiJson && apiJson.api && apiJson.api.length > 0) {
|
|
174
|
-
sections.push('---', '');
|
|
175
|
-
sections.push('## 结构化 API 元数据（自动提取自源码 JSDoc）', '');
|
|
176
|
-
|
|
177
216
|
for (const item of apiJson.api) {
|
|
178
|
-
const typeLabel =
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
217
|
+
const typeLabel =
|
|
218
|
+
{
|
|
219
|
+
component: '组件',
|
|
220
|
+
function: '函数/Hook',
|
|
221
|
+
type: '类型',
|
|
222
|
+
interface: '接口',
|
|
223
|
+
constant: '常量',
|
|
224
|
+
}[item.type] || '';
|
|
185
225
|
|
|
186
226
|
sections.push(`### ${typeLabel} \`${item.name}\``);
|
|
187
227
|
sections.push('');
|
|
@@ -216,7 +256,9 @@ function getSkillContent() {
|
|
|
216
256
|
sections.push('| 参数名 | 类型 | 可选 | 描述 |');
|
|
217
257
|
sections.push('| :--- | :--- | :--- | :--- |');
|
|
218
258
|
for (const p of item.params) {
|
|
219
|
-
sections.push(
|
|
259
|
+
sections.push(
|
|
260
|
+
`| \`${p.name}\` | \`${p.type}\` | ${p.optional ? '是' : '否'} | ${p.description} |`
|
|
261
|
+
);
|
|
220
262
|
}
|
|
221
263
|
}
|
|
222
264
|
|
|
@@ -259,10 +301,14 @@ ${bold('说明:')}
|
|
|
259
301
|
AGENTS.md 核心使用规则（跨工具自动注入）
|
|
260
302
|
.agents/
|
|
261
303
|
skills/
|
|
262
|
-
${PKG_SHORT}
|
|
304
|
+
${PKG_SHORT}/
|
|
305
|
+
SKILL.md skills 入口（速查 + 导航）
|
|
306
|
+
references/
|
|
307
|
+
README.md 完整使用文档
|
|
308
|
+
api.md 结构化 API 元数据
|
|
263
309
|
|
|
264
310
|
${dim('AGENTS.md 是跨工具开放约定，Codex / Claude Code / Cursor 等会话时自动注入。')}
|
|
265
|
-
${dim('.agents/skills/ 供支持 skills
|
|
311
|
+
${dim('.agents/skills/ 供支持 skills 发现的工具按需逐层调取。')}
|
|
266
312
|
|
|
267
313
|
${bold('选项:')}
|
|
268
314
|
--help 显示帮助信息
|
|
@@ -293,30 +339,76 @@ function main() {
|
|
|
293
339
|
// 1. 生成 AGENTS.md（主载体）
|
|
294
340
|
console.log(bold('📋 主载体：AGENTS.md（自动注入）'));
|
|
295
341
|
writeAgentsMd(process.cwd());
|
|
296
|
-
console.log(
|
|
342
|
+
console.log(
|
|
343
|
+
dim(' -> 核心使用规则，Codex/Claude Code/Cursor 等会话自动加载')
|
|
344
|
+
);
|
|
297
345
|
console.log('');
|
|
298
346
|
|
|
299
|
-
// 2. 生成 Skills
|
|
347
|
+
// 2. 生成 Skills（标准结构：SKILL.md + references/）
|
|
300
348
|
console.log(bold('📖 参考载体：.agents/skills/（按需调取）'));
|
|
349
|
+
const skillDir = path.join(process.cwd(), '.agents/skills', PKG_SHORT);
|
|
350
|
+
const skillRefsDir = path.join(skillDir, 'references');
|
|
351
|
+
|
|
352
|
+
// SKILL.md（入口：frontmatter + 速查内容 + 参考导航）
|
|
301
353
|
writeFileWithLog(
|
|
302
|
-
path.join(
|
|
303
|
-
|
|
304
|
-
`.agents/skills/${PKG_SHORT}.md`
|
|
354
|
+
path.join(skillDir, 'SKILL.md'),
|
|
355
|
+
getSkillMainContent(),
|
|
356
|
+
`.agents/skills/${PKG_SHORT}/SKILL.md`
|
|
357
|
+
);
|
|
358
|
+
|
|
359
|
+
// references/README.md（完整使用文档）
|
|
360
|
+
const readme = getReadmeContent();
|
|
361
|
+
if (readme) {
|
|
362
|
+
writeFileWithLog(
|
|
363
|
+
path.join(skillRefsDir, 'README.md'),
|
|
364
|
+
readme,
|
|
365
|
+
`.agents/skills/${PKG_SHORT}/references/README.md`
|
|
366
|
+
);
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
// references/api.md（结构化 API 元数据）
|
|
370
|
+
const apiJson = getApiJsonContent();
|
|
371
|
+
if (apiJson && apiJson.api && apiJson.api.length > 0) {
|
|
372
|
+
writeFileWithLog(
|
|
373
|
+
path.join(skillRefsDir, 'api.md'),
|
|
374
|
+
getSkillApiContent(),
|
|
375
|
+
`.agents/skills/${PKG_SHORT}/references/api.md`
|
|
376
|
+
);
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
console.log(
|
|
380
|
+
dim(' -> SKILL.md 入口 + references/ 完整文档，skills 工具按需逐层调取')
|
|
305
381
|
);
|
|
306
|
-
console.log(dim(' -> 完整 README + 结构化 API 元数据，skills 工具按需调取'));
|
|
307
382
|
console.log('');
|
|
308
383
|
|
|
309
384
|
// 3. 完成提示
|
|
310
385
|
console.log(green('✅ 完成！已生成双载体 AI 上下文文件。'));
|
|
311
386
|
console.log('');
|
|
312
387
|
console.log(`${bold('📂 生成的文件:')}`);
|
|
313
|
-
console.log(
|
|
314
|
-
|
|
315
|
-
|
|
388
|
+
console.log(
|
|
389
|
+
` ${cyan('AGENTS.md')} ${dim('← 核心规则（AI 自动读取）')}`
|
|
390
|
+
);
|
|
391
|
+
console.log(` ${cyan('.agents/skills/' + PKG_SHORT + '/')}`);
|
|
392
|
+
console.log(
|
|
393
|
+
` ├── ${cyan('SKILL.md')} ${dim('← skills 入口（速查 + 导航）')}`
|
|
394
|
+
);
|
|
395
|
+
console.log(` └── ${cyan('references/')}`);
|
|
396
|
+
console.log(
|
|
397
|
+
` ├── ${cyan('README.md')} ${dim('← 完整使用文档')}`
|
|
398
|
+
);
|
|
399
|
+
if (apiJson && apiJson.api && apiJson.api.length > 0) {
|
|
400
|
+
console.log(
|
|
401
|
+
` └── ${cyan('api.md')} ${dim('← 结构化 API 元数据')}`
|
|
402
|
+
);
|
|
403
|
+
}
|
|
316
404
|
console.log('');
|
|
317
405
|
console.log(`${bold('🔄 说明:')}`);
|
|
318
|
-
console.log(
|
|
319
|
-
|
|
406
|
+
console.log(
|
|
407
|
+
` - AGENTS.md 已用标记区块写入，重复执行 init-ai 可安全更新（不破坏其他库的指令）`
|
|
408
|
+
);
|
|
409
|
+
console.log(
|
|
410
|
+
` - 编写 Field 中输入控件属性前，查阅 element-plus 官方文档：${cyan('https://element-plus.org')}`
|
|
411
|
+
);
|
|
320
412
|
console.log('');
|
|
321
413
|
}
|
|
322
414
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qin-ui/element-plus-pro",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
4
4
|
"description": "基于 element-plus 的二次封装组件",
|
|
5
5
|
"bin": {
|
|
6
6
|
"element-plus-pro": "./bin/init-ai.mjs"
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
41
|
"vue-component-type-helpers": "^3.2.5",
|
|
42
|
-
"@qin-ui/pro-components-core": "^1.0.
|
|
42
|
+
"@qin-ui/pro-components-core": "^1.0.4"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"element-plus": "^2.13.6"
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"node": ">=18"
|
|
57
57
|
},
|
|
58
58
|
"scripts": {
|
|
59
|
-
"prebuild": "tsx ../../scripts/generate-api-json.ts element-plus-pro",
|
|
59
|
+
"prebuild": "tsx ../../scripts/generate-api-json.ts element-plus-pro && tsx ../../scripts/generate-init-ai.ts element-plus-pro",
|
|
60
60
|
"build": "vue-tsc --noEmit && vite build"
|
|
61
61
|
}
|
|
62
62
|
}
|