style(archive-form): 统一和优化弹窗表单风格及间距

- 统一财务/信用信息分组备注字段宽度及对齐,修正跨列占位
- 调整评分量化表弹窗左右边距,移除多余内边距复用全局样式
- 将评分量化表相关编辑弹窗改用 section-card 白卡分组并应用 archive-form 风格
- 给业务编辑弹窗添加 archive-form 样式,统一 label 固定宽度和控件宽度至 250px
- 新增 common-route 编辑弹窗自定义类,实现输入框宽度和标签对齐
- 全局修改弹窗灰底区间距为 8px,放宽表单项上下间距至 20px,提升视觉一致性
- 优化 Avue 弹窗底部按钮区样式,实现按钮内嵌于白卡底部
- 移除主弹窗标题左侧竖条,全站统一弹窗标题风格,遵循用户需求
- 修复弹窗表单 label 换行稳定性,保证长文本正确展示
- 调整 customer-archive 备注字段布局,保证输入框对齐美观
- 各手写编辑弹窗附加 archive-form,保证样式一致不破坏功能
This commit is contained in:
2026-08-11 18:43:57 +08:00
parent e8e6bc01b0
commit 040456f4d2
11 changed files with 179 additions and 75 deletions
+35
View File
@@ -9,6 +9,13 @@
- 联系信息分组 `el-col :span="8"`3列)→ `:span="6"`4列),与工商/财务分组对齐。
- `<style scoped>``.archive-form` 新增 label 规则:固定 `width:96px` + `padding-right:12px` + `white-space:normal` + `text-align:right` + `overflow:visible`,使长 label(如"统一社会信用代码")自动折行。
## 财务/信用信息分组备注字段补空白
- 客户需求:截图红框处(第三/四列空白)需有输入组件对齐。
- 改动(`src/views/vehicle/customer-archive.vue`):
- “申请总资金使用额度(万元)” 缩进修正(保持 `span=6`)。
- 第一次:“备注” 改为 `span=18`,占满第二行剩余三列,但右侧溢出。
- 第二次:第一列留空、`申请总资金使用额度` 居第二列、`备注` 跨第三、四列(`span=12`),总宽度 24 刚好一行。
注意:`.score-detail-form` 已有独立 `.el-form-item__label` 规则,与本次改动无关,未触碰。
## .archive-form label 换行稳定性加固
@@ -111,3 +118,31 @@ Element Plus 把 label 锁死成 32px 高 + 32px 行高,**只够放一行**。
```
- 后续用户要求「应用到全部的弹窗」,改为全局移除:编辑 `src/styles/element-ui.scss`,把竖条共享规则 `.el-dialog__title:not(:empty)::before, .dialog-section-title::before` 拆开,仅保留 `.dialog-section-title::before`(分组标题仍带竖条),`.el-dialog__title` 不再有竖条。同时删除了 `customer-archive.vue` 末尾的特例 `<style>` 块。
- 注意:这与 AGENTS.md 4.8「新增/编辑弹窗标题左侧必须展示 4px 主色竖条」规范冲突,按用户决策已全局移除弹窗主标题竖条;如需恢复,把 `.el-dialog__title` 加回共享规则即可。
## 评分量化表弹窗边距与客商管理对齐
用户截图标注:新增/编辑评分量化表弹窗左右边距比客商管理编辑弹窗宽,要求统一。
- **根因**`.score-config` 容器多设了 `padding: 4px 12px 12px`,叠加全局 `el-dialog__body { padding: 16px }` 导致总左右边距 28px(客商仅 16px)。
- **修复**:移除 `.score-config` 的 `padding` 属性(`src/views/vehicle/credit-score-quantification.vue`),弹窗内容区复用全局统一的 16px 边距。
## 编辑弹窗风格统一(按 customer-archive 定稿对齐)
用户要求把 `customer-archive.vue` 定稿的 `.archive-form` 风格(label 固定宽 `calc(6em+24px)` 折行 + 控件 250px + section-card 分组白卡 + 弹窗灰底)复制到其它手写编辑弹窗。已处理:
1. **credit-score-quantification.vue**(最掉队):4 个弹窗(评分量化表主配置 / 类目详情 / 评分项目详情 / 评估标准设置)原来用手写 `.section-title` 分区、未用 section-card、无 tabs。已重构为 4 张 `<section-card>` 分组白卡(标题带 4px 主色竖条),configBox 主表单 + standardBox 评估标准表单应用 `.archive-form`(本文件 scoped 内新增该样式,从 customer-archive 复制),按钮保持 plain 描边;删除了废弃的 `.base-form` / `.section-head` / `.section-title` / `.standard-head` 手写标题样式;`.score-config` 去掉多余 padding 复用全局 16px 边距。
2. **driver.vue / vehicle.vue / ship.vue**:三个档案弹窗已用 section-card + el-col 多列布局。仅给 `driver-form` / `vehicle-form` / `ship-form` 追加 `archive-form` class(原 form 的 `:deep(.el-input){width:100%}` 特异性低于 archive-form 的 `:deep(.el-form-item__content > .el-input){width:250px}`,被安全覆盖;label 带 `!important`)。弹窗内无子表格"添加"按钮,footer 保存已是 primary 实心(符合规范)。
3. **loading-manage.vue**:配载单编辑弹窗 `loading-manage-dialog__form` 追加 `archive-form`(该 class 无独立 style,不冲突)。
4. **waybill-import-dialog.vue**:新建导入弹窗 `el-form` 追加 `archive-form`。
5. **common-route.vue**:三个弹窗均为查询/导入/地图选择类(无信息编辑表单),且按钮风格(主按钮 primary 实心、辅助 plain)已符合规范,**未做结构改动**。
6. **business-crud-page.vue**:已在 scoped style 开头用组合选择器一次性注入 `.archive-form` 同款样式(label 固定宽折行 + 控件 250px),覆盖其 6 个主表单 class:`__task-form` / `__freight-form` / `__module-form` / `__dispatch-item-form` / `__match-form` / `__transport-plan-import-form``__billing-form-row` 仅是 div 行容器,非表单,未包含)。这是核心通用组件,影响所有引用它的业务编辑弹窗,已按"全按对齐"指令执行;纯样式增强、不破坏功能,建议刷新各业务页回归验证。
注意:`.archive-form` 的关键样式(label 固定宽折行 + 控件 250px)是 scoped 的,复制到新文件时必须在该文件 scoped 内重新定义,不能只挂 class(除非全局化)。
## 弹窗灰底间距全站统一 + 表单间距放宽 + common-route 输入框对齐
全局 `src/styles/element-ui.scss` 连续改动(针对截图反馈"新增弹窗太挤"):
1. **灰底间距全站 8px**`.el-dialog__body { padding: 8px !important }`(加 `!important` 覆盖 Avue 内部默认 padding,影响**所有**弹窗含 Avue CRUD 与手写 el-dialog)。
2. **按钮放进白卡**`.avue-crud__dialog .avue-dialog__footer` 加 `border-radius: 0 0 6px 6px` + 同白卡 `box-shadow` + `padding: 16px 24px` + `margin-top:0`,与上方 `.avue-form` 白卡视觉合一(取消/保存等按钮现在在卡片底部内侧)。`.avue-form` 同步加 `margin-bottom:0`。
3. **表单间距放宽对齐 customer-archive**`.avue-form` 白卡内边距 `16px → 24px``.el-dialog .el-form-item` 上下间距 `16px → 20px`(含全 size 覆盖规则);分组标题/内容内边距 `14px 16px → 16px 24px`。
4. **common-route 输入框宽度对齐 customer-archive**
- `src/option/business/common-route.js``export const option = createCrudOption([...])` 改为 `{ ...createCrudOption([...]), dialogCustomClass: 'avue-dialog--common-route' }`,给 Avue 自动编辑弹窗挂自定义 class(Avue 支持 `dialogCustomClass`,渲染在 `.avue-dialog` 根元素)。
- `src/styles/element-ui.scss` 新增 `.avue-dialog--common-route` 规则:label `width: calc(6em+24px) !important` 折行 + 控件 `.el-input/.el-select/.el-cascader/.el-input-number/.el-date-editor` 固定 `width: 250px`。textarea(备注)不设固定宽,保持 100% 撑满(与 customer-archive 一致)。地址 formslot`.common-route-page__route-address` flex 布局)因中间多了一层 div,不被 `.el-form-item__content > .el-input` 命中,保持原样。
注意:common-route 编辑弹窗字段是 span 12(两列),250px 输入框在两列下右侧会留白——这是用户"和 customer-archive 对齐"的明确要求,如需紧凑可改列布局或加大输入框宽。