💄 style(pages): 重构多个页面UI为Tailwind CSS样式

- 移除Ant Design组件依赖，改用原生HTML元素和Tailwind CSS样式
- 重构FollowPage页面布局，实现响应式设计和现代UI风格
- 重写MemberPage导航栏和内容流样式，优化用户体验
- 更新UserProfilePage个人资料展示和标签页样式
- 统一三个页面的页脚样式，保持视觉一致性
- 优化按钮、卡片、列表等UI元素的交互效果和视觉层次

src/client/home/pages/FollowPage.tsx

@@ -1,18 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { Layout, Card, List, Avatar, Button, Input, Typography, Spin, Empty } from 'antd';
 import { SearchOutlined, UserAddOutlined, UserDeleteOutlined } from '@ant-design/icons';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { userClient } from '@/client/api';
 import { useAuth } from '@/client/home/hooks/AuthProvider';
-import type { UserEntity } from '@/server/modules/users/user.entity';
-
-const { Content } = Layout;
-const { Title, Text } = Typography;
+import type { User } from '@/client/home/hooks/AuthProvider';
 
 type FollowType = 'following' | 'followers';
 
 const FollowPage: React.FC = () => {
-  const [users, setUsers] = useState<UserEntity[]>([]);
+  const [users, setUsers] = useState<User[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchText, setSearchText] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
@@ -105,104 +101,136 @@ const FollowPage: React.FC = () => {
   }, [type, userId, currentPage]);
 
   return (
-    <Layout>
-      <Content style={{ padding: '24px', maxWidth: 800, margin: '0 auto', width: '100%' }}>
-        <Card>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
-            <Title level={2} style={{ margin: 0 }}>
+    <div className="min-h-screen bg-gray-50">
+      <main className="container mx-auto px-4 py-8 max-w-3xl">
+        <div className="bg-white rounded-lg shadow-sm p-6">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
+            <h1 className="text-2xl font-bold text-gray-900">
               {type === 'following' ? '关注列表' : '粉丝列表'}
-            </Title>
+            </h1>
             
-            <div style={{ display: 'flex', width: '300px' }}>
-              <Input.Search
-                placeholder="搜索用户"
-                value={searchText}
-                onChange={e => setSearchText(e.target.value)}
-                onSearch={handleSearch}
-                enterButton={<SearchOutlined />}
-              />
+            <div className="w-full sm:w-64">
+              <div className="relative">
+                <input
+                  type="text"
+                  placeholder="搜索用户"
+                  value={searchText}
+                  onChange={e => setSearchText(e.target.value)}
+                  onKeyPress={e => e.key === 'Enter' && handleSearch()}
+                  className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500"
+                />
+                <SearchOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+                <button 
+                  onClick={handleSearch}
+                  className="absolute right-1 top-1/2 transform -translate-y-1/2 bg-blue-600 text-white px-3 py-1 rounded text-sm"
+                >
+                  搜索
+                </button>
+              </div>
             </div>
           </div>
           
           {loading ? (
-            <div style={{ display: 'flex', justifyContent: 'center', padding: '50px' }}>
-              <Spin size="large" />
+            <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>
           ) : users.length === 0 ? (
-            <Empty description={type === 'following' ? '暂无关注' : '暂无粉丝'} />
+            <div className="bg-gray-50 rounded-lg p-16 text-center">
+              <p className="text-gray-500">{type === 'following' ? '暂无关注' : '暂无粉丝'}</p>
+            </div>
           ) : (
             <>
-              <List
-                dataSource={users}
-                renderItem={item => (
-                  <List.Item
-                    actions={[
-                      user && user.id !== item.id && (
-                        <Button 
-                          size="small" 
-                          type={item.isFollowing ? "default" : "primary"}
-                          icon={item.isFollowing ? <UserDeleteOutlined /> : <UserAddOutlined />}
-                          onClick={() => handleFollowToggle(item.id, item.isFollowing)}
-                        >
-                          {item.isFollowing ? '取消关注' : '关注'}
-                        </Button>
-                      )
-                    ]}
-                  >
-                    <List.Item.Meta
-                      avatar={
-                        <Avatar 
-                          src={item.avatar || <UserAddOutlined />} 
-                          onClick={() => navigate(`/users/${item.id}`)}
-                          style={{ cursor: 'pointer' }}
-                        />
-                      }
-                      title={
-                        <Text 
-                          style={{ cursor: 'pointer' }}
-                          onClick={() => navigate(`/users/${item.id}`)}
-                        >
-                          {item.nickname || item.username}
-                        </Text>
-                      }
-                      description={
-                        <>
-                          {item.bio || '暂无简介'}
-                          <br />
-                          <Text type="secondary">
+              <div className="space-y-4">
+                {users.map(item => (
+                  <div key={item.id} className="flex items-start gap-4 p-4 border border-gray-100 rounded-lg hover:shadow-sm transition-shadow">
+                    <div 
+                      className="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0 cursor-pointer"
+                      onClick={() => navigate(`/users/${item.id}`)}
+                    >
+                      {item.avatar ? (
+                        <img src={item.avatar} alt={item.username} className="w-full h-full rounded-full object-cover" />
+                      ) : (
+                        <UserAddOutlined className="text-gray-500" />
+                      )}
+                    </div>
+                    
+                    <div className="flex-grow min-w-0">
+                      <div className="flex justify-between items-start">
+                        <div>
+                          <h3 
+                            className="font-medium text-gray-900 cursor-pointer hover:text-blue-600 transition-colors"
+                            onClick={() => navigate(`/users/${item.id}`)}
+                          >
+                            {item.nickname || item.username}
+                          </h3>
+                          <p className="text-sm text-gray-500 mt-1 line-clamp-2">
+                            {item.bio || '暂无简介'}
+                          </p>
+                          <div className="text-xs text-gray-400 mt-2">
                             {item.followingCount} 关注 · {item.followerCount} 粉丝
-                          </Text>
-                        </>
-                      }
-                    />
-                  </List.Item>
-                )}
-              />
+                          </div>
+                        </div>
+                        
+                        {user && user.id !== item.id && (
+                          <button 
+                            className={`text-sm px-3 py-1 rounded transition-colors flex items-center gap-1 ${
+                              item.isFollowing 
+                                ? 'bg-gray-200 text-gray-700 hover:bg-gray-300' 
+                                : 'bg-blue-600 text-white hover:bg-blue-700'
+                            }`}
+                            onClick={() => handleFollowToggle(item.id, item.isFollowing)}
+                          >
+                            {item.isFollowing ? (
+                              <>
+                                <UserDeleteOutlined className="text-xs" />
+                                取消关注
+                              </>
+                            ) : (
+                              <>
+                                <UserAddOutlined className="text-xs" />
+                                关注
+                              </>
+                            )}
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
               
-              <div style={{ textAlign: 'right', marginTop: 16 }}>
-                <Button 
+              {/* 分页控件 */}
+              <div className="flex justify-center items-center mt-8 gap-4">
+                <button 
                   disabled={currentPage === 1} 
                   onClick={() => handlePageChange(currentPage - 1)}
-                  style={{ marginRight: 8 }}
+                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   上一页
-                </Button>
-                <span>
+                </button>
+                <span className="text-gray-500">
                   第 {currentPage} 页 / 共 {Math.ceil(totalCount / pageSize)} 页
                 </span>
-                <Button 
+                <button 
                   disabled={currentPage >= Math.ceil(totalCount / pageSize)} 
                   onClick={() => handlePageChange(currentPage + 1)}
-                  style={{ marginLeft: 8 }}
+                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   下一页
-                </Button>
+                </button>
               </div>
             </>
           )}
-        </Card>
-      </Content>
-    </Layout>
+        </div>
+      </main>
+      
+      {/* 页脚 */}
+      <footer className="bg-gray-100 py-6 mt-auto">
+        <div className="container mx-auto px-4 text-center text-gray-500 text-sm">
+          社交媒体平台 ©{new Date().getFullYear()} Created with React & Tailwind CSS
+        </div>
+      </footer>
+    </div>
   );
 };
 

src/client/home/pages/MemberPage.tsx

@@ -1,17 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { Layout, List, Card, Avatar, Button, Input, Space, Typography, Spin, Empty } from 'antd';
 import { UserOutlined, MessageOutlined, HeartOutlined, SendOutlined } from '@ant-design/icons';
 import { useAuth } from '@/client/home/hooks/AuthProvider';
 import { useNavigate } from 'react-router-dom';
 import { postClient } from '@/client/api';
-import { InferResponseType } from 'hono';
-
+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 MemberPage: React.FC = () => {
   const [posts, setPosts] = useState<Post[]>([]);
   const [loading, setLoading] = useState(true);
@@ -81,82 +77,119 @@ const MemberPage: React.FC = () => {
   }, []);
 
   return (
-    <Layout className="min-h-screen">
-      <Header style={{ position: 'fixed', zIndex: 1, width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <Title level={3} style={{ color: 'white', margin: 0 }}>社交媒体平台</Title>
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <Button type="text" style={{ color: 'white', marginRight: 16 }} onClick={() => navigate('/follow?type=following')}>
-            关注
-          </Button>
-          <Button type="text" style={{ color: 'white', marginRight: 16 }} onClick={() => navigate('/follow?type=followers')}>
-            粉丝
-          </Button>
-          <Avatar icon={<UserOutlined />} style={{ marginRight: 16 }} onClick={() => navigate(`/users/${user?.id}`)} />
-          <Text style={{ color: 'white' }}>{user?.username}</Text>
+    <div className="min-h-screen flex flex-col bg-gray-50">
+      {/* 顶部导航栏 */}
+      <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-xl font-bold text-blue-600">社交媒体平台</h1>
+          <div className="flex items-center space-x-4">
+            <button 
+              className="text-gray-700 hover:text-blue-600 transition-colors"
+              onClick={() => navigate('/follow?type=following')}
+            >
+              关注
+            </button>
+            <button 
+              className="text-gray-700 hover:text-blue-600 transition-colors"
+              onClick={() => navigate('/follow?type=followers')}
+            >
+              粉丝
+            </button>
+            <div 
+              className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center cursor-pointer"
+              onClick={() => navigate(`/users/${user?.id}`)}
+            >
+              <UserOutlined className="text-gray-500" />
+            </div>
+            <span className="text-gray-700">{user?.username}</span>
+          </div>
         </div>
-      </Header>
+      </header>
       
-      <Content style={{ padding: '0 50px', marginTop: 64 }}>
-        <div style={{ background: '#fff', padding: 24, marginTop: 20, borderRadius: 8, maxWidth: 800, margin: '0 auto' }}>
-          {/* 发布框 */}
-          <Card style={{ marginBottom: 24 }}>
-            <Space.Compact style={{ width: '100%' }}>
-              <Input.TextArea 
+      {/* 主内容区 */}
+      <main className="flex-grow pt-16">
+        <div className="container mx-auto px-4 py-8">
+          <div className="max-w-3xl mx-auto bg-white rounded-lg shadow-sm p-6 mt-6">
+            {/* 发布框 */}
+            <div className="mb-8 border rounded-lg p-4">
+              <textarea 
+                className="w-full border border-gray-300 rounded-md p-3 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-shadow resize-none"
                 placeholder="分享你的想法..." 
                 rows={4}
                 value={content}
                 onChange={e => setContent(e.target.value)}
               />
-              <Button type="primary" icon={<SendOutlined />} onClick={handlePost}>
-                发布
-              </Button>
-            </Space.Compact>
-          </Card>
-          
-          {/* 内容流 */}
-          <Title level={4}>最新动态</Title>
-          {loading ? (
-            <Spin size="large" style={{ display: 'block', margin: '40px auto' }} />
-          ) : posts.length === 0 ? (
-            <Empty description="暂无内容" />
-          ) : (
-            <List
-              dataSource={posts}
-              renderItem={item => (
-                <List.Item
-                  key={item.id}
-                  actions={[
-                    <Button icon={<HeartOutlined />} onClick={() => handleLike(item.id)}>
-                      {item.likesCount > 0 && item.likesCount}
-                    </Button>,
-                    <Button icon={<MessageOutlined />}>{item.commentsCount > 0 && item.commentsCount}</Button>,
-                    <Button>分享</Button>
-                  ]}
+              <div className="flex justify-end mt-3">
+                <button 
+                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors flex items-center gap-2"
+                  onClick={handlePost}
                 >
-                  <List.Item.Meta
-                    avatar={<Avatar src={item.user?.avatar || <UserOutlined />} />}
-                    title={item.user?.username}
-                    description={
-                      <>
-                        <Paragraph>{item.content}</Paragraph>
+                  <SendOutlined className="text-sm" />
+                  发布
+                </button>
+              </div>
+            </div>
+            
+            {/* 内容流 */}
+            <h2 className="text-xl font-bold mb-4">最新动态</h2>
+            
+            {loading ? (
+              <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>
+            ) : posts.length === 0 ? (
+              <div className="bg-white rounded-lg shadow-sm p-16 text-center">
+                <p className="text-gray-500">暂无内容</p>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {posts.map(item => (
+                  <div key={item.id} className="bg-white border border-gray-100 rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow">
+                    <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">{item.content}</p>
                         {item.images?.map((img, idx) => (
-                          <img key={idx} src={img} alt={`Post image ${idx}`} style={{ maxWidth: '100%', margin: '8px 0' }} />
+                          <img key={idx} src={img} alt={`Post image ${idx}`} className="max-w-full mt-2 rounded" />
                         ))}
-                        <Text type="secondary">{new Date(item.createdAt).toLocaleString()}</Text>
-                      </>
-                    }
-                  />
-                </List.Item>
-              )}
-            />
-          )}
+                        <div className="flex items-center gap-4 mt-2 text-sm text-gray-500">
+                          <button 
+                            className="flex items-center gap-1 hover:text-red-500 transition-colors"
+                            onClick={() => handleLike(item.id)}
+                          >
+                            <HeartOutlined /> {item.likesCount > 0 && item.likesCount}
+                          </button>
+                          <button className="flex items-center gap-1 hover:text-blue-500 transition-colors">
+                            <MessageOutlined /> {item.commentsCount > 0 && item.commentsCount}
+                          </button>
+                          <span>{new Date(item.createdAt).toLocaleString()}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
         </div>
-      </Content>
+      </main>
       
-      <Footer style={{ textAlign: 'center' }}>
-        社交媒体平台 ©{new Date().getFullYear()} Created with React & Ant Design
-      </Footer>
-    </Layout>
+      {/* 页脚 */}
+      <footer className="bg-gray-100 py-6 mt-auto">
+        <div className="container mx-auto px-4 text-center text-gray-500 text-sm">
+          社交媒体平台 ©{new Date().getFullYear()} Created with React & Tailwind CSS
+        </div>
+      </footer>
+    </div>
   );
 };
 

src/client/home/pages/UserProfilePage.tsx

@@ -1,6 +1,5 @@
 import debug from 'debug';
 import React, { useEffect, useState } from 'react';
-import { Layout, Card, Avatar, Button, Typography, List, Spin, Tabs, Divider, Badge } from 'antd';
 import { UserOutlined, EditOutlined, HeartOutlined, UserAddOutlined, UserDeleteOutlined } from '@ant-design/icons';
 import { useParams, useNavigate } from 'react-router-dom';
 import { userClient } from '@/client/api';
@@ -8,10 +7,6 @@ import { useAuth, User } from '@/client/home/hooks/AuthProvider';
 
 const rpcLogger = debug('frontend:api:rpc');
 
-const { Content } = Layout;
-const { Title, Text, Paragraph } = Typography;
-const { TabPane } = Tabs;
-
 const UserProfilePage: React.FC = () => {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
@@ -22,6 +17,7 @@ const UserProfilePage: React.FC = () => {
   const id = Number(userId);
   const navigate = useNavigate();
   const { user: currentUser } = useAuth();
+  const [activeTab, setActiveTab] = useState('posts');
 
   // 获取用户资料
   const fetchUserProfile = async () => {
@@ -98,182 +94,182 @@ const UserProfilePage: React.FC = () => {
 
   if (loading) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh' }}>
-        <Spin size="large" />
+      <div className="flex justify-center items-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600"></div>
       </div>
     );
   }
 
   if (!user) {
     return (
-      <div style={{ textAlign: 'center', padding: '50px' }}>
-        <Title level={3}>用户不存在</Title>
-        <Button onClick={() => navigate('/')}>返回首页</Button>
+      <div className="text-center py-16">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">用户不存在</h2>
+        <button 
+          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+          onClick={() => navigate('/')}
+        >
+          返回首页
+        </button>
       </div>
     );
   }
 
   return (
-    <Layout>
-      <Content style={{ padding: '24px', maxWidth: 1200, margin: '0 auto', width: '100%' }}>
-        <Card style={{ marginBottom: 24 }}>
-          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '24px 0' }}>
-            <Avatar 
-              src={user.avatar || <UserOutlined style={{ fontSize: 64 }} />} 
-              size={128} 
-              style={{ marginBottom: 16 }}
-            />
-            <Title level={2} style={{ margin: 0 }}>{user.nickname || user.username}</Title>
+    <div className="min-h-screen bg-gray-50">
+      <main className="container mx-auto px-4 py-8 max-w-5xl">
+        {/* 用户资料卡片 */}
+        <div className="bg-white rounded-lg shadow-sm p-6 mb-6">
+          <div className="flex flex-col items-center py-6">
+            <div className="w-32 h-32 rounded-full bg-gray-200 flex items-center justify-center mb-4 overflow-hidden">
+              {user.avatar ? (
+                <img src={user.avatar} alt={user.username} className="w-full h-full object-cover" />
+              ) : (
+                <UserOutlined className="text-6xl text-gray-400" />
+              )}
+            </div>
+            <h1 className="text-2xl font-bold text-gray-900 mb-2">{user.nickname || user.username}</h1>
             
-            <div style={{ display: 'flex', margin: '16px 0' }}>
-              <div style={{ textAlign: 'center', margin: '0 24px' }}>
-                <Text strong style={{ fontSize: 24 }}>0</Text>
-                <br />
-                <Text>帖子</Text>
+            <div className="flex justify-center space-x-8 my-6">
+              <div className="text-center">
+                <p className="text-2xl font-bold text-gray-900">0</p>
+                <p className="text-gray-500">帖子</p>
               </div>
-              <div style={{ textAlign: 'center', margin: '0 24px' }}>
-                <Text strong style={{ fontSize: 24 }}>{followerCount}</Text>
-                <br />
-                <Text>粉丝</Text>
+              <div className="text-center">
+                <p className="text-2xl font-bold text-gray-900">{followerCount}</p>
+                <p className="text-gray-500">粉丝</p>
               </div>
-              <div style={{ textAlign: 'center', margin: '0 24px' }}>
-                <Text strong style={{ fontSize: 24 }}>{followingCount}</Text>
-                <br />
-                <Text>关注</Text>
+              <div className="text-center">
+                <p className="text-2xl font-bold text-gray-900">{followingCount}</p>
+                <p className="text-gray-500">关注</p>
               </div>
             </div>
             
             {currentUser && currentUser.id !== user.id ? (
-              <Button 
-                type={isFollowing ? "default" : "primary"} 
-                icon={isFollowing ? <UserDeleteOutlined /> : <UserAddOutlined />}
+              <button 
+                className={`px-4 py-2 rounded-md transition-colors flex items-center gap-2 ${
+                  isFollowing 
+                    ? 'bg-gray-200 text-gray-700 hover:bg-gray-300' 
+                    : 'bg-blue-600 text-white hover:bg-blue-700'
+                }`}
                 onClick={handleFollowToggle}
               >
-                {isFollowing ? '取消关注' : '关注'}
-              </Button>
+                {isFollowing ? (
+                  <>
+                    <UserDeleteOutlined className="text-sm" />
+                    取消关注
+                  </>
+                ) : (
+                  <>
+                    <UserAddOutlined className="text-sm" />
+                    关注
+                  </>
+                )}
+              </button>
             ) : currentUser && currentUser.id === user.id ? (
-              <Button icon={<EditOutlined />} onClick={() => navigate('/profile/edit')}>
+              <button 
+                className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors flex items-center gap-2"
+                onClick={() => navigate('/profile/edit')}
+              >
+                <EditOutlined className="text-sm" />
                 编辑资料
-              </Button>
+              </button>
             ) : null}
             
             {user.bio && (
-              <Paragraph style={{ marginTop: 16, maxWidth: 600, textAlign: 'center' }}>
+              <p className="mt-6 text-gray-600 max-w-2xl text-center">
                 {user.bio}
-              </Paragraph>
+              </p>
             )}
             
-            <div style={{ display: 'flex', alignItems: 'center', marginTop: 8 }}>
+            <div className="flex items-center mt-4 text-gray-500">
               {user.location && (
-                <Text style={{ marginRight: 16 }}>{user.location}</Text>
+                <span className="mr-4">{user.location}</span>
               )}
               {user.website && (
-                <Text 
-                  style={{ color: '#1890ff', cursor: 'pointer' }}
-                  onClick={() => window.open(user.website, '_blank')}
+                <a 
+                  href={user.website} 
+                  target="_blank" 
+                  rel="noopener noreferrer"
+                  className="text-blue-600 hover:underline"
                 >
                   {user.website}
-                </Text>
+                </a>
               )}
             </div>
           </div>
-        </Card>
+        </div>
         
-        <Tabs defaultActiveKey="posts" style={{ marginBottom: 24 }}>
-          <TabPane tab="帖子" key="posts">
-            <List
-              dataSource={[]} // 这里应该是用户的帖子数据
-              renderItem={item => (
-                <List.Item
-                  actions={[
-                    <Button icon={<HeartOutlined />}>
-                      {item.likesCount > 0 && item.likesCount}
-                    </Button>
-                  ]}
-                >
-                  <List.Item.Meta
-                    description={
-                      <>
-                        <Paragraph>{item.content}</Paragraph>
-                        {item.images?.map((img, idx) => (
-                          <img key={idx} src={img} alt={`Post image ${idx}`} style={{ maxWidth: '100%', margin: '8px 0' }} />
-                        ))}
-                        <Text type="secondary">{new Date(item.createdAt).toLocaleString()}</Text>
-                      </>
-                    }
-                  />
-                </List.Item>
-              )}
-              locale={{ emptyText: '该用户暂无帖子' }}
-            />
-          </TabPane>
-          <TabPane tab="关注" key="following">
-            <List
-              dataSource={[]} // 这里应该是用户关注的人数据
-              renderItem={item => (
-                <List.Item
-                  actions={[
-                    <Button 
-                      size="small" 
-                      type={item.isFollowing ? "default" : "primary"}
-                      onClick={() => {/* 关注/取消关注逻辑 */}}
-                    >
-                      {item.isFollowing ? '已关注' : '关注'}
-                    </Button>
-                  ]}
-                >
-                  <List.Item.Meta
-                    avatar={<Avatar src={item.avatar || <UserOutlined />} />}
-                    title={
-                      <Text 
-                        style={{ cursor: 'pointer' }}
-                        onClick={() => navigate(`/users/${item.id}`)}
-                      >
-                        {item.nickname || item.username}
-                      </Text>
-                    }
-                    description={item.bio || '暂无简介'}
-                  />
-                </List.Item>
-              )}
-              locale={{ emptyText: '该用户暂无关注' }}
-            />
-          </TabPane>
-          <TabPane tab="粉丝" key="followers">
-            <List
-              dataSource={[]} // 这里应该是用户的粉丝数据
-              renderItem={item => (
-                <List.Item
-                  actions={[
-                    <Button 
-                      size="small" 
-                      type={item.isFollowing ? "default" : "primary"}
-                      onClick={() => {/* 关注/取消关注逻辑 */}}
-                    >
-                      {item.isFollowing ? '已关注' : '关注'}
-                    </Button>
-                  ]}
-                >
-                  <List.Item.Meta
-                    avatar={<Avatar src={item.avatar || <UserOutlined />} />}
-                    title={
-                      <Text 
-                        style={{ cursor: 'pointer' }}
-                        onClick={() => navigate(`/users/${item.id}`)}
-                      >
-                        {item.nickname || item.username}
-                      </Text>
-                    }
-                    description={item.bio || '暂无简介'}
-                  />
-                </List.Item>
-              )}
-              locale={{ emptyText: '该用户暂无粉丝' }}
-            />
-          </TabPane>
-        </Tabs>
-      </Content>
-    </Layout>
+        {/* 标签页导航 */}
+        <div className="bg-white rounded-lg shadow-sm mb-6">
+          <div className="flex border-b">
+            <button
+              className={`py-4 px-6 font-medium transition-colors ${
+                activeTab === 'posts' 
+                  ? 'text-blue-600 border-b-2 border-blue-600' 
+                  : 'text-gray-500 hover:text-gray-700 border-b-2 border-transparent'
+              }`}
+              onClick={() => setActiveTab('posts')}
+            >
+              帖子
+            </button>
+            <button
+              className={`py-4 px-6 font-medium transition-colors ${
+                activeTab === 'following' 
+                  ? 'text-blue-600 border-b-2 border-blue-600' 
+                  : 'text-gray-500 hover:text-gray-700 border-b-2 border-transparent'
+              }`}
+              onClick={() => setActiveTab('following')}
+            >
+              关注
+            </button>
+            <button
+              className={`py-4 px-6 font-medium transition-colors ${
+                activeTab === 'followers' 
+                  ? 'text-blue-600 border-b-2 border-blue-600' 
+                  : 'text-gray-500 hover:text-gray-700 border-b-2 border-transparent'
+              }`}
+              onClick={() => setActiveTab('followers')}
+            >
+              粉丝
+            </button>
+          </div>
+          
+          {/* 帖子内容区 */}
+          {activeTab === 'posts' && (
+            <div className="p-6">
+              <div className="bg-gray-50 rounded-lg p-16 text-center">
+                <p className="text-gray-500">该用户暂无帖子</p>
+              </div>
+            </div>
+          )}
+          
+          {/* 关注列表 */}
+          {activeTab === 'following' && (
+            <div className="p-6">
+              <div className="bg-gray-50 rounded-lg p-16 text-center">
+                <p className="text-gray-500">该用户暂无关注</p>
+              </div>
+            </div>
+          )}
+          
+          {/* 粉丝列表 */}
+          {activeTab === 'followers' && (
+            <div className="p-6">
+              <div className="bg-gray-50 rounded-lg p-16 text-center">
+                <p className="text-gray-500">该用户暂无粉丝</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </main>
+      
+      {/* 页脚 */}
+      <footer className="bg-gray-100 py-6 mt-auto">
+        <div className="container mx-auto px-4 text-center text-gray-500 text-sm">
+          社交媒体平台 ©{new Date().getFullYear()} Created with React & Tailwind CSS
+        </div>
+      </footer>
+    </div>
   );
 };