实现路由管理系统

- 创建 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>
+  );
+}

src/pages/Home.jsx

@@ -0,0 +1,107 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { DraggableItem } from '../components/DraggableItem';
+import {
+  defaultExperiments,
+  loadExperimentsFromStorage,
+  saveExperimentsToStorage,
+} from '../data/experiments';
+
+export default function Home() {
+  const navigate = useNavigate();
+
+  // 从 localStorage 加载数据，如果没有则使用默认数据
+  const [experiments, setExperiments] = useState(() => {
+    return loadExperimentsFromStorage() || defaultExperiments;
+  });
+
+  // 当实验数据变化时，保存到 localStorage
+  useEffect(() => {
+    saveExperimentsToStorage(experiments);
+  }, [experiments]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  function handleDragEnd(event) {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setExperiments((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+  }
+
+  function handleExperimentClick(id) {
+    navigate(`/experiment/${id}`);
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      <div className="bg-white rounded-xl shadow-lg p-6 mb-6">
+        <h2 className="text-2xl font-semibold text-gray-800 mb-4">
+          实验项目列表
+        </h2>
+        <p className="text-gray-600 mb-6">
+          拖动实验项目可以调整顺序，规划您的学习路径。点击项目查看详情。
+        </p>
+
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext
+            items={experiments}
+            strategy={verticalListSortingStrategy}
+          >
+            {experiments.map((experiment, index) => {
+              const Icon = experiment.icon;
+              return (
+                <DraggableItem key={experiment.id} id={experiment.id}>
+                  <div
+                    className="flex items-center gap-4 cursor-pointer hover:bg-gray-50 rounded transition-colors p-2 -m-2"
+                    onClick={() => handleExperimentClick(experiment.id)}
+                  >
+                    <div className="flex-shrink-0 w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center">
+                      <Icon className="w-6 h-6 text-indigo-600" />
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-semibold text-gray-800">
+                        {index + 1}. {experiment.name}
+                      </h3>
+                      <p className="text-sm text-gray-600">
+                        {experiment.description}
+                      </p>
+                    </div>
+                  </div>
+                </DraggableItem>
+              );
+            })}
+          </SortableContext>
+        </DndContext>
+      </div>
+    </div>
+  );
+}

src/pages/Layout.jsx

@@ -0,0 +1,30 @@
+import { Outlet, Link } from 'react-router-dom';
+import { Cpu } from 'lucide-react';
+
+export default function Layout() {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+      <div className="container mx-auto px-4 py-8">
+        <header className="text-center mb-12">
+          <Link to="/" className="inline-block">
+            <div className="flex items-center justify-center gap-3 mb-4 hover:opacity-80 transition-opacity">
+              <Cpu className="w-10 h-10 text-indigo-600" />
+              <h1 className="text-4xl font-bold text-gray-800">
+                传感器及检测技术
+              </h1>
+            </div>
+          </Link>
+          <p className="text-gray-600 text-lg">实验课件交互式平台</p>
+        </header>
+
+        <main>
+          <Outlet />
+        </main>
+
+        <footer className="text-center text-gray-600 text-sm mt-12">
+          <p>使用现代化技术构建 • React + Vite + Tailwind CSS</p>
+        </footer>
+      </div>
+    </div>
+  );
+}

src/pages/NotFound.jsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom';
+import { Home, ArrowLeft } from 'lucide-react';
+
+export default function NotFound() {
+  return (
+    <div className="max-w-2xl mx-auto text-center">
+      <div className="bg-white rounded-xl shadow-lg p-12">
+        <div className="mb-8">
+          <h1 className="text-9xl font-bold text-indigo-600 mb-4">404</h1>
+          <h2 className="text-3xl font-bold text-gray-800 mb-2">
+            页面未找到
+          </h2>
+          <p className="text-gray-600 text-lg">
+            抱歉，您访问的页面不存在或已被移除。
+          </p>
+        </div>
+
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <Link
+            to="/"
+            className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-semibold"
+          >
+            <Home size={20} />
+            返回首页
+          </Link>
+          <button
+            onClick={() => window.history.back()}
+            className="inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-indigo-600 text-indigo-600 rounded-lg hover:bg-indigo-50 transition-colors font-semibold"
+          >
+            <ArrowLeft size={20} />
+            返回上一页
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}