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
@@ -4,17 +4,15 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
|
||||
import { listGames, listOrders, listPlayers, listPosts } from "@/lib/api"
|
||||
import { listGames, listPosts } from "@/lib/api"
|
||||
import { roleLabels } from "@/lib/constants"
|
||||
import type { Game, Player, Post } from "@/lib/types"
|
||||
import { ClipboardList, Heart, MessageCircle, PenSquare, Pin } from "lucide-react"
|
||||
import type { Game, Post } from "@/lib/types"
|
||||
import { Heart, MessageCircle, PenSquare, Pin } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
export default function CommunityPage() {
|
||||
const [games, setGames] = useState<Game[]>([])
|
||||
const [players, setPlayers] = useState<Player[]>([])
|
||||
const [orders, setOrders] = useState<Awaited<ReturnType<typeof listOrders>>>([])
|
||||
const [posts, setPosts] = useState<Post[]>([])
|
||||
const [postsLoading, setPostsLoading] = useState(true)
|
||||
|
||||
@@ -24,20 +22,16 @@ export default function CommunityPage() {
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
|
||||
Promise.all([listGames(), listPlayers(), Promise.resolve(listOrders()), listPosts()])
|
||||
.then(([gamesItems, playersItems, ordersItems, postsItems]) => {
|
||||
Promise.all([listGames(), listPosts()])
|
||||
.then(([gamesItems, postsItems]) => {
|
||||
if (cancelled) return
|
||||
setGames(gamesItems)
|
||||
setPlayers(playersItems)
|
||||
setOrders(ordersItems)
|
||||
setPosts(postsItems)
|
||||
setPostsLoading(false)
|
||||
})
|
||||
.catch(() => {
|
||||
if (cancelled) return
|
||||
setGames([])
|
||||
setPlayers([])
|
||||
setOrders([])
|
||||
setPosts([])
|
||||
setPostsLoading(false)
|
||||
})
|
||||
@@ -110,87 +104,55 @@ export default function CommunityPage() {
|
||||
) : filteredPosts.length === 0 ? (
|
||||
<div className="text-center py-12 text-muted-foreground">暂无帖子</div>
|
||||
) : (
|
||||
filteredPosts.map((post) =>
|
||||
(() => {
|
||||
const linkedOrder = post.linkedOrderId
|
||||
? orders.find((order) => order.id === post.linkedOrderId)
|
||||
: null
|
||||
const linkedPlayer = linkedOrder
|
||||
? players.find((player) => player.id === linkedOrder.playerId)
|
||||
: null
|
||||
|
||||
return (
|
||||
<Link key={post.id} href={`/post/${post.id}`} className="block">
|
||||
<Card className="hover:shadow-md transition-shadow gap-4">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarImage src={post.author.avatar} />
|
||||
<AvatarFallback>{post.author.nickname[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">{post.author.nickname}</span>
|
||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0">
|
||||
{roleLabels[post.authorRole]}
|
||||
</Badge>
|
||||
{post.pinned && <Pin className="h-3 w-3 text-muted-foreground" />}
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(post.createdAt).toLocaleDateString("zh-CN")}
|
||||
</span>
|
||||
</div>
|
||||
filteredPosts.map((post) => (
|
||||
<Link key={post.id} href={`/post/${post.id}`} className="block">
|
||||
<Card className="hover:shadow-md transition-shadow gap-4">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarImage src={post.author.avatar} />
|
||||
<AvatarFallback>{post.author.nickname[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">{post.author.nickname}</span>
|
||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0">
|
||||
{roleLabels[post.author.role]}
|
||||
</Badge>
|
||||
{post.pinned && <Pin className="h-3 w-3 text-muted-foreground" />}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<h3 className="font-semibold mb-1">{post.title}</h3>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">{post.content}</p>
|
||||
{post.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{post.tags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary" className="text-xs">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{post.linkedOrderId && (
|
||||
<div className="mt-2 rounded-lg border bg-muted/30 px-3 py-2 text-xs text-muted-foreground space-y-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<ClipboardList className="h-3.5 w-3.5" />
|
||||
关联订单秀单
|
||||
</div>
|
||||
{linkedOrder && (
|
||||
<div className="pl-5">
|
||||
<p>
|
||||
{linkedOrder.service.gameName} · {linkedOrder.service.title}
|
||||
</p>
|
||||
<p>
|
||||
{linkedOrder.playerName}
|
||||
{linkedPlayer ? ` · ${linkedPlayer.rating}` : ""}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardFooter className="text-sm text-muted-foreground gap-4">
|
||||
<span className="flex items-center gap-1">
|
||||
<Heart
|
||||
className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`}
|
||||
/>
|
||||
{post.likeCount}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(post.createdAt).toLocaleDateString("zh-CN")}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<MessageCircle className="h-4 w-4" />
|
||||
{post.commentCount}
|
||||
</span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Link>
|
||||
)
|
||||
})(),
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<h3 className="font-semibold mb-1">{post.title}</h3>
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">{post.content}</p>
|
||||
{post.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{post.tags.map((tag) => (
|
||||
<Badge key={tag} variant="secondary" className="text-xs">
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardFooter className="text-sm text-muted-foreground gap-4">
|
||||
<span className="flex items-center gap-1">
|
||||
<Heart className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`} />
|
||||
{post.likeCount}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<MessageCircle className="h-4 w-4" />
|
||||
{post.commentCount}
|
||||
</span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -155,7 +155,7 @@ export default async function PlayerDetailPage({ params }: { params: Promise<{ i
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<Avatar>
|
||||
<AvatarImage src={review.fromUserAvatar} alt={review.fromUserName} />
|
||||
<AvatarImage src="" alt={review.fromUserName} />
|
||||
<AvatarFallback>{review.fromUserName[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-grow space-y-2">
|
||||
|
||||
@@ -38,7 +38,7 @@ export default async function PostDetailPage({ params }: { params: Promise<{ id:
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{post.author.nickname}</span>
|
||||
<Badge variant="outline" className="text-[10px] px-1.5 py-0">
|
||||
{roleLabels[post.authorRole]}
|
||||
{roleLabels[post.author.role]}
|
||||
</Badge>
|
||||
{post.pinned && <Pin className="h-3 w-3 text-muted-foreground" />}
|
||||
</div>
|
||||
@@ -62,18 +62,6 @@ export default async function PostDetailPage({ params }: { params: Promise<{ id:
|
||||
</div>
|
||||
)}
|
||||
|
||||
{post.linkedOrderId && (
|
||||
<Link href={`/order/${post.linkedOrderId}`}>
|
||||
<div className="rounded-lg border bg-muted/30 p-3 text-sm hover:bg-muted/50 transition-colors">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Star className="h-3.5 w-3.5 text-yellow-500" />
|
||||
<span className="font-medium">关联订单</span>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">点击查看订单详情</p>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{post.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{post.tags.map((tag) => (
|
||||
@@ -84,6 +72,18 @@ export default async function PostDetailPage({ params }: { params: Promise<{ id:
|
||||
</div>
|
||||
)}
|
||||
|
||||
{post.linkedOrderId ? (
|
||||
<Link href={`/order/${post.linkedOrderId}`}>
|
||||
<div className="rounded-lg border bg-muted/30 p-3 text-sm hover:bg-muted/50 transition-colors">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Star className="h-3.5 w-3.5 text-yellow-500" />
|
||||
<span className="font-medium">关联订单</span>
|
||||
</div>
|
||||
<p className="text-muted-foreground text-xs">点击查看订单详情</p>
|
||||
</div>
|
||||
</Link>
|
||||
) : null}
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground pt-2">
|
||||
<PostLikeButton
|
||||
postId={post.id}
|
||||
|
||||
@@ -78,13 +78,11 @@ export default function NewPostPage() {
|
||||
|
||||
createPost({
|
||||
author: user,
|
||||
authorRole: currentRole,
|
||||
title: data.title,
|
||||
content: data.content,
|
||||
images: Array.from({ length: imageCount }).map(() => "/posts/p1-1.jpg"),
|
||||
tags: selectedTags,
|
||||
linkedOrderId: effectivePostType === "show_order" ? selectedOrderId : undefined,
|
||||
quotedPostId: effectivePostType === "quote" ? selectedQuotePostId : undefined,
|
||||
})
|
||||
|
||||
router.push("/community")
|
||||
@@ -131,7 +129,7 @@ export default function NewPostPage() {
|
||||
<SelectContent>
|
||||
{availableOrders.map((order) => (
|
||||
<SelectItem key={order.id} value={order.id}>
|
||||
{order.service.title} · {order.playerName}
|
||||
{order.service.title}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
|
||||
@@ -218,7 +218,7 @@ function ShopCard({ item }: { item: ShopSearchItem }) {
|
||||
<div className="flex items-center gap-4 mb-3 text-sm">
|
||||
<div className="flex items-center gap-1 text-yellow-500 font-medium">
|
||||
<Star className="w-4 h-4 fill-current" />
|
||||
{item.shop.rating.toFixed(1)}
|
||||
{item.shop.rating}
|
||||
</div>
|
||||
<div className="text-muted-foreground">接单 {item.shop.totalOrders}</div>
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,7 @@ export default async function ShopPage({ params }: PageProps) {
|
||||
const [shopPlayers, allServices] = await Promise.all([listPlayersByShop(shop.id), listServices()])
|
||||
const playerIds = shopPlayers.map((p) => p.id)
|
||||
const shopServices = allServices.filter((s) => playerIds.includes(s.playerId))
|
||||
const shopReviews = (await listReviews()).filter((r) => playerIds.includes(r.toUserId))
|
||||
const shopReviews = await listReviews()
|
||||
const sortedSections = [...shop.templateConfig.sections]
|
||||
.filter((s) => s.enabled)
|
||||
.sort((a, b) => a.order - b.order)
|
||||
@@ -234,7 +234,7 @@ export default async function ShopPage({ params }: PageProps) {
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex gap-4">
|
||||
<Avatar>
|
||||
<AvatarImage src={review.fromUserAvatar} />
|
||||
<AvatarImage src="" />
|
||||
<AvatarFallback>{review.fromUserName[0]}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 space-y-1">
|
||||
|
||||
Reference in New Issue
Block a user