【Hello AI 科技致善】初中生用SOLO为乡村教师制作的全能教学平台

SOLO挑战赛专区
, ,
1

【Hello AI 科技致善】萤火学堂 —— 用 AI 点亮每一间乡村教室

① 摘要

面向乡村中小学教师，在日常备课、课堂教学、作业批改、学情分析等全教学环节中，提供「AI 辅助教案生成 + 虚拟教具箱 + 智能作业批改 + 学情数据可视化」的一站式教学助手平台。目前通过本地 Demo 模式验证，内置 6 大教学模块、22 个功能组件，支持 4 套主题色和深色模式，纯前端即可体验全部功能。

② 真实场景与需求

目标人群

乡村中小学教师——分布在全国各地乡村学校，承担着繁重的教学任务，却面临资源匮乏、缺乏教学辅助工具的困境。

痛点描述

备课环节：一位乡村数学老师想准备一节"分数的加减法"公开课，但手头只有一本教材和几份旧教案。她需要在网上搜索优质课件、设计教学流程、准备课堂练习，往往要花 3-4 个小时。而城里学校的老师有教研组共享资源库，半小时就能搞定。

课堂教学：乡村学校缺乏实验器材——物理课讲"光的折射"，没有棱镜；化学课讲"分子结构"，没有模型；地理课讲"中国地形"，只有一本平面地图。老师只能靠嘴讲，学生只能靠想象。

作业批改：一位老师带两个班共 80 个学生，每天要批改 80 份数学作业。机械性的批改工作占用了大量时间，真正需要关注的学生个体差异反而没有精力分析。

学情分析：月考结束后，老师只能看到平均分和排名，无法快速定位"哪些知识点是全班薄弱点"“哪些学生退步了需要关注”。缺乏数据支撑的教学决策，往往凭感觉走。

现有做法及不足

  • 手写备课：效率低，难以复用和分享

  • 借用城里学校的课件：与学生实际水平不匹配，需要大量修改

  • 纯人工批改作业：耗时长，无法给出个性化反馈

  • Excel 统计成绩：只能看总分和平均分，缺乏知识点维度的分析

  • 网上搜索教学资源：信息碎片化，质量参差不齐，筛选成本高

③ 作品介绍

萤火学堂（FireflyEdu） 是一款专为乡村教师打造的 AI 教学助手 Web 平台，涵盖教学全流程的 6 大核心模块：

:books: 备课教研

  • AI 教案生成：输入课题和年级，AI 自动生成完整教案框架，支持 Markdown 编辑与实时预览

  • 知识图谱可视化：以图形化方式展示知识点之间的关联，帮助教师梳理教学脉络

  • 幻灯片预览：快速预览课件效果

1000033820
10000338201920×1280 201 KB

1000033822
10000338221920×1280 177 KB

1000033821
10000338211920×1280 240 KB

:graduation_cap: 课堂授课

  • 虚拟教具箱：内置 6 个教学工具——几何画板、物理实验室、分子模型查看器、数学计算器、地理地图工具、节拍器

  • 互动测验：课堂实时检测学生掌握情况

  • 课堂脚本：预设教学流程，把控课堂节奏

1000033823
10000338231920×1280 225 KB

1000033825
10000338251920×1280 194 KB

1000033824
10000338241920×1280 179 KB

:memo: 作业测评

  • AI 智能批改：拍照上传作业，AI 辅助批改并生成反馈

  • 错题本：自动整理学生错题，精准定位薄弱环节

  • 班级学情分析：数据驱动教学改进

1000033827
10000338271920×1280 183 KB

1000033826
10000338261920×1280 177 KB

1000033828
10000338281920×1280 200 KB

:bar_chart: 学情分析

  • ECharts 可视化图表：成绩分布、趋势追踪、知识点掌握度等多维度数据展示

  • 班级对比分析：直观呈现班级整体表现

:busts_in_silhouette: 教师社区

  • 优秀教案分享：促进教师间的经验交流

  • 名师案例库：学习优秀教学实践

  • 评论互动：构建教师学习共同体

1000033830
10000338301920×1280 239 KB

