- 将实验数据抽离到独立配置文件 (src/data/experiments.js) - 添加 localStorage 持久化存储功能 - 实现拖拽排序结果的自动保存和加载 - 页面刷新后保持用户自定义的排序顺序 - 添加完善的错误处理和注释 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
76 lines
2.0 KiB
JavaScript
76 lines
2.0 KiB
JavaScript
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);
|
|
}
|
|
};
|