From 6fcf909095216f4ba80d62ec4ee1ce7eac0d28f2 Mon Sep 17 00:00:00 2001 From: suzmii Date: Wed, 5 Aug 2026 11:36:01 +0800 Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=B8=B8=E6=88=8F=E5=9C=BA?= =?UTF-8?q?=E6=99=AF=E7=94=9F=E6=88=90=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 使用 Mountain 区分游戏场景与普通图片生成入口 为场景生成占位框补充 Mountain 图标、类型标识和轻量主题样式 补充底部工具栏与场景占位框图标测试 --- .../ImageCanvasBottomToolbarView.test.tsx | 7 ++++- .../ImageCanvasBottomToolbarView.tsx | 3 +- .../ImageCanvasWorldView.test.tsx | 8 ++++++ .../image-editor/ImageCanvasWorldView.tsx | 9 ++++++ src/index.css | 28 +++++++++++++++++++ 5 files changed, 53 insertions(+), 2 deletions(-) diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx index 12b0e84e8..4d3fa9642 100644 --- a/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx +++ b/src/components/image-editor/ImageCanvasBottomToolbarView.test.tsx @@ -79,7 +79,7 @@ describe('ImageCanvasBottomToolbarView', () => { ['生成图标素材', 'icon'], ['生成UI设计图', 'ui-design'], ['宣发素材', 'publication'], - ['游戏场景', 'scene'], + ['生成游戏场景', 'scene'], ] as const; for (const [label, tool] of toolExpectations) { @@ -88,6 +88,11 @@ describe('ImageCanvasBottomToolbarView', () => { } expect(switchTool).toHaveBeenCalledTimes(toolExpectations.length); + expect( + within(toolbar) + .getByRole('button', { name: '生成游戏场景' }) + .querySelector('.lucide-mountain'), + ).toBeTruthy(); }); it('only exposes persistent pressed state for navigation tools', () => { diff --git a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx index 76c5965b1..ac9c600fe 100644 --- a/src/components/image-editor/ImageCanvasBottomToolbarView.tsx +++ b/src/components/image-editor/ImageCanvasBottomToolbarView.tsx @@ -6,6 +6,7 @@ import { Hand, ImageIcon, Megaphone, + Mountain, MousePointer2, Music, Upload, @@ -55,7 +56,7 @@ const canvasTools: Array<{ { id: 'character', label: '生成角色形象', icon: UserRound }, { id: 'icon', label: '生成图标素材', icon: Grid2X2 }, { id: 'ui-design', label: '生成UI设计图', icon: AppWindow }, - { id: 'scene', label: '生成游戏场景', icon: ImageIcon }, + { id: 'scene', label: '生成游戏场景', icon: Mountain }, { id: 'publication', label: '宣发素材', icon: Megaphone }, ]; diff --git a/src/components/image-editor/ImageCanvasWorldView.test.tsx b/src/components/image-editor/ImageCanvasWorldView.test.tsx index 446a3fa26..666a740f4 100644 --- a/src/components/image-editor/ImageCanvasWorldView.test.tsx +++ b/src/components/image-editor/ImageCanvasWorldView.test.tsx @@ -494,6 +494,14 @@ describe('ImageCanvasWorldView', () => { frameClassName: 'image-canvas-editor__generation-frame--ui-design', iconClassName: 'lucide-app-window', }, + { + mode: 'scene', + ariaLabel: '游戏场景生成占位图', + generatorLabel: 'Scene Generator', + badgeLabel: '场景', + frameClassName: 'image-canvas-editor__generation-frame--scene', + iconClassName: 'lucide-mountain', + }, { mode: 'quick-edit', ariaLabel: '快速编辑生成占位图', diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx index 228e78409..7eb954e19 100644 --- a/src/components/image-editor/ImageCanvasWorldView.tsx +++ b/src/components/image-editor/ImageCanvasWorldView.tsx @@ -6,6 +6,7 @@ import { ImageIcon, Info, Megaphone, + Mountain, Music, Pause, PersonStanding, @@ -96,6 +97,14 @@ function getGenerationPlaceholderMeta(dialog: CanvasGenerationDialogState) { icon: , labelIcon: , }; + case 'scene': + return { + frameClassName: 'image-canvas-editor__generation-frame--scene', + badgeClassName: 'scene', + badgeLabel: '场景', + icon: , + labelIcon: , + }; case 'quick-edit': return { frameClassName: 'image-canvas-editor__generation-frame--quick-edit', diff --git a/src/index.css b/src/index.css index 9f9f9e604..7693d339e 100644 --- a/src/index.css +++ b/src/index.css @@ -5685,6 +5685,29 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { color: #d97706; } +.image-canvas-editor__generation-frame--scene { + border-color: rgba(8, 145, 178, 0.26); + background: radial-gradient( + circle at 50% 34%, + rgba(240, 253, 250, 0.96), + transparent 34% + ), + linear-gradient( + 135deg, + rgba(236, 254, 255, 0.92), + rgba(209, 250, 229, 0.78) + ); +} + +.image-canvas-editor__generation-frame--scene.image-canvas-editor__generation-frame--focused { + border-color: rgba(8, 145, 178, 0.72); +} + +.image-canvas-editor__generation-frame--scene + .image-canvas-editor__generation-frame-icon { + color: #0891b2; +} + .image-canvas-editor__generation-frame--quick-edit { border-color: var(--image-canvas-brand-border); background: linear-gradient( @@ -5847,6 +5870,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { box-shadow: 0 8px 18px rgba(245, 158, 11, 0.24); } +.image-canvas-editor__kind-badge--scene { + background: rgba(8, 145, 178, 0.92); + box-shadow: 0 8px 18px rgba(8, 145, 178, 0.24); +} + .image-canvas-editor__kind-badge--publication { background: rgba(219, 39, 119, 0.92); box-shadow: 0 8px 18px rgba(219, 39, 119, 0.24);