style(business): 统一优化多个业务弹窗为接近全屏高度

- /business/waybill-manage 新增/编辑弹窗添加 dialogCustomClass 控制高度样式，覆盖默认 max-height 限制
- /business/contract-manage 弹窗同样加 dialogCustomClass，scoped 样式解开 Avue 弹窗默认 body 高度限制并实现底部操作栏粘性
- element-ui.scss 新增对应页 dialog 样式，确保弹窗上下留白20px，内容区高度自动适应，底部操作栏始终可见
- 复用 business-crud-page 组件中传入 option 的 dialogCustomClass 实现页面隔离样式，不影响其他业务弹窗
- loading-manage.vue 调整路线展示类型样式，分别对应起点、中间、终点三种状态，增加状态背景色区分
- .workbuddy/memory.md 补充业务弹窗高度改法说明，强调利用 dialogCustomClass 实现弹窗样式定制与复用机制

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

@@ -3,6 +3,32 @@
 ## temporary-credit-limit 弹窗 label 固定 6 汉字宽度并换行
 
 - 需求：用户反馈 `/business/temporary-credit-limit` 新增弹窗中 label「已使用项目资金使用额度（万元）」过宽（227px），希望超过 6 个汉字就换行。
+
+## loading-manage 搜索栏 label 宽度 160→88
+
+- 用户要求把 `/business/loading-manage` 页面搜索栏所有 label 宽度从 160px 改为 88px。
+- 改动：`src/views/business/loading-manage.vue` 第 4 行 `<el-form ... label-width="88px">`。
+- 注意事项：AGENTS.md 4.4 节规范"搜索组件 label 宽度统一不小于 160px"，本次按用户指令执行但与项目规范冲突；如后续要恢复规范或全站统一，需要回滚。
+
+## shipping-template 弹窗高度改为接近全屏
+
+- 用户要求把 `/business/shipping-template` 弹窗高度调到接近全屏（硬编码 200px 安全区太大）。
+- 关键定位：Avue 库内置 `.avue-dialog { max-height: calc(100% - 200px) }` 加在 `el-dialog` 根元素（avue lib `packages/core/components/dialog-form/index4.js:14` `class:"avue-dialog"`）；shipping-template 的 `dialogCustomClass:'shipping-template-dialog'` 合并到同一元素。项目样式（common.scss）在 main.js:24 晚于 Avue css（main.js:12）加载，可覆盖。
+- 改动：`src/styles/element-ui.scss` 的 `.shipping-template-dialog.el-dialog` 规则，由 `margin-top:4vh; margin-bottom:0; height:calc(100vh - 4vh - 24px)` 改为 `margin-top:20px !important; margin-bottom:20px !important; height:calc(100vh - 40px); max-height:calc(100vh - 40px) !important`，用 max-height + !important 压过库内置上限。
+- 注意：仅改 shipping-template 专属规则，未动库内置 `.avue-dialog` 根，也未影响其他弹窗。body/footer 的 flex 分摊规则（474-488 行）保持不变。
+
+## transport-plan 弹窗高度也改为接近全屏
+
+- 用户要求 `/business/transport-plan` 新增/编辑弹窗同样改为接近全屏（原来固定 max-height: 72vh，内容少时下方留白）。
+- 改动：`src/styles/element-ui.scss` 的 `.transport-plan-dialog.el-dialog` 规则，由 `margin-top:4vh; max-height:72vh` 改为 `margin-top:20px !important; margin-bottom:20px !important; height:calc(100vh - 40px); max-height:calc(100vh - 40px) !important`，与 shipping-template 弹窗完全对齐（压过库内置 `.avue-dialog` 的 max-height: calc(100% - 200px)）。
+- 已确认 `src/option/business/transport-plan.js:607` 有 `dialogCustomClass: 'transport-plan-dialog'`，CSS 生效。body/footer flex 分摊规则（504-520 行）保持不变。
+
+## waybill-manage 弹窗高度也改为接近全屏
+
+- 用户要求 `/business/waybill-manage` 新增/编辑弹窗同样接近全屏。
+- 机制澄清：waybill-manage 用封装组件 `src/views/business/components/business-crud-page.vue`，它内部 `<avue-crud :option="option">`，option 由传入的 `crudOption`（即 waybill-manage.js 的 option）经 `cloneOption`（组件内 6261 行，浅展开+重映射 column，保留所有顶层属性）克隆而来。因此给 waybill-manage.js 的 option 顶层加 `dialogCustomClass` 即可只影响本页（不影响共用 business-crud-page 的其他页面）。Avue crud 弹窗 `dialog-form3.js:21` 会读取并应用 dialogCustomClass。
+- 改动1：`src/option/business/waybill-manage.js` 的 `export const option = {` 顶层加 `dialogCustomClass: 'waybill-manage-dialog'`（在展开 `...createCrudOption(` 之前）。
+- 改动2：`src/styles/element-ui.scss` 新增 `.waybill-manage-dialog.el-dialog / .el-dialog__header / .el-dialog__body / .avue-dialog__footer` 四条规则，复刻 shipping-template 方案（height/max-height: calc(100vh - 40px) !important；body max-height:none !important 解开全局 `.avue-crud__dialog .el-dialog__body` 的 200px 限制；footer sticky）。额外在 footer 加 `margin-top: 0 !important` 抵消全局 `.avue-crud__dialog .avue-dialog__footer { margin-top: -30px !important }`（863 行）的上移副作用（shipping-template 是 dialog-form 弹窗无 avue-crud__dialog class 故不受影响，waybill-manage 是 avue-crud 弹窗会受影响，必须处理）。
 - 宽度来源：
   - `src/option/business/common.js` 的 `createCrudOption` 中 `labelWidth: 'auto'`；
   - Avue 会按当前弹窗内最长 label 自动计算宽度，故出现 227px。