:robot: AI 助手

  • 内置 AI 聊天抽屉，随时解答教学疑问

  • 支持多种 AI 格式：OpenAI、火山方舟（Volcengine）、Anthropic Claude

  • SSE 流式输出，实时获取 AI 响应

1000033836
10000338361920×1280 187 KB

其他特色

  • :artist_palette: 4 套主题色方案：萤火金、星空蓝、竹叶青、晨曦粉 + 浅色/深色/跟随系统显示模式

  • :electric_plug: 插件系统：支持用户自定义插件扩展功能

  • :gear: Demo 模式：无需后端服务器，打开浏览器即可体验全部功能

  • :mobile_phone: 响应式设计：适配电脑、平板、手机等多种设备

技术栈

| 类别 | 技术 |

|------|------|

| 前端框架 | Vue 3 + TypeScript |

| 构建工具 | Vite 8 |

| 状态管理 | Pinia 3 |

| 路由 | Vue Router 4 |

| UI 组件 | MDUI 2 |

| 图表 | ECharts 6 + Vue-ECharts |

| 样式 | SCSS + CSS 自定义属性（动态主题） |

| 后端（可选） | PHP，支持 SQLite / MySQL |

| 部署 | GitHub Pages / PHP 服务器 |

④ 用 SOLO 实现的过程

1. 任务拆解思路

整个项目从零开始，按照"先骨架后血肉"的思路逐步迭代：

第一阶段：基础框架搭建

  • 使用 SOLO 初始化 Vue 3 + TypeScript + Vite 项目

  • 搭建路由系统（9 个页面）、Pinia 状态管理、全局样式体系

  • 实现 AppLayout 布局（侧边栏 + 顶栏 + 内容区）

第二阶段：核心功能开发

  • 逐个实现 6 大模块：Dashboard、备课教研、课堂授课、作业测评、学情分析、教师社区

  • 每个模块拆解为多个子组件，通过 SOLO 对话逐步实现

  • 例如课堂授课模块拆解为：虚拟教具箱（6 个工具组件）+ 互动测验 + 课堂脚本

第三阶段：AI 集成与后端

  • 设计 AI 代理层，支持 OpenAI / 火山方舟 / Anthropic 三种格式

  • 实现 SSE 流式输出，让 AI 响应实时显示

  • 开发 PHP 后端（8 个文件），支持 SQLite/MySQL 双数据库

  • 实现插件系统、设置向导、管理后台

第四阶段：体验优化

  • 设计并实现 4 套主题色方案（每套 30+ 颜色变量 × 亮/暗双模式）

  • 创建 ThemePicker 组件，支持一键切换

  • 重构全局样式，移除所有硬编码颜色，全部使用 CSS 变量动态注入

  • 修复 TypeScript 构建错误（14 个文件，70+ 个错误）

  • 编写 README、配置 CI/CD（GitHub Actions 自动部署到 GitHub Pages）

2. 使用的 SOLO 能力

  • 代码生成：几乎所有 Vue 组件、TypeScript 类型、PHP 后端代码都通过 SOLO 对话生成

  • 架构设计：SOLO 帮助设计了 Demo/Pro 双模式架构、AI 代理层、插件系统等技术方案

  • Bug 排查：通过浏览器工具实时调试，SOLO 帮助定位并修复了路由守卫逻辑、主题变量注入、构建错误等问题

  • 样式调优：SOLO 使用 frontend-design skill 设计了登录页、主题选择器等关键 UI

  • 项目工程化：SOLO 帮助配置了 GitHub Actions CI/CD、编写 GPL-3.0 许可证、完善 README

3. 踩过的坑

  1. 路由守卫逻辑：首次访问时 app_mode 为 null，被错误地当作非 Pro 模式处理，导致跳过引导直接进入登录页。修复：增加 isFirstVisit 判断

  2. CSS 变量注入时机：主题切换时 CSS 变量未及时更新，导致页面闪烁。修复：在 applyThemeToDOM 中使用 document.documentElement.style.setProperty 同步注入

  3. TypeScript 严格模式：开启 noUnusedLocals 和 noUnusedParameters 后，大量"未使用变量"错误导致构建失败。修复：逐一清理 14 个文件中的 70+ 个错误

  4. GitHub Pages 部署：base 路径未配置导致资源加载 404。修复：在 vite.config.ts 中通过 BASE_URL 环境变量动态设置

  5. 设置向导无法滚动：body 的 overflow: hidden 和 #app 的固定 height: 100vh 阻止了页面滚动。修复：移除 overflow: hidden，改用 min-height

  6. 保存配置失败：Pro 模式下无 PHP 后端时 API 请求返回 PHP 源码。修复：API 失败时仍本地保存配置，不阻塞用户流程

