refactor(editor): 重构编辑器架构并增强行为树执行可视化

packages/editor-app/src/App.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { Core, Scene } from '@esengine/ecs-framework';
 import * as ECSFramework from '@esengine/ecs-framework';
-import { EditorPluginManager, UIRegistry, MessageHub, SerializerRegistry, EntityStoreService, ComponentRegistry, LocaleService, ProjectService, ComponentDiscoveryService, PropertyMetadataService, LogService, SettingsRegistry, SceneManagerService } from '@esengine/editor-core';
+import { EditorPluginManager, UIRegistry, MessageHub, SerializerRegistry, EntityStoreService, ComponentRegistry, LocaleService, ProjectService, ComponentDiscoveryService, PropertyMetadataService, LogService, SettingsRegistry, SceneManagerService, FileActionRegistry, PanelDescriptor } from '@esengine/editor-core';
 import { GlobalBlackboardService } from '@esengine/behavior-tree';
 import { SceneInspectorPlugin } from './plugins/SceneInspectorPlugin';
 import { ProfilerPlugin } from './plugins/ProfilerPlugin';
@@ -9,7 +9,7 @@ import { EditorAppearancePlugin } from './plugins/EditorAppearancePlugin';
 import { BehaviorTreePlugin } from './plugins/BehaviorTreePlugin';
 import { StartupPage } from './components/StartupPage';
 import { SceneHierarchy } from './components/SceneHierarchy';
-import { EntityInspector } from './components/EntityInspector';
+import { Inspector } from './components/Inspector';
 import { AssetBrowser } from './components/AssetBrowser';
 import { ConsolePanel } from './components/ConsolePanel';
 import { PluginManagerWindow } from './components/PluginManagerWindow';
@@ -19,7 +19,6 @@ import { SettingsWindow } from './components/SettingsWindow';
 import { AboutDialog } from './components/AboutDialog';
 import { ErrorDialog } from './components/ErrorDialog';
 import { ConfirmDialog } from './components/ConfirmDialog';
-import { BehaviorTreeWindow } from './components/BehaviorTreeWindow';
 import { PluginGeneratorWindow } from './components/PluginGeneratorWindow';
 import { ToastProvider } from './components/Toast';
 import { MenuBar } from './components/MenuBar';