@@ -50,3 +76,37 @@
 - 需求：用户截图反馈 `/business/contract-manage` 搜索栏中「全部/30天内到期/90天内到期/90天以上/已到期」标签需要靠右对齐。
 - 改动：`src/views/business/components/business-crud-page.vue` 中 `.business-crud-page__contract-expiry-search` 样式由 `order: -1; margin-right: auto` 改为 `margin-left: auto`。这样该 slot 内容会被推到 `#search-menu` 行的右侧，搜索/重置按钮留在左侧，与 vehicle/ship 的左侧标签方案相反，符合用户本次要求。
 - 验证：`vite build --outDir /tmp/pc-build-check-2` 全量编译通过。
+
+## shipping-template 新增/编辑弹窗居中 + 加高（对齐 customer-archive）
+
+- 需求：用户反馈 `/business/shipping-template` 新增弹窗「没居中、高度不够高」，要求参照 `/vehicle/customer-archive` 的做法。
+- 根因排查：
+  - shipping-template 的弹窗是 avue-crud 内置弹窗（business-crud-page + `:crud-option`，`$refs.crud.rowAdd()` 触发），option 里 `dialogWidth:'96%'`、`dialogTop:'10px'`。
+  - avue 把 `dialogTop` 映射为 Element Plus `--el-dialog-margin-top`，`'10px'` 把弹窗死顶在顶部 → 视觉「没居中」。
+  - avue 内置 footer（`.avue-dialog__footer`）渲染在**可滚动 body 内部**，不像 customer-archive 那样用 `#footer` 插槽在滚动区之外；字段多时「保存」按钮要滚动才看得到 → 视觉「高度不够高」。
+  - customer-archive 真正做法是：手写 `<el-dialog width="92%" top="4vh">` + `#footer` 按钮浮动 + body `max-height:72vh` 内部滚动。
+- 改动：
+  1. `src/option/business/shipping-template.js`：`dialogWidth:'96%'→'92%'`、`dialogTop:'10px'→'4vh'`，新增 `dialogCustomClass:'shipping-template-dialog'`（avue 会把它作为 class 加到 dialog 上，作为样式钩子）。
+  2. `src/styles/element-ui.scss`：新增 `.shipping-template-dialog` 规则——弹窗体 `height: calc(100vh - 4vh - 24px)` + flex 列布局占满视口（顶部 4vh、底部留白，视觉居中高大）；body `max-height:none !important; overflow-y:auto` 解除全局 80vh 上限；`.avue-dialog__footer` 用 `position:sticky; bottom:0; background:#fff` 贴底始终可见，对齐 customer-archive 浮动按钮效果。
+- 注意：class 唯一，仅作用于 shipping-template（business-crud-page 被多页共用，但其余页 option 未设该 class）；弹窗 `append-to-body`，故样式必须放全局（element-ui.scss）而非组件 scoped 样式。
+- 验证：dev server(2889) HMR 自动生效；刷新后重开「新增」即可见效果（未跑全量 build，改动为纯 CSS + option 属性）。
+
+## transport-plan 新增/编辑弹窗固定 72vh（对齐 customer-archive 视觉）
+
+- 需求：用户要求 `/business/transport-plan` 新增/编辑弹窗高度 72vh，与 `/vehicle/customer-archive` 视觉一致。
+- 排查发现：上次给 shipping-template 加的 `.shipping-template-dialog` 全局 CSS 规则**未持久化**（option 钩子 `dialogCustomClass:'shipping-template-dialog'` 还在，但 `element-ui.scss` 里对应规则丢失），即 shipping-template 弹窗样式实际一直未生效。本次一并补回。
+- 改动：
+  1. `src/option/business/transport-plan.js`：补 `dialogCustomClass:'transport-plan-dialog'`（option 已有 `dialogWidth:'96%'`、`dialogTop:'4vh'`）。
+  2. `src/styles/element-ui.scss`：
+     - 补回 `.shipping-template-dialog` 规则（弹窗体 `height: calc(100vh - 4vh - 24px)` 占满视口 + flex 列布局；body `max-height:none !important; overflow-y:auto`；`.avue-dialog__footer { position:sticky; bottom:0; background:#fff }` 贴底）。
+     - 新增 `.transport-plan-dialog` 规则（弹窗体用 `height:72vh` **固定**高度，内容少时 body 下方留白、内容多时窗内滚动；footer 同样 sticky 贴底）。
+- 关键技术点：Avue 内置弹窗 footer 的真实 class 是 `.avue-dialog__footer`，且**渲染在 `.el-dialog__body` 内部**；贴底必须用 `position: sticky; bottom: 0`（flex `margin-top:auto` 在滚动容器内仍会随内容滚走，无效）。这与手写 el-dialog（footer 在 body 外、class 为 `.el-dialog__footer`）不同。
+- 验证：dev server(2889) HMR 自动生效；刷新后重开「新增」即可见（弹窗固定 72vh、底部"提交/取消"常驻可见）。
+
+## contract-manage 新增/编辑弹窗也改为接近全屏
+
+- 用户要求 `/business/contract-manage` 新增/编辑弹窗同样接近全屏（与前几个 business 弹窗对齐）。
+- 机制：该页同样用 `business-crud-page` 封装 → avue-crud 弹窗（带 `avue-crud__dialog` class），与 waybill-manage 完全一致。
+- 改动：
+  1. `src/option/business/contract-manage.js`：该文件 option 在 `createCrudOption([...])` 之后本就用 `option.xxx = ...` 顶层赋值（span/dialogWidth/dialogTop 等），故在末尾追加 `option.dialogCustomClass = 'contract-manage-dialog';`（无需改结构，与文件既有写法一致）。
+  2. `src/styles/element-ui.scss`：新增 `.contract-manage-dialog` 四条规则，复刻 waybill-manage 方案——`height/max-height: calc(100vh - 40px) !important` 压过库内置 `.avue-dialog` 的 200px 上限；`.el-dialog__header { flex:none }`、`.el-dialog__body { flex:1 1 auto; min-height:0; max-height:none !important; overflow-y:auto }` 解开全局 avue-crud 200px body 限制；`.avue-dialog__footer { position:sticky; bottom:0; margin-top:0 !important; background:#fff }` 抵消全局 footer 的 -30px 上移。

