复用编辑器元数据弹窗外壳
编辑器生成图元数据弹窗改为复用 UnifiedModal 删除元数据弹窗手写遮罩和 dialog 外壳 更新 TRACKING 记录弹窗组件收口
This commit is contained in:
@@ -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`。
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user