Files
tms-erp-web/.workbuddy/memory/2026-08-06.md
赵忠林 cf04d48010 feat(table): 调整表格操作列宽度并统一文字链接间距
- /business/project-apply 主表操作列宽度固定为 220,移除 applyTableMenuWidth 调用
- /business/temporary-credit-limit 通过传入 menuWidth prop 固定操作列宽度为 180
- /base/common-address 操作列宽度由 220 降至 180
- /business/process-config 操作列宽度由 320 调整为 180,修复末尾语法错误
- /vehicle/insurance-record 操作列宽度先降至 140 后改回 160,后全部车/船务管理模块记录页统一为 180
- 多个车/船务管理模块相关 option 文件及 vue 文件操作列宽统调为 180
- 新增 business-crud-page 组件 menuWidth prop,支持外部传值控制操作列宽度
- 全站操作列文字链接去除 el-link 默认 margin,避免和 gap 叠加导致文字间距过宽
- 优化操作列按钮过多时自动换行展示逻辑,确保按钮不被裁切
2026-08-06 23:55:30 +08:00

11 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.5package.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 成功

/business/project-apply 主表操作列收窄

  • 需求project-apply 主表avue-crud #menu操作列太宽缩小一点。
  • 原:buildTableOption() 调用 applyTableMenuWidth(option, 4) → 强制 menuWidth: 320four 档因按钮数≥4。
  • 改动:src/views/business/project-apply.vuebuildTableOption() 改为直接返回对象并显式设 menuWidth: 220,移除 applyTableMenuWidth 调用及对应 import仅本文件使用
  • 说明220 低于 AGENTS.md「>3 按钮≥320px」约定但属用户明确要求操作列链接已全局支持 flex-wrap按钮多时会自动换行不会裁切。
  • 影响范围:仅 project-apply 主表;子表(附件/变更/用户权限)操作列 width 维持 110/100/100 不变;全局 TABLE_MENU_WIDTH 未改。

/business/temporary-credit-limit 操作列宽度固定为 180

  • 需求:该页操作列宽度也给 180。
  • 背景:该页用共享组件 business-crud-page.vue,其 option 在 data() 中由 cloneOption(crudOption, estimateMenuButtonCount(config)) 生成菜单宽度按按钮数估算≥4 按钮→320option 文件本身无 menuWidth。
  • 改动:
    1. business-crud-page.vue 新增可选 prop menuWidthNumber默认 nulldata() 中生成 option 时若 menuWidth != null 则强制覆盖 opt.menuWidth。默认 null 不影响其他页面。
    2. temporary-credit-limit.vue 调用处加 :menu-width="180"
  • 复用提示:后续任何使用 business-crud-page 的页面想固定操作列宽度,直接传 :menu-width="N" 即可,无需再改 option 或组件逻辑。
  • 注意180 同样低于 AGENTS「>3 按钮≥320」约定按用户明确要求链接支持换行兜底。

/base/common-address 操作列宽度 220 → 180

  • 需求:「这个也调一下宽度」。上一条刚把 temporary-credit-limit 设为 180用户用「也」字故对齐为 180。
  • 机制:该页是独立 avue-crudoption 来自 @/option/base/common-address.jscreateOption(),其中已显式设 menuWidth: 220
  • 改动:将 src/option/base/common-address.jsmenuWidth: 220180。操作列仅 3 个链接(查看/编辑/删除)。
  • 说明:低于 AGENTS「>3 按钮≥320」约定按用户明确要求链接支持换行兜底。