.workbuddy/memory/MEMORY.md

@@ -31,6 +31,11 @@
   - `.el-dialog__body { max-height: calc(100vh - 200px); overflow-y: auto; overflow-x: hidden; }` —— 内容超高时独立滚动，footer（位于 body 之外）始终可见。
   - `.el-dialog__footer { margin:0; padding:12px 20px; background:#fff; border-top:1px solid var(--el-border-color-lighter,#ebeef5); box-shadow:0 -2px 8px rgba(0,0,0,.04); border-radius:0 0 var(--el-dialog-border-radius,4px); .el-button+.el-button{margin-left:8px} }` —— 视觉底栏（白底+上边框+轻阴影），与主内容区分。
 - **注意**：`.el-dialog__body` 的 `max-height` 会作用于所有弹窗（含纯展示/表格弹窗），无 footer 的弹窗不受影响；project-apply 自身 `.project-apply-dialog .el-dialog__body{76vh}` 特异性更高仍优先。如需让某弹窗豁免，加更具体 class 覆盖即可。
+- **Avue 内置 CRUD 弹窗的 footer 真实 class（重要，易踩坑）**：Avue 内置弹窗的"提交/取消"按钮 class 是 `.avue-dialog__footer`（**不是** `.el-dialog__footer`），且**渲染在 `.el-dialog__body` 内部**、随 body 滚动会滚出视口。要让它像手写 `#footer` 那样始终贴底，必须针对 `.avue-dialog__footer` 用 `position: sticky; bottom: 0; flex: none; background: #fff`（配合 body `flex` 列布局 + `overflow-y:auto`）。手写 `el-dialog` 的 footer 才是 `.el-dialog__footer` 且在 body 外、天然可见。典型落地见 `shipping-template-dialog` / `transport-plan-dialog` 两条全局规则。
+- **弹窗高度链分层（重要，易混淆）**：
+  - `.avue-dialog { max-height: calc(100% - 200px); min-height: 176px; display: flex; flex-direction: column; ... }` —— 这是 **Avue 库自身内置**（src/ 与 node_modules 源码都搜不到出处），作用在弹窗容器外层，控制整体高度上限（视口减去 200px 安全区）；项目改不动根，只能用 `!important`/更高特异性覆盖。
+  - `.avue-crud__dialog .el-dialog__body { max-height: calc(100vh - 200px); overflow-y: auto; }` —— 见 `src/styles/element-ui.scss` 451-457 行，作用于 avue 内置 CRUD 弹窗 body，让内容超出时 body 内滚动（注意是 **100vh**，且仅作用于 `.avue-crud__dialog` 限定范围内）。
+  - 特定页面专项弹窗（如 `shipping-template-dialog` / `transport-plan-dialog`）的 `.el-dialog` 自身用 `margin-top:4vh !important; height/max-height: calc(100vh - 4vh - 24px) 或 72vh; display: flex; flex-direction: column` 重新分配高度，并配合 `.el-dialog__header { flex:none }` / `.el-dialog__body { flex:1 1 auto; min-height:0; overflow-y:auto; max-height:none !important }` / `.avue-dialog__footer { position:sticky; bottom:0; flex:none; background:#fff }` 三段 flex 分摊。**改 shipping-template 这类弹窗尺寸，只改这些 section-card 周边规则即可，不要动 body 内的 `max-height`**。
 
 ### 上传证件区域尺寸规范（transportCapacity 模块强制）
 - **比例**：中国二代身份证标准尺寸 85.6 × 53.98 mm → 宽:高 = **1.586 : 1**（横放）
