juwan/juwan-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): refine account pages

Browse Source
This commit is contained in:
zetaloop
2026-04-25 20:24:18 +08:00
parent 151fabe8c2
commit b0cecd58b0
4 changed files with 253 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(account)/notifications/page.tsx
+126 -57
View File
@@ -2,14 +2,15 @@
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { requestWithAuth } from "@/lib/api/client"
import { listNotifications, markAllNotificationsAsRead } from "@/lib/api/notifications"
import { toApiError } from "@/lib/errors"
import { notifyInfo } from "@/lib/toast"
import type { Notification } from "@/lib/types"
import { Bell, CheckCheck, MessageSquare, ShoppingBag } from "lucide-react"
import { cn } from "@/lib/utils"
import { Bell, CheckCheck, Loader2, MessageSquare, ShoppingBag } from "lucide-react"
import Link from "next/link"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
@@ -25,36 +26,69 @@ const typeLabels: Record<Notification["type"], string> = {
system: "系统",
}
const typeVariants: Record<Notification["type"], "info" | "neutral" | "default" | "secondary"> = {
order: "info",
community: "neutral",
system: "neutral",
}
function NotificationItem({ notification }: { notification: Notification }) {
const Icon = typeIcons[notification.type]
const content = (
<Card className="p-0 hover:bg-muted/50 transition-colors">
<CardContent className="flex items-start gap-3 p-4">
<div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0 mt-0.5">
<Icon className="h-4 w-4" />
<div
className={cn(
"flex items-start gap-4 p-4 transition-colors group relative",
notification.read ? "hover:bg-muted/10" : "bg-primary/5 hover:bg-primary/10",
)}
>
<div
className={cn(
"h-10 w-10 rounded-full border border-border/40 flex items-center justify-center shrink-0",
notification.read ? "bg-muted/40" : "bg-background",
)}
>
<Icon
className={cn("h-4 w-4", notification.read ? "text-muted-foreground" : "text-primary")}
/>
</div>
<div className="flex-1 min-w-0 space-y-1">
<div className="flex items-center gap-2">
<span
className={cn(
"text-sm",
notification.read ? "text-foreground font-medium" : "text-foreground font-bold",
)}
>
{notification.title}
</span>
{!notification.read && (
<span className="h-1.5 w-1.5 rounded-full bg-primary shrink-0 ml-1" />
)}
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="text-sm font-medium">{notification.title}</span>
{!notification.read && <span className="h-2 w-2 rounded-full bg-primary shrink-0" />}
</div>
<p className="text-sm text-muted-foreground mt-0.5">{notification.content}</p>
<p className="text-xs text-muted-foreground mt-1">
{new Date(notification.createdAt).toLocaleString("zh-CN")}
</p>
</div>
<Badge variant="outline" className="text-[10px] shrink-0">
{typeLabels[notification.type]}
</Badge>
</CardContent>
</Card>
<p className="text-sm text-muted-foreground leading-relaxed">{notification.content}</p>
<p className="text-xs text-muted-foreground/70">
{new Date(notification.createdAt).toLocaleString("zh-CN")}
</p>
</div>
<Badge
variant={typeVariants[notification.type] || "neutral"}
className="text-[10px] px-1.5 py-0 leading-tight shrink-0 mt-1"
>
{typeLabels[notification.type]}
</Badge>
</div>
)
return notification.link ? (
<Link className="block" href={notification.link}>
<Link
className="block border-b border-border/60 last:border-0 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
href={notification.link}
>
{content}
</Link>
) : (
content
<div className="border-b border-border/60 last:border-0">{content}</div>
)
}
@@ -148,75 +182,110 @@ export default function NotificationsPage() {
(items: Notification[], emptyText: string) => {
if (loading) {
return (
<Card>
<CardContent className="py-8 text-center text-sm text-muted-foreground">
加载中...
</CardContent>
</Card>
<EmptyState
title="加载中"
description="正在获取您的通知记录..."
icon={Loader2}
className="[&>div>svg]:animate-spin my-4 border-dashed"
/>
)
}
if (loadingError) {
return (
<Card>
<CardContent className="py-8 text-center text-sm text-muted-foreground">
{loadingError}
</CardContent>
</Card>
<EmptyState
title="加载失败"
description={loadingError}
className="my-4 border-destructive/20 bg-destructive/5"
/>
)
}
if (items.length === 0) {
return (
<Card>
<CardContent className="py-8 text-center text-sm text-muted-foreground">
{emptyText}
</CardContent>
</Card>
<EmptyState
title={emptyText}
description="您的所有相关通知将显示在这里。"
className="my-4 border-dashed"
/>
)
}
return items.map((notification) => (
<NotificationItem key={notification.id} notification={notification} />
))
return (
<div className="rounded-xl border border-border/60 bg-card overflow-hidden my-4 shadow-sm">
{items.map((notification) => (
<NotificationItem key={notification.id} notification={notification} />
))}
</div>
)
},
[loading, loadingError],
)
return (
<div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<h1 className="text-2xl font-bold">通知中心</h1>
{unreadCount > 0 && <Badge>{unreadCount} 条未读</Badge>}
<div className="flex items-center justify-between pb-2 border-b border-border/40">
<div className="flex items-center gap-3">
<h1 className="text-2xl font-bold tracking-tight">通知中心</h1>
{unreadCount > 0 && (
<Badge variant="default" className="rounded-full px-2 py-0 h-5">
{unreadCount}
</Badge>
)}
</div>
<Button variant="outline" size="sm" onClick={markAllAsRead} disabled={markingAll}>
<CheckCheck className="mr-1 h-4 w-4" />
<Button
variant="outline"
size="sm"
onClick={markAllAsRead}
disabled={markingAll || unreadCount === 0}
className="border-border/60"
>
<CheckCheck className="mr-1.5 h-4 w-4" />
全部已读
</Button>
</div>
<Tabs defaultValue="all">
<TabsList>
<TabsTrigger value="all">全部</TabsTrigger>
<TabsTrigger value="order">订单</TabsTrigger>
<TabsTrigger value="community">社区</TabsTrigger>
<TabsTrigger value="system">系统</TabsTrigger>
<Tabs defaultValue="all" className="w-full">
<TabsList className="bg-transparent border-b border-border/40 w-full justify-start rounded-none p-0 h-10 space-x-6">
<TabsTrigger
value="all"
className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-0 h-10"
>
全部
</TabsTrigger>
<TabsTrigger
value="order"
className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-0 h-10"
>
订单
</TabsTrigger>
<TabsTrigger
value="community"
className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-0 h-10"
>
社区
</TabsTrigger>
<TabsTrigger
value="system"
className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none px-0 h-10"
>
系统
</TabsTrigger>
</TabsList>
<TabsContent value="all" className="flex flex-col gap-3 mt-4">
<TabsContent value="all" className="outline-none">
{renderTab(notifications, "暂无通知")}
</TabsContent>
<TabsContent value="order" className="flex flex-col gap-3 mt-4">
<TabsContent value="order" className="outline-none">
{renderTab(orderNotifs, "暂无订单通知")}
</TabsContent>
<TabsContent value="community" className="flex flex-col gap-3 mt-4">
<TabsContent value="community" className="outline-none">
{renderTab(communityNotifs, "暂无社区通知")}
</TabsContent>
<TabsContent value="system" className="flex flex-col gap-3 mt-4">
<TabsContent value="system" className="outline-none">
{renderTab(systemNotifs, "暂无系统通知")}
</TabsContent>
</Tabs>
app/(account)/verify/page.tsx
+33 -47
View File
@@ -11,6 +11,7 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { StatusBadge } from "@/components/ui/status-badge"
import {
applyCurrentUserVerification,
getCurrentUserForLogin,
@@ -21,7 +22,7 @@ import { toApiError } from "@/lib/errors"
import { notifyInfo, notifySuccess } from "@/lib/toast"
import type { UserRole } from "@/lib/types"
import { useAuthStore } from "@/store/auth"
import { CheckCircle, Clock, ShieldCheck, Upload } from "lucide-react"
import { CheckCircle, ShieldCheck, Upload } from "lucide-react"
import { useEffect, useState } from "react"
type MaterialKey = "idCardFront" | "idCardBack" | "gameScreenshot"
@@ -38,7 +39,7 @@ function MaterialUpload({
onSelect: (file: File) => Promise<void>
}) {
return (
<label className="h-24 w-24 rounded-md border-2 border-dashed border-muted-foreground/25 flex flex-col items-center justify-center gap-1 text-muted-foreground cursor-pointer hover:border-muted-foreground/50 transition-colors">
<label className="h-24 w-24 rounded-lg border border-border/60 bg-muted/20 flex flex-col items-center justify-center gap-1.5 text-muted-foreground cursor-pointer hover:bg-accent/50 hover:border-border transition-colors">
<input
type="file"
accept="image/*"
@@ -52,10 +53,10 @@ function MaterialUpload({
target.value = ""
}}
/>
<Upload className="h-5 w-5" />
<span className="text-[10px]">{uploading ? "上传中..." : label}</span>
<Upload className="h-5 w-5 opacity-70" />
<span className="text-[10px] font-medium">{uploading ? "上传中..." : label}</span>
{value && (
<Badge variant="secondary" className="text-[10px] px-1.5 py-0">
<Badge variant="success" className="text-[10px] px-1.5 py-0 mt-0.5">
已上传
</Badge>
)}
@@ -155,14 +156,12 @@ export default function VerifyPage() {
}
return (
<div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
<div className="container mx-auto max-w-2xl px-4 py-8 space-y-8">
<h1 className="text-2xl font-bold">身份认证</h1>
<Card>
<CardHeader>
<CardTitle className="text-base">认证说明</CardTitle>
</CardHeader>
<CardContent className="space-y-3 text-sm text-muted-foreground">
<section className="space-y-4">
<h2 className="text-base font-semibold">认证说明</h2>
<div className="rounded-xl border border-border/60 bg-muted/10 p-4 space-y-3 text-sm text-muted-foreground">
<div className="flex items-start gap-2">
<ShieldCheck className="h-4 w-4 shrink-0 mt-0.5 text-primary" />
<span>通过身份认证后，你可以成为打手或店主，开始接单或经营店铺</span>
@@ -171,64 +170,51 @@ export default function VerifyPage() {
<CheckCircle className="h-4 w-4 shrink-0 mt-0.5 text-primary" />
<span>认证信息仅用于平台审核，不会对外展示</span>
</div>
</CardContent>
</Card>
</div>
</section>
<Card>
<CardHeader>
<CardTitle className="text-base">认证状态</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<section className="space-y-4">
<h2 className="text-base font-semibold">认证状态</h2>
<div className="rounded-xl border border-border/60 divide-y divide-border/60">
{roleMeta.map((item) => {
const status = statusFor(item.role)
const reason = reasonFor(item.role)
return (
<Card key={item.role} className="p-3 space-y-2 shadow-none">
<div key={item.role} className="flex flex-col gap-2 p-4">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">{item.label}</span>
{status === "approved" || verifiedRoles.includes(item.role) ? (
<Badge
variant="outline"
className="text-green-700 border-green-200 bg-green-50"
>
已通过
</Badge>
<StatusBadge status="success">已通过</StatusBadge>
) : status === "pending" ? (
<Badge variant="outline">
<Clock className="mr-1 h-3.5 w-3.5" />
审核中
</Badge>
<StatusBadge status="info">审核中</StatusBadge>
) : status === "rejected" ? (
<Badge variant="outline" className="text-red-700 border-red-200 bg-red-50">
未通过
</Badge>
<StatusBadge status="destructive">未通过</StatusBadge>
) : (
<Badge variant="secondary">未申请</Badge>
<StatusBadge status="neutral">未申请</StatusBadge>
)}
</div>
{status === "rejected" && (
<p className="text-xs text-muted-foreground">驳回原因：{reason}</p>
<div className="flex items-center justify-between mt-2">
<p className="text-xs text-muted-foreground">驳回原因：{reason}</p>
<Button variant="outline" size="sm" onClick={() => setVerifyRole(item.role)}>
重新填写
</Button>
</div>
)}
{status === "rejected" && (
<Button variant="outline" size="sm" onClick={() => setVerifyRole(item.role)}>
重新填写
</Button>
)}
</Card>
</div>
)
})}
</CardContent>
</Card>
</div>
</section>
<Card>
<Card className="border-border/60 shadow-sm">
<CardHeader>
<CardTitle className="text-base">申请认证</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-2">
<div className="space-y-3">
<Label>认证类型</Label>
<Select value={verifyRole} onValueChange={(value) => setVerifyRole(value as UserRole)}>
<SelectTrigger>
@@ -241,9 +227,9 @@ export default function VerifyPage() {
</Select>
</div>
<div className="space-y-2">
<div className="space-y-3">
<Label>证明材料</Label>
<div className="flex gap-2">
<div className="flex flex-wrap gap-3">
<MaterialUpload
label="身份证正面"
value={idCardFront}
app/(account)/wallet/page.tsx
+81 -45
View File
@@ -3,6 +3,7 @@
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { EmptyState } from "@/components/ui/empty-state"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { requestWithAuth } from "@/lib/api"
@@ -42,6 +43,14 @@ const typeIcons: Record<string, typeof ArrowUpRight> = {
refund: ArrowDownLeft,
}
const typeVariants: Record<string, "success" | "info" | "warning" | "neutral" | "destructive"> = {
topup: "success",
income: "success",
refund: "info",
payment: "neutral",
withdrawal: "neutral",
}
export default function WalletPage() {
const { currentRole } = useAuthStore()
const isConsumer = currentRole === "consumer"
@@ -196,25 +205,25 @@ export default function WalletPage() {
<div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
<h1 className="text-2xl font-bold">钱包</h1>
<Card>
<Card className="border-border/60 shadow-sm">
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-muted-foreground">
{isConsumer ? "账户余额" : "收入余额"}
</p>
<p className="text-3xl font-bold mt-1">
<p className="text-3xl font-bold mt-1 tracking-tight">
{balance === null ? (
<span className="text-muted-foreground">--</span>
<span className="text-muted-foreground opacity-50">--</span>
) : (
<>¥{balance.toFixed(2)}</>
)}
</p>
{loadError && <p className="text-xs text-destructive mt-2">{loadError}</p>}
</div>
<Wallet className="h-10 w-10 text-muted-foreground" />
<Wallet className="h-10 w-10 text-muted-foreground/30" />
</div>
<div className="flex gap-2 mt-4">
<div className="flex gap-2 mt-6">
{isConsumer ? (
<Button
disabled={isMutating}
@@ -234,7 +243,7 @@ export default function WalletPage() {
</Card>
{isConsumer ? (
<Card>
<Card className="border-border/60 shadow-sm">
<CardHeader>
<CardTitle className="text-base">快捷充值</CardTitle>
</CardHeader>
@@ -244,7 +253,7 @@ export default function WalletPage() {
<Button
key={`amount-${amount}`}
variant={selectedAmount === amount ? "default" : "outline"}
className="h-12"
className="h-12 border-border/60"
onClick={() => {
setSelectedAmount(amount)
setCustomAmount(amount.toString())
@@ -254,12 +263,13 @@ export default function WalletPage() {
</Button>
))}
</div>
<Separator />
<Separator className="bg-border/60" />
<div className="flex gap-2">
<Input
placeholder="自定义金额"
type="number"
value={customAmount}
className="border-border/60 focus-visible:ring-primary/20"
onChange={(event) => {
setCustomAmount(event.target.value)
setSelectedAmount(null)
@@ -272,31 +282,32 @@ export default function WalletPage() {
</CardContent>
</Card>
) : (
<Card>
<Card className="border-border/60 shadow-sm">
<CardHeader>
<CardTitle className="text-base">收入概览</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-3 gap-4 text-center">
<div>
<div className="space-y-1">
<p className="text-xs text-muted-foreground">累计收入</p>
<p className="text-lg font-bold">¥{incomeSummary.income.toFixed(2)}</p>
</div>
<div>
<div className="space-y-1">
<p className="text-xs text-muted-foreground">可提现</p>
<p className="text-lg font-bold">¥{incomeSummary.available.toFixed(2)}</p>
</div>
<div>
<div className="space-y-1">
<p className="text-xs text-muted-foreground">已提现</p>
<p className="text-lg font-bold">¥{incomeSummary.withdrawn.toFixed(2)}</p>
</div>
</div>
<Separator className="my-4" />
<Separator className="my-6 bg-border/60" />
<div className="flex gap-2">
<Input
placeholder="提现金额"
type="number"
value={customAmount}
className="border-border/60 focus-visible:ring-primary/20"
onChange={(event) => setCustomAmount(event.target.value)}
/>
<Button variant="outline" disabled={isMutating} onClick={() => void handleWithdraw()}>
@@ -307,9 +318,14 @@ export default function WalletPage() {
</Card>
)}
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle className="text-base">交易记录</CardTitle>
<Card className="border-border/60 shadow-sm overflow-hidden">
<CardHeader className="flex flex-row items-center justify-between border-b border-border/60 bg-muted/10 py-4">
<div className="space-y-1">
<CardTitle className="text-base">交易记录</CardTitle>
{lastRefreshedAt && (
<p className="text-xs text-muted-foreground">最近刷新：{lastRefreshedAt}</p>
)}
</div>
<Button
variant="ghost"
size="sm"
@@ -323,42 +339,62 @@ export default function WalletPage() {
刷新
</Button>
</CardHeader>
<CardContent className="space-y-3">
{lastRefreshedAt && (
<p className="text-xs text-muted-foreground">最近刷新：{lastRefreshedAt}</p>
)}
<CardContent className="p-0">
{isLoading ? (
<div className="text-center py-8 text-muted-foreground text-sm">加载中...</div>
<EmptyState
title="加载中"
description="正在获取交易记录..."
icon={RefreshCw}
className="border-0"
/>
) : filteredTransactions.length > 0 ? (
filteredTransactions.map((tx) => {
const Icon = typeIcons[tx.type]
const isIncome = tx.type === "topup" || tx.type === "income" || tx.type === "refund"
return (
<div key={tx.id} className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
{Icon ? <Icon className="h-4 w-4" /> : <ArrowUpRight className="h-4 w-4" />}
<div className="divide-y divide-border/60">
{filteredTransactions.map((tx) => {
const Icon = typeIcons[tx.type]
const isIncome = tx.type === "topup" || tx.type === "income" || tx.type === "refund"
return (
<div
key={tx.id}
className="flex items-center justify-between p-4 hover:bg-muted/10 transition-colors"
>
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-muted/40 flex items-center justify-center border border-border/60">
{Icon ? (
<Icon className="h-4 w-4 text-foreground/70" />
) : (
<ArrowUpRight className="h-4 w-4 text-foreground/70" />
)}
</div>
<div className="space-y-0.5">
<p className="text-sm font-medium">{tx.description}</p>
<p className="text-[11px] text-muted-foreground">
{new Date(tx.createdAt).toLocaleString("zh-CN")}
</p>
</div>
</div>
<div>
<p className="text-sm font-medium">{tx.description}</p>
<p className="text-xs text-muted-foreground">
{new Date(tx.createdAt).toLocaleString("zh-CN")}
<div className="text-right space-y-1">
<p
className={`text-sm font-bold ${isIncome ? "text-success" : "text-foreground"}`}
>
{isIncome ? "+" : ""}¥{Math.abs(Number(tx.amount)).toFixed(2)}
</p>
<Badge
variant={typeVariants[tx.type] || "neutral"}
className="text-[10px] px-1.5 py-0 leading-tight"
>
{typeLabels[tx.type]}
</Badge>
</div>
</div>
<div className="text-right">
<p className={`text-sm font-medium ${isIncome ? "text-green-600" : ""}`}>
{isIncome ? "+" : ""}¥{Math.abs(Number(tx.amount)).toFixed(2)}
</p>
<Badge variant="outline" className="text-[10px]">
{typeLabels[tx.type]}
</Badge>
</div>
</div>
)
})
)
})}
</div>
) : (
<div className="text-center py-8 text-muted-foreground text-sm">暂无交易记录</div>
<EmptyState
title="暂无交易记录"
description="你的所有收支记录将显示在这里。"
className="border-0"
/>
)}
</CardContent>
</Card>