feat: add interactive dispute evidence upload and sealed review mechanism

app/(order)/dispute/[id]/page.tsx

@@ -1,9 +1,10 @@
 "use client"
 
-import { AlertTriangle, ArrowLeft, Clock, FileText } from "lucide-react"
+import { AlertTriangle, ArrowLeft, Clock, FileText, Upload, X } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
-import { use, useState } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import { type ChangeEvent, use, useEffect, useRef, useState } from "react"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -21,10 +22,59 @@ const disputeStatusLabels: Record<string, string> = {
 
 export default function DisputePage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = use(params)
+  const router = useRouter()
+  const searchParams = useSearchParams()
   const order = mockOrders.find((o) => o.id === id)
   const existingDispute = mockDisputes.find((d) => d.orderId === id)
   const [reason, setReason] = useState("")
   const [submitted, setSubmitted] = useState(false)
+  const [files, setFiles] = useState<string[]>([])
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const filesRef = useRef<string[]>([])
+
+  useEffect(() => {
+    filesRef.current = files
+  }, [files])
+
+  useEffect(
+    () => () => {
+      filesRef.current.forEach((url) => {
+        URL.revokeObjectURL(url)
+      })
+    },
+    [],
+  )
+
+  const handleFileSelect = (event: ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = event.target.files
+    if (!selectedFiles?.length) return
+
+    setFiles((prev) => {
+      const remaining = 5 - prev.length
+      if (remaining <= 0) return prev
+      const nextUrls = Array.from(selectedFiles)
+        .slice(0, remaining)
+        .map((file) => URL.createObjectURL(file))
+      return [...prev, ...nextUrls]
+    })
+
+    event.target.value = ""
+  }
+
+  const handleRemoveFile = (index: number) => {
+    setFiles((prev) => {
+      const removed = prev[index]
+      if (removed) URL.revokeObjectURL(removed)
+      return prev.filter((_, currentIndex) => currentIndex !== index)
+    })
+  }
+
+  const handleSubmit = () => {
+    setSubmitted(true)
+    router.replace(`/dispute/${id}?submitted=1`)
+  }
+
+  const showSubmitted = submitted || searchParams.get("submitted") === "1"
 
   if (!order) {
     return (
@@ -106,17 +156,15 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
     )
   }
 
-  if (submitted) {
+  if (showSubmitted) {
     return (
       <div className="container mx-auto py-8 px-4 max-w-lg text-center space-y-4">
         <AlertTriangle className="h-12 w-12 mx-auto text-yellow-500" />
-        <h2 className="text-xl font-bold">争议已提交</h2>
-        <p className="text-sm text-muted-foreground">
-          平台将在 3 个工作日内审核你的争议申请，期间聊天会话仍可使用。
-        </p>
-        <Button asChild>
-          <Link href={`/order/${id}`}>返回订单</Link>
-        </Button>
+        <h2 className="text-xl font-bold">争议已提交，请等待平台处理</h2>
+        <p className="text-sm text-muted-foreground">平台将在 3 个工作日内审核你的争议申请。</p>
+        <Link href={`/order/${id}`} className="text-sm text-primary hover:underline">
+          返回订单详情
+        </Link>
       </div>
     )
   }
@@ -155,9 +203,51 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
 
           <div className="space-y-2">
             <Label>上传证据截图</Label>
-            <div className="border-2 border-dashed rounded-md p-6 text-center text-sm text-muted-foreground">
-              点击或拖拽上传截图（最多5张）
-            </div>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              multiple
+              className="hidden"
+              onChange={handleFileSelect}
+            />
+            <button
+              type="button"
+              className="w-full border-2 border-dashed rounded-md p-6 text-center text-sm text-muted-foreground hover:border-primary/50 hover:text-foreground transition-colors disabled:opacity-50"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={files.length >= 5}
+            >
+              <div className="flex flex-col items-center gap-2">
+                <Upload className="h-5 w-5" />
+                <span>点击上传截图（最多5张）</span>
+              </div>
+            </button>
+            {files.length > 0 && (
+              <div className="grid grid-cols-5 gap-2">
+                {files.map((fileUrl, index) => (
+                  <div
+                    key={fileUrl}
+                    className="relative h-16 w-16 rounded border overflow-hidden bg-muted"
+                  >
+                    <Image
+                      src={fileUrl}
+                      alt={`证据截图 ${index + 1}`}
+                      fill
+                      unoptimized
+                      className="object-cover"
+                    />
+                    <button
+                      type="button"
+                      className="absolute right-0 top-0 rounded-bl bg-background/90 p-0.5"
+                      onClick={() => handleRemoveFile(index)}
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+            <div className="text-xs text-muted-foreground">最多5张</div>
           </div>
 
           <div className="rounded-md bg-muted/50 p-3 text-xs text-muted-foreground space-y-1">
@@ -167,7 +257,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
             <p>· 对仲裁结果不满可申诉一次</p>
           </div>
 
-          <Button className="w-full" disabled={!reason.trim()} onClick={() => setSubmitted(true)}>
+          <Button className="w-full" disabled={!reason.trim()} onClick={handleSubmit}>
             提交争议
           </Button>
         </CardContent>