赵忠林
53676a1150
- 使用<section-card>替换旧版灰底分组块与内层白卡，统一表单分组样式 - 删除冗余的基本信息大标题，减少嵌套层级 - 将客商材料和变更记录区域改用<section-card>，操作按钮通过插槽放置卡头右侧 - 清理无效的scoped样式，简化样式管理 - 统一弹窗内部灰底背景并增加16px内边距，与project-apply保持一致 - 确认vue文件与sass编译无误，保证改动稳定性
26 lines
3.8 KiB
Markdown
26 lines
3.8 KiB
Markdown
# 2026-08-06
|
||
|
||
## 复盘 src/views/business/project-apply.vue 弹窗 UI 规范
|
||
- 主弹窗为**自定义 el-dialog + el-form**（非 Avue option 驱动），width 1440px、top 4vh、append-to-body、destroy-on-close。
|
||
- 分区标题复用全局 `.dialog-section-title`（4px 主色竖条 + 8px 间距）；页面将其改造为「白卡头 + 下方白内容卡」拼合方案（radius 6px + 淡阴影 0 1px 2px rgba(0,0,0,.04)）。
|
||
- 表单：label-position="right" / label-width="auto"；两列 grid（`column-gap: 72px`）；表单项 margin-bottom 16px；label min-width 160px。
|
||
- 备注类 textarea 整行展示 + 200 字上限 + show-word-limit；金额/天数有非负与范围校验。
|
||
- 底部按钮：非变更弹窗=取消/提交（右对齐）；变更弹窗=提交/保存/关闭（左对齐）。
|
||
- **与设计规范(AGENTS.md)对照**：基本符合 4.8 弹窗表单规范；但本页 scoped 用 `white-space: normal` 覆盖了全局 `.el-dialog .el-form-item__label { white-space: nowrap }`，允许长标签换行（与全局「label 不换行」取向不同）；两列 grid 统一 min-width 160px，未严格「按列分别计算 label 宽度」。
|
||
|
||
## 将 project-apply 弹窗标准推广为「全项目通用标准」
|
||
用户要求把 project-apply 弹窗视觉（灰底 + 分组白卡 + 标题在卡内）复制到其他页面。落地方式（已执行）：
|
||
- 新增可复用组件 `src/components/section-card/main.vue`：白卡 + 标题在卡头（4px 主色竖条 + 8px 间距），支持 `title` prop 与 `#title`/`#extra` slot；已在 `src/main.js` 全局注册为 `<section-card>`。
|
||
- 在 `src/styles/element-ui.scss` 末尾新增全局标准：① `.el-dialog__body` 统一灰底 `#f5f6fa`（影响全项目所有弹窗）；② `.el-dialog .avue-form` 自动包白卡（Avue 默认增删改弹窗无需改 option 即统一）；③ `.el-dialog .avue-form__group` 分组白卡（option.group 渲染为标题在卡内）；④ 弹窗内 `.el-form-item` 默认 16px 间距；⑤ `.section-card` 全局样式；⑥ `.form-grid-2` 两列栅格工具类（column-gap 72px）。
|
||
- 应用落地：business 模块自定义弹窗——`common-route.vue` 的「选择常用地址」弹窗用 section-card 包成「查询条件/常用地址」两组；`loading-manage.vue` 主弹窗 6 个分区全部改用 `<section-card>`；`common-cargo.vue` 导入弹窗经全局 `.el-dialog .avue-form` 规则自动获得白卡。`project-apply.vue` 本身作为参照未改（其 scoped 样式已符合，全局灰底与其一致）。
|
||
- 验证：`vite build` 失败为仓库既有问题（`waybill-import-dialog.vue` 引入的 `xlsx` 依赖缺失），与本次改动无关；改用 `@vue/compiler-sfc` 编译三个改动 .vue（均 OK）+ sass 编译 `element-ui.scss`（OK）。
|
||
- 注意：其他模块的**自定义弹窗**需按同样方式用 `<section-card>` 包裹各组（灰底已由全局规则自动生效）；如需继续推进其余模块可照此模式批量处理。
|
||
|
||
## 继续推广：vehicle/customer-archive.vue 弹窗
|
||
- 用户反馈 `/vehicle/customer-archive` 新增客商档案弹窗需与 `/business/project-apply` 一致。
|
||
- 已将该页主弹窗内的表单分组由旧版「灰底分组块 + 内层白卡 + 标题在卡内」全部替换为 `<section-card>`：
|
||
- 工商信息 / 联系信息 / 财务/信用信息 / 其他信息 四个分组改为 section-card；删除外层浮于灰底的「基本信息」大标题（分组已足够清晰，避免嵌套）。
|
||
- 客商材料、变更记录两个非表单分区也改用 `<section-card>`，其中客商材料的操作按钮通过 `#extra` 插槽放在卡头右侧。
|
||
- 清理了失效的 `.archive-form__group`、`.customer-material-section`、`.change-record-section`、`.section-title` 等 scoped 样式。
|
||
- 验证：`@vue/compiler-sfc` 编译 `customer-archive.vue` OK；sass 编译 `element-ui.scss` OK；section-card 标签开合平衡。
|