feat: add pages

docs/design/portal/PAGE_USER_CENTER.md

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