From 6bc2f11d04f58323463fc21494fd7dab94898b6b Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Sun, 14 Jun 2026 04:36:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E7=94=A8=E9=A1=B9=E7=9B=AE=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E9=A2=84=E8=A7=88=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

项目卡片预览改为复用 PlatformMediaFrame

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

更新 TRACKING 记录媒体预览组件收口
---
 TRACKING.md                                   |  1 +
 src/components/project/ProjectGalleryView.tsx | 18 +++++++++++-------
 src/index.css                                 | 14 ++------------
 3 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/TRACKING.md b/TRACKING.md
index 0d996795..e943dd0c 100644
--- a/TRACKING.md
+++ b/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`。
diff --git a/src/components/project/ProjectGalleryView.tsx b/src/components/project/ProjectGalleryView.tsx
index c4eb0db0..ec3c6011 100644
--- a/src/components/project/ProjectGalleryView.tsx
+++ b/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>
diff --git a/src/index.css b/src/index.css
index 68abddff..568bca0e 100644
--- a/src/index.css
+++ b/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 {