tuhui/frontend/src/components/Categories.jsx

import { useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  RightOutlined,
  LeftOutlined,
  AppstoreOutlined,
  NotificationOutlined,
  PlayCircleOutlined,
  CompassOutlined,
  GiftOutlined,
  FileTextOutlined,
  RiseOutlined,
  CoffeeOutlined,
} from '@ant-design/icons';
import { Button } from 'antd';
import './Categories.css';

const categories = [
  {
    name: '活动',
    count: '408131',
    description: '促销、开业、发布会等高频营销场景素材。',
    tag: '热点',
    gradient: 'linear-gradient(135deg, #ffb38a 0%, #ef6a5b 100%)',
    icon: <NotificationOutlined />,
  },
  {
    name: '中式',
    count: '105545',
    description: '国风、红金、传统节令与典雅视觉方向。',
    tag: '质感',
    gradient: 'linear-gradient(135deg, #7d2f2f 0%, #d98f5f 100%)',
    icon: <AppstoreOutlined />,
  },
  {
    name: '直播',
    count: '35429',
    description: '口播封面、预告海报和直播场景包装。',
    tag: '转化',
    gradient: 'linear-gradient(135deg, #4a8ee8 0%, #57d3e2 100%)',
    icon: <PlayCircleOutlined />,
  },
  {
    name: '旅游',
    count: '97826',
    description: '景区、民宿、出行路线和旅行氛围图。',
    tag: '场景',
    gradient: 'linear-gradient(135deg, #2f8f73 0%, #7bdcb5 100%)',
    icon: <CompassOutlined />,
  },
  {
    name: '周年庆',
    count: '15868',
    description: '品牌纪念日、店庆和阶段性节点专题。',
    tag: '品牌',
    gradient: 'linear-gradient(135deg, #e17baa 0%, #f7c46c 100%)',
    icon: <GiftOutlined />,
  },
  {
    name: '长图',
    count: '130856',
    description: '卖点拆解、流程展示和信息编排型视觉。',
    tag: '信息流',
    gradient: 'linear-gradient(135deg, #5767c8 0%, #8c77dc 100%)',
    icon: <FileTextOutlined />,
  },
  {
    name: '价值点',
    count: '214448',
    description: '优势提炼、卖点表达和产品力沟通模板。',
    tag: '卖点',
    gradient: 'linear-gradient(135deg, #2b5775 0%, #6da4c9 100%)',
    icon: <RiseOutlined />,
  },
  {
    name: '酒吧',
    count: '36397',
    description: '夜场、派对、餐酒主题和情绪化海报。',
    tag: '氛围',
    gradient: 'linear-gradient(135deg, #8c4b2e 0%, #d78c52 100%)',
    icon: <CoffeeOutlined />,
  },
];

const Categories = () => {
  const scrollRef = useRef(null);
  const navigate = useNavigate();

  const scroll = (direction) => {
    if (scrollRef.current) {
      const scrollAmount = direction === 'left' ? -320 : 320;
      scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
    }
  };

  return (
    <section className="categories">
      <div className="categories-panel">
        <div className="categories-header">
          <div className="categories-copy">
            <span className="categories-kicker">快速浏览</span>
            <h2>把高频需求先整理好，用户会更容易继续点下去</h2>
            <p>
              分类区不只是导航，更是首页的第二层承接。让用户在首屏之后，立刻看到更清楚的行业和场景入口。
            </p>
          </div>

          <div className="categories-actions">
            <span className="categories-summary">{categories.length} 个主分类</span>
            <div className="categories-controls">
              <Button
                className="scroll-btn"
                shape="circle"
                icon={<LeftOutlined />}
                onClick={() => scroll('left')}
              />
              <Button
                className="scroll-btn"
                shape="circle"
                icon={<RightOutlined />}
                onClick={() => scroll('right')}
              />
            </div>
          </div>
        </div>

        <div className="categories-scroll" ref={scrollRef}>
          {categories.map((cat, index) => (
            <button
              key={cat.name}
              type="button"
              className="category-card"
              style={{ '--delay': `${index * 0.06}s` }}
              onClick={() => navigate(`/category/${cat.name}`)}
            >
              <div className="category-card-top" style={{ background: cat.gradient }}>
                <div className="category-icon-wrap">{cat.icon}</div>
                <span className="category-pill">{cat.tag}</span>
              </div>

              <div className="category-body">
                <div>
                  <h3 className="category-name">{cat.name}</h3>
                  <p className="category-description">{cat.description}</p>
                </div>

                <div className="category-footer">
                  <span className="category-count">{cat.count} 张</span>
                  <span className="category-link">
                    查看分类
                    <RightOutlined />
                  </span>
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Categories;