# computer-lab-reasign

**Repository Path**: yldj-it/computer-lab-reasign

## Basic Information

- **Project Name**: computer-lab-reasign
- **Description**: 机房座位安排
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-09
- **Last Updated**: 2026-07-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 机房排座系统 (Computer Lab Seating)

专为学校机房设计的智能排座管理系统，支持拟物化布局编辑、智能编号、拖拽排座、投屏展示等功能。

## ✨ 功能特点

- **拟物化编辑器**：3D 质感网格布局，支持座位、过道、柱子、讲台、座位冻结
- **智能编号**：支持横向 (ROW_LTR)、纵向 (COL_TTB)、蛇形 (SNAKE) 三种路径自动编号
- **学生管理**：Excel/CSV 名单导入，支持转学/离开状态标记
- **拖拽排座**：学生互换、移位，支持 Ctrl+Z 撤销
- **投屏模式**：高对比度大字视图，实时姓名搜索定位（呼吸灯动效）
- **操作日志**：自动记录所有排座操作，支持审计追溯
- **多租户**：NextAuth 用户认证，数据按用户隔离
- **分享链接**：生成只读链接，方便学生查看座位
- **暗黑模式**：支持系统级 Dark Mode 切换
- **布局导出**：支持导出高清 PNG 图片、JSON 配置文件

## 🛠️ 技术栈

| 类别 | 技术 |
|------|------|
| 框架 | Next.js 16.2.2 (App Router) |
| 语言 | TypeScript |
| 样式 | Tailwind CSS 4 |
| 状态管理 | Zustand |
| 拖拽 | @dnd-kit/core + @dnd-kit/sortable |
| 数据库 | Prisma 6.4.1 + MySQL |
| UI 组件 | shadcn/ui (base-nova 风格) |
| 认证 | NextAuth.js |
| 文件解析 | xlsx |

## 🚀 快速开始

### 环境要求

- Node.js 18+
- MySQL 5.7+ (端口 3306)

### 安装步骤

```bash
# 1. 克隆仓库
git clone git@gitee.com:yldj-it/computer-lab-reasign.git
cd computer-lab-reasign

# 2. 安装依赖
npm install

# 3. 配置环境变量
cp .env.example .env  # 或手动创建 .env 文件
# 编辑 .env 文件，配置数据库连接等

# 4. 创建数据库
mysql -u root -p -e "source scripts/init_mysql.sql"

# 5. 初始化 Prisma
npx prisma generate    # 生成 Prisma 客户端
npx prisma db push     # 同步表结构到数据库

# 6. 启动开发服务器
npm run dev
```

访问 http://localhost:3000 开始使用。

### 环境变量配置

在项目根目录创建 `.env` 文件：

```env
# 数据库连接 (格式: mysql://用户名:密码@主机:端口/数据库名)
DATABASE_URL="mysql://root:password@localhost:3306/computer_lab_seating"

# NextAuth 配置
NEXTAUTH_SECRET="your_random_secret_here"  # 使用 openssl rand -base64 32 生成
NEXTAUTH_URL="http://localhost:3000"

# 管理员账号 (可选)
ADMIN_USERNAME=admin
ADMIN_PASSWORD=admin123
```

## 📁 项目结构

```
computer-lab-reasign/
├── prisma/
│   ├── schema.prisma      # 数据库模型定义
│   ├── migrations/        # 数据库迁移文件
│   └── generated/         # Prisma 生成的客户端
├── src/
│   ├── app/               # App Router 路由页面
│   │   ├── editor/        # 机房布局编辑器
│   │   ├── seating/       # 排座执行页面
│   │   ├── projection/    # 投屏模式
│   │   ├── share/         # 分享链接
│   │   ├── auth/          # 认证页面
│   │   └── api/           # API 路由
│   ├── components/        # 可复用 UI 组件
│   │   ├── editor/        # 编辑器组件
│   │   ├── seating/       # 排座组件
│   │   ├── ui/            # shadcn/ui 基础组件
│   │   └── auth/          # 认证组件
│   ├── store/             # Zustand 状态管理
│   │   ├── useLayoutStore.ts   # 编辑器状态
│   │   ├── useSeatingStore.ts  # 排座状态
│   │   ├── useThemeStore.ts    # 主题配置
│   │   └── utils.ts            # 自动编号算法
│   └── lib/               # 工具函数
│       ├── prisma.ts      # Prisma 客户端单例
│       ├── auth.ts        # NextAuth 配置
│       └── utils.ts       # 通用工具
├── scripts/               # 调试脚本
│   ├── init_mysql.sql      # 初次安装建库 SQL
│   └── check_*.ts/js       # 数据检查脚本
├── public/                # 静态资源
├── .env                   # 环境变量
├── .env.example           # 环境变量示例
├── package.json
└── tsconfig.json
```

