💄 style(homepage): refactor homepage UI with Tailwind CSS

- replace Ant Design components with native HTML elements and Tailwind classes
- implement responsive layout using Tailwind's grid and flex utilities
- update color scheme to use Tailwind's built-in color classes
- optimize spacing and typography with Tailwind utilities
- replace inline styles with Tailwind classes for better maintainability
- remove unused Ant Design imports to reduce bundle size

src/client/home/pages/HomePage.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { Layout, Button, Typography, Card, Space, Row, Col, Image, Divider, List, Avatar } from 'antd';
 import { UserOutlined, MessageOutlined, HeartOutlined, ArrowRightOutlined, TwitterOutlined, InstagramOutlined, FacebookOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import { postClient } from '@/client/api';
@@ -8,9 +7,6 @@ import { InferResponseType } from 'hono/client';
 // 定义帖子类型
 type Post = InferResponseType<typeof postClient.$get, 200>['data'][0];
 
-const { Header, Content, Footer } = Layout;
-const { Title, Text, Paragraph } = Typography;
-
 const HomePage: React.FC = () => {
   const [featuredPosts, setFeaturedPosts] = useState<Post[]>([]);
   const [loading, setLoading] = useState(true);
@@ -43,273 +39,229 @@ const HomePage: React.FC = () => {
   }, []);
 
   return (
-    <Layout className="min-h-screen">
+    <div className="min-h-screen flex flex-col">
       {/* 顶部导航栏 */}
-      <Header style={{ 
-        position: 'fixed', 
-        zIndex: 1, 
-        width: '100%', 
-        display: 'flex', 
-        justifyContent: 'space-between', 
-        alignItems: 'center',
-        background: '#fff',
-        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06)'
-      }}>
-        <Title level={3} style={{ color: '#1890ff', margin: 0 }}>社交媒体平台</Title>
-        <Space>
-          <Button 
-            type="default" 
-            onClick={() => navigate('/login')}
-            style={{ marginRight: 8 }}
-          >
-            登录
-          </Button>
-          <Button 
-            type="primary" 
-            onClick={() => navigate('/register')}
-          >
-            注册
-          </Button>
-        </Space>
-      </Header>
+      <header className="fixed top-0 left-0 right-0 z-10 bg-white shadow-sm">
+        <div className="container mx-auto px-4 h-16 flex items-center justify-between">
+          <h1 className="text-2xl font-bold text-blue-600">社交媒体平台</h1>
+          <div className="flex space-x-3">
+            <button 
+              className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
+              onClick={() => navigate('/login')}
+            >
+              登录
+            </button>
+            <button 
+              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+              onClick={() => navigate('/register')}
+            >
+              注册
+            </button>
+          </div>
+        </div>
+      </header>
 
       {/* 主内容区 */}
-      <Content style={{ padding: '0 50px', marginTop: 64 }}>
-        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '40px 0' }}>
+      <main className="flex-grow pt-16">
+        <div className="container mx-auto px-4 py-10">
           {/* 英雄区域 */}
-          <Row gutter={[32, 32]} align="middle" style={{ marginBottom: 60 }}>
-            <Col xs={24} lg={12}>
-              <Title level={1} style={{ marginBottom: 16 }}>
-                连接世界，<br />
-                <span style={{ color: '#1890ff' }}>分享精彩</span>
-              </Title>
-              <Paragraph style={{ fontSize: 18, lineHeight: 1.6, marginBottom: 32 }}>
-                加入我们的社交平台，与朋友分享生活点滴，发现精彩内容，参与热门话题讨论。
-                简单注册，开启您的社交之旅。
-              </Paragraph>
-              <Space>
-                <Button 
-                  type="primary" 
-                  size="large" 
-                  onClick={() => navigate('/register')}
-                  icon={<ArrowRightOutlined />}
-                >
-                  立即注册
-                </Button>
-                <Button 
-                  type="default" 
-                  size="large" 
-                  onClick={() => navigate('/login')}
-                >
-                  登录账号
-                </Button>
-              </Space>
-            </Col>
-            <Col xs={24} lg={12}>
-              <Image 
-                alt="社交平台展示" 
-                src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" 
-                preview={false}
-                style={{ width: '100%', borderRadius: 8 }}
-              />
-            </Col>
-          </Row>
+          <section className="mb-16">
+            <div className="flex flex-col lg:flex-row items-center gap-8">
+              <div className="lg:w-1/2">
+                <h2 className="text-4xl font-bold mb-4">
+                  连接世界，<br />
+                  <span className="text-blue-600">分享精彩</span>
+                </h2>
+                <p className="text-lg text-gray-600 mb-8 leading-relaxed">
+                  加入我们的社交平台，与朋友分享生活点滴，发现精彩内容，参与热门话题讨论。
+                  简单注册，开启您的社交之旅。
+                </p>
+                <div className="flex flex-wrap gap-4">
+                  <button 
+                    className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-2"
+                    onClick={() => navigate('/register')}
+                  >
+                    立即注册 <ArrowRightOutlined />
+                  </button>
+                  <button 
+                    className="px-6 py-3 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
+                    onClick={() => navigate('/login')}
+                  >
+                    登录账号
+                  </button>
+                </div>
+              </div>
+              <div className="lg:w-1/2">
+                <img 
+                  alt="社交平台展示" 
+                  src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" 
+                  className="w-full rounded-lg shadow-sm"
+                />
+              </div>
+            </div>
+          </section>
 
           {/* 功能特点 */}
