diff --git a/backend/internal/modules/order/pricing.go b/backend/internal/modules/order/pricing.go
index e7424c2..c7b9164 100644
--- a/backend/internal/modules/order/pricing.go
+++ b/backend/internal/modules/order/pricing.go
@@ -336,16 +336,22 @@ func calculateCheckoutSettlement(order model.RentalOrder, consumableAmountCent i
 		}
 	}
 
-	// 消耗品按申报金额计价，允许超过预收；号主侧按预收消耗品占比线性外推
+	// 消耗品按申报金额计价，允许超过预收；号主侧按预收消耗品占比外推，超额及无预收损耗全额归号主
 	usedBuyerConsumablePriceCent := maxCent(consumableAmountCent, 0)
-	consumableUseRatio := 0.0
+	var usedOwnerConsumablePriceCent int64
 	if prepaidConsumablePriceCent > 0 {
-		consumableUseRatio = maxRatio(float64(usedBuyerConsumablePriceCent)/float64(prepaidConsumablePriceCent), 0)
-	}
-	usedOwnerConsumablePriceCent := int64(math.Round(float64(prepaidOwnerConsumablePriceCent) * consumableUseRatio))
-	if usedBuyerConsumablePriceCent <= prepaidConsumablePriceCent {
-		usedBuyerConsumablePriceCent = minCent(usedBuyerConsumablePriceCent, prepaidConsumablePriceCent)
-		usedOwnerConsumablePriceCent = minCent(usedOwnerConsumablePriceCent, prepaidOwnerConsumablePriceCent)
+		if usedBuyerConsumablePriceCent <= prepaidConsumablePriceCent {
+			consumableUseRatio := maxRatio(float64(usedBuyerConsumablePriceCent)/float64(prepaidConsumablePriceCent), 0)
+			usedOwnerConsumablePriceCent = int64(math.Round(float64(prepaidOwnerConsumablePriceCent) * consumableUseRatio))
+			usedOwnerConsumablePriceCent = minCent(usedOwnerConsumablePriceCent, prepaidOwnerConsumablePriceCent)
+		} else {
+			// 预收范围内按号主预收基准，超出预收部分作为后置损耗全额划归号主（平台不抽成）
+			excessCent := usedBuyerConsumablePriceCent - prepaidConsumablePriceCent
+			usedOwnerConsumablePriceCent = prepaidOwnerConsumablePriceCent + excessCent
+		}
+	} else {
+		// 原订单无预收消耗品，后置申报的消耗/损耗金额 100% 归号主，平台不抽成
+		usedOwnerConsumablePriceCent = usedBuyerConsumablePriceCent
 	}
 
 	pureCoinPlatformFeeCent := maxCent(usedBuyerCoinPriceCent-usedOwnerCoinPriceCent, 0)
diff --git a/backend/internal/modules/order/repository_integration_test.go b/backend/internal/modules/order/repository_integration_test.go
index 5d2dd05..0d750ac 100644
--- a/backend/internal/modules/order/repository_integration_test.go
+++ b/backend/internal/modules/order/repository_integration_test.go
@@ -417,8 +417,8 @@ func TestBuildCheckoutSettlementWithConsumable(t *testing.T) {
 			settlement.DepositCompensationCent, checkout.DepositDeductAmountCent)
 	}
 
-	// 验证号主总收入 = 租金 + 押金赔付
-	expectedOwnerIncome := order.OwnerRentAmountCent + checkout.DepositDeductAmountCent
+	// 验证号主总收入 = 租金（含后置消耗品全额划归号主） + 押金赔付
+	expectedOwnerIncome := order.OwnerRentAmountCent + checkout.ConsumableAmountCent + checkout.DepositDeductAmountCent
 	if settlement.OwnerIncomeCent != expectedOwnerIncome {
 		t.Fatalf("OwnerIncomeCent = %d, want %d",
 			settlement.OwnerIncomeCent, expectedOwnerIncome)
diff --git a/backend/internal/modules/order/repository_test.go b/backend/internal/modules/order/repository_test.go
index 0a6be77..afd7c82 100644
--- a/backend/internal/modules/order/repository_test.go
+++ b/backend/internal/modules/order/repository_test.go
@@ -528,3 +528,146 @@ func TestApplyAdminOrderFiltersSmartRouting(t *testing.T) {
 	}
 }
 
