feat(ui): refine public discovery pages

app/(main)/community/page.tsx

@@ -4,6 +4,7 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
+import { EmptyState } from "@/components/ui/empty-state"
 import { listGames, listPosts } from "@/lib/api"
 import { roleLabels } from "@/lib/constants"
 import type { Game, Post } from "@/lib/types"
@@ -86,14 +87,15 @@ export default function CommunityPage() {
         </div>
         <div className="flex flex-wrap gap-2">
           {games.map((game) => (
-            <Badge
+            <Button
               key={game.id}
               variant={selectedGame === game.name ? "default" : "outline"}
-              className="cursor-pointer hover:bg-primary/80 transition-colors px-3 py-1"
+              size="sm"
+              className="h-7 rounded-full px-3"
               onClick={() => setSelectedGame(selectedGame === game.name ? null : game.name)}
             >
               {game.name}
-            </Badge>
+            </Button>
           ))}
         </div>
       </div>
@@ -102,11 +104,11 @@ export default function CommunityPage() {
         {postsLoading ? (
           <div className="text-center py-12 text-muted-foreground">加载中...</div>
         ) : filteredPosts.length === 0 ? (
-          <div className="text-center py-12 text-muted-foreground">暂无帖子</div>
+          <EmptyState title="暂无帖子" description="此分类下暂未找到相关的讨论内容" />
         ) : (
           filteredPosts.map((post) => (
             <Link key={post.id} href={`/post/${post.id}`} className="block">
-              <Card className="hover:shadow-md transition-shadow gap-4">
+              <Card className="shadow-sm border-border/80 gap-4">
                 <CardHeader>
                   <div className="flex items-center gap-3">
                     <Avatar className="h-9 w-9">
@@ -142,7 +144,9 @@ export default function CommunityPage() {
                 </CardContent>
                 <CardFooter className="text-sm text-muted-foreground gap-4">
                   <span className="flex items-center gap-1">
-                    <Heart className={`h-4 w-4 ${post.liked ? "fill-red-500 text-red-500" : ""}`} />
+                    <Heart
+                      className={`h-4 w-4 ${post.liked ? "fill-destructive text-destructive" : ""}`}
+                    />
                     {post.likeCount}
                   </span>
                   <span className="flex items-center gap-1">