style(contract): 优化合同管理页面表单样式与布局

- 调整合同管理备注输入框行数和最大长度
- 细化合同变更页面表单项间距和对齐方式
- 统一弹窗表单项的底部间距样式，改为注释禁用
- 调整 port-terminal 和 region 组件的表单项底部间距
- 修改 vite 配置中 API 请求代理地址
- 优化凭证执行详情搜索表单列宽布局
- 在运单管理页面更新型号字段为非必填，调整变更记录内容格式化显示
- 引入并使用 formatRouteChangeContent 工具函数
- 统一明细按钮显示逻辑，草稿状态也显示详情按钮
- 新增路由变更相关工具函数与样式支持

.workbuddy/memory/MEMORY.md

@@ -22,6 +22,36 @@
 
 **坑三：路由表重复定义 → 内容区整页空白（2026-09-18）。** `/business/contract-manage/detail` 在 `router/views/index.js` 定义两次、子路由同名 `合同详情`。重名 `addRoute` 会 `removeRoute(name)` 移除旧子记录，但**不从父记录 children 里摘除**，第一条 Layout 壳记录留在 matcher 且靠前 → `resolve()` 命中它 → `$route.matched.length === 1` → 二级 router-view 无匹配 → 侧栏/标签正常但内容空白。修法：删重复定义。排查：扫「顶层 path + 首个子路由 name」重复项。
 
