1

src/components/puzzle-runtime/PuzzleRuntimeShell.tsx

@@ -41,6 +41,7 @@ type PuzzleRuntimeShellProps = {
   isBusy?: boolean;
   error?: string | null;
   hideBackButton?: boolean;
+  embedded?: boolean;
   onBack: () => void;
   onRemodelWork?: (profileId: string) => void | Promise<void>;
   onSwapPieces: (payload: SwapPuzzlePiecesRequest) => void;
@@ -308,6 +309,7 @@ export function PuzzleRuntimeShell({
   isBusy = false,
   error = null,
   hideBackButton = false,
+  embedded = false,
   onBack,
   onRemodelWork,
   onSwapPieces,
@@ -787,7 +789,9 @@ export function PuzzleRuntimeShell({
 
   if (!run || !currentLevel || !board) {
     return (
-      <div className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-950 text-white">
+      <div
+        className={`${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex items-center justify-center bg-slate-950 text-white`}
+      >
         <div className="flex items-center gap-2 rounded-full bg-white/10 px-5 py-3 text-sm">
           <Loader2 className="h-4 w-4 animate-spin" />
           正在进入拼图关卡
@@ -1079,7 +1083,9 @@ export function PuzzleRuntimeShell({
   };
 
   return (
-    <div className="fixed inset-0 z-[100] flex justify-center bg-slate-950 text-white">
+    <div
+      className={`${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex justify-center bg-slate-950 text-white`}
+    >
       <div className="relative h-full w-full overflow-hidden bg-[radial-gradient(circle_at_50%_20%,rgba(251,191,36,0.18),transparent_28%),radial-gradient(circle_at_20%_80%,rgba(249,115,22,0.16),transparent_26%),linear-gradient(180deg,#2d160e,#020617)]">
         {currentLevel.coverImageSrc ? (
           <ResolvedAssetImage
@@ -1346,7 +1352,7 @@ export function PuzzleRuntimeShell({
                       <path
                         d={outlinePath}
                         data-merged-group-outline="true"
-                        fill="rgba(52, 211, 153, 0.08)"
+                        fill="transparent"
                         fillRule="evenodd"
                       />
                       <path
@@ -1380,7 +1386,7 @@ export function PuzzleRuntimeShell({
                     {group.pieces.map((piece) => (
                       <div
                         key={piece.pieceId}
-                        className="pointer-events-auto relative touch-none overflow-hidden bg-emerald-300/10 shadow-[0_12px_30px_rgba(6,78,59,0.16)]"
+                        className="pointer-events-auto relative touch-none overflow-hidden shadow-[0_12px_30px_rgba(15,23,42,0.16)]"
                         data-merged-piece-outline="true"
                         style={{
                           gridColumn: piece.localCol + 1,
@@ -1422,7 +1428,6 @@ export function PuzzleRuntimeShell({
                         ) : (
                           <div className="absolute inset-0 bg-[linear-gradient(145deg,rgba(52,211,153,0.38),rgba(6,78,59,0.68))]" />
                         )}
-                        <div className="absolute inset-0 bg-black/8" />
                       </div>
                     ))}
                   </div>