From d70ffa7d30976bf7f6221a2bfc8ec5d3c7f60ba5 Mon Sep 17 00:00:00 2001
From: kdletters <kdletters@qq.com>
Date: Sun, 14 Jun 2026 15:37:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E7=94=A8=E5=86=85=E8=81=94=E9=80=89?=
 =?UTF-8?q?=E9=A1=B9=E6=8C=89=E9=92=AE=E6=94=B6=E5=8F=A3=E7=BC=A9=E6=94=BE?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

编辑器顶部缩放百分比触发器改为复用 PlatformInlineOptionButton。

保留缩放入口局部尺寸和 hover 视觉覆盖，移除重复混入编辑器图标按钮基础规则。

补充编辑器测试断言共享按钮原语，并更新 TRACKING。
---
 TRACKING.md                                          |  1 +
 .../image-editor/ImageCanvasEditorView.test.tsx      |  4 +++-
 .../image-editor/ImageCanvasEditorView.tsx           |  7 +++----
 src/index.css                                        | 12 ++++++++++--
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/TRACKING.md b/TRACKING.md
index 065be992..28701d3e 100644
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -102,3 +102,4 @@
 - 2026-06-14 组件复用修正：编辑器画布内生成输入框和“修改图片”弹窗提示词改为复用 `PlatformTextField variant="textarea"`，删除编辑器里按标签选择器手写 textarea 基础输入 chrome 的做法，仅保留生成器局部尺寸和 Lovart 式覆盖；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformTextField.test.tsx`、`npm run typecheck`。
 - 2026-06-14 组件复用修正：新增 `PlatformInlineOptionButton`，编辑器生成输入框里的比例和模型选择 pill 改为复用平台内联选项按钮原语，删除两个局部按钮重复维护基础 inline chrome 的做法；验证命令：`npm run test -- src/components/common/PlatformInlineOptionButton.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`。
 - 2026-06-14 组件复用修正：`PlatformEmptyState` 增加 `asChild="button"` 形态，项目页空列表“新建项目”卡片改为复用平台空态原语，避免项目页单独维护可点击空态卡片基础 chrome；验证命令：`npm run test -- src/components/common/PlatformEmptyState.test.tsx src/components/project/ProjectGalleryView.test.tsx`、`npm run typecheck`。
+- 2026-06-14 组件复用修正：编辑器顶部缩放百分比触发器改为复用 `PlatformInlineOptionButton`，让缩放菜单入口和生成器比例 / 模型 pill 共用“当前选项触发菜单”的按钮原语；验证命令：`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/common/PlatformInlineOptionButton.test.tsx`、`npm run typecheck`。
diff --git a/src/components/image-editor/ImageCanvasEditorView.test.tsx b/src/components/image-editor/ImageCanvasEditorView.test.tsx
index 6f866f78..bd4973df 100644
--- a/src/components/image-editor/ImageCanvasEditorView.test.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.test.tsx
@@ -591,7 +591,9 @@ describe('ImageCanvasEditorView', () => {
   it('adds assets from the sidebar and supports zoom buttons', () => {
     render(<ImageCanvasEditorView />);
 
-    expect(screen.getByRole('button', { name: '当前缩放比例 82%' })).toBeTruthy();
+    expect(
+      screen.getByRole('button', { name: '当前缩放比例 82%' }).className,
+    ).toContain('platform-inline-option-button');
 
     fireEvent.click(screen.getByRole('button', { name: '当前缩放比例 82%' }));
     fireEvent.click(screen.getByRole('menuitem', { name: '放大' }));
diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx
index 1fa0b47e..9b49f730 100644
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -2431,16 +2431,15 @@ export function ImageCanvasEditorView() {
             <span>画布</span>
           </div>
           <div className="image-canvas-editor__zoom-menu-wrap">
-            <button
-              type="button"
+            <PlatformInlineOptionButton
               className="image-canvas-editor__zoom-trigger"
               aria-label={`当前缩放比例 ${formatPercent(viewport.scale)}`}
               aria-haspopup="menu"
               aria-expanded={isZoomMenuOpen}
               onClick={() => setIsZoomMenuOpen((open) => !open)}
             >
-              <span>{formatPercent(viewport.scale)}</span>
-            </button>
+              {formatPercent(viewport.scale)}
+            </PlatformInlineOptionButton>
             {isZoomMenuOpen ? (
               <PlatformFloatingMenu label="缩放菜单" placement="bottom-end">
                 <PlatformFloatingMenuItem
diff --git a/src/index.css b/src/index.css
index 4d2d1d52..30436365 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3328,7 +3328,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__icon-button,
-.image-canvas-editor__zoom-trigger,
 .image-canvas-editor__floating-toolbar button,
 .image-canvas-editor__bottom-toolbar button,
 .image-canvas-editor__reset-button {
@@ -3346,7 +3345,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .image-canvas-editor__icon-button:hover,
-.image-canvas-editor__zoom-trigger:hover,
 .image-canvas-editor__floating-toolbar button:hover,
 .image-canvas-editor__bottom-toolbar button:hover,
 .image-canvas-editor__reset-button:hover {
@@ -3712,12 +3710,22 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 .image-canvas-editor__zoom-trigger {
   min-width: 4.15rem;
   height: 2.25rem;
+  border: 1px solid #d9dee8;
   border-radius: 0.45rem;
+  background: #ffffff;
   padding: 0 0.65rem;
+  color: #334155;
   font-size: 0.78rem;
   font-weight: 850;
 }
 
+.image-canvas-editor__zoom-trigger:hover {
+  transform: translateY(-1px);
+  border-color: #8fb8ff;
+  background: #eef5ff;
+  color: #1d4ed8;
+}
+
 .image-canvas-editor__zoom-menu-item {
   min-width: 12rem;
   justify-content: flex-start;