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

style(order): apply proto2 surfaces

Browse Source
This commit is contained in:
zetaloop
2026-02-25 05:19:13 +08:00
parent 3f3172fabb
commit b57fe7f9dd
5 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(order)/chat/[id]/page.tsx
+12 -9
View File
@@ -7,6 +7,7 @@ import { use, useMemo, useRef, useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { ScrollArea } from "@/components/ui/scroll-area" import { ScrollArea } from "@/components/ui/scroll-area"
import { sendImageMessage, sendTextMessage } from "@/lib/api/chat" import { sendImageMessage, sendTextMessage } from "@/lib/api/chat"
@@ -60,11 +61,12 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
const other = session.participants.find((p) => p.id !== userId) ?? session.participants[0] const other = session.participants.find((p) => p.id !== userId) ?? session.participants[0]
return ( return (
<div className="flex flex-col h-[calc(100vh-3.5rem)]"> <div className="container mx-auto max-w-3xl px-4 py-8 h-[calc(100vh-3.5rem)] flex flex-col">
<div className="border-b px-4 py-3 flex items-center gap-3"> <Card className="flex-1 flex flex-col overflow-hidden hover:shadow-[var(--shadow-card)]">
<Link href="/chat" className="text-muted-foreground hover:text-foreground"> <div className="border-b px-4 py-3 flex items-center gap-3 bg-muted/30">
<ArrowLeft className="h-5 w-5" /> <Link href="/chat" className="text-muted-foreground hover:text-foreground">
</Link> <ArrowLeft className="h-5 w-5" />
</Link>
<Avatar className="h-8 w-8"> <Avatar className="h-8 w-8">
<AvatarImage src={other.avatar} /> <AvatarImage src={other.avatar} />
<AvatarFallback>{other.name[0]}</AvatarFallback> <AvatarFallback>{other.name[0]}</AvatarFallback>
@@ -86,7 +88,7 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
</div> </div>
<ScrollArea className="flex-1 p-4"> <ScrollArea className="flex-1 p-4">
<div className="space-y-4 max-w-2xl mx-auto"> <div className="space-y-4">
{messages.map((msg) => { {messages.map((msg) => {
if (msg.type === "system") { if (msg.type === "system") {
return ( return (
@@ -138,7 +140,7 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
</ScrollArea> </ScrollArea>
{!session.readonly ? ( {!session.readonly ? (
<div className="border-t p-4"> <div className="border-t p-4 bg-muted/30">
<input <input
ref={imageInputRef} ref={imageInputRef}
type="file" type="file"
@@ -153,7 +155,7 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
}} }}
/> />
<form <form
className="flex gap-2 max-w-2xl mx-auto" className="flex gap-2"
onSubmit={(e) => { onSubmit={(e) => {
e.preventDefault() e.preventDefault()
const text = input.trim() const text = input.trim()
@@ -187,11 +189,12 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
</form> </form>
</div> </div>
) : ( ) : (
<div className="border-t p-4 text-center text-sm text-muted-foreground"> <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" /> <Lock className="h-4 w-4 inline mr-1" />
订单已关闭，会话为只读状态 订单已关闭，会话为只读状态
</div> </div>
)} )}
</Card>
</div> </div>
) )
} }
app/(order)/chat/page.tsx
+5 -5
View File
@@ -13,17 +13,17 @@ export default function ChatListPage() {
const userId = useAuthStore((state) => state.user?.id) const userId = useAuthStore((state) => state.user?.id)
return ( return (
<div className="container mx-auto py-8 px-4 max-w-2xl"> <div className="container mx-auto max-w-2xl px-4 py-8 space-y-6">
<h1 className="text-2xl font-bold mb-6">消息</h1> <h1 className="text-2xl font-bold">消息</h1>
<div className="space-y-3"> <div className="space-y-4">
{sessions.map((session) => { {sessions.map((session) => {
const other = const other =
session.participants.find((participant) => participant.id !== userId) ?? session.participants.find((participant) => participant.id !== userId) ??
session.participants[0] session.participants[0]
return ( return (
<Link key={session.id} href={`/chat/${session.id}`}> <Link key={session.id} href={`/chat/${session.id}`}>
<Card className="hover:bg-accent/30 transition-colors"> <Card>
<CardContent className="flex items-center gap-3 py-3"> <CardContent className="flex items-center gap-3 py-3">
<Avatar className="h-10 w-10"> <Avatar className="h-10 w-10">
<AvatarImage src={other.avatar} /> <AvatarImage src={other.avatar} />
@@ -58,7 +58,7 @@ export default function ChatListPage() {
})} })}
{sessions.length === 0 && ( {sessions.length === 0 && (
<Card> <Card className="hover:shadow-[var(--shadow-card)]">
<CardContent className="py-8 text-center text-sm text-muted-foreground"> <CardContent className="py-8 text-center text-sm text-muted-foreground">
<MessageSquare className="h-12 w-12 mx-auto mb-2 opacity-50" /> <MessageSquare className="h-12 w-12 mx-auto mb-2 opacity-50" />
暂无消息 暂无消息
app/(order)/dispute/[id]/page.tsx
+6 -6
View File
@@ -150,16 +150,16 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
isParticipant && existingDispute.status === "resolved" && !existingDispute.appealedAt isParticipant && existingDispute.status === "resolved" && !existingDispute.appealedAt
return ( return (
<div className="container mx-auto py-8 px-4 max-w-2xl"> <div className="container mx-auto max-w-2xl px-4 py-8 space-y-4">
<Link <Link
href={`/order/${id}`} href={`/order/${id}`}
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4" className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
> >
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
返回订单 返回订单
</Link> </Link>
<Card> <Card className="hover:shadow-[var(--shadow-card)]">
<CardHeader> <CardHeader>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle>争议详情</CardTitle> <CardTitle>争议详情</CardTitle>
@@ -384,16 +384,16 @@ export default function DisputePage({ params }: { params: Promise<{ id: string }
} }
return ( return (
<div className="container mx-auto py-8 px-4 max-w-lg"> <div className="container mx-auto max-w-lg px-4 py-8 space-y-4">
<Link <Link
href={`/order/${id}`} href={`/order/${id}`}
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4" className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
> >
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
返回订单 返回订单
</Link> </Link>
<Card> <Card className="hover:shadow-[var(--shadow-card)]">
<CardHeader> <CardHeader>
<CardTitle className="flex items-center gap-2"> <CardTitle className="flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-yellow-500" /> <AlertTriangle className="h-5 w-5 text-yellow-500" />
app/(order)/orders/page.tsx
+5 -5
View File
@@ -103,8 +103,8 @@ function OrderListContent({
}) })
return ( return (
<div className="container mx-auto py-8 px-4"> <div className="container mx-auto max-w-3xl px-4 py-8 space-y-6">
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">我的订单</h1> <h1 className="text-2xl font-bold">我的订单</h1>
<Badge variant="outline" className="text-xs"> <Badge variant="outline" className="text-xs">
{currentRole === "consumer" {currentRole === "consumer"
@@ -124,16 +124,16 @@ function OrderListContent({
))} ))}
</TabsList> </TabsList>
<TabsContent value={tab} className="mt-4 space-y-3"> <TabsContent value={tab} className="mt-4 space-y-4">
{filtered.length === 0 ? ( {filtered.length === 0 ? (
<Card> <Card className="hover:shadow-[var(--shadow-card)]">
<CardContent className="py-8 text-center text-sm text-muted-foreground"> <CardContent className="py-8 text-center text-sm text-muted-foreground">
暂无订单 暂无订单
</CardContent> </CardContent>
</Card> </Card>
) : ( ) : (
filtered.map((order) => ( filtered.map((order) => (
<Card key={order.id}> <Card key={order.id} className="hover:shadow-[var(--shadow-card)]">
<CardHeader className="pb-3"> <CardHeader className="pb-3">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<CardTitle className="text-base">{order.service.title}</CardTitle> <CardTitle className="text-base">{order.service.title}</CardTitle>
app/(order)/review/[id]/page.tsx
+3 -3
View File
@@ -77,16 +77,16 @@ export default function ReviewPage({ params }: { params: Promise<{ id: string }>
} }
return ( return (
<div className="container mx-auto py-8 px-4 max-w-lg"> <div className="container mx-auto max-w-lg px-4 py-8 space-y-4">
<Link <Link
href={`/order/${id}`} href={`/order/${id}`}
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-4" className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
> >
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
返回订单 返回订单
</Link> </Link>
<Card> <Card className="hover:shadow-[var(--shadow-card)]">
<CardHeader> <CardHeader>
<CardTitle>评价服务</CardTitle> <CardTitle>评价服务</CardTitle>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">