🧬 高中物理 lab 实验册（部署版）

背景 · 源于一道物理题

小荷 15 岁，高一。她在物理课上，老师讲波的干涉，用纸笔和黑板很难讲清楚。小荷想："如果有个交互式的模拟器，学生可以自己改变波长、振幅，看实时效果，应该更容易理解。" 她决定做一个完整的网页应用。

技术决策

• 框架： Vite + React + TypeScript（要求类型安全）
• 测试： vitest（单元测试）+ Playwright（E2E 测试）
• 部署： GitHub Pages（自动部署）
• 项目量： 12 个实验模块（波、力学、电磁……），38 个 git commit
• 覆盖率目标： 92% 代码覆盖

vitest 测试例（物理计算模块）

import { describe, it, expect } from 'vitest';
import { calculateWaveInterference } from './physics.ts';

describe('Wave Interference', () => {
  it('两个同频波，振幅相加', () => {
    const result = calculateWaveInterference({
      freq: 10,          // 10 Hz
      amp1: 2,  amp2: 3, // 振幅 2 和 3
      phase: 0           // 同相
    });
    expect(result.amplitude).toBe(5); // 2+3=5
  });

  it('反相波完全抵消', () => {
    const result = calculateWaveInterference({
      freq: 10,
      amp1: 2, amp2: 2,
      phase: Math.PI  // 反相
    });
    expect(result.amplitude).toBeLessThan(0.001);
  });

  it('计算干涉条纹间距', () => {
    // 双缝干涉：条纹间距 = λ*D/d
    const fringe = calculateFringeSpacing({
      wavelength: 500e-9, // 500 nm
      distance: 1,        // 屏距 1 m
      slit: 1e-3          // 缝距 1 mm
    });
    expect(fringe).toBeCloseTo(0.5e-3); // 0.5 mm ± 1 μm
  });
});

GitHub Actions 部署配置

name: Deploy to Pages

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Run vitest
        run: npm run test:unit

      - name: Run E2E tests
        run: npm run test:e2e

      - name: Build
        run: npm run build

      - name: Check coverage
        run: |
          npm run test:coverage
          if [ $(grep 'Coverage:' .coverage-report | grep -oE '[0-9]+') -lt 92 ]; then
            echo "Coverage below 92%!"
            exit 1
          fi

  deploy:
    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm ci && npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

使用数据

指标	数值
Git commit 数	38
测试覆盖率	92%
E2E 测试用例	24 个
真实使用学生	4 人
月均访问	120+
页面加载时间	< 1.2s
学生反馈评分	4.7/5

学到的经验

小荷说："写测试比写功能代码花的时间一样多，甚至更多。但一旦有了 92% 的覆盖，我改代码时特别有信心。如果我改错了什么，自动化测试会立刻告诉我。这才是真正的"工程"。"

你也想做？

这个项目用的是进阶版 · 项目 04「真实网页」。

→ 打开项目 04