一款简洁、现代且功能强大的随机点名工具。
由 Next.js, shadcn/ui, 和 Tailwind CSS 驱动。
语言 / Languages: 简体中文 | English
- 现代技术栈: 基于 Next.js (App Router), React, 和 TypeScript 构建,保证了项目的可维护性和扩展性。
- 优雅的 UI: 使用 shadcn/ui 和 Tailwind CSS 精心构建,提供美观、一致且响应式的用户界面。
- 强大的功能:
- 双模式选择: 支持 学号范围 和 TXT 文件名单导入 两种模式。
- 高级选项: 提供“瞬间模式”和“不允许重复”等高级功能。
- 多语言支持: 内置多种语言切换,轻松扩展更多语言。
- 静态导出: 支持完全静态导出,可以轻松部署到任何静态网站托管平台(如 Vercel, GitHub Pages, Netlify 等)。
-
克隆仓库
git clone https://github.com/aiwandiannaodelele/ClassPicker.git cd ClassPicker -
安装依赖
npm install
-
启动开发服务器
npm run dev
现在,在浏览器中打开
http://localhost:3000即可看到正在运行的应用。
-
构建静态文件
npm run build
这个命令会生成一个
out文件夹,其中包含了所有可以独立部署的 HTML, CSS, 和 JavaScript 文件。 -
本地预览 您可以使用任何静态文件服务器来预览构建结果。例如,使用
http-server:npx http-server out
-
部署 将
out文件夹中的所有内容上传到您选择的任何静态托管服务即可。
如果您已安装 Docker,可以轻松地使用 Docker Compose 构建和运行应用。
-
构建并启动容器
docker-compose up --build
-
访问应用 在浏览器中打开
http://localhost:3000。 -
停止容器
docker-compose down
.
├── app/ # Next.js App Router 核心目录
│ ├── page.tsx # 主页面组件
│ ├── layout.tsx # 根布局
│ ├── globals.css # 全局样式
│ ├── favicon.ico # 网站图标
│ └── manifest.ts # PWA manifest 配置
├── components/ # React 组件
│ ├── ui/ # shadcn/ui 组件目录 (如 button, dialog, input 等)
│ └── ... # 其他自定义组件 (如 AppInitializer, TitleBar 等)
├── contexts/ # React Contexts
│ └── LanguageContext.tsx # 语言上下文
├── hooks/ # 自定义 React Hooks
│ └── useLocalStorage.ts # 用于本地存储的 Hook
├── lib/ # 工具函数和配置文件
│ ├── fonts.ts # 字体配置
│ ├── i18n.ts # 国际化翻译文本与配置
│ ├── tauri.d.ts # Tauri 类型定义
│ └── utils.ts # 通用工具函数 (如 cn)
├── public/ # 静态资源目录
│ ├── manifest.json # PWA manifest 文件
│ ├── sw.js # Service Worker 文件
│ ├── sounds/ # 音效文件
│ └── ... # 其他静态图片、图标等资源
├── next.config.ts # Next.js 配置文件
├── tailwind.config.ts # Tailwind CSS 配置文件
├── tsconfig.json # TypeScript 配置文件
├── package.json # 包管理配置文件
└── ... # 其他配置文件 (如 .eslintrc.js, postcss.config.mjs 等)
本项目采用 AGPL v3 license。欢迎任何形式的贡献和建议!
✨ 使用 ClassPicker,让随机选择变得前所未有的简单和愉悦!