+## 列表页右上角按钮组（table-header-tools 标准件）
+⚠️ **2026-10-14 修正：最终方向是手写列表页改用 `avue-crud`**。用户要求与其它模块"完全一致"，而 avue 的列显隐抽屉（`el-drawer`+表格，隐藏/冻结/过滤/排序，行拖拽）是 avue-crud 内部子组件（`inject: ['crud']`），脱离 avue-crud 拿不出来；第 4 键也是 avue 的"表格↔卡片视图"切换。所以 `table-header-tools` 只是过渡仿制件，**新页面不要再接**，直接写 avue-crud。
+
+手写 `el-table` 列表页若暂时保留，右上角统一用 `src/components/table-header-tools/main.vue`，复刻 avue-crud 默认 4 键：刷新 `el-icon-refresh` / 列设置 `el-icon-operation` / 搜索显隐 `el-icon-search` / 表格尺寸 `el-icon-grid`（default→large→small 循环）。
+
+- 接入范式：`<table-header-tools :columns="columns" v-model:visible-column-keys="visibleColumnKeys" v-model:table-size="tableSize" v-model:search-visible="searchVisible" @refresh="loadTable" />`；配套：搜索区 `v-if="searchVisible"`、el-table `:size="tableSize"`、列用 computed `visibleColumns = columns.filter(c => visibleColumnKeys.includes(c.prop))`。⚠️ 不能 `v-for` + `v-if` 同元素（Vue3 v-if 优先级更高，取不到 column 变量）。
+- 表格在子组件时（如 `payment/components/bill-*-table.vue`）：子组件加 props `searchVisible` + emits `refresh`/`update:searchVisible`，父页面 `v-model:search-visible` + `@refresh`，搜索子组件加 `v-if="searchVisible"`。
+- `icon="el-icon-xxx"` 字符串**依赖 Avue 的全局 el-icon 映射**（`main.js` 只注册 EP 的 PascalCase 图标），临时验证页没 `app.use(Avue)` 会渲染成空圆按钮 —— 别误判成组件 bug。
+- 组件已加 `deactivated()` 关列设置弹窗（防 keep-alive 下 Teleport 弹窗残留）。
+- 已接入（过渡态，待逐页改 avue）：business/{master-order,loading-manage,voucher-manage}、settlement、payment 模块手写页。
+
+## avue-crud 列表页改造要点（payment 模块样板，2026-10-14）
+- **列显隐抽屉**：点第 2 键弹出，标题"列显隐"（语言包 `crud.showTitle`），表头 列名/隐藏/冻结/过滤/排序。直接读写 avue crud 的列配置，页面无需实现。
+- **第 4 键**：`handleGridShow()` = 表格 ↔ 卡片视图（`tableCard` 按列通用渲染），页面无需写卡片模板。
+- `searchOrder` 是**降序**排序（值越大越靠前）：`list.sort((a,b) => (b.searchOrder||0) - (a.searchOrder||0))`。首次改造踩过坑。
+- `searchIndex: 4` + `searchIcon: true` → 默认只显示前 4 个搜索项 + "展开/收起"（columnLen > searchIndex 时才出现该按钮）。
+- **搜索项 label 与表格列 label 不同**（列「收款方」/搜索「客户名称」）：单独定义 hide 列 + `searchProp` 指向后端字段（avue 在 search-change 里自动改名）。
+- 搜索专用列加 `hide: true` + `showColumn: false`，否则会混进列显隐抽屉。
+- ⚠️ **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 进查询参数）。
+- 搜索参数转换放 `searchChange(params, done)`：日期区间数组拆成 `xxxStartDate/xxxEndDate`；所属组织级联用 `normalizeOrganizationSearch(params, 'deptName')`（见 `mixins/organization-search.js`，option 里该列加 `searchslot: true`）。
+- 单元格空值统一 `-`：列级 `formatter: (row, value) => ...`；金额 `Number(v||0).toFixed(2)`；状态/链接用 `slot: true` + `#prop` 插槽。
+- 操作列用 `#menu` 插槽（`menuWidth: 320`），`addBtn/viewBtn/delBtn/editBtn: false` 关掉 avue 自带按钮。
+
+## 地址/行政区划展示（全站既有规则）
+「省/市/区县」都要空格分段，但**省与自治区不重复展示**：`上海市浦东新区`→`上海市 浦东新区`，`广西壮族自治区南宁市邕宁区`→`南宁市 邕宁区`（同 `formatRoadLocation` / `formatRouteCityDistrict` / 总单列表 `formatRoadAddress` 一致）。
+- 统一入口：`src/utils/region-address.js` 的 `formatRegionAddress(value)`（按后缀切分行政区划，`州+市`、`县+区` 连写合并；**只有整串都是行政区划**才重排，站点名「南宁站/广州南站」与含门牌的详细地址原样返回）。v-for 列表里用它做展示时，直接把函数挂进 `methods` 用 ES6 简写（`formatRegionAddress,`）。
+- ⚠️ 路线节点的名称字段来自后端 `routeJson`：`routes[i].departureName` = 第 i 段**到货地/途经地**（不是本段发货地），末段 = 最终收货地；`master.departureName/arrivalName` 才是总发货/总收货。总单调度/详情都按「上一个节点的 departureName」拼分段起点。
+
 ## 样式硬规则
 - 底栏 `flex; justify-content:flex-end`，**不写 gap**（靠 EP 默认 `.el-button+.el-button{margin-left:12px}`）；浮动底栏必须 `position:fixed`（祖先 overflow:hidden 使 sticky 失效）+ `:global(.avue--collapse .x){left:60px}`、`:global(.avue-layout--horizontal .x){left:0}`，`:global()` 要包整个选择器。
 - 按钮层级：次要=无 type；中间步骤=`primary plain`；主操作=`primary`（禁绿、禁两个蓝实心）。顺序 `[辅助][取消][保存草稿][提交]`。
@@ -33,3 +63,9 @@
 - `business-crud-page.vue`：option 经 `cloneOption` 克隆，独立表单页走 `PageAvueForm`。
 - 自检：`curl "localhost:2889/src/xxx.vue"` 与 `"...?vue&type=style&index=0&scoped=true&lang.scss"`（200 / 500）。`vite build` 在 `facelogin.vue` 被沙箱中断，不能作唯一校验。dev `VITE_APP_API=/api` 代理 `172.16.203.228:8000`。
 - 导出：前端 `exportColumns` 后端未用，以 `XxxExportExcel.java` 为准；BladeX `BeanUtil` 类型不兼容静默跳过（`Date` → `LocalDateTime` 丢值，用 `DateUtil.fromDate`）。
+
+## Element Plus 图标两种用法的机制差异（易误判）
+`main.js` 里 `for (...ElementPlusIconsVue) app.component(key, component)` 全局注册了全部图标，因此模板里可以写标签形式 `<Location />`（靠全局注册解析）。
+但 `: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。