⑤ 成果展示

在线体验

GitHub Pages 地址： 萤火学堂 - FireflyEdu

代码仓库： GitHub - herbrine8403/firefly-edu: 【Trae SOLO 挑战赛参赛作品】一款专为乡村教师打造的 AI 教学助手平台。 · GitHub

项目规模

  • 79 个文件，22,000+ 行代码

  • 22 个 Vue 组件（5 个模块目录 + 5 个通用组件）

  • 9 个页面视图（Dashboard、备课教研、课堂授课、作业测评、学情分析、教师社区、登录、设置向导、管理后台）

  • 6 个组合式函数（ useClassroom、useCommunity、useHomeworkGrading、useLessonGenerator、useNotifications、useTheme）

  • 8 个 PHP 后端文件（入口、配置、数据库、认证、AI 代理、插件管理）

  • 60+ 个 SVG 图标注册

核心页面展示

首页仪表盘：待办事项统计、快捷入口、最近教案、关键指标卡片

备课教研：AI 教案生成器（Markdown 编辑器 + 实时预览）、知识图谱可视化

课堂授课：6 个虚拟教具（几何画板支持画点/线/圆/测量，物理实验室支持力学模拟，分子查看器支持 3D 旋转）

作业测评：拍照上传、AI 批改、错题本自动整理

学情分析：ECharts 图表（成绩分布、趋势、班级对比）

主题系统：4 套主题色 × 3 种显示模式 = 12 种视觉风格

项目结构


firefly-edu/

├── .github/workflows/deploy.yml # CI/CD 自动部署

├── LICENSE # GPL-3.0 开源协议

├── README.md # 项目文档

├── server/ # PHP 后端（可选）

│ ├── index.php # API 入口

│ ├── config.php # 配置管理

│ ├── database.php # 数据库抽象层

│ ├── auth.php # 认证中间件

│ ├── ai.php # AI 代理（SSE 流式）

│ └── plugins.php # 插件管理

├── src/

│ ├── components/ # 22 个组件

│ │ ├── classroom/ # 课堂授课（3 个）

│ │ ├── community/ # 教师社区（3 个）

│ │ ├── homework/ # 作业测评（4 个）

│ │ ├── lesson/ # 备课教研（4 个）

│ │ └── tools/ # 教学工具（6 个）

│ ├── composables/ # 6 个组合式函数

│ ├── stores/ # Pinia 状态管理

│ ├── styles/ # 全局样式 + 主题系统

│ └── views/ # 9 个页面视图

└── vite.config.ts

⑥ 验证方式与下一步

已完成的验证

  1. 功能完整性：6 大模块全部可操作，22 个组件均可交互

  2. 主题切换：4 套主题 × 3 种模式全部测试通过，切换即时生效

  3. Demo 模式：无需后端，打开浏览器即可体验全部功能

  4. 构建部署：TypeScript 严格模式构建通过，GitHub Actions CI/CD 正常运行

  5. 响应式适配：在桌面端和平板端均可正常使用

  6. 首次引导：新用户首次访问自动进入设置向导，可选择 Demo 或 Pro 模式

下一步计划

  1. 真实教师试用：联系乡村学校教师进行实际试用，收集反馈

  2. AI 功能深化：接入真实 AI API，优化教案生成质量和作业批改准确度

  3. 离线支持：通过 Service Worker 实现 PWA 离线使用，适应乡村网络环境

  4. 教学资源库：建立共享教案库，让教师可以上传和下载优质教学资源

  5. 学生端适配：增加学生视角的功能，如查看作业批改结果、错题复习等

-–

萤火虽小，亦能照亮一方天地。希望萤火学堂能成为每一位乡村教师的得力搭档，让技术真正服务于教育。

1 个赞
2

我来顶个帖子