refactor(payment): 统一搜索栏“展开/收起”按钮实现

- 取消 el-tooltip 包裹，改用纯 el-button 实现带图标的展开收起按钮
- 按 avue-crud 规范控制按钮显示，新增 searchIndex （默认 4）和 searchItemCount 控制逻辑
- 搜索项数量未超出 searchIndex 时隐藏展开收起按钮
- 相关组件支付模块多处应用此统一方案（bill-ledger-search、bill-payment-search、invoice-application、invoice-receipt、receipt-claim-record、receipt-flow）
- 维护展开状态对应的箭头图标和文案为“收起”与“展开”

refactor(business): 优化路线变更内容渲染与样式

- 替换旧的 formatRouteChangeContent 为更详细的 parseRouteChangeContent，支持多分组与字段显示
- 路线变更内容支持多层次分组、字段标签、改变前后值对比及未变更标识展示
- 取消全局列溢出提示以避免多行内容被截断，针对路线变更内容列显式禁用溢出提示并设置白色换行样式
- 在 business-crud-page、waybill-manage-page、loading-manage 相关页面和组件中统一应用该解析与渲染方案

refactor(option): 调整 measurement-unit 配置以提升表格列展示

- 移除 menuWidth 配置，采用 menuFixed 固定右侧模式
- 为创建人和更新人列添加 minWidth 110，时间列添加 width 180，避免内容被截断
- 表格列数组顺序调整，确保搜索与展示保持一致

refactor(payment & receipt-flow): 统一支付及回执模块工具栏和表格行为

- 按照统一规范和用户反馈，调整多处页面的搜索栏操作区和表格列配置
- 引入 TableHeaderTools 组件和相关状态传递，实现搜索显隐与表格尺寸切换统一
- 优化 avue-crud 表格组件的交互一致性和视觉表现

refactor(utils): 重构路线变更内容解析函数

- 新增 parseRouteChangeContent 以支持复杂路线变更文本的解析与分组
- 识别运单号、字段标签、变更前后值，支持多种箭头符号及调整描述
- 用法推广至相关业务页面，支持更加直观的路线变更展示界面

.workbuddy/memory/2026-10-14.md

