复用编辑器元数据弹窗外壳

编辑器生成图元数据弹窗改为复用 UnifiedModal

删除元数据弹窗手写遮罩和 dialog 外壳

更新 TRACKING 记录弹窗组件收口
This commit is contained in:
2026-06-14 01:29:46 +08:00
parent f0cb7ac685
commit a1a8b7859c
3 changed files with 40 additions and 52 deletions

View File

@@ -77,3 +77,4 @@
- 2026-06-14 组件复用修正:项目页重命名弹窗改为复用 `UnifiedModal``PlatformTextField``PlatformActionButton`,删除项目页局部 modal / input 样式,避免同类弹窗和表单 chrome 重复实现。
- 2026-06-14 组件复用修正:新增 `PlatformFloatingMenu` / `PlatformFloatingMenuItem`,项目卡片右下角更多菜单改为复用平台浮层菜单原语;验证命令:`npm run test -- src/components/common/PlatformFloatingMenu.test.tsx src/components/project/ProjectGalleryView.test.tsx``npm run typecheck``npm run check:encoding``git diff --check`
- 2026-06-14 组件复用修正:`PlatformFloatingMenu` 增加菜单标签和四向定位,编辑器顶部缩放菜单改为复用同一浮层菜单原语;验证命令:`npm run test -- src/components/common/PlatformFloatingMenu.test.tsx src/components/project/ProjectGalleryView.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx``npm run typecheck``npm run check:encoding``git diff --check`
- 2026-06-14 组件复用修正:编辑器生成图元数据弹窗改为复用 `UnifiedModal`不再手写元数据弹窗遮罩、dialog role 和关闭按钮;验证命令:`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/UnifiedModal.test.tsx``npm run typecheck``npm run check:encoding``git diff --check`

View File

@@ -55,6 +55,7 @@ import {
PlatformFloatingMenu,
PlatformFloatingMenuItem,
} from '../common/PlatformFloatingMenu';
import { UnifiedModal } from '../common/UnifiedModal';
type EditorAsset = {
id: string;
@@ -2115,47 +2116,36 @@ export function ImageCanvasEditorView() {
</div>
</div>
{metadataLayer ? (
<div
className="image-canvas-editor__modal-backdrop"
onPointerDown={() => setMetadataLayer(null)}
>
<div
className="image-canvas-editor__metadata-dialog"
role="dialog"
aria-label={`${metadataLayer.title}元数据`}
aria-modal="true"
onPointerDown={(event) => event.stopPropagation()}
>
<div className="image-canvas-editor__metadata-header">
<h2>{metadataLayer.title}</h2>
<EditorIconButton
label="关闭元数据"
icon={X}
onClick={() => setMetadataLayer(null)}
/>
</div>
<dl className="image-canvas-editor__metadata-grid">
<dt></dt>
<dd>{metadataLayer.sourceType}</dd>
<dt></dt>
<dd>
{metadataLayer.originalWidth} x {metadataLayer.originalHeight}
</dd>
<dt></dt>
<dd>{metadataLayer.model ?? '-'}</dd>
<dt></dt>
<dd>{metadataLayer.provider ?? '-'}</dd>
<dt></dt>
<dd>{metadataLayer.taskId ?? '-'}</dd>
<dt></dt>
<dd>{metadataLayer.objectKey ?? metadataLayer.assetObjectId ?? '-'}</dd>
<dt>Prompt</dt>
<dd>{metadataLayer.prompt ?? '-'}</dd>
</dl>
</div>
</div>
) : null}
<UnifiedModal
open={Boolean(metadataLayer)}
title={metadataLayer ? `${metadataLayer.title}元数据` : '元数据'}
size="sm"
closeLabel="关闭元数据"
onClose={() => setMetadataLayer(null)}
panelClassName="image-canvas-editor__metadata-dialog"
bodyClassName="image-canvas-editor__metadata-body"
>
{metadataLayer ? (
<dl className="image-canvas-editor__metadata-grid">
<dt></dt>
<dd>{metadataLayer.sourceType}</dd>
<dt></dt>
<dd>
{metadataLayer.originalWidth} x {metadataLayer.originalHeight}
</dd>
<dt></dt>
<dd>{metadataLayer.model ?? '-'}</dd>
<dt></dt>
<dd>{metadataLayer.provider ?? '-'}</dd>
<dt></dt>
<dd>{metadataLayer.taskId ?? '-'}</dd>
<dt></dt>
<dd>{metadataLayer.objectKey ?? metadataLayer.assetObjectId ?? '-'}</dd>
<dt>Prompt</dt>
<dd>{metadataLayer.prompt ?? '-'}</dd>
</dl>
) : null}
</UnifiedModal>
{generateDialog?.mode === 'edit' ? (
<div

View File

@@ -4167,17 +4167,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
padding: 1rem;
}
.image-canvas-editor__metadata-dialog {
width: min(28rem, calc(100vw - 2rem));
max-height: min(32rem, calc(100vh - 2rem));
overflow: auto;
border: 1px solid #d9dee8;
border-radius: 0.5rem;
background: #ffffff;
color: #1f2937;
box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
}
.image-canvas-editor__generate-dialog {
width: min(30rem, calc(100vw - 2rem));
overflow: hidden;
@@ -4205,6 +4194,14 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
letter-spacing: 0;
}
.image-canvas-editor__metadata-dialog {
color: #1f2937;
}
.image-canvas-editor__metadata-body {
padding: 0;
}
.image-canvas-editor__generate-body {
display: grid;
gap: 0.7rem;