deotalandAi/.trae/documents/添加邀请规则到邀请信息区域.md

实现计划

1. 分析现有代码结构

• 定位邀请信息区域：invitation-section 类名的 div
• 现有内容包括：邀请人数、邀请码卡片、邀请相关列表
• 将在 invitation-related-section 后添加新的邀请规则区域

2. 设计HTML结构

在 invitation-related-section 后添加新的邀请规则区域：

<div class="invitation-rules">
  <h3>邀请规则</h3>
  
  <!-- 免费会员邀请规则 - 始终显示 -->
  <div class="role-rules free-rules">
    <h4>免费会员邀请规则</h4>
    <ul>
      <li>每成功邀请 1 名用户注册：</li>
      <ul>
        <li>奖励 300 积分</li>
      </ul>
    </ul>
  </div>
  
  <!-- 达人会员邀请规则 - 始终显示 -->
  <div class="role-rules creator-rules">
    <h4>达人会员邀请规则</h4>
    <p>当达人邀请码成功邀请 1 名新用户注册：</p>
    <ol>
      <li>拥有免费会员全部权限</li>
      <li>额外具备带货佣金能力</li>
      <li>立即奖励 300 积分</li>
      <li>建立绑定关系（达人 ←→ 用户）</li>
      <li>被邀请用户后续下单：</li>
      <li>达人可获得 15% 佣金</li>
    </ol>
  </div>
  
  <!-- 成为达人会员模块 - 仅免费会员可见 -->
  <div v-if="userData.role === 'free'" class="upgrade-creator-section">
    <h4>成为达人会员</h4>
    <div class="qr-code-container">
      <!-- QR码占位 -->
      <div class="qr-placeholder">达人会员二维码</div>
    </div>
  </div>
</div>

3. 添加CSS样式

• 为 invitation-rules 添加容器样式，保持与现有模块一致
• 为 role-rules 添加基础样式，区分免费会员和达人会员规则
• 为不同类型的列表（ul/ol）添加自定义样式
• 为成为达人会员模块添加样式，包含二维码容器
• 支持浅色和暗色主题

4. 样式设计要点

• 保持与现有设计语言一致，使用紫色主题色
• 免费会员规则使用蓝色调，达人会员规则使用紫色调
• 添加适当的间距、圆角和边框
• 列表项使用自定义项目符号增强视觉效果
• 二维码容器添加占位样式
• 支持响应式设计

5. 实现步骤

1. 在模板中添加邀请规则HTML结构，同时展示两个规则
2. 添加条件判断，仅对免费会员显示成为达人会员模块
3. 在CSS部分添加对应的样式
4. 确保支持暗色主题
5. 检查响应式设计在不同屏幕尺寸下的表现

6. 预期效果

• 同时展示免费会员和达人会员的邀请规则
• 清晰区分两个规则区块
• 仅免费会员能看到成为达人会员的二维码模块
• 整体设计与现有界面风格统一
• 支持深色模式切换

这个实现将清晰地向所有用户展示完整的邀请规则，同时根据用户角色提供个性化的升级入口。