refactor(editor): 优化布局管理和行为树文件处理

packages/editor-app/src/App.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { Core, Scene } from '@esengine/ecs-framework';
+import { Core, Scene, createLogger } 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, FileActionRegistry, PanelDescriptor } from '@esengine/editor-core';
 import { GlobalBlackboardService } from '@esengine/behavior-tree';
@@ -40,9 +40,10 @@ localeService.registerTranslations('en', en);
 localeService.registerTranslations('zh', zh);
 Core.services.registerInstance(LocaleService, localeService);
 
-// 注册全局黑板服务
 Core.services.registerSingleton(GlobalBlackboardService);
 
+const logger = createLogger('App');
+
 function App() {
     const initRef = useRef(false);
     const pluginLoaderRef = useRef<PluginLoader>(new PluginLoader());
@@ -77,8 +78,11 @@ function App() {
         confirmText: string;
         cancelText: string;
         onConfirm: () => void;
-    } | null>(null);
+            } | null>(null);
     const [activeDynamicPanels, setActiveDynamicPanels] = useState<string[]>([]);
+    const [activePanelId, setActivePanelId] = useState<string | undefined>(undefined);
+    const [dynamicPanelTitles, setDynamicPanelTitles] = useState<Map<string, string>>(new Map());
+    const [isEditorFullscreen, setIsEditorFullscreen] = useState(false);
 
     useEffect(() => {
         // 禁用默认右键菜单
@@ -234,14 +238,34 @@ function App() {
         if (!messageHub) return;
 
         const unsubscribe = messageHub.subscribe('dynamic-panel:open', (data: any) => {
-            const { panelId } = data;
+            const { panelId, title } = data;
-            console.log('[App] Opening dynamic panel:', panelId);
+            logger.info('Opening dynamic panel:', panelId, 'with title:', title);
-            setActiveDynamicPanels(prev => {
+            setActiveDynamicPanels((prev) => {
-                if (prev.includes(panelId)) {
+                const newPanels = prev.includes(panelId) ? prev : [...prev, panelId];
-                    return prev;
+                return newPanels;
-                }
-                return [...prev, panelId];
             });
+            setActivePanelId(panelId);
+
+            // 更新动态面板标题
+            if (title) {
+                setDynamicPanelTitles((prev) => {
+                    const newTitles = new Map(prev);
+                    newTitles.set(panelId, title);
+                    return newTitles;
+                });
+            }
+        });
+
+        return () => unsubscribe?.();
+    }, [messageHub]);
+
+    useEffect(() => {
+        if (!messageHub) return;
+
+        const unsubscribe = messageHub.subscribe('editor:fullscreen', (data: any) => {
+            const { fullscreen } = data;
+            logger.info('Editor fullscreen state changed:', fullscreen);
+            setIsEditorFullscreen(fullscreen);
         });
 
         return () => unsubscribe?.();
@@ -632,16 +656,19 @@ function App() {
 
             // 添加激活的动态面板
             const dynamicPanels: FlexDockPanel[] = activeDynamicPanels
-                .filter(panelId => {
+                .filter((panelId) => {
                     const panelDesc = uiRegistry.getPanel(panelId);
                     return panelDesc && panelDesc.component;
                 })
-                .map(panelId => {
+                .map((panelId) => {
                     const panelDesc = uiRegistry.getPanel(panelId)!;
                     const Component = panelDesc.component;
+                    // 优先使用动态标题，否则使用默认标题
+                    const customTitle = dynamicPanelTitles.get(panelId);
+                    const defaultTitle = (panelDesc as any).titleZh && locale === 'zh' ? (panelDesc as any).titleZh : panelDesc.title;
                     return {
                         id: panelDesc.id,
-                        title: (panelDesc as any).titleZh && locale === 'zh' ? (panelDesc as any).titleZh : panelDesc.title,
+                        title: customTitle || defaultTitle,
                         content: <Component projectPath={currentProjectPath} />,
                         closable: panelDesc.closable ?? true
                     };
@@ -651,7 +678,7 @@ function App() {
             console.log('[App] Loading dynamic panels:', dynamicPanels);
             setPanels([...corePanels, ...pluginPanels, ...dynamicPanels]);
         }
-    }, [projectLoaded, entityStore, messageHub, logService, uiRegistry, pluginManager, locale, currentProjectPath, t, pluginUpdateTrigger, isProfilerMode, handleOpenSceneByPath, activeDynamicPanels]);
+    }, [projectLoaded, entityStore, messageHub, logService, uiRegistry, pluginManager, locale, currentProjectPath, t, pluginUpdateTrigger, isProfilerMode, handleOpenSceneByPath, activeDynamicPanels, dynamicPanelTitles]);
 
 
     if (!initialized) {
@@ -708,42 +735,44 @@ function App() {
 
     return (
         <div className="editor-container">
-            <div className={`editor-header ${isRemoteConnected ? 'remote-connected' : ''}`}>
+            {!isEditorFullscreen && (
-                <MenuBar
+                <div className={`editor-header ${isRemoteConnected ? 'remote-connected' : ''}`}>
-                    locale={locale}
+                    <MenuBar
-                    uiRegistry={uiRegistry || undefined}
+                        locale={locale}
-                    messageHub={messageHub || undefined}
+                        uiRegistry={uiRegistry || undefined}
-                    pluginManager={pluginManager || undefined}
+                        messageHub={messageHub || undefined}
-                    onNewScene={handleNewScene}
+                        pluginManager={pluginManager || undefined}
-                    onOpenScene={handleOpenScene}
+                        onNewScene={handleNewScene}
-                    onSaveScene={handleSaveScene}
+                        onOpenScene={handleOpenScene}
-                    onSaveSceneAs={handleSaveSceneAs}
+                        onSaveScene={handleSaveScene}
-                    onOpenProject={handleOpenProject}
+                        onSaveSceneAs={handleSaveSceneAs}
-                    onCloseProject={handleCloseProject}
+                        onOpenProject={handleOpenProject}
-                    onExit={handleExit}
+                        onCloseProject={handleCloseProject}
-                    onOpenPluginManager={() => setShowPluginManager(true)}
+                        onExit={handleExit}
-                    onOpenProfiler={() => setShowProfiler(true)}
+                        onOpenPluginManager={() => setShowPluginManager(true)}
-                    onOpenPortManager={() => setShowPortManager(true)}
+                        onOpenProfiler={() => setShowProfiler(true)}
-                    onOpenSettings={() => setShowSettings(true)}
+                        onOpenPortManager={() => setShowPortManager(true)}
-                    onToggleDevtools={handleToggleDevtools}
+                        onOpenSettings={() => setShowSettings(true)}
-                    onOpenAbout={handleOpenAbout}
+                        onToggleDevtools={handleToggleDevtools}
-                    onCreatePlugin={handleCreatePlugin}
+                        onOpenAbout={handleOpenAbout}
-                />
+                        onCreatePlugin={handleCreatePlugin}
-                <div className="header-right">
+                    />
-                    <button onClick={handleLocaleChange} className="toolbar-btn locale-btn" title={locale === 'en' ? '切换到中文' : 'Switch to English'}>
+                    <div className="header-right">
-                        <Globe size={14} />
+                        <button onClick={handleLocaleChange} className="toolbar-btn locale-btn" title={locale === 'en' ? '切换到中文' : 'Switch to English'}>
-                    </button>
+                            <Globe size={14} />
-                    <span className="status">{status}</span>
+                        </button>
+                        <span className="status">{status}</span>
+                    </div>
                 </div>
-            </div>
+            )}
 
             <div className="editor-content">
                 <FlexLayoutDockContainer
                     panels={panels}
+                    activePanelId={activePanelId}
                     onPanelClose={(panelId) => {
-                        console.log('[App] Panel closed:', panelId);
+                        logger.info('Panel closed:', panelId);
-                        // 从激活的动态面板列表中移除
+                        setActiveDynamicPanels((prev) => prev.filter((id) => id !== panelId));
-                        setActiveDynamicPanels(prev => prev.filter(id => id !== panelId));
                     }}
                 />
             </div>

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

@@ -1,9 +1,9 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
-import { Folder, File, FileCode, FileJson, FileImage, FileText, FolderOpen, Copy, Trash2, Edit3, LayoutGrid, List } from 'lucide-react';
+import { Folder, File, FileCode, FileJson, FileImage, FileText, FolderOpen, Copy, Trash2, Edit3, LayoutGrid, List, ChevronsUp } from 'lucide-react';
 import { Core } from '@esengine/ecs-framework';
 import { MessageHub, FileActionRegistry } from '@esengine/editor-core';
 import { TauriAPI, DirectoryEntry } from '../api/tauri';
-import { FileTree } from './FileTree';
+import { FileTree, FileTreeHandle } from './FileTree';
 import { ResizablePanel } from './ResizablePanel';
 import { ContextMenu, ContextMenuItem } from './ContextMenu';
 import '../styles/AssetBrowser.css';
@@ -26,6 +26,8 @@ interface AssetBrowserProps {
 export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserProps) {
     const messageHub = Core.services.resolve(MessageHub);
     const fileActionRegistry = Core.services.resolve(FileActionRegistry);
+    const detailViewFileTreeRef = useRef<FileTreeHandle>(null);
+    const treeOnlyViewFileTreeRef = useRef<FileTreeHandle>(null);
     const [currentPath, setCurrentPath] = useState<string | null>(null);
     const [selectedPath, setSelectedPath] = useState<string | null>(null);
     const [assets, setAssets] = useState<AssetItem[]>([]);
@@ -369,6 +371,11 @@ export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserP
 
     const getFileIcon = (asset: AssetItem) => {
         if (asset.type === 'folder') {
+            // 检查是否为框架专用文件夹
+            const folderName = asset.name.toLowerCase();
+            if (folderName === 'plugins' || folderName === '.ecs') {
+                return <Folder className="asset-icon system-folder" style={{ color: '#42a5f5' }} size={20} />;
+            }
             return <Folder className="asset-icon" style={{ color: '#ffa726' }} size={20} />;
         }
 
@@ -421,56 +428,60 @@ export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserP
                     background: '#252526',
                     alignItems: 'center'
                 }}>
-                    <div style={{ display: 'flex', gap: '4px' }}>
+                    <div className="view-mode-buttons">
                         <button
+                            className={`view-mode-btn ${showDetailView ? 'active' : ''}`}
                             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} />
-                            详细视图
+                            <span className="view-mode-text">详细视图</span>
                         </button>
                         <button
+                            className={`view-mode-btn ${!showDetailView ? 'active' : ''}`}
                             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} />
-                            树形图
+                            <span className="view-mode-text">树形图</span>
                         </button>
                     </div>
+                    <button
+                        onClick={() => {
+                            if (showDetailView) {
+                                detailViewFileTreeRef.current?.collapseAll();
+                            } else {
+                                treeOnlyViewFileTreeRef.current?.collapseAll();
+                            }
+                        }}
+                        style={{
+                            padding: '6px 8px',
+                            background: 'transparent',
+                            border: '1px solid #3e3e3e',
+                            color: '#cccccc',
+                            cursor: 'pointer',
+                            transition: 'all 0.2s ease',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            borderRadius: '3px'
+                        }}
+                        onMouseEnter={(e) => {
+                            e.currentTarget.style.background = '#2a2d2e';
+                        }}
+                        onMouseLeave={(e) => {
+                            e.currentTarget.style.background = 'transparent';
+                        }}
+                        title="收起所有文件夹"
+                    >
+                        <ChevronsUp size={14} />
+                    </button>
                     <input
                         type="text"
                         className="asset-search"
@@ -498,6 +509,7 @@ export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserP
                         leftOrTop={
                             <div className="asset-browser-tree">
                                 <FileTree
+                                    ref={detailViewFileTreeRef}
                                     rootPath={projectPath}
                                     onSelectFile={handleFolderSelect}
                                     selectedPath={currentPath}
@@ -575,6 +587,7 @@ export function AssetBrowser({ projectPath, locale, onOpenScene }: AssetBrowserP
                 ) : (
                     <div className="asset-browser-tree-only">
                         <FileTree
+                            ref={treeOnlyViewFileTreeRef}
                             rootPath={projectPath}
                             onSelectFile={handleFolderSelect}
                             selectedPath={currentPath}

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, forwardRef, useImperativeHandle } from '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';
@@ -28,7 +28,11 @@ interface FileTreeProps {
   showFiles?: boolean;
 }
 
-export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, searchQuery, showFiles = true }: FileTreeProps) {
+export interface FileTreeHandle {
+  collapseAll: () => void;
+}
+
+export const FileTree = forwardRef<FileTreeHandle, FileTreeProps>(({ rootPath, onSelectFile, selectedPath, messageHub, searchQuery, showFiles = true }, ref) => {
     const [tree, setTree] = useState<TreeNode[]>([]);
     const [loading, setLoading] = useState(false);
     const [internalSelectedPath, setInternalSelectedPath] = useState<string | null>(null);
@@ -48,6 +52,26 @@ export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, sea
     const [filteredTree, setFilteredTree] = useState<TreeNode[]>([]);
     const fileActionRegistry = Core.services.resolve(FileActionRegistry);
 
+    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);
+    };
+
+    useImperativeHandle(ref, () => ({
+        collapseAll
+    }));
+
     useEffect(() => {
         if (rootPath) {
             loadRootDirectory(rootPath);
@@ -214,8 +238,72 @@ export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, sea
     };
 
     const refreshTree = async () => {
-        if (rootPath) {
+        if (!rootPath) return;
-            await loadRootDirectory(rootPath);
+
+        // 保存当前展开状态
+        const expandedPaths = new Set<string>();
+        const collectExpandedPaths = (nodes: TreeNode[]) => {
+            for (const node of nodes) {
+                if (node.type === 'folder' && node.expanded) {
+                    expandedPaths.add(node.path);
+                    if (node.children) {
+                        collectExpandedPaths(node.children);
+                    }
+                }
+            }
+        };
+        collectExpandedPaths(tree);
+
+        // 重新加载根目录，获取最新的文件结构
+        try {
+            const entries = await TauriAPI.listDirectory(rootPath);
+            const children = entriesToNodes(entries);
+
+            const rootName = rootPath.split(/[/\\]/).filter((p) => p).pop() || 'Project';
+            let rootNode: TreeNode = {
+                name: rootName,
+                path: rootPath,
+                type: 'folder',
+                children: children,
+                expanded: true,
+                loaded: true
+            };
+
+            // 恢复展开状态
+            if (expandedPaths.size > 0) {
+                const restoreExpandedState = async (node: TreeNode): Promise<TreeNode> => {
+                    if (node.type === 'folder' && expandedPaths.has(node.path)) {
+                        let children = node.children || [];
+                        if (!node.loaded && node.children) {
+                            children = await loadChildren(node);
+                        }
+                        const restoredChildren = await Promise.all(
+                            children.map(child => restoreExpandedState(child))
+                        );
+                        return {
+                            ...node,
+                            expanded: true,
+                            loaded: true,
+                            children: restoredChildren
+                        };
+                    } else if (node.type === 'folder' && node.children) {
+                        const restoredChildren = await Promise.all(
+                            node.children.map(child => restoreExpandedState(child))
+                        );
+                        return {
+                            ...node,
+                            children: restoredChildren
+                        };
+                    }
+                    return node;
+                };
+
+                rootNode = await restoreExpandedState(rootNode);
+            }
+
+            setTree([rootNode]);
+        } catch (error) {
+            console.error('Failed to refresh directory:', error);
         }
     };
 
@@ -252,22 +340,6 @@ export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, sea
         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);
@@ -570,7 +642,11 @@ export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, sea
                     </span>
                     <span className="tree-icon">
                         {node.type === 'folder' ? (
-                            <Folder size={16} style={{ color: '#ffa726' }} />
+                            node.name.toLowerCase() === 'plugins' || node.name.toLowerCase() === '.ecs' ? (
+                                <Folder size={16} className="system-folder-icon" style={{ color: '#42a5f5' }} />
+                            ) : (
+                                <Folder size={16} style={{ color: '#ffa726' }} />
+                            )
                         ) : (
                             <File size={16} style={{ color: '#90caf9' }} />
                         )}
@@ -615,22 +691,6 @@ export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, sea
 
     return (
         <>
-            <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) => {
@@ -688,4 +748,4 @@ export function FileTree({ rootPath, onSelectFile, selectedPath, messageHub, sea
             )}
         </>
     );
-}
+});

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

@@ -1,8 +1,143 @@
-import { useCallback, ReactNode, useMemo } from 'react';
+import { useCallback, ReactNode, useRef, useEffect, useState } from 'react';
-import { Layout, Model, TabNode, IJsonModel, Actions, IJsonTabSetNode, IJsonRowNode } from 'flexlayout-react';
+import { Layout, Model, TabNode, IJsonModel, Actions, IJsonTabSetNode, IJsonRowNode, Action, IJsonTabNode, DockLocation } from 'flexlayout-react';
 import 'flexlayout-react/style/light.css';
 import '../styles/FlexLayoutDock.css';
 
+/**
+ * 合并保存的布局和新的默认布局
+ * 保留用户的布局调整（大小、位置等），同时添加新面板并移除已关闭的面板
+ */
+function mergeLayouts(savedLayout: IJsonModel, defaultLayout: IJsonModel, currentPanels: FlexDockPanel[]): IJsonModel {
+    // 获取当前所有面板ID
+    const currentPanelIds = new Set(currentPanels.map(p => p.id));
+
+    // 收集保存布局中存在的面板ID
+    const savedPanelIds = new Set<string>();
+    const collectPanelIds = (node: any) => {
+        if (node.type === 'tab' && node.id) {
+            savedPanelIds.add(node.id);
+        }
+        if (node.children) {
+            node.children.forEach((child: any) => collectPanelIds(child));
+        }
+    };
+    collectPanelIds(savedLayout.layout);
+
+    // 同时收集borders中的面板ID
+    if (savedLayout.borders) {
+        savedLayout.borders.forEach((border: any) => {
+            if (border.children) {
+                collectPanelIds({ children: border.children });
+            }
+        });
+    }
+
+    // 找出新增的面板和已移除的面板
+    const newPanelIds = Array.from(currentPanelIds).filter(id => !savedPanelIds.has(id));
+    const removedPanelIds = Array.from(savedPanelIds).filter(id => !currentPanelIds.has(id));
+
+    // 克隆保存的布局
+    const mergedLayout = JSON.parse(JSON.stringify(savedLayout));
+
+    // 确保borders为空（不保留最小化状态）
+    if (mergedLayout.borders) {
+        mergedLayout.borders = mergedLayout.borders.map((border: any) => ({
+            ...border,
+            children: []
+        }));
+    }
+
+    // 第一步：移除已关闭的面板
+    if (removedPanelIds.length > 0) {
+        const removePanels = (node: any): boolean => {
+            if (!node.children) return false;
+
+            // 过滤掉已移除的tab
+            if (node.type === 'tabset' || node.type === 'row') {
+                const originalLength = node.children.length;
+                node.children = node.children.filter((child: any) => {
+                    if (child.type === 'tab') {
+                        return !removedPanelIds.includes(child.id);
+                    }
+                    return true;
+                });
+
+                // 如果有tab被移除，调整selected索引
+                if (node.type === 'tabset' && node.children.length < originalLength) {
+                    if (node.selected >= node.children.length) {
+                        node.selected = Math.max(0, node.children.length - 1);
+                    }
+                }
+
+                // 递归处理子节点
+                node.children.forEach((child: any) => removePanels(child));
+
+                return node.children.length < originalLength;
+            }
+
+            return false;
+        };
+        removePanels(mergedLayout.layout);
+    }
+
+    // 第二步：如果没有新面板，直接返回清理后的布局
+    if (newPanelIds.length === 0) {
+        return mergedLayout;
+    }
+
+    // 第三步：在默认布局中找到新面板的配置
+    const newPanelTabs: IJsonTabNode[] = [];
+    const findNewPanels = (node: any) => {
+        if (node.type === 'tab' && node.id && newPanelIds.includes(node.id)) {
+            newPanelTabs.push(node);
+        }
+        if (node.children) {
+            node.children.forEach((child: any) => findNewPanels(child));
+        }
+    };
+    findNewPanels(defaultLayout.layout);
+
+    // 第四步：将新面板添加到中心区域的第一个tabset
+    const addNewPanelsToCenter = (node: any): boolean => {
+        if (node.type === 'tabset') {
+            // 检查是否是中心区域的tabset（通过检查是否包含非hierarchy/asset/inspector/console面板）
+            const hasNonSidePanel = node.children?.some((child: any) => {
+                const id = child.id || '';
+                return !id.includes('hierarchy') &&
+                       !id.includes('asset') &&
+                       !id.includes('inspector') &&
+                       !id.includes('console');
+            });
+
+            if (hasNonSidePanel && node.children) {
+                // 添加新面板到这个tabset
+                node.children.push(...newPanelTabs);
+                // 选中最后添加的面板
+                node.selected = node.children.length - 1;
+                return true;
+            }
+        }
+
+        if (node.children) {
+            for (const child of node.children) {
+                if (addNewPanelsToCenter(child)) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    };
+
+    // 尝试添加新面板到中心区域
+    if (!addNewPanelsToCenter(mergedLayout.layout)) {
+        // 如果没有找到合适的tabset，使用默认布局
+        return defaultLayout;
+    }
+
+    return mergedLayout;
+}
+
 export interface FlexDockPanel {
   id: string;
   title: string;
@@ -13,9 +148,15 @@ export interface FlexDockPanel {
 interface FlexLayoutDockContainerProps {
   panels: FlexDockPanel[];
   onPanelClose?: (panelId: string) => void;
+  activePanelId?: string;
 }
 
-export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDockContainerProps) {
+export function FlexLayoutDockContainer({ panels, onPanelClose, activePanelId }: FlexLayoutDockContainerProps) {
+    const layoutRef = useRef<Layout>(null);
+    const previousLayoutJsonRef = useRef<string | null>(null);
+    const previousPanelIdsRef = useRef<string>('');
+    const previousPanelTitlesRef = useRef<Map<string, string>>(new Map());
+
     const createDefaultLayout = useCallback((): IJsonModel => {
         const hierarchyPanels = panels.filter((p) => p.id.includes('hierarchy'));
         const assetPanels = panels.filter((p) => p.id.includes('asset'));
@@ -28,9 +169,20 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
         // Build center column children
         const centerColumnChildren: (IJsonTabSetNode | IJsonRowNode)[] = [];
         if (centerPanels.length > 0) {
+            // 找到要激活的tab的索引
+            let activeTabIndex = 0;
+            if (activePanelId) {
+                const index = centerPanels.findIndex((p) => p.id === activePanelId);
+                if (index !== -1) {
+                    activeTabIndex = index;
+                }
+            }
+
             centerColumnChildren.push({
                 type: 'tabset',
                 weight: 70,
+                selected: activeTabIndex,
+                enableMaximize: true,
                 children: centerPanels.map((p) => ({
                     type: 'tab',
                     name: p.title,
@@ -44,6 +196,7 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
             centerColumnChildren.push({
                 type: 'tabset',
                 weight: 30,
+                enableMaximize: true,
                 children: bottomPanels.map((p) => ({
                     type: 'tab',
                     name: p.title,
@@ -65,6 +218,7 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
                 leftColumnChildren.push({
                     type: 'tabset',
                     weight: 50,
+                    enableMaximize: true,
                     children: hierarchyPanels.map((p) => ({
                         type: 'tab',
                         name: p.title,
@@ -79,6 +233,7 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
                 leftColumnChildren.push({
                     type: 'tabset',
                     weight: 50,
+                    enableMaximize: true,
                     children: assetPanels.map((p) => ({
                         type: 'tab',
                         name: p.title,
@@ -102,6 +257,7 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
                     mainRowChildren.push({
                         type: 'tabset',
                         weight: 60,
+                        enableMaximize: true,
                         children: centerChild.children
                     } as IJsonTabSetNode);
                 } else if (centerChild) {
@@ -123,6 +279,7 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
             mainRowChildren.push({
                 type: 'tabset',
                 weight: 20,
+                enableMaximize: true,
                 children: rightPanels.map((p) => ({
                     type: 'tab',
                     name: p.title,
@@ -137,22 +294,168 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
             global: {
                 tabEnableClose: true,
                 tabEnableRename: false,
-                tabSetEnableMaximize: false,
+                tabSetEnableMaximize: true,
                 tabSetEnableDrop: true,
                 tabSetEnableDrag: true,
                 tabSetEnableDivide: true,
-                borderEnableDrop: true
+                borderEnableDrop: true,
+                borderAutoSelectTabWhenOpen: true,
+                borderAutoSelectTabWhenClosed: true
             },
-            borders: [],
+            borders: [
+                {
+                    type: 'border',
+                    location: 'bottom',
+                    size: 200,
+                    children: []
+                },
+                {
+                    type: 'border',
+                    location: 'right',
+                    size: 300,
+                    children: []
+                }
+            ],
             layout: {
                 type: 'row',
                 weight: 100,
                 children: mainRowChildren
             }
         };
-    }, [panels]);
+    }, [panels, activePanelId]);
 
-    const model = useMemo(() => Model.fromJson(createDefaultLayout()), [createDefaultLayout]);
+    const [model, setModel] = useState<Model>(() => {
+        try {
+            return Model.fromJson(createDefaultLayout());
+        } catch (error) {
+            throw new Error(`Failed to create layout model: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    });
+
+    useEffect(() => {
+        try {
+            // 检查面板ID列表是否真的变化了（而不只是标题等属性变化）
+            const currentPanelIds = panels.map(p => p.id).sort().join(',');
+            const previousIds = previousPanelIdsRef.current;
+
+            // 检查标题是否变化
+            const currentTitles = new Map(panels.map(p => [p.id, p.title]));
+            const titleChanges: Array<{ id: string; newTitle: string }> = [];
+
+            for (const panel of panels) {
+                const previousTitle = previousPanelTitlesRef.current.get(panel.id);
+                if (previousTitle && previousTitle !== panel.title) {
+                    titleChanges.push({ id: panel.id, newTitle: panel.title });
+                }
+            }
+
+            // 更新标题引用
+            previousPanelTitlesRef.current = currentTitles;
+
+            // 如果只是标题变化，更新tab名称
+            if (titleChanges.length > 0 && currentPanelIds === previousIds && model) {
+                titleChanges.forEach(({ id, newTitle }) => {
+                    const node = model.getNodeById(id);
+                    if (node && node.getType() === 'tab') {
+                        model.doAction(Actions.renameTab(id, newTitle));
+                    }
+                });
+                return;
+            }
+
+            if (currentPanelIds === previousIds) {
+                return;
+            }
+
+            // 计算新增和移除的面板
+            const prevSet = new Set(previousIds.split(',').filter(id => id));
+            const currSet = new Set(currentPanelIds.split(',').filter(id => id));
+            const newPanelIds = Array.from(currSet).filter(id => !prevSet.has(id));
+            const removedPanelIds = Array.from(prevSet).filter(id => !currSet.has(id));
+
+            previousPanelIdsRef.current = currentPanelIds;
+
+            // 如果已经有布局且只是添加新面板，使用Action动态添加
+            if (model && newPanelIds.length > 0 && removedPanelIds.length === 0 && previousIds) {
+                // 找到要添加的面板
+                const newPanels = panels.filter(p => newPanelIds.includes(p.id));
+
+                // 找到中心区域的tabset ID
+                let centerTabsetId: string | null = null;
+
+                model.visitNodes((node: any) => {
+                    if (node.getType() === 'tabset') {
+                        const tabset = node as any;
+                        // 检查是否是中心tabset
+                        const children = tabset.getChildren();
+                        const hasNonSidePanel = children.some((child: any) => {
+                            const id = child.getId();
+                            return !id.includes('hierarchy') &&
+                                   !id.includes('asset') &&
+                                   !id.includes('inspector') &&
+                                   !id.includes('console');
+                        });
+                        if (hasNonSidePanel && !centerTabsetId) {
+                            centerTabsetId = tabset.getId();
+                        }
+                    }
+                });
+
+                if (centerTabsetId) {
+                    // 动态添加tab到中心tabset
+                    newPanels.forEach(panel => {
+                        model.doAction(Actions.addNode(
+                            {
+                                type: 'tab',
+                                name: panel.title,
+                                id: panel.id,
+                                component: panel.id,
+                                enableClose: panel.closable !== false
+                            },
+                            centerTabsetId!,
+                            DockLocation.CENTER,
+                            -1 // 添加到末尾
+                        ));
+                    });
+
+                    // 选中最后添加的面板
+                    const lastPanel = newPanels[newPanels.length - 1];
+                    if (lastPanel) {
+                        setTimeout(() => {
+                            const node = model.getNodeById(lastPanel.id);
+                            if (node) {
+                                model.doAction(Actions.selectTab(lastPanel.id));
+                            }
+                        }, 0);
+                    }
+
+                    return;
+                }
+            }
+
+            // 否则完全重建布局
+            const defaultLayout = createDefaultLayout();
+
+            // 如果有保存的布局，尝试合并
+            if (previousLayoutJsonRef.current && previousIds) {
+                try {
+                    const savedLayout = JSON.parse(previousLayoutJsonRef.current);
+                    const mergedLayout = mergeLayouts(savedLayout, defaultLayout, panels);
+                    const newModel = Model.fromJson(mergedLayout);
+                    setModel(newModel);
+                    return;
+                } catch (error) {
+                    // 合并失败，使用默认布局
+                }
+            }
+
+            // 使用默认布局
+            const newModel = Model.fromJson(defaultLayout);
+            setModel(newModel);
+        } catch (error) {
+            throw new Error(`Failed to update layout model: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }, [createDefaultLayout, panels]);
 
     const factory = useCallback((node: TabNode) => {
         const component = node.getComponent();
@@ -160,9 +463,9 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
         return panel?.content || <div>Panel not found</div>;
     }, [panels]);
 
-    const onAction = useCallback((action: any) => {
+    const onAction = useCallback((action: Action) => {
         if (action.type === Actions.DELETE_TAB) {
-            const tabId = action.data.node;
+            const tabId = (action.data as { node: string }).node;
             if (onPanelClose) {
                 onPanelClose(tabId);
             }
@@ -170,12 +473,20 @@ export function FlexLayoutDockContainer({ panels, onPanelClose }: FlexLayoutDock
         return action;
     }, [onPanelClose]);
 
+    const onModelChange = useCallback((newModel: Model) => {
+        // 保存布局状态以便在panels变化时恢复
+        const layoutJson = newModel.toJson();
+        previousLayoutJsonRef.current = JSON.stringify(layoutJson);
+    }, []);
+
     return (
         <div className="flexlayout-dock-container">
             <Layout
+                ref={layoutRef}
                 model={model}
                 factory={factory}
                 onAction={onAction}
+                onModelChange={onModelChange}
             />
         </div>
     );

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

@@ -1,12 +1,22 @@
 import type { Core, ServiceContainer } from '@esengine/ecs-framework';
 import { IEditorPlugin, EditorPluginCategory, PanelPosition, MessageHub } from '@esengine/editor-core';
-import type { MenuItem, ToolbarItem, PanelDescriptor, ISerializer, FileActionHandler, FileCreationTemplate, FileContextMenuItem } 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';
+import { createRootNode } from '../domain/constants/RootNode';
+import { behaviorTreeFileService } from '../services/BehaviorTreeFileService';
 
 /**
  * 行为树编辑器插件
@@ -113,30 +123,43 @@ export class BehaviorTreePlugin implements IEditorPlugin {
                     console.log('[BehaviorTreePlugin] onDoubleClick called for:', filePath);
 
                     if (this.messageHub) {
-                        useBehaviorTreeStore.getState().setIsOpen(true);
+                        const store = useBehaviorTreeStore.getState();
+                        store.setIsOpen(true);
+                        store.setPendingFilePath(filePath); // 状态通道（同步，时序安全）
+
+                        // 提取文件名
+                        const fileName = filePath.split(/[\\/]/).pop()?.replace('.btree', '') || '行为树';
 
                         await this.messageHub.publish('dynamic-panel:open', {
-                            panelId: 'behavior-tree-editor'
+                            panelId: 'behavior-tree-editor',
+                            title: fileName
                         });
 
-                        await this.messageHub.publish('behavior-tree:open-file', {
+                        // 消息通道（异步，用于其他监听者）
-                            filePath: filePath
+                        await this.messageHub.publish('behavior-tree:load-file', {
+                            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);
+                        const store = useBehaviorTreeStore.getState();
+                        store.setIsOpen(true);
+                        store.setPendingFilePath(filePath); // 状态通道（同步，时序安全）
+
+                        // 提取文件名
+                        const fileName = filePath.split(/[\\/]/).pop()?.replace('.btree', '') || '行为树';
 
                         await this.messageHub.publish('dynamic-panel:open', {
-                            panelId: 'behavior-tree-editor'
+                            panelId: 'behavior-tree-editor',
+                            title: fileName
                         });
 
-                        await this.messageHub.publish('behavior-tree:open-file', {
+                        // 消息通道（异步，用于其他监听者）
-                            filePath: filePath
+                        await this.messageHub.publish('behavior-tree:load-file', {
+                            filePath
                         });
                     }
                 },
@@ -147,14 +170,21 @@ export class BehaviorTreePlugin implements IEditorPlugin {
                             icon: createElement(FileText, { size: 16 }),
                             onClick: async (filePath: string) => {
                                 if (this.messageHub) {
-                                    useBehaviorTreeStore.getState().setIsOpen(true);
+                                    const store = useBehaviorTreeStore.getState();
+                                    store.setIsOpen(true);
+                                    store.setPendingFilePath(filePath); // 状态通道（同步，时序安全）
+
+                                    // 提取文件名
+                                    const fileName = filePath.split(/[\\/]/).pop()?.replace('.btree', '') || '行为树';
 
                                     await this.messageHub.publish('dynamic-panel:open', {
-                                        panelId: 'behavior-tree-editor'
+                                        panelId: 'behavior-tree-editor',
+                                        title: fileName
                                     });
 
-                                    await this.messageHub.publish('behavior-tree:open-file', {
+                                    // 消息通道（异步，用于其他监听者）
-                                        filePath: filePath
+                                    await this.messageHub.publish('behavior-tree:load-file', {
+                                        filePath
                                     });
                                 }
                             }
@@ -173,14 +203,25 @@ export class BehaviorTreePlugin implements IEditorPlugin {
                 defaultFileName: 'NewBehaviorTree',
                 icon: createElement(FileText, { size: 16 }),
                 createContent: async (fileName: string) => {
-                    const emptyTree: BehaviorTreeData = {
+                    const rootNode = createRootNode();
-                        id: `tree_${Date.now()}`,
+                    const now = new Date().toISOString();
-                        name: fileName,
+                    const editorFormat = {
-                        rootNodeId: '',
+                        version: '1.0.0',
-                        nodes: new Map(),
+                        metadata: {
-                        blackboardVariables: new Map()
+                            name: fileName,
+                            description: '',
+                            createdAt: now,
+                            modifiedAt: now
+                        },
+                        nodes: [rootNode.toObject()],
+                        connections: [],
+                        blackboard: {},
+                        canvasState: {
+                            offset: { x: 0, y: 0 },
+                            scale: 1
+                        }
                     };
-                    return this.serializeBehaviorTreeData(emptyTree);
+                    return JSON.stringify(editorFormat, null, 2);
                 }
             }
         ];
@@ -196,9 +237,9 @@ export class BehaviorTreePlugin implements IEditorPlugin {
             })),
             blackboardVariables: treeData.blackboardVariables
                 ? Array.from(treeData.blackboardVariables.entries()).map(([key, value]) => ({
-                    key,
+                      key,
-                    value
+                      value
-                }))
+                  }))
                 : []
         };
         return JSON.stringify(serializable, null, 2);

packages/editor-app/src/plugins/ProfilerPlugin.tsx

@@ -134,7 +134,7 @@ export class ProfilerPlugin implements IEditorPlugin {
                 id: 'profiler-monitor',
                 title: 'Performance Monitor',
                 position: 'center' as any,
-                closable: true,
+                closable: false,
                 component: ProfilerDockPanel,
                 order: 200
             }

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

@@ -3,7 +3,26 @@
     flex-direction: column;
     height: 100%;
     width: 100%;
-    background: var(--bg-secondary);
+    background: #1e1e1e;
+}
+
+/* 全屏模式 */
+.behavior-tree-editor-panel.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    background: #1e1e1e;
+}
+
+/* 全屏模式下的工具栏 - 确保不透明 */
+.behavior-tree-editor-panel.fullscreen .behavior-tree-editor-toolbar {
+    background: #252526;
+    opacity: 1;
+    position: relative;
+    z-index: 10000;
 }
 
 /* 工具栏 */
@@ -11,8 +30,8 @@
     display: flex;
     align-items: center;
     padding: 8px 12px;
-    background: var(--bg-primary);
+    background: #252526;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid #3e3e42;
     gap: 8px;
     flex-wrap: wrap;
 }
@@ -26,7 +45,7 @@
 .behavior-tree-editor-toolbar .toolbar-divider {
     width: 1px;
     height: 24px;
-    background: var(--border-color);
+    background: #3e3e42;
     margin: 0 4px;
 }
 
@@ -39,17 +58,17 @@
     border: 1px solid transparent;
     border-radius: 4px;
     cursor: pointer;
-    color: var(--text-primary);
+    color: #cccccc;
     transition: all 0.2s;
 }
 
 .behavior-tree-editor-toolbar .toolbar-btn:hover:not(:disabled) {
-    background: var(--bg-hover);
+    background: #2a2d2e;
-    border-color: var(--border-color);
+    border-color: #3e3e42;
 }
 
 .behavior-tree-editor-toolbar .toolbar-btn:active:not(:disabled) {
-    background: var(--bg-active);
+    background: #37373d;
 }
 
 .behavior-tree-editor-toolbar .toolbar-btn:disabled {
@@ -165,7 +184,7 @@
 
 .behavior-tree-editor-toolbar .file-name {
     font-size: 13px;
-    color: var(--text-secondary);
+    color: #9d9d9d;
     font-weight: 500;
 }
 
@@ -192,8 +211,8 @@
     width: 350px;
     display: flex;
     flex-direction: column;
-    background: var(--bg-primary);
+    background: #252526;
-    border: 1px solid var(--border-color);
+    border: 1px solid #3e3e42;
     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;
@@ -205,11 +224,11 @@
     justify-content: space-between;
     padding: 12px;
     background: #2d2d2d;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: 1px solid #3e3e42;
     border-radius: 8px 8px 0 0;
     font-weight: 500;
     font-size: 13px;
-    color: var(--text-primary);
+    color: #cccccc;
 }
 
 .blackboard-header .close-btn {
@@ -221,14 +240,14 @@
     border: 1px solid transparent;
     border-radius: 4px;
     cursor: pointer;
-    color: var(--text-secondary);
+    color: #9d9d9d;
     transition: all 0.2s;
 }
 
 .blackboard-header .close-btn:hover {
-    background: var(--bg-hover);
+    background: #2a2d2e;
-    border-color: var(--border-color);
+    border-color: #3e3e42;
-    color: var(--text-primary);
+    color: #cccccc;
 }
 
 .blackboard-content {
@@ -247,18 +266,18 @@
     justify-content: center;
     width: 32px;
     height: 48px;
-    background: var(--bg-primary);
+    background: #252526;
-    border: 1px solid var(--border-color);
+    border: 1px solid #3e3e42;
     border-radius: 8px 0 0 8px;
     cursor: pointer;
-    color: var(--text-secondary);
+    color: #9d9d9d;
     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);
+    background: #2a2d2e;
-    color: var(--text-primary);
+    color: #cccccc;
     width: 36px;
 }

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

@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Save, FolderOpen, Download, Play, Pause, Square, SkipForward, Clipboard, ChevronRight, ChevronLeft, Copy } from 'lucide-react';
+import { Save, FolderOpen, Download, Play, Pause, Square, SkipForward, Clipboard, ChevronRight, ChevronLeft, Copy, Home, Maximize2, Minimize2 } from 'lucide-react';
 import { invoke } from '@tauri-apps/api/core';
 import { open, message } from '@tauri-apps/plugin-dialog';
 import { Core } from '@esengine/ecs-framework';
@@ -16,6 +16,7 @@ import { createLogger } from '@esengine/ecs-framework';
 import { LocalBlackboardTypeGenerator } from '../../../../generators/LocalBlackboardTypeGenerator';
 import { GlobalBlackboardTypeGenerator } from '../../../../generators/GlobalBlackboardTypeGenerator';
 import { useExecutionController } from '../../../hooks/useExecutionController';
+import { behaviorTreeFileService } from '../../../../services/BehaviorTreeFileService';
 import './BehaviorTreeEditorPanel.css';
 
 const logger = createLogger('BehaviorTreeEditorPanel');
@@ -31,11 +32,12 @@ export const BehaviorTreeEditorPanel: React.FC<BehaviorTreeEditorPanelProps> = (
 
     const {
         isOpen,
+        pendingFilePath,
+        setPendingFilePath,
         nodes,
         connections,
         exportToJSON,
         exportToRuntimeAsset,
-        importFromJSON,
         blackboardVariables,
         setBlackboardVariables,
         updateBlackboardVariable,
@@ -45,8 +47,7 @@ export const BehaviorTreeEditorPanel: React.FC<BehaviorTreeEditorPanelProps> = (
         setIsExecuting,
         saveNodesDataSnapshot,
         restoreNodesData,
-        setIsOpen,
+        resetView
-        reset
     } = useBehaviorTreeStore();
 
     const [currentFilePath, setCurrentFilePath] = useState<string | null>(null);
@@ -58,8 +59,10 @@ export const BehaviorTreeEditorPanel: React.FC<BehaviorTreeEditorPanelProps> = (
     const [isBlackboardOpen, setIsBlackboardOpen] = useState(true);
     const [globalVariables, setGlobalVariables] = useState<Record<string, any>>({});
     const [hasUnsavedGlobalChanges, setHasUnsavedGlobalChanges] = useState(false);
+    const [isFullscreen, setIsFullscreen] = useState(false);
     const isInitialMount = useRef(true);
     const initialStateSnapshot = useRef<{ nodes: number; variables: number }>({ nodes: 0, variables: 0 });
+    const processingFileRef = useRef<string | null>(null);
 
     const {
         executionMode,
@@ -148,31 +151,37 @@ export const BehaviorTreeEditorPanel: React.FC<BehaviorTreeEditorPanelProps> = (
         }
     }, [nodes, blackboardVariables]);
 
-    useEffect(() => {
+    const loadFile = useCallback(async (filePath: string) => {
-        const handleOpenFile = async (data: any) => {
+        const result = await behaviorTreeFileService.loadFile(filePath);
-            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);
+        if (result.success && result.fileName) {
-        return () => unsubscribe?.();
+            setCurrentFilePath(filePath);
-    }, [messageHub, importFromJSON, nodes.length, blackboardVariables]);
+            setHasUnsavedChanges(false);
+            isInitialMount.current = true;
+            initialStateSnapshot.current = { nodes: 0, variables: 0 };
+            showToast(`已打开 ${result.fileName}`, 'success');
+        } else if (result.error) {
+            showToast(`加载失败: ${result.error}`, 'error');
+        }
+    }, [showToast]);
+
+    // 使用 useLayoutEffect 处理 pendingFilePath（同步执行，DOM 更新前）
+    // 这是文件加载的唯一入口，避免重复
+    useLayoutEffect(() => {
+        if (!pendingFilePath) return;
+
+        // 防止 React StrictMode 导致的重复执行
+        if (processingFileRef.current === pendingFilePath) {
+            return;
+        }
+
+        processingFileRef.current = pendingFilePath;
+
+        loadFile(pendingFilePath).then(() => {
+            setPendingFilePath(null);
+            processingFileRef.current = null;
+        });
+    }, [pendingFilePath, loadFile, setPendingFilePath]);
 
     const loadGlobalBlackboard = async (path: string) => {
         try {
@@ -223,15 +232,20 @@ export const BehaviorTreeEditorPanel: React.FC<BehaviorTreeEditorPanelProps> = (
             });
 
             if (selected) {
-                const json = await invoke<string>('read_behavior_tree_file', { filePath: selected as string });
+                const result = await behaviorTreeFileService.loadFile(selected as string);
-                importFromJSON(json);
+                if (result.success && result.fileName) {
-                setCurrentFilePath(selected as string);
+                    setCurrentFilePath(selected as string);
-                setHasUnsavedChanges(false);
+                    setHasUnsavedChanges(false);
-                isInitialMount.current = true;
+                    isInitialMount.current = true;
-                logger.info('行为树已加载', selected);
+                    initialStateSnapshot.current = { nodes: 0, variables: 0 };
+                    showToast(`已打开 ${result.fileName}`, 'success');
+                } else if (result.error) {
+                    showToast(`加载失败: ${result.error}`, 'error');
+                }
             }
         } catch (error) {
             logger.error('加载失败', error);
+            showToast(`加载失败: ${error}`, 'error');
         }
     };
 
@@ -373,12 +387,12 @@ export const BehaviorTreeEditorPanel: React.FC<BehaviorTreeEditorPanelProps> = (
 
     const handleCopyBehaviorTree = () => {
         const buildNodeTree = (nodeId: string, depth: number = 0): string => {
-            const node = nodes.find(n => n.id === nodeId);
+            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')}`
+                ? `\n${node.children.map((childId) => buildNodeTree(childId, depth + 1)).join('\n')}`
                 : '';
 
             const propertiesText = Object.keys(node.data).length > 0
@@ -388,7 +402,7 @@ export const BehaviorTreeEditorPanel: React.FC<BehaviorTreeEditorPanelProps> = (
             return `${indent}- ${node.template.displayName} (${node.template.type})${propertiesText}${childrenText}`;
         };
 
-        const rootNode = nodes.find(n => n.id === ROOT_NODE_ID);
+        const rootNode = nodes.find((n) => n.id === ROOT_NODE_ID);
         if (!rootNode) {
             showToast('未找到根节点', 'error');
             return;
@@ -408,26 +422,26 @@ ${buildNodeTree(ROOT_NODE_ID)}
 ${Object.entries(blackboardVariables).map(([key, value]) => `  - ${key}: ${JSON.stringify(value)}`).join('\n') || '  无'}
 
 全部节点详情:
-${nodes.filter(n => n.id !== ROOT_NODE_ID).map(node => {
+${nodes.filter((n) => n.id !== ROOT_NODE_ID).map((node) => {
-    const incoming = connections.filter(c => c.to === node.id);
+        const incoming = connections.filter((c) => c.to === node.id);
-    const outgoing = connections.filter(c => c.from === node.id);
+        const outgoing = connections.filter((c) => c.from === node.id);
-    return `
+        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 => {
+  输入连接: ${incoming.length}个${incoming.length > 0 ? '\n    ' + incoming.map((c) => {
-        const fromNode = nodes.find(n => n.id === c.from);
+    const fromNode = nodes.find((n) => n.id === c.from);
-        return `← ${fromNode?.template.displayName || '未知'}`;
+    return `← ${fromNode?.template.displayName || '未知'}`;
-    }).join('\n    ') : ''}
+}).join('\n    ') : ''}
-  输出连接: ${outgoing.length}个${outgoing.length > 0 ? '\n    ' + outgoing.map(c => {
+  输出连接: ${outgoing.length}个${outgoing.length > 0 ? '\n    ' + outgoing.map((c) => {
-        const toNode = nodes.find(n => n.id === c.to);
+    const toNode = nodes.find((n) => n.id === c.to);
-        return `→ ${toNode?.template.displayName || '未知'}`;
+    return `→ ${toNode?.template.displayName || '未知'}`;
-    }).join('\n    ') : ''}
+}).join('\n    ') : ''}
   属性: ${JSON.stringify(node.data, null, 4)}`;
-}).join('\n')}
+    }).join('\n')}
         `.trim();
 
         navigator.clipboard.writeText(treeStructure).then(() => {
@@ -590,12 +604,20 @@ ${nodes.filter(n => n.id !== ROOT_NODE_ID).map(node => {
         setHasUnsavedGlobalChanges(true);
     };
 
+    const toggleFullscreen = () => {
+        const newFullscreenState = !isFullscreen;
+        setIsFullscreen(newFullscreenState);
+
+        // 通知主界面切换全屏状态
+        messageHub?.publish('editor:fullscreen', { fullscreen: newFullscreenState });
+    };
+
     if (!isOpen) {
         return null;
     }
 
     return (
-        <div className="behavior-tree-editor-panel">
+        <div className={`behavior-tree-editor-panel ${isFullscreen ? 'fullscreen' : ''}`}>
             <div className="behavior-tree-editor-toolbar">
                 {/* 文件操作 */}
                 <div className="toolbar-section">
@@ -654,6 +676,12 @@ ${nodes.filter(n => n.id !== ROOT_NODE_ID).map(node => {
 
                 {/* 视图控制 */}
                 <div className="toolbar-section">
+                    <button onClick={resetView} className="toolbar-btn" title="重置视图">
+                        <Home size={16} />
+                    </button>
+                    <button onClick={toggleFullscreen} className="toolbar-btn" title={isFullscreen ? '退出全屏' : '全屏编辑'}>
+                        {isFullscreen ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
+                    </button>
                     <button onClick={() => setIsBlackboardOpen(!isBlackboardOpen)} className="toolbar-btn" title="黑板">
                         <Clipboard size={16} />
                     </button>

packages/editor-app/src/services/BehaviorTreeFileService.ts

@@ -0,0 +1,60 @@
+import { invoke } from '@tauri-apps/api/core';
+import { createLogger } from '@esengine/ecs-framework';
+import { useBehaviorTreeStore } from '../stores/behaviorTreeStore';
+
+const logger = createLogger('BehaviorTreeFileService');
+
+export interface FileLoadResult {
+    success: boolean;
+    fileName?: string;
+    error?: string;
+}
+
+export class BehaviorTreeFileService {
+    private loadingFiles = new Set<string>();
+
+    async loadFile(filePath: string): Promise<FileLoadResult> {
+        try {
+            if (!filePath.endsWith('.btree')) {
+                return {
+                    success: false,
+                    error: '无效的文件类型'
+                };
+            }
+
+            // 防止重复加载同一个文件（保底机制，通常不应该被触发）
+            if (this.loadingFiles.has(filePath)) {
+                logger.debug('文件正在加载中，跳过重复请求:', filePath);
+                return { success: false, error: '文件正在加载中' };
+            }
+
+            this.loadingFiles.add(filePath);
+
+            try {
+                logger.info('加载行为树文件:', filePath);
+                const json = await invoke<string>('read_behavior_tree_file', { filePath });
+
+                const store = useBehaviorTreeStore.getState();
+                store.importFromJSON(json);
+
+                const fileName = filePath.split(/[\\/]/).pop()?.replace('.btree', '') || '未命名';
+                logger.info('行为树已加载:', fileName);
+
+                return {
+                    success: true,
+                    fileName
+                };
+            } finally {
+                this.loadingFiles.delete(filePath);
+            }
+        } catch (error) {
+            logger.error('加载行为树失败', error);
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : String(error)
+            };
+        }
+    }
+}
+
+export const behaviorTreeFileService = new BehaviorTreeFileService();

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

@@ -5,6 +5,8 @@ import { Connection } from '../domain/models/Connection';
 import { Blackboard, BlackboardValue } from '../domain/models/Blackboard';
 import { Position } from '../domain/value-objects/Position';
 import { createRootNode, ROOT_NODE_ID } from '../domain/constants/RootNode';
+import { BehaviorTree } from '../domain/models/BehaviorTree';
+import { useBehaviorTreeDataStore } from '../application/state/BehaviorTreeDataStore';
 
 /**
  * 行为树 Store 状态接口
@@ -18,6 +20,7 @@ export interface NodeExecutionInfo {
 
 interface BehaviorTreeState {
     isOpen: boolean;
+    pendingFilePath: string | null;
     nodes: Node[];
     connections: Connection[];
     blackboard: Blackboard;
@@ -112,6 +115,7 @@ interface BehaviorTreeState {
     ) => string | Uint8Array;
 
     setIsOpen: (isOpen: boolean) => void;
+    setPendingFilePath: (filePath: string | null) => void;
     reset: () => void;
 }
 
@@ -121,6 +125,7 @@ interface BehaviorTreeState {
  */
 export const useBehaviorTreeStore = create<BehaviorTreeState>((set, get) => ({
     isOpen: false,
+    pendingFilePath: null,
     nodes: [],
     connections: [],
     blackboard: new Blackboard(),
@@ -412,6 +417,10 @@ export const useBehaviorTreeStore = create<BehaviorTreeState>((set, get) => ({
 
         const loadedBlackboard = Blackboard.fromObject(blackboardData);
 
+        // 同步更新领域层数据存储，确保 Command 系统使用正确的数据
+        const newTree = new BehaviorTree(loadedNodes, loadedConnections, loadedBlackboard, ROOT_NODE_ID);
+        useBehaviorTreeDataStore.getState().setTree(newTree);
+
         set({
             isOpen: true,
             nodes: loadedNodes,
@@ -420,7 +429,13 @@ export const useBehaviorTreeStore = create<BehaviorTreeState>((set, get) => ({
             blackboardVariables: blackboardData,
             initialBlackboardVariables: blackboardData,
             canvasOffset: data.canvasState?.offset || { x: 0, y: 0 },
-            canvasScale: data.canvasState?.scale || 1
+            canvasScale: data.canvasState?.scale || 1,
+            // 只清理连线相关状态，避免切换文件时残留上一个文件的连线状态
+            connectingFrom: null,
+            connectingFromProperty: null,
+            connectingToPos: null,
+            // 清理选中状态
+            selectedNodeIds: []
         });
     },
 
@@ -454,6 +469,8 @@ export const useBehaviorTreeStore = create<BehaviorTreeState>((set, get) => ({
 
     setIsOpen: (isOpen: boolean) => set({ isOpen }),
 
+    setPendingFilePath: (filePath: string | null) => set({ pendingFilePath: filePath }),
+
     reset: () => set({
         isOpen: false,
         nodes: [],

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

@@ -2,8 +2,10 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: #1e1e1e;
+  background: var(--color-bg-base);
-  border-top: 1px solid #333;
+  border-top: 1px solid var(--color-border-default);
+  container-type: inline-size;
+  container-name: asset-browser;
 }
 
 .asset-browser-header {
@@ -21,31 +23,57 @@
 
 .view-mode-buttons {
   display: flex;
-  gap: 4px;
+  gap: 0;
+  margin-left: auto;
 }
 
 .view-mode-btn {
-  padding: 4px 8px;
+  padding: 6px 12px;
   background: transparent;
   border: 1px solid #3e3e3e;
-  border-radius: 3px;
   color: #cccccc;
   cursor: pointer;
   transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: normal;
+  border-radius: 0;
 }
 
-.view-mode-btn:hover {
+.view-mode-btn:first-child {
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  border-right: none;
+}
+
+.view-mode-btn:last-child {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
+.view-mode-btn:hover:not(.active) {
   background: #2a2d2e;
-  border-color: #007acc;
 }
 
 .view-mode-btn.active {
   background: #0e639c;
   border-color: #0e639c;
   color: #ffffff;
+  font-weight: 500;
+}
+
+/* 响应式：小宽度时只显示图标 - 使用容器查询 */
+@container asset-browser (max-width: 400px) {
+  .view-mode-text {
+    display: none;
+  }
+
+  .view-mode-btn {
+    padding: 6px 8px;
+  }
 }
 
 .asset-browser-content {
@@ -154,14 +182,14 @@
 }
 
 /* 容器查询：根据容器宽度调整布局 */
-@container (max-width: 400px) {
+@container asset-list-container (max-width: 400px) {
   .asset-list {
     grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
     gap: 6px;
   }
 }
 
-@container (max-width: 250px) {
+@container asset-list-container (max-width: 250px) {
   .asset-list {
     grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
     gap: 4px;
@@ -169,7 +197,7 @@
   }
 }
 
-@container (max-width: 150px) {
+@container asset-list-container (max-width: 150px) {
   .asset-list {
     grid-template-columns: 1fr;
     gap: 2px;
@@ -199,7 +227,7 @@
 }
 
 /* 中等窄度优化 */
-@container (max-width: 250px) {
+@container asset-list-container (max-width: 250px) {
   .asset-item {
     padding: 8px 6px;
   }
@@ -253,6 +281,21 @@
   color: #dcb67a;
 }
 
+/* 系统文件夹特殊标记 */
+.asset-icon.system-folder {
+  filter: drop-shadow(0 0 3px rgba(66, 165, 245, 0.5));
+  animation: subtle-pulse 3s ease-in-out infinite;
+}
+
+@keyframes subtle-pulse {
+  0%, 100% {
+    filter: drop-shadow(0 0 3px rgba(66, 165, 245, 0.5));
+  }
+  50% {
+    filter: drop-shadow(0 0 6px rgba(66, 165, 245, 0.7));
+  }
+}
+
 .asset-info {
   flex: 1;
   width: 100%;

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

@@ -34,14 +34,14 @@
 
 .inspector-content {
   flex: 1;
-  overflow-y: auto;
+  overflow: auto;
-  overflow-x: hidden;
   padding: var(--spacing-md);
   min-height: 0;
 }
 
 .inspector-content::-webkit-scrollbar {
   width: 14px;
+  height: 14px;
 }
 
 .inspector-content::-webkit-scrollbar-track {
@@ -60,6 +60,10 @@
   background-clip: padding-box;
 }
 
+.inspector-content::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 .inspector-section {
   margin-bottom: 20px;
   padding: 12px;

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

@@ -97,6 +97,21 @@
   font-size: var(--font-size-md);
 }
 
+/* 系统文件夹特殊标记 */
+.tree-icon .system-folder-icon {
+  filter: drop-shadow(0 0 2px rgba(66, 165, 245, 0.5));
+  animation: subtle-pulse-tree 3s ease-in-out infinite;
+}
+
+@keyframes subtle-pulse-tree {
+  0%, 100% {
+    filter: drop-shadow(0 0 2px rgba(66, 165, 245, 0.5));
+  }
+  50% {
+    filter: drop-shadow(0 0 4px rgba(66, 165, 245, 0.7));
+  }
+}
+
 .tree-label {
   flex: 1;
   overflow: hidden;

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

@@ -111,14 +111,24 @@
 
 .flexlayout__tab_button_trailing {
   margin-left: 8px;
-  opacity: 0;
+  opacity: 0.6;
   transition: opacity 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border-radius: 3px;
 }
 
+.flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
 .flexlayout__tab:hover .flexlayout__tab_button_trailing {
   opacity: 1;
 }
 
+.flexlayout__tab_button_trailing:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
 .flexlayout__tab_button_trailing svg {
   width: 12px;
   height: 12px;
@@ -133,6 +143,32 @@
   background: #2d2d30;
 }
 
+/* 标签栏滚动条样式 */
+.flexlayout__tab_moveable::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+.flexlayout__tab_moveable::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.flexlayout__tab_moveable::-webkit-scrollbar-thumb {
+  background: rgba(121, 121, 121, 0.4);
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+
+.flexlayout__tab_moveable::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 100, 100, 0.7);
+  background-clip: padding-box;
+}
+
+.flexlayout__tab_moveable::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 .flexlayout__tabset-selected {
   background: #1e1e1e;
 }
@@ -187,10 +223,12 @@
 }
 
 .flexlayout__tab_toolbar {
-  display: flex;
+  display: flex !important;
   align-items: center;
   gap: 4px;
   padding: 0 8px;
+  visibility: visible !important;
+  opacity: 1 !important;
 }
 
 .flexlayout__tab_toolbar_button {
@@ -198,9 +236,14 @@
   border: none;
   color: #cccccc;
   cursor: pointer;
-  padding: 4px 8px;
+  padding: 4px;
   border-radius: 3px;
   transition: background-color 0.15s ease;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
 }
 
 .flexlayout__tab_toolbar_button:hover {
@@ -213,6 +256,13 @@
   height: 14px;
 }
 
+/* 确保最小化和最大化按钮可见 */
+.flexlayout__tab_toolbar_button-min,
+.flexlayout__tab_toolbar_button-max {
+  display: flex !important;
+  visibility: visible !important;
+}
+
 .flexlayout__popup_menu {
   background: #252526;
   border: 1px solid #454545;

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

@@ -150,10 +150,35 @@
 
 .hierarchy-content {
   flex: 1;
-  overflow-y: auto;
+  overflow: auto;
   padding: var(--spacing-xs) 0;
 }
 
+.hierarchy-content::-webkit-scrollbar {
+  width: 14px;
+  height: 14px;
+}
+
+.hierarchy-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.hierarchy-content::-webkit-scrollbar-thumb {
+  background: rgba(121, 121, 121, 0.4);
+  border-radius: 8px;
+  border: 3px solid transparent;
+  background-clip: padding-box;
+}
+
+.hierarchy-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 100, 100, 0.7);
+  background-clip: padding-box;
+}
+
+.hierarchy-content::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
 .empty-state {
   display: flex;
   flex-direction: column;