优化申诉仲裁流程和证据展示

frontend/src/features/orders/views/OrderDetailView.vue

@@ -6,7 +6,7 @@ import { useRoute, useRouter } from 'vue-router'
 import QRCode from 'qrcode'
 
 import { fetchOrderChat } from '@/features/chats/api/chats'
-import { createDispute } from '@/features/disputes'
+import { cancelOrderDispute, createDispute } from '@/features/disputes'
 import { uploadFile } from '@/shared/api/files'
 import { readError } from '@/shared/utils/error'
 import { formatCent } from '@/shared/utils/money'
@@ -56,6 +56,7 @@ const countering = ref(false)
 const acceptingCheckout = ref(false)
 const rejectingCheckout = ref(false)
 const disputing = ref(false)
+const cancellingDispute = ref(false)
 const uploadingEvidence = ref(false)
 const order = ref<Order | null>(null)
 const handoffRecords = ref<HandoffRecord[]>([])
@@ -116,6 +117,14 @@ const canOpenDispute = computed(() => {
     'abnormal',
   ].includes(order.value.status)
 })
+const canCancelDispute = computed(() => {
+  return (
+    !!order.value &&
+    (isOwner.value || isRenter.value) &&
+    ['disputing', 'checkout_disputing'].includes(order.value.status) &&
+    order.value.active_dispute?.initiator_id === session.userId
+  )
+})
 const isCheckoutDisputeStage = computed(() => {
   return (
     !!order.value &&
@@ -438,6 +447,20 @@ async function handleCreateDispute() {
   }
 }
 
+async function handleCancelDispute() {
+  if (!order.value) return
+  cancellingDispute.value = true
+  try {
+    await cancelOrderDispute(order.value.id)
+    ElMessage.success('申诉已取消，订单已恢复')
+    await loadOrder()
+  } catch (error) {
+    ElMessage.error(readError(error, '取消申诉失败'))
+  } finally {
+    cancellingDispute.value = false
+  }
+}
+
 async function handleEvidenceUpload(event: Event) {
   const input = event.target as HTMLInputElement
   const file = input.files?.[0]
@@ -870,6 +893,22 @@ async function copyListingCode() {
           </el-button>
           <p class="sidebar-hint">点击后滚动到申诉表单填写详细信息</p>
         </div>
+
+        <div v-if="canCancelDispute" class="sidebar-card dispute-card">
+          <h3 class="sidebar-title">
+            {{ order.status === 'checkout_disputing' ? '取消结账争议' : '取消申诉' }}
+          </h3>
+          <el-button
+            type="warning"
+            plain
+            size="large"
+            :loading="cancellingDispute"
+            @click="handleCancelDispute"
+          >
+            {{ order.status === 'checkout_disputing' ? '取消结账争议' : '取消申诉' }}
+          </el-button>
+          <p class="sidebar-hint">取消后订单将恢复到发起申诉前的流程</p>
+        </div>
       </div>
     </div>