b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
454608d7bebca567ed4cc890709d0ebb09bfec97
tms-erp-web/.workbuddy/memory/2026-08-06.md
赵忠林 454608d7be feat(dispatch): 优化运输计划调度弹窗视觉布局并提升紧凑度 
- 弹窗标题和单号合并一行，移除分隔符，提升信息整体感
- 基本信息和收发货路线由左右双列改为上下堆叠，改善视觉层次
- 基本信息网格调整为4列布局，货物信息扩大占2列，附件独占一行
- 计划执行时间范围由‘-’改为‘ ~ ’，更清晰表达时间区间
- 路线节点展示改为横向徽章加下方双列详细信息，避免空白和居中留白
- 调整字体大小、颜色及间距，整体风格更简洁且信息更紧凑
- 移除无用边距和min-height约束，使弹窗整体更加紧凑精简
- 更新代理配置，开发期/api请求代理指向指定内网地址，统一路径无需重写，
  以解决跨域问题并保持与后端网关路径一致
- 进行了完整构建验证，确保修改不会影响现有功能稳定性
2026-08-06 23:10:06 +08:00

3.5 KiB
Raw Blame History

2026-08-06 工作日志

全站表格操作列文字链接统一为蓝色

  • 需求：客户档案页（/vehicle/customer-archive）操作列颜色统一蓝色，且全站统一风格。
  • 实现：在 src/styles/element-ui.scss 新增全局规则，覆盖 Avue #menu 槽位（.avue-crud__menu .el-link）与手写表格操作列（.el-table .el-table__body .cell:has(.el-link) .el-link）中所有 el-link 的 --el-link-text-color / hover / active / disabled 变量为主色 #409eff 及其浅/深色，从而把 warning/success/danger 等类型强制转蓝。
  • 单点生效，无需逐页改 type。dev server(2888) 已运行会热更新。
  • 注意：选择器以「表格体内含 el-link 的单元格」为目标，本仓库表格内 el-link 仅用于操作列，无副作用；若未来某数据单元格用 el-link 作强调色需另行排除。

运输计划调度弹窗 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 成功