number/首页重构方案.md

# 首页顶部区域重构方案

## 现状问题

当前首页顶部分为两大区块，布局臃肿且视觉层次不清晰：

1. **Hero 区**（hero-section）：左侧是大块文案卡片（标题+搜索框+按钮），右侧是3个统计卡片，占据大量空间但信息密度低
2. **Spotlight 区**（spotlight-section）：左侧轮播图，右侧活动专区，两栏并排

**主要问题：**
- 搜索框在首页价值不高（顶部导航栏已有搜索入口），浪费大量空间
- Hero 文案区占比过大，用户无法一屏看到核心内容
- 轮播图和统计数据分散在两个不同区块，视觉断裂
- 整体"头重脚轻"，首屏几乎被文案和统计占满

---

## 重构目标

将 hero-section 和 spotlight-section **合并为一个紧凑的顶部区域**，布局如下：

```
┌─────────────────────────────────────────────────────┐
│                   轮播图（全宽）                       │
│              横跨整个内容区，高度 320-360px             │
│         叠加渐变遮罩 + 标题文案 + CTA 按钮            │
└─────────────────────────────────────────────────────┘
┌──────────────────────────┬──────────────────────────┐
│                          │                          │
│     数据统计面板（左）     │     活动专区（右）        │
│                          │                          │
│  ┌──────┬──────┬──────┐  │  ┌────────────────────┐  │
│  │Skill │ 用户 │ 下载 │  │  │ 🏷 活动  大促销     │  │
│  │ 18+  │1000+ │  4+  │  │  │    3/21 ~ 3/26    >│  │
│  └──────┴──────┴──────┘  │  ├────────────────────┤  │
│                          │  │ 📢 公告  ...       >│  │
│  ┌──────────────────┐    │  ├────────────────────┤  │
│  │ 浏览商城  需求定制 │    │  │ ...               >│  │
│  └──────────────────┘    │  └────────────────────┘  │
│                          │                          │
└──────────────────────────┴──────────────────────────┘
```

---

## 详细设计

### 第一层：全宽轮播图

- **宽度**：100% 内容区（page-container 宽度，约 1400px）
- **高度**：320px（桌面端），200px（移动端）
- **圆角**：20px
- **叠加层**：底部渐变遮罩（transparent → rgba(0,0,0,0.5)），在遮罩上叠加：
  - 左下角：品牌徽章 `AI SKILL MARKETPLACE` + 主标题 `发现优质数字员工`
  - 右下角：轮播指示器小圆点
- **无 Banner 时**：显示品牌占位图（渐变背景 + 标题文案 + CTA 按钮）
- **交互**：点击跳转对应 Banner 链接

```html
<section class="hero-banner page-container">
  <a-carousel autoplay :autoplaySpeed="4000" effect="fade" class="banner-carousel">
    <div v-for="banner in banners" :key="banner.id" class="banner-slide" @click="handleBannerClick(banner)">
      <img :src="banner.imageUrl" :alt="banner.title" />
      <div class="banner-overlay">
        <div class="banner-info">
          <div class="hero-badge">AI SKILL MARKETPLACE</div>
          <h1>发现优质<span class="highlight">数字员工</span></h1>
          <p>{{ banner.title }}</p>
        </div>
      </div>
    </div>
  </a-carousel>
</section>
```

### 第二层：左统计 + 右活动（双栏）

紧跟轮播图下方，间距 20px，采用 `grid: 1fr 1fr` 双栏布局。

#### 左侧 — 数据统计面板

- **背景**：毛玻璃白色卡片（与现有风格一致）
- **内容**：
  - 上方：3 个统计数字**横向排列**（优质 Skill / 活跃用户 / 累计下载）
  - 下方：一行 CTA 按钮（浏览商城 + 需求定制），替代原 hero 区的按钮
- **统计卡片**：保留现有的彩色渐变数字风格，但改为更紧凑的横向布局

```html
<div class="info-panel stats-panel">
  <div class="stats-row">
    <div class="stat-item" v-for="stat in statsData" :key="stat.title">
      <div class="stat-value" :style="{ color: stat.color }">
        {{ stat.value.toLocaleString() }}<span class="suffix">+</span>
      </div>
      <div class="stat-label">{{ stat.title }}</div>
    </div>
  </div>
  <div class="stats-actions">
    <a-button type="primary" size="large" class="neon-btn-primary" @click="router.push('/skills')">浏览商城</a-button>
    <a-button size="large" class="neon-btn-ghost" @click="router.push('/customize')">需求定制</a-button>
  </div>
</div>
```

#### 右侧 — 活动专区

- **保持现有的活动列表设计**，几乎不变
- 调整高度与左侧对齐（`align-items: stretch`）
- 列表最多显示 4 条（活动优先，公告补充）

---

## 删除的元素

| 元素 | 原位置 | 理由 |
|------|--------|------|
| 搜索框 | hero-section | 顶部导航栏已有搜索，首页无需重复 |
| Hero 文案大卡片 | hero-section | 文案融入轮播图遮罩层，不再独立占块 |
| 描述文字 "探索数千款..." | hero-section | 信息价值低，精简后更干净 |

## 保留/迁移的元素

| 元素 | 原位置 → 新位置 |
|------|-----------------|
| 轮播图 | spotlight-section → 顶部全宽 |
| 3 个统计数字 | hero-section 右侧 → 第二层左侧横排 |
| CTA 按钮（浏览商城/需求定制）| hero-section → 第二层左侧底部 |
| 活动专区 | spotlight-section 右侧 → 第二层右侧 |
| 品牌徽章 AI SKILL MARKETPLACE | hero-section → 轮播图遮罩层 |

---

## 样式规范

| 属性 | 值 |
|------|-----|
| 轮播图高度 | 320px（桌面）/ 200px（移动） |
| 轮播图圆角 | 20px |
| 双栏间距 | 20px |
| 双栏与轮播间距 | 20px |
| 统计面板内边距 | 28px |
| 活动面板内边距 | 0（保持现有） |
| 统计数字字号 | 32px bold |
| 统计标签字号 | 13px |

---

## 响应式适配

| 断点 | 布局变化 |
|------|----------|
| > 1200px | 全宽轮播 + 下方双栏（1:1） |
| 768px - 1200px | 全宽轮播 + 下方双栏（1:1），统计数字缩小 |
| < 768px | 全宽轮播（高度 200px）+ 下方单栏（统计在上，活动在下） |

---

## 涉及文件

- `frontend/src/views/home/index.vue` — 模板和样式的主要改动

## 改动范围

- **模板**：删除 `hero-section` 和 `spotlight-section`，替换为新的 `hero-banner` + `info-grid` 区块
- **样式**：删除 `.hero-section` 和 `.spotlight-section` 相关 CSS，新增 `.hero-banner` 和 `.info-grid` 样式
- **脚本**：删除 `searchKeyword` 和 `handleSearch` 相关逻辑，其余数据获取逻辑不变
- **图标导入**：删除 `SearchOutlined`（如果其他地方不用的话）

---

## 预期效果

- 首屏信息密度提高，轮播图作为视觉焦点占据主导
- 统计数据和活动信息紧凑排列，一屏可见
- 去掉搜索框后页面更干净，用户通过导航栏搜索即可
- 整体视觉从"信息堆砌"变为"图片驱动 + 数据辅助"的现代电商首页风格