实现路由管理系统

- 创建 router.js 统一管理路由配置
- App.jsx 重构为使用 RouterProvider
- 创建 pages 目录结构：
  - Layout.jsx: 主布局组件，包含 header 和 footer
  - Home.jsx: 首页实验列表（原 App.jsx 内容）
  - ExperimentDetail.jsx: 实验详情页，展示完整实验信息
  - NotFound.jsx: 404 页面
- 实现页面导航功能：
  - 点击实验项目可跳转到详情页
  - 详情页支持返回列表
  - 完善的错误处理和 404 页面
- 实验详情页功能：
  - 展示实验目标、步骤、注意事项
  - 实验信息卡片（时长、难度、类型）
  - 交互式按钮（开始实验、下载资料）
- 所有代码通过 ESLint 检查

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/pages/ExperimentDetail.jsx

@@ -0,0 +1,190 @@
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { ArrowLeft, BookOpen, Target, Clock, FileText } from 'lucide-react';
+import { defaultExperiments } from '../data/experiments';
+
+export default function ExperimentDetail() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+
+  const experiment = defaultExperiments.find((exp) => exp.id === id);
+
+  if (!experiment) {
+    return (
+      <div className="max-w-3xl mx-auto">
+        <div className="bg-white rounded-xl shadow-lg p-8 text-center">
+          <h2 className="text-2xl font-bold text-gray-800 mb-4">实验不存在</h2>
+          <p className="text-gray-600 mb-6">抱歉，未找到该实验项目。</p>
+          <Link
+            to="/"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
+          >
+            <ArrowLeft size={20} />
+            返回首页
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const Icon = experiment.icon;
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <button
+        onClick={() => navigate('/')}
+        className="flex items-center gap-2 text-gray-600 hover:text-gray-800 mb-6 transition-colors"
+      >
+        <ArrowLeft size={20} />
+        返回实验列表
+      </button>
+
+      <div className="bg-white rounded-xl shadow-lg overflow-hidden">
+        {/* 实验头部 */}
+        <div className="bg-gradient-to-r from-indigo-500 to-purple-600 p-8 text-white">
+          <div className="flex items-center gap-4 mb-4">
+            <div className="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
+              <Icon className="w-8 h-8" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold mb-2">{experiment.name}</h1>
+              <p className="text-indigo-100">{experiment.description}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* 实验内容 */}
+        <div className="p-8">
+          {/* 实验信息卡片 */}
+          <div className="grid md:grid-cols-3 gap-4 mb-8">
+            <div className="bg-blue-50 rounded-lg p-4">
+              <div className="flex items-center gap-2 text-blue-600 mb-2">
+                <Clock size={20} />
+                <h3 className="font-semibold">实验时长</h3>
+              </div>
+              <p className="text-gray-700">约 2-3 小时</p>
+            </div>
+
+            <div className="bg-green-50 rounded-lg p-4">
+              <div className="flex items-center gap-2 text-green-600 mb-2">
+                <Target size={20} />
+                <h3 className="font-semibold">难度等级</h3>
+              </div>
+              <p className="text-gray-700">中级</p>
+            </div>
+
+            <div className="bg-purple-50 rounded-lg p-4">
+              <div className="flex items-center gap-2 text-purple-600 mb-2">
+                <BookOpen size={20} />
+                <h3 className="font-semibold">实验类型</h3>
+              </div>
+              <p className="text-gray-700">综合实验</p>
+            </div>
+          </div>
+
+          {/* 实验目标 */}
+          <section className="mb-8">
+            <div className="flex items-center gap-2 mb-4">
+              <Target className="text-indigo-600" size={24} />
+              <h2 className="text-2xl font-bold text-gray-800">实验目标</h2>
+            </div>
+            <ul className="space-y-2 text-gray-700">
+              <li className="flex items-start gap-2">
+                <span className="text-indigo-600 mt-1">•</span>
+                <span>理解传感器的基本工作原理和测量特性</span>
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-indigo-600 mt-1">•</span>
+                <span>掌握传感器的校准和标定方法</span>
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-indigo-600 mt-1">•</span>
+                <span>学习数据采集和处理的基本技术</span>
+              </li>
+              <li className="flex items-start gap-2">
+                <span className="text-indigo-600 mt-1">•</span>
+                <span>分析实验结果并撰写实验报告</span>
+              </li>
+            </ul>
+          </section>
+
+          {/* 实验步骤 */}
+          <section className="mb-8">
+            <div className="flex items-center gap-2 mb-4">
+              <FileText className="text-indigo-600" size={24} />
+              <h2 className="text-2xl font-bold text-gray-800">实验步骤</h2>
+            </div>
+            <div className="space-y-4">
+              <div className="border-l-4 border-indigo-600 pl-4 py-2">
+                <h3 className="font-semibold text-gray-800 mb-1">
+                  步骤 1: 实验准备
+                </h3>
+                <p className="text-gray-600">
+                  检查实验设备和仪器，确保传感器连接正确，熟悉实验操作流程。
+                </p>
+              </div>
+
+              <div className="border-l-4 border-indigo-600 pl-4 py-2">
+                <h3 className="font-semibold text-gray-800 mb-1">
+                  步骤 2: 传感器校准
+                </h3>
+                <p className="text-gray-600">
+                  使用标准信号源对传感器进行校准，记录校准数据并绘制校准曲线。
+                </p>
+              </div>
+
+              <div className="border-l-4 border-indigo-600 pl-4 py-2">
+                <h3 className="font-semibold text-gray-800 mb-1">
+                  步骤 3: 数据采集
+                </h3>
+                <p className="text-gray-600">
+                  按照实验要求进行数据采集，注意记录环境条件和测量参数。
+                </p>
+              </div>
+
+              <div className="border-l-4 border-indigo-600 pl-4 py-2">
+                <h3 className="font-semibold text-gray-800 mb-1">
+                  步骤 4: 数据分析
+                </h3>
+                <p className="text-gray-600">
+                  对采集的数据进行处理和分析，计算传感器的性能参数。
+                </p>
+              </div>
+
+              <div className="border-l-4 border-indigo-600 pl-4 py-2">
+                <h3 className="font-semibold text-gray-800 mb-1">
+                  步骤 5: 撰写报告
+                </h3>
+                <p className="text-gray-600">
+                  整理实验数据和分析结果，撰写完整的实验报告。
+                </p>
+              </div>
+            </div>
+          </section>
+
+          {/* 注意事项 */}
+          <section className="mb-8">
+            <h2 className="text-2xl font-bold text-gray-800 mb-4">注意事项</h2>
+            <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded">
+              <ul className="space-y-2 text-gray-700">
+                <li>• 实验前请仔细阅读实验指导书和安全操作规程</li>
+                <li>• 注意保护传感器，避免过载和损坏</li>
+                <li>• 数据记录要准确完整，便于后续分析</li>
+                <li>• 实验结束后及时整理设备和清理实验台</li>
+              </ul>
+            </div>
+          </section>
+
+          {/* 操作按钮 */}
+          <div className="flex gap-4">
+            <button className="flex-1 px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-semibold">
+              开始实验
+            </button>
+            <button className="px-6 py-3 border-2 border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition-colors font-semibold">
+              下载资料
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}