复用媒体框收口侧栏缩略图

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

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

补充 primitive 测试覆盖共享媒体框委托，并更新 TRACKING。

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);
+});

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>}