feat(discover): proto2 layout and on-page search module

app/(main)/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { listGames, listPlayers, listShops } from "@/lib/api"
 import { GameIcon } from "@/lib/game-icons"
@@ -19,21 +20,27 @@ export default function HomePage() {
           <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-primary/10 blur-[100px]" />
           <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] rounded-full bg-primary/10 blur-[100px]" />
         </div>
-        <div className="relative z-10 space-y-6">
+        <div className="relative z-10 space-y-8 max-w-3xl mx-auto">
-          <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight">找到你的游戏搭档</h1>
+          <div className="space-y-4">
-          <p className="text-lg md:text-xl text-muted-foreground max-w-xl mx-auto">
+            <h1 className="text-4xl md:text-6xl font-bold tracking-tighter leading-tight">找到你的游戏搭档</h1>
+            <p className="text-lg md:text-xl text-muted-foreground leading-relaxed">
               找人一起打游戏，从这里开始
             </p>
-          <div className="flex flex-col sm:flex-row justify-center gap-3 pt-2">
+          </div>
-            <Button size="lg" className="rounded-full px-8" asChild>
+          
-              <Link href="/search">
+          <div id="discover-search" className="w-full max-w-2xl mx-auto">
-                <Search className="mr-2 h-4 w-4" />
+            <form method="get" action="/search" className="relative flex items-center w-full">
-                找人陪玩
+              <Search className="absolute left-4 h-5 w-5 text-muted-foreground z-10" />
-              </Link>
+              <Input
-            </Button>
+                type="text"
-            <Button size="lg" variant="outline" className="rounded-full px-8" asChild>
+                name="q"
-              <Link href="/community">逛逛社区</Link>
+                placeholder="搜索陪玩、店铺、游戏..."
+                className="w-full h-14 pl-12 pr-32 rounded-full text-base shadow-sm bg-background"
+              />
+              <Button type="submit" size="lg" className="absolute right-1.5 rounded-full px-8 h-11">
+                搜索
               </Button>
+            </form>
           </div>
         </div>
       </section>
@@ -47,30 +54,38 @@ export default function HomePage() {
             </Link>
           </Button>
         </div>
-        <div className="grid grid-cols-4 md:grid-cols-8 gap-3">
+        <div className="flex flex-wrap gap-3">
           {games.map((game) => (
             <Link
               key={game.id}
               href={`/search?game=${encodeURIComponent(game.name)}`}
-              className="flex flex-col items-center gap-2 rounded-lg border p-3 hover:bg-accent/50 transition-colors"
+              className="flex items-center gap-2 rounded-full border bg-card px-4 py-2 hover:bg-accent/50 hover:shadow-sm transition-all"
             >
-              <GameIcon name={game.icon} className="h-6 w-6" />
+              <GameIcon name={game.icon} className="h-5 w-5" />
-              <span className="text-xs font-medium text-center">{game.name}</span>
+              <span className="text-sm font-medium">{game.name}</span>
             </Link>
           ))}
         </div>
       </section>
 
-      <section>
+      <section className="space-y-6">
-        <div className="flex items-center justify-between mb-4">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-          <h2 className="text-xl font-semibold">推荐打手</h2>
+          <h2 className="text-xl font-semibold">推荐内容</h2>
-          <Button variant="ghost" size="sm" asChild>
+          <div className="flex flex-wrap items-center gap-2 text-sm">
-            <Link href="/search">
+            <Link href="/search?sort=composite" className="text-primary font-medium">综合排序</Link>
-              查看全部 <ArrowRight className="ml-1 h-4 w-4" />
+            <span className="text-muted-foreground/30">|</span>
-            </Link>
+            <Link href="/search?sort=rating" className="text-muted-foreground hover:text-foreground transition-colors">评分最高</Link>
-          </Button>
+            <span className="text-muted-foreground/30">|</span>
+            <Link href="/search?sort=orders" className="text-muted-foreground hover:text-foreground transition-colors">接单最多</Link>
+            <span className="text-muted-foreground/30">|</span>
+            <Link href="/search?sort=price_asc" className="text-muted-foreground hover:text-foreground transition-colors">价格最低</Link>
+            <span className="text-muted-foreground/30">|</span>
+            <Link href="/search?sort=price_desc" className="text-muted-foreground hover:text-foreground transition-colors">价格最高</Link>
           </div>
+        </div>
+
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {/* Players */}
           {players.map((player) => (
             <Card
               key={player.id}
@@ -121,19 +136,26 @@ export default function HomePage() {
               </CardFooter>
             </Card>
           ))}
-        </div>
-      </section>
 
-      <section>
+          {/* Community Teaser */}
-        <div className="flex items-center justify-between mb-4">
+          <Card className="hover:shadow-md transition-shadow flex flex-col h-full bg-primary/5 border-primary/20">
-          <h2 className="text-xl font-semibold">热门店铺</h2>
+            <CardHeader>
-          <Button variant="ghost" size="sm" asChild>
+              <CardTitle className="text-lg">逛逛社区</CardTitle>
-            <Link href="/search">
+              <p className="text-sm text-muted-foreground">发现更多有趣的游戏日常和讨论</p>
-              查看全部 <ArrowRight className="ml-1 h-4 w-4" />
+            </CardHeader>
-            </Link>
+            <CardContent className="flex-grow flex items-center justify-center">
-          </Button>
+              <div className="w-24 h-24 rounded-full bg-primary/10 flex items-center justify-center">
+                <Star className="h-10 w-10 text-primary" />
               </div>
-        <div className="grid gap-4 md:grid-cols-2">
+            </CardContent>
+            <CardFooter>
+              <Button className="w-full" asChild>
+                <Link href="/community">进入社区</Link>
+              </Button>
+            </CardFooter>
+          </Card>
+
+          {/* Shops */}
           {shops.map((shop) => (
             <Card key={shop.id} className="hover:shadow-md transition-shadow flex flex-col h-full">
               <CardHeader>
@@ -154,7 +176,7 @@ export default function HomePage() {
                 </div>
               </CardContent>
               <CardFooter>
-                <Button variant="outline" size="sm" asChild>
+                <Button variant="outline" size="sm" className="w-full" asChild>
                   <Link href={`/shop/${shop.id}`}>进入店铺</Link>
                 </Button>
               </CardFooter>