# 页面设计: 首页 (Home)

> **路由**: `/`
> **布局**: `LayoutMain` (Header + Footer)
> **结构**: 固定宽度混合布局 (Hero + 左右分栏)

## 1. 页面结构 (Structure)

首页内容区域固定最大宽度为 `max-w-screen-xl` (`1280px`)，水平居中。

- **垂直间距 (Vertical Spacing)**: 各大区块间距统一为 `py-6` (24px)。
- **分栏间距 (Column Gap)**: 左右分栏间距为 `gap-8` (32px)。
- **响应式分栏策略 (Breakpoints)**:
  - **lg (1024px ~ 1279px)**: 主内容 8 份 (`col-span-8`)，侧边栏 4 份 (`col-span-4`)。
  - **xl (1280px+)**: 主内容 9 份 (`col-span-9`)，侧边栏 3 份 (`col-span-3`)。*侧边栏视觉宽度维持在约 300-320px。*

---

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

### 2.1 Hero 区域 (Hero Section / Carousel)
- **容器**: 跟随 1280px 宽度 (Boxed)，高度固定为 `h-[400px]`。
- **交互规范**:
  - **自动轮播**: 间隔 `5000ms`。
  - **暂停逻辑**: 鼠标悬停 (Hover) 或 键盘聚焦 (Focus) 时停止轮播。
  - **指示器**: 底部居中显示小圆点 (`bottom-4`)。
  - **翻页箭头**: **始终显示**（不随 Hover 隐藏），使用半透明圆底背景以增强视觉提示。
  - **视觉处理**: 图片底部 30% 区域叠加 `bg-gradient-to-t from-black/70 to-transparent` 暗罩，确保白色文字标题清晰。
- **降级策略**: 若后台未配置 Banner，此区块 `hidden`，不显示占位图，下方内容自动上移。

### 2.2 筛选栏 (Filter Bar)
- **吸顶策略**: **不吸顶 (Non-sticky)**，随页面滚动。
- **组成与逻辑**:
  - **第一行 (维度 Tabs)**: 推荐、最新、热门。默认为“推荐”。
  - **第二行 (分类 Tags)**: 单选 Pill 样式。必须包含一个“全部”选项用于重置。
- **URL 与分享**: 
  - 所有筛选状态（tab, tag）必须实时同步至 URL Query (例如: `/?tab=hot&tag=101`)。
  - 支持浏览器前进/后退操作及地址复制分享。

### 2.3 列表展示规范 (List Data Specs)
- **卡片展示模版 (Card Variants)**:
  根据内容包含的图片数量，自动匹配以下模版：
  1.  **无图模式 (Text Only)**:
      - 适用: 纯文本内容。
      - 布局: 标题 + 摘要 (**最多 5-8 行**) + 底部 Meta。
      - 样式: 纯文字排版，左对齐。由于无视觉干扰，适合深度阅读引导。
  2.  **单图模式 (Single Image)** - *默认*:
      - 适用: 1 张 或 2 张图片 (双图降级显示)。注：首页仅展示图片，不进行视频自动播放。
      - 布局: **左文右图**。左侧标题/摘要，右侧固定尺寸图片 (`w-[240px] h-[135px]`)。
      - 视频识别: 封面图中心显示半透明播放图标。
  3.  **三图模式 (Three Images)**:
      - 适用: 3 张及以上图片。
      - 布局: 标题 (H3) -> 3 张图片横排 (`grid grid-cols-3 gap-2`) -> 底部 Meta。
- **卡片必须字段**:
  - **封面图**: 比例固定 **16:9** (建议尺寸: 240px * 135px)，`object-cover`。
  - **标题组合**: 
    - **曲种标签**: 标题前展示 `[京剧]` 等曲种 Tag (灰色微小字或主色边框)。
    - **正题**: 显示 `剧目名·选段名` (如《锁麟囊》春秋亭)。
    - **样式**: `text-lg` (18px) 加粗，最大 **2 行**。
  - **摘要**: 字号 `text-base` (16px)，`text-slate-500`。最大 **2 行**。
  - **元数据**: 
    - 左侧: 头像 + 名称。
    - 右侧: **行当** (如 "青衣") | 阅读数。
  - **时间**: 智能格式化。
- **价格展示规则**:
  - **免费内容**: 不展示任何价格标签。
  - **付费内容**:
    - 显示价格: `¥ 99.00` (数字加粗，红色 `text-red-600`)。
    - 若有划线价，显示在价格旁: `¥ 129.00` (灰色 `line-through text-sm`)。
  - **限时免费**:
    - 显示标签: `限时免费` (绿色 badge)。
    - 显示原价: `¥ 99.00` (划线)。
- **角标规则 (Badges)**:
  - `置顶`: 封面左上角红色。
  - `限免`: 封面右上角绿色。
  - `付费`: 封面右上角金色。
  - `新 (New)`: 24小时内发布的内容，标题旁加红点或小图标。
- **点击区域**: **整卡可点击**。Hover 时背景 `bg-slate-50` 或阴影 `shadow-md`。

### 2.4 侧边栏 (Sidebar)
- **模块顺序**: 公告 > 推荐租户 > 热门榜单 > 广告。
- **收缩规则**: 数据为空则模块隐藏，布局始终保持 7:3 结构。

### 2.5 分页与加载策略
- **策略**: **“点击加载更多”按钮**。
- **数量**: 首屏 10 条，后续每页 10 条。
- **加载态**: 按钮变 Loading 状态，内容区显示骨架屏 (Skeleton)。

### 2.6 状态页设计
- **空状态**: "该分类下暂无内容"，配插画 + [返回推荐] 按钮。
- **错误态**: 提供 [点击刷新] 按钮。
- **局部降级**: 侧边栏加载失败不影响主 Feed。