1

src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx

@@ -294,6 +294,38 @@ test('合并块按实际拼块外轮廓描边', () => {
   expect(outlinedPieces[2]?.className).toContain('rounded-bl-[0.85rem]');
 });
 
+test('基础单块使用圆角裁剪图片', () => {
+  const playingRun: PuzzleRunSnapshot = {
+    ...clearedRun,
+    currentLevel: {
+      ...clearedRun.currentLevel!,
+      status: 'playing',
+      startedAtMs: Date.now(),
+      coverImageSrc: '/puzzle.png',
+      board: {
+        ...clearedRun.currentLevel!.board,
+        allTilesResolved: false,
+      },
+    },
+  };
+
+  const { container } = renderPuzzleRuntime(
+    <PuzzleRuntimeShell
+      run={playingRun}
+      onBack={vi.fn()}
+      onSwapPieces={vi.fn()}
+      onDragPiece={vi.fn()}
+      onAdvanceNextLevel={vi.fn()}
+    />,
+  );
+
+  const basePiece = container.querySelector(
+    '[data-piece-id="piece-0"]',
+  ) as HTMLElement | null;
+  expect(basePiece?.className).toContain('overflow-hidden');
+  expect(basePiece?.className).toContain('rounded-[0.85rem]');
+});
+
 test('道具确认弹窗暂停时间，提示只演示不直接移动拼块', async () => {
   const onPauseChange = vi.fn();
   const onUseProp = vi.fn().mockResolvedValue(clearedRun);

src/components/puzzle-runtime/PuzzleRuntimeShell.tsx

@@ -1171,7 +1171,7 @@ export function PuzzleRuntimeShell({
                       pieceElementRefMap.current.delete(piece.pieceId);
                     }}
                     data-piece-id={piece?.pieceId ?? undefined}
-                    className={`relative flex h-full items-center justify-center border-2 border-white/22 text-sm font-black transition ${
+                    className={`relative flex h-full items-center justify-center overflow-hidden rounded-[0.85rem] border-2 border-white/22 text-sm font-black transition ${
                       occupied
                         ? isSelected
                           ? 'border-amber-200 bg-amber-400/84 text-slate-950 shadow-[0_12px_30px_rgba(251,191,36,0.22)]'