# Virtual- Simulation _Project

**Repository Path**: geekit/virtual--simulation-_-project

## Basic Information

- **Project Name**: Virtual- Simulation _Project
- **Description**: 虚拟仿真实训教学平台
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-08-07
- **Last Updated**: 2026-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 虚拟仿真实训教学平台--仓库说明

基于 React + TypeScript + Vite 构建的现代化虚拟仿真实训教学平台，支持多端适配。

## 技术栈

### 核心框架
- **前端框架**: React 18 + TypeScript
- **构建工具**: Vite
- **UI组件库**: Ant Design
- **状态管理**: Redux Toolkit
- **路由管理**: React Router (Hash路由)
- **样式处理**: Sass

### 数据可视化
- **图表库**: ECharts 5.6.0
- **数据展示**: 支持线图、柱图、饼图、仪表盘等多种图表类型
- **实时监控**: 系统负载、用户活跃度、学习进度等数据可视化

### 3D渲染与交互
- **3D渲染**: React Three Fiber + Three.js
- **3D模型**: 支持GLTF/GLB格式模型加载与预览
- **Unity集成**: React Unity WebGL

### 文档处理
- **PDF预览**: 内嵌PDF文档在线预览
- **Excel处理**: XLSX库支持Excel文件导入导出
- **批量操作**: 支持学生信息批量导入、数据模板下载

## 功能特性

### 🔐 多角色登录系统
- 管理员、教师、学生、游客四种角色
- 动态权限分配与界面适配
- 角色相关的功能权限控制

### 🏠 系统首页
- 响应式导航栏设计
- 轮播展示核心功能模块
- 特色功能卡片展示

### 🎮 虚拟实训区
- **钢结构材料认识**: Unity WebGL交互式学习
- **钢结构连接技术**: 3D连接节点模型展示
- **钢结构构件制作**: 制作工艺流程仿真
- **钢结构安装技术**: 安装过程虚拟演练
- **钢结构施工管理**: 施工管理系统仿真
- **Unity WebGL**: 高质量3D场景集成

### 📊 数据可视化
- **实时监控**: ECharts实现系统状态实时监控
- **学习统计**: 用户学习行为数据分析
- **进度跟踪**: 可视化学习进度展示
- **成绩分析**: 班级成绩对比与趋势分析

### 📚 学习资源库
- **PDF课件**: 在线预览建筑设计图纸、技术文档
- **教学视频**: MP4格式视频在线播放
- **3D模型预览**: 基于React Three Fiber的钢结构模型交互展示
- **测试题库**: 多类型题目管理与在线测试
- **资源分类**: 按类型智能分类展示

### 👨‍💼 管理功能
- **管理员控制台**: 
  - ECharts数字看板：实时数据可视化展示
  - 用户管理：多角色权限分配
  - 系统监控：CPU、内存、网络状态实时监控
  - 资源审核：教学资源审核管理
- **教师管理**: 
  - 学生管理：支持Excel批量导入学生信息
  - 数据统计：班级成绩对比、学习活跃度分析
  - 课程管理：教学资源上传与管理
- **学生个人中心**: 
  - 学习进度：可视化进度跟踪
  - 在线测试：多类型题目测试系统
  - 成绩查询：考试成绩统计分析

## 项目结构