@@ -72,3 +77,8 @@
 
 ## 环境注意
 - Vite 代理跨域：Saber3 axios 开 `withCredentials=true`，直连绝对地址后端须让 CORS `Allow-Origin` 为具体域名（不能用 `*`），否则浏览器拒绝。改 `.env`/`vite.config.mjs` 必须重启 dev。
+
+### business-crud-page 封装页面的弹窗高度改法（重要，复用模式）
+- `src/views/business/components/business-crud-page.vue` 被 waybill-manage / transport-plan 等多个业务页共用，内部 `<avue-crud :option="option">`，option 由传入 prop `crudOption` 经 `cloneOption`（组件内 6261 行，浅展开+重映射 column，**保留所有顶层属性**）克隆而来。
+- 因此给各业务页 `option` 顶层加 `dialogCustomClass: 'xxx-dialog'`，再在 `element-ui.scss` 写 `.xxx-dialog.el-dialog { height/max-height: calc(100vh - 40px) !important; ... }` 等规则，即可**只影响该页**、不波及其他共用页面（已验证 waybill-manage / transport-plan 走同一机制生效）。
+- 注意 avue-crud 弹窗带 `avue-crud__dialog` class，会被全局 `.avue-crud__dialog .avue-dialog__footer { margin-top: -30px !important }`（element-ui.scss 863 行）影响，自定义 footer 规则需加 `margin-top: 0 !important` 抵消；纯 dialog-form 弹窗（如 shipping-template）无此 class 不受影响。

