# 学科引擎SubjEngine

**Repository Path**: codekpy/subj-engine

## Basic Information

- **Project Name**: 学科引擎SubjEngine
- **Description**: 概述：EduTools 是一套面向高中教学的交互式网页教材与实验演示集合，包含物理、化学等学科的可视化模拟与教学工具。
特点：基于轻量 HTML/CSS/JavaScript（使用 Tailwind 等工具），界面响应式、交互友好、参数可调，便于课堂演示与学生自主探索。
目标受众：高中教师与学生，也适合作为教材补充与课堂实验预习资源。
贡献与部署：源码友好、便于扩展，欢迎加入项目
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: https://subj-engine.cloudroo.top/
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 3
- **Created**: 2025-12-13
- **Last Updated**: 2026-04-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SubjEngine (学科引擎)

> 探索学科的无限可能 | Explore the Infinite Possibilities of Subjects

这是一个聚合学科模拟动画的轻量级静态网站，旨在将各类学科仿真/演示页面集中展示，让知识可视化，让学习更生动。

## ✨ 特性

- 🎯 **多学科覆盖**: 支持物理、化学、数学等学科的交互式模拟
- 🎨 **现代化 UI**: 采用 Tailwind CSS 构建，玻璃态设计，流畅动画
- 🔍 **智能搜索**: 支持关键词、标签、学科、阶段多维度筛选
- ⭐ **收藏功能**: 本地存储收藏项目，方便快速访问
- 📥 **下载功能**: 支持单文件或 ZIP 包下载，离线使用
- 🎬 **Canvas 录制**: 内置录屏组件，支持视频导出
- 📱 **响应式设计**: 完美适配桌面、平板、手机

## 📁 目录结构

```
EduTools/
├── index.html                  # 首页（水平滚动 + 瀑布流展示）
├── viewer.html                 # 统一查看页面（iframe 嵌套加载）
├── list.json                   # 动画条目数据
├── author.json                 # 创作者信息
├── plan.md                     # 项目开发计划
├── task.md                     # 任务进度管理
├── prompt.md                   # 开发指南
├── tools/
│   └── editor.html            # 浏览器端编辑器
├── static/
│   ├── css/                   # 样式文件
│   ├── js/                    # 脚本文件（Tailwind、MathJax 等）
│   ├── fonts/                 # 字体文件
│   ├── img/                   # 图片资源
│   └── webfonts/              # Web 字体
├── Physics/                   # 物理模拟演示
├── Chemistry/                 # 化学模拟演示
│   └── virtual-lab/          # 化学虚拟实验室
└── Math/                      # 数学模拟演示
```

## 🚀 快速开始

### 本地预览

使用 Python 快速启动 HTTP 服务器：

```powershell
cd 'f:\program\StarBit\code\EduTools'
python -m http.server 8000
# 浏览器打开 http://localhost:8000/
```

或使用 npx：

```powershell
npx http-server -p 8000
```

### 访问页面

- **首页**: `http://localhost:8000/`
- **编辑器**: `http://localhost:8000/tools/editor.html`
- **查看页面**: `http://localhost:8000/viewer.html?demo=Physics/lorentz-force-circular-motion.html`

## 📊 数据格式

### list.json 条目格式

```json
{
  "name": "洛伦兹力圆周运动演示",
  "link": "Physics/lorentz-force-circular-motion.html",
  "summary": "演示带电粒子在匀强磁场中受洛伦兹力作用做匀速圆周运动",
  "author": "CodeKpy-豆包",
  "contact": "codekpy@foxmail.com",
  "time": "2026-04-12",
  "subject": "物理",
  "grade": "XB2",
  "tags": ["洛伦兹力", "圆周运动", "磁场", "带电粒子", "电磁学"]
}
```

**字段说明：**
- `name`: 项目名称
- `link`: 演示文件路径（相对于项目根目录）
- `summary`: 项目简介
- `author`: 作者名称
- `contact`: 联系方式（邮箱）
- `time`: 创建/更新时间
- `subject`: 所属学科（物理/化学/数学）
- `grade`: 适用阶段（如：B1-必修一，XB2-选必修二）
- `tags`: 标签数组（用于搜索和分类）

### author.json 创作者格式

```json
{
  "name": "CodeKpy",
  "avatar": "https://q1.qlogo.cn/g?b=qq&nk=1942171924&s=100",
  "bio": "前端开发，专注于 Web 动画和交互设计",
  "contact": {
    "github": "https://gitee.com/codekpy",
    "email": "codekpy@foxmail.com"
  },
  "contribution": "负责项目的前端架构设计和动画效果实现"
}
```

