64 lines
2.5 KiB
Markdown
64 lines
2.5 KiB
Markdown
## 实施方案
|
||
|
||
### 概述
|
||
将当前的绿色圆点在线状态指示器替换为角色标识，为'free'（免费会员）和'creator'（达人会员）用户显示不同样式的标识。
|
||
|
||
### 所需更改
|
||
|
||
1. **更新 AppSidebar.vue 模板**
|
||
- 将第39行和第52行的 `<div class="online-status"></div>` 元素替换为角色标识组件
|
||
- 添加硬编码的角色属性（默认为'free'）用于演示
|
||
|
||
2. **更新角色显示逻辑**
|
||
- 修改 `getRoleDisplayName` 函数，添加'free'和'creator'角色的映射
|
||
- 根据需要为新角色添加翻译
|
||
|
||
3. **更新样式**
|
||
- 移除旧的 `.online-status` CSS 类
|
||
- 为角色标识添加新的 CSS 样式，为'free'和'creator'角色设计不同样式
|
||
- 确保角色标识在用户头像上正确定位
|
||
|
||
4. **测试实现**
|
||
- 验证角色标识在折叠和展开的侧边栏模式下都能正确显示
|
||
- 检查'free'和'creator'角色的不同样式是否可见
|
||
- 确保布局在不同屏幕尺寸下保持响应式
|
||
|
||
### 实现细节
|
||
|
||
#### 模板更改
|
||
- 第39行：将 `<div class="online-status"></div>` 替换为角色标识
|
||
- 第52行：将 `<div class="online-status"></div>` 替换为角色标识
|
||
- 添加硬编码的 `userRole` 属性，设置为'free'或'creator'
|
||
|
||
#### 角色映射更新
|
||
- 更新 `getRoleDisplayName` 函数，包括：
|
||
```javascript
|
||
const roleMap = {
|
||
'free': '免费会员',
|
||
'creator': '达人会员',
|
||
'admin': t('roles.admin'),
|
||
'viewer': t('roles.viewer')
|
||
}
|
||
```
|
||
|
||
#### CSS 更改
|
||
- 移除第450行的 `.online-status` 类定义
|
||
- 添加新的 CSS 类用于角色标识：
|
||
- `.role-badge`：所有角色标识的基础样式
|
||
- `.role-badge.free`：免费会员的样式
|
||
- `.role-badge.creator`：达人会员的样式
|
||
- 使用 `position: absolute` 和适当的 `bottom`/`right` 值确保正确定位
|
||
|
||
### 预期行为
|
||
- 当用户为'free'角色时，标识将显示特定样式（例如灰色背景，简单设计）
|
||
- 当用户为'creator'角色时，标识将显示不同样式（例如紫色背景，特殊设计）
|
||
- 角色标识的位置与当前在线状态圆点相似
|
||
- 标识在折叠和展开的侧边栏模式下都可见
|
||
|
||
### 技术考虑
|
||
- 角色目前硬编码用于演示，但可以轻松连接到 auth store 中的实际用户角色
|
||
- 实现保持与现有代码库的向后兼容性
|
||
- 响应式设计在所有屏幕尺寸下都能保持
|
||
- 样式遵循项目现有的设计系统
|
||
|
||
该方案将为免费会员和达人会员创建清晰的视觉区分，通过提供即时的角色识别来改善用户体验。 |