fix: refine home animation embed layout

components/home/home-animation-embed.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 
 type HomeAnimationEmbedProps = {
@@ -15,6 +18,23 @@ export function HomeAnimationEmbed({
   className,
   frameClassName,
 }: HomeAnimationEmbedProps) {
+  const [interactive, setInteractive] = useState(false);
+
+  useEffect(() => {
+    if (!interactive) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setInteractive(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [interactive]);
+
   if (!htmlContent.trim()) {
     return null;
   }
@@ -25,6 +45,7 @@ export function HomeAnimationEmbed({
         "overflow-hidden rounded-[24px] border border-black/10 bg-white shadow-[0_10px_24px_rgba(0,0,0,0.05)]",
         className,
       )}
+      onMouseLeave={() => setInteractive(false)}
     >
       {title || description ? (
         <div className="flex items-start justify-between gap-4 border-b border-black/8 px-4 py-3">
@@ -36,17 +57,56 @@ export function HomeAnimationEmbed({
               <div className="mt-1 text-[12px] text-black/45">{description}</div>
             ) : null}
           </div>
+          <button
+            type="button"
+            className={cn(
+              "inline-flex h-8 items-center rounded-full px-3 text-[12px] font-medium transition-colors",
+              interactive
+                ? "bg-black text-white hover:bg-black/85"
+                : "border border-black/10 bg-white text-black/65 hover:bg-black/5",
+            )}
+            onClick={() => setInteractive((value) => !value)}
+          >
+            {interactive ? "退出互动" : "进入互动"}
+          </button>
         </div>
       ) : null}
 
-      <div className={cn("h-[360px] w-full bg-[#f6f6f6] md:h-[420px]", frameClassName)}>
+      <div
+        className={cn(
+          "relative h-[360px] w-full bg-[#f6f6f6] md:h-[420px]",
+          frameClassName,
+        )}
+      >
         <iframe
           title={title || "首页互动动画"}
           srcDoc={htmlContent}
           sandbox="allow-scripts allow-forms allow-pointer-lock"
           loading="lazy"
-          className="h-full w-full border-0"
+          className={cn(
+            "h-full w-full border-0 transition-opacity",
+            interactive ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-95",
+          )}
         />
+
+        {!interactive ? (
+          <button
+            type="button"
+            className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-white/12 backdrop-blur-[1px]"
+            onClick={() => setInteractive(true)}
+          >
+            <span className="rounded-full bg-white/92 px-4 py-2 text-[13px] font-medium text-black shadow-sm">
+              点击进入互动
+            </span>
+            <span className="text-[12px] text-black/55">
+              默认保留页面滚动，进入互动后可拖拽和滚轮操作，按 `Esc` 或移出模块退出
+            </span>
+          </button>
+        ) : (
+          <div className="pointer-events-none absolute bottom-3 right-3 rounded-full bg-black/70 px-3 py-1 text-[11px] text-white">
+            互动中
+          </div>
+        )}
       </div>
     </div>
   );

components/home/lovart-home.tsx

@@ -1752,12 +1752,8 @@ export function LovartHome({
           </div>
 
           {homeAnimationData?.enabled && homeAnimationData?.htmlContent ? (
-            <div className="mx-auto mt-6 w-full max-w-[780px]">
-              <HomeAnimationEmbed
-                htmlContent={homeAnimationData.htmlContent}
-                title="互动演示"
-                description="支持拖拽、滚轮与实时交互，模块内容可在系统设置中替换 HTML 更新。"
-              />
+            <div className="mt-8 w-full">
+              <HomeAnimationEmbed htmlContent={homeAnimationData.htmlContent} />
             </div>
           ) : null}