更新规则和uipro
This commit is contained in:
@@ -1,8 +1,16 @@
|
||||
---
|
||||
description: nl-admin 管理后台(Vben Admin v5 + Vue 3 + TS + Ant Design Vue)代码规范
|
||||
description: nl-admin 管理后台(Vben Admin 5.7 + Vue 3.5 + TS + Ant Design Vue 4)代码规范
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
# 技术栈基线(升级后必守)
|
||||
|
||||
- **Vben Admin 5.7.0**(monorepo 根 `package.json` / `@vben/web-antd` 版本)
|
||||
- **Vue 3.5** + **TypeScript** + **Ant Design Vue 4.x**;业务只改 `apps/web-antd`
|
||||
- **Tailwind CSS v4**(CSS-first,主题在 `@vben/tailwind-config`);不要再引入 `tailwind.config.*` / PostCSS Tailwind 插件那套 v3 写法
|
||||
- 格式化 / Lint 以仓库现有工具链为准:`oxfmt` + `oxlint`(配合 eslint / stylelint),**不要**再单独引入 Prettier 作为主格式化器
|
||||
- 组件细则见同目录 `Vben-Components.mdc`(与 https://doc.vben.pro/components/ 对齐)
|
||||
|
||||
# 基础规范(所有项目通用)
|
||||
|
||||
1. 写代码的时候要补充详细的中文注释(每个方法是干嘛的,为什么要这样写),如果是工作区,则所有项目都适用该规则
|
||||
@@ -133,7 +141,9 @@ alwaysApply: true
|
||||
- 表格空态、分割线、次要文案:用 `--muted` / `--muted-foreground` / `--border`
|
||||
- 改完后切换暗色主题肉眼过一遍,不要只测亮色
|
||||
|
||||
## Vben 组件使用规范
|
||||
## Vben 组件使用规范(5.7 基线)
|
||||
|
||||
> 完整 API / 踩坑见 `Vben-Components.mdc`。下列为业务页强制约定;`lock` / `unlock` / Promise 版 `onBeforeClose` 在 5.7 已是默认能力,**不要再写「需 >5.5.x」这类过时版本门槛**。
|
||||
|
||||
### VbenModal(来自 @vben/common-ui)
|
||||
|
||||
@@ -141,18 +151,18 @@ alwaysApply: true
|
||||
- 抽离弹窗内容到子组件时,外层用 `connectedComponent` 参数连接,内外组件共享 `modalApi`
|
||||
- 底部按钮扩展 slot 优先级:`prepend-footer`(取消按钮左侧)> `center-footer`(取消/确定之间)> `append-footer`(确定右侧)
|
||||
- **严禁覆盖 `#footer` slot**,会丢失默认的取消/确定按钮和 loading 行为
|
||||
- 表单提交 loading 走 `modalApi.setState({ confirmLoading: true })`,禁止自己写 button loading
|
||||
- 提交防抖/防重复用 `modalApi.lock()` / `unlock()`(>5.5.3),禁止手动 disabled
|
||||
- 提交防抖/防重复优先 `modalApi.lock()` / `unlock()`(锁定时确认按钮 loading,并禁止关闭);也可用 `setState({ confirmLoading: true })`,禁止自己写 button loading / disabled
|
||||
- 拖拽开 `draggable: true`,需要拖出可视区时同时开 `overflow: true`
|
||||
- 数据回填走 `modalApi.setData()` + `onOpenChange(isOpen) { const data = modalApi.getData() }`
|
||||
- `animationType: 'slide' | 'scale'`(默认 slide);挂内容区时开 `appendToMain`,且 Page 必须 `auto-content-height`
|
||||
|
||||
### VbenDrawer(来自 @vben/common-ui)
|
||||
|
||||
- 创建抽屉必须用 `useVbenDrawer`,禁止直接用 antd `Drawer`
|
||||
- 底部按钮扩展 slot 与 Modal 一致:`prepend-footer` / `center-footer` / `append-footer`
|
||||
- **同样严禁覆盖 `#footer` slot**
|
||||
- 关闭前校验用 `onBeforeClose`(>5.5.2 支持 Promise),禁止自己拦截
|
||||
- 提交防抖/防重复用 `drawerApi.lock()` / `unlock()`(>5.5.3)
|
||||
- 关闭前校验用 `onBeforeClose`(支持 Promise / 返回 `false`),禁止自己拦截
|
||||
- 提交防抖/防重复用 `drawerApi.lock()` / `unlock()`
|
||||
|
||||
### VbenVxeTable(来自 #/adapter/vxe-table)
|
||||
|
||||
@@ -175,5 +185,5 @@ alwaysApply: true
|
||||
- 校验用 `formApi.validate().then(e => { if (e.valid) {...} })` 或 `formApi.validateAndSubmitForm()`
|
||||
- 必填规则用字符串 `'required'` / `'selectRequired'`,规则在 `#/adapter/form.ts` 的 `defineRules` 注册
|
||||
- schema 中字段名(`fieldName`)必须与后端字段 snake_case 对齐,禁止前端 camelCase
|
||||
- 密码/敏感字段用 `VbenInputPassword` 组件,禁止用 `VbenInput` 配 `type="password"`
|
||||
- 业务表单密码字段用适配器组件名 `InputPassword`;禁止 `Input` + `type="password"`(框架自带页可用 `VbenInputPassword`)
|
||||
- 单选/多选选项来自接口时,必须在弹窗/页面 `onMounted` 或 `onOpenChange` 里拉取后通过 `updateSchema` 注入,禁止写死常量
|
||||
|
||||
Reference in New Issue
Block a user