-          <div style={{ marginBottom: 60 }}>
-            <Title level={2} style={{ textAlign: 'center', marginBottom: 40 }}>平台特点</Title>
-            <Row gutter={[24, 24]}>
-              <Col xs={24} md={8}>
-                <Card 
-                  hoverable 
-                  bordered={false}
-                  style={{ textAlign: 'center', padding: '32px 24px', height: '100%' }}
-                >
-                  <div style={{ 
-                    width: 64, 
-                    height: 64, 
-                    borderRadius: 50, 
-                    background: '#e6f7ff', 
-                    display: 'flex', 
-                    alignItems: 'center', 
-                    justifyContent: 'center', 
-                    margin: '0 auto 16px' 
-                  }}>
-                    <UserOutlined style={{ fontSize: 32, color: '#1890ff' }} />
-                  </div>
-                  <Title level={3} style={{ marginBottom: 16 }}>结识新朋友</Title>
-                  <Paragraph>
-                    发现志同道合的朋友，扩展您的社交圈，建立有意义的连接。
-                  </Paragraph>
-                </Card>
-              </Col>
-              <Col xs={24} md={8}>
-                <Card 
-                  hoverable 
-                  bordered={false}
-                  style={{ textAlign: 'center', padding: '32px 24px', height: '100%' }}
-                >
-                  <div style={{ 
-                    width: 64, 
-                    height: 64, 
-                    borderRadius: 50, 
-                    background: '#fff1f0', 
-                    display: 'flex', 
-                    alignItems: 'center', 
-                    justifyContent: 'center', 
-                    margin: '0 auto 16px' 
-                  }}>
-                    <MessageOutlined style={{ fontSize: 32, color: '#ff4d4f' }} />
-                  </div>
-                  <Title level={3} style={{ marginBottom: 16 }}>分享生活</Title>
-                  <Paragraph>
-                    发布文字、图片和视频，记录生活中的美好瞬间，分享您的故事。
-                  </Paragraph>
-                </Card>
-              </Col>
-              <Col xs={24} md={8}>
-                <Card 
-                  hoverable 
-                  bordered={false}
-                  style={{ textAlign: 'center', padding: '32px 24px', height: '100%' }}
-                >
-                  <div style={{ 
-                    width: 64, 
-                    height: 64, 
-                    borderRadius: 50, 
-                    background: '#f6ffed', 
-                    display: 'flex', 
-                    alignItems: 'center', 
-                    justifyContent: 'center', 
-                    margin: '0 auto 16px' 
-                  }}>
-                    <HeartOutlined style={{ fontSize: 32, color: '#52c41a' }} />
-                  </div>
-                  <Title level={3} style={{ marginBottom: 16 }}>互动交流</Title>
-                  <Paragraph>
-                    点赞、评论、分享，与朋友实时互动，参与热门话题讨论。
-                  </Paragraph>
-                </Card>
-              </Col>
-            </Row>
-          </div>
+          <section className="mb-16">
+            <h2 className="text-3xl font-bold text-center mb-10">平台特点</h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              <div className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-6 text-center">
+                <div className="w-16 h-16 rounded-full bg-blue-50 flex items-center justify-center mx-auto mb-4">
+                  <UserOutlined className="text-2xl text-blue-600" />
+                </div>
+                <h3 className="text-xl font-semibold mb-3">结识新朋友</h3>
+                <p className="text-gray-600">
+                  发现志同道合的朋友，扩展您的社交圈，建立有意义的连接。
+                </p>
+              </div>
+              
+              <div className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-6 text-center">
+                <div className="w-16 h-16 rounded-full bg-red-50 flex items-center justify-center mx-auto mb-4">
+                  <MessageOutlined className="text-2xl text-red-500" />
+                </div>
+                <h3 className="text-xl font-semibold mb-3">分享生活</h3>
+                <p className="text-gray-600">
+                  发布文字、图片和视频，记录生活中的美好瞬间，分享您的故事。
+                </p>
+              </div>
+              
+              <div className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-6 text-center">
+                <div className="w-16 h-16 rounded-full bg-green-50 flex items-center justify-center mx-auto mb-4">
+                  <HeartOutlined className="text-2xl text-green-500" />
+                </div>
+                <h3 className="text-xl font-semibold mb-3">互动交流</h3>
+                <p className="text-gray-600">
+                  点赞、评论、分享，与朋友实时互动，参与热门话题讨论。
+                </p>
+              </div>
+            </div>
+          </section>
 
           {/* 热门内容预览 */}