```
src/
├── components/          # 公共组件
│   ├── Layout/         # 主布局组件
│   ├── UnityPlayer/    # Unity WebGL播放器
│   ├── QuestionBank/   # 题库组件
│   ├── TestInterface/  # 测试界面组件
│   └── LoadingTransition/ # 加载过渡组件
├── pages/              # 页面组件
│   ├── Login/          # 登录页
│   ├── Home/           # 首页
│   ├── VirtualTraining/ # 虚拟实训区
│   ├── ResourceLibrary/ # 学习资源库
│   ├── Dashboard/      # 管理员控制台（ECharts数据可视化）
│   ├── Management/     # 教师管理（Excel导入导出）
│   ├── PersonalCenter/ # 学生个人中心
│   ├── UserManagement/ # 用户管理
│   ├── ResourceAudit/  # 资源审核
│   └── SystemNotice/   # 系统公告
├── data/               # 数据模块
│   ├── questionBanks.ts # 题库数据
│   └── testModules.ts  # 测试模块数据
├── hooks/              # React Hooks
│   └── useSystemStatus.ts # 系统状态Hook
├── store/              # Redux状态管理
│   ├── authSlice.ts    # 认证状态
│   └── index.ts        # Store配置
├── styles/             # 全局样式
│   ├── global.scss     # 全局样式
│   ├── variables.scss  # 样式变量
├── types/              # TypeScript类型定义
│   ├── index.ts        # 基础类型
│   ├── question.ts     # 题库类型
│   └── unity.ts        # Unity相关类型
└── utils/              # 工具函数
    ├── router.tsx      # 路由配置
    ├── unityLoader.ts  # Unity加载器
    ├── testUtils.ts    # 测试工具
    └── systemInit.ts   # 系统初始化

public/
├── pdf/                # PDF文档资源
│   ├── 内蒙古建筑职业技术学院新校区三期西教学楼实训区综合实习工厂.pdf
│   ├── 平面及立面图.pdf
│   └── 总平面图.pdf
├── unity/              # Unity WebGL构建文件
│   ├── material/       # 材料认识模块
│   ├── connection/     # 连接技术模块
│   ├── fabrication/    # 构件制作模块
│   ├── installation/   # 安装技术模块
│   └── management/     # 施工管理模块
├── models/             # 3D模型文件
│   ├── steel-structures/ # 钢结构模型
│   ├── connections/    # 连接节点模型
│   └── components/     # 构件模型
└── videos/             # 教学视频资源
    ├── demonstrations/ # 演示视频
    ├── lectures/       # 讲座视频
    └── tutorials/      # 教程视频
```

## 快速开始

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

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

### 构建生产版本
```bash
npm run build
```

## 演示账号

| 角色 | 用户名 | 密码 | 说明 |
|------|--------|------|------|
| 管理员 | admin | admin123 | 系统管理员权限 |
| 教师 | teacher | teacher123 | 教师管理权限 |
| 学生 | student | student123 | 学生学习权限 |
| 游客 | guest | guest123 | 访客浏览权限 |

## 响应式设计

项目采用移动优先的响应式设计策略：
- 移动端: < 768px
- 平板端: 768px - 1024px  
- 桌面端: > 1024px

## Unity WebGL 集成

虚拟实训区支持Unity WebGL场景加载，需要：
1. 将Unity项目构建为WebGL格式
2. 将构建文件放置在 `public/unity/` 目录下
3. 配置对应的模块路径

## 数据可视化配置

### ECharts图表类型
- **线性图**: 仿真实验趋势分析
- **饼图**: 用户类型分布统计
- **柱状图**: 系统资源使用监控
- **仪表盘**: 实时系统负载显示
- **响应式设计**: 支持移动端自适应

### 图表数据源
- 实时用户在线数据
- 学习进度统计数据
- 系统性能监控数据
- 资源使用情况统计

## 文档处理功能

### PDF文档支持
- **在线预览**: 支持建筑图纸、技术文档在线查看
- **全屏模式**: 提供全屏预览体验
- **文档类型**: 支持综合实习工厂设计、平面立面图等

### Excel数据处理
- **批量导入**: 支持学生信息Excel批量导入
- **模板下载**: 提供标准化导入模板
- **数据验证**: 导入数据格式验证与错误提示
- **导出功能**: 支持学习数据Excel格式导出

## 开发说明

### 添加新页面
1. 在 `src/pages/` 下创建页面组件
2. 在 `src/utils/router.tsx` 中添加路由配置
3. 根据需要更新导航菜单

