统一游戏场景生成图标

使用 Mountain 区分游戏场景与普通图片生成入口
为场景生成占位框补充 Mountain 图标、类型标识和轻量主题样式
补充底部工具栏与场景占位框图标测试

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', () => {

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 },
 ];
 

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: '快速编辑生成占位图',

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: <AppWindow className="h-8 w-8" />,
         labelIcon: <AppWindow className="h-4 w-4" />,
       };
+    case 'scene':
+      return {
+        frameClassName: 'image-canvas-editor__generation-frame--scene',
+        badgeClassName: 'scene',
+        badgeLabel: '场景',
+        icon: <Mountain className="h-8 w-8" />,
+        labelIcon: <Mountain className="h-4 w-4" />,
+      };
     case 'quick-edit':
       return {
         frameClassName: 'image-canvas-editor__generation-frame--quick-edit',

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);