docs: align dialog label-top spacing rules with Fresh Mint
Document 4px gap, weight 400, form-grid margin reset, and stock-check exception. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
1 parent
de132a7c04
commit
da63c228f5
2 files changed
+19
-3
No files matched your search
@@ -481,8 +481,8 @@
|
||||
|
||||
与 HTML demo 类名可不同,下列为 **Element Plus** 落地约定,供各业务列表页统一改造:
|
||||
|
||||
- **表单主区两列**:内容可用 **`display: grid`**,`grid-template-columns: repeat(2, minmax(0, 1fr))`,`gap: 12px 20px`(类名示例:**`.form-grid-2`**);占满整行的字段(如多行 **描述**)使用 **`grid-column: 1 / -1`**(示例:**`.form-col-span-2`**)。栅格内 **`el-form-item`** 宜 **`margin-bottom: 0`**,纵向间距交给 **`gap`**。
|
||||
- **label 在上(强约束)**:弹窗表单统一 `label-position="top"`,并将 `label-width` 相关规则清零,避免出现「左侧 label 空出一大块」的不对齐(区域管理/单位/参数模板等页同构)。
|
||||
- **表单主区两列**:内容可用 **`display: grid`**,`grid-template-columns: repeat(2, minmax(0, 1fr))`,`gap: 12px 20px`(类名示例:**`.form-grid-2`**;亦可自建 **`.form-grid`** 及列变体);占满整行的字段(如多行 **描述**)使用 **`grid-column: 1 / -1`**(示例:**`.form-col-span-2`**)。栅格内(含 `.form-grid` / `.form-grid-2`~`5`)**`el-form-item`** 宜 **`margin-bottom: 0`**,纵向间距交给 **`gap`**;实现见全局 `app.scss`。
|
||||
- **label 在上(强约束)**:弹窗表单统一 `label-position="top"`,并将 `label-width` 相关规则清零,避免出现「左侧 label 空出一大块」的不对齐(区域管理/单位/参数模板等页同构)。label 与输入框间距 **4px**(`padding-bottom: 4px`),字重 **400**,`height: auto`(勿沿用左右布局 label 的 36px 行高);全局实现见 `el-ui.scss` 中 `.el-form--label-top .el-form-item__label`。**例外**:物资/试剂/耗材/质检物料等盘点、库存出入弹窗中的紧凑 **11px** label 可保留局部样式,不强制改为 13px / 4px。
|
||||
- **底栏按钮图标(强约束)**:弹窗 footer 的「取消 / 确定」建议显式使用 `Close / Check` 图标(Element Plus Icons),图标与文字间距 **6px**;避免触发全局按钮自动图标兜底导致的“黑色方块”。
|
||||
- **高密两列优先(节约高度)**:新增/编辑弹窗应尽量让字段在两列内排满(如 `排序|状态`、`预计配送时长|预警提前时间`),减少单字段独占整行;仅在长文本(如备注/描述)或复杂联动控件时使用 `form-col-span-2` 跨整行。
|
||||
- **壳层 padding**:**`.el-dialog` 根节点**不设内边距(`web-admin` 全局 **`--el-dialog-padding-primary: 0`** 与 **`padding: 0`**,避免与 EP 默认 **`var(--el-dialog-padding-primary)`** 叠出双份空白);**标题 / 主体 / 底栏** 仍分别由 **`.el-dialog__header`**、**`.el-dialog__body`**、**`.el-dialog__footer`** 控制,建议与 §9.3 一致:**`16px 22px`**(header,项目里常见为 **`16px 22px 14px`**)、**`18px 22px`**(body)、**`12px 22px`**(footer)。业务页滚动主体 **`.dialog-scroll`** 可另加 **`padding-right: 2px`** 避免滚动条贴内容。
|
||||
@@ -541,7 +541,7 @@
|
||||
### 10.1 字段 `.field`
|
||||
|
||||
- `margin-bottom: 12px`
|
||||
- **label**:`13px`,`500`,`margin-bottom: 6px`
|
||||
- **label**:`13px`,`400`,与控件间距 **4px**(实现上可用 `padding-bottom: 4px` / 等效 `margin-bottom`)
|
||||
- **`.input`** 在 field 内:`width: 100%`
|
||||
|
||||
### 10.2 分节 `.form-section`
|
||||
|
||||
Reference in new issue
Block a user