feat: add pages
This commit is contained in:
@@ -2,59 +2,91 @@
|
||||
|
||||
> **路由**: `/`
|
||||
> **布局**: `LayoutMain` (Header + Footer)
|
||||
> **结构**: 混合布局 (Banner + 左右分栏)
|
||||
> **结构**: 固定宽度混合布局 (Hero + 左右分栏)
|
||||
|
||||
## 1. 页面结构 (Structure)
|
||||
|
||||
首页采用 **"Hero + 左右分栏"** 的经典内容型布局，强调信息密度与浏览效率。
|
||||
首页内容区域固定最大宽度为 `max-w-screen-xl` (`1280px`)，水平居中。
|
||||
|
||||
```text
|
||||
[ Hero Banner / Carousel (Full Width or Boxed) ]
|
||||
----------------------------------------------------------
|
||||
[ Filter/Tags Bar ]
|
||||
----------------------------------------------------------
|
||||
| | |
|
||||
| Main Feed (70%) | Sidebar (30%) |
|
||||
| (Content List) | (Trending / Recommends) |
|
||||
| | |
|
||||
```
|
||||
- **垂直间距 (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)
|
||||
位于导航栏下方，用于展示平台级置顶、活动或推荐。
|
||||
- **容器**: `w-full bg-white border-b border-slate-100 mb-6` (可选)
|
||||
- **内容**:
|
||||
- **轮播图/大卡片**: 高度约 `300px - 400px`。
|
||||
- **样式**: 圆角矩形，阴影，图文叠加或左右结构。
|
||||
### 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)
|
||||
- **位置**: 内容流上方。
|
||||
- **元素**:
|
||||
- **Tabs**: "推荐", "最新", "热门"。
|
||||
- **Tag List**: 常用分类标签（如：技术、生活、设计...），支持横向滚动。
|
||||
- **样式**: `flex items-center space-x-4 py-4 border-b border-slate-200 mb-4`。
|
||||
- **吸顶策略**: **不吸顶 (Non-sticky)**，随页面滚动。
|
||||
- **组成与逻辑**:
|
||||
- **第一行 (维度 Tabs)**: 推荐、最新、热门。默认为“推荐”。
|
||||
- **第二行 (分类 Tags)**: 单选 Pill 样式。必须包含一个“全部”选项用于重置。
|
||||
- **URL 与分享**:
|
||||
- 所有筛选状态（tab, tag）必须实时同步至 URL Query (例如: `/?tab=hot&tag=101`)。
|
||||
- 支持浏览器前进/后退操作及地址复制分享。
|
||||
|
||||
### 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.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 - 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` 卡片。
|
||||
### 2.4 侧边栏 (Sidebar)
|
||||
- **模块顺序**: 公告 > 推荐租户 > 热门榜单 > 广告。
|
||||
- **收缩规则**: 数据为空则模块隐藏，布局始终保持 7:3 结构。
|
||||
|
||||
## 3. 交互与状态 (Interactions)
|
||||
- **Hover**: 列表卡片 Hover 时出现轻微上浮或阴影加深。
|
||||
- **点击**: 点击卡片任意区域跳转至 `内容详情页`。
|
||||
- **关注**: 在推荐租户模块直接点击 "关注"，需判断登录状态。
|
||||
### 2.5 分页与加载策略
|
||||
- **策略**: **“点击加载更多”按钮**。
|
||||
- **数量**: 首屏 10 条，后续每页 10 条。
|
||||
- **加载态**: 按钮变 Loading 状态，内容区显示骨架屏 (Skeleton)。
|
||||
|
||||
### 2.6 状态页设计
|
||||
- **空状态**: "该分类下暂无内容"，配插画 + [返回推荐] 按钮。
|
||||
- **错误态**: 提供 [点击刷新] 按钮。
|
||||
- **局部降级**: 侧边栏加载失败不影响主 Feed。
|
||||
Reference in New Issue
Block a user