# 页面设计: 个人中心 (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 的头像昵称同步更新。