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
This commit is contained in:
zetaloop
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user