复用项目卡片预览组件
项目卡片预览改为复用 PlatformMediaFrame 删除项目页局部预览框比例和图片填充样式 更新 TRACKING 记录媒体预览组件收口
This commit is contained in:
@@ -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`。
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user