From fd768493faf1610ab2073880d071cfad049f1ec7 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Sun, 14 Jun 2026 16:41:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E7=94=A8=E5=AA=92=E4=BD=93=E6=A1=86?=
 =?UTF-8?q?=E6=94=B6=E5=8F=A3=E4=BE=A7=E6=A0=8F=E7=BC=A9=E7=95=A5=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

编辑器 SidebarMediaItem 缩略图改为复用 PlatformMediaFrame，统一素材和图层预览框结构。

删除侧栏缩略图内部 img 填充的重复 CSS，保留编辑器局部尺寸和背景样式。

补充 primitive 测试覆盖共享媒体框委托，并更新 TRACKING。
---
 TRACKING.md                                   |  1 +
 .../ImageCanvasEditorPrimitives.test.tsx      | 39 +++++++++++++++++--
 .../ImageCanvasEditorPrimitives.tsx           | 12 ++++--
 src/index.css                                 |  7 ----
 4 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/TRACKING.md b/TRACKING.md
index e20b60c1..4882e11f 100644
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -105,3 +105,4 @@
 - 2026-06-14 组件复用修正：编辑器顶部缩放百分比触发器改为复用 `PlatformInlineOptionButton`，让缩放菜单入口和生成器比例 / 模型 pill 共用“当前选项触发菜单”的按钮原语；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformInlineOptionButton.test.tsx`、`npm run typecheck`。
 - 2026-06-14 组件复用修正：编辑器左下面板 dock 的画布背景色入口改为复用 `PlatformIconButton`，用色块作为 icon 承载当前背景色，和素材 / 图层 / 小地图入口保持同一图标按钮原语；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformIconButton.test.tsx`、`npm run typecheck`。
 - 2026-06-14 组件复用修正：编辑器素材侧栏的新建文件夹、文件夹重命名和素材重命名输入框改为复用 `PlatformTextField`，输入框局部样式改为明确 class 覆盖，不再按 `input` 标签选择器重复维护基础输入 chrome；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformTextField.test.tsx`、`npm run typecheck`。
+- 2026-06-14 组件复用修正：编辑器侧栏素材和图层缩略图通过 `SidebarMediaItem` 改为复用 `PlatformMediaFrame`，删除缩略图内部图片填充的重复 CSS，统一媒体预览框和 fallback 结构；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformMediaFrame.test.tsx`、`npm run typecheck`。
diff --git a/src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx b/src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx
index 83901eb0..e6860b09 100644
--- a/src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorPrimitives.test.tsx
@@ -1,10 +1,13 @@
 /* @vitest-environment jsdom */
 
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Check } from 'lucide-react';
-import { expect, test } from 'vitest';
+import { expect, test, vi } from 'vitest';
 
-import { EditorIconButton } from './ImageCanvasEditorPrimitives';
+import {
+  EditorIconButton,
+  SidebarMediaItem,
+} from './ImageCanvasEditorPrimitives';
 
 test('editor icon button delegates accessible icon chrome to the platform primitive', () => {
   render(
@@ -26,3 +29,33 @@ test('editor icon button delegates accessible icon chrome to the platform primit
   expect(button.getAttribute('aria-pressed')).toBe('true');
   expect(button.getAttribute('aria-expanded')).toBe('true');
 });
+
+test('sidebar media item delegates thumbnail chrome to the platform media frame', () => {
+  const onPrimaryClick = vi.fn();
+  render(
+    <SidebarMediaItem
+      title="拼图素材"
+      detail="1024 x 1024"
+      imageSrc="data:image/png;base64,one"
+      imageAlt="素材：拼图素材"
+      primaryLabel="添加拼图素材"
+      onPrimaryClick={onPrimaryClick}
+      rowClassName="image-canvas-editor__asset-row"
+      primaryClassName="image-canvas-editor__asset-button"
+      thumbnailClassName="image-canvas-editor__asset-thumb"
+      metaClassName="image-canvas-editor__asset-meta"
+    />,
+  );
+
+  const button = screen.getByRole('button', { name: '添加拼图素材' });
+  const image = screen.getByRole('img', { name: '素材：拼图素材' });
+  const frame = image.closest('.platform-media-frame');
+
+  expect(frame?.className).toContain('platform-media-frame');
+  expect(frame?.className).toContain('image-canvas-editor__asset-thumb');
+  expect(screen.getByText('1024 x 1024')).toBeTruthy();
+
+  fireEvent.click(button);
+
+  expect(onPrimaryClick).toHaveBeenCalledTimes(1);
+});
diff --git a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
index a0b6a622..77fe6644 100644
--- a/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
+++ b/src/components/image-editor/ImageCanvasEditorPrimitives.tsx
@@ -6,6 +6,7 @@ import type {
 } from 'react';
 
 import { PlatformIconButton } from '../common/PlatformIconButton';
+import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
 
 type IconComponent = ComponentType<{ className?: string }>;
 
@@ -97,9 +98,14 @@ export function SidebarMediaItem({
         onClick={onPrimaryClick}
         aria-label={primaryLabel}
       >
-        <span className={thumbnailClassName}>
-          <img src={imageSrc} alt={imageAlt} />
-        </span>
+        <PlatformMediaFrame
+          src={imageSrc}
+          alt={imageAlt}
+          fallbackLabel={title}
+          aspect="square"
+          surface="none"
+          className={thumbnailClassName}
+        />
       </button>
       <div className={metaClassName}>
         {titleNode ?? <span>{title}</span>}
diff --git a/src/index.css b/src/index.css
index 36196f59..73231ca4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3522,7 +3522,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   background-size: 1rem 1rem;
 }
 
-.image-canvas-editor__asset-thumb img,
 .image-canvas-editor__layer img {
   width: 100%;
   height: 100%;
@@ -3653,12 +3652,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   background: #e2e8f0;
 }
 
-.image-canvas-editor__layer-row-thumb img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 .image-canvas-editor__layer-row-meta {
   display: grid;
   min-width: 0;