@@ -67,8 +66,6 @@ function App() {
     const [showPortManager, setShowPortManager] = useState(false);
     const [showSettings, setShowSettings] = useState(false);
     const [showAbout, setShowAbout] = useState(false);
-    const [showBehaviorTreeEditor, setShowBehaviorTreeEditor] = useState(false);
-    const [behaviorTreeFilePath, setBehaviorTreeFilePath] = useState<string | null>(null);
     const [showPluginGenerator, setShowPluginGenerator] = useState(false);
     const [pluginUpdateTrigger, setPluginUpdateTrigger] = useState(0);
     const [isRemoteConnected, setIsRemoteConnected] = useState(false);
@@ -81,6 +78,7 @@ function App() {
         cancelText: string;
         onConfirm: () => void;
     } | null>(null);
+    const [activeDynamicPanels, setActiveDynamicPanels] = useState<string[]>([]);
 
     useEffect(() => {
         // 禁用默认右键菜单
@@ -167,6 +165,7 @@ function App() {
                 const logService = new LogService();
                 const settingsRegistry = new SettingsRegistry();
                 const sceneManagerService = new SceneManagerService(messageHub, fileAPI, projectService);
+                const fileActionRegistry = new FileActionRegistry();
 
                 // 监听远程日志事件
                 window.addEventListener('profiler:remote-log', ((event: CustomEvent) => {
@@ -185,6 +184,7 @@ function App() {
                 Core.services.registerInstance(LogService, logService);
                 Core.services.registerInstance(SettingsRegistry, settingsRegistry);
                 Core.services.registerInstance(SceneManagerService, sceneManagerService);
+                Core.services.registerInstance(FileActionRegistry, fileActionRegistry);
 
                 const pluginMgr = new EditorPluginManager();
                 pluginMgr.initialize(coreInstance, Core.services);
@@ -196,12 +196,14 @@ function App() {
                 await pluginMgr.installEditor(new BehaviorTreePlugin());
 
                 messageHub.subscribe('ui:openWindow', (data: any) => {
-                    if (data.windowId === 'profiler') {
+                    console.log('[App] Received ui:openWindow:', data);
+                    const { windowId, ...params } = data;
+
+                    // 内置窗口处理
+                    if (windowId === 'profiler') {
                         setShowProfiler(true);
-                    } else if (data.windowId === 'pluginManager') {
+                    } else if (windowId === 'pluginManager') {
                         setShowPluginManager(true);
-                    } else if (data.windowId === 'behavior-tree-editor') {
-                        setShowBehaviorTreeEditor(true);
                     }
                 });
 
@@ -228,6 +230,23 @@ function App() {
         initializeEditor();
     }, []);
 
+    useEffect(() => {
+        if (!messageHub) return;
+
+        const unsubscribe = messageHub.subscribe('dynamic-panel:open', (data: any) => {
+            const { panelId } = data;
+            console.log('[App] Opening dynamic panel:', panelId);
+            setActiveDynamicPanels(prev => {
+                if (prev.includes(panelId)) {
+                    return prev;
+                }
+                return [...prev, panelId];
+            });
+        });
+
+        return () => unsubscribe?.();
+    }, [messageHub]);
+
     const handleOpenRecentProject = async (projectPath: string) => {
         try {
             setIsLoading(true);
@@ -442,10 +461,6 @@ function App() {
         }
     }, [sceneManager, locale]);
 
-    const handleOpenBehaviorTree = useCallback((btreePath: string) => {
-        setBehaviorTreeFilePath(btreePath);
-        setShowBehaviorTreeEditor(true);
-    }, []);
 
     const handleSaveScene = async () => {
         if (!sceneManager) {
@@ -544,7 +559,7 @@ function App() {
                     {
                         id: 'inspector',
                         title: locale === 'zh' ? '检视器' : 'Inspector',
-                        content: <EntityInspector entityStore={entityStore} messageHub={messageHub} />,
+                        content: <Inspector entityStore={entityStore} messageHub={messageHub} projectPath={currentProjectPath} />,
                         closable: false
                     },
                     {
@@ -565,13 +580,13 @@ function App() {
                     {
                         id: 'inspector',
                         title: locale === 'zh' ? '检视器' : 'Inspector',
-                        content: <EntityInspector entityStore={entityStore} messageHub={messageHub} />,
+                        content: <Inspector entityStore={entityStore} messageHub={messageHub} projectPath={currentProjectPath} />,
                         closable: false
                     },
                     {
                         id: 'assets',
                         title: locale === 'zh' ? '资产' : 'Assets',
-                        content: <AssetBrowser projectPath={currentProjectPath} locale={locale} onOpenScene={handleOpenSceneByPath} onOpenBehaviorTree={handleOpenBehaviorTree} />,
+                        content: <AssetBrowser projectPath={currentProjectPath} locale={locale} onOpenScene={handleOpenSceneByPath} />,
                         closable: false
                     },
                     {
@@ -592,6 +607,10 @@ function App() {
                     if (!panelDesc.component) {
                         return false;
                     }
+                    // 过滤掉动态面板
+                    if (panelDesc.isDynamic) {
+                        return false;
+                    }
                     return enabledPlugins.some((pluginName) => {
                         const plugin = pluginManager.getEditorPlugin(pluginName);
                         if (plugin && plugin.registerPanels) {
@@ -606,15 +625,33 @@ function App() {
                     return {
                         id: panelDesc.id,
                         title: (panelDesc as any).titleZh && locale === 'zh' ? (panelDesc as any).titleZh : panelDesc.title,
-                        content: <Component />,
+                        content: <Component projectPath={currentProjectPath} />,
+                        closable: panelDesc.closable ?? true
+                    };
+                });
+
+            // 添加激活的动态面板
+            const dynamicPanels: FlexDockPanel[] = activeDynamicPanels
+                .filter(panelId => {
+                    const panelDesc = uiRegistry.getPanel(panelId);
+                    return panelDesc && panelDesc.component;
+                })
+                .map(panelId => {
+                    const panelDesc = uiRegistry.getPanel(panelId)!;
+                    const Component = panelDesc.component;
+                    return {
+                        id: panelDesc.id,
+                        title: (panelDesc as any).titleZh && locale === 'zh' ? (panelDesc as any).titleZh : panelDesc.title,
+                        content: <Component projectPath={currentProjectPath} />,
                         closable: panelDesc.closable ?? true
                     };
                 });
 
             console.log('[App] Loading plugin panels:', pluginPanels);
-            setPanels([...corePanels, ...pluginPanels]);
+            console.log('[App] Loading dynamic panels:', dynamicPanels);
+            setPanels([...corePanels, ...pluginPanels, ...dynamicPanels]);
         }
-    }, [projectLoaded, entityStore, messageHub, logService, uiRegistry, pluginManager, locale, currentProjectPath, t, pluginUpdateTrigger, isProfilerMode, handleOpenSceneByPath, handleOpenBehaviorTree]);
+    }, [projectLoaded, entityStore, messageHub, logService, uiRegistry, pluginManager, locale, currentProjectPath, t, pluginUpdateTrigger, isProfilerMode, handleOpenSceneByPath, activeDynamicPanels]);
 
 
     if (!initialized) {
@@ -701,7 +738,14 @@ function App() {
             </div>
 
             <div className="editor-content">
-                <FlexLayoutDockContainer panels={panels} />
+                <FlexLayoutDockContainer
+                    panels={panels}
+                    onPanelClose={(panelId) => {
+                        console.log('[App] Panel closed:', panelId);
+                        // 从激活的动态面板列表中移除
+                        setActiveDynamicPanels(prev => prev.filter(id => id !== panelId));
+                    }}
+                />
             </div>
 
             <div className="editor-footer">
@@ -748,18 +792,6 @@ function App() {
                 <AboutDialog onClose={() => setShowAbout(false)} locale={locale} />
             )}
 
-            {showBehaviorTreeEditor && (
-                <BehaviorTreeWindow
-                    isOpen={showBehaviorTreeEditor}
-                    onClose={() => {
-                        setShowBehaviorTreeEditor(false);
-                        setBehaviorTreeFilePath(null);
-                    }}
-                    filePath={behaviorTreeFilePath}
-                    projectPath={currentProjectPath}
-                />
-            )}
-
             {showPluginGenerator && (
                 <PluginGeneratorWindow
                     onClose={() => setShowPluginGenerator(false)}

packages/editor-app/src/api/tauri.ts

@@ -146,6 +146,39 @@ export class TauriAPI {
     static async scanBehaviorTrees(projectPath: string): Promise<string[]> {
         return await invoke<string[]>('scan_behavior_trees', { projectPath });
     }
+
+    /**
+   * 重命名文件或文件夹
+   * @param oldPath 原路径
+   * @param newPath 新路径
+   */
+    static async renameFileOrFolder(oldPath: string, newPath: string): Promise<void> {
+        return await invoke<void>('rename_file_or_folder', { oldPath, newPath });
+    }
+
+    /**
+   * 删除文件
+   * @param path 文件路径
+   */
+    static async deleteFile(path: string): Promise<void> {
+        return await invoke<void>('delete_file', { path });
+    }
+
+    /**
+   * 删除文件夹
+   * @param path 文件夹路径
+   */
+    static async deleteFolder(path: string): Promise<void> {
+        return await invoke<void>('delete_folder', { path });
+    }
+
+    /**
+   * 创建文件
+   * @param path 文件路径
+   */
+    static async createFile(path: string): Promise<void> {
+        return await invoke<void>('create_file', { path });
+    }
 }
 
 export interface DirectoryEntry {

packages/editor-app/src/application/hooks/useContextMenu.ts

@@ -30,6 +30,17 @@ export function useContextMenu() {
         });
     };
 
+    const handleCanvasContextMenu = (e: React.MouseEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        setContextMenu({
+            visible: true,
+            position: { x: e.clientX, y: e.clientY },
+            nodeId: null
+        });
+    };
+
     const closeContextMenu = () => {
         setContextMenu({ ...contextMenu, visible: false });
     };
@@ -38,6 +49,7 @@ export function useContextMenu() {
         contextMenu,
         setContextMenu,
         handleNodeContextMenu,
+        handleCanvasContextMenu,
         closeContextMenu
     };
 }

packages/editor-app/src/application/hooks/useQuickCreateMenu.ts

@@ -131,11 +131,6 @@ export function useQuickCreateMenu(params: UseQuickCreateMenuParams) {
             return;
         }
 
-        // 创建模式：需要连接
-        if (!connectingFrom) {
-            return;
-        }
-
         const rect = canvasRef.current?.getBoundingClientRect();
         if (!rect) {
             return;
@@ -150,20 +145,23 @@ export function useQuickCreateMenu(params: UseQuickCreateMenuParams) {
             template.defaultConfig
         );
 
-        const fromNode = nodes.find((n: BehaviorTreeNode) => n.id === connectingFrom);
-        if (fromNode) {
-            if (connectingFromProperty) {
-                // 属性连接
-                connectionOperations.addConnection(
-                    connectingFrom,
-                    newNode.id,
-                    'property',
-                    connectingFromProperty,
-                    undefined
-                );
-            } else {
-                // 节点连接
-                connectionOperations.addConnection(connectingFrom, newNode.id, 'node');
+        // 如果有连接源，创建连接
+        if (connectingFrom) {
+            const fromNode = nodes.find((n: BehaviorTreeNode) => n.id === connectingFrom);
+            if (fromNode) {
+                if (connectingFromProperty) {
+                    // 属性连接
+                    connectionOperations.addConnection(
+                        connectingFrom,
+                        newNode.id,
+                        'property',
+                        connectingFromProperty,
+                        undefined
+                    );
+                } else {
+                    // 节点连接
+                    connectionOperations.addConnection(connectingFrom, newNode.id, 'node');
+                }
             }
         }
 

packages/editor-app/src/application/services/ExecutionController.ts

@@ -1,12 +1,11 @@
 import { BehaviorTreeExecutor, ExecutionStatus, ExecutionLog } from '../../utils/BehaviorTreeExecutor';
-import { BehaviorTreeNode, Connection } from '../../stores/behaviorTreeStore';
+import { BehaviorTreeNode, Connection, NodeExecutionStatus } from '../../stores/behaviorTreeStore';
 import { BlackboardValue } from '../../domain/models/Blackboard';
 import { DOMCache } from '../../presentation/utils/DOMCache';
 import { EditorEventBus, EditorEvent } from '../../infrastructure/events/EditorEventBus';
 import { ExecutionHooksManager } from '../interfaces/IExecutionHooks';
 
 export type ExecutionMode = 'idle' | 'running' | 'paused' | 'step';
-type NodeExecutionStatus = 'idle' | 'running' | 'success' | 'failure';
 type BlackboardVariables = Record<string, BlackboardValue>;
 
 interface ExecutionControllerConfig {
@@ -15,6 +14,7 @@ interface ExecutionControllerConfig {
     onLogsUpdate: (logs: ExecutionLog[]) => void;
     onBlackboardUpdate: (variables: BlackboardVariables) => void;
     onTickCountUpdate: (count: number) => void;
+    onExecutionStatusUpdate: (statuses: Map<string, NodeExecutionStatus>, orders: Map<string, number>) => void;
     eventBus?: EditorEventBus;
     hooksManager?: ExecutionHooksManager;
 }
@@ -36,6 +36,12 @@ export class ExecutionController {
     private currentConnections: Connection[] = [];
     private currentBlackboard: BlackboardVariables = {};
 
+    private stepByStepMode: boolean = true;
+    private pendingStatusUpdates: ExecutionStatus[] = [];
+    private currentlyDisplayedIndex: number = 0;
+    private lastStepTime: number = 0;
+    private stepInterval: number = 200;
+
     constructor(config: ExecutionControllerConfig) {
         this.config = config;
         this.executor = new BehaviorTreeExecutor();
@@ -57,6 +63,7 @@ export class ExecutionController {
 
     setSpeed(speed: number): void {
         this.speed = speed;
+        this.lastTickTime = 0;
     }
 
     async play(
@@ -156,23 +163,14 @@ export class ExecutionController {
             this.mode = 'idle';
             this.tickCount = 0;
             this.lastTickTime = 0;
+            this.lastStepTime = 0;
+            this.pendingStatusUpdates = [];
+            this.currentlyDisplayedIndex = 0;
 
             this.domCache.clearAllStatusTimers();
             this.domCache.clearStatusCache();
 
-            this.domCache.forEachNode((node) => {
-                node.classList.remove('running', 'success', 'failure', 'executed');
-            });
-
-            this.domCache.forEachConnection((path) => {
-                const connectionType = path.getAttribute('data-connection-type');
-                if (connectionType === 'property') {
-                    path.setAttribute('stroke', '#9c27b0');
-                } else {
-                    path.setAttribute('stroke', '#0e639c');
-                }
-                path.setAttribute('stroke-width', '2');
-            });
+            this.config.onExecutionStatusUpdate(new Map(), new Map());
 
             if (this.animationFrameId !== null) {
                 cancelAnimationFrame(this.animationFrameId);
@@ -217,6 +215,24 @@ export class ExecutionController {
         return {};
     }
 
+    updateNodes(nodes: BehaviorTreeNode[]): void {
+        if (this.mode === 'idle' || !this.executor) {
+            return;
+        }
+
+        this.currentNodes = nodes;
+
+        this.executor.buildTree(
+            nodes,
+            this.config.rootNodeId,
+            this.currentBlackboard,
+            this.currentConnections,
+            this.handleExecutionStatusUpdate.bind(this)
+        );
+
+        this.executor.start();
+    }
+
     clearDOMCache(): void {
         this.domCache.clearAll();
     }
@@ -239,21 +255,96 @@ export class ExecutionController {
             return;
         }
 
+        if (this.stepByStepMode) {
+            this.handleStepByStepExecution(currentTime);
+        } else {
+            this.handleNormalExecution(currentTime);
+        }
+
+        this.animationFrameId = requestAnimationFrame(this.tickLoop.bind(this));
+    }
+
+    private handleNormalExecution(currentTime: number): void {
         const baseTickInterval = 16.67;
-        const tickInterval = baseTickInterval / this.speed;
+        const scaledTickInterval = baseTickInterval / this.speed;
 
-        if (this.lastTickTime === 0 || (currentTime - this.lastTickTime) >= tickInterval) {
-            const deltaTime = 0.016;
+        if (this.lastTickTime === 0) {
+            this.lastTickTime = currentTime;
+        }
 
-            this.executor.tick(deltaTime);
+        const elapsed = currentTime - this.lastTickTime;
 
-            this.tickCount = this.executor.getTickCount();
+        if (elapsed >= scaledTickInterval) {
+            const deltaTime = baseTickInterval / 1000;
+
+            this.executor!.tick(deltaTime);
+
+            this.tickCount = this.executor!.getTickCount();
             this.config.onTickCountUpdate(this.tickCount);
 
             this.lastTickTime = currentTime;
         }
+    }
 
-        this.animationFrameId = requestAnimationFrame(this.tickLoop.bind(this));
+    private handleStepByStepExecution(currentTime: number): void {
+        if (this.lastStepTime === 0) {
+            this.lastStepTime = currentTime;
+        }
+
+        const stepElapsed = currentTime - this.lastStepTime;
+        const actualStepInterval = this.stepInterval / this.speed;
+
+        if (stepElapsed >= actualStepInterval) {
+            if (this.currentlyDisplayedIndex < this.pendingStatusUpdates.length) {
+                this.displayNextNode();
+                this.lastStepTime = currentTime;
+            } else {
+                if (this.lastTickTime === 0) {
+                    this.lastTickTime = currentTime;
+                }
+
+                const tickElapsed = currentTime - this.lastTickTime;
+                const baseTickInterval = 16.67;
+                const scaledTickInterval = baseTickInterval / this.speed;
+
+                if (tickElapsed >= scaledTickInterval) {
+                    const deltaTime = baseTickInterval / 1000;
+                    this.executor!.tick(deltaTime);
+                    this.tickCount = this.executor!.getTickCount();
+                    this.config.onTickCountUpdate(this.tickCount);
+                    this.lastTickTime = currentTime;
+                }
+            }
+        }
+    }
+
+    private displayNextNode(): void {
+        if (this.currentlyDisplayedIndex >= this.pendingStatusUpdates.length) {
+            return;
+        }
+
+        const statusesToDisplay = this.pendingStatusUpdates.slice(0, this.currentlyDisplayedIndex + 1);
+        const currentNode = this.pendingStatusUpdates[this.currentlyDisplayedIndex];
+
+        if (!currentNode) {
+            return;
+        }
+
+        const statusMap = new Map<string, NodeExecutionStatus>();
+        const orderMap = new Map<string, number>();
+
+        statusesToDisplay.forEach((s) => {
+            statusMap.set(s.nodeId, s.status);
+            if (s.executionOrder !== undefined) {
+                orderMap.set(s.nodeId, s.executionOrder);
+            }
+        });
+
+        const nodeName = this.currentNodes.find(n => n.id === currentNode.nodeId)?.template.displayName || 'Unknown';
+        console.log(`[StepByStep] Displaying ${this.currentlyDisplayedIndex + 1}/${this.pendingStatusUpdates.length} | ${nodeName} | Order: ${currentNode.executionOrder} | ID: ${currentNode.nodeId}`);
+        this.config.onExecutionStatusUpdate(statusMap, orderMap);
+
+        this.currentlyDisplayedIndex++;
     }
 
     private handleExecutionStatusUpdate(
@@ -267,52 +358,49 @@ export class ExecutionController {
             this.config.onBlackboardUpdate(runtimeBlackboardVars);
         }
 
-        const statusMap: Record<string, NodeExecutionStatus> = {};
+        if (this.stepByStepMode) {
+            const statusesWithOrder = statuses.filter(s => s.executionOrder !== undefined);
 
-        statuses.forEach((s) => {
-            statusMap[s.nodeId] = s.status;
+            if (statusesWithOrder.length > 0) {
+                const minOrder = Math.min(...statusesWithOrder.map(s => s.executionOrder!));
 
-            if (!this.domCache.hasStatusChanged(s.nodeId, s.status)) {
-                return;
+                if (minOrder === 1 || this.pendingStatusUpdates.length === 0) {
+                    this.pendingStatusUpdates = statusesWithOrder.sort((a, b) =>
+                        (a.executionOrder || 0) - (b.executionOrder || 0)
+                    );
+                    this.currentlyDisplayedIndex = 0;
+                    this.lastStepTime = 0;
+                } else {
+                    const maxExistingOrder = this.pendingStatusUpdates.length > 0
+                        ? Math.max(...this.pendingStatusUpdates.map(s => s.executionOrder || 0))
+                        : 0;
+
+                    const newStatuses = statusesWithOrder.filter(s =>
+                        (s.executionOrder || 0) > maxExistingOrder
+                    );
+
+                    if (newStatuses.length > 0) {
+                        console.log(`[StepByStep] Appending ${newStatuses.length} new nodes, orders:`, newStatuses.map(s => s.executionOrder));
+                        this.pendingStatusUpdates = [
+                            ...this.pendingStatusUpdates,
+                            ...newStatuses
+                        ].sort((a, b) => (a.executionOrder || 0) - (b.executionOrder || 0));
+                    }
+                }
             }
-            this.domCache.setLastStatus(s.nodeId, s.status);
+        } else {
+            const statusMap = new Map<string, NodeExecutionStatus>();
+            const orderMap = new Map<string, number>();
 
-            const nodeElement = this.domCache.getNode(s.nodeId);
-            if (!nodeElement) {
-                return;
-            }
+            statuses.forEach((s) => {
+                statusMap.set(s.nodeId, s.status);
+                if (s.executionOrder !== undefined) {
+                    orderMap.set(s.nodeId, s.executionOrder);
+                }
+            });
 
-            this.domCache.removeNodeClasses(s.nodeId, 'running', 'success', 'failure', 'executed');
-
-            if (s.status === 'running') {
-                this.domCache.addNodeClasses(s.nodeId, 'running');
-            } else if (s.status === 'success') {
-                this.domCache.addNodeClasses(s.nodeId, 'success');
-
-                this.domCache.clearStatusTimer(s.nodeId);
-
-                const timer = window.setTimeout(() => {
-                    this.domCache.removeNodeClasses(s.nodeId, 'success');
-                    this.domCache.addNodeClasses(s.nodeId, 'executed');
-                    this.domCache.clearStatusTimer(s.nodeId);
-                }, 2000);
-
-                this.domCache.setStatusTimer(s.nodeId, timer);
-            } else if (s.status === 'failure') {
-                this.domCache.addNodeClasses(s.nodeId, 'failure');
-
-                this.domCache.clearStatusTimer(s.nodeId);
-
-                const timer = window.setTimeout(() => {
-                    this.domCache.removeNodeClasses(s.nodeId, 'failure');
-                    this.domCache.clearStatusTimer(s.nodeId);
-                }, 2000);
-
-                this.domCache.setStatusTimer(s.nodeId, timer);
-            }
-        });
-
-        this.updateConnectionStyles(statusMap);
+            this.config.onExecutionStatusUpdate(statusMap, orderMap);
+        }
     }
 
     private updateConnectionStyles(

packages/editor-app/src/components/AssetBrowser.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
-import { Folder, File, FileCode, FileJson, FileImage, FileText, FolderOpen, Copy, Trash2, Edit3 } from 'lucide-react';
+import { Folder, File, FileCode, FileJson, FileImage, FileText, FolderOpen, Copy, Trash2, Edit3, LayoutGrid, List } from 'lucide-react';
 import { Core } from '@esengine/ecs-framework';
-import { MessageHub } from '@esengine/editor-core';
+import { MessageHub, FileActionRegistry } from '@esengine/editor-core';
 import { TauriAPI, DirectoryEntry } from '../api/tauri';
 import { FileTree } from './FileTree';
 import { ResizablePanel } from './ResizablePanel';
@@ -13,21 +13,30 @@ interface AssetItem {
   path: string;
   type: 'file' | 'folder';
   extension?: string;
+  size?: number;
+  modified?: number;
 }
 
 interface AssetBrowserProps {
   projectPath: string | null;
   locale: string;
   onOpenScene?: (scenePath: string) => void;
-  onOpenBehaviorTree?: (btreePath: string) => void;
 }
 
-export function AssetBrowser({ projectPath, locale, onOpenScene, onOpenBehaviorTree }: AssetBrowserProps) {
+export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserProps) {
+    const messageHub = Core.services.resolve(MessageHub);
+    const fileActionRegistry = Core.services.resolve(FileActionRegistry);
     const [currentPath, setCurrentPath] = useState<string | null>(null);
     const [selectedPath, setSelectedPath] = useState<string | null>(null);
     const [assets, setAssets] = useState<AssetItem[]>([]);
     const [searchQuery, setSearchQuery] = useState('');
+    const [searchResults, setSearchResults] = useState<AssetItem[]>([]);
+    const [isSearching, setIsSearching] = useState(false);
     const [loading, setLoading] = useState(false);
+    const [showDetailView, setShowDetailView] = useState(() => {
+        const saved = localStorage.getItem('asset-browser-detail-view');
+        return saved !== null ? saved === 'true' : false;
+    });
     const [contextMenu, setContextMenu] = useState<{
     position: { x: number; y: number };
     asset: AssetItem;
@@ -105,7 +114,9 @@ export function AssetBrowser({ projectPath, locale, onOpenScene, onOpenBehaviorT
                     name: entry.name,
                     path: entry.path,
                     type: entry.is_dir ? 'folder' as const : 'file' as const,
-                    extension
+                    extension,
+                    size: entry.size,
+                    modified: entry.modified
                 };
             });
 
@@ -121,6 +132,73 @@ export function AssetBrowser({ projectPath, locale, onOpenScene, onOpenBehaviorT
         }
     };
 
+    const searchProjectRecursively = async (rootPath: string, query: string): Promise<AssetItem[]> => {
+        const results: AssetItem[] = [];
+        const lowerQuery = query.toLowerCase();
+
+        const searchDirectory = async (dirPath: string) => {
+            try {
+                const entries = await TauriAPI.listDirectory(dirPath);
+
+                for (const entry of entries) {
+                    if (entry.name.startsWith('.')) continue;
+
+                    if (entry.name.toLowerCase().includes(lowerQuery)) {
+                        const extension = entry.is_dir ? undefined :
+                            (entry.name.includes('.') ? entry.name.split('.').pop() : undefined);
+
+                        results.push({
+                            name: entry.name,
+                            path: entry.path,
+                            type: entry.is_dir ? 'folder' as const : 'file' as const,
+                            extension,
+                            size: entry.size,
+                            modified: entry.modified
+                        });
+                    }
+
+                    if (entry.is_dir) {
+                        await searchDirectory(entry.path);
+                    }
+                }
+            } catch (error) {
+                console.error(`Failed to search directory ${dirPath}:`, error);
+            }
+        };
+
+        await searchDirectory(rootPath);
+        return results.sort((a, b) => {
+            if (a.type === b.type) return a.name.localeCompare(b.name);
+            return a.type === 'folder' ? -1 : 1;
+        });
+    };
+
+    useEffect(() => {
+        const performSearch = async () => {
+            if (!searchQuery.trim()) {
+                setSearchResults([]);
+                setIsSearching(false);
+                return;
+            }
+
+            if (!projectPath) return;
+
+            setIsSearching(true);
+            try {
+                const results = await searchProjectRecursively(projectPath, searchQuery);
+                setSearchResults(results);
+            } catch (error) {
+                console.error('Search failed:', error);
+                setSearchResults([]);
+            } finally {
+                setIsSearching(false);
+            }
+        };
+
+        const timeoutId = setTimeout(performSearch, 300);
+        return () => clearTimeout(timeoutId);
+    }, [searchQuery, projectPath]);
+
     const handleFolderSelect = (path: string) => {
         setCurrentPath(path);
         loadAssets(path);
@@ -128,6 +206,17 @@ export function AssetBrowser({ projectPath, locale, onOpenScene, onOpenBehaviorT
 
     const handleAssetClick = (asset: AssetItem) => {
         setSelectedPath(asset.path);
+
+        messageHub?.publish('asset-file:selected', {
+            fileInfo: {
+                name: asset.name,
+                path: asset.path,
+                extension: asset.extension,
+                size: asset.size,
+                modified: asset.modified,
+                isDirectory: asset.type === 'folder'
+            }
+        });
     };
 
     const handleAssetDoubleClick = async (asset: AssetItem) => {
@@ -137,15 +226,25 @@ export function AssetBrowser({ projectPath, locale, onOpenScene, onOpenBehaviorT
         } else if (asset.type === 'file') {
             if (asset.extension === 'ecs' && onOpenScene) {
                 onOpenScene(asset.path);
-            } else if (asset.extension === 'btree' && onOpenBehaviorTree) {
-                onOpenBehaviorTree(asset.path);
-            } else {
-                // 其他文件使用系统默认程序打开
-                try {
-                    await TauriAPI.openFileWithSystemApp(asset.path);
-                } catch (error) {
-                    console.error('Failed to open file:', error);
+                return;
+            }
+
+            if (fileActionRegistry) {
+                console.log('[AssetBrowser] Handling double click for:', asset.path);
+                console.log('[AssetBrowser] Extension:', asset.extension);
+                const handled = await fileActionRegistry.handleDoubleClick(asset.path);
+                console.log('[AssetBrowser] Handled by plugin:', handled);
+                if (handled) {
+                    return;
                 }
+            } else {
+                console.log('[AssetBrowser] FileActionRegistry not available');
+            }
+
+            try {
+                await TauriAPI.openFileWithSystemApp(asset.path);
+            } catch (error) {
+                console.error('Failed to open file:', error);
             }
         }
     };
@@ -168,6 +267,27 @@ export function AssetBrowser({ projectPath, locale, onOpenScene, onOpenBehaviorT
                 icon: <File size={16} />,
                 onClick: () => handleAssetDoubleClick(asset)
             });
+
+            if (fileActionRegistry) {
+                const handlers = fileActionRegistry.getHandlersForFile(asset.path);
+                for (const handler of handlers) {
+                    if (handler.getContextMenuItems) {
+                        const parentPath = asset.path.substring(0, asset.path.lastIndexOf('/'));
+                        const pluginItems = handler.getContextMenuItems(asset.path, parentPath);
+                        for (const pluginItem of pluginItems) {
+                            items.push({
+                                label: pluginItem.label,
+                                icon: pluginItem.icon,
+                                onClick: () => pluginItem.onClick(asset.path, parentPath),
+                                disabled: pluginItem.disabled,
+                                separator: pluginItem.separator
+                            });
+                        }
+                    }
+                }
+            }
+
+            items.push({ label: '', separator: true, onClick: () => {} });
         }
 
         // 在文件管理器中显示
@@ -238,11 +358,14 @@ export function AssetBrowser({ projectPath, locale, onOpenScene, onOpenBehaviorT
         return crumbs;
     };
 
-    const filteredAssets = searchQuery
-        ? assets.filter((asset) =>
-            asset.name.toLowerCase().includes(searchQuery.toLowerCase())
-        )
-        : assets;
+    const filteredAssets = searchQuery.trim() ? searchResults : assets;
+
+    const getRelativePath = (fullPath: string): string => {
+        if (!projectPath) return fullPath;
+        const relativePath = fullPath.replace(projectPath, '').replace(/^[/\\]/, '');
+        const parts = relativePath.split(/[/\\]/);
+        return parts.slice(0, -1).join('/');
+    };
 
     const getFileIcon = (asset: AssetItem) => {
         if (asset.type === 'folder') {
@@ -289,26 +412,102 @@ export function AssetBrowser({ projectPath, locale, onOpenScene, onOpenBehaviorT
 
     return (
         <div className="asset-browser">
-            <div className="asset-browser-header">
-                <h3>{t.title}</h3>
-            </div>
-
             <div className="asset-browser-content">
-                <ResizablePanel
-                    direction="horizontal"
-                    defaultSize={200}
-                    minSize={150}
-                    maxSize={400}
-                    leftOrTop={
-                        <div className="asset-browser-tree">
-                            <FileTree
-                                rootPath={projectPath}
-                                onSelectFile={handleFolderSelect}
-                                selectedPath={currentPath}
-                            />
-                        </div>
-                    }
-                    rightOrBottom={
+                <div style={{
+                    padding: '8px',
+                    borderBottom: '1px solid #3e3e3e',
+                    display: 'flex',
+                    gap: '8px',
+                    background: '#252526',
+                    alignItems: 'center'
+                }}>
+                    <div style={{ display: 'flex', gap: '4px' }}>
+                        <button
+                            onClick={() => {
+                                setShowDetailView(true);
+                                localStorage.setItem('asset-browser-detail-view', 'true');
+                            }}
+                            style={{
+                                padding: '6px 12px',
+                                background: showDetailView ? '#0e639c' : 'transparent',
+                                border: '1px solid #3e3e3e',
+                                borderRadius: '3px',
+                                color: showDetailView ? '#ffffff' : '#cccccc',
+                                cursor: 'pointer',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '6px',
+                                transition: 'all 0.2s',
+                                fontSize: '12px',
+                                fontWeight: showDetailView ? '500' : 'normal'
+                            }}
+                            title="显示详细视图（树形图 + 资产列表）"
+                        >
+                            <LayoutGrid size={14} />
+                            详细视图
+                        </button>
+                        <button
+                            onClick={() => {
+                                setShowDetailView(false);
+                                localStorage.setItem('asset-browser-detail-view', 'false');
+                            }}
+                            style={{
+                                padding: '6px 12px',
+                                background: !showDetailView ? '#0e639c' : 'transparent',
+                                border: '1px solid #3e3e3e',
+                                borderRadius: '3px',
+                                color: !showDetailView ? '#ffffff' : '#cccccc',
+                                cursor: 'pointer',
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '6px',
+                                transition: 'all 0.2s',
+                                fontSize: '12px',
+                                fontWeight: !showDetailView ? '500' : 'normal'
+                            }}
+                            title="仅显示树形图（查看完整路径）"
+                        >
+                            <List size={14} />
+                            树形图
+                        </button>
+                    </div>
+                    <input
+                        type="text"
+                        className="asset-search"
+                        placeholder={t.search}
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        style={{
+                            flex: 1,
+                            padding: '6px 10px',
+                            background: '#3c3c3c',
+                            border: '1px solid #3e3e3e',
+                            borderRadius: '3px',
+                            color: '#cccccc',
+                            fontSize: '12px',
+                            outline: 'none'
+                        }}
+                    />
+                </div>
+                {showDetailView ? (
+                    <ResizablePanel
+                        direction="horizontal"
+                        defaultSize={200}
+                        minSize={150}
+                        maxSize={400}
+                        leftOrTop={
+                            <div className="asset-browser-tree">
+                                <FileTree
+                                    rootPath={projectPath}
+                                    onSelectFile={handleFolderSelect}
+                                    selectedPath={currentPath}
+                                    messageHub={messageHub}
+                                    searchQuery={searchQuery}
+                                    showFiles={false}
+                                />
+                            </div>
+                        }
+                        rightOrBottom={
                         <div className="asset-browser-list">
                             <div className="asset-browser-breadcrumb">
                                 {breadcrumbs.map((crumb, index) => (
@@ -326,47 +525,65 @@ export function AssetBrowser({ projectPath, locale, onOpenScene, onOpenBehaviorT
                                     </span>
                                 ))}
                             </div>
-                            <div className="asset-browser-toolbar">
-                                <input
-                                    type="text"
-                                    className="asset-search"
-                                    placeholder={t.search}
-                                    value={searchQuery}
-                                    onChange={(e) => setSearchQuery(e.target.value)}
-                                />
-                            </div>
-                            {loading ? (
+                            {(loading || isSearching) ? (
                                 <div className="asset-browser-loading">
-                                    <p>{t.loading}</p>
+                                    <p>{isSearching ? '搜索中...' : t.loading}</p>
                                 </div>
                             ) : filteredAssets.length === 0 ? (
                                 <div className="asset-browser-empty">
-                                    <p>{t.empty}</p>
+                                    <p>{searchQuery.trim() ? '未找到匹配的资产' : t.empty}</p>
                                 </div>
                             ) : (
                                 <div className="asset-list">
-                                    {filteredAssets.map((asset, index) => (
-                                        <div
-                                            key={index}
-                                            className={`asset-item ${selectedPath === asset.path ? 'selected' : ''}`}
-                                            onClick={() => handleAssetClick(asset)}
-                                            onDoubleClick={() => handleAssetDoubleClick(asset)}
-                                            onContextMenu={(e) => handleContextMenu(e, asset)}
-                                        >
-                                            {getFileIcon(asset)}
-                                            <div className="asset-name" title={asset.name}>
-                                                {asset.name}
+                                    {filteredAssets.map((asset, index) => {
+                                        const relativePath = getRelativePath(asset.path);
+                                        const showPath = searchQuery.trim() && relativePath;
+                                        return (
+                                            <div
+                                                key={index}
+                                                className={`asset-item ${selectedPath === asset.path ? 'selected' : ''}`}
+                                                onClick={() => handleAssetClick(asset)}
+                                                onDoubleClick={() => handleAssetDoubleClick(asset)}
+                                                onContextMenu={(e) => handleContextMenu(e, asset)}
+                                            >
+                                                {getFileIcon(asset)}
+                                                <div className="asset-info">
+                                                    <div className="asset-name" title={asset.path}>
+                                                        {asset.name}
+                                                    </div>
+                                                    {showPath && (
+                                                        <div className="asset-path" style={{
+                                                            fontSize: '11px',
+                                                            color: '#666',
+                                                            marginTop: '2px'
+                                                        }}>
+                                                            {relativePath}
+                                                        </div>
+                                                    )}
+                                                </div>
+                                                <div className="asset-type">
+                                                    {asset.type === 'folder' ? t.folder : (asset.extension || t.file)}
+                                                </div>
                                             </div>
-                                            <div className="asset-type">
-                                                {asset.type === 'folder' ? t.folder : (asset.extension || t.file)}
-                                            </div>
-                                        </div>
-                                    ))}
+                                        );
+                                    })}
                                 </div>
                             )}
                         </div>
                     }
                 />
+                ) : (
+                    <div className="asset-browser-tree-only">
+                        <FileTree
+                            rootPath={projectPath}
+                            onSelectFile={handleFolderSelect}
+                            selectedPath={currentPath}
+                            messageHub={messageHub}
+                            searchQuery={searchQuery}
+                            showFiles={true}
+                        />
+                    </div>
+                )}
             </div>
             {contextMenu && (
                 <ContextMenu

packages/editor-app/src/components/BehaviorTreeBlackboard.tsx

@@ -237,7 +237,7 @@ export const BehaviorTreeBlackboard: React.FC<BehaviorTreeBlackboardProps> = ({
 
             {/* 标题栏 */}
             <div style={{
-                backgroundColor: '#2d2d2d',
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
                 borderBottom: '1px solid #333'
             }}>
                 <div style={{

packages/editor-app/src/components/BehaviorTreeEditor.tsx

@@ -3,7 +3,6 @@ import { NodeTemplate } from '@esengine/behavior-tree';
 import { RotateCcw } from 'lucide-react';
 import { useBehaviorTreeStore, BehaviorTreeNode, ROOT_NODE_ID } from '../stores/behaviorTreeStore';
 import { useUIStore } from '../application/state/UIStore';
-import { BehaviorTreeExecutionPanel } from './BehaviorTreeExecutionPanel';
 import { useToast } from './Toast';
 import { BlackboardValue } from '../domain/models/Blackboard';
 import { BehaviorTreeCanvas } from '../presentation/components/behavior-tree/canvas/BehaviorTreeCanvas';
@@ -39,13 +38,15 @@ interface BehaviorTreeEditorProps {
     onNodeCreate?: (template: NodeTemplate, position: { x: number; y: number }) => void;
     blackboardVariables?: BlackboardVariables;
     projectPath?: string | null;
+    showToolbar?: boolean;
 }
 
 export const BehaviorTreeEditor: React.FC<BehaviorTreeEditorProps> = ({
     onNodeSelect,
     onNodeCreate,
     blackboardVariables = {},
-    projectPath = null
+    projectPath = null,
+    showToolbar = true
 }) => {
     const { showToast } = useToast();
 
@@ -75,7 +76,11 @@ export const BehaviorTreeEditor: React.FC<BehaviorTreeEditorProps> = ({
         setInitialBlackboardVariables,
         setIsExecuting,
         initialBlackboardVariables,
-        isExecuting
+        isExecuting,
+        saveNodesDataSnapshot,
+        restoreNodesData,
+        nodeExecutionStatuses,
+        nodeExecutionOrders
     } = useBehaviorTreeStore();
 
     // UI store（选中、拖拽、画布状态）
@@ -107,7 +112,7 @@ export const BehaviorTreeEditor: React.FC<BehaviorTreeEditorProps> = ({
     const connectionOperations = useConnectionOperations(validator, commandManager);
 
     // 右键菜单
-    const { contextMenu, setContextMenu, handleNodeContextMenu, closeContextMenu } = useContextMenu();
+    const { contextMenu, setContextMenu, handleNodeContextMenu, handleCanvasContextMenu, closeContextMenu } = useContextMenu();
 
     // 组件挂载和连线变化时强制更新，确保连线能正确渲染
     useEffect(() => {
@@ -164,7 +169,9 @@ export const BehaviorTreeEditor: React.FC<BehaviorTreeEditorProps> = ({
         initialBlackboardVariables,
         onBlackboardUpdate: setBlackboardVariables,
         onInitialBlackboardSave: setInitialBlackboardVariables,
-        onExecutingChange: setIsExecuting
+        onExecutingChange: setIsExecuting,
+        onSaveNodesDataSnapshot: saveNodesDataSnapshot,
+        onRestoreNodesData: restoreNodesData
     });
 
     executorRef.current = controller['executor'] || null;
@@ -296,7 +303,8 @@ export const BehaviorTreeEditor: React.FC<BehaviorTreeEditorProps> = ({
         setSelectedConnection,
         setQuickCreateMenu,
         clearConnecting,
-        clearBoxSelect
+        clearBoxSelect,
+        showToast
     });
 
 
@@ -373,6 +381,7 @@ export const BehaviorTreeEditor: React.FC<BehaviorTreeEditorProps> = ({
                         handleNodeMouseUp();
                         handleCanvasMouseUp(e);
                     }}
+                    onContextMenu={handleCanvasContextMenu}
                 >
                     {/* 连接线层 */}
                     <ConnectionLayer
@@ -473,6 +482,8 @@ export const BehaviorTreeEditor: React.FC<BehaviorTreeEditorProps> = ({
                     {nodes.map((node: BehaviorTreeNode) => {
                         const isSelected = selectedNodeIds.includes(node.id);
                         const isBeingDragged = dragStartPositions.has(node.id);
+                        const executionStatus = nodeExecutionStatuses.get(node.id);
+                        const executionOrder = nodeExecutionOrders.get(node.id);
 
                         return (
                             <BehaviorTreeNodeComponent
@@ -485,6 +496,8 @@ export const BehaviorTreeEditor: React.FC<BehaviorTreeEditorProps> = ({
                                 blackboardVariables={blackboardVariables}
                                 initialBlackboardVariables={initialBlackboardVariables}
                                 isExecuting={isExecuting}
+                                executionStatus={executionStatus}
+                                executionOrder={executionOrder}
                                 connections={connections}
                                 nodes={nodes}
                                 executorRef={executorRef}
@@ -543,20 +556,22 @@ export const BehaviorTreeEditor: React.FC<BehaviorTreeEditorProps> = ({
                 </BehaviorTreeCanvas>
 
                 {/* 运行控制工具栏 */}
-                <EditorToolbar
-                    executionMode={executionMode}
-                    canUndo={canUndo}
-                    canRedo={canRedo}
-                    onPlay={handlePlay}
-                    onPause={handlePause}
-                    onStop={handleStop}
-                    onStep={handleStep}
-                    onReset={handleReset}
-                    onUndo={undo}
-                    onRedo={redo}
-                    onResetView={handleResetView}
-                    onClearCanvas={handleClearCanvas}
-                />
+                {showToolbar && (
+                    <EditorToolbar
+                        executionMode={executionMode}
+                        canUndo={canUndo}
+                        canRedo={canRedo}
+                        onPlay={handlePlay}
+                        onPause={handlePause}
+                        onStop={handleStop}
+                        onStep={handleStep}
+                        onReset={handleReset}
+                        onUndo={undo}
+                        onRedo={redo}
+                        onResetView={handleResetView}
+                        onClearCanvas={handleClearCanvas}
+                    />
+                )}
 
                 {/* 快速创建菜单 */}
                 <QuickCreateMenu
@@ -566,14 +581,14 @@ export const BehaviorTreeEditor: React.FC<BehaviorTreeEditorProps> = ({
                     selectedIndex={quickCreateMenu.selectedIndex}
                     mode={quickCreateMenu.mode}
                     iconMap={ICON_MAP}
-                    onSearchChange={(text) => setQuickCreateMenu({
-                        ...quickCreateMenu,
+                    onSearchChange={(text) => setQuickCreateMenu(prev => ({
+                        ...prev,
                         searchText: text
-                    })}
-                    onIndexChange={(index) => setQuickCreateMenu({
-                        ...quickCreateMenu,
+                    }))}
+                    onIndexChange={(index) => setQuickCreateMenu(prev => ({
+                        ...prev,
                         selectedIndex: index
-                    })}
+                    }))}
                     onNodeSelect={handleQuickCreateNode}
                     onClose={() => {
                         setQuickCreateMenu({
@@ -615,21 +630,6 @@ export const BehaviorTreeEditor: React.FC<BehaviorTreeEditorProps> = ({
                 </div>
             </div>
 
-            {/* 执行面板 */}
-            <div style={{
-                height: '250px',
-                borderTop: '1px solid #333'
-            }}>
-                <BehaviorTreeExecutionPanel
-                    logs={executionLogs}
-                    onClearLogs={() => setExecutionLogs([])}
-                    isRunning={executionMode === 'running'}
-                    tickCount={tickCount}
-                    executionSpeed={executionSpeed}
-                    onSpeedChange={handleSpeedChange}
-                />
-            </div>
-
             {/* 右键菜单 */}
             <NodeContextMenu
                 visible={contextMenu.visible}
@@ -646,6 +646,23 @@ export const BehaviorTreeEditor: React.FC<BehaviorTreeEditorProps> = ({
                     });
                     setContextMenu({ ...contextMenu, visible: false });
                 }}
+                onDeleteNode={() => {
+                    if (contextMenu.nodeId) {
+                        nodeOperations.deleteNode(contextMenu.nodeId);
+                        setContextMenu({ ...contextMenu, visible: false });
+                    }
+                }}
+                onCreateNode={() => {
+                    setQuickCreateMenu({
+                        visible: true,
+                        position: contextMenu.position,
+                        searchText: '',
+                        selectedIndex: 0,
+                        mode: 'create',
+                        replaceNodeId: null
+                    });
+                    setContextMenu({ ...contextMenu, visible: false });
+                }}
             />
         </div>
     );

packages/editor-app/src/components/BehaviorTreeNodeProperties.tsx

@@ -39,6 +39,13 @@ export const BehaviorTreeNodeProperties: React.FC<BehaviorTreeNodePropertiesProp
     const { t } = useTranslation();
     const [assetPickerOpen, setAssetPickerOpen] = useState(false);
     const [assetPickerProperty, setAssetPickerProperty] = useState<string | null>(null);
+    const [isComposing, setIsComposing] = useState(false);
+    const [localValues, setLocalValues] = useState<Record<string, any>>({});
+
+    // 当节点切换时，清空本地状态
+    React.useEffect(() => {
+        setLocalValues({});
+    }, [selectedNode?.template.className]);
 
     if (!selectedNode) {
         return (
@@ -58,11 +65,31 @@ export const BehaviorTreeNodeProperties: React.FC<BehaviorTreeNodePropertiesProp
     const { template, data } = selectedNode;
 
     const handleChange = (propName: string, value: any) => {
+        if (!isComposing) {
+            onPropertyChange?.(propName, value);
+        }
+    };
+
+    const handleInputChange = (propName: string, value: any) => {
+        setLocalValues(prev => ({ ...prev, [propName]: value }));
+        if (!isComposing) {
+            onPropertyChange?.(propName, value);
+        }
+    };
+
+    const handleCompositionStart = () => {
+        setIsComposing(true);
+    };
+
+    const handleCompositionEnd = (propName: string, value: any) => {
+        setIsComposing(false);
         onPropertyChange?.(propName, value);
     };
 
     const renderProperty = (prop: PropertyDefinition) => {
-        const value = data[prop.name] ?? prop.defaultValue;
+        const propName = prop.name;
+        const hasLocalValue = propName in localValues;
+        const value = hasLocalValue ? localValues[propName] : (data[prop.name] ?? prop.defaultValue);
 
         switch (prop.type) {
             case 'string':
@@ -71,7 +98,10 @@ export const BehaviorTreeNodeProperties: React.FC<BehaviorTreeNodePropertiesProp
                     <input
                         type="text"
                         value={value || ''}
-                        onChange={(e) => handleChange(prop.name, e.target.value)}
+                        onChange={(e) => handleInputChange(propName, e.target.value)}
+                        onCompositionStart={handleCompositionStart}
+                        onCompositionEnd={(e) => handleCompositionEnd(propName, (e.target as HTMLInputElement).value)}
+                        onBlur={(e) => onPropertyChange?.(propName, e.target.value)}
                         placeholder={prop.description}
                         style={{
                             width: '100%',
@@ -148,7 +178,10 @@ export const BehaviorTreeNodeProperties: React.FC<BehaviorTreeNodePropertiesProp
                 return (
                     <textarea
                         value={value || ''}
-                        onChange={(e) => handleChange(prop.name, e.target.value)}
+                        onChange={(e) => handleInputChange(propName, e.target.value)}
+                        onCompositionStart={handleCompositionStart}
+                        onCompositionEnd={(e) => handleCompositionEnd(propName, (e.target as HTMLTextAreaElement).value)}
+                        onBlur={(e) => onPropertyChange?.(propName, e.target.value)}
                         placeholder={prop.description}
                         rows={5}
                         style={{
@@ -171,7 +204,10 @@ export const BehaviorTreeNodeProperties: React.FC<BehaviorTreeNodePropertiesProp
                         <input
                             type="text"
                             value={value || ''}
-                            onChange={(e) => handleChange(prop.name, e.target.value)}
+                            onChange={(e) => handleInputChange(propName, e.target.value)}
+                            onCompositionStart={handleCompositionStart}
+                            onCompositionEnd={(e) => handleCompositionEnd(propName, (e.target as HTMLInputElement).value)}
+                            onBlur={(e) => onPropertyChange?.(propName, e.target.value)}
                             placeholder="黑板变量名"
                             style={{
                                 flex: 1,
@@ -340,43 +376,6 @@ export const BehaviorTreeNodeProperties: React.FC<BehaviorTreeNodePropertiesProp
                 )}
             </div>
 
-            {/* 操作按钮 */}
-            <div style={{
-                padding: '15px',
-                borderTop: '1px solid #333',
-                display: 'flex',
-                gap: '10px'
-            }}>
-                <button
-                    style={{
-                        flex: 1,
-                        padding: '8px',
-                        backgroundColor: '#0e639c',
-                        border: 'none',
-                        borderRadius: '3px',
-                        color: '#fff',
-                        cursor: 'pointer',
-                        fontSize: '13px'
-                    }}
-                >
-                    {t('behaviorTree.apply')}
-                </button>
-                <button
-                    style={{
-                        flex: 1,
-                        padding: '8px',
-                        backgroundColor: '#3c3c3c',
-                        border: 'none',
-                        borderRadius: '3px',
-                        color: '#cccccc',
-                        cursor: 'pointer',
-                        fontSize: '13px'
-                    }}
-                >
-                    {t('behaviorTree.reset')}
-                </button>
-            </div>
-
             {/* 资产选择器对话框 */}
             {assetPickerOpen && projectPath && assetPickerProperty && (
                 <AssetPickerDialog

packages/editor-app/src/components/FileTree.tsx

@@ -1,12 +1,19 @@
 import { useState, useEffect } from 'react';
-import { Folder, ChevronRight, ChevronDown } from 'lucide-react';
+import { Folder, ChevronRight, ChevronDown, File, Edit3, Trash2, FolderOpen, Copy, FileText, FolderPlus, ChevronsDown, ChevronsUp } from 'lucide-react';
 import { TauriAPI, DirectoryEntry } from '../api/tauri';
+import { MessageHub, FileActionRegistry } from '@esengine/editor-core';
+import { Core } from '@esengine/ecs-framework';
+import { ContextMenu, ContextMenuItem } from './ContextMenu';
+import { ConfirmDialog } from './ConfirmDialog';
+import { PromptDialog } from './PromptDialog';
 import '../styles/FileTree.css';
 
 interface TreeNode {
   name: string;
   path: string;
-  type: 'folder';
+  type: 'folder' | 'file';
+  size?: number;
+  modified?: number;
   children?: TreeNode[];
   expanded?: boolean;
   loaded?: boolean;
@@ -16,11 +23,30 @@ interface FileTreeProps {
   rootPath: string | null;
   onSelectFile?: (path: string) => void;
   selectedPath?: string | null;
+  messageHub?: MessageHub;
+  searchQuery?: string;
+  showFiles?: boolean;
 }
 
-export function FileTree({ rootPath, onSelectFile, selectedPath }: FileTreeProps) {
+export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, searchQuery, showFiles = true }: FileTreeProps) {
     const [tree, setTree] = useState<TreeNode[]>([]);
     const [loading, setLoading] = useState(false);
+    const [internalSelectedPath, setInternalSelectedPath] = useState<string | null>(null);
+    const [contextMenu, setContextMenu] = useState<{
+        position: { x: number; y: number };
+        node: TreeNode | null;
+    } | null>(null);
+    const [renamingNode, setRenamingNode] = useState<string | null>(null);
+    const [newName, setNewName] = useState('');
+    const [deleteDialog, setDeleteDialog] = useState<{ node: TreeNode } | null>(null);
+    const [promptDialog, setPromptDialog] = useState<{
+        type: 'create-file' | 'create-folder' | 'create-template';
+        parentPath: string;
+        templateExtension?: string;
+        templateContent?: (fileName: string) => Promise<string>;
+    } | null>(null);
+    const [filteredTree, setFilteredTree] = useState<TreeNode[]>([]);
+    const fileActionRegistry = Core.services.resolve(FileActionRegistry);
 
     useEffect(() => {
         if (rootPath) {
@@ -30,6 +56,74 @@ export function FileTree({ rootPath, onSelectFile, selectedPath }: FileTreeProps
         }
     }, [rootPath]);
 
+    useEffect(() => {
+        if (selectedPath) {
+            setInternalSelectedPath(selectedPath);
+        }
+    }, [selectedPath]);
+
+    useEffect(() => {
+        const performSearch = async () => {
+            const filterByFileType = (nodes: TreeNode[]): TreeNode[] => {
+                return nodes
+                    .filter(node => showFiles || node.type === 'folder')
+                    .map(node => ({
+                        ...node,
+                        children: node.children ? filterByFileType(node.children) : node.children
+                    }));
+            };
+
+            let result = filterByFileType(tree);
+
+            if (searchQuery && searchQuery.trim()) {
+                const query = searchQuery.toLowerCase();
+
+                const loadAndFilterTree = async (nodes: TreeNode[]): Promise<TreeNode[]> => {
+                    const filtered: TreeNode[] = [];
+
+                    for (const node of nodes) {
+                        const nameMatches = node.name.toLowerCase().includes(query);
+                        let filteredChildren: TreeNode[] = [];
+
+                        if (node.type === 'folder') {
+                            let childrenToSearch = node.children || [];
+
+                            if (!node.loaded) {
+                                try {
+                                    const entries = await TauriAPI.listDirectory(node.path);
+                                    childrenToSearch = entriesToNodes(entries);
+                                } catch (error) {
+                                    console.error('Failed to load children for search:', error);
+                                }
+                            }
+
+                            if (childrenToSearch.length > 0) {
+                                filteredChildren = await loadAndFilterTree(childrenToSearch);
+                            }
+                        }
+
+                        if (nameMatches || filteredChildren.length > 0) {
+                            filtered.push({
+                                ...node,
+                                expanded: filteredChildren.length > 0,
+                                loaded: true,
+                                children: filteredChildren.length > 0 ? filteredChildren : (node.type === 'folder' ? [] : undefined)
+                            });
+                        }
+                    }
+
+                    return filtered;
+                };
+
+                result = await loadAndFilterTree(result);
+            }
+
+            setFilteredTree(result);
+        };
+
+        performSearch();
+    }, [searchQuery, tree, showFiles]);
+
     const loadRootDirectory = async (path: string) => {
         setLoading(true);
         try {
@@ -57,16 +151,20 @@ export function FileTree({ rootPath, onSelectFile, selectedPath }: FileTreeProps
     };
 
     const entriesToNodes = (entries: DirectoryEntry[]): TreeNode[] => {
-    // 只显示文件夹，过滤掉文件
         return entries
-            .filter((entry) => entry.is_dir)
+            .sort((a, b) => {
+                if (a.is_dir === b.is_dir) return a.name.localeCompare(b.name);
+                return a.is_dir ? -1 : 1;
+            })
             .map((entry) => ({
                 name: entry.name,
                 path: entry.path,
-                type: 'folder' as const,
-                children: [],
+                type: entry.is_dir ? 'folder' as const : 'file' as const,
+                size: entry.size,
+                modified: entry.modified,
+                children: entry.is_dir ? [] : undefined,
                 expanded: false,
-                loaded: false
+                loaded: entry.is_dir ? false : undefined
             }));
     };
 
@@ -115,13 +213,343 @@ export function FileTree({ rootPath, onSelectFile, selectedPath }: FileTreeProps
         setTree(newTree);
     };
 
+    const refreshTree = async () => {
+        if (rootPath) {
+            await loadRootDirectory(rootPath);
+        }
+    };
+
+    const expandAll = async () => {
+        const expandNode = async (node: TreeNode): Promise<TreeNode> => {
+            if (node.type === 'folder') {
+                let children = node.children || [];
+
+                if (!node.loaded) {
+                    try {
+                        const entries = await TauriAPI.listDirectory(node.path);
+                        children = entriesToNodes(entries);
+                    } catch (error) {
+                        console.error('Failed to load children:', error);
+                        children = [];
+                    }
+                }
+
+                const expandedChildren = await Promise.all(
+                    children.map(child => expandNode(child))
+                );
+
+                return {
+                    ...node,
+                    expanded: true,
+                    loaded: true,
+                    children: expandedChildren
+                };
+            }
+            return node;
+        };
+
+        const expandedTree = await Promise.all(tree.map(node => expandNode(node)));
+        setTree(expandedTree);
+    };
+
+    const collapseAll = () => {
+        const collapseNode = (node: TreeNode): TreeNode => {
+            if (node.type === 'folder') {
+                return {
+                    ...node,
+                    expanded: false,
+                    children: node.children ? node.children.map(collapseNode) : node.children
+                };
+            }
+            return node;
+        };
+
+        const collapsedTree = tree.map(node => collapseNode(node));
+        setTree(collapsedTree);
+    };
+
+    const handleRename = async (node: TreeNode) => {
+        if (!newName || newName === node.name) {
+            setRenamingNode(null);
+            return;
+        }
+
+        const pathParts = node.path.split(/[/\\]/);
+        pathParts[pathParts.length - 1] = newName;
+        const newPath = pathParts.join('/');
+
+        try {
+            await TauriAPI.renameFileOrFolder(node.path, newPath);
+            await refreshTree();
+            setRenamingNode(null);
+            setNewName('');
+        } catch (error) {
+            console.error('Failed to rename:', error);
+            alert(`重命名失败: ${error}`);
+        }
+    };
+
+    const handleDeleteClick = (node: TreeNode) => {
+        setContextMenu(null);
+        setDeleteDialog({ node });
+    };
+
+    const handleDeleteConfirm = async () => {
+        if (!deleteDialog) return;
+
+        const node = deleteDialog.node;
+        setDeleteDialog(null);
+
+        try {
+            if (node.type === 'folder') {
+                await TauriAPI.deleteFolder(node.path);
+            } else {
+                await TauriAPI.deleteFile(node.path);
+            }
+            await refreshTree();
+        } catch (error) {
+            console.error('Failed to delete:', error);
+            alert(`删除失败: ${error}`);
+        }
+    };
+
+    const handleCreateFileClick = (parentPath: string) => {
+        setContextMenu(null);
+        setPromptDialog({ type: 'create-file', parentPath });
+    };
+
+    const handleCreateFolderClick = (parentPath: string) => {
+        setContextMenu(null);
+        setPromptDialog({ type: 'create-folder', parentPath });
+    };
+
+    const handleCreateTemplateFileClick = (parentPath: string, template: any) => {
+        setContextMenu(null);
+        setPromptDialog({
+            type: 'create-template',
+            parentPath,
+            templateExtension: template.extension,
+            templateContent: template.createContent
+        });
+    };
+
+    const handlePromptConfirm = async (value: string) => {
+        if (!promptDialog) return;
+
+        const { type, parentPath, templateExtension, templateContent } = promptDialog;
+        setPromptDialog(null);
+
+        let fileName = value;
+        let targetPath = `${parentPath}/${value}`;
+
+        try {
+            if (type === 'create-file') {
+                await TauriAPI.createFile(targetPath);
+            } else if (type === 'create-folder') {
+                await TauriAPI.createDirectory(targetPath);
+            } else if (type === 'create-template' && templateExtension && templateContent) {
+                if (!fileName.endsWith(`.${templateExtension}`)) {
+                    fileName = `${fileName}.${templateExtension}`;
+                    targetPath = `${parentPath}/${fileName}`;
+                }
+
+                const content = await templateContent(fileName);
+                await TauriAPI.writeFileContent(targetPath, content);
+            }
+            await refreshTree();
+        } catch (error) {
+            console.error(`Failed to ${type}:`, error);
+            alert(`${type === 'create-file' ? '创建文件' : type === 'create-folder' ? '创建文件夹' : '创建模板文件'}失败: ${error}`);
+        }
+    };
+
+    const getContextMenuItems = (node: TreeNode | null): ContextMenuItem[] => {
+        if (!node) {
+            const baseItems: ContextMenuItem[] = [
+                {
+                    label: '新建文件',
+                    icon: <FileText size={16} />,
+                    onClick: () => rootPath && handleCreateFileClick(rootPath)
+                },
+                {
+                    label: '新建文件夹',
+                    icon: <FolderPlus size={16} />,
+                    onClick: () => rootPath && handleCreateFolderClick(rootPath)
+                }
+            ];
+
+            if (fileActionRegistry && rootPath) {
+                const templates = fileActionRegistry.getCreationTemplates();
+                if (templates.length > 0) {
+                    baseItems.push({ label: '', separator: true, onClick: () => {} });
+                    for (const template of templates) {
+                        baseItems.push({
+                            label: template.label,
+                            icon: template.icon,
+                            onClick: () => handleCreateTemplateFileClick(rootPath, template)
+                        });
+                    }
+                }
+            }
+
+            return baseItems;
+        }
+
+        const items: ContextMenuItem[] = [];
+
+        if (node.type === 'file') {
+            items.push({
+                label: '打开文件',
+                icon: <File size={16} />,
+                onClick: async () => {
+                    try {
+                        await TauriAPI.openFileWithSystemApp(node.path);
+                    } catch (error) {
+                        console.error('Failed to open file:', error);
+                    }
+                }
+            });
+
+            if (fileActionRegistry) {
+                const handlers = fileActionRegistry.getHandlersForFile(node.path);
+                for (const handler of handlers) {
+                    if (handler.getContextMenuItems) {
+                        const parentPath = node.path.substring(0, node.path.lastIndexOf('/'));
+                        const pluginItems = handler.getContextMenuItems(node.path, parentPath);
+                        for (const pluginItem of pluginItems) {
+                            items.push({
+                                label: pluginItem.label,
+                                icon: pluginItem.icon,
+                                onClick: () => pluginItem.onClick(node.path, parentPath),
+                                disabled: pluginItem.disabled,
+                                separator: pluginItem.separator
+                            });
+                        }
+                    }
+                }
+            }
+        }
+
+        items.push({
+            label: '重命名',
+            icon: <Edit3 size={16} />,
+            onClick: () => {
+                setRenamingNode(node.path);
+                setNewName(node.name);
+            }
+        });
+
+        items.push({
+            label: '删除',
+            icon: <Trash2 size={16} />,
+            onClick: () => handleDeleteClick(node)
+        });
+
+        items.push({ label: '', separator: true, onClick: () => {} });
+
+        if (node.type === 'folder') {
+            items.push({
+                label: '新建文件',
+                icon: <FileText size={16} />,
+                onClick: () => handleCreateFileClick(node.path)
+            });
+
+            items.push({
+                label: '新建文件夹',
+                icon: <FolderPlus size={16} />,
+                onClick: () => handleCreateFolderClick(node.path)
+            });
+
+            if (fileActionRegistry) {
+                const templates = fileActionRegistry.getCreationTemplates();
+                if (templates.length > 0) {
+                    items.push({ label: '', separator: true, onClick: () => {} });
+                    for (const template of templates) {
+                        items.push({
+                            label: template.label,
+                            icon: template.icon,
+                            onClick: () => handleCreateTemplateFileClick(node.path, template)
+                        });
+                    }
+                }
+            }
+
+            items.push({ label: '', separator: true, onClick: () => {} });
+        }
+
+        items.push({
+            label: '在文件管理器中显示',
+            icon: <FolderOpen size={16} />,
+            onClick: async () => {
+                try {
+                    await TauriAPI.showInFolder(node.path);
+                } catch (error) {
+                    console.error('Failed to show in folder:', error);
+                }
+            }
+        });
+
+        items.push({
+            label: '复制路径',
+            icon: <Copy size={16} />,
+            onClick: () => {
+                navigator.clipboard.writeText(node.path);
+            }
+        });
+
+        return items;
+    };
+
     const handleNodeClick = (node: TreeNode) => {
-        onSelectFile?.(node.path);
-        toggleNode(node.path);
+        if (node.type === 'folder') {
+            setInternalSelectedPath(node.path);
+            onSelectFile?.(node.path);
+            toggleNode(node.path);
+        } else {
+            setInternalSelectedPath(node.path);
+            const extension = node.name.includes('.') ? node.name.split('.').pop() : undefined;
+            messageHub?.publish('asset-file:selected', {
+                fileInfo: {
+                    name: node.name,
+                    path: node.path,
+                    extension,
+                    size: node.size,
+                    modified: node.modified,
+                    isDirectory: false
+                }
+            });
+        }
+    };
+
+    const handleNodeDoubleClick = async (node: TreeNode) => {
+        if (node.type === 'file') {
+            if (fileActionRegistry) {
+                const handled = await fileActionRegistry.handleDoubleClick(node.path);
+                if (handled) {
+                    return;
+                }
+            }
+
+            try {
+                await TauriAPI.openFileWithSystemApp(node.path);
+            } catch (error) {
+                console.error('Failed to open file:', error);
+            }
+        }
+    };
+
+    const handleContextMenu = (e: React.MouseEvent, node: TreeNode | null) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setContextMenu({
+            position: { x: e.clientX, y: e.clientY },
+            node
+        });
     };
 
     const renderNode = (node: TreeNode, level: number = 0) => {
-        const isSelected = selectedPath === node.path;
+        const isSelected = (internalSelectedPath || selectedPath) === node.path;
+        const isRenaming = renamingNode === node.path;
         const indent = level * 16;
 
         return (
@@ -129,17 +557,46 @@ export function FileTree({ rootPath, onSelectFile, selectedPath }: FileTreeProps
                 <div
                     className={`tree-node ${isSelected ? 'selected' : ''}`}
                     style={{ paddingLeft: `${indent}px` }}
-                    onClick={() => handleNodeClick(node)}
+                    onClick={() => !isRenaming && handleNodeClick(node)}
+                    onDoubleClick={() => !isRenaming && handleNodeDoubleClick(node)}
+                    onContextMenu={(e) => handleContextMenu(e, node)}
                 >
                     <span className="tree-arrow">
-                        {node.expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                        {node.type === 'folder' ? (
+                            node.expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />
+                        ) : (
+                            <span style={{ width: '14px', display: 'inline-block' }} />
+                        )}
                     </span>
                     <span className="tree-icon">
-                        <Folder size={16} />
+                        {node.type === 'folder' ? (
+                            <Folder size={16} style={{ color: '#ffa726' }} />
+                        ) : (
+                            <File size={16} style={{ color: '#90caf9' }} />
+                        )}
                     </span>
-                    <span className="tree-label">{node.name}</span>
+                    {isRenaming ? (
+                        <input
+                            type="text"
+                            className="tree-rename-input"
+                            value={newName}
+                            onChange={(e) => setNewName(e.target.value)}
+                            onBlur={() => handleRename(node)}
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter') {
+                                    handleRename(node);
+                                } else if (e.key === 'Escape') {
+                                    setRenamingNode(null);
+                                }
+                            }}
+                            autoFocus
+                            onClick={(e) => e.stopPropagation()}
+                        />
+                    ) : (
+                        <span className="tree-label">{node.name}</span>
+                    )}
                 </div>
-                {node.expanded && node.children && (
+                {node.type === 'folder' && node.expanded && node.children && (
                     <div className="tree-children">
                         {node.children.map((child) => renderNode(child, level + 1))}
                     </div>
@@ -157,8 +614,78 @@ export function FileTree({ rootPath, onSelectFile, selectedPath }: FileTreeProps
     }
 
     return (
-        <div className="file-tree">
-            {tree.map((node) => renderNode(node))}
-        </div>
+        <>
+            <div className="file-tree-toolbar">
+                <button
+                    className="file-tree-toolbar-btn"
+                    onClick={expandAll}
+                    title="展开全部文件夹"
+                >
+                    <ChevronsDown size={14} />
+                </button>
+                <button
+                    className="file-tree-toolbar-btn"
+                    onClick={collapseAll}
+                    title="收缩全部文件夹"
+                >
+                    <ChevronsUp size={14} />
+                </button>
+            </div>
+            <div
+                className="file-tree"
+                onContextMenu={(e) => {
+                    const target = e.target as HTMLElement;
+                    if (target.classList.contains('file-tree')) {
+                        handleContextMenu(e, null);
+                    }
+                }}
+            >
+                {filteredTree.map((node) => renderNode(node))}
+            </div>
+            {contextMenu && (
+                <ContextMenu
+                    items={getContextMenuItems(contextMenu.node)}
+                    position={contextMenu.position}
+                    onClose={() => setContextMenu(null)}
+                />
+            )}
+            {deleteDialog && (
+                <ConfirmDialog
+                    title="确认删除"
+                    message={
+                        deleteDialog.node.type === 'folder'
+                            ? `确定要删除文件夹 "${deleteDialog.node.name}" 及其所有内容吗？\n此操作无法撤销。`
+                            : `确定要删除文件 "${deleteDialog.node.name}" 吗？\n此操作无法撤销。`
+                    }
+                    confirmText="删除"
+                    cancelText="取消"
+                    onConfirm={handleDeleteConfirm}
+                    onCancel={() => setDeleteDialog(null)}
+                />
+            )}
+            {promptDialog && (
+                <PromptDialog
+                    title={
+                        promptDialog.type === 'create-file' ? '新建文件' :
+                        promptDialog.type === 'create-folder' ? '新建文件夹' :
+                        '新建文件'
+                    }
+                    message={
+                        promptDialog.type === 'create-file' ? '请输入文件名:' :
+                        promptDialog.type === 'create-folder' ? '请输入文件夹名:' :
+                        `请输入文件名 (将自动添加 .${promptDialog.templateExtension} 扩展名):`
+                    }
+                    placeholder={
+                        promptDialog.type === 'create-file' ? '例如: config.json' :
+                        promptDialog.type === 'create-folder' ? '例如: assets' :
+                        '例如: MyFile'
+                    }
+                    confirmText="创建"
+                    cancelText="取消"
+                    onConfirm={handlePromptConfirm}
+                    onCancel={() => setPromptDialog(null)}
+                />
+            )}
+        </>
     );
 }

packages/editor-app/src/components/FlexLayoutDockContainer.tsx

@@ -17,17 +17,12 @@ interface FlexLayoutDockContainerProps {
 
 export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDockContainerProps) {
     const createDefaultLayout = useCallback((): IJsonModel => {
-        const leftPanels = panels.filter((p) => p.id.includes('hierarchy'));
+        const hierarchyPanels = panels.filter((p) => p.id.includes('hierarchy'));
+        const assetPanels = panels.filter((p) => p.id.includes('asset'));
         const rightPanels = panels.filter((p) => p.id.includes('inspector'));
-        const bottomPanels = panels.filter((p) => p.id.includes('console') || p.id.includes('asset'))
-            .sort((a, b) => {
-                // 控制台排在前面
-                if (a.id.includes('console')) return -1;
-                if (b.id.includes('console')) return 1;
-                return 0;
-            });
+        const bottomPanels = panels.filter((p) => p.id.includes('console'));
         const centerPanels = panels.filter((p) =>
-            !leftPanels.includes(p) && !rightPanels.includes(p) && !bottomPanels.includes(p)
+            !hierarchyPanels.includes(p) && !assetPanels.includes(p) && !rightPanels.includes(p) && !bottomPanels.includes(p)
         );
 
         // Build center column children
@@ -61,17 +56,43 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
 
         // Build main row children
         const mainRowChildren: (IJsonTabSetNode | IJsonRowNode)[] = [];
-        if (leftPanels.length > 0) {
+
+        // 左侧列：场景层级和资产面板垂直排列（五五分）
+        if (hierarchyPanels.length > 0 || assetPanels.length > 0) {
+            const leftColumnChildren: IJsonTabSetNode[] = [];
+
+            if (hierarchyPanels.length > 0) {
+                leftColumnChildren.push({
+                    type: 'tabset',
+                    weight: 50,
+                    children: hierarchyPanels.map((p) => ({
+                        type: 'tab',
+                        name: p.title,
+                        id: p.id,
+                        component: p.id,
+                        enableClose: p.closable !== false
+                    }))
+                });
+            }
+
+            if (assetPanels.length > 0) {
+                leftColumnChildren.push({
+                    type: 'tabset',
+                    weight: 50,
+                    children: assetPanels.map((p) => ({
+                        type: 'tab',
+                        name: p.title,
+                        id: p.id,
+                        component: p.id,
+                        enableClose: p.closable !== false
+                    }))
+                });
+            }
+
             mainRowChildren.push({
-                type: 'tabset',
+                type: 'row',
                 weight: 20,
-                children: leftPanels.map((p) => ({
-                    type: 'tab',
-                    name: p.title,
-                    id: p.id,
-                    component: p.id,
-                    enableClose: p.closable !== false
-                }))
+                children: leftColumnChildren
             });
         }
         if (centerColumnChildren.length > 0) {

packages/editor-app/src/components/Inspector.tsx

@@ -0,0 +1,646 @@
+import { useState, useEffect, useMemo } from 'react';
+import { Entity } from '@esengine/ecs-framework';
+import { EntityStoreService, MessageHub } from '@esengine/editor-core';
+import { PropertyInspector } from './PropertyInspector';
+import { BehaviorTreeNodeProperties } from './BehaviorTreeNodeProperties';
+import { FileSearch, ChevronDown, ChevronRight, X, Settings, Box, AlertTriangle, Copy, File as FileIcon, Folder, Clock, HardDrive } from 'lucide-react';
+import { BehaviorTreeNode, useBehaviorTreeStore } from '../stores/behaviorTreeStore';
+import { ICON_MAP } from '../presentation/config/editorConstants';
+import { useNodeOperations } from '../presentation/hooks/useNodeOperations';
+import { useCommandHistory } from '../presentation/hooks/useCommandHistory';
+import { NodeFactory } from '../infrastructure/factories/NodeFactory';
+import { BehaviorTreeValidator } from '../infrastructure/validation/BehaviorTreeValidator';
+import { TauriAPI } from '../api/tauri';
+import '../styles/EntityInspector.css';
+
+interface InspectorProps {
+    entityStore: EntityStoreService;
+    messageHub: MessageHub;
+    projectPath?: string | null;
+    isExecuting?: boolean;
+    executionMode?: 'idle' | 'running' | 'paused' | 'step';
+}
+
+interface AssetFileInfo {
+    name: string;
+    path: string;
+    extension?: string;
+    size?: number;
+    modified?: number;
+    isDirectory: boolean;
+}
+
+type InspectorTarget =
+    | { type: 'entity'; data: Entity }
+    | { type: 'remote-entity'; data: any; details?: any }
+    | { type: 'behavior-tree-node'; data: BehaviorTreeNode }
+    | { type: 'asset-file'; data: AssetFileInfo; content?: string }
+    | null;
+
+export function Inspector({ entityStore: _entityStore, messageHub, projectPath, isExecuting, executionMode }: InspectorProps) {
+    const [target, setTarget] = useState<InspectorTarget>(null);
+    const [expandedComponents, setExpandedComponents] = useState<Set<number>>(new Set());
+    const [componentVersion, setComponentVersion] = useState(0);
+
+    // 行为树节点操作相关
+    const nodeFactory = useMemo(() => new NodeFactory(), []);
+    const validator = useMemo(() => new BehaviorTreeValidator(), []);
+    const { commandManager } = useCommandHistory();
+    const nodeOperations = useNodeOperations(nodeFactory, validator, commandManager);
+    const { nodes, connections, isExecuting: storeIsExecuting } = useBehaviorTreeStore();
+
+    // 优先使用传入的 isExecuting，否则使用 store 中的
+    const isRunning = isExecuting ?? storeIsExecuting;
+
+    // 当节点数据更新时，同步更新 target 中的节点
+    useEffect(() => {
+        if (target?.type === 'behavior-tree-node') {
+            const updatedNode = nodes.find(n => n.id === target.data.id);
+            if (updatedNode) {
+                const currentDataStr = JSON.stringify(target.data.data);
+                const updatedDataStr = JSON.stringify(updatedNode.data);
+                if (currentDataStr !== updatedDataStr) {
+                    setTarget({ type: 'behavior-tree-node', data: updatedNode });
+                }
+            }
+        }
+    }, [nodes]);
+
+    useEffect(() => {
+        const handleEntitySelection = (data: { entity: Entity | null }) => {
+            if (data.entity) {
+                setTarget({ type: 'entity', data: data.entity });
+            } else {
+                setTarget(null);
+            }
+            setComponentVersion(0);
+        };
+
+        const handleRemoteEntitySelection = (data: { entity: any }) => {
+            setTarget({ type: 'remote-entity', data: data.entity });
+        };
+
+        const handleEntityDetails = (event: Event) => {
+            const customEvent = event as CustomEvent;
+            const details = customEvent.detail;
+            if (target?.type === 'remote-entity') {
+                setTarget({ ...target, details });
+            }
+        };
+
+        const handleBehaviorTreeNodeSelection = (data: { node: BehaviorTreeNode }) => {
+            setTarget({ type: 'behavior-tree-node', data: data.node });
+        };
+
+        const handleAssetFileSelection = async (data: { fileInfo: AssetFileInfo }) => {
+            const fileInfo = data.fileInfo;
+
+            if (fileInfo.isDirectory) {
+                setTarget({ type: 'asset-file', data: fileInfo });
+                return;
+            }
+
+            const textExtensions = ['txt', 'json', 'md', 'ts', 'tsx', 'js', 'jsx', 'css', 'html', 'xml', 'yaml', 'yml', 'toml', 'ini', 'cfg', 'conf', 'log', 'btree', 'ecs'];
+            const isTextFile = fileInfo.extension && textExtensions.includes(fileInfo.extension.toLowerCase());
+
+            if (isTextFile) {
+                try {
+                    const content = await TauriAPI.readFileContent(fileInfo.path);
+                    setTarget({ type: 'asset-file', data: fileInfo, content });
+                } catch (error) {
+                    console.error('Failed to read file content:', error);
+                    setTarget({ type: 'asset-file', data: fileInfo });
+                }
+            } else {
+                setTarget({ type: 'asset-file', data: fileInfo });
+            }
+        };
+
+        const handleComponentChange = () => {
+            setComponentVersion((prev) => prev + 1);
+        };
+
+        const unsubEntitySelect = messageHub.subscribe('entity:selected', handleEntitySelection);
+        const unsubRemoteSelect = messageHub.subscribe('remote-entity:selected', handleRemoteEntitySelection);
+        const unsubNodeSelect = messageHub.subscribe('behavior-tree:node-selected', handleBehaviorTreeNodeSelection);
+        const unsubAssetFileSelect = messageHub.subscribe('asset-file:selected', handleAssetFileSelection);
+        const unsubComponentAdded = messageHub.subscribe('component:added', handleComponentChange);
+        const unsubComponentRemoved = messageHub.subscribe('component:removed', handleComponentChange);
+
+        window.addEventListener('profiler:entity-details', handleEntityDetails);
+
+        return () => {
+            unsubEntitySelect();
+            unsubRemoteSelect();
+            unsubNodeSelect();
+            unsubAssetFileSelect();
+            unsubComponentAdded();
+            unsubComponentRemoved();
+            window.removeEventListener('profiler:entity-details', handleEntityDetails);
+        };
+    }, [messageHub, target]);
+
+    const handleRemoveComponent = (index: number) => {
+        if (target?.type !== 'entity') return;
+        const entity = target.data;
+        const component = entity.components[index];
+        if (component) {
+            entity.removeComponent(component);
+            messageHub.publish('component:removed', { entity, component });
+        }
+    };
+
+    const toggleComponentExpanded = (index: number) => {
+        setExpandedComponents((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(index)) {
+                newSet.delete(index);
+            } else {
+                newSet.add(index);
+            }
+            return newSet;
+        });
+    };
+
+    const handlePropertyChange = (component: any, propertyName: string, value: any) => {
+        if (target?.type !== 'entity') return;
+        const entity = target.data;
+        messageHub.publish('component:property:changed', {
+            entity,
+            component,
+            propertyName,
+            value
+        });
+    };
+
+    const handleNodePropertyChange = (propertyName: string, value: any) => {
+        if (target?.type !== 'behavior-tree-node') return;
+        const node = target.data;
+
+        nodeOperations.updateNodeData(node.id, {
+            ...node.data,
+            [propertyName]: value
+        });
+    };
+
+    const handleCopyNodeInfo = () => {
+        if (target?.type !== 'behavior-tree-node') return;
+        const node = target.data;
+
+        const childrenInfo = node.children.map((childId, index) => {
+            const childNode = nodes.find(n => n.id === childId);
+            return `  ${index + 1}. ${childNode?.template.displayName || '未知'} (ID: ${childId})`;
+        }).join('\n');
+
+        const incomingConnections = connections.filter(conn => conn.to === node.id);
+        const outgoingConnections = connections.filter(conn => conn.from === node.id);
+
+        const connectionInfo = [
+            incomingConnections.length > 0 ? `输入连接: ${incomingConnections.length}个` : '',
+            ...incomingConnections.map(conn => {
+                const fromNode = nodes.find(n => n.id === conn.from);
+                return `  来自: ${fromNode?.template.displayName || '未知'} (${conn.from})`;
+            }),
+            outgoingConnections.length > 0 ? `输出连接: ${outgoingConnections.length}个` : '',
+            ...outgoingConnections.map(conn => {
+                const toNode = nodes.find(n => n.id === conn.to);
+                return `  到: ${toNode?.template.displayName || '未知'} (${conn.to})`;
+            })
+        ].filter(Boolean).join('\n');
+
+        const nodeInfo = `
+节点信息
+========
+名称: ${node.template.displayName}
+类型: ${node.template.type}
+分类: ${node.template.category}
+类名: ${node.template.className || '无'}
+节点ID: ${node.id}
+
+子节点 (${node.children.length}个):
+${childrenInfo || '  无'}
+
+连接信息:
+${connectionInfo || '  无连接'}
+
+属性数据:
+${JSON.stringify(node.data, null, 2)}
+        `.trim();
+
+        navigator.clipboard.writeText(nodeInfo).then(() => {
+            messageHub.publish('notification:show', {
+                type: 'success',
+                message: '节点信息已复制到剪贴板'
+            });
+        }).catch(() => {
+            const textarea = document.createElement('textarea');
+            textarea.value = nodeInfo;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textarea);
+            messageHub.publish('notification:show', {
+                type: 'success',
+                message: '节点信息已复制到剪贴板'
+            });
+        });
+    };
+
+    const renderRemoteProperty = (key: string, value: any) => {
+        if (value === null || value === undefined) {
+            return (
+                <div key={key} className="property-field">
+                    <label className="property-label">{key}</label>
+                    <span className="property-value-text">null</span>
+                </div>
+            );
+        }
+
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            return (
+                <div key={key} className="property-field">
+                    <label className="property-label">{key}</label>
+                    <div className="property-value-object">
+                        {Object.entries(value).map(([subKey, subValue]) => (
+                            <div key={subKey} className="property-subfield">
+                                <span className="property-sublabel">{subKey}:</span>
+                                <span className="property-value-text">{String(subValue)}</span>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div key={key} className="property-field">
+                <label className="property-label">{key}</label>
+                <span className="property-value-text">{String(value)}</span>
+            </div>
+        );
+    };
+
+    const formatFileSize = (bytes?: number): string => {
+        if (!bytes) return '0 B';
+        const units = ['B', 'KB', 'MB', 'GB'];
+        let size = bytes;
+        let unitIndex = 0;
+        while (size >= 1024 && unitIndex < units.length - 1) {
+            size /= 1024;
+            unitIndex++;
+        }
+        return `${size.toFixed(2)} ${units[unitIndex]}`;
+    };
+
+    const formatDate = (timestamp?: number): string => {
+        if (!timestamp) return '未知';
+        const date = new Date(timestamp * 1000);
+        return date.toLocaleString('zh-CN', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    };
+
+    const renderAssetFile = (fileInfo: AssetFileInfo, content?: string) => {
+        const IconComponent = fileInfo.isDirectory ? Folder : FileIcon;
+        const iconColor = fileInfo.isDirectory ? '#dcb67a' : '#90caf9';
+
+        return (
+            <div className="entity-inspector">
+                <div className="inspector-header">
+                    <IconComponent size={16} style={{ color: iconColor }} />
+                    <span className="entity-name">{fileInfo.name}</span>
+                </div>
+
+                <div className="inspector-content">
+                    <div className="inspector-section">
+                        <div className="section-title">文件信息</div>
+                        <div className="property-field">
+                            <label className="property-label">类型</label>
+                            <span className="property-value-text">
+                                {fileInfo.isDirectory ? '文件夹' : fileInfo.extension ? `.${fileInfo.extension}` : '文件'}
+                            </span>
+                        </div>
+                        {fileInfo.size !== undefined && !fileInfo.isDirectory && (
+                            <div className="property-field">
+                                <label className="property-label"><HardDrive size={14} style={{ verticalAlign: 'middle', marginRight: '4px' }} />大小</label>
+                                <span className="property-value-text">{formatFileSize(fileInfo.size)}</span>
+                            </div>
+                        )}
+                        {fileInfo.modified !== undefined && (
+                            <div className="property-field">
+                                <label className="property-label"><Clock size={14} style={{ verticalAlign: 'middle', marginRight: '4px' }} />修改时间</label>
+                                <span className="property-value-text">{formatDate(fileInfo.modified)}</span>
+                            </div>
+                        )}
+                        <div className="property-field">
+                            <label className="property-label">路径</label>
+                            <span className="property-value-text" style={{
+                                fontFamily: 'Consolas, Monaco, monospace',
+                                fontSize: '11px',
+                                color: '#666',
+                                wordBreak: 'break-all'
+                            }}>
+                                {fileInfo.path}
+                            </span>
+                        </div>
+                    </div>
+
+                    {content && (
+                        <div className="inspector-section">
+                            <div className="section-title">文件预览</div>
+                            <div className="file-preview-content">
+                                {content}
+                            </div>
+                        </div>
+                    )}
+
+                    {!content && !fileInfo.isDirectory && (
+                        <div className="inspector-section">
+                            <div style={{
+                                padding: '20px',
+                                textAlign: 'center',
+                                color: '#666',
+                                fontSize: '13px'
+                            }}>
+                                此文件类型不支持预览
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
+    const renderBehaviorTreeNode = (node: BehaviorTreeNode) => {
+        const IconComponent = node.template.icon ? (ICON_MAP as any)[node.template.icon] : Box;
+
+        return (
+            <div className="entity-inspector">
+                <div className="inspector-header">
+                    {IconComponent && <IconComponent size={16} style={{ color: node.template.color || '#999' }} />}
+                    <span className="entity-name">{node.template.displayName || '未命名节点'}</span>
+                    <button
+                        onClick={handleCopyNodeInfo}
+                        style={{
+                            marginLeft: 'auto',
+                            background: 'transparent',
+                            border: '1px solid rgba(255, 255, 255, 0.2)',
+                            borderRadius: '4px',
+                            padding: '4px 8px',
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '4px',
+                            color: '#999',
+                            fontSize: '12px'
+                        }}
+                        title="复制节点信息"
+                    >
+                        <Copy size={14} />
+                        <span>复制信息</span>
+                    </button>
+                </div>
+
+                {isRunning && (
+                    <div style={{
+                        padding: '10px 14px',
+                        backgroundColor: 'rgba(255, 152, 0, 0.1)',
+                        borderLeft: '3px solid #ff9800',
+                        margin: '12px',
+                        borderRadius: '4px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '10px',
+                        fontSize: '12px',
+                        color: '#ff9800',
+                        lineHeight: '1.4'
+                    }}>
+                        <AlertTriangle size={16} style={{ flexShrink: 0 }} />
+                        <span>运行时模式：属性修改将在停止后还原</span>
+                    </div>
+                )}
+
+                <div className="inspector-content">
+                    <div className="inspector-section">
+                        <div className="section-title">基本信息</div>
+                        <div className="property-field">
+                            <label className="property-label">节点类型</label>
+                            <span className="property-value-text">{node.template.type}</span>
+                        </div>
+                        <div className="property-field">
+                            <label className="property-label">分类</label>
+                            <span className="property-value-text">{node.template.category}</span>
+                        </div>
+                        {node.template.description && (
+                            <div className="property-field">
+                                <label className="property-label">描述</label>
+                                <span className="property-value-text" style={{ color: '#999' }}>{node.template.description}</span>
+                            </div>
+                        )}
+                        {node.template.className && (
+                            <div className="property-field">
+                                <label className="property-label">类名</label>
+                                <span className="property-value-text" style={{ fontFamily: 'Consolas, Monaco, monospace', color: '#0e639c' }}>
+                                    {node.template.className}
+                                </span>
+                            </div>
+                        )}
+                    </div>
+
+                    {node.template.properties && node.template.properties.length > 0 && (
+                        <div className="inspector-section">
+                            <div className="section-title">属性</div>
+                            <BehaviorTreeNodeProperties
+                                key={node.id}
+                                selectedNode={node}
+                                onPropertyChange={handleNodePropertyChange}
+                                projectPath={projectPath}
+                            />
+                        </div>
+                    )}
+
+                    {node.children.length > 0 && (
+                        <div className="inspector-section">
+                            <div className="section-title">子节点 ({node.children.length})</div>
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                                {node.children.map((childId, index) => {
+                                    const childNode = nodes.find(n => n.id === childId);
+                                    const ChildIcon = childNode?.template.icon ? (ICON_MAP as any)[childNode.template.icon] : Box;
+                                    return (
+                                        <div
+                                            key={childId}
+                                            className="child-node-item"
+                                            style={{
+                                                borderLeft: `3px solid ${childNode?.template.color || '#666'}`
+                                            }}
+                                        >
+                                            <span className="child-node-index">{index + 1}.</span>
+                                            {childNode && ChildIcon && (
+                                                <ChildIcon size={14} style={{ color: childNode.template.color || '#999', flexShrink: 0 }} />
+                                            )}
+                                            <span className="child-node-name">
+                                                {childNode?.template.displayName || childId}
+                                            </span>
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="inspector-section">
+                        <div className="section-title">调试信息</div>
+                        <div className="property-field">
+                            <label className="property-label">节点ID</label>
+                            <span className="property-value-text" style={{ fontFamily: 'Consolas, Monaco, monospace', color: '#666', fontSize: '11px' }}>
+                                {node.id}
+                            </span>
+                        </div>
+                        <div className="property-field">
+                            <label className="property-label">位置</label>
+                            <span className="property-value-text" style={{ color: '#999' }}>
+                                ({node.position.x.toFixed(0)}, {node.position.y.toFixed(0)})
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    if (!target) {
+        return (
+            <div className="entity-inspector">
+                <div className="empty-inspector">
+                    <FileSearch size={48} style={{ color: '#555', marginBottom: '16px' }} />
+                    <div style={{ color: '#999', fontSize: '14px' }}>未选择对象</div>
+                    <div style={{ color: '#666', fontSize: '12px', marginTop: '8px' }}>
+                        选择实体或节点以查看详细信息
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    if (target.type === 'behavior-tree-node') {
+        return renderBehaviorTreeNode(target.data);
+    }
+
+    if (target.type === 'asset-file') {
+        return renderAssetFile(target.data, target.content);
+    }
+
+    if (target.type === 'remote-entity') {
+        const entity = target.data;
+        const details = (target as any).details;
+
+        return (
+            <div className="entity-inspector">
+                <div className="inspector-header">
+                    <Settings size={16} />
+                    <span className="entity-name">运行时实体 #{entity.id}</span>
+                </div>
+
+                <div className="inspector-content">
+                    <div className="inspector-section">
+                        <div className="section-title">基本信息</div>
+                        <div className="property-field">
+                            <label className="property-label">Entity ID</label>
+                            <span className="property-value-text">{entity.id}</span>
+                        </div>
+                        <div className="property-field">
+                            <label className="property-label">Enabled</label>
+                            <span className="property-value-text">{entity.enabled ? 'true' : 'false'}</span>
+                        </div>
+                        {entity.name && (
+                            <div className="property-field">
+                                <label className="property-label">Name</label>
+                                <span className="property-value-text">{entity.name}</span>
+                            </div>
+                        )}
+                    </div>
+
+                    {details && (
+                        <div className="inspector-section">
+                            <div className="section-title">组件详情</div>
+                            {Object.entries(details).map(([key, value]) => renderRemoteProperty(key, value))}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    if (target.type === 'entity') {
+        const entity = target.data;
+
+        return (
+            <div className="entity-inspector">
+                <div className="inspector-header">
+                    <Settings size={16} />
+                    <span className="entity-name">{entity.name || `Entity #${entity.id}`}</span>
+                </div>
+
+                <div className="inspector-content">
+                    <div className="inspector-section">
+                        <div className="section-title">基本信息</div>
+                        <div className="property-field">
+                            <label className="property-label">Entity ID</label>
+                            <span className="property-value-text">{entity.id}</span>
+                        </div>
+                        <div className="property-field">
+                            <label className="property-label">Enabled</label>
+                            <span className="property-value-text">{entity.enabled ? 'true' : 'false'}</span>
+                        </div>
+                    </div>
+
+                    {entity.components.length > 0 && (
+                        <div className="inspector-section">
+                            <div className="section-title">组件</div>
+                            {entity.components.map((component: any, index: number) => {
+                                const isExpanded = expandedComponents.has(index);
+                                const componentName = component.constructor?.name || 'Component';
+
+                                return (
+                                    <div key={`${componentName}-${index}-${componentVersion}`} className="component-item">
+                                        <div className="component-header" onClick={() => toggleComponentExpanded(index)}>
+                                            {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                                            <span className="component-name">{componentName}</span>
+                                            <button
+                                                className="component-remove-btn"
+                                                onClick={(e) => {
+                                                    e.stopPropagation();
+                                                    handleRemoveComponent(index);
+                                                }}
+                                                title="移除组件"
+                                            >
+                                                <X size={12} />
+                                            </button>
+                                        </div>
+
+                                        {isExpanded && (
+                                            <div className="component-properties">
+                                                <PropertyInspector
+                                                    component={component}
+                                                    onChange={(propName: string, value: any) => handlePropertyChange(component, propName, value)}
+                                                />
+                                            </div>
+                                        )}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    return null;
+}

packages/editor-app/src/components/PromptDialog.tsx

@@ -0,0 +1,88 @@
+import { useState, useEffect, useRef } from 'react';
+import { X } from 'lucide-react';
+import '../styles/PromptDialog.css';
+
+interface PromptDialogProps {
+  title: string;
+  message: string;
+  defaultValue?: string;
+  placeholder?: string;
+  confirmText: string;
+  cancelText: string;
+  onConfirm: (value: string) => void;
+  onCancel: () => void;
+}
+
+export function PromptDialog({
+    title,
+    message,
+    defaultValue = '',
+    placeholder,
+    confirmText,
+    cancelText,
+    onConfirm,
+    onCancel
+}: PromptDialogProps) {
+    const [value, setValue] = useState(defaultValue);
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, []);
+
+    const handleConfirm = () => {
+        if (value.trim()) {
+            onConfirm(value.trim());
+        }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleConfirm();
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            onCancel();
+        }
+    };
+
+    return (
+        <div className="prompt-dialog-overlay" onClick={onCancel}>
+            <div className="prompt-dialog" onClick={(e) => e.stopPropagation()}>
+                <div className="prompt-dialog-header">
+                    <h2>{title}</h2>
+                    <button className="close-btn" onClick={onCancel}>
+                        <X size={16} />
+                    </button>
+                </div>
+                <div className="prompt-dialog-content">
+                    <p>{message}</p>
+                    <input
+                        ref={inputRef}
+                        type="text"
+                        className="prompt-dialog-input"
+                        value={value}
+                        onChange={(e) => setValue(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder={placeholder}
+                    />
+                </div>
+                <div className="prompt-dialog-footer">
+                    <button className="prompt-dialog-btn cancel" onClick={onCancel}>
+                        {cancelText}
+                    </button>
+                    <button
+                        className="prompt-dialog-btn confirm"
+                        onClick={handleConfirm}
+                        disabled={!value.trim()}
+                    >
+                        {confirmText}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

packages/editor-app/src/plugins/BehaviorTreePlugin.ts

@@ -1,7 +1,12 @@
 import type { Core, ServiceContainer } from '@esengine/ecs-framework';
 import { IEditorPlugin, EditorPluginCategory, PanelPosition, MessageHub } from '@esengine/editor-core';
-import type { MenuItem, ToolbarItem, PanelDescriptor, ISerializer } from '@esengine/editor-core';
+import type { MenuItem, ToolbarItem, PanelDescriptor, ISerializer, FileActionHandler, FileCreationTemplate, FileContextMenuItem } from '@esengine/editor-core';
 import { BehaviorTreeData } from '@esengine/behavior-tree';
+import { BehaviorTreeEditorPanel } from '../presentation/components/behavior-tree/panels';
+import { FileText } from 'lucide-react';
+import { TauriAPI } from '../api/tauri';
+import { createElement } from 'react';
+import { useBehaviorTreeStore } from '../stores/behaviorTreeStore';
 
 /**
  * 行为树编辑器插件
@@ -32,79 +37,24 @@ export class BehaviorTreePlugin implements IEditorPlugin {
     }
 
     registerMenuItems(): MenuItem[] {
-        return [
-            {
-                id: 'view-behavior-tree-editor',
-                label: 'Behavior Tree Editor',
-                parentId: 'window',
-                onClick: () => {
-                    this.messageHub?.publish('ui:openWindow', { windowId: 'behavior-tree-editor' });
-                },
-                icon: 'Network',
-                order: 50
-            }
-        ];
+        return [];
     }
 
     registerToolbar(): ToolbarItem[] {
-        return [
-            {
-                id: 'toolbar-new-behavior-tree',
-                label: 'New Behavior Tree',
-                groupId: 'behavior-tree-tools',
-                icon: 'FilePlus',
-                onClick: () => this.createNewBehaviorTree(),
-                order: 10
-            },
-            {
-                id: 'toolbar-save-behavior-tree',
-                label: 'Save Behavior Tree',
-                groupId: 'behavior-tree-tools',
-                icon: 'Save',
-                onClick: () => this.saveBehaviorTree(),
-                order: 20
-            },
-            {
-                id: 'toolbar-validate-behavior-tree',
-                label: 'Validate Behavior Tree',
-                groupId: 'behavior-tree-tools',
-                icon: 'CheckCircle',
-                onClick: () => this.validateBehaviorTree(),
-                order: 30
-            }
-        ];
+        return [];
     }
 
     registerPanels(): PanelDescriptor[] {
         return [
             {
-                id: 'panel-behavior-tree-editor',
-                title: 'Behavior Tree Editor',
-                position: PanelPosition.Center,
-                resizable: true,
-                closable: true,
+                id: 'behavior-tree-editor',
+                title: '行为树编辑器',
                 icon: 'Network',
-                order: 10
-            },
-            {
-                id: 'panel-behavior-tree-nodes',
-                title: 'Behavior Tree Nodes',
-                position: PanelPosition.Left,
-                defaultSize: 250,
-                resizable: true,
+                component: BehaviorTreeEditorPanel,
+                position: PanelPosition.Center,
+                defaultSize: 400,
                 closable: true,
-                icon: 'Package',
-                order: 20
-            },
-            {
-                id: 'panel-behavior-tree-properties',
-                title: 'Node Properties',
-                position: PanelPosition.Right,
-                defaultSize: 300,
-                resizable: true,
-                closable: true,
-                icon: 'Settings',
-                order: 20
+                isDynamic: true
             }
         ];
     }
@@ -155,20 +105,85 @@ export class BehaviorTreePlugin implements IEditorPlugin {
         }
     }
 
-    private createNewBehaviorTree(): void {
-        console.log('[BehaviorTreePlugin] Creating new behavior tree');
+    registerFileActionHandlers(): FileActionHandler[] {
+        return [
+            {
+                extensions: ['btree'],
+                onDoubleClick: async (filePath: string) => {
+                    console.log('[BehaviorTreePlugin] onDoubleClick called for:', filePath);
+
+                    if (this.messageHub) {
+                        useBehaviorTreeStore.getState().setIsOpen(true);
+
+                        await this.messageHub.publish('dynamic-panel:open', {
+                            panelId: 'behavior-tree-editor'
+                        });
+
+                        await this.messageHub.publish('behavior-tree:open-file', {
+                            filePath: filePath
+                        });
+                        console.log('[BehaviorTreePlugin] Panel opened and file loaded');
+                    } else {
+                        console.error('[BehaviorTreePlugin] MessageHub is not available!');
+                    }
+                },
+                onOpen: async (filePath: string) => {
+                    if (this.messageHub) {
+                        useBehaviorTreeStore.getState().setIsOpen(true);
+
+                        await this.messageHub.publish('dynamic-panel:open', {
+                            panelId: 'behavior-tree-editor'
+                        });
+
+                        await this.messageHub.publish('behavior-tree:open-file', {
+                            filePath: filePath
+                        });
+                    }
+                },
+                getContextMenuItems: (filePath: string, parentPath: string): FileContextMenuItem[] => {
+                    return [
+                        {
+                            label: '打开行为树编辑器',
+                            icon: createElement(FileText, { size: 16 }),
+                            onClick: async (filePath: string) => {
+                                if (this.messageHub) {
+                                    useBehaviorTreeStore.getState().setIsOpen(true);
+
+                                    await this.messageHub.publish('dynamic-panel:open', {
+                                        panelId: 'behavior-tree-editor'
+                                    });
+
+                                    await this.messageHub.publish('behavior-tree:open-file', {
+                                        filePath: filePath
+                                    });
+                                }
+                            }
+                        }
+                    ];
+                }
+            }
+        ];
     }
 
-    private openBehaviorTree(): void {
-        console.log('[BehaviorTreePlugin] Opening behavior tree');
-    }
-
-    private saveBehaviorTree(): void {
-        console.log('[BehaviorTreePlugin] Saving behavior tree');
-    }
-
-    private validateBehaviorTree(): void {
-        console.log('[BehaviorTreePlugin] Validating behavior tree');
+    registerFileCreationTemplates(): FileCreationTemplate[] {
+        return [
+            {
+                label: '行为树',
+                extension: 'btree',
+                defaultFileName: 'NewBehaviorTree',
+                icon: createElement(FileText, { size: 16 }),
+                createContent: async (fileName: string) => {
+                    const emptyTree: BehaviorTreeData = {
+                        id: `tree_${Date.now()}`,
+                        name: fileName,
+                        rootNodeId: '',
+                        nodes: new Map(),
+                        blackboardVariables: new Map()
+                    };
+                    return this.serializeBehaviorTreeData(emptyTree);
+                }
+            }
+        ];
     }
 
     private serializeBehaviorTreeData(treeData: BehaviorTreeData): string {

packages/editor-app/src/presentation/components/behavior-tree/connections/ConnectionRenderer.tsx

@@ -97,6 +97,7 @@ export const ConnectionRenderer: React.FC<ConnectionRendererProps> = ({
     const color = connection.connectionType === 'property' ? '#9c27b0' : '#0e639c';
     const strokeColor = isSelected ? '#FFD700' : color;
     const strokeWidth = isSelected ? 4 : 2;
+    const markerId = `arrowhead-${connection.from}-${connection.to}`;
 
     if (!pathData) {
         // DOM还没渲染完成，跳过此连接
@@ -130,20 +131,10 @@ export const ConnectionRenderer: React.FC<ConnectionRendererProps> = ({
                 strokeWidth={20}
             />
 
-            {/* 实际显示的线条 */}
-            <path
-                d={pathData.path}
-                fill="none"
-                stroke={strokeColor}
-                strokeWidth={strokeWidth}
-                strokeLinecap="round"
-                markerEnd="url(#arrowhead)"
-            />
-
-            {/* 箭头标记 */}
+            {/* 箭头标记定义 */}
             <defs>
                 <marker
-                    id="arrowhead"
+                    id={markerId}
                     markerWidth="10"
                     markerHeight="10"
                     refX="9"
@@ -158,6 +149,16 @@ export const ConnectionRenderer: React.FC<ConnectionRendererProps> = ({
                 </marker>
             </defs>
 
+            {/* 实际显示的线条 */}
+            <path
+                d={pathData.path}
+                fill="none"
+                stroke={strokeColor}
+                strokeWidth={strokeWidth}
+                strokeLinecap="round"
+                markerEnd={`url(#${markerId})`}
+            />
+
             {/* 选中时显示的中点 */}
             {isSelected && (
                 <circle

packages/editor-app/src/presentation/components/behavior-tree/nodes/BehaviorTreeNode.tsx

@@ -7,7 +7,7 @@ import {
     LucideIcon
 } from 'lucide-react';
 import { PropertyDefinition } from '@esengine/behavior-tree';
-import { BehaviorTreeNode as BehaviorTreeNodeType, Connection, ROOT_NODE_ID } from '../../../../stores/behaviorTreeStore';
+import { BehaviorTreeNode as BehaviorTreeNodeType, Connection, ROOT_NODE_ID, NodeExecutionStatus } from '../../../../stores/behaviorTreeStore';
 import { BehaviorTreeExecutor } from '../../../../utils/BehaviorTreeExecutor';
 import { BlackboardValue } from '../../../../domain/models/Blackboard';
 
@@ -22,6 +22,8 @@ interface BehaviorTreeNodeProps {
     blackboardVariables: BlackboardVariables;
     initialBlackboardVariables: BlackboardVariables;
     isExecuting: boolean;
+    executionStatus?: NodeExecutionStatus;
+    executionOrder?: number;
     connections: Connection[];
     nodes: BehaviorTreeNodeType[];
     executorRef: React.RefObject<BehaviorTreeExecutor | null>;
@@ -44,6 +46,8 @@ export const BehaviorTreeNode: React.FC<BehaviorTreeNodeProps> = ({
     blackboardVariables,
     initialBlackboardVariables,
     isExecuting,
+    executionStatus,
+    executionOrder,
     connections,
     nodes,
     executorRef,
@@ -67,7 +71,8 @@ export const BehaviorTreeNode: React.FC<BehaviorTreeNodeProps> = ({
         'bt-node',
         isSelected && 'selected',
         isRoot && 'root',
-        isUncommitted && 'uncommitted'
+        isUncommitted && 'uncommitted',
+        executionStatus && executionStatus !== 'idle' && executionStatus
     ].filter(Boolean).join(' ');
 
     return (
@@ -162,11 +167,33 @@ export const BehaviorTreeNode: React.FC<BehaviorTreeNodeProps> = ({
                                 #{node.id}
                             </div>
                         </div>
+                        {executionOrder !== undefined && (
+                            <div
+                                className="bt-node-execution-order"
+                                style={{
+                                    marginLeft: 'auto',
+                                    backgroundColor: '#2196f3',
+                                    color: '#fff',
+                                    borderRadius: '50%',
+                                    width: '20px',
+                                    height: '20px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    fontSize: '11px',
+                                    fontWeight: 'bold',
+                                    flexShrink: 0
+                                }}
+                                title={`执行顺序: ${executionOrder}`}
+                            >
+                                {executionOrder}
+                            </div>
+                        )}
                         {!isRoot && node.template.className && executorRef.current && !executorRef.current.hasExecutor(node.template.className) && (
                             <div
                                 className="bt-node-missing-executor-warning"
                                 style={{
-                                    marginLeft: 'auto',
+                                    marginLeft: executionOrder !== undefined ? '4px' : 'auto',
                                     display: 'flex',
                                     alignItems: 'center',
                                     cursor: 'help',
@@ -191,7 +218,7 @@ export const BehaviorTreeNode: React.FC<BehaviorTreeNodeProps> = ({
                             <div
                                 className="bt-node-uncommitted-warning"
                                 style={{
-                                    marginLeft: !isRoot && node.template.className && executorRef.current && !executorRef.current.hasExecutor(node.template.className) ? '4px' : 'auto',
+                                    marginLeft: (executionOrder !== undefined || (!isRoot && node.template.className && executorRef.current && !executorRef.current.hasExecutor(node.template.className))) ? '4px' : 'auto',
                                     display: 'flex',
                                     alignItems: 'center',
                                     cursor: 'help',
@@ -220,7 +247,7 @@ export const BehaviorTreeNode: React.FC<BehaviorTreeNodeProps> = ({
                                 <div
                                     className="bt-node-empty-warning-container"
                                     style={{
-                                        marginLeft: isUncommitted ? '4px' : 'auto',
+                                        marginLeft: (executionOrder !== undefined || (!isRoot && node.template.className && executorRef.current && !executorRef.current.hasExecutor(node.template.className)) || isUncommitted) ? '4px' : 'auto',
                                         display: 'flex',
                                         alignItems: 'center',
                                         cursor: 'help',

packages/editor-app/src/presentation/components/behavior-tree/panels/BehaviorTreeEditorPanel.css

@@ -0,0 +1,264 @@
+.behavior-tree-editor-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background: var(--bg-secondary);
+}
+
+/* 工具栏 */
+.behavior-tree-editor-toolbar {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background: var(--bg-primary);
+    border-bottom: 1px solid var(--border-color);
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.behavior-tree-editor-toolbar .toolbar-section {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.behavior-tree-editor-toolbar .toolbar-divider {
+    width: 1px;
+    height: 24px;
+    background: var(--border-color);
+    margin: 0 4px;
+}
+
+.behavior-tree-editor-toolbar .toolbar-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--text-primary);
+    transition: all 0.2s;
+}
+
+.behavior-tree-editor-toolbar .toolbar-btn:hover:not(:disabled) {
+    background: var(--bg-hover);
+    border-color: var(--border-color);
+}
+
+.behavior-tree-editor-toolbar .toolbar-btn:active:not(:disabled) {
+    background: var(--bg-active);
+}
+
+.behavior-tree-editor-toolbar .toolbar-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+/* 执行控制按钮颜色 */
+.behavior-tree-editor-toolbar .toolbar-btn.btn-play {
+    color: #4caf50;
+}
+
+.behavior-tree-editor-toolbar .toolbar-btn.btn-play:hover:not(:disabled) {
+    background: rgba(76, 175, 80, 0.15);
+    border-color: rgba(76, 175, 80, 0.3);
+}
+
+.behavior-tree-editor-toolbar .toolbar-btn.btn-pause {
+    color: #ff9800;
+}
+
+.behavior-tree-editor-toolbar .toolbar-btn.btn-pause:hover:not(:disabled) {
+    background: rgba(255, 152, 0, 0.15);
+    border-color: rgba(255, 152, 0, 0.3);
+}
+
+.behavior-tree-editor-toolbar .toolbar-btn.btn-stop {
+    color: #f44336;
+}
+
+.behavior-tree-editor-toolbar .toolbar-btn.btn-stop:hover:not(:disabled) {
+    background: rgba(244, 67, 54, 0.15);
+    border-color: rgba(244, 67, 54, 0.3);
+}
+
+.behavior-tree-editor-toolbar .toolbar-btn.btn-step {
+    color: #2196f3;
+}
+
+.behavior-tree-editor-toolbar .toolbar-btn.btn-step:hover:not(:disabled) {
+    background: rgba(33, 150, 243, 0.15);
+    border-color: rgba(33, 150, 243, 0.3);
+}
+
+/* 速率控制 */
+.speed-control {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: 8px;
+}
+
+.speed-control .speed-label {
+    font-size: 12px;
+    color: #999;
+}
+
+.speed-control .speed-slider {
+    width: 100px;
+    height: 6px;
+    background: #3c3c3c;
+    border-radius: 3px;
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+.speed-control .speed-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: #0e639c;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 0 0 2px rgba(14, 99, 156, 0.3);
+    transition: all 0.2s;
+}
+
+.speed-control .speed-slider::-webkit-slider-thumb:hover {
+    background: #1177bb;
+    box-shadow: 0 0 0 4px rgba(14, 99, 156, 0.3);
+}
+
+.speed-control .speed-slider::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: #0e639c;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 0 0 2px rgba(14, 99, 156, 0.3);
+    transition: all 0.2s;
+}
+
+.speed-control .speed-slider::-moz-range-thumb:hover {
+    background: #1177bb;
+    box-shadow: 0 0 0 4px rgba(14, 99, 156, 0.3);
+}
+
+.speed-control .speed-value {
+    font-size: 12px;
+    color: #ccc;
+    min-width: 35px;
+    text-align: right;
+}
+
+/* 文件信息 */
+.behavior-tree-editor-toolbar .file-info {
+    flex: 1;
+    justify-content: flex-end;
+}
+
+.behavior-tree-editor-toolbar .file-name {
+    font-size: 13px;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+/* 主内容区 */
+.behavior-tree-editor-content {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+}
+
+.editor-canvas-area {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
+/* 黑板侧边栏 - 浮动面板 */
+.blackboard-sidebar {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    bottom: 16px;
+    width: 350px;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
+    z-index: 100;
+}
+
+.blackboard-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px;
+    background: #2d2d2d;
+    border-bottom: 1px solid var(--border-color);
+    border-radius: 8px 8px 0 0;
+    font-weight: 500;
+    font-size: 13px;
+    color: var(--text-primary);
+}
+
+.blackboard-header .close-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: all 0.2s;
+}
+
+.blackboard-header .close-btn:hover {
+    background: var(--bg-hover);
+    border-color: var(--border-color);
+    color: var(--text-primary);
+}
+
+.blackboard-content {
+    flex: 1;
+    overflow: hidden;
+}
+
+/* 黑板切换按钮 */
+.blackboard-toggle-btn {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 48px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px 0 0 8px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: all 0.2s;
+    z-index: 99;
+    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
+}
+
+.blackboard-toggle-btn:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    width: 36px;
+}

packages/editor-app/src/presentation/components/behavior-tree/panels/BehaviorTreeEditorPanel.tsx

@@ -0,0 +1,743 @@
+import { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Save, FolderOpen, Download, Play, Pause, Square, SkipForward, Clipboard, ChevronRight, ChevronLeft, Copy } from 'lucide-react';
+import { invoke } from '@tauri-apps/api/core';
+import { open, message } from '@tauri-apps/plugin-dialog';
+import { Core } from '@esengine/ecs-framework';
+import { MessageHub } from '@esengine/editor-core';
+import { BehaviorTreeEditor } from '../../../../components/BehaviorTreeEditor';
+import { BehaviorTreeBlackboard } from '../../../../components/BehaviorTreeBlackboard';
+import { ExportRuntimeDialog, type ExportOptions } from '../../../../components/ExportRuntimeDialog';
+import { BehaviorTreeNameDialog } from '../../../../components/BehaviorTreeNameDialog';
+import { useToast } from '../../../../components/Toast';
+import { useBehaviorTreeStore, ROOT_NODE_ID } from '../../../../stores/behaviorTreeStore';
+import { EditorFormatConverter, BehaviorTreeAssetSerializer, GlobalBlackboardService, type BlackboardValueType } from '@esengine/behavior-tree';
+import { createLogger } from '@esengine/ecs-framework';
+import { LocalBlackboardTypeGenerator } from '../../../../generators/LocalBlackboardTypeGenerator';
+import { GlobalBlackboardTypeGenerator } from '../../../../generators/GlobalBlackboardTypeGenerator';
+import { useExecutionController } from '../../../hooks/useExecutionController';
+import './BehaviorTreeEditorPanel.css';
+
+const logger = createLogger('BehaviorTreeEditorPanel');
+
+interface BehaviorTreeEditorPanelProps {
+    projectPath?: string | null;
+}
+
+export const BehaviorTreeEditorPanel: React.FC<BehaviorTreeEditorPanelProps> = ({ projectPath: propProjectPath }) => {
+    const { t } = useTranslation();
+    const { showToast } = useToast();
+    const messageHub = Core.services.resolve(MessageHub);
+
+    const {
+        isOpen,
+        nodes,
+        connections,
+        exportToJSON,
+        exportToRuntimeAsset,
+        importFromJSON,
+        blackboardVariables,
+        setBlackboardVariables,
+        updateBlackboardVariable,
+        initialBlackboardVariables,
+        setInitialBlackboardVariables,
+        isExecuting,
+        setIsExecuting,
+        saveNodesDataSnapshot,
+        restoreNodesData,
+        setIsOpen,
+        reset
+    } = useBehaviorTreeStore();
+
+    const [currentFilePath, setCurrentFilePath] = useState<string | null>(null);
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+    const [projectPath, setProjectPath] = useState<string>('');
+    const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
+    const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false);
+    const [availableBTreeFiles, setAvailableBTreeFiles] = useState<string[]>([]);
+    const [isBlackboardOpen, setIsBlackboardOpen] = useState(true);
+    const [globalVariables, setGlobalVariables] = useState<Record<string, any>>({});
+    const [hasUnsavedGlobalChanges, setHasUnsavedGlobalChanges] = useState(false);
+    const isInitialMount = useRef(true);
+    const initialStateSnapshot = useRef<{ nodes: number; variables: number }>({ nodes: 0, variables: 0 });
+
+    const {
+        executionMode,
+        executionSpeed,
+        handlePlay,
+        handlePause,
+        handleStop,
+        handleStep,
+        handleSpeedChange
+    } = useExecutionController({
+        rootNodeId: ROOT_NODE_ID,
+        projectPath: projectPath || '',
+        blackboardVariables,
+        nodes,
+        connections,
+        initialBlackboardVariables,
+        onBlackboardUpdate: setBlackboardVariables,
+        onInitialBlackboardSave: setInitialBlackboardVariables,
+        onExecutingChange: setIsExecuting,
+        onSaveNodesDataSnapshot: saveNodesDataSnapshot,
+        onRestoreNodesData: restoreNodesData
+    });
+
+    useEffect(() => {
+        const initProject = async () => {
+            if (propProjectPath) {
+                setProjectPath(propProjectPath);
+                localStorage.setItem('ecs-project-path', propProjectPath);
+                await loadGlobalBlackboard(propProjectPath);
+            } else {
+                const savedPath = localStorage.getItem('ecs-project-path');
+                if (savedPath) {
+                    setProjectPath(savedPath);
+                    await loadGlobalBlackboard(savedPath);
+                }
+            }
+        };
+        initProject();
+    }, [propProjectPath]);
+
+    useEffect(() => {
+        const loadAvailableFiles = async () => {
+            if (projectPath) {
+                try {
+                    const files = await invoke<string[]>('scan_behavior_trees', { projectPath });
+                    setAvailableBTreeFiles(files);
+                } catch (error) {
+                    logger.error('加载行为树文件列表失败', error);
+                    setAvailableBTreeFiles([]);
+                }
+            } else {
+                setAvailableBTreeFiles([]);
+            }
+        };
+        loadAvailableFiles();
+    }, [projectPath]);
+
+    useEffect(() => {
+        const updateGlobalVariables = () => {
+            const globalBlackboard = Core.services.resolve(GlobalBlackboardService);
+            const allVars = globalBlackboard.getAllVariables();
+            const varsObject: Record<string, any> = {};
+            allVars.forEach((v) => {
+                varsObject[v.name] = v.value;
+            });
+            setGlobalVariables(varsObject);
+        };
+
+        updateGlobalVariables();
+        const interval = setInterval(updateGlobalVariables, 100);
+        return () => clearInterval(interval);
+    }, []);
+
+    useEffect(() => {
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            return;
+        }
+
+        const currentNodes = nodes.length;
+        const currentVariables = Object.keys(blackboardVariables).length;
+
+        if (currentNodes !== initialStateSnapshot.current.nodes ||
+            currentVariables !== initialStateSnapshot.current.variables) {
+            setHasUnsavedChanges(true);
+        }
+    }, [nodes, blackboardVariables]);
+
+    useEffect(() => {
+        const handleOpenFile = async (data: any) => {
+            if (data.filePath && data.filePath.endsWith('.btree')) {
+                try {
+                    const json = await invoke<string>('read_behavior_tree_file', { filePath: data.filePath });
+                    importFromJSON(json);
+                    setCurrentFilePath(data.filePath);
+                    setHasUnsavedChanges(false);
+                    isInitialMount.current = true;
+                    initialStateSnapshot.current = {
+                        nodes: nodes.length,
+                        variables: Object.keys(blackboardVariables).length
+                    };
+                    logger.info('行为树已加载', data.filePath);
+                    showToast(`已打开 ${data.filePath.split(/[\\/]/).pop()?.replace('.btree', '')}`, 'success');
+                } catch (error) {
+                    logger.error('加载行为树失败', error);
+                    showToast(`加载失败: ${error}`, 'error');
+                }
+            }
+        };
+
+        const unsubscribe = messageHub?.subscribe('behavior-tree:open-file', handleOpenFile);
+        return () => unsubscribe?.();
+    }, [messageHub, importFromJSON, nodes.length, blackboardVariables]);
+
+    const loadGlobalBlackboard = async (path: string) => {
+        try {
+            const json = await invoke<string>('read_global_blackboard', { projectPath: path });
+            const config = JSON.parse(json);
+            Core.services.resolve(GlobalBlackboardService).importConfig(config);
+
+            const allVars = Core.services.resolve(GlobalBlackboardService).getAllVariables();
+            const varsObject: Record<string, any> = {};
+            allVars.forEach((v) => {
+                varsObject[v.name] = v.value;
+            });
+            setGlobalVariables(varsObject);
+            setHasUnsavedGlobalChanges(false);
+            logger.info('全局黑板配置已加载');
+        } catch (error) {
+            logger.error('加载全局黑板配置失败', error);
+        }
+    };
+
+    const saveGlobalBlackboard = async () => {
+        if (!projectPath) {
+            logger.error('未设置项目路径，无法保存全局黑板配置');
+            return;
+        }
+
+        try {
+            const globalBlackboard = Core.services.resolve(GlobalBlackboardService);
+            const json = globalBlackboard.toJSON();
+            await invoke('write_global_blackboard', { projectPath, content: json });
+            setHasUnsavedGlobalChanges(false);
+            logger.info('全局黑板配置已保存到', `${projectPath}/.ecs/global-blackboard.json`);
+            showToast('全局黑板已保存', 'success');
+        } catch (error) {
+            logger.error('保存全局黑板配置失败', error);
+            showToast('保存全局黑板失败', 'error');
+        }
+    };
+
+    const handleOpen = async () => {
+        try {
+            const selected = await open({
+                multiple: false,
+                filters: [{
+                    name: 'Behavior Tree',
+                    extensions: ['btree']
+                }]
+            });
+
+            if (selected) {
+                const json = await invoke<string>('read_behavior_tree_file', { filePath: selected as string });
+                importFromJSON(json);
+                setCurrentFilePath(selected as string);
+                setHasUnsavedChanges(false);
+                isInitialMount.current = true;
+                logger.info('行为树已加载', selected);
+            }
+        } catch (error) {
+            logger.error('加载失败', error);
+        }
+    };
+
+    const handleSave = async () => {
+        try {
+            if (isExecuting) {
+                const confirmed = window.confirm(
+                    '行为树正在运行中。保存将使用设计时的初始值，运行时修改的黑板变量不会被保存。\n\n是否继续保存？'
+                );
+                if (!confirmed) {
+                    return;
+                }
+            }
+
+            const saveFilePath = currentFilePath;
+
+            if (!saveFilePath) {
+                if (!projectPath) {
+                    logger.error('未设置项目路径，无法保存行为树');
+                    await message('请先打开项目', { title: '错误', kind: 'error' });
+                    return;
+                }
+                setIsSaveDialogOpen(true);
+                return;
+            }
+
+            await saveToFile(saveFilePath);
+        } catch (error) {
+            logger.error('保存失败', error);
+        }
+    };
+
+    const saveToFile = async (filePath: string) => {
+        try {
+            const json = exportToJSON({ name: 'behavior-tree', description: '' });
+            await invoke('write_behavior_tree_file', { filePath, content: json });
+            logger.info('行为树已保存', filePath);
+
+            setCurrentFilePath(filePath);
+            setHasUnsavedChanges(false);
+            isInitialMount.current = true;
+
+            const fileName = filePath.split(/[\\/]/).pop()?.replace('.btree', '') || '行为树';
+            showToast(`${fileName} 已保存`, 'success');
+        } catch (error) {
+            logger.error('保存失败', error);
+            showToast(`保存失败: ${error}`, 'error');
+            throw error;
+        }
+    };
+
+    const handleSaveDialogConfirm = async (name: string) => {
+        setIsSaveDialogOpen(false);
+        try {
+            const filePath = `${projectPath}/.ecs/behaviors/${name}.btree`;
+            await saveToFile(filePath);
+
+            const files = await invoke<string[]>('scan_behavior_trees', { projectPath });
+            setAvailableBTreeFiles(files);
+        } catch (error) {
+            logger.error('保存失败', error);
+        }
+    };
+
+    const handleExportRuntime = () => {
+        setIsExportDialogOpen(true);
+    };
+
+    const handleDoExport = async (options: ExportOptions) => {
+        if (options.mode === 'workspace') {
+            await handleExportWorkspace(options);
+        } else {
+            const fileName = options.selectedFiles[0];
+            if (!fileName) {
+                logger.error('没有可导出的文件');
+                return;
+            }
+            const format = options.fileFormats.get(fileName) || 'binary';
+            await handleExportSingle(fileName, format, options.assetOutputPath, options.typeOutputPath);
+        }
+    };
+
+    const handleExportSingle = async (fileName: string, format: 'json' | 'binary', outputPath: string, typeOutputPath: string) => {
+        try {
+            const extension = format === 'binary' ? 'bin' : 'json';
+            const filePath = `${outputPath}/${fileName}.btree.${extension}`;
+
+            const data = exportToRuntimeAsset(
+                { name: fileName, description: 'Runtime behavior tree asset' },
+                format
+            );
+
+            await invoke('create_directory', { path: outputPath });
+
+            if (format === 'binary') {
+                await invoke('write_binary_file', { filePath, content: Array.from(data as Uint8Array) });
+            } else {
+                await invoke('write_file_content', { path: filePath, content: data as string });
+            }
+
+            logger.info(`运行时资产已导出 (${format})`, filePath);
+
+            await generateTypeScriptTypes(fileName, typeOutputPath);
+
+            showToast(`${fileName} 导出成功`, 'success');
+        } catch (error) {
+            logger.error('导出失败', error);
+            showToast(`导出失败: ${error}`, 'error');
+        }
+    };
+
+    const generateTypeScriptTypes = async (assetId: string, outputPath: string): Promise<void> => {
+        try {
+            const sourceFilePath = `${projectPath}/.ecs/behaviors/${assetId}.btree`;
+            const editorJson = await invoke<string>('read_file_content', { path: sourceFilePath });
+
+            const editorFormat = JSON.parse(editorJson);
+            const blackboard = editorFormat.blackboard || {};
+
+            const tsCode = LocalBlackboardTypeGenerator.generate(blackboard, {
+                behaviorTreeName: assetId,
+                includeConstants: true,
+                includeDefaults: true,
+                includeHelpers: true
+            });
+
+            const tsFilePath = `${outputPath}/${assetId}.ts`;
+            await invoke('create_directory', { path: outputPath });
+            await invoke('write_file_content', {
+                path: tsFilePath,
+                content: tsCode
+            });
+
+            logger.info(`TypeScript 类型定义已生成: ${assetId}.ts`);
+        } catch (error) {
+            logger.error(`生成 TypeScript 类型定义失败: ${assetId}`, error);
+        }
+    };
+
+    const handleCopyBehaviorTree = () => {
+        const buildNodeTree = (nodeId: string, depth: number = 0): string => {
+            const node = nodes.find(n => n.id === nodeId);
+            if (!node) return '';
+
+            const indent = '  '.repeat(depth);
+            const childrenText = node.children.length > 0
+                ? `\n${node.children.map(childId => buildNodeTree(childId, depth + 1)).join('\n')}`
+                : '';
+
+            const propertiesText = Object.keys(node.data).length > 0
+                ? ` [${Object.entries(node.data).map(([k, v]) => `${k}: ${JSON.stringify(v)}`).join(', ')}]`
+                : '';
+
+            return `${indent}- ${node.template.displayName} (${node.template.type})${propertiesText}${childrenText}`;
+        };
+
+        const rootNode = nodes.find(n => n.id === ROOT_NODE_ID);
+        if (!rootNode) {
+            showToast('未找到根节点', 'error');
+            return;
+        }
+
+        const treeStructure = `
+行为树结构
+==========
+文件: ${currentFilePath || '未保存'}
+节点总数: ${nodes.length}
+连接总数: ${connections.length}
+
+节点树:
+${buildNodeTree(ROOT_NODE_ID)}
+
+黑板变量 (${Object.keys(blackboardVariables).length}个):
+${Object.entries(blackboardVariables).map(([key, value]) => `  - ${key}: ${JSON.stringify(value)}`).join('\n') || '  无'}
+
+全部节点详情:
+${nodes.filter(n => n.id !== ROOT_NODE_ID).map(node => {
+    const incoming = connections.filter(c => c.to === node.id);
+    const outgoing = connections.filter(c => c.from === node.id);
+    return `
+[${node.template.displayName}]
+  类型: ${node.template.type}
+  分类: ${node.template.category}
+  类名: ${node.template.className || '无'}
+  ID: ${node.id}
+  子节点: ${node.children.length}个
+  输入连接: ${incoming.length}个${incoming.length > 0 ? '\n    ' + incoming.map(c => {
+        const fromNode = nodes.find(n => n.id === c.from);
+        return `← ${fromNode?.template.displayName || '未知'}`;
+    }).join('\n    ') : ''}
+  输出连接: ${outgoing.length}个${outgoing.length > 0 ? '\n    ' + outgoing.map(c => {
+        const toNode = nodes.find(n => n.id === c.to);
+        return `→ ${toNode?.template.displayName || '未知'}`;
+    }).join('\n    ') : ''}
+  属性: ${JSON.stringify(node.data, null, 4)}`;
+}).join('\n')}
+        `.trim();
+
+        navigator.clipboard.writeText(treeStructure).then(() => {
+            showToast('行为树结构已复制到剪贴板', 'success');
+        }).catch(() => {
+            const textarea = document.createElement('textarea');
+            textarea.value = treeStructure;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textarea);
+            showToast('行为树结构已复制到剪贴板', 'success');
+        });
+    };
+
+    const handleExportWorkspace = async (options: ExportOptions) => {
+        if (!projectPath) {
+            logger.error('未设置项目路径');
+            return;
+        }
+
+        try {
+            const assetOutputDir = options.assetOutputPath;
+
+            if (options.selectedFiles.length === 0) {
+                logger.warn('没有选择要导出的文件');
+                return;
+            }
+
+            logger.info(`开始导出 ${options.selectedFiles.length} 个文件...`);
+
+            for (const assetId of options.selectedFiles) {
+                try {
+                    const format = options.fileFormats.get(assetId) || 'binary';
+                    const extension = format === 'binary' ? 'bin' : 'json';
+
+                    const sourceFilePath = `${projectPath}/.ecs/behaviors/${assetId}.btree`;
+                    const editorJson = await invoke<string>('read_file_content', { path: sourceFilePath });
+
+                    const editorFormat = JSON.parse(editorJson);
+
+                    const asset = EditorFormatConverter.toAsset(editorFormat, {
+                        name: assetId,
+                        description: editorFormat.metadata?.description || ''
+                    });
+
+                    const data = BehaviorTreeAssetSerializer.serialize(asset, {
+                        format,
+                        pretty: format === 'json',
+                        validate: true
+                    });
+
+                    const outputFilePath = `${assetOutputDir}/${assetId}.btree.${extension}`;
+
+                    const outputDir2 = outputFilePath.substring(0, outputFilePath.lastIndexOf('/'));
+                    await invoke('create_directory', { path: outputDir2 });
+
+                    if (format === 'binary') {
+                        await invoke('write_binary_file', {
+                            filePath: outputFilePath,
+                            content: Array.from(data as Uint8Array)
+                        });
+                    } else {
+                        await invoke('write_file_content', {
+                            path: outputFilePath,
+                            content: data as string
+                        });
+                    }
+
+                    logger.info(`导出成功: ${assetId} (${format})`);
+
+                    await generateTypeScriptTypes(assetId, options.typeOutputPath);
+                } catch (error) {
+                    logger.error(`导出失败: ${assetId}`, error);
+                }
+            }
+
+            try {
+                const globalBlackboard = Core.services.resolve(GlobalBlackboardService);
+                const config = globalBlackboard.exportConfig();
+                const tsCode = GlobalBlackboardTypeGenerator.generate(config);
+                const globalTsFilePath = `${options.typeOutputPath}/GlobalBlackboard.ts`;
+
+                await invoke('write_file_content', {
+                    path: globalTsFilePath,
+                    content: tsCode
+                });
+
+                logger.info('全局变量类型定义已生成:', globalTsFilePath);
+            } catch (error) {
+                logger.error('导出全局变量类型定义失败', error);
+            }
+
+            logger.info(`工作区导出完成: ${assetOutputDir}`);
+            showToast('工作区导出成功', 'success');
+        } catch (error) {
+            logger.error('工作区导出失败', error);
+            showToast(`工作区导出失败: ${error}`, 'error');
+        }
+    };
+
+    const handleVariableChange = (key: string, value: any) => {
+        updateBlackboardVariable(key, value);
+    };
+
+    const handleVariableAdd = (key: string, value: any) => {
+        updateBlackboardVariable(key, value);
+    };
+
+    const handleVariableDelete = (key: string) => {
+        const newVars = { ...blackboardVariables };
+        delete newVars[key];
+        setBlackboardVariables(newVars);
+    };
+
+    const handleVariableRename = (oldKey: string, newKey: string) => {
+        if (oldKey === newKey) return;
+        const newVars = { ...blackboardVariables };
+        const value = newVars[oldKey];
+        delete newVars[oldKey];
+        newVars[newKey] = value;
+        setBlackboardVariables(newVars);
+    };
+
+    const handleGlobalVariableChange = (key: string, value: any) => {
+        const globalBlackboard = Core.services.resolve(GlobalBlackboardService);
+        globalBlackboard.setValue(key, value, true);
+        const allVars = globalBlackboard.getAllVariables();
+        const varsObject: Record<string, any> = {};
+        allVars.forEach((v) => {
+            varsObject[v.name] = v.value;
+        });
+        setGlobalVariables(varsObject);
+        setHasUnsavedGlobalChanges(true);
+    };
+
+    const handleGlobalVariableAdd = (key: string, value: any, type: BlackboardValueType) => {
+        const globalBlackboard = Core.services.resolve(GlobalBlackboardService);
+        globalBlackboard.defineVariable(key, type, value);
+        const allVars = globalBlackboard.getAllVariables();
+        const varsObject: Record<string, any> = {};
+        allVars.forEach((v) => {
+            varsObject[v.name] = v.value;
+        });
+        setGlobalVariables(varsObject);
+        setHasUnsavedGlobalChanges(true);
+    };
+
+    const handleGlobalVariableDelete = (key: string) => {
+        const globalBlackboard = Core.services.resolve(GlobalBlackboardService);
+        globalBlackboard.removeVariable(key);
+        const allVars = globalBlackboard.getAllVariables();
+        const varsObject: Record<string, any> = {};
+        allVars.forEach((v) => {
+            varsObject[v.name] = v.value;
+        });
+        setGlobalVariables(varsObject);
+        setHasUnsavedGlobalChanges(true);
+    };
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <div className="behavior-tree-editor-panel">
+            <div className="behavior-tree-editor-toolbar">
+                {/* 文件操作 */}
+                <div className="toolbar-section">
+                    <button onClick={handleOpen} className="toolbar-btn" title="打开">
+                        <FolderOpen size={16} />
+                    </button>
+                    <button onClick={handleSave} className="toolbar-btn" title="保存">
+                        <Save size={16} />
+                    </button>
+                    <button onClick={handleExportRuntime} className="toolbar-btn" title="导出运行时资产">
+                        <Download size={16} />
+                    </button>
+                </div>
+
+                <div className="toolbar-divider" />
+
+                {/* 执行控制 */}
+                <div className="toolbar-section">
+                    {executionMode === 'idle' || executionMode === 'step' ? (
+                        <button onClick={handlePlay} className="toolbar-btn btn-play" title="开始执行">
+                            <Play size={16} />
+                        </button>
+                    ) : executionMode === 'paused' ? (
+                        <button onClick={handlePlay} className="toolbar-btn btn-play" title="继续">
+                            <Play size={16} />
+                        </button>
+                    ) : (
+                        <button onClick={handlePause} className="toolbar-btn btn-pause" title="暂停">
+                            <Pause size={16} />
+                        </button>
+                    )}
+                    <button onClick={handleStop} className="toolbar-btn btn-stop" title="停止" disabled={executionMode === 'idle'}>
+                        <Square size={16} />
+                    </button>
+                    <button onClick={handleStep} className="toolbar-btn btn-step" title="单步执行" disabled={executionMode === 'running'}>
+                        <SkipForward size={16} />
+                    </button>
+
+                    <div className="speed-control">
+                        <span className="speed-label">速率:</span>
+                        <input
+                            type="range"
+                            min="0.1"
+                            max="5"
+                            step="0.1"
+                            value={executionSpeed}
+                            onChange={(e) => handleSpeedChange(parseFloat(e.target.value))}
+                            className="speed-slider"
+                            title={`执行速率: ${executionSpeed.toFixed(1)}x`}
+                        />
+                        <span className="speed-value">{executionSpeed.toFixed(1)}x</span>
+                    </div>
+                </div>
+
+                <div className="toolbar-divider" />
+
+                {/* 视图控制 */}
+                <div className="toolbar-section">
+                    <button onClick={() => setIsBlackboardOpen(!isBlackboardOpen)} className="toolbar-btn" title="黑板">
+                        <Clipboard size={16} />
+                    </button>
+                    <button onClick={handleCopyBehaviorTree} className="toolbar-btn" title="复制整个行为树结构">
+                        <Copy size={16} />
+                    </button>
+                </div>
+
+                {/* 文件名 */}
+                <div className="toolbar-section file-info">
+                    <span className="file-name">
+                        {currentFilePath
+                            ? `${currentFilePath.split(/[\\/]/).pop()?.replace('.btree', '')}${hasUnsavedChanges ? ' *' : ''}`
+                            : t('behaviorTree.title')
+                        }
+                    </span>
+                </div>
+            </div>
+
+            <div className="behavior-tree-editor-content">
+                <div className="editor-canvas-area">
+                    <BehaviorTreeEditor
+                        onNodeSelect={(node) => {
+                            messageHub?.publish('behavior-tree:node-selected', { node });
+                        }}
+                        onNodeCreate={(_template, _position) => {
+                            // Node created
+                        }}
+                        blackboardVariables={blackboardVariables}
+                        projectPath={projectPath || propProjectPath || null}
+                        showToolbar={false}
+                    />
+                </div>
+
+                {isBlackboardOpen && (
+                    <div className="blackboard-sidebar">
+                        <div className="blackboard-header">
+                            <span>{t('behaviorTree.blackboard')}</span>
+                            <button onClick={() => setIsBlackboardOpen(false)} className="close-btn">
+                                <ChevronRight size={16} />
+                            </button>
+                        </div>
+                        <div className="blackboard-content">
+                            <BehaviorTreeBlackboard
+                                variables={blackboardVariables}
+                                initialVariables={isExecuting ? initialBlackboardVariables : undefined}
+                                globalVariables={globalVariables}
+                                onVariableChange={handleVariableChange}
+                                onVariableAdd={handleVariableAdd}
+                                onVariableDelete={handleVariableDelete}
+                                onVariableRename={handleVariableRename}
+                                onGlobalVariableChange={handleGlobalVariableChange}
+                                onGlobalVariableAdd={handleGlobalVariableAdd}
+                                onGlobalVariableDelete={handleGlobalVariableDelete}
+                                projectPath={projectPath}
+                                hasUnsavedGlobalChanges={hasUnsavedGlobalChanges}
+                                onSaveGlobal={saveGlobalBlackboard}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {!isBlackboardOpen && (
+                    <button onClick={() => setIsBlackboardOpen(true)} className="blackboard-toggle-btn" title="显示黑板">
+                        <ChevronLeft size={16} />
+                    </button>
+                )}
+            </div>
+
+            <ExportRuntimeDialog
+                isOpen={isExportDialogOpen}
+                onClose={() => setIsExportDialogOpen(false)}
+                onExport={handleDoExport}
+                hasProject={!!projectPath}
+                availableFiles={availableBTreeFiles}
+                currentFileName={currentFilePath ? currentFilePath.split(/[\\/]/).pop()?.replace('.btree', '') : undefined}
+                projectPath={projectPath}
+            />
+
+            <BehaviorTreeNameDialog
+                isOpen={isSaveDialogOpen}
+                onConfirm={handleSaveDialogConfirm}
+                onCancel={() => setIsSaveDialogOpen(false)}
+            />
+        </div>
+    );
+};

packages/editor-app/src/presentation/components/behavior-tree/panels/BehaviorTreeNodePalettePanel.css

@@ -0,0 +1,8 @@
+.behavior-tree-node-palette-panel {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-secondary);
+    overflow: hidden;
+}

packages/editor-app/src/presentation/components/behavior-tree/panels/BehaviorTreeNodePalettePanel.tsx

@@ -0,0 +1,18 @@
+import { Core } from '@esengine/ecs-framework';
+import { MessageHub } from '@esengine/editor-core';
+import { BehaviorTreeNodePalette } from '../../../../components/BehaviorTreeNodePalette';
+import './BehaviorTreeNodePalettePanel.css';
+
+export const BehaviorTreeNodePalettePanel: React.FC = () => {
+    const messageHub = Core.services.resolve(MessageHub);
+
+    return (
+        <div className="behavior-tree-node-palette-panel">
+            <BehaviorTreeNodePalette
+                onNodeSelect={(template) => {
+                    messageHub?.publish('behavior-tree:node-palette-selected', { template });
+                }}
+            />
+        </div>
+    );
+};

packages/editor-app/src/presentation/components/behavior-tree/panels/BehaviorTreePropertiesPanel.css

@@ -0,0 +1,45 @@
+.behavior-tree-properties-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background: var(--bg-secondary);
+}
+
+.properties-panel-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border-color);
+    background: var(--bg-primary);
+}
+
+.properties-panel-tabs .tab-button {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 10px;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    cursor: pointer;
+    color: var(--text-secondary);
+    font-size: 13px;
+    transition: all 0.2s;
+}
+
+.properties-panel-tabs .tab-button:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.properties-panel-tabs .tab-button.active {
+    color: var(--primary-color);
+    border-bottom-color: var(--primary-color);
+    background: var(--bg-secondary);
+}
+
+.properties-panel-content {
+    flex: 1;
+    overflow: hidden;
+}

packages/editor-app/src/presentation/components/behavior-tree/panels/BehaviorTreePropertiesPanel.tsx

@@ -0,0 +1,381 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Settings, Clipboard } from 'lucide-react';
+import { Core } from '@esengine/ecs-framework';
+import { MessageHub } from '@esengine/editor-core';
+import { BehaviorTreeNodeProperties } from '../../../../components/BehaviorTreeNodeProperties';
+import { BehaviorTreeBlackboard } from '../../../../components/BehaviorTreeBlackboard';
+import { GlobalBlackboardService, type BlackboardValueType, type NodeTemplate } from '@esengine/behavior-tree';
+import { useBehaviorTreeStore, type Connection } from '../../../../stores/behaviorTreeStore';
+import { invoke } from '@tauri-apps/api/core';
+import { useToast } from '../../../../components/Toast';
+import { createLogger } from '@esengine/ecs-framework';
+import './BehaviorTreePropertiesPanel.css';
+
+const logger = createLogger('BehaviorTreePropertiesPanel');
+
+interface BehaviorTreePropertiesPanelProps {
+    projectPath?: string | null;
+}
+
+export const BehaviorTreePropertiesPanel: React.FC<BehaviorTreePropertiesPanelProps> = ({ projectPath: propProjectPath }) => {
+    const { t } = useTranslation();
+    const { showToast } = useToast();
+    const messageHub = Core.services.resolve(MessageHub);
+
+    const {
+        nodes,
+        connections,
+        updateNodes,
+        blackboardVariables,
+        setBlackboardVariables,
+        updateBlackboardVariable,
+        initialBlackboardVariables,
+        isExecuting,
+        removeConnections
+    } = useBehaviorTreeStore();
+
+    const [selectedNode, setSelectedNode] = useState<{
+        id: string;
+        template: NodeTemplate;
+        data: Record<string, any>;
+    } | undefined>();
+
+    const [activeTab, setActiveTab] = useState<'properties' | 'blackboard'>('blackboard');
+    const [projectPath, setProjectPath] = useState<string>('');
+    const [globalVariables, setGlobalVariables] = useState<Record<string, any>>({});
+    const [hasUnsavedGlobalChanges, setHasUnsavedGlobalChanges] = useState(false);
+
+    useEffect(() => {
+        const initProject = async () => {
+            if (propProjectPath) {
+                setProjectPath(propProjectPath);
+                localStorage.setItem('ecs-project-path', propProjectPath);
+                await loadGlobalBlackboard(propProjectPath);
+            } else {
+                const savedPath = localStorage.getItem('ecs-project-path');
+                if (savedPath) {
+                    setProjectPath(savedPath);
+                    await loadGlobalBlackboard(savedPath);
+                }
+            }
+        };
+        initProject();
+    }, [propProjectPath]);
+
+    useEffect(() => {
+        const updateGlobalVariables = () => {
+            const globalBlackboard = Core.services.resolve(GlobalBlackboardService);
+            const allVars = globalBlackboard.getAllVariables();
+            const varsObject: Record<string, any> = {};
+            allVars.forEach((v) => {
+                varsObject[v.name] = v.value;
+            });
+            setGlobalVariables(varsObject);
+        };
+
+        updateGlobalVariables();
+        const interval = setInterval(updateGlobalVariables, 100);
+        return () => clearInterval(interval);
+    }, []);
+
+    useEffect(() => {
+        const handleNodeSelected = (data: any) => {
+            if (data.node) {
+                let template = data.node.template;
+                let nodeData = data.node.data;
+
+                if (data.node.data.nodeType === 'blackboard-variable') {
+                    const varName = (data.node.data.variableName as string) || '';
+                    const varValue = blackboardVariables[varName];
+                    const varType = typeof varValue === 'number' ? 'number' :
+                        typeof varValue === 'boolean' ? 'boolean' : 'string';
+
+                    nodeData = {
+                        ...data.node.data,
+                        __blackboardValue: varValue
+                    };
+
+                    template = {
+                        ...data.node.template,
+                        properties: [
+                            {
+                                name: 'variableName',
+                                label: t('behaviorTree.variableName'),
+                                type: 'variable',
+                                defaultValue: varName,
+                                description: t('behaviorTree.variableName'),
+                                required: true
+                            },
+                            {
+                                name: '__blackboardValue',
+                                label: t('behaviorTree.currentValue'),
+                                type: varType,
+                                defaultValue: varValue,
+                                description: t('behaviorTree.currentValue')
+                            }
+                        ]
+                    };
+                }
+
+                setSelectedNode({
+                    id: data.node.id,
+                    template,
+                    data: nodeData
+                });
+                setActiveTab('properties');
+            }
+        };
+
+        const unsubscribe = messageHub?.subscribe('behavior-tree:node-selected', handleNodeSelected);
+        return () => unsubscribe?.();
+    }, [messageHub, blackboardVariables, t]);
+
+    useEffect(() => {
+        if (selectedNode && selectedNode.id) {
+            const nodeStillExists = nodes.some((node: any) => node.id === selectedNode.id);
+            if (!nodeStillExists) {
+                setSelectedNode(undefined);
+            }
+        }
+    }, [nodes, selectedNode]);
+
+    const loadGlobalBlackboard = async (path: string) => {
+        try {
+            const json = await invoke<string>('read_global_blackboard', { projectPath: path });
+            const config = JSON.parse(json);
+            Core.services.resolve(GlobalBlackboardService).importConfig(config);
+
+            const allVars = Core.services.resolve(GlobalBlackboardService).getAllVariables();
+            const varsObject: Record<string, any> = {};
+            allVars.forEach((v) => {
+                varsObject[v.name] = v.value;
+            });
+            setGlobalVariables(varsObject);
+            setHasUnsavedGlobalChanges(false);
+            logger.info('全局黑板配置已加载');
+        } catch (error) {
+            logger.error('加载全局黑板配置失败', error);
+        }
+    };
+
+    const saveGlobalBlackboard = async () => {
+        if (!projectPath) {
+            logger.error('未设置项目路径，无法保存全局黑板配置');
+            return;
+        }
+
+        try {
+            const globalBlackboard = Core.services.resolve(GlobalBlackboardService);
+            const json = globalBlackboard.toJSON();
+            await invoke('write_global_blackboard', { projectPath, content: json });
+            setHasUnsavedGlobalChanges(false);
+            logger.info('全局黑板配置已保存到', `${projectPath}/.ecs/global-blackboard.json`);
+            showToast('全局黑板已保存', 'success');
+        } catch (error) {
+            logger.error('保存全局黑板配置失败', error);
+            showToast('保存全局黑板失败', 'error');
+        }
+    };
+
+    const handleVariableChange = (key: string, value: any) => {
+        updateBlackboardVariable(key, value);
+    };
+
+    const handleVariableAdd = (key: string, value: any) => {
+        updateBlackboardVariable(key, value);
+    };
+
+    const handleVariableDelete = (key: string) => {
+        const newVars = { ...blackboardVariables };
+        delete newVars[key];
+        setBlackboardVariables(newVars);
+    };
+
+    const handleVariableRename = (oldKey: string, newKey: string) => {
+        if (oldKey === newKey) return;
+        const newVars = { ...blackboardVariables };
+        const value = newVars[oldKey];
+        delete newVars[oldKey];
+        newVars[newKey] = value;
+        setBlackboardVariables(newVars);
+    };
+
+    const handleGlobalVariableChange = (key: string, value: any) => {
+        const globalBlackboard = Core.services.resolve(GlobalBlackboardService);
+        globalBlackboard.setValue(key, value, true);
+        const allVars = globalBlackboard.getAllVariables();
+        const varsObject: Record<string, any> = {};
+        allVars.forEach((v) => {
+            varsObject[v.name] = v.value;
+        });
+        setGlobalVariables(varsObject);
+        setHasUnsavedGlobalChanges(true);
+    };
+
+    const handleGlobalVariableAdd = (key: string, value: any, type: BlackboardValueType) => {
+        const globalBlackboard = Core.services.resolve(GlobalBlackboardService);
+        globalBlackboard.defineVariable(key, type, value);
+        const allVars = globalBlackboard.getAllVariables();
+        const varsObject: Record<string, any> = {};
+        allVars.forEach((v) => {
+            varsObject[v.name] = v.value;
+        });
+        setGlobalVariables(varsObject);
+        setHasUnsavedGlobalChanges(true);
+    };
+
+    const handleGlobalVariableDelete = (key: string) => {
+        const globalBlackboard = Core.services.resolve(GlobalBlackboardService);
+        globalBlackboard.removeVariable(key);
+        const allVars = globalBlackboard.getAllVariables();
+        const varsObject: Record<string, any> = {};
+        allVars.forEach((v) => {
+            varsObject[v.name] = v.value;
+        });
+        setGlobalVariables(varsObject);
+        setHasUnsavedGlobalChanges(true);
+    };
+
+    const handlePropertyChange = (propertyName: string, value: any) => {
+        if (!selectedNode) return;
+
+        if (selectedNode.data.nodeType === 'blackboard-variable' && propertyName === '__blackboardValue') {
+            const varName = selectedNode.data.variableName;
+            if (varName) {
+                handleVariableChange(varName, value);
+                setSelectedNode({
+                    ...selectedNode,
+                    data: {
+                        ...selectedNode.data,
+                        __blackboardValue: value
+                    }
+                });
+            }
+            return;
+        }
+
+        if (selectedNode.data.nodeType === 'blackboard-variable' && propertyName === 'variableName') {
+            const newVarValue = blackboardVariables[value];
+            const newVarType = typeof newVarValue === 'number' ? 'number' :
+                typeof newVarValue === 'boolean' ? 'boolean' : 'string';
+
+            updateNodes((nodes: any) => nodes.map((node: any) => {
+                if (node.id === selectedNode.id) {
+                    return {
+                        ...node,
+                        data: {
+                            ...node.data,
+                            [propertyName]: value
+                        },
+                        template: {
+                            ...node.template,
+                            displayName: value
+                        }
+                    };
+                }
+                return node;
+            }));
+
+            const updatedTemplate = {
+                ...selectedNode.template,
+                displayName: value,
+                properties: [
+                    {
+                        name: 'variableName',
+                        label: t('behaviorTree.variableName'),
+                        type: 'variable' as const,
+                        defaultValue: value,
+                        description: t('behaviorTree.variableName'),
+                        required: true
+                    },
+                    {
+                        name: '__blackboardValue',
+                        label: t('behaviorTree.currentValue'),
+                        type: newVarType as 'string' | 'number' | 'boolean',
+                        defaultValue: newVarValue,
+                        description: t('behaviorTree.currentValue')
+                    }
+                ]
+            };
+
+            setSelectedNode({
+                ...selectedNode,
+                template: updatedTemplate,
+                data: {
+                    ...selectedNode.data,
+                    [propertyName]: value,
+                    __blackboardValue: newVarValue
+                }
+            });
+        } else {
+            updateNodes((nodes: any) => nodes.map((node: any) => {
+                if (node.id === selectedNode.id) {
+                    return {
+                        ...node,
+                        data: {
+                            ...node.data,
+                            [propertyName]: value
+                        }
+                    };
+                }
+                return node;
+            }));
+
+            setSelectedNode({
+                ...selectedNode,
+                data: {
+                    ...selectedNode.data,
+                    [propertyName]: value
+                }
+            });
+        }
+    };
+
+    return (
+        <div className="behavior-tree-properties-panel">
+            <div className="properties-panel-tabs">
+                <button
+                    onClick={() => setActiveTab('properties')}
+                    className={`tab-button ${activeTab === 'properties' ? 'active' : ''}`}
+                >
+                    <Settings size={16} />
+                    {t('behaviorTree.properties')}
+                </button>
+                <button
+                    onClick={() => setActiveTab('blackboard')}
+                    className={`tab-button ${activeTab === 'blackboard' ? 'active' : ''}`}
+                >
+                    <Clipboard size={16} />
+                    {t('behaviorTree.blackboard')}
+                </button>
+            </div>
+
+            <div className="properties-panel-content">
+                {activeTab === 'properties' ? (
+                    <BehaviorTreeNodeProperties
+                        selectedNode={selectedNode}
+                        projectPath={projectPath}
+                        onPropertyChange={handlePropertyChange}
+                    />
+                ) : (
+                    <BehaviorTreeBlackboard
+                        variables={blackboardVariables}
+                        initialVariables={isExecuting ? initialBlackboardVariables : undefined}
+                        globalVariables={globalVariables}
+                        onVariableChange={handleVariableChange}
+                        onVariableAdd={handleVariableAdd}
+                        onVariableDelete={handleVariableDelete}
+                        onVariableRename={handleVariableRename}
+                        onGlobalVariableChange={handleGlobalVariableChange}
+                        onGlobalVariableAdd={handleGlobalVariableAdd}
+                        onGlobalVariableDelete={handleGlobalVariableDelete}
+                        projectPath={projectPath}
+                        hasUnsavedGlobalChanges={hasUnsavedGlobalChanges}
+                        onSaveGlobal={saveGlobalBlackboard}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};

packages/editor-app/src/presentation/components/behavior-tree/panels/index.ts

@@ -0,0 +1,2 @@
+export { BehaviorTreeEditorPanel } from './BehaviorTreeEditorPanel';
+export { BehaviorTreeNodePalettePanel } from './BehaviorTreeNodePalettePanel';

packages/editor-app/src/presentation/components/menu/NodeContextMenu.tsx

@@ -1,19 +1,36 @@
 import React from 'react';
+import { Trash2, Replace, Plus } from 'lucide-react';
 
 interface NodeContextMenuProps {
     visible: boolean;
     position: { x: number; y: number };
     nodeId: string | null;
-    onReplaceNode: () => void;
+    onReplaceNode?: () => void;
+    onDeleteNode?: () => void;
+    onCreateNode?: () => void;
 }
 
 export const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
     visible,
     position,
-    onReplaceNode
+    nodeId,
+    onReplaceNode,
+    onDeleteNode,
+    onCreateNode
 }) => {
     if (!visible) return null;
 
+    const menuItemStyle = {
+        padding: '8px 16px',
+        cursor: 'pointer',
+        color: '#cccccc',
+        fontSize: '13px',
+        transition: 'background-color 0.15s',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px'
+    };
+
     return (
         <div
             style={{
@@ -30,20 +47,46 @@ export const NodeContextMenu: React.FC<NodeContextMenuProps> = ({
             }}
             onClick={(e) => e.stopPropagation()}
         >
-            <div
-                onClick={onReplaceNode}
-                style={{
-                    padding: '8px 16px',
-                    cursor: 'pointer',
-                    color: '#cccccc',
-                    fontSize: '13px',
-                    transition: 'background-color 0.15s'
-                }}
-                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#094771'}
-                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
-            >
-                替换节点
-            </div>
+            {nodeId ? (
+                <>
+                    {onReplaceNode && (
+                        <div
+                            onClick={onReplaceNode}
+                            style={menuItemStyle}
+                            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#094771'}
+                            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+                        >
+                            <Replace size={14} />
+                            替换节点
+                        </div>
+                    )}
+                    {onDeleteNode && (
+                        <div
+                            onClick={onDeleteNode}
+                            style={{...menuItemStyle, color: '#f48771'}}
+                            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#5a1a1a'}
+                            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+                        >
+                            <Trash2 size={14} />
+                            删除节点
+                        </div>
+                    )}
+                </>
+            ) : (
+                <>
+                    {onCreateNode && (
+                        <div
+                            onClick={onCreateNode}
+                            style={menuItemStyle}
+                            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#094771'}
+                            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+                        >
+                            <Plus size={14} />
+                            新建节点
+                        </div>
+                    )}
+                </>
+            )}
         </div>
     );
 };

packages/editor-app/src/presentation/components/menu/QuickCreateMenu.tsx

@@ -1,6 +1,6 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { NodeTemplate, NodeTemplates } from '@esengine/behavior-tree';
-import { Search, X, LucideIcon } from 'lucide-react';
+import { Search, X, LucideIcon, ChevronDown, ChevronRight } from 'lucide-react';
 
 interface QuickCreateMenuProps {
     visible: boolean;
@@ -15,6 +15,12 @@ interface QuickCreateMenuProps {
     onClose: () => void;
 }
 
+interface CategoryGroup {
+    category: string;
+    templates: NodeTemplate[];
+    isExpanded: boolean;
+}
+
 export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
     visible,
     position,
@@ -27,6 +33,8 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
     onClose
 }) => {
     const selectedNodeRef = useRef<HTMLDivElement>(null);
+    const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set());
+    const [shouldAutoScroll, setShouldAutoScroll] = useState(false);
 
     const allTemplates = NodeTemplates.getAllTemplates();
     const searchTextLower = searchText.toLowerCase();
@@ -40,17 +48,63 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
         })
         : allTemplates;
 
+    const categoryGroups: CategoryGroup[] = React.useMemo(() => {
+        const groups = new Map<string, NodeTemplate[]>();
+
+        filteredTemplates.forEach((template: NodeTemplate) => {
+            const category = template.category || '未分类';
+            if (!groups.has(category)) {
+                groups.set(category, []);
+            }
+            groups.get(category)!.push(template);
+        });
+
+        return Array.from(groups.entries()).map(([category, templates]) => ({
+            category,
+            templates,
+            isExpanded: searchTextLower ? true : expandedCategories.has(category)
+        })).sort((a, b) => a.category.localeCompare(b.category));
+    }, [filteredTemplates, expandedCategories, searchTextLower]);
+
+    const flattenedTemplates = React.useMemo(() => {
+        return categoryGroups.flatMap(group =>
+            group.isExpanded ? group.templates : []
+        );
+    }, [categoryGroups]);
+
+    const toggleCategory = (category: string) => {
+        setExpandedCategories(prev => {
+            const newSet = new Set(prev);
+            if (newSet.has(category)) {
+                newSet.delete(category);
+            } else {
+                newSet.add(category);
+            }
+            return newSet;
+        });
+    };
+
     useEffect(() => {
-        if (selectedNodeRef.current) {
+        if (allTemplates.length > 0 && expandedCategories.size === 0) {
+            const categories = new Set(allTemplates.map(t => t.category || '未分类'));
+            setExpandedCategories(categories);
+        }
+    }, [allTemplates, expandedCategories.size]);
+
+    useEffect(() => {
+        if (shouldAutoScroll && selectedNodeRef.current) {
             selectedNodeRef.current.scrollIntoView({
                 block: 'nearest',
                 behavior: 'smooth'
             });
+            setShouldAutoScroll(false);
         }
-    }, [selectedIndex]);
+    }, [selectedIndex, shouldAutoScroll]);
 
     if (!visible) return null;
 
+    let globalIndex = -1;
+
     return (
         <>
             <style>{`
@@ -67,6 +121,12 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
                 .quick-create-menu-list::-webkit-scrollbar-thumb:hover {
                     background: #4c4c4c;
                 }
+                .category-header {
+                    transition: background-color 0.15s;
+                }
+                .category-header:hover {
+                    background-color: #3c3c3c;
+                }
             `}</style>
             <div
                 style={{
@@ -74,7 +134,7 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
                     left: `${position.x}px`,
                     top: `${position.y}px`,
                     width: '300px',
-                    maxHeight: '400px',
+                    maxHeight: '500px',
                     backgroundColor: '#2d2d2d',
                     borderRadius: '6px',
                     boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
@@ -109,13 +169,15 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
                                 onClose();
                             } else if (e.key === 'ArrowDown') {
                                 e.preventDefault();
-                                onIndexChange(Math.min(selectedIndex + 1, filteredTemplates.length - 1));
+                                setShouldAutoScroll(true);
+                                onIndexChange(Math.min(selectedIndex + 1, flattenedTemplates.length - 1));
                             } else if (e.key === 'ArrowUp') {
                                 e.preventDefault();
+                                setShouldAutoScroll(true);
                                 onIndexChange(Math.max(selectedIndex - 1, 0));
-                            } else if (e.key === 'Enter' && filteredTemplates.length > 0) {
+                            } else if (e.key === 'Enter' && flattenedTemplates.length > 0) {
                                 e.preventDefault();
-                                const selectedTemplate = filteredTemplates[selectedIndex];
+                                const selectedTemplate = flattenedTemplates[selectedIndex];
                                 if (selectedTemplate) {
                                     onNodeSelect(selectedTemplate);
                                 }
@@ -153,10 +215,10 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
                     style={{
                         flex: 1,
                         overflowY: 'auto',
-                        padding: '8px'
+                        padding: '4px'
                     }}
                 >
-                    {filteredTemplates.length === 0 ? (
+                    {categoryGroups.length === 0 ? (
                         <div style={{
                             padding: '20px',
                             textAlign: 'center',
@@ -166,71 +228,113 @@ export const QuickCreateMenu: React.FC<QuickCreateMenuProps> = ({
                             未找到匹配的节点
                         </div>
                     ) : (
-                        filteredTemplates.map((template: NodeTemplate, index: number) => {
-                            const IconComponent = template.icon ? iconMap[template.icon] : null;
-                            const className = template.className || '';
-                            const isSelected = index === selectedIndex;
+                        categoryGroups.map((group) => {
                             return (
-                                <div
-                                    key={index}
-                                    ref={isSelected ? selectedNodeRef : null}
-                                    onClick={() => onNodeSelect(template)}
-                                    onMouseEnter={() => onIndexChange(index)}
-                                    style={{
-                                        padding: '8px 12px',
-                                        marginBottom: '4px',
-                                        backgroundColor: isSelected ? '#0e639c' : '#1e1e1e',
-                                        borderLeft: `3px solid ${template.color || '#666'}`,
-                                        borderRadius: '3px',
-                                        cursor: 'pointer',
-                                        transition: 'all 0.15s',
-                                        transform: isSelected ? 'translateX(2px)' : 'translateX(0)'
-                                    }}
-                                >
-                                    <div style={{
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        gap: '8px',
-                                        marginBottom: '4px'
-                                    }}>
-                                        {IconComponent && (
-                                            <IconComponent size={14} style={{ color: template.color || '#999', flexShrink: 0 }} />
+                                <div key={group.category} style={{ marginBottom: '4px' }}>
+                                    <div
+                                        className="category-header"
+                                        onClick={() => toggleCategory(group.category)}
+                                        style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '6px',
+                                            padding: '8px 12px',
+                                            backgroundColor: '#1e1e1e',
+                                            borderRadius: '3px',
+                                            cursor: 'pointer',
+                                            userSelect: 'none'
+                                        }}
+                                    >
+                                        {group.isExpanded ? (
+                                            <ChevronDown size={14} style={{ color: '#999', flexShrink: 0 }} />
+                                        ) : (
+                                            <ChevronRight size={14} style={{ color: '#999', flexShrink: 0 }} />
                                         )}
-                                        <div style={{ flex: 1 }}>
-                                            <div style={{
-                                                color: '#ccc',
-                                                fontSize: '13px',
-                                                fontWeight: '500',
-                                                marginBottom: '2px'
-                                            }}>
-                                                {template.displayName}
-                                            </div>
-                                            {className && (
-                                                <div style={{
-                                                    color: '#666',
-                                                    fontSize: '10px',
-                                                    fontFamily: 'Consolas, Monaco, monospace',
-                                                    opacity: 0.8
-                                                }}>
-                                                    {className}
-                                                </div>
-                                            )}
+                                        <span style={{
+                                            color: '#aaa',
+                                            fontSize: '12px',
+                                            fontWeight: '600',
+                                            flex: 1
+                                        }}>
+                                            {group.category}
+                                        </span>
+                                        <span style={{
+                                            color: '#666',
+                                            fontSize: '11px',
+                                            backgroundColor: '#2d2d2d',
+                                            padding: '2px 6px',
+                                            borderRadius: '10px'
+                                        }}>
+                                            {group.templates.length}
+                                        </span>
+                                    </div>
+
+                                    {group.isExpanded && (
+                                        <div style={{ paddingLeft: '8px', paddingTop: '4px' }}>
+                                            {group.templates.map((template: NodeTemplate) => {
+                                                globalIndex++;
+                                                const IconComponent = template.icon ? iconMap[template.icon] : null;
+                                                const className = template.className || '';
+                                                const isSelected = globalIndex === selectedIndex;
+                                                return (
+                                                    <div
+                                                        key={template.className || template.displayName}
+                                                        ref={isSelected ? selectedNodeRef : null}
+                                                        onClick={() => onNodeSelect(template)}
+                                                        onMouseEnter={() => onIndexChange(globalIndex)}
+                                                        style={{
+                                                            padding: '8px 12px',
+                                                            marginBottom: '4px',
+                                                            backgroundColor: isSelected ? '#0e639c' : '#1e1e1e',
+                                                            borderLeft: `3px solid ${template.color || '#666'}`,
+                                                            borderRadius: '3px',
+                                                            cursor: 'pointer',
+                                                            transition: 'all 0.15s',
+                                                            transform: isSelected ? 'translateX(2px)' : 'translateX(0)'
+                                                        }}
+                                                    >
+                                                        <div style={{
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            gap: '8px',
+                                                            marginBottom: '4px'
+                                                        }}>
+                                                            {IconComponent && (
+                                                                <IconComponent size={14} style={{ color: template.color || '#999', flexShrink: 0 }} />
+                                                            )}
+                                                            <div style={{ flex: 1 }}>
+                                                                <div style={{
+                                                                    color: '#ccc',
+                                                                    fontSize: '13px',
+                                                                    fontWeight: '500',
+                                                                    marginBottom: '2px'
+                                                                }}>
+                                                                    {template.displayName}
+                                                                </div>
+                                                                {className && (
+                                                                    <div style={{
+                                                                        color: '#666',
+                                                                        fontSize: '10px',
+                                                                        fontFamily: 'Consolas, Monaco, monospace',
+                                                                        opacity: 0.8
+                                                                    }}>
+                                                                        {className}
+                                                                    </div>
+                                                                )}
+                                                            </div>
+                                                        </div>
+                                                        <div style={{
+                                                            fontSize: '11px',
+                                                            color: '#999',
+                                                            lineHeight: '1.4'
+                                                        }}>
+                                                            {template.description}
+                                                        </div>
+                                                    </div>
+                                                );
+                                            })}
                                         </div>
-                                    </div>
-                                    <div style={{
-                                        fontSize: '11px',
-                                        color: '#999',
-                                        lineHeight: '1.4',
-                                        marginBottom: '2px'
-                                    }}>
-                                        {template.description}
-                                    </div>
-                                    <div style={{
-                                        fontSize: '10px',
-                                        color: '#666'
-                                    }}>
-                                        {template.category}
-                                    </div>
+                                    )}
                                 </div>
                             );
                         })

packages/editor-app/src/presentation/hooks/useCanvasMouseEvents.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { RefObject, useEffect, useRef } from 'react';
 import { BehaviorTreeNode, ROOT_NODE_ID } from '../../stores/behaviorTreeStore';
 
 interface QuickCreateMenuState {
@@ -31,6 +31,7 @@ interface UseCanvasMouseEventsParams {
     setQuickCreateMenu: (menu: QuickCreateMenuState) => void;
     clearConnecting: () => void;
     clearBoxSelect: () => void;
+    showToast?: (message: string, type: 'success' | 'error' | 'warning' | 'info', duration?: number) => void;
 }
 
 export function useCanvasMouseEvents(params: UseCanvasMouseEventsParams) {
@@ -54,9 +55,87 @@ export function useCanvasMouseEvents(params: UseCanvasMouseEventsParams) {
         setSelectedConnection,
         setQuickCreateMenu,
         clearConnecting,
-        clearBoxSelect
+        clearBoxSelect,
+        showToast
     } = params;
 
+    const isBoxSelectingRef = useRef(isBoxSelecting);
+    const boxSelectStartRef = useRef(boxSelectStart);
+
+    useEffect(() => {
+        isBoxSelectingRef.current = isBoxSelecting;
+        boxSelectStartRef.current = boxSelectStart;
+    }, [isBoxSelecting, boxSelectStart]);
+
+    useEffect(() => {
+        if (!isBoxSelecting) return;
+
+        const handleGlobalMouseMove = (e: MouseEvent) => {
+            if (!isBoxSelectingRef.current || !boxSelectStartRef.current) return;
+
+            const rect = canvasRef.current?.getBoundingClientRect();
+            if (!rect) return;
+
+            const canvasX = (e.clientX - rect.left - canvasOffset.x) / canvasScale;
+            const canvasY = (e.clientY - rect.top - canvasOffset.y) / canvasScale;
+            setBoxSelectEnd({ x: canvasX, y: canvasY });
+        };
+
+        const handleGlobalMouseUp = (e: MouseEvent) => {
+            if (!isBoxSelectingRef.current || !boxSelectStartRef.current || !boxSelectEnd) return;
+
+            const rect = canvasRef.current?.getBoundingClientRect();
+            if (!rect) {
+                clearBoxSelect();
+                return;
+            }
+
+            const minX = Math.min(boxSelectStartRef.current.x, boxSelectEnd.x);
+            const maxX = Math.max(boxSelectStartRef.current.x, boxSelectEnd.x);
+            const minY = Math.min(boxSelectStartRef.current.y, boxSelectEnd.y);
+            const maxY = Math.max(boxSelectStartRef.current.y, boxSelectEnd.y);
+
+            const selectedInBox = nodes
+                .filter((node: BehaviorTreeNode) => {
+                    if (node.id === ROOT_NODE_ID) return false;
+
+                    const nodeElement = canvasRef.current?.querySelector(`[data-node-id="${node.id}"]`);
+                    if (!nodeElement) {
+                        return node.position.x >= minX && node.position.x <= maxX &&
+                               node.position.y >= minY && node.position.y <= maxY;
+                    }
+
+                    const nodeRect = nodeElement.getBoundingClientRect();
+                    const canvasRect = canvasRef.current!.getBoundingClientRect();
+
+                    const nodeLeft = (nodeRect.left - canvasRect.left - canvasOffset.x) / canvasScale;
+                    const nodeRight = (nodeRect.right - canvasRect.left - canvasOffset.x) / canvasScale;
+                    const nodeTop = (nodeRect.top - canvasRect.top - canvasOffset.y) / canvasScale;
+                    const nodeBottom = (nodeRect.bottom - canvasRect.top - canvasOffset.y) / canvasScale;
+
+                    return nodeRight > minX && nodeLeft < maxX && nodeBottom > minY && nodeTop < maxY;
+                })
+                .map((node: BehaviorTreeNode) => node.id);
+
+            if (e.ctrlKey || e.metaKey) {
+                const newSet = new Set([...selectedNodeIds, ...selectedInBox]);
+                setSelectedNodeIds(Array.from(newSet));
+            } else {
+                setSelectedNodeIds(selectedInBox);
+            }
+
+            clearBoxSelect();
+        };
+
+        document.addEventListener('mousemove', handleGlobalMouseMove);
+        document.addEventListener('mouseup', handleGlobalMouseUp);
+
+        return () => {
+            document.removeEventListener('mousemove', handleGlobalMouseMove);
+            document.removeEventListener('mouseup', handleGlobalMouseUp);
+        };
+    }, [isBoxSelecting, boxSelectStart, boxSelectEnd, nodes, selectedNodeIds, canvasRef, canvasOffset, canvasScale, setBoxSelectEnd, setSelectedNodeIds, clearBoxSelect]);
+
     const handleCanvasMouseMove = (e: React.MouseEvent) => {
         if (connectingFrom && canvasRef.current && !quickCreateMenu.visible) {
             const rect = canvasRef.current.getBoundingClientRect();
@@ -67,15 +146,6 @@ export function useCanvasMouseEvents(params: UseCanvasMouseEventsParams) {
                 y: canvasY
             });
         }
-
-        if (isBoxSelecting && boxSelectStart) {
-            const rect = canvasRef.current?.getBoundingClientRect();
-            if (!rect) return;
-
-            const canvasX = (e.clientX - rect.left - canvasOffset.x) / canvasScale;
-            const canvasY = (e.clientY - rect.top - canvasOffset.y) / canvasScale;
-            setBoxSelectEnd({ x: canvasX, y: canvasY });
-        }
     };
 
     const handleCanvasMouseUp = (e: React.MouseEvent) => {
@@ -84,6 +154,18 @@ export function useCanvasMouseEvents(params: UseCanvasMouseEventsParams) {
         }
 
         if (connectingFrom && connectingToPos) {
+            const sourceNode = nodes.find(n => n.id === connectingFrom);
+            if (sourceNode && !sourceNode.canAddChild()) {
+                const maxChildren = sourceNode.template.maxChildren ?? Infinity;
+                showToast?.(
+                    `节点"${sourceNode.template.displayName}"已达到最大子节点数 ${maxChildren}`,
+                    'warning'
+                );
+                clearConnecting();
+                setConnectingToPos(null);
+                return;
+            }
+
             setQuickCreateMenu({
                 visible: true,
                 position: {
@@ -100,47 +182,21 @@ export function useCanvasMouseEvents(params: UseCanvasMouseEventsParams) {
         }
 
         clearConnecting();
-
-        if (isBoxSelecting && boxSelectStart && boxSelectEnd) {
-            const minX = Math.min(boxSelectStart.x, boxSelectEnd.x);
-            const maxX = Math.max(boxSelectStart.x, boxSelectEnd.x);
-            const minY = Math.min(boxSelectStart.y, boxSelectEnd.y);
-            const maxY = Math.max(boxSelectStart.y, boxSelectEnd.y);
-
-            const selectedInBox = nodes
-                .filter((node: BehaviorTreeNode) => {
-                    if (node.id === ROOT_NODE_ID) return false;
-
-                    const nodeElement = canvasRef.current?.querySelector(`[data-node-id="${node.id}"]`);
-                    if (!nodeElement) {
-                        return node.position.x >= minX && node.position.x <= maxX &&
-                               node.position.y >= minY && node.position.y <= maxY;
-                    }
-
-                    const rect = nodeElement.getBoundingClientRect();
-                    const canvasRect = canvasRef.current!.getBoundingClientRect();
-
-                    const nodeLeft = (rect.left - canvasRect.left - canvasOffset.x) / canvasScale;
-                    const nodeRight = (rect.right - canvasRect.left - canvasOffset.x) / canvasScale;
-                    const nodeTop = (rect.top - canvasRect.top - canvasOffset.y) / canvasScale;
-                    const nodeBottom = (rect.bottom - canvasRect.top - canvasOffset.y) / canvasScale;
-
-                    return nodeRight > minX && nodeLeft < maxX && nodeBottom > minY && nodeTop < maxY;
-                })
-                .map((node: BehaviorTreeNode) => node.id);
-
-            if (e.ctrlKey || e.metaKey) {
-                const newSet = new Set([...selectedNodeIds, ...selectedInBox]);
-                setSelectedNodeIds(Array.from(newSet));
-            } else {
-                setSelectedNodeIds(selectedInBox);
-            }
-        }
-
-        clearBoxSelect();
     };
 
     const handleCanvasMouseDown = (e: React.MouseEvent) => {
+        if (quickCreateMenu.visible) {
+            setQuickCreateMenu({
+                visible: false,
+                position: { x: 0, y: 0 },
+                searchText: '',
+                selectedIndex: 0,
+                mode: 'create',
+                replaceNodeId: null
+            });
+            return;
+        }
+
         if (e.button === 0 && !e.altKey) {
             const rect = canvasRef.current?.getBoundingClientRect();
             if (!rect) return;

packages/editor-app/src/presentation/hooks/useExecutionController.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from 'react';
 import { ExecutionController, ExecutionMode } from '../../application/services/ExecutionController';
 import { BlackboardManager } from '../../application/services/BlackboardManager';
-import { BehaviorTreeNode, Connection } from '../../stores/behaviorTreeStore';
+import { BehaviorTreeNode, Connection, useBehaviorTreeStore } from '../../stores/behaviorTreeStore';
 import { ExecutionLog } from '../../utils/BehaviorTreeExecutor';
 import { BlackboardValue } from '../../domain/models/Blackboard';
 
@@ -17,6 +17,8 @@ interface UseExecutionControllerParams {
     onBlackboardUpdate: (variables: BlackboardVariables) => void;
     onInitialBlackboardSave: (variables: BlackboardVariables) => void;
     onExecutingChange: (isExecuting: boolean) => void;
+    onSaveNodesDataSnapshot: () => void;
+    onRestoreNodesData: () => void;
 }
 
 export function useExecutionController(params: UseExecutionControllerParams) {
@@ -28,7 +30,9 @@ export function useExecutionController(params: UseExecutionControllerParams) {
         connections,
         onBlackboardUpdate,
         onInitialBlackboardSave,
-        onExecutingChange
+        onExecutingChange,
+        onSaveNodesDataSnapshot,
+        onRestoreNodesData
     } = params;
 
     const [executionMode, setExecutionMode] = useState<ExecutionMode>('idle');
@@ -42,9 +46,13 @@ export function useExecutionController(params: UseExecutionControllerParams) {
             projectPath,
             onLogsUpdate: setExecutionLogs,
             onBlackboardUpdate,
-            onTickCountUpdate: setTickCount
+            onTickCountUpdate: setTickCount,
+            onExecutionStatusUpdate: (statuses, orders) => {
+                const store = useBehaviorTreeStore.getState();
+                store.updateNodeExecutionStatuses(statuses, orders);
+            }
         });
-    }, [rootNodeId, projectPath]);
+    }, [rootNodeId, projectPath, onBlackboardUpdate]);
 
     const blackboardManager = useMemo(() => new BlackboardManager(), []);
 
@@ -70,11 +78,18 @@ export function useExecutionController(params: UseExecutionControllerParams) {
         });
     }, [blackboardVariables, executionMode, controller]);
 
+    useEffect(() => {
+        if (executionMode === 'idle') return;
+
+        controller.updateNodes(nodes);
+    }, [nodes, executionMode, controller]);
+
     const handlePlay = async () => {
         try {
             blackboardManager.setInitialVariables(blackboardVariables);
             blackboardManager.setCurrentVariables(blackboardVariables);
             onInitialBlackboardSave(blackboardManager.getInitialVariables());
+            onSaveNodesDataSnapshot();
             onExecutingChange(true);
 
             setExecutionMode('running');
@@ -104,6 +119,8 @@ export function useExecutionController(params: UseExecutionControllerParams) {
 
             const restoredVars = blackboardManager.restoreInitialVariables();
             onBlackboardUpdate(restoredVars);
+            onRestoreNodesData();
+            useBehaviorTreeStore.getState().clearNodeExecutionStatuses();
             onExecutingChange(false);
         } catch (error) {
             console.error('Failed to stop execution:', error);

packages/editor-app/src/stores/behaviorTreeStore.ts

@@ -9,18 +9,29 @@ import { createRootNode, ROOT_NODE_ID } from '../domain/constants/RootNode';
 /**
  * 行为树 Store 状态接口
  */
+export type NodeExecutionStatus = 'idle' | 'running' | 'success' | 'failure';
+
+export interface NodeExecutionInfo {
+    status: NodeExecutionStatus;
+    executionOrder?: number;
+}
+
 interface BehaviorTreeState {
+    isOpen: boolean;
     nodes: Node[];
     connections: Connection[];
     blackboard: Blackboard;
     blackboardVariables: Record<string, BlackboardValue>;
     initialBlackboardVariables: Record<string, BlackboardValue>;
+    initialNodesData: Map<string, Record<string, unknown>>;
     selectedNodeIds: string[];
     draggingNodeId: string | null;
     dragStartPositions: Map<string, { x: number; y: number }>;
     isDraggingNode: boolean;
 
     isExecuting: boolean;
+    nodeExecutionStatuses: Map<string, NodeExecutionStatus>;
+    nodeExecutionOrders: Map<string, number>;
 
     canvasOffset: { x: number; y: number };
     canvasScale: number;
@@ -84,6 +95,11 @@ interface BehaviorTreeState {
     setBlackboardVariables: (variables: Record<string, BlackboardValue>) => void;
     setInitialBlackboardVariables: (variables: Record<string, BlackboardValue>) => void;
     setIsExecuting: (isExecuting: boolean) => void;
+    saveNodesDataSnapshot: () => void;
+    restoreNodesData: () => void;
+    setNodeExecutionStatus: (nodeId: string, status: NodeExecutionStatus) => void;
+    updateNodeExecutionStatuses: (statuses: Map<string, NodeExecutionStatus>, orders?: Map<string, number>) => void;
+    clearNodeExecutionStatuses: () => void;
 
     sortChildrenByPosition: () => void;
 
@@ -95,6 +111,7 @@ interface BehaviorTreeState {
         format: 'json' | 'binary'
     ) => string | Uint8Array;
 
+    setIsOpen: (isOpen: boolean) => void;
     reset: () => void;
 }
 
@@ -103,17 +120,21 @@ interface BehaviorTreeState {
  * 行为树 Store
  */
 export const useBehaviorTreeStore = create<BehaviorTreeState>((set, get) => ({
-    nodes: [createRootNode()],
+    isOpen: false,
+    nodes: [],
     connections: [],
     blackboard: new Blackboard(),
     blackboardVariables: {},
     initialBlackboardVariables: {},
+    initialNodesData: new Map(),
     selectedNodeIds: [],
     draggingNodeId: null,
     dragStartPositions: new Map(),
     isDraggingNode: false,
 
     isExecuting: false,
+    nodeExecutionStatuses: new Map(),
+    nodeExecutionOrders: new Map(),
 
     canvasOffset: { x: 0, y: 0 },
     canvasScale: 1,
@@ -272,6 +293,45 @@ export const useBehaviorTreeStore = create<BehaviorTreeState>((set, get) => ({
 
     setIsExecuting: (isExecuting: boolean) => set({ isExecuting }),
 
+    saveNodesDataSnapshot: () => {
+        const snapshot = new Map<string, Record<string, unknown>>();
+        get().nodes.forEach(node => {
+            snapshot.set(node.id, { ...node.data });
+        });
+        set({ initialNodesData: snapshot });
+    },
+
+    restoreNodesData: () => {
+        const snapshot = get().initialNodesData;
+        if (snapshot.size === 0) return;
+
+        const updatedNodes = get().nodes.map(node => {
+            const savedData = snapshot.get(node.id);
+            if (savedData) {
+                return new Node(node.id, node.template, savedData, node.position, Array.from(node.children));
+            }
+            return node;
+        });
+        set({ nodes: updatedNodes, initialNodesData: new Map() });
+    },
+
+    setNodeExecutionStatus: (nodeId: string, status: NodeExecutionStatus) => {
+        const newStatuses = new Map(get().nodeExecutionStatuses);
+        newStatuses.set(nodeId, status);
+        set({ nodeExecutionStatuses: newStatuses });
+    },
+
+    updateNodeExecutionStatuses: (statuses: Map<string, NodeExecutionStatus>, orders?: Map<string, number>) => {
+        set({
+            nodeExecutionStatuses: new Map(statuses),
+            nodeExecutionOrders: orders ? new Map(orders) : new Map()
+        });
+    },
+
+    clearNodeExecutionStatuses: () => {
+        set({ nodeExecutionStatuses: new Map(), nodeExecutionOrders: new Map() });
+    },
+
     sortChildrenByPosition: () => set((state: BehaviorTreeState) => {
         const nodeMap = new Map<string, Node>();
         state.nodes.forEach((node) => nodeMap.set(node.id, node));
@@ -353,6 +413,7 @@ export const useBehaviorTreeStore = create<BehaviorTreeState>((set, get) => ({
         const loadedBlackboard = Blackboard.fromObject(blackboardData);
 
         set({
+            isOpen: true,
             nodes: loadedNodes,
             connections: loadedConnections,
             blackboard: loadedBlackboard,
@@ -391,8 +452,11 @@ export const useBehaviorTreeStore = create<BehaviorTreeState>((set, get) => ({
         });
     },
 
+    setIsOpen: (isOpen: boolean) => set({ isOpen }),
+
     reset: () => set({
-        nodes: [createRootNode()],
+        isOpen: false,
+        nodes: [],
         connections: [],
         blackboard: new Blackboard(),
         blackboardVariables: {},

packages/editor-app/src/styles/AssetBrowser.css

@@ -253,6 +253,14 @@
   color: #dcb67a;
 }
 
+.asset-info {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .asset-name {
   font-size: var(--font-size-sm);
   color: #cccccc;

packages/editor-app/src/styles/BehaviorTreeNode.css

@@ -18,16 +18,30 @@
   animation: gentle-glow 2s ease-in-out infinite;
 }
 
+.bt-node.running::before {
+  content: '';
+  position: absolute;
+  inset: -6px;
+  border: 2px solid #ffa726;
+  border-radius: 6px;
+  pointer-events: none;
+  animation: pulse-border 1.5s ease-in-out infinite;
+  z-index: -1;
+}
+
 .bt-node.success {
   box-shadow: 0 0 0 3px #4caf50, 0 4px 16px rgba(76, 175, 80, 0.6);
+  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, transparent 100%);
 }
 
 .bt-node.failure {
   box-shadow: 0 0 0 3px #f44336, 0 4px 16px rgba(244, 67, 54, 0.6);
+  background: linear-gradient(135deg, rgba(244, 67, 54, 0.1) 0%, transparent 100%);
 }
 
 .bt-node.executed {
-  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(135deg, rgba(76, 175, 80, 0.05) 0%, transparent 100%);
 }
 
 .bt-node.root {
@@ -219,6 +233,35 @@
   }
 }
 
+@keyframes pulse-border {
+  0%, 100% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.02);
+  }
+}
+
+@keyframes success-flash {
+  0% {
+    box-shadow: 0 0 0 8px rgba(76, 175, 80, 0.8), 0 6px 24px rgba(76, 175, 80, 0.8);
+  }
+  100% {
+    box-shadow: 0 0 0 3px #4caf50, 0 4px 16px rgba(76, 175, 80, 0.6);
+  }
+}
+
+@keyframes failure-flash {
+  0% {
+    box-shadow: 0 0 0 8px rgba(244, 67, 54, 0.8), 0 6px 24px rgba(244, 67, 54, 0.8);
+  }
+  100% {
+    box-shadow: 0 0 0 3px #f44336, 0 4px 16px rgba(244, 67, 54, 0.6);
+  }
+}
+
 .bt-node-empty-warning-tooltip {
   display: none;
   position: absolute;

packages/editor-app/src/styles/EntityInspector.css

@@ -61,7 +61,10 @@
 }
 
 .inspector-section {
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: 20px;
+  padding: 12px;
+  background-color: rgba(255, 255, 255, 0.02);
+  border-radius: 6px;
 }
 
 .inspector-section:last-child {
@@ -297,3 +300,151 @@
   font-size: var(--font-size-sm);
   font-style: italic;
 }
+
+.entity-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.section-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: -4px -4px 12px -4px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.property-field {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 8px 6px;
+  font-size: 12px;
+  gap: 16px;
+  background-color: rgba(255, 255, 255, 0.01);
+  border-radius: 4px;
+  margin-bottom: 4px;
+}
+
+.property-field:last-child {
+  margin-bottom: 0;
+}
+
+.property-field:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.property-label {
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  flex-shrink: 0;
+  min-width: 80px;
+  font-size: 12px;
+}
+
+.property-value-text {
+  color: var(--color-text-primary);
+  text-align: right;
+  word-break: break-word;
+  font-size: 12px;
+  flex: 1;
+}
+
+.component-remove-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--color-text-tertiary);
+  padding: 4px;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: all 0.15s;
+  flex-shrink: 0;
+  opacity: 0;
+  margin-left: auto;
+}
+
+.component-header:hover .component-remove-btn {
+  opacity: 1;
+}
+
+.component-remove-btn:hover {
+  background-color: var(--color-error);
+  color: white;
+}
+
+.empty-inspector {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+  height: 100%;
+}
+
+.child-node-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background-color: rgba(255, 255, 255, 0.03);
+  border-radius: 4px;
+  font-size: 12px;
+  transition: background-color 0.15s;
+  cursor: default;
+}
+
+.child-node-item:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.child-node-index {
+  color: #666;
+  min-width: 20px;
+  font-size: 12px;
+}
+
+.child-node-name {
+  color: #ccc;
+  flex: 1;
+  font-size: 12px;
+}
+
+.file-preview-content {
+  background: #1e1e1e;
+  border: 1px solid #3e3e3e;
+  border-radius: 4px;
+  padding: 12px;
+  max-height: 400px;
+  overflow-y: auto;
+  font-family: Consolas, Monaco, monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  color: #d4d4d4;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.file-preview-content::-webkit-scrollbar {
+  width: 10px;
+}
+
+.file-preview-content::-webkit-scrollbar-track {
+  background: #1e1e1e;
+}
+
+.file-preview-content::-webkit-scrollbar-thumb {
+  background: #424242;
+  border-radius: 5px;
+}
+
+.file-preview-content::-webkit-scrollbar-thumb:hover {
+  background: #4e4e4e;
+}

packages/editor-app/src/styles/FileTree.css

@@ -1,5 +1,35 @@
+.file-tree-toolbar {
+  display: flex;
+  gap: 4px;
+  padding: 4px 8px;
+  background: #252526;
+  border-bottom: 1px solid #3e3e3e;
+}
+
+.file-tree-toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 8px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  color: #cccccc;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.file-tree-toolbar-btn:hover {
+  background: #2a2d2e;
+  border-color: #3e3e3e;
+}
+
+.file-tree-toolbar-btn:active {
+  background: #37373d;
+}
+
 .file-tree {
-  height: 100%;
+  height: calc(100% - 32px);
   overflow-y: auto;
   overflow-x: hidden;
   background: #1e1e1e;
@@ -76,3 +106,15 @@
 .tree-children {
   /* Children are indented via inline style */
 }
+
+.tree-rename-input {
+  flex: 1;
+  background: #3c3c3c;
+  border: 1px solid #007acc;
+  border-radius: 2px;
+  padding: 2px 4px;
+  color: #cccccc;
+  font-size: var(--font-size-base);
+  font-family: inherit;
+  outline: none;
+}

packages/editor-app/src/styles/PromptDialog.css

@@ -0,0 +1,153 @@
+.prompt-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.prompt-dialog {
+  background: var(--bg-secondary, #2a2a2a);
+  border: 1px solid var(--border-color, #404040);
+  border-radius: 8px;
+  min-width: 400px;
+  max-width: 600px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  animation: slideIn 0.2s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.prompt-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-color, #404040);
+}
+
+.prompt-dialog-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary, #e0e0e0);
+}
+
+.prompt-dialog-header .close-btn {
+  background: none;
+  border: none;
+  color: var(--text-secondary, #999);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.prompt-dialog-header .close-btn:hover {
+  background: var(--bg-hover, #3a3a3a);
+  color: var(--text-primary, #fff);
+}
+
+.prompt-dialog-content {
+  padding: 20px;
+  color: var(--text-primary, #e0e0e0);
+  line-height: 1.6;
+}
+
+.prompt-dialog-content p {
+  margin: 0 0 12px 0;
+}
+
+.prompt-dialog-input {
+  width: 100%;
+  padding: 8px 12px;
+  background: #1e1e1e;
+  border: 1px solid var(--border-color, #404040);
+  border-radius: 4px;
+  color: var(--text-primary, #e0e0e0);
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.prompt-dialog-input:focus {
+  border-color: #4a9eff;
+}
+
+.prompt-dialog-input::placeholder {
+  color: var(--text-tertiary, #666);
+}
+
+.prompt-dialog-footer {
+  padding: 12px 20px;
+  border-top: 1px solid var(--border-color, #404040);
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.prompt-dialog-btn {
+  padding: 8px 24px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.prompt-dialog-btn.cancel {
+  background: var(--bg-hover, #3a3a3a);
+  color: var(--text-primary, #e0e0e0);
+}
+
+.prompt-dialog-btn.cancel:hover {
+  background: var(--bg-active, #4a4a4a);
+}
+
+.prompt-dialog-btn.confirm {
+  background: #4a9eff;
+  color: white;
+}
+
+.prompt-dialog-btn.confirm:hover {
+  background: #6bb0ff;
+}
+
+.prompt-dialog-btn.confirm:disabled {
+  background: #3a3a3a;
+  color: #666;
+  cursor: not-allowed;
+}
+
+.prompt-dialog-btn:active:not(:disabled) {
+  transform: scale(0.98);
+}

packages/editor-app/src/utils/BehaviorTreeExecutor.ts

@@ -16,6 +16,7 @@ export interface ExecutionStatus {
     nodeId: string;
     status: 'running' | 'success' | 'failure' | 'idle';
     message?: string;
+    executionOrder?: number;
 }
 
 export interface ExecutionLog {
@@ -47,9 +48,12 @@ export class BehaviorTreeExecutor {
     private isPaused = false;
     private executionLogs: ExecutionLog[] = [];
     private lastStatuses: Map<string, 'running' | 'success' | 'failure' | 'idle'> = new Map();
+    private persistentStatuses: Map<string, 'running' | 'success' | 'failure' | 'idle'> = new Map();
+    private executionOrders: Map<string, number> = new Map();
     private tickCount = 0;
     private nodeIdMap: Map<string, string> = new Map();
     private blackboardKeys: string[] = [];
+    private rootNodeId: string = '';
 
     private assetManager: BehaviorTreeAssetManager;
     private executionSystem: BehaviorTreeExecutionSystem;
@@ -84,6 +88,7 @@ export class BehaviorTreeExecutor {
         this.callback = callback;
 
         this.treeData = this.convertToTreeData(nodes, rootNodeId, blackboard, connections);
+        this.rootNodeId = this.treeData.rootNodeId;
 
         this.assetManager.loadAsset(this.treeData);
 
@@ -249,6 +254,7 @@ export class BehaviorTreeExecutor {
         this.isPaused = false;
         this.executionLogs = [];
         this.lastStatuses.clear();
+        this.persistentStatuses.clear();
         this.tickCount = 0;
 
         this.runtime.resetAllStates();
@@ -313,38 +319,102 @@ export class BehaviorTreeExecutor {
     private collectExecutionStatus(): void {
         if (!this.callback || !this.runtime || !this.treeData) return;
 
+        const rootState = this.runtime.getNodeState(this.rootNodeId);
+        let rootCurrentStatus: 'running' | 'success' | 'failure' | 'idle' = 'idle';
+
+        if (rootState) {
+            switch (rootState.status) {
+                case TaskStatus.Running:
+                    rootCurrentStatus = 'running';
+                    break;
+                case TaskStatus.Success:
+                    rootCurrentStatus = 'success';
+                    break;
+                case TaskStatus.Failure:
+                    rootCurrentStatus = 'failure';
+                    break;
+                default:
+                    rootCurrentStatus = 'idle';
+            }
+        }
+
+        const rootLastStatus = this.lastStatuses.get(this.rootNodeId);
+
+        if (rootLastStatus &&
+            (rootLastStatus === 'success' || rootLastStatus === 'failure') &&
+            rootCurrentStatus === 'running') {
+            this.persistentStatuses.clear();
+            this.executionOrders.clear();
+        }
+
         const statuses: ExecutionStatus[] = [];
 
         for (const [nodeId, nodeData] of this.treeData.nodes.entries()) {
             const state = this.runtime.getNodeState(nodeId);
 
-            let status: 'running' | 'success' | 'failure' | 'idle' = 'idle';
+            let currentStatus: 'running' | 'success' | 'failure' | 'idle' = 'idle';
 
             if (state) {
                 switch (state.status) {
                     case TaskStatus.Success:
-                        status = 'success';
+                        currentStatus = 'success';
                         break;
                     case TaskStatus.Failure:
-                        status = 'failure';
+                        currentStatus = 'failure';
                         break;
                     case TaskStatus.Running:
-                        status = 'running';
+                        currentStatus = 'running';
                         break;
                     default:
-                        status = 'idle';
+                        currentStatus = 'idle';
                 }
             }
 
+            const persistentStatus = this.persistentStatuses.get(nodeId) || 'idle';
             const lastStatus = this.lastStatuses.get(nodeId);
-            if (lastStatus !== status) {
-                this.onNodeStatusChanged(nodeId, nodeData.name, lastStatus || 'idle', status);
-                this.lastStatuses.set(nodeId, status);
+
+            let displayStatus: 'running' | 'success' | 'failure' | 'idle' = currentStatus;
+
+            if (currentStatus === 'running') {
+                displayStatus = 'running';
+                this.persistentStatuses.set(nodeId, 'running');
+            } else if (currentStatus === 'success') {
+                displayStatus = 'success';
+                this.persistentStatuses.set(nodeId, 'success');
+            } else if (currentStatus === 'failure') {
+                displayStatus = 'failure';
+                this.persistentStatuses.set(nodeId, 'failure');
+            } else if (currentStatus === 'idle') {
+                if (persistentStatus !== 'idle') {
+                    displayStatus = persistentStatus;
+                } else if (this.executionOrders.has(nodeId)) {
+                    displayStatus = 'success';
+                    this.persistentStatuses.set(nodeId, 'success');
+                } else {
+                    displayStatus = 'idle';
+                }
             }
 
+            // 检测状态变化
+            const hasStateChanged = lastStatus !== currentStatus;
+
+            // 从运行时状态读取执行顺序
+            if (state?.executionOrder !== undefined && !this.executionOrders.has(nodeId)) {
+                this.executionOrders.set(nodeId, state.executionOrder);
+                console.log(`[ExecutionOrder READ] ${nodeData.name} | ID: ${nodeId} | Order: ${state.executionOrder}`);
+            }
+
+            // 记录状态变化日志
+            if (hasStateChanged && currentStatus !== 'idle') {
+                this.onNodeStatusChanged(nodeId, nodeData.name, lastStatus || 'idle', currentStatus);
+            }
+
+            this.lastStatuses.set(nodeId, currentStatus);
+
             statuses.push({
                 nodeId,
-                status
+                status: displayStatus,
+                executionOrder: this.executionOrders.get(nodeId)
             });
         }
 
@@ -428,6 +498,7 @@ export class BehaviorTreeExecutor {
         this.stop();
         this.nodeIdMap.clear();
         this.lastStatuses.clear();
+        this.persistentStatuses.clear();
         this.blackboardKeys = [];
 
         if (this.entity) {