# SlotMachine

**Repository Path**: graberry/slots-machine

## Basic Information

- **Project Name**: SlotMachine
- **Description**: 抽奖老虎机
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-02
- **Last Updated**: 2025-08-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎯 梁宁产品思维30讲 - 摸底测试老虎机

一个基于 Vue 3 + Tailwind CSS 的趣味性考试抽题系统，旨在通过有趣的老虎机界面减轻考试压力，为梁宁产品思维30讲的摸底测试提供游戏化的抽题体验。

## ✨ 项目特色

### 🎮 老虎机风格界面
- **炫酷动画效果**：三列滚动动画，模拟真实老虎机体验
- **霓虹发光效果**：金黄色边框发光，增强视觉冲击力
- **流畅过渡动画**：CSS动画 + JavaScript控制的完美结合
- **减压设计理念**：通过游戏化界面降低考试紧张感

### 📊 智能抽题系统
- **三列联动**：题目板块、难度等级、题目编号同步滚动
- **随机算法**：确保每次抽题的公平性和随机性
- **结果展示**：弹窗显示完整的题目信息
- **一键重抽**：支持连续抽题，提升使用体验

### 🎯 题库内容

#### 技能板块覆盖
- **同理心** - 情景沟通、团队协作类题目
- **逻辑思维** - 分析推理、问题解决类题目
- **创造力** - 创新设计、方案策划类题目
- **沟通能力** - 表达技巧、汇报策略类题目
- **领导力** - 团队管理、战略规划类题目
- **专注力** - 注意力管理、效率提升类题目

#### 难度等级分布
- **简单** - 基础概念和日常应用
- **普通** - 综合分析和实践应用
- **困难** - 复杂场景和高级策略

## 🚀 快速开始

### 环境要求
- Node.js >= 20.19.0 或 >= 22.12.0
- pnpm 包管理器

### 安装依赖
```bash
pnpm install
```

### 开发模式
```bash
pnpm dev
```
访问 http://localhost:5174/ 查看效果

### 构建生产版本
```bash
pnpm build
```

### 预览生产版本
```bash
pnpm preview
```

## 🛠️ 技术栈

- **Vue 3** - 使用 Composition API
- **Tailwind CSS** - 现代化样式框架
- **Vite** - 快速构建工具
- **JavaScript** - 核心逻辑实现

## 📁 项目结构

```
抽奖老虎机/
├── src/
│   ├── components/
│   │   ├── ExamSlotMachine.vue    # 主老虎机组件
│   │   ├── ScrollColumn.vue       # 滚动列组件
│   │   └── SelectionBox.vue       # 选中框组件
│   ├── data/
│   │   └── examData.js           # 题目数据
│   ├── assets/
│   │   ├── base.css              # 基础样式
│   │   └── main.css              # 主样式
│   ├── views/
│   │   └── index.vue             # 主页面
│   ├── App.vue                   # 根组件
│   └── main.js                   # 入口文件
├── public/
│   └── favicon.ico              # 网站图标
├── package.json                  # 项目配置
├── vite.config.js               # Vite配置
└── README.md                    # 项目说明
```

## 🎨 界面设计

### 配色方案
- **主背景**：灰色渐变背景，简洁专业
- **老虎机边框**：深灰色边框，金色选中框
- **滚动列配色**：
  - 题目板块：蓝色主题
  - 难度等级：绿色主题
  - 题目编号：紫色主题

### 动画效果
- **滚动动画**：匀速滚动转为缓动停止
- **选中框高亮**：黄色边框发光效果
- **按钮交互**：悬浮、缩放、发光效果
- **结果展示**：弹窗淡入淡出动画

## 🎪 使用流程

1. **点击开始抽题** - 触发老虎机滚动动画
2. **观看滚动效果** - 三列依次开始滚动
3. **等待结果** - 动画停止后显示抽题结果
4. **查看题目详情** - 弹窗显示完整的题目信息
5. **继续抽题** - 可以重复抽取不同题目

## 🔧 自定义配置

### 添加新题目
在 `src/data/examData.js` 中添加：

```javascript
export const examData = {
  '新技能类型': {
    '简单': {
      '第X题': {
        id: 'unique-id',
        question: '题目内容',
        type: '题目类型',
        time: '建议时间',
        icon: '📝'
      }
    }
  }
}
```

### 调整动画速度
在 `ExamSlotMachine.vue` 中修改：

```javascript
// 动画间隔时间
setTimeout(animate, 100)  // 滚动间隔

// 总抽题时间
setTimeout(() => {
  stopColumnAnimation(columnIndex, result, onComplete)
}, 1500) // 1.5秒后停止
```

## 🎯 系统优势

### 减压效果
- **游戏化界面**：降低考试紧张感
- **视觉吸引力**：分散注意力，减少焦虑
- **随机性**：增加趣味性和公平性
- **互动体验**：主动参与感增强

### 实用性
- **题目覆盖全面**：多技能、多难度、多类型
- **信息展示清晰**：题目、类型、时间一目了然
- **操作简单直观**：一键抽题，一键重抽
- **扩展性良好**：易于添加新题目和新类型

## 📈 扩展建议

### 功能增强
- **题目收藏**：标记重要题目
- **答题记录**：记录答题历史
- **难度筛选**：按需选择难度范围
- **类型过滤**：专项练习特定技能
- **时间提醒**：答题倒计时功能

### 数据优化
- **题目标签**：添加更多分类标签
- **难度评分**：数值化难度评估
- **关联推荐**：相关题目推荐
- **统计分析**：答题数据统计

### 界面优化
- **主题切换**：多种视觉主题
- **动画设置**：动画开关和速度调节
- **音效支持**：滚动和结果音效
- **全屏模式**：沉浸式答题体验

## 🎪 使用场景

### 考试准备
- **模拟抽题**：提前熟悉抽题流程
- **随机练习**：避免定向复习偏见
- **压力适应**：通过游戏化降低紧张感

### 团队建设
- **团队游戏**：增加团队互动趣味
- **技能评估**：多维度能力考察
- **培训活动**：寓教于乐的培训形式

### 日常使用
- **技能自测**：定期自我评估
- **学习计划**：根据结果制定学习计划
- **知识复习**：碎片时间快速复习

## 🤝 贡献指南

欢迎提交 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

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🙏 致谢

- 感谢梁宁老师的产品思维课程
- 感谢 Vue.js 和 Tailwind CSS 社区
- 感谢所有为这个项目做出贡献的开发者

---

**希望这个抽题系统能让您的考试变得更加轻松有趣！🎯✨**

如有问题或建议，欢迎在 GitHub 上提交 Issue。