赵忠林
cf04d48010
- /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 叠加导致文字间距过宽 - 优化操作列按钮过多时自动换行展示逻辑，确保按钮不被裁切
117 lines
11 KiB
Markdown
117 lines
11 KiB
Markdown
# 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` 成功
|
||
|
||
## /business/project-apply 主表操作列收窄
|
||
- 需求：project-apply 主表（avue-crud #menu）操作列太宽，缩小一点。
|
||
- 原：`buildTableOption()` 调用 `applyTableMenuWidth(option, 4)` → 强制 `menuWidth: 320`（four 档），因按钮数≥4。
|
||
- 改动：`src/views/business/project-apply.vue` 中 `buildTableOption()` 改为直接返回对象并显式设 `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 按钮→320），option 文件本身无 menuWidth。
|
||
- 改动：
|
||
1. `business-crud-page.vue` 新增可选 prop `menuWidth`（Number，默认 null）；data() 中生成 `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-crud`，`option` 来自 `@/option/base/common-address.js` 的 `createOption()`，其中已显式设 `menuWidth: 220`。
|
||
- 改动：将 `src/option/base/common-address.js` 的 `menuWidth: 220` → `180`。操作列仅 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-crud`，`option` 来自 `@/option/business/process-config.js`，原先包在 `applyTableMenuWidth({...}, 5)` 中（five 档→强制 `menuWidth: 320`，因菜单有 6 个链接：查看/编辑/复制/启用/停用/删除）。
|
||
- 改动：移除 `applyTableMenuWidth` 包裹与对应 import，option 改为普通对象并显式设 `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-crud`，`option` 来自 `@/option/vehicle/insurance-record.js`；无自定义 `#menu` 槽，行菜单用 Avue 内置（仅显式 `viewBtn: true`，edit/del 默认开启→3 个链接：查看/编辑/删除）。原已显式 `menuWidth: 160`。
|
||
- 改动：将 `menuWidth: 160` → `140`。
|
||
- 说明：低于 AGENTS「>3 按钮≥320」约定，按用户明确要求；链接已全局支持 flex-wrap 换行兜底。
|
||
|
||
## 车/船务管理模块下所有记录页操作列宽度统一为 160
|
||
- 需求：用户截图列出「车/船务管理」下 11 个子菜单，要求操作栏宽度都设为 160。
|
||
- 对应页面/option 文件：
|
||
- 保险记录 insurance-record：option → `src/option/vehicle/insurance-record.js`（由 140 改回 160）
|
||
- 违章记录 violation-record：option → `src/option/vehicle/violation-record.js`（原 160，无需改动）
|
||
- 维修记录 maintenance-record：inline option → `src/views/vehicle/maintenance-record.vue`（原 160，无需改动）
|
||
- 保养记录 maintenance-plan：inline option → `src/views/vehicle/maintenance-plan.vue`（原 160，无需改动）
|
||
- 换胎记录 tire-replacement-record：option → `src/option/vehicle/tire-replacement-record.js`（原 160，无需改动）
|
||
- 事故记录 accident-record：option → `src/option/vehicle/accident-record.js`（原 160，无需改动）
|
||
- 年检记录 annual-inspection-record：option → `src/option/vehicle/annual-inspection-record.js`（原 160，无需改动）
|
||
- 里程记录 mileage-record：option → `src/option/vehicle/mileage-record.js`（原 160，无需改动）
|
||
- 变更记录 transport-change-record：option → `src/option/vehicle/transport-change-record.js`（原 160，无需改动）
|
||
- 油电记录 oil-electric-record：option → `src/option/vehicle/oil-electric-record.js`（原 160，无需改动）
|
||
- ETC记录 etc-record：option → `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: 160` → `180`（9 个 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 与手写操作列），仅作用于操作列链接，不修改普通数据单元格。
|