From e7eb86bf7e409199a5b17e670aa629f172981f71 Mon Sep 17 00:00:00 2001
From: zetaloop <zetaloop@outlook.com>
Date: Wed, 25 Feb 2026 04:41:29 +0800
Subject: [PATCH] style(search): align search page with proto2 surfaces

---
 app/(main)/search/page.tsx | 37 +++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/app/(main)/search/page.tsx b/app/(main)/search/page.tsx
index 0b8eedc..74e0393 100644
--- a/app/(main)/search/page.tsx
+++ b/app/(main)/search/page.tsx
@@ -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) => {