diff --git a/src/App.jsx b/src/App.jsx index 83c145e..05638e3 100644 --- a/src/App.jsx +++ b/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([ - { 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 [experiments, setExperiments] = useState(() => { + return loadExperimentsFromStorage() || defaultExperiments; + }); + + // 当实验数据变化时,保存到 localStorage + useEffect(() => { + saveExperimentsToStorage(experiments); + }, [experiments]); const sensors = useSensors( useSensor(PointerSensor), diff --git a/src/data/experiments.js b/src/data/experiments.js new file mode 100644 index 0000000..906b14b --- /dev/null +++ b/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); + } +};