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