@@ -0,0 +1,126 @@
+# 2026-10-14
+
+## 运单管理：草稿行「查看」改为与其它状态一致的「详情」
+- 现象：`/business/waybill-manage` 列表操作列，草稿行显示「查看」→ 走 avue 自带 `$refs.crud.rowView()` 表单弹窗；其它状态显示「详情」→ `openDetail()` 跳独立详情页 `/business/waybill-manage/detail?id=x`（新标签「运单管理详情」）。同一列两种弹窗形态。
+- 根因：`waybill-manage-page.vue` 的 `showDetailButton(row)` 显式 `return status !== 'draft'`，把草稿排除在详情按钮外，于是落到 `#menu` 里 `!showDetailButton(row)` 的「查看」分支。
+- 修法：`showDetailButton()` 去掉草稿判断，仅保留 `config.detailButton` + `_view` 权限判断；「查看」分支保留，仅在 `detailButton:false` 时兜底。
+- 备注：`business-crud-page.vue:7043`、`transport-plan-page.vue:4111` 有同款 `status !== 'draft'` 逻辑（运输计划另有 `showViewButton`）；两个 option 文件里的 `detailButtonIgnoreDraftStatus` 目前是死配置，组件未读取。
+
+## 收付款管理模块：列表页右上角统一为 4 键工具组（最终方案 = 改 avue-crud）
+- 现象：付款管理页右上角只有 1 个刷新按钮，与其它模块不一致；参考模块的 4 键工具组其实是 **avue-crud 内置头部**，不是可引用的公共组件。
+- 方案演进：
+  1. 过渡方案（已落地 7 页）：手写页引入标准件 `src/components/table-header-tools/main.vue`，改法为搜索区 `v-if="searchVisible"`、el-table 加 `:size="tableSize"`、列 `v-for="column in visibleColumns"`、data 加 `searchVisible/tableSize/visibleColumnKeys`；汇票两页表格在子组件，子组件透传 `update:searchVisible` + `refresh`。已接入 `invoice-application.vue`、`invoice-receipt.vue`、`receipt-flow.vue`、`receipt-claim-record.vue`、`bill-ledger.vue`+`bill-ledger-table.vue`、`bill-payment.vue`+`bill-payment-table.vue`。
+     但用户实测反馈：第 2 键（列设置）与第 4 键（表格尺寸）效果仍与参考模块不同 —— 参考模块第 2 键是 `el-drawer` 列设置抽屉（列名/隐藏/冻结/过滤/排序），第 4 键是「表格 ↔ 卡片」视图切换，两者都嵌在 avue 内部，**无法脱离 avue-crud 复用**。
+  2. 最终方案（用户选定，先做样板）：列表页改写成 `<avue-crud>`，4 键 = 刷新 / 列显隐抽屉 / 搜索显隐 / 网格切换，与其它模块 100% 一致。
+- 样板：`src/views/payment/payment-application.vue` + `src/option/payment/paymentApplication.js`（`paymentApplicationOption()` 工厂）。
+  - 搜索项与表格列 label 不一致的（表格列「收款方」vs 搜索项「客户名称」）用 `searchProp` 映射；属搜索专用列用 `searchOnlyColumn()` 统一生成（`hide + showColumn:false + add/edit/viewDisplay:false`）。
+  - ⚠️ **avue 的 searchOrder 是降序**（`header-search2.js`：`(b.searchOrder||0)-(a.searchOrder||0)`），值越大越靠前 —— 首次做反了，9 个搜索项 score 全部反转。
+  - ⚠️ **column 数组顺序即表格列顺序**，搜索项夹在中间会把该列挤到表格前面（`deptName` 踩过），搜索专用列必须紧跟在同位置或用 `hide` 隔离。
+  - `on-load` 在 created / currentChange / sizeChange 都会触发（`table-page2.js`），因此 `currentChange`/`sizeChange` 只改 page、**不要再调 onLoad**；`onLoad(page)` 也不能把 page 里的 total/pageSizes spread 进查询参数。
+- 顺带加固：`table-header-tools` 加 `deactivated()` 关闭列设置弹窗（keep-alive 切页防 Teleport 弹窗残留）；清理 invoice-application / invoice-receipt 里失效的 `__toolbar-right` 样式规则。
+- 验证：项目根建临时 html 挂真组件 + `app.use(Avue)`，`agent-browser` 实测 —— 4 个按钮均渲染图标、刷新触发、搜索区切换、表格尺寸 default→large、列设置弹窗勾选双向生效；avue-crud 样板另测：4 键数量=4、默认 4 项搜索 + 展开 9 项、18 列表格顺序与原页一致、列显隐抽屉表头 5 列 18 行、网格按钮切出卡片视图；临时文件用完即删。
+- 踩坑：`el-icon-*` 字符串图标靠 Avue 的全局映射，验证页不装 Avue 时 4 个按钮是空圆（差点误判）。
+- 待办：用户确认样板效果后，把其余 6 页（invoice-application / invoice-receipt / receipt-flow / receipt-claim-record / bill-ledger / bill-payment）也改成 avue-crud，并回退其 table-header-tools 改动。
+
+## 正式结算单表单：结算明细区按钮/筛选行对齐预结算单
+- 现象：`formal-settlement-editor.vue` 的「结算明细」区把 导出/选择结算明细 塞在筛选表单的 actions 里（`grid-column:1/-1` 换行右对齐，出现两个蓝实心），与 `pre-settlement-editor.vue` 不一致（后者把这两个按钮放 `<section-card #extra>`，筛选项与查询/重置同行）。
+- 改法（只动 formal 一个文件，72+/17-）：
+  1. 模板 `section-card#extra` 加 导出（`v-if="hasPermission('formal_settlement_export')" type=primary plain`）+ 选择结算明细（`v-if="editable" type=primary plain`），与「收起明细」并列；actions 里只留 查询/重置。
+  2. el-form 去掉 `inline`、`label-width` 88px→auto，4 个输入补 `placeholder="请输入"`。
+  3. 样式 `grid-template-columns: repeat(4, minmax(0,1fr)) auto` + `align-items:center`；actions 去掉 `grid-column:1/-1` 改 `width:auto;margin-left:0;white-space:nowrap;justify-self:end`；媒体查询 ≤1200px 同步补 `auto` 列。
+  4. 补 `hasPermission`：`...mapGetters(['permission','userInfo'])` + `isAdmin`（`isAdministrator` from `@/utils/auth`）+ methods `hasPermission(code){ return this.isAdmin || this.validData(this.permission?.[code], false) }`（`validData` 是项目全局属性，main.js 未显式挂载但全站通用）。
+- ⚠️ 关键坑：文件末尾 `.formal-editor :deep(.el-form-item){margin-bottom:24px}` 与筛选区 `:deep(.el-form-item){margin-bottom:0}` **特异性相同**，靠源序决定胜负 → 覆盖规则必须写在文件尾部（`@media` 之前）。pre 用的也是同索引结构。
+- 验证：`agent-browser` + mock 注入实测 —— grid 列 `188.25×4 + 132`、5 个 form-item 同一行 top 相同、form-item margin-bottom=0；正式单与预结算单**同视口截图逐像素一致**。
+
+## 「变更运输路线」弹窗 · 变更记录列表：变更前/后地址分行展示
+- 需求：变更内容原为单行 `YD-xxx：发货地 A → B；到货地 C → D`（多条以 `；` 拼接），地址太长挤成一坨，要求「变更前地址 / 变更后地址」换行。
+- 落地：新增 `src/utils/route-change.js` 导出 `formatRouteChangeContent(content, emptyText='-')` —— 仅**展示层**格式化（不动 taskInfoJson 里已存的 content，历史数据同样生效）：`\r\n` 归一 → `；` 转 `\n` → `→` 转 ` →\n`（箭头留上一行行尾）→ 压缩空行；空值返回 `-`。
+- 接入 3 处同一弹窗（都在 methods 里以 ES6 简写挂载 `formatRouteChangeContent`，与 `formatContractOptionLabel` 同款）：
+  - `views/business/loading-manage.vue`（表格列 `record-content`）
+  - `views/business/components/waybill-manage-page.vue`
+  - `views/business/components/business-crud-page.vue`
+- ⚠️ 关键坑：`white-space: pre-wrap` 下模板里插值前后的**换行+缩进空白会被渲染出来**（内容前面凭空多一行缩进）。所以要么把 `>{{ ... }}</div>` 写成紧贴一行（loading-manage），要么改用 `v-text="formatRouteChangeContent(row.content)"` 多行写法（另两处）——文本节点不存在才安全。CSS 里 `white-space:normal` 需改 `pre-wrap`（loading-manage 原为 normal），另两处补 `overflow-wrap:anywhere; word-break:break-word; line-height:22px`。
+- 效果：`YD-20260904-0022：发货地 广西…公司 →` / 换行 / `广东省…西瓜洲` / `到货地 山东…公司 →` / `山东省…公司`。
+- 验证：node 直跑函数（多条 / 单条 / 路线顺序 / 空值）输出正确；dev `localhost:2889` 三个 .vue 与 scoped style 块均 200，编译产物各含 3 处 `formatRouteChangeContent`。
+- 未做（如需再说）：存储格式与导出 Excel 仍是单行文本；`vehicle/transport-change-record.vue` 的 `changeContent` 是人工填写的自由文本，未改。
+
+
+## 发货模板"选择常用地址"改图标（对齐运输计划）
+- 需求：`/business/shipping-template/form` 收发货信息行，把文字「选择」按钮改成运输计划同款图标方式。
+- 改动（`src/views/business/components/shipping-template-page.vue`）：
+  1. `import { Location, OfficeBuilding } from '@element-plus/icons-vue'`，并把 `OfficeBuilding` 加进 `data()`；
+  2. departure/arrival 两个 form 插槽里，把 `<el-tooltip><el-button ...>选择</el-button></el-tooltip>` 从行尾移到第二个地址输入框之后，改成 `:icon="OfficeBuilding"` + `link` 图标按钮（class `shipping-template-page__address-pick-btn`）；
+  3. suffix 的 `<el-icon>` 补 class `shipping-template-page__map-suffix`（cursor/18px/#909399/hover #409eff），与运输计划同名同款；
+  4. `.shipping-template-page__route-row` grid 第 3 列插入 `40px` 图标列（原末尾的 `auto`），并把 `__address-pick-btn .el-icon { font-size: 22px }` 写进该行容器内。
+- 关键坑（差点误判成 bug）：Element Plus 图标两种用法机制不同 ——
+  - 标签形式 `<Location />` 靠 `main.js` 里 `app.component(key, ...)` **全局注册**解析，与 `data()` 无关；
+  - 表达式形式 `:icon="OfficeBuilding"` 编译成 `_ctx.OfficeBuilding`，**必须把组件对象放进 data()**（放 `components` 注册里模板取不到，会静默渲染不出图标）。
+  验证页漏了全局注册，曾误判 `<Location />` 不渲染。
+- 验证：临时验证页（项目根 html + 真 .vue，走 Vite + 真 element-plus + 全局图标注册）实测：地址框内 Location 18px、按钮 40px 内 svg 22px 居中、7 列 184/368/40/48/184/64/184 铺满 1120px；截图视觉与运输计划一致。用完已删临时文件。
+- dev 自检：`shipping-template-page.vue` 与 scoped style 均 200。
+
+## 多联总单：调度页顶部路线节点 / 详情页路线图 —— 省市区按「市 区县」分段展示
+- 现象：`/business/master-order?mode=dispatch&id=xxx` 顶部 `route-overview` 的起/终节点直接绑定 `route.departureName/arrivalName` 原始值 → 显示成「上海市浦东新区」「广西壮族自治区南宁市邕宁区」挤成一坨（同页段1~段3 的表头早已是「上海市 浦东新区 → 上海市 静安区」，用户截图圈出顶部这行说"怎么还没改"）。
+- 根因：顶部节点是唯一没走格式化方法的绑定（段头走 `dispatchLocationName`，详情页走 `segmentLocationName`），不是格式化逻辑有问题。
+- 落地：新增 `src/utils/region-address.js` 导出 `formatRegionAddress(value)` + `splitRegionTokens(value)`（按行政区划后缀切分，`州`+`市`、`县`+`区` 连写特例合并；**整串都是行政区划**才重排，站点名「南宁站」「广州南站」和含街道门牌的详细地址原样返回）→「市 区县」的空格展示，省/自治区不重复（与全站既有 `formatRoadLocation`/`formatRouteCityDistrict` 规则一致，`广西壮族自治区南宁市邕宁区` → `南宁市 邕宁区`）。
+- 接入 4 处：调度页 `route-overview` 起/终节点的强文本改用 `dispatchLocationName(route, 'departure'|'arrival')`、第二行地址改用 `formatRegionAddress(...)`，`addressText()` 名称+地址都格式化并去重（`南宁市 邕宁区` 不再重复两遍）；详情页 `route-map` 两处 `<small>` 地址改用 `formatRegionAddress(...)`。
+- 验证：项目根临时验证页（真组件 + `axios.defaults.adapter` 全量 mock 后端，复刻截图数据 `routes=[上海市静安区, 南宁站, 广西壮族自治区南宁市邕宁区]`）+ agent-browser 读 DOM —— 调度页顶部 4 节点 =「上海市 浦东新区 / 上海市 静安区 / 南宁站 / 南宁市 邕宁区」，与段1~段3 表头、详情页路线图**逐字一致**；终节点宽 101px 未被省略号截断（改前原始串超宽被截）；两页 innerText 再扫 `省|自治区` 已无未加空格的残留。用完已删临时文件。
+
+## 同事拉代码编译报错（漏提交新文件）→ 已修复
+- 现象：同事 pull 后 `[vite:load-fallback] Could not load .../src/utils/route-change (imported by src/views/business/loading-manage.vue): ENOENT`。
+- 根因：`src/utils/route-change.js`、`src/utils/region-address.js` 是**新增文件且一直 untracked**，本地能跑、远端没有。
+  提交时用了只带已跟踪文件的写法（`git commit -am` 之类），.vue 的引用被提交了、新 .js 没进去（12:44 的 6de87ed 就是这种情况）。region-address 是第二个雷：route-change 修好后会接着报它。
+- 修复：`git add src/utils/region-address.js src/utils/route-change.js` → commit `749b314 :bug: 补充提交遗漏的 region-address 与 route-change 工具文件` → push（期间远端有同事新提交 74780b8，先 `git pull --rebase` 无冲突）。三处 tree（本地 HEAD / origin/master / 远端真实 SHA）核对一致。
+- 复查：写脚本扫 `src/**` 所有 `@/`、相对路径引用（含 scss @use/@import），比对 `git ls-files`，**无其它"文件存在但未跟踪"的引用目标**，暂时不会再踩同类坑。
+- 教训：本仓库提交前建议 `git status` 扫一眼 `??`，新增文件必须显式 `git add`。
+
+## payment 模块 6 个手写列表页：搜索栏「展开/收起」统一（对齐 customer-archive / settlement）
+- 起因：`/payment/invoice-application`、`/payment/bill-payment` 的展开收起控件与别的模块不一致。排查发现 payment 模块 6 个手写搜索栏各写各的：5 个是 `el-tooltip`+`el-button text`+纯箭头图标（文案「折叠」，tooltip 才显示），`receipt-flow.vue` 更离谱 —— 裸 `el-button`（带边框）且排在**查询/重置左边**。
+- 统一标准（两处参照物写法完全一致）：
+  - `views/settlement/{formal-settlement,pre-settlement,transport-reconciliation,receivable-payable-detail,settlement-adjustment}.vue` 已有写法：
+    ```html
+    <el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">
+      {{ searchExpanded ? '收起' : '展开' }}
+    </el-button>
+    ```
+    放在「查询 / 重置」之后（最右）。
+  - `views/vehicle/customer-archive.vue` 是 avue-crud 内建，`searchIcon: true` + `searchIndex: 4`，渲染出的也是同一形态。
+- avue 显示规则（`node_modules/@smallwei/avue/lib/packages/element-plus/crud/menu/header-search3.js` 的 `isSearchIcon`）：
+  `searchIcon === true && columnLen > searchIndex` → **搜索项不超过 4 项时根本不渲染展开/收起按钮**。故各页 data 加 `searchIndex: 4` + `searchItemCount: N`，computed `showSearchToggle = searchItemCount > searchIndex`。
+- 逐页落地：invoice-application(5项) / invoice-receipt(6项) / receipt-claim-record(11项) / receipt-flow(7项) / components/bill-ledger-search(6项) 均显示；**components/bill-payment-search 仅 4 项（后端 `BillPaymentServiceImpl.selectPage` 也只支持 paymentNo/deptName/paymentDate 区间/approvalStatus 这 4 个条件）→ showSearchToggle=false，不渲染按钮**，避免留一个"点了没反应"的假按钮。
+- `receipt-flow.vue`：补 `import { ArrowDown, ArrowUp }`、按钮从最左移到最右、文案「折叠」→「收起」。
+- gap 不动：`business/`、`settlement/` 手写页的 `__search-actions` 都写了 `gap: 8px`（与本次统一无关，别顺手删）。
+- 校验：6 个文件 `curl localhost:2889/src/...vue` 与 `?vue&type=style&index=0&scoped=true&lang.scss` 全 200；`grep 折叠|el-tooltip src/views/payment/` 已无残留。
+
+## 15:55 路线变更「变更内容」列排布问题（待用户确认方案，未动代码）
+- 位置：`变更运输路线` 弹窗 → `变更记录` tab → 表格 `变更内容` 列，共 **3 处同款**：`views/business/loading-manage.vue:1688`（`__record-content`）、`views/business/components/waybill-manage-page.vue:3027`、`views/business/components/business-crud-page.vue:2998`。
+- 存储格式为**单行文本**：`YD-xxx：发货地 A → B；到货地 C → D；YD-yyy：…`，展示层由 `src/utils/route-change.js` 的 `formatRouteChangeContent()` 切行（`；`→换行、`→`→` →\n`），再以 `white-space: pre-wrap` 平铺。
+- 病因：`：` 不带换行 → 运单号与「发货地 原地址」挤同一行；前/后无标签；多条记录无分隔。一个单元格可堆 3 条运单 × 2 字段 × 2 行 ≈ 12+ 行。
+- 已给 3 个方案（A 单元格内分组对齐：运单号独占行主色 + 字段标签列 + 前值/后值缩进对齐，改 formatter 返回结构 + 模板渲染；B 列只留「运单号 · N 项」摘要 + 查看详情弹窗，复用同类组件 `src/components/change-record-detail-dialog/main.vue`（变更字段/变更前/变更后三列 + 分页）；C 按「运单 × 字段」拆行 + `span-method` 合并时间/人）。**推荐 A，B 备选**。等用户确认后再改。
+
+## 16:20 已按方案 A 落地（变更内容列分组渲染）
+- **`src/utils/route-change.js` 重写**：删掉 `formatRouteChangeContent`，改为导出 `parseRouteChangeContent(content)`，返回分组数组 `[{ type, title, text, fields:[{label,before,after,single,changed,unchanged}] }]`。
+  - ⚠️ **关键坑：存储格式里「到货地」前面只有 `；`、没有冒号**（真实格式 `${waybillNo}：发货地 A → B；到货地 C → D`）。第一版按「冒号切 head/tail」写，导致「到货地」整段落进纯文本兜底 → 必须"先判断 segment 是否以字段名开头"，再把无标题字段行合并进上一条 waybill 分组。
+  - 字段名正则的**长标签必须排在短标签前**（`发货地址` 早于 `发货地`），否则被前缀吃掉。字段白名单：发货地址/到货地址/发货地/到货地/装货地/卸货地/收货地。
+  - 三种分组类型：`waybill`（`运单号：发货地…`）、`field`（`；到货地…`，合并进上一个非 text 分组）、`group`（`路线顺序：X 调整为 Y`，按「调整为」拆前后，不走箭头切分，因为路线文本本身含 `→`）、`text`（兜底原文）。
+  - 箭头正则 `/\s*(?:→|➔|➜|[\-–—]{1,2}\s*>)\s*/`；空值归一为 `-`。
+- **三处模板统一改为分组渲染**（运单号主色标题 + 左侧 2px 主色竖条；字段 label 列 54px；`changed` 两行「旧值(灰) / → 新值(主色)」，`unchanged` 单行 + 灰字「未变更」）：`loading-manage.vue`（`loading-route-change-dialog__change-*`）、`waybill-manage-page.vue`、`business-crud-page.vue`。样式块也同步替换（`__route-change-record-content` 从 `white-space: pre-wrap` 改为 flex column；箭头 `text-align: right`，grid item 会被 blockify 所以 span 上生效）。
+- 校验：node 跑 `parseRouteChangeContent` 7 组用例（真实截图数据 / 路线顺序 / 混合 / 半角箭头分号 / 无箭头单值 / 纯文本 / 空）全部符合预期；`@vue/compiler-sfc` 编译三个 .vue 的 template + scss 全过；SSR 渲染真实模板 + agent-browser 截图确认观感（临时文件已删）。
+- 已知代价：窄列（360px）下地址被 54px 标签列占位，单元格比原来高约一倍；换来的是一条运单/一个字段的分组边界一目了然。
+
+## 16:05 /base/measurement-unit 创建时间/更新时间列截断修复
+- 现象：表格里「创建时…」「更新时…」列被挤到 ~80px，`2026-0...` 截断；用户猜测要固定操作列。
+- 根因：`option/base/measurement-unit.js` 两列只写了 `type/format/sortable`，**没有 width/minWidth** → el-table 未设宽列按剩余空间均分，被压到低于内容宽度 → 省略号。与 `menuFixed` 无关。
+- 修法：`createTime`/`updateTime` 加 `width: 180`（与同模块 `option/base/common-address.js` 完全一致），`createUserName`/`updateUserName` 加 `minWidth: 110`。
+- 结论（重要经验）：**操作列不需要额外"固定"**，`menuFixed: 'right'` 早在 option 里（`main.js` 全局 `crudOption.menuWidth: 180`，avue 库默认 220）。不要为了"防截断"去加宽操作列，加宽只会增加横向滚动；时间列截断一律是缺 width。
+- 验证方式（可复用）：项目根建临时 html `__mu-check.html` → Vite 直接服务；`import { createOption } from '/src/option/base/measurement-unit.js'` + `app.use(Avue, { crudOption: { menuWidth: 180 } })`，用 `h(resolveComponent('avue-crud'), {...}, { menu: () => [...] })` 渲染（避免运行时模板编译）。
+  实测（容器 1200px）：td 宽 `[50,70,150,150,130,200,100,110,110,180,180,180]` 合计 1610 → 横向滚动 410px；`scrollWidth > clientWidth` 的单元格 **0 个**；`操作` th 为 `position: sticky`，滚到最右后右边缘 = 容器右边缘 → fixed 生效。用完删文件 + `agent-browser close`。
+
+## 16:25 变更内容列 hover 提示去除（分组改造的连带问题）
+- 用户反馈：改完分组后，变更内容单元格 hover 出现提示浮层，要求去掉。
+- 根因：`main.js:84` `app.use(ElementPlus, { table: { showOverflowTooltip: true } })` 全局开启 → EP 给每列 `.cell` 加 `.el-tooltip` 类（`white-space: nowrap`）。**我上一次改造把内层 `white-space: pre-wrap` 换成了 flex column、忘了补 white-space** → 继承 nowrap → 长地址横向溢出 → tooltip 激活。改动前靠 pre-wrap 自保所以没暴露。
+- 修法（三处，列级豁免、不动全局配置）：① 变更内容列显式 `:show-overflow-tooltip="false"`；② `__route-change-record-content` 补 `white-space: normal` 兜底。
+- ⚠️ 验证踩坑：用「项目根临时 html + `node_modules/element-plus/dist/index.full.min.js` 全局构建 + `app.use(ElementPlus, { table: { showOverflowTooltip: true } })`」复现时，**el-table 表头/列宽渲染错乱**（表头逐列堆叠、每行只渲染出 2 个 cell），该环境不可用于布局验证；但单元格内容渲染正常，足以确认分组结构无误。要验证真实表格布局还是得走 Vite 服务真实页面。
+  另：自定义组件接模板字符串时，切出的模板里 `row.content` 要替换成 `content`（插槽作用域不存在于独立组件里），否则报 `Cannot read properties of undefined (reading 'content')`。
+- 校验：编译三个 .vue 的 template + scss 全过；临时验证页 `__route-change-verify.html` 与 8899 端口静态服务已删除/停止。
+- 未处理（等用户确认）：备注列的 `show-overflow-tooltip` 保持原样（属全站约定），用户若要求连备注一起去掉再单独改。

