feat: add pages
This commit is contained in:
@@ -1,38 +1,29 @@
|
||||
# 页面设计: 帮助与错误页 (Misc)
|
||||
# 页面设计: 系统与条款页 (Misc)
|
||||
|
||||
> **路由**:
|
||||
> - 帮助中心: `/help`
|
||||
> - 条款: `/terms`, `/privacy`
|
||||
> - 错误: `/404`, `/500`
|
||||
>
|
||||
> **布局**: `LayoutMain` (帮助/条款) / `LayoutSimple` (错误页)
|
||||
> **布局**: `LayoutMain` (条款) / `LayoutSimple` (错误页)
|
||||
|
||||
## 1. 帮助中心 (Help Center)
|
||||
|
||||
### 1.1 首页 (/help)
|
||||
- **搜索大图 (Hero)**: 背景图 + 大搜索框 "遇到什么问题?"。
|
||||
- **常见问题 (FAQ)**: Grid 布局,每项为 "Q: 问题... A: 简答..."。
|
||||
- **分类导航**: 卡片入口 (如 "账号问题", "支付问题", "内容发布")。
|
||||
- **联系客服**: 底部 Banner,展示客服电话或在线咨询按钮。
|
||||
|
||||
### 1.2 帮助详情页
|
||||
- 左侧分类导航树。
|
||||
- 右侧富文本文章。
|
||||
- 底部反馈: "此文是否有帮助? [是] [否]"。
|
||||
|
||||
## 2. 条款页面 (Legal)
|
||||
## 1. 条款页面 (Legal)
|
||||
- **布局**: 居中单栏,适合阅读长文。
|
||||
- **样式**: `prose prose-slate mx-auto max-w-3xl py-10`。
|
||||
- **导航**: 简单的 Tab 或 侧边 Anchor 导航 (条款、隐私、免责)。
|
||||
- **样式**: `prose prose-slate prose-lg mx-auto max-w-3xl py-10` (针对中老年用户适配大字号)。
|
||||
- **导航**: 简单的 Tab 切换 (服务条款、隐私政策、版权声明)。
|
||||
- **可访问性**: 支持浏览器打印功能,文字对比度遵循 WCAG AAA 标准。
|
||||
|
||||
## 3. 错误页面 (Error Pages)
|
||||
## 2. 错误页面 (Error Pages)
|
||||
|
||||
### 3.1 404 Not Found
|
||||
- **视觉**: 插画 (如迷路的人、空的盒子)。
|
||||
- **文案**: "页面走丢了 (Page Not Found)"。
|
||||
- **操作**: [返回首页] [返回上一页]。
|
||||
### 2.1 404 Not Found
|
||||
- **视觉**: 简洁的适老化插画 (如:迷路的老爷爷或指南针)。
|
||||
- **文案**: "找不到这个页面了" (不使用晦涩的 404 技术术语)。
|
||||
- **操作**:
|
||||
- 大尺寸 [返回首页] 按钮。
|
||||
- [联系客服] 文本链接。
|
||||
|
||||
### 3.2 500 Server Error
|
||||
- **视觉**: 插画 (如正在维修的机器人)。
|
||||
- **文案**: "服务器开小差了,请稍后再试"。
|
||||
- **操作**: [刷新页面] [联系客服]。
|
||||
### 2.2 500 Server Error
|
||||
- **视觉**: 正在维修的视觉提示。
|
||||
- **文案**: "服务器出了点小问题,请稍后再试"。
|
||||
- **操作**:
|
||||
- [刷新试试] 按钮。
|
||||
- [返回首页] 按钮。
|
||||
Reference in New Issue
Block a user