【More Than Coding】用 SOLO 从零构建 BRICS2026 竞赛训练平台 —— 一个教育者的 AI 全栈开发实战
什么也别说，眼见为实：https://www.kounlong.top:558
一、摘要
我是一名教育工作者，需要为 BRICS2026-ST-041 商务数据分析赛项搭建一个完整的在线训练平台。传统方式需要前端、后端、运维多人协作数周完成，而使用 TRAE SOLO，我在单次会话中完成了从需求分析到整体验收的全流程，交付了一个包含 12 个页面、8 大训练模块、在线 Python IDE 和 AI 学习助手的完整静态网站。
二、背景
2.1 我的角色
教育工作者 / 竞赛指导教师，负责 BRICS2026（金砖国家技能大赛）ST-041 商务数据分析赛项的学生训练工作。
2.2 面临的挑战
- 赛项内容复杂：涵盖数据采集、预处理、统计分析、商务分析、AI 建模、可视化、报告撰写等 8 大模块、23 讲内容
- 训练资料分散：40 小时实训讲演资料仅有 Markdown 文件，缺乏结构化的在线学习平台
- 技术门槛高：需要 Python 编程环境、数据集管理、AI 辅助答疑等功能
- 部署环境受限：目标部署在群晖 NAS（DSM 6.2.3）上，使用 Web Station 反向代理，无法运行复杂后端
- 时间紧迫：竞赛在即，需要快速交付可用的训练平台
2.3 期望目标
构建一个静态网站训练平台，集成训练内容、在线编程环境、AI 学习助手，部署在 NAS 上供学生使用。
三、实践过程
3.1 任务拆解
我向 SOLO 描述了完整需求后，SOLO 自动完成了结构化的任务分解：
| 步骤 | 内容 | 依赖 |
|---|---|---|
| 1 | 基础架构：目录结构、公共 CSS/JS、导航组件、响应式框架 | 无 |
| 2 | 首页：课程概览、8 大模块导航卡片、训练进度展示 | 步骤 1 |
| 3 | 训练内容页：23 讲结构化页面（按模块分组） | 步骤 1 |
| 4 | Python IDE：Pyodide + CodeMirror 编辑器 | 步骤 1 |
| 5 | AI 助手悬浮窗：DeepSeek 对话组件 | 步骤 1 |
| 6 | API 代理服务：Node.js 脚本 | 步骤 5 |
| 7 | 数据集集成：嵌入 + 下载页 | 步骤 1 |
| 8 | 整体测试与优化 | 步骤 2-7 |
3.2 关键技术决策
SOLO 在动手前主动向我确认了几个关键决策点：
决策 1：Python IDE 方案
- 选项：Pyodide（纯前端）/ JupyterLite / 后端执行
- 最终选择：Pyodide —— 无需后端服务器，学生打开浏览器即可编写和运行 Python 代码
决策 2：AI 助手 API 安全
- 选项：前端直连 / 后端代理 / 预留接口
- 最终选择：后端代理转发 —— API Key 存储在服务端环境变量中，前端无法获取
决策 3：部署形式
- 选项：纯静态 HTML / Vite 构建 / Next.js SSG
- 最终选择：纯静态 HTML —— 直接放在 NAS Web Station 虚拟主机目录即可
决策 4：数据集集成方式
- 选项：嵌入网站 / 提供下载 / 两者都要
- 最终选择：两者都要 —— IDE 中可一键加载示例数据，同时提供独立下载
3.3 开发过程
第一阶段：基础架构搭建
SOLO 参考了我提供的参考网站（kounlong.top:555）的设计风格，通过浏览器截图分析提取了完整的 UI 设计规范：
- 色彩体系：蓝色主色调（#2563EB），绿色成功色，黄色警示色
- 卡片设计：白色背景 + 圆角 + 微阴影，三列网格布局
- 导航模式：顶部固定蓝色导航栏，移动端汉堡菜单
- 字体排版：系统字体栈，中文优化
然后创建了完整的设计系统：
css/style.css：600+ 行全局样式，包含 CSS 变量、响应式断点、组件系统css/highlight.css：代码高亮主题（GitHub Dark 风格）js/main.js：公共脚本（导航、AI 助手、进度管理、代码高亮、Toast 通知）
第二阶段：内容页面并行生成
SOLO 同时启动了 3 个并行子代理，高效生成了全部内容：
- 子代理 1：module1-4（数据采集、预处理、统计分析、商务数据分析）
- 子代理 2：module5-8（AI 与机器学习、可视化、报告撰写、综合实战）
- 子代理 3：Python IDE 页面（Pyodide 集成、Notebook 风格编辑器）
每个模块页面包含：
- 左侧边栏导航（本模块讲座 + 其他模块快速跳转）
- 结构化讲座内容（学习目标框、知识树、代码示例、练习题）
- 完整可运行的 Python 代码示例
第三阶段：功能完善
- 创建数据集下载页（5 个配套 CSV/XLSX 文件）
- 创建工具与资源页（安装指南、学习路径、备赛建议）
- 创建 AI 代理服务（Node.js + Express + Docker 部署方案）
- 编写完整部署文档（DEPLOY.md）
3.4 踩过的坑与修复
在开发过程中，通过整体验收发现了以下问题并逐一修复：
| 问题 | 严重程度 | 修复方案 |
|---|---|---|
| IDE 页面代码文字不可见（白色背景+浅色文字） | 严重 | 为编辑器和输出区域设置明确的深色文字颜色 #1E293B，添加 !important 覆盖 |
| IDE 页面缺少 Pyodide CDN 引用 | 严重 | 在 <head> 中添加 <script src="https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js"> |
| AI 助手 API 调用 501 错误 | 严重 | 创建 Docker 部署方案，编写反向代理配置指南 |
| module1-4 与 module5-8 导航结构不一致 | 中等 | 统一侧边栏格式：链接改为 #lecture-X、补充所有模块跳转、标题增加时长 |
| module5-8 使用英文 “Lecture X:” 标题 | 低 | 全部统一为中文 “第X讲：” 格式 |
| module5-8 页面 title 分隔符不统一 | 低 | 全部统一为 模块X · 名称 - ST-041 训练平台 格式 |
四、成果展示
4.1 项目结构
st041-training/
├── index.html # 首页（课程概览、8大模块导航）
├── css/
│ ├── style.css # 全局样式（600+ 行设计系统）
│ └── highlight.css # 代码高亮主题
├── js/
│ └── main.js # 公共脚本（导航、AI助手、进度管理）
├── pages/
│ ├── module1~8.html # 8个训练模块（23讲完整内容）
│ ├── ide.html # Python 在线 IDE
│ ├── datasets.html # 数据集下载页
│ └── resources.html # 工具与资源
├── data/ # 5个配套数据集
├── ai-proxy/ # AI 代理服务
│ ├── ai-proxy.js
│ ├── package.json
│ ├── Dockerfile
│ └── docker-compose.yml
└── DEPLOY.md # 部署指南
4.2 核心功能
训练内容系统
- 8 大模块、23 讲，每讲包含学习目标、知识树、代码示例、练习题
- 侧边栏导航支持模块间快速跳转
- localStorage 追踪学习进度
Python 在线 IDE
- Pyodide 纯前端执行，支持 pandas、numpy、scikit-learn 等库
- Jupyter Notebook 风格：多单元格、运行/删除/排序
- 5 个预置数据集一键加载
- 状态栏实时显示 Pyodide 加载进度
AI 学习助手
- 悬浮窗全局嵌入，DIFY 风格对话界面
- DeepSeek API 驱动，商务数据分析专业系统提示
- 后端代理保护 API Key 安全
- 速率限制（每分钟 20 次）防止滥用
响应式设计
- 桌面端三列布局，平板端两列，手机端单列
- 移动端汉堡菜单
- AI 对话窗口自适应屏幕宽度
4.3 验收结果
对全部 12 个页面进行了系统验收测试：
| 页面 | 加载 | 控制台 | 导航 | 备注 |
|---|---|---|---|---|
| index.html | OK | 无错误 | 正常 | 8模块卡片、进度条、AI助手 |
| module1.html | OK | 无错误 | 正常 | 侧边栏已统一 |
| module2.html | OK | 无错误 | 正常 | 侧边栏已统一 |
| module3.html | OK | 无错误 | 正常 | 侧边栏已统一 |
| module4.html | OK | 无错误 | 正常 | 侧边栏已统一 |
| module5.html | OK | 无错误 | 正常 | - |
| module6.html | OK | 无错误 | 正常 | - |
| module7.html | OK | 无错误 | 正常 | - |
| module8.html | OK | 无错误 | 正常 | - |
| ide.html | OK | 无错误 | 正常 | 文字清晰可读 |
| datasets.html | OK | 无错误 | 正常 | 5个数据集 |
| resources.html | OK | 无错误 | 正常 | 工具表、学习路径 |
结论：全部 12 个页面正常加载，0 个 JavaScript 错误，0 个断链，所有导航和功能正常。
五、效果与总结
5.1 提效数据
| 维度 | 传统方式 | 使用 SOLO | 提效 |
|---|---|---|---|
| 开发周期 | 2-4 周（多人协作） | 单次会话完成 | 数十倍 |
| 页面数量 | - | 12 个页面 | - |
| 代码量 | - | CSS 600+ 行 + JS 300+ 行 + 8 个 HTML 模块 | - |
| 设计还原 | 手动测量参考网站 | AI 自动截图分析提取 | 全自动化 |
| 并行开发 | 需要多人分工 | 3 个子代理并行生成 | 内置并行 |
5.2 SOLO 在流程中做了什么
- 需求理解：自动解析复杂的中文需求描述，识别出 5 大核心功能点
- 主动澄清：在关键决策点主动提问（IDE 方案、API 安全、部署形式、数据集集成），避免返工
- 设计分析：通过浏览器访问参考网站，自动提取 UI 设计规范（色彩、字体、布局、组件）
- 并行开发：同时启动多个子代理并行生成页面，大幅提升效率
- 质量保证：自动进行整体验收测试，发现并修复 6 个问题
- 运维交付：提供完整的 Docker 部署方案和 NAS 配置指南
5.3 可复用的方法
- 参考网站风格提取：让 SOLO 访问参考网站截图分析，自动生成匹配的设计系统
- 并行子代理模式：将独立模块分配给不同子代理同时开发
- 增量验收：每完成一个阶段就进行验收，及时发现并修复问题
- 安全优先：API Key 通过后端代理保护，绝不暴露在前端代码中
- 纯静态优先：在满足需求的前提下优先选择纯静态方案，降低部署复杂度
5.4 总结
这个项目充分展示了 AI 辅助开发在教育领域的实战价值。从需求分析到设计实现，从功能开发到测试验收，SOLO 覆盖了软件开发的完整生命周期。最重要的是，它让我——一个教育工作者而非专业开发者——能够在极短时间内交付一个功能完整、设计精良、可实际部署使用的训练平台，真正做到了 AI 降维开发，教育者聚焦教育本身。