.workbuddy/memory/MEMORY.md

@@ -40,6 +40,7 @@
 - `searchIndex: 4` + `searchIcon: true` → 默认只显示前 4 个搜索项 + "展开/收起"（columnLen > searchIndex 时才出现该按钮）。
 - **搜索项 label 与表格列 label 不同**（列「收款方」/搜索「客户名称」）：单独定义 hide 列 + `searchProp` 指向后端字段（avue 在 search-change 里自动改名）。
 - 搜索专用列加 `hide: true` + `showColumn: false`，否则会混进列显隐抽屉。
+- ⚠️ **`createTime`/`updateTime` 必须显式给 `width: 180`**（全站统一，参考 `option/base/common-address.js`）。不写宽度的列参与"剩余空间均分"，容易被压到 80px 出现 `2026-0...` 截断 —— 这是**列缺 width**，不是操作列没固定；`menuFixed: 'right'` 各页早已配好（`main.js` 全局 `crudOption.menuWidth: 180`，avue 默认 220），别用"加宽操作列"来处理时间列截断。创建人/更新人给 `minWidth: 110`。
 - ⚠️ **column 数组顺序 = 表格列顺序**：搜索专用列别插在表格列中间（会把表格列顶到前面）；deptName 这种"既搜索又展示"的列要放回表格列的正确位置。
 - 分页：`page: { currentPage, pageSize, pageSizes, total }`；`on-load` 由 avue 内部（table-page）在 created / 翻页 / 改页容量时触发，`current-change`/`size-change` 里**只改 page 不要再调 onLoad**（否则双请求）。
 - `onLoad(page)` 只用 `this.query`（avue 传的 page 对象含 total/pageSizes 等分页字段，别 spread 进查询参数）。