操作列宽度的三种设置入口(备忘)

  • 独立 avue-crud + 自管 option直接改 option 文件的 menuWidth(如 common-address
  • 独立 avue-crud + buildTableOption 调 applyTableMenuWidth(option, N)helper 会按按钮数强制下限≥4→320要更窄需绕过 helper 直接设 menuWidth(如 project-apply 改 220
  • 共用 business-crud-page 组件:新增可选 prop menuWidth(默认 null 不动既有逻辑),调用处传 :menu-width="N"(如 temporary-credit-limit 传 180

/business/process-config 操作列宽度 320 → 180

  • 需求:「这个也调一下宽度」。延续上几条把操作列设 180 的系列要求。
  • 机制:该页是独立 avue-crudoption 来自 @/option/business/process-config.js,原先包在 applyTableMenuWidth({...}, 5)five 档→强制 menuWidth: 320,因菜单有 6 个链接:查看/编辑/复制/启用/停用/删除)。
  • 改动:移除 applyTableMenuWidth 包裹与对应 importoption 改为普通对象并显式设 menuWidth: 180
  • 说明180 明显低于 AGENTS「>3 按钮≥320」约定按用户明确要求链接已全局支持 flex-wrap 换行兜底6 个按钮会多行展示、不裁切。

修复 process-config.js 末尾语法错误(红色警)

  • 现象:用户反馈 src/option/business/process-config.js 最后一行有红色警。
  • 根因:上一轮把 applyTableMenuWidth({...}, 5) 去掉外层函数包裹时,结尾 }, 5); 被改成 });,多留了一个 )(因 export const option = { 本身没有左括号),导致括号不匹配。
  • 改动:末尾 });};。移除 applyTableMenuWidth import 时无误。
  • 验证node 动态 import 不再报 SyntaxError仅剩 node 无法解析 extensionless ./common 的模块解析提示,与语法无关),说明语法已恢复。

/vehicle/insurance-record 操作列宽度 160 → 140紧凑

  • 需求:「这个也调一下宽度,紧凑一点」。本页与上几条不同,用户明确要求更紧凑(其他页给的 180 比这页还宽)。
  • 机制:独立 avue-crudoption 来自 @/option/vehicle/insurance-record.js;无自定义 #menu 槽,行菜单用 Avue 内置(仅显式 viewBtn: trueedit/del 默认开启→3 个链接:查看/编辑/删除)。原已显式 menuWidth: 160
  • 改动:将 menuWidth: 160140
  • 说明:低于 AGENTS「>3 按钮≥320」约定按用户明确要求链接已全局支持 flex-wrap 换行兜底。

车/船务管理模块下所有记录页操作列宽度统一为 160

  • 需求:用户截图列出「车/船务管理」下 11 个子菜单,要求操作栏宽度都设为 160。
  • 对应页面/option 文件:
    • 保险记录 insurance-recordoption → src/option/vehicle/insurance-record.js(由 140 改回 160
    • 违章记录 violation-recordoption → src/option/vehicle/violation-record.js(原 160无需改动
    • 维修记录 maintenance-recordinline option → src/views/vehicle/maintenance-record.vue(原 160无需改动
    • 保养记录 maintenance-planinline option → src/views/vehicle/maintenance-plan.vue(原 160无需改动
    • 换胎记录 tire-replacement-recordoption → src/option/vehicle/tire-replacement-record.js(原 160无需改动
    • 事故记录 accident-recordoption → src/option/vehicle/accident-record.js(原 160无需改动
    • 年检记录 annual-inspection-recordoption → src/option/vehicle/annual-inspection-record.js(原 160无需改动
    • 里程记录 mileage-recordoption → src/option/vehicle/mileage-record.js(原 160无需改动
    • 变更记录 transport-change-recordoption → src/option/vehicle/transport-change-record.js(原 160无需改动
    • 油电记录 oil-electric-recordoption → src/option/vehicle/oil-electric-record.js(原 160无需改动
    • ETC记录 etc-recordoption → src/option/vehicle/etc-record.js(原 160无需改动
  • 实际改动:仅 insurance-record.js 从 140 恢复到 160其余 10 个已经是 160。
  • 注意:src/option/vehicle/other-expense-record.js 不在截图菜单内,保持不动。

车/船务管理模块操作列宽度 160 → 180用户反馈 160 偏小)

  • 需求:上一轮统一 160 后,用户觉得还是小,全部改成 180。
  • 改动11 个文件 menuWidth: 1601809 个 option 文件 + maintenance-record.vue / maintenance-plan.vue 两处 inline option
  • 现状:车/船务管理模块全部 11 个记录页操作列均为 180。

操作列文字链接间距过宽问题

  • 现象:用户截图反馈操作列文字链接之间间距太宽,要求统一风格。
  • 根因:全局已设 .avue-crud .avue-crud__menu { gap: 8px; } 与手写表格操作列 gap: 8px,但 Avue 默认 .el-link.cell 上可能存在 margin-right,与 gap 叠加后显得过宽。
  • 改动:src/styles/element-ui.scss 新增规则,对 .avue-crud .avue-crud__menu .el-link 和手写表格操作列 .el-link 强制 margin: 0,使间距完全由 8px gap 控制,不再叠加。
  • 影响范围全站表格操作列Avue #menu 与手写操作列),仅作用于操作列链接,不修改普通数据单元格。