feat: enhance modal functionality and integrate new components

- Added keyframes and animation for a smooth scale-in effect in the Tailwind configuration.
- Updated Image component to improve quality handling and style definitions.
- Introduced WordViewer and WordViewerModal components for document viewing capabilities.
- Enhanced Modal component to support embedded mode with customizable position and dimensions.
- Integrated IframeModal across various pages for user assistance and content display.
- Updated Content and Menu pages to utilize new components and improve user interaction.
- Added utility function to retrieve public paths for resources.

src/pages/Menu.tsx

@@ -1,7 +1,8 @@
 import { useNavigate } from "react-router-dom";
-import { BackgroundImage, Image } from "@/components";
+import { BackgroundImage, Image, Alert } from "@/components";
 import { getStaticImage } from "@/utils";
 import { useState } from "react";
+import { IframeModal } from "@/components/Modal";
 
 /**
  * 卢航-未选中.png
@@ -33,7 +34,7 @@ const teachers = [
     id: 3,
     name: "龚丹",
     avatar: getStaticImage("menu/龚丹-未选中.png"),
-    selectedAvatar: getStaticImage("menu/曹君-选中.png"),
+    selectedAvatar: getStaticImage("menu/龚丹-选中.png"),
     position: {
       top: "20%",
       left: "65%",
@@ -44,8 +45,15 @@ const teachers = [
 export default function Home() {
   const navigate = useNavigate();
   const [selectedTeacherId, setSelectedTeacherId] = useState(0);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [showTipModal, setShowTipModal] = useState(false);
 
   const handleSelectTeacher = (teacherId: number) => {
+    if (teacherId !== 2) {
+      // 点击卢航或龚丹时显示提示
+      setShowTipModal(true);
+      return;
+    }
     setSelectedTeacherId(teacherId);
     navigate("/Publicity");
   };
@@ -55,6 +63,14 @@ export default function Home() {
     // navigate("/experiment");
   };
 
+  const handleAvatarClick = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
   return (
     <BackgroundImage
       src={getStaticImage("menu/首页背景.png")}
@@ -76,6 +92,44 @@ export default function Home() {
         className="absolute bottom-0 left-1/2 transform -translate-x-1/2"
       />
 
+      {/* 数字人头像 */}
+      {!isModalOpen && (
+        <>
+          <div
+            className="flex flex-col items-center absolute right-4 bottom-2 cursor-pointer hover:scale-105 transition-all duration-300 z-20"
+            onClick={handleAvatarClick}
+          >
+            <Image
+              src={getStaticImage("publicity/数字人-头像框.png")}
+              alt="数字人头像"
+            />
+            <span className="text-white text-2xl font-bold tracking-wide">
+              点击我随时为你解答
+            </span>
+          </div>
+        </>
+      )}
+
+      {/* 嵌入式客服对话框 */}
+      <IframeModal
+        isOpen={isModalOpen}
+        onClose={handleCloseModal}
+        url="https://www.edutech.host/digitalHuman/"
+        title="数字人助手"
+        mode="embedded"
+        position="bottom-right"
+        width="420px"
+        height="650px"
+      />
+
+      {/* 提示弹窗 */}
+      <Alert
+        isOpen={showTipModal}
+        onClose={() => setShowTipModal(false)}
+        message="该名师工作室数字睿教正在筹划中"
+        type="warning"
+      />
+
       <BackgroundImage
         src={getStaticImage("menu/转盘合.png")}
         className="absolute w-full h-500 -bottom-1/5 left-0"
@@ -83,27 +137,38 @@ export default function Home() {
         backgroundPosition="center"
       >
         {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:
+          <>
+            <Image
+              key={teacher.id}
+              src={
                 selectedTeacherId === teacher.id
-                  ? "36%"
-                  : teacher.position.left,
-              transition: "transform 0.2s ease, z-index 0.2s ease",
-            }}
-            button={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}
+            />
+
+            {/* <div className="absolute top-[25%] left-[12%] text-gray-500 text-3xl font-bold cursor-not-allowed">
+              该名师工作室数字睿教正在筹划中
+            </div>
+            <div className="absolute top-[25%] left-[65%] text-gray-500 text-3xl font-bold  cursor-not-allowed">
+              该名师工作室数字睿教正在筹划中
+            </div> */}
+          </>
         ))}
       </BackgroundImage>
     </BackgroundImage>