4.3 KiB
4.3 KiB
页面设计: 个人中心 (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 态。
- 菜单组:
- 概览: 个人首页 (Dashboard)。
- 交易: 我的订单、我的钱包、优惠券、地址管理。
- 内容: 我的收藏、浏览历史、已购内容 (Library)。
- 通知: 消息中心 (Notifications)。
- 设置: 个人资料、账号安全。
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 的头像昵称同步更新。