From 0cf2d272c981929df0447d06f356935f027437f2 Mon Sep 17 00:00:00 2001
From: zetaloop <zetaloop@outlook.com>
Date: Wed, 25 Feb 2026 14:54:15 +0800
Subject: [PATCH] refactor(pages): replace inline links with Button asChild and
 TabsList variant

---
 app/(main)/community/page.tsx   |  2 --
 app/(main)/page.tsx             | 58 +++++++++++++--------------------
 app/(main)/player/[id]/page.tsx | 16 ++-------
 components/header.tsx           |  2 +-
 4 files changed, 26 insertions(+), 52 deletions(-)

diff --git a/app/(main)/community/page.tsx b/app/(main)/community/page.tsx
index 802382e..b09ffff 100644
--- a/app/(main)/community/page.tsx
+++ b/app/(main)/community/page.tsx
@@ -51,7 +51,6 @@ export default function CommunityPage() {
             variant={sortMode === "latest" ? "default" : "outline"}
             size="sm"
             onClick={() => setSortMode("latest")}
-            className="h-8"
           >
             最新
           </Button>
@@ -59,7 +58,6 @@ export default function CommunityPage() {
             variant={sortMode === "hot" ? "default" : "outline"}
             size="sm"
             onClick={() => setSortMode("hot")}
-            className="h-8"
           >
             最热
           </Button>
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
index 729dd94..e2e29dc 100644
--- a/app/(main)/page.tsx
+++ b/app/(main)/page.tsx
@@ -62,14 +62,12 @@ export default function HomePage() {
         </div>
         <div className="flex flex-wrap gap-3">
           {games.map((game) => (
-            <Link
-              key={game.id}
-              href={`/search?game=${encodeURIComponent(game.name)}`}
-              className="flex items-center gap-2 rounded-full bg-muted/50 text-muted-foreground px-4 py-2 hover:bg-muted hover:text-foreground transition-all"
-            >
-              <GameIcon name={game.icon} className="h-5 w-5" />
-              <span className="text-sm font-medium">{game.name}</span>
-            </Link>
+            <Button key={game.id} variant="secondary" className="rounded-full" asChild>
+              <Link href={`/search?game=${encodeURIComponent(game.name)}`}>
+                <GameIcon name={game.icon} className="h-5 w-5" />
+                {game.name}
+              </Link>
+            </Button>
           ))}
         </div>
       </section>
@@ -77,34 +75,22 @@ export default function HomePage() {
       <section className="space-y-6">
         <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
           <h2 className="text-xl font-semibold">推荐内容</h2>
-          <div className="flex flex-wrap items-center gap-4 text-sm">
-            <Link href="/search?sort=composite" className="text-primary font-medium">
-              综合排序
-            </Link>
-            <Link
-              href="/search?sort=rating"
-              className="text-muted-foreground hover:text-foreground transition-colors"
-            >
-              评分最高
-            </Link>
-            <Link
-              href="/search?sort=orders"
-              className="text-muted-foreground hover:text-foreground transition-colors"
-            >
-              接单最多
-            </Link>
-            <Link
-              href="/search?sort=price_asc"
-              className="text-muted-foreground hover:text-foreground transition-colors"
-            >
-              价格最低
-            </Link>
-            <Link
-              href="/search?sort=price_desc"
-              className="text-muted-foreground hover:text-foreground transition-colors"
-            >
-              价格最高
-            </Link>
+          <div className="flex flex-wrap items-center gap-1 text-sm">
+            <Button variant="ghost" size="sm" asChild>
+              <Link href="/search?sort=composite">综合排序</Link>
+            </Button>
+            <Button variant="ghost" size="sm" className="text-muted-foreground" asChild>
+              <Link href="/search?sort=rating">评分最高</Link>
+            </Button>
+            <Button variant="ghost" size="sm" className="text-muted-foreground" asChild>
+              <Link href="/search?sort=orders">接单最多</Link>
+            </Button>
+            <Button variant="ghost" size="sm" className="text-muted-foreground" asChild>
+              <Link href="/search?sort=price_asc">价格最低</Link>
+            </Button>
+            <Button variant="ghost" size="sm" className="text-muted-foreground" asChild>
+              <Link href="/search?sort=price_desc">价格最高</Link>
+            </Button>
           </div>
         </div>
 
diff --git a/app/(main)/player/[id]/page.tsx b/app/(main)/player/[id]/page.tsx
index 0df8b02..727ded7 100644
--- a/app/(main)/player/[id]/page.tsx
+++ b/app/(main)/player/[id]/page.tsx
@@ -92,19 +92,9 @@ export default async function PlayerDetailPage({ params }: { params: Promise<{ i
       </div>
 
       <Tabs defaultValue="services" className="space-y-6">
-        <TabsList className="w-full justify-start border-b rounded-none h-auto p-0 bg-transparent">
-          <TabsTrigger
-            value="services"
-            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-6 py-3 text-base -mb-px"
-          >
-            服务列表 ({playerServices.length})
-          </TabsTrigger>
-          <TabsTrigger
-            value="reviews"
-            className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent px-6 py-3 text-base -mb-px"
-          >
-            评价 ({playerReviews.length})
-          </TabsTrigger>
+        <TabsList variant="line">
+          <TabsTrigger value="services">服务列表 ({playerServices.length})</TabsTrigger>
+          <TabsTrigger value="reviews">评价 ({playerReviews.length})</TabsTrigger>
         </TabsList>
 
         <TabsContent value="services" className="mt-6">
diff --git a/components/header.tsx b/components/header.tsx
index a04ba87..861d891 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -129,7 +129,7 @@ export function Header() {
                     {roleLabels[currentRole]}
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
+                <DropdownMenuContent align="end" className="space-y-1">
                   <DropdownMenuLabel>切换身份</DropdownMenuLabel>
                   <DropdownMenuSeparator />
                   {availableRoles.map(([role, label]) => (