@@ -57,6 +58,10 @@
 - 按钮层级：次要=无 type；中间步骤=`primary plain`；主操作=`primary`（禁绿、禁两个蓝实心）。顺序 `[辅助][取消][保存草稿][提交]`。
 - 独立页标题 `.archive-page-form__title`；分组用全局 `<section-card>`；上传证件区 `width:100%; max-width:240px` + `.el-upload{height:151px}`。
 - ⚠️ `<style scoped lang="scss">` 顶层禁 `//` 注释（Vite5 + sass `Unexpected '/'` → 500），顶层用 `/* */`。其余见 `src/styles/element-ui.scss` 与 `AGENTS.md` 4.4。
+- **搜索栏「展开/收起」唯一标准写法**（settlement 5 处已用、avue 页面同款）：
+  `<el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">{{ searchExpanded ? '收起' : '展开' }}</el-button>`
+  放「查询/重置」**之后**（最右）；禁 `el-tooltip` 包图标按钮、禁文案「折叠」。`ArrowUp/ArrowDown` 要 import 并放 `data()`（`:icon` 是表达式）。
+  显示条件与 avue 一致（`header-search3.js` 的 `isSearchIcon = searchIcon===true && columnLen > searchIndex`）：搜索项 **≤4 项不渲染按钮** —— 故 data 里维护 `searchIndex: 4` + `searchItemCount: N`，用 computed `showSearchToggle` 控制。搜索栏操作区 `gap: 8px` 各模块一致，**不要去改**。
 
 ## 表单 / 自检 / 导出
 - placeholder 只写 `请输入`/`请选择`；例外：`请输入或选择车辆`、日期区间 `起`/`止`、示例值。校验 message 须带字段名。
@@ -69,3 +74,10 @@
 但 `:icon="OfficeBuilding"` 是**表达式**，编译成 `_ctx.OfficeBuilding`，只会从 data / props / computed / setup 返回值里取 —— **组件对象必须放进 `data()`**；放进 `components: {}` 注册里模板取不到，会静默渲染不出图标（不报错，只是空白）。
 项目既有惯例：需要 `:icon` 的图标一律 `import` 后在 `data()` 里 `return { Xxx }`（transport-plan-page、waybill-manage-page、business-crud-page 都是这么写的）。
 注：标签形式（如 `<Location />`）不依赖 data，放不放 data 都能显示；仅 `:icon` 必须放 data。
