fix(pages): adapt all pages to backend-aligned types

Replace removed fields with available data sources throughout UI: - order pages: use service.title instead of consumer/player names - chat: look up sender from session.participants, remove readonly - community: simplify post cards, keep pinned icon - post detail: keep pinned/linkedOrderId display - shop rules: use string commissionValue - dashboard: parse string amounts for income display - dispute/review: remove initiator/avatar references
2026-04-23 21:15:28 +08:00
parent 12284290cc
commit 4d8877f588
17 changed files with 153 additions and 238 deletions
@@ -11,7 +11,7 @@ import { sendImageMessage, sendTextMessage } from "@/lib/api/chat"
 import { notifyInfo } from "@/lib/toast"
 import { cn } from "@/lib/utils"
 import { useAuthStore } from "@/store/auth"
-import { ArrowLeft, ImagePlus, Lock, Send } from "lucide-react"
+import { ArrowLeft, ImagePlus, Send } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 import { use, useEffect, useRef, useState } from "react"
@@ -96,20 +96,14 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
          </Link>
          <Avatar className="h-8 w-8">
            <AvatarImage src={other.avatar} />
-            <AvatarFallback>{other.name[0]}</AvatarFallback>
+            <AvatarFallback>{other.nickname[0]}</AvatarFallback>
          </Avatar>
          <div>
-            <span className="text-sm font-medium">{other.name}</span>
+            <span className="text-sm font-medium">{other.nickname}</span>
            <div className="flex items-center gap-1">
              <Badge variant="outline" className="text-[10px] px-1.5 py-0">
                {session.type === "order" ? "订单会话" : "咨询会话"}
              </Badge>
-              {session.readonly && (
-                <span className="text-[10px] text-muted-foreground flex items-center gap-0.5">
-                  <Lock className="h-3 w-3" />
-                  只读
-                </span>
-              )}
            </div>
          </div>
        </div>
@@ -127,11 +121,14 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
                )
              }
              const isMine = msg.senderId === userId
