92 lines
4.7 KiB
Markdown
92 lines
4.7 KiB
Markdown
# 页面设计: 首页 (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。 |