Match3D & Puzzle: runtime UI, assets, drag fix

Backend: stop treating background music as a required draft asset and remove auto-submit/plan for background music; load persisted generated UI/assets into Match3D agent session responses (added helpers to resolve profile id and fetch existing generated assets). Frontend: make Match3D result preview reuse runtime UI styles, unify runtime settings entry, update PuzzleRuntime to apply immediate pointermove transforms (disable drag transition), use SVG clipPath for merged piece rounding, ensure PuzzleRuntimeShell supplies platform theme classes, and adjust related tests. Docs & logs: update decision log, pitfalls and product docs to reflect these changes.

src/components/match3d-result/Match3DResultView.test.tsx

@@ -1349,12 +1349,121 @@ describe('Match3DResultView', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '预览UI页面' }));
     expect(screen.getByRole('dialog', { name: 'UI预览' })).toBeTruthy();
+    expect(screen.getByText('第 1 关')).toBeTruthy();
+    expect(screen.getByText('抓大鹅')).toBeTruthy();
     expect(screen.getByText('1:30')).toBeTruthy();
+    const previewBoard = screen.getByTestId('match3d-ui-preview-board');
+    expect(previewBoard.className).toContain('bg-transparent');
+    expect(previewBoard.className).not.toContain('rounded-full');
+    const containerImage = document.querySelector(
+      'img[src="/match3d-background-references/pot-fused-reference.png"]',
+    );
+    expect(containerImage).toBeTruthy();
+    expect(containerImage?.className).toContain('w-[min(99vw,34rem)]');
+    expect(containerImage?.className).toContain('-translate-x-1/2');
+    expect(
+      document.querySelector('.animate-spin, [class*="border-l-transparent"]'),
+    ).toBeNull();
+    expect(
+      document.querySelector(
+        'svg[class*="lucide-settings"], [data-lucide="settings"]',
+      ),
+    ).toBeTruthy();
+  });
+
+  test('素材配置 UI 子 Tab 从物品挂载资产展示生成背景和容器', async () => {
+    const onStartTestRun = vi.fn();
+    const profile = createProfile({
+      backgroundPrompt: null,
+      backgroundImageSrc: null,
+      backgroundImageObjectKey: null,
+      generatedBackgroundAsset: null,
+      generatedItemAssets: [
+        {
+          ...createReadyGeneratedItemAsset(1),
+          itemName: '草莓',
+          backgroundAsset: {
+            prompt: '果园背景',
+            imageSrc:
+              '/generated-match3d-assets/session/profile/background/background.png',
+            imageObjectKey:
+              'generated-match3d-assets/session/profile/background/background.png',
+            containerPrompt: '果园容器',
+            containerImageSrc:
+              '/generated-match3d-assets/session/profile/ui-container/container.png',
+            containerImageObjectKey:
+              'generated-match3d-assets/session/profile/ui-container/container.png',
+            status: 'image_ready',
+            error: null,
+          },
+        },
+      ],
+    });
+    vi.mocked(match3dWorksService.updateMatch3DWork).mockResolvedValue({
+      item: createProfile({ generatedItemAssets: [] }),
+    });
+    vi.mocked(
+      match3dWorksService.updateMatch3DGeneratedItemAssets,
+    ).mockResolvedValue({
+      item: profile,
+    });
+
+    render(
+      <Match3DResultView
+        profile={profile}
+        onBack={() => {}}
+        onStartTestRun={onStartTestRun}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '素材配置' }));
+    fireEvent.click(screen.getByRole('button', { name: 'UI' }));
+
+    expect(screen.getByAltText('游戏背景图').getAttribute('src')).toBe(
+      '/generated-match3d-assets/session/profile/background/background.png',
+    );
+    expect(screen.getByLabelText('UI背景图画面描述提示词')).toHaveProperty(
+      'value',
+      '果园背景',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '预览UI页面' }));
+    expect(
+      document.querySelector(
+        'img[src="/generated-match3d-assets/session/profile/background/background.png"]',
+      ),
+    ).toBeTruthy();
+    expect(
+      document.querySelector(
+        'img[src="/generated-match3d-assets/session/profile/ui-container/container.png"]',
+      ),
+    ).toBeTruthy();
     expect(
       document.querySelector(
         'img[src="/match3d-background-references/pot-fused-reference.png"]',
       ),
-    ).toBeTruthy();
+    ).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: '试玩' }));
+
+    await waitFor(() => {
+      expect(onStartTestRun).toHaveBeenCalledWith(
+        expect.objectContaining({
+          backgroundPrompt: '果园背景',
+          backgroundImageSrc:
+            '/generated-match3d-assets/session/profile/background/background.png',
+          generatedBackgroundAsset: expect.objectContaining({
+            imageSrc:
+              '/generated-match3d-assets/session/profile/background/background.png',
+            containerImageSrc:
+              '/generated-match3d-assets/session/profile/ui-container/container.png',
+          }),
+        }),
+        {
+          itemTypeCountOverride: 1,
+        },
+      );
+    });
   });
 
   test('素材配置 UI 子 Tab 修改提示词后调用背景图生成接口并刷新素材', async () => {