feat: update README and enhance Menu component with teacher selection functionality

- Updated project title in README.md to reflect the new focus on "名师工作室".
- Enhanced Image component to accept custom styles.
- Implemented teacher selection feature in Menu component, allowing users to select and display different teacher avatars with corresponding positions and transitions.

README.md

@@ -1,6 +1,6 @@
-# 传感器及检测技术 - 实验课件系统
+# 名师工作室 - 实验课件系统
 
-这是一个基于 React 的传感器及检测技术实验课件交互式平台。
+这是一个基于 React 的名师工作室实验课件交互式平台。
 
 ## 技术栈
 

src/components/Image.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from "react";
 import { clsx } from "clsx";
 
 interface ImageProps {
+  style?: React.CSSProperties;
   src: string;
   children?: React.ReactNode;
   alt?: string;
@@ -23,6 +24,7 @@ interface ImageProps {
 }
 
 export default function Image({
+  style,
   src,
   children,
   alt,
@@ -113,7 +115,7 @@ export default function Image({
           "cursor-pointer transition-all duration-300 hover:scale-105 hover:brightness-110",
         className
       )}
-      style={{ width, height }}
+      style={{ width, height, ...style }}
       onClick={onClick}
     >
       {/* 加载占位符 */}

src/pages/Menu.tsx

@@ -1,9 +1,53 @@
 import { useNavigate } from "react-router-dom";
 import { BackgroundImage, Image } from "@/components";
 import { getStaticImage } from "@/utils";
+import { useState } from "react";
+
+/**
+ * 卢航-未选中.png
+ * 龚丹-未选中.png
+ * 曹君-未选中.png
+ */
+const teachers = [
+  {
+    id: 1,
+    name: "卢航",
+    avatar: getStaticImage("menu/卢航-未选中.png"),
+    selectedAvatar: getStaticImage("menu/卢航-选中.png"),
+    position: {
+      top: "20%",
+      left: "12%",
+    },
+  },
+  {
+    id: 2,
+    name: "曹君",
+    avatar: getStaticImage("menu/曹君-未选中.png"),
+    selectedAvatar: getStaticImage("menu/名师曹君选中.png"),
+    position: {
+      top: "10%",
+      left: "39%",
+    },
+  },
+  {
+    id: 3,
+    name: "龚丹",
+    avatar: getStaticImage("menu/龚丹-未选中.png"),
+    selectedAvatar: getStaticImage("menu/曹君-选中.png"),
+    position: {
+      top: "20%",
+      left: "65%",
+    },
+  },
+];
 
 export default function Home() {
   const navigate = useNavigate();
+  const [selectedTeacherId, setSelectedTeacherId] = useState(0);
+
+  const handleSelectTeacher = (teacherId: number) => {
+    setSelectedTeacherId(teacherId);
+  };
 
   const handleStartExperiment = () => {
     console.log("点击开启实验");
@@ -25,12 +69,42 @@ export default function Home() {
         onClick={handleStartExperiment}
       />
 
+      <Image
+        src={getStaticImage("menu/内页居中标题.png")}
+        alt="文字"
+        className="absolute bottom-0 left-1/2 transform -translate-x-1/2"
+      />
+
       <BackgroundImage
         src={getStaticImage("menu/转盘合.png")}
-        className="absolute w-full h-500 -bottom-1/5 left-0 pointer-events-none"
+        className="absolute w-full h-500 -bottom-1/5 left-0"
         backgroundSize="cover"
         backgroundPosition="center"
-      ></BackgroundImage>
+      >
+        {teachers.map((teacher) => (
+          <Image
+            key={teacher.id}
+            src={
+              selectedTeacherId === teacher.id
+                ? teacher.selectedAvatar
+                : teacher.avatar
+            }
+            alt={teacher.name}
+            onClick={() => handleSelectTeacher(teacher.id)}
+            className="absolute"
+            style={{
+              top:
+                selectedTeacherId === teacher.id ? "4%" : teacher.position.top,
+              left:
+                selectedTeacherId === teacher.id
+                  ? "36%"
+                  : teacher.position.left,
+              transition: "transform 0.2s ease, z-index 0.2s ease",
+            }}
+            button={selectedTeacherId !== teacher.id}
+          />
+        ))}
+      </BackgroundImage>
     </BackgroundImage>
   );
 }