src/option/business/contract-manage.js

@@ -619,6 +619,7 @@ export const option = createCrudOption([
 
 option.span = 8;
 option.dialogWidth = 1480;
-option.dialogTop = '10px';
+option.dialogTop = '4vh';
 option.dialogCloseBtn = true;
 option.menuWidth = 320;
+option.dialogCustomClass = 'contract-manage-dialog';

src/option/business/process-config.js

@@ -181,7 +181,7 @@ export const option = {
   viewBtn: false,
   editBtn: false,
   delBtn: false,
-  dialogTop: '10px',
+  dialogTop: '4vh',
   dialogWidth: '96%',
   menuWidth: 220,
 };

src/option/business/shipping-template.js

@@ -270,6 +270,8 @@ export const option = {
       })),
     ])
   ),
-  dialogWidth: '96%',
-  dialogTop: '10px',
+  dialogWidth: '92%',
+  dialogTop: '4vh',
+  // 自定义弹窗 class，用于让新增/编辑弹窗体占满视口高度、视觉居中（参照 vehicle/customer-archive）
+  dialogCustomClass: 'shipping-template-dialog',
 };

src/option/business/transport-plan.js

@@ -603,4 +603,6 @@ export const option = {
     ])
   ),
   dialogWidth: '96%',
+  dialogTop: '4vh',
+  dialogCustomClass: 'transport-plan-dialog',
 };

src/option/business/waybill-manage.js

