更新规则和uipro

This commit is contained in:
李琦
2026-08-10 14:42:27 +08:00
parent f676b763ee
commit 089fa2f3eb
2 changed files with 29 additions and 15 deletions

View File

@@ -1,13 +1,14 @@
---
description: nl-admin-view Vben 官方组件用法规范(Page/Form/Modal/Drawer/VxeTable 等)
description: nl-admin-view Vben 5.7 官方组件用法规范(Page/Form/Modal/Drawer/VxeTable 等)
globs: apps/web-antd/**/*.{vue,ts}
alwaysApply: false
---
# Vben 组件规则(对齐官方文档 + 本仓库约定)
# Vben 组件规则(对齐 5.7.0 官方文档 + 本仓库约定)
文档来源:https://doc.vben.pro/components/
业务页统一在 `apps/web-antd`;表单/表格必须走本仓库适配器,不要直接依赖底层实现细节。
当前版本:**Vben Admin 5.7.0**。文档来源:https://doc.vben.pro/components/
业务页统一在 `apps/web-antd`;表单/表格必须走本仓库适配器,不要直接依赖底层实现细节。
`lock` / `unlock`、Promise 版 `onBeforeClose`、`animationType`、`center-footer` 等在 5.7 已是基线能力,规则里不再标注「>5.5.x」版本门槛。
## 选型速查
@@ -53,13 +54,14 @@ const [Modal, modalApi] = useVbenModal({
- 复杂弹窗用 `connectedComponent`;内外共享 `modalApi`
- **严禁覆盖 `#footer`**(会丢掉默认取消/确定与 loading)
- 扩展底部只用:`prepend-footer` / `center-footer` / `append-footer`
- 提交防重复:`modalApi.lock()` / `unlock()`(或 `setState({ confirmLoading: true })`)
- 提交防重复:优先 `modalApi.lock()` / `unlock()`(`unlock` = `lock(false)`;锁定时确认按钮 loading、禁关弹窗);或 `setState({ confirmLoading: true })`
- 回填:`modalApi.setData(data).open()`;内部 `onOpenChange` 里 `modalApi.getData()`
- 参数优先级:`slot` > `props` > `state`;`connectedComponent` 时同名事件**以内侧为准**(`onOpenChange` 内外都会触发)
- 默认属性可在 `apps/web-antd/src/bootstrap.ts` 的 `setDefaultModalProps` 统一改
- 动画:`animationType: 'slide' | 'scale'`(默认 slide)
- `destroyOnClose`:关闭后销毁内部 Modal 及子组件(配合 `connectedComponent` 时同样生效)
常用 API:`open` / `close` / `setState` / `setData` / `getData` / `lock` / `unlock`
常用 API:`open` / `close` / `setState` / `setData` / `getData` / `lock` / `unlock` / `useStore`
---
@@ -68,7 +70,7 @@ const [Modal, modalApi] = useVbenModal({
- API 形态与 Modal 基本一致:`connectedComponent`、`setData/getData`、`lock/unlock`、footer 三插槽
- **同样严禁覆盖 `#footer`**
- `placement`: `left | right | top | bottom`(默认 `right`)
- 关闭前校验用 `onBeforeClose`(支持 Promise);需要重置内部状态可开 `destroyOnClose`
- 关闭前校验用 `onBeforeClose`(支持 Promise / 返回 `false`);需要重置内部状态可开 `destroyOnClose`
- 挂内容区同样要配合 Page 的 `auto-content-height`
- 默认属性:`setDefaultDrawerProps`
@@ -224,8 +226,10 @@ const blob = await cropperRef.value?.getCropImage('image/jpeg', 0.9, 'blob');
## 与本仓库踩坑清单(必守)
1. Form 无 `setComponentProps` / 无 `resetFields`
2. Modal/Drawer 禁止覆盖 `#footer`;提交用 `lock/unlock`
2. Modal/Drawer 禁止覆盖 `#footer`;提交用 `lock/unlock`(5.7 基线,无需再判断版本)
3. 表格返回必须是 `{ items, total }`;刷新分清 `query` vs `reload`
4. 字段名 `fieldName` 用后端 snake_case(如 `created_at`、`nick_name`)
5. 状态枚举与后端一致:**0 正常 / 1 禁用**
6. 暗色主题:业务样式用 CSS 变量,禁止写死亮色色值(见 `Code-Standards.mdc`)
7. Tailwind 已是 v4:业务样式优先主题 CSS 变量 / 现有 utility;不要新建 v3 的 `tailwind.config.*`
8. 业务 CRUD 只改 `apps/web-antd`;不要往 `web-ele` / `web-naive` / `web-antdv-next` 等演示端塞业务代码