点名器

点名器是一款基于Next.js的Web应用，用于课堂或会议中随机抽取人员。应用支持名单管理、历史记录保存、避免重复抽取等功能，并提供了简洁直观的用户界面。

可通过以下链接使用在线版本：https://roll-call.mcjiaozi.com

功能特点

• 随机点名：从名单中随机抽取人员，支持避免重复抽取功能
• 名单管理：可编辑、导入导出名单，支持TXT和Excel格式
• 历史记录：保存所有抽取记录，可随时查看和清除
• 设置选项：支持开启/关闭"尽量减少重复"功能
• 数据持久化：所有数据保存在浏览器本地存储，刷新页面不丢失

使用方法

1. 添加名单：点击"编辑"按钮，可直接输入名单或从文件导入
2. 开始点名：点击"随机点名"按钮进行抽取
3. 查看历史：在"历史记录"卡片中查看所有抽取记录
4. 清除数据：可单独清除历史记录或循环集合，也可清除所有数据

技术实现

• 前端框架：Next.js
• 状态管理：React useState和useRef
• 样式：Tailwind CSS
• 文件处理：xlsx库处理Excel文件，File API处理文本文件
• 数据存储：使用LocalStorage实现数据持久化

项目结构

src/
  ├── app/
  │   ├── page.tsx        # 主页面
  │   └── 
  └── components/
      ├── buttons.tsx     # 按钮组件
      └── prompt-box.tsx  # 弹窗组件
      └── textarea.tsx    # 自定义文本输入组件

开发与部署

本地开发与运行

1. 安装依赖：npm install
2. 启动开发服务器：npm run dev
3. 构建生产版本：npm run build
4. 运行生产版本：npm run start

容器化部署

1. 构建镜像：docker build -t roll-call .
2. 运行容器：docker run -p 3000:3000 roll-call