## 实施方案

### 概述
将当前的绿色圆点在线状态指示器替换为角色标识，为'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 中的实际用户角色
- 实现保持与现有代码库的向后兼容性
- 响应式设计在所有屏幕尺寸下都能保持
- 样式遵循项目现有的设计系统

该方案将为免费会员和达人会员创建清晰的视觉区分，通过提供即时的角色识别来改善用户体验。