# schulte-grid

**Repository Path**: Twilight-Fanyi/schulte-grid

## Basic Information

- **Project Name**: schulte-grid
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-30
- **Last Updated**: 2025-06-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 舒尔特方格训练器 (Schulte Grid Trainer)

一个基于Vue3的舒尔特方格注意力训练应用。通过有趣的数字寻找游戏来提升注意力和视觉搜索能力。

## 🌟 特性

- 💫 流畅的动画效果
- 📱 响应式设计，支持多设备
- ⏱️ 实时计时功能
- 🎯 即时反馈机制
- 🎨 现代简约UI设计
- 🔄 一键重置功能

## 🛠️ 技术栈

- Vue 3
- TypeScript
- Vite
- CSS3

## 📦 安装

1. 克隆仓库
```bash
git clone https://gitee.com/Twilight-Fanyi/schulte-grid.git
cd schulte-grid
```

2. 安装依赖
```bash
npm install
```

3. 启动开发服务器
```bash
npm run dev
```

4. 构建生产版本
```bash
npm run build
```

## 🎮 使用方法

1. 访问应用（默认地址：http://localhost:3000）
2. 观察数字矩阵
3. 按照1-N²的顺序点击数字
4. 完成后查看用时
5. 点击"重新开始"按钮开始新一轮训练

## 🎯 游戏规则

- 从1开始，按照数字顺序依次点击
- 点击正确数字时会显示成功提示
- 点击错误数字会有错误提示
- 计时从第一次点击开始
- 找到所有数字后显示总用时

## 💻 项目结构

```
schulte-grid/
├── src/
│   ├── components/
│   │   └── SchulteGrid.vue
│   ├── styles.css
│   ├── App.vue
│   └── main.ts
├── public/
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.js
```

## 🔧 开发环境

- Node.js >= 16
- npm >= 7
- 现代浏览器（支持ES6+）

## 📝 开发说明

- 使用Vue3 Composition API开发
- 采用TypeScript确保类型安全
- 使用CSS Grid实现响应式布局
- 通过CSS变量管理主题样式
- 实现了完整的游戏状态管理

## 🎨 自定义主题

通过修改CSS变量来自定义主题颜色：

```css
:root {
  --color-primary: #4f46e5;
  --color-secondary: #f59e0b;
  --color-success: #10b981;
  --color-error: #ef4444;
}
```

## 📱 响应式设计

应用采用移动优先的响应式设计，支持各种屏幕尺寸：

- 移动设备（< 640px）
- 平板设备（640px - 1024px）
- 桌面设备（> 1024px）

## 🚀 性能优化

- 使用Vue3响应式系统
- 采用CSS硬件加速
- 优化动画性能
- 合理使用计算属性
- 实现状态缓存

## 📄 许可证

[MIT](LICENSE)

## 🤝 贡献指南

1. Fork 项目
2. 创建特性分支
3. 提交更改
4. 推送到分支
5. 提交Pull Request

## 🙏 致谢

- Vue.js团队提供的出色框架
- Vite团队的高效构建工具
- 所有项目贡献者

## 📞 联系方式

如有问题或建议，欢迎提交Issue或Pull Request。

---

希望这个项目能帮助你提升注意力和专注力！


![演示](images/image_01.jpeg)