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

编辑器修改图片弹窗改为复用 UnifiedModal

删除编辑器局部弹窗遮罩和标题栏样式

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

diff --git a/TRACKING.md b/TRACKING.md
index a28a8746..9605e14a 100644
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -78,3 +78,4 @@
 - 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`。
+- 2026-06-14 组件复用修正：编辑器“修改图片”弹窗改为复用 `UnifiedModal`，删除编辑器局部 modal backdrop、dialog role、header 和关闭按钮样式；验证命令：`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 c3b03e08..a33b8d57 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -2147,21 +2147,21 @@ export function ImageCanvasEditorView() {
         ) : null}
       </UnifiedModal>
 
-      {generateDialog?.mode === 'edit' ? (
-        <div
-          className="image-canvas-editor__modal-backdrop"
-          onPointerDown={() => {
-            if (generateDialog.status !== 'generating') {
-              setGenerateDialog(null);
-            }
-          }}
-        >
+      <UnifiedModal
+        open={generateDialog?.mode === 'edit'}
+        title={generateDialog?.mode === 'edit' ? '修改图片' : '生成图片'}
+        size="sm"
+        closeLabel={
+          generateDialog?.mode === 'edit' ? '关闭修改图片' : '关闭生成图片'
+        }
+        closeDisabled={generateDialog?.status === 'generating'}
+        onClose={() => setGenerateDialog(null)}
+        panelClassName="image-canvas-editor__generate-dialog"
+        bodyClassName="image-canvas-editor__generate-dialog-body"
+      >
+        {generateDialog?.mode === 'edit' ? (
           <form
-            className="image-canvas-editor__generate-dialog"
-            role="dialog"
-            aria-label={generateDialog.mode === 'edit' ? '修改图片' : '生成图片'}
-            aria-modal="true"
-            onPointerDown={(event) => event.stopPropagation()}
+            className="image-canvas-editor__generate-form"
             onSubmit={(event) => {
               event.preventDefault();
               if (generateDialog.status !== 'generating') {
@@ -2169,17 +2169,6 @@ export function ImageCanvasEditorView() {
               }
             }}
           >
-            <div className="image-canvas-editor__metadata-header">
-              <h2>{generateDialog.mode === 'edit' ? '修改图片' : '生成图片'}</h2>
-              <EditorIconButton
-                label={
-                  generateDialog.mode === 'edit' ? '关闭修改图片' : '关闭生成图片'
-                }
-                icon={X}
-                disabled={generateDialog.status === 'generating'}
-                onClick={() => setGenerateDialog(null)}
-              />
-            </div>
             <div className="image-canvas-editor__generate-body">
               <textarea
                 aria-label="生成提示词"
@@ -2232,8 +2221,8 @@ export function ImageCanvasEditorView() {
               </button>
             </div>
           </form>
-        </div>
-      ) : null}
+        ) : null}
+      </UnifiedModal>
     </section>
   );
 }
diff --git a/src/index.css b/src/index.css
index a26a16ac..da64cd41 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3348,7 +3348,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 .image-canvas-editor__zoom-trigger,
 .image-canvas-editor__floating-toolbar button,
 .image-canvas-editor__bottom-toolbar button,
-.image-canvas-editor__metadata-header button,
 .image-canvas-editor__reset-button {
   display: inline-flex;
   align-items: center;
@@ -3367,7 +3366,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 .image-canvas-editor__zoom-trigger:hover,
 .image-canvas-editor__floating-toolbar button:hover,
 .image-canvas-editor__bottom-toolbar button:hover,
-.image-canvas-editor__metadata-header button:hover,
 .image-canvas-editor__reset-button:hover {
   transform: translateY(-1px);
   border-color: #8fb8ff;
@@ -3706,7 +3704,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .image-canvas-editor__floating-toolbar button,
 .image-canvas-editor__bottom-toolbar button,
-.image-canvas-editor__metadata-header button,
 .image-canvas-editor__reset-button {
   width: 2.25rem;
   height: 2.25rem;
@@ -4157,41 +4154,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   transform: translateY(-1px);
 }
 
-.image-canvas-editor__modal-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 120;
-  display: grid;
-  place-items: center;
-  background: rgba(8, 7, 6, 0.58);
-  padding: 1rem;
-}
-
 .image-canvas-editor__generate-dialog {
-  width: min(30rem, calc(100vw - 2rem));
-  overflow: hidden;
-  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__metadata-header {
-  display: flex;
-  min-height: 3rem;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  border-bottom: 1px solid #d9dee8;
-  padding: 0.55rem 0.7rem;
-}
-
-.image-canvas-editor__metadata-header h2 {
-  margin: 0;
-  font-size: 0.9rem;
-  font-weight: 850;
-  letter-spacing: 0;
 }
 
 .image-canvas-editor__metadata-dialog {
@@ -4202,6 +4166,14 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   padding: 0;
 }
 
+.image-canvas-editor__generate-dialog-body {
+  padding: 0;
+}
+
+.image-canvas-editor__generate-form {
+  display: grid;
+}
+
 .image-canvas-editor__generate-body {
   display: grid;
   gap: 0.7rem;