131 lines
3.7 KiB
Markdown
131 lines
3.7 KiB
Markdown
# 个人主页访客/主人视角区分方案
|
||
|
||
## 目标
|
||
区分"自己看自己的主页"和"看别人的主页"两种视角，访客视角隐藏所有隐私数据和个人信息。
|
||
|
||
---
|
||
|
||
## 当前状态分析
|
||
|
||
| 当前已实现 | 需要修改 |
|
||
|------------|----------|
|
||
| `isOwner` 判断逻辑 | 后端 API 返回敏感数据给访客 |
|
||
| 数据分析标签页仅主人可见 | 侧边栏积分/金币卡片对所有人可见 |
|
||
| 封面上传仅主人可见 | 访客可见加入时间、地区、性别 |
|
||
| 快捷操作仅主人可见 | |
|
||
| 不同操作按钮（关注/发消息/拉黑） | |
|
||
|
||
---
|
||
|
||
## 访客隐藏内容清单
|
||
|
||
### 完全隐藏（整个区块不渲染）
|
||
- 数据分析标签页（已处理）
|
||
- 快捷操作侧边栏（已处理）
|
||
- 积分/金币信息卡片
|
||
- 最近收藏卡片
|
||
- 封面上传按钮（已处理）
|
||
- 个人统计中的具体数值（文章数、粉丝数、关注数、点赞数）
|
||
|
||
### 个人信息部分隐藏
|
||
- 加入时间 → 隐藏
|
||
- 地区 → 隐藏
|
||
- 性别 → 隐藏
|
||
- 积分/金币 → 隐藏
|
||
|
||
### 访客可见内容
|
||
- 用户名
|
||
- 头像
|
||
- 个性签名
|
||
- 文章标签页（公开文章列表）
|
||
- 关注按钮 / 发消息按钮 / 拉黑按钮
|
||
|
||
---
|
||
|
||
## 实现方案
|
||
|
||
### 1. 后端修改
|
||
|
||
| 文件 | 修改 |
|
||
|------|------|
|
||
| `user/views/user.py` | `PublicProfileAPIView` 新增 `is_owner` 判断，访客不返回 `points`、`coins`、`analytics`、`date_joined`、`location`、`gender` 等敏感字段 |
|
||
|
||
### 2. 前端修改
|
||
|
||
| 文件 | 修改 |
|
||
|------|------|
|
||
| `UserHome.tsx` | 侧边栏积分/金币卡片增加 `isOwner` 判断 |
|
||
| `UserHome.tsx` | 侧边栏最近收藏卡片增加 `isOwner` 判断 |
|
||
| `UserHome.tsx` | Hero 区域隐藏加入时间、地区、性别（非主人） |
|
||
| `UserHome.tsx` | 统计数字区域对访客隐藏具体数值 |
|
||
| `UserHome.css` | 访客模式下的统计区域样式适配 |
|
||
|
||
### 3. 国际化
|
||
|
||
| 文件 | 修改 |
|
||
|------|------|
|
||
| `zh.json` / `en.json` / `ja.json` / `ko.json` / `ru.json` / `zh-TW.json` | 新增 `userHome.visitor.hiddenStats` 翻译 |
|
||
|
||
---
|
||
|
||
## 详细实现步骤
|
||
|
||
### Step 1: 后端 `PublicProfileAPIView` 修改
|
||
|
||
在 `user/views/user.py` 的 `PublicProfileAPIView.get()` 中：
|
||
|
||
```python
|
||
is_owner = request.user.is_authenticated and request.user.id == user_id
|
||
|
||
data = {
|
||
'id': user.id,
|
||
'username': user.username,
|
||
'avatar': user.avatar.url if user.avatar else '',
|
||
'bio': user.bio or '',
|
||
# ... 仅对主人返回的字段
|
||
}
|
||
|
||
if is_owner:
|
||
data.update({
|
||
'points': user.points,
|
||
'coins': user.coins,
|
||
'date_joined': user.date_joined.strftime('%Y-%m-%d'),
|
||
'gender': user.get_gender_display(),
|
||
'location': user.location or '',
|
||
'analytics': analytics,
|
||
'follower_count': 0, # 实际需要查询
|
||
'following_count': 0,
|
||
'like_count': 0,
|
||
})
|
||
else:
|
||
# 访客可见字段
|
||
data.update({
|
||
'date_joined': None,
|
||
'gender': '',
|
||
'location': '',
|
||
})
|
||
```
|
||
|
||
### Step 2: 前端 `UserHome.tsx` 修改
|
||
|
||
**Hero 区域（用户信息头部）**：
|
||
- 非主人时隐藏：加入时间、地区、性别图标
|
||
- 非主人时隐藏：统计数字（文章数、粉丝数等），替换为"关注查看"提示
|
||
|
||
**侧边栏**：
|
||
- 积分/金币卡片：增加 `{isOwner && (...)}` 条件渲染
|
||
- 最近收藏卡片：增加 `{isOwner && (...)}` 条件渲染
|
||
|
||
### Step 3: CSS 适配
|
||
|
||
添加 `.userhome-stats-row--visitor` 样式，使统计区域在访客模式下居中显示提示文字。
|
||
|
||
---
|
||
|
||
## 验证步骤
|
||
|
||
1. 登录后访问自己的主页 → 确认所有信息可见，数据分析可用
|
||
2. 访问他人主页 → 确认仅显示用户名、头像、签名、文章列表
|
||
3. 未登录访问他人主页 → 同上
|
||
4. 检查侧边栏 → 积分/金币/收藏卡片对访客隐藏
|