style(search): align search page with proto2 surfaces
This commit is contained in:
zetaloop
+19
-18
@@ -110,7 +110,7 @@ function PlayerCard({ player }: { player: Player }) {
|
||||
|
||||
return (
|
||||
<Link href={`/player/${player.id}`} className="block h-full">
|
||||
<Card className="h-full hover:shadow-md transition-shadow duration-200 overflow-hidden flex flex-col">
|
||||
<Card className="h-full overflow-hidden flex flex-col p-0 gap-0">
|
||||
<CardHeader className="p-4 pb-2 flex flex-row items-start justify-between space-y-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-12 w-12 border-2 border-background shadow-sm">
|
||||
@@ -121,12 +121,12 @@ function PlayerCard({ player }: { player: Player }) {
|
||||
<h3 className="font-semibold text-base leading-none mb-1">{player.user.nickname}</h3>
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
{player.shopName ? (
|
||||
<span className="flex items-center gap-0.5 text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">
|
||||
<span className="flex items-center gap-0.5 text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded-full">
|
||||
<Store className="w-3 h-3" />
|
||||
{player.shopName}
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-0.5 text-gray-600 bg-gray-100 px-1.5 py-0.5 rounded">
|
||||
<span className="flex items-center gap-0.5 text-gray-600 bg-gray-100 px-1.5 py-0.5 rounded-full">
|
||||
<User className="w-3 h-3" />
|
||||
个人
|
||||
</span>
|
||||
@@ -163,7 +163,7 @@ function PlayerCard({ player }: { player: Player }) {
|
||||
{player.tags.slice(0, 2).map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="text-[10px] px-1.5 py-0.5 bg-muted rounded text-muted-foreground"
|
||||
className="text-[10px] px-1.5 py-0.5 bg-muted rounded-full text-muted-foreground"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
@@ -179,7 +179,7 @@ function PlayerCard({ player }: { player: Player }) {
|
||||
<span className="text-lg font-bold text-primary">¥{minPrice}</span>
|
||||
<span className="text-xs text-muted-foreground">/{unit}</span>
|
||||
</div>
|
||||
<Button size="sm" variant="ghost" className="h-8 px-3 text-xs">
|
||||
<Button size="sm" variant="ghost" className="h-8 px-3 text-xs rounded-full">
|
||||
查看详情
|
||||
</Button>
|
||||
</CardFooter>
|
||||
@@ -193,7 +193,7 @@ type ShopSearchItem = Extract<SearchResultItem, { type: "shop" }>
|
||||
function ShopCard({ item }: { item: ShopSearchItem }) {
|
||||
return (
|
||||
<Link href={`/shop/${item.shop.id}`} className="block h-full">
|
||||
<Card className="h-full hover:shadow-md transition-shadow duration-200 overflow-hidden flex flex-col">
|
||||
<Card className="h-full overflow-hidden flex flex-col p-0 gap-0">
|
||||
<CardHeader className="p-4 pb-2 flex flex-row items-start justify-between space-y-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-12 w-12 border-2 border-background shadow-sm">
|
||||
@@ -203,7 +203,7 @@ function ShopCard({ item }: { item: ShopSearchItem }) {
|
||||
<div>
|
||||
<h3 className="font-semibold text-base leading-none mb-1">{item.shop.name}</h3>
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<span className="flex items-center gap-0.5 text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded">
|
||||
<span className="flex items-center gap-0.5 text-blue-600 bg-blue-50 px-1.5 py-0.5 rounded-full">
|
||||
<Store className="w-3 h-3" />
|
||||
店铺
|
||||
</span>
|
||||
@@ -244,7 +244,7 @@ function ShopCard({ item }: { item: ShopSearchItem }) {
|
||||
<span className="text-lg font-bold text-primary">¥{item.minPrice}</span>
|
||||
<span className="text-xs text-muted-foreground">/{item.unit}</span>
|
||||
</div>
|
||||
<Button size="sm" variant="ghost" className="h-8 px-3 text-xs">
|
||||
<Button size="sm" variant="ghost" className="h-8 px-3 text-xs rounded-full">
|
||||
查看详情
|
||||
</Button>
|
||||
</CardFooter>
|
||||
@@ -354,7 +354,7 @@ function FilterSection({
|
||||
最低评分
|
||||
</h3>
|
||||
<Select value={minRating} onValueChange={onRatingChange}>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectTrigger className="h-9 rounded-lg">
|
||||
<SelectValue placeholder="选择评分" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -562,11 +562,11 @@ function SearchPageContent() {
|
||||
|
||||
<div className="flex items-center gap-2 w-full md:w-auto">
|
||||
<div className="relative flex-1 md:w-80">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="搜索陪玩、游戏、标签..."
|
||||
className="pl-9"
|
||||
className="pl-9 rounded-full bg-muted/50 border-transparent focus-visible:bg-background"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
@@ -574,7 +574,7 @@ function SearchPageContent() {
|
||||
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="md:hidden shrink-0">
|
||||
<Button variant="outline" size="icon" className="md:hidden shrink-0 rounded-full">
|
||||
<Filter className="h-4 w-4" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
@@ -598,7 +598,7 @@ function SearchPageContent() {
|
||||
</div>
|
||||
<SheetFooter>
|
||||
<SheetClose asChild>
|
||||
<Button className="w-full">查看 {total} 个结果</Button>
|
||||
<Button className="w-full rounded-full">查看 {total} 个结果</Button>
|
||||
</SheetClose>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
@@ -653,7 +653,7 @@ function SearchPageContent() {
|
||||
variant={sortBy === "composite" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setSortAndSync("composite")}
|
||||
className="whitespace-nowrap"
|
||||
className="whitespace-nowrap rounded-full"
|
||||
>
|
||||
综合排序
|
||||
</Button>
|
||||
@@ -661,7 +661,7 @@ function SearchPageContent() {
|
||||
variant={sortBy === "rating" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setSortAndSync("rating")}
|
||||
className="whitespace-nowrap"
|
||||
className="whitespace-nowrap rounded-full"
|
||||
>
|
||||
评分最高
|
||||
</Button>
|
||||
@@ -669,7 +669,7 @@ function SearchPageContent() {
|
||||
variant={sortBy === "orders" ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setSortAndSync("orders")}
|
||||
className="whitespace-nowrap"
|
||||
className="whitespace-nowrap rounded-full"
|
||||
>
|
||||
接单最多
|
||||
</Button>
|
||||
@@ -677,7 +677,7 @@ function SearchPageContent() {
|
||||
variant={sortBy.startsWith("price") ? "secondary" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setSortAndSync(sortBy === "price_asc" ? "price_desc" : "price_asc")}
|
||||
className="whitespace-nowrap gap-1"
|
||||
className="whitespace-nowrap gap-1 rounded-full"
|
||||
>
|
||||
价格
|
||||
<SlidersHorizontal className="w-3 h-3" />
|
||||
@@ -721,7 +721,7 @@ function SearchPageContent() {
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="mt-4"
|
||||
className="mt-4 rounded-full"
|
||||
onClick={() => {
|
||||
clearAllFilters()
|
||||
}}
|
||||
@@ -736,6 +736,7 @@ function SearchPageContent() {
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="rounded-full px-8"
|
||||
onClick={() => {
|
||||
const currentLimit = numberParam(searchParams.get("limit"), DEFAULT_LIMIT)
|
||||
replaceUrl((params) => {
|
||||
|
||||
Reference in New Issue
Block a user