+
+## 全局 `showOverflowTooltip: true` 与自定义多行单元格（2026-10-14 踩）
+`main.js` 的 `app.use(ElementPlus, { table: { showOverflowTooltip: true } })`（+ Avue `crudOption.showOverflowTooltip: true`）→ **全站所有表格列默认开启 hover 提示**，EP 会给该列 `.cell` 加 `.el-tooltip` 类（`white-space: nowrap` + 固定宽度 + 溢出省略）。
+后果：**列里放自定义多行 / 分组内容时，内层文本继承 nowrap → 横向溢出 → 单元格被裁切 + hover 弹提示**（极易被误判成"组件 bug"）。
+修法（列级豁免，不动全局）：① 列上显式 `:show-overflow-tooltip="false"`；② 内层容器补 `white-space: normal` 兜底。两处都写最稳。
+☑️ 已用于路线变更「变更内容」列（`loading-manage.vue` / `components/waybill-manage-page.vue` / `components/business-crud-page.vue` 三处）。
+另：`styles/element-ui.scss` 里已有两条基于 `.cell.el-tooltip` 的既有豁免规则（操作列 `:has(.el-link)`、`class-name="is-ellipsis-link"`），改表格列时先看这两条。

src/option/base/measurement-unit.js

@@ -38,7 +38,6 @@ export const createOption = () => ({
   delBtn: false,
   selection: true,
   dialogClickModal: false,
-  menuWidth: 240,
   menuFixed: 'right',
   column: [
     {
@@ -112,6 +111,7 @@ export const createOption = () => ({
     {
       label: '创建人',
       prop: 'createUserName',
+      minWidth: 110,
       addDisplay: false,
       editDisplay: false,
       viewDisplay: false,
@@ -120,6 +120,7 @@ export const createOption = () => ({
     {
       label: '更新人',
       prop: 'updateUserName',
+      minWidth: 110,
       addDisplay: false,
       editDisplay: false,
       viewDisplay: false,
@@ -131,6 +132,7 @@ export const createOption = () => ({
       type: 'datetime',
       format: 'YYYY-MM-DD HH:mm:ss',
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      width: 180,
       sortable: true,
       addDisplay: false,
       editDisplay: false,
@@ -142,6 +144,7 @@ export const createOption = () => ({
       type: 'datetime',
       format: 'YYYY-MM-DD HH:mm:ss',
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      width: 180,
       sortable: true,
       addDisplay: false,
       editDisplay: false,

src/utils/route-change.js

@@ -1,29 +1,133 @@
 /**
- * 路线变更记录内容格式化
+ * 路线变更记录内容解析
  *
  * 存储格式（单行）：
  *   YD-20260904-0022：发货地 A → B；到货地 C → D；YD-20260904-0025：发货地 E → F；到货地 G → H
+ *   路线顺序：A → B → C 调整为 B → A → C
  *
- * 展示格式（变更前 / 变更后分行）：
- *   YD-20260904-0022：发货地 A →
- *   B
- *   到货地 C →
- *   D
+ * 解析结果（分组，供变更记录列表按「分组标题 - 字段 - 变更前/后」渲染）：
+ *   [
+ *     {
+ *       title: 'YD-20260904-0022',
+ *       text: '',
+ *       fields: [{ label: '发货地', before: 'A', after: 'B', single: 'B', changed: true, unchanged: false }],
+ *     },
+ *     { title: '', text: '无法识别的原文', fields: [] },
+ *   ]
  *
  * 说明：仅用于展示层，不改变已存储的 content 文本（历史数据同样适用）。
  */
-export const formatRouteChangeContent = (content, emptyText = '-') => {
-  if (content === undefined || content === null) return emptyText;
-  const text = String(content).trim();
-  if (!text) return emptyText;
+// 长标签必须排在短标签前（「发货地址」优先于「发货地」），否则会被前缀吃掉
+const FIELD_LABELS = ['发货地址', '到货地址', '发货地', '到货地', '装货地', '卸货地', '收货地'];
+const FIELD_LABEL_PATTERN = new RegExp(`^(${FIELD_LABELS.join('|')})\\s*([\\s\\S]*)$`);
+// 变更前 / 变更后分隔符：→、➔、➜、->、-->、–>、—>
+const ARROW_PATTERN = /\s*(?:→|➔|➜|[\-–—]{1,2}\s*>)\s*/;
+// 运单地址之外的变更描述，例如「A → B → C 调整为 B → A → C」
+const ADJUST_PATTERN = /^([\s\S]*?)\s调整为\s*([\s\S]*)$/;
+const EMPTY_TEXT = ['', '-', '--', '—', 'null', 'undefined'];
+// 冒号前内容超过该长度时不视为分组标题（运单号通常长于该值）
+const TITLE_MAX_LENGTH = 12;
 
-  return text
-    .replace(/\r\n?/g, '\n')
-    // 多条记录之间换行
-    .replace(/[ \t]*[;；][ \t]*/g, '\n')
-    // 变更前地址 / 变更后地址分行（箭头保留在上一行行尾）
-    .replace(/[ \t]*[-—]+>[ \t]*|[ \t]*→[ \t]*/g, ' →\n')
-    .replace(/\n{2,}/g, '\n')
-    .replace(/[ \t]+\n/g, '\n')
-    .trim();
+const normalizeValue = value => {
+  const text = String(value === undefined || value === null ? '' : value).trim();
+  return EMPTY_TEXT.includes(text.toLowerCase()) ? '-' : text;
+};
+
+const buildField = (label, rawValue) => {
+  const value = String(rawValue === undefined || rawValue === null ? '' : rawValue).trim();
+  const adjustMatched = value.match(ADJUST_PATTERN);
+  let before = value;
+  let after = '';
+  let hasPair = false;
+
+  if (adjustMatched) {
+    before = adjustMatched[1];
+    after = adjustMatched[2];
+    hasPair = true;
+  } else {
+    const parts = value.split(ARROW_PATTERN);
+    if (parts.length > 1) {
+      before = parts[0];
+      after = parts[1];
+      hasPair = true;
+    }
+  }
+
+  const beforeText = normalizeValue(before);
+  const afterText = normalizeValue(after);
+
+  return {
+    label,
+    before: beforeText,
+    after: afterText,
+    // 单值展示（未拆分出前后值时使用）
+    single: hasPair ? afterText : beforeText,
+    changed: hasPair && beforeText !== afterText,
+    unchanged: hasPair && beforeText === afterText,
+  };
+};
+
+const parseSegment = segment => {
+  // 形如「发货地 A → B」（前面只有「；」分隔，无分组标题）→ 归入上一条运单
+  const leadingMatched = segment.match(FIELD_LABEL_PATTERN);
+  if (leadingMatched && leadingMatched[2].trim()) {
+    return {
+      type: 'field',
+      title: '',
+      text: '',
+      fields: [buildField(leadingMatched[1], leadingMatched[2])],
+    };
+  }
+
+  const colonIndex = segment.search(/[：:]/);
+  if (colonIndex === -1) {
+    return { type: 'text', title: '', text: segment, fields: [] };
+  }
+
+  const head = segment.slice(0, colonIndex).trim();
+  const tail = segment.slice(colonIndex + 1).trim();
+  const fieldMatched = tail.match(FIELD_LABEL_PATTERN);
+
+  // 形如「YD-20260904-0022：发货地 A → B」
+  if (fieldMatched && fieldMatched[2].trim()) {
+    return {
+      type: 'waybill',
+      title: head,
+      text: '',
+      fields: [buildField(fieldMatched[1], fieldMatched[2])],
+    };
+  }
+
+  // 形如「路线顺序：A → B → C 调整为 B → A → C」
+  if (head && head.length <= TITLE_MAX_LENGTH) {
+    return { type: 'group', title: head, text: '', fields: [buildField('', tail)] };
+  }
+
+  return { type: 'text', title: '', text: segment, fields: [] };
+};
+
+export const parseRouteChangeContent = content => {
+  if (content === undefined || content === null) return [];
+  const text = String(content).replace(/\r\n?/g, '\n').trim();
+  if (!text) return [];
+
+  const segments = text
+    .split(/[;；\n]+/)
+    .map(item => item.trim())
+    .filter(Boolean);
+
+  const groups = [];
+
+  segments.forEach(segment => {
+    const group = parseSegment(segment);
+    const last = groups[groups.length - 1];
+    // 同一运单下的「到货地…」等无标题字段，合并进上一个运单分组
+    if (group.type === 'field' && last && (last.type === 'waybill' || last.type === 'field')) {
+      last.fields.push(...group.fields);
+      return;
+    }
+    groups.push(group);
+  });
+
+  return groups;
 };

src/views/business/components/business-crud-page.vue

@@ -2991,12 +2991,51 @@
           <el-table :data="waybillRouteChangeRecords" border>
             <el-table-column prop="changeTime" label="变更时间" min-width="170" />
             <el-table-column prop="changeUser" label="变更人" min-width="120" />
-            <el-table-column prop="content" label="变更内容" min-width="360">
+            <el-table-column
+              prop="content"
+              label="变更内容"
+              min-width="360"
+              :show-overflow-tooltip="false"
+            >
               <template #default="{ row }">
-                <div
-                  class="business-crud-page__route-change-record-content"
-                  v-text="formatRouteChangeContent(row.content)"
-                />
+                <div class="business-crud-page__route-change-record-content">
+                  <div
+                    v-for="(group, groupIndex) in parseRouteChangeContent(row.content)"
+                    :key="groupIndex"
+                    class="business-crud-page__route-change-group"
+                  >
+                    <div v-if="group.title" class="business-crud-page__route-change-group-title">
+                      {{ group.title }}
+                    </div>
+                    <div v-if="group.text" class="business-crud-page__route-change-group-text">
+                      {{ group.text }}
+                    </div>
+                    <div
+                      v-for="(field, fieldIndex) in group.fields"
+                      :key="fieldIndex"
+                      class="business-crud-page__route-change-field"
+                    >
+                      <span class="business-crud-page__route-change-field-label">
+                        {{ field.label }}
+                      </span>
+                      <template v-if="field.changed">
+                        <span class="business-crud-page__route-change-before">
+                          {{ field.before }}
+                        </span>
+                        <span class="business-crud-page__route-change-arrow">→</span>
+                        <span class="business-crud-page__route-change-after">
+                          {{ field.after }}
+                        </span>
+                      </template>
+                      <span v-else class="business-crud-page__route-change-single">
+                        {{ field.single }}
+                        <span v-if="field.unchanged" class="business-crud-page__route-change-flag">
+                          未变更
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
               </template>
             </el-table-column>
             <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
@@ -5283,7 +5322,7 @@ import { formatContractOptionLabel } from '@/utils/contract';
 import { openImportDialog } from '@/utils/import-excel';
 import { normalizeMapSearchResults, searchAmapPlaceText } from '@/utils/map-search';
 import { loadMeasurementUnitOptions } from '@/utils/measurement-unit';
-import { formatRouteChangeContent } from '@/utils/route-change';
+import { parseRouteChangeContent } from '@/utils/route-change';
 import { applyTableMenuWidth } from '@/utils/table-menu';
 import { downloadFileByUrl, downloadXls } from '@/utils/util';
 import { isMobile } from '@/utils/validate';
@@ -6630,7 +6669,7 @@ export default {
   },
   methods: {
     formatContractOptionLabel,
-    formatRouteChangeContent,
+    parseRouteChangeContent,
     initStandaloneFormPage() {
       if (!this.isStandaloneFormPage) return;
       const mode = this.$route.query.mode === 'edit' ? 'edit' : 'add';
@@ -15900,10 +15939,65 @@ export default {
   }
 
   &__route-change-record-content {
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    word-break: break-word;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
     line-height: 22px;
+    white-space: normal;
+    text-align: left;
+  }
+
+  &__route-change-group {
+    padding-left: 8px;
+    border-left: 2px solid #409eff;
+  }
+
+  &__route-change-group-title {
+    margin-bottom: 4px;
+    color: #409eff;
+    font-weight: 500;
+  }
+
+  &__route-change-group-text {
+    color: #606266;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
+
+  &__route-change-field {
+    display: grid;
+    grid-template-columns: 54px minmax(0, 1fr);
+    column-gap: 8px;
+    row-gap: 2px;
+  }
+
+  &__route-change-field-label {
+    color: #909399;
+    white-space: nowrap;
+  }
+
+  &__route-change-before,
+  &__route-change-single {
+    color: #606266;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
+
+  &__route-change-arrow {
+    color: #c0c4cc;
+    text-align: right;
+  }
+
+  &__route-change-after {
+    color: #409eff;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
+
+  &__route-change-flag {
+    margin-left: 6px;
+    color: #c0c4cc;
+    font-size: 12px;
   }
 
   @media (max-width: 1200px) {

src/views/business/components/waybill-manage-page.vue

@@ -3020,12 +3020,57 @@
           <el-table :data="waybillRouteChangeRecords" border>
             <el-table-column prop="changeTime" label="变更时间" min-width="170" />
             <el-table-column prop="changeUser" label="变更人" min-width="120" />
-            <el-table-column prop="content" label="变更内容" min-width="360">
+            <el-table-column
+              prop="content"
+              label="变更内容"
+              min-width="360"
+              :show-overflow-tooltip="false"
+            >
               <template #default="{ row }">
-                <div
-                  class="waybill-manage-page__route-change-record-content"
-                  v-text="formatRouteChangeContent(row.content)"
-                />
+                <div class="waybill-manage-page__route-change-record-content">
+                  <div
+                    v-for="(group, groupIndex) in parseRouteChangeContent(row.content)"
+                    :key="groupIndex"
+                    class="waybill-manage-page__route-change-group"
+                  >
+                    <div
+                      v-if="group.title"
+                      class="waybill-manage-page__route-change-group-title"
+                    >
+                      {{ group.title }}
+                    </div>
+                    <div v-if="group.text" class="waybill-manage-page__route-change-group-text">
+                      {{ group.text }}
+                    </div>
+                    <div
+                      v-for="(field, fieldIndex) in group.fields"
+                      :key="fieldIndex"
+                      class="waybill-manage-page__route-change-field"
+                    >
+                      <span class="waybill-manage-page__route-change-field-label">
+                        {{ field.label }}
+                      </span>
+                      <template v-if="field.changed">
+                        <span class="waybill-manage-page__route-change-before">
+                          {{ field.before }}
+                        </span>
+                        <span class="waybill-manage-page__route-change-arrow">→</span>
+                        <span class="waybill-manage-page__route-change-after">
+                          {{ field.after }}
+                        </span>
+                      </template>
+                      <span v-else class="waybill-manage-page__route-change-single">
+                        {{ field.single }}
+                        <span
+                          v-if="field.unchanged"
+                          class="waybill-manage-page__route-change-flag"
+                        >
+                          未变更
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
               </template>
             </el-table-column>
             <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
@@ -3667,7 +3712,7 @@ import { wgs84ToGcj02 } from '@/utils/coordinate';
 import { openImportDialog } from '@/utils/import-excel';
 import { normalizeMapSearchResults, searchAmapPlaceText } from '@/utils/map-search';
 import { loadMeasurementUnitOptions } from '@/utils/measurement-unit';
-import { formatRouteChangeContent } from '@/utils/route-change';
+import { parseRouteChangeContent } from '@/utils/route-change';
 import { applyTableMenuWidth } from '@/utils/table-menu';
 import { downloadFileByUrl, downloadXls } from '@/utils/util';
 import { isMobile } from '@/utils/validate';
@@ -4755,7 +4800,7 @@ export default {
   },
   methods: {
     formatContractOptionLabel,
-    formatRouteChangeContent,
+    parseRouteChangeContent,
     // 页面被 keep-alive 缓存/卸载时调用，关闭本页所有 append-to-body 的弹窗，
     // 避免 Teleport 出去的 DOM 残留在 body 上盖住后续页面（详见 data 里的说明）。
     closeInnerDialogs() {
@@ -11846,10 +11891,65 @@ export default {
   }
 
   &__route-change-record-content {
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    word-break: break-word;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
     line-height: 22px;
+    white-space: normal;
+    text-align: left;
+  }
+
+  &__route-change-group {
+    padding-left: 8px;
+    border-left: 2px solid #409eff;
+  }
+
+  &__route-change-group-title {
+    margin-bottom: 4px;
+    color: #409eff;
+    font-weight: 500;
+  }
+
+  &__route-change-group-text {
+    color: #606266;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
+
+  &__route-change-field {
+    display: grid;
+    grid-template-columns: 54px minmax(0, 1fr);
+    column-gap: 8px;
+    row-gap: 2px;
+  }
+
+  &__route-change-field-label {
+    color: #909399;
+    white-space: nowrap;
+  }
+
+  &__route-change-before,
+  &__route-change-single {
+    color: #606266;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
+
+  &__route-change-arrow {
+    color: #c0c4cc;
+    text-align: right;
+  }
+
+  &__route-change-after {
+    color: #409eff;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
+
+  &__route-change-flag {
+    margin-left: 6px;
+    color: #c0c4cc;
+    font-size: 12px;
   }
 
   &__common-address-toolbar {

src/views/business/loading-manage.vue

@@ -1683,9 +1683,56 @@
             ><el-table-column prop="changeTime" label="变更时间" min-width="170" /><el-table-column
               prop="changeUser"
               label="变更人"
-              min-width="120" /><el-table-column prop="content" label="变更内容" min-width="360"
+              min-width="120" /><el-table-column
+              prop="content"
+              label="变更内容"
+              min-width="360"
+              :show-overflow-tooltip="false"
               ><template #default="{ row }"
-                ><div class="loading-route-change-dialog__record-content">{{ formatRouteChangeContent(row.content) }}</div></template
+                ><div class="loading-route-change-dialog__record-content">
+                  <div
+                    v-for="(group, groupIndex) in parseRouteChangeContent(row.content)"
+                    :key="groupIndex"
+                    class="loading-route-change-dialog__change-group"
+                  >
+                    <div
+                      v-if="group.title"
+                      class="loading-route-change-dialog__change-group-title"
+                    >
+                      {{ group.title }}
+                    </div>
+                    <div v-if="group.text" class="loading-route-change-dialog__change-group-text">
+                      {{ group.text }}
+                    </div>
+                    <div
+                      v-for="(field, fieldIndex) in group.fields"
+                      :key="fieldIndex"
+                      class="loading-route-change-dialog__change-field"
+                    >
+                      <span class="loading-route-change-dialog__change-field-label">
+                        {{ field.label }}
+                      </span>
+                      <template v-if="field.changed">
+                        <span class="loading-route-change-dialog__change-before">
+                          {{ field.before }}
+                        </span>
+                        <span class="loading-route-change-dialog__change-arrow">→</span>
+                        <span class="loading-route-change-dialog__change-after">
+                          {{ field.after }}
+                        </span>
+                      </template>
+                      <span v-else class="loading-route-change-dialog__change-single">
+                        {{ field.single }}
+                        <span
+                          v-if="field.unchanged"
+                          class="loading-route-change-dialog__change-flag"
+                        >
+                          未变更
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div></template
               ></el-table-column
             ><el-table-column
               prop="remark"
@@ -1798,7 +1845,7 @@ import TableHeaderTools from '@/components/table-header-tools/main.vue';
 import dayjs from 'dayjs';
 import { isMobile } from '@/utils/validate';
 import { normalizeMapSearchResults, searchAmapPlaceText } from '@/utils/map-search';
-import { formatRouteChangeContent } from '@/utils/route-change';
+import { parseRouteChangeContent } from '@/utils/route-change';
 
 const defaultTransportType = '';
 const defaultCandidateTransportType = '';
@@ -2277,7 +2324,7 @@ export default {
     },
   },
   methods: {
-    formatRouteChangeContent,
+    parseRouteChangeContent,
     formatTaskCarrierContractLabel(item = {}) {
       const carrierName = item.carrierName || item.partyB || '';
       const contractLabel = formatContractOptionLabel(item);
@@ -5129,10 +5176,56 @@ export default {
     gap: 4px;
   }
   .loading-route-change-dialog__record-content {
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    word-break: break-word;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
     line-height: 22px;
+    white-space: normal;
+    text-align: left;
+  }
+  .loading-route-change-dialog__change-group {
+    padding-left: 8px;
+    border-left: 2px solid #409eff;
+  }
+  .loading-route-change-dialog__change-group-title {
+    margin-bottom: 4px;
+    color: #409eff;
+    font-weight: 500;
+  }
+  .loading-route-change-dialog__change-group-text {
+    color: #606266;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
+  .loading-route-change-dialog__change-field {
+    display: grid;
+    grid-template-columns: 54px minmax(0, 1fr);
+    column-gap: 8px;
+    row-gap: 2px;
+  }
+  .loading-route-change-dialog__change-field-label {
+    color: #909399;
+    white-space: nowrap;
+  }
+  .loading-route-change-dialog__change-before,
+  .loading-route-change-dialog__change-single {
+    color: #606266;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
+  .loading-route-change-dialog__change-arrow {
+    color: #c0c4cc;
+    text-align: right;
+  }
+  .loading-route-change-dialog__change-after {
+    color: #409eff;
+    word-break: break-word;
+    overflow-wrap: anywhere;
+  }
+  .loading-route-change-dialog__change-flag {
+    margin-left: 6px;
+    color: #c0c4cc;
+    font-size: 12px;
   }
 }
 .loading-route-change-map-dialog {

src/views/payment/components/bill-ledger-search.vue

@@ -52,12 +52,13 @@
           <el-icon><Delete /></el-icon>
           <span>重置</span>
         </el-button>
-        <el-tooltip :content="expanded ? '折叠' : '展开'" placement="top">
-          <el-button text @click="expanded = !expanded">
-            <el-icon><component :is="expanded ? ArrowUp : ArrowDown" /></el-icon>
-            <span>{{ expanded ? '折叠' : '展开' }}</span>
-          </el-button>
-        </el-tooltip>
+        <el-button
+          v-if="showSearchToggle"
+          text
+          :icon="expanded ? ArrowUp : ArrowDown"
+          @click="expanded = !expanded"
+          >{{ expanded ? '收起' : '展开' }}</el-button
+        >
       </div>
     </el-form>
   </section>
@@ -81,10 +82,18 @@ export default {
       Delete,
       Search,
       expanded: false,
+      // 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
+      searchIndex: 4,
+      searchItemCount: 6,
       billTypeOptions,
       maturityStatusOptions,
     };
   },
+  computed: {
+    showSearchToggle() {
+      return this.searchItemCount > this.searchIndex;
+    },
+  },
 };
 </script>
 

src/views/payment/components/bill-payment-search.vue

@@ -43,11 +43,13 @@
       <div class="bill-payment-search__actions">
         <el-button type="primary" :loading="loading" @click="$emit('search')">查询</el-button>
         <el-button @click="$emit('reset')">重置</el-button>
-        <el-tooltip :content="expanded ? '折叠' : '展开'" placement="top">
-          <el-button text @click="expanded = !expanded">
-            <el-icon><component :is="expanded ? ArrowUp : ArrowDown" /></el-icon>
-          </el-button>
-        </el-tooltip>
+        <el-button
+          v-if="showSearchToggle"
+          text
+          :icon="expanded ? ArrowUp : ArrowDown"
+          @click="expanded = !expanded"
+          >{{ expanded ? '收起' : '展开' }}</el-button
+        >
       </div>
     </el-form>
   </section>
@@ -67,7 +69,20 @@ export default {
   },
   emits: ['search', 'reset'],
   data() {
-    return { ArrowDown, ArrowUp, expanded: false, approvalStatusOptions };
+    return {
+      ArrowDown,
+      ArrowUp,
+      expanded: false,
+      // 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
+      searchIndex: 4,
+      searchItemCount: 4,
+      approvalStatusOptions,
+    };
+  },
+  computed: {
+    showSearchToggle() {
+      return this.searchItemCount > this.searchIndex;
+    },
   },
   mounted() {
     this.loadOrganizationOptions();

src/views/payment/invoice-application.vue

@@ -45,11 +45,13 @@
         <div class="invoice-page__search-actions">
           <el-button type="primary" @click="handleSearch">查询</el-button>
           <el-button @click="resetSearch">重置</el-button>
-          <el-tooltip :content="searchExpanded ? '折叠' : '展开'" placement="top">
-            <el-button text @click="searchExpanded = !searchExpanded">
-              <el-icon><component :is="searchExpanded ? ArrowUp : ArrowDown" /></el-icon>
-            </el-button>
-          </el-tooltip>
+          <el-button
+            v-if="showSearchToggle"
+            text
+            :icon="searchExpanded ? ArrowUp : ArrowDown"
+            @click="searchExpanded = !searchExpanded"
+            >{{ searchExpanded ? '收起' : '展开' }}</el-button
+          >
         </div>
       </el-form>
     </section>
@@ -247,6 +249,9 @@ export default {
       ArrowUp,
       query: emptyQuery(),
       searchExpanded: false,
+      // 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
+      searchIndex: 4,
+      searchItemCount: 5,
       searchVisible: true,
       tableSize: 'default',
       approvalStatusOptions: api.approvalStatusOptions,
@@ -265,6 +270,9 @@ export default {
     visibleColumns() {
       return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
     },
+    showSearchToggle() {
+      return this.searchItemCount > this.searchIndex;
+    },
   },
   mounted() {
     this.loadOrganizationOptions();

src/views/payment/invoice-receipt.vue

@@ -54,11 +54,13 @@
         <div class="receipt-page__search-actions">
           <el-button type="primary" @click="handleSearch">查询</el-button>
           <el-button @click="resetSearch">重置</el-button>
-          <el-tooltip :content="searchExpanded ? '折叠' : '展开'" placement="top">
-            <el-button text @click="searchExpanded = !searchExpanded">
-              <el-icon><component :is="searchExpanded ? ArrowUp : ArrowDown" /></el-icon>
-            </el-button>
-          </el-tooltip>
+          <el-button
+            v-if="showSearchToggle"
+            text
+            :icon="searchExpanded ? ArrowUp : ArrowDown"
+            @click="searchExpanded = !searchExpanded"
+            >{{ searchExpanded ? '收起' : '展开' }}</el-button
+          >
         </div>
       </el-form>
     </section>
@@ -240,6 +242,9 @@ export default {
       ArrowUp,
       query: emptyQuery(),
       searchExpanded: false,
+      // 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
+      searchIndex: 4,
+      searchItemCount: 6,
       searchVisible: true,
       tableSize: 'default',
       approvalStatusOptions: api.approvalStatusOptions,
@@ -258,6 +263,9 @@ export default {
     visibleColumns() {
       return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
     },
+    showSearchToggle() {
+      return this.searchItemCount > this.searchIndex;
+    },
   },
   mounted() {
     this.loadOrganizationOptions();

src/views/payment/receipt-claim-record.vue

@@ -70,11 +70,13 @@
         <div class="claim-record-page__search-actions">
           <el-button type="primary" @click="handleSearch">查询</el-button>
           <el-button @click="resetSearch">重置</el-button>
-          <el-tooltip :content="searchExpanded ? '折叠' : '展开'" placement="top">
-            <el-button text @click="searchExpanded = !searchExpanded">
-              <el-icon><component :is="searchExpanded ? ArrowUp : ArrowDown" /></el-icon>
-            </el-button>
-          </el-tooltip>
+          <el-button
+            v-if="showSearchToggle"
+            text
+            :icon="searchExpanded ? ArrowUp : ArrowDown"
+            @click="searchExpanded = !searchExpanded"
+            >{{ searchExpanded ? '收起' : '展开' }}</el-button
+          >
         </div>
       </el-form>
     </section-card>
@@ -173,6 +175,9 @@ export default {
       ArrowUp,
       query: emptyQuery(),
       searchExpanded: false,
+      // 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
+      searchIndex: 4,
+      searchItemCount: 11,
       searchVisible: true,
       tableSize: 'default',
       claimStatusOptions: api.claimStatusOptions,
@@ -189,6 +194,9 @@ export default {
     visibleColumns() {
       return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
     },
+    showSearchToggle() {
+      return this.searchItemCount > this.searchIndex;
+    },
     isAdmin() {
       return isAdministrator(this.userInfo);
     },

src/views/payment/receipt-flow.vue

@@ -41,11 +41,15 @@
           </el-form-item>
         </div>
         <div class="receipt-flow-page__search-actions">
-          <el-button @click="searchExpanded = !searchExpanded">
-            {{ searchExpanded ? '折叠' : '展开' }}
-          </el-button>
           <el-button type="primary" @click="handleSearch">查询</el-button>
           <el-button @click="resetSearch">重置</el-button>
+          <el-button
+            v-if="showSearchToggle"
+            text
+            :icon="searchExpanded ? ArrowUp : ArrowDown"
+            @click="searchExpanded = !searchExpanded"
+            >{{ searchExpanded ? '收起' : '展开' }}</el-button
+          >
         </div>
       </el-form>
     </section>
@@ -200,6 +204,7 @@
 </template>
 
 <script>
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
 import { mapGetters } from 'vuex';
 import * as api from '@/api/payment/receiptFlow';
 import { receiptFlowTableColumns } from '@/option/payment/receiptFlow';
@@ -279,6 +284,8 @@ export default {
   components: { TableHeaderTools },
   data() {
     return {
+      ArrowDown,
+      ArrowUp,
       query: emptyQuery(),
       claimStatusOptions: api.claimStatusOptions,
       columns: receiptFlowTableColumns,
@@ -290,6 +297,9 @@ export default {
       loading: false,
       syncing: false,
       searchExpanded: false,
+      // 与 avue-crud 一致：搜索项数量超过 searchIndex（默认一行 4 项）时才显示“展开/收起”
+      searchIndex: 4,
+      searchItemCount: 7,
       page: { current: 1, size: 10, total: 0 },
       detailDialog: { visible: false, loading: false, data: {}, claimRecords: [] },
     };
@@ -299,6 +309,9 @@ export default {
     visibleColumns() {
       return this.columns.filter(column => this.visibleColumnKeys.includes(column.prop));
     },
+    showSearchToggle() {
+      return this.searchItemCount > this.searchIndex;
+    },
     isAdmin() {
       return isAdministrator(this.userInfo);
     },