互动式 HTML 模拟实验室

要解决的问题

给学员或客户讲技术原理时，最常见的失败模式是「PPT 干讲」：听众看不见变量之间的关系，更没法亲手试试改一个参数会怎样。比如讲 WDM 波分复用，光说「多路波长合波」没有意义；讲零信任的 SDP 握手，光画流程图不如让对方点一下看状态怎么跳。抽象概念之所以难教，是因为缺少可操作变量 X 和可观测结果 Y 这组映射。

Simulation Lab 做的事就是把这类知识点变成单文件交互 HTML：学员拖滑块、点按钮、跑仿真，页面实时给出反馈。它借鉴清华开源 OpenMAIC 的思路，但定位是知识沉淀工具，不是页面搭建工具。

核心能力与关键步骤

两阶段生成，缺一不可。

第一阶段拆解知识点，必须先回答三件事：教学目标（学完能判断什么）、可操作变量 X（波长数、模式开关、初始条件）、可观测结果 Y（带宽、设备数、时延、状态变化）。拿不出 X → Y 映射的知识点不适合做模拟，应退回图表或动画。

第二阶段选型实现：从 M1–M12 十二类演示模式中挑 1–3 个最贴合的，用 assets/template.html 作为骨架，注入科技蓝设计系统，以 SVG/Canvas + 原生 JS 实现变量驱动视图。每类模式按「学员怎么操作」归一：

• M1 参数驱动：滑块/输入实时改图，适合 WDM 合波、拥塞参数
• M2 时序推演：播放/步进，适合协议握手、波传播
• M3 拖拽构建：画布拼装，适合拓扑搭建、VLAN 配置
• M4 计算仿真：内置迭代引擎，适合容量规划、传播时延
• M5–M9：数据联动、A-B 对比、状态机、三维拆解、游戏化闯关
• M10–M12：思维导图、在线编程、地图空间，仅当知识点本质契合时启用

落地流程是拆解 → 选型 → 取材 → 实现 → 写旁白 → 质检 → 交付 .html 单文件。每个交互必须有边界（min/max/禁用态）和即时反馈；CSS/JS 全部内联，零外部依赖，双击离线可开，可嵌入 LMS 或飞书。

适用边界与注意点

• 一套实验室只聚焦一个核心知识点，模式贪多会稀释教学目标
• 没有 X → Y 映射的内容不要硬做模拟，图表更诚实
• 它不做静态页面，也不替代真实仿真工具；M4 的迭代引擎是教学级简化，不是生产级计算器
• 战略产品知识点先查 references/knowledge-map.md 定位切入点，避免从零发明