恢复账单明细入口并完善采购状态展示

AGENTS.md

@@ -73,11 +73,12 @@
 
 ## UI 与交互
 
+- 后续客户端新增、新建、下单操作统一执行 [Client 界面样式规范](../../docs/Client界面样式规范.md) 的“新增页面”章节，作为当前通用外观依据；列表按同文列表条款。只读取本轮适用章节，不因规范更新批量改造其他操作或公共外框。
 - 视觉还原、布局/交互承载方式变更或真实页面验收时读取 `../../docs/Admin-Client前端原型还原验收规则.md`，只为受影响操作形成原型核对矩阵；纯文案、逻辑或测试修改不自动读取。自动检查与人工视觉验收分开报告，无视觉变化时标记“无需视觉验收”。
-- 已向客户讲解或确认过的产品原型是页面视觉与布局实现的直接事实来源。字段顺序、字段分组、字段摆放、列宽、控件宽高、对齐方式、换行方式、区块层级、上下左右边距、内边距、间隙、留白、圆角、边框、阴影、背景色、文字颜色和字号均必须按原型还原，不得只参考大致风格后自行重新排版。
+- 已向客户讲解或确认过的产品原型是页面字段、分组、摆放及承载方式的直接依据；新增页的通用外观以当前 Client 样式规范明确替代的条款为准。未被替代的列宽、控件宽高、对齐方式、换行方式、区块层级、边距、圆角、边框、阴影、背景色、文字颜色和字号仍按原型还原，不得只参考大致风格后自行重新排版。
 - 原型中的按钮位置、顺序、尺寸、圆角、边框、背景色、文字色、图标、悬停态、激活态、禁用态和危险语义必须直接按原型实现；不得擅自改为文字链接、不同颜色、不同按钮类型、折叠菜单或自创交互效果，也不得增加原型没有的上浮、缩放、渐变线、装饰图标或其他视觉元素。
 - 原型已经给出明确图标、字符图标、图片资源或按钮内图标时，直接使用原型中的同一方案和资源，不得以 Lucide、Element Plus 默认图标、手绘图标或个人偏好替换。仅当原型没有定义对应图标时，才按本节的默认图标语义补齐。
-- 上述原型还原规则优先于本文件中“延续现有视觉体系”、默认组件样式和默认图标库等一般性规则。只有用户当前明确要求、阶段范围、真实字段长度、响应式、可访问性或接口事实与原型冲突时才允许做最小调整，并须在修改前说明具体差异、原因和影响范围；不得以技术实现方便为由偏离原型。
+- 当前 Client 样式规范明确替代的外观及上述原型还原规则，优先于本文件中“延续现有视觉体系”、默认组件样式和默认图标库等一般性规则。后续用户明确确认的例外优先；阶段范围、真实字段长度、响应式、可访问性或接口事实与原型冲突时只做最小调整，并须在修改前说明具体差异、原因和影响范围，不得以技术实现方便为由偏离。
 - 详情、新增、编辑、审核等操作采用独立页面、居中弹框、侧滑面板或其他承载方式，必须逐页面按对应原型确认，不得全局写死为某一种容器。原型为独立页面时使用正式路由和页面布局；原型为居中弹框时使用模态弹框；只有原型明确为侧滑面板时才使用抽屉。不得因为已有公共组件或改动方便，把原型中的独立页面改成弹框、把弹框改成抽屉，或反向替换。
 - 延续现有客户工作台的可信、简洁和服务型视觉语言，与内部管理后台保持品牌关联但不照搬高密度管理界面。
 - 优先使用 Element Plus 和 Lucide 图标；不使用表情符号代替功能图标，不引入第二套组件库。

docs/business-index.md

@@ -23,10 +23,10 @@
 | 统一订单展示 | `src/modules/order-management/` | `src/modules/first-leg/` 与对应后端订单契约 |
 | 客户财务账单、入仓码联查、收款、未收余额与客户确认 | `src/modules/finance/`；确认与明细入口 `views/FinanceBillsView.vue`、`api/finance.ts`，入仓码通过 `src/modules/first-leg/public.ts` 复用 `InboundCodeAssociationDialog` | Backend `finance/`；账单行只显示服务端 `inboundCode` 并按登录客户查询业务关系，缺失显示“—”，不得回退内部 ID。收款方式由服务端枚举映射中文。出账或已出账调整后为 `PENDING_CONFIRMATION`，客户确认提交登录成员、`expectedVersion` 和幂等键 |
 | 客户资金账户、授信与充值申请 | `src/modules/finance/views/FinanceAccountView.vue`、`api/account.ts` | 显示当前企业 CNY 实际余额、冻结金额、授信额度、授信有效期、已用授信、冻结授信、总可用余额和不可变流水；数据加载前显示“—”，不得先伪装为零。授信到期日当天仍有效，次日已用授信并入实际余额，负数实际余额会阻止提交新订单。充值只展示服务端启用的平台统一静态收款码，客户上传 JPG/PNG 付款截图后进入待审核。客户范围只取登录态，无收款码时禁止提交，不模拟支付成功 |
-| 海外采购 | `src/modules/cross-border/routes.ts`、`views/ProcurementView.vue`、`components/ProcurementDetailPanel.vue`、`api/procurement.ts` | 独立列表、新建及详情路由；客户范围只取 Token，创建的 `customerName` 只取认证会话企业名称。详情消费独立客户投影，展示履约、已确认箱明细、实际运单和费用结果，不开放内部文件或平台操作。Backend `lastleg-service/procurement/` |
+| 海外采购 | `src/modules/cross-border/routes.ts`、`views/ProcurementView.vue`、`components/ProcurementDetailPanel.vue`、`api/procurement.ts` | 独立列表、新建及详情路由；客户范围只取 Token，创建的 `customerName` 只取认证会话企业名称。七状态简化流程展示分批收货、分批出库与费用，待客户确认时提供当前客户确认动作；不开放内部文件或平台操作。Backend `lastleg-service/procurement/`；规则见 `baiyue-firstleg/lastleg-service/docs/procurement-workflow.md`（工作区路径） |
 | 美国本土卡与美本土散板 | `src/modules/cross-border/routes.ts`、`components/BusinessOrdersView.vue`、`api/businessOrders.ts` | 两个运输业务共用列表/表单组件，客户范围只取 Token；不消费采购字段或状态。Backend `lastleg-service/` 的 `trucking/`、`looseboard/` 客户接口 |
 | 海外仓入库订单 | `src/modules/order-management/routes.ts`、`views/InboundOrdersView.vue`、`api/inboundPlans.ts` | `orders/inbound` 为只读列表/详情，权限 `merchant:warehouse:inbound:list`；不展示或提交内部 ID |
-| 海外仓贴标、仓储转运、货物废弃 | `src/modules/overseas-warehouse/routes.ts`、`views/WarehouseServiceView.vue`、`api/warehouseServices.ts` | 三个路由均为 `active`；退货预报另见本节独立入口；贴标申请先选国外中转仓和有库存历史入仓单，换标类型为只换 SKU、只换箱唛、SKU+箱唛。涉及箱唛换标时，整张贴标申请只选择一个 FBA 目的仓，全部箱级明细统一提交该目的仓，模板和明细不再逐行选择目的仓。箱唛换标明细一行固定代表一箱，箱数不可编辑，提交也固定为 1。货物明细外层始终提供“SKU 关联”“箱号关联”“SKU 混箱换标”三套模板的下载、上传，不随换标类型切换；上传只进入待导入关系区，客户可勾选部分或全选后导入本次明细，只有进入明细的库存才随申请提交和冻结。明细也支持手动新增编辑，组合换标以仓库唛头连接旧/新 SKU 和新 FBA 箱唛关系。涉及箱唛换标时必须选择卡车、自提或快递；快递可选择打印面单并上传 PDF/图片。PDA 逐箱换标、上传照片并由仓库复核后，客户详情展示完工照片和“换标完成确认”；客户确认前不得继续出库，确认后卡车进入预排车，自提/快递进入换标出库待创建。历史库存位置不能解释成箱唛与具体托盘快照，客户页面不暴露托盘、库位和内部库存 ID |
+| 海外仓贴标、仓储转运、货物废弃 | `src/modules/overseas-warehouse/routes.ts`、`views/WarehouseServiceView.vue`、`api/warehouseServices.ts` | 三个路由均为 `active`；退货预报另见本节独立入口；贴标申请先选国外中转仓和有库存历史入仓单，换标类型为只换 SKU、只换箱唛、SKU+箱唛。涉及箱唛换标时，整张贴标申请只选择一个 FBA 目的仓，全部箱级明细统一提交该目的仓，模板和明细不再逐行选择目的仓。箱唛换标明细一行固定代表一箱，箱数不可编辑，提交也固定为 1。货物明细外层提供统一贴标明细模板，使用“贴标类型”列区分只换箱唛、只换 SKU 标签和 SKU+箱唛三种模式；上传只进入待导入关系区，客户可勾选部分或全选后导入本次明细，同一份文件不得混用多种类型，只有进入明细的库存才随申请提交和冻结。明细也支持手动新增编辑，组合换标以仓库唛头连接旧/新 SKU 和新 FBA 箱唛关系。涉及箱唛换标时必须选择卡车、自提或快递；快递可选择打印面单并上传 PDF/图片。PDA 逐箱换标、上传照片并由仓库复核后，客户详情展示完工照片和“换标完成确认”；客户确认前不得继续出库，确认后卡车进入预排车，自提/快递进入换标出库待创建。历史库存位置不能解释成箱唛与具体托盘快照，客户页面不暴露托盘、库位和内部库存 ID |
 
 ## Client 全量验收快速索引
 
@@ -38,3 +38,5 @@
 | 履约、海外仓与财务 | 入库计费、柜次进度、船期、海外仓贴标/转运/废弃/退货换标、消息和客户账单 | `src/modules/first-leg/`、`overseas-warehouse/`、`finance/`、`notifications/`；按服务端权限核对客户可见字段、客户隔离和只读/写入边界 |
 
 客户侧边界：仍以服务端权限和客户可见字段为准；PDA、平台后台操作和内部证据不因全量验收自动暴露到 Client。财务按 `../../docs/财务管理/` 与 `src/modules/finance/routes.ts` 定位。
+
+- 货物废弃：有箱唛按具体箱选择，备注选填；无箱唛但有托盘时只填申请总箱数与必填备注，预留相关托盘供PDA扫描现场箱唛自动计数。详情展示废弃备注、托盘、实际废弃箱唛与实际数量；现场扫描清单与申请选箱快照分别展示。

src/auto-imports.d.ts

@@ -6,5 +6,5 @@
 // biome-ignore lint: disable
 export {}
 declare global {
-
+  const ElMessageBox: typeof import('element-plus/es').ElMessageBox
 }

src/components/ClientSidebarMenu.vue

@@ -5,6 +5,7 @@ import {
   clientNavigation,
   filterNavigationByPermissions,
   getNavigationParentKeys,
+  getNavigationLeaves,
 } from '@/navigation/clientNavigation'
 import { useAuthStore } from '@/modules/auth/public'
 import { useCustomsPendingStore } from '@/modules/first-leg/public'
@@ -40,8 +41,11 @@ onBeforeUnmount(() => {
 })
 
 const visibleNavigation = computed(() => filterNavigationByPermissions(clientNavigation, auth.permissionCodes))
+const activeNavigationPath = computed(() => getNavigationLeaves(visibleNavigation.value)
+  .filter(node => node.path === props.activePath || (node.path !== '/' && props.activePath.startsWith(`${node.path}/`)))
+  .sort((left, right) => right.path.length - left.path.length)[0]?.path ?? props.activePath)
 
-const activeParentKeys = computed(() => new Set(getNavigationParentKeys(visibleNavigation.value, props.activePath)))
+const activeParentKeys = computed(() => new Set(getNavigationParentKeys(visibleNavigation.value, activeNavigationPath.value)))
 const openedKeys = ref<ReadonlySet<string>>(new Set(activeParentKeys.value))
 // Expand the order group by default so the three customer order shortcuts are visible.
 openedKeys.value = new Set([...openedKeys.value, 'order-center'])
@@ -73,7 +77,7 @@ function handleSelect(path: string) {
       :key="node.key"
       :node="node"
       :badges="badges"
-      :active-path="activePath"
+      :active-path="activeNavigationPath"
       :opened-keys="openedKeys"
       :active-parent-keys="activeParentKeys"
       :level="0"

src/components/ClientSidebarMenuNode.vue

@@ -27,6 +27,7 @@ const groupId = computed(() => `client-nav-group-${props.node.key}`)
   <li
     class="client-nav-node"
     v-if="node.children"
+    :data-nav-key="node.key"
     :class="{
       'has-divider-before': node.dividerBefore,
       'is-active-parent': activeParentKeys.has(node.key),
@@ -69,7 +70,7 @@ const groupId = computed(() => `client-nav-group-${props.node.key}`)
     </ul>
   </li>
 
-  <li v-else class="client-nav-node" :class="{ 'has-divider-before': node.dividerBefore }">
+  <li v-else class="client-nav-node" :data-nav-key="node.key" :class="{ 'has-divider-before': node.dividerBefore }">
     <RouterLink
       :to="node.path"
       class="client-sidebar-link"

src/modules/cross-border/AGENTS.md

@@ -21,7 +21,7 @@
 - 三条线都是客户自助下单，提交后由平台审核；客户侧不提供审核、改价或内部作业动作。
 - 客户与仓库范围只取服务端当前租户上下文，不从前端参数推断；跨客户查询一律拒绝。
 - 提交需要幂等键、提交中状态与可恢复失败反馈；失败保留已填内容。
-- 海外采购的购买、装箱、面单、交寄与国内核费是一条独立链路，改节点前先读 `docs/海外仓业务/采购订单样品履约流程变更需求.md`（工作区路径）。
+- 海外采购按 `baiyue-firstleg/lastleg-service/docs/procurement-workflow.md`（工作区路径）的七状态流程执行；详情展示分批收货、出库与费用，待客户确认时由当前客户确认，不恢复旧装箱与两段核费节点。
 - 页面承载方式按已确认原型：列表 + 独立建单/详情路由，不改为弹框或抽屉。
 
 ## 验证

src/modules/cross-border/PROTOTYPE_MATRIX.md

@@ -32,3 +32,19 @@
 | 两类业务 | 列表、详情、承运安排 | 既有独立路由及只读承运摘要 | 本轮不改变承载；Client 不新增编辑路由 | 既有行为回归 |
 
 统一表单组件和转换逻辑各自位于应用内部，运行时不跨应用引用。两端业务组件源码一致性另作定向检查；下单数据不允许混入客户标识，Admin 在 API 参数显式选择客户，Client 由认证会话确定客户。
+
+
+2026-10-29 用户截图调整：采购待确认支持确认或必填原因驳回；四张实收/库存数量卡片置顶，商品及收件信息置底。本土卡车数量改托数，托数及预算须为正数。采购及卡车先等待Finance余额/授信冻结成功，再以同一幂等键建单；不足保留表单并提示原因。自动检查与人工视觉验收分别记录；待人工1920×1080、100%截图确认。
+
+## 海外采购下单与结果处理（2026-10-30）
+
+依据：当前对话的下单页与详情页截图，以及用户明确要求“商品链接下单必填”“下单成功返回列表”“驳回/确认移至列表，弹窗显示照片和采购数量，驳回必填理由”“确认后两个按钮隐藏”。
+
+| 页面 | 操作及承载 | 调整 | 验收 |
+|---|---|---|---|
+| 海外采购下单 | 既有独立页面 | 商品链接标记必填并校验非空及有效 HTTP/HTTPS 地址；成功返回采购列表，失败保留表单 | 定向自动测试；待人工截图确认 |
+| 海外采购列表 | 待客户确认行的操作列 | 提供详情、驳回、确认采购结果；确认/驳回成功刷新列表，离开待客户确认状态后隐藏两项动作 | 状态与权限自动测试；待人工截图确认 |
+| 采购结果确认/驳回 | 居中弹窗 | 显示单号、商品、采购数量、累计收货、逐批数量与可放大的收货照片；驳回原因必填，最多1000字；失败保留内容供重试 | 定向自动测试；待人工1920×1080、100%截图确认 |
+| 海外采购详情 | 既有独立页面 | 移除结果确认与驳回按钮，保留详情和刷新 | 源码合同核对；待人工截图确认 |
+
+2026-10-30 照片布局按用户截图反馈收紧：收货批次按横向三列排列，照片缩略图为112×84，同批照片横向排列，超出可横向滚动；保留批次数量、时间和点击放大预览。待人工截图确认。

src/modules/cross-border/api/businessOrders.ts

@@ -59,6 +59,7 @@ export interface TransportDetail {
   originAddress: string | null
   destinationAddress: string | null
   remark: string | null
+  histories?: Array<{ operationType: string; toStatus: string; remark: string | null }>
 }
 
 export interface TransportCreate {
@@ -95,7 +96,7 @@ export interface TruckCreate {
   destinationContactPhone: string
   pickupAt: string
   deliveryAt: string
-  packageCount: number
+  palletCount: number
   totalWeightKg: number
   totalVolumeCbm: number
   budgetAmount?: number

src/modules/cross-border/api/orderBudgets.ts

@@ -0,0 +1,10 @@
+import { apiRequest } from '@/api/http'
+export interface BudgetResult { status: string; usable: boolean; amountCny: number | string; message: string; orderNo: string | null }
+const base = '/merchant/v1/last-leg/order-budgets'
+// 创建订单时后端在同一事务记录冻结请求，客户端只在详情核对状态和重试明确失败。
+export function readOrderFunding(kind: 'procurement' | 'trucking', orderNo: string) {
+  return apiRequest<BudgetResult>({ method: 'GET', url: base + '/' + kind + '/orders/' + encodeURIComponent(orderNo) })
+}
+export function retryOrderFunding(kind: 'procurement' | 'trucking', orderNo: string) {
+  return apiRequest<BudgetResult>({ method: 'POST', url: base + '/' + kind + '/orders/' + encodeURIComponent(orderNo) + '/retry' })
+}

src/modules/cross-border/api/procurement.ts

@@ -1,8 +1,9 @@
-import { apiRequest } from '@/api/http'
+import { apiBlobRequest, apiRequest } from '@/api/http'
 import type { PageResult } from './businessOrders'
 
 export type Amount = number | string
 export interface ProcurementSummary {
+  procurementDirection?: import('../procurementPresentation').ProcurementDirection
   orderNo: string
   purchaseCategory: string
   productName: string
@@ -11,6 +12,7 @@ export interface ProcurementSummary {
   budgetUnitPrice: Amount | null
   currency: string | null
   status: string
+  reviewRemark?: string | null
   version: number
   createdAt: string
   updatedAt: string
@@ -24,6 +26,7 @@ export interface ProcurementOrder extends ProcurementSummary {
   plannedWarehouseName: string | null
   actualWarehouseCode: string | null
   actualWarehouseName: string | null
+  remark: string | null
 }
 export interface ProcurementFee {
   feeNo: string
@@ -73,6 +76,7 @@ export interface ProcurementDetail {
   exceptionSummaries: string[]
 }
 export interface ProcurementCreate {
+  procurementDirection?: import('../procurementPresentation').ProcurementDirection
   customerName: string
   purchaseCategory: string
   productName: string
@@ -95,6 +99,37 @@ export interface ProcurementQuery {
   purchaseCategory?: string
   status?: string
 }
+export interface ProcurementWorkflowFile { fileId: string; fileName: string; contentType: string }
+export interface ProcurementReceipt {
+  id: string
+  quantity: number
+  fileIds: string[]
+  receivedAt: string
+}
+export interface ProcurementOutbound {
+  id: string
+  outboundNo: string
+  quantity: number
+  trackingNo: string
+  status: string
+  fileIds: string[]
+  createdAt: string
+  completedAt: string | null
+}
+export interface ProcurementWorkflow {
+  orderNo: string
+  version: number
+  status: string
+  rejectionReason: string | null
+  photosNeedUpdate: boolean
+  receivedQuantity: number
+  stockQuantity: number
+  reservedQuantity: number
+  availableQuantity: number
+  files: ProcurementWorkflowFile[]
+  receipts: ProcurementReceipt[]
+  outbounds: ProcurementOutbound[]
+}
 const endpoint = '/merchant/v1/last-leg/overseas-procurements'
 export async function listProcurements(params: ProcurementQuery) {
   const result = await apiRequest<PageResult<ProcurementSummary>>({ method: 'GET', url: endpoint, params })
@@ -106,3 +141,16 @@ export function getProcurement(orderNo: string) {
 export function createProcurement(data: ProcurementCreate) {
   return apiRequest<ProcurementDetail>({ method: 'POST', url: endpoint, data })
 }
+export function getProcurementWorkflow(orderNo: string) {
+  return apiRequest<ProcurementWorkflow>({ method: 'GET', url: `${endpoint}/${encodeURIComponent(orderNo)}/workflow` })
+}
+export function confirmProcurement(orderNo: string, data: { version: number; idempotencyKey: string }) {
+  return apiRequest<ProcurementWorkflow>({ method: 'POST', url: `${endpoint}/${encodeURIComponent(orderNo)}/confirm`, data })
+}
+
+export function rejectProcurement(orderNo: string, data: { version: number; idempotencyKey: string; reason: string }) {
+  return apiRequest<ProcurementWorkflow>({ method: 'POST', url: `${endpoint}/${encodeURIComponent(orderNo)}/reject`, data })
+}
+export function getProcurementFile(orderNo: string, fileId: string) {
+  return apiBlobRequest({ method: 'GET', url: `${endpoint}/${encodeURIComponent(orderNo)}/files/${encodeURIComponent(fileId)}/content` })
+}

src/modules/cross-border/businessOrders.test.mjs

@@ -32,7 +32,7 @@ test('renders unknown pallet service and container type as dashes while preservi
 test('shows merchant-owned arrangement facts without a pool request or editable status control', () => {
   assert.match(api, /fleetArrangement: import\('\.\.\/fleetArrangement'\)\.FleetArrangement \| null/)
   assert.match(view, /aria-label="承运安排"/)
-  for (const field of ['signedPackages', 'unsignedPackages', 'returnedPackages', 'readOnlyReason']) assert.ok(view.includes(`fleetArrangement.${field}`))
+  for (const field of ['signedPackages', 'unsignedPackages', 'returnedPackages']) assert.ok(view.includes(`fleetArrangement.${field}`))
   assert.doesNotMatch(api, /capacity-offers|fleet\/trips/)
   assert.match(view, /if \(query\.page !== 1\) query\.page = 1\s+else void load\(\)/)
   assert.match(view, /if \(reloadDirectly\) void load\(\)/)
@@ -75,7 +75,9 @@ test('covers list detail create loading error empty pagination and actions-first
   assert.match(view, /<DataTable[^>]*:row-actions="getRowActions"/)
   assert.match(view, /key: 'actions', label: '操作', width: 90, fixed: 'left'/)
   assert.match(view, /class="business-table-card"/)
-  assert.doesNotMatch(procurementView, /inventoryQuantity|outboundQuantity|reviewRemark/)
+  assert.doesNotMatch(procurementView, /inventoryQuantity|outboundQuantity/)
+  assert.match(procurementView, /label: '失败 \/ 拒绝原因'/)
+  assert.match(procurementView, /reviewRemark/)
   assert.match(procurementView, /procurementStatuses/)
   assert.match(procurementView, /ProcurementDetailPanel/)
 })
@@ -119,18 +121,18 @@ test('uses the shared dense order-list and detail visual language', () => {
   assert.match(view, /\.detail-grid div \{[^}]*min-height: 34px;[^}]*grid-template-columns: 76px minmax\(0, 1fr\)/)
 })
 
-function transportHarness(kind = 'trucking', failFirst = false) {
+function transportHarness(kind = 'trucking', failFirst = false, budgetCheck = async () => {}) {
   const calls = []
   const script = view.match(/<script setup lang="ts">([\s\S]*?)<\/script>/)[1]
   const compiled = ts.transpileModule(script, { compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.ESNext } }).outputText
     .replace(/^import .*?;$/gm, '').replace(/^export \{\};$/gm, '')
-  const harness = runInNewContext(`${compiled}\n({ form, formRef, submit, detail, detailFields })`, {
+  const harness = runInNewContext(`${compiled}\n({ form, formRef, submit, detail, detailFields, configuration })`, {
     defineProps: () => ({ kind, createPage: true, detailPage: false }),
     withDefaults: props => props,
     computed: getter => ({ get value() { return typeof getter === 'function' ? getter() : getter.get() } }),
     reactive: value => value, ref: value => ({ value }), onMounted: () => {}, watch: () => {},
     useAuthStore: () => ({ hasPermission: () => true }), useRouter: () => ({ push: async () => {} }), useRoute: () => ({ params: {} }),
-    ...demandHelpers, poolOrderStatusLabels: {},
+    ...demandHelpers, poolOrderStatusLabels: {}, requireOrderBudget: budgetCheck,
     ElMessage: { success: () => {}, error: () => {} },
     createTransport: async (business, payload) => { calls.push({ business, payload: { ...payload } }); if (failFirst && calls.length === 1) throw new Error('retry'); },
   })
@@ -150,12 +152,12 @@ test('truck requires both contacts vehicle and minute times without inheriting l
   truck.form.pickupAt = '2026-10-20T09:30:00'
   let failure
   truck.rules.value.deliveryAt[1].validator({}, '2026-10-20T09:29:00', error => { failure = error })
-  assert.equal(failure.message, '送货时间不能早于取货时间')
+  assert.equal(failure.message, '送达时间不能早于取货时间')
 })
 
 test('truck retry submits the complete new contract with identical local times and idempotency key', async () => {
   const current = transportHarness('trucking', true)
-  Object.assign(current.form, { vehicleType: 'PALLET_30', origin: 'Los Angeles', destination: 'Ontario', originContactName: 'A', originContactPhone: '+1-555-0100', destinationContactName: 'B', destinationContactPhone: '+1-555-0101', pickupAt: '2026-10-20T09:30:00', deliveryAt: '2026-10-20T15:45:00' })
+  Object.assign(current.form, { vehicleType: 'PALLET_30', estimatedPalletCount: 3, budgetAmount: 100, origin: 'Los Angeles', destination: 'Ontario', originContactName: 'A', originContactPhone: '+1-555-0100', destinationContactName: 'B', destinationContactPhone: '+1-555-0101', pickupAt: '2026-10-20T09:30:00', deliveryAt: '2026-10-20T15:45:00' })
   await current.submit()
   assert.equal(current.form.destinationContactName, 'B')
   await current.submit()
@@ -164,22 +166,28 @@ test('truck retry submits the complete new contract with identical local times a
   const second = current.calls[1].payload
   assert.equal(first.idempotencyKey, second.idempotencyKey)
   assert.equal(second.vehicleType, 'PALLET_30')
+  assert.equal(second.palletCount, 3)
   assert.equal(second.originContactPhone, '+1-555-0100')
   assert.equal(second.destinationContactName, 'B')
   assert.equal(second.pickupAt, '2026-10-20T09:30:00')
   assert.equal(second.deliveryAt, '2026-10-20T15:45:00')
-  for (const field of ['transportType', 'containerType', 'palletCount', 'contactName', 'contactInfo', 'requestedDate']) assert.equal(Object.hasOwn(second, field), false)
+  for (const field of ['transportType', 'containerType', 'packageCount', 'contactName', 'contactInfo', 'requestedDate']) assert.equal(Object.hasOwn(second, field), false)
 })
 
 test('truck details render saved minute times and unknown pool demand without timezone conversion', () => {
   const current = transportHarness()
-  current.detail.value = { summary: { vehicleType: null, pickupAt: '2026-10-20T09:30:00', deliveryAt: null }, originAddress: null, destinationAddress: null, remark: null }
+  current.detail.value = { summary: { vehicleType: null, palletCount: 3, packageCount: 0, pickupAt: '2026-10-20T09:30:00', deliveryAt: null }, originAddress: null, destinationAddress: null, remark: null }
   const fields = new Map(current.detailFields.value)
   assert.equal(fields.get('车辆类型'), '—')
   assert.equal(fields.get('取货时间'), '2026-10-20 09:30')
-  assert.equal(fields.get('送货时间'), '—')
+  assert.equal(fields.get('送达时间'), '—')
   assert.equal(fields.has('柜型'), false)
   assert.equal(fields.has('托盘数'), false)
+  assert.equal(fields.get('托数'), 3)
+  assert.equal(fields.has('件数'), false)
+  const columns = current.configuration.value.columns
+  assert.equal(columns.find(column => column.label === '托数').key, 'palletCount')
+  assert.equal(columns.some(column => column.key === 'packageCount'), false)
 })
 
 
@@ -196,6 +204,12 @@ test('looseboard saves split contacts and both local minute times without obsole
   assert.equal(payload.destinationContactPhone, '2')
   assert.equal(payload.deliveryAt, '2026-10-20T15:30:00')
   assert.equal(payload.idempotencyKey, current.calls[0].payload.idempotencyKey)
+  current.detail.value = { summary: { ...payload }, originAddress: null, destinationAddress: null, remark: null }
+  const fields = new Map(current.detailFields.value)
+  assert.equal(fields.get('件数'), 8)
+  assert.equal(fields.get('预计托数'), 3)
+  assert.equal(fields.has('托数'), false)
+  assert.equal(current.configuration.value.columns.some(column => column.key === 'palletCount'), false)
   for (const field of ['palletRequired', 'transportType', 'transportMode', 'containerType', 'contactName', 'contactInfo', 'requestedDate']) assert.equal(Object.hasOwn(payload, field), false)
 })
 
@@ -208,3 +222,11 @@ test('looseboard requires both times and rejects backwards schedule', () => {
   current.rules.value.deliveryAt[1].validator({}, '2026-10-20T10:29:00', error => { failure = error })
   assert.ok(failure)
 })
+
+
+test('truck creation does not block on a separate budget reservation', async () => {
+  const current = transportHarness('trucking', false, async () => { throw new Error('旧冻结接口不应调用') })
+  Object.assign(current.form, { vehicleType: 'PALLET_30', estimatedPalletCount: 3, budgetAmount: 100, origin: 'LA', destination: 'ONT', originContactName: 'A', originContactPhone: '1', destinationContactName: 'B', destinationContactPhone: '2', pickupAt: '2026-10-20T09:00:00', deliveryAt: '2026-10-20T15:00:00' })
+  await current.submit()
+  assert.equal(current.calls.length, 1)
+})

src/modules/cross-border/components/BusinessOrdersView.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, type FormInstance } from 'element-plus'
 import TransportDemandForm from './TransportDemandForm.vue'
+import OrderFundingStatus from './OrderFundingStatus.vue'
 import { createTransportDemandForm, transportDemandError, buildTransportDemand, type TransportDemandForm as DemandFormModel } from '../transportDemandForm'
 import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
@@ -38,7 +39,7 @@ type BusinessForm = DemandFormModel
 
 const configuration = computed(() => ({
   trucking: {
-    title: '美国本土卡',
+    title: '美国本土卡车',
     description: '查询并管理美国本土卡订单',
     columns: transportColumns(false),
   },
@@ -50,19 +51,27 @@ const configuration = computed(() => ({
 })[props.kind])
 
 function transportColumns(looseboard: boolean): ColumnDefinition[] {
+  const originLabel = looseboard ? '起运地' : '取货地'
+  const destinationLabel = looseboard ? '目的地' : '送达地'
+  const pickupLabel = looseboard ? '取货时间' : '取货时间'
+  const deliveryLabel = looseboard ? '送货时间' : '送达时间'
   return [
     { key: 'orderNo', label: '订单编号', width: 180 },
     ...(!looseboard ? [{ key: 'vehicleType', label: '车辆类型', width: 110 }] : []),
-    { key: 'origin', label: '起运地', width: 150 },
-    { key: 'destination', label: '目的地', width: 150 },
+    { key: 'origin', label: originLabel, width: 150 },
+    { key: 'destination', label: destinationLabel, width: 150 },
     ...(looseboard ? [{ key: 'productName', label: '商品名称', width: 150 }, { key: 'estimatedPalletCount', label: '预计托数', width: 100 }] : []),
+    ...(!looseboard ? [{ key: 'palletCount', label: '托数', width: 80 }] : []),
     { key: 'totalWeightKg', label: '总重量(kg)', width: 120 },
     { key: 'budgetAmount', label: '预算总价', width: 110 },
     ...([
-      { key: 'pickupAt', label: '取货时间', width: 165 }, { key: 'deliveryAt', label: '送货时间', width: 165 },
+      { key: 'pickupAt', label: pickupLabel, width: 165 }, { key: 'deliveryAt', label: deliveryLabel, width: 165 },
     ]),
     { key: 'status', label: '状态', width: 130 },
-    { key: 'fleetArrangement', label: '承运安排', width: 190 },
+    ...(!looseboard ? [{ key: 'failureReason', label: '失败 / 拒绝原因', width: 240 }] : []),
+    ...(looseboard
+      ? [{ key: 'fleetArrangement', label: '承运安排', width: 190 }]
+      : [{ key: 'createdAt', label: '创建时间', width: 180 }]),
   ]
 }
 
@@ -93,13 +102,15 @@ const queryModel = computed<QueryModel>({
 
 const queryFields = computed<QueryField[]>(() => [
   { key: 'orderNo', label: '订单号', type: 'input', placeholder: '请输入订单号' },
-  { key: 'routeKeyword', label: '运输路线', type: 'input', placeholder: '请输入起运地或目的地' },
+  { key: 'routeKeyword', label: '运输路线', type: 'input', placeholder: props.kind === 'trucking' ? '请输入取货地或目的地' : '请输入起运地或目的地' },
   {
     key: 'status',
     label: '状态',
     type: 'select',
     placeholder: '全部',
     options: [
+      { label: '订单受理中', value: 'FUNDING_PENDING' },
+      { label: '订单处理失败', value: 'FUNDING_FAILED' },
       { label: '待审核', value: 'PENDING_REVIEW' },
       { label: '已通过', value: 'APPROVED' },
       { label: '已拒绝', value: 'REJECTED' },
@@ -114,6 +125,7 @@ const queryFields = computed<QueryField[]>(() => [
 ])
 
 const form = reactive<BusinessForm>(emptyForm())
+watch(() => JSON.stringify(form), () => { submitKey.value = '' })
 
 const detailFields = computed(() => {
   if (!detail.value) return []
@@ -123,13 +135,13 @@ const detailFields = computed(() => {
     ...(props.kind === 'looseboard' ? [
       ['商品名称', summary.productName], ['预计托数', summary.estimatedPalletCount],
     ] : [['车辆类型', vehicleTypeLabel(summary.vehicleType)]]),
-    ['起运地', read(summary, 'origin')], ['起运地址', current.originAddress],
-    ['目的地', read(summary, 'destination')], ['目的地址', current.destinationAddress],
-    ['件数', read(summary, 'packageCount')], ['总重量(kg)', read(summary, 'totalWeightKg')],
+    [props.kind === 'trucking' ? '取货地' : '起运地', read(summary, 'origin')], [props.kind === 'trucking' ? '取货地址' : '起运地址', current.originAddress],
+    [props.kind === 'trucking' ? '送达地' : '目的地', read(summary, 'destination')], [props.kind === 'trucking' ? '送达地址' : '目的地址', current.destinationAddress],
+    [props.kind === 'trucking' ? '托数' : '件数', read(summary, props.kind === 'trucking' ? 'palletCount' : 'packageCount')], ['总重量(kg)', read(summary, 'totalWeightKg')],
     ['总体积(m³)', read(summary, 'totalVolumeCbm')], ['预算总价', money(read(summary, 'budgetAmount'), read(summary, 'currency'))],
-    ['起运地联系人', summary.originContactName], ['起运地联系电话', summary.originContactPhone],
-    ['目的地联系人', summary.destinationContactName], ['目的地联系电话', summary.destinationContactPhone],
-    ['取货时间', localMinute(summary.pickupAt)], ['送货时间', localMinute(summary.deliveryAt)], ['备注', current.remark],
+    [props.kind === 'trucking' ? '取货联系人' : '起运地联系人', summary.originContactName], [props.kind === 'trucking' ? '取货联系电话' : '起运地联系电话', summary.originContactPhone],
+    [props.kind === 'trucking' ? '送达联系人' : '目的地联系人', summary.destinationContactName], [props.kind === 'trucking' ? '送达联系电话' : '目的地联系电话', summary.destinationContactPhone],
+    [props.kind === 'trucking' ? '取货时间' : '取货时间', localMinute(summary.pickupAt)], [props.kind === 'trucking' ? '送达时间' : '送货时间', localMinute(summary.deliveryAt)], ['备注', current.remark],
   ]
 })
 
@@ -138,7 +150,7 @@ const tableColumns = computed<DataTableColumn[]>(() => [
   ...configuration.value.columns.map((column) => ({
     ...column,
     prop: column.key,
-    slotName: ['orderNo', 'status', 'fleetArrangement'].includes(column.key) ? column.key : undefined,
+    slotName: ['orderNo', 'status', 'failureReason', 'fleetArrangement'].includes(column.key) ? column.key : undefined,
     formatter: (row: object) => displayCell(row, column.key),
   })),
 ])
@@ -158,10 +170,10 @@ function localMinute(value: unknown) { return value ? String(value).replace('T',
 function transportTypeLabel(value: unknown) { return ({ PORT_PICKUP: '港口提柜', WAREHOUSE_TO_WAREHOUSE: '仓到仓', WAREHOUSE_TO_DOOR: '仓到门' } as Record<string, string>)[String(value)] || text(value) }
 function statusLabel(value: unknown) {
   if (poolOrderStatusLabels[String(value)]) return poolOrderStatusLabels[String(value)]
-  return ({ PENDING_REVIEW: '待审核', APPROVED: '已通过', REJECTED: '已拒绝', PENDING_ACCEPTANCE: '待接单', PROCESSING: '处理中', IN_TRANSIT: '运输中', COMPLETED: '已完成', CANCELLED: '已取消' } as Record<string, string>)[String(value)] || text(value)
+  return ({ FUNDING_PENDING: '订单受理中', FUNDING_FAILED: '订单处理失败', PENDING_REVIEW: '待审核', APPROVED: '已通过', REJECTED: '已拒绝', PENDING_ACCEPTANCE: '待接单', PROCESSING: '处理中', IN_TRANSIT: '运输中', COMPLETED: '已完成', CANCELLED: '已取消' } as Record<string, string>)[String(value)] || text(value)
 }
 function statusTone(value: unknown) {
-  return ({ APPROVED: 'success', COMPLETED: 'success', REJECTED: 'danger', CANCELLED: 'info', PENDING_REVIEW: 'warning', PENDING_ACCEPTANCE: 'warning', PROCESSING: 'primary', IN_TRANSIT: 'primary' } as Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'>)[String(value)] || 'info'
+  return ({ APPROVED: 'success', COMPLETED: 'success', REJECTED: 'danger', CANCELLED: 'info', FUNDING_PENDING: 'warning', FUNDING_FAILED: 'danger', PENDING_REVIEW: 'warning', PENDING_ACCEPTANCE: 'warning', PROCESSING: 'primary', IN_TRANSIT: 'primary' } as Record<string, 'success' | 'warning' | 'danger' | 'info' | 'primary'>)[String(value)] || 'info'
 }
 function displayCell(candidate: unknown, key: string) {
   const row = candidate as BusinessRow
@@ -212,7 +224,7 @@ function getRowActions(candidate: object): TableAction[] {
 }
 
 function detailFieldClass(label: unknown) {
-  return ['备注', '起运地址', '目的地址'].includes(String(label)) ? 'is-wide' : ''
+  return ['备注', props.kind === 'trucking' ? '取货地址' : '起运地址', props.kind === 'trucking' ? '送达地址' : '目的地址'].includes(String(label)) ? 'is-wide' : ''
 }
 
 const listRouteName = computed(() => ({
@@ -248,6 +260,7 @@ async function loadDetail() {
 }
 
 async function submit() {
+  if (submitting.value) return
   const failure = transportDemandError(props.kind === 'trucking' ? 'truck' : 'looseboard', form)
   if (failure) { ElMessage.error(failure); return }
   if (!await formRef.value?.validate().catch(() => false)) return
@@ -255,13 +268,19 @@ async function submit() {
   const stableSubmitKey = submitKey.value || idempotencyKey()
   submitKey.value = stableSubmitKey
   try {
-    if (props.kind === 'trucking') await createTransport('trucking', { ...buildTransportDemand('truck', form), idempotencyKey: stableSubmitKey })
+    if (props.kind === 'trucking') {
+      const payload = { ...buildTransportDemand('truck', form), idempotencyKey: stableSubmitKey }
+      await createTransport('trucking', payload)
+    }
     else await createTransport('looseboard', { ...buildTransportDemand('looseboard', form), idempotencyKey: stableSubmitKey })
-    ElMessage.success('订单提交成功')
+    ElMessage.success(props.kind === 'trucking' ? '本土卡订单已受理，资金校验完成后进入平台审核' : '订单提交成功')
     resetForm()
     if (props.createPage) await router.push({ name: listRouteName.value })
     else { mode.value = 'list'; await load() }
-  } catch (cause) { ElMessage.error(errorMessage(cause)) }
+  } catch (cause) {
+    if (/已释放|已过期/.test(errorMessage(cause))) submitKey.value = ''
+    ElMessage.error(errorMessage(cause))
+  }
   finally { submitting.value = false }
 }
 
@@ -270,13 +289,13 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
 </script>
 
 <template>
-  <section v-loading="loading" class="business-orders client-ui" :aria-busy="loading">
-    <header v-if="mode === 'create'" class="page-head" :class="{ 'looseboard-page-head': props.kind === 'looseboard' }">
+  <section v-loading="loading" class="business-orders client-ui" :class="{ 'business-orders--create': mode === 'create' }" :aria-busy="loading">
+    <header v-if="mode === 'create'" class="page-head">
       <div>
         <h2>{{ configuration.title }}下单</h2>
 
       </div>
-      <el-button @click="returnToList">返回列表</el-button>
+      <el-button v-if="kind === 'looseboard'" @click="returnToList">返回列表</el-button>
     </header>
 
     <template v-if="mode === 'list'">
@@ -287,6 +306,7 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
           <template v-if="error" #error><div class="business-load-error" role="alert"><span>{{ error }}</span><el-button size="small" @click="load">重新加载</el-button></div></template>
           <template #orderNo="{ row }"><button class="business-order-link" type="button" @click="openDetail(row)">{{ (row as BusinessRow).orderNo }}</button></template>
           <template #status="{ row }"><el-tag :type="statusTone((row as BusinessRow).status)" effect="light" size="small">{{ statusLabel((row as BusinessRow).status) }}</el-tag></template>
+          <template #failureReason="{ row }"><OrderFundingStatus v-if="['FUNDING_FAILED', 'REJECTED'].includes((row as BusinessRow).status)" kind="trucking" :order-no="(row as BusinessRow).orderNo" :status="(row as BusinessRow).status" :can-retry="false" compact /><span v-else>—</span></template>
           <template #fleetArrangement="{ row }"><template v-if="(row as TransportSummary).fleetArrangement"><div>{{ poolOrderStatusLabels[(row as TransportSummary).fleetArrangement!.fulfillmentStage] || '待核对履约进度' }}</div><small>{{ dateTime((row as TransportSummary).fleetArrangement!.plannedDepartureAt) }}</small></template><span v-else>—</span></template>
         </DataTable>
       </div>
@@ -294,9 +314,10 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
 
     <section v-else-if="mode === 'detail'" class="business-detail-page" aria-label="订单详情">
       <header class="business-detail-heading">
-        <div class="business-detail-heading-main"><el-button link type="primary" @click="returnToList">← 返回列表</el-button><div><h2>{{ detail?.summary.orderNo || '订单详情' }}</h2><p>{{ configuration.title }}订单</p></div></div>
-        <el-tag :type="statusTone(detail?.summary.status)" effect="light">{{ detailStatus }}</el-tag>
+        <div class="business-detail-heading-main"><el-button link type="primary" @click="returnToList">← 返回列表</el-button><div><h2>{{ detail?.summary.orderNo || '订单详情' }}</h2></div></div>
+        <div class="business-detail-heading-actions"><el-tag :type="statusTone(detail?.summary.status)" effect="light">{{ detailStatus }}</el-tag><el-button :disabled="loading" @click="loadDetail">刷新</el-button></div>
       </header>
+      <OrderFundingStatus v-if="kind === 'trucking' && detail" kind="trucking" :order-no="detail.summary.orderNo" :status="detail.summary.status" :can-retry="canCreate" @changed="loadDetail" />
       <div v-if="error" class="business-detail-error" role="alert"><strong>{{ error }}</strong><el-button size="small" @click="loadDetail">重新加载</el-button></div>
       <section v-else class="business-detail-section">
         <h3>订单信息</h3>
@@ -305,7 +326,7 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
         </dl>
       </section>
       <section v-if="!error && fleetArrangement" class="business-detail-section" aria-label="承运安排">
-        <h3>承运安排</h3><p>{{ fleetArrangement.readOnlyReason }}</p>
+        <h3>承运安排</h3>
         <dl class="detail-grid arrangement-grid">
           <div><dt>预订号</dt><dd>{{ fleetArrangement.bookingNo }}</dd></div>
           <div><dt>计划发车</dt><dd>{{ dateTime(fleetArrangement.plannedDepartureAt) }}</dd></div>
@@ -333,7 +354,6 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
 <style scoped>
 .business-orders { display: grid; gap: var(--client-section-gap); }
 .page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
-.looseboard-page-head { max-width: 1180px; padding-right: 30px; box-sizing: border-box; }
 .page-head h2 { margin: 0; color: #111827; font-size: 26px; }
 .page-head p { margin: 7px 0 0; color: #64748b; font-size: 14px; }
 .business-table-card { overflow: hidden; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: #fff; }
@@ -345,6 +365,7 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
 .business-detail-heading { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 16px; padding: 5px 0; border-bottom: 1px solid var(--border); }
 .business-detail-heading-main { display: flex; min-width: 0; align-items: center; gap: 12px; }
 .business-detail-heading-main > div { min-width: 0; }
+.business-detail-heading-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
 .business-detail-heading h2 { margin: 0; overflow: hidden; color: var(--navy); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
 .business-detail-heading p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
 .business-detail-section { margin-top: 10px; }
@@ -358,6 +379,26 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
 .arrangement-grid dt { white-space: normal; overflow-wrap: anywhere; }
 .detail-grid dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--navy); font-size: 12px; font-weight: 600; line-height: 1.4; }
 .form-card :deep(.el-card__body) { padding: 0; }
+.business-orders--create { --client-action: #2f7bff; --client-action-hover: #1d5fe0; --client-border: #d5dce8; --client-control-height: 44px; --client-font-size: 14px; width: 100%; min-width: 0; gap: 12px; background: #f4f7fc; }
+.business-orders--create .page-head { flex-wrap: wrap; gap: 16px; }
+.business-orders--create .page-head h2 { color: #1f2937; font-weight: 700; }
+.business-orders--create .page-head :deep(.el-button) { height: auto; min-height: 44px; padding: 10px 18px; border-radius: 6px; color: #1d5fe0; font-size: 14px; box-shadow: none; }
+.business-orders--create .form-card { min-width: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
+
+/* The detail page is intentionally calmer than the list: the order identity is
+   separated from the data grid, while values remain easy to scan at desktop size. */
+.business-detail-page { padding: 18px 20px 24px; border-color: #dbe4ef; border-radius: 10px; box-shadow: 0 2px 8px rgb(15 42 74 / 4%); }
+.business-detail-heading { min-height: 58px; padding: 0 0 14px; border-bottom-color: #e5ebf3; }
+.business-detail-heading-main { gap: 18px; }
+.business-detail-heading-main :deep(.el-button) { padding: 0; font-size: 14px; }
+.business-detail-heading h2 { font-size: 22px; letter-spacing: .01em; }
+.business-detail-section { margin-top: 20px; }
+.business-detail-section h3 { padding: 0 0 10px; border-bottom: 0; font-size: 15px; }
+.detail-grid { border-color: #e2e8f0; }
+.detail-grid div { min-height: 46px; gap: 12px; padding: 8px 14px; background: #fff; border-color: #e2e8f0; }
+.detail-grid dt { color: #718096; font-size: 12px; }
+.detail-grid dd { color: #1f3552; font-size: 14px; font-weight: 600; }
+.arrangement-grid { background: #f8fafc; }
 
 @media (max-width: 767px) {
   .business-orders { gap: 14px; }
@@ -369,6 +410,7 @@ onMounted(() => { if (props.detailPage) void loadDetail(); else if (!props.creat
   .detail-grid div, .detail-grid div.is-wide { grid-column: auto; }
   .detail-grid dd { overflow-wrap: break-word; word-break: normal; }
   .business-detail-heading { align-items: flex-start; flex-direction: column; }
+  .business-detail-heading-actions { width: 100%; justify-content: space-between; }
 
   .form-card :deep(.el-form-item) { display: block; }
   .form-card :deep(.el-form-item__label) {

src/modules/cross-border/components/OrderFundingStatus.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onActivated, onBeforeUnmount, onDeactivated, ref, watch } from 'vue'
+import { readOrderFunding, retryOrderFunding } from '../api/orderBudgets'
+import { getBusinessOrder, type TransportDetail } from '../api/businessOrders'
+
+const props = defineProps<{ kind: 'procurement' | 'trucking'; orderNo: string; status: string; canRetry: boolean; compact?: boolean }>()
+const emit = defineEmits<{ changed: [] }>()
+const message = ref(''), busy = ref(false)
+let generation = 0, timer: ReturnType<typeof setTimeout> | undefined
+let active = true
+
+// 自动核对订单受理中状态；离开详情或切换订单时丢弃旧响应。
+watch(() => [props.kind, props.orderNo, props.status], () => {
+  generation++; clearTimeout(timer); message.value = ''; busy.value = false
+  if (active && (['FUNDING_PENDING', 'FUNDING_FAILED'].includes(props.status) || (props.kind === 'trucking' && props.status === 'REJECTED'))) void check(generation, 0)
+}, { immediate: true })
+
+async function check(sequence: number, count: number) {
+  try {
+    // 卡车审核拒绝原因来自审核历史，不使用客户填写的订单备注。
+    if (props.kind === 'trucking' && props.status === 'REJECTED') {
+      const detail = await getBusinessOrder<TransportDetail>('trucking', props.orderNo)
+      if (sequence !== generation) return
+      const rejection = [...(detail.histories || [])].reverse().find(item => item.operationType === 'REVIEW' && item.toStatus === 'REJECTED')
+      message.value = rejection?.remark?.trim() || '未填写拒绝原因'
+      return
+    }
+    const result = await readOrderFunding(props.kind, props.orderNo)
+    if (sequence !== generation) return
+    message.value = result.status === 'FREEZE_PENDING' ? '订单受理中，处理完成后将自动进入待审核。' : result.message || (result.status === 'FAILED' ? '订单处理失败，请联系平台核对原因' : '')
+    if (result.status === 'FROZEN' || (result.status === 'FAILED' && props.status === 'FUNDING_PENDING') || (result.status === 'FREEZE_PENDING' && props.status === 'FUNDING_FAILED')) emit('changed')
+    else if (result.status === 'FREEZE_PENDING' && count < 30) timer = setTimeout(() => void check(sequence, count + 1), 2000)
+  } catch (cause) {
+    if (sequence === generation) message.value = cause instanceof Error ? cause.message : '处理原因读取失败，请刷新重试'
+  }
+}
+
+async function retry() {
+  if (!active || busy.value || !props.canRetry || props.status !== 'FUNDING_FAILED') return
+  const sequence = generation; busy.value = true
+  try {
+    await retryOrderFunding(props.kind, props.orderNo)
+    if (sequence === generation) emit('changed')
+  } catch (cause) {
+    if (sequence === generation) message.value = cause instanceof Error ? cause.message : '重试未完成，请稍后再试'
+  } finally { if (sequence === generation) busy.value = false }
+}
+function stop() { active = false; generation++; clearTimeout(timer) }
+onDeactivated(stop)
+onBeforeUnmount(stop)
+onActivated(() => {
+  if (active) return
+  active = true; busy.value = false
+  if (['FUNDING_PENDING', 'FUNDING_FAILED'].includes(props.status) || (props.kind === 'trucking' && props.status === 'REJECTED')) void check(++generation, 0)
+})
+</script>
+
+<template>
+  <div v-if="['FUNDING_PENDING', 'FUNDING_FAILED'].includes(status) || (kind === 'trucking' && status === 'REJECTED')" role="status" aria-live="polite">
+    <span v-if="compact">{{ message || '正在读取处理失败原因…' }}</span>
+    <template v-else>
+      <el-alert :type="status === 'FUNDING_PENDING' ? 'info' : 'error'" :closable="false" :title="status === 'REJECTED' ? '订单已拒绝' : status === 'FUNDING_FAILED' ? '订单处理失败' : '订单受理中'" :description="message" />
+      <el-button v-if="status === 'FUNDING_FAILED' && canRetry" :loading="busy" @click="retry">重新处理订单</el-button>
+    </template>
+  </div>
+</template>

src/modules/cross-border/components/ProcurementDecisionDialog.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, shallowRef } from 'vue'
+import { ElMessage } from 'element-plus'
+import { accessTokenIdentity } from '@/api/session'
+import { useAuthStore } from '@/modules/auth/public'
+import { confirmProcurement, rejectProcurement, getProcurementWorkflow, getProcurementFile, type ProcurementSummary, type ProcurementWorkflow } from '../api/procurement'
+import { procurementRequestKey } from '../procurementSubmission'
+import { dateTime } from '../procurementPresentation'
+
+const props = defineProps<{ order: ProcurementSummary; decision: 'confirm' | 'reject' }>()
+const emit = defineEmits<{ close: []; changed: [] }>()
+const auth = useAuthStore()
+const owner = auth.token ? accessTokenIdentity(auth.token) : null
+const current = () => active && !!owner && owner === (auth.token ? accessTokenIdentity(auth.token) : null)
+const workflow = shallowRef<ProcurementWorkflow | null>(null)
+const loading = ref(false), saving = ref(false), error = ref(''), photoError = ref(''), reason = ref('')
+const photos = ref<Record<string, string>>({})
+const isReject = computed(() => props.decision === 'reject')
+const canSubmit = computed(() => !loading.value && workflow.value?.status === 'WAIT_CUSTOMER_CONFIRM' && auth.hasPermission('merchant:cross-border:procurement:create'))
+let active = true, generation = 0, attempt: { fingerprint: string; key: string } | null = null
+function clearPhotos() { Object.values(photos.value).forEach(url => URL.revokeObjectURL(url)); photos.value = {} }
+async function load() {
+  if (loading.value || saving.value || !current()) return
+  const sequence = ++generation
+  loading.value = true; error.value = ''; photoError.value = ''; workflow.value = null; clearPhotos()
+  try {
+    const result = await getProcurementWorkflow(props.order.orderNo)
+    if (!current() || sequence !== generation) return
+    workflow.value = result
+    if (result.status !== 'WAIT_CUSTOMER_CONFIRM') { error.value = '订单状态已更新，当前不能确认或驳回，请返回列表刷新'; return }
+    const ids = [...new Set(result.receipts.flatMap(receipt => receipt.fileIds))]
+    await Promise.all(ids.map(async id => {
+      try {
+        const blob = await getProcurementFile(props.order.orderNo, id)
+        if (!current() || sequence !== generation) return
+        if (!/^image\/(png|jpeg|gif|webp|bmp)$/i.test(blob.type)) throw new Error('附件不是可预览的收货照片')
+        photos.value[id] = URL.createObjectURL(blob)
+      } catch { if (current() && sequence === generation) photoError.value = '部分收货照片加载失败，请重新加载后核对' }
+    }))
+  } catch (cause) { if (current() && sequence === generation) error.value = cause instanceof Error ? cause.message : '采购结果加载失败' }
+  finally { if (current() && sequence === generation) loading.value = false }
+}
+function fileName(id: string) { return workflow.value?.files?.find(file => file.fileId === id)?.fileName || '收货照片' }
+async function submitDecision() {
+  if (saving.value || !current() || !canSubmit.value || !!photoError.value || !workflow.value) return
+  if (isReject.value && (!reason.value.trim() || reason.value.trim().length > 1000)) { error.value = '请填写驳回原因，最多1000字'; return }
+  const version = workflow.value.version, orderNo = props.order.orderNo
+  const fingerprint = JSON.stringify([owner, orderNo, version, props.decision, isReject.value ? reason.value.trim() : ''])
+  if (attempt?.fingerprint !== fingerprint) attempt = { fingerprint, key: procurementRequestKey() }
+  saving.value = true; error.value = ''
+  try {
+    const data = { version, idempotencyKey: attempt.key }
+    if (isReject.value) await rejectProcurement(orderNo, { ...data, reason: reason.value.trim() })
+    else await confirmProcurement(orderNo, data)
+    if (!current()) return
+    ElMessage.success(isReject.value ? '已驳回，等待平台重新上传照片' : '采购结果已确认')
+    emit('changed')
+  } catch (cause) { if (current()) error.value = cause instanceof Error ? cause.message : '操作失败，请重试' }
+  finally { saving.value = false }
+}
+onBeforeUnmount(() => { active = false; generation++; clearPhotos() })
+void load()
+</script>
+
+<template>
+  <el-dialog :model-value="true" :title="isReject ? '驳回采购结果' : '确认采购结果'" width="800px" append-to-body :close-on-click-modal="false" :close-on-press-escape="!saving" :show-close="!saving" @close="!saving && emit('close')">
+    <div v-loading="loading" class="decision-content">
+      <dl class="decision-quantities"><div><dt>采购单号</dt><dd>{{ order.orderNo }}</dd></div><div><dt>商品名称</dt><dd>{{ order.productName }}</dd></div><div><dt>采购数量</dt><dd>{{ order.purchaseQuantity }} 件</dd></div><div><dt>累计收货数量</dt><dd>{{ workflow?.receivedQuantity ?? '—' }} 件</dd></div></dl>
+      <el-alert v-if="error" :title="error" type="error" :closable="false" />
+      <el-alert v-if="photoError" :title="photoError" type="error" :closable="false" />
+      <el-button v-if="error || photoError" :disabled="saving || loading" @click="load">重新加载</el-button>
+      <div class="decision-batches">
+      <section v-for="(receipt, index) in workflow?.receipts || []" :key="receipt.id" class="decision-batch">
+        <h3>第 {{ index + 1 }} 批：{{ receipt.quantity }} 件 <small>{{ dateTime(receipt.receivedAt) }}</small></h3>
+        <div class="decision-photos"><el-image v-for="id in receipt.fileIds" :key="id" :src="photos[id]" :alt="fileName(id)" :preview-src-list="Object.values(photos)" :initial-index="Object.keys(photos).indexOf(id)" fit="contain" preview-teleported><template #error><span>{{ fileName(id) }}：{{ loading ? '加载中' : '照片未加载' }}</span></template></el-image></div>
+      </section>
+      </div>
+      <p v-if="workflow && !workflow.receipts.length">暂无收货照片</p>
+      <el-form v-if="isReject" label-position="top" :disabled="saving"><el-form-item label="驳回原因" required><el-input v-model="reason" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请填写采购结果不符合要求的原因" /></el-form-item></el-form>
+      <p v-else>请核对采购数量和收货照片，确认后平台将安排出库。</p>
+    </div>
+    <template #footer><el-button :disabled="saving" @click="emit('close')">取消</el-button><el-button :type="isReject ? 'danger' : 'primary'" :loading="saving" :disabled="!canSubmit || !!photoError" @click="submitDecision">{{ isReject ? '提交驳回' : '确认采购结果' }}</el-button></template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.decision-content { min-height: 160px; }
+.decision-quantities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
+.decision-quantities > div { display: flex; gap: 12px; min-width: 0; }
+dt { color: var(--muted); } dd { margin: 0; overflow-wrap: anywhere; }
+.decision-batches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
+.decision-batch { min-width: 0; }
+h3 { margin: 0 0 8px; color: var(--navy); font-size: 14px; } small { display: block; margin-top: 4px; color: var(--muted); font-weight: 400; }
+.decision-photos { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; padding: 2px 0 6px; }
+.decision-photos :deep(.el-image) { flex: 0 0 112px; width: 112px; height: 84px; border: 1px solid var(--border); border-radius: 4px; }
+.decision-photos span { padding: 12px; overflow-wrap: anywhere; }
+</style>

src/modules/cross-border/components/ProcurementDetailPanel.vue

@@ -1,106 +1,107 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { ProcurementDetail, ProcurementFee } from '../api/procurement'
-import { dateTime, feePurposes, feeStatus, feeTone, feeTotals, measurement, money, productHref, text } from '../procurementPresentation'
-
-const props = defineProps<{ detail: ProcurementDetail }>()
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { getProcurementFile, type ProcurementDetail, type ProcurementFee, type ProcurementWorkflow } from '../api/procurement'
+import { directionLabel, dateTime, feeStatus, feeTone, feeTotals, money, productHref, statusLabel, text } from '../procurementPresentation'
+const props = defineProps<{ detail: ProcurementDetail; workflow: ProcurementWorkflow }>()
+const previewUrl = ref(''), previewName = ref(''), previewImage = ref(false), fileLoading = ref(''), fileError = ref('')
+let active = true
+function clearPreview() { if (previewUrl.value) URL.revokeObjectURL(previewUrl.value); previewUrl.value = '' }
+function fileName(fileId: string, index: string | number) { return props.workflow.files.find(file => file.fileId === fileId)?.fileName || '附件 ' + (Number(index) + 1) }
+async function openFile(fileId: string) {
+  if (fileLoading.value) return
+  fileLoading.value = fileId; fileError.value = ''
+  try {
+    const blob = await getProcurementFile(props.workflow.orderNo, fileId)
+    if (!active) return
+    clearPreview(); previewUrl.value = URL.createObjectURL(blob)
+    previewName.value = props.workflow.files.find(file => file.fileId === fileId)?.fileName || '附件'
+    previewImage.value = /^image\/(png|jpeg|gif|webp|bmp)$/i.test(blob.type)
+  } catch (cause) { if (active) fileError.value = cause instanceof Error ? cause.message : '附件加载失败' }
+  finally { fileLoading.value = '' }
+}
+onBeforeUnmount(() => { active = false; clearPreview() })
 const totals = computed(() => feeTotals(props.detail.fees))
-const progress = computed(() => props.detail.progress.filter(step => step.key !== 'closed_at' || step.completedAt))
-const ended = computed(() => ['REJECTED', 'CANCELLED', 'EXCEPTION_CLOSED', 'SHIPPED_TO_CUSTOMER'].includes(props.detail.order.status))
-const hasPending = computed(() => props.detail.fees.some(f => f.walletStatus?.endsWith('_PENDING') || f.walletStatus?.endsWith('_FAILED')))
 </script>
 
 <template>
-  <section class="procurement-section" aria-label="采购履约进度">
-    <h3>履约进度</h3>
-    <ol class="procurement-progress">
-      <li v-for="step in progress" :key="step.key" :class="{ 'is-complete': step.completedAt }">
-        <strong>{{ step.title }}</strong><span>{{ step.completedAt ? dateTime(step.completedAt) : ended ? '未执行' : '待处理' }}</span>
-      </li>
-    </ol>
-    <p v-if="detail.purchaseNeedsAttention" class="procurement-note">购买资料正在核对，客服将协助处理。已发生的收货与费用结果仍保留在本单。</p>
+  <el-alert v-if="fileError" :title="fileError" type="error" :closable="false" />
+  <section class="procurement-section" aria-label="采购数量统计">
+    <dl class="procurement-grid money-grid">
+      <div><dt>累计收货</dt><dd>{{ workflow.receivedQuantity }} 件</dd></div>
+      <div><dt>采购库存</dt><dd>{{ workflow.stockQuantity }} 件</dd></div>
+      <div><dt>出库处理中</dt><dd>{{ workflow.reservedQuantity }} 件</dd></div>
+      <div><dt>可出库</dt><dd>{{ workflow.availableQuantity }} 件</dd></div>
+    </dl>
+  </section>
+  <section class="procurement-section" aria-label="分批收货">
+    <h3>收货记录</h3>
+
+    <el-table :data="workflow.receipts" border stripe empty-text="暂无收货记录" row-key="id">
+      <el-table-column label="批次" width="80" align="center"><template #default="{ $index }">{{ $index + 1 }}</template></el-table-column>
+      <el-table-column prop="quantity" label="收货数量（件）" width="145" align="right" />
+      <el-table-column label="收货时间" width="185"><template #default="{ row }">{{ dateTime(row.receivedAt) }}</template></el-table-column>
+      <el-table-column label="收货照片" min-width="160"><template #default="{ row }"><span v-if="!row.fileIds.length">—</span><el-button v-for="(fileId, index) in row.fileIds" :key="fileId" link type="primary" :loading="fileLoading === fileId" :disabled="!!fileLoading" @click="openFile(fileId)">{{ fileName(fileId, index) }}</el-button></template></el-table-column>
+    </el-table>
+  </section>
+  <section class="procurement-section" aria-label="分批出库">
+    <h3>出库记录</h3>
+    <el-table :data="workflow.outbounds.filter(row => row.status !== 'IN_TRANSIT' && row.status !== 'CANCELLED')" border stripe empty-text="暂无出库记录" row-key="id">
+      <el-table-column prop="outboundNo" label="出库单号" min-width="180" />
+      <el-table-column prop="quantity" label="出库数量（件）" width="145" align="right" />
+      <el-table-column prop="trackingNo" label="物流跟踪号" min-width="160" />
+      <el-table-column label="状态" width="100" align="center"><template #default="{ row }">{{ statusLabel(row.status) }}</template></el-table-column>
+      <el-table-column label="创建时间" width="185"><template #default="{ row }">{{ dateTime(row.createdAt) }}</template></el-table-column>
+      <el-table-column label="签收时间" width="185"><template #default="{ row }">{{ dateTime(row.completedAt) }}</template></el-table-column>
+      <el-table-column label="签收凭证" min-width="220"><template #default="{ row }"><span v-if="!row.fileIds.length">—</span><el-button v-for="(fileId, index) in row.fileIds" :key="fileId" link type="primary" :loading="fileLoading === fileId" :disabled="!!fileLoading" @click="openFile(fileId)">{{ fileName(fileId, index) }}</el-button></template></el-table-column>
+    </el-table>
+  </section>
+  <section class="procurement-section" aria-label="费用明细">
+    <h3>费用明细 <span class="fee-total">已扣款 {{ money(totals?.net) }}</span></h3>
+    <el-table :data="detail.fees" border stripe empty-text="暂无费用" row-key="feeNo">
+      <el-table-column prop="name" label="费用名称" min-width="180" />
+      <el-table-column label="原币金额" min-width="145" align="right"><template #default="{ row }">{{ money(row.originalAmount, row.originalCurrency) }}</template></el-table-column>
+      <el-table-column label="人民币金额" min-width="145" align="right"><template #default="{ row }">{{ money(row.amount) }}</template></el-table-column>
+      <el-table-column label="扣款结果" min-width="160" align="center"><template #default="{ row }"><el-tag :type="feeTone(row as ProcurementFee)" size="small">{{ feeStatus(row as ProcurementFee) }}</el-tag></template></el-table-column>
+    </el-table>
   </section>
   <section class="procurement-section" aria-label="商品与收件信息">
     <h3>商品与收件信息</h3>
     <dl class="procurement-grid">
-      <div><dt>采购品类</dt><dd>{{ detail.order.purchaseCategory }}</dd></div>
+      <div><dt>采购方向</dt><dd>{{ directionLabel(detail.order.procurementDirection) }}</dd></div>
       <div><dt>商品名称</dt><dd>{{ detail.order.productName }}</dd></div>
       <div><dt>商品规格</dt><dd>{{ text(detail.order.productSpecification) }}</dd></div>
+      <div><dt>采购品类</dt><dd>{{ text(detail.order.purchaseCategory) }}</dd></div>
       <div><dt>采购数量</dt><dd>{{ detail.order.purchaseQuantity }} 件</dd></div>
-      <div><dt>下单预算单价</dt><dd>{{ money(detail.order.budgetUnitPrice, detail.order.currency) }}</dd></div>
-      <div><dt>货款预算总上限</dt><dd>{{ money(detail.budget.totalAmount, detail.budget.currency) }}</dd></div>
-      <div><dt>预算核验时间</dt><dd>{{ dateTime(detail.budget.authorizedAt) }}</dd></div>
-      <div><dt>预计到海外仓</dt><dd>{{ dateTime(detail.order.estimatedArrivalAt) }}</dd></div>
+      <div><dt>预算单价</dt><dd>{{ money(detail.order.budgetUnitPrice, detail.order.currency) }}</dd></div>
+      <div><dt>预算合计</dt><dd>{{ money(detail.budget.totalAmount, detail.budget.currency) }}</dd></div>
+      <div><dt>采购仓</dt><dd>{{ detail.order.actualWarehouseName || detail.order.plannedWarehouseName || '待审核指定' }}<span v-if="detail.order.actualWarehouseCode">（{{ detail.order.actualWarehouseCode }}）</span></dd></div>
       <div><dt>收件人</dt><dd>{{ detail.order.contactName }}</dd></div>
       <div><dt>联系电话</dt><dd>{{ detail.order.contactPhone }}</dd></div>
-      <div class="wide"><dt>下单收货地址</dt><dd>{{ detail.order.receivingAddress }}</dd></div>
-      <div class="wide"><dt>实际海外仓</dt><dd>{{ text(detail.order.actualWarehouseName) }}<span v-if="detail.order.actualWarehouseCode">（{{ detail.order.actualWarehouseCode }}）</span></dd></div>
-      <div class="wide"><dt>商品链接</dt><dd><a v-if="productHref(detail.order.productUrl)" :href="productHref(detail.order.productUrl)" target="_blank" rel="noopener noreferrer">{{ detail.order.productUrl }}</a><span v-else>{{ text(detail.order.productUrl) }}</span></dd></div>
+      <div class="wide"><dt>收货地址</dt><dd>{{ detail.order.receivingAddress }}</dd></div>
+      <div v-if="detail.order.remark" class="full"><dt>采购备注</dt><dd>{{ detail.order.remark }}</dd></div>
+      <div v-if="detail.order.productUrl" class="full"><dt>商品链接</dt><dd><a v-if="productHref(detail.order.productUrl)" :href="productHref(detail.order.productUrl)" target="_blank" rel="noopener noreferrer">查看商品</a><span v-else>{{ text(detail.order.productUrl) }}</span></dd></div>
     </dl>
   </section>
-  <section class="procurement-section" aria-label="已确认海外装箱清单">
-    <h3>已确认海外装箱清单</h3>
-    <el-table :data="detail.boxes" border stripe empty-text="尚无已确认的装箱清单" row-key="cartonNo">
-      <el-table-column prop="cartonNo" label="箱号" min-width="170" />
-      <el-table-column label="箱内商品" min-width="200"><template #default>{{ detail.order.productName }}</template></el-table-column>
-      <el-table-column label="规格" min-width="180"><template #default>{{ text(detail.order.productSpecification) }}</template></el-table-column>
-      <el-table-column prop="quantity" label="数量（件）" width="120" />
-      <el-table-column label="外箱长 × 宽 × 高（cm）" min-width="240"><template #default="{ row }">{{ measurement(row.lengthCm, 2) }} × {{ measurement(row.widthCm, 2) }} × {{ measurement(row.heightCm, 2) }}</template></el-table-column>
-      <el-table-column label="封箱毛重（kg）" width="170"><template #default="{ row }">{{ measurement(row.grossWeightKg, 3) }}</template></el-table-column>
-    </el-table>
-  </section>
-  <section class="procurement-section" aria-label="两段实际运输">
-    <h3>两段实际运输</h3>
-    <el-table :data="detail.shipments" border stripe empty-text="尚无实际交寄记录">
-      <el-table-column label="运输段" width="150"><template #default="{ row }">{{ row.leg === 'OVERSEAS' ? '国际段 · 海外交寄' : '国内段 · 寄客户' }}</template></el-table-column>
-      <el-table-column prop="shipmentNo" label="交寄编号" min-width="270" />
-      <el-table-column prop="cartonNo" label="原箱号" min-width="150" />
-      <el-table-column prop="quantity" label="实际件数" width="110" />
-      <el-table-column prop="carrier" label="承运商" min-width="140" />
-      <el-table-column prop="trackingNo" label="运单号" min-width="230" />
-      <el-table-column label="实际交寄时间" width="185"><template #default="{ row }">{{ dateTime(row.shippedAt) }}</template></el-table-column>
-    </el-table>
-
-  </section>
-  <section class="procurement-section" aria-label="采购费用与资金结果">
-    <h3>费用与资金结果</h3>
-    <dl class="procurement-grid money-grid">
-      <div><dt>累计成功扣款</dt><dd>{{ money(totals?.paid) }}</dd></div>
-      <div><dt>累计成功退款</dt><dd>{{ money(totals?.refunded) }}</dd></div>
-      <div><dt>净实扣</dt><dd>{{ money(totals?.net) }}</dd></div>
-      <div><dt>预估国际运费占款</dt><dd>{{ money(totals?.estimatedHold) }}</dd></div>
-    </dl>
-    <p class="procurement-note">预算上限仅包含样品货款。预估国际运费只冻结、不直接扣款，最终以实际费用结算；表内保留原费用、追加及退款记录。</p>
-    <el-table :data="detail.fees" border stripe empty-text="尚无已核定费用" row-key="feeNo">
-      <el-table-column prop="feeNo" label="费用编号" min-width="270" />
-      <el-table-column label="费用用途" min-width="145"><template #default="{ row }">{{ feePurposes[row.purpose] || '待核定' }}</template></el-table-column>
-      <el-table-column prop="name" label="费用名称" min-width="145" />
-      <el-table-column label="原币金额" min-width="130"><template #default="{ row }">{{ money(row.originalAmount, row.originalCurrency) }}</template></el-table-column>
-      <el-table-column label="汇率 / 月份" min-width="150"><template #default="{ row }">{{ measurement(row.exchangeRate, 6) }}<br /><small>{{ text(row.exchangeRateMonth) }}</small></template></el-table-column>
-      <el-table-column label="人民币金额" min-width="130"><template #default="{ row }">{{ money(row.amount) }}</template></el-table-column>
-      <el-table-column label="处理结果" min-width="190"><template #default="{ row }"><el-tag :type="feeTone(row as ProcurementFee)" size="small">{{ feeStatus(row as ProcurementFee) }}</el-tag><small v-if="row.purpose !== 'INTERNATIONAL_ESTIMATE' && row.walletStatus === 'SETTLED' && !row.sourceLinked" class="fee-sync">费用结果同步中</small></template></el-table-column>
-      <el-table-column prop="parentFeeNo" label="关联原费用 / 预估" min-width="270"><template #default="{ row }">{{ text(row.parentFeeNo) }}</template></el-table-column>
-    </el-table>
-    <p v-if="hasPending" class="procurement-note">部分资金处理尚未完成，可点击页面“刷新”查看最新结果；如需协助请联系客户服务。</p>
-  </section>
-  <section v-if="detail.exceptionSummaries.length" class="procurement-section" aria-label="客服处理说明">
-    <h3>客服处理说明</h3><ul class="procurement-summaries"><li v-for="(summary, index) in detail.exceptionSummaries" :key="index">{{ summary }}</li></ul>
-  </section>
+  <el-dialog :model-value="!!previewUrl" :title="previewName" width="800px" append-to-body @close="clearPreview">
+    <img v-if="previewImage" :src="previewUrl" :alt="previewName" style="display: block; max-width: 100%; max-height: 70vh; margin: auto" />
+    <a v-else :href="previewUrl" :download="previewName">下载 {{ previewName }}</a>
+  </el-dialog>
 </template>
 
 <style scoped>
 .procurement-section { margin-top: 18px; min-width: 0; }
+.fee-total { margin-left: 14px; font-weight: 400; font-size: 12px; color: var(--muted); }
 h3 { margin: 0 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--border); color: var(--navy); font-size: 14px; }
-.procurement-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
-.procurement-progress li { display: grid; gap: 7px; padding: 12px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); color: var(--muted); }
-.procurement-progress strong { font-size: 13px; font-weight: 600; }.procurement-progress span { font-size: 12px; }.procurement-progress .is-complete strong { color: var(--navy); }
 .procurement-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-left: 1px solid var(--border); border-top: 1px solid var(--border); }
 .procurement-grid > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 12px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); min-width: 0; }
 .procurement-grid dt { font-size: 12px; color: var(--muted); }.procurement-grid dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--navy); overflow-wrap: anywhere; }
-.procurement-grid .wide { grid-column: span 2; }.money-grid > div { grid-template-columns: minmax(0, 1fr); }.money-grid dd { font-size: 16px; font-weight: 600; }
-a { color: var(--client-action); } .procurement-note { margin: 10px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
-.fee-sync { display: block; padding-top: 5px; color: var(--muted); }.procurement-summaries { margin: 0; padding-left: 22px; line-height: 1.8; color: var(--navy); font-size: 13px; white-space: pre-wrap; }
+.procurement-grid .wide { grid-column: span 2; }.money-grid { gap: 16px; border: 0; }.money-grid > div { grid-template-columns: minmax(0, 1fr); padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: #f8fbff; }.money-grid dd { font-size: 16px; font-weight: 600; }
+.procurement-grid .full { grid-column: 1 / -1; }
+.procurement-section :deep(.el-table .cell) { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
+.procurement-section :deep(.el-table .el-button.is-link) { display: flex; justify-content: flex-start; max-width: 100%; height: auto; margin: 0; padding: 3px 0; white-space: normal; text-align: left; }
+.procurement-section :deep(.el-table .el-button.is-link > span) { min-width: 0; overflow-wrap: anywhere; }
+a { color: var(--client-action); }
 @media (max-width: 767px) {
-  .procurement-progress, .procurement-grid { grid-template-columns: 1fr; }.procurement-grid .wide { grid-column: auto; }
+  .procurement-grid { grid-template-columns: 1fr; }.procurement-grid .wide { grid-column: auto; }
 }
 </style>

src/modules/cross-border/components/TransportDemandForm.vue

@@ -14,6 +14,8 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{ submit: []; cancel: [] }>()
 const formRef = ref<FormInstance>()
 const rules = computed(() => transportDemandRules(props.kind, props.model))
+const isCreate = computed(() => !props.editing)
+const createPopperClass = computed(() => isCreate.value ? 'transport-create-popper' : undefined)
 defineExpose({
   validate: () => formRef.value?.validate() ?? Promise.resolve(false),
   clearValidate: (fields?: string | string[]) => formRef.value?.clearValidate(fields),
@@ -21,50 +23,54 @@ defineExpose({
 </script>
 
 <template>
-  <el-form ref="formRef" class="transport-demand-form" :model="model" :rules="rules" label-position="top" :disabled="disabled || submitting">
+  <el-form ref="formRef" class="transport-demand-form" :class="{ 'transport-demand-form--create': isCreate }" :model="model" :rules="rules" label-position="top" :disabled="disabled || submitting">
     <slot name="customer" />
     <section class="transport-demand-section">
       <h3>运输信息</h3>
-      <div class="transport-demand-grid">
-        <el-form-item v-if="kind === 'truck'" class="transport-demand-wide" label="车辆类型" prop="vehicleType">
-          <el-select v-model="model.vehicleType" placeholder=""><el-option label="15拖" value="PALLET_15" /><el-option label="30拖" value="PALLET_30" /></el-select>
+      <div class="transport-demand-grid transport-demand-route-grid">
+        <el-form-item v-if="kind === 'truck'" class="transport-demand-wide transport-demand-vehicle" label="车辆类型" prop="vehicleType">
+          <el-select v-model="model.vehicleType" :popper-class="createPopperClass" :placeholder="isCreate ? '请选择车辆类型' : ''"><el-option label="15拖" value="PALLET_15" /><el-option label="30拖" value="PALLET_30" /></el-select>
         </el-form-item>
-        <el-form-item label="起运地" prop="origin"><el-input v-model.trim="model.origin" maxlength="255" placeholder="城市 / 港口 / 州" /></el-form-item>
-        <el-form-item label="目的地" prop="destination"><el-input v-model.trim="model.destination" maxlength="255" placeholder="城市 / 州" /></el-form-item>
-        <el-form-item label="起运地联系人" prop="originContactName"><el-input v-model.trim="model.originContactName" maxlength="128" placeholder="" /></el-form-item>
-        <el-form-item label="目的地联系人" prop="destinationContactName"><el-input v-model.trim="model.destinationContactName" maxlength="128" placeholder="" /></el-form-item>
-        <el-form-item label="起运地联系电话" prop="originContactPhone"><el-input v-model.trim="model.originContactPhone" type="tel" maxlength="128" placeholder="" /></el-form-item>
-        <el-form-item label="目的地联系电话" prop="destinationContactPhone"><el-input v-model.trim="model.destinationContactPhone" type="tel" maxlength="128" placeholder="" /></el-form-item>
-        <el-form-item label="起运详细地址"><el-input v-model.trim="model.originAddress" maxlength="500" placeholder="街道 / 门牌等补充信息（选填）" /></el-form-item>
-        <el-form-item label="目的详细地址"><el-input v-model.trim="model.destinationAddress" maxlength="500" placeholder="街道 / 门牌等补充信息（选填）" /></el-form-item>
+        <el-form-item :label="kind === 'truck' ? '取货地' : '起运地'" prop="origin"><el-input v-model.trim="model.origin" maxlength="255" placeholder="城市 / 港口 / 州" /></el-form-item>
+        <el-form-item v-if="!isCreate" :label="kind === 'truck' ? '送达地' : '目的地'" prop="destination"><el-input v-model.trim="model.destination" maxlength="255" placeholder="城市 / 州" /></el-form-item>
+        <el-form-item :label="kind === 'truck' ? '取货联系人' : '起运地联系人'" prop="originContactName"><el-input v-model.trim="model.originContactName" maxlength="128" :placeholder="isCreate ? (kind === 'truck' ? '请输入取货联系人姓名' : '请输入起运地联系人姓名') : ''" /></el-form-item>
+        <el-form-item v-if="!isCreate" :label="kind === 'truck' ? '送达联系人' : '目的地联系人'" prop="destinationContactName"><el-input v-model.trim="model.destinationContactName" maxlength="128" placeholder="" /></el-form-item>
+        <el-form-item :label="kind === 'truck' ? '取货联系电话' : '起运地联系电话'" prop="originContactPhone"><el-input v-model.trim="model.originContactPhone" type="tel" maxlength="128" :placeholder="isCreate ? (kind === 'truck' ? '请输入取货联系电话' : '请输入起运地联系电话') : ''" /></el-form-item>
+        <template v-if="isCreate">
+          <el-form-item :label="kind === 'truck' ? '送达地' : '目的地'" prop="destination"><el-input v-model.trim="model.destination" maxlength="255" placeholder="城市 / 州" /></el-form-item>
+          <el-form-item :label="kind === 'truck' ? '送达联系人' : '目的地联系人'" prop="destinationContactName"><el-input v-model.trim="model.destinationContactName" maxlength="128" :placeholder="kind === 'truck' ? '请输入送达联系人姓名' : '请输入目的地联系人姓名'" /></el-form-item>
+        </template>
+        <el-form-item :label="kind === 'truck' ? '送达联系电话' : '目的地联系电话'" prop="destinationContactPhone"><el-input v-model.trim="model.destinationContactPhone" type="tel" maxlength="128" :placeholder="isCreate ? (kind === 'truck' ? '请输入送达联系电话' : '请输入目的地联系电话') : ''" /></el-form-item>
+        <el-form-item class="transport-demand-address" :label="kind === 'truck' ? '取货地址' : '起运详细地址'"><el-input v-model.trim="model.originAddress" maxlength="500" placeholder="街道 / 门牌等补充信息（选填）" /></el-form-item>
+        <el-form-item class="transport-demand-address" :label="kind === 'truck' ? '送达地址' : '目的详细地址'"><el-input v-model.trim="model.destinationAddress" maxlength="500" placeholder="街道 / 门牌等补充信息（选填）" /></el-form-item>
       </div>
     </section>
     <section class="transport-demand-section">
       <h3>货物信息</h3>
-      <div class="transport-demand-grid" :class="kind === 'looseboard' ? 'transport-demand-cargo-four' : 'transport-demand-cargo-three'">
-        <el-form-item v-if="kind === 'looseboard'" label="商品名称"><el-input v-model.trim="model.productName" maxlength="255" placeholder="" /></el-form-item>
-        <el-form-item v-if="kind === 'looseboard'" label="预计托数" prop="estimatedPalletCount"><el-input-number v-model="model.estimatedPalletCount" :min="0" :precision="0" controls-position="right" placeholder="" /></el-form-item>
-        <el-form-item v-if="kind === 'truck'" label="件数" prop="packageCount"><el-input-number v-model="model.packageCount" :min="0" :precision="0" controls-position="right" placeholder="" /></el-form-item>
-        <el-form-item label="总重量 (kg)" prop="totalWeightKg"><el-input-number v-model="model.totalWeightKg" :min="0" :precision="3" controls-position="right" placeholder="" /></el-form-item>
-        <el-form-item label="总体积 (m³)" prop="totalVolumeCbm"><el-input-number v-model="model.totalVolumeCbm" :min="0" :precision="6" controls-position="right" placeholder="" /></el-form-item>
-        <el-form-item v-if="kind === 'looseboard'" label="件数" prop="packageCount"><el-input-number v-model="model.packageCount" :min="0" :precision="0" controls-position="right" placeholder="" /></el-form-item>
+      <div class="transport-demand-grid" :class="kind === 'looseboard' && !isCreate ? 'transport-demand-cargo-four' : 'transport-demand-cargo-three'">
+        <el-form-item v-if="kind === 'looseboard'" label="商品名称"><el-input v-model.trim="model.productName" maxlength="255" :placeholder="isCreate ? '请输入商品名称（选填）' : ''" /></el-form-item>
+        <el-form-item v-if="kind === 'looseboard'" label="预计托数" prop="estimatedPalletCount"><el-input-number v-model="model.estimatedPalletCount" :min="0" :precision="0" controls-position="right" :placeholder="isCreate ? '请输入预计托数' : ''" /></el-form-item>
+        <el-form-item v-if="kind === 'truck'" label="托数" prop="estimatedPalletCount"><el-input-number v-model="model.estimatedPalletCount" :min="1" :precision="0" controls-position="right" :placeholder="isCreate ? '请输入托数' : ''" /></el-form-item>
+        <el-form-item label="总重量 (kg)" prop="totalWeightKg"><el-input-number v-model="model.totalWeightKg" :min="0" :precision="3" controls-position="right" :placeholder="isCreate ? '请输入总重量' : ''" /></el-form-item>
+        <el-form-item label="总体积 (m³)" prop="totalVolumeCbm"><el-input-number v-model="model.totalVolumeCbm" :min="0" :precision="6" controls-position="right" :placeholder="isCreate ? '请输入总体积' : ''" /></el-form-item>
+        <el-form-item v-if="kind === 'looseboard'" label="件数" prop="packageCount"><el-input-number v-model="model.packageCount" :min="0" :precision="0" controls-position="right" :placeholder="isCreate ? '请输入件数' : ''" /></el-form-item>
       </div>
     </section>
     <section class="transport-demand-section">
       <h3>费用与时效</h3>
       <div class="transport-demand-grid">
         <el-form-item label="预算总价" prop="budgetAmount"><div class="transport-demand-budget">
-          <el-input-number v-model="model.budgetAmount" :min="0" :precision="2" controls-position="right" placeholder="" />
-          <el-select v-model="model.currency" aria-label="预算币种" placeholder=""><el-option label="USD" value="USD" /><el-option label="CNY" value="CNY" /></el-select>
+          <el-input-number v-model="model.budgetAmount" :min="0" :precision="2" controls-position="right" :placeholder="isCreate ? (kind === 'truck' ? '请输入预算总价' : '请输入预算总价（选填）') : ''" />
+          <el-select v-model="model.currency" :popper-class="createPopperClass" aria-label="预算币种" placeholder=""><el-option label="USD" value="USD" /><el-option label="CNY" value="CNY" /></el-select>
         </div></el-form-item>
         <div />
-        <el-form-item label="取货时间" prop="pickupAt"><el-date-picker v-model="model.pickupAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="" @change="formRef?.validateField('deliveryAt').catch(() => undefined)" /></el-form-item>
-        <el-form-item label="送货时间" prop="deliveryAt"><el-date-picker v-model="model.deliveryAt" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" placeholder="" /></el-form-item>
-        <el-form-item class="transport-demand-wide" label="备注"><el-input v-model="model.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="" /></el-form-item>
+        <el-form-item :label="kind === 'truck' ? '取货时间' : '取货时间'" prop="pickupAt"><el-date-picker v-model="model.pickupAt" :popper-class="createPopperClass" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" :placeholder="isCreate ? '请选择取货日期和时间' : ''" @change="formRef?.validateField('deliveryAt').catch(() => undefined)" /></el-form-item>
+        <el-form-item :label="kind === 'truck' ? '送达时间' : '送货时间'" prop="deliveryAt"><el-date-picker v-model="model.deliveryAt" :popper-class="createPopperClass" type="datetime" format="YYYY-MM-DD HH:mm" time-format="HH:mm" value-format="YYYY-MM-DDTHH:mm:ss" :placeholder="isCreate ? (kind === 'truck' ? '请选择送达日期和时间' : '请选择送货日期和时间') : ''" /></el-form-item>
+        <el-form-item class="transport-demand-wide" label="备注"><el-input v-model="model.remark" type="textarea" :rows="3" maxlength="1000" :show-word-limit="!isCreate" :placeholder="isCreate ? '请输入运输要求或其他补充信息（选填）' : ''" /><span v-if="isCreate" class="transport-demand-character-count">{{ model.remark.length }} / 1000</span></el-form-item>
       </div>
     </section>
     <footer class="transport-demand-actions">
-      <el-button :disabled="submitting" @click="emit('cancel')">取消</el-button>
+      <el-button v-if="!isCreate" :disabled="submitting" @click="emit('cancel')">取消</el-button>
       <el-button v-if="canSubmit" type="primary" :loading="submitting" :disabled="disabled" @click="emit('submit')">{{ editing ? '保存修改' : '提交订单' }}</el-button>
     </footer>
   </el-form>
@@ -84,4 +90,49 @@ defineExpose({
 .transport-demand-budget { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 100px; gap: 10px; }
 .transport-demand-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; }
 .transport-demand-actions :deep(.el-button + .el-button) { margin-left: 0; }
+
+.transport-demand-form--create {
+  --el-component-size: 44px;
+  --el-color-primary: #2f7bff;
+  --el-text-color-regular: #1f2937;
+  --el-text-color-placeholder: #b0b7c3;
+  max-width: none;
+  min-width: 0;
+  background: transparent;
+  color: #1f2937;
+  font: 14px/1.5 "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+}
+.transport-demand-form--create .transport-demand-section { margin-bottom: 12px; padding: 0; border: 0; }
+.transport-demand-form--create .transport-demand-section h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #1f2937; font-size: 18px; font-weight: 700; }
+.transport-demand-form--create .transport-demand-section h3::before { content: ''; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #2f7bff; }
+.transport-demand-form--create .transport-demand-section:nth-of-type(2) h3::before { background: #0ea5a4; }
+.transport-demand-form--create .transport-demand-grid { min-width: 0; gap: 12px 20px; padding: 16px; border: 1px solid #e3e8f0; border-radius: 10px; background: #fff; }
+.transport-demand-form--create .transport-demand-route-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.transport-demand-form--create .transport-demand-route-grid > .el-form-item { grid-column: span 2; }
+.transport-demand-form--create .transport-demand-route-grid > .transport-demand-vehicle { grid-column: 1 / -1; }
+.transport-demand-form--create .transport-demand-route-grid > .transport-demand-address { grid-column: span 3; }
+.transport-demand-form--create :deep(.el-form-item) { margin: 0; }
+.transport-demand-form--create .transport-demand-vehicle { width: calc((100% - 40px) / 3); }
+.transport-demand-form--create :deep(.el-form-item__label) { height: auto; margin-bottom: 6px; padding: 0; color: #374151; font-size: 14px; font-weight: 600; line-height: 20px; }
+.transport-demand-form--create :deep(.el-form-item.is-required .el-form-item__label::before) { color: #e5484d; }
+/* Show validation beside the label without adding height below the control. */
+.transport-demand-form--create :deep(.el-form-item__content) { min-width: 0; line-height: 20px; }
+.transport-demand-form--create :deep(.el-form-item__error) { position: absolute; top: auto; bottom: calc(100% + 6px); right: 0; left: auto; width: auto; max-width: calc(100% - 120px); padding: 0; font-size: 12px; line-height: 20px; text-align: right; }
+.transport-demand-form--create :deep(.el-input__wrapper), .transport-demand-form--create :deep(.el-select__wrapper), .transport-demand-form--create :deep(.el-textarea__inner) { border: 1px solid #d5dce8; border-radius: 6px; background: #fff; box-shadow: none; font-family: inherit; font-size: 14px; }
+.transport-demand-form--create :deep(.el-input__wrapper), .transport-demand-form--create :deep(.el-select__wrapper) { min-height: 44px; padding: 10px 14px; }
+.transport-demand-form--create :deep(.el-input__inner) { height: 22px; color: #1f2937; line-height: 22px; }
+.transport-demand-form--create :deep(.el-input-number .el-input__wrapper) { padding-right: 40px; }
+.transport-demand-form--create :deep(.el-input-number.is-controls-right .el-input-number__increase), .transport-demand-form--create :deep(.el-input-number.is-controls-right .el-input-number__decrease) { width: 32px; }
+.transport-demand-form--create :deep(.el-textarea__inner) { min-height: 110px; padding: 11px 14px; color: #1f2937; line-height: 20px; resize: vertical; }
+.transport-demand-form--create :deep(.el-input__inner::placeholder), .transport-demand-form--create :deep(.el-textarea__inner::placeholder) { color: var(--el-text-color-placeholder); opacity: 1; }
+.transport-demand-form--create :deep(.el-input__wrapper.is-focus), .transport-demand-form--create :deep(.el-select__wrapper.is-focused), .transport-demand-form--create :deep(.el-textarea__inner:focus) { outline: 2px solid #2f7bff; outline-offset: 0; }
+.transport-demand-form--create :deep(.el-form-item.is-error .el-input__wrapper), .transport-demand-form--create :deep(.el-form-item.is-error .el-select__wrapper), .transport-demand-form--create :deep(.el-form-item.is-error .el-textarea__inner) { border-color: #e5484d; box-shadow: none; }
+.transport-demand-form--create :deep(.el-input.is-disabled .el-input__wrapper), .transport-demand-form--create :deep(.el-select__wrapper.is-disabled), .transport-demand-form--create :deep(.el-textarea.is-disabled .el-textarea__inner) { background: #f6f9ff; }
+.transport-demand-form--create :deep(.el-input.is-disabled .el-input__inner), .transport-demand-form--create :deep(.el-textarea.is-disabled .el-textarea__inner) { color: #98a2b3; -webkit-text-fill-color: #98a2b3; }
+.transport-demand-character-count { width: 100%; margin-top: 4px; color: #6b7280; font-size: 13px; text-align: right; }
+.transport-demand-form--create .transport-demand-actions { flex-wrap: wrap; gap: 12px; padding: 0; }
+.transport-demand-form--create .transport-demand-actions :deep(.el-button) { height: auto; min-height: 44px; margin-left: 0; padding: 10px 18px; border-radius: 6px; color: #1d5fe0; font-size: 14px; box-shadow: none; }
+.transport-demand-form--create .transport-demand-actions :deep(.el-button--primary) { padding: 12px 28px; color: #fff; }
+.transport-demand-form--create .transport-demand-actions :deep(.el-button.is-disabled) { color: #98a2b3; }
+:global(.transport-create-popper.el-popper) { --el-color-primary: #2f7bff; border: 1px solid #d5dce8; box-shadow: none; }
 </style>

src/modules/cross-border/orderFundingStatus.test.mjs

@@ -0,0 +1,95 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import test from 'node:test'
+import { runInNewContext } from 'node:vm'
+import ts from 'typescript'
+
+const source = readFileSync(new URL('./components/OrderFundingStatus.vue', import.meta.url), 'utf8')
+const script = source.match(/<script setup lang="ts">([\s\S]*?)<\/script>/)[1].replace(/^import .*$/gm, '')
+function harness({ status = 'FUNDING_PENDING', read = async () => ({ status: 'FREEZE_PENDING' }), retry = async () => ({}), detail = async () => ({}) } = {}) {
+  const props = { kind: 'procurement', orderNo: 'CG1', status, canRetry: true }
+  const timers = new Map(), events = [], hooks = {}
+  let nextTimer = 0
+  const context = {
+    defineProps: () => props, defineEmits: () => event => events.push(event), ref: value => ({ value }),
+    watch: (_getter, callback) => { hooks.watch = callback },
+    onBeforeUnmount: callback => { hooks.unmount = callback },
+    onActivated: callback => { hooks.activate = callback },
+    onDeactivated: callback => { hooks.deactivate = callback },
+    setTimeout: callback => { const id = ++nextTimer; timers.set(id, callback); return id },
+    clearTimeout: id => timers.delete(id), readOrderFunding: read, retryOrderFunding: retry, getBusinessOrder: detail,
+  }
+  const compiled = ts.transpileModule(script, { compilerOptions: { target: ts.ScriptTarget.ES2022 } }).outputText
+  const api = runInNewContext(`${compiled}\n({check, retry, message, busy})`, context)
+  return { ...api, props, timers, events, hooks }
+}
+
+test('truck rejection uses latest review reason and never customer remarks', async () => {
+  const h = harness({ status: 'REJECTED', detail: async () => ({ remark: '客户备注', histories: [
+    { operationType: 'REVIEW', toStatus: 'REJECTED', remark: '旧原因' },
+    { operationType: 'REVIEW', toStatus: 'REJECTED', remark: '路线暂不支持' },
+    { operationType: 'UPDATE', toStatus: 'REJECTED', remark: '内部修改' },
+  ] }) })
+  h.props.kind = 'trucking'
+  await h.check(0, 0)
+  assert.equal(h.message.value, '路线暂不支持')
+  assert.equal(h.timers.size, 0)
+  const missing = harness({ status: 'REJECTED', detail: async () => ({ remark: '客户备注' }) })
+  missing.props.kind = 'trucking'; await missing.check(0, 0)
+  assert.equal(missing.message.value, '未填写拒绝原因')
+})
+
+test('funding status polls for a bounded time and refreshes detail only on a result', async () => {
+  let count = 0
+  const h = harness({ read: async () => { count++; return { status: 'FREEZE_PENDING' } } })
+  await h.check(0, 0)
+  assert.equal(h.timers.size, 1)
+  for (let i = 1; i <= 30; i++) {
+    const [id, callback] = h.timers.entries().next().value
+    h.timers.delete(id); callback(); await new Promise(resolve => setImmediate(resolve))
+  }
+  assert.equal(count, 31)
+  assert.equal(h.timers.size, 0)
+  assert.equal(h.events.length, 0)
+  for (const status of ['FROZEN', 'FAILED']) {
+    const terminal = harness({ read: async () => ({ status, message: '余额不足' }) })
+    await terminal.check(0, 0)
+    assert.equal(terminal.events.join(','), 'changed')
+    assert.equal(terminal.timers.size, 0)
+  }
+})
+
+test('retry keeps original order and suppresses double clicks and stale responses', async () => {
+  let resolve, calls = 0
+  const h = harness({ status: 'FUNDING_FAILED', retry: (kind, no) => {
+    calls++; assert.equal(kind, 'procurement'); assert.equal(no, 'CG1')
+    return new Promise(done => { resolve = done })
+  } })
+  const first = h.retry(); await h.retry()
+  assert.equal(calls, 1)
+  h.hooks.deactivate(); resolve({}); await first
+  assert.equal(h.events.length, 0)
+  const denied = harness({ status: 'FUNDING_FAILED', retry: async () => { throw new Error('should not call') } })
+  denied.props.canRetry = false; await denied.retry()
+  assert.equal(denied.message.value, '')
+})
+
+test('switching or leaving an order ignores the old funding result', async () => {
+  let resolve
+  const h = harness({ read: () => new Promise(done => { resolve = done }) })
+  const pending = h.check(0, 0)
+  h.hooks.unmount(); resolve({ status: 'FAILED', message: 'old order' }); await pending
+  assert.equal(h.message.value, '')
+  assert.equal(h.events.length, 0)
+  assert.equal(h.timers.size, 0)
+})
+
+test('failed orders display finance reason and refresh when another session retries', async () => {
+  const failed = harness({ status: 'FUNDING_FAILED', read: async () => ({ status: 'FAILED', message: '可用余额及授信不足' }) })
+  await failed.check(0, 0)
+  assert.equal(failed.message.value, '可用余额及授信不足')
+  assert.equal(failed.events.length, 0)
+  const retried = harness({ status: 'FUNDING_FAILED' })
+  await retried.check(0, 0)
+  assert.equal(retried.events.join(','), 'changed')
+})

src/modules/cross-border/procurement.test.mjs

@@ -1,10 +1,14 @@
 import assert from 'node:assert/strict'
 import test from 'node:test'
 import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
 import { runInNewContext } from 'node:vm'
 import ts from 'typescript'
 import * as vue from 'vue'
 import { parse, compileScript } from 'vue/compiler-sfc'
+import { renderToString } from 'vue/server-renderer'
+
+const { default: Schema } = createRequire(import.meta.resolve('element-plus'))('async-validator')
 
 let nextKey = 0
 const crypto = { randomUUID: () => `test-key-${++nextKey}` }
@@ -21,7 +25,7 @@ const submission = moduleFrom(readFileSync(new URL('./procurementSubmission.ts',
 })
 const normalized = value => JSON.parse(JSON.stringify(value))
 const draft = () => ({ ...presentation.emptyProcurementDraft(), purchaseCategory: 'Sample', productName: 'Test product', productSpecification: 'A',
-  purchaseQuantity: '3', budgetUnitPrice: '0.29', receivingAddress: '测试省测试市测试街 1 号', contactName: '测试收件人', contactPhone: '13800000000' })
+  productUrl: 'https://example.com/product', purchaseQuantity: '3', budgetUnitPrice: '0.29', receivingAddress: '测试省测试市测试街 1 号', contactName: '测试收件人', contactPhone: '13800000000' })
 const fee = (purpose, walletStatus, amount) => ({ purpose, walletStatus, amount, currency: 'CNY' })
 
 test('budget distinguishes unknown from zero, preserves cents, and requires a real telephone/address', () => {
@@ -60,22 +64,44 @@ test('new requests get unique keys without restoring stored submissions', () =>
 
 class ApiError extends Error { constructor(message, code, status) { super(message); this.code = code; this.status = status } }
 const flush = async () => { await vue.nextTick(); await new Promise(resolve => setImmediate(resolve)); await vue.nextTick() }
+
+test('shows only the active procurement rejection, hiding it after reupload, resubmission and confirmation', async () => {
+  const source = readFileSync(new URL('./views/ProcurementView.vue', import.meta.url), 'utf8')
+  const template = source.match(/<el-alert\b[^>]*title="采购结果驳回原因"[^>]*\/>/)?.[0]
+  assert.ok(template)
+  for (const [status, photosNeedUpdate, rejectionReason, visible] of [
+    ['RECEIVING', true, '照片不清晰', true],
+    ['RECEIVING', false, '照片不清晰', true],
+    ['RECEIVING', false, null, false],
+    ['WAIT_CUSTOMER_CONFIRM', true, '照片不清晰', false],
+    ['CONFIRMED', true, '照片不清晰', false],
+    ['RECEIVING', true, null, false],
+  ]) {
+    const app = vue.createSSRApp({ render: vue.compile(template), setup: () => ({ workflow: { status, photosNeedUpdate, rejectionReason } }) })
+    app.component('ElAlert', { props: ['title', 'description'], setup: props => () => vue.h('aside', `${props.title} ${props.description}`) })
+    const html = await renderToString(app)
+    assert.equal(html.includes('采购结果驳回原因'), visible, `${status}, photosNeedUpdate=${photosNeedUpdate}`)
+    assert.equal(html.includes('照片不清晰'), visible)
+  }
+})
+
 function viewHarness({ createPage = false, detailPage = false, api = {}, storage = new Map() } = {}) {
   const props = vue.reactive({ createPage, detailPage })
   const route = vue.reactive({ params: { orderNo: detailPage ? 'PO-1' : '' } })
   const auth = vue.reactive({ token: 'identity-A', user: { tenantName: 'Company' }, profile: { tenantName: 'Company' }, hasPermission: () => true })
   const pushes = [], dispose = []
-  const defaults = { listProcurements: async () => ({ records: [], total: 0 }), getProcurement: async orderNo => ({ order: { orderNo } }), createProcurement: async () => ({ order: { orderNo: 'PO-CREATED' } }) }
+  const defaults = { getProcurementWorkflow: async orderNo => ({ orderNo, version: 1, status: 'WAIT_CUSTOMER_CONFIRM', receipts: [], outbounds: [] }), confirmProcurement: async () => ({ orderNo: 'PO-1', version: 2, status: 'CONFIRMED' }), listProcurements: async () => ({ records: [], total: 0 }), getProcurement: async orderNo => ({ order: { orderNo } }), createProcurement: async () => ({ order: { orderNo: 'PO-CREATED' } }) }
   const { descriptor } = parse(readFileSync(new URL('./views/ProcurementView.vue', import.meta.url), 'utf8'))
   const source = compileScript(descriptor, { id: 'procurement-test' }).content
   const context = { exports: {}, Error, crypto, sessionStorage: { getItem: key => storage.get(key) || null, setItem: (key, value) => storage.set(key, value), removeItem: key => storage.delete(key) },
     require(name) {
       if (name === 'vue') return { ...vue, onBeforeUnmount: callback => dispose.push(callback), watch: (...args) => { const stop = vue.watch(...args); dispose.push(stop); return stop } }
       if (name === 'vue-router') return { useRoute: () => route, useRouter: () => ({ push: async target => pushes.push(target) }) }
-      if (name === 'element-plus') return { ElMessage: { success: () => {} } }
+      if (name === 'element-plus') return { ElMessage: { success: () => {} }, ElMessageBox: { confirm: async () => {}, prompt: async (...args) => { const value = api.rejectionReason ?? '照片不清晰'; const valid = args[2].inputValidator(value); if (valid !== true) throw new Error(valid); return { value } } } }
       if (name === '@/api/types') return { ApiError }
       if (name === '@/api/session') return { accessTokenIdentity: token => token }
       if (name === '@/modules/auth/public') return { useAuthStore: () => auth }
+      if (name === '../api/orderBudgets') return { requireOrderBudget: api.requireOrderBudget || (async () => {}) }
       if (name === '../api/procurement') return { ...defaults, ...api }
       if (name === '../procurementPresentation') return presentation
       if (name === '../procurementSubmission') return submission
@@ -85,9 +111,85 @@ function viewHarness({ createPage = false, detailPage = false, api = {}, storage
   }
   runInNewContext(ts.transpileModule(source, { compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.CommonJS } }).outputText, context)
   const state = context.exports.default.setup(props, { expose: () => {} })
+  state.formRef.value = {
+    validate: async () => { await new Schema(state.formRules).validate(state.form); return true },
+    clearValidate: () => {},
+  }
   return { state, props, route, auth, pushes, storage, dispose: () => dispose.forEach(callback => callback()) }
 }
 
+test('procurement required fields validate individually and blank submissions never call the API', async () => {
+  const calls = []
+  const harness = viewHarness({ createPage: true, api: { createProcurement: async payload => { calls.push(payload); return { order: { orderNo: 'PO-VALID' } } } } })
+  try {
+    const fields = ['procurementDirection', 'productName', 'productUrl', 'purchaseQuantity', 'budgetUnitPrice', 'currency', 'contactName', 'contactPhone', 'receivingAddress']
+    const source = readFileSync(new URL('./views/ProcurementView.vue', import.meta.url), 'utf8')
+    for (const field of fields) {
+      assert.match(source, new RegExp(`<el-form-item[^>]*prop="${field}"`))
+      const schema = new Schema({ [field]: harness.state.formRules[field] })
+      await assert.rejects(schema.validate({ [field]: '' }), error => Boolean(error.fields[field]))
+    }
+    await assert.rejects(new Schema(harness.state.formRules).validate({ ...draft(), productName: '   ' }))
+    await harness.state.submit()
+    assert.equal(calls.length, 0)
+    assert.equal(harness.state.submitting.value, false)
+    assert.equal(harness.state.submitError.value, '')
+    Object.assign(harness.state.form, draft(), { budgetUnitPrice: '0' })
+    await harness.state.submit()
+    assert.equal(calls.length, 1)
+    assert.equal(calls[0].budgetUnitPrice, 0)
+    assert.deepEqual(normalized(harness.pushes), [{ name: 'cross-border-procurement' }])
+  } finally { harness.dispose() }
+})
+
+test('create summary follows the current form, preserves cents and clears with the draft', () => {
+  const harness = viewHarness({ createPage: true })
+  try {
+    assert.equal(harness.state.summaryQuantity.value, '1')
+    assert.equal(harness.state.summaryUnitPrice.value, '—')
+    assert.equal(harness.state.budgetTotal.value, null)
+    assert.equal(harness.state.summaryCurrencyName.value, '美元')
+    Object.assign(harness.state.form, draft())
+    assert.equal(harness.state.summaryQuantity.value, '3')
+    assert.equal(harness.state.summaryUnitPrice.value, '0.29')
+    assert.equal(harness.state.budgetTotal.value, '0.87')
+    harness.state.form.currency = 'CNY'
+    assert.equal(harness.state.summaryCurrencyName.value, '人民币')
+    assert.equal(presentation.money(harness.state.budgetTotal.value, harness.state.form.currency), 'CNY 0.87')
+    harness.state.form.budgetUnitPrice = '0'
+    assert.equal(harness.state.summaryUnitPrice.value, '0.00')
+    assert.equal(harness.state.budgetTotal.value, '0.00')
+    harness.state.resetForm()
+    assert.equal(harness.state.summaryQuantity.value, '1')
+    assert.equal(harness.state.summaryUnitPrice.value, '—')
+    assert.equal(harness.state.budgetTotal.value, null)
+    assert.equal(harness.state.summaryCurrencyName.value, '美元')
+  } finally { harness.dispose() }
+})
+
+test('create summary never retains a stale budget when quantity or price becomes invalid', () => {
+  const harness = viewHarness({ createPage: true })
+  try {
+    Object.assign(harness.state.form, draft())
+    for (const quantity of ['', '0', '-1', '1.5', '9007199254740992']) {
+      harness.state.form.purchaseQuantity = quantity
+      assert.equal(harness.state.summaryQuantity.value, '—')
+      assert.equal(harness.state.budgetTotal.value, null)
+      assert.equal(harness.state.form.purchaseQuantity, quantity)
+    }
+    harness.state.form.purchaseQuantity = '3'
+    assert.equal(harness.state.budgetTotal.value, '0.87')
+    for (const price of ['', '-1', '1.001', 'invalid']) {
+      harness.state.form.budgetUnitPrice = price
+      assert.equal(harness.state.summaryUnitPrice.value, '—')
+      assert.equal(harness.state.budgetTotal.value, null)
+      assert.equal(harness.state.form.budgetUnitPrice, price)
+    }
+    harness.state.form.budgetUnitPrice = '0.29'
+    assert.equal(harness.state.budgetTotal.value, '0.87')
+  } finally { harness.dispose() }
+})
+
 test('detail has one in-flight request and an older response cannot overwrite another order', async () => {
   const calls = [], pending = new Map()
   const harness = viewHarness({ detailPage: true, api: { getProcurement: orderNo => { calls.push(orderNo); return new Promise(resolve => pending.set(orderNo, resolve)) } } })
@@ -117,7 +219,7 @@ test('submission double-click sends once and definitive validation rejection per
   let reject, calls = 0
   const harness = viewHarness({ createPage: true, api: { createProcurement: () => { calls++; return new Promise((_, failure) => { reject = failure }) } } })
   try {
-    Object.assign(harness.state.form, draft()); const first = harness.state.submit(); await harness.state.submit(); assert.equal(calls, 1)
+    Object.assign(harness.state.form, draft()); const first = harness.state.submit(); await harness.state.submit(); await flush(); assert.equal(calls, 1)
     reject(new ApiError('invalid', 'A0422')); await first
     assert.equal(harness.state.submitting.value, false); assert.equal(harness.storage.size, 0)
   } finally { harness.dispose() }
@@ -154,3 +256,140 @@ test('purchase category is optional while its length remains bounded', () => {
   assert.equal(payload.purchaseCategory, '')
   assert.throws(() => presentation.buildProcurementCreate({ ...draft(), purchaseCategory: 'x'.repeat(129) }, 'Company', 'key'), /品类/)
 })
+
+
+test('domestic purchase creates an export order and displays the actual origin and destination regions', () => {
+  const payload = presentation.buildProcurementCreate({ ...draft(), procurementDirection: 'DOMESTIC_TO_OVERSEAS', receivingAddress: 'US, CA, Los Angeles, test destination' }, 'Authenticated Company', 'export-key')
+  assert.equal(payload.procurementDirection, 'DOMESTIC_TO_OVERSEAS')
+  assert.equal(payload.receivingAddress, 'US, CA, Los Angeles, test destination')
+  assert.equal(presentation.statusLabel('RECEIVING', payload.procurementDirection), '收货中')
+  assert.equal(presentation.statusLabel('DELIVERING', payload.procurementDirection), '派送中')
+  assert.equal(presentation.statusLabel('WAIT_CUSTOMER_CONFIRM', payload.procurementDirection), '待客户确认')
+  assert.equal(presentation.statusLabel('COMPLETED'), '签收完成')
+  assert.throws(() => presentation.buildProcurementCreate({ ...draft(), procurementDirection: 'INVALID' }, 'Company', 'key'), /采购方向/)
+  const source = readFileSync(new URL('./views/ProcurementView.vue', import.meta.url), 'utf8')
+  assert.match(source, /v-model="form.procurementDirection"/)
+  assert.match(source, /regionText\('最终国内收件资料', form.procurementDirection\)/)
+})
+
+
+test('unchanged create retries reuse the idempotency key', async () => {
+  const calls = []
+  const harness = viewHarness({ createPage: true, api: { createProcurement: async payload => { calls.push(payload); throw new ApiError('timeout', 'TIMEOUT') } } })
+  try {
+    Object.assign(harness.state.form, draft()); await harness.state.submit(); await harness.state.submit()
+    assert.equal(calls[0].idempotencyKey, calls[1].idempotencyKey)
+    assert.equal(harness.pushes.length, 0)
+  } finally { harness.dispose() }
+})
+
+test('a lost create response recovers the original order after review releases its budget', async () => {
+  for (const status of ['RELEASE_PENDING', 'RELEASED', 'RELEASE_FAILED']) {
+    const budgetCalls = [], createCalls = []
+    let boundOrder = null
+    const budgets = moduleFrom(readFileSync(new URL('./api/orderBudgets.ts', import.meta.url), 'utf8'), name => {
+      assert.equal(name, '@/api/http')
+      return { apiRequest: async request => {
+        budgetCalls.push(normalized(request))
+        return { status, usable: false, orderNo: boundOrder, message: '本次资金预占已释放' }
+      } }
+    })
+    const harness = viewHarness({ createPage: true, api: {
+      requireOrderBudget: async (...args) => { budgetCalls.push(args); throw new Error('创建订单不应调用旧资金预占接口') },
+      createProcurement: async payload => {
+        createCalls.push(normalized(payload))
+        if (!boundOrder) { boundOrder = 'CG-EXISTING'; throw new ApiError('timeout', 'TIMEOUT') }
+        assert.equal(payload.idempotencyKey, createCalls[0].idempotencyKey)
+        return { order: { orderNo: boundOrder, status: 'REJECTED' } }
+      },
+    } })
+    try {
+      Object.assign(harness.state.form, draft())
+      await harness.state.submit()
+      assert.equal(harness.state.submitError.value, 'timeout')
+      const funding = await budgets.readOrderFunding('procurement', boundOrder)
+      assert.equal(funding.status, status)
+      assert.equal(funding.usable, false)
+      await harness.state.submit()
+      assert.equal(createCalls.length, 2, status)
+      assert.deepEqual(budgetCalls, [{ method: 'GET', url: '/merchant/v1/last-leg/order-budgets/procurement/orders/CG-EXISTING' }])
+      assert.equal(harness.state.submitError.value, '')
+      assert.equal(harness.state.submittedOrder.value, 'CG-EXISTING')
+      assert.equal(harness.pushes[0].name, 'cross-border-procurement')
+      await harness.state.submit()
+      assert.equal(createCalls.length, 2)
+    } finally { harness.dispose() }
+  }
+})
+
+test('funding APIs preserve server results and retry the same order only when requested', async () => {
+  for (const kind of ['procurement', 'trucking']) for (const status of ['FREEZE_PENDING', 'FROZEN', 'RELEASE_PENDING', 'RELEASED', 'RELEASE_FAILED', 'FAILED']) {
+    const calls = []
+    const result = { status, usable: false, orderNo: 'CG/EXISTING', message: '资金校验失败' }
+    const budgets = moduleFrom(readFileSync(new URL('./api/orderBudgets.ts', import.meta.url), 'utf8'), name => {
+      assert.equal(name, '@/api/http')
+      return { apiRequest: async request => { calls.push(normalized(request)); return result } }
+    })
+    assert.deepEqual(await budgets.readOrderFunding(kind, result.orderNo), result)
+    assert.deepEqual(calls, [{ method: 'GET', url: `/merchant/v1/last-leg/order-budgets/${kind}/orders/CG%2FEXISTING` }])
+    await budgets.retryOrderFunding(kind, result.orderNo)
+    assert.deepEqual(calls[1], { method: 'POST', url: `/merchant/v1/last-leg/order-budgets/${kind}/orders/CG%2FEXISTING/retry` })
+    assert.equal(calls.length, 2)
+  }
+})
+
+test('bill-settled manual fees show review results without counting a balance debit', () => {
+  const bill = determination => ({ ...fee('OTHER', 'NOT_REQUIRED', '100'), determination })
+  assert.equal(presentation.feeStatus(bill('PENDING')), '账单结算 · 待审核')
+  assert.equal(presentation.feeStatus(bill('APPROVED')), '账单结算 · 已确认')
+  assert.equal(presentation.feeStatus(bill('REJECTED')), '账单结算 · 已拒绝')
+  assert.equal(presentation.feeTone(bill('REJECTED')), 'danger')
+  assert.equal(presentation.feeTotals([bill('PENDING'), bill('APPROVED'), bill('REJECTED')]).paid, '0.00')
+})
+
+
+test('procurement creates immediately while funding is asynchronous and exposes funding states', async () => {
+  let creates = 0
+  const harness = viewHarness({ createPage: true, api: { createProcurement: async () => { creates++; return { order: { orderNo: 'CG-PENDING', status: 'FUNDING_PENDING' } } } } })
+  try {
+    Object.assign(harness.state.form, draft()); await harness.state.submit()
+    assert.equal(creates, 1); assert.equal(harness.state.submitError.value, '')
+    assert.equal(harness.state.submittedOrder.value, 'CG-PENDING')
+    assert.equal(presentation.statusLabel('FUNDING_PENDING'), '订单受理中')
+    assert.equal(presentation.statusLabel('FUNDING_FAILED'), '订单处理失败')
+  } finally { harness.dispose() }
+})
+
+test('confirmation and rejection are list actions only while waiting for customer confirmation', async () => {
+  let status = 'WAIT_CUSTOMER_CONFIRM'
+  const harness = viewHarness({ api: { listProcurements: async () => ({ records: [{ orderNo: 'PO-1', status, purchaseQuantity: 10 }], total: 1 }) } })
+  try {
+    await flush()
+    const actions = harness.state.rowActions(harness.state.rows.value[0])
+    assert.deepEqual(normalized(actions.map(action => action.key)), ['detail', 'reject', 'confirm'])
+    actions[1].run(); assert.equal(harness.state.decision.value, 'reject')
+    assert.equal(harness.state.decisionTarget.value.orderNo, 'PO-1')
+    status = 'CONFIRMED'; harness.state.decisionChanged(); await flush()
+    assert.equal(harness.state.decisionTarget.value, null)
+    assert.deepEqual(normalized(harness.state.rowActions(harness.state.rows.value[0]).map(action => action.key)), ['detail'])
+    harness.auth.hasPermission = () => false
+    assert.equal(harness.state.rowActions({ orderNo: 'PO-1', status: 'WAIT_CUSTOMER_CONFIRM' }).length, 1)
+    const source = readFileSync(new URL('./views/ProcurementView.vue', import.meta.url), 'utf8')
+    const detailHeader = source.slice(source.indexOf('<header class="procurement-heading">'), source.indexOf('</header>', source.indexOf('<header class="procurement-heading">')))
+    assert.doesNotMatch(detailHeader, /确认采购结果|驳回/)
+  } finally { harness.dispose() }
+})
+
+test('product links must be nonblank and use HTTP or HTTPS before budget reservation', async () => {
+  for (const productUrl of ['', '   ', 'javascript:alert(1)', 'invalid', 'https://' ]) {
+    assert.throws(() => presentation.buildProcurementCreate({ ...draft(), productUrl }, 'Company', 'key'), /商品链接/)
+  }
+  let budgets = 0, creates = 0
+  const harness = viewHarness({ createPage: true, api: { requireOrderBudget: async () => { budgets++ }, createProcurement: async () => { creates++ } } })
+  try {
+    for (const productUrl of ['', '   ']) {
+      Object.assign(harness.state.form, draft(), { productUrl }); await harness.state.submit()
+    }
+    assert.equal(budgets, 0); assert.equal(creates, 0); assert.equal(harness.pushes.length, 0)
+  } finally { harness.dispose() }
+})

src/modules/cross-border/procurementDecision.test.mjs

@@ -0,0 +1,138 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { readFileSync } from 'node:fs'
+import { runInNewContext } from 'node:vm'
+import ts from 'typescript'
+import * as vue from 'vue'
+import { parse, compileScript } from 'vue/compiler-sfc'
+
+const source = readFileSync(new URL('./components/ProcurementDecisionDialog.vue', import.meta.url), 'utf8')
+const { descriptor } = parse(source)
+const code = ts.transpileModule(compileScript(descriptor, { id: 'decision-test' }).content, { compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.CommonJS } }).outputText
+const flush = async () => { await vue.nextTick(); await new Promise(resolve => setImmediate(resolve)); await vue.nextTick() }
+let key = 0
+function harness({ decision = 'confirm', api = {} } = {}) {
+  const props = vue.reactive({ order: { orderNo: 'PO-1', productName: '商品', purchaseQuantity: 10 }, decision })
+  const auth = vue.reactive({ token: 'customer-A', hasPermission: () => true })
+  const calls = [], events = [], disposers = [], created = [], revoked = []
+  const workflow = { orderNo: 'PO-1', status: 'WAIT_CUSTOMER_CONFIRM', version: 7, receivedQuantity: 8, files: [{ fileId: 'F-1', fileName: 'photo.png' }], receipts: [{ id: 'R-1', quantity: 5, fileIds: ['F-1'], receivedAt: '' }, { id: 'R-2', quantity: 3, fileIds: ['F-2'], receivedAt: '' }] }
+  const defaults = {
+    getProcurementWorkflow: async () => workflow,
+    getProcurementFile: async () => ({ type: 'image/png' }),
+    confirmProcurement: async (orderNo, payload) => { calls.push({ orderNo, ...payload }); return { ...workflow, status: 'CONFIRMED' } },
+    rejectProcurement: async (orderNo, payload) => { calls.push({ orderNo, ...payload }); return { ...workflow, status: 'RECEIVING' } },
+  }
+  const context = { exports: {}, Error, URL: { createObjectURL: () => { const url = `blob:${created.length}`; created.push(url); return url }, revokeObjectURL: url => revoked.push(url) }, require(name) {
+    if (name === 'vue') return { ...vue, onBeforeUnmount: callback => disposers.push(callback) }
+    if (name === 'element-plus') return { ElMessage: { success: () => {} } }
+    if (name === '@/api/session') return { accessTokenIdentity: token => token }
+    if (name === '@/modules/auth/public') return { useAuthStore: () => auth }
+    if (name === '../api/procurement') return { ...defaults, ...api }
+    if (name === '../procurementSubmission') return { procurementRequestKey: () => `key-${++key}` }
+    if (name === '../procurementPresentation') return { dateTime: value => value }
+    throw new Error(`unexpected import ${name}`)
+  } }
+  runInNewContext(code, context)
+  const state = context.exports.default.setup(props, { expose: () => {}, emit: (...args) => events.push(args) })
+  return { state, auth, calls, events, created, revoked, workflow, dispose: () => disposers.forEach(callback => callback()) }
+}
+
+test('both decisions load receipt photos and batch quantities with preview URL cleanup', async () => {
+  for (const decision of ['confirm', 'reject']) {
+    const h = harness({ decision })
+    try {
+      await flush()
+      assert.equal(h.state.workflow.value.receivedQuantity, 8)
+      assert.equal(h.state.workflow.value.receipts.length, 2)
+      assert.equal(Object.keys(h.state.photos.value).length, 2)
+      assert.equal(h.state.canSubmit.value, true)
+      assert.equal(h.state.fileName('F-1'), 'photo.png')
+      assert.match(source, /order.purchaseQuantity/)
+      assert.match(source, /receipt.quantity/)
+      assert.match(source, /<el-image/)
+      assert.match(source, /preview-src-list/)
+    } finally { h.dispose() }
+    assert.deepEqual(h.revoked, h.created)
+  }
+})
+
+test('confirmation uses current version, prevents double submits, and signals list refresh', async () => {
+  let finish, calls = []
+  const h = harness({ api: { confirmProcurement: (orderNo, command) => { calls.push({ orderNo, ...command }); return new Promise(resolve => { finish = resolve }) } } })
+  try {
+    await flush()
+    const pending = h.state.submitDecision(); await h.state.submitDecision()
+    assert.equal(calls.length, 1); assert.equal(calls[0].version, 7); assert.equal(calls[0].orderNo, 'PO-1')
+    finish({ status: 'CONFIRMED' }); await pending
+    assert.deepEqual(h.events, [['changed']])
+  } finally { h.dispose() }
+})
+
+test('rejection requires a trimmed reason and retries unchanged payload with the same key', async () => {
+  const calls = []
+  const h = harness({ decision: 'reject', api: { rejectProcurement: async (orderNo, command) => { calls.push({ orderNo, ...command }); throw new Error('网络失败') } } })
+  try {
+    await flush()
+    for (const reason of ['', '   ', 'x'.repeat(1001)]) {
+      h.state.reason.value = reason; await h.state.submitDecision()
+      assert.match(h.state.error.value, /请填写驳回原因/)
+    }
+    assert.equal(calls.length, 0)
+    h.state.reason.value = ' 照片不清晰 '
+    await h.state.submitDecision(); await h.state.submitDecision()
+    assert.equal(calls.length, 2); assert.equal(calls[0].reason, '照片不清晰'); assert.equal(calls[0].version, 7)
+    assert.equal(calls[0].idempotencyKey, calls[1].idempotencyKey)
+    assert.equal(h.state.reason.value, ' 照片不清晰 '); assert.equal(h.events.length, 0)
+    h.state.reason.value = '数量不符'; await h.state.submitDecision()
+    assert.notEqual(calls[1].idempotencyKey, calls[2].idempotencyKey)
+  } finally { h.dispose() }
+})
+
+test('confirmation retry preserves the loaded evidence and idempotency key', async () => {
+  const calls = []
+  const h = harness({ api: { confirmProcurement: async (_, command) => { calls.push(command); throw new Error('版本已更新，请刷新') } } })
+  try {
+    await flush(); await h.state.submitDecision(); await h.state.submitDecision()
+    assert.equal(calls.length, 2); assert.equal(calls[0].idempotencyKey, calls[1].idempotencyKey)
+    assert.equal(h.state.workflow.value.version, 7); assert.equal(Object.keys(h.state.photos.value).length, 2)
+    assert.equal(h.state.saving.value, false); assert.equal(h.events.length, 0)
+  } finally { h.dispose() }
+})
+
+test('successful rejection sends the trimmed reason and signals list refresh', async () => {
+  const h = harness({ decision: 'reject' })
+  try {
+    await flush(); h.state.reason.value = ' 数量不符 '; await h.state.submitDecision()
+    assert.equal(h.calls[0].reason, '数量不符'); assert.equal(h.calls[0].version, 7)
+    assert.deepEqual(h.events, [['changed']])
+  } finally { h.dispose() }
+})
+
+test('photo loading failures can be retried before a decision is submitted', async () => {
+  let fail = true
+  const h = harness({ api: { getProcurementFile: async () => { if (fail) throw new Error('failed'); return { type: 'image/png' } } } })
+  try {
+    await flush(); await h.state.submitDecision()
+    assert.equal(h.calls.length, 0); assert.match(h.state.photoError.value, /照片加载失败/)
+    fail = false; await h.state.load(); await h.state.submitDecision()
+    assert.equal(h.calls.length, 1)
+  } finally { h.dispose() }
+})
+
+test('stale status, revoked permission and changed account cannot submit decisions', async () => {
+  const stale = harness({ api: { getProcurementWorkflow: async () => ({ status: 'CONFIRMED', receipts: [] }) } })
+  try { await flush(); await stale.state.submitDecision(); assert.equal(stale.calls.length, 0) } finally { stale.dispose() }
+  const h = harness()
+  try {
+    await flush(); h.auth.hasPermission = () => false; await h.state.submitDecision(); assert.equal(h.calls.length, 0)
+    h.auth.hasPermission = () => true; h.auth.token = 'customer-B'; await h.state.submitDecision(); assert.equal(h.calls.length, 0)
+  } finally { h.dispose() }
+})
+
+test('late photo responses after closing do not allocate preview URLs', async () => {
+  const pending = []
+  const h = harness({ api: { getProcurementFile: () => new Promise(resolve => pending.push(resolve)) } })
+  await flush(); h.dispose()
+  pending.forEach(resolve => resolve({ type: 'image/png' })); await flush()
+  assert.equal(h.created.length, 0); assert.equal(h.events.length, 0)
+})

src/modules/cross-border/procurementPresentation.ts

@@ -1,21 +1,20 @@
 import type { Amount, ProcurementCreate, ProcurementFee } from './api/procurement'
 
 export const procurementStatuses: Record<string, string> = {
-  PENDING_REVIEW: '待审核', WAIT_PURCHASE: '待购买', WAIT_OVERSEAS_RECEIPT: '待海外到仓', OVERSEAS_RECEIVING: '海外收货中',
-  WAIT_PACKING: '待装箱', WAIT_LABELS: '待面单及预估处理', WAIT_OVERSEAS_SHIPMENT: '待海外交寄', INTERNATIONAL_TRANSIT: '国际运输中',
-  DOMESTIC_RECEIVING: '国内收货中', WAIT_CHARGES: '待国内核费', WAIT_CUSTOMER_SHIPMENT: '待寄客户', SHIPPED_TO_CUSTOMER: '已寄客户',
-  REJECTED: '已拒绝', CANCELLED: '已取消', EXCEPTION_CLOSED: '异常关闭',
+  FUNDING_PENDING: '订单受理中', FUNDING_FAILED: '订单处理失败', PENDING_REVIEW: '待审核', RECEIVING: '收货中', WAIT_CUSTOMER_CONFIRM: '待客户确认', CONFIRMED: '已确认',
+  IN_TRANSIT: '运输中', DELIVERING: '派送中', COMPLETED: '签收完成',
+  REJECTED: '已拒绝', CANCELLED: '已取消',
 }
 export const feePurposes: Record<string, string> = {
   SAMPLE_PAYMENT: '样品货款', INTERNATIONAL_ESTIMATE: '预估国际运费', INTERNATIONAL_FREIGHT: '实际国际运费',
   DUTY: '关税', DOMESTIC_FREIGHT: '国内运费', OTHER: '其他费用', ADJUSTMENT: '追加费用', REFUND: '退款',
 }
-export function statusLabel(status: string | null | undefined) { return status ? procurementStatuses[status] || '待核对进度' : '—' }
+export function statusLabel(status: string | null | undefined, direction?: string | null) { return regionText(status ? procurementStatuses[status] || '待核对进度' : '—', direction) }
 export function statusTone(status: string | null | undefined): 'success' | 'warning' | 'danger' | 'info' | 'primary' {
-  if (status === 'SHIPPED_TO_CUSTOMER') return 'success'
-  if (status === 'REJECTED' || status === 'EXCEPTION_CLOSED') return 'danger'
+  if (status === 'COMPLETED' || status === 'CONFIRMED') return 'success'
+  if ((status === 'REJECTED' || status === 'FUNDING_FAILED')) return 'danger'
   if (status === 'CANCELLED') return 'info'
-  if (status === 'INTERNATIONAL_TRANSIT') return 'primary'
+  if (status === 'IN_TRANSIT' || status === 'DELIVERING') return 'primary'
   return 'warning'
 }
 function cents(value: Amount | null | undefined): bigint | null {
@@ -46,6 +45,12 @@ export function productHref(value: string | null | undefined) {
   try { const url = new URL(value); return ['http:', 'https:'].includes(url.protocol) ? url.href : undefined } catch { return undefined }
 }
 export function feeStatus(fee: ProcurementFee) {
+  if (fee.walletStatus === 'NOT_REQUIRED') {
+    if (fee.determination === 'PENDING') return '账单结算 · 待审核'
+    if (fee.determination === 'APPROVED') return '账单结算 · 已确认'
+    if (fee.determination === 'REJECTED') return '账单结算 · 已拒绝'
+    return '账单结算'
+  }
   if (fee.purpose === 'INTERNATIONAL_ESTIMATE') {
     const label: Record<string, string> = { FROZEN: '已冻结，未扣款', ZERO: '零预估已确认', SETTLED: '原预估已结清', RELEASED: '预估已释放' }
     if (fee.walletStatus && label[fee.walletStatus]) return label[fee.walletStatus]
@@ -58,6 +63,8 @@ export function feeStatus(fee: ProcurementFee) {
   return fee.walletStatus ? labels[fee.walletStatus] || '待核定' : '待核定'
 }
 export function feeTone(fee: ProcurementFee): 'success' | 'warning' | 'danger' | 'info' {
+  if (fee.determination === 'REJECTED') return 'danger'
+  if (fee.walletStatus === 'NOT_REQUIRED' && fee.determination === 'APPROVED') return 'info'
   if (fee.walletStatus?.endsWith('_FAILED')) return 'danger'
   if (['SETTLED', 'REFUNDED', 'ZERO', 'NOT_APPLICABLE', 'RELEASED'].includes(fee.walletStatus || '')) return 'success'
   if (fee.walletStatus === 'TERMINATED') return 'info'
@@ -79,6 +86,7 @@ export function feeTotals(fees: ProcurementFee[]) {
   return { paid: decimal(paid), refunded: decimal(refunded), net: decimal(paid - refunded), estimatedHold: decimal(estimatedHold) }
 }
 export interface ProcurementDraft {
+  procurementDirection?: ProcurementDirection
   purchaseCategory: string
   productName: string
   productSpecification: string
@@ -92,7 +100,7 @@ export interface ProcurementDraft {
   remark: string
 }
 export function emptyProcurementDraft(): ProcurementDraft {
-  return { purchaseCategory: '', productName: '', productSpecification: '', productUrl: '', purchaseQuantity: '1', budgetUnitPrice: '', currency: 'USD', receivingAddress: '', contactName: '', contactPhone: '', remark: '' }
+  return { procurementDirection: 'OVERSEAS_TO_DOMESTIC', purchaseCategory: '', productName: '', productSpecification: '', productUrl: '', purchaseQuantity: '1', budgetUnitPrice: '', currency: 'USD', receivingAddress: '', contactName: '', contactPhone: '', remark: '' }
 }
 export function draftBudgetTotal(draft: ProcurementDraft) {
   const price = cents(draft.budgetUnitPrice)
@@ -101,7 +109,7 @@ export function draftBudgetTotal(draft: ProcurementDraft) {
 }
 export function buildProcurementCreate(draft: ProcurementDraft, customerName: string, key: string): ProcurementCreate {
   for (const [field, label, max] of [
-    ['productName', '商品名称', 255], ['receivingAddress', '完整国内收货地址', 1000],
+    ['productName', '商品名称', 255], ['receivingAddress', '完整目的地收货地址', 1000],
     ['contactName', '最终收件人', 128], ['contactPhone', '联系电话', 64],
   ] as const) {
     if (!draft[field].trim() || draft[field].trim().length > max) throw new Error(`请填写有效的${label}`)
@@ -114,11 +122,23 @@ export function buildProcurementCreate(draft: ProcurementDraft, customerName: st
   if (price > BigInt(Number.MAX_SAFE_INTEGER) || cents(Number(decimal(price))) !== price) throw new Error('预算金额过大，无法准确表示，请核对金额')
   if (!['CNY', 'USD'].includes(draft.currency)) throw new Error('预算币种只支持 CNY 或 USD')
   if (!/^[+0-9][0-9 ()-]{5,63}$/.test(draft.contactPhone.trim())) throw new Error('请填写快递可联系的电话号码，微信或邮箱不能代替电话')
-  if (draft.productUrl && (!productHref(draft.productUrl.trim()) || draft.productUrl.trim().length > 2000)) throw new Error('商品链接须为有效的 http 或 https 地址')
+  if (!draft.productUrl.trim()) throw new Error('请输入商品链接')
+  if (!productHref(draft.productUrl.trim()) || draft.productUrl.trim().length > 2000) throw new Error('商品链接须为有效的 http 或 https 地址')
   if (draft.productSpecification.length > 500 || draft.remark.length > 1000) throw new Error('商品规格或备注超过长度限制')
-  return { customerName: customerName.trim(), purchaseCategory: draft.purchaseCategory.trim(), productName: draft.productName.trim(),
+  if (draft.procurementDirection && !['OVERSEAS_TO_DOMESTIC', 'DOMESTIC_TO_OVERSEAS'].includes(draft.procurementDirection)) throw new Error('请选择有效采购方向')
+  return { procurementDirection: draft.procurementDirection || 'OVERSEAS_TO_DOMESTIC', customerName: customerName.trim(), purchaseCategory: draft.purchaseCategory.trim(), productName: draft.productName.trim(),
     productSpecification: draft.productSpecification.trim() || undefined, productUrl: draft.productUrl.trim() || undefined,
     purchaseQuantity: Number(draft.purchaseQuantity), budgetUnitPrice: Number(decimal(price)), currency: draft.currency,
     receivingAddress: draft.receivingAddress.trim(), contactName: draft.contactName.trim(), contactPhone: draft.contactPhone.trim(),
     remark: draft.remark.trim() || undefined, idempotencyKey: key }
 }
+
+export type ProcurementDirection = 'OVERSEAS_TO_DOMESTIC' | 'DOMESTIC_TO_OVERSEAS'
+export const procurementDirections: Record<ProcurementDirection, string> = {
+  OVERSEAS_TO_DOMESTIC: '海外采购，发往国内', DOMESTIC_TO_OVERSEAS: '国内采购，发往海外',
+}
+export function directionLabel(direction?: string | null) { return direction === 'DOMESTIC_TO_OVERSEAS' ? procurementDirections.DOMESTIC_TO_OVERSEAS : procurementDirections.OVERSEAS_TO_DOMESTIC }
+// 两个历史段编码表示起运段和目的地段，展示区域按订单方向转换。
+export function regionText(text: string, direction?: string | null) {
+  return direction === 'DOMESTIC_TO_OVERSEAS' ? text.replaceAll('海外', '__ORIGIN__').replaceAll('国内', '海外').replaceAll('__ORIGIN__', '国内') : text
+}

src/modules/cross-border/transportDemandForm.test.mjs

@@ -7,7 +7,7 @@ import ts from 'typescript'
 const source = readFileSync(new URL('./transportDemandForm.ts', import.meta.url), 'utf8')
 const code = ts.transpileModule(source, { compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.ESNext } }).outputText.replace(/^export /gm, '')
 const { createTransportDemandForm, transportDemandError, buildTransportDemand } = runInNewContext(`${code}\n({ createTransportDemandForm, transportDemandError, buildTransportDemand })`)
-const valid = () => ({ ...createTransportDemandForm(), vehicleType: 'PALLET_15', origin: ' LA ', destination: ' ONT ', originContactName: ' 发货人 ', originContactPhone: ' +1-555-0100 ', destinationContactName: ' 收货人 ', destinationContactPhone: ' +1-555-0101 ', pickupAt: '2026-10-20T09:30:45', deliveryAt: '2026-10-20T15:45:12' })
+const valid = () => ({ ...createTransportDemandForm(), vehicleType: 'PALLET_15', estimatedPalletCount: 3, budgetAmount: 100, origin: ' LA ', destination: ' ONT ', originContactName: ' 发货人 ', originContactPhone: ' +1-555-0100 ', destinationContactName: ' 收货人 ', destinationContactPhone: ' +1-555-0101 ', pickupAt: '2026-10-20T09:30:45', deliveryAt: '2026-10-20T15:45:12' })
 
 test('initial form leaves contacts and times blank, zeroes cargo and distinguishes blank budget from zero', () => {
   const form = createTransportDemandForm()
@@ -15,8 +15,8 @@ test('initial form leaves contacts and times blank, zeroes cargo and distinguish
   for (const key of ['estimatedPalletCount', 'packageCount', 'totalWeightKg', 'totalVolumeCbm']) assert.equal(form[key], 0)
   assert.equal(form.budgetAmount, undefined)
   assert.equal(form.currency, 'USD')
-  assert.equal(buildTransportDemand('truck', valid()).budgetAmount, undefined)
-  assert.equal(buildTransportDemand('truck', { ...valid(), budgetAmount: 0 }).budgetAmount, 0)
+  assert.throws(() => buildTransportDemand('truck', { ...valid(), budgetAmount: undefined }), /预算/)
+  assert.throws(() => buildTransportDemand('truck', { ...valid(), budgetAmount: 0 }), /预算/)
 })
 
 for (const kind of ['truck', 'looseboard']) {
@@ -53,6 +53,8 @@ test('truck accepts only the two vehicle types and does not submit looseboard ca
   const truck = buildTransportDemand('truck', { ...valid(), productName: 'cargo', estimatedPalletCount: 3 })
   assert.equal(Object.hasOwn(truck, 'productName'), false)
   assert.equal(Object.hasOwn(truck, 'estimatedPalletCount'), false)
+  assert.equal(truck.palletCount, 3)
+  assert.equal(Object.hasOwn(truck, 'packageCount'), false)
   const loose = buildTransportDemand('looseboard', { ...valid(), vehicleType: '', productName: ' cargo ', estimatedPalletCount: 3, packageCount: 8 })
   assert.equal(Object.hasOwn(loose, 'vehicleType'), false)
   assert.equal(loose.productName, 'cargo')

src/modules/cross-border/transportDemandForm.ts

@@ -32,10 +32,14 @@ export function createTransportDemandForm(): TransportDemandForm {
   }
 }
 
-const requiredText = {
-  origin: '起运地', destination: '目的地', originContactName: '起运地联系人',
-  originContactPhone: '起运地联系电话', destinationContactName: '目的地联系人', destinationContactPhone: '目的地联系电话',
-} as const
+const requiredText = (kind: TransportDemandKind) => ({
+  origin: kind === 'truck' ? '取货地' : '起运地',
+  destination: kind === 'truck' ? '送达地' : '目的地',
+  originContactName: kind === 'truck' ? '取货联系人' : '起运地联系人',
+  originContactPhone: kind === 'truck' ? '取货联系电话' : '起运地联系电话',
+  destinationContactName: kind === 'truck' ? '送达联系人' : '目的地联系人',
+  destinationContactPhone: kind === 'truck' ? '送达联系电话' : '目的地联系电话',
+} as const)
 
 export function localMinuteInput(value: unknown) {
   return typeof value === 'string' && value ? `${value.slice(0, 16)}:00` : ''
@@ -43,36 +47,42 @@ export function localMinuteInput(value: unknown) {
 
 export function transportDemandRules(kind: TransportDemandKind, form: TransportDemandForm): FormRules<TransportDemandForm> {
   const rules: FormRules<TransportDemandForm> = {}
-  for (const [field, label] of Object.entries(requiredText)) {
-    rules[field as keyof typeof requiredText] = [{ required: true, whitespace: true, message: `请输入${label}`, trigger: 'blur' }]
+  const labels = requiredText(kind)
+  for (const [field, label] of Object.entries(labels)) {
+    rules[field as keyof typeof labels] = [{ required: true, whitespace: true, message: `请输入${label}`, trigger: 'blur' }]
   }
   if (kind === 'truck') rules.vehicleType = [{ required: true, message: '请选择车辆类型', trigger: 'change' }]
   for (const [field, label] of [['packageCount', '件数'], ['estimatedPalletCount', '预计托数'], ['totalWeightKg', '总重量'], ['totalVolumeCbm', '总体积']] as const) {
-    if (field === 'estimatedPalletCount' && kind !== 'looseboard') continue
+    if (field === 'packageCount' && kind === 'truck') continue
     rules[field] = [{ required: true, type: 'number', min: 0, message: `${label}须为不小于 0 的数字`, trigger: 'change' }]
   }
-  rules.budgetAmount = [{ type: 'number', min: 0, message: '预算总价不能小于 0', trigger: 'change' }]
-  rules.pickupAt = [{ required: true, message: '请选择取货时间', trigger: 'change' }]
-  rules.deliveryAt = [{ required: true, message: '请选择送货时间', trigger: 'change' }, {
-    validator: (_rule, value, callback) => callback(value && form.pickupAt && localMinuteInput(value) < localMinuteInput(form.pickupAt) ? new Error('送货时间不能早于取货时间') : undefined), trigger: 'change',
+  rules.budgetAmount = [{ required: kind === 'truck', type: 'number', min: kind === 'truck' ? 0.01 : 0, message: '请输入大于 0 的预算总价', trigger: 'change' }]
+  const pickupLabel = kind === 'truck' ? '取货时间' : '取货时间', deliveryLabel = kind === 'truck' ? '送达时间' : '送货时间'
+  rules.pickupAt = [{ required: true, message: `请选择${pickupLabel}`, trigger: 'change' }]
+  rules.deliveryAt = [{ required: true, message: `请选择${deliveryLabel}`, trigger: 'change' }, {
+    validator: (_rule, value, callback) => callback(value && form.pickupAt && localMinuteInput(value) < localMinuteInput(form.pickupAt) ? new Error(`${deliveryLabel}不能早于${pickupLabel}`) : undefined), trigger: 'change',
   }]
   return rules
 }
 
 export function transportDemandError(kind: TransportDemandKind, form: TransportDemandForm): string | undefined {
   if (kind === 'truck' && !['PALLET_15', 'PALLET_30'].includes(form.vehicleType)) return '请选择车辆类型'
-  for (const [field, label] of Object.entries(requiredText)) {
-    if (!String(form[field as keyof typeof requiredText] || '').trim()) return `请输入${label}`
+  const labels = requiredText(kind)
+  for (const [field, label] of Object.entries(labels)) {
+    if (!String(form[field as keyof typeof labels] || '').trim()) return `请输入${label}`
   }
-  for (const [field, label] of [['pickupAt', '取货时间'], ['deliveryAt', '送货时间']] as const) {
+  const pickupLabel = kind === 'truck' ? '取货时间' : '取货时间', deliveryLabel = kind === 'truck' ? '送达时间' : '送货时间'
+  for (const [field, label] of [['pickupAt', pickupLabel], ['deliveryAt', deliveryLabel]] as const) {
     if (!form[field]) return `请选择${label}`
     if (!/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?$/.test(form[field])) return `请选择有效的${label}`
   }
-  if (localMinuteInput(form.deliveryAt) < localMinuteInput(form.pickupAt)) return '送货时间不能早于取货时间'
+  if (localMinuteInput(form.deliveryAt) < localMinuteInput(form.pickupAt)) return `${deliveryLabel}不能早于${pickupLabel}`
   for (const [field, label] of [['packageCount', '件数'], ['totalWeightKg', '总重量'], ['totalVolumeCbm', '总体积'], ...(kind === 'looseboard' ? [['estimatedPalletCount', '预计托数'] as const] : [])] as const) {
     if (!Number.isFinite(form[field]) || form[field] < 0) return `${label}须为不小于 0 的数字`
   }
   if (!Number.isInteger(form.packageCount) || kind === 'looseboard' && !Number.isInteger(form.estimatedPalletCount)) return '件数和预计托数须为整数'
+  if (kind === 'truck' && (!Number.isSafeInteger(form.estimatedPalletCount) || form.estimatedPalletCount <= 0)) return '请输入大于 0 的托数'
+  if (kind === 'truck' && (form.budgetAmount == null || !Number.isFinite(form.budgetAmount) || form.budgetAmount <= 0)) return '请输入大于 0 的预算总价'
   if (form.budgetAmount != null && (!Number.isFinite(form.budgetAmount) || form.budgetAmount < 0)) return '预算总价不能小于 0'
   if (!['USD', 'CNY'].includes(form.currency)) return '请选择预算币种'
   return undefined
@@ -91,7 +101,7 @@ function commonPayload(form: TransportDemandForm) {
 }
 
 type CommonPayload = ReturnType<typeof commonPayload>
-type TruckPayload = CommonPayload & { vehicleType: 'PALLET_15' | 'PALLET_30' }
+type TruckPayload = Omit<CommonPayload, 'packageCount'> & { palletCount: number; vehicleType: 'PALLET_15' | 'PALLET_30' }
 type LooseboardPayload = CommonPayload & { productName: string | undefined; estimatedPalletCount: number }
 
 export function buildTransportDemand(kind: 'truck', form: TransportDemandForm): TruckPayload
@@ -101,6 +111,6 @@ export function buildTransportDemand(kind: TransportDemandKind, form: TransportD
   if (failure) throw new Error(failure)
   const common = commonPayload(form)
   return kind === 'truck'
-    ? { ...common, vehicleType: form.vehicleType as 'PALLET_15' | 'PALLET_30' }
+    ? { ...(({ packageCount: _packages, ...rest }) => rest)(common), palletCount: form.estimatedPalletCount, vehicleType: form.vehicleType as 'PALLET_15' | 'PALLET_30' }
     : { ...common, productName: form.productName.trim() || undefined, estimatedPalletCount: form.estimatedPalletCount }
 }

src/modules/cross-border/views/ProcurementView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ElMessage } from 'element-plus'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { ApiError } from '@/api/types'
 import { accessTokenIdentity } from '@/api/session'
 import { useAuthStore } from '@/modules/auth/public'
@@ -9,8 +9,10 @@ import DataTable, { type DataTableColumn } from '@/components/common/DataTable.v
 import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
 import type { TableAction } from '@/components/common/tableActions'
 import ProcurementDetailPanel from '../components/ProcurementDetailPanel.vue'
-import { createProcurement, getProcurement, listProcurements, type ProcurementDetail, type ProcurementSummary } from '../api/procurement'
-import { buildProcurementCreate, dateTime, draftBudgetTotal, emptyProcurementDraft, money, procurementStatuses, statusLabel, statusTone } from '../procurementPresentation'
+import ProcurementDecisionDialog from '../components/ProcurementDecisionDialog.vue'
+import { createProcurement, getProcurement, getProcurementWorkflow, listProcurements, type ProcurementDetail, type ProcurementSummary, type ProcurementWorkflow } from '../api/procurement'
+import { procurementDirections, directionLabel, regionText, buildProcurementCreate, dateTime, draftBudgetTotal, emptyProcurementDraft, money, procurementStatuses, statusLabel, statusTone } from '../procurementPresentation'
+import OrderFundingStatus from '../components/OrderFundingStatus.vue'
 import { procurementRequestKey } from '../procurementSubmission'
 
 const props = withDefaults(defineProps<{ createPage?: boolean; detailPage?: boolean }>(), { createPage: false, detailPage: false })
@@ -22,12 +24,32 @@ const canList = computed(() => auth.hasPermission('merchant:cross-border:procure
 const identity = computed(() => auth.token ? accessTokenIdentity(auth.token) : null)
 const companyName = computed(() => auth.profile.tenantName || (auth.user?.tenantName && !/^企业租户 \d+$/.test(auth.user.tenantName) ? auth.user.tenantName : ''))
 const form = reactive(emptyProcurementDraft())
+const formRef = ref<FormInstance>()
+const formRules: FormRules<typeof form> = {
+  procurementDirection: [{ required: true, message: '请选择采购方向', trigger: 'change' }],
+  productName: [{ required: true, whitespace: true, message: '请输入商品名称', trigger: 'blur' }],
+  productUrl: [{ required: true, whitespace: true, message: '请输入商品链接', trigger: 'blur' }],
+  purchaseQuantity: [{ required: true, whitespace: true, message: '请输入采购数量', trigger: 'blur' }],
+  budgetUnitPrice: [{ required: true, whitespace: true, message: '请输入预算单价', trigger: 'blur' }],
+  currency: [{ required: true, message: '请选择预算币种', trigger: 'change' }],
+  contactName: [{ required: true, whitespace: true, message: '请输入收件人姓名', trigger: 'blur' }],
+  contactPhone: [{ required: true, whitespace: true, message: '请输入联系电话', trigger: 'blur' }],
+  receivingAddress: [{ required: true, whitespace: true, message: '请输入完整收货地址', trigger: 'blur' }],
+}
+const summaryQuantity = computed(() => /^\d+$/.test(form.purchaseQuantity) && Number.isSafeInteger(Number(form.purchaseQuantity)) && Number(form.purchaseQuantity) > 0 ? String(Number(form.purchaseQuantity)) : '—')
+const summaryUnitPrice = computed(() => draftBudgetTotal({ ...form, purchaseQuantity: '1' }) ?? '—')
+const summaryCurrencyName = computed(() => form.currency === 'USD' ? '美元' : '人民币')
+const budgetTotal = computed(() => summaryQuantity.value === '—' ? null : draftBudgetTotal(form))
 const submitError = ref(''), submittedOrder = ref('')
 const submitting = ref(false), loading = ref(false), error = ref('')
 const detail = shallowRef<ProcurementDetail | null>(null)
+const workflow = shallowRef<ProcurementWorkflow | null>(null)
+const decisionTarget = shallowRef<ProcurementSummary | null>(null)
+const decision = ref<'confirm' | 'reject'>('confirm')
 const rows = ref<ProcurementSummary[]>([]), total = ref(0)
 const query = reactive({ page: 1, size: 20, orderNo: '', purchaseCategory: '', productName: '', status: '' })
 let requestSequence = 0, active = true, inFlight = ''
+let createAttempt: { fingerprint: string; key: string } | null = null
 const queryModel = computed<QueryModel>({
   get: () => ({ orderNo: query.orderNo, purchaseCategory: query.purchaseCategory, productName: query.productName, status: query.status }),
   set: value => { for (const key of ['orderNo', 'purchaseCategory', 'productName', 'status'] as const) query[key] = String(value[key] || '') },
@@ -38,14 +60,27 @@ const queryFields: QueryField[] = [
   { key: 'status', label: '履约进度', type: 'select', options: Object.entries(procurementStatuses).map(([value, label]) => ({ value, label })) },
 ]
 const columns: DataTableColumn[] = [
-  { key: 'actions', label: '操作', width: 90, fixed: 'left', slotName: 'actions' },
+  { key: 'actions', label: '操作', width: 260, fixed: 'left', slotName: 'actions' },
+  { prop: 'procurementDirection', label: '采购方向', minWidth: 170, slotName: 'direction' },
   { prop: 'orderNo', label: '采购单号', minWidth: 250, slotName: 'orderNo' },
   { prop: 'purchaseCategory', label: '采购品类', width: 120 }, { prop: 'productName', label: '商品名称', minWidth: 200 },
   { prop: 'productSpecification', label: '商品规格', minWidth: 160 }, { prop: 'purchaseQuantity', label: '采购数量（件）', width: 135 },
   { prop: 'budgetUnitPrice', label: '预算单价', width: 155, slotName: 'budget' },
-  { prop: 'status', label: '履约进度', width: 180, slotName: 'status' }, { prop: 'createdAt', label: '下单时间', width: 185, slotName: 'createdAt' },
+  { prop: 'status', label: '履约进度', width: 180, slotName: 'status' }, { prop: 'reviewRemark', label: '失败 / 拒绝原因', minWidth: 220, slotName: 'reviewRemark' }, { prop: 'createdAt', label: '下单时间', width: 185, slotName: 'createdAt' },
 ]
-function rowActions(row: object): TableAction[] { return [{ key: 'detail', label: '详情', run: () => openDetail(row as ProcurementSummary) }] }
+function rowActions(row: object): TableAction[] {
+  const order = row as ProcurementSummary
+  const actions: TableAction[] = [{ key: 'detail', label: '详情', run: () => openDetail(order) }]
+  if (canCreate.value && order.status === 'WAIT_CUSTOMER_CONFIRM') {
+    actions.push({ key: 'reject', label: '驳回', run: () => beginDecision(order, 'reject') }, { key: 'confirm', label: '确认采购结果', run: () => beginDecision(order, 'confirm') })
+  }
+  return actions
+}
+function beginDecision(order: ProcurementSummary, kind: 'confirm' | 'reject') {
+  if (!canCreate.value || order.status !== 'WAIT_CUSTOMER_CONFIRM') return
+  decision.value = kind; decisionTarget.value = order
+}
+function decisionChanged() { decisionTarget.value = null; void loadList() }
 function openDetail(row: ProcurementSummary) { if (row.orderNo) void router.push({ name: 'cross-border-procurement-detail', params: { orderNo: row.orderNo } }) }
 function returnToList() { if (canList.value) void router.push({ name: 'cross-border-procurement' }) }
 function message(cause: unknown) {
@@ -65,28 +100,42 @@ async function loadDetail() {
   if (!orderNo.value) { error.value = '采购单号缺失'; return }
   const key = JSON.stringify([identity.value, orderNo.value])
   if (inFlight === key) return
-  const sequence = ++requestSequence; inFlight = key; loading.value = true; error.value = ''; detail.value = null
-  try { const result = await getProcurement(orderNo.value); if (sequence === requestSequence) detail.value = result }
+  const sequence = ++requestSequence; inFlight = key; loading.value = true; error.value = ''; detail.value = null; workflow.value = null
+  try {
+    const [result, currentWorkflow] = await Promise.all([getProcurement(orderNo.value), getProcurementWorkflow(orderNo.value)])
+    if (sequence === requestSequence) { detail.value = result; workflow.value = currentWorkflow }
+  }
   catch (cause) { if (sequence === requestSequence) error.value = message(cause) }
   finally { if (sequence === requestSequence) { loading.value = false; inFlight = '' } }
 }
 function search() { if (query.page === 1) void loadList(); else query.page = 1 }
 function resetQuery() { const reload = query.page === 1; Object.assign(query, { page: 1, orderNo: '', purchaseCategory: '', productName: '', status: '' }); if (reload) void loadList() }
-function resetForm() { submitError.value = ''; submittedOrder.value = ''; Object.assign(form, emptyProcurementDraft()) }
+function resetForm() { submitError.value = ''; submittedOrder.value = ''; Object.assign(form, emptyProcurementDraft()); formRef.value?.clearValidate(); createAttempt = null }
 async function submit() {
   if (submitting.value || !canCreate.value || !identity.value || submittedOrder.value) return
   const owner = identity.value; submitting.value = true; submitError.value = ''
   try {
-    const result = await createProcurement(buildProcurementCreate(form, companyName.value, procurementRequestKey()))
+    if (!formRef.value || !await formRef.value.validate().catch(() => false)) return
     if (!active || owner !== identity.value) return
-    submittedOrder.value = result.order.orderNo; ElMessage.success('采购订单已提交')
-    if (canList.value) await router.push({ name: 'cross-border-procurement-detail', params: { orderNo: result.order.orderNo } })
-  } catch (cause) { if (active && owner === identity.value) submitError.value = message(cause) }
+    const payload = buildProcurementCreate(form, companyName.value, '')
+    const fingerprint = JSON.stringify([owner, payload])
+    if (createAttempt?.fingerprint !== fingerprint) createAttempt = { fingerprint, key: procurementRequestKey() }
+    if (!active || owner !== identity.value) return
+    const result = await createProcurement({ ...payload, idempotencyKey: createAttempt.key })
+    if (!active || owner !== identity.value) return
+    createAttempt = null; submittedOrder.value = result.order.orderNo
+    ElMessage.success(result.order.status === 'FUNDING_PENDING' ? '采购订单已受理，资金校验完成后进入平台审核' : '采购订单已提交')
+    if (canList.value) await router.push({ name: 'cross-border-procurement' })
+  } catch (cause) {
+    if (/已释放|已过期/.test(message(cause))) createAttempt = null
+    if (active && owner === identity.value) submitError.value = message(cause)
+  }
   finally { submitting.value = false }
 }
 watch(() => [mode.value, orderNo.value, query.page, query.size, identity.value], (values, previous) => {
-  if (values[4] !== previous?.[4]) { rows.value = []; total.value = 0 }
-  ++requestSequence; inFlight = ''; loading.value = false; error.value = ''; detail.value = null
+  if (values[4] !== previous?.[4]) { rows.value = []; total.value = 0; createAttempt = null }
+  decisionTarget.value = null
+  ++requestSequence; inFlight = ''; loading.value = false; error.value = ''; detail.value = null; workflow.value = null
   if (mode.value === 'create') resetForm()
   else if (mode.value === 'detail') void loadDetail()
   else void loadList()
@@ -95,7 +144,7 @@ onBeforeUnmount(() => { active = false; ++requestSequence })
 </script>
 
 <template>
-  <section class="procurement-page client-ui" :aria-busy="loading || submitting">
+  <section class="procurement-page client-ui" :class="{ 'procurement-page--create': mode === 'create' }" :aria-busy="loading || submitting">
     <template v-if="mode === 'list'">
       <QueryToolbar v-model="queryModel" layout="grid" ariaLabel="采购订单查询条件" :fields="queryFields" :search-on-reset="false" @search="search" @reset="resetQuery" />
       <div class="procurement-table-card">
@@ -104,58 +153,156 @@ onBeforeUnmount(() => { active = false; ++requestSequence })
           <template v-if="error" #error><div class="procurement-error" role="alert"><span>{{ error }}</span><el-button :disabled="loading" @click="loadList">重新加载</el-button></div></template>
           <template #orderNo="{ row }"><button class="procurement-link" type="button" @click="openDetail(row as ProcurementSummary)">{{ (row as ProcurementSummary).orderNo || '—' }}</button></template>
           <template #budget="{ row }">{{ money((row as ProcurementSummary).budgetUnitPrice, (row as ProcurementSummary).currency) }}</template>
-          <template #status="{ row }"><el-tag :type="statusTone((row as ProcurementSummary).status)" size="small">{{ statusLabel((row as ProcurementSummary).status) }}</el-tag></template>
+          <template #direction="{ row }">{{ directionLabel((row as ProcurementSummary).procurementDirection) }}</template>
+          <template #status="{ row }"><el-tag :type="statusTone((row as ProcurementSummary).status)" size="small">{{ statusLabel((row as ProcurementSummary).status, (row as ProcurementSummary).procurementDirection) }}</el-tag></template>
+          <template #reviewRemark="{ row }"><OrderFundingStatus v-if="(row as ProcurementSummary).status === 'FUNDING_FAILED'" kind="procurement" :order-no="(row as ProcurementSummary).orderNo" :status="(row as ProcurementSummary).status" :can-retry="false" compact /><span v-else-if="(row as ProcurementSummary).status === 'REJECTED'">{{ (row as ProcurementSummary).reviewRemark || '未填写原因' }}</span><span v-else>—</span></template>
           <template #createdAt="{ row }">{{ dateTime((row as ProcurementSummary).createdAt) }}</template>
         </DataTable>
       </div>
     </template>
     <section v-else-if="mode === 'detail'" v-loading="loading" class="procurement-detail" aria-label="采购订单详情">
-      <header class="procurement-heading"><div><el-button link type="primary" @click="returnToList">← 返回列表</el-button><h2>{{ detail?.order.orderNo || '采购订单详情' }}</h2></div><div><el-tag v-if="detail" :type="statusTone(detail.order.status)">{{ statusLabel(detail.order.status) }}</el-tag><el-button :disabled="loading" @click="loadDetail">刷新</el-button></div></header>
+      <header class="procurement-heading"><div><el-button link type="primary" @click="returnToList">← 返回列表</el-button><h2>{{ detail?.order.orderNo || '采购订单详情' }}</h2></div><div><el-tag v-if="detail" :type="statusTone(workflow?.status || detail.order.status)">{{ statusLabel(workflow?.status || detail.order.status, detail.order.procurementDirection) }}</el-tag><el-button :disabled="loading" @click="loadDetail">刷新</el-button></div></header>
+      <OrderFundingStatus v-if="detail" kind="procurement" :order-no="detail.order.orderNo" :status="detail.order.status" :can-retry="canCreate" @changed="loadDetail" />
       <div v-if="error" class="procurement-error" role="alert"><span>{{ error }}</span><el-button :disabled="loading" @click="loadDetail">重新加载</el-button></div>
-      <ProcurementDetailPanel v-else-if="detail" :detail="detail" /><el-skeleton v-else :rows="8" animated />
+      <template v-else-if="detail && workflow"><el-alert v-if="workflow.status === 'RECEIVING' && workflow.rejectionReason" title="采购结果驳回原因" :description="workflow.rejectionReason" type="warning" :closable="false" /><ProcurementDetailPanel :detail="detail" :workflow="workflow" /></template><el-skeleton v-else :rows="8" animated />
     </section>
     <section v-else class="procurement-create" aria-label="采购下单">
-      <header class="procurement-heading"><div><h2>海外采购下单</h2><p>一单一个商品及规格；预算仅授权样品货款，运费及关税另行核定。</p></div><el-button v-if="canList" @click="returnToList">返回列表</el-button></header>
+      <header class="procurement-create-heading">
+        <div><h1>海外采购下单</h1></div>
+        <el-button v-if="canList" :disabled="submitting" @click="returnToList">返回列表</el-button>
+      </header>
       <el-result v-if="!canCreate" icon="warning" title="没有采购下单权限" sub-title="请联系企业管理员配置权限" />
       <el-result v-else-if="submittedOrder" icon="success" title="采购订单已提交" :sub-title="submittedOrder"><template #extra><el-button @click="resetForm">新建另一单</el-button></template></el-result>
       <template v-else>
         <el-alert v-if="submitError" class="submit-error" :title="submitError" type="error" :closable="false" />
-        <el-form :model="form" label-position="top" :disabled="submitting" @submit.prevent="submit">
-          <h3>商品与预算</h3><div class="procurement-form-grid">
-            <el-form-item label="采购品类"><el-input v-model.trim="form.purchaseCategory" maxlength="128" placeholder="" /></el-form-item>
-            <el-form-item label="商品名称" required><el-input v-model.trim="form.productName" maxlength="255" placeholder="" /></el-form-item>
-            <el-form-item label="商品规格"><el-input v-model.trim="form.productSpecification" maxlength="500" placeholder="规格、型号" /></el-form-item>
-            <el-form-item label="采购数量（件）" required><el-input v-model.trim="form.purchaseQuantity" inputmode="numeric" maxlength="18" placeholder="正整数" /></el-form-item>
-            <el-form-item label="预算单价" required><el-input v-model.trim="form.budgetUnitPrice" inputmode="decimal" maxlength="20" placeholder="请明确填写；免费样品填 0" /></el-form-item>
-            <el-form-item label="预算币种" required><el-select v-model="form.currency"><el-option label="美元 USD" value="USD" /><el-option label="人民币 CNY" value="CNY" /></el-select></el-form-item>
-            <el-form-item class="full" label="商品链接"><el-input v-model.trim="form.productUrl" maxlength="2000" placeholder="https://…" /></el-form-item>
-          </div><p class="procurement-hint">货款预算总上限：<strong>{{ money(draftBudgetTotal(form), form.currency) }}</strong>。零预算仅授权免费样品；实际货款按供应商实付核定。</p>
-          <h3>最终国内收件资料</h3><div class="procurement-form-grid">
-            <el-form-item label="收件人" required><el-input v-model.trim="form.contactName" maxlength="128" placeholder="实际收件人姓名" /></el-form-item>
-            <el-form-item label="联系电话" required><el-input v-model.trim="form.contactPhone" maxlength="64" type="tel" placeholder="快递可联系的电话" /></el-form-item>
-            <el-form-item class="full" label="完整国内地址" required><el-input v-model.trim="form.receivingAddress" maxlength="1000" placeholder="省、市、区县、街道及详细门牌" /></el-form-item>
-            <el-form-item class="full" label="采购要求"><el-input v-model="form.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="" /></el-form-item>
+        <section class="procurement-summary" aria-label="采购预算概览">
+          <article class="procurement-summary-card">
+            <div class="procurement-summary-title">
+              <span class="procurement-summary-icon procurement-summary-icon--quantity" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z" /><path d="M4 7.5l8 4.5 8-4.5M12 12v9" /></svg></span>
+              <h2>采购数量</h2>
             </div>
+            <div class="procurement-summary-value">{{ summaryQuantity }}<small>件</small></div>
+          </article>
+          <article class="procurement-summary-card">
+            <div class="procurement-summary-title">
+              <span class="procurement-summary-icon procurement-summary-icon--price" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M3 12h4l3-8 4 16 3-8h4" /></svg></span>
+              <h2>预算单价</h2>
+            </div>
+            <div class="procurement-summary-value">{{ summaryUnitPrice }}</div>
+          </article>
+          <article class="procurement-summary-card">
+            <div class="procurement-summary-title">
+              <span class="procurement-summary-icon procurement-summary-icon--currency" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M12 7v10M9 9.5c0-1 1.3-1.7 3-1.7s3 .7 3 1.7-1.3 1.5-3 2-3 1-3 2.2 1.3 1.8 3 1.8 3-.8 3-1.8" /></svg></span>
+              <h2>预算币种</h2>
+            </div>
+            <div class="procurement-summary-value">{{ form.currency }}<small>{{ summaryCurrencyName }}</small></div>
+          </article>
+        </section>
+        <el-form ref="formRef" :model="form" :rules="formRules" label-position="top" :disabled="submitting" scroll-to-error @submit.prevent="submit">
+          <section class="procurement-form-section" aria-labelledby="procurement-product-heading">
+            <h3 id="procurement-product-heading"><span class="procurement-section-dot" aria-hidden="true" />商品与预算</h3>
+            <div class="procurement-form-card">
+              <el-form-item class="procurement-direction" label="采购方向" for="procurement-direction" prop="procurementDirection" required><el-select id="procurement-direction" v-model="form.procurementDirection" popper-class="procurement-create-select"><el-option v-for="(label, value) in procurementDirections" :key="value" :label="label" :value="value" /></el-select></el-form-item>
+              <div class="procurement-form-grid">
+                <el-form-item label="采购品类" for="procurement-category"><el-input id="procurement-category" v-model.trim="form.purchaseCategory" maxlength="128" placeholder="请输入品类" /></el-form-item>
+                <el-form-item label="商品名称" for="procurement-product" prop="productName" required><el-input id="procurement-product" v-model.trim="form.productName" maxlength="255" placeholder="请输入商品名称" /></el-form-item>
+                <el-form-item label="商品规格" for="procurement-specification"><el-input id="procurement-specification" v-model.trim="form.productSpecification" maxlength="500" placeholder="规格、型号" /></el-form-item>
+                <el-form-item label="采购数量（件）" for="procurement-quantity" prop="purchaseQuantity" required><el-input id="procurement-quantity" v-model.trim="form.purchaseQuantity" inputmode="numeric" maxlength="18" placeholder="正整数" /></el-form-item>
+                <el-form-item label="预算单价" for="procurement-price" prop="budgetUnitPrice" required><el-input id="procurement-price" v-model.trim="form.budgetUnitPrice" inputmode="decimal" maxlength="20" placeholder="请明确填写；免费样品填 0" /></el-form-item>
+                <el-form-item label="预算币种" for="procurement-currency" prop="currency" required><el-select id="procurement-currency" v-model="form.currency" popper-class="procurement-create-select"><el-option label="美元 USD" value="USD" /><el-option label="人民币 CNY" value="CNY" /></el-select></el-form-item>
+                <el-form-item class="full" label="商品链接" for="procurement-url" prop="productUrl" required><el-input id="procurement-url" v-model.trim="form.productUrl" maxlength="2000" placeholder="https://..." /></el-form-item>
+              </div>
+              <div class="procurement-budget-total">货款预算总上限：{{ money(budgetTotal, form.currency) }}</div>
+            </div>
+          </section>
+          <section class="procurement-form-section" aria-labelledby="procurement-recipient-heading">
+            <h3 id="procurement-recipient-heading"><span class="procurement-section-dot procurement-section-dot--recipient" aria-hidden="true" />{{ regionText('最终国内收件资料', form.procurementDirection) }}</h3>
+            <div class="procurement-form-card procurement-form-grid">
+              <el-form-item label="收件人" for="procurement-contact" prop="contactName" required><el-input id="procurement-contact" v-model.trim="form.contactName" maxlength="128" placeholder="实际收件人姓名" /></el-form-item>
+              <el-form-item label="联系电话" for="procurement-phone" prop="contactPhone" required><el-input id="procurement-phone" v-model.trim="form.contactPhone" maxlength="64" type="tel" placeholder="快递可联系的电话" /></el-form-item>
+              <el-form-item class="full" :label="regionText('完整国内地址', form.procurementDirection)" for="procurement-address" prop="receivingAddress" required><el-input id="procurement-address" v-model.trim="form.receivingAddress" maxlength="1000" :placeholder="form.procurementDirection === 'DOMESTIC_TO_OVERSEAS' ? '国家、州/省、市、邮编及详细地址' : '省、市、区县、街道及详细门牌'" /></el-form-item>
+              <el-form-item class="full" label="采购要求" for="procurement-requirements">
+                <el-input id="procurement-requirements" v-model="form.remark" type="textarea" :rows="4" maxlength="1000" resize="vertical" placeholder="填写采购要求（选填）" aria-describedby="procurement-requirements-count" />
+                <div id="procurement-requirements-count" class="procurement-character-count">{{ form.remark.length }} / 1000</div>
+              </el-form-item>
+            </div>
+          </section>
         </el-form>
         <footer class="procurement-form-actions"><el-button type="primary" :loading="submitting" :disabled="!companyName || !identity" @click="submit">提交采购订单</el-button></footer>
       </template>
     </section>
+    <ProcurementDecisionDialog v-if="decisionTarget" :key="`${identity}:${decisionTarget.orderNo}:${decision}`" :order="decisionTarget" :decision="decision" @close="decisionTarget = null" @changed="decisionChanged" />
   </section>
 </template>
 
 <style scoped>
 .procurement-page { display: grid; gap: var(--client-section-gap); min-width: 0; }
-.procurement-table-card, .procurement-detail, .procurement-create { min-width: 0; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: #fff; }
-.procurement-table-card { overflow: hidden; }.procurement-detail, .procurement-create { padding: 16px 20px 24px; }
+.procurement-table-card, .procurement-detail { min-width: 0; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: #fff; }
+.procurement-table-card { overflow: hidden; }.procurement-detail { padding: 16px 20px 24px; }
 .procurement-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 54px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
 .procurement-heading > div { display: flex; align-items: center; gap: 14px; min-width: 0; }.procurement-heading h2 { margin: 0; color: var(--navy); font-size: 18px; overflow-wrap: anywhere; }
-.procurement-create .procurement-heading > div { display: block; }.procurement-heading p { margin: 7px 0 0; font-size: 13px; color: var(--muted); }
+.procurement-heading p { margin: 7px 0 0; font-size: 13px; color: var(--muted); }
 .procurement-link { padding: 0; border: 0; background: transparent; color: var(--client-action); font: inherit; cursor: pointer; text-align: left; }.procurement-link:hover { text-decoration: underline; }
 .procurement-error { min-height: 160px; display: flex; justify-content: center; align-items: center; gap: 16px; color: #b42318; }.procurement-error span { max-width: 900px; overflow-wrap: anywhere; }
-.procurement-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }.procurement-form-grid .full { grid-column: 1 / -1; }.procurement-form-grid :deep(.el-select) { width: 100%; }
-.procurement-create h3 { margin: 22px 0 16px; color: var(--navy); font-size: 14px; }.procurement-hint { margin: 0 0 20px; line-height: 1.8; font-size: 13px; color: var(--muted); }.procurement-hint strong { color: var(--navy); }
-.procurement-form-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }.submit-error { margin: 12px 0; }
+.procurement-page--create { width: 100%; background: #f4f7fc; }
+.procurement-create {
+  --client-action: #2f7bff;
+  --client-action-hover: #1d5fe0;
+  --client-border: #d5dce8;
+  --client-control-height: 44px;
+  --client-font-size: 14px;
+  --el-color-primary: #2f7bff;
+  --el-text-color-regular: #1f2937;
+  --el-text-color-placeholder: #b0b7c3;
+  min-width: 0;
+  color: #1f2937;
+  font: 14px/1.5 "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+}
+.procurement-create-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
+.procurement-create-heading h1 { margin: 0; font-size: 26px; line-height: 1.4; font-weight: 700; }
+.procurement-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 12px; }
+.procurement-summary-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px 16px; border: 1px solid #e3e8f0; border-radius: 10px; background: #fff; }
+.procurement-summary-title { display: flex; align-items: center; gap: 12px; }
+.procurement-summary-title h2 { margin: 0; font-size: 15px; font-weight: 600; }
+.procurement-summary-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 8px; }
+.procurement-summary-icon--quantity { color: #2f7bff; background: #eaf2ff; }
+.procurement-summary-icon--price { color: #16a34a; background: #e8f8f0; }
+.procurement-summary-icon--currency { color: #d97706; background: #fff5e0; }
+.procurement-summary-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.procurement-summary-value { color: #1d5fe0; font-size: 30px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.procurement-summary-value small { margin-left: 4px; color: #6b7280; font-size: 14px; font-weight: 500; }
+.procurement-form-section { margin-bottom: 12px; }
+.procurement-form-section h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 18px; font-weight: 700; }
+.procurement-section-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #2f7bff; }
+.procurement-section-dot--recipient { background: #0ea5a4; }
+.procurement-form-card { padding: 16px; border: 1px solid #e3e8f0; border-radius: 10px; background: #fff; }
+.procurement-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
+.procurement-form-grid .full { grid-column: 1 / -1; }
+.procurement-create :deep(.el-form-item) { min-width: 0; margin: 0; }
+.procurement-create :deep(.el-form-item__label) { height: auto; margin-bottom: 6px; padding: 0; color: #374151; font-size: 14px; font-weight: 600; line-height: 20px; }
+.procurement-create :deep(.el-form-item.is-required .el-form-item__label::before) { color: #e5484d; }
+.procurement-create :deep(.el-form-item__content) { min-width: 0; line-height: 20px; }
+.procurement-create :deep(.el-form-item__error) { position: absolute; top: auto; bottom: calc(100% + 6px); right: 0; left: auto; width: auto; max-width: calc(100% - 120px); padding: 0; font-size: 12px; line-height: 20px; text-align: right; }
+.procurement-create :deep(.procurement-direction) { width: calc((100% - 40px) / 3); margin-bottom: 12px; }
+.procurement-create :deep(.el-select) { width: 100%; }
+.procurement-create :deep(.el-input__wrapper), .procurement-create :deep(.el-select__wrapper), .procurement-create :deep(.el-textarea__inner) { border: 1px solid #d5dce8; border-radius: 6px; background: #fff; box-shadow: none; font-family: inherit; font-size: 14px; }
+.procurement-create :deep(.el-input__wrapper), .procurement-create :deep(.el-select__wrapper) { min-height: 44px; padding: 10px 14px; }
+.procurement-create :deep(.el-input__inner) { height: 22px; color: #1f2937; line-height: 22px; }
+.procurement-create :deep(.el-textarea__inner) { min-height: 110px !important; padding: 11px 14px; color: #1f2937; line-height: 20px; }
+.procurement-create :deep(.el-input__inner::placeholder), .procurement-create :deep(.el-textarea__inner::placeholder) { color: var(--el-text-color-placeholder); opacity: 1; }
+.procurement-create :deep(.el-input__wrapper.is-focus), .procurement-create :deep(.el-select__wrapper.is-focused), .procurement-create :deep(.el-textarea__inner:focus) { outline: 2px solid #2f7bff; outline-offset: 0; }
+.procurement-create :deep(.el-form-item.is-error .el-input__wrapper), .procurement-create :deep(.el-form-item.is-error .el-select__wrapper), .procurement-create :deep(.el-form-item.is-error .el-textarea__inner) { border-color: #e5484d; box-shadow: none; }
+.procurement-create :deep(.el-input.is-disabled .el-input__wrapper), .procurement-create :deep(.el-select__wrapper.is-disabled), .procurement-create :deep(.el-textarea.is-disabled .el-textarea__inner) { background: #f6f9ff; }
+.procurement-character-count { width: 100%; margin-top: 4px; color: #6b7280; font-size: 13px; text-align: right; }
+.procurement-budget-total { margin-top: 10px; color: #6b7280; font-size: 13px; line-height: 20px; overflow-wrap: anywhere; }
+.procurement-form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
+.procurement-create :deep(.el-button) { margin-left: 0; padding: 10px 18px; border-radius: 6px; color: #1d5fe0; box-shadow: none; }
+.procurement-create :deep(.el-button--primary) { height: auto; min-height: 44px; padding: 12px 28px; color: #fff; }
+.procurement-create :deep(.el-button.is-disabled) { color: #98a2b3; }
+.submit-error { margin: 0 0 20px; }
+:global(.procurement-create-select.el-popper) { border: 1px solid #d5dce8; box-shadow: none; }
 @media (max-width: 767px) {
-  .procurement-form-grid { grid-template-columns: 1fr; }.procurement-heading, .procurement-heading > div { flex-wrap: wrap; }
+  .procurement-form-grid, .procurement-summary { grid-template-columns: 1fr; }.procurement-heading, .procurement-heading > div { flex-wrap: wrap; }
+  .procurement-create :deep(.procurement-direction) { width: 100%; }
 }
 </style>

src/modules/finance/views/FinanceBillsView.test.mjs

@@ -55,12 +55,18 @@ test('adapts the Finance Java DTO contract and filters nested receipt allocation
   assert.doesNotMatch(adapterSource, /bill_no|customer_name|bill_date|total_amount|outstanding_amount|receipt_no|bill_id|applied_amount/)
   assert.doesNotMatch(adapterSource, /receipt\.billId|receipt\.appliedAmount/)
   assert.doesNotMatch(adapterSource, /voucherNo|voucher_no/)
-  assert.match(viewSource, /name: 'finance-bill-detail', params: \{ billNo: row\.billNo \}/)
+  assert.doesNotMatch(viewSource, /key: 'detail'|label: '查看'/)
   assert.match(detailViewSource, /getMerchantFinanceBill\(summary\.id\)/)
   assert.match(detailViewSource, /getMerchantFinanceReceipts\(summary\.id\)/)
   assert.doesNotMatch(detailViewSource, /getMerchantFinanceBill\(billNo\.value\)/)
 })
 
+test('keeps bill numbers linked to business-number details independently of confirmation actions', () => {
+  assert.match(viewSource, /label: '账单编号',\s*prop: 'billNo',\s*slotName: 'billNo'/)
+  assert.match(viewSource, /<template #billNo="\{ row \}">\s*<RouterLink[^>]*:to="\{ name: 'finance-bill-detail', params: \{ billNo: row\.billNo \} \}"[^>]*>\{\{ row\.billNo \}\}<\/RouterLink>\s*<\/template>/)
+  assert.doesNotMatch(viewSource.match(/<template #billNo[^]*?<\/template>/)?.[0] || '', /canConfirm|confirmationStatus|row\.id/)
+})
+
 test('does not expose draft or voided bills returned by the server', () => {
   const bill = (id, status) => ({
     id,

src/modules/finance/views/FinanceBillsView.vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { RefreshCcw } from '@lucide/vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { useRouter } from 'vue-router'
+import { RouterLink } from 'vue-router'
 import { ApiError } from '@/api/http'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
 import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
@@ -13,7 +13,6 @@ import type { FinanceBillQuery, FinanceBillStatus, FinanceBillSummary, FinanceCu
 
 const loading = ref(false)
 const auth = useAuthStore()
-const router = useRouter()
 const errorMessage = ref('')
 const bills = ref<FinanceBillSummary[]>([])
 const confirmingBillId = ref('')
@@ -38,7 +37,7 @@ const queryFields: QueryField[] = [
 ]
 const tableColumns: DataTableColumn[] = [
   { label: '操作', slotName: 'actions', width: 190, fixed: 'left' },
-  { label: '账单编号', prop: 'billNo', minWidth: 160 },
+  { label: '账单编号', prop: 'billNo', slotName: 'billNo', minWidth: 160 },
   { label: '出账日期', slotName: 'issueDate', width: 120 },
   { label: '到期日', slotName: 'dueDate', width: 120 },
   { label: '账单金额', slotName: 'totalAmount', width: 145, align: 'right' },
@@ -104,11 +103,9 @@ async function loadBills(nextPage = page.value) {
   }
 }
 
-function openDetail(row: FinanceBillSummary) { void router.push({ name: 'finance-bill-detail', params: { billNo: row.billNo } }) }
-
 function rowActions(row: object): TableAction[] {
   const statement = row as FinanceBillSummary
-  const actions: TableAction[] = [{ key: 'detail', label: '查看', run: () => openDetail(statement) }]
+  const actions: TableAction[] = []
   if (statement.customerConfirmationStatus === 'PENDING_CONFIRMATION' && canConfirm.value) {
     actions.push({
       key: 'confirm',
@@ -181,6 +178,7 @@ onMounted(() => { void loadBills(1) })
     <section class="content-card">
       <DataTable v-model:page="page" v-model:page-size="pageSize" :data="bills" :columns="tableColumns" :loading="loading" :total="total" :page-sizes="[20, 50, 100]" :row-actions="rowActions" row-key="billNo" empty-text="暂无账单">
         <template v-if="errorMessage" #error><div class="state-panel state-panel--error" role="alert"><p>{{ errorMessage }}</p><el-button @click="loadBills(1)"><RefreshCcw :size="15" />重试</el-button></div></template>
+        <template #billNo="{ row }"><RouterLink class="bill-number-link" :to="{ name: 'finance-bill-detail', params: { billNo: row.billNo } }">{{ row.billNo }}</RouterLink></template>
         <template #issueDate="{ row }">{{ formatDate(row.issueDate) }}</template>
         <template #dueDate="{ row }">{{ formatDate(row.dueDate) }}</template>
         <template #totalAmount="{ row }">¥ {{ formatAmount(row.totalAmount) }}</template>
@@ -196,6 +194,8 @@ onMounted(() => { void loadBills(1) })
 
 <style scoped>
 .finance-bills-page { display: flex; flex-direction: column; gap: 12px; }
+.bill-number-link { color: var(--primary); text-decoration: none; }
+.bill-number-link:hover { text-decoration: underline; }
 .finance-summary { display: flex; flex-wrap: wrap; gap: 8px 26px; color: var(--muted); font-size: 13px; }.finance-summary strong { margin-left: 6px; color: var(--navy); font-size: 18px; }.amount-warning, .amount-warning strong { color: #b45309; }
 .content-card { min-width: 0; overflow: hidden; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: var(--surface, #fff); }
 .state-panel { display: flex; min-height: 180px; align-items: center; justify-content: center; gap: 12px; flex-direction: column; color: var(--muted); text-align: center; }.state-panel p { margin: 0; }.state-panel--error { color: #b42318; background: #fff8f7; border: 1px solid #f5c2bd; border-radius: 6px; }

src/modules/first-leg/components/CustomsDocumentsDialog.vue

@@ -58,6 +58,7 @@ let detailRequest = 0
 onBeforeUnmount(() => { disposed = true; detailRequest += 1; resetClearanceResults() })
 
 const taxRefundInbounds = computed(() => detail.value?.inbounds.filter((item) => item.taxMode === 'TAX_REFUND') ?? [])
+const pendingReceipts = computed(() => detail.value?.documents.filter((item) => item.receipt && item.receiptStatus !== 'CONFIRMED') ?? [])
 const locked = computed(() => Boolean(detail.value?.startedAt) || detail.value?.status === 'DECLARING' || detail.value?.status === 'COMPLETED')
 const merchantStatusLabel = computed(() => detail.value?.merchantStatus
   ? MERCHANT_CUSTOMS_STATUS_LABELS[detail.value.merchantStatus]
@@ -273,29 +274,43 @@ async function downloadFile(document: MerchantCustomsDocument, kind: 'source' |
   }
 }
 
-async function confirmReceipt(document: MerchantCustomsDocument) {
+async function confirmReceipt() {
+  const documents = pendingReceipts.value
+  if (!documents.length) return
+  let confirmedCount = 0
   try {
-    await ElMessageBox.confirm('确认已核对整份报关行回执吗？确认后平台会把确认结果发送给报关行执行。', '确认报关行回执', { type: 'warning' })
+    await ElMessageBox.confirm(`确认已核对 ${documents.length} 份报关行回执吗？确认后平台会把确认结果发送给报关行执行。`, '确认报关行回执', { type: 'warning' })
     mutating.value = true
+    for (const document of documents) {
       await confirmMerchantCustomsReceipt(document)
-    ElMessage.success('回执确认成功')
+      confirmedCount += 1
+    }
+    ElMessage.success(`已确认 ${documents.length} 份回执`)
     await loadDetail()
   } catch (error) {
     if (error === 'cancel' || error === 'close') return
-    ElMessage.error(merchantCustomsErrorMessage(error, '回执确认失败'))
+    if (confirmedCount) await loadDetail()
+    ElMessage.error(`${confirmedCount ? `已确认 ${confirmedCount}/${documents.length} 份，` : ''}${merchantCustomsErrorMessage(error, '回执确认失败')}`)
   } finally { mutating.value = false }
 }
 
-async function rejectReceipt(document: MerchantCustomsDocument) {
+async function rejectReceipt() {
+  const documents = pendingReceipts.value
+  if (!documents.length) return
+  let rejectedCount = 0
   try {
     const reason = await ElMessageBox.prompt('请填写打回原因', '打回报关行回执', { inputValidator: (value) => value.trim() ? true : '请输入打回原因' })
     mutating.value = true
+    for (const document of documents) {
       await rejectMerchantCustomsReceipt(document, reason.value)
-    ElMessage.success('回执已打回')
+      rejectedCount += 1
+    }
+    ElMessage.success(`已打回 ${documents.length} 份回执`)
     await loadDetail()
   } catch (error) {
     if (error === 'cancel' || error === 'close') return
-    ElMessage.error(merchantCustomsErrorMessage(error, '回执打回失败'))
+    if (rejectedCount) await loadDetail()
+    ElMessage.error(`${rejectedCount ? `已打回 ${rejectedCount}/${documents.length} 份，` : ''}${merchantCustomsErrorMessage(error, '回执打回失败')}`)
   } finally { mutating.value = false }
 }
 
@@ -404,6 +419,10 @@ function clearanceResultStatusLabel(value: MerchantClearanceResult) {
       <section class="customs-section">
         <div class="customs-section-title">
           <h3>资料版本历史</h3>
+          <div v-if="pendingReceipts.length && detail.status === 'DECLARING'" class="customs-receipt-actions">
+            <el-button type="success" :disabled="mutating" @click="confirmReceipt">确认全部回执</el-button>
+            <el-button type="danger" plain :disabled="mutating" @click="rejectReceipt">打回全部回执</el-button>
+          </div>
         </div>
         <el-empty v-if="!detail.documents.length" description="尚未上传退税报关资料" :image-size="54" />
         <div v-else class="customs-document-list">
@@ -422,10 +441,6 @@ function clearanceResultStatusLabel(value: MerchantClearanceResult) {
               <el-button link type="primary" :loading="downloadingKey === `${item.documentId}:source`" @click="downloadFile(item, 'source')"><Download :size="15" />源文件</el-button>
               <el-button v-if="item.receipt" link type="success" :loading="downloadingKey === `${item.documentId}:receipt`" @click="downloadFile(item, 'receipt')"><Download :size="15" />报关行回执</el-button>
               <el-button v-if="item.finalDocument" link type="success" :loading="downloadingKey === `${item.documentId}:final`" @click="downloadFile(item, 'final')"><Download :size="15" />报关完税文件</el-button>
-              <template v-if="item.receipt && item.receiptStatus !== 'CONFIRMED' && detail.status === 'DECLARING'">
-                <el-button link type="success" :disabled="mutating" @click="confirmReceipt(item)">确认整份回执</el-button>
-                <el-button link type="danger" :disabled="mutating" @click="rejectReceipt(item)">打回回执</el-button>
-              </template>
               <el-tag v-if="item.receipt" size="small" :type="item.receiptStatus === 'CONFIRMED' ? 'success' : item.receiptStatus === 'REJECTED' ? 'danger' : 'warning'">{{ item.receiptStatus === 'CONFIRMED' ? '已确认' : item.receiptStatus === 'REJECTED' ? `已打回：${item.receiptRejectReason || '待补充'}` : '待确认' }}</el-tag>
               <template v-if="canEdit && !locked && !item.frozen">
                 <el-button link type="primary" :disabled="mutating" @click="beginEditInbounds(item)"><Pencil :size="15" />改关联</el-button>
@@ -443,18 +458,16 @@ function clearanceResultStatusLabel(value: MerchantClearanceResult) {
         </div>
       </section>
     </template>
-    <template #footer><el-button @click="close">关闭</el-button></template>
   </el-dialog>
 </template>
 
 <style scoped>
 :global(.customs-documents-dialog.el-dialog) { display: flex; max-height: 70vh; flex-direction: column; overflow: hidden; padding: 0; border: 1px solid var(--client-border); border-radius: var(--client-radius); }
-:global(.customs-documents-dialog .el-dialog__header), :global(.customs-documents-dialog .el-dialog__footer) { flex: 0 0 auto; }
+:global(.customs-documents-dialog .el-dialog__header) { flex: 0 0 auto; }
 :global(.customs-documents-dialog .el-dialog__header) { margin: 0; padding: 18px 48px 18px 20px; border-bottom: 1px solid var(--client-border); }
 :global(.customs-documents-dialog .el-dialog__title) { color: var(--client-text); font-size: 16px; font-weight: 600; line-height: 24px; }
 :global(.customs-documents-dialog .el-dialog__headerbtn) { top: 8px; right: 8px; }
 :global(.customs-documents-dialog .el-dialog__body) { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 20px; color: var(--client-text); line-height: 1.6; overscroll-behavior: contain; }
-:global(.customs-documents-dialog .el-dialog__footer) { padding: 14px 20px; border-top: 1px solid var(--client-border); background: var(--client-header-bg); }
 .customs-error { display: grid; gap: 10px; justify-items: start; padding: 22px; border: 1px solid #f1b8b8; background: #fff7f7; color: #9f2d2d; }
 .customs-error span { overflow-wrap: anywhere; font-size: 12px; }
 .customs-summary { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) auto; align-items: center; gap: 18px; padding: 16px; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: var(--client-header-bg); }
@@ -474,6 +487,7 @@ function clearanceResultStatusLabel(value: MerchantClearanceResult) {
 .clearance-result-row p { grid-column:1 / -1; margin:0; color:var(--navy); font-size:12px; }
 .customs-section-title { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
 .customs-section-title h3 { margin: 0; color: var(--navy); font-size: 14px; }
+.customs-receipt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
 .customs-help-heading { display: flex; align-items: center; gap: 4px; }
 .customs-inbound-options { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 12px 14px; border: 1px solid var(--client-border); border-radius: var(--client-radius); background: var(--client-header-bg); }
 .customs-inbound-options :deep(.el-checkbox) { margin-right: 0; }

src/modules/first-leg/components/InboundBillingPanel.test.mjs

@@ -1,8 +1,39 @@
 import assert from 'node:assert/strict'
 import { readFileSync } from 'node:fs'
 import test from 'node:test'
+import { compile, computed, createSSRApp, h, inject, provide } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import ts from 'typescript'
 
 const source = readFileSync(new URL('./InboundBillingPanel.vue', import.meta.url), 'utf8')
+const confirmationBody = source.slice(source.indexOf('<dl class="fee-dialog-summary"'), source.indexOf('<div class="fee-confirm-notice"'))
+const formatterSource = readFileSync(new URL('../utils/inboundBilling.ts', import.meta.url), 'utf8')
+const formatters = await import(`data:text/javascript;base64,${Buffer.from(ts.transpileModule(formatterSource, {
+  compilerOptions: { module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2022 },
+}).outputText).toString('base64')}`)
+
+async function renderConfirmation(data) {
+  const app = createSSRApp({
+    render: compile(`<div>${confirmationBody}</div>`),
+    setup: () => ({ props: { data }, ...formatters }),
+  })
+  app.component('ElTable', {
+    props: ['data'],
+    setup(tableProps, { slots }) {
+      provide('billingRows', computed(() => tableProps.data))
+      return () => h('table', slots.default?.())
+    },
+  })
+  app.component('ElTableColumn', {
+    props: ['label', 'prop'],
+    setup(columnProps, { slots }) {
+      const rows = inject('billingRows')
+      return () => h('tr', [h('th', columnProps.label), ...rows.value.map(row =>
+        h('td', slots.default?.({ row }) ?? row[columnProps.prop] ?? ''))])
+    },
+  })
+  return renderToString(app)
+}
 
 test('renders loading, pending, isolated error, and published states', () => {
   assert.match(source, /v-if="props\.loading"/)
@@ -25,7 +56,7 @@ test('supports a standalone dialog and keeps the unpushed billing-weight state v
 })
 
 test('shows the published merchant inbound, measurement details and customer confirmation entry', () => {
-  for (const label of ['入仓码', '平台收货仓', '实际毛重', '实测体积', '托盘与库位', '换算与精度', '最终计费量', '单价', '基础费用', '附加费用', '费用合计', '平台备注']) {
+  for (const label of ['入仓码', '平台收货仓', '实际毛重', '实测体积', '换算与精度', '最终计费量', '单价', '基础费用', '附加费用', '费用合计', '平台备注']) {
     assert.ok(source.includes(label), `missing label: ${label}`)
   }
   assert.match(source, /formatInboundMoney\(props\.data\.latestFee\.totalAmount/)
@@ -36,26 +67,63 @@ test('shows the published merchant inbound, measurement details and customer con
   assert.match(source, /confirmMerchantInboundFee/)
   assert.match(source, /measurementItems/)
   assert.doesNotMatch(source, /调整费用|发送费用|下载照片/)
-  assert.doesNotMatch(source, /internalNotes|statusHistory|files/)
-  assert.match(source, /latestFee\.ruleCode/)
-  assert.match(source, /latestFee\.rateCode/)
-  assert.match(source, /latestFee\.chargeRuleVersion/)
-  assert.match(source, /latestFee\.carrierRateVersion/)
+  assert.doesNotMatch(source, /internalNotes|statusHistory|files|palletLocations|托盘与库位/)
+  assert.doesNotMatch(source, /latestFee\.(feeVersion|ruleCode|rateCode|chargeRuleVersion|carrierRateVersion|sentAt)/)
   assert.match(source, /箱规规则/)
   assert.match(source, /getCalculationRuleLabel\(row\.calculationRuleVersion\)/)
 })
 
-test('matches the confirmed billing prototype summary, table, notice and footer', () => {
+test('keeps the billing summary, confirmation table, notice and footer', () => {
   assert.match(source, /width="min\(1180px, calc\(100vw - 40px\)\)"/)
   assert.match(source, /class="fee-dialog-summary" aria-label="计费汇总"/)
-  for (const label of ['计算重', '单价', '总金额', '箱规长(cm)', '箱规宽(cm)', '箱规高(cm)', '每箱体积', '总体积', '总材积重']) assert.ok(source.includes(label), `missing prototype label: ${label}`)
+  for (const label of ['计算重', '单价', '总金额', '计费毛重', '计费体积', '计费方式', '最终计费量']) assert.ok(confirmationBody.includes(label), `missing billing label: ${label}`)
   assert.match(source, /class="fee-confirm-notice"/)
-  assert.match(source, /请核对计算重、单价和总金额。确认后当前费用版本将锁定。/)
+  assert.match(source, /请核对计费毛重、计费体积、计费量、单价和总金额。确认后当前费用版本将锁定。/)
   assert.match(source, /确认计费量和费用/)
   assert.match(source, /\.fee-dialog-summary \{ display:grid; grid-template-columns:repeat\(3,minmax\(0,1fr\)\)/)
   assert.match(source, /\.fee-dialog-table :deep\(\.el-table__body td\.el-table__cell\)/)
 })
 
+test('confirms the selected billing weight and volume even when outer carton totals differ', async () => {
+  const html = await renderConfirmation({
+    latestFee: {
+      actualWeightKg: 393, actualVolumeCbm: 3.6894, convertedQuantity: 616.1298,
+      chargeableQuantity: 616.1298, chargeMode: 'KG', chargeUnit: 'KG',
+      unitPrice: 13.6, totalAmount: 8379.37, currency: 'CNY',
+    },
+    billingBasis: { chargeableWeightKg: 650.298 },
+    measurementItems: [{ lengthCm: 63, widthCm: 53, heightCm: 53, packageCount: 22,
+      unitVolumeCbm: 0.177, totalVolumeCbm: 3.894, volumeWeightKg: 650.298 }],
+  })
+
+  assert.match(html, /393 kg/)
+  assert.match(html, /3\.6894 m³/)
+  assert.match(html, /616\.13 kg/)
+  assert.match(html, /8,379\.37/)
+  assert.match(html, /按体积重计费/)
+  assert.doesNotMatch(html, /按重量计费|按毛重计费/)
+  assert.doesNotMatch(html, /3\.894|650\.298|0\.177/)
+  assert.doesNotMatch(confirmationBody, /measurementItems|billingBasis|箱规长|每箱体积/)
+})
+
+test('uses the published volume charge quantity and retains six decimal places', async () => {
+  const html = await renderConfirmation({
+    latestFee: {
+      actualWeightKg: 600, actualVolumeCbm: 1.234567, convertedQuantity: 1.652893,
+      chargeableQuantity: 1.652893, chargeMode: 'CBM', chargeUnit: 'CBM',
+      unitPrice: 100, totalAmount: 165.29, currency: 'CNY',
+    },
+    billingBasis: { chargeableWeightKg: 600 }, measurementItems: [],
+  })
+
+  assert.match(html, /计费量/)
+  assert.match(html, /按重量折算体积计费/)
+  assert.match(html, /600 kg/)
+  assert.match(html, /1\.234567 m³/)
+  assert.match(html, /1\.652893 m³/)
+  assert.doesNotMatch(html, /1\.652893 kg/)
+})
+
 test('stacks core information for 720 and 360 pixel layouts', () => {
   assert.match(source, /@media \(max-width: 720px\)/)
   assert.match(source, /\.inbound-overview, \.inbound-measurements, \.fee-calculation-grid \{ grid-template-columns: 1fr;/)

src/modules/first-leg/components/InboundBillingPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { ElMessage } from 'element-plus'
-import { CircleAlert, Clock3, PackageCheck, RefreshCw, TriangleAlert } from '@lucide/vue'
+import { CircleAlert, Clock3, RefreshCw, TriangleAlert } from '@lucide/vue'
 import { confirmMerchantInboundFee } from '@/modules/first-leg/api/inboundBilling'
 import type { MerchantInboundBilling } from '@/modules/first-leg/types/inboundBilling'
 import {
@@ -136,34 +136,13 @@ async function confirmFee() {
         </el-table>
       </div>
 
-      <div class="inbound-result-section">
-        <div class="inbound-section-title">
-          <h4>托盘与库位</h4>
-          <span>{{ props.data.inbound.palletLocations.length }} 个托盘</span>
-        </div>
-        <div v-if="props.data.inbound.palletLocations.length" class="pallet-location-list">
-          <article v-for="item in props.data.inbound.palletLocations" :key="`${item.palletId}-${item.locationId}`">
-            <PackageCheck :size="18" />
-            <div class="pallet-location-main">
-              <strong>{{ item.palletCode }}</strong>
-              <span>库位 {{ item.locationCode }}</span>
-            </div>
-            <div class="pallet-location-quantity">
-              <span>{{ formatInboundMeasure(item.allocatedVolumeCbm, 'm³') }}</span>
-              <span>{{ formatInboundNumber(item.allocatedPackageCount, 0) }} 箱</span>
-            </div>
-          </article>
-        </div>
-        <p v-else class="inbound-inline-empty">暂无托盘和库位明细</p>
-      </div>
-
       <div class="inbound-result-section fee-result">
         <div class="inbound-section-title">
           <h4>费用结果</h4>
-          <span>{{ props.data.latestFee.feeNo }} · 第 {{ props.data.latestFee.feeVersion }} 版</span>
+          <span>{{ props.data.latestFee.feeNo }}</span>
         </div>
         <dl class="fee-calculation-grid">
-          <div><dt>计费方式</dt><dd>{{ getChargeModeLabel(props.data.latestFee.chargeMode) }} · {{ getTaxModeLabel(props.data.latestFee.taxMode) }}</dd></div>
+          <div><dt>计费方式</dt><dd>{{ getChargeModeLabel(props.data.latestFee.chargeMode, props.data.latestFee.actualWeightKg, props.data.latestFee.actualVolumeCbm, props.data.latestFee.convertedQuantity) }} · {{ getTaxModeLabel(props.data.latestFee.taxMode) }}</dd></div>
           <div>
             <dt>换算与精度</dt>
             <dd>{{ formatConversionPrecision(
@@ -172,8 +151,8 @@ async function confirmFee() {
               props.data.latestFee.roundingMode,
             ) }}</dd>
           </div>
-          <div><dt>实际重量</dt><dd>{{ formatInboundMeasure(props.data.latestFee.actualWeightKg, 'kg') }}</dd></div>
-          <div><dt>实际体积</dt><dd>{{ formatInboundMeasure(props.data.latestFee.actualVolumeCbm, 'm³') }}</dd></div>
+          <div><dt>计费毛重</dt><dd>{{ formatInboundMeasure(props.data.latestFee.actualWeightKg, 'kg') }}</dd></div>
+          <div><dt>计费体积</dt><dd>{{ formatInboundMeasure(props.data.latestFee.actualVolumeCbm, 'm³', 6) }}</dd></div>
           <div><dt>体积重量</dt><dd>{{ formatInboundMeasure(props.data.latestFee.convertedQuantity, props.data.latestFee.chargeUnit) }}</dd></div>
           <div><dt>最终计费量</dt><dd>{{ formatInboundMeasure(props.data.latestFee.chargeableQuantity, props.data.latestFee.chargeUnit) }}</dd></div>
           <div><dt>单价</dt><dd>{{ formatInboundMoney(props.data.latestFee.unitPrice, props.data.latestFee.currency) }} / {{ props.data.latestFee.chargeUnit }}</dd></div>
@@ -183,11 +162,9 @@ async function confirmFee() {
         <div class="fee-total">
           <div>
             <span>费用合计</span>
-            <small>{{ props.data.latestFee.ruleCode }} v{{ props.data.latestFee.chargeRuleVersion }} · {{ props.data.latestFee.rateCode }} v{{ props.data.latestFee.carrierRateVersion }}</small>
           </div>
           <strong>{{ formatInboundMoney(props.data.latestFee.totalAmount, props.data.latestFee.currency) }}</strong>
         </div>
-        <p class="fee-sent-time">发布于 {{ formatInboundDateTime(props.data.latestFee.sentAt) }}</p>
       </div>
 
       <div v-if="props.data.inbound.publicRemark" class="inbound-public-remark">
@@ -214,26 +191,20 @@ async function confirmFee() {
       </div>
       <template v-else>
       <dl class="fee-dialog-summary" aria-label="计费汇总">
-        <div><dt>计算重</dt><dd>{{ formatInboundMeasure(props.data.billingBasis.chargeableWeightKg, 'kg') }}</dd></div>
+        <div><dt>{{ props.data.latestFee.chargeUnit === 'KG' ? '计算重' : '计费量' }}</dt><dd>{{ formatInboundMeasure(props.data.latestFee.chargeableQuantity, props.data.latestFee.chargeUnit === 'KG' ? 'kg' : 'm³', props.data.latestFee.chargeUnit === 'KG' ? 3 : 6) }}</dd></div>
         <div><dt>单价</dt><dd>{{ formatInboundMoney(props.data.latestFee.unitPrice, props.data.latestFee.currency) }} / {{ props.data.latestFee.chargeUnit.toUpperCase() }}</dd></div>
         <div><dt>总金额</dt><dd>{{ formatInboundMoney(props.data.latestFee.totalAmount, props.data.latestFee.currency) }}</dd></div>
       </dl>
-      <el-table class="measurement-detail-table fee-dialog-table" :data="props.data.measurementItems" border empty-text="暂无箱规测量明细">
-        <el-table-column type="index" label="#" width="54" />
-        <el-table-column prop="lengthCm" label="箱规长(cm)" min-width="105" />
-        <el-table-column prop="widthCm" label="箱规宽(cm)" min-width="105" />
-        <el-table-column prop="heightCm" label="箱规高(cm)" min-width="105" />
-        <el-table-column prop="packageCount" label="箱数" min-width="76" />
-        <el-table-column label="每箱体积" min-width="105"><template #default="{ row }">{{ formatInboundMeasure(row.unitVolumeCbm, 'm³') }}</template></el-table-column>
-        <el-table-column label="总体积" min-width="105"><template #default="{ row }">{{ formatInboundMeasure(row.totalVolumeCbm, 'm³') }}</template></el-table-column>
-        <el-table-column label="总材积重" min-width="105"><template #default="{ row }">{{ formatInboundMeasure(row.volumeWeightKg, 'kg') }}</template></el-table-column>
-        <el-table-column label="箱规规则" min-width="170"><template #default="{ row }">{{ getCalculationRuleLabel(row.calculationRuleVersion) }}</template></el-table-column>
-        <el-table-column prop="boxSpecification" label="备注" min-width="130" />
+      <el-table class="measurement-detail-table fee-dialog-table" :data="[props.data.latestFee]" border>
+        <el-table-column label="计费毛重" min-width="180"><template #default="{ row }">{{ formatInboundMeasure(row.actualWeightKg, 'kg') }}</template></el-table-column>
+        <el-table-column label="计费体积" min-width="180"><template #default="{ row }">{{ formatInboundMeasure(row.actualVolumeCbm, 'm³', 6) }}</template></el-table-column>
+        <el-table-column label="计费方式" min-width="150"><template #default="{ row }">{{ getChargeModeLabel(row.chargeMode, row.actualWeightKg, row.actualVolumeCbm, row.convertedQuantity) }}</template></el-table-column>
+        <el-table-column label="最终计费量" min-width="180"><template #default="{ row }">{{ formatInboundMeasure(row.chargeableQuantity, row.chargeUnit === 'KG' ? 'kg' : 'm³', row.chargeUnit === 'KG' ? 3 : 6) }}</template></el-table-column>
       </el-table>
       <div class="fee-confirm-notice" :class="{ 'is-confirmed': props.data.latestFee.customerConfirmationStatus === 'CONFIRMED' }" role="status">
         <CircleAlert :size="21" aria-hidden="true" />
         <span v-if="props.data.latestFee.customerConfirmationStatus === 'CONFIRMED'">客户已于 {{ formatInboundDateTime(props.data.latestFee.customerConfirmedAt) }} 确认，费用已锁定，不允许修改。</span>
-        <span v-else>请核对计算重、单价和总金额。确认后当前费用版本将锁定。</span>
+        <span v-else>请核对计费毛重、计费体积、计费量、单价和总金额。确认后当前费用版本将锁定。</span>
       </div>
       </template>
       <template #footer>
@@ -283,20 +254,12 @@ async function confirmFee() {
 .fee-dialog-table { margin-top:16px; overflow:hidden; border-radius:10px; box-shadow:0 5px 18px rgba(51,65,85,.04); }
 .fee-dialog-table :deep(.el-table__header th.el-table__cell) { height:42px; padding:9px 0; background:linear-gradient(180deg,#f8f9fc,#f3f5f9); color:#697386; font-size:13px; font-weight:650; }
 .fee-dialog-table :deep(.el-table__body td.el-table__cell) { height:82px; padding:9px 0; color:#515a6c; font-size:14px; font-variant-numeric:tabular-nums; }
-.fee-dialog-table :deep(.el-table__body td:nth-child(7)), .fee-dialog-table :deep(.el-table__body td:nth-child(8)) { color:#34466b; font-weight:650; }
+.fee-dialog-table :deep(.el-table__body td:nth-child(2)), .fee-dialog-table :deep(.el-table__body td:nth-child(4)) { color:#34466b; font-weight:650; }
 .fee-dialog-table :deep(.cell) { line-height:1.6; }
 .fee-confirm-notice { display:flex; align-items:center; gap:10px; margin-top:14px; padding:10px 14px; border:1px solid #f5dfba; border-radius:9px; background:linear-gradient(90deg,#fff9ef,#fffaf2); color:#c6790c; font-size:14px; font-weight:500; }
 .fee-confirm-notice > svg { flex:0 0 auto; fill:#eda332; color:#fff; filter:drop-shadow(0 2px 3px rgba(233,154,37,.25)); }
 .fee-confirm-notice.is-confirmed { border-color:#b7dfc2; background:#f1faf3; color:#2d8a46; }
 .fee-confirm-notice.is-confirmed > svg { fill:#4eae67; }
-.pallet-location-list { margin-top: 9px; border-top: 1px solid var(--border); }
-.pallet-location-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--border); }
-.pallet-location-list article > svg { color: var(--primary); }
-.pallet-location-main, .pallet-location-quantity { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
-.pallet-location-main strong { overflow-wrap: anywhere; color: var(--navy); font-size: 12px; }
-.pallet-location-main span, .pallet-location-quantity span { color: var(--muted); font-size: 10px; }
-.pallet-location-quantity { align-items: flex-end; }
-.inbound-inline-empty { margin: 9px 0 0; padding: 14px; background: #f6f8f8; color: var(--muted); font-size: 11px; text-align: center; }
 .fee-result { padding-top: 18px; border-top: 1px solid var(--border); }
 .fee-calculation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 0 0; border: 1px solid var(--border); }
 .fee-calculation-grid > div { min-width: 0; padding: 11px 12px; border-bottom: 1px solid var(--border); }
@@ -305,9 +268,7 @@ async function confirmFee() {
 .fee-total { padding: 15px 0 0; }
 .fee-total > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
 .fee-total span { color: var(--navy); font-size: 12px; font-weight: 650; }
-.fee-total small, .fee-sent-time { color: var(--muted); font-size: 10px; }
 .fee-total strong { flex: 0 0 auto; color: var(--primary); font-size: 21px; }
-.fee-sent-time { margin: 5px 0 0; text-align: right; }
 .inbound-public-remark { margin-top: 16px; padding: 13px 14px; background: #f2f7f6; }
 .inbound-public-remark strong { color: var(--navy); font-size: 11px; }
 .inbound-public-remark p { margin: 5px 0 0; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
@@ -337,14 +298,11 @@ async function confirmFee() {
   .inbound-overview, .inbound-measurements, .fee-calculation-grid { grid-template-columns: 1fr; }
   .inbound-overview > div, .inbound-overview > div:nth-child(odd), .fee-calculation-grid > div, .fee-calculation-grid > div:not(:nth-child(3n)) { border-right: 0; border-bottom: 1px solid var(--border); }
   .inbound-overview > div:last-child, .fee-calculation-grid > div:last-child { border-bottom: 0; }
-  .pallet-location-list article { grid-template-columns: auto minmax(0, 1fr); }
-  .pallet-location-quantity { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 8px; }
 }
 
 @media (max-width: 360px) {
   .inbound-billing-heading { align-items: flex-start; flex-direction: column; }
   .fee-total { align-items: flex-start; flex-direction: column; }
   .fee-total strong { font-size: 19px; }
-  .fee-sent-time { text-align: left; }
 }
 </style>

src/modules/first-leg/utils/inboundBilling.test.mjs

@@ -1,8 +1,23 @@
 import assert from 'node:assert/strict'
 import { readFileSync } from 'node:fs'
 import test from 'node:test'
+import ts from 'typescript'
 
 const source = readFileSync(new URL('./inboundBilling.ts', import.meta.url), 'utf8')
+const { getChargeModeLabel } = await import(`data:text/javascript;base64,${Buffer.from(ts.transpileModule(source, {
+  compilerOptions: { module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2022 },
+}).outputText).toString('base64')}`)
+
+test('describes the quantity basis from the published fee instead of treating the charge unit as the basis', () => {
+  assert.equal(getChargeModeLabel('KG', 393, 3.6894, 616.1298), '按体积重计费')
+  assert.equal(getChargeModeLabel('KG', 700, 3.6894, 616.1298), '按毛重计费')
+  assert.equal(getChargeModeLabel('KG', 616.1298, 3.6894, 616.1298), '按毛重计费')
+  assert.equal(getChargeModeLabel('CBM', 600, 1.2, 1.6), '按重量折算体积计费')
+  assert.equal(getChargeModeLabel('CBM', 600, 2, 1.6), '按体积计费')
+  assert.equal(getChargeModeLabel('CBM', 600, 1.6, 1.6), '按体积计费')
+  assert.equal(getChargeModeLabel('KG', 393, 3.6894, Number.NaN), '-')
+  assert.equal(getChargeModeLabel('KG', Number.POSITIVE_INFINITY, 3.6894, 616.1298), '-')
+})
 
 test('formats zero values, currencies, measurements, and backend dates without hardcoded business factors', () => {
   assert.match(source, /value === null \|\| value === undefined/)

src/modules/first-leg/utils/inboundBilling.ts

@@ -36,8 +36,18 @@ export function formatInboundDateTime(value: string | null | undefined) {
   }).format(date)
 }
 
-export function getChargeModeLabel(value: 'KG' | 'CBM') {
-  return value === 'KG' ? '按重量计费' : '按体积计费'
+export function getChargeModeLabel(
+  chargeMode: 'KG' | 'CBM',
+  actualWeightKg: number,
+  actualVolumeCbm: number,
+  convertedQuantity: number,
+) {
+  const actualQuantity = chargeMode === 'KG' ? actualWeightKg : actualVolumeCbm
+  if (!Number.isFinite(actualQuantity) || !Number.isFinite(convertedQuantity)) return '-'
+  const usesConvertedQuantity = convertedQuantity > actualQuantity
+  return chargeMode === 'KG'
+    ? usesConvertedQuantity ? '按体积重计费' : '按毛重计费'
+    : usesConvertedQuantity ? '按重量折算体积计费' : '按体积计费'
 }
 
 export function getTaxModeLabel(value: string) {

src/modules/first-leg/utils/orderColumnPreferences.test.mjs

@@ -0,0 +1,134 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import test from 'node:test'
+import ts from 'typescript'
+import { computed, effectScope, ref, watch } from 'vue'
+import { readOrderColumnPreferences, saveOrderColumnPreferences } from './orderColumnPreferences.ts'
+
+const page = readFileSync(new URL('../views/FirstLegOrdersView.vue', import.meta.url), 'utf8')
+const columnSource = page.slice(page.indexOf('const fixedOrderColumns:'), page.indexOf('const tablePage ='))
+const columnScript = ts.transpileModule(columnSource, { compilerOptions: { target: ts.ScriptTarget.ES2022 } }).outputText
+const createColumns = new Function('auth', 'ref', 'computed', 'watch', 'readOrderColumnPreferences', 'saveOrderColumnPreferences', `${columnScript}
+  return { visibleColumnKeys, orderedColumnKeys, visibleOrderColumns, draggedColumnKey, moveOrderColumn, dropOrderColumn, resetOrderColumns }
+`)
+
+function mockStorage(t) {
+  const original = Object.getOwnPropertyDescriptor(globalThis, 'localStorage')
+  const entries = new Map()
+  const storage = {
+    getItem: key => entries.get(key) ?? null,
+    setItem: (key, value) => entries.set(key, value),
+  }
+  Object.defineProperty(globalThis, 'localStorage', { configurable: true, value: storage })
+  t.after(() => {
+    if (original) Object.defineProperty(globalThis, 'localStorage', original)
+    else delete globalThis.localStorage
+  })
+  return storage
+}
+
+function openColumns(t, ownerId = 'customer-one') {
+  const scope = effectScope()
+  const columns = scope.run(() => createColumns({ user: { id: ownerId } }, ref, computed, watch, readOrderColumnPreferences, saveOrderColumnPreferences))
+  t.after(() => scope.stop())
+  return { ...columns, close: () => scope.stop() }
+}
+
+test('restores checked fields and both arrow and drag ordering after a fresh page setup', t => {
+  mockStorage(t)
+  const columns = openColumns(t)
+  columns.visibleColumnKeys.value.push('destinationWarehouse', 'grossWeight', 'volume')
+  columns.visibleColumnKeys.value.splice(columns.visibleColumnKeys.value.indexOf('createdAt'), 1)
+  columns.moveOrderColumn('destinationWarehouse', -1)
+  columns.draggedColumnKey.value = 'grossWeight'
+  columns.dropOrderColumn('status')
+  const visibleKeys = [...columns.visibleColumnKeys.value]
+  const orderedKeys = [...columns.orderedColumnKeys.value]
+  const renderedKeys = columns.visibleOrderColumns.value.map(column => column.key)
+  columns.close()
+
+  const refreshed = openColumns(t)
+  assert.deepEqual(refreshed.visibleColumnKeys.value, visibleKeys)
+  assert.deepEqual(refreshed.orderedColumnKeys.value, orderedKeys)
+  assert.deepEqual(refreshed.visibleOrderColumns.value.map(column => column.key), renderedKeys)
+  assert.deepEqual(renderedKeys.slice(0, 3), ['selection', 'actions', 'inboundCode'])
+  assert.equal(renderedKeys[3], 'grossWeight')
+})
+
+test('persists restore-default and intentionally hiding every selectable field', t => {
+  mockStorage(t)
+  const columns = openColumns(t)
+  const defaults = [...columns.visibleColumnKeys.value]
+  const defaultOrder = [...columns.orderedColumnKeys.value]
+  columns.visibleColumnKeys.value = []
+  columns.close()
+  const refreshed = openColumns(t)
+  assert.deepEqual(refreshed.visibleColumnKeys.value, [])
+  assert.deepEqual(refreshed.visibleOrderColumns.value.map(column => column.key), ['selection', 'actions', 'inboundCode'])
+
+  refreshed.moveOrderColumn('grossWeight', -1)
+  refreshed.resetOrderColumns()
+  refreshed.close()
+  const reset = openColumns(t)
+  assert.deepEqual(reset.visibleColumnKeys.value, defaults)
+  assert.deepEqual(reset.orderedColumnKeys.value, defaultOrder)
+})
+
+test('keeps the field selection separate for each signed-in account', t => {
+  mockStorage(t)
+  const first = openColumns(t)
+  first.visibleColumnKeys.value = ['volume']
+  first.close()
+  const second = openColumns(t, 'customer-two')
+  assert.notDeepEqual(second.visibleColumnKeys.value, ['volume'])
+  second.visibleColumnKeys.value = ['grossWeight']
+  second.close()
+  assert.deepEqual(openColumns(t).visibleColumnKeys.value, ['volume'])
+  assert.deepEqual(openColumns(t, 'customer-two').visibleColumnKeys.value, ['grossWeight'])
+})
+
+test('discards unknown, duplicate and invalid keys and includes newly available fields in ordering', t => {
+  mockStorage(t)
+  saveOrderColumnPreferences('customer-one', {
+    visibleColumnKeys: ['volume', 'removed', 'volume', null, 3],
+    orderedColumnKeys: ['volume', 'removed', 'volume', false],
+  })
+  assert.deepEqual(readOrderColumnPreferences('customer-one', ['status', 'volume', 'newField'], ['status']), {
+    visibleColumnKeys: ['volume'],
+    orderedColumnKeys: ['volume', 'status', 'newField'],
+  })
+})
+
+test('uses the original defaults for missing or damaged saved preferences', t => {
+  const storage = mockStorage(t)
+  const defaults = { visibleColumnKeys: ['status'], orderedColumnKeys: ['status', 'volume'] }
+  assert.deepEqual(readOrderColumnPreferences('customer-one', ['status', 'volume'], ['status']), defaults)
+  saveOrderColumnPreferences('customer-one', defaults)
+  const realGetItem = storage.getItem
+  for (const saved of ['{invalid', 'null', '[]', '42', '{"visibleColumnKeys":"status","orderedColumnKeys":[]}']) {
+    storage.getItem = () => saved
+    assert.deepEqual(readOrderColumnPreferences('customer-one', ['status', 'volume'], ['status']), defaults)
+  }
+  storage.getItem = realGetItem
+})
+
+test('keeps column controls usable when browser storage is blocked', t => {
+  const storage = mockStorage(t)
+  storage.getItem = () => { throw new Error('Storage denied') }
+  storage.setItem = () => { throw new Error('Storage denied') }
+  const columns = openColumns(t)
+  assert.ok(columns.visibleColumnKeys.value.includes('status'))
+  assert.doesNotThrow(() => { columns.visibleColumnKeys.value.push('volume') })
+  assert.doesNotThrow(() => columns.resetOrderColumns())
+})
+
+test('does not read or save preferences without an account', t => {
+  const storage = mockStorage(t)
+  let storageCalls = 0
+  storage.getItem = () => { storageCalls++; return null }
+  storage.setItem = () => { storageCalls++ }
+  const columns = openColumns(t, '')
+  columns.visibleColumnKeys.value = ['volume']
+  assert.equal(openColumns(t, '').visibleColumnKeys.value.includes('status'), true)
+  assert.equal(storageCalls, 0)
+})

src/modules/first-leg/utils/orderColumnPreferences.ts

@@ -0,0 +1,35 @@
+interface OrderColumnPreferences {
+  visibleColumnKeys: string[]
+  orderedColumnKeys: string[]
+}
+
+function storageKey(ownerId: string) {
+  return `cc:client:first-leg:order-columns:${ownerId}`
+}
+
+export function readOrderColumnPreferences(ownerId: string, selectableKeys: string[], defaultVisibleKeys: string[]): OrderColumnPreferences {
+  const defaults = { visibleColumnKeys: [...defaultVisibleKeys], orderedColumnKeys: [...selectableKeys] }
+  if (!ownerId) return defaults
+  try {
+    const saved: unknown = JSON.parse(localStorage.getItem(storageKey(ownerId)) ?? 'null')
+    if (!saved || typeof saved !== 'object') return defaults
+    const preferences = saved as Partial<OrderColumnPreferences>
+    if (!Array.isArray(preferences.visibleColumnKeys) || !Array.isArray(preferences.orderedColumnKeys)) return defaults
+    const validKeys = (keys: unknown[]) => [...new Set(keys.filter((key): key is string => typeof key === 'string' && selectableKeys.includes(key)))]
+    return {
+      visibleColumnKeys: validKeys(preferences.visibleColumnKeys),
+      orderedColumnKeys: [...new Set([...validKeys(preferences.orderedColumnKeys), ...selectableKeys])],
+    }
+  } catch {
+    return defaults
+  }
+}
+
+export function saveOrderColumnPreferences(ownerId: string, preferences: OrderColumnPreferences) {
+  if (!ownerId) return
+  try {
+    localStorage.setItem(storageKey(ownerId), JSON.stringify(preferences))
+  } catch {
+    // Column selection remains usable when browser storage is unavailable.
+  }
+}

src/modules/first-leg/views/FirstLegOrdersView.vue

@@ -64,6 +64,7 @@ import { orderBillingMetric } from '../utils/orderDetailSummary'
 import type { OrderQueue } from '../api/unifiedOrders'
 import { validateProductImageFile } from '@/modules/first-leg/utils/productImage'
 import { createPriceEstimateBreakdown } from '@/modules/first-leg/utils/priceEstimate'
+import { readOrderColumnPreferences, saveOrderColumnPreferences } from '@/modules/first-leg/utils/orderColumnPreferences'
 
 const store = useFirstLegOrdersStore()
 const tenantStore = useTenantAdministrationStore()
@@ -182,8 +183,13 @@ const selectableOrderColumns: DataTableColumn[] = [
 ]
 const allSelectableColumnKeys = selectableOrderColumns.map((column) => String(column.key))
 const defaultVisibleColumnKeys = ['status', 'progress', 'channel', 'transportMode', 'pickupMethod', 'receivingWarehouse', 'createdAt']
-const visibleColumnKeys = ref<string[]>([...defaultVisibleColumnKeys])
-const orderedColumnKeys = ref<string[]>([...allSelectableColumnKeys])
+const columnPreferencesOwnerId = auth.user?.id ?? ''
+const savedColumnPreferences = readOrderColumnPreferences(columnPreferencesOwnerId, allSelectableColumnKeys, defaultVisibleColumnKeys)
+const visibleColumnKeys = ref<string[]>(savedColumnPreferences.visibleColumnKeys)
+const orderedColumnKeys = ref<string[]>(savedColumnPreferences.orderedColumnKeys)
+watch([visibleColumnKeys, orderedColumnKeys], ([visibleKeys, orderedKeys]) => {
+  saveOrderColumnPreferences(columnPreferencesOwnerId, { visibleColumnKeys: visibleKeys, orderedColumnKeys: orderedKeys })
+}, { deep: true, flush: 'sync' })
 const draggedColumnKey = ref('')
 const orderedSelectableColumns = computed(() => orderedColumnKeys.value
   .map((key) => selectableOrderColumns.find((column) => String(column.key) === key))
@@ -2381,7 +2387,7 @@ async function searchOrders(model: QueryModel) {
         <div class="order-detail-heading">
           <div class="detail-heading-main">
             <el-button link type="primary" class="detail-back-action" @click="router.push({ name: 'first-leg-orders' })">← 返回列表</el-button>
-            <div><h2>{{ detailOrder.businessSummary.inboundCode || (detailOrder.status === 'CANCELLED' ? (detailOrder.orderNo || '—') : detailOrder.status === 'DRAFT' ? '入仓码提交后生成' : '入仓码待生成') }}</h2><p v-if="detailOrder.status === 'CANCELLED'">订单已取消。</p><p v-else>{{ getFirstLegTransportModeLabel(detailOrder.transportMode) }} · {{ detailOrder.origin || '起运地待更新' }} → {{ detailOrder.destination || '目的地待更新' }}</p></div>
+            <div><h2>{{ detailOrder.businessSummary.inboundCode || (detailOrder.status === 'CANCELLED' ? (detailOrder.orderNo || '—') : detailOrder.status === 'DRAFT' ? '入仓码提交后生成' : '入仓码待生成') }}</h2></div>
           </div>
           <div class="detail-heading-actions"><el-tag :type="getFirstLegStatusTone(detailOrder.status)" effect="light">{{ getFirstLegStatusLabel(detailOrder.status) }}</el-tag><el-button v-if="canEditOrder && canClientEditFirstLegOrder(detailOrder.status)" type="primary" plain :loading="openingEditor" @click="openEdit(detailOrder)"><Pencil :size="16" />编辑草稿</el-button><el-button v-if="canOfferCancellation(detailOrder)" type="danger" plain :loading="cancellingOrderId === detailOrder.id" :disabled="!!cancellingOrderId" @click="cancelOrder(detailOrder)">取消订单</el-button></div>
         </div>
@@ -2794,7 +2800,6 @@ async function searchOrders(model: QueryModel) {
 .detail-heading-main > div { min-width: 0; }
 .detail-back-action, .detail-heading-actions { flex: 0 0 auto; }
 .order-detail-heading h2 { margin: 0; overflow: hidden; color: var(--navy); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
-.order-detail-heading p { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
 .order-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
 .order-detail-grid div { display: grid; min-width: 0; min-height: 34px; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 7px; padding: 3px 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
 .order-detail-grid dt { color: var(--muted); font-size: 10px; white-space: nowrap; }

src/modules/overseas-warehouse/api/warehouseServices.ts

@@ -132,7 +132,7 @@ export function getDiscard(discardNo: string) {
 export function listDiscardCandidates(inboundCode?: string) {
   return apiRequest<DiscardCandidate[]>({ method: 'GET', url: '/merchant/v1/last-leg/cargo-discards/inventory-candidates', params: { inboundCode: inboundCode || undefined } })
 }
-export function createDiscard(payload: { items: Array<{ orderId?: string; returnCartonId?: string; inventoryPositionId?: string; cartonIds?: string[]; skuCode: string; discardPackages: number }>; idempotencyKey: string; remark?: string }) {
+export function createDiscard(payload: { items: Array<{ orderId?: string; returnCartonId?: string; inventoryPositionId?: string; cartonIds?: string[]; skuCode: string; discardPackages: number }>; idempotencyKey: string; remark?: string; requestedPackages?: number }) {
   return apiRequest<Record<string, unknown>>({ method: 'POST', url: '/merchant/v1/last-leg/cargo-discards', data: payload })
 }
 export function cancelDiscard(discardNo: string) {

src/modules/overseas-warehouse/components/TransferPickupProgressPanel.vue

@@ -35,4 +35,4 @@ watch(() => props.transferNo, load, { immediate: true }); onBeforeUnmount(() =>
     <div v-if="progress?.evidence.length" class="pickup-files"><span>取货凭证</span><el-button v-for="file in progress.evidence" :key="file.fileId" link type="primary" @click="download(file)">{{ file.fileName }}</el-button></div>
   </section>
 </template>
-<style scoped>.pickup-progress{padding:16px;border:1px solid var(--border,#e5e7eb);border-radius:6px;margin:16px 0}.pickup-heading{display:flex;justify-content:space-between;align-items:center}.pickup-heading h3{margin:0;font-size:15px}.pickup-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 20px;margin:16px 0 0}.pickup-fields>div{display:flex;gap:10px}.pickup-fields dt{color:var(--muted,#64748b);flex-shrink:0}.pickup-fields dd{margin:0;overflow-wrap:anywhere}.pickup-files{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}</style>
+<style scoped>.pickup-progress{padding:0 16px 10px;border:1px solid var(--border,#e5e7eb);border-radius:6px;margin:16px 0}.pickup-heading{display:flex;min-height:40px;justify-content:space-between;align-items:center}.pickup-heading h3{margin:0;font-size:14px}.pickup-fields{display:grid;max-width:1408px;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 18px;margin:8px 0 0}.pickup-fields>div{display:flex;min-height:24px;align-items:center;gap:8px;padding:1px 0}.pickup-fields dt{flex:0 0 84px;min-width:0;color:#8a95a5;font-size:12px}.pickup-fields dd{min-width:0;margin:0;overflow-wrap:anywhere;color:#334157;font-size:13px;font-weight:700}.pickup-files{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}.pickup-files>span{color:#8a95a5;font-size:12px}@media(max-width:1100px){.pickup-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.pickup-fields{grid-template-columns:1fr;gap:2px}}</style>

src/modules/overseas-warehouse/utils/transferCartonPrinting.ts

@@ -9,7 +9,8 @@ const escapeHtml = (value: string) => value.replace(/[&<>"']/g, char => ({ '&':
 
 /** Generate labels in memory only. The later order request carries these same identities. */
 export function prepareTransferCartonLabels(rows: PrintableCargoRow[], newMark: () => string = () => {
-  const bytes = crypto.getRandomValues(new Uint8Array(16))
+  // 采用短箱码，业务前缀保留 BX，SKU/品名等业务信息继续单独打印，避免把业务字段拼进唯一箱码。
+  const bytes = crypto.getRandomValues(new Uint8Array(6))
   return `BX-${Array.from(bytes, byte => byte.toString(16).padStart(2, '0')).join('').toUpperCase()}`
 }) {
   const total = rows.reduce((sum, row) => sum + Number(row.expectedPackageCount || 0), 0)

src/modules/overseas-warehouse/views/ReturnInventoryView.vue

@@ -289,7 +289,7 @@ onMounted(() => { if (props.detailPage) void Promise.all([loadCartonDetail(), lo
     </template>
     <article v-else v-loading="loading" class="carton-detail-surface">
       <template v-if="cartonDetail">
-        <header class="carton-detail-header"><button type="button" class="carton-detail-back" @click="returnToCartons"><ArrowLeft :size="16" />返回列表</button><div><strong>{{ cartonDetail.cartonMark }}</strong><span>{{ warehouseLabel(cartonDetail.overseasWarehouseId) }} · 退货箱明细</span></div><div class="carton-detail-actions"><el-tag effect="light">{{ cartonStatusLabel(cartonDetail.status) }}</el-tag><el-button type="primary" @click="printLabel(cartonDetail.cartonMark)"><Printer :size="16" />打印箱唛</el-button></div></header>
+        <header class="carton-detail-header"><button type="button" class="carton-detail-back" @click="returnToCartons"><ArrowLeft :size="16" />返回列表</button><div><strong>{{ cartonDetail.cartonMark }}</strong><span>{{ warehouseLabel(cartonDetail.overseasWarehouseId) }}</span></div><div class="carton-detail-actions"><el-tag effect="light">{{ cartonStatusLabel(cartonDetail.status) }}</el-tag><el-button type="primary" @click="printLabel(cartonDetail.cartonMark)"><Printer :size="16" />打印箱唛</el-button></div></header>
         <section class="carton-detail-section"><h3>箱号概览</h3><dl class="carton-detail-grid"><div><dt>来源退货单</dt><dd>{{ cartonDetail.sourceReturnNo || '—' }}</dd></div><div><dt>签收批次</dt><dd>{{ cartonDetail.sourceBatchNo || '—' }}</dd></div><div><dt>SKU 种类</dt><dd>{{ cartonDetail.skuTypes }}</dd></div><div><dt>箱内总件数</dt><dd>{{ cartonDetail.totalQuantity }}</dd></div><div><dt>箱规</dt><dd>{{ cartonDetail.length && cartonDetail.width && cartonDetail.height ? `${cartonDetail.length} × ${cartonDetail.width} × ${cartonDetail.height} cm` : '—' }}</dd></div><div><dt>重量</dt><dd>{{ cartonDetail.weight ? `${cartonDetail.weight} kg` : '—' }}</dd></div><div><dt>换标进度</dt><dd>{{ returnRelabelStatusLabel(cartonDetail.relabelStatus) }}</dd></div><div><dt>实际完成（件）</dt><dd>{{ cartonDetail.relabelledQuantity ?? '—' }}</dd></div><div><dt>处理中占用（件）</dt><dd>{{ cartonDetail.relabelReservedQuantity ?? '—' }}</dd></div><div><dt>签收时间</dt><dd>{{ formatInventoryTime(cartonDetail.receivedAt) }}</dd></div></dl></section>
         <section class="carton-detail-section"><h3>箱内 SKU</h3><DataTable :data="cartonDetail.items" :columns="cartonItemColumns" row-key="skuCode" empty-text="暂无箱内 SKU" /></section>
         <section class="carton-detail-section"><h3>SKU 换标明细</h3><DataTable :data="cartonDetail.skuConversions" :columns="conversionColumns" empty-text="暂无 SKU 换标记录"><template #conversionStatus="{ row }">{{ conversionStatusLabel(row.status) }}</template></DataTable></section>

src/modules/overseas-warehouse/views/ReturnOrdersView.test.mjs

@@ -2,6 +2,7 @@ import assert from 'node:assert/strict'
 import { readFileSync } from 'node:fs'
 import test from 'node:test'
 import ts from 'typescript'
+import { createRequire } from 'node:module'
 
 const view = readFileSync(new URL('./ReturnOrdersView.vue', import.meta.url), 'utf8')
 const api = readFileSync(new URL('../api/returnOrders.ts', import.meta.url), 'utf8')
@@ -118,7 +119,7 @@ test('新建退货预报使用独立路由页面，编辑仍保留加宽弹框',
 
 test('新建预报铺满工作区，基础字段等宽对齐且数量输入保持紧凑', () => {
   assert.match(view, /return-create-surface \{ width:100%; min-width:0;[^}]*margin:0;/)
-  assert.match(view, /<el-form label-width="130px" class="return-create-form">/)
+  assert.match(view, /<el-form ref="createFormRef"[^>]*:model="form"[^>]*:rules="createFormRules"[^>]*label-position="top"/)
   assert.match(view, /return-create-form :deep\(\.el-input\), \.return-create-body \.return-create-form :deep\(\.el-select\) \{ width:100%; max-width:none;/)
   assert.match(view, /:deep\(\.el-table \.el-input-number\) \{ width:120px;/)
   assert.match(view, /<el-table class="return-forecast-table"[^>]*>/)
@@ -314,3 +315,37 @@ test('贴标入口保留完成入库门禁与退货来源，箱号只作为目
     { name: 'overseas-labeling-create', query: { returnNo: 'RT-TEST', warehouseId: 'WH-TEST', cartonMark: 'RC-TEST' } },
   ])
 })
+
+test('新增退货校验海外仓与联系人，空白联系人无效，客户参考号可选', async () => {
+  const { default: Schema } = createRequire(import.meta.resolve('element-plus'))('async-validator')
+  const source = view.slice(view.indexOf('const createFormRules:'), view.indexOf('const selectedOperationWarehouse ='))
+  const code = ts.transpileModule(source, { compilerOptions: { target: ts.ScriptTarget.ES2022 } }).outputText
+  const rules = new Function(code + '\nreturn createFormRules')()
+  const validator = new Schema(rules)
+  await assert.rejects(validator.validate({ overseasWarehouseId: '', warehouseContactName: ' ', warehouseContactPhone: '' }), error => {
+    assert.deepEqual(Object.keys(error.fields).sort(), ['overseasWarehouseId', 'warehouseContactName', 'warehouseContactPhone'])
+    return true
+  })
+  await validator.validate({ overseasWarehouseId: 'WH', warehouseContactName: 'Contact', warehouseContactPhone: '123456', customerReferenceNo: '' })
+})
+
+test('新增校验失败或正在提交时不继续创建，编辑保持既有校验路径', async () => {
+  const start = view.indexOf('async function submit()')
+  const end = view.indexOf('  const items =', start)
+  const code = view.slice(start, end) + '\nreturn "continue"\n}'
+  const creating = { value: false }, props = { createPage: true }
+  let validations = 0
+  const formRef = { value: { validate: async () => { validations++; throw new Error('required') } } }
+  const submit = new Function('creating', 'props', 'createFormRef', code + '\nreturn submit')(creating, props, formRef)
+  assert.equal(await submit(), undefined)
+  assert.equal(validations, 1)
+  creating.value = true
+  assert.equal(await submit(), undefined)
+  assert.equal(validations, 1)
+  creating.value = false
+  props.createPage = false
+  assert.equal(await submit(), 'continue')
+  props.createPage = true
+  formRef.value.validate = async () => true
+  assert.equal(await submit(), 'continue')
+})

src/modules/overseas-warehouse/views/ReturnOrdersView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onActivated, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
 import { ArrowLeft, ChevronDown, Plus } from '@lucide/vue'
 import { useRoute, useRouter } from 'vue-router'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
@@ -97,6 +97,12 @@ interface SkuDraft { id: number; skuCode: string; productNameZh: string; expecte
 let skuSequence = 0
 function emptySku(): SkuDraft { return { id: ++skuSequence, skuCode: '', productNameZh: '', expectedQuantity: 1 } }
 const form = reactive({ overseasWarehouseId: '', warehouseContactName: '', warehouseContactPhone: '', customerReferenceNo: '', remark: '', needRelabel: false, items: [emptySku()] })
+const createFormRef = ref<FormInstance>()
+const createFormRules: FormRules = {
+  overseasWarehouseId: [{ required: true, message: '请选择海外仓', trigger: 'change' }],
+  warehouseContactName: [{ required: true, whitespace: true, message: '请输入联系人', trigger: 'blur' }],
+  warehouseContactPhone: [{ required: true, whitespace: true, message: '请输入联系电话', trigger: 'blur' }],
+}
 const selectedOperationWarehouse = computed(() => operationWarehouses.value.find(item => String(item.id) === form.overseasWarehouseId))
 function normalizedSku(value: string) { return value.trim().toUpperCase() }
 const duplicateSkuIds = computed(() => {
@@ -107,7 +113,7 @@ const duplicateSkuIds = computed(() => {
   }
   return new Set([...grouped.values()].filter(ids => ids.length > 1).flat())
 })
-function resetForm() { Object.assign(form, { overseasWarehouseId: '', warehouseContactName: '', warehouseContactPhone: '', customerReferenceNo: '', remark: '', needRelabel: false, items: [emptySku()] }) }
+function resetForm() { createFormRef.value?.clearValidate(); Object.assign(form, { overseasWarehouseId: '', warehouseContactName: '', warehouseContactPhone: '', customerReferenceNo: '', remark: '', needRelabel: false, items: [emptySku()] }) }
 function warehouseLabel(warehouse: MerchantWarehouse) { return `${warehouse.warehouseName} · ${warehouse.warehouseCode}` }
 function operationWarehouseLabel(warehouseId: string) {
   const warehouse = operationWarehouses.value.find(item => String(item.id) === String(warehouseId))
@@ -117,6 +123,7 @@ function selectOperationWarehouse() {
   const warehouse = operationWarehouses.value.find(item => String(item.id) === form.overseasWarehouseId)
   form.warehouseContactName = warehouse?.contactName || ''
   form.warehouseContactPhone = warehouse?.contactPhone || ''
+  if (props.createPage) createFormRef.value?.clearValidate(['warehouseContactName', 'warehouseContactPhone'])
 }
 async function loadOperationWarehouses() {
   operationWarehousesLoading.value = true
@@ -251,6 +258,8 @@ function openRelabel(order: Pick<ReturnOrderSummary, 'returnNo' | 'overseasWareh
   void router.push({ name: 'overseas-labeling-create', query: { returnNo: order.returnNo, warehouseId: String(order.overseasWarehouseId), ...(cartonMark ? { cartonMark } : {}) } })
 }
 async function submit() {
+  if (creating.value) return
+  if (props.createPage && !await createFormRef.value?.validate().catch(() => false)) return
   const items = form.items.map(({ skuCode, productNameZh, expectedQuantity }) => ({ skuCode: skuCode.trim(), productNameZh: productNameZh.trim(), expectedQuantity }))
   if (!form.overseasWarehouseId || items.some(item => !item.skuCode || item.expectedQuantity <= 0)) { ElMessage.warning('请填写操作仓、SKU 和预报数量'); return }
   if (!form.warehouseContactName.trim() || !form.warehouseContactPhone.trim()) { ElMessage.warning('请填写海外仓联系人和联系电话'); return }
@@ -314,30 +323,38 @@ onBeforeUnmount(clearPhotoUrls)
 </script>
 
 <template>
-  <section class="return-orders-page">
+  <section class="return-orders-page" :class="{ 'return-orders-create client-ui': props.createPage }">
     <template v-if="props.createPage">
       <article class="return-create-surface">
         <header class="return-create-header">
           <div><h2>新建退货预报</h2></div>
           <el-button @click="returnToList"><ArrowLeft :size="16" />返回列表</el-button>
         </header>
-        <div class="return-create-body">
-          <el-form label-width="130px" class="return-create-form">
-            <el-form-item label="海外仓" required><el-select v-model="form.overseasWarehouseId" filterable clearable :loading="operationWarehousesLoading" :disabled="Boolean(operationWarehousesError)" placeholder="" @change="selectOperationWarehouse"><el-option v-for="warehouse in operationWarehouses" :key="warehouse.id" :label="warehouseLabel(warehouse)" :value="String(warehouse.id)" /></el-select><div v-if="operationWarehousesError" class="warehouse-error">{{ operationWarehousesError }}</div></el-form-item>
-            <el-form-item label="客户参考号"><el-input v-model="form.customerReferenceNo" placeholder="" /></el-form-item>
-            <el-form-item label="海外仓联系人" required><el-input v-model="form.warehouseContactName" :readonly="Boolean(selectedOperationWarehouse?.contactName)" placeholder="" /></el-form-item>
-            <el-form-item label="海外仓联系电话" required><el-input v-model="form.warehouseContactPhone" :readonly="Boolean(selectedOperationWarehouse?.contactPhone)" placeholder="" /></el-form-item>
-            <el-form-item label="备注" class="return-form-wide"><el-input v-model="form.remark" type="textarea" :rows="2" placeholder="" /></el-form-item>
-          </el-form>
-          <div class="items-title"><span>SKU 预报明细</span><el-button text type="primary" @click="addItem"><Plus :size="15" />添加 SKU</el-button></div>
-          <div class="return-relabel-option"><span>是否换标</span><el-radio-group v-model="form.needRelabel" aria-label="是否换标"><el-radio-button :value="false">不换标</el-radio-button><el-radio-button :value="true">需要换标</el-radio-button></el-radio-group></div>
          <el-table class="return-forecast-table" :data="form.items" row-key="id" size="small">
+        <el-form ref="createFormRef" class="return-create-body" :model="form" :rules="createFormRules" label-position="top" :disabled="creating" scroll-to-error @submit.prevent="submit">
+          <section class="return-create-section">
+            <h3>基础信息</h3>
+            <div class="return-create-form">
+              <el-form-item label="海外仓" prop="overseasWarehouseId"><el-select v-model="form.overseasWarehouseId" filterable clearable :loading="operationWarehousesLoading" :disabled="Boolean(operationWarehousesError)" placeholder="请选择海外仓" popper-class="return-create-popper" @change="selectOperationWarehouse"><el-option v-for="warehouse in operationWarehouses" :key="warehouse.id" :label="warehouseLabel(warehouse)" :value="String(warehouse.id)" /></el-select><div v-if="operationWarehousesError" class="warehouse-error">{{ operationWarehousesError }}</div></el-form-item>
+              <el-form-item label="海外仓联系人" prop="warehouseContactName"><el-input v-model="form.warehouseContactName" :readonly="Boolean(selectedOperationWarehouse?.contactName)" placeholder="请输入海外仓联系人" /></el-form-item>
+              <el-form-item label="海外仓联系电话" prop="warehouseContactPhone"><el-input v-model="form.warehouseContactPhone" type="tel" :readonly="Boolean(selectedOperationWarehouse?.contactPhone)" placeholder="请输入海外仓联系电话" /></el-form-item>
+              <el-form-item label="客户参考号"><el-input v-model="form.customerReferenceNo" placeholder="请输入客户参考号（选填）" /></el-form-item>
+              <el-form-item label="备注" class="return-form-wide"><el-input v-model="form.remark" type="textarea" :rows="3" resize="vertical" placeholder="请输入退货要求或其他补充信息（选填）" /></el-form-item>
+            </div>
+          </section>
+          <section class="return-create-section">
+            <div class="items-title"><h3>SKU 预报明细</h3><el-button type="primary" @click="addItem"><Plus :size="15" />添加 SKU</el-button></div>
+            <div class="return-create-card">
+              <div class="return-relabel-option"><span>是否换标</span><el-radio-group v-model="form.needRelabel" aria-label="是否换标"><el-radio-button :value="false">不换标</el-radio-button><el-radio-button :value="true">需要换标</el-radio-button></el-radio-group></div>
+              <el-table class="return-forecast-table" :data="form.items" row-key="id" size="small">
                 <el-table-column label="操作" width="80" fixed="left"><template #default="{ $index }"><el-button link type="danger" :disabled="form.items.length === 1" @click="removeItem($index)">删除</el-button></template></el-table-column>
-            <el-table-column label="SKU" width="300"><template #default="{ row }"><div><el-input v-model="row.skuCode" :class="{ 'duplicate-sku-input': duplicateSkuIds.has(row.id) }" placeholder="" @blur="row.skuCode = row.skuCode.trim()" /><div v-if="duplicateSkuIds.has(row.id)" class="duplicate-sku-error">该 SKU 已在明细中填写</div></div></template></el-table-column>
-            <el-table-column label="中文品名" min-width="320"><template #default="{ row }"><el-input v-model="row.productNameZh" placeholder="" /></template></el-table-column>
-            <el-table-column label="预报数量" width="150"><template #default="{ row }"><el-input-number v-model="row.expectedQuantity" :min="1" controls-position="right" placeholder="" /></template></el-table-column>
+                <el-table-column label="SKU" width="300"><template #default="{ row }"><div><el-input v-model="row.skuCode" :class="{ 'duplicate-sku-input': duplicateSkuIds.has(row.id) }" placeholder="请输入 SKU" @blur="row.skuCode = row.skuCode.trim()" /><div v-if="duplicateSkuIds.has(row.id)" class="duplicate-sku-error">该 SKU 已在明细中填写</div></div></template></el-table-column>
+                <el-table-column label="中文品名" min-width="320"><template #default="{ row }"><el-input v-model="row.productNameZh" placeholder="请输入中文品名（选填）" /></template></el-table-column>
+                <el-table-column label="预报数量" width="150"><template #default="{ row }"><el-input-number v-model="row.expectedQuantity" :min="1" controls-position="right" placeholder="请输入数量" /></template></el-table-column>
               </el-table>
             </div>
-        <footer class="return-create-actions"><el-button @click="cancelCreate">取消</el-button><el-button type="primary" :loading="creating" @click="submit">提交预报</el-button></footer>
+          </section>
+        </el-form>
+        <footer class="return-create-actions"><el-button :disabled="creating" @click="cancelCreate">返回列表</el-button><el-button type="primary" :loading="creating" @click="submit">提交预报</el-button></footer>
       </article>
     </template>
 
@@ -378,7 +395,7 @@ onBeforeUnmount(clearPhotoUrls)
       <template v-if="selected">
         <header class="return-detail-header">
           <button type="button" class="return-back" @click="returnToList"><ArrowLeft :size="16" />返回列表</button>
-          <div class="return-detail-title"><strong>{{ selected.order.returnNo }}</strong><span>{{ operationWarehouseLabel(selected.order.overseasWarehouseId) }} · 退货签收</span></div>
+          <div class="return-detail-title"><strong>{{ selected.order.returnNo }}</strong><span>{{ operationWarehouseLabel(selected.order.overseasWarehouseId) }}</span></div>
           <div class="return-detail-actions"><el-button v-if="canCreateRelabel && canApplyRelabel(selected.order)" type="primary" plain @click="openRelabel(selected.order)">贴标申请</el-button><el-tag :type="statusType(selected.order.status, selected.order.needRelabel)" :class="statusClass(selected.order.status, selected.order.needRelabel)" effect="light">{{ statusLabel(selected.order.status, selected.order.needRelabel) }}</el-tag></div>
         </header>
         <ReviewRejectionNotice :status="selected.order.status" :reason="selected.remark" />
@@ -600,3 +617,50 @@ onBeforeUnmount(clearPhotoUrls)
 @media (max-width: 900px) { .return-photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
 @media (max-width: 720px) { .return-detail-header { grid-template-columns:1fr auto; } .return-back { grid-column:1/-1; } .return-pagination { padding:12px; } .return-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
 </style>
+
+<style scoped>
+.return-orders-create { --el-color-primary: #2f7bff; --el-text-color-regular: #1f2937; --el-text-color-placeholder: #b0b7c3; width: 100%; min-width: 0; background: #f4f7fc; color: #1f2937; font: 14px/1.5 "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
+.return-orders-create .return-create-surface { min-height: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; }
+.return-orders-create .return-create-header { min-height: 44px; margin-bottom: 12px; padding: 0; border: 0; }
+.return-orders-create .return-create-header h2 { color: #1f2937; font-size: 26px; font-weight: 700; }
+.return-orders-create .return-create-body { padding: 0; }
+.return-orders-create .return-create-section { margin-bottom: 12px; }
+.return-orders-create .return-create-section h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #1f2937; font-size: 18px; font-weight: 700; }
+.return-orders-create .return-create-section h3::before { content: ''; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #2f7bff; }
+.return-orders-create .return-create-section:nth-of-type(2) h3::before { background: #0ea5a4; }
+.return-orders-create .return-create-form,
+.return-orders-create .return-create-card { min-width: 0; padding: 16px; box-sizing: border-box; border: 1px solid #e3e8f0; border-radius: 10px; background: #fff; }
+.return-orders-create .return-create-form { --el-component-size: 44px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
+.return-orders-create .return-create-form :deep(.el-form-item) { min-width: 0; margin: 0; }
+.return-orders-create .return-create-form :deep(.el-form-item__label) { height: auto; margin: 0 0 6px; padding: 0; color: #374151; font-size: 14px; font-weight: 600; line-height: 20px; }
+.return-orders-create .return-create-form :deep(.el-form-item.is-required .el-form-item__label::before) { color: #e5484d; }
+.return-orders-create .return-create-form :deep(.el-form-item__content) { min-width: 0; line-height: 20px; }
+.return-orders-create .return-create-form :deep(.el-form-item__error) { position: absolute; top: auto; bottom: calc(100% + 6px); right: 0; left: auto; width: auto; max-width: calc(100% - 140px); padding: 0; font-size: 12px; line-height: 20px; text-align: right; }
+.return-orders-create :deep(.el-input__wrapper),
+.return-orders-create :deep(.el-select__wrapper),
+.return-orders-create :deep(.el-textarea__inner) { border: 1px solid #d5dce8; border-radius: 6px; box-shadow: none; }
+.return-orders-create .return-create-form :deep(.el-input__wrapper),
+.return-orders-create .return-create-form :deep(.el-select__wrapper) { min-height: 44px; box-sizing: border-box; padding: 10px 14px; }
+.return-orders-create .return-create-form :deep(.el-input__inner) { height: 22px; color: #1f2937; font-size: 14px; line-height: 22px; }
+.return-orders-create .return-create-form :deep(.el-textarea__inner) { min-height: 110px !important; padding: 11px 14px; color: #1f2937; font-size: 14px; line-height: 20px; }
+.return-orders-create :deep(.el-input__inner::placeholder),
+.return-orders-create :deep(.el-textarea__inner::placeholder),
+.return-orders-create :deep(.el-select__placeholder.is-transparent) { color: #b0b7c3; opacity: 1; }
+.return-orders-create :deep(.el-input__wrapper.is-focus),
+.return-orders-create :deep(.el-select__wrapper.is-focused),
+.return-orders-create :deep(.el-textarea__inner:focus) { outline: 2px solid #2f7bff; outline-offset: 0; }
+.return-orders-create :deep(.is-error .el-input__wrapper),
+.return-orders-create :deep(.is-error .el-select__wrapper),
+.return-orders-create :deep(.duplicate-sku-input .el-input__wrapper) { border-color: #e5484d; box-shadow: none; }
+.return-orders-create .items-title { margin: 0 0 10px; }
+.return-orders-create .items-title h3 { margin: 0; }
+.return-orders-create .return-relabel-option { margin: 0 0 12px; color: #374151; }
+.return-orders-create .return-relabel-option :deep(.el-radio-button__inner) { box-shadow: none; }
+.return-orders-create .return-create-actions { gap: 12px; padding: 0; border: 0; background: transparent; }
+.return-orders-create :deep(.el-button) { box-shadow: none; }
+.return-orders-create .return-create-header :deep(.el-button),
+.return-orders-create .return-create-actions :deep(.el-button) { min-height: 44px; margin-left: 0; padding: 10px 18px; border: 1px solid #d5dce8; border-radius: 6px; background: #fff; color: #1d5fe0; font-size: 14px; font-weight: 600; }
+.return-orders-create .return-create-actions :deep(.el-button--primary) { padding: 12px 28px; border-color: #2f7bff; background: #2f7bff; color: #fff; }
+.return-orders-create .return-create-actions :deep(.el-button.is-disabled) { opacity: .55; }
+:global(.return-create-popper.el-popper) { border: 1px solid #e3e8f0; border-radius: 6px; box-shadow: none; }
+</style>

src/modules/overseas-warehouse/views/labelingCreateForm.test.mjs

@@ -0,0 +1,67 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { computed, reactive, ref } from 'vue'
+import ts from 'typescript'
+
+const source = readFileSync(new URL('./WarehouseServiceView.vue', import.meta.url), 'utf8')
+const { default: Schema } = createRequire(import.meta.resolve('element-plus'))('async-validator')
+const rulesSource = source.slice(source.indexOf('const labelingFormRules ='), source.indexOf('const orderInfoCollapsed ='))
+const rulesCode = ts.transpileModule(rulesSource, { compilerOptions: { target: ts.ScriptTarget.ES2022 } }).outputText
+function harness(mode = 'carton', patch = {}) {
+  const labelingMode = ref(mode)
+  const form = reactive({ warehouse: 'warehouse-a', sourceOrder: 'source-a', contact: '联系人', phone: '12345678', labelDeadline: '2026-11-10T12:00:00', destination: 'FBA-A', deliveryMethod: 'TRUCK', relabel: false, ...patch })
+  const rules = new Function('computed', 'labelingMode', 'form', `${rulesCode}\nreturn labelingFormRules`)(computed, labelingMode, form)
+  return { form, labelingMode, validate: () => new Schema(rules.value).validate(form) }
+}
+
+test('order information reports every missing required field and rejects whitespace contacts', async () => {
+  const state = harness('carton', { warehouse: '', sourceOrder: '', contact: '  ', phone: ' ', labelDeadline: '', destination: '', deliveryMethod: '' })
+  await assert.rejects(state.validate(), error => {
+    assert.deepEqual(Object.keys(error.fields).sort(), ['warehouse', 'sourceOrder', 'contact', 'phone', 'labelDeadline', 'destination', 'deliveryMethod'].sort())
+    return true
+  })
+})
+
+test('SKU-only labeling excludes hidden destination and delivery requirements', async () => {
+  const state = harness('sku', { destination: '', deliveryMethod: '' })
+  await state.validate()
+  state.labelingMode.value = 'carton_and_sku'
+  await assert.rejects(state.validate(), error => Object.keys(error.fields).sort().join(',') === 'deliveryMethod,destination')
+})
+
+test('shipping label file is required only when express printing is selected', async () => {
+  const state = harness('carton', { deliveryMethod: 'EXPRESS', relabel: true })
+  await assert.rejects(state.validate(), error => Boolean(error.fields.shippingLabelFile))
+  state.form.shippingLabelFile = new File(['label'], 'label.pdf', { type: 'application/pdf' })
+  await state.validate()
+  state.form.shippingLabelFile = null
+  state.form.relabel = false
+  await state.validate()
+  state.form.relabel = true
+  state.form.deliveryMethod = 'TRUCK'
+  await state.validate()
+  state.form.deliveryMethod = 'EXPRESS'
+  state.labelingMode.value = 'sku'
+  await state.validate()
+})
+
+test('invalid create fields expand the order section and stop before submission logic', async () => {
+  const start = source.indexOf("async function submit(action:")
+  const end = source.indexOf("  if (props.service === 'transfer' && inventoryTransfer.value", start)
+  const preamble = source.slice(start, end) + '\nreturn "continue"\n}'
+  const code = ts.transpileModule(preamble, { compilerOptions: { target: ts.ScriptTarget.ES2022 } }).outputText
+  const collapsed = ref(true), saving = ref(false), isLabelingCreate = ref(true)
+  let validations = 0
+  const formRef = ref({ validate: async () => { validations++; throw new Error('invalid') } })
+  const submit = new Function('saving', 'isLabelingCreate', 'orderInfoCollapsed', 'nextTick', 'labelingFormRef', `${code}\nreturn submit`)(saving, isLabelingCreate, collapsed, async () => {}, formRef)
+  assert.equal(await submit(), undefined)
+  assert.equal(collapsed.value, false)
+  assert.equal(validations, 1)
+  isLabelingCreate.value = false
+  assert.equal(await submit(), 'continue')
+  assert.equal(validations, 1)
+  saving.value = true
+  assert.equal(await submit(), undefined)
+})

src/modules/overseas-warehouse/views/relabelAttachments.test.mjs

@@ -57,19 +57,16 @@ test('客户贴标表单不展示客户单号、托盘和内部库存来源列',
   assert.doesNotMatch(view, /已选托盘组成/)
 })
 
-test('贴标申请保留关联模板下载和上传入口', () => {
+test('贴标申请使用统一明细模板下载和上传入口', () => {
   assert.match(view, /downloadRelabelTemplate/)
-  assert.match(view, /<strong>SKU 关联<\/strong>/)
-  assert.match(view, /<strong>箱号关联<\/strong>/)
-  assert.match(view, /<strong>SKU 混箱<\/strong>/)
+  assert.match(view, /<strong>统一贴标明细<\/strong>/)
   assert.match(view, />下载模板<\/el-button>/)
   assert.match(view, />上传文件<\/el-button>/)
-  assert.match(view, /skuTemplateInput\?\.click\(\)/)
-  assert.match(view, /cartonTemplateInput\?\.click\(\)/)
+  assert.match(view, /unifiedTemplateInput\?\.click\(\)/)
   assert.match(view, /importRelabelTemplate/)
   assert.match(view, /明细行标识/)
-  assert.match(view, /'明细行标识', '旧箱唛', '旧SKU标签', '新SKU标签'/)
-  assert.match(view, /const includeDestination = false/)
+  assert.match(view, /'明细行标识', '贴标类型'/)
+  assert.doesNotMatch(view.slice(view.indexOf('function downloadRelabelTemplate'), view.indexOf('function parseCsvLine')), /FBA目的仓/)
   assert.doesNotMatch(view, /const includeDestination = props\.service !== 'transfer'/)
   assert.match(view, /<strong>绑定明细<\/strong>/)
   assert.match(view, /<th>仓库唛头 \*<\/th>/)

src/modules/overseas-warehouse/views/transferCreateForm.test.mjs

@@ -0,0 +1,77 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { computed, reactive, ref } from 'vue'
+import ts from 'typescript'
+
+const source = readFileSync(new URL('./WarehouseServiceView.vue', import.meta.url), 'utf8')
+const { default: Schema } = createRequire(import.meta.resolve('element-plus'))('async-validator')
+const ruleSource = source.slice(source.indexOf('const transferFormRules ='), source.indexOf('watch([inventoryTransfer,'))
+const code = ts.transpileModule(ruleSource, { compilerOptions: { target: ts.ScriptTarget.ES2022 } }).outputText
+function harness(patch = {}) {
+  const form = reactive({ warehouse: 'WH', deliveryMethod: 'WAREHOUSE_PICKUP', address: 'Street 1', pickupContact: 'Contact', pickupPhone: '123456', estimatedArrivalAt: '2026-11-01T12:00:00', relabel: false, ...patch })
+  const inventoryTransfer = ref(false), transferDestinationType = ref('NONE'), labelingMode = ref('carton')
+  const rules = new Function('computed', 'inventoryTransfer', 'transferDestinationType', 'labelingMode', 'form', code + '\nreturn transferFormRules')(computed, inventoryTransfer, transferDestinationType, labelingMode, form)
+  return { form, inventoryTransfer, transferDestinationType, labelingMode, validate: () => new Schema(rules.value).validate(form) }
+}
+const hasFields = (...fields) => error => {
+  assert.deepEqual(Object.keys(error.fields).sort(), fields.sort())
+  return true
+}
+
+test('pickup requires contact and phone; customer delivery hides those requirements', async () => {
+  const state = harness({ pickupContact: ' ', pickupPhone: '' })
+  await assert.rejects(state.validate(), hasFields('pickupContact', 'pickupPhone'))
+  state.form.deliveryMethod = 'CUSTOMER_DELIVERY'
+  await state.validate()
+  state.form.address = ''
+  await assert.rejects(state.validate(), hasFields('address'))
+})
+
+test('inventory transfer excludes inbound address, arrival and pickup fields', async () => {
+  const state = harness({ deliveryMethod: '', address: '', estimatedArrivalAt: '', pickupContact: '', pickupPhone: '' })
+  state.inventoryTransfer.value = true
+  await state.validate()
+  state.form.warehouse = ''
+  await assert.rejects(state.validate(), hasFields('warehouse'))
+})
+
+test('destination switch validates only FBA or private warehouse fields currently visible', async () => {
+  const state = harness()
+  await state.validate()
+  state.transferDestinationType.value = 'FBA'
+  await assert.rejects(state.validate(), hasFields('destination'))
+  state.transferDestinationType.value = 'PRIVATE'
+  await assert.rejects(state.validate(), hasFields('privateDestinationAddress', 'privateDestinationPostalCode', 'privateDestinationContact', 'privateDestinationPhone'))
+  Object.assign(state.form, { privateDestinationAddress: 'Private street', privateDestinationPostalCode: '10000', privateDestinationContact: 'Person', privateDestinationPhone: '123456' })
+  await state.validate()
+  state.transferDestinationType.value = 'NONE'
+  await state.validate()
+})
+
+test('relabeling requires its visible fields, with no delivery method for SKU-only mode', async () => {
+  const state = harness({ relabel: true })
+  await assert.rejects(state.validate(), hasFields('labelDeadline', 'relabelContact', 'relabelPhone', 'relabelDeliveryMethod', 'relabelDestination'))
+  Object.assign(state.form, { labelDeadline: '2026-11-01T12:00:00', relabelContact: 'Contact', relabelPhone: '123456', relabelDestination: 'FBA-A' })
+  state.labelingMode.value = 'sku'
+  await state.validate()
+  state.labelingMode.value = 'carton_and_sku'
+  await assert.rejects(state.validate(), hasFields('relabelDeliveryMethod'))
+  state.form.relabel = false
+  await state.validate()
+})
+
+test('draft and submit stop before business requests when create validation fails; edit remains unchanged', async () => {
+  const start = source.indexOf('  if (isTransferCreate.value) {', source.indexOf('async function submit('))
+  const end = source.indexOf('  const primaryWarehouse =', start)
+  const code = 'return async function submit(action) {' + source.slice(start, end) + '\nreturn action\n}'
+  const isTransferCreate = ref(true)
+  const labelingFormRef = ref({ validate: async () => { throw new Error('required') } })
+  const submit = new Function('isTransferCreate', 'labelingFormRef', 'nextTick', code)(isTransferCreate, labelingFormRef, async () => {})
+  assert.equal(await submit('draft'), undefined)
+  assert.equal(await submit('submit'), undefined)
+  isTransferCreate.value = false
+  assert.equal(await submit('draft'), 'draft')
+  assert.equal(await submit('submit'), 'submit')
+})

src/modules/overseas-warehouse/views/unifiedRelabelTemplate.test.mjs

@@ -0,0 +1,87 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import ts from 'typescript'
+
+const source = readFileSync(new URL('./WarehouseServiceView.vue', import.meta.url), 'utf8')
+const csvCell = source.slice(source.indexOf('function csvCell('), source.indexOf('function transferCustomerMarks'))
+const buildItems = source.slice(source.indexOf('function buildSkuRelabelItems('), source.indexOf('function addRelabelCargoRow('))
+const submitStart = source.indexOf('const sourceInboundOrders =', source.indexOf('async function submit('))
+const submitBody = source.slice(submitStart, source.indexOf('      try {', submitStart))
+const code = ts.transpileModule(csvCell + buildItems + source.slice(source.indexOf('function relabelTemplateTypeForMode'), source.indexOf('function selectDiscardInbound')) + '\nasync function submitImported() { const idempotencyKey = "test-key"; ' + submitBody + '\nreturn created; }', { compilerOptions: { target: ts.ScriptTarget.ES2022 } }).outputText
+function harness(service = 'labeling') {
+  const state = { props: { service }, cargoRows: { value: [{ id: 1, sku: 'OLD', name: '货物', included: false, cartonMark: 'BOX-1', customerCartonMarks: 'CUSTOMER-1', shipmentNo: '', remark: '' }] }, labelingMode: { value: 'carton' }, importedRelabelBindings: { value: [] }, skuRelabelRows: { value: [] }, transferRelabelRows: { value: [] }, form: { destination: 'ONT8' }, ElMessage: { error: message => errors.push(message), warning: message => errors.push(message), success: () => {} }, createCargoRow: () => ({}), transferCustomerMarks: row => row.customerCartonMarks.split(',') }
+  const requests = []
+  Object.assign(state, { isReturnRelabelSource: { value: false }, selectedReturnCandidates: { value: [] }, cartonDetailRows: { get value() { return state.cargoRows.value.filter(row => row.included) } }, createRelabel: async request => { requests.push(request); return { application: { relabelNo: 'TEST-RELABEL' } } } })
+  Object.assign(state.cargoRows.value[0], { availableQuantity: 1, sourceInventoryBalanceId: '101', sourceInventoryPositionId: '102', sourceInboundOrderId: '103' })
+  const errors = [], downloads = []
+  const URL = { createObjectURL: blob => { downloads.push(blob); return 'blob:test' }, revokeObjectURL: () => {} }
+  const document = { createElement: () => ({ click() {} }) }
+  const result = new Function(...Object.keys(state), 'URL', 'document', 'let skuRelabelSequence = 0;\n' + code + '\nreturn { downloadRelabelTemplate, importRelabelTemplate, importSelectedBindingsToDetails, buildSkuRelabelItems, submitImported };')(...Object.values(state), URL, document)
+  async function upload(rows) {
+    const csv = [['明细行标识', '贴标类型', '仓库唛头', '旧SKU标签', '新SKU标签', '换标数量（件）', '新FBA箱唛', 'FBA货件编号', '备注'], ...rows].map(row => row.join(',')).join('\r\n')
+    await result.importRelabelTemplate({ target: { files: [new File([csv], '统一模板.csv')], value: 'file' } })
+  }
+  return { ...state, ...result, upload, errors, downloads, requests }
+}
+
+for (const [type, mode, expected] of [['只换箱唛', 'carton', 'carton'], ['只换 SKU 标签', 'sku', 'sku'], ['SKU 和箱唛都换', 'carton_and_sku', 'mixed']]) {
+  test(`${type}：统一模板导入并生成对应类型明细`, async () => {
+    const state = harness()
+    await state.upload([[1, type, 'BOX-1', 'OLD', mode === 'carton' ? '' : 'NEW', 3, mode === 'sku' ? '' : 'FBA-1', mode === 'sku' ? '' : 'SHIP-1', '']])
+    assert.deepEqual(state.errors, [])
+    assert.equal(state.importedRelabelBindings.value[0].templateType, expected)
+    state.importSelectedBindingsToDetails()
+    assert.equal(state.labelingMode.value, mode)
+    if (mode === 'carton') { assert.equal(state.cargoRows.value[0].included, true); assert.equal(state.cargoRows.value[0].quantity, 1) }
+    else {
+      assert.equal(state.skuRelabelRows.value[0].newSku, 'NEW')
+      const [item] = state.buildSkuRelabelItems()
+      assert.equal(item.operationType, mode === 'sku' ? 'SKU_LABEL' : 'CARTON_AND_SKU')
+      assert.equal(item.totalPackageCount, 1)
+      assert.equal(item.skuItems[0].quantity, 3)
+      assert.equal(item.destinationFbaWarehouseCode, mode === 'sku' ? undefined : 'ONT8')
+    }
+    state.form.deliveryMethod = 'TRUCK'
+    await state.submitImported()
+    assert.equal(state.requests.length, 1)
+    assert.equal(state.requests[0].items[0].operationType, mode === 'carton' ? 'CARTON_LABEL' : mode === 'sku' ? 'SKU_LABEL' : 'CARTON_AND_SKU')
+    assert.equal(state.requests[0].deliveryMethod, mode === 'sku' ? undefined : 'TRUCK')
+  })
+}
+
+test('三种类型下载同一列结构，并带出当前换标类型', async () => {
+  const state = harness()
+  const headers = []
+  for (const mode of ['carton', 'sku', 'carton_and_sku']) {
+    state.labelingMode.value = mode
+    state.downloadRelabelTemplate()
+    const csv = await state.downloads.at(-1).text()
+    const lines = csv.split('\r\n')
+    assert.equal(lines.length, 3)
+    headers.push(lines[0])
+    assert.match(lines[1], /只换箱唛|只换 SKU 标签|SKU 和箱唛都换/)
+  }
+  assert.equal(new Set(headers).size, 1)
+})
+
+test('组合换标同箱多 SKU 生成一条箱任务并保留全部 SKU 子项', async () => {
+  const state = harness()
+  await state.upload([[1, 'SKU 和箱唛都换', 'BOX-1', 'OLD', 'NEW', 3, 'FBA-1', 'SHIP-1', ''], [1, 'SKU 和箱唛都换', 'BOX-1', 'OLD2', 'NEW2', 2, 'FBA-1', 'SHIP-1', '']])
+  assert.deepEqual(state.errors, [])
+  state.importSelectedBindingsToDetails()
+  await state.submitImported()
+  assert.equal(state.requests[0].items.length, 1)
+  assert.equal(state.requests[0].items[0].totalPackageCount, 1)
+  assert.deepEqual(state.requests[0].items[0].skuItems.map(item => item.quantity), [3, 2])
+})
+
+test('混合类型、缺字段、无效数量、重复关系和未知库存均不导入', async () => {
+  const valid = [1, 'SKU 和箱唛都换', 'BOX-1', 'OLD', 'NEW', 3, 'FBA-1', 'SHIP-1', '']
+  for (const rows of [[valid, [1, '只换箱唛', 'BOX-2', '', '', 1, 'FBA-2', 'SHIP-2', '']], [[...valid.slice(0, 4), '', ...valid.slice(5)]], [[...valid.slice(0, 5), 0, ...valid.slice(6)]], [valid, valid], [[999, ...valid.slice(1)]], [valid, [1, 'SKU 和箱唛都换', 'BOX-1', 'OTHER', 'NEW2', 1, 'FBA-OTHER', 'SHIP-1', '']]]) {
+    const state = harness()
+    await state.upload(rows)
+    assert.equal(state.errors.length, 1)
+    assert.equal(state.importedRelabelBindings.value.length, 0)
+  }
+})

src/modules/overseas-warehouse/views/warehouseDisposalForm.test.mjs

@@ -1,8 +1,39 @@
 import assert from 'node:assert/strict'
 import { readFileSync } from 'node:fs'
 import test from 'node:test'
+import { createRequire } from 'node:module'
+import ts from 'typescript'
 
 const view = readFileSync(new URL('./WarehouseServiceView.vue', import.meta.url), 'utf8')
+const { default: Schema } = createRequire(import.meta.resolve('element-plus'))('async-validator')
+
+test('新增废弃逐字段校验仓库、来源单和原因，备注不影响提交资格', async () => {
+  const source = view.slice(view.indexOf('const disposalFormRules:'), view.indexOf('const labelingFormRef ='))
+  const code = ts.transpileModule(source, { compilerOptions: { target: ts.ScriptTarget.ES2022 } }).outputText
+  const rules = new Function(code + '\nreturn disposalFormRules')()
+  const validator = new Schema(rules)
+  await assert.rejects(validator.validate({ warehouse: '', sourceOrder: '', reason: '' }), error => {
+    assert.deepEqual(Object.keys(error.fields).sort(), ['reason', 'sourceOrder', 'warehouse'])
+    return true
+  })
+  const form = { warehouse: 'WH-A', sourceOrder: 'document:IN-A', reason: '其他', remark: '' }
+  await validator.validate(form)
+  await assert.rejects(validator.validate({ ...form, sourceOrder: '' }), error => Boolean(error.fields.sourceOrder))
+  await assert.rejects(validator.validate({ ...form, reason: ' ' }), error => Boolean(error.fields.reason))
+})
+
+test('新增废弃校验失败不进入库存提交判断，其他页面不调用废弃表单校验', async () => {
+  const guard = view.match(/  if \(isDisposalCreate\.value && !await labelingFormRef[^\n]+/)[0]
+  let validations = 0
+  const submit = new Function('isDisposalCreate', 'labelingFormRef', 'return async () => {' + guard + '\nreturn "continue"\n}')
+  const formRef = { value: { validate: async () => { validations++; throw new Error('required') } } }
+  assert.equal(await submit({ value: true }, formRef)(), undefined)
+  assert.equal(validations, 1)
+  assert.equal(await submit({ value: false }, formRef)(), 'continue')
+  assert.equal(validations, 1)
+  formRef.value.validate = async () => true
+  assert.equal(await submit({ value: true }, formRef)(), 'continue')
+})
 
 test('货物废弃先选择海外操作仓，再加载并选择该仓入库单', () => {
   assert.match(view, /props\.service === 'disposal'.*操作仓.*v-model="form\.warehouse".*@change="selectDiscardWarehouse"/s)
@@ -11,13 +42,19 @@ test('货物废弃先选择海外操作仓，再加载并选择该仓入库单',
   assert.match(view, /\|\| !primaryWarehouse \|\| invalidCargo/)
 })
 
+test('无箱唛按数量废弃时备注必填，选择箱唛废弃时备注可选', () => {
+  assert.match(view, /props\.service === 'disposal' && discardQuantityMode\.value && !form\.remark\.trim\(\)/)
+  assert.match(view, /请填写废弃备注/)
+  assert.match(view, /props\.service === 'disposal' && discardQuantityMode \? '备注 \*' : '备注'/)
+})
+
 
 test('废弃来源包含通用仓位，选择后带出全部库存且不把选择键提交为订单ID', () => {
   const body = view.match(/function selectDiscardInbound\(orderId: string\) \{([\s\S]*?)\n\}/)[1]
-  const select = new Function('discardSelectedBoxKeys', 'discardBoxSearch', 'selectAllDiscardBoxes', 'discardDocuments', 'cargoRows', 'form', 'cargoSequence', 'orderId', body)
+  const select = new Function('discardRequestedPackages', 'discardSelectedBoxKeys', 'discardBoxSearch', 'selectAllDiscardBoxes', 'discardDocuments', 'cargoRows', 'form', 'cargoSequence', 'orderId', body)
   const cargoRows = { value: [] }; const form = {}
   const source = { orderId: 'inventory:42', sourceType: 'INVENTORY', inventoryPositionId: '42', overseasWarehouseId: '99', inboundCode: 'WT-1', skus: [{ skuCode: 'A', productName: '商品', availablePackages: 100 }] }
-  select({ value: [] }, { value: '' }, () => {}, { value: [{ ...source, orderId: 'document:WT-1', sources: [source] }] }, cargoRows, form, 0, 'document:WT-1')
+  select({ value: 9 }, { value: [] }, { value: '' }, () => {}, { value: [{ ...source, orderId: 'document:WT-1', sources: [source] }] }, cargoRows, form, 0, 'document:WT-1')
   assert.equal(cargoRows.value[0].quantity, 100)
   assert.equal(cargoRows.value[0].sourceInventoryPositionId, '42')
   assert.equal(form.inboundNo, 'WT-1')

src/modules/overseas-warehouse/views/warehouseTransferForm.test.mjs

@@ -69,7 +69,7 @@ test('仓储转运换标整票只允许一个目的仓', () => {
   assert.match(view, /props\.service === 'transfer' \? '客户箱唛号' : '仓库唛头'/)
   assert.match(view, /已导入 \$\{importedRows\.length\} 条仓储转运换标明细/)
   assert.doesNotMatch(transferRelabelSection, /新 FBA 箱唛<\/th><th>FBA 目的仓<\/th>/)
-  assert.match(view, /const includeDestination = false/)
+  assert.doesNotMatch(view.slice(view.indexOf('function downloadRelabelTemplate'), view.indexOf('function parseCsvLine')), /FBA目的仓/)
 })
 
 test('仓储转运不要求客户填写内部入仓号和我方箱唛，但换标时填写客户箱唛', () => {
@@ -81,9 +81,7 @@ test('仓储转运不要求客户填写内部入仓号和我方箱唛，但换
   assert.match(view, /仓库唛头 \*/)
   assert.match(view, /downloadTransferCartonMarkTemplate/)
   assert.match(view, /importTransferCartonMarks/)
-  assert.match(view, /<strong>SKU 关联<\/strong>/)
-  assert.match(view, /<strong>箱号关联<\/strong>/)
-  assert.match(view, /<strong>SKU 混箱<\/strong>/)
+  assert.match(view, /<strong>统一贴标明细<\/strong>/)
   assert.match(view, />下载模板<\/el-button>/)
   assert.match(view, />上传文件<\/el-button>/)
   assert.match(view, /换标类型/)
@@ -268,7 +266,7 @@ test('PDA 打托完成后客户可从列表或详情确认并查看实测数据'
   assert.match(view, /item\.__status === 'WAIT_CUSTOMER_CONFIRMATION'/)
   assert.match(view, /confirmTransferFromList\(item\['0'\]\)/)
   assert.match(view, /selectedDetail\?\.status === 'WAIT_CUSTOMER_CONFIRMATION'/)
-  assert.match(view, /PDA 打托实测数据/)
+  assert.match(view, /托盘实测数据/)
   for (const label of ['托盘号', '库位', '箱数', 'SKU 汇总', '毛重(kg)', '体积(m³)', '完成时间']) assert.equal(view.includes(label), true)
   assert.match(view, /pallet\.warehouseLocationCode/)
   assert.match(view, /palletCartons\(pallet\)\.length/)
@@ -281,7 +279,7 @@ test('仓储转运详情按订单概览、货物预报、PDA 实测数据排序
   const detailStart = view.indexOf('<header class="warehouse-detail-header">')
   const detailSource = view.slice(detailStart)
   const overviewIndex = detailSource.indexOf('<h3>订单概览</h3>')
-  const measurementIndex = detailSource.indexOf('<h3>PDA 打托实测数据</h3>')
+  const measurementIndex = detailSource.indexOf('<h3>托盘实测数据</h3>')
   const cargoIndex = detailSource.indexOf('<h3>预报与实际签收</h3>')
   assert.ok(overviewIndex >= 0 && overviewIndex < measurementIndex)
   assert.ok(cargoIndex < measurementIndex)
@@ -297,7 +295,7 @@ test('仓储转运详情自动加载 PDA 测量照片并释放 Blob URL', () =>
   assert.match(view, /measurementPhotos\?: TransferMeasurementPhoto\[\]/)
   assert.match(view, /fileId: string \| number/)
   assert.match(view, /if \(props\.service === 'transfer'\) void loadMeasurementPhotos\(\)/)
-  assert.match(view, /测量打托现场照片/)
+  assert.match(view, /v-if="selectedDetail\?\.measurementPhotos\?\.length" class="warehouse-evidence warehouse-measurement-evidence"/)
   assert.match(view, /:preview-src-list="measurementPhotoPreviewUrls"/)
   assert.match(view, /加载失败，点击重试/)
   assert.match(view, /URL\.createObjectURL\(blob\)/)
@@ -324,7 +322,8 @@ test('仓储转运可在新建页直接提交，也可保存草稿后编辑提
   assert.match(view, /v-if="props\.service === 'transfer'"[^>]*type="primary"[^>]*native-type="submit"[^>]*>提交订单/)
   assert.match(view, /await updateTransfer\(editingTransferNo\.value, payload\)/)
   assert.match(view, /await submitTransfer\(transferNo\)/)
-  assert.match(view, /<form [^>]*@submit\.prevent="submit\('submit'\)"/)
+  assert.match(view, /const isLabelingCreate = computed\(\(\) => props.service === 'labeling' && mode.value === 'create'\)/)
+  assert.match(view, /<component :is="isServiceCreate \? ElForm : 'form'"[^>]*@submit\.prevent="submit\('submit'\)"/)
   assert.match(view, /selectedDetail\?\.status !== 'DRAFT'[^>]*[\s\S]*?printTransferCartons[^>]*[\s\S]*?打印预报箱唛/)
   assert.doesNotMatch(view, /row\.__status !== 'DRAFT'.*printTransferCartons\(row\['0'\]\)/s)
   assert.doesNotMatch(view, /selectedDetail\?\.status === 'DRAFT'[^>]*[\s\S]*?>提交订单/)
@@ -386,7 +385,7 @@ test('转运客户详情保留预报并显示实际签收箱内明细和托盘
   const receiptSection = view.slice(view.indexOf('warehouse-transfer-received-card', view.indexOf('<header class="warehouse-detail-header">')), view.indexOf('v-if="props.service === \'transfer\' && selectedDetail?.needRelabel"'))
   assert.doesNotMatch(receiptSection.split('<el-dialog')[0], /<table|<el-table|<el-collapse/)
 
-  assert.match(view, /暂无实际签收箱，等待 PDA 清点/)
+  assert.match(view, /暂无签收箱号/)
   assert.doesNotMatch(view, /<td>\{\{ \[pallet.lengthCm/)
 })
 
@@ -395,7 +394,7 @@ test('预报实收同区对照、托盘卡片换行、签收按钮紧邻标题',
   const start = view.indexOf('class="warehouse-card warehouse-form-section warehouse-transfer-cargo-card"', view.indexOf('<header class="warehouse-detail-header">'))
   const section = view.slice(start, view.indexOf('warehouse-transfer-received-card', start))
   assert.ok(section.includes('预报与实际签收'))
-  assert.ok(section.includes('PDA 打托实测数据'))
+  assert.ok(section.includes('托盘实测数据'))
   assert.ok(section.includes('receivedItemQuantity(item.id)'))
   assert.ok(section.includes('receivedItemCartons(item.id).length'))
   assert.ok(section.includes('class="warehouse-transfer-pallet-card"'))

src/modules/tenant-management/AGENTS.md

@@ -10,14 +10,15 @@
 
 | 目标 | 页面/路由 | API 与后端 |
 |---|---|---|
-| 企业资料、资质上传与状态 | `views/CompanyProfileView.vue`、`utils/qualificationFile.ts`、`utils/qualificationStatus.ts`；`company/profile` | `api/merchantIam.ts`；`iam/`、`file/` |
-| 企业成员管理 | `views/MembersView.vue`；`organization/members` | 页面经 `store/tenantAdministration.ts` → `api/merchantIam.ts`；`iam/`、`auth/` |
+| 企业资料、资质上传与状态 | `views/CompanyProfileView.vue`；编辑为 `views/CompanyProfileEditView.vue`、`company/profile/edit`；文件工具为 `utils/qualificationFile.ts`、`utils/qualificationStatus.ts` | `api/merchantIam.ts`；`iam/`、`file/` |
+| 企业成员管理 | 列表 `views/MembersView.vue`、`organization/members`；新增/编辑 `views/MemberEditorView.vue`、`organization/members/create`、`organization/members/:memberId/edit` | 页面经 `store/tenantAdministration.ts` → `api/merchantIam.ts`；`iam/`、`auth/` |
 | 企业角色 | `views/RolesView.vue`；`organization/roles` | 页面经 `store/tenantAdministration.ts` → `api/merchantIam.ts`；`iam/` |
 | 角色权限分配 | `views/PermissionsView.vue`；`organization/permissions` | 页面经 `store/tenantAdministration.ts` → `api/merchantIam.ts`；权限码常量见 `contracts.ts` |
 | 跨页状态与稳定契约 | `store/tenantAdministration.ts`、`contracts.ts`、`public.ts` | 服务端 DTO |
 
 ## 关键边界
 
+- 企业资料编辑、成员新增/编辑使用独立路由页面；角色新增/编辑使用居中弹框；权限分配保持独立页面。资质上传、文件预览、密码重置沿用专项弹框。当前承载依据见 [Client 界面样式规范](../../../../../docs/Client界面样式规范.md) 的“企业设置承载方式”。
 - 企业资料只修改 `contactPhone` 等企业联系信息，不提交或回填成员登录手机号；两者独立维护。
 - 成员登录手机号可选；修改时由 IAM/Auth 同步并撤销该账号现有会话，前端不互相回填或联动提交。
 - 审核必填资质仅营业执照与统一社会信用代码；法人身份证选填，可在已有营业执照后单独补传或替换。

src/modules/tenant-management/routes.ts

@@ -5,6 +5,21 @@ export const tenantManagementModule = {
   key: 'company',
   navigationGroup: { title: '企业管理', icon: Settings, dividerBefore: true },
   routes: [
+    {
+      path: 'company/profile/edit', name: 'company-profile-edit',
+      component: () => import('./views/CompanyProfileEditView.vue'), release: 'active',
+      meta: { title: '编辑企业资料', permission: 'company:profile:edit', keepAlive: false },
+    },
+    {
+      path: 'organization/members/create', name: 'member-create',
+      component: () => import('./views/MemberEditorView.vue'), release: 'active',
+      meta: { title: '新增成员', permission: 'company:member:create', keepAlive: false },
+    },
+    {
+      path: 'organization/members/:memberId/edit', name: 'member-edit', props: true,
+      component: () => import('./views/MemberEditorView.vue'), release: 'active',
+      meta: { title: '编辑成员', permission: 'company:member:edit', keepAlive: false },
+    },
     {
       path: 'company/profile',
       name: 'company-profile',

src/modules/tenant-management/views/CompanyProfileEditView.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { useTenantAdministrationStore, type TenantCompanyProfile } from '../store/tenantAdministration'
+import { useAuthStore } from '@/modules/auth/public'
+
+const store = useTenantAdministrationStore()
+const auth = useAuthStore()
+const router = useRouter()
+const loading = ref(false)
+const loadError = ref('')
+const profileSubmitting = ref(false)
+const profileFormRef = ref<FormInstance>()
+const draft = reactive<TenantCompanyProfile>({ ...store.company })
+const canEdit = computed(() => auth.hasPermission('company:profile:edit') && store.company.auditStatus !== 'ARCHIVED')
+const profileFormRules: FormRules<TenantCompanyProfile> = {
+  companyName: [{ required: true, whitespace: true, message: '请输入公司名称', trigger: 'blur' }],
+  legalRepresentative: [{ required: true, whitespace: true, message: '请输入法人姓名', trigger: 'blur' }],
+  contactName: [{ required: true, whitespace: true, message: '请输入联系人姓名', trigger: 'blur' }],
+  contactPhone: [
+    { required: true, whitespace: true, message: '请输入公司联系电话', trigger: 'blur' },
+    { pattern: /^[0-9-]{4,32}$/, message: '公司联系电话仅支持 4–32 位数字或连字符', trigger: 'blur' },
+  ],
+  contactEmail: [{ type: 'email', message: '请输入正确的联系邮箱', trigger: 'blur' }],
+}
+async function loadCompanyContext() {
+  loading.value = true
+  loadError.value = ''
+  try {
+    await store.loadCompanyContext()
+    Object.assign(draft, store.company)
+    profileFormRef.value?.clearValidate()
+  } catch (error) { loadError.value = error instanceof Error ? error.message : '企业资料加载失败' }
+  finally { loading.value = false }
+}
+onMounted(() => void loadCompanyContext())
+function returnToProfile() { void router.push({ name: 'company-profile' }) }
+async function saveProfile() {
+  if (profileSubmitting.value || loading.value || loadError.value || !canEdit.value) return
+  const valid = await profileFormRef.value?.validate().then(() => true).catch(() => false)
+  if (!valid) return
+  profileSubmitting.value = true
+  try {
+    await store.updateCompany({ ...draft })
+    ElMessage.success('企业资料已保存')
+    await router.push({ name: 'company-profile' })
+  } catch (error) { ElMessage.error(error instanceof Error ? error.message : '企业资料保存失败') }
+  finally { profileSubmitting.value = false }
+}
+</script>
+
+<template>
+  <section v-loading="loading" class="company-editor client-ui" :aria-busy="loading">
+    <header class="company-editor-heading"><h2>编辑企业资料</h2><el-button :disabled="profileSubmitting" @click="returnToProfile">返回企业资料</el-button></header>
+    <el-alert v-if="loadError" type="error" :closable="false" :title="loadError"><el-button @click="loadCompanyContext">重新加载</el-button></el-alert>
+    <el-alert v-else-if="!loading && !canEdit" title="当前企业资料不可编辑" type="warning" :closable="false" />
+    <el-form v-else ref="profileFormRef" :model="draft" :rules="profileFormRules" label-position="top" :disabled="loading || profileSubmitting || !canEdit" scroll-to-error @submit.prevent="saveProfile">
+      <section class="company-editor-section">
+        <h3>企业基本信息</h3>
+        <div class="company-editor-grid">
+          <el-form-item label="公司名称" prop="companyName" required><el-input v-model="draft.companyName" placeholder="请输入公司名称" /></el-form-item>
+          <el-form-item label="统一社会信用代码"><el-input v-model="draft.creditCode" disabled placeholder="未登记" /></el-form-item>
+          <el-form-item label="法人姓名" prop="legalRepresentative" required><el-input v-model="draft.legalRepresentative" placeholder="请输入法定代表人姓名" /></el-form-item>
+        </div>
+      </section>
+      <section class="company-editor-section">
+        <h3>联系信息</h3>
+        <div class="company-editor-grid">
+          <el-form-item label="联系人" prop="contactName" required><el-input v-model="draft.contactName" placeholder="请输入联系人姓名" /></el-form-item>
+          <el-form-item label="公司联系电话" prop="contactPhone" required><el-input v-model="draft.contactPhone" maxlength="32" inputmode="tel" placeholder="请输入公司联系电话" /><small class="company-editor-help">仅用于公司业务联系，不会修改任何成员的登录手机号。</small></el-form-item>
+          <el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="draft.contactEmail" placeholder="请输入联系邮箱（选填）" /></el-form-item>
+        </div>
+      </section>
+      <footer class="company-editor-actions"><el-button :disabled="profileSubmitting" @click="returnToProfile">返回企业资料</el-button><el-button v-if="canEdit" type="primary" native-type="submit" :loading="profileSubmitting">保存修改</el-button></footer>
+    </el-form>
+  </section>
+</template>
+
+<style scoped src="./companyEditor.css"></style>

src/modules/tenant-management/views/CompanyProfileView.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { FormInstance, FormRules, UploadFile } from 'element-plus'
+import type { UploadFile } from 'element-plus'
 import { Building2, CheckCircle2, Clock3, FileCheck2, FileText, Pencil, Trash2, Upload, UserRound } from '@lucide/vue'
 import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
-import { useTenantAdministrationStore, type TenantCompanyProfile, type TenantQualification } from '@/modules/tenant-management/store/tenantAdministration'
+import { useTenantAdministrationStore, type TenantQualification } from '@/modules/tenant-management/store/tenantAdministration'
 import { useAuthStore } from '@/modules/auth/public'
 import { formatQualificationFileSize, qualificationUploadErrorMessage, validateQualificationFile } from '@/modules/tenant-management/utils/qualificationFile'
 import { qualificationStatusMeta } from '@/modules/tenant-management/utils/qualificationStatus'
@@ -20,6 +20,7 @@ import {
 const store = useTenantAdministrationStore()
 const auth = useAuthStore()
 const route = useRoute()
+const router = useRouter()
 const companyApproved = computed(() => store.company.auditStatus === 'ACTIVE')
 const auditStatusCopy = computed(() => ({
   PROFILE_REQUIRED: { title: '请完善企业资质', detail: '上传营业执照并提交审核后，才能提交头程订单；法人身份证可按需补充。' },
@@ -30,7 +31,6 @@ const auditStatusCopy = computed(() => ({
   ARCHIVED: { title: '企业已归档', detail: '该企业已结束使用，资料和历史业务仅供查看，不能再提交或修改。' },
 })[store.company.auditStatus])
 const activeTab = ref('basic')
-const editing = ref(false)
 const qualificationOpen = ref(false)
 const previewOpen = ref(false)
 const previewRecord = ref<TenantQualification | null>(null)
@@ -38,16 +38,13 @@ const previewUrl = ref('')
 const previewKind = ref<'image' | 'pdf'>('image')
 const previewError = ref('')
 const previewLoading = ref(false)
-const profileFormRef = ref<FormInstance>()
 const qualificationPage = ref(1)
 const qualificationPageSize = ref(10)
 const qualificationSubmitting = ref(false)
 const reviewSubmitting = ref(false)
 const deletingQualificationId = ref('')
-const profileSubmitting = ref(false)
 const loading = ref(false)
 const loadError = ref('')
-const draft = reactive<TenantCompanyProfile>({ ...store.company })
 type QualificationUploadState = 'idle' | 'uploading' | 'uploaded' | 'error'
 type QualificationTypeDefinition = { value: MerchantQualificationType; label: string; description: string; required: boolean }
 type QualificationDraftItem = QualificationTypeDefinition & {
@@ -146,16 +143,6 @@ const qualificationReviewDisabledReason = computed(() => {
 const qualificationPanelHint = computed(() => canUploadQualification.value
   ? '营业执照为必填；法人身份证、货代资质证书、银行开户许可证可选填。文件保存后需另行提交审核。'
   : qualificationUploadDisabledReason.value)
-const profileFormRules: FormRules<TenantCompanyProfile> = {
-  companyName: [{ required: true, whitespace: true, message: '请输入公司名称', trigger: 'blur' }],
-  legalRepresentative: [{ required: true, whitespace: true, message: '请输入法人姓名', trigger: 'blur' }],
-  contactName: [{ required: true, whitespace: true, message: '请输入联系人姓名', trigger: 'blur' }],
-  contactPhone: [
-    { required: true, whitespace: true, message: '请输入公司联系电话', trigger: 'blur' },
-    { pattern: /^[0-9-]{4,32}$/, message: '公司联系电话仅支持 4–32 位数字或连字符', trigger: 'blur' },
-  ],
-  contactEmail: [{ type: 'email', message: '请输入正确的联系邮箱', trigger: 'blur' }],
-}
 const qualificationColumns: DataTableColumn[] = [
   { key: 'actions', label: '操作', width: 132, fixed: 'left', slotName: 'actions' },
   { key: 'type', prop: 'type', label: '文件类型', minWidth: 150 },
@@ -173,7 +160,6 @@ async function refreshCompanyContext() {
   loadError.value = ''
   try {
     await store.loadCompanyContext()
-    Object.assign(draft, store.company)
     return true
   } catch (error) {
     loadError.value = error instanceof Error ? error.message : '企业资料加载失败'
@@ -197,35 +183,9 @@ onMounted(async () => {
 onBeforeUnmount(() => qualificationDrafts.forEach(releaseQualificationPreview))
 
 function startEdit() {
-  if (store.company.auditStatus === 'ARCHIVED') return
-  Object.assign(draft, store.company)
-  profileFormRef.value?.clearValidate()
-  editing.value = true
+  if (!auth.hasPermission('company:profile:edit') || store.company.auditStatus === 'ARCHIVED') return
+  void router.push({ name: 'company-profile-edit' })
 }
-
-function cancelEdit() {
-  Object.assign(draft, store.company)
-  editing.value = false
-  profileFormRef.value?.clearValidate()
-}
-
-async function saveProfile() {
-  if (profileSubmitting.value) return
-  const valid = await profileFormRef.value?.validate().then(() => true).catch(() => false)
-  if (!valid) return
-  profileSubmitting.value = true
-  try {
-    await store.updateCompany({ ...draft })
-    Object.assign(draft, store.company)
-    editing.value = false
-    ElMessage.success('企业资料已保存')
-  } catch (error) {
-    ElMessage.error(error instanceof Error ? error.message : '企业资料保存失败')
-  } finally {
-    profileSubmitting.value = false
-  }
-}
-
 function openQualificationDialog() {
   if (!canUploadQualification.value) {
     ElMessage.warning(qualificationUploadDisabledReason.value)
@@ -619,23 +579,7 @@ function closeQualificationPreview() {
       </el-tab-pane>
     </el-tabs>
 
-    <el-drawer v-model="editing" title="编辑企业资料" size="min(620px, 94vw)" @closed="cancelEdit">
-      <el-form ref="profileFormRef" :model="draft" :rules="profileFormRules" label-position="top" class="profile-form">
-        <h3>企业基本信息</h3>
-        <div class="form-grid-two">
-          <el-form-item label="公司名称" prop="companyName" required><el-input v-model="draft.companyName" placeholder="请输入公司名称" /></el-form-item>
-          <el-form-item label="统一社会信用代码"><el-input v-model="draft.creditCode" disabled /></el-form-item>
-          <el-form-item label="法人姓名" prop="legalRepresentative" required><el-input v-model="draft.legalRepresentative" placeholder="请输入法定代表人姓名" /></el-form-item>
-        </div>
-        <h3>联系信息</h3>
-        <div class="form-grid-two">
-          <el-form-item label="联系人" prop="contactName" required><el-input v-model="draft.contactName" placeholder="请输入联系人姓名" /></el-form-item>
-          <el-form-item label="公司联系电话" prop="contactPhone" required><el-input v-model="draft.contactPhone" maxlength="32" inputmode="tel" placeholder="请输入公司联系电话" /><small class="profile-field-hint">仅用于公司业务联系，不会修改任何成员的登录手机号。</small></el-form-item>
-          <el-form-item label="联系邮箱" prop="contactEmail"><el-input v-model="draft.contactEmail" placeholder="请输入联系邮箱（选填）" /></el-form-item>
-        </div>
-      </el-form>
-      <template #footer><div class="drawer-actions"><el-button :disabled="profileSubmitting" @click="cancelEdit">取消</el-button><el-button type="primary" :loading="profileSubmitting" @click="saveProfile">保存修改</el-button></div></template>
-    </el-drawer>
+
 
     <el-dialog
       v-model="qualificationOpen"
@@ -741,12 +685,6 @@ function closeQualificationPreview() {
 .qualification-panel-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
 .qualification-update-control { display: inline-flex; }
 .mobile-qualification-list { display: none; }
-.profile-form h3 { margin: 4px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border); font-size: 15px; }
-.profile-form h3:not(:first-child) { margin-top: 22px; }
-.profile-field-hint { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
-.form-grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
-.form-grid-two .full-row { grid-column: 1 / -1; }
-.drawer-actions { display: flex; justify-content: flex-end; gap: 8px; }
 .mobile-qualification-actions { display: flex; align-items: center; gap: 8px; }
 .qualification-dialog-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 13px 15px; background: #f4f7f7; }
 .qualification-dialog-intro strong { color: var(--navy); font-size: 13px; }
@@ -784,7 +722,7 @@ function closeQualificationPreview() {
 .document-preview > span { max-width: 440px; padding: 0 16px; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; }
 .document-preview-error { max-width: 440px; margin: 0; padding: 0 16px; color: #9a5a09; font-size: 11px; line-height: 1.6; text-align: center; }
 @media (max-width: 720px) {
-  .profile-grid, .form-grid-two { grid-template-columns: 1fr; }
+  .profile-grid { grid-template-columns: 1fr; }
   .qualification-dialog-intro { flex-direction: column; gap: 5px; }
   .qualification-dialog-intro span { text-align: left; }
   .qualification-upload-grid { grid-template-columns: 1fr; }

src/modules/tenant-management/views/EditorPages.test.mjs

@@ -0,0 +1,170 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import test from 'node:test'
+import ts from 'typescript'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import { computed } from 'vue'
+
+const memberSource = readFileSync(new URL('./MemberEditorView.vue', import.meta.url), 'utf8')
+const profileSource = readFileSync(new URL('./CompanyProfileEditView.vue', import.meta.url), 'utf8')
+const listSource = readFileSync(new URL('./MembersView.vue', import.meta.url), 'utf8')
+const rolesSource = readFileSync(new URL('./RolesView.vue', import.meta.url), 'utf8')
+const transpile = source => ts.transpileModule(source, { compilerOptions: { target: ts.ScriptTarget.ES2022 } }).outputText
+const compile = (source, bindings, result) => new Function(...Object.keys(bindings), transpile(source) + `\nreturn ${result}`)(...Object.values(bindings))
+
+test('editor routes use their write permissions, have no sidebar entries, and preserve member IDs on refresh', () => {
+  const source = readFileSync(new URL('../routes.ts', import.meta.url), 'utf8').replace(/^import .*$/gm, '').replace('export const', 'const')
+  const module = compile(source, { Building2: {}, KeyRound: {}, Settings: {}, ShieldCheck: {}, Users: {} }, 'tenantManagementModule')
+  const routes = module.routes.map(({ component, ...route }) => ({ ...route, component: {} }))
+  const router = createRouter({ history: createMemoryHistory(), routes: routes.map(route => ({ ...route, path: '/' + route.path })) })
+  for (const [name, path, permission] of [
+    ['member-create', '/organization/members/create', 'company:member:create'],
+    ['member-edit', '/organization/members/1234567890123456789/edit', 'company:member:edit'],
+    ['company-profile-edit', '/company/profile/edit', 'company:profile:edit'],
+  ]) {
+    const resolved = router.resolve(path)
+    assert.equal(resolved.name, name)
+    assert.equal(resolved.meta.permission, permission)
+    assert.equal(resolved.meta.keepAlive, false)
+    assert.equal(module.routes.find(route => route.name === name).navigation, undefined)
+  }
+  assert.equal(router.resolve('/organization/members/1234567890123456789/edit').params.memberId, '1234567890123456789')
+  assert.doesNotMatch(listSource, /<el-drawer/)
+  assert.match(listSource, /name: 'member-edit', params: \{ memberId: member.id \}/)
+  assert.match(rolesSource, /<el-dialog v-model="editorOpen"/)
+  assert.doesNotMatch(rolesSource, /<el-drawer/)
+})
+
+function memberLoader(id = '') {
+  const context = {
+    editingId: { value: id }, loading: { value: false }, loadError: { value: '' },
+    form: { password: 'old-input', roleIds: [] }, formRef: { value: { clearValidate() {} } },
+    store: { members: [], async loadRoles() {}, async loadMembers() {} },
+  }
+  const source = memberSource.slice(memberSource.indexOf('let loadVersion ='), memberSource.indexOf('onMounted('))
+  return { ...context, load: compile(source, context, 'loadEditor') }
+}
+
+test('direct member edit loads current fields and roles; unknown or failed records do not leave an editable blank form', async () => {
+  const state = memberLoader('member-a')
+  state.store.loadMembers = async () => { state.store.members = [{ id: 'member-a', name: '成员甲', account: 'member.a', phone: '', email: '', roleIds: ['role-a'] }] }
+  await state.load()
+  assert.equal(state.form.name, '成员甲')
+  assert.deepEqual(state.form.roleIds, ['role-a'])
+  assert.equal(state.form.password, '')
+  state.form.roleIds.push('role-b')
+  assert.deepEqual(state.store.members[0].roleIds, ['role-a'])
+  state.editingId.value = 'missing'
+  await state.load()
+  assert.match(state.loadError.value, /不存在或已不可访问/)
+  assert.equal(state.form.name, '')
+  state.store.loadMembers = async () => { throw new Error('查询失败') }
+  await state.load()
+  assert.equal(state.loadError.value, '查询失败')
+  assert.equal(state.loading.value, false)
+})
+
+test('a late previous member request cannot overwrite the newly selected member', async () => {
+  const state = memberLoader('member-a')
+  const resolves = []
+  state.store.loadRoles = () => new Promise(resolve => resolves.push(resolve))
+  state.store.members = [
+    { id: 'member-a', name: '甲', account: 'member.a', phone: '', email: '', roleIds: [] },
+    { id: 'member-b', name: '乙', account: 'member.b', phone: '', email: '', roleIds: [] },
+  ]
+  const previous = state.load()
+  state.editingId.value = 'member-b'
+  const current = state.load()
+  resolves[1]()
+  await current
+  assert.equal(state.form.name, '乙')
+  resolves[0]()
+  await previous
+  assert.equal(state.form.name, '乙')
+})
+
+function memberSaver(editing = false) {
+  const requests = [], routes = [], errors = []
+  const context = {
+    editingId: { value: editing ? 'member-a' : '' }, saving: { value: false }, loading: { value: false }, loadError: { value: '' }, canSave: { value: true },
+    form: { name: ' 成员 ', account: 'member.a', password: 'Test1234', phone: '', email: '', roleIds: ['role-a'] },
+    formRef: { value: { async validate() { return true }, async validateField() { return true } } },
+    store: { async createMember(payload) { requests.push({ kind: 'create', payload }) }, async updateMember(id, payload) { requests.push({ kind: 'edit', id, payload }) } },
+    router: { async push(route) { routes.push(route) } }, ElMessage: { success() {}, error(message) { errors.push(message) } },
+  }
+  const source = memberSource.slice(memberSource.indexOf('async function saveMember()'), memberSource.indexOf('</script>'))
+  return { ...context, requests, routes, errors, save: compile(source, context, 'saveMember') }
+}
+
+test('member create and edit retain distinct payloads and return to the list only after success', async () => {
+  const create = memberSaver()
+  await create.save()
+  assert.equal(create.requests[0].kind, 'create')
+  assert.equal(create.requests[0].payload.password, 'Test1234')
+  assert.equal(create.form.password, '')
+  assert.deepEqual(create.routes, [{ name: 'members' }])
+  const edit = memberSaver(true)
+  await edit.save()
+  assert.equal(edit.requests[0].kind, 'edit')
+  assert.equal(edit.requests[0].id, 'member-a')
+  assert.equal(edit.requests[0].payload.password, undefined)
+  assert.deepEqual(edit.requests[0].payload.roleIds, ['role-a'])
+})
+
+test('member permission, loading and invalid forms block writes; save failure keeps input for retry', async () => {
+  for (const field of ['saving', 'loading', 'loadError', 'canSave']) {
+    const state = memberSaver()
+    state[field].value = field === 'canSave' ? false : true
+    await state.save()
+    assert.equal(state.requests.length, 0)
+  }
+  const invalid = memberSaver()
+  invalid.formRef.value.validate = async () => { throw new Error('invalid') }
+  await invalid.save()
+  assert.equal(invalid.requests.length, 0)
+  const failed = memberSaver()
+  failed.store.createMember = async () => { throw new Error('创建失败') }
+  await failed.save()
+  assert.deepEqual(failed.errors, ['创建失败'])
+  assert.deepEqual(failed.routes, [])
+  assert.equal(failed.form.password, 'Test1234')
+  assert.equal(failed.saving.value, false)
+})
+
+test('member validation still requires create password, valid login phone, email and at least one role', async () => {
+  const { default: Schema } = createRequire(import.meta.resolve('element-plus'))('async-validator')
+  const source = memberSource.slice(memberSource.indexOf('const memberRules:'), memberSource.indexOf('let loadVersion'))
+  const rules = compile(source, {}, 'memberRules')
+  const validator = new Schema(rules)
+  const valid = { name: '成员', account: 'member.a', password: 'Test1234', phone: '', email: '', roleIds: ['role-a'] }
+  await validator.validate(valid)
+  for (const patch of [{ password: '' }, { phone: '123' }, { email: 'bad-email' }, { roleIds: [] }, { name: ' ' }]) {
+    await assert.rejects(validator.validate({ ...valid, ...patch }))
+  }
+})
+
+test('archived company blocks direct editing, and failed company saves preserve contact data', async () => {
+  const expression = profileSource.match(/^const canEdit = .*$/m)[0]
+  const store = { company: { auditStatus: 'ARCHIVED' }, async updateCompany() { throw new Error('保存失败') } }
+  const canEdit = compile(expression, { computed, auth: { hasPermission: () => true }, store }, 'canEdit')
+  assert.equal(canEdit.value, false)
+  const errors = [], routes = []
+  const context = {
+    profileSubmitting: { value: false }, loading: { value: false }, loadError: { value: '' }, canEdit: { value: false },
+    profileFormRef: { value: { async validate() { return true } } }, draft: { companyName: '企业', contactPhone: '010-12345678' }, store,
+    ElMessage: { success() {}, error(message) { errors.push(message) } }, router: { async push(route) { routes.push(route) } },
+  }
+  const source = profileSource.slice(profileSource.indexOf('async function saveProfile()'), profileSource.indexOf('</script>'))
+  const save = compile(source, context, 'saveProfile')
+  await save()
+  assert.deepEqual(errors, [])
+  context.canEdit.value = true
+  await save()
+  assert.deepEqual(errors, ['保存失败'])
+  assert.equal(context.draft.contactPhone, '010-12345678')
+  assert.deepEqual(routes, [])
+  store.updateCompany = async payload => { assert.equal(payload.contactPhone, '010-12345678'); assert.equal(payload.phone, undefined) }
+  await save()
+  assert.deepEqual(routes, [{ name: 'company-profile' }])
+})

src/modules/tenant-management/views/MemberEditorView.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { useTenantAdministrationStore } from '../store/tenantAdministration'
+import { useAuthStore } from '@/modules/auth/public'
+
+const props = withDefaults(defineProps<{ memberId?: string }>(), { memberId: '' })
+const router = useRouter()
+const store = useTenantAdministrationStore()
+const auth = useAuthStore()
+const editingId = computed(() => props.memberId)
+const title = computed(() => editingId.value ? '编辑成员' : '新增成员')
+const canGrantMemberRole = computed(() => auth.hasPermission('company:member:grant-role'))
+const canSave = computed(() => auth.hasPermission(editingId.value ? 'company:member:edit' : 'company:member:create'))
+const loading = ref(false)
+const loadError = ref('')
+const saving = ref(false)
+const formRef = ref<FormInstance>()
+const form = reactive({ name: '', account: '', password: '', phone: '', email: '', roleIds: [] as string[] })
+const memberRules: FormRules = {
+  name: [{ required: true, whitespace: true, message: '请输入成员姓名', trigger: 'blur' }],
+  account: [
+    { required: true, message: '请输入登录账号', trigger: 'blur' },
+    { pattern: /^[A-Za-z0-9_.@-]{4,64}$/, message: '账号需为 4–64 位字母、数字或 _ . @ -', trigger: 'blur' },
+  ],
+  password: [
+    { required: true, message: '请输入初始密码', trigger: 'blur' },
+    { pattern: /^(?=.*[A-Za-z])(?=.*\d).{8,64}$/, message: '密码需为 8–64 位，并同时包含字母和数字', trigger: 'blur' },
+  ],
+  phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入有效的中国大陆登录手机号', trigger: 'blur' }],
+  email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
+  roleIds: [{ type: 'array', required: true, min: 1, message: '请至少选择一个成员角色', trigger: 'change' }],
+}
+let loadVersion = 0
+async function loadEditor() {
+  const version = ++loadVersion
+  loading.value = true
+  loadError.value = ''
+  Object.assign(form, { name: '', account: '', password: '', phone: '', email: '', roleIds: [] })
+  try {
+    await Promise.all([store.loadRoles(), ...(editingId.value ? [store.loadMembers()] : [])])
+    if (version !== loadVersion) return
+    if (editingId.value) {
+      const member = store.members.find(item => item.id === editingId.value)
+      if (!member) throw new Error('该成员不存在或已不可访问，请返回成员列表重新选择')
+      Object.assign(form, { name: member.name, account: member.account, phone: member.phone, email: member.email, roleIds: [...member.roleIds] })
+    }
+    formRef.value?.clearValidate()
+  } catch (error) {
+    if (version === loadVersion) loadError.value = error instanceof Error ? error.message : '成员资料加载失败'
+  } finally {
+    if (version === loadVersion) loading.value = false
+  }
+}
+onMounted(() => void loadEditor())
+watch(() => props.memberId, () => void loadEditor())
+function returnToList() { void router.push({ name: 'members' }) }
+async function saveMember() {
+  if (saving.value || loading.value || loadError.value || !canSave.value) return
+  form.name = form.name.trim()
+  form.account = form.account.trim()
+  form.phone = form.phone.trim()
+  form.email = form.email.trim()
+  const valid = editingId.value
+    ? await formRef.value?.validateField(['name', 'account', 'phone', 'email', 'roleIds']).then(() => true).catch(() => false)
+    : await formRef.value?.validate().catch(() => false)
+  if (!valid) return
+  saving.value = true
+  try {
+    if (editingId.value) {
+      await store.updateMember(editingId.value, { name: form.name, memberNo: form.account, phone: form.phone, email: form.email, roleIds: [...form.roleIds] })
+      ElMessage.success('成员信息已更新')
+    } else {
+      await store.createMember({ ...form, memberNo: form.account, roleIds: [...form.roleIds] })
+      ElMessage.success('成员已新增')
+    }
+    form.password = ''
+    await router.push({ name: 'members' })
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '成员保存失败，请重试')
+  } finally { saving.value = false }
+}
+</script>
+
+<template>
+  <section v-loading="loading" class="company-editor client-ui" :aria-busy="loading">
+    <header class="company-editor-heading"><h2>{{ title }}</h2><el-button :disabled="saving" @click="returnToList">返回列表</el-button></header>
+    <el-alert v-if="loadError" type="error" :closable="false" :title="loadError"><el-button @click="loadEditor">重新加载</el-button></el-alert>
+    <el-form v-else ref="formRef" :model="form" :rules="memberRules" label-position="top" :disabled="saving || loading || !canSave" scroll-to-error @submit.prevent="saveMember">
+      <section class="company-editor-section">
+        <h3>账号信息</h3>
+        <div class="company-editor-grid">
+          <el-form-item label="成员姓名" prop="name" required><el-input v-model="form.name" maxlength="64" placeholder="请输入成员姓名" /></el-form-item>
+          <el-form-item label="登录账号" prop="account" required><el-input v-model="form.account" :disabled="Boolean(editingId)" maxlength="64" placeholder="4–64 位字母、数字或 _ . @ -" /></el-form-item>
+          <el-form-item v-if="!editingId" label="初始密码" prop="password" required><el-input v-model="form.password" type="password" show-password autocomplete="new-password" maxlength="64" placeholder="8–64 位，同时包含字母和数字" /></el-form-item>
+        </div>
+      </section>
+      <section class="company-editor-section">
+        <h3>联系信息与角色</h3>
+        <div class="company-editor-grid">
+          <el-form-item label="登录手机号" prop="phone"><el-input v-model="form.phone" maxlength="11" inputmode="tel" autocomplete="tel" placeholder="请输入登录手机号（选填）" /><span class="company-editor-help">用于该成员手机号登录；修改后会同步认证账号并退出该成员现有会话。</span></el-form-item>
+          <el-form-item label="邮箱" prop="email"><el-input v-model="form.email" maxlength="128" placeholder="请输入邮箱（选填）" /></el-form-item>
+          <el-form-item label="成员角色" prop="roleIds" required><el-select v-model="form.roleIds" multiple :disabled="Boolean(editingId) && !canGrantMemberRole" placeholder="请选择角色" popper-class="company-editor-popper"><el-option v-for="role in store.roles.filter((item) => item.status === 'ACTIVE' && (!item.builtin || form.roleIds.includes(item.id)))" :key="role.id" :label="role.name" :value="role.id" :disabled="role.builtin" /></el-select></el-form-item>
+        </div>
+      </section>
+      <p v-if="!editingId" class="company-editor-help">请通过安全渠道将初始密码交给成员；前端不会保存或再次展示该密码。</p>
+      <footer class="company-editor-actions"><el-button :disabled="saving" @click="returnToList">返回列表</el-button><el-button v-if="canSave" type="primary" native-type="submit" :loading="saving">{{ editingId ? '保存修改' : '新增成员' }}</el-button></footer>
+    </el-form>
+  </section>
+</template>
+
+<style scoped src="./companyEditor.css"></style>

src/modules/tenant-management/views/MembersView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { computed, onMounted, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRouter } from 'vue-router'
 import { KeyRound, Pencil, Plus } from '@lucide/vue'
 import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
 import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
@@ -9,31 +10,13 @@ import { useAuthStore } from '@/modules/auth/public'
 
 const store = useTenantAdministrationStore()
 const auth = useAuthStore()
+const router = useRouter()
 const memberFilters = ref({ keyword: '', status: '' as TenantRecordStatus | '' })
 const appliedMemberFilters = ref({ ...memberFilters.value })
 const memberPage = ref(1)
 const memberPageSize = ref(10)
-const editorOpen = ref(false)
-const editingId = ref('')
 const loading = ref(false)
 const loadError = ref('')
-const saving = ref(false)
-const formRef = ref<FormInstance>()
-const form = reactive({ name: '', account: '', password: '', phone: '', email: '', roleIds: [] as string[] })
-const memberRules: FormRules = {
-  name: [{ required: true, message: '请输入成员姓名', trigger: 'blur' }],
-  account: [
-    { required: true, message: '请输入登录账号', trigger: 'blur' },
-    { pattern: /^[A-Za-z0-9_.@-]{4,64}$/, message: '账号需为 4–64 位字母、数字或 _ . @ -', trigger: 'blur' },
-  ],
-  password: [
-    { required: true, message: '请输入初始密码', trigger: 'blur' },
-    { pattern: /^(?=.*[A-Za-z])(?=.*\d).{8,64}$/, message: '密码需为 8–64 位，并同时包含字母和数字', trigger: 'blur' },
-  ],
-  phone: [{ pattern: /^1[3-9]\d{9}$/, message: '请输入有效的中国大陆登录手机号', trigger: 'blur' }],
-  email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
-  roleIds: [{ type: 'array', required: true, min: 1, message: '请至少选择一个成员角色', trigger: 'change' }],
-}
 
 const memberQueryFields: QueryField[] = [
   { key: 'keyword', type: 'input', placeholder: '姓名、账号、登录手机号或邮箱' },
@@ -56,7 +39,6 @@ const filteredMembers = computed(() => store.members.filter((member) => {
 const pagedMembers = computed(() => filteredMembers.value.slice((memberPage.value - 1) * memberPageSize.value, memberPage.value * memberPageSize.value))
 const canCreateMember = computed(() => auth.hasPermission('company:member:create'))
 const canEditMember = computed(() => auth.hasPermission('company:member:edit'))
-const canGrantMemberRole = computed(() => auth.hasPermission('company:member:grant-role'))
 const canChangeMemberStatus = computed(() => auth.hasPermission('company:member:status'))
 const canResetMemberPassword = computed(() => auth.hasPermission('company:member:reset-password'))
 
@@ -83,53 +65,8 @@ function searchMembers(filters: QueryModel) {
   void loadMembers()
 }
 
-function resetForm() {
-  editingId.value = ''
-  Object.assign(form, { name: '', account: '', password: '', phone: '', email: '', roleIds: [] })
-  void nextTick(() => formRef.value?.clearValidate())
-}
-
-function openCreate() {
-  resetForm()
-  editorOpen.value = true
-}
-
-function openEdit(member: TenantMember) {
-  editingId.value = member.id
-  Object.assign(form, { name: member.name, account: member.account, password: '', phone: member.phone, email: member.email, roleIds: [...member.roleIds] })
-  editorOpen.value = true
-}
-
-async function saveMember() {
-  if (saving.value) return
-  form.name = form.name.trim()
-  form.account = form.account.trim()
-  form.phone = form.phone.trim()
-  form.email = form.email.trim()
-  if (!editingId.value || form.password) {
-    const valid = await formRef.value?.validate().catch(() => false)
-    if (!valid) return
-  } else {
-    const valid = await formRef.value?.validateField(['name', 'account', 'phone', 'email', 'roleIds']).then(() => true).catch(() => false)
-    if (!valid) return
-  }
-  saving.value = true
-  try {
-    if (editingId.value) {
-      await store.updateMember(editingId.value, { name: form.name, memberNo: form.account, phone: form.phone, email: form.email, roleIds: [...form.roleIds] })
-      ElMessage.success('成员信息已更新')
-    } else {
-      await store.createMember({ ...form, memberNo: form.account, roleIds: [...form.roleIds] })
-      ElMessage.success('成员已新增')
-    }
-    editorOpen.value = false
-  } catch (error) {
-    ElMessage.error(error instanceof Error ? error.message : '成员保存失败，请重试')
-  } finally {
-    saving.value = false
-  }
-}
-
+function openCreate() { void router.push({ name: 'member-create' }) }
+function openEdit(member: TenantMember) { void router.push({ name: 'member-edit', params: { memberId: member.id } }) }
 async function toggleStatus(member: TenantMember) {
   const nextLabel = member.status === 'ACTIVE' ? '停用' : '启用'
   try {
@@ -194,17 +131,7 @@ async function resetPassword(member: TenantMember) {
       <div v-if="!pagedMembers.length" class="mobile-member-empty">没有匹配的企业成员，请调整筛选条件。</div>
     </div>
 
-    <el-drawer v-model="editorOpen" :title="editingId ? '编辑成员' : '新增成员'" size="min(520px, 94vw)" @closed="resetForm">
-      <el-form ref="formRef" :model="form" :rules="memberRules" label-position="top">
-        <el-form-item label="成员姓名" prop="name" required><el-input v-model="form.name" maxlength="64" placeholder="例如 张三" /></el-form-item>
-        <el-form-item label="登录账号" prop="account" required><el-input v-model="form.account" :disabled="Boolean(editingId)" maxlength="64" placeholder="4–64 位字母、数字或 _ . @ -" /></el-form-item>
-        <el-form-item v-if="!editingId" label="初始密码" prop="password" required><el-input v-model="form.password" type="password" show-password autocomplete="new-password" maxlength="64" placeholder="8–64 位，同时包含字母和数字" /></el-form-item>
-        <div class="member-form-grid"><el-form-item label="登录手机号" prop="phone"><el-input v-model="form.phone" maxlength="11" inputmode="tel" autocomplete="tel" placeholder="例如 13800138000（选填）" /><span class="member-field-help">用于该成员手机号登录；修改后会同步认证账号并退出该成员现有会话。</span></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" maxlength="128" placeholder="例如 name@example.com（选填）" /></el-form-item></div>
-<el-form-item label="成员角色" prop="roleIds" required><el-select v-model="form.roleIds" multiple :disabled="Boolean(editingId) && !canGrantMemberRole" placeholder="请选择角色"><el-option v-for="role in store.roles.filter((item) => item.status === 'ACTIVE' && (!item.builtin || form.roleIds.includes(item.id)))" :key="role.id" :label="role.name" :value="role.id" :disabled="role.builtin" /></el-select></el-form-item>
-        <div v-if="!editingId" class="member-form-tip"><KeyRound :size="17" /><span>请通过安全渠道将初始密码交给成员；前端不会保存或再次展示该密码。</span></div>
-      </el-form>
-      <template #footer><div class="drawer-actions"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveMember">保存</el-button></div></template>
-    </el-drawer>
+
     </template>
   </section>
 </template>
@@ -223,14 +150,8 @@ async function resetPassword(member: TenantMember) {
 .member-identity small, .member-contact small { color: var(--muted); font-size: 10px; }
 .role-tags { display: flex; gap: 5px; flex-wrap: wrap; }
 .mobile-member-list, .mobile-member-empty { display: none; }
-.member-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
-.member-form-tip { display: flex; gap: 10px; padding: 13px; border: 1px solid #cfe1dc; background: #f2f7f6; color: var(--muted); font-size: 11px; line-height: 1.6; }
-.member-field-help { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }
-.member-form-tip svg { flex: 0 0 17px; color: var(--primary); }
-.drawer-actions { display: flex; justify-content: flex-end; gap: 8px; }
 .members-page :deep(.el-form-item__error) { line-height: 1.45; overflow-wrap: anywhere; }
 @media (max-width: 720px) {
-  .member-form-grid { grid-template-columns: 1fr; }
   .desktop-member-table { display: none; }
   .mobile-member-list { display: grid; gap: 10px; padding: 10px; }
   .mobile-member-empty { display: grid; min-height: 150px; place-items: center; border-top: 1px solid var(--border); color: #98a2a9; font-size: 13px; text-align: center; }
@@ -241,6 +162,5 @@ async function resetPassword(member: TenantMember) {
   .mobile-member-list dt { color: var(--muted); font-size: 10px; }
   .mobile-member-list dd { margin: 4px 0 0; font-size: 12px; }
   .mobile-member-list footer { display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid var(--border); }
-  .drawer-actions { flex-wrap: wrap; }
 }
 </style>

src/modules/tenant-management/views/RolesView.vue

@@ -160,15 +160,15 @@ function assignPermissions(role: TenantRole) {
       </DataTable>
     </div>
 
-    <el-drawer v-model="editorOpen" :title="editingId ? '编辑角色' : '新增角色'" size="min(500px, 94vw)" @closed="resetForm">
-      <el-form ref="formRef" :model="form" :rules="roleRules" label-position="top">
+    <el-dialog v-model="editorOpen" :title="editingId ? '编辑角色' : '新增角色'" width="560px" align-center :close-on-click-modal="!saving" :close-on-press-escape="!saving" :show-close="!saving" @closed="resetForm">
+      <el-form ref="formRef" :model="form" :rules="roleRules" label-position="top" class="role-editor-form" :disabled="saving">
         <el-form-item label="角色名称" prop="name" required><el-input v-model="form.name" maxlength="30" placeholder="例如 订单操作员" /></el-form-item>
         <el-form-item label="角色编码" prop="code" required><el-input v-model="form.code" :disabled="Boolean(editingId)" placeholder="例如 ORDER_OPERATOR" maxlength="40" /></el-form-item>
-        <el-form-item label="角色说明" prop="description" required><el-input v-model="form.description" type="textarea" :rows="4" maxlength="200" show-word-limit placeholder="简要说明该角色的职责和适用范围" /></el-form-item>
-        <div class="role-form-tip">保存后请前往“菜单权限”为角色分配可见菜单和操作权限。</div>
+        <el-form-item class="role-editor-wide" label="角色说明" prop="description" required><el-input v-model="form.description" type="textarea" :rows="4" maxlength="200" show-word-limit placeholder="简要说明该角色的职责和适用范围" /></el-form-item>
+        <div class="role-form-tip role-editor-wide">保存后请前往“菜单权限”为角色分配可见菜单和操作权限。</div>
       </el-form>
-      <template #footer><div class="drawer-actions"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveRole">保存</el-button></div></template>
-    </el-drawer>
+      <template #footer><div class="dialog-actions"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button type="primary" :loading="saving" @click="saveRole">保存</el-button></div></template>
+    </el-dialog>
     </template>
   </section>
 </template>
@@ -186,7 +186,22 @@ function assignPermissions(role: TenantRole) {
 .role-identity strong { overflow-wrap: anywhere; }
 .role-identity code { color: var(--muted); font-size: 10px; }
 .role-form-tip { padding: 12px; background: #f2f7f6; color: var(--muted); font-size: 11px; }
-.drawer-actions { display: flex; justify-content: flex-end; gap: 8px; }
+.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
 .roles-page :deep(.el-form-item__error) { line-height: 1.45; overflow-wrap: anywhere; }
-@media (max-width: 600px) { .drawer-actions { flex-wrap: wrap; } }
+@media (max-width: 600px) { .dialog-actions { flex-wrap: wrap; } }
+</style>
+
+<style scoped>
+.role-editor-form { --el-color-primary: #2f7bff; --el-text-color-placeholder: #b0b7c3; --el-component-size: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
+.role-editor-wide { grid-column: 1 / -1; }
+.role-editor-form :deep(.el-form-item) { min-width: 0; margin: 0; }
+.role-editor-form :deep(.el-form-item__label) { height: auto; margin: 0 0 6px; padding: 0; color: #374151; font-size: 14px; font-weight: 600; line-height: 20px; }
+.role-editor-form :deep(.el-form-item__content) { line-height: 20px; }
+.role-editor-form :deep(.el-form-item__error) { position: absolute; top: auto; bottom: calc(100% + 6px); right: 0; left: auto; max-width: calc(100% - 70px); padding: 0; font-size: 12px; line-height: 20px; text-align: right; }
+.role-editor-form :deep(.el-input__wrapper) { min-height: 44px; padding: 10px 14px; box-sizing: border-box; border: 1px solid #d5dce8; border-radius: 6px; box-shadow: none; }
+.role-editor-form :deep(.el-input__inner) { height: 22px; line-height: 22px; }
+.role-editor-form :deep(.el-textarea__inner) { min-height: 110px; padding: 11px 14px; border: 1px solid #d5dce8; border-radius: 6px; box-shadow: none; }
+.role-editor-form :deep(.el-input__wrapper.is-focus), .role-editor-form :deep(.el-textarea__inner:focus) { outline: 2px solid #2f7bff; outline-offset: 0; }
+.role-editor-form :deep(.is-error .el-input__wrapper), .role-editor-form :deep(.is-error .el-textarea__inner) { border-color: #e5484d; }
+.role-editor-form .role-form-tip { padding: 0; background: transparent; color: #6b7280; font-size: 12px; }
 </style>

src/modules/tenant-management/views/TenantAdministrationViews.test.mjs

@@ -4,7 +4,10 @@ import test from 'node:test'
 
 const routerSource = fs.readFileSync(new URL('../routes.ts', import.meta.url), 'utf8')
 const profileSource = fs.readFileSync(new URL('./CompanyProfileView.vue', import.meta.url), 'utf8')
-const membersSource = fs.readFileSync(new URL('./MembersView.vue', import.meta.url), 'utf8')
+const membersListSource = fs.readFileSync(new URL('./MembersView.vue', import.meta.url), 'utf8')
+const memberEditorSource = fs.readFileSync(new URL('./MemberEditorView.vue', import.meta.url), 'utf8')
+const membersSource = membersListSource + '\n' + memberEditorSource
+const profileEditorSource = fs.readFileSync(new URL('./CompanyProfileEditView.vue', import.meta.url), 'utf8')
 const rolesSource = fs.readFileSync(new URL('./RolesView.vue', import.meta.url), 'utf8')
 const permissionsSource = fs.readFileSync(new URL('./PermissionsView.vue', import.meta.url), 'utf8')
 const storeSource = fs.readFileSync(new URL('../store/tenantAdministration.ts', import.meta.url), 'utf8')
@@ -15,7 +18,7 @@ test('routes tenant administration modules to implemented views instead of the p
   assert.match(routerSource, /path: 'organization\/members'[\s\S]*?MembersView\.vue/)
   assert.match(routerSource, /path: 'organization\/roles'[\s\S]*?RolesView\.vue/)
   assert.match(routerSource, /path: 'organization\/permissions'[\s\S]*?PermissionsView\.vue/)
-  assert.equal((routerSource.match(/release: 'active'/g) ?? []).length, 4)
+  assert.equal((routerSource.match(/release: 'active'/g) ?? []).length, 7)
   assert.doesNotMatch(routerSource, /ModuleView\.vue/)
 })
 
@@ -23,7 +26,7 @@ test('implements company details, contact information and qualification workflow
   assert.match(profileSource, /企业基本信息/)
   assert.match(profileSource, /联系信息/)
   assert.match(profileSource, /资质文件/)
-  assert.match(profileSource, /async function saveProfile\(\)/)
+  assert.match(profileEditorSource, /async function saveProfile\(\)/)
   assert.match(profileSource, /function submitQualification\(closeDialog = true\)/)
   assert.match(profileSource, /validateQualificationFile/)
   assert.match(profileSource, /function removeSelectedFile\(type: MerchantQualificationType\)/)
@@ -66,9 +69,9 @@ test('implements company details, contact information and qualification workflow
   assert.doesNotMatch(profileSource, /<el-table class="desktop-qualification-table"/)
   assert.doesNotMatch(profileSource, /class="profile-summary-card"/)
   assert.match(profileSource, /class="info-panel-header"[\s\S]*auth\.hasPermission\('company:profile:edit'\)/)
-  assert.match(profileSource, /ref="profileFormRef" :model="draft" :rules="profileFormRules"/)
-  assert.match(profileSource, /prop="companyName" required><el-input v-model="draft\.companyName" placeholder="请输入公司名称"/)
-  assert.match(profileSource, /const valid = await profileFormRef\.value\?\.validate\(\)/)
+  assert.match(profileEditorSource, /ref="profileFormRef" :model="draft" :rules="profileFormRules"/)
+  assert.match(profileEditorSource, /prop="companyName" required><el-input v-model="draft\.companyName" placeholder="请输入公司名称"/)
+  assert.match(profileEditorSource, /const valid = await profileFormRef\.value\?\.validate\(\)/)
   assert.match(profileSource, /const requiredQualificationTypes = qualificationTypes\.filter\(\(type\) => type\.required\)/)
   assert.match(profileSource, /货代资质证书'.*required: false/)
   assert.match(profileSource, /法人身份证'.*required: false/)
@@ -116,9 +119,9 @@ test('implements company details, contact information and qualification workflow
   assert.match(profileSource, /<dt>注册资本<\/dt><dd>\{\{ store\.company\.registeredCapital/)
   assert.match(profileSource, /<dt>联系微信<\/dt><dd>\{\{ store\.company\.contactWechat/)
   assert.match(profileSource, /<dt>公司联系电话<\/dt><dd>\{\{ store\.company\.contactPhone/)
-  assert.match(profileSource, /label="公司联系电话" prop="contactPhone" required/)
-  assert.match(profileSource, /不会修改任何成员的登录手机号/)
-  assert.match(profileSource, /pattern: \/\^\[0-9-\]\{4,32\}\$\//)
+  assert.match(profileEditorSource, /label="公司联系电话" prop="contactPhone" required/)
+  assert.match(profileEditorSource, /不会修改任何成员的登录手机号/)
+  assert.match(profileEditorSource, /pattern: \/\^\[0-9-\]\{4,32\}\$\//)
   assert.doesNotMatch(profileSource, /<dt>联系电话<\/dt><dd>\{\{ store\.company\.contactPhone/)
   assert.match(storeSource, /expiresAt: item\.validTo \|\| '长期有效'/)
   assert.match(storeSource, /fileName: item\.originalFileName\?\.trim\(\) \|\| '—'/)

src/modules/tenant-management/views/companyEditor.css

@@ -0,0 +1,32 @@
+.company-editor {
+  --el-color-primary: #2f7bff;
+  --el-text-color-regular: #1f2937;
+  --el-text-color-placeholder: #b0b7c3;
+  width: 100%; min-width: 0; color: #1f2937; background: #f4f7fc;
+  font: 14px/1.5 "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+}
+.company-editor-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+.company-editor-heading h2 { margin: 0; font-size: 26px; font-weight: 700; }
+.company-editor-section { margin-bottom: 12px; }
+.company-editor-section h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 18px; font-weight: 700; }
+.company-editor-section h3::before { content: ''; width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #2f7bff; }
+.company-editor-section:nth-of-type(2) h3::before { background: #0ea5a4; }
+.company-editor-grid { --el-component-size: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; padding: 16px; border: 1px solid #e3e8f0; border-radius: 10px; background: #fff; }
+.company-editor-grid :deep(.el-form-item) { min-width: 0; margin: 0; }
+.company-editor-grid :deep(.el-form-item__label) { height: auto; margin: 0 0 6px; padding: 0; color: #374151; font-size: 14px; font-weight: 600; line-height: 20px; }
+.company-editor-grid :deep(.el-form-item.is-required .el-form-item__label::before) { color: #e5484d; }
+.company-editor-grid :deep(.el-form-item__content) { min-width: 0; line-height: 20px; align-content: flex-start; }
+.company-editor-grid :deep(.el-form-item__error) { position: absolute; top: 0; right: 0; bottom: auto; left: auto; max-width: calc(100% - 120px); padding: 0; transform: translateY(calc(-100% - 6px)); font-size: 12px; line-height: 20px; text-align: right; }
+.company-editor-grid :deep(.el-input), .company-editor-grid :deep(.el-select) { width: 100%; }
+.company-editor-grid :deep(.el-input__wrapper), .company-editor-grid :deep(.el-select__wrapper) { min-height: 44px; padding: 10px 14px; box-sizing: border-box; border: 1px solid #d5dce8; border-radius: 6px; box-shadow: none; }
+.company-editor-grid :deep(.el-input__inner) { height: 22px; color: #1f2937; font-size: 14px; line-height: 22px; }
+.company-editor-grid :deep(.el-input__wrapper.is-focus), .company-editor-grid :deep(.el-select__wrapper.is-focused) { outline: 2px solid #2f7bff; outline-offset: 0; }
+.company-editor-grid :deep(.is-error .el-input__wrapper), .company-editor-grid :deep(.is-error .el-select__wrapper) { border-color: #e5484d; }
+.company-editor-grid :deep(.el-input__inner::placeholder), .company-editor-grid :deep(.el-select__placeholder.is-transparent) { color: #b0b7c3; opacity: 1; }
+.company-editor-help { display: block; margin: 4px 0 12px; color: #6b7280; font-size: 12px; line-height: 20px; }
+.company-editor-grid .company-editor-help { margin-bottom: 0; }
+.company-editor-actions { display: flex; justify-content: flex-end; gap: 12px; }
+.company-editor-heading :deep(.el-button), .company-editor-actions :deep(.el-button) { min-height: 44px; margin-left: 0; padding: 10px 18px; border: 1px solid #d5dce8; border-radius: 6px; background: #fff; color: #1d5fe0; font-size: 14px; font-weight: 600; box-shadow: none; }
+.company-editor-actions :deep(.el-button--primary) { padding: 12px 28px; border-color: #2f7bff; background: #2f7bff; color: #fff; }
+.company-editor-heading :deep(.el-button.is-disabled), .company-editor-actions :deep(.el-button.is-disabled) { opacity: .55; }
+:global(.company-editor-popper.el-popper) { border: 1px solid #e3e8f0; border-radius: 6px; box-shadow: none; }

src/styles/shell.css

@@ -29,9 +29,16 @@
 .client-nav-menu { flex: 1; background: transparent; }
 .client-nav-submenu { margin: 3px 0 2px 15px; padding: 0 0 0 12px; border-left: 1px solid #e6ebf2; }
 .client-nav-node { min-width: 0; }
+.client-nav-menu > .client-nav-node[data-nav-key="dashboard"] { --client-nav-icon-color: #2f7bff; }
+.client-nav-menu > .client-nav-node[data-nav-key="order-center"] { --client-nav-icon-color: #16a34a; }
+.client-nav-menu > .client-nav-node[data-nav-key="first-leg-customs-documents"] { --client-nav-icon-color: #8b5cf6; }
+.client-nav-menu > .client-nav-node[data-nav-key="first-leg-sailing-prices"] { --client-nav-icon-color: #e84877; }
+.client-nav-menu > .client-nav-node[data-nav-key="overseas-warehouse-center"] { --client-nav-icon-color: #0ea5a4; }
+.client-nav-menu > .client-nav-node[data-nav-key="finance-center"] { --client-nav-icon-color: #f59e0b; }
+.client-nav-menu > .client-nav-node[data-nav-key="company-center"] { --client-nav-icon-color: #64748b; }
 .client-nav-node.has-divider-before { margin-top: 9px; padding-top: 9px; border-top: 1px solid #eef2f7; }
 .client-sidebar-group-trigger,
-.client-sidebar-link { display: flex; position: relative; width: 100%; min-height: 46px; min-width: 0; align-items: center; gap: 11px; margin: 2px 0; padding: 7px 10px; border: 1px solid transparent; border-radius: 12px; color: #64748b; font-size: 13px; font-weight: 650; line-height: 1.35; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease; }
+.client-sidebar-link { display: flex; position: relative; width: 100%; min-height: 46px; min-width: 0; align-items: center; gap: 11px; margin: 2px 0; padding: 7px 10px; border: 1px solid transparent; border-radius: 12px; color: #374151; font-size: 13px; font-weight: 650; line-height: 1.35; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease; }
 .client-sidebar-group-trigger { border: 0; background: transparent; cursor: pointer; text-align: left; }
 .client-sidebar-link { text-decoration: none; }
 .client-sidebar-group-trigger:hover,
@@ -44,7 +51,7 @@
 .client-nav-submenu .client-sidebar-link[aria-current="page"] { border-color: #dbeafe; background: #eff6ff; color: #2563eb; font-weight: 650; }
 .client-nav-node.is-active-parent > .client-sidebar-group-trigger { background: #f8faff; color: #2563eb; font-weight: 650; }
 .client-sidebar .client-sidebar-group-trigger > .client-sidebar-node-icon,
-.client-nav-menu > .client-nav-node > .client-sidebar-link > .client-sidebar-node-icon { width: 31px; height: 31px; flex: 0 0 31px; padding: 7px; border-radius: 9px; background: #f1f5f9; color: #64748b; }
+.client-nav-menu > .client-nav-node > .client-sidebar-link > .client-sidebar-node-icon { width: 31px; height: 31px; flex: 0 0 31px; padding: 7px; border-radius: 9px; background: #f1f5f9; color: var(--client-nav-icon-color, #64748b); }
 .client-nav-menu > .client-nav-node > .client-sidebar-link[aria-current="page"] > .client-sidebar-node-icon { background: rgba(255, 255, 255, .14); color: #fff; }
 .client-sidebar .client-sidebar-group-chevron { width: 16px; height: 16px; flex: 0 0 16px; margin-left: auto; transform: rotate(-90deg); transition: transform .2s ease; }
 .client-sidebar-group-trigger[aria-expanded="true"] .client-sidebar-group-chevron { transform: rotate(0); }