refactor(pages): replace inline links with Button asChild and TabsList variant

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>

app/(main)/page.tsx

@@ -62,14 +62,12 @@ export default function HomePage() {
         </div>
         <div className="flex flex-wrap gap-3">
           {games.map((game) => (
-            <Link
+            <Button key={game.id} variant="secondary" className="rounded-full" asChild>
-              key={game.id}
+              <Link href={`/search?game=${encodeURIComponent(game.name)}`}>
-              href={`/search?game=${encodeURIComponent(game.name)}`}
+                <GameIcon name={game.icon} className="h-5 w-5" />
-              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"
+                {game.name}
-            >
+              </Link>
-              <GameIcon name={game.icon} className="h-5 w-5" />
+            </Button>
-              <span className="text-sm font-medium">{game.name}</span>
-            </Link>
           ))}
         </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">
+          <div className="flex flex-wrap items-center gap-1 text-sm">
-            <Link href="/search?sort=composite" className="text-primary font-medium">
+            <Button variant="ghost" size="sm" asChild>
-              综合排序
+              <Link href="/search?sort=composite">综合排序</Link>
-            </Link>
+            </Button>
-            <Link
+            <Button variant="ghost" size="sm" className="text-muted-foreground" asChild>
-              href="/search?sort=rating"
+              <Link href="/search?sort=rating">评分最高</Link>
-              className="text-muted-foreground hover:text-foreground transition-colors"
+            </Button>
-            >
+            <Button variant="ghost" size="sm" className="text-muted-foreground" asChild>
-              评分最高
+              <Link href="/search?sort=orders">接单最多</Link>
-            </Link>
+            </Button>
-            <Link
+            <Button variant="ghost" size="sm" className="text-muted-foreground" asChild>
-              href="/search?sort=orders"
+              <Link href="/search?sort=price_asc">价格最低</Link>
-              className="text-muted-foreground hover:text-foreground transition-colors"
+            </Button>
-            >
+            <Button variant="ghost" size="sm" className="text-muted-foreground" asChild>
-              接单最多
+              <Link href="/search?sort=price_desc">价格最高</Link>
-            </Link>
+            </Button>
-            <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>
         </div>
 

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">
+        <TabsList variant="line">
-          <TabsTrigger
+          <TabsTrigger value="services">服务列表 ({playerServices.length})</TabsTrigger>
-            value="services"
+          <TabsTrigger value="reviews">评价 ({playerReviews.length})</TabsTrigger>
-            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>
 
         <TabsContent value="services" className="mt-6">

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]) => (