添加持久化存储和数据配置优化

- 将实验数据抽离到独立配置文件 (src/data/experiments.js)
- 添加 localStorage 持久化存储功能
- 实现拖拽排序结果的自动保存和加载
- 页面刷新后保持用户自定义的排序顺序
- 添加完善的错误处理和注释

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

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

src/App.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import {
   DndContext,
   closestCenter,
@@ -14,16 +14,23 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { DraggableItem } from './components/DraggableItem';
-import { Cpu, Thermometer, Gauge, Radio, Zap, Droplets } from 'lucide-react';
+import { Cpu } from 'lucide-react';
+import {
+  defaultExperiments,
+  loadExperimentsFromStorage,
+  saveExperimentsToStorage,
+} from './data/experiments';
 
 function App() {
-  const [experiments, setExperiments] = useState([
+  // 从 localStorage 加载数据，如果没有则使用默认数据
-    { id: '1', name: '温度传感器实验', icon: Thermometer, description: '学习温度传感器的工作原理及应用' },
+  const [experiments, setExperiments] = useState(() => {
-    { id: '2', name: '压力传感器实验', icon: Gauge, description: '了解压力传感器的测量原理与特性' },
+    return loadExperimentsFromStorage() || defaultExperiments;
-    { id: '3', name: '位移传感器实验', icon: Radio, description: '掌握位移传感器的检测方法' },
+  });
-    { id: '4', name: '光电传感器实验', icon: Zap, description: '探索光电传感器的光电转换原理' },
+
-    { id: '5', name: '湿度传感器实验', icon: Droplets, description: '研究湿度传感器的测量技术' },
+  // 当实验数据变化时，保存到 localStorage
-  ]);
+  useEffect(() => {
+    saveExperimentsToStorage(experiments);
+  }, [experiments]);
 
   const sensors = useSensors(
     useSensor(PointerSensor),

src/data/experiments.js

@@ -0,0 +1,75 @@
+import { Thermometer, Gauge, Radio, Zap, Droplets } from 'lucide-react';
+
+export const defaultExperiments = [
+  {
+    id: '1',
+    name: '温度传感器实验',
+    icon: Thermometer,
+    description: '学习温度传感器的工作原理及应用',
+  },
+  {
+    id: '2',
+    name: '压力传感器实验',
+    icon: Gauge,
+    description: '了解压力传感器的测量原理与特性',
+  },
+  {
+    id: '3',
+    name: '位移传感器实验',
+    icon: Radio,
+    description: '掌握位移传感器的检测方法',
+  },
+  {
+    id: '4',
+    name: '光电传感器实验',
+    icon: Zap,
+    description: '探索光电传感器的光电转换原理',
+  },
+  {
+    id: '5',
+    name: '湿度传感器实验',
+    icon: Droplets,
+    description: '研究湿度传感器的测量技术',
+  },
+];
+
+// localStorage 相关的工具函数
+const STORAGE_KEY = 'sensor-lab-experiments';
+
+/**
+ * 从 localStorage 加载实验数据
+ * @returns {Array} 返回保存的实验顺序，如果没有保存则返回 null
+ */
+export const loadExperimentsFromStorage = () => {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      const storedIds = JSON.parse(stored);
+      // 根据保存的 ID 顺序重新排列实验数据
+      const orderedExperiments = storedIds
+        .map((id) => defaultExperiments.find((exp) => exp.id === id))
+        .filter(Boolean); // 过滤掉可能不存在的项目
+
+      // 如果顺序数量匹配，返回排序后的数据
+      if (orderedExperiments.length === defaultExperiments.length) {
+        return orderedExperiments;
+      }
+    }
+  } catch (error) {
+    console.error('加载实验数据失败:', error);
+  }
+  return null;
+};
+
+/**
+ * 保存实验数据到 localStorage
+ * @param {Array} experiments - 实验数据数组
+ */
+export const saveExperimentsToStorage = (experiments) => {
+  try {
+    const ids = experiments.map((exp) => exp.id);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(ids));
+  } catch (error) {
+    console.error('保存实验数据失败:', error);
+  }
+};