复用编辑器修改图片弹窗外壳

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

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

更新 TRACKING 记录弹窗组件收口

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`。

src/components/image-editor/ImageCanvasEditorView.tsx

@@ -2147,21 +2147,21 @@ export function ImageCanvasEditorView() {
         ) : null}
       </UnifiedModal>
 
-      {generateDialog?.mode === 'edit' ? (
+      <UnifiedModal
-        <div
+        open={generateDialog?.mode === 'edit'}
-          className="image-canvas-editor__modal-backdrop"
+        title={generateDialog?.mode === 'edit' ? '修改图片' : '生成图片'}
-          onPointerDown={() => {
+        size="sm"
-            if (generateDialog.status !== 'generating') {
+        closeLabel={
-              setGenerateDialog(null);
+          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"
+            className="image-canvas-editor__generate-form"
-            role="dialog"
-            aria-label={generateDialog.mode === 'edit' ? '修改图片' : '生成图片'}
-            aria-modal="true"
-            onPointerDown={(event) => event.stopPropagation()}
             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}
+      </UnifiedModal>
     </section>
   );
 }

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;