更新规则和uipro
This commit is contained in:
@@ -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` 等演示端塞业务代码
|
||||
|
||||
Reference in New Issue
Block a user