# 页面设计: 首页 (Home)

> **路由**: `/`
> **布局**: `LayoutMain` (Header + Footer)
> **结构**: 混合布局 (Banner + 左右分栏)

## 1. 页面结构 (Structure)

首页采用 **"Hero + 左右分栏"** 的经典内容型布局，强调信息密度与浏览效率。

```text
[      Hero Banner / Carousel (Full Width or Boxed)      ]
----------------------------------------------------------
[ Filter/Tags Bar ]
----------------------------------------------------------
|                    |                                   |
|   Main Feed (70%)  |          Sidebar (30%)            |
|   (Content List)   |      (Trending / Recommends)      |
|                    |                                   |
```

## 2. 详细设计 (Detailed Specs)

### 2.1 Hero 区域 (Hero Section)
位于导航栏下方，用于展示平台级置顶、活动或推荐。
- **容器**: `w-full bg-white border-b border-slate-100 mb-6` (可选)
- **内容**:
  - **轮播图/大卡片**: 高度约 `300px - 400px`。
  - **样式**: 圆角矩形，阴影，图文叠加或左右结构。

### 2.2 筛选栏 (Filter Bar)
- **位置**: 内容流上方。
- **元素**:
  - **Tabs**: "推荐", "最新", "热门"。
  - **Tag List**: 常用分类标签（如：技术、生活、设计...），支持横向滚动。
- **样式**: `flex items-center space-x-4 py-4 border-b border-slate-200 mb-4`。

### 2.3 左侧内容流 (Main Feed - Left Column)
- **宽度**: `col-span-12 lg:col-span-8 xl:col-span-9` (响应式调整)
- **列表样式**:
  - **卡片列表 (List View)**: 左图右文 或 上文下图。适合资讯、博客。
    - *Image*: 缩略图 `w-48 h-32 object-cover rounded`。
    - *Info*: 标题 (H3), 摘要 (Line-clamp-2), Meta (作者/时间/热度)。
  - **网格列表 (Grid View)**: 适合商品、图片为主的内容。
    - `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6`。
- **加载状态**: 底部 "加载更多" 按钮 或 无限滚动 (Infinite Scroll)。

### 2.4 右侧侧边栏 (Sidebar - Right Column)
- **宽度**: `hidden lg:block lg:col-span-4 xl:col-span-3` (移动端隐藏)
- **组件模块**:
  1.  **公告栏 (Announcements)**: 平台公告，纯文本或带图标。
  2.  **热门榜单 (Trending)**: Top 5-10 内容列表，带数字排行 (1, 2, 3...)。
  3.  **推荐租户/作者 (Recommended Creators)**: 头像 + 名称 + 关注按钮列表。
  4.  **广告位 (Ads/Promos)**: 图片 Banner。
- **样式**: 每个模块为一个 `bg-white rounded-lg p-4 shadow-sm mb-6` 卡片。

## 3. 交互与状态 (Interactions)
- **Hover**: 列表卡片 Hover 时出现轻微上浮或阴影加深。
- **点击**: 点击卡片任意区域跳转至 `内容详情页`。
- **关注**: 在推荐租户模块直接点击 "关注"，需判断登录状态。