复用内联选项按钮收口缩放入口

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

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

补充编辑器测试断言共享按钮原语，并更新 TRACKING。

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

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: '放大' }));

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
+            <PlatformInlineOptionButton
-              type="button"
               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>
+              {formatPercent(viewport.scale)}
-            </button>
+            </PlatformInlineOptionButton>
             {isZoomMenuOpen ? (
               <PlatformFloatingMenu label="缩放菜单" placement="bottom-end">
                 <PlatformFloatingMenuItem

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;