## 🎓 学科分类

### 物理 (Physics)
- 电磁学：洛伦兹力、电场线、电磁感应
- 力学：力的合成与分解、万有引力
- 光学：透镜成像、双缝干涉
- 热学：气体分子运动
- 运动学：匀变速直线运动、平抛运动

### 化学 (Chemistry)
- 化学反应速率
- 虚拟实验室（仪器拖拽、试剂混合、反应模拟）

### 数学 (Math)
- 数列可视化
- 反比例函数

## 🛠️ 技术栈

- **前端框架**: 原生 HTML/CSS/JavaScript
- **样式库**: [Tailwind CSS](https://tailwindcss.com/) (本地文件)
- **图标库**: [Font Awesome](https://fontawesome.com/) (本地文件)
- **数学公式**: [MathJax](https://www.mathjax.org/)
- **图形绘制**: HTML5 Canvas API
- **录制功能**: MediaRecorder API
- **ZIP 打包**: JSZip (CDN)

## 🎯 核心功能

### 1. 首页展示
- **水平滚动区**: 两排相向滚动的推荐项目
- **瀑布流区**: 按学科分组的筛选结果
- **标签云**: 热门标签快速筛选
- **搜索筛选**: 关键词、学科、阶段多维度过滤

### 2. 统一查看页面 (viewer.html)
- **URL 参数**: `viewer.html?demo=路径`
- **iframe 加载**: 动态加载演示页面
- **项目信息**: 显示名称、作者、学科等
- **下载功能**: 单文件或 ZIP 包下载
- **导航功能**: 上一个/下一个/相关推荐

### 3. 收藏系统
- **本地存储**: localStorage 持久化
- **收藏标签页**: 快速访问收藏项目
- **收藏按钮**: 卡片右上角快捷操作

### 4. Canvas 录制
- **录制控制**: 开始/停止/下载
- **格式选择**: WebM/MP4/GIF
- **视频裁剪**: 设置起始/结束时间

## 📝 贡献指南

### 添加新演示

1. **创建演示文件**: 在对应学科目录下创建 HTML 文件
2. **更新 list.json**: 添加新条目信息
3. **提交 PR**: 通过 Gitee 提交 Pull Request

### 使用编辑器

1. 打开 `tools/editor.html`
2. 加载当前 `list.json`
3. 在浏览器中编辑条目
4. 导出 JSON 文件
5. 替换本地 `list.json` 并提交

### Git 工作流

```powershell
# 克隆仓库
git clone https://gitee.com/codekpy/subj-engine.git

# 添加修改
git add list.json
git add Physics/your-demo.html

# 提交更改
git commit -m "feat: 添加新的物理演示项目"

# 推送代码
git push
```

## 🌟 项目亮点

### 1. 化学虚拟实验室
- **14 种仪器**: 烧杯、试管、锥形瓶、酒精灯等
- **16 种试剂**: 酸、碱、盐、指示剂、金属
- **实时反应**: 颜色变化、气泡、沉淀、温度变化
- **预设实验**: 8 个经典化学实验场景

### 2. 物理模拟矩阵
- **电磁学系列**: 洛伦兹力、电场线、电磁流量计
- **光学系列**: 透镜成像、双缝干涉
- **热学系列**: 气体分子速率分布
- **运动学系列**: 匀变速、自由落体、平抛运动

### 3. 数学可视化
- **数列动画**: 等差/等比数列可视化
- **函数图像**: 反比例函数动态演示

## 📚 开发文档

- **plan.md**: 项目整体计划和架构设计
- **task.md**: 详细任务进度和完成记录
- **prompt.md**: 开发指南和代码模板

## 🔗 相关链接

- **Gitee 仓库**: https://gitee.com/codekpy/subj-engine.git
- **联系我们**: codekpy@foxmail.com

## 👥 创作者

感谢每一位贡献者的辛勤付出：

- **CodeKpy**: 前端架构设计和动画实现
- **资深小白程序员**: 电场线演示项目
- **郑老师**: 洛伦兹力系列演示项目

## 📄 许可证

遵循仓库内 [LICENSE](LICENSE) 文件规定。

## 🙏 致谢

### 开源项目
- **Tailwind CSS**: 现代化 CSS 框架
- **Font Awesome**: 图标库
- **MathJax**: 数学公式渲染

### 教育机构
感谢所有支持本项目的学校和教育机构。

---

**SubjEngine · 让知识可视化，让学习更生动**