一个功能强大、界面美观的纯前端抽奖应用，基于 Vue 3 + TypeScript 开发，支持多种抽奖模式和高度自定义配置。

• 转盘抽奖 - 经典转盘模式，支持自定义扇形数量、颜色和概率
• 卡牌抽奖 - 翻牌式抽奖，支持3D翻转效果和多种布局
• 滚动抽奖 - 滚动列表模式，适合大量参与者的抽奖活动

• JSON 格式配置导入导出
• 多套配置方案管理
• 奖品概率精确控制
• 历史记录保存与查看

• 现代化 UI 设计
• 深色/浅色主题切换
• 响应式布局，完美适配移动端
• 丰富的动画效果和视觉反馈

• 基于加密随机数生成
• 概率精确控制
• 结果可验证，确保公平性
• 防作弊机制

• 支持桌面端、平板、手机
• PWA 支持，可安装到桌面
• 触摸友好的交互设计
• 离线使用支持

• 前端框架: Vue 3 + Composition API
• 开发语言: TypeScript
• 构建工具: Vite
• UI 组件库: Element Plus
• 状态管理: Pinia
• 动画库: GSAP
• 样式: Tailwind CSS + SCSS
• 路由: Vue Router 4
• 图标: Lucide Icons

• Node.js >= 16.0.0
• npm >= 7.0.0 或 pnpm >= 6.0.0

# 使用 npm
npm install

# 或使用 pnpm（推荐）
pnpm install

# 启动开发服务器
npm run dev
# 或
pnpm dev

# 访问 http://localhost:5173

# 构建项目
npm run build
# 或
pnpm build

# 预览构建结果
npm run preview
# 或
pnpm preview

# 运行 ESLint 检查
npm run lint

# 运行类型检查
npm run type-check

# 运行完整检查
npm run check

1. 进入转盘抽奖页面
2. 配置奖品信息（名称、概率、颜色）
3. 点击"开始抽奖"按钮
4. 转盘旋转后停止，显示中奖结果

1. 进入卡牌抽奖页面
2. 设置卡牌数量和奖品配置
3. 点击卡牌进行翻牌
4. 查看翻牌结果和中奖信息

1. 进入滚动抽奖页面
2. 配置滚动参数和奖品信息
3. 点击"开始滚动"按钮
4. 滚动停止后显示中奖组合

• 保存配置: 点击"保存配置"按钮
• 加载配置: 从下拉列表选择已保存的配置
• 导出配置: 点击"导出配置"下载 JSON 文件
• 导入配置: 点击"导入配置"上传 JSON 文件

{
  "id": "config-id",
  "name": "配置名称",
  "type": "wheel",
  "prizes": [
    {
      "id": "prize-1",
      "name": "一等奖",
      "probability": 10,
      "color": "#FF6B6B",
      "description": "奖品描述"
    }
  ],
  "settings": {
    "duration": 3000,
    "easing": "ease-out"
  },
  "createdAt": 1640995200000,
  "updatedAt": 1640995200000
}

应用支持深色和浅色两种主题模式：

• 自动切换: 根据系统设置自动选择主题
• 手动切换: 点击导航栏的主题切换按钮
• 持久化: 主题设置自动保存到本地存储

可以通过修改 src/styles/global.scss 文件中的 CSS 变量来自定义主题：

:root {
  --primary-color: #3b82f6;
  --background-color: #ffffff;
  --text-color: #1f2937;
  // 更多变量...
}

[data-theme="dark"] {
  --background-color: #1f2937;
  --text-color: #f9fafb;
  // 暗色主题变量...
}

• 响应式设计: 自动适配不同屏幕尺寸
• 触摸优化: 针对触摸设备优化交互
• 性能优化: 移动端性能优化
• PWA 支持: 可添加到主屏幕

src/
├── components/          # 公共组件
├── pages/              # 页面组件
├── stores/             # Pinia 状态管理
├── composables/        # 组合式函数
├── utils/              # 工具函数
├── styles/             # 样式文件
├── types/              # TypeScript 类型定义
└── router/             # 路由配置

1. 在 src/pages/ 目录下创建新的页面组件
2. 在 src/router/ 中添加路由配置
3. 在 src/stores/ 中添加相应的状态管理
4. 更新导航菜单和首页链接

项目使用 GSAP 库实现动画效果，可以在组件中这样使用：

import { gsap } from 'gsap'

// 创建动画
gsap.to('.element', {
  duration: 1,
  rotation: 360,
  ease: 'power2.out'
})

A: 检查浏览器是否支持 CSS3 动画，建议使用现代浏览器。

A: 确保 JSON 文件格式正确，参考上面的配置文件格式示例。

A: 确保浏览器支持 Flexbox 和 CSS Grid，建议更新到最新版本。

A: 应用使用加密随机数算法，确保结果的随机性和公平性。

MIT License - 详见 LICENSE 文件

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

如有问题或建议，请通过以下方式联系：

• 提交 GitHub Issue
• 发送邮件到项目维护者

⭐ 如果这个项目对你有帮助，请给个 Star 支持一下！