# 邀请码样式重构计划

## 1. 数据结构修改
- 将单个邀请码改为数组形式，包含3个邀请码
- 更新用户数据模型，添加邀请码有效期等额外信息

## 2. 模板布局调整
- 将当前的单个邀请码展示改为横向排列的卡片布局
- 使用 flex 或 grid 布局实现3个邀请码的横向排列
- 确保在不同屏幕尺寸下有良好的响应式表现

## 3. 样式设计
- **卡片样式**：使用渐变背景，参考图中的蓝绿色渐变效果
- **邀请码文本**：居中显示，大号字体，清晰易读
- **复制按钮**：底部添加"复制邀请码"按钮，带有悬停效果
- **品牌标识**：每个卡片底部添加品牌logo或名称

## 4. 功能实现
- 添加邀请码复制功能，点击按钮自动复制到剪贴板
- 显示复制成功的反馈信息
- 添加悬停效果，提升交互体验

## 5. 响应式设计
- 在桌面端显示3个横向排列的邀请码卡片
- 在平板端根据屏幕宽度调整卡片大小
- 在移动端改为垂直排列

## 6. 暗色主题支持
- 确保在暗色主题下邀请码卡片有良好的视觉效果
- 调整渐变颜色和文字颜色，适配暗色背景

## 7. 代码实现
- 修改模板结构，使用 v-for 循环渲染3个邀请码
- 添加复制功能的事件处理
- 设计符合参考图风格的 CSS 样式
- 确保与现有页面设计风格保持一致

## 8. 测试验证
- 检查在不同屏幕尺寸下的显示效果
- 测试复制功能是否正常工作
- 验证暗色主题下的表现
- 确保与页面其他元素的样式协调