fix(behavior-tree): 修复插件节点执行问题并完善文档

2025-10-28 11:45:35 +08:00
parent fe791e83a8
commit f0b4453a5f
28 changed files with 5475 additions and 127 deletions
--- a/packages/editor-app/src/App.tsx
+++ b/packages/editor-app/src/App.tsx
@@ -20,6 +20,7 @@ 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 { Viewport } from './components/Viewport';
 import { MenuBar } from './components/MenuBar';
@@ -27,6 +28,7 @@ import { FlexLayoutDockContainer, FlexDockPanel } from './components/FlexLayoutD
 import { TauriAPI } from './api/tauri';
 import { TauriFileAPI } from './adapters/TauriFileAPI';
 import { SettingsService } from './services/SettingsService';
+import { PluginLoader } from './services/PluginLoader';
 import { checkForUpdatesOnStartup } from './utils/updater';
 import { useLocale } from './hooks/useLocale';
 import { en, zh } from './locales';
@@ -45,6 +47,7 @@ Core.services.registerSingleton(GlobalBlackboardService);

 function App() {
  const initRef = useRef(false);
+  const pluginLoaderRef = useRef<PluginLoader>(new PluginLoader());
  const [initialized, setInitialized] = useState(false);
  const [projectLoaded, setProjectLoaded] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
@@ -67,6 +70,7 @@ function App() {
  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);
  const [isProfilerMode, setIsProfilerMode] = useState(false);
@@ -274,6 +278,12 @@ function App() {

      setCurrentProjectPath(projectPath);
      setProjectLoaded(true);
+
+      if (pluginManager) {
+        setLoadingMessage(locale === 'zh' ? '加载项目插件...' : 'Loading project plugins...');
+        await pluginLoaderRef.current.loadProjectPlugins(projectPath, pluginManager);
+      }
+
      setIsLoading(false);
    } catch (error) {
      console.error('Failed to open project:', error);
@@ -486,7 +496,10 @@ function App() {
    }
  };

-  const handleCloseProject = () => {
+  const handleCloseProject = async () => {
+    if (pluginManager) {
+      await pluginLoaderRef.current.unloadProjectPlugins(pluginManager);
+    }
    setProjectLoaded(false);
    setCurrentProjectPath(null);
    setIsProfilerMode(false);
@@ -514,6 +527,10 @@ function App() {
    setShowAbout(true);
  };

+  const handleCreatePlugin = () => {
+    setShowPluginGenerator(true);
+  };
+
  useEffect(() => {
    if (projectLoaded && entityStore && messageHub && logService && uiRegistry && pluginManager) {
      let corePanels: FlexDockPanel[];
@@ -675,6 +692,7 @@ function App() {
          onOpenSettings={() => setShowSettings(true)}
          onToggleDevtools={handleToggleDevtools}
          onOpenAbout={handleOpenAbout}
+          onCreatePlugin={handleCreatePlugin}
        />
        <div className="header-right">
          <button onClick={handleLocaleChange} className="toolbar-btn locale-btn" title={locale === 'en' ? '切换到中文' : 'Switch to English'}>
@@ -729,6 +747,14 @@ function App() {
        />
      )}

+      {showPluginGenerator && (
+        <PluginGeneratorWindow
+          onClose={() => setShowPluginGenerator(false)}
+          projectPath={currentProjectPath}
+          locale={locale}
+        />
+      )}
+
      {errorDialog && (
        <ErrorDialog
          title={errorDialog.title}
--- a/packages/editor-app/src/components/MenuBar.tsx
+++ b/packages/editor-app/src/components/MenuBar.tsx
@@ -32,6 +32,7 @@ interface MenuBarProps {
  onOpenSettings?: () => void;
  onToggleDevtools?: () => void;
  onOpenAbout?: () => void;
+  onCreatePlugin?: () => void;
 }

 export function MenuBar({
@@ -51,7 +52,8 @@ export function MenuBar({
  onOpenPortManager,
  onOpenSettings,
  onToggleDevtools,
-  onOpenAbout
+  onOpenAbout,
+  onCreatePlugin
 }: MenuBarProps) {
  const [openMenu, setOpenMenu] = useState<string | null>(null);
  const [pluginMenuItems, setPluginMenuItems] = useState<PluginMenuItem[]>([]);
@@ -144,6 +146,7 @@ export function MenuBar({
        viewport: 'Viewport',
        pluginManager: 'Plugin Manager',
        tools: 'Tools',
+        createPlugin: 'Create Plugin',
        portManager: 'Port Manager',
        settings: 'Settings',
        help: 'Help',
@@ -177,6 +180,7 @@ export function MenuBar({
        viewport: '视口',
        pluginManager: '插件管理器',
        tools: '工具',
+        createPlugin: '创建插件',
        portManager: '端口管理器',
        settings: '设置',
        help: '帮助',
@@ -226,6 +230,8 @@ export function MenuBar({
      { label: t('devtools'), onClick: onToggleDevtools }
    ],
    tools: [
+      { label: t('createPlugin'), onClick: onCreatePlugin },
+      { separator: true },
      { label: t('portManager'), onClick: onOpenPortManager },
      { separator: true },
      { label: t('settings'), onClick: onOpenSettings }
--- a/packages/editor-app/src/components/PluginGeneratorWindow.tsx
+++ b/packages/editor-app/src/components/PluginGeneratorWindow.tsx
@@ -0,0 +1,213 @@
+import { useState } from 'react';
+import { X, FolderOpen } from 'lucide-react';
+import { TauriAPI } from '../api/tauri';
+import '../styles/PluginGeneratorWindow.css';
+
+interface PluginGeneratorWindowProps {
+    onClose: () => void;
+    projectPath: string | null;
+    locale: string;
+}
+
+export function PluginGeneratorWindow({ onClose, projectPath, locale }: PluginGeneratorWindowProps) {
+    const [pluginName, setPluginName] = useState('');
+    const [pluginVersion, setPluginVersion] = useState('1.0.0');
+    const [outputPath, setOutputPath] = useState(projectPath ? `${projectPath}/plugins` : '');
+    const [includeExample, setIncludeExample] = useState(true);
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const t = (key: string) => {
+        const translations: Record<string, Record<string, string>> = {
+            zh: {
+                title: '创建插件',
+                pluginName: '插件名称',
+                pluginNamePlaceholder: '例如: my-game-plugin',
+                pluginVersion: '插件版本',
+                outputPath: '输出路径',
+                selectPath: '选择路径',
+                includeExample: '包含示例节点',
+                generate: '生成插件',
+                cancel: '取消',
+                generating: '正在生成...',
+                success: '插件创建成功！',
+                errorEmpty: '请输入插件名称',
+                errorInvalidName: '插件名称只能包含字母、数字、连字符和下划线',
+                errorNoPath: '请选择输出路径'
+            },
+            en: {
+                title: 'Create Plugin',
+                pluginName: 'Plugin Name',
+                pluginNamePlaceholder: 'e.g: my-game-plugin',
+                pluginVersion: 'Plugin Version',
+                outputPath: 'Output Path',
+                selectPath: 'Select Path',
+                includeExample: 'Include Example Node',
+                generate: 'Generate Plugin',
+                cancel: 'Cancel',
+                generating: 'Generating...',
+                success: 'Plugin created successfully!',
+                errorEmpty: 'Please enter plugin name',
+                errorInvalidName: 'Plugin name can only contain letters, numbers, hyphens and underscores',
+                errorNoPath: 'Please select output path'
+            }
+        };
+        return translations[locale]?.[key] || translations.en?.[key] || key;
+    };
+
+    const handleSelectPath = async () => {
+        try {
+            const selected = await TauriAPI.openProjectDialog();
+            if (selected) {
+                setOutputPath(selected);
+            }
+        } catch (error) {
+            console.error('Failed to select path:', error);
+        }
+    };
+
+    const validatePluginName = (name: string): boolean => {
+        if (!name) {
+            setError(t('errorEmpty'));
+            return false;
+        }
+        if (!/^[a-zA-Z0-9-_]+$/.test(name)) {
+            setError(t('errorInvalidName'));
+            return false;
+        }
+        return true;
+    };
+
+    const handleGenerate = async () => {
+        setError(null);
+
+        if (!validatePluginName(pluginName)) {
+            return;
+        }
+
+        if (!outputPath) {
+            setError(t('errorNoPath'));
+            return;
+        }
+
+        setIsGenerating(true);
+
+        try {
+            const response = await fetch('/@plugin-generator', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    pluginName,
+                    pluginVersion,
+                    outputPath,
+                    includeExample
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to generate plugin');
+            }
+
+            alert(t('success'));
+            onClose();
+        } catch (error) {
+            console.error('Failed to generate plugin:', error);
+            setError(error instanceof Error ? error.message : String(error));
+        } finally {
+            setIsGenerating(false);
+        }
+    };
+
+    return (
+        <div className="modal-overlay" onClick={onClose}>
+            <div className="modal-content plugin-generator-window" onClick={e => e.stopPropagation()}>
+                <div className="modal-header">
+                    <h2>{t('title')}</h2>
+                    <button className="close-btn" onClick={onClose}>
+                        <X size={16} />
+                    </button>
+                </div>
+
+                <div className="modal-body">
+                    <div className="form-group">
+                        <label>{t('pluginName')}</label>
+                        <input
+                            type="text"
+                            value={pluginName}
+                            onChange={e => setPluginName(e.target.value)}
+                            placeholder={t('pluginNamePlaceholder')}
+                            disabled={isGenerating}
+                        />
+                    </div>
+
+                    <div className="form-group">
+                        <label>{t('pluginVersion')}</label>
+                        <input
+                            type="text"
+                            value={pluginVersion}
+                            onChange={e => setPluginVersion(e.target.value)}
+                            disabled={isGenerating}
+                        />
+                    </div>
+
+                    <div className="form-group">
+                        <label>{t('outputPath')}</label>
+                        <div className="path-input-group">
+                            <input
+                                type="text"
+                                value={outputPath}
+                                onChange={e => setOutputPath(e.target.value)}
+                                disabled={isGenerating}
+                            />
+                            <button
+                                className="select-path-btn"
+                                onClick={handleSelectPath}
+                                disabled={isGenerating}
+                            >
+                                <FolderOpen size={16} />
+                                {t('selectPath')}
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="form-group checkbox-group">
+                        <label>
+                            <input
+                                type="checkbox"
+                                checked={includeExample}
+                                onChange={e => setIncludeExample(e.target.checked)}
+                                disabled={isGenerating}
+                            />
+                            <span>{t('includeExample')}</span>
+                        </label>
+                    </div>
+
+                    {error && (
+                        <div className="error-message">
+                            {error}
+                        </div>
+                    )}
+                </div>
+
+                <div className="modal-footer">
+                    <button
+                        className="btn btn-primary"
+                        onClick={handleGenerate}
+                        disabled={isGenerating}
+                    >
+                        {isGenerating ? t('generating') : t('generate')}
+                    </button>
+                    <button
+                        className="btn btn-secondary"
+                        onClick={onClose}
+                        disabled={isGenerating}
+                    >
+                        {t('cancel')}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
--- a/packages/editor-app/src/services/PluginLoader.ts
+++ b/packages/editor-app/src/services/PluginLoader.ts
@@ -0,0 +1,189 @@
+import { EditorPluginManager } from '@esengine/editor-core';
+import type { IEditorPlugin } from '@esengine/editor-core';
+import { TauriAPI } from '../api/tauri';
+
+interface PluginPackageJson {
+    name: string;
+    version: string;
+    main?: string;
+    module?: string;
+    exports?: {
+        '.': {
+            import?: string;
+            require?: string;
+            development?: {
+                types?: string;
+                import?: string;
+            };
+        }
+    };
+}
+
+export class PluginLoader {
+    private loadedPluginNames: Set<string> = new Set();
+
+    async loadProjectPlugins(projectPath: string, pluginManager: EditorPluginManager): Promise<void> {
+        const pluginsPath = `${projectPath}/plugins`;
+
+        try {
+            const exists = await TauriAPI.pathExists(pluginsPath);
+            if (!exists) {
+                console.log('[PluginLoader] No plugins directory found');
+                return;
+            }
+
+            const entries = await TauriAPI.listDirectory(pluginsPath);
+            const pluginDirs = entries.filter(entry => entry.is_dir && !entry.name.startsWith('.'));
+            console.log('[PluginLoader] Found plugin directories:', pluginDirs.map(d => d.name));
+
+            for (const entry of pluginDirs) {
+                const pluginPath = `${pluginsPath}/${entry.name}`;
+                await this.loadPlugin(pluginPath, entry.name, pluginManager);
+            }
+        } catch (error) {
+            console.error('[PluginLoader] Failed to load project plugins:', error);
+        }
+    }
+
+    private async loadPlugin(pluginPath: string, pluginDirName: string, pluginManager: EditorPluginManager): Promise<void> {
+        try {
+            const packageJsonPath = `${pluginPath}/package.json`;
+            const packageJsonExists = await TauriAPI.pathExists(packageJsonPath);
+
+            if (!packageJsonExists) {
+                console.warn(`[PluginLoader] No package.json found in ${pluginPath}`);
+                return;
+            }
+
+            const packageJsonContent = await TauriAPI.readFileContent(packageJsonPath);
+            const packageJson: PluginPackageJson = JSON.parse(packageJsonContent);
+
+            if (this.loadedPluginNames.has(packageJson.name)) {
+                console.log(`[PluginLoader] Plugin ${packageJson.name} already loaded`);
+                return;
+            }
+
+            let entryPoint = 'src/index.ts';
+
+            if (packageJson.exports?.['.']?.development?.import) {
+                entryPoint = packageJson.exports['.'].development.import;
+            } else if (packageJson.exports?.['.']?.import) {
+                const importPath = packageJson.exports['.'].import;
+                if (importPath.startsWith('src/')) {
+                    entryPoint = importPath;
+                } else {
+                    const srcPath = importPath.replace('dist/', 'src/').replace('.js', '.ts');
+                    const srcExists = await TauriAPI.pathExists(`${pluginPath}/${srcPath}`);
+                    entryPoint = srcExists ? srcPath : importPath;
+                }
+            } else if (packageJson.module) {
+                const srcPath = packageJson.module.replace('dist/', 'src/').replace('.js', '.ts');
+                const srcExists = await TauriAPI.pathExists(`${pluginPath}/${srcPath}`);
+                entryPoint = srcExists ? srcPath : packageJson.module;
+            } else if (packageJson.main) {
+                const srcPath = packageJson.main.replace('dist/', 'src/').replace('.js', '.ts');
+                const srcExists = await TauriAPI.pathExists(`${pluginPath}/${srcPath}`);
+                entryPoint = srcExists ? srcPath : packageJson.main;
+            }
+
+            // 移除开头的 ./
+            entryPoint = entryPoint.replace(/^\.\//, '');
+
+            const moduleUrl = `/@user-project/plugins/${pluginDirName}/${entryPoint}`;
+
+            console.log(`[PluginLoader] Loading plugin from: ${moduleUrl}`);
+
+            const module = await import(/* @vite-ignore */ moduleUrl);
+            console.log(`[PluginLoader] Module loaded successfully`);
+
+            let pluginInstance: IEditorPlugin | null = null;
+            try {
+                pluginInstance = this.findPluginInstance(module);
+            } catch (findError) {
+                console.error(`[PluginLoader] Error finding plugin instance:`, findError);
+                console.error(`[PluginLoader] Module object:`, module);
+                return;
+            }
+
+            if (!pluginInstance) {
+                console.error(`[PluginLoader] No plugin instance found in ${packageJson.name}`);
+                return;
+            }
+
+            await pluginManager.installEditor(pluginInstance);
+            this.loadedPluginNames.add(packageJson.name);
+
+            console.log(`[PluginLoader] Successfully loaded plugin: ${packageJson.name}`);
+        } catch (error) {
+            console.error(`[PluginLoader] Failed to load plugin from ${pluginPath}:`, error);
+            if (error instanceof Error) {
+                console.error(`[PluginLoader] Error stack:`, error.stack);
+            }
+        }
+    }
+
+    private findPluginInstance(module: any): IEditorPlugin | null {
+        console.log('[PluginLoader] Module exports:', Object.keys(module));
+
+        if (module.default && this.isPluginInstance(module.default)) {
+            console.log('[PluginLoader] Found plugin in default export');
+            return module.default;
+        }
+
+        for (const key of Object.keys(module)) {
+            const value = module[key];
+            if (value && this.isPluginInstance(value)) {
+                console.log(`[PluginLoader] Found plugin in export: ${key}`);
+                return value;
+            }
+        }
+
+        console.error('[PluginLoader] No valid plugin instance found. Exports:', module);
+        return null;
+    }
+
+    private isPluginInstance(obj: any): obj is IEditorPlugin {
+        try {
+            if (!obj || typeof obj !== 'object') {
+                return false;
+            }
+
+            const hasRequiredProperties =
+                typeof obj.name === 'string' &&
+                typeof obj.version === 'string' &&
+                typeof obj.displayName === 'string' &&
+                typeof obj.category === 'string' &&
+                typeof obj.install === 'function' &&
+                typeof obj.uninstall === 'function';
+
+            if (!hasRequiredProperties) {
+                console.log('[PluginLoader] Object is not a valid plugin:', {
+                    hasName: typeof obj.name === 'string',
+                    hasVersion: typeof obj.version === 'string',
+                    hasDisplayName: typeof obj.displayName === 'string',
+                    hasCategory: typeof obj.category === 'string',
+                    hasInstall: typeof obj.install === 'function',
+                    hasUninstall: typeof obj.uninstall === 'function',
+                    objectType: typeof obj,
+                    objectConstructor: obj?.constructor?.name
+                });
+            }
+
+            return hasRequiredProperties;
+        } catch (error) {
+            console.error('[PluginLoader] Error in isPluginInstance:', error);
+            return false;
+        }
+    }
+
+    async unloadProjectPlugins(pluginManager: EditorPluginManager): Promise<void> {
+        for (const pluginName of this.loadedPluginNames) {
+            try {
+                await pluginManager.uninstallEditor(pluginName);
+            } catch (error) {
+                console.error(`[PluginLoader] Failed to unload plugin ${pluginName}:`, error);
+            }
+        }
+        this.loadedPluginNames.clear();
+    }
+}
--- a/packages/editor-app/src/styles/PluginGeneratorWindow.css
+++ b/packages/editor-app/src/styles/PluginGeneratorWindow.css
@@ -0,0 +1,208 @@
+.plugin-generator-window {
+    background: var(--color-bg-elevated);
+    border-radius: 8px;
+    padding: 0;
+    width: 600px;
+    max-width: 90vw;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    animation: slideIn 0.2s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.plugin-generator-window .modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--color-border-default);
+}
+
+.plugin-generator-window .modal-header h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--color-text-primary);
+}
+
+.plugin-generator-window .close-btn {
+    background: none;
+    border: none;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.plugin-generator-window .close-btn:hover {
+    background: var(--color-bg-hover);
+    color: var(--color-text-primary);
+}
+
+.plugin-generator-window .modal-body {
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+.plugin-generator-window .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.plugin-generator-window .form-group label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-text-primary);
+}
+
+.plugin-generator-window .form-group input[type="text"] {
+    padding: 10px 12px;
+    background: var(--color-bg-base);
+    border: 1px solid var(--color-border-default);
+    border-radius: 6px;
+    color: var(--color-text-primary);
+    font-size: 14px;
+    font-family: var(--font-family-mono);
+    transition: all 0.2s;
+}
+
+.plugin-generator-window .form-group input[type="text"]:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    background: var(--color-bg-elevated);
+}
+
+.plugin-generator-window .form-group input[type="text"]:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.plugin-generator-window .path-input-group {
+    display: flex;
+    gap: 8px;
+}
+
+.plugin-generator-window .path-input-group input {
+    flex: 1;
+}
+
+.plugin-generator-window .select-path-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 16px;
+    background: var(--color-bg-overlay);
+    border: 1px solid var(--color-border-default);
+    border-radius: 6px;
+    color: var(--color-text-primary);
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s;
+    white-space: nowrap;
+}
+
+.plugin-generator-window .select-path-btn:hover:not(:disabled) {
+    background: var(--color-bg-hover);
+    border-color: var(--color-primary);
+}
+
+.plugin-generator-window .select-path-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.plugin-generator-window .checkbox-group {
+    flex-direction: row;
+}
+
+.plugin-generator-window .checkbox-group label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.plugin-generator-window .checkbox-group input[type="checkbox"] {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+}
+
+.plugin-generator-window .checkbox-group input[type="checkbox"]:disabled {
+    cursor: not-allowed;
+}
+
+.plugin-generator-window .checkbox-group span {
+    font-weight: normal;
+}
+
+.plugin-generator-window .error-message {
+    padding: 12px;
+    background: rgba(206, 145, 120, 0.1);
+    border: 1px solid rgba(206, 145, 120, 0.3);
+    border-radius: 6px;
+    color: #CE9178;
+    font-size: 14px;
+}
+
+.plugin-generator-window .modal-footer {
+    padding: 16px 24px;
+    border-top: 1px solid var(--color-border-default);
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+.plugin-generator-window .btn {
+    padding: 10px 24px;
+    border: none;
+    border-radius: 6px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.plugin-generator-window .btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.plugin-generator-window .btn-primary {
+    background: var(--color-primary);
+    color: white;
+}
+
+.plugin-generator-window .btn-primary:hover:not(:disabled) {
+    background: var(--color-primary-hover);
+}
+
+.plugin-generator-window .btn-secondary {
+    background: var(--color-bg-overlay);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border-default);
+}
+
+.plugin-generator-window .btn-secondary:hover:not(:disabled) {
+    background: var(--color-bg-hover);
+    border-color: var(--color-primary);
+}
--- a/packages/editor-app/src/utils/BehaviorTreeExecutor.ts
+++ b/packages/editor-app/src/utils/BehaviorTreeExecutor.ts
@@ -1,4 +1,4 @@
-import { World, Entity, Scene, createLogger, Time, Core } from '@esengine/ecs-framework';
+import { World, Entity, Scene, createLogger, Time, Core, ComponentRegistry, Component } from '@esengine/ecs-framework';
 import {
    BehaviorTreeNode as BehaviorTreeNodeComponent,
    BlackboardComponent,
@@ -324,17 +324,19 @@ export class BehaviorTreeExecutor {
    private addNodeComponents(entity: Entity, node: BehaviorTreeNode): void {
        const category = node.template.category;
        const data = node.data;
+        const nodeType = node.template.type;

        if (category === '根节点' || data.nodeType === 'root') {
            // 根节点使用专门的 RootNode 组件
            entity.addComponent(new RootNode());
-        } else if (category === '动作') {
+        } else if (nodeType === NodeType.Action) {
+            // 根据节点类型而不是 category 来判断，这样可以支持自定义 category
            this.addActionComponent(entity, node);
-        } else if (category === '条件') {
+        } else if (nodeType === NodeType.Condition) {
            this.addConditionComponent(entity, node);
-        } else if (category === '组合') {
+        } else if (nodeType === NodeType.Composite) {
            this.addCompositeComponent(entity, node);
-        } else if (category === '装饰器') {
+        } else if (nodeType === NodeType.Decorator) {
            this.addDecoratorComponent(entity, node);
        }
    }
@@ -369,6 +371,21 @@ export class BehaviorTreeExecutor {
            const action = new ExecuteAction();
            action.actionCode = node.data.actionCode ?? 'return TaskStatus.Success;';
            entity.addComponent(action);
+        } else {
+            const ComponentClass = node.template.componentClass ||
+                                  (node.template.className ? ComponentRegistry.getComponentType(node.template.className) : null);
+
+            if (ComponentClass) {
+                try {
+                    const component = new (ComponentClass as any)();
+                    Object.assign(component, node.data);
+                    entity.addComponent(component as Component);
+                } catch (error) {
+                    logger.error(`创建动作组件失败: ${node.template.className}, error: ${error}`);
+                }
+            } else {
+                logger.warn(`未找到动作组件类: ${node.template.className}`);
+            }
        }
    }

@@ -400,6 +417,21 @@ export class BehaviorTreeExecutor {
            condition.conditionCode = node.data.conditionCode ?? '';
            condition.invertResult = node.data.invertResult ?? false;
            entity.addComponent(condition);
+        } else {
+            const ComponentClass = node.template.componentClass ||
+                                  (node.template.className ? ComponentRegistry.getComponentType(node.template.className) : null);
+
+            if (ComponentClass) {
+                try {
+                    const component = new (ComponentClass as any)();
+                    Object.assign(component, node.data);
+                    entity.addComponent(component as Component);
+                } catch (error) {
+                    logger.error(`创建条件组件失败: ${node.template.className}, error: ${error}`);
+                }
+            } else {
+                logger.warn(`未找到条件组件类: ${node.template.className}`);
+            }
        }
    }