From 23a26aa779b7b012a12f39b4c7978bde674dcebd Mon Sep 17 00:00:00 2001
From: yml <yml@yml.com>
Date: Wed, 3 Jun 2026 22:48:07 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BC=98=E5=8C=96=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components.d.ts                      |   4 +
 .../src/views/account/OrderDetailView.vue     | 953 ++++++++++++++----
 2 files changed, 757 insertions(+), 200 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 5a58502..32b6069 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -40,12 +40,16 @@ declare module 'vue' {
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElStep: typeof import('element-plus/es')['ElStep']
+    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     MobileBottomNav: typeof import('./src/components/MobileBottomNav.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/frontend/src/views/account/OrderDetailView.vue b/frontend/src/views/account/OrderDetailView.vue
index 9a2cc84..d9b86bb 100644
--- a/frontend/src/views/account/OrderDetailView.vue
+++ b/frontend/src/views/account/OrderDetailView.vue
@@ -106,6 +106,21 @@ const remainingHafCoinM = computed(() => {
   return roundQuantity(Math.max(snapshotHafCoinM.value - Number(checkoutForm.value.coin_consumed_m || 0), 0))
 })
 
+function getOrderStep(status: string) {
+  const stepMap: Record<string, number> = {
+    'pending_payment': 0,
+    'pending_handoff': 1,
+    'renting': 2,
+    'overdue': 2,
+    'pending_checkout_confirm': 3,
+    'pending_checkout_accept': 3,
+    'completed': 4,
+    'cancelled': 0,
+    'closed': 4,
+  }
+  return stepMap[status] ?? 0
+}
+
 onMounted(loadOrder)
 onBeforeUnmount(stopPaymentPolling)
 
@@ -584,12 +599,14 @@ function linesToList(value: string) {
 </script>
 
 <template>
-  <section class="page" v-loading="loading">
+  <section class="page order-detail-page" v-loading="loading">
     <div v-if="order" class="page-header">
-      <p class="eyebrow">{{ order.order_no }}</p>
-      <h1>订单详情</h1>
-      <div class="header-actions">
-        <p>{{ order.title }} · {{ order.server_region }} / {{ order.login_platform }}</p>
+      <div class="header-top">
+        <div class="header-info">
+          <p class="eyebrow">订单号：{{ order.order_no }}</p>
+          <h1>{{ order.title }}</h1>
+          <p class="order-meta">{{ order.server_region }} / {{ order.login_platform }}</p>
+        </div>
         <el-button type="primary" :loading="openingChat" @click="openOrderChat">
           <el-icon style="margin-right: 4px;"><ChatDotRound /></el-icon>
           联系对方
@@ -597,185 +614,287 @@ function linesToList(value: string) {
       </div>
     </div>
 
+    <div v-if="order" class="order-progress-section">
+      <el-steps :active="getOrderStep(order.status)" align-center finish-status="success" process-status="process">
+        <el-step title="待支付" :description="order.status === 'pending_payment' ? '等待租客支付' : ''" />
+        <el-step title="待交接" :description="order.status === 'pending_handoff' ? handoffStatusLabel(order.handoff_status) : ''" />
+        <el-step title="使用中" :description="['renting', 'overdue'].includes(order.status) ? '租赁进行中' : ''" />
+        <el-step title="结账中" :description="['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status) ? '等待确认' : ''" />
+        <el-step title="已完成" :description="order.status === 'completed' ? '订单完成' : ''" />
+      </el-steps>
+    </div>
+
     <div v-if="order" class="detail-grid">
-      <div class="metric-card">
-        <span>状态</span>
-        <strong>{{ orderStatusLabel(order.status) }}</strong>
+      <div class="metric-card primary">
+        <span class="metric-label">订单状态</span>
+        <strong class="metric-value">{{ orderStatusLabel(order.status) }}</strong>
       </div>
       <div class="metric-card">
-        <span>交接</span>
-        <strong>{{ handoffStatusLabel(order.handoff_status) }}</strong>
+        <span class="metric-label">交接状态</span>
+        <strong class="metric-value">{{ handoffStatusLabel(order.handoff_status) }}</strong>
+      </div>
+      <div class="metric-card highlight">
+        <span class="metric-label">{{ orderAmountLabel }}</span>
+        <strong class="metric-value amount">¥{{ money(order.display_amount) }}</strong>
       </div>
       <div class="metric-card">
-        <span>{{ orderAmountLabel }}</span>
-        <strong>¥{{ money(order.display_amount) }}</strong>
-      </div>
-      <div class="metric-card">
-        <span>押金</span>
-        <strong>¥{{ money(order.deposit_amount) }}</strong>
+        <span class="metric-label">押金</span>
+        <strong class="metric-value">¥{{ money(order.deposit_amount) }}</strong>
       </div>
     </div>
 
-    <div v-if="order" class="order-panel">
-      <p>开始：{{ formatDateTime(orderRentedAt(), '未开始') }}</p>
-      <p>预计截止：{{ formatDateTime(orderEstimatedEndAt(), '未设置') }}</p>
-      <p v-if="order.status === 'pending_payment'">订单待支付，支付后账号进入交接流程。</p>
-      <el-button v-if="order.status === 'pending_payment' && isRenter" type="primary" :loading="startingPayment" @click="handlePay">
-        支付订单
-      </el-button>
-      <el-button v-if="['pending_payment', 'pending_handoff'].includes(order.status)" type="danger" :loading="cancelling" @click="handleCancel">
-        取消订单并释放账号
-      </el-button>
+    <div v-if="order" class="info-section">
+      <div class="info-card">
+        <div class="info-row">
+          <span class="info-label">开始时间</span>
+          <span class="info-value">{{ formatDateTime(orderRentedAt(), '未开始') }}</span>
+        </div>
+        <div class="info-row">
+          <span class="info-label">预计截止</span>
+          <span class="info-value">{{ formatDateTime(orderEstimatedEndAt(), '未设置') }}</span>
+        </div>
+      </div>
+
+      <div v-if="order.status === 'pending_payment'" class="action-card warning">
+        <p class="action-message">订单待支付，支付后账号进入交接流程。</p>
+        <div class="action-buttons">
+          <el-button v-if="isRenter" type="primary" size="large" :loading="startingPayment" @click="handlePay">
+            立即支付订单
+          </el-button>
+          <el-button type="danger" plain :loading="cancelling" @click="handleCancel">
+            取消订单并释放账号
+          </el-button>
+        </div>
+      </div>
+
+      <div v-if="order.status === 'pending_handoff'" class="action-card info">
+        <div class="action-buttons">
+          <el-button type="danger" plain :loading="cancelling" @click="handleCancel">
+            取消订单并释放账号
+          </el-button>
+        </div>
+      </div>
     </div>
 
-    <div v-if="order" class="order-panel">
-      <h2>交接记录</h2>
+    <div v-if="order" class="timeline-section">
+      <div class="section-header">
+        <h2>交接记录</h2>
+      </div>
       <el-empty v-if="handoffRecords.length === 0" description="暂无交接记录" />
-      <div v-for="record in handoffRecords" :key="record.id" class="timeline-item">
-        <strong>{{ record.type }}</strong>
-        <p>{{ record.content }}</p>
-        <span>{{ formatDateTime(record.created_at) }}</span>
-      </div>
+      <el-timeline v-else>
+        <el-timeline-item
+          v-for="record in handoffRecords"
+          :key="record.id"
+          :timestamp="formatDateTime(record.created_at)"
+          placement="top"
+        >
+          <div class="timeline-content">
+            <div class="timeline-title">{{ record.type }}</div>
+            <div class="timeline-body">{{ record.content }}</div>
+          </div>
+        </el-timeline-item>
+      </el-timeline>
     </div>
 
-    <div v-if="order && isOwner && order.status === 'pending_handoff' && order.handoff_status === 'pending_owner'" class="order-panel">
-      <h2>提交交接说明</h2>
-      <el-input v-model="handoffContent" type="textarea" :rows="4" placeholder="填写登录方式、注意事项和交接说明" />
-      <el-button class="panel-action" type="primary" :loading="handoffing" @click="handleSubmitHandoff">提交交接</el-button>
+    <div v-if="order && isOwner && order.status === 'pending_handoff' && order.handoff_status === 'pending_owner'" class="form-section">
+      <div class="section-header">
+        <h2>提交交接说明</h2>
+      </div>
+      <div class="form-card">
+        <el-input v-model="handoffContent" type="textarea" :rows="4" placeholder="填写登录方式、注意事项和交接说明" />
+        <el-button type="primary" size="large" :loading="handoffing" @click="handleSubmitHandoff">提交交接</el-button>
+      </div>
     </div>
 
     <div
       v-if="order && isRenter && order.status === 'pending_handoff' && order.handoff_status === 'pending_renter_confirm'"
-      class="order-panel"
+      class="form-section"
     >
-      <h2>确认收号</h2>
-      <p>确认账号可以正常登录后，订单会进入使用中并重新计算预计截止时间。</p>
-      <el-button type="primary" :loading="confirming" @click="handleConfirmReceive">确认已收到账号</el-button>
+      <div class="section-header">
+        <h2>确认收号</h2>
+      </div>
+      <div class="form-card">
+        <p class="form-hint">确认账号可以正常登录后，订单会进入使用中并重新计算预计截止时间。</p>
+        <el-button type="primary" size="large" :loading="confirming" @click="handleConfirmReceive">确认已收到账号</el-button>
+      </div>
     </div>
 
-    <div v-if="order && isRenter && ['renting', 'overdue'].includes(order.status)" class="order-panel">
-      <h2>发起结账</h2>
-      <el-input v-model="checkoutForm.content" type="textarea" :rows="4" placeholder="填写结账说明、租后资产状态或注意事项" />
-      <div class="checkout-resource-panel panel-action">
-        <div class="checkout-resource-head">
-          <strong>额外消耗品</strong>
-          <span>已用金额：¥{{ money(resourceChargeAmount) }}</span>
-        </div>
-        <el-empty v-if="checkoutResources.length === 0" description="订单快照中暂无额外消耗品" />
-        <div v-for="item in checkoutResources" v-else :key="item.key" class="checkout-resource-row">
-          <div class="checkout-resource-meta">
-            <strong>{{ item.label }}</strong>
-            <span>库存 {{ item.quantity }}，{{ item.mode }}，{{ item.price || '未设置单价' }}</span>
+    <div v-if="order && isRenter && ['renting', 'overdue'].includes(order.status)" class="form-section">
+      <div class="section-header">
+        <h2>发起结账</h2>
+      </div>
+      <div class="form-card">
+        <el-input v-model="checkoutForm.content" type="textarea" :rows="4" placeholder="填写结账说明、租后资产状态或注意事项" />
+        <div class="checkout-resource-panel">
+          <div class="checkout-resource-head">
+            <strong>额外消耗品</strong>
+            <span class="amount-highlight">已用金额：¥{{ money(resourceChargeAmount) }}</span>
           </div>
-          <el-input-number
-            v-model="resourceUsage[item.key]"
-            :min="0"
-            :max="item.quantity"
-            :precision="0"
-            controls-position="right"
-          />
-          <span class="checkout-resource-amount">¥{{ money(resourceLineAmount(item)) }}</span>
+          <el-empty v-if="checkoutResources.length === 0" description="订单快照中暂无额外消耗品" />
+          <div v-for="item in checkoutResources" v-else :key="item.key" class="checkout-resource-row">
+            <div class="checkout-resource-meta">
+              <strong>{{ item.label }}</strong>
+              <span>库存 {{ item.quantity }}，{{ item.mode }}，{{ item.price || '未设置单价' }}</span>
+            </div>
+            <el-input-number
+              v-model="resourceUsage[item.key]"
+              :min="0"
+              :max="item.quantity"
+              :precision="0"
+              controls-position="right"
+            />
+            <span class="checkout-resource-amount">¥{{ money(resourceLineAmount(item)) }}</span>
+          </div>
+        </div>
+        <el-form class="form-grid" label-position="top">
+          <el-form-item label="消耗哈夫币（M）">
+            <el-input-number v-model="checkoutForm.coin_consumed_m" class="full-control" :min="0" :max="snapshotHafCoinM" :precision="2" controls-position="right" />
+            <span class="field-hint">订单快照 {{ quantity(snapshotHafCoinM) }}M，预计剩余 {{ quantity(remainingHafCoinM) }}M</span>
+          </el-form-item>
+          <el-form-item label="其他押金扣款（元）">
+            <el-input-number v-model="checkoutForm.other_amount" class="full-control" :min="0" :precision="0" controls-position="right" />
+          </el-form-item>
+        </el-form>
+        <el-input
+          v-model="checkoutForm.evidenceText"
+          type="textarea"
+          :rows="3"
+          placeholder="结账证据链接，一行一个。可填写截图地址或备注链接"
+        />
+        <el-button type="primary" size="large" :loading="returning" @click="handleSubmitCheckout">发起结账</el-button>
+      </div>
+    </div>
+
+    <div v-if="order && order.checkout && ['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status)" class="info-section">
+      <div class="section-header">
+        <h2>结账明细</h2>
+      </div>
+      <div class="checkout-summary-card">
+        <div class="summary-row">
+          <span>实际结算租金</span>
+          <strong>¥{{ money(order.checkout.display_amount) }}</strong>
+        </div>
+        <div class="summary-row">
+          <span>预收押金</span>
+          <strong>¥{{ money(order.checkout.deposit_amount) }}</strong>
+        </div>
+        <div class="summary-row">
+          <span>额外消耗品已用</span>
+          <strong class="warning">¥{{ money(order.checkout.consumable_amount) }}</strong>
+        </div>
+        <div class="summary-row">
+          <span>押金赔付扣除</span>
+          <strong class="warning">¥{{ money(order.checkout.deposit_deduct_amount) }}</strong>
+        </div>
+        <div v-if="isRenter" class="summary-row highlight">
+          <span>退还租客（未使用租金 + 剩余押金）</span>
+          <strong class="amount">¥{{ money(order.checkout.renter_refund_amount) }}</strong>
+        </div>
+        <div v-if="isOwner" class="summary-row highlight">
+          <span>号主最终收入（租金 + 押金赔付）</span>
+          <strong class="amount">¥{{ money(order.checkout.owner_income_amount) }}</strong>
+        </div>
+        <div v-if="order.checkout.content" class="summary-note">
+          <label>说明：</label>
+          <p>{{ order.checkout.content }}</p>
+        </div>
+        <div v-if="order.checkout.owner_adjustment_reason" class="summary-note warning">
+          <label>修正原因：</label>
+          <p>{{ order.checkout.owner_adjustment_reason }}</p>
         </div>
       </div>
-      <el-form class="form-grid panel-action" label-position="top">
-        <el-form-item label="消耗哈夫币（M）">
-          <el-input-number v-model="checkoutForm.coin_consumed_m" class="full-control" :min="0" :max="snapshotHafCoinM" :precision="2" controls-position="right" />
-          <span class="field-hint">订单快照 {{ quantity(snapshotHafCoinM) }}M，预计剩余 {{ quantity(remainingHafCoinM) }}M</span>
-        </el-form-item>
-        <el-form-item label="其他押金扣款（元）">
-          <el-input-number v-model="checkoutForm.other_amount" class="full-control" :min="0" :precision="0" controls-position="right" />
-        </el-form-item>
-      </el-form>
-      <el-input
-        v-model="checkoutForm.evidenceText"
-        class="panel-action"
-        type="textarea"
-        :rows="3"
-        placeholder="结账证据链接，一行一个。可填写截图地址或备注链接"
-      />
-      <el-button class="panel-action" type="primary" :loading="returning" @click="handleSubmitCheckout">发起结账</el-button>
     </div>
 
-    <div v-if="order && order.checkout && ['pending_checkout_confirm', 'pending_checkout_accept'].includes(order.status)" class="order-panel">
-      <h2>结账明细</h2>
-      <p>实际结算租金：¥{{ money(order.checkout.display_amount) }}，预收押金：¥{{ money(order.checkout.deposit_amount) }}</p>
-      <p>额外消耗品已用：¥{{ money(order.checkout.consumable_amount) }}，押金赔付扣除：¥{{ money(order.checkout.deposit_deduct_amount) }}</p>
-      <p v-if="isRenter">退还租客（未使用租金 + 剩余押金）：¥{{ money(order.checkout.renter_refund_amount) }}</p>
-      <p v-if="isOwner">号主最终收入（租金 + 押金赔付）：¥{{ money(order.checkout.owner_income_amount) }}</p>
-      <p v-if="order.checkout.content">说明：{{ order.checkout.content }}</p>
-      <p v-if="order.checkout.owner_adjustment_reason">修正原因：{{ order.checkout.owner_adjustment_reason }}</p>
+    <div v-if="order && isOwner && order.status === 'pending_checkout_confirm'" class="form-section">
+      <div class="section-header">
+        <h2>确认结账</h2>
+      </div>
+      <div class="form-card">
+        <p class="form-hint">确认账号状态和扣款金额无误后，订单会完成，账号重新上架。</p>
+        <el-button type="primary" size="large" :loading="completing" @click="handleConfirmCheckout">确认结账并完成订单</el-button>
+
+        <div class="section-divider">
+          <span>或者</span>
+        </div>
+
+        <h3 class="sub-title">修改结账</h3>
+        <el-form class="form-grid" label-position="top">
+          <el-form-item label="额外消耗品已用金额">
+            <el-input-number v-model="counterForm.consumable_amount" class="full-control" :min="0" :precision="0" controls-position="right" />
+          </el-form-item>
+          <el-form-item label="消耗哈夫币（M）">
+            <el-input-number v-model="counterForm.coin_consumed_m" class="full-control" :min="0" :precision="2" controls-position="right" />
+          </el-form-item>
+          <el-form-item label="其他押金扣款（元）">
+            <el-input-number v-model="counterForm.other_amount" class="full-control" :min="0" :precision="0" controls-position="right" />
+          </el-form-item>
+          <el-form-item label="押金扣除（元）">
+            <el-input-number v-model="counterForm.deposit_deduct_amount" class="full-control" :min="0" :max="order.deposit_amount" :precision="0" controls-position="right" />
+          </el-form-item>
+        </el-form>
+        <el-input v-model="counterForm.reason" type="textarea" :rows="3" placeholder="填写修改原因" />
+        <el-input v-model="counterForm.evidenceText" type="textarea" :rows="3" placeholder="修正证据链接，一行一个" />
+        <el-button type="warning" size="large" :loading="countering" @click="handleCounterCheckout">提交修正给租客确认</el-button>
+      </div>
     </div>
 
-    <div v-if="order && isOwner && order.status === 'pending_checkout_confirm'" class="order-panel">
-      <h2>确认结账</h2>
-      <p>确认账号状态和扣款金额无误后，订单会完成，账号重新上架。</p>
-      <el-button type="primary" :loading="completing" @click="handleConfirmCheckout">确认结账并完成订单</el-button>
+    <div v-if="order && isRenter && order.status === 'pending_checkout_accept'" class="form-section">
+      <div class="section-header">
+        <h2>确认修正结账</h2>
+      </div>
+      <div class="form-card">
+        <p class="form-hint">同意后订单会完成结算；不同意会进入争议，由客服仲裁。</p>
+        <el-button type="primary" size="large" :loading="acceptingCheckout" @click="handleAcceptCheckout">同意修正并完成订单</el-button>
 
-      <h2 class="panel-action">修改结账</h2>
-      <el-form class="form-grid" label-position="top">
-        <el-form-item label="额外消耗品已用金额">
-          <el-input-number v-model="counterForm.consumable_amount" class="full-control" :min="0" :precision="0" controls-position="right" />
-        </el-form-item>
-        <el-form-item label="消耗哈夫币（M）">
-          <el-input-number v-model="counterForm.coin_consumed_m" class="full-control" :min="0" :precision="2" controls-position="right" />
-        </el-form-item>
-        <el-form-item label="其他押金扣款（元）">
-          <el-input-number v-model="counterForm.other_amount" class="full-control" :min="0" :precision="0" controls-position="right" />
-        </el-form-item>
-        <el-form-item label="押金扣除（元）">
-          <el-input-number v-model="counterForm.deposit_deduct_amount" class="full-control" :min="0" :max="order.deposit_amount" :precision="0" controls-position="right" />
-        </el-form-item>
-      </el-form>
-      <el-input v-model="counterForm.reason" class="panel-action" type="textarea" :rows="3" placeholder="填写修改原因" />
-      <el-input v-model="counterForm.evidenceText" class="panel-action" type="textarea" :rows="3" placeholder="修正证据链接，一行一个" />
-      <el-button class="panel-action" type="warning" :loading="countering" @click="handleCounterCheckout">提交修正给租客确认</el-button>
-    </div>
+        <div class="section-divider">
+          <span>或者</span>
+        </div>
 
-    <div v-if="order && isRenter && order.status === 'pending_checkout_accept'" class="order-panel">
-      <h2>确认修正结账</h2>
-      <p>同意后订单会完成结算；不同意会进入争议，由客服仲裁。</p>
-      <el-button type="primary" :loading="acceptingCheckout" @click="handleAcceptCheckout">同意修正并完成订单</el-button>
-      <el-input v-model="rejectReason" class="panel-action" type="textarea" :rows="3" placeholder="不同意时填写原因，会进入争议处理" />
-      <el-button class="panel-action" type="danger" :loading="rejectingCheckout" @click="handleRejectCheckout">拒绝修正并发起争议</el-button>
+        <h3 class="sub-title">拒绝修正</h3>
+        <el-input v-model="rejectReason" type="textarea" :rows="3" placeholder="不同意时填写原因，会进入争议处理" />
+        <el-button type="danger" plain size="large" :loading="rejectingCheckout" @click="handleRejectCheckout">拒绝修正并发起争议</el-button>
+      </div>
     </div>
 
-    <div v-if="order && canOpenDispute" class="order-panel">
-      <h2>{{ isCheckoutDisputeStage ? '发起结账争议' : '发起申诉' }}</h2>
-      <el-select v-if="!isCheckoutDisputeStage" v-model="disputeType" class="full-control" placeholder="选择申诉类型">
-        <el-option label="无法登录" value="cannot_login" />
-        <el-option label="虚假描述" value="false_description" />
-        <el-option label="账号被封" value="account_banned" />
-        <el-option label="资产损失" value="asset_loss" />
-        <el-option label="哈夫币争议" value="haf_coin_dispute" />
-        <el-option label="超时未交接" value="handoff_timeout" />
-        <el-option label="超时未归还" value="return_timeout" />
-      </el-select>
-      <el-input
-        v-model="disputeDescription"
-        class="panel-action"
-        type="textarea"
-        :rows="4"
-        placeholder="说明争议经过、时间点和希望客服核查的证据"
-      />
-      <el-input
-        v-model="disputeEvidenceText"
-        class="panel-action"
-        type="textarea"
-        :rows="3"
-        placeholder="证据链接，一行一个。开发阶段可先填截图地址或备注链接"
-      />
-      <div class="panel-action upload-line">
-        <input type="file" accept="image/jpeg,image/png,image/webp,application/pdf" :disabled="uploadingEvidence" @change="handleEvidenceUpload" />
+    <div v-if="order && canOpenDispute" class="form-section dispute-section">
+      <div class="section-header">
+        <h2>{{ isCheckoutDisputeStage ? '发起结账争议' : '发起申诉' }}</h2>
+      </div>
+      <div class="form-card">
+        <el-select v-if="!isCheckoutDisputeStage" v-model="disputeType" class="full-control" placeholder="选择申诉类型">
+          <el-option label="无法登录" value="cannot_login" />
+          <el-option label="虚假描述" value="false_description" />
+          <el-option label="账号被封" value="account_banned" />
+          <el-option label="资产损失" value="asset_loss" />
+          <el-option label="哈夫币争议" value="haf_coin_dispute" />
+          <el-option label="超时未交接" value="handoff_timeout" />
+          <el-option label="超时未归还" value="return_timeout" />
+        </el-select>
+        <el-input
+          v-model="disputeDescription"
+          type="textarea"
+          :rows="4"
+          placeholder="说明争议经过、时间点和希望客服核查的证据"
+        />
+        <el-input
+          v-model="disputeEvidenceText"
+          type="textarea"
+          :rows="3"
+          placeholder="证据链接，一行一个。开发阶段可先填截图地址或备注链接"
+        />
+        <div class="upload-line">
+          <input type="file" accept="image/jpeg,image/png,image/webp,application/pdf" :disabled="uploadingEvidence" @change="handleEvidenceUpload" />
+        </div>
+        <el-button type="warning" size="large" :loading="disputing" @click="handleCreateDispute">
+          {{ isCheckoutDisputeStage ? '提交结账争议' : '提交申诉' }}
+        </el-button>
       </div>
-      <el-button class="panel-action" type="warning" :loading="disputing" @click="handleCreateDispute">
-        {{ isCheckoutDisputeStage ? '提交结账争议' : '提交申诉' }}
-      </el-button>
     </div>
 
     <el-dialog
       v-model="paymentDialogVisible"
       title="订单支付"
-      width="520px"
+      width="560px"
       append-to-body
       :z-index="4000"
       class="order-pay-dialog"
@@ -783,24 +902,28 @@ function linesToList(value: string) {
     >
       <div v-if="activePayment" class="pay-dialog-body">
         <div class="pay-summary">
-          <span>支付金额</span>
-          <strong>¥{{ (activePayment.amount_cent / 100).toFixed(2) }}</strong>
+          <div class="pay-summary-row">
+            <span>支付金额</span>
+            <strong>¥{{ (activePayment.amount_cent / 100).toFixed(2) }}</strong>
+          </div>
         </div>
-        <div v-if="paymentPayURL()" class="pay-qr-panel">
+        <div v-if="paymentPayURL()" class="pay-qr-section">
           <div class="pay-qr-box">
             <el-icon v-if="qrGenerating" class="is-loading" :size="32"><Loading /></el-icon>
             <img v-else-if="paymentQRCodeURL" :src="paymentQRCodeURL" alt="支付二维码" />
           </div>
-          <div class="pay-scan-copy">
-            <strong>请使用微信或支付宝扫码支付</strong>
-            <span>扫码完成后将自动刷新，也可手动点击下方按钮确认。</span>
+          <div class="pay-instructions">
+            <h3>请使用微信或支付宝扫码支付</h3>
+            <p>扫码完成后将自动刷新，也可手动点击下方按钮确认。</p>
           </div>
         </div>
         <p v-else class="pay-hint">支付单已创建，请完成付款后刷新状态。</p>
       </div>
       <template #footer>
         <div class="pay-dialog-footer">
-          <el-button type="primary" :loading="checkingPayment" @click="handleRefreshPayment">我已支付，刷新状态</el-button>
+          <el-button type="primary" :loading="checkingPayment" @click="handleRefreshPayment">
+            我已支付，刷新状态
+          </el-button>
         </div>
       </template>
     </el-dialog>
@@ -808,44 +931,308 @@ function linesToList(value: string) {
 </template>
 
 <style scoped>
-.header-actions {
+.order-detail-page {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  margin-bottom: 32px;
+}
+
+.header-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.header-info {
+  flex: 1;
+}
+
+.order-meta {
+  color: #64748b;
+  margin-top: 8px;
+}
+
+.order-progress-section {
+  margin-bottom: 32px;
+  padding: 24px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+}
+
+.detail-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.metric-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 20px;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: #ffffff;
+  transition: all 0.2s;
+}
+
+.metric-card:hover {
+  border-color: #cbd5e1;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.metric-card.primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  color: #ffffff;
+}
+
+.metric-card.primary .metric-label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.metric-card.primary .metric-value {
+  color: #ffffff;
+}
+
+.metric-card.highlight {
+  background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
+  border: none;
+  color: #ffffff;
+}
+
+.metric-card.highlight .metric-label {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.metric-card.highlight .metric-value {
+  color: #ffffff;
+}
+
+.metric-label {
+  font-size: 13px;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.metric-value {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.metric-value.amount {
+  color: #ff6a00;
+}
+
+.info-section {
+  margin-bottom: 32px;
+}
+
+.info-card {
+  display: grid;
+  gap: 12px;
+  padding: 20px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+}
+
+.info-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 14px;
+  color: #64748b;
+  font-weight: 500;
+}
+
+.info-value {
+  font-size: 14px;
+  color: #1f2937;
+  font-weight: 600;
+}
+
+.action-card {
+  margin-top: 16px;
+  padding: 20px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+}
+
+.action-card.warning {
+  background: #fffbeb;
+  border-color: #fde68a;
+}
+
+.action-card.info {
+  background: #eff6ff;
+  border-color: #bfdbfe;
+}
+
+.action-message {
+  margin: 0 0 16px 0;
+  color: #1f2937;
+  font-size: 14px;
+}
+
+.action-buttons {
+  display: flex;
+  flex-wrap: wrap;
   gap: 12px;
 }
 
-.header-actions p {
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.section-header h2 {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1f2937;
   margin: 0;
 }
 
+.timeline-section {
+  margin-bottom: 32px;
+}
+
+.timeline-section :deep(.el-timeline) {
+  padding: 24px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+}
+
+.timeline-content {
+  display: grid;
+  gap: 8px;
+}
+
+.timeline-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.timeline-body {
+  font-size: 14px;
+  color: #64748b;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.form-section {
+  margin-bottom: 32px;
+}
+
+.form-card {
+  display: grid;
+  gap: 16px;
+  padding: 24px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+}
+
+.form-hint {
+  margin: 0;
+  padding: 12px 16px;
+  background: #f8fafc;
+  border-left: 3px solid #3b82f6;
+  color: #475569;
+  font-size: 14px;
+  line-height: 1.6;
+  border-radius: 4px;
+}
+
+.section-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 24px 0;
+  position: relative;
+}
+
+.section-divider::before,
+.section-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: #e5e7eb;
+}
+
+.section-divider span {
+  padding: 0 16px;
+  color: #9ca3af;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.sub-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #374151;
+  margin: 0 0 16px 0;
+}
+
 .checkout-resource-panel {
   display: grid;
-  gap: 10px;
-}
-
-.checkout-resource-head,
-.checkout-resource-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
   gap: 12px;
-  align-items: center;
+  padding: 16px;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
 }
 
 .checkout-resource-head {
-  color: #1f2d3d;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  align-items: center;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e5e7eb;
 }
 
-.checkout-resource-head span,
-.checkout-resource-meta span,
-.field-hint {
-  color: #6b7785;
-  font-size: 13px;
+.checkout-resource-head strong {
+  color: #1f2937;
+  font-size: 15px;
+}
+
+.amount-highlight {
+  color: #ff6a00;
+  font-weight: 700;
+  font-size: 14px;
 }
 
 .checkout-resource-row {
-  padding: 10px 0;
-  border-top: 1px solid #eef1f5;
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
 }
 
 .checkout-resource-meta {
@@ -853,47 +1240,166 @@ function linesToList(value: string) {
   gap: 4px;
 }
 
+.checkout-resource-meta strong {
+  color: #1f2937;
+  font-size: 14px;
+}
+
+.checkout-resource-meta span {
+  color: #6b7785;
+  font-size: 12px;
+}
+
 .checkout-resource-amount {
-  min-width: 72px;
+  min-width: 80px;
   text-align: right;
   color: #ff6a00;
   font-weight: 700;
+  font-size: 16px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
 }
 
 .field-hint {
   display: block;
   margin-top: 6px;
+  color: #6b7280;
+  font-size: 12px;
+}
+
+.checkout-summary-card {
+  display: grid;
+  gap: 12px;
+  padding: 24px;
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+}
+
+.summary-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.summary-row:last-child {
+  border-bottom: none;
+}
+
+.summary-row.highlight {
+  padding: 16px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 8px;
+}
+
+.summary-row span {
+  font-size: 14px;
+  color: #64748b;
+}
+
+.summary-row strong {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1f2937;
+}
+
+.summary-row strong.amount {
+  color: #10b981;
+  font-size: 20px;
+}
+
+.summary-row strong.warning {
+  color: #f59e0b;
+}
+
+.summary-note {
+  padding: 16px;
+  background: #f8fafc;
+  border-left: 3px solid #94a3b8;
+  border-radius: 4px;
+}
+
+.summary-note.warning {
+  background: #fef3c7;
+  border-left-color: #f59e0b;
+}
+
+.summary-note label {
+  display: block;
+  margin-bottom: 8px;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.summary-note p {
+  margin: 0;
+  color: #1f2937;
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.dispute-section .form-card {
+  background: #fef2f2;
+  border-color: #fecaca;
+}
+
+.upload-line {
+  padding: 12px;
+  background: #f9fafb;
+  border: 1px dashed #cbd5e1;
+  border-radius: 6px;
+}
+
+.upload-line input[type="file"] {
+  width: 100%;
+  font-size: 14px;
 }
 
 .pay-dialog-body {
   display: grid;
-  gap: 14px;
+  gap: 20px;
 }
 
 .pay-summary {
+  padding: 16px 20px;
+  background: #f8fafc;
+  border-radius: 8px;
+}
+
+.pay-summary-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  padding: 12px 14px;
-  border-radius: 8px;
-  background: #f7f9fc;
+}
+
+.pay-summary-row span {
   color: #64748b;
+  font-size: 14px;
 }
 
-.pay-summary strong {
+.pay-summary-row strong {
   color: #111a44;
-  font-size: 22px;
+  font-size: 28px;
+  font-weight: 700;
 }
 
-.pay-qr-panel {
-  display: grid;
-  grid-template-columns: 240px minmax(0, 1fr);
+.pay-qr-section {
+  display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 20px;
-  padding: 18px;
-  border-radius: 8px;
+  padding: 24px;
   background: #f8fafc;
+  border-radius: 12px;
 }
 
 .pay-qr-box {
@@ -902,8 +1408,9 @@ function linesToList(value: string) {
   display: grid;
   place-items: center;
   border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  border-radius: 12px;
   background: #ffffff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
 }
 
 .pay-qr-box img {
@@ -912,43 +1419,89 @@ function linesToList(value: string) {
   display: block;
 }
 
-.pay-scan-copy {
-  display: grid;
-  gap: 8px;
-  color: #334155;
+.pay-instructions {
+  text-align: center;
 }
 
-.pay-scan-copy strong {
+.pay-instructions h3 {
+  margin: 0 0 8px 0;
   color: #111a44;
   font-size: 18px;
+  font-weight: 600;
 }
 
-.pay-scan-copy span {
+.pay-instructions p {
+  margin: 0;
   color: #64748b;
+  font-size: 14px;
   line-height: 1.7;
 }
 
 .pay-hint {
   margin: 0;
+  padding: 16px;
+  background: #f8fafc;
   color: #64748b;
+  font-size: 14px;
+  text-align: center;
+  border-radius: 8px;
 }
 
 .pay-dialog-footer {
   display: flex;
-  justify-content: flex-end;
-  gap: 10px;
+  justify-content: center;
+  padding-top: 8px;
 }
 
 :global(.order-pay-dialog) {
-  position: relative;
-  z-index: 4001;
+  border-radius: 16px;
 }
 
-@media (max-width: 720px) {
-  .pay-qr-panel {
+:global(.order-pay-dialog .el-dialog__header) {
+  padding: 20px 24px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+:global(.order-pay-dialog .el-dialog__body) {
+  padding: 24px;
+}
+
+:global(.order-pay-dialog .el-dialog__footer) {
+  padding: 16px 24px;
+  border-top: 1px solid #e5e7eb;
+}
+
+@media (max-width: 768px) {
+  .header-top {
+    flex-direction: column;
+  }
+
+  .detail-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .form-grid {
     grid-template-columns: 1fr;
-    justify-items: center;
-    text-align: center;
+  }
+
+  .checkout-resource-row {
+    grid-template-columns: 1fr;
+  }
+
+  .checkout-resource-amount {
+    text-align: left;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+  }
+
+  .action-buttons .el-button {
+    width: 100%;
+  }
+
+  .pay-qr-section {
+    padding: 16px;
   }
 }
 </style>