| 1234567891011121314151617181920212223242526 |
- ---
- description: web-admin 列表主标题竖条与新增编辑弹窗（Element Plus）约定
- globs: web-admin/**/*.vue,web-admin/**/*.scss
- alwaysApply: false
- ---
- # web-admin · 列表标题与 CRUD 弹窗
- 细则以 `docs/web-admin-ui-spec-fresh-mint.md` §7、§9.3.1 为准；以下为仓库**已落地**约定，新增或改造列表/弹窗时须遵守。
- ## 列表面板主标题（绿色竖条）
- - 需要标题前 **主色竖条**（`h2.title-bar-heading` + `::before`）时：在 `web-admin/src/App.vue` 的 **`panelTitleBarTextRules`** 里**写入完整标题文案**（如「租户列表」），不要只靠自动图标逻辑。
- - 勿用会误配的短正则：「租户」含「用户」子串，会命中用户类图标；**竖条标题一律显式列入 `panelTitleBarTextRules`**。
- ## 新增 / 编辑 `el-dialog`
- - 根节点加 **`class="dialog-form-layout"`**（样式在 `src/assets/styles/core/app.scss`）：`max-height: calc(100vh - 100px)`，**仅** `.el-dialog__body` 纵向滚动；头、底栏不随内容滚动；水平垂直居中依赖 **`align-center`** 与全局 `ElConfigProvider`。
- - 建议 **`append-to-body`** + **`modal-class="protocol-dialog-mask"`**（与采集协议单 `ProtocolFormDialog` 一致）；所有带 `dialog-form-layout` 的弹窗遮罩在 `app.scss` 另有 **`:has()` 全局兜底**（顶对齐 + 视口顶距 16px）。
- - 字段少用 **`width` 约 560～720px**；字段很多时 **加宽** `width`，栅格用 **`.form-grid-2`（默认）～`.form-grid-5`（列数上限 5）**。
- - 表单 **`label-position="top"`**；长字段、备注用 **`grid-column: 1 / -1`** 或 **`.form-col-span-2`**；栅格内 **`el-form-item` 宜 `margin-bottom: 0`**，纵向间距靠栅格 **`gap`**。
- - **勿**在页面 `scoped` 里重复定义 `.form-grid-2`、`.form-col-span-2`、`.sort-field`、`.form-tip`（已在 `app.scss` 全局提供）。
- ## 底栏
- - 取消 / 确定使用 **Close / Check** 图标 + 文案，图标与字间距 **6px**（与规范及现有页一致）。
|