### ECharts数据可视化开发
- 使用 `import * as echarts from 'echarts'` 导入
- 支持响应式设计，需要监听 `resize` 事件
- 图表配置示例：
  ```typescript
  const chart = echarts.init(chartRef.current);
  chart.setOption({
    title: { text: '数据统计', left: 'center' },
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [{ data: [120, 200, 150], type: 'line' }]
  });
  ```

### PDF文档处理
- PDF文件放置在 `public/pdf/` 目录下
- 使用 `<iframe>` 标签实现在线预览
- 支持全屏模式和响应式尺寸调整

### Excel数据处理
- 使用 `xlsx` 库处理Excel文件
- 批量导入示例：
  ```typescript
  import * as XLSX from 'xlsx';
  
  const handleImport = (file: File) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const data = new Uint8Array(e.target?.result as ArrayBuffer);
      const workbook = XLSX.read(data, { type: 'array' });
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      const jsonData = XLSX.utils.sheet_to_json(worksheet);
    };
    reader.readAsArrayBuffer(file);
  };
  ```
- 数据导出示例：
  ```typescript
  const exportData = (data: any[]) => {
    const ws = XLSX.utils.json_to_sheet(data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, 'export.xlsx');
  };
  ```

### 3D模型开发
- 使用React Three Fiber加载GLTF/GLB模型
- 模型文件放置在 `public/models/` 目录下
- 支持模型属性面板展示和交互操作

### Unity WebGL集成
- Unity构建文件放置在 `public/unity/` 目录下
- 使用 `react-unity-webgl` 库进行集成
- 支持多个实训模块的动态加载

### 样式开发
- 使用Sass预处理器
- 全局变量定义在 `src/styles/variables.scss`
- 组件样式采用模块化管理
- 支持工业风主题样式

### 状态管理
- 使用Redux Toolkit进行状态管理
- 在 `src/store/` 下创建对应的slice
- 在 `src/store/index.ts` 中注册reducer

### 数据管理
- 题库数据存放在 `src/data/questionBanks.ts`
- 测试模块配置在 `src/data/testModules.ts`
- 支持多种题型：单选、多选、判断、填空

## 技术亮点

### 📊 数据可视化
- **ECharts 5.6.0**: 专业级数据可视化库，支持多种图表类型
- **实时监控**: 系统负载、用户活跃度、学习进度实时显示
- **响应式设计**: 图表自适应不同屏幕尺寸

### 📄 文档处理
- **PDF在线预览**: 支持建筑图纸、技术文档直接在线查看
- **Excel数据处理**: XLSX库实现批量导入导出功能
- **数据验证**: 完善的数据格式验证机制

### 🎮 3D交互体验
- **React Three Fiber**: 高性能3D渲染引擎
- **Unity WebGL**: 专业级虚拟仿真环境
- **模型交互**: 支持模型旋转、缩放、属性查看

### 🛠️ 工程化特性
- **TypeScript**: 全面类型安全保障
- **模块化架构**: 组件化开发，代码可维护性强
- **响应式设计**: 移动优先，多端适配
- **性能优化**: Vite构建工具，开发体验优秀

## 部署说明

### 生产环境部署
```bash
# 构建生产版本
npm run build

# 部署到静态文件服务器
# 将 dist/ 目录下的文件上传到服务器
```

### 环境要求
- **Node.js**: >= 16.0.0
- **npm**: >= 8.0.0
- **内存**: >= 4GB（开发环境）
- **磁盘空间**: >= 2GB（包含3D模型和Unity资源）

### 性能优化
- 使用CDN加速静态资源加载
- 开启Gzip压缩减少传输大小
- 配置浏览器缓存策略
- Unity WebGL资源建议使用单独的CDN

## 浏览器支持

- Chrome >= 88
- Firefox >= 78
- Safari >= 14
- Edge >= 88
- **推荐**: Chrome/Edge 最新版本（更好的WebGL支持）

## 许可证

MIT License