Files

赵忠林 f03f764472 feat(dispatch): 优化运输计划调度弹窗视觉布局并提升紧凑度

- 弹窗标题和单号合并一行，移除分隔符，提升信息整体感
- 基本信息和收发货路线由左右双列改为上下堆叠，改善视觉层次
- 基本信息网格调整为4列布局，货物信息扩大占2列，附件独占一行
- 计划执行时间范围由‘-’改为‘ ~ ’，更清晰表达时间区间
- 路线节点展示改为横向徽章加下方双列详细信息，避免空白和居中留白
- 调整字体大小、颜色及间距，整体风格更简洁且信息更紧凑
- 移除无用边距和min-height约束，使弹窗整体更加紧凑精简
- 更新代理配置，开发期/api请求代理指向指定内网地址，统一路径无需重写，
  以解决跨域问题并保持与后端网关路径一致
- 进行了完整构建验证，确保修改不会影响现有功能稳定性

2026-08-06 19:53:34 +08:00

2.7 KiB

Raw Blame History

2026-08-06 工作日志

运输计划调度弹窗 UX 分析

完成 /business/transport-plan 调度弹窗的 UX 审查，对比 project-apply 页面风格
输出 6 项改进方案（P0-P5），核心问题为缺少灰底(#f5f6fa)+白卡(section-card)分组设计模式
所有改动集中在 business-crud-page.vue 一个文件
待用户确认后实施第一阶段（P0灰底 + P1白卡分组）

已实施的改进（全部在 business-crud-page.vue）

P0: __dispatch-dialog 的 .el-dialog__body 改为 padding:16px; background:#f5f6fa; overflow-y:auto（原 padding:0）
P1: 调度弹窗三块分区用全局 <section-card> 包裹：基本信息 / 收发货路线 / 待调度列表；"新增"按钮+汇总文字移入列表卡 #extra slot
P2: __dispatch-route-line 由黑色实线改为 #409EFF 虚线 + 箭头（主色方向感）
P3: 待调度列表纳入白卡容器（随 P1 完成）
P4: 调度表操作列 width 180→220 预留扩展
P5: __dispatch-footer 增加 border-top + padding/margin-top 分隔
旧 __dispatch-list / __dispatch-top(border-bottom/32px padding) 样式已清理；section-card 已全局注册，无需 import
验证：SFC 模板单独编译通过（6 处 section-card 引用配对平衡）；完整 vite build 仍因预存 xlsx 幽灵依赖（pnpm 未装）失败，与本次改动无关
注意：本项目完整 build 依赖 xlsx@0.18.5（package.json 有声明但 node_modules 缺失），属环境预存问题，非本次引入

运输计划调度弹窗二次视觉紧凑化

客户反馈：弹窗“空、不紧凑、内容多但不好看”
改动仍集中在 business-crud-page.vue
模板：
- 标题与单号/状态标签合并到同一行，移除 | 分隔符
- 基本信息与收发货路线由左右双列改为上下堆叠的白卡，各自独占一行
- 基本信息网格改为 4 列：客户 / 项目 / 合同编号 / 计划执行时间；货物信息占 2 列；附件独占一行
- 日期展示由 - 改为 ~，更明确是区间
- 路线改为“横向节点 + 下方双列明细”：起点/终点徽章+名称居中，发货地址/收货地址左对齐分两列，避免居中留白
样式：
- 顶部标题字号 22px→18px，顶部 padding 22px→0
- 信息标签字号 14px→12px、颜色 #666→#909399，值行高 1.45→1.4
- 基本信息网格 3 列/48px 列间距/18px 行间距 → 4 列/24px 列间距/12px 行间距
- 路线徽章 46px→32px、字号 16px→13px、圆角 6px→4px
- 路线标题字号 22px→16px，取消居中，最长名称省略
- 路线区域取消 min-height:200px 和居中，改为紧凑堆叠
- 卡片间统一 margin-bottom: 12px
验证：npm run build 成功

2.7 KiB Raw Blame History Unescape Escape

2026-08-06 工作日志

运输计划调度弹窗 UX 分析

已实施的改进（全部在 business-crud-page.vue）

运输计划调度弹窗二次视觉紧凑化

2.7 KiB

Raw Blame History