deotalandAi/.trae/documents/Implement Role Badge for User Status.md

实施方案

概述

将当前的绿色圆点在线状态指示器替换为角色标识，为'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 函数，包括：

  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 中的实际用户角色
• 实现保持与现有代码库的向后兼容性
• 响应式设计在所有屏幕尺寸下都能保持
• 样式遵循项目现有的设计系统

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