+              const sender = session.participants.find(
+                (participant) => participant.id === msg.senderId,
+              )
              return (
                <div key={msg.id} className={cn("flex gap-2", isMine && "flex-row-reverse")}>
                  <Avatar className="h-8 w-8 shrink-0">
-                    <AvatarImage src={msg.senderAvatar} />
-                    <AvatarFallback>{msg.senderName[0]}</AvatarFallback>
+                    <AvatarImage src={sender?.avatar} />
+                    <AvatarFallback>{(sender?.nickname ?? "?")[0]}</AvatarFallback>
                  </Avatar>
                  <div className={cn("max-w-[70%]", isMine && "text-right")}>
                    {msg.type === "image" ? (
@@ -166,74 +163,67 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
          </div>
        </ScrollArea>

-        {!session.readonly ? (
-          <div className="border-t p-4 bg-muted/30">
-            <input
-              ref={imageInputRef}
-              type="file"
-              accept="image/*"
-              className="hidden"
-              onChange={(event) => {
-                const target = event.currentTarget
-                const file = target.files?.[0]
-                if (!file) return
-                const imageUrl = URL.createObjectURL(file)
+        <div className="border-t p-4 bg-muted/30">
+          <input
+            ref={imageInputRef}
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={(event) => {
+              const target = event.currentTarget
+              const file = target.files?.[0]
+              if (!file) return
+              const imageUrl = URL.createObjectURL(file)

-                void Promise.resolve(sendImageMessage(session.id, imageUrl))
-                  .then((result) => {
-                    if (!result.ok) {
-                      notifyInfo(result.error.msg)
-                      return
-                    }
-                    return Promise.resolve(listChatMessages(session.id)).then(setMessages)
-                  })
-                  .finally(() => {
-                    target.value = ""
-                  })
-              }}
-            />
-            <form
-              className="flex gap-2"
-              onSubmit={(e) => {
-                e.preventDefault()
-                const text = input.trim()
-                if (!text) return
-
-                void Promise.resolve(sendTextMessage(session.id, text)).then((result) => {
+              void Promise.resolve(sendImageMessage(session.id, imageUrl))
+                .then((result) => {
                  if (!result.ok) {
                    notifyInfo(result.error.msg)
                    return
                  }
-                  setInput("")
                  return Promise.resolve(listChatMessages(session.id)).then(setMessages)
                })
-              }}
+                .finally(() => {
+                  target.value = ""
+                })
+            }}
+          />
+          <form
+            className="flex gap-2"
+            onSubmit={(e) => {
+              e.preventDefault()
+              const text = input.trim()
+              if (!text) return
+
+              void Promise.resolve(sendTextMessage(session.id, text)).then((result) => {
+                if (!result.ok) {
+                  notifyInfo(result.error.msg)
+                  return
+                }
+                setInput("")
+                return Promise.resolve(listChatMessages(session.id)).then(setMessages)
+              })
+            }}
+          >
+            <Input
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              placeholder="输入消息..."
+              className="flex-1"
+            />
+            <Button
+              type="button"
+              size="icon"
+              variant="outline"
+              onClick={() => imageInputRef.current?.click()}
            >
-              <Input
-                value={input}
-                onChange={(e) => setInput(e.target.value)}
-                placeholder="输入消息..."
-                className="flex-1"
-              />
-              <Button
-                type="button"
-                size="icon"
-                variant="outline"
-                onClick={() => imageInputRef.current?.click()}
-              >
-                <ImagePlus className="h-4 w-4" />
-              </Button>
-              <Button type="submit" size="icon" disabled={!input.trim()}>
-                <Send className="h-4 w-4" />
-              </Button>
-            </form>
-          </div>
-        ) : (
-          <div className="border-t p-4 text-center text-sm text-muted-foreground bg-muted/30">
-            <Lock className="h-4 w-4 inline mr-1" />
-            订单已关闭，会话为只读状态
-          </div>
-        )}
+              <ImagePlus className="h-4 w-4" />
+            </Button>
+            <Button type="submit" size="icon" disabled={!input.trim()}>
+              <Send className="h-4 w-4" />
+            </Button>
+          </form>
+        </div>
      </Card>
    </div>
  )
@@ -5,7 +5,7 @@ import { Badge } from "@/components/ui/badge"
 import { Card, CardContent } from "@/components/ui/card"
 import { listChatSessions } from "@/lib/api"
 import { useAuthStore } from "@/store/auth"
-import { Lock, MessageSquare } from "lucide-react"
+import { MessageSquare } from "lucide-react"
 import Link from "next/link"
 import { useEffect, useState } from "react"

@@ -45,24 +45,18 @@ export default function ChatListPage() {
                <CardContent className="flex items-center gap-3 p-4">
                  <Avatar className="h-10 w-10">
                    <AvatarImage src={other.avatar} />
-                    <AvatarFallback>{other.name[0]}</AvatarFallback>
+                    <AvatarFallback>{other.nickname[0]}</AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
-                      <span className="text-sm font-medium">{other.name}</span>
+                      <span className="text-sm font-medium">{other.nickname}</span>
                      <Badge variant="outline" className="text-[10px] px-1.5 py-0">
                        {session.type === "order" ? "订单" : "咨询"}
                      </Badge>
-                      {session.readonly && <Lock className="h-3 w-3 text-muted-foreground" />}
                    </div>
                    <p className="text-xs text-muted-foreground truncate">{session.lastMessage}</p>
                  </div>
                  <div className="flex flex-col items-end gap-1 shrink-0">
-                    {session.lastMessageAt && (
-                      <span className="text-[10px] text-muted-foreground">
-                        {new Date(session.lastMessageAt).toLocaleDateString("zh-CN")}
-                      </span>
-                    )}
                    {session.unreadCount > 0 && (
                      <Badge className="h-4 min-w-4 px-1 flex items-center justify-center text-[10px]">
                        {session.unreadCount}
@@ -213,10 +213,8 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
  }

  if (existingDispute) {
-    const isInitiator = userId === existingDispute.initiatorId
    const canRespond =
      isParticipant &&
-      !isInitiator &&
      !existingDispute.respondentReason &&
      (existingDispute.status === "open" || existingDispute.status === "reviewing")
    const canAppeal =
@@ -246,7 +244,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
              <div className="flex items-center gap-2 text-sm">
                <FileText className="h-4 w-4 text-muted-foreground" />
                <span className="text-muted-foreground">发起人:</span>
-                {existingDispute.initiatorName}
+                发起方
              </div>
              <div className="flex items-center gap-2 text-sm">
                <Clock className="h-4 w-4 text-muted-foreground" />
@@ -480,9 +478,7 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
            <AlertTriangle className="h-5 w-5 text-yellow-500" />
            发起争议
          </CardTitle>
-          <p className="text-sm text-muted-foreground">
-            {order.service.title} · {order.playerName}
-          </p>
+          <p className="text-sm text-muted-foreground">{order.service.title}</p>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
@@ -140,7 +140,7 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
    const base =
      order.status === "pending_accept"
        ? new Date(order.createdAt).getTime()
-        : new Date(order.closedAt ?? order.createdAt).getTime()
+        : new Date(order.createdAt).getTime()
    const timeoutMs =
      order.status === "pending_accept" ? ORDER_ACCEPT_TIMEOUT_MS : ORDER_CLOSE_TIMEOUT_MS
    const remainSeconds = Math.max(0, Math.ceil((timeoutMs - (nowTs - base)) / 1000))
@@ -223,17 +223,9 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
          <div className="flex justify-between text-sm">
            <span className="text-muted-foreground">打手</span>
            <Link href={`/player/${order.playerId}`} className="text-primary hover:underline">
-              {order.playerName}
+              {order.service.title}
            </Link>
          </div>
-          {order.shopName && (
-            <div className="flex justify-between text-sm">
-              <span className="text-muted-foreground">店铺</span>
-              <Link href={`/shop/${order.shopId}`} className="text-primary hover:underline">
-                {order.shopName}
-              </Link>
-            </div>
-          )}
          <Separator />
          <div className="flex justify-between text-sm font-medium">
            <span>总价</span>
@@ -265,13 +257,6 @@ export default function OrderDetailPage({ params }: { params: Promise<{ id: stri
              {new Date(order.acceptedAt).toLocaleString("zh-CN")}
            </div>
          )}
-          {order.closedAt && (
-            <div className="flex items-center gap-2">
-              <CheckCircle className="h-3.5 w-3.5 text-green-500" />
-              <span className="text-muted-foreground">结单时间:</span>
-              {new Date(order.closedAt).toLocaleString("zh-CN")}
-            </div>
-          )}
          {order.completedAt && (
            <div className="flex items-center gap-2">
              <CheckCircle className="h-3.5 w-3.5 text-green-500" />
@@ -178,13 +178,7 @@ function OrderListContent({
                      {statusLabels[order.status]}
                    </Badge>
                  </div>
-                  <p className="text-sm text-muted-foreground">
-                    {currentRole === "consumer"
-                      ? `打手: ${order.playerName}`
-                      : currentRole === "player"
-                        ? `客户: ${order.consumerName}`
-                        : `客户: ${order.consumerName} · 打手: ${order.playerName}`}
-                  </p>
+                  <p className="text-sm text-muted-foreground">{order.service.title}</p>
                </CardHeader>
                <CardContent>
                  <div className="flex items-center justify-between">
@@ -120,9 +120,7 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
      <Card className="hover:shadow-card-hover">
        <CardHeader>
          <CardTitle>评价服务</CardTitle>
-          <p className="text-sm text-muted-foreground">
-            {order.service.title} · {order.playerName}
-          </p>
+          <p className="text-sm text-muted-foreground">{order.service.title}</p>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="space-y-2">