feat: polish remaining storefront sections

frontend/src/pages/CategoryDetail.jsx

@@ -1,56 +1,113 @@
-import { useParams, useNavigate } from 'react-router-dom';
-import { Button } from 'antd';
-import { LeftOutlined } from '@ant-design/icons';
-import Header from '../components/Header';
-import Footer from '../components/Footer';
-import Works from '../components/Works';
-import './CategoryDetail.css';
-
-const CategoryDetail = () => {
-  const { name } = useParams();
-  const navigate = useNavigate();
-
-  // 分类数据映射
-  const categoryData = {
-    '文化墙': { count: '6572', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
-    '周年庆': { count: '15868', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
-    '直播': { count: '35429', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
-    '包装': { count: '9533', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
-    '科技': { count: '44921', gradient: 'linear-gradient(135deg, #0c3483 0%, #a2b6df 100%)' },
-    '活动': { count: '408131', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
-    '医美': { count: '223068', gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
-    '邀请函': { count: '15361', gradient: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)' },
-  };
-
-  const category = categoryData[name];
-
-  return (
-    <div className="category-detail-page">
-      <Header />
-      
-      <div className="category-detail-hero" style={{ background: category?.gradient }}>
-        <div className="category-detail-overlay">
-          <Button 
-            icon={<LeftOutlined />} 
-            className="back-btn"
-            onClick={() => navigate('/')}
-          >
-            返回首页
-          </Button>
-          <div className="category-detail-content">
-            <h1 className="category-detail-title">{name}</h1>
-            <p className="category-detail-count">共 {category?.count} 张作品</p>
-          </div>
-        </div>
-      </div>
-
-      <div className="category-detail-works">
-        <Works categoryFilter={name} />
-      </div>
-
-      <Footer />
-    </div>
-  );
-};
-
-export default CategoryDetail;
+import { useParams, useNavigate } from 'react-router-dom';
+import { Button } from 'antd';
+import { LeftOutlined, AppstoreOutlined, FireOutlined, EyeOutlined } from '@ant-design/icons';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import Works from '../components/Works';
+import './CategoryDetail.css';
+
+const CategoryDetail = () => {
+  const { name } = useParams();
+  const navigate = useNavigate();
+
+  const categoryData = {
+    文化墙: {
+      count: '6572',
+      gradient: 'linear-gradient(135deg, #d9755d 0%, #f2bb7c 100%)',
+      description: '适合企业形象、品牌理念和空间场景布置的长图与信息展示素材。',
+    },
+    周年庆: {
+      count: '15868',
+      gradient: 'linear-gradient(135deg, #e17baa 0%, #f7c46c 100%)',
+      description: '围绕纪念日、店庆、品牌里程碑等主题的高频视觉物料。',
+    },
+    直播: {
+      count: '35429',
+      gradient: 'linear-gradient(135deg, #4a8ee8 0%, #57d3e2 100%)',
+      description: '直播预告、封面、流程页和互动氛围图的整套素材集合。',
+    },
+    包装: {
+      count: '9533',
+      gradient: 'linear-gradient(135deg, #2f8f73 0%, #86d6b2 100%)',
+      description: '包装延展、产品展示和品牌包装视觉的常用内容。',
+    },
+    科技: {
+      count: '44921',
+      gradient: 'linear-gradient(135deg, #4356a8 0%, #7eb0da 100%)',
+      description: '偏未来感、信息感和产品感表达的科技类视觉素材。',
+    },
+    活动: {
+      count: '408131',
+      gradient: 'linear-gradient(135deg, #ffb38a 0%, #ef6a5b 100%)',
+      description: '最适合首页承接的热门分类之一，覆盖促销、开业和节点营销素材。',
+    },
+    医美: {
+      count: '223068',
+      gradient: 'linear-gradient(135deg, #f0a6b4 0%, #f7d6df 100%)',
+      description: '轻医美、抗衰、项目卖点和机构宣传类视觉内容。',
+    },
+    邀请函: {
+      count: '15361',
+      gradient: 'linear-gradient(135deg, #a87ab8 0%, #ead9f3 100%)',
+      description: '会议、婚礼、活动和品牌邀约相关的正式视觉模板。',
+    },
+  };
+
+  const category = categoryData[name] || {
+    count: '0',
+    gradient: 'linear-gradient(135deg, #d9755d 0%, #f2bb7c 100%)',
+    description: '当前分类正在持续补充中，可以先浏览已上线的作品内容。',
+  };
+
+  return (
+    <div className="category-detail-page">
+      <Header />
+
+      <div className="category-detail-hero" style={{ background: category.gradient }}>
+        <div className="category-detail-overlay">
+          <Button icon={<LeftOutlined />} className="back-btn" onClick={() => navigate('/')}>
+            返回首页
+          </Button>
+
+          <div className="category-detail-content">
+            <span className="category-detail-kicker">分类精选</span>
+            <h1 className="category-detail-title">{name}</h1>
+            <p className="category-detail-desc">{category.description}</p>
+
+            <div className="category-detail-stats">
+              <div className="category-stat">
+                <AppstoreOutlined />
+                <div>
+                  <strong>{category.count}</strong>
+                  <span>作品总量</span>
+                </div>
+              </div>
+              <div className="category-stat">
+                <FireOutlined />
+                <div>
+                  <strong>高频</strong>
+                  <span>适合首页承接</span>
+                </div>
+              </div>
+              <div className="category-stat">
+                <EyeOutlined />
+                <div>
+                  <strong>详情页</strong>
+                  <span>支持预览与下载</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="category-detail-works">
+        <Works categoryFilter={name} title={`${name} 分类作品`} />
+      </div>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default CategoryDetail;