-          <div style={{ marginBottom: 60 }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
-              <Title level={2}>热门内容</Title>
-              <Button type="link" onClick={() => navigate('/login')}>
-                查看更多 <ArrowRightOutlined style={{ fontSize: 14 }} />
-              </Button>
+          <section className="mb-16">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-3xl font-bold">热门内容</h2>
+              <button 
+                className="text-blue-600 hover:text-blue-800 flex items-center gap-1"
+                onClick={() => navigate('/login')}
+              >
+                查看更多 <ArrowRightOutlined className="text-sm" />
+              </button>
             </div>
             
             {loading ? (
-              <div style={{ textAlign: 'center', padding: '60px 0' }}>
-                <div className="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12 mx-auto"></div>
+              <div className="flex justify-center items-center py-16">
+                <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div>
               </div>
             ) : featuredPosts.length === 0 ? (
-              <Card style={{ textAlign: 'center', padding: '60px 0' }}>
-                <Text type="secondary">暂无热门内容</Text>
-              </Card>
+              <div className="bg-white rounded-lg shadow-sm p-16 text-center">
+                <p className="text-gray-500">暂无热门内容</p>
+              </div>
             ) : (
-              <List
-                itemLayout="vertical"
-                dataSource={featuredPosts}
-                renderItem={item => (
-                  <List.Item
-                    key={item.id}
-                    actions={[
-                      <Text type="secondary"><HeartOutlined /> {item.likesCount}</Text>,
-                      <Text type="secondary"><MessageOutlined /> {item.commentsCount}</Text>
-                    ]}
-                  >
-                    <List.Item.Meta
-                      avatar={<Avatar src={item.user?.avatar || <UserOutlined />} />}
-                      title={item.user?.username}
-                      description={
-                        <>
-                          <Paragraph ellipsis={{ rows: 2 }} style={{ marginBottom: 8 }}>
-                            {item.content}
-                          </Paragraph>
-                          <Text type="secondary">{new Date(item.createdAt).toLocaleString()}</Text>
-                        </>
-                      }
-                    />
-                  </List.Item>
-                )}
-              />
+              <div className="space-y-4">
+                {featuredPosts.map(item => (
+                  <div key={item.id} className="bg-white rounded-lg shadow-sm p-4">
+                    <div className="flex gap-4">
+                      <div className="flex-shrink-0">
+                        {item.user?.avatar ? (
+                          <img src={item.user.avatar} alt={item.user.username} className="w-10 h-10 rounded-full" />
+                        ) : (
+                          <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
+                            <UserOutlined className="text-gray-500" />
+                          </div>
+                        )}
+                      </div>
+                      <div className="flex-grow">
+                        <div className="font-medium text-gray-900">{item.user?.username}</div>
+                        <p className="text-gray-700 mt-1 line-clamp-2">{item.content}</p>
+                        <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
+                          <span className="flex items-center gap-1">
+                            <HeartOutlined /> {item.likesCount}
+                          </span>
+                          <span className="flex items-center gap-1">
+                            <MessageOutlined /> {item.commentsCount}
+                          </span>
+                          <span>{new Date(item.createdAt).toLocaleString()}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
             )}
-          </div>
+          </section>
 
           {/* 注册引导区 */}
-          <Card 
-            bordered={false} 
-            style={{ 
-              textAlign: 'center', 
-              padding: '48px 24px', 
-              background: 'linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%)' 
-            }}
-          >
-            <Title level={2} style={{ marginBottom: 16 }}>准备好加入我们了吗？</Title>
-            <Paragraph style={{ maxWidth: 600, margin: '0 auto 32px' }}>
-              注册账号，开启您的社交之旅，与数百万用户一起分享精彩生活
-            </Paragraph>
-            <Button 
-              type="primary" 
-              size="large" 
-              onClick={() => navigate('/register')}
-              icon={<ArrowRightOutlined />}
-            >
-              立即注册，免费使用
-            </Button>
-          </Card>
+          <section className="mb-16">
+            <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-8 text-center">
+              <h2 className="text-2xl font-bold mb-4">准备好加入我们了吗？</h2>
+              <p className="text-gray-600 max-w-2xl mx-auto mb-6">
+                注册账号，开启您的社交之旅，与数百万用户一起分享精彩生活
+              </p>
+              <button 
+                className="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-2 mx-auto"
+                onClick={() => navigate('/register')}
+              >
+                立即注册，免费使用 <ArrowRightOutlined />
+              </button>
+            </div>
+          </section>
         </div>
-      </Content>
+      </main>
 
       {/* 页脚 */}
-      <Footer style={{ 
-        background: '#f5f5f5', 
-        padding: '48px 0', 
-        marginTop: 40 
-      }}>
-        <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px' }}>
-          <Row gutter={[32, 32]}>
-            <Col xs={24} md={12} lg={6}>
-              <Title level={4} style={{ marginBottom: 16 }}>社交媒体平台</Title>
-              <Paragraph>
-                连接世界，分享精彩
-              </Paragraph>
-            </Col>
-            <Col xs={12} md={6} lg={4}>
-              <Title level={5} style={{ marginBottom: 16 }}>快速链接</Title>
-              <div style={{ display: 'flex', flexDirection: 'column' }}>
-                <Text onClick={() => navigate('/login')} style={{ cursor: 'pointer', marginBottom: 8 }}>登录</Text>
-                <Text onClick={() => navigate('/register')} style={{ cursor: 'pointer', marginBottom: 8 }}>注册</Text>
+      <footer className="bg-gray-100 py-12">
+        <div className="container mx-auto px-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+            <div>
+              <h3 className="text-lg font-semibold mb-4">社交媒体平台</h3>
+              <p className="text-gray-600">连接世界，分享精彩</p>
+            </div>
+            
+            <div>
+              <h4 className="text-md font-medium mb-4">快速链接</h4>
+              <div className="flex flex-col gap-2">
+                <button
+                  className="text-gray-600 hover:text-blue-600 text-left"
+                  onClick={() => navigate('/login')}
+                >
+                  登录
+                </button>
+                <button
+                  className="text-gray-600 hover:text-blue-600 text-left"
+                  onClick={() => navigate('/register')}
+                >
+                  注册
+                </button>
               </div>
-            </Col>
-            <Col xs={12} md={6} lg={4}>
-              <Title level={5} style={{ marginBottom: 16 }}>支持</Title>
-              <div style={{ display: 'flex', flexDirection: 'column' }}>
-                <Text style={{ cursor: 'pointer', marginBottom: 8 }}>帮助中心</Text>
-                <Text style={{ cursor: 'pointer', marginBottom: 8 }}>联系我们</Text>
               </div>
-            </Col>
-            <Col xs={24} md={12} lg={6}>
-              <Title level={5} style={{ marginBottom: 16 }}>关注我们</Title>
-              <Space size={16}>
-                <Button type="text" icon={<TwitterOutlined />} size="large" />
-                <Button type="text" icon={<FacebookOutlined />} size="large" />
-                <Button type="text" icon={<InstagramOutlined />} size="large" />
-              </Space>
-            </Col>
-          </Row>
-          <Divider style={{ margin: '24px 0' }} />
-          <Text type="secondary" style={{ display: 'block', textAlign: 'center' }}>
-            ©{new Date().getFullYear()} 社交媒体平台. 保留所有权利.
-          </Text>
+            </div>
+            
+            <div>
+              <h4 className="text-md font-medium mb-4">支持</h4>
+              <div className="flex flex-col gap-2">
+                <button className="text-gray-600 hover:text-blue-600 text-left">帮助中心</button>
+                <button className="text-gray-600 hover:text-blue-600 text-left">联系我们</button>
+              </div>
+            </div>
+            
+            <div>
+              <h4 className="text-md font-medium mb-4">关注我们</h4>
+              <div className="flex gap-4">
+                <button className="text-gray-600 hover:text-blue-600">
+                  <TwitterOutlined className="text-xl" />
+                </button>
+                <button className="text-gray-600 hover:text-blue-600">
+                  <FacebookOutlined className="text-xl" />
+                </button>
+                <button className="text-gray-600 hover:text-blue-600">
+                  <InstagramOutlined className="text-xl" />
+                </button>
+              </div>
+            </div>
         </div>
-      </Footer>
-    </Layout>
+      </footer>
+    </div>
   );
 };