@@ -324,6 +324,7 @@ export const config = {
 };
 
 export const option = {
+  dialogCustomClass: 'waybill-manage-dialog',
   ...createCrudOption(
     withSearchPlaceholders([
       {
@@ -708,7 +709,7 @@ export const option = {
         searchLabel: '状态',
         searchOrder: 11,
         dicData: waybillStatusOptions,
-        minWidth: 120,
+        minWidth: 82,
         fixed: 'right',
         addDisplay: false,
         editDisplay: false,
@@ -931,6 +932,6 @@ export const option = {
     ])
   ),
   dialogWidth: '96%',
-  dialogTop: '10px',
+  dialogTop: '4vh',
   menuWidth: 280,
 };

src/styles/element-ui.scss

@@ -247,7 +247,7 @@
   background: #fff;
   border-radius: 6px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  padding: 24px; // 加大内边距，与 customer-archive 对齐
+  padding: 8px 16px 4px; // 加大内边距，与 customer-archive 对齐
   margin-bottom: 0; // 与下方 footer 无缝衔接
 }
 
@@ -456,6 +456,136 @@
   //background: #f5f6fa;
 }
 
+// 发货模板新增/编辑弹窗：参照 vehicle/customer-archive 的视觉
+// 弹窗体接近全屏（上下各留 20px 边距），内容较少时也保持高大、视觉居中；
+// 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限，
+// 改由 flex 控制，底部操作栏（avue 内置 footer，渲染在 body 内部）sticky 贴底始终可见
+.shipping-template-dialog.el-dialog {
+  margin-top: 20px !important;
+  margin-bottom: 20px !important;
+  height: calc(100vh - 40px);
+  max-height: calc(100vh - 40px) !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.shipping-template-dialog .el-dialog__header {
+  flex: none;
+}
+
+.shipping-template-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none !important;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.shipping-template-dialog .avue-dialog__footer {
+  position: sticky;
+  bottom: 0;
+  flex: none;
+  background: #fff;
+}
+
+// 运输计划新增/编辑弹窗：参照 vehicle/customer-archive，弹窗体接近全屏（上下各留 20px 边距）；
+// 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限，
+// 改由 flex 控制，底部操作栏（avue 内置 footer，渲染在 body 内部）sticky 贴底始终可见
+.transport-plan-dialog.el-dialog {
+  margin-top: 20px !important;
+  margin-bottom: 20px !important;
+  height: calc(100vh - 40px);
+  max-height: calc(100vh - 40px) !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.transport-plan-dialog .el-dialog__header {
+  flex: none;
+}
+
+.transport-plan-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none !important;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.transport-plan-dialog .avue-dialog__footer {
+  position: sticky;
+  bottom: 0;
+  flex: none;
+  background: #fff;
+}
+
+// 运单管理新增/编辑弹窗：参照 vehicle/customer-archive，弹窗体接近全屏（上下各留 20px 边距）；
+// 同时覆盖 Avue 库内置 .avue-dialog 的 max-height: calc(100% - 200px) 上限，
+// 并解开 .avue-crud__dialog .el-dialog__body 的 max-height: calc(100vh - 200px) 限制；
+// 底部操作栏（avue 内置 footer，渲染在 body 内部）sticky 贴底始终可见
+// （额外用 margin-top: 0 !important 抵消全局 .avue-crud__dialog .avue-dialog__footer 的 -30px 上移）
+.waybill-manage-dialog.el-dialog {
+  margin-top: 20px !important;
+  margin-bottom: 20px !important;
+  height: calc(100vh - 40px);
+  max-height: calc(100vh - 40px) !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.waybill-manage-dialog .el-dialog__header {
+  flex: none;
+}
+
+.waybill-manage-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none !important;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.waybill-manage-dialog .avue-dialog__footer {
+  position: sticky;
+  bottom: 0;
+  flex: none;
+  margin-top: 0 !important;
+  background: #fff;
+}
+
+// 合同管理新增/编辑弹窗（business-crud-page 封装 → avue-crud，弹窗带 avue-crud__dialog class）
+// 复刻 waybill-manage 方案：接近全屏、压过库内置 .avue-dialog 的 calc(100% - 200px)，
+// 并解开 body 的 200px 上限、抵消全局 footer 的 -30px 上移
+.contract-manage-dialog.el-dialog {
+  margin-top: 20px !important;
+  margin-bottom: 20px !important;
+  height: calc(100vh - 40px);
+  max-height: calc(100vh - 40px) !important;
+  display: flex;
+  flex-direction: column;
+}
+.contract-manage-dialog .el-dialog__header {
+  flex: none;
+}
+.contract-manage-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: none !important;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+.contract-manage-dialog .avue-dialog__footer {
+  position: sticky;
+  bottom: 0;
+  flex: none;
+  margin-top: 0 !important;
+  background: #fff;
+}
+
 // 统一表格线条颜色
 .el-table {
   --el-table-border-color: #eff1f7;

src/views/business/loading-manage.vue

@@ -1,7 +1,7 @@
 <template>
   <basic-container class="loading-manage-page">
     <div class="loading-manage-page__search">
-      <el-form :model="searchForm" label-position="right" label-width="160px">
+      <el-form :model="searchForm" label-position="right" label-width="88px">
         <div class="loading-manage-page__search-grid">
           <el-form-item label="配载单号">
             <el-input v-model="searchForm.loadingNo" clearable placeholder="请输入" />
@@ -765,7 +765,7 @@
                 @drop="handleRouteDrop(index)"
               >
                 <el-icon class="loading-manage-dialog__route-handle"><Rank /></el-icon>
-                <span class="loading-manage-dialog__route-type">{{ routeTypeText(index) }}</span>
+                <span :class="['loading-manage-dialog__route-type', `loading-manage-dialog__route-type--${routeTypeClass(index)}`]">{{ routeTypeText(index) }}</span>
                 <span class="loading-manage-dialog__route-address">{{ node.address }}</span>
                 <span class="loading-manage-dialog__route-tags">
                   <el-tag v-for="tag in node.tags" :key="tag" size="small">{{ tag }}</el-tag>
@@ -922,7 +922,7 @@
               <el-table-column label="到货地" min-width="310"><template #default="{ row }"><div class="loading-route-change-dialog__original">原：{{ row.originalArrivalAddress || '-' }}</div><el-input v-model="row.arrivalAddress" placeholder="请选择或输入地址" @input="updateRouteChangeNodes"><template #suffix><el-icon class="loading-route-change-dialog__location" @click="openCommonAddressDialog(row, 'arrival')"><Location /></el-icon></template></el-input></template></el-table-column>
             </el-table>
           </section-card>
-          <section-card title="路线编辑"><template #extra><span class="loading-route-change-dialog__hint">拖拽调整顺序</span></template><div v-if="routeChangeNodes.length" class="loading-route-change-dialog__route-list"><div v-for="(node, index) in routeChangeNodes" :key="node.key || index" class="loading-route-change-dialog__route-item" draggable="true" @dragstart="handleRouteChangeDragStart(index)" @dragover.prevent @drop="handleRouteChangeDrop(index)"><span class="loading-route-change-dialog__route-type">{{ routeChangeTypeText(index) }}</span><span>{{ node.address }}</span><span class="loading-route-change-dialog__tags"><el-tag v-for="tag in node.tags || []" :key="tag" size="small">{{ tag }}</el-tag></span><el-icon><Rank /></el-icon></div></div><el-empty v-else description="暂无路线" :image-size="60" /></section-card>
+          <section-card title="路线编辑"><template #extra><span class="loading-route-change-dialog__hint">拖拽调整顺序</span></template><div v-if="routeChangeNodes.length" class="loading-route-change-dialog__route-list"><div v-for="(node, index) in routeChangeNodes" :key="node.key || index" class="loading-route-change-dialog__route-item" draggable="true" @dragstart="handleRouteChangeDragStart(index)" @dragover.prevent @drop="handleRouteChangeDrop(index)"><span :class="['loading-route-change-dialog__route-type', `loading-route-change-dialog__route-type--${routeChangeTypeClass(index)}`]">{{ routeChangeTypeText(index) }}</span><span>{{ node.address }}</span><span class="loading-route-change-dialog__tags"><el-tag v-for="tag in node.tags || []" :key="tag" size="small">{{ tag }}</el-tag></span><el-icon><Rank /></el-icon></div></div><el-empty v-else description="暂无路线" :image-size="60" /></section-card>
           <el-form label-width="auto"><el-form-item label="变更备注"><el-input v-model="routeChangeRemark" type="textarea" :rows="1" maxlength="200" show-word-limit placeholder="请输入" /></el-form-item></el-form>
         </el-tab-pane>
         <el-tab-pane label="变更记录" name="records"><el-table :data="routeChangeRecords" 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"><template #default="{ row }"><div class="loading-route-change-dialog__record-content">{{ row.content || '-' }}</div></template></el-table-column><el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip/></el-table><el-empty v-if="!routeChangeRecords.length" description="暂无变更记录" :image-size="60"/></el-tab-pane>
@@ -1611,6 +1611,11 @@ export default {
       if (index === this.routeChangeNodes.length - 1) return '终';
       return '经';
     },
+    routeChangeTypeClass(index) {
+      if (index === 0) return 'start';
+      if (index === this.routeChangeNodes.length - 1) return 'end';
+      return 'middle';
+    },
     handleRouteChangeDragStart(index) {
       this.routeChangeDragIndex = index;
     },
@@ -1832,6 +1837,11 @@ export default {
       if (index === this.routeNodes.length - 1) return '终';
       return '经';
     },
+    routeTypeClass(index) {
+      if (index === 0) return 'start';
+      if (index === this.routeNodes.length - 1) return 'end';
+      return 'middle';
+    },
     handleRouteDragStart(index) {
       this.routeDragIndex = index;
     },
@@ -2390,7 +2400,10 @@ export default {
     text-align: center;
     border-radius: 50%;
     color: #fff;
-    background: #409eff;
+
+    &--start { background: #409eff; }
+    &--middle { background: #e6a23c; }
+    &--end { background: #67c23a; }
   }
 
   .loading-manage-dialog__route-address {
@@ -2475,7 +2488,20 @@ export default {
   .loading-detail__process-actions .el-select { width: 180px; }
   .loading-detail__map { width: 100%; min-height: 260px; border: 1px solid #eff1f7; }
 }
-.loading-route-change-dialog { .loading-route-change-dialog__original { color: #a8abb2; line-height: 20px; margin-bottom: 4px; }.loading-route-change-dialog__location { cursor: pointer; color: #909399; }.loading-route-change-dialog__hint { color: #909399; }.loading-route-change-dialog__route-list { display: flex; flex-direction: column; gap: 8px; }.loading-route-change-dialog__route-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 24px; align-items: center; gap: 12px; padding: 10px 12px; background: #f5f6f7; cursor: move; }.loading-route-change-dialog__route-type { width: 30px; height: 30px; border-radius: 50%; background: #dcdfe6; text-align: center; line-height: 30px; }.loading-route-change-dialog__tags { display: flex; gap: 4px; }.loading-route-change-dialog__record-content { white-space: normal; overflow-wrap: anywhere; line-height: 22px; } }
+.loading-route-change-dialog {
+  .loading-route-change-dialog__original { color: #a8abb2; line-height: 20px; margin-bottom: 4px; }
+  .loading-route-change-dialog__location { cursor: pointer; color: #909399; }
+  .loading-route-change-dialog__hint { color: #909399; }
+  .loading-route-change-dialog__route-list { display: flex; flex-direction: column; gap: 8px; }
+  .loading-route-change-dialog__route-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 24px; align-items: center; gap: 12px; padding: 10px 12px; background: #f5f6f7; cursor: move; }
+  .loading-route-change-dialog__route-type { width: 30px; height: 30px; border-radius: 50%; text-align: center; line-height: 30px; color: #fff;
+    &--start { background: #409eff; }
+    &--middle { background: #e6a23c; }
+    &--end { background: #67c23a; }
+  }
+  .loading-route-change-dialog__tags { display: flex; gap: 4px; }
+  .loading-route-change-dialog__record-content { white-space: normal; overflow-wrap: anywhere; line-height: 22px; }
+}
 .loading-common-address-dialog__toolbar { display: flex; gap: 8px; margin-bottom: 12px; }.loading-common-address-dialog__toolbar .el-input { flex: 1; }
 @media (max-width: 900px) {
   .loading-manage-dialog__grid {