fix:解决拖拽问题

src/pages/Home.tsx

@@ -1,108 +1,32 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import {
-  DndContext,
-  closestCenter,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  DragEndEvent,
-} 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';
+import { useNavigate } from "react-router-dom";
+import initialPageImage from "@/assets/images/初始页.png";
+import { BackgroundImage, Image } from "@/components";
+import { getStaticImage } from "@/utils";
 
 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: DragEndEvent) {
-    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: string) {
-    navigate(`/experiment/${id}`);
-  }
+  const handleStartExperiment = () => {
+    console.log("点击开启实验");
+    navigate("/experiment");
+  };
 
   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>
+    <BackgroundImage
+      src={initialPageImage}
+      alt="传感器实验首页"
+      className="h-full w-full relative"
+      backgroundSize="cover"
+      backgroundPosition="center"
+      onLoad={() => console.log("背景图片加载完成")}
+      onError={() => console.log("背景图片加载失败")}
+    >
+      <Image
+        src={getStaticImage("home/按钮-开启实验.png")}
+        alt="开始实验按钮"
+        className="absolute bottom-10 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+        onClick={handleStartExperiment}
+      />
+    </BackgroundImage>
   );
 }