refactor(editor): 提取行为树编辑器为独立包并重构编辑器架构 (#216)
* refactor(editor): 提取行为树编辑器为独立包并重构编辑器架构 * feat(editor): 添加插件市场功能 * feat(editor): 重构插件市场以支持版本管理和ZIP打包 * feat(editor): 重构插件发布流程并修复React渲染警告 * fix(plugin): 修复插件发布和市场的路径不一致问题 * feat: 重构插件发布流程并添加插件删除功能 * fix(editor): 完善插件删除功能并修复多个关键问题 * fix(auth): 修复自动登录与手动登录的竞态条件问题 * feat(editor): 重构插件管理流程 * feat(editor): 支持 ZIP 文件直接发布插件 - 新增 PluginSourceParser 解析插件源 - 重构发布流程支持文件夹和 ZIP 两种方式 - 优化发布向导 UI * feat(editor): 插件市场支持多版本安装 - 插件解压到项目 plugins 目录 - 新增 Tauri 后端安装/卸载命令 - 支持选择任意版本安装 - 修复打包逻辑，保留完整 dist 目录结构 * feat(editor): 个人中心支持多版本管理 - 合并同一插件的不同版本 - 添加版本历史展开/折叠功能 - 禁止有待审核 PR 时更新插件 * fix(editor): 修复 InspectorRegistry 服务注册 - InspectorRegistry 实现 IService 接口 - 注册到 Core.services 供插件使用 * feat(behavior-tree-editor): 完善插件注册和文件操作 - 添加文件创建模板和操作处理器 - 实现右键菜单创建行为树功能 - 修复文件读取权限问题（使用 Tauri 命令） - 添加 BehaviorTreeEditorPanel 组件 - 修复 rollup 配置支持动态导入 * feat(plugin): 完善插件构建和发布流程 * fix(behavior-tree-editor): 完整恢复编辑器并修复 Toast 集成 * fix(behavior-tree-editor): 修复节点选中、连线跟随和文件加载问题并优化性能 * fix(behavior-tree-editor): 修复端口连接失败问题并优化连线样式 * refactor(behavior-tree-editor): 移除调试面板功能简化代码结构 * refactor(behavior-tree-editor): 清理冗余代码合并重复逻辑 * feat(behavior-tree-editor): 完善编辑器核心功能增强扩展性 * fix(lint): 修复ESLint错误确保CI通过 * refactor(behavior-tree-editor): 优化编辑器工具栏和编译器功能 * refactor(behavior-tree-editor): 清理技术债务，优化代码质量 * fix(editor-app): 修复字符串替换安全问题
This commit is contained in:
YHH
GitHub
@@ -0,0 +1,126 @@
|
||||
/* 行为树编辑器面板样式 */
|
||||
.behavior-tree-editor-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.behavior-tree-editor-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state svg {
|
||||
color: #444;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state .hint {
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* 工具栏 */
|
||||
.editor-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background-color: #2d2d30;
|
||||
border-bottom: 1px solid #3e3e42;
|
||||
}
|
||||
|
||||
.toolbar-left,
|
||||
.toolbar-center,
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
color: #cccccc;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: #cccccc;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover:not(:disabled) {
|
||||
background-color: #3e3e42;
|
||||
border-color: #464647;
|
||||
}
|
||||
|
||||
.toolbar-btn:active:not(:disabled) {
|
||||
background-color: #2a2d2e;
|
||||
}
|
||||
|
||||
.toolbar-btn:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 画布容器 */
|
||||
.editor-canvas-container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 节点层 */
|
||||
.nodes-layer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 行为树画布 */
|
||||
.behavior-tree-canvas {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.canvas-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.canvas-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,260 @@
|
||||
import React, { useState, useCallback, useEffect } from 'react';
|
||||
import { Core, createLogger } from '@esengine/ecs-framework';
|
||||
import { MessageHub } from '@esengine/editor-core';
|
||||
import { open, save } from '@tauri-apps/plugin-dialog';
|
||||
import { useBehaviorTreeDataStore } from '../../stores';
|
||||
import { BehaviorTreeEditor } from '../BehaviorTreeEditor';
|
||||
import { BehaviorTreeService } from '../../services/BehaviorTreeService';
|
||||
import { showToast } from '../../services/NotificationService';
|
||||
import { FolderOpen } from 'lucide-react';
|
||||
import type { Node as BehaviorTreeNode } from '../../domain/models/Node';
|
||||
import './BehaviorTreeEditorPanel.css';
|
||||
|
||||
const logger = createLogger('BehaviorTreeEditorPanel');
|
||||
|
||||
/**
|
||||
* 行为树编辑器面板组件
|
||||
* 提供完整的行为树编辑功能，包括：
|
||||
* - 节点的创建、删除、移动
|
||||
* - 连接管理
|
||||
* - 黑板变量管理
|
||||
* - 文件保存和加载
|
||||
*/
|
||||
interface BehaviorTreeEditorPanelProps {
|
||||
/** 项目路径，用于文件系统操作 */
|
||||
projectPath?: string | null;
|
||||
/** 导出对话框打开回调 */
|
||||
onOpenExportDialog?: () => void;
|
||||
/** 获取可用文件列表回调 */
|
||||
onGetAvailableFiles?: () => string[];
|
||||
}
|
||||
|
||||
export const BehaviorTreeEditorPanel: React.FC<BehaviorTreeEditorPanelProps> = ({
|
||||
projectPath,
|
||||
onOpenExportDialog
|
||||
// onGetAvailableFiles - 保留用于未来的批量导出功能
|
||||
}) => {
|
||||
const isOpen = useBehaviorTreeDataStore((state) => state.isOpen);
|
||||
const blackboardVariables = useBehaviorTreeDataStore((state) => state.blackboardVariables);
|
||||
|
||||
// 文件状态管理
|
||||
const [currentFilePath, setCurrentFilePath] = useState<string | null>(null);
|
||||
const [currentFileName, setCurrentFileName] = useState<string>('');
|
||||
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
|
||||
const [lastSavedSnapshot, setLastSavedSnapshot] = useState<string>('');
|
||||
|
||||
// 监听树的变化来检测未保存更改
|
||||
const tree = useBehaviorTreeDataStore((state) => state.tree);
|
||||
const storeFilePath = useBehaviorTreeDataStore((state) => state.currentFilePath);
|
||||
const storeFileName = useBehaviorTreeDataStore((state) => state.currentFileName);
|
||||
|
||||
// 初始化时从 store 读取文件信息（解决时序问题）
|
||||
useEffect(() => {
|
||||
if (storeFilePath && !currentFilePath) {
|
||||
setCurrentFilePath(storeFilePath);
|
||||
setCurrentFileName(storeFileName);
|
||||
const loadedTree = useBehaviorTreeDataStore.getState().tree;
|
||||
setLastSavedSnapshot(JSON.stringify(loadedTree));
|
||||
setHasUnsavedChanges(false);
|
||||
}
|
||||
}, [storeFilePath, storeFileName, currentFilePath]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && lastSavedSnapshot) {
|
||||
const currentSnapshot = JSON.stringify(tree);
|
||||
setHasUnsavedChanges(currentSnapshot !== lastSavedSnapshot);
|
||||
}
|
||||
}, [tree, lastSavedSnapshot, isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const messageHub = Core.services.resolve(MessageHub);
|
||||
const unsubscribe = messageHub.subscribe('behavior-tree:file-opened', (data: { filePath: string; fileName: string }) => {
|
||||
setCurrentFilePath(data.filePath);
|
||||
setCurrentFileName(data.fileName);
|
||||
const loadedTree = useBehaviorTreeDataStore.getState().tree;
|
||||
setLastSavedSnapshot(JSON.stringify(loadedTree));
|
||||
setHasUnsavedChanges(false);
|
||||
});
|
||||
|
||||
return () => {
|
||||
unsubscribe();
|
||||
};
|
||||
} catch (error) {
|
||||
logger.error('Failed to subscribe to file-opened event:', error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleNodeSelect = useCallback((node: BehaviorTreeNode) => {
|
||||
try {
|
||||
const messageHub = Core.services.resolve(MessageHub);
|
||||
messageHub.publish('behavior-tree:node-selected', { data: node });
|
||||
} catch (error) {
|
||||
logger.error('Failed to publish node selection:', error);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSave = useCallback(async () => {
|
||||
try {
|
||||
let filePath = currentFilePath;
|
||||
|
||||
if (!filePath) {
|
||||
const selected = await save({
|
||||
filters: [{ name: 'Behavior Tree', extensions: ['btree'] }],
|
||||
defaultPath: projectPath || undefined,
|
||||
title: '保存行为树'
|
||||
});
|
||||
|
||||
if (!selected) return;
|
||||
filePath = selected;
|
||||
}
|
||||
|
||||
const service = Core.services.resolve(BehaviorTreeService);
|
||||
await service.saveToFile(filePath);
|
||||
|
||||
setCurrentFilePath(filePath);
|
||||
const fileName = filePath.split(/[\\/]/).pop()?.replace('.btree', '') || 'Untitled';
|
||||
setCurrentFileName(fileName);
|
||||
setLastSavedSnapshot(JSON.stringify(tree));
|
||||
setHasUnsavedChanges(false);
|
||||
|
||||
showToast(`文件已保存: ${fileName}.btree`, 'success');
|
||||
} catch (error) {
|
||||
logger.error('Failed to save file:', error);
|
||||
showToast(`保存失败: ${error}`, 'error');
|
||||
}
|
||||
}, [currentFilePath, projectPath, tree]);
|
||||
|
||||
const handleOpen = useCallback(async () => {
|
||||
try {
|
||||
if (hasUnsavedChanges) {
|
||||
const confirmed = window.confirm('当前文件有未保存的更改，是否继续打开新文件？');
|
||||
if (!confirmed) return;
|
||||
}
|
||||
|
||||
const selected = await open({
|
||||
filters: [{ name: 'Behavior Tree', extensions: ['btree'] }],
|
||||
multiple: false,
|
||||
directory: false,
|
||||
defaultPath: projectPath || undefined,
|
||||
title: '打开行为树'
|
||||
});
|
||||
|
||||
if (!selected) return;
|
||||
|
||||
const filePath = selected as string;
|
||||
const service = Core.services.resolve(BehaviorTreeService);
|
||||
await service.loadFromFile(filePath);
|
||||
|
||||
setCurrentFilePath(filePath);
|
||||
const fileName = filePath.split(/[\\/]/).pop()?.replace('.btree', '') || 'Untitled';
|
||||
setCurrentFileName(fileName);
|
||||
|
||||
const loadedTree = useBehaviorTreeDataStore.getState().tree;
|
||||
setLastSavedSnapshot(JSON.stringify(loadedTree));
|
||||
setHasUnsavedChanges(false);
|
||||
|
||||
showToast(`文件已打开: ${fileName}.btree`, 'success');
|
||||
} catch (error) {
|
||||
logger.error('Failed to open file:', error);
|
||||
showToast(`打开失败: ${error}`, 'error');
|
||||
}
|
||||
}, [hasUnsavedChanges, projectPath]);
|
||||
|
||||
const handleExport = useCallback(() => {
|
||||
if (onOpenExportDialog) {
|
||||
onOpenExportDialog();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const messageHub = Core.services.resolve(MessageHub);
|
||||
messageHub.publish('compiler:open-dialog', {
|
||||
compilerId: 'behavior-tree',
|
||||
currentFileName: currentFileName || undefined,
|
||||
projectPath: projectPath || undefined
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error('Failed to open export dialog:', error);
|
||||
showToast(`无法打开导出对话框: ${error}`, 'error');
|
||||
}
|
||||
}, [onOpenExportDialog, currentFileName, projectPath]);
|
||||
|
||||
const handleCopyToClipboard = useCallback(async () => {
|
||||
try {
|
||||
const store = useBehaviorTreeDataStore.getState();
|
||||
const metadata = { name: currentFileName || 'Untitled', description: '' };
|
||||
const jsonContent = store.exportToJSON(metadata);
|
||||
|
||||
await navigator.clipboard.writeText(jsonContent);
|
||||
showToast('已复制到剪贴板', 'success');
|
||||
} catch (error) {
|
||||
logger.error('Failed to copy to clipboard:', error);
|
||||
showToast(`复制失败: ${error}`, 'error');
|
||||
}
|
||||
}, [currentFileName]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.ctrlKey && e.key === 's') {
|
||||
e.preventDefault();
|
||||
handleSave();
|
||||
}
|
||||
if (e.ctrlKey && e.key === 'o') {
|
||||
e.preventDefault();
|
||||
handleOpen();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [handleSave, handleOpen]);
|
||||
|
||||
if (!isOpen) {
|
||||
return (
|
||||
<div className="behavior-tree-editor-empty">
|
||||
<div className="empty-state">
|
||||
<FolderOpen size={48} />
|
||||
<p>No behavior tree file opened</p>
|
||||
<p className="hint">Double-click a .btree file to edit</p>
|
||||
<button
|
||||
onClick={handleOpen}
|
||||
style={{
|
||||
marginTop: '16px',
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#0e639c',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
fontSize: '13px',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}
|
||||
>
|
||||
<FolderOpen size={16} />
|
||||
打开文件
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="behavior-tree-editor-panel">
|
||||
<BehaviorTreeEditor
|
||||
blackboardVariables={blackboardVariables}
|
||||
projectPath={projectPath}
|
||||
showToolbar={true}
|
||||
currentFileName={currentFileName}
|
||||
hasUnsavedChanges={hasUnsavedChanges}
|
||||
onNodeSelect={handleNodeSelect}
|
||||
onSave={handleSave}
|
||||
onOpen={handleOpen}
|
||||
onExport={handleExport}
|
||||
onCopyToClipboard={handleCopyToClipboard}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,45 @@
|
||||
.behavior-tree-properties-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.properties-panel-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.properties-panel-tabs .tab-button {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.properties-panel-tabs .tab-button:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.properties-panel-tabs .tab-button.active {
|
||||
color: var(--primary-color);
|
||||
border-bottom-color: var(--primary-color);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.properties-panel-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
Reference in New Issue
Block a user