模拟实验室（Simulation Lab）
Overview
把"讲不清"的抽象概念，变成"能上手"的网页实验。本技能借鉴清华开源 OpenMAIC 的 HTML 交互模拟引擎思路：核心不是做静态页面，而是把知识点拆成 可操作的变量 + 可观测的结果，再套用统一设计系统生成单文件交互 HTML。适用于培训/售前团队把战略产品（或任意产品方案）的技术原理做成学员/客户可动手操作的模拟平台。
When to Use
- 用户说"把这个知识点做成可交互演示 / 模拟 / 实验 / 沙盘 / 可视化"。
- 课程开发、讲师备课需要把原理讲透（如 WDM 波分复用、堆叠、零信任流程）。
- 售前训练要把产品方案差异做成可对比、可操作的网页（替代 PPT 干讲）。
- 任何"抽象概念 → 动手体验"的知识沉淀场景。
核心方法论：两阶段生成
阶段一 · 拆解知识点。 对任意知识点，先回答三件事：
1. 教学目标：用一句话说明"学完能懂/能判断什么"。
2. 可操作变量 X：学员能拖动/点击/输入的旋钮（如波长数、信息点数、模式切换）。
3. 可观测结果 Y：变量变化时页面实时反馈什么（带宽、设备数、时延、状态）。
> 没有"变量 X → 结果 Y"映射的知识点，不适合做模拟，应退回做成图表或动画。
阶段二 · 生成场景。 从下方 M1–M12 演示模式中，为知识点选 1–3 个最贴合的模式组合实现。
十二类演示模式（按交互范式归一，选模式）
按"学员怎么操作"这一统一维度划分，避免原 A–E 五类维度混杂（内容/形态/功能/交互混用）。核心 9 类覆盖 OpenMAIC 全部能力并补齐售前高频，扩展 3 类按需启用。
| 模式 | 交互范式（怎么操作） | 典型控件 | 通用典型场景 |
|---|---|---|---|
| M1 参数驱动 | 滑块/输入实时改图 | 滑块、数字框、SVG 响应 | WDM 波长合波、RoCE 拥塞参数 |
| M2 时序推演 | 播放/步进/时间轴 | 播放、下一步、进度条 | 协议握手时序、算法步进、波传播 |
| M3 拖拽构建 | 拖组件、连线、拼装 | 画布拖放、指针连线 | 拓扑搭建、VLAN/堆叠配置 |
| M4 计算仿真 | 内置迭代引擎跑结果 | 初始条件+运行、实时曲线 | 容量规划、拥塞/传播、流体 |
| M5 数据交互 | 图表联动、钻取、筛选 | 图表、下拉、联动高亮 | KPI 看板、对比条形图 |
| M6 对比 A-B | 两方案实时切换对比 | 切换按钮、对比卡 | 传统三层 vs 极简光、PON vs 彩光 |
| M7 状态机 | 状态切换高亮 | 步骤/状态卡、变色节点 | 零信任 SDP 握手、故障切换 |
| M8 三维空间 | WebGL 旋转/拆解 | 鼠标拖拽旋转、爆炸视图 | 机房三维、设备拆解 |
| M9 游戏化 | 闯关、计分、挑战 | 关卡、计分板、反馈 | 配置大挑战、排障闯关 |
| M10 思维导图 | 节点关系组织 | 可折叠节点树 | 知识体系、方案架构脑图 |
| M11 在线编程 | 浏览器内编码运行 | 代码框、运行按钮 | 脚本/配置在线试跑 |
| M12 地图空间 | 标注、路径、覆盖 | 地图标记、路径线 | 分支覆盖、信号热力 |
> 选型原则：一套实验室聚焦一个核心知识点，选 1–3 个最贴的模式组合；优先用核心 9 类，扩展类（M10–M12）仅当知识点本质契合时启用。
Workflow
- 拆解：按阶段一输出「教学目标 + 变量 X + 结果 Y」。不确定时向用户确认场景与受众（售前/客户/学员）。
- 选型：从 M1–M12 中选 1–3 个最贴合的模式组合，避免贪多。一套实验室聚焦一个核心知识点；优先用核心 9 类，扩展类（M10–M12）仅当知识点本质契合时启用。
- 取材：复制
assets/template.html作为单文件骨架，注入科技蓝设计系统（见references/design-system.md）。 - 实现：用 SVG/Canvas + 原生 JS 实现"变量驱动视图"。每个交互必须有边界（min/max/禁用态）和即时反馈。
- 旁白：为每个场景写"讲解脚本"文字块（模拟 OpenMAIC 语音旁白），学员可展开阅读。
- 质检：对照
references/design-system.md末尾的质检清单逐项核对。 - 交付：输出
.html单文件，并在回复中说明知识点、演示模式与数据来源。
设计系统要点（详见 references）
- 单文件 HTML：CSS/JS 内联，零外部依赖，可双击离线打开、可嵌入 LMS/飞书。
- 科技蓝主题：主色
#1e5eff/#0a2a66，辅助青#00d4ff、绿（正确/增益）#19c37d、橙（警示）#ff9f43、红（损失/风险）#ff5b5b。 - 固定导航 + 锚点：多模块实验室用顶部导航跳转；平滑滚动、淡入动画。
- 控件即教学：滑块/开关/按钮本身承载概念，而非装饰。
- 响应式：桌面双栏（控件左 / 画布右），移动端单栏堆叠。
战略产品知识点映射（详见 references/knowledge-map.md）
技能已内置战略产品（示例：园区极简光/以太彩光、融合架构云桌面、数据中心无损网络、企业级无线、零信任安全、SD-WAN 等）→ 核心概念 → 推荐演示模式的映射，生成前先查该文件定位切入点。
Resources
assets/template.html— 单文件交互实验室骨架（含导航、控件区、画布区、指标卡、讲解脚本区、质检占位）。scripts/new_lab.py— 脚手架：以模板为基底，传入标题/模块，生成空白实验室 HTML。references/design-system.md— 设计令牌、12 类模式（M1–M12）的实现范式与可复用 SVG/JS 片段、质检清单。references/knowledge-map.md— 战略产品（通用示例）知识点与演示模式推荐。
