Skip to content

Repository files navigation

OptoElectro Lab - 光电实验室

一个基于 React 的交互式光通信学习与实验平台,通过精美的动画和实时参数控制,帮助理解光调制器件的工作原理。

分为 Learn(学习)Playground(实验) 两大部分,从基础概念到完整光通信系统,循序渐进。

在线访问

GitHub Pages: https://saicem.github.io/optoelectro-lab/

功能模块

📚 Learn · 学习路径

共 31 个章节,按 5 个篇章 + 附录分组,形成完整学习体系:

Part 1 · 基础篇

  • 01 光波基础与物理量 — 电磁波谱、光波物理量、相位与折射率
  • 02 晶体结构与缺陷 — 晶格、晶向、晶体缺陷及其对光电器件的影响
  • 03 半导体基础 — 能带结构、本征/掺杂半导体、费米能级、载流子输运
  • 04 PN 结基础 — PN 结形成、内建电场、能带图、整流特性
  • 05 载流子复合机制 — 辐射复合、SRH 复合、俄歇复合、少子寿命
  • 06 光与物质相互作用 — 受激吸收/辐射、粒子数反转、增益
  • 07 异质结与能带对准 — 同质结/异质结、能带对准类型、载流子限制
  • 08 半导体基本方程 — 泊松方程、连续性方程、漂移扩散方程
  • 09 PN 结进阶 — 耗尽区电容、暗电流组成、温度依赖
  • 10 光电效应与光电器件 — 光电效应、光电二极管、电光/非线性材料

Part 2 · 光源与传输篇

  • 11 激光器 — 受激辐射、粒子数反转、谐振腔、DFB/VCSEL
  • 12 光纤与光波导 — 全内反射、损耗谱、色散、非线性效应

Part 3 · 调制器篇

  • 13 光调制基础 — 模拟/数字调制、AM/PM/FM、IM/DD、调制性能指标
  • 14 干涉原理 — 双光束干涉、相干条件、MZI 结构
  • 15 MZ 调制器 — 马赫-曾德电光调制器、三种调制模式、行波电极
  • 16 IQ 调制器 — 正交幅度调制、星座图、格雷编码
  • 17 偏振复用 — 斯托克斯矢量、琼斯矩阵、庞加莱球
  • 18 Nyquist 与 OFDM — 脉冲整形、多载波调制
  • 19 概率星座整形与编码 — PCS、LDPC/FEC、逼近香农极限

Part 4 · 系统篇

  • 20 光接收器 — 相干接收、噪声分析、功率预算、BER
  • 21 WDM 与光放大器 — 波分复用、EDFA、ASE 噪声、Flex-Grid
  • 22 完整光通信系统 — 400G DP-16QAM 端到端链路全景、综合回顾

Part 5 · 光学仪器篇

  • 23 光源与发射设备 — LD/SLED/ASE/LED/白光源,选型与工程指标
  • 24 光功率计与探测器 — 热电堆/光电二极管,响应度、NEP、校准
  • 25 积分球与光辐射测量 — 辐射/光度量、余弦修正、光通量测量
  • 26 光开关与光路由 — 机械/MEMS/热光/电光开关、WSS
  • 27 光谱仪与波长计 — 光栅/OSA/FTIR/波长计、RBW、动态范围
  • 28 光纤参数测量与故障定位 — OTDR/CD/PMD/端面检测/熔接机
  • 29 时域测试与误码分析 — 光示波器/BERT/LCA/相位噪声
  • 30 光束表征与偏振测量 — 光束剖面仪/M²/偏振计/PDL·PMD
  • 31 无源光器件 — 衰减器/隔离器/环形器/分束器/滤波器

附录

  • 术语表 — 140+ 光通信常用术语查询

🧪 Playground · 交互实验

5 个可交互的仿真实验,支持实时参数调节:

实验 功能特点
光波干涉 调节波长/振幅/相位差,观察干涉条纹变化
MZ 调制器 电光调制原理演示,转移曲线实时绘制,单臂/双臂/推挽三种模式
IQ 调制器 QPSK/16QAM/64QAM 星座图,I/Q/P 全分量调节,发送/接收端对比分析
偏振复用 庞加莱球与偏振椭圆,斯托克斯参数实时计算
光接收器 AWGN 信道、BER vs SNR 曲线、EVM 计算

技术栈

  • 前端框架:React 19 + TypeScript
  • 构建工具:Vite 8
  • 状态管理:Zustand 5
  • 样式方案:Tailwind CSS v4
  • 数学渲染:KaTeX
  • 路由管理:React Router v7 (HashRouter)
  • 可视化:Canvas 2D + requestAnimationFrame
  • 图标库:Lucide React

快速开始

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 代码检查
pnpm lint

# 类型检查
pnpm check

# 构建生产版本
pnpm build

# 预览生产版本
pnpm preview

部署

项目通过 GitHub Actions 自动部署到 GitHub Pages,详见 .github/workflows/deploy.yml

About

Resources

Stars

0 stars

Watchers

0 watching

Forks

Used by

Contributors

Languages