## 📖 开发指南

### 可用命令

```bash
# 开发
npm run dev          # 启动开发服务器 (localhost:3000)
npm run build        # 生产环境构建
npm run start        # 启动生产服务器
npm run lint         # ESLint 代码检查

# 数据库
mysql -u root -p -e "source scripts/init_mysql.sql"  # 创建数据库
npx prisma generate  # 重新生成 Prisma 客户端
npx prisma db push   # 同步表结构到数据库
npx prisma studio    # 打开数据库管理界面

# 调试脚本
npx tsx scripts/check_layouts.ts    # 检查布局数据
npx tsx scripts/check_sessions.ts   # 检查排座方案
npx tsx scripts/check_users.js      # 检查用户数据
```

### UI 开发规范

- **拟物化样式**：座位组件必须保持 `border-b-4` 的立体深度感
- **空位处理**：使用 `opacity-40` 样式
- **消息提示**：严禁使用 `alert()`，使用 `toast` 反馈
  ```typescript
  toast.success("操作成功")
  toast.error("操作失败")
  toast.info("提示信息")
  ```
- **确认弹窗**：使用 `@/components/ui/dialog` 组件

### 核心路由

| 路由 | 功能 |
|------|------|
| `/` | 重定向到 `/editor` |
| `/editor` | 机房布局编辑器 |
| `/seating` | 排座执行页面 |
| `/projection` | 投屏模式 |
| `/share/[id]` | 分享链接（只读） |
| `/auth/signin` | 登录页面 |

## 🗄️ 数据库模型

### 核心模型

- **User** - 用户/教师（支持 ADMIN/USER 角色）
- **Layout** - 机房布局（rows×cols 网格配置）
- **Class** - 班级
- **Student** - 学生（支持 active/transferred 状态）
- **SeatingSession** - 排座方案（连接 Layout 和 Class）
- **SeatLog** - 操作日志

### 数据库操作

```bash
# 修改 schema 后必须执行
npx prisma generate    # 重新生成客户端
npx prisma db push     # 同步到数据库

# 查看数据
npx prisma studio      # 数据库管理界面
```

## 🚢 部署说明

### 生产环境构建

```bash
npm run build
npm start
```

### Vercel 部署

1. 在 Vercel 中导入项目
2. 配置环境变量（DATABASE_URL、NEXTAUTH_SECRET 等）
3. 确保数据库可访问
4. 部署

### 本地服务器部署

```bash
# 构建
npm run build

# 启动生产服务器
npm start

# 或使用 PM2
npm install -g pm2
pm2 start npm --name "computer-lab" -- start
```

## 👤 测试账号

系统采用"登录即注册"策略，首次登录会自动创建账号。

### 默认管理员

- **用户名**：`admin`
- **密码**：`admin123`

或使用环境变量配置：
```env
ADMIN_USERNAME=admin
ADMIN_PASSWORD=admin123
```

### 登录规则

- 支持任意合法的用户名/密码
- 首次登录自动创建账号
- 数据按用户隔离

## 🤝 贡献指南

### 开发流程

1. Fork 本仓库
2. 创建功能分支：`git checkout -b feature/your-feature`
3. 提交更改：`git commit -m 'feat: add some feature'`
4. 推送分支：`git push origin feature/your-feature`
5. 提交 Pull Request

### 提交规范

使用 Conventional Commits 规范：

- `feat:` 新功能
- `fix:` 修复 Bug
- `docs:` 文档更新
- `style:` 代码格式调整
- `refactor:` 重构
- `test:` 测试相关
- `chore:` 构建/工具链更新

## 📄 许可证

本项目采用 MIT 许可证。详见 [LICENSE](LICENSE) 文件。

## 📞 联系方式

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

- 提交 Issue
- 发送邮件至项目维护者

---

**机房排座系统** - 让排座更简单、更高效、更智能。