💄 style(homepage): optimize layout and spacing for better visual experience

- add max-width constraints to main content sections for better readability on large screens
- adjust gap spacing between elements for improved visual hierarchy
- fix inconsistent button formatting and remove unnecessary whitespace
- center align feature cards and footer content for better visual balance
- add max-width to热门内容 section to improve content focus

src/client/home/pages/HomePage.tsx

@@ -63,9 +63,9 @@ const HomePage: React.FC = () => {
             pageSize: 3,
           }
         });
-        
+
         if (!response.ok) throw new Error('获取热门内容失败');
-        
+
         const data = await response.json();
         // 如果API返回数据为空，则使用mock数据
         setFeaturedPosts(data.data.length > 0 ? data.data : MOCK_FEATURED_POSTS);
@@ -86,13 +86,13 @@ const HomePage: React.FC = () => {
         <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 
+            <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 
+            <button
               className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
               onClick={() => navigate('/register')}
             >
@@ -104,10 +104,10 @@ const HomePage: React.FC = () => {
 
       {/* 主内容区 */}
       <main className="flex-grow pt-16">
-        <div className="container mx-auto px-4 py-10">
+        <div className="container mx-auto px-4 py-10 max-w-7xl">
           {/* 英雄区域 */}
           <section className="mb-16">
-            <div className="flex flex-col lg:flex-row items-center gap-8">
+            <div className="flex flex-col lg:flex-row items-center gap-12 max-w-5xl mx-auto">
               <div className="lg:w-1/2">
                 <h2 className="text-4xl font-bold mb-4">
                   连接世界，<br />
@@ -118,13 +118,13 @@ const HomePage: React.FC = () => {
                   简单注册，开启您的社交之旅。
                 </p>
                 <div className="flex flex-wrap gap-4">
-                  <button 
+                  <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 
+                  <button
                     className="px-6 py-3 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
                     onClick={() => navigate('/login')}
                   >
@@ -133,9 +133,9 @@ const HomePage: React.FC = () => {
                 </div>
               </div>
               <div className="lg:w-1/2">
-                <img 
-                  alt="社交平台展示" 
-                  src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" 
+                <img
+                  alt="社交平台展示"
+                  src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg"
                   className="w-full rounded-lg shadow-sm"
                 />
               </div>
@@ -145,7 +145,7 @@ const HomePage: React.FC = () => {
           {/* 功能特点 */}
           <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="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
               <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" />
@@ -155,7 +155,7 @@ const HomePage: React.FC = () => {
                   发现志同道合的朋友，扩展您的社交圈，建立有意义的连接。
                 </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" />
@@ -165,7 +165,7 @@ const HomePage: React.FC = () => {
                   发布文字、图片和视频，记录生活中的美好瞬间，分享您的故事。
                 </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" />
@@ -182,14 +182,14 @@ const HomePage: React.FC = () => {
           <section className="mb-16">
             <div className="flex justify-between items-center mb-4">
               <h2 className="text-3xl font-bold">热门内容</h2>
-              <button 
+              <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 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>
@@ -199,7 +199,7 @@ const HomePage: React.FC = () => {
                 <p className="text-gray-500">暂无热门内容</p>
               </div>
             ) : (
-              <div className="space-y-4">
+              <div className="space-y-4 max-w-3xl mx-auto">
                 {featuredPosts.map(item => (
                   <div key={item.id} className="bg-white rounded-lg shadow-sm p-4">
                     <div className="flex gap-4">
@@ -239,7 +239,7 @@ const HomePage: React.FC = () => {
               <p className="text-gray-600 max-w-2xl mx-auto mb-6">
                 注册账号，开启您的社交之旅，与数百万用户一起分享精彩生活
               </p>
-              <button 
+              <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')}
               >
@@ -253,12 +253,12 @@ const HomePage: React.FC = () => {
       {/* 页脚 */}
       <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 className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
             <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">
@@ -275,9 +275,8 @@ const HomePage: React.FC = () => {
                   注册
                 </button>
               </div>
-              </div>
             </div>
-            
+
             <div>
               <h4 className="text-md font-medium mb-4">支持</h4>
               <div className="flex flex-col gap-2">
@@ -285,7 +284,7 @@ const HomePage: React.FC = () => {
                 <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">
@@ -300,6 +299,7 @@ const HomePage: React.FC = () => {
                 </button>
               </div>
             </div>
+          </div>
         </div>
       </footer>
     </div>