+func TestCalculateCheckoutSettlement_NoPrepaidConsumable_OwnerGetsFullLoss(t *testing.T) {
+	// 原订单无预收消耗品（consumable_price: 0），买家币价 263 元，卖家币价 233 元，平台加价 30 元
+	order := model.RentalOrder{
+		RentAmountCent:      26300,
+		OwnerRentAmountCent: 23300,
+		DepositAmountCent:   10000,
+		AccountSnapshot: datatypes.JSON([]byte(`{
+			"haf_coin_amount": 100000000,
+			"asset_summary": {
+				"price_breakdown": {
+					"buyer_coin_base_price": 263,
+					"seller_coin_base_price": 233,
+					"consumable_price": 0
+				}
+			}
+		}`)),
+	}
+
+	// 结账时，耗币 100M（全额使用，原价 263/233），但号主后置申报了 50 元物资损耗（5000 分）
+	settlement := calculateCheckoutSettlement(order, 5000, 100, 0)
+
+	// 1. 租客实际承担租金 = 纯币 26300 + 损耗 5000 = 31300
+	if settlement.ActualRentAmountCent != 31300 {
+		t.Fatalf("ActualRentAmountCent = %d, want 31300", settlement.ActualRentAmountCent)
+	}
+
+	// 2. 号主租金收益 = 纯币 23300 + 损耗 5000（全额划归号主） = 28300
+	if settlement.OwnerRentIncomeCent != 28300 {
+		t.Fatalf("OwnerRentIncomeCent = %d, want 28300 (号主损耗必须全额划归号主)", settlement.OwnerRentIncomeCent)
+	}
+
+	// 3. 号主总收入必须包含全部损耗
+	if settlement.OwnerIncomeCent != 28300 {
+		t.Fatalf("OwnerIncomeCent = %d, want 28300", settlement.OwnerIncomeCent)
+	}
+
+	// 4. 平台服务费必须保持原加价 3000（30 元），绝不能把号主的 50 元损耗吞掉！
+	if settlement.PlatformFeeCent != 3000 {
+		t.Fatalf("PlatformFeeCent = %d, want 3000 (平台绝不能从号主损耗中抽成)", settlement.PlatformFeeCent)
+	}
+
+	// 5. 打超金额 = 31300 - 26300 = 5000，从押金扣除
+	if settlement.OvershootAmountCent != 5000 {
+		t.Fatalf("OvershootAmountCent = %d, want 5000", settlement.OvershootAmountCent)
+	}
+	// 押金 10000 - 5000 = 5000 退给租客
+	if settlement.DepositRefundCent != 5000 {
+		t.Fatalf("DepositRefundCent = %d, want 5000", settlement.DepositRefundCent)
+	}
+}
+
+func TestCalculateCheckoutSettlement_PrepaidConsumableOvershoot_OwnerGetsExcess(t *testing.T) {
+	// 原订单有预收消耗品：买家预收 20 元，号主预收 16 元（平台抽 4 元）；纯币 100 / 80
+	order := model.RentalOrder{
+		RentAmountCent:      12000,
+		OwnerRentAmountCent: 9600,
+		DepositAmountCent:   5000,
+		AccountSnapshot: datatypes.JSON([]byte(`{
+			"haf_coin_amount": 100000000,
+			"asset_summary": {
+				"price_breakdown": {
+					"buyer_coin_base_price": 100,
+					"seller_coin_base_price": 80,
+					"consumable_price": 20
+				}
+			}
+		}`)),
+	}
+
+	// 实际消耗品达到 50 元（5000 分），超出预收 30 元（3000 分）
+	settlement := calculateCheckoutSettlement(order, 5000, 100, 0)
+
+	// 号主预收部分 1600 + 超额损耗部分 3000 = 4600；纯币 8000；总号主租金 12600
+	if settlement.OwnerRentIncomeCent != 12600 {
+		t.Fatalf("OwnerRentIncomeCent = %d, want 12600 (超出预收部分必须全额划归号主)", settlement.OwnerRentIncomeCent)
+	}
+
+	// 平台服务费仍为初始纯币差额 2000 + 预收消耗品差额 400 = 2400
+	if settlement.PlatformFeeCent != 2400 {
+		t.Fatalf("PlatformFeeCent = %d, want 2400 (超额部分平台不抽成)", settlement.PlatformFeeCent)
+	}
+}
+
+func TestApplyCheckoutPriceView_RoleIsolationAndPlatformFeeHidden(t *testing.T) {
+	order := model.RentalOrder{
+		ID:                  1,
+		OwnerID:             100,
+		RenterID:            200,
+		RentAmountCent:      30000,
+		OwnerRentAmountCent: 25000,
+		DepositAmountCent:   10000,
+	}
+	rentCent := int64(30000)
+	ownerRentCent := int64(25000)
+	platformCent := int64(5000)
+	renterRefundCent := int64(8000)
+	ownerIncomeCent := int64(27000)
+
+	checkout := model.OrderCheckout{
+		ID:                      10,
+		OrderID:                 1,
+		RentAmountCent:          rentCent,
+		OwnerRentAmountCent:     ownerRentCent,
+		PlatformFeeCent:         platformCent,
+		RenterRefundAmountCent:  renterRefundCent,
+		OwnerIncomeAmountCent:   ownerIncomeCent,
+		DepositDeductAmountCent: 2000,
+	}
+
+	// 1. 号主视角
+	ownerDTO := toCheckoutAdminDTO(checkout)
+	applyCheckoutPriceView(&ownerDTO, order, 100)
+	if ownerDTO.PlatformFeeCent != nil {
+		t.Fatalf("号主视角必须屏蔽 PlatformFeeCent, 实际为: %v", *ownerDTO.PlatformFeeCent)
+	}
+	if ownerDTO.RenterRefundAmountCent != nil {
+		t.Fatalf("号主视角必须屏蔽 RenterRefundAmountCent, 实际为: %v", *ownerDTO.RenterRefundAmountCent)
+	}
+	if ownerDTO.RentAmountCent != nil {
+		t.Fatalf("号主视角必须屏蔽 RentAmountCent, 实际为: %v", *ownerDTO.RentAmountCent)
+	}
+	if ownerDTO.OwnerIncomeAmountCent == nil || *ownerDTO.OwnerIncomeAmountCent != 27000 {
+		t.Fatalf("号主视角必须展示 OwnerIncomeAmountCent, 实际为: %v", ownerDTO.OwnerIncomeAmountCent)
+	}
+
+	// 2. 租客视角
+	renterDTO := toCheckoutAdminDTO(checkout)
+	applyCheckoutPriceView(&renterDTO, order, 200)
+	if renterDTO.PlatformFeeCent != nil {
+		t.Fatalf("租客视角必须屏蔽 PlatformFeeCent, 实际为: %v", *renterDTO.PlatformFeeCent)
+	}
+	if renterDTO.OwnerRentAmountCent != nil {
+		t.Fatalf("租客视角必须屏蔽 OwnerRentAmountCent, 实际为: %v", *renterDTO.OwnerRentAmountCent)
+	}
+	if renterDTO.OwnerIncomeAmountCent != nil {
+		t.Fatalf("租客视角必须屏蔽 OwnerIncomeAmountCent, 实际为: %v", *renterDTO.OwnerIncomeAmountCent)
+	}
+	if renterDTO.RenterRefundAmountCent == nil || *renterDTO.RenterRefundAmountCent != 8000 {
+		t.Fatalf("租客视角必须展示 RenterRefundAmountCent, 实际为: %v", renterDTO.RenterRefundAmountCent)
+	}
+}
+
+
diff --git a/frontend/src/features/admin/components/AdminOrderPaymentRecords.css b/frontend/src/features/admin/components/AdminOrderPaymentRecords.css
index d1751d4..3aa947e 100644
--- a/frontend/src/features/admin/components/AdminOrderPaymentRecords.css
+++ b/frontend/src/features/admin/components/AdminOrderPaymentRecords.css
@@ -41,8 +41,8 @@
 
 .record-meta {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 6px 12px;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 8px 14px;
   color: #52616f;
   font-size: 12px;
   line-height: 1.5;
diff --git a/frontend/src/features/admin/components/ProcessTimeline.vue b/frontend/src/features/admin/components/ProcessTimeline.vue
index e9826f7..4ea56d5 100644
--- a/frontend/src/features/admin/components/ProcessTimeline.vue
+++ b/frontend/src/features/admin/components/ProcessTimeline.vue
@@ -56,14 +56,14 @@ const stageLabels: Record<string, string> = {
 }
 
 const payloadLabels: Record<string, string> = {
-  checkout_id: '结账单',
+  checkout_id: '结账单ID',
   round: '协商轮次',
   turn: '等待确认方',
   proposed_by: '方案提出人',
   rent_amount_cent: '实际结算租金',
-  owner_rent_amount_cent: '号主租金',
-  platform_fee_cent: '平台费用',
-  deposit_amount_cent: '押金',
+  owner_rent_amount_cent: '号主基础租金',
+  platform_fee_cent: '平台服务费',
+  deposit_amount_cent: '订单押金',
   consumable_amount_cent: '消耗品金额',
   coin_consumed_m: '哈夫币消耗',
   deposit_deduct_amount_cent: '押金赔付扣除',
@@ -71,7 +71,7 @@ const payloadLabels: Record<string, string> = {
   owner_income_amount_cent: '号主最终收入',
   shortfall_cent: '押金不足差额',
   overshoot_amount_cent: '打超金额',
-  offline_settlement_amount_cent: '线下结算金额',
+  offline_settlement_amount_cent: '线下待结算',
   deposit_hold_amount_cent: '暂扣金额',
   profit_amount_cent: '利润金额',
   settle_amount_cent: '结算给号主',
@@ -131,46 +131,127 @@ const stateLabels: Record<string, Record<string, string>> = {
 }
 
 const stateFieldLabels: Record<string, string> = {
-  order_status: '订单',
-  handoff_status: '交接',
-  settlement_status: '结算',
+  order_status: '订单状态',
+  handoff_status: '交接状态',
+  settlement_status: '结算状态',
   offline_settlement_status: '线下结算',
-  pickup_status: '提号',
+  pickup_status: '提号状态',
 }
 
+interface PayloadItem {
+  key: string
+  label: string
+  value: string
+  variant: 'income' | 'refund' | 'fee' | 'deduct' | 'primary' | 'neutral'
+}
+
+interface PayloadCategory {
+  id: string
+  title: string
+  icon: string
+  items: PayloadItem[]
+}
+
+const CATEGORY_DEFINITIONS: {
+  id: string
+  title: string
+  icon: string
+  keys: string[]
+}[] = [
+  {
+    id: 'financial',
+    title: '资金结算明细',
+    icon: '💰',
+    keys: [
+      'owner_rent_amount_cent',
+      'platform_fee_cent',
+      'owner_income_amount_cent',
+      'renter_refund_amount_cent',
+      'rent_amount_cent',
+      'offline_settlement_amount_cent',
+      'profit_amount_cent',
+      'settle_amount_cent',
+      'profit_delta_cent',
+      'settle_delta_cent',
+    ],
+  },
+  {
+    id: 'deposit',
+    title: '押金与赔付扣除',
+    icon: '🛡️',
+    keys: [
+      'deposit_amount_cent',
+      'deposit_deduct_amount_cent',
+      'overshoot_amount_cent',
+      'shortfall_cent',
+      'deposit_hold_amount_cent',
+    ],
+  },
+  {
+    id: 'gameplay',
+    title: '消耗与游戏指标',
+    icon: '🎮',
+    keys: ['coin_consumed_m', 'consumable_amount_cent'],
+  },
+  {
+    id: 'meta',
+    title: '流程单据与属性',
+    icon: '📋',
+    keys: [
+      'checkout_id',
+      'round',
+      'turn',
+      'proposed_by',
+      'settlement_mode',
+      'account_source',
+      'source_channel',
+    ],
+  },
+]
+
 function actionLabel(action: string) {
   return actionLabels[action] || action
 }
+
 function stageLabel(stage: string) {
   return stageLabels[stage] || '流程'
 }
+
 function actorLabel(item: ProcessTimelineEvent) {
   if (item.actor_name) return item.actor_name
   if (item.actor_type === 'system') return '系统'
   return `${item.actor_type === 'admin' ? '客服' : '用户'} ID ${item.actor_id}`
 }
+
 function actorRole(item: ProcessTimelineEvent) {
   if (item.actor_type === 'admin') return '客服操作'
   if (item.actor_type === 'system') return '系统处理'
   return '用户操作'
 }
+
 function payloadRows(payload?: Record<string, unknown>) {
   if (!payload || typeof payload !== 'object') return []
   return Object.entries(payload).filter(
     ([, value]) => value !== null && value !== undefined && value !== ''
   )
 }
+
 function primaryPayloadRows(item: ProcessTimelineEvent) {
   return payloadRows(item.payload).filter(([key]) => primaryPayloadKeys.has(key))
 }
+
 function detailPayloadRows(item: ProcessTimelineEvent) {
   return payloadRows(item.payload).filter(([key]) => !primaryPayloadKeys.has(key))
 }
+
 function payloadLabel(key: string) {
   return payloadLabels[key] || key
 }
+
 function payloadValue(key: string, value: unknown) {
   if (key.endsWith('_cent')) return formatCentWithSymbol(Number(value || 0))
+  if (key === 'coin_consumed_m') return `${value} M`
+  if (key === 'round') return `第 ${value} 轮`
   if (key === 'turn')
     return value === 'owner' ? '号主' : value === 'renter' ? '租客' : String(value)
   if (key === 'account_source') return value === 'external' ? '外部上传' : '站内上传'
@@ -179,10 +260,135 @@ function payloadValue(key: string, value: unknown) {
   if (typeof value === 'object') return JSON.stringify(value)
   return String(value)
 }
+
+function itemVariant(key: string): PayloadItem['variant'] {
+  if (
+    key === 'owner_income_amount_cent' ||
+    key === 'profit_amount_cent' ||
+    key === 'settle_amount_cent'
+  ) {
+    return 'income'
+  }
+  if (key === 'renter_refund_amount_cent') {
+    return 'refund'
+  }
+  if (key === 'platform_fee_cent') {
+    return 'fee'
+  }
+  if (
+    key === 'deposit_deduct_amount_cent' ||
+    key === 'overshoot_amount_cent' ||
+    key === 'shortfall_cent' ||
+    key === 'deposit_hold_amount_cent'
+  ) {
+    return 'deduct'
+  }
+  if (key === 'rent_amount_cent' || key === 'deposit_amount_cent') {
+    return 'primary'
+  }
+  return 'neutral'
+}
+
+function categorizedPayload(item: ProcessTimelineEvent): PayloadCategory[] {
+  const detailRows = detailPayloadRows(item)
+  if (detailRows.length === 0) return []
+
+  const rowMap = new Map<string, unknown>(detailRows)
+  const usedKeys = new Set<string>()
+  const result: PayloadCategory[] = []
+
+  for (const cat of CATEGORY_DEFINITIONS) {
+    const items: PayloadItem[] = []
+    for (const k of cat.keys) {
+      if (rowMap.has(k)) {
+        usedKeys.add(k)
+        items.push({
+          key: k,
+          label: payloadLabel(k),
+          value: payloadValue(k, rowMap.get(k)),
+          variant: itemVariant(k),
+        })
+      }
+    }
+    if (items.length > 0) {
+      result.push({
+        id: cat.id,
+        title: cat.title,
+        icon: cat.icon,
+        items,
+      })
+    }
+  }
+
+  const remainingKeys = detailRows.filter(([k]) => !usedKeys.has(k))
+  if (remainingKeys.length > 0) {
+    const gameplayItems: PayloadItem[] = []
+    const metaItems: PayloadItem[] = []
+
+    for (const [k, v] of remainingKeys) {
+      const isMoney = k.endsWith('_cent')
+      const pItem: PayloadItem = {
+        key: k,
+        label: payloadLabel(k),
+        value: payloadValue(k, v),
+        variant: itemVariant(k),
+      }
+      if (isMoney) {
+        const finCat = result.find(c => c.id === 'financial')
+        if (finCat) {
+          finCat.items.push(pItem)
+          continue
+        }
+      }
+      if (
+        typeof v === 'number' ||
+        k.includes('kill') ||
+        k.includes('count') ||
+        k.includes('coin')
+      ) {
+        gameplayItems.push(pItem)
+      } else {
+        metaItems.push(pItem)
+      }
+    }
+
+    if (gameplayItems.length > 0) {
+      const existing = result.find(c => c.id === 'gameplay')
+      if (existing) {
+        existing.items.push(...gameplayItems)
+      } else {
+        result.push({
+          id: 'gameplay',
+          title: '消耗与游戏指标',
+          icon: '🎮',
+          items: gameplayItems,
+        })
+      }
+    }
+
+    if (metaItems.length > 0) {
+      const existing = result.find(c => c.id === 'meta')
+      if (existing) {
+        existing.items.push(...metaItems)
+      } else {
+        result.push({
+          id: 'meta',
+          title: '其他属性与单据',
+          icon: '📋',
+          items: metaItems,
+        })
+      }
+    }
+  }
+
+  return result
+}
+
 function stateValue(key: string, value: unknown) {
   const raw = String(value || '')
   return stateLabels[key]?.[raw] || raw || '-'
 }
+
 function stateChanges(item: ProcessTimelineEvent) {
   const before = item.state_before || {}
   const after = item.state_after || {}
@@ -194,6 +400,27 @@ function stateChanges(item: ProcessTimelineEvent) {
       after: stateValue(key, after[key]),
     }))
 }
+
+function stateToneClass(val: string) {
+  if (
+    ['已完成', '已结算', '租客已收号', '已归还', '处理完成', '已线下结算'].some(s =>
+      val.includes(s)
+    )
+  ) {
+    return 'tone-success'
+  }
+  if (['租用中', '处理中'].some(s => val.includes(s))) {
+    return 'tone-primary'
+  }
+  if (['待', '等待', '未结算', '未开始'].some(s => val.includes(s))) {
+    return 'tone-warning'
+  }
+  if (['已取消', '已关闭', '异常', '争议'].some(s => val.includes(s))) {
+    return 'tone-danger'
+  }
+  return 'tone-neutral'
+}
+
 function hasMore(item: ProcessTimelineEvent) {
   return detailPayloadRows(item).length > 0 || stateChanges(item).length > 0
 }
@@ -202,46 +429,108 @@ function hasMore(item: ProcessTimelineEvent) {
 <template>
   <el-empty v-if="props.events.length === 0" :description="props.emptyText || '暂无过程记录'" />
   <div v-else class="process-timeline">
-    <article v-for="item in props.events" :key="item.id" class="process-item">
-      <span class="process-dot"></span>
+    <article
+      v-for="item in props.events"
+      :key="item.id"
+      class="process-item"
+      :class="`process-item-${item.stage}`"
+    >
+      <span class="process-dot" :class="`dot-${item.stage}`"></span>
       <header class="process-heading">
         <div class="heading-main">
-          <span class="stage-badge">{{ stageLabel(item.stage) }}</span>
-          <strong>{{ actionLabel(item.action) }}</strong>
+          <span class="stage-badge" :class="`stage-${item.stage}`">
+            {{ stageLabel(item.stage) }}
+          </span>
+          <strong class="action-title">{{ actionLabel(item.action) }}</strong>
         </div>
-        <time>{{ formatDateTime(item.created_at) }}</time>
+        <time class="process-time">{{ formatDateTime(item.created_at) }}</time>
       </header>
 
       <div class="process-people">
-        <span
-          ><b>{{ actorRole(item) }}</b
-          >{{ actorLabel(item) }}</span
+        <span class="actor-badge" :class="`actor-${item.actor_type}`">
+          {{ actorRole(item) }}
+        </span>
+        <span class="actor-name">{{ actorLabel(item) }}</span>
+        <span v-if="item.target_name" class="target-text">
+          <span class="target-arrow">➔</span> 关联对象：{{ item.target_name }}
+        </span>
+      </div>
+
+      <div v-if="item.content" class="process-content-card">
+        <div class="content-text">{{ item.content }}</div>
+      </div>
+
+      <div v-if="item.reason" class="process-reason-card">
+        <strong class="reason-tag">备注说明</strong>
+        <span class="reason-text">{{ item.reason }}</span>
+      </div>
+
+      <!-- High-visibility Summary Badges -->
+      <div v-if="primaryPayloadRows(item).length" class="process-summary-grid">
+        <div
+          v-for="[key, value] in primaryPayloadRows(item)"
+          :key="key"
+          class="summary-pill"
+          :class="`summary-pill-${itemVariant(key)}`"
         >
-        <span v-if="item.target_name" class="target-text">通知/关联：{{ item.target_name }}</span>
-      </div>
-      <p v-if="item.content" class="process-content">{{ item.content }}</p>
-      <p v-if="item.reason" class="process-reason"><b>备注/原因</b>{{ item.reason }}</p>
-
-      <div v-if="primaryPayloadRows(item).length" class="process-summary">
-        <div v-for="[key, value] in primaryPayloadRows(item)" :key="key">
-          <span>{{ payloadLabel(key) }}</span>
-          <strong>{{ payloadValue(key, value) }}</strong>
+          <span class="summary-label">{{ payloadLabel(key) }}</span>
+          <strong class="summary-val">{{ payloadValue(key, value) }}</strong>
         </div>
       </div>
 
+      <!-- Expandable Structured Details -->
       <details v-if="hasMore(item)" class="process-details">
-        <summary>查看完整明细与状态变化</summary>
-        <div v-if="detailPayloadRows(item).length" class="process-payload">
-          <div v-for="[key, value] in detailPayloadRows(item)" :key="key">
-            <span>{{ payloadLabel(key) }}</span>
-            <strong>{{ payloadValue(key, value) }}</strong>
-          </div>
-        </div>
-        <div v-if="stateChanges(item).length" class="process-state">
-          <b>状态变化</b>
-          <span v-for="change in stateChanges(item)" :key="change.label">
-            {{ change.label }}：{{ change.before }} <i>→</i> {{ change.after }}
+        <summary class="process-details-summary">
+          <span class="toggle-left">
+            <span class="toggle-arrow">▾</span>
+            <span class="toggle-title">查看完整明细与状态变化</span>
           </span>
+          <span class="toggle-badge">
+            {{ detailPayloadRows(item).length }} 项明细指标<span v-if="stateChanges(item).length">
+              · {{ stateChanges(item).length }} 项状态变化</span
+            >
+          </span>
+        </summary>
+
+        <div class="process-details-body">
+          <!-- Categorized Detail Groups -->
+          <div v-for="cat in categorizedPayload(item)" :key="cat.id" class="detail-category-block">
+            <div class="category-header">
+              <span class="category-icon">{{ cat.icon }}</span>
+              <span class="category-title">{{ cat.title }}</span>
+              <span class="category-count">({{ cat.items.length }})</span>
+            </div>
+            <div class="category-grid">
+              <div
+                v-for="sub in cat.items"
+                :key="sub.key"
+                class="metric-box"
+                :class="`metric-box-${sub.variant}`"
+              >
+                <div class="metric-label">{{ sub.label }}</div>
+                <div class="metric-value">{{ sub.value }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Business State Changes Flow -->
+          <div v-if="stateChanges(item).length" class="state-changes-block">
+            <div class="category-header">
+              <span class="category-icon">🔄</span>
+              <span class="category-title">业务状态流转</span>
+              <span class="category-count">({{ stateChanges(item).length }})</span>
+            </div>
+            <div class="state-flow-list">
+              <div v-for="change in stateChanges(item)" :key="change.label" class="state-flow-item">
+                <span class="state-field-badge">{{ change.label }}</span>
+                <span class="state-node state-node-before">{{ change.before }}</span>
+                <span class="state-arrow">➔</span>
+                <span class="state-node state-node-after" :class="stateToneClass(change.after)">
+                  {{ change.after }}
+                </span>
+              </div>
+            </div>
+          </div>
         </div>
       </details>
 
@@ -262,212 +551,588 @@ function hasMore(item: ProcessTimelineEvent) {
 <style scoped>
 .process-timeline {
   display: grid;
-  gap: 12px;
-  padding-left: 4px;
+  gap: 14px;
+  padding-left: 6px;
+  position: relative;
 }
+
 .process-item {
   position: relative;
-  padding: 14px 16px 14px 22px;
-  border: 1px solid #e5eaf2;
-  border-radius: 10px;
-  background: #fff;
-  box-shadow: 0 1px 2px rgb(15 23 42 / 2%);
+  padding: 16px 20px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.04);
+  transition:
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
 }
+
+.process-item:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06);
+}
+
 .process-item::before {
   content: '';
   position: absolute;
-  top: -13px;
+  top: -15px;
   bottom: calc(100% - 1px);
-  left: -1px;
-  width: 1px;
-  background: #dce5f0;
+  left: -2px;
+  width: 2px;
+  background: #e2e8f0;
 }
+
 .process-item:first-child::before {
   display: none;
 }
+
 .process-dot {
   position: absolute;
-  left: -5px;
-  top: 21px;
-  width: 9px;
-  height: 9px;
-  border: 2px solid #fff;
+  left: -7px;
+  top: 22px;
+  width: 12px;
+  height: 12px;
+  border: 2px solid #ffffff;
   border-radius: 50%;
   background: #ff6a00;
-  box-shadow: 0 0 0 1px #f5a561;
+  box-shadow: 0 0 0 3px #fed7aa;
 }
+
+.dot-checkout {
+  background: #10b981;
+  box-shadow: 0 0 0 3px #d1fae5;
+}
+
+.dot-handoff {
+  background: #3b82f6;
+  box-shadow: 0 0 0 3px #dbeafe;
+}
+
+.dot-settlement {
+  background: #8b5cf6;
+  box-shadow: 0 0 0 3px #ede9fe;
+}
+
+.dot-dispute {
+  background: #f43f5e;
+  box-shadow: 0 0 0 3px #ffe4e6;
+}
+
+.dot-pickup {
+  background: #f59e0b;
+  box-shadow: 0 0 0 3px #fef3c7;
+}
+
 .process-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
 }
+
 .heading-main {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   min-width: 0;
 }
-.heading-main strong {
-  color: #182232;
+
+.action-title {
+  color: #0f172a;
   font-size: 15px;
+  font-weight: 700;
 }
+
 .stage-badge {
   flex: none;
-  padding: 2px 7px;
-  border-radius: 4px;
-  background: #fff3e8;
-  color: #d85d00;
+  padding: 3px 8px;
+  border-radius: 6px;
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 700;
+  border: 1px solid transparent;
 }
-.process-heading time {
+
+.stage-checkout {
+  background: #ecfdf5;
+  color: #047857;
+  border-color: #a7f3d0;
+}
+
+.stage-handoff {
+  background: #eff6ff;
+  color: #1d4ed8;
+  border-color: #bfdbfe;
+}
+
+.stage-settlement {
+  background: #f5f3ff;
+  color: #6d28d9;
+  border-color: #ddd6fe;
+}
+
+.stage-dispute {
+  background: #fff1f2;
+  color: #be123c;
+  border-color: #fecaca;
+}
+
+.stage-pickup {
+  background: #fffbeb;
+  color: #b45309;
+  border-color: #fde68a;
+}
+
+.process-time {
   flex: none;
   color: #94a3b8;
   font-size: 12px;
   white-space: nowrap;
+  font-variant-numeric: tabular-nums;
 }
+
 .process-people {
   display: flex;
+  align-items: center;
   flex-wrap: wrap;
-  gap: 6px 18px;
+  gap: 8px 12px;
   margin-top: 8px;
-  color: #64748b;
   font-size: 12px;
 }
-.process-people b {
-  margin-right: 6px;
-  color: #475569;
+
+.actor-badge {
+  padding: 2px 7px;
+  border-radius: 4px;
+  font-size: 11px;
   font-weight: 600;
 }
-.target-text {
-  color: #718096;
+
+.actor-admin {
+  background: #fffbeb;
+  color: #92400e;
+  border: 1px solid #fde68a;
 }
-.process-content,
-.process-reason {
-  margin: 10px 0 0;
+
+.actor-system {
+  background: #e0f2fe;
+  color: #0369a1;
+  border: 1px solid #bae6fd;
+}
+
+.actor-user {
+  background: #f1f5f9;
+  color: #475569;
+  border: 1px solid #e2e8f0;
+}
+
+.actor-name {
+  font-weight: 600;
   color: #334155;
+}
+
+.target-text {
+  color: #64748b;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.target-arrow {
+  color: #94a3b8;
+}
+
+.process-content-card {
+  margin-top: 10px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-left: 3px solid #3b82f6;
+}
+
+.content-text {
+  color: #334155;
+  font-size: 13px;
   line-height: 1.65;
   white-space: pre-wrap;
 }
-.process-reason {
-  padding: 8px 10px;
-  border-radius: 6px;
-  background: #fff9ed;
-  color: #9a5b13;
+
+.process-reason-card {
+  margin-top: 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: #fffbeb;
+  border: 1px solid #fef3c7;
+  border-left: 3px solid #f59e0b;
+  color: #92400e;
+  font-size: 12px;
+  line-height: 1.5;
 }
-.process-reason b {
+
+.reason-tag {
+  font-weight: 700;
   margin-right: 8px;
 }
-.process-summary {
+
+.process-summary-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-top: 11px;
+  margin-top: 12px;
 }
-.process-summary div {
-  display: flex;
+
+.summary-pill {
+  display: inline-flex;
   align-items: baseline;
-  gap: 7px;
-  padding: 7px 10px;
-  border: 1px solid #e6edf5;
-  border-radius: 6px;
-  background: #f8fafc;
-}
-.process-summary span {
-  color: #64748b;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 8px;
   font-size: 12px;
+  border: 1px solid transparent;
 }
-.process-summary strong {
-  color: #1e293b;
+
+.summary-pill-income {
+  background: #ecfdf5;
+  border-color: #a7f3d0;
+  color: #065f46;
+}
+
+.summary-pill-income .summary-val {
+  color: #047857;
+  font-weight: 700;
   font-size: 13px;
 }
-.process-details {
-  margin-top: 10px;
+
+.summary-pill-refund {
+  background: #eff6ff;
+  border-color: #bfdbfe;
+  color: #1e40af;
 }
-.process-details summary {
-  width: fit-content;
-  color: #477fc1;
-  font-size: 12px;
+
+.summary-pill-refund .summary-val {
+  color: #1d4ed8;
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.summary-pill-fee {
+  background: #f5f3ff;
+  border-color: #ddd6fe;
+  color: #5b21b6;
+}
+
+.summary-pill-fee .summary-val {
+  color: #6d28d9;
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.summary-pill-deduct {
+  background: #fff7ed;
+  border-color: #fed7aa;
+  color: #9a3412;
+}
+
+.summary-pill-deduct .summary-val {
+  color: #c2410c;
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.summary-pill-primary {
+  background: #f1f5f9;
+  border-color: #cbd5e1;
+  color: #334155;
+}
+
+.summary-pill-primary .summary-val {
+  color: #0f172a;
+  font-weight: 700;
+  font-size: 13px;
+}
+
+.summary-pill-neutral {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+  color: #64748b;
+}
+
+.summary-pill-neutral .summary-val {
+  color: #1e293b;
+  font-weight: 600;
+}
+
+.summary-label {
+  font-weight: 500;
+}
+
+.summary-val {
+  font-variant-numeric: tabular-nums;
+}
+
+.process-details {
+  margin-top: 12px;
+}
+
+.process-details-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #f8fafc;
   cursor: pointer;
   user-select: none;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+  list-style: none;
 }
-.process-details[open] summary {
-  margin-bottom: 9px;
+
+.process-details-summary::-webkit-details-marker {
+  display: none;
 }
-.process-payload {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 7px 12px;
-  padding: 10px;
-  border-radius: 7px;
-  background: #f4f7fb;
+
+.process-details-summary:hover {
+  background: #f1f5f9;
+  border-color: #cbd5e1;
 }
-.process-payload div {
+
+.toggle-left {
   display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  font-size: 12px;
+  align-items: center;
+  gap: 8px;
 }
-.process-payload span {
+
+.toggle-arrow {
+  display: inline-block;
+  font-size: 12px;
+  color: #2563eb;
+  transition: transform 0.2s ease;
+  transform: rotate(-90deg);
+}
+
+.process-details[open] .toggle-arrow {
+  transform: rotate(0deg);
+}
+
+.toggle-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #2563eb;
+}
+
+.toggle-badge {
+  font-size: 12px;
+  color: #64748b;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 2px 8px;
+}
+
+.process-details-body {
+  margin-top: 10px;
+  padding: 14px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #fafbfc;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.detail-category-block,
+.state-changes-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.category-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #334155;
+  padding-bottom: 4px;
+  border-bottom: 1px dashed #e2e8f0;
+}
+
+.category-icon {
+  font-size: 13px;
+}
+
+.category-count {
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: 500;
+}
+
+.category-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+  gap: 8px 10px;
+}
+
+.metric-box {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  padding: 8px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.metric-box:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+
+.metric-label {
+  font-size: 12px;
   color: #64748b;
 }
-.process-payload strong {
-  color: #1e293b;
-  text-align: right;
+
+.metric-value {
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
+  font-variant-numeric: tabular-nums;
   word-break: break-word;
 }
-.process-state {
+
+.metric-box-income .metric-value {
+  color: #059669;
+}
+
+.metric-box-refund .metric-value {
+  color: #2563eb;
+}
+
+.metric-box-fee .metric-value {
+  color: #7c3aed;
+}
+
+.metric-box-deduct .metric-value {
+  color: #c2410c;
+}
+
+.metric-box-primary .metric-value {
+  color: #0f172a;
+}
+
+.state-flow-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 6px 12px;
-  margin-top: 9px;
-  color: #64748b;
+  gap: 8px 12px;
+}
+
+.state-flow-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
   font-size: 12px;
 }
-.process-state b {
+
+.state-field-badge {
+  font-weight: 600;
   color: #475569;
+  background: #f1f5f9;
+  padding: 1px 6px;
+  border-radius: 4px;
 }
-.process-state span {
-  padding-left: 10px;
-  border-left: 1px solid #dbe4ee;
+
+.state-node {
+  padding: 1px 7px;
+  border-radius: 4px;
+  font-weight: 500;
 }
-.process-state i {
-  color: #94a3b8;
-  font-style: normal;
+
+.state-node-before {
+  background: #f8fafc;
+  color: #64748b;
+  border: 1px solid #e2e8f0;
 }
+
+.state-arrow {
+  color: #3b82f6;
+  font-size: 10px;
+}
+
+.state-node-after {
+  font-weight: 600;
+}
+
+.tone-success {
+  background: #ecfdf5;
+  color: #047857;
+  border: 1px solid #a7f3d0;
+}
+
+.tone-primary {
+  background: #eff6ff;
+  color: #1d4ed8;
+  border: 1px solid #bfdbfe;
+}
+
+.tone-warning {
+  background: #fffbeb;
+  color: #b45309;
+  border: 1px solid #fde68a;
+}
+
+.tone-danger {
+  background: #fef2f2;
+  color: #b91c1c;
+  border: 1px solid #fecaca;
+}
+
+.tone-neutral {
+  background: #f8fafc;
+  color: #475569;
+  border: 1px solid #e2e8f0;
+}
+
 .process-attachments {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 10px;
 }
+
 .process-attachments :deep(.el-image) {
   width: 76px;
   height: 76px;
   border: 1px solid #e2e8f0;
   border-radius: 6px;
 }
+
 @media (max-width: 700px) {
   .process-item {
-    padding: 13px 12px 13px 18px;
+    padding: 14px 14px 14px 16px;
   }
   .process-heading {
     align-items: flex-start;
     flex-direction: column;
-    gap: 5px;
+    gap: 4px;
   }
-  .process-summary {
+  .process-summary-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  .process-summary div {
-    min-width: 0;
-    flex-direction: column;
-    gap: 2px;
-  }
-  .process-payload {
-    grid-template-columns: 1fr;
+  .category-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 </style>
diff --git a/frontend/src/features/admin/views/AdminOrderDetailView.css b/frontend/src/features/admin/views/AdminOrderDetailView.css
index 00c90e9..27a2965 100644
--- a/frontend/src/features/admin/views/AdminOrderDetailView.css
+++ b/frontend/src/features/admin/views/AdminOrderDetailView.css
@@ -178,8 +178,8 @@
 
 .record-meta {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 6px 12px;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 8px 14px;
   color: #52616f;
   font-size: 12px;
   line-height: 1.5;
diff --git a/frontend/src/features/orders/components/CheckoutTrialPreview.vue b/frontend/src/features/orders/components/CheckoutTrialPreview.vue
new file mode 100644
index 0000000..dd5c27b
--- /dev/null
+++ b/frontend/src/features/orders/components/CheckoutTrialPreview.vue
@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import type { CheckoutSimulation } from '../composables/useCheckoutSimulator'
+import { money } from '../composables/useOrderSnapshot'
+
+const props = withDefaults(
+  defineProps<{
+    simulation: CheckoutSimulation
+    variant?: 'desktop' | 'mobile'
+  }>(),
+  { variant: 'desktop' }
+)
+</script>
+
+<template>
+  <div v-if="props.simulation" :class="['trial-preview-container', props.variant]">
+    <!-- ───────────── 号主视角 ───────────── -->
+    <template v-if="props.simulation.role === 'owner'">
+      <div class="trial-header">
+        <span class="trial-title"> <i class="trial-icon">💰</i> 结账到手试算（仅您可见） </span>
+        <span v-if="props.simulation.isDepositSufficient" class="badge success">押金充足</span>
+        <span v-else class="badge danger">押金不足</span>
+      </div>
+
+      <div class="trial-body">
+        <div class="main-metric">
+          <span class="label">预计最终到手总额</span>
+          <strong class="value income">¥{{ money(props.simulation.totalIncomeYuan) }}</strong>
+        </div>
+
+        <div class="metric-breakdown">
+          <div class="breakdown-item">
+            <span>租金收益</span>
+            <span>¥{{ money(props.simulation.rentIncomeYuan) }}</span>
+          </div>
+          <div v-if="props.simulation.damageCompensationYuan > 0" class="breakdown-item highlight">
+            <span>损耗/损坏赔偿 (全额到手)</span>
+            <span class="text-green">+¥{{ money(props.simulation.damageCompensationYuan) }}</span>
+          </div>
+        </div>
+
+        <div v-if="props.simulation.isDepositSufficient" class="trial-note info">
+          <span>💡 租客押金充足，方案确认后款项将全额转入您的可用余额，平台 0 抽成。</span>
+        </div>
+        <div v-else class="trial-note warning">
+          <span
+            >⚠️ 租客押金不足差额 ¥{{
+              money(props.simulation.shortfallYuan)
+            }}，无法自动完结，需协商调低金额或发起争议。</span
+          >
+        </div>
+      </div>
+    </template>
+
+    <!-- ───────────── 租客视角 ───────────── -->
+    <template v-else-if="props.simulation.role === 'renter'">
+      <div class="trial-header">
+        <span class="trial-title"> <i class="trial-icon">🧾</i> 费用与退款试算（仅您可见） </span>
+        <span v-if="props.simulation.isDepositSufficient" class="badge info">正常结算</span>
+        <span v-else class="badge danger">需补差额</span>
+      </div>
+
+      <div class="trial-body">
+        <div class="metrics-grid">
+          <div class="main-metric">
+            <span class="label">实际租用消费</span>
+            <strong class="value">¥{{ money(props.simulation.actualCostYuan) }}</strong>
+          </div>
+          <div class="main-metric">
+            <span class="label">预计原路退还</span>
+            <strong class="value refund">¥{{ money(props.simulation.totalRefundYuan) }}</strong>
+          </div>
+        </div>
+
+        <div class="metric-breakdown">
+          <div class="breakdown-item">
+            <span>实际使用租金</span>
+            <span>¥{{ money(props.simulation.buyerRentYuan) }}</span>
+          </div>
+          <div v-if="props.simulation.damageDeductYuan > 0" class="breakdown-item">
+            <span>损耗赔偿扣除 (从押金)</span>
+            <span class="text-danger">-¥{{ money(props.simulation.damageDeductYuan) }}</span>
+          </div>
+          <div v-if="props.simulation.rentRefundYuan > 0" class="breakdown-item">
+            <span>未用租金退还</span>
+            <span class="text-green">+¥{{ money(props.simulation.rentRefundYuan) }}</span>
+          </div>
+          <div class="breakdown-item">
+            <span>剩余押金退还</span>
+            <span class="text-green">+¥{{ money(props.simulation.depositRefundYuan) }}</span>
+          </div>
+        </div>
+
+        <div v-if="props.simulation.overshootYuan > 0" class="trial-note warning">
+          <span
+            >ℹ️ 哈夫币使用已打超预收，超出金额 ¥{{
+              money(props.simulation.overshootYuan)
+            }}
+            已自动从押金抵扣。</span
+          >
+        </div>
+        <div v-if="!props.simulation.isDepositSufficient" class="trial-note danger">
+          <span
+            >⚠️ 押金不足以抵扣打超与赔偿，差额 ¥{{
+              money(props.simulation.shortfallYuan)
+            }}，无法自动同意。</span
+          >
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.trial-preview-container {
+  margin-top: 12px;
+  padding: 12px 14px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #334155;
+  transition: all 0.2s ease;
+}
+
+.trial-preview-container.mobile {
+  margin: 10px 12px 16px;
+  padding: 10px 12px;
+  font-size: 12px;
+}
+
+.trial-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.trial-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: 600;
+  color: #1e293b;
+}
+
+.trial-icon {
+  font-style: normal;
+}
+
+.badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+.badge.success {
+  background: #dcfce7;
+  color: #15803d;
+}
+
+.badge.info {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+
+.badge.danger {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.main-metric {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 6px 10px;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 6px;
+  margin-bottom: 6px;
+}
+
+.main-metric .label {
+  font-size: 12px;
+  color: #64748b;
+}
+
+.main-metric .value {
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.main-metric .value.income {
+  color: #16a34a;
+}
+
+.main-metric .value.refund {
+  color: #0284c7;
+}
+
+.metric-breakdown {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 6px;
+}
+
+.breakdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #475569;
+}
+
+.breakdown-item.highlight {
+  font-weight: 600;
+}
+
+.text-green {
+  color: #16a34a;
+  font-weight: 600;
+}
+
+.text-danger {
+  color: #dc2626;
+  font-weight: 600;
+}
+
+.trial-note {
+  margin-top: 8px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.trial-note.info {
+  background: #f0fdf4;
+  color: #166534;
+  border: 1px solid #bbf7d0;
+}
+
+.trial-note.warning {
+  background: #fffbeb;
+  color: #92400e;
+  border: 1px solid #fde68a;
+}
+
+.trial-note.danger {
+  background: #fef2f2;
+  color: #991b1b;
+  border: 1px solid #fecaca;
+}
+</style>
diff --git a/frontend/src/features/orders/composables/useCheckoutSimulator.ts b/frontend/src/features/orders/composables/useCheckoutSimulator.ts
new file mode 100644
index 0000000..f6d49a4
--- /dev/null
+++ b/frontend/src/features/orders/composables/useCheckoutSimulator.ts
@@ -0,0 +1,169 @@
+import { computed, type Ref } from 'vue'
+import type { Order } from '../api/orders'
+import type { CounterFormState } from './useOrderActions'
+import { readSnapshot, roundMoney, roundQuantity, readNumber } from './useOrderSnapshot'
+
+export interface OwnerSimulation {
+  role: 'owner'
+  totalIncomeYuan: number
+  rentIncomeYuan: number
+  damageCompensationYuan: number
+  lossCompensationYuan: number
+  shortfallYuan: number
+  isDepositSufficient: boolean
+}
+
+export interface RenterSimulation {
+  role: 'renter'
+  actualCostYuan: number
+  buyerRentYuan: number
+  damageDeductYuan: number
+  totalRefundYuan: number
+  rentRefundYuan: number
+  depositRefundYuan: number
+  overshootYuan: number
+  shortfallYuan: number
+  isDepositSufficient: boolean
+}
+
+export type CheckoutSimulation = OwnerSimulation | RenterSimulation | null
+
+export function useCheckoutSimulator(options: {
+  order: Ref<Order | null>
+  isOwner: Ref<boolean>
+  isRenter: Ref<boolean>
+  form: Ref<CounterFormState>
+}) {
+  return computed<CheckoutSimulation>(() => {
+    const o = options.order.value
+    if (!o) return null
+
+    const consumedM = roundQuantity(Math.max(Number(options.form.value.coin_consumed_m || 0), 0))
+    const consumableYuan = roundMoney(
+      Math.max(Number(options.form.value.consumableAmountYuan || 0), 0)
+    )
+    const depositDeductYuan = roundMoney(
+      Math.max(Number(options.form.value.depositDeductAmountYuan || 0), 0)
+    )
+
+    const snapshot = readSnapshot(o)
+    const assetSummary = snapshot?.asset_summary as Record<string, unknown> | undefined
+    const priceBreakdown =
+      ((assetSummary?.price_breakdown || snapshot?.price_breakdown) as
+        | Record<string, unknown>
+        | undefined) || {}
+
+    const totalCoinM = roundQuantity(readNumber(snapshot?.haf_coin_amount) / 1000000)
+    const buyerRatio = readNumber(priceBreakdown['buyer_ratio'])
+    const sellerRatio = readNumber(priceBreakdown['seller_ratio'])
+    const buyerCoinBaseYuan = readNumber(priceBreakdown['buyer_coin_base_price'])
+    const sellerCoinBaseYuan = readNumber(priceBreakdown['seller_coin_base_price'])
+    const prepaidConsumableYuan = readNumber(priceBreakdown['consumable_price'])
+
+    const coinUseRatio = totalCoinM > 0 ? roundQuantity(consumedM / totalCoinM) : 1
+    const isCoinOvershoot = totalCoinM > 0 && consumedM > totalCoinM
+    const depositYuan = Number(o.deposit_amount_cent || 0) / 100
+
+    if (options.isOwner.value) {
+      // ────────── 号主视角试算 ──────────
+      let ownerCoinYuan =
+        sellerRatio > 0 && (totalCoinM > 0 || consumedM > 0)
+          ? roundMoney((consumedM * 100) / sellerRatio)
+          : roundMoney(sellerCoinBaseYuan * coinUseRatio)
+      if (!isCoinOvershoot) {
+        ownerCoinYuan = Math.min(
+          ownerCoinYuan,
+          sellerCoinBaseYuan > 0 ? sellerCoinBaseYuan : (o.owner_rent_amount_cent || 0) / 100
+        )
+      }
+
+      // 消耗品/后置损耗计算
+      let ownerConsumableYuan: number
+      if (prepaidConsumableYuan > 0) {
+        const ownerRentBaseYuan = (o.owner_rent_amount_cent || 0) / 100
+        const prepaidOwnerConsumableYuan = Math.max(
+          roundMoney(ownerRentBaseYuan - sellerCoinBaseYuan),
+          0
+        )
+        if (consumableYuan <= prepaidConsumableYuan) {
+          ownerConsumableYuan = roundMoney(
+            prepaidOwnerConsumableYuan * (consumableYuan / prepaidConsumableYuan)
+          )
+        } else {
+          // 超出预收部分全额归号主
+          const excessYuan = roundMoney(consumableYuan - prepaidConsumableYuan)
+          ownerConsumableYuan = roundMoney(prepaidOwnerConsumableYuan + excessYuan)
+        }
+      } else {
+        // 无预收消耗品：后置申报损耗 100% 归号主
+        ownerConsumableYuan = consumableYuan
+      }
+
+      const ownerRentIncomeYuan = roundMoney(ownerCoinYuan + ownerConsumableYuan)
+
+      // 押金赔付覆盖与差额
+      const damageCoveredYuan = Math.min(depositDeductYuan, depositYuan)
+      const shortfallYuan = Math.max(roundMoney(depositDeductYuan - depositYuan), 0)
+      const totalIncomeYuan = roundMoney(ownerRentIncomeYuan + damageCoveredYuan)
+
+      return {
+        role: 'owner',
+        totalIncomeYuan,
+        rentIncomeYuan: ownerRentIncomeYuan,
+        damageCompensationYuan: damageCoveredYuan,
+        lossCompensationYuan: ownerConsumableYuan,
+        shortfallYuan,
+        isDepositSufficient: shortfallYuan <= 0,
+      }
+    }
+
+    if (options.isRenter.value) {
+      // ────────── 租客视角试算 ──────────
+      let buyerCoinYuan =
+        buyerRatio > 0 && (totalCoinM > 0 || consumedM > 0)
+          ? roundMoney((consumedM * 100) / buyerRatio)
+          : roundMoney(buyerCoinBaseYuan * coinUseRatio)
+      if (!isCoinOvershoot) {
+        buyerCoinYuan = Math.min(
+          buyerCoinYuan,
+          buyerCoinBaseYuan > 0 ? buyerCoinBaseYuan : (o.rent_amount_cent || 0) / 100
+        )
+      }
+
+      const actualBuyerRentYuan = roundMoney(buyerCoinYuan + consumableYuan)
+      const prepaidRentYuan = (o.rent_amount_cent || 0) / 100
+      const rentOvershootYuan = Math.max(roundMoney(actualBuyerRentYuan - prepaidRentYuan), 0)
+      const rentRefundYuan = Math.max(roundMoney(prepaidRentYuan - actualBuyerRentYuan), 0)
+
+      const damageAppliedYuan = Math.min(depositDeductYuan, depositYuan)
+      const depositLeftAfterDamage = Math.max(roundMoney(depositYuan - damageAppliedYuan), 0)
+      const overshootCoveredYuan = Math.min(rentOvershootYuan, depositLeftAfterDamage)
+      const depositRefundYuan = Math.max(
+        roundMoney(depositLeftAfterDamage - overshootCoveredYuan),
+        0
+      )
+
+      const shortfallYuan = roundMoney(
+        Math.max(roundMoney(depositDeductYuan - damageAppliedYuan), 0) +
+          Math.max(roundMoney(rentOvershootYuan - overshootCoveredYuan), 0)
+      )
+      const totalRefundYuan = roundMoney(rentRefundYuan + depositRefundYuan)
+      const actualCostYuan = roundMoney(actualBuyerRentYuan + damageAppliedYuan)
+
+      return {
+        role: 'renter',
+        actualCostYuan,
+        buyerRentYuan: actualBuyerRentYuan,
+        damageDeductYuan: depositDeductYuan,
+        totalRefundYuan,
+        rentRefundYuan,
+        depositRefundYuan,
+        overshootYuan: rentOvershootYuan,
+        shortfallYuan,
+        isDepositSufficient: shortfallYuan <= 0,
+      }
+    }
+
+    return null
+  })
+}
diff --git a/frontend/src/features/orders/views/MobileOrderDetailView.vue b/frontend/src/features/orders/views/MobileOrderDetailView.vue
index a3d1e62..fb4fa36 100644
--- a/frontend/src/features/orders/views/MobileOrderDetailView.vue
+++ b/frontend/src/features/orders/views/MobileOrderDetailView.vue
@@ -5,6 +5,8 @@ import { showDialog, showToast } from 'vant'
 
 import MobilePaymentCashierPopup from '@/features/orders/components/MobilePaymentCashierPopup.vue'
 import MobilePayWaySelectPopup from '@/features/orders/components/MobilePayWaySelectPopup.vue'
+import CheckoutTrialPreview from '@/features/orders/components/CheckoutTrialPreview.vue'
+import { useCheckoutSimulator } from '@/features/orders/composables/useCheckoutSimulator'
 import { useOrderActions, CONFIRMABLE_ACTIONS } from '@/features/orders/composables/useOrderActions'
 import { useMobilePaymentCashier } from '@/features/orders/composables/useMobilePaymentCashier'
 import { useMobilePayWaySelect } from '@/features/orders/composables/useMobilePayWaySelect'
@@ -129,6 +131,13 @@ const showCheckoutCounterAction = computed(
       (isRenter.value && order.value.status === 'pending_checkout_accept'))
 )
 
+const checkoutSimulation = useCheckoutSimulator({
+  order,
+  isOwner,
+  isRenter,
+  form: counterForm,
+})
+
 // 状态颜色映射（vant 标签主题）。
 function getStatusTagType(status: string) {
   if (['completed', 'received'].includes(status)) return 'success'
@@ -505,7 +514,7 @@ async function copyListingCode() {
           }}。可填实际哈夫币消耗（允许超过发布量），打超按比例从押金扣。提案将交给对方确认。
         </p>
         <van-cell-group :border="false">
-          <van-field label="额外消耗品已用">
+          <van-field label="物资/损耗金额">
             <template #input>
               <input
                 v-model.number="counterForm.consumableAmountYuan"
@@ -533,6 +542,9 @@ async function copyListingCode() {
             </template>
           </van-field>
         </van-cell-group>
+
+        <!-- 实时结算试算预览（仅展示当前角色自身收支，完全屏蔽平台服务费） -->
+        <CheckoutTrialPreview :simulation="checkoutSimulation" variant="mobile" />
         <van-field
           v-model="counterForm.reason"
           rows="2"
diff --git a/frontend/src/features/orders/views/OrderDetailView.vue b/frontend/src/features/orders/views/OrderDetailView.vue
index 9a5c690..3581e66 100644
--- a/frontend/src/features/orders/views/OrderDetailView.vue
+++ b/frontend/src/features/orders/views/OrderDetailView.vue
@@ -12,6 +12,8 @@ import {
   OrderHandoffTimeline,
   OrderResourceUsageEditor,
 } from '@/features/orders'
+import CheckoutTrialPreview from '@/features/orders/components/CheckoutTrialPreview.vue'
+import { useCheckoutSimulator } from '@/features/orders/composables/useCheckoutSimulator'
 import { useOrderActions } from '@/features/orders/composables/useOrderActions'
 import { useOrderPaymentCashier } from '@/features/orders/composables/useOrderPaymentCashier'
 import { formatCent } from '@/shared/utils/money'
@@ -128,6 +130,13 @@ const checkingPayment = cashier.checkingPayment
 const paymentPayURL = cashier.payURL
 const activePayWayLabel = computedPayWayLabel(activePayment)
 const handoffFocused = ref(false)
+
+const checkoutSimulation = useCheckoutSimulator({
+  order,
+  isOwner,
+  isRenter,
+  form: counterForm,
+})
 const hasSidebarActions = computed(() => {
   if (!order.value) return false
   return (
@@ -532,7 +541,7 @@ watch([() => route.query.focus, order, loading], () => {
             </p>
             <h3 class="sub-title">调整消耗与扣款</h3>
             <el-form class="form-grid" label-position="top">
-              <el-form-item label="额外消耗品已用金额">
+              <el-form-item label="物资/后置损耗金额（元）">
                 <el-input-number
                   v-model="counterForm.consumableAmountYuan"
                   class="full-control"
@@ -560,6 +569,10 @@ watch([() => route.query.focus, order, loading], () => {
                 />
               </el-form-item>
             </el-form>
+
+            <!-- 实时结算试算预览（仅展示当前角色自身收支，完全屏蔽平台服务费） -->
+            <CheckoutTrialPreview :simulation="checkoutSimulation" variant="desktop" />
+
             <el-input
               v-model="counterForm.reason"
               type="textarea"