From a1a8b7859c765c7389a571a56a4e6eb01e55841e Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Sun, 14 Jun 2026 01:29:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E7=94=A8=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E5=85=83=E6=95=B0=E6=8D=AE=E5=BC=B9=E7=AA=97=E5=A4=96=E5=A3=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

更新 TRACKING 记录弹窗组件收口
---
 TRACKING.md                                   |  1 +
 .../image-editor/ImageCanvasEditorView.tsx    | 72 ++++++++-----------
 src/index.css                                 | 19 +++--
 3 files changed, 40 insertions(+), 52 deletions(-)

diff --git a/TRACKING.md b/TRACKING.md
index 0e1c448e..a28a8746 100644
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -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`。
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 7ca6461b..c3b03e08 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -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
diff --git a/src/index.css b/src/index.css
index 4731fd86..a26a16ac 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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;