Files

赵忠林 1862115e1d feat(business-crud-page): 优化运输计划调度弹窗UI与交互体验

- 使用全局<section-card>组件重构调度弹窗三块分区，提升视觉一致性
- 将弹窗灰底设置为#f5f6fa，调整padding及溢出滚动，增强弹窗内容可读性
- 收发货路线样式由黑实线改为主色号虚线并添加箭头，增强方向感
- 待调度列表纳入白卡容器，新增按钮及汇总文字移入列表卡extra slot
- 操作列宽度由180调整至220，预留扩展空间
- 增加分隔线和间距分割调度表底部区域，优化布局层次

2026-08-06 17:39:04 +08:00

1.5 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 缺失），属环境预存问题，非本次引入

1.5 KiB Raw Blame History Unescape Escape

2026-08-06 工作日志

运输计划调度弹窗 UX 分析

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

1.5 KiB

Raw Blame History