复用项目卡片预览组件

项目卡片预览改为复用 PlatformMediaFrame

删除项目页局部预览框比例和图片填充样式

更新 TRACKING 记录媒体预览组件收口

TRACKING.md

@@ -84,3 +84,4 @@
 - 2026-06-14 组件复用修正：编辑器生成 / 修改流程中的生成中与失败提示改为复用 `PlatformStatusMessage`，删除局部状态条颜色和错误变体样式；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformStatusMessage.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
 - 2026-06-14 组件复用修正：编辑器画布背景色菜单改为复用 `PlatformFloatingMenu` 和 `PlatformFloatingMenuItem`，删除局部菜单容器定位 / 边框 / 阴影样式；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformFloatingMenu.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
 - 2026-06-14 组件复用修正：编辑器“修改图片”弹窗提交按钮改为复用 `PlatformActionButton`，删除局部提交按钮颜色、边框和禁用态样式；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformActionButton.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。
+- 2026-06-14 组件复用修正：项目卡片预览改为复用 `PlatformMediaFrame`，删除项目页局部预览框比例、图片填充和背景样式；验证命令：`npm run test -- src/components/project/ProjectGalleryView.test.tsx src/components/common/PlatformMediaFrame.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`。

src/components/project/ProjectGalleryView.tsx

@@ -24,6 +24,7 @@ import {
   PlatformFloatingMenuItem,
 } from '../common/PlatformFloatingMenu';
 import { PlatformIconButton } from '../common/PlatformIconButton';
+import { PlatformMediaFrame } from '../common/PlatformMediaFrame';
 import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
 import { PlatformTextField } from '../common/PlatformTextField';
 import { UnifiedModal } from '../common/UnifiedModal';
@@ -214,18 +215,21 @@ export function ProjectGalleryView({ onOpenProject }: ProjectGalleryViewProps) {
               }}
               aria-label={`打开项目${project.title}`}
             >
-              <span className="project-gallery__preview">
-                {preview ? (
-                  <img src={preview.imageSrc} alt="" />
-                ) : (
-                  <span className="project-gallery__preview-empty" />
-                )}
+              <PlatformMediaFrame
+                src={preview?.imageSrc}
+                alt=""
+                fallbackLabel="项目"
+                aspect="standard"
+                surface="bright"
+                className="project-gallery__preview"
+                fallbackContent={<span className="project-gallery__preview-empty" />}
+              >
                 {isSelectionMode ? (
                   <span className="project-gallery__checkbox">
                     {selected ? <Check className="h-4 w-4" /> : null}
                   </span>
                 ) : null}
-              </span>
+              </PlatformMediaFrame>
               <span className="project-gallery__meta">
                 <span>{project.title}</span>
                 <span>{formatProjectUpdatedAt(project.updatedAt)}</span>

src/index.css

@@ -3067,18 +3067,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .project-gallery__preview {
-  position: relative;
-  display: grid;
-  aspect-ratio: 4 / 3;
-  overflow: hidden;
-  place-items: center;
-  background: #f3f5f8;
-}
-
-.project-gallery__preview img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  border: 0;
+  border-radius: 0;
 }
 
 .project-gallery__preview-empty {