复用项目卡片预览组件

项目卡片预览改为复用 PlatformMediaFrame

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

更新 TRACKING 记录媒体预览组件收口
This commit is contained in:
2026-06-14 04:36:50 +08:00
parent f59dee849a
commit 6bc2f11d04
3 changed files with 14 additions and 19 deletions

View File

@@ -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 组件复用修正:编辑器生成 / 修改流程中的生成中与失败提示改为复用 `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 组件复用修正:编辑器画布背景色菜单改为复用 `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 组件复用修正:编辑器“修改图片”弹窗提交按钮改为复用 `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`

View File

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

View File

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