@@ -181,8 +181,7 @@ export function CanvasToolbar({
) : null}
@@ -224,20 +223,15 @@ export function CanvasToolbar({
);
}
-function AddNodeMenu({ x, theme, nodeCommands, resourceCommands }: {
+function AddNodeMenu({ x, theme, commands }: {
x: number;
theme: CanvasTheme;
- nodeCommands: CanvasCreateCommand[];
- resourceCommands: CanvasCreateCommand[];
+ commands: CanvasCreateCommand[];
}) {
return (
event.stopPropagation()}>
- } title="创建内容" subtitle="选择节点类型" theme={theme} />
-
-
-
-
+
);
@@ -252,10 +246,6 @@ function PanelHeading({ icon, title, subtitle, theme }: { icon: ReactNode; title
);
}
-function MenuSection({ title }: { title: string }) {
- return
{title}
;
-}
-
function CanvasThemeButton({ colorTheme, targetTheme, onThemeChange, children }: { colorTheme: CanvasColorTheme; targetTheme: CanvasColorTheme; onThemeChange: (theme: CanvasColorTheme) => void; children: ReactNode }) {
const theme = canvasThemes[colorTheme];
const active = colorTheme === targetTheme;
diff --git a/web/src/lib/canvas/tool-registry/definitions/add-node-menu-tools.tsx b/web/src/lib/canvas/tool-registry/definitions/add-node-menu-tools.tsx
index ec25b5196..86e459391 100644
--- a/web/src/lib/canvas/tool-registry/definitions/add-node-menu-tools.tsx
+++ b/web/src/lib/canvas/tool-registry/definitions/add-node-menu-tools.tsx
@@ -3,16 +3,17 @@ import { Clapperboard, FolderOpen, Image as ImageIcon, Layers3, Music2, Palette,
import { registerAddNodeMenuCommands, type AddNodeMenuCommand } from "@/lib/canvas/tool-registry";
export const addNodeMenuCommands: AddNodeMenuCommand[] = [
+ // 项目级动作不占用节点网格，保证 8 个节点稳定保持四列两行。
+ { id: "style", label: "项目画风", icon:
, section: "project", defaultOrder: 10, applicable: (ctx) => !ctx.isProjectLinked, run: (ctx) => ctx.handlers.onChooseStyle() },
// 创作节点
{ id: "text", label: "文本", icon:
, section: "node", defaultOrder: 10, run: (ctx) => ctx.handlers.onAddText() },
- { id: "style", label: "项目画风", icon:
, section: "node", defaultOrder: 20, applicable: (ctx) => !ctx.isProjectLinked, run: (ctx) => ctx.handlers.onChooseStyle() },
+ { id: "drawing", label: "绘图", icon:
, section: "node", defaultOrder: 20, run: (ctx) => ctx.handlers.onAddDrawing() },
{ id: "script", label: "分镜脚本", icon:
, badge: "核心", section: "node", defaultOrder: 30, run: (ctx) => ctx.handlers.onAddScript() },
{ id: "frame", label: "背板", icon:
, section: "node", defaultOrder: 40, applicable: (ctx) => ctx.workspaceMode !== "simple", run: (ctx) => ctx.handlers.onAddFrame() },
- { id: "drawing", label: "绘图", icon:
, section: "node", defaultOrder: 50, run: (ctx) => ctx.handlers.onAddDrawing() },
- { id: "image", label: "图片", icon:
, section: "node", defaultOrder: 60, run: (ctx) => ctx.handlers.onAddImage() },
- { id: "video", label: "视频", icon:
, section: "node", defaultOrder: 70, run: (ctx) => ctx.handlers.onAddVideo() },
- { id: "director", label: "导演台", icon:
, badge: "3D", section: "node", defaultOrder: 80, applicable: (ctx) => ctx.workspaceMode !== "simple", run: (ctx) => ctx.handlers.onOpenDirector() },
- { id: "audio", label: "音频", icon:
, section: "node", defaultOrder: 90, applicable: (ctx) => ctx.workspaceMode !== "simple", run: (ctx) => ctx.handlers.onAddAudio() },
+ { id: "image", label: "图片", icon:
, section: "node", defaultOrder: 50, run: (ctx) => ctx.handlers.onAddImage() },
+ { id: "video", label: "视频", icon:
, section: "node", defaultOrder: 60, run: (ctx) => ctx.handlers.onAddVideo() },
+ { id: "director", label: "导演台", icon:
, badge: "3D", section: "node", defaultOrder: 70, applicable: (ctx) => ctx.workspaceMode !== "simple", run: (ctx) => ctx.handlers.onOpenDirector() },
+ { id: "audio", label: "音频", icon:
, section: "node", defaultOrder: 80, applicable: (ctx) => ctx.workspaceMode !== "simple", run: (ctx) => ctx.handlers.onAddAudio() },
// 导入资源
{ id: "upload", label: "上传文件", icon:
, section: "resource", defaultOrder: 10, run: (ctx) => ctx.handlers.onUpload() },
{ id: "project-character", label: "添加角色卡", icon:
, section: "resource", defaultOrder: 20, applicable: (ctx) => ctx.isProjectLinked, run: (ctx) => ctx.handlers.onOpenProjectCharacters() },
diff --git a/web/src/lib/canvas/tool-registry/index.ts b/web/src/lib/canvas/tool-registry/index.ts
index 3d1af39b3..e718ab5f2 100644
--- a/web/src/lib/canvas/tool-registry/index.ts
+++ b/web/src/lib/canvas/tool-registry/index.ts
@@ -1,4 +1,4 @@
-export type { AddNodeMenuCommand, ToolbarHandlers, ToolbarId, ToolbarPrefs, ToolCategory, ToolContext, ToolDefinition } from "./tool-definition";
+export type { AddNodeMenuCommand, AddNodeMenuContext, ToolbarHandlers, ToolbarId, ToolbarPrefs, ToolCategory, ToolContext, ToolDefinition } from "./tool-definition";
export { clearToolbarPrefs, persistToolbarPrefs, readToolbarPrefs } from "./tool-persistence";
export { defaultToolbarPrefs, getAddNodeMenuCommands, getToolbarTools, registerAddNodeMenuCommands, registerToolbarTools, resolveAddNodeMenuCommands, resolveToolbarEntries, resolveToolbarTools } from "./tool-registry";
import "./definitions";
diff --git a/web/src/lib/canvas/tool-registry/tool-definition.ts b/web/src/lib/canvas/tool-registry/tool-definition.ts
index 1c0061d4c..ea5ec23e3 100644
--- a/web/src/lib/canvas/tool-registry/tool-definition.ts
+++ b/web/src/lib/canvas/tool-registry/tool-definition.ts
@@ -112,6 +112,26 @@ export type ToolContext = {
handlers: ToolbarHandlers;
};
+/** 添加节点菜单只依赖创建动作，避免右键菜单为工具栏状态补无意义字段。 */
+export type AddNodeMenuContext = {
+ workspaceMode: CanvasWorkspaceMode;
+ isProjectLinked: boolean;
+ handlers: Pick
;
+};
+
/** 工具定义——注册表的基本单元 */
export type ToolDefinition = {
id: string;
@@ -137,17 +157,16 @@ export type ToolDefinition = {
run: (ctx: ToolContext, event?: MouseEvent) => void;
};
-/** 添加节点菜单命令（复用 CanvasCreateCommand 结构 + 上下文谓词） */
+/** 添加节点菜单命令：项目级动作与真正的节点创建分开呈现。 */
export type AddNodeMenuCommand = {
id: string;
label: string;
icon: ReactNode;
badge?: string;
- /** 菜单分区：创作节点 / 导入资源 */
- section: "node" | "resource";
+ section: "node" | "project" | "resource";
defaultOrder: number;
- applicable?: (ctx: ToolContext) => boolean;
- run: (ctx: ToolContext) => void;
+ applicable?: (ctx: AddNodeMenuContext) => boolean;
+ run: (ctx: AddNodeMenuContext) => void;
};
/** 用户偏好——排序与显隐 */
diff --git a/web/src/lib/canvas/tool-registry/tool-registry.ts b/web/src/lib/canvas/tool-registry/tool-registry.ts
index 8ce06616d..d1a2c23d9 100644
--- a/web/src/lib/canvas/tool-registry/tool-registry.ts
+++ b/web/src/lib/canvas/tool-registry/tool-registry.ts
@@ -1,6 +1,6 @@
import type { FloatingDockEntry } from "@/components/ui/aceternity/floating-dock";
-import type { AddNodeMenuCommand, ToolCategory, ToolContext, ToolDefinition, ToolbarId, ToolbarPrefs } from "./tool-definition";
+import type { AddNodeMenuCommand, AddNodeMenuContext, ToolCategory, ToolContext, ToolDefinition, ToolbarId, ToolbarPrefs } from "./tool-definition";
/** 模块级注册表 */
const registry = new Map();
@@ -67,7 +67,7 @@ export function resolveToolbarTools(toolbar: ToolbarId, ctx: ToolContext, prefs:
}
/** 解析添加节点菜单命令——仅 applicable 过滤，不参与排序/显隐 */
-export function resolveAddNodeMenuCommands(ctx: ToolContext): AddNodeMenuCommand[] {
+export function resolveAddNodeMenuCommands(ctx: AddNodeMenuContext): AddNodeMenuCommand[] {
return getAddNodeMenuCommands().filter((command) => !command.applicable || command.applicable(ctx));
}
diff --git a/web/src/pages/canvas/canvas-project-context-menu.tsx b/web/src/pages/canvas/canvas-project-context-menu.tsx
index 320f2cd17..3563ee4df 100644
--- a/web/src/pages/canvas/canvas-project-context-menu.tsx
+++ b/web/src/pages/canvas/canvas-project-context-menu.tsx
@@ -14,6 +14,7 @@ type CanvasProjectContextMenuProps = {
screenToCanvas: (clientX: number, clientY: number) => Position;
onClose: () => void;
onAddNode: (type: CanvasNodeType, position: Position) => void;
+ onChooseStyle: () => void;
onOpenDirector: (position?: Position) => void;
onUpload: (nodeId: string | undefined, position: Position) => void;
onOpenAssets: (position: Position) => void;
@@ -52,6 +53,7 @@ export function CanvasProjectContextMenu({ menu, node, screenToCanvas, ...props
onAddNode={(type) => {
if (menu.type === "canvas") props.onAddNode(type, menu.position);
}}
+ onChooseStyle={props.onChooseStyle}
onOpenDirector={props.onOpenDirector}
onUpload={() => props.onUpload(menu.type === "node" ? menu.nodeId : undefined, menuPosition())}
onOpenAssets={() => props.onOpenAssets(menuPosition())}
diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx
index ef5d93c09..33ad22d7a 100644
--- a/web/src/pages/canvas/project.tsx
+++ b/web/src/pages/canvas/project.tsx
@@ -1662,6 +1662,7 @@ function InfiniteCanvasPage() {
screenToCanvas={screenToCanvas}
onClose={() => setContextMenu(null)}
onAddNode={(type, position) => createNode(type, position)}
+ onChooseStyle={() => setStylePickerOpen(true)}
onOpenDirector={createDirectorShot}
onUpload={(nodeId, position) => handleUploadRequest(nodeId, position)}
onOpenAssets={openAssetsAtPosition}
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index b7335fe01..4ef6e1d23 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -486,9 +486,12 @@
--dock-item-radius: var(--r-md); /* 8px */
--dock-item-radius-labeled: var(--r-lg); /* 12px */
--dock-precision-width: var(--space-12);
- --dock-create-node-height: calc(var(--space-12) + var(--space-2));
--dock-z-popover: 30; /* dock 子面板在 toolbar 根 stacking context 内的层级（见 ADR-001）*/
+ /* Canvas 创建菜单：固定行高保证图标、徽标和单行标签互不挤占 */
+ --canvas-create-node-height: var(--space-12);
+ --canvas-create-resource-height: var(--space-8);
+
/* Node 组件（画布节点，对应 #97 节点视觉规范）*/
--node-radius: var(--r-2xl); /* 16px */
--node-border-width: var(--stroke-1); /* 1px */