53 lines
1.8 KiB
Markdown
53 lines
1.8 KiB
Markdown
# 页面设计: 个人中心 (User Center)
|
|
|
|
> **路由**: `/me/*`
|
|
> **布局**: `LayoutMain`
|
|
> **结构**: 侧边栏导航布局 (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 | |
|
|
```
|
|
|
|
## 2. 侧边栏导航 (Sidebar Nav)
|
|
- **用户信息**: 顶部展示小头像 + 昵称。
|
|
- **菜单组**:
|
|
- **交易中心**: 我的订单、我的钱包、售后记录。
|
|
- **内容管理**: 我的收藏、浏览历史。
|
|
- **账号设置**: 个人资料、账号安全(密码/绑定)、收货地址。
|
|
- **租户入口**: (如果是租户管理员) [切换到创作者中心] 按钮。
|
|
- **样式**: 选中项背景高亮 `bg-primary-50 text-primary-600 border-r-2 border-primary-600`。
|
|
|
|
## 3. 核心子页面设计
|
|
|
|
### 3.1 个人资料 (Profile)
|
|
- **表单**:
|
|
- 头像上传 (点击更换)。
|
|
- 昵称、简介 (Textarea)。
|
|
- 性别、生日 (Datepicker)。
|
|
- **操作**: [保存修改] 按钮。
|
|
|
|
### 3.2 账号安全 (Security)
|
|
- **列表项**:
|
|
- **登录密码**: 已设置 [修改]。
|
|
- **手机绑定**: 138****8888 [更换]。
|
|
- **邮箱绑定**: 未绑定 [绑定]。
|
|
- **注销账号**: 红色链接，需二次确认。
|
|
|
|
### 3.3 我的收藏 (Favorites)
|
|
- **布局**: 网格或列表展示收藏的内容。
|
|
- **操作**: [取消收藏] 按钮，支持批量管理。
|
|
|
|
### 3.4 浏览历史 (History)
|
|
- **时间轴**: 按日期分组 (今天 / 昨天 / 更早)。
|
|
- **列表**: 简单的标题 + 时间列表。
|
|
- **操作**: [清空历史]。
|