92 lines
4.3 KiB
Markdown
92 lines
4.3 KiB
Markdown
# 页面设计: 个人中心 (User Center)
|
||
|
||
> **路由**: `/me/*`
|
||
> **布局**: `LayoutMain` (Header + Footer)
|
||
> **结构**: 固定宽度侧边栏布局 (Sidebar Layout)
|
||
|
||
## 1. 布局结构 (Structure)
|
||
|
||
内容区域固定最大宽度 `1280px` 居中，采用 `gap-8` 分栏。
|
||
|
||
- **Sidebar (左侧)**: 宽度固定 **280px**，背景白底圆角。始终可见，不支持折叠以降低操作复杂度。
|
||
- **Main (右侧)**: 宽度自适应 (Flex Grow)，背景白底圆角，最小高度 `600px`。
|
||
|
||
---
|
||
|
||
## 2. 侧边栏导航 (Sidebar Nav)
|
||
|
||
### 2.1 用户简报区
|
||
- **内容**: 头像 (64px) + 昵称 (加粗) + ID。
|
||
- **文字策略**: 昵称最长 20 字符，超长则 `truncate`，Hover 显示 Tooltip。
|
||
|
||
### 2.2 菜单体系
|
||
- **样式**: 菜单组不设折叠开关。当前活动页在滚动时保持高亮。
|
||
- **高亮逻辑**: 精确匹配路由。若子页面（如订单详情）打开，所属父级菜单（我的订单）保持 Active 态。
|
||
- **菜单组**:
|
||
1. **概览**: 个人首页 (Dashboard)。
|
||
2. **交易**: 我的订单、我的钱包、优惠券、地址管理。
|
||
3. **内容**: 我的收藏、浏览历史、已购内容 (Library)。
|
||
4. **通知**: 消息中心 (Notifications)。
|
||
5. **设置**: 个人资料、账号安全。
|
||
|
||
---
|
||
|
||
## 3. 核心子页面设计
|
||
|
||
### 3.1 消息中心 (Notifications) `/me/notifications`
|
||
- **结构**: 顶部 Tabs 筛选 + 垂直消息流。
|
||
- **Tabs**:
|
||
- **系统通知**: 平台活动、升级提醒。
|
||
- **订单通知**: 付款成功、退款进度。
|
||
- **审核通知**: 内容发布结果、租户申请结果。
|
||
- **互动消息**: 被人点赞、新的评论回复。
|
||
- **操作**: 顶部右侧 [全部标记已读] 按钮。
|
||
- **列表项 (Card)**:
|
||
- **样式**: `flex items-start p-4 border-b border-slate-50 hover:bg-slate-50 transition-colors`。
|
||
- **未读标记**: 标题前带蓝色小点。
|
||
- **内容**: 图标 (根据分类) + 标题 + 摘要 (1行) + 时间。
|
||
- **跳转**: 点击整行跳转至关联页面（如：订单通知跳转至订单详情）。
|
||
- **空状态**: "暂无消息通知"。
|
||
|
||
### 3.1 个人首页 (Dashboard) `/me`
|
||
- **资产数据**: 余额、积分、优惠券。
|
||
- **刷新频率**: 进入页面实时拉取最新数据。
|
||
- **异常态**: 拉取失败显示 `--`，点击该区域触发手动刷新。
|
||
- **最近订单**: 展示最近 **3 条** 订单，按支付时间倒序。
|
||
- **最近浏览**: 展示最近 **5 条** 记录，卡片包含：封面、标题、作者。
|
||
|
||
### 3.2 个人资料 (Profile)
|
||
- **字段清单**:
|
||
- **头像**: (必填) 点击上传。
|
||
- **昵称**: (必填) 2-20 字符。
|
||
- **简介**: (可选) 100 字符以内。
|
||
- **性别**: (可选) 单选按钮：男、女、保密。
|
||
- **生日**: (可选) 日期选择器。
|
||
- **地区**: (可选) 省市二级联动选择。
|
||
- **审核规则**: 昵称与头像提交后进入 **后置审核**。修改成功后提示 "修改已提交，审核中"，在审核通过前，他人访问时显示旧信息或占位符。
|
||
|
||
### 3.3 我的钱包 (Wallet)
|
||
- **充值交互**: 预设面额按钮 + 自定义输入。
|
||
- **流水明细**: 展示 30 天内记录，支持按类型（支出/收入/充值）筛选。
|
||
|
||
### 3.4 内容管理 (收藏/历史/已购)
|
||
- **卡片规范**: 包含标题、封面 (16:9)、租户名称、收藏/购买时间。
|
||
- **已购状态处理**:
|
||
- **正常**: 显示 "永久有效" 或 "剩余 X 天"。
|
||
- **已过期**: 卡片置灰，标注 "已过期"，提供 [再次购买] 链接。
|
||
- **已下架**: 卡片置灰，标注 "已下架"，不可点击进入详情。
|
||
- **删除逻辑**:
|
||
- **单个删除**: 点击 `X` 即删除，底部弹出 Toast 提示 "已删除" + [撤销] 按钮。
|
||
- **批量删除**: 管理态下选中多项点击 [删除]，必须弹出二次确认模态框。
|
||
|
||
### 3.5 账号安全 (Security)
|
||
- **实名认证**: (可选/强制) 展示实名状态，未认证显示 [去认证]。
|
||
- **账号注销**: 极简流程，但需输入 "注销" 确认，并提示 "注销后资产将清空且不可找回"。
|
||
|
||
---
|
||
|
||
## 4. 状态与加载
|
||
- **加载策略**: 切换菜单时，右侧 Main 区域展示骨架屏 (Skeleton)。
|
||
- **空状态**: 统一插画风格，带引导按钮（如收藏为空显示 "去发现内容"）。
|
||
- **同步**: 资料修改成功后，TopNavbar 和 Sidebar 的头像昵称同步更新。
|