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
244
packages/editor-app/src/components/CompilerConfigDialog.tsx
Normal file
244
packages/editor-app/src/components/CompilerConfigDialog.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { Core, IService, ServiceType } from '@esengine/ecs-framework';
|
||||
import { CompilerRegistry, ICompiler, CompilerContext, CompileResult, IFileSystem, IDialog, FileEntry } from '@esengine/editor-core';
|
||||
import { X, Play, Loader2 } from 'lucide-react';
|
||||
import { open as tauriOpen, save as tauriSave, message as tauriMessage, confirm as tauriConfirm } from '@tauri-apps/plugin-dialog';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import '../styles/CompilerConfigDialog.css';
|
||||
|
||||
interface DirectoryEntry {
|
||||
name: string;
|
||||
path: string;
|
||||
is_dir: boolean;
|
||||
}
|
||||
|
||||
interface CompilerConfigDialogProps {
|
||||
isOpen: boolean;
|
||||
compilerId: string;
|
||||
projectPath: string | null;
|
||||
currentFileName?: string;
|
||||
onClose: () => void;
|
||||
onCompileComplete?: (result: CompileResult) => void;
|
||||
}
|
||||
|
||||
export const CompilerConfigDialog: React.FC<CompilerConfigDialogProps> = ({
|
||||
isOpen,
|
||||
compilerId,
|
||||
projectPath,
|
||||
currentFileName,
|
||||
onClose,
|
||||
onCompileComplete
|
||||
}) => {
|
||||
const [compiler, setCompiler] = useState<ICompiler | null>(null);
|
||||
const [options, setOptions] = useState<unknown>(null);
|
||||
const [isCompiling, setIsCompiling] = useState(false);
|
||||
const [compileResult, setCompileResult] = useState<CompileResult | null>(null);
|
||||
const optionsRef = useRef<unknown>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && compilerId) {
|
||||
try {
|
||||
const registry = Core.services.resolve(CompilerRegistry);
|
||||
console.log('[CompilerConfigDialog] Registry resolved:', registry);
|
||||
console.log('[CompilerConfigDialog] Available compilers:', registry.getAll().map(c => c.id));
|
||||
const comp = registry.get(compilerId);
|
||||
console.log(`[CompilerConfigDialog] Looking for compiler: ${compilerId}, found:`, comp);
|
||||
setCompiler(comp || null);
|
||||
} catch (error) {
|
||||
console.error('[CompilerConfigDialog] Failed to resolve CompilerRegistry:', error);
|
||||
setCompiler(null);
|
||||
}
|
||||
}
|
||||
}, [isOpen, compilerId]);
|
||||
|
||||
const handleOptionsChange = useCallback((newOptions: unknown) => {
|
||||
optionsRef.current = newOptions;
|
||||
setOptions(newOptions);
|
||||
}, []);
|
||||
|
||||
const createFileSystem = (): IFileSystem => ({
|
||||
readFile: async (path: string) => {
|
||||
return await invoke<string>('read_file_content', { path });
|
||||
},
|
||||
writeFile: async (path: string, content: string) => {
|
||||
await invoke('write_file_content', { path, content });
|
||||
},
|
||||
writeBinary: async (path: string, data: Uint8Array) => {
|
||||
await invoke('write_binary_file', { filePath: path, content: Array.from(data) });
|
||||
},
|
||||
exists: async (path: string) => {
|
||||
return await invoke<boolean>('path_exists', { path });
|
||||
},
|
||||
createDirectory: async (path: string) => {
|
||||
await invoke('create_directory', { path });
|
||||
},
|
||||
listDirectory: async (path: string): Promise<FileEntry[]> => {
|
||||
const entries = await invoke<DirectoryEntry[]>('list_directory', { path });
|
||||
return entries.map(e => ({
|
||||
name: e.name,
|
||||
path: e.path,
|
||||
isDirectory: e.is_dir
|
||||
}));
|
||||
},
|
||||
deleteFile: async (path: string) => {
|
||||
await invoke('delete_file', { path });
|
||||
},
|
||||
deleteDirectory: async (path: string) => {
|
||||
await invoke('delete_folder', { path });
|
||||
},
|
||||
scanFiles: async (dir: string, pattern: string) => {
|
||||
// Check if directory exists, create if not
|
||||
const dirExists = await invoke<boolean>('path_exists', { path: dir });
|
||||
if (!dirExists) {
|
||||
await invoke('create_directory', { path: dir });
|
||||
return []; // New directory has no files
|
||||
}
|
||||
const entries = await invoke<DirectoryEntry[]>('list_directory', { path: dir });
|
||||
const ext = pattern.replace(/\*/g, '');
|
||||
return entries
|
||||
.filter(e => !e.is_dir && e.name.endsWith(ext))
|
||||
.map(e => e.name.replace(ext, ''));
|
||||
}
|
||||
});
|
||||
|
||||
const createDialog = (): IDialog => ({
|
||||
openDialog: async (opts) => {
|
||||
const result = await tauriOpen({
|
||||
directory: opts.directory,
|
||||
multiple: opts.multiple,
|
||||
title: opts.title,
|
||||
defaultPath: opts.defaultPath
|
||||
});
|
||||
return result;
|
||||
},
|
||||
saveDialog: async (opts) => {
|
||||
const result = await tauriSave({
|
||||
title: opts.title,
|
||||
defaultPath: opts.defaultPath,
|
||||
filters: opts.filters
|
||||
});
|
||||
return result;
|
||||
},
|
||||
showMessage: async (title: string, message: string, type?: 'info' | 'warning' | 'error') => {
|
||||
await tauriMessage(message, { title, kind: type || 'info' });
|
||||
},
|
||||
showConfirm: async (title: string, message: string) => {
|
||||
return await tauriConfirm(message, { title });
|
||||
}
|
||||
});
|
||||
|
||||
const createContext = (): CompilerContext => ({
|
||||
projectPath,
|
||||
moduleContext: {
|
||||
fileSystem: createFileSystem(),
|
||||
dialog: createDialog()
|
||||
},
|
||||
getService: <T extends IService>(serviceClass: ServiceType<T>): T | undefined => {
|
||||
try {
|
||||
return Core.services.resolve(serviceClass);
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const handleCompile = async () => {
|
||||
if (!compiler || !optionsRef.current) return;
|
||||
|
||||
setIsCompiling(true);
|
||||
setCompileResult(null);
|
||||
|
||||
try {
|
||||
const context = createContext();
|
||||
const result = await compiler.compile(optionsRef.current, context);
|
||||
setCompileResult(result);
|
||||
onCompileComplete?.(result);
|
||||
|
||||
if (result.success) {
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
}, 2000);
|
||||
}
|
||||
} catch (error) {
|
||||
setCompileResult({
|
||||
success: false,
|
||||
message: `编译失败: ${error}`,
|
||||
errors: [String(error)]
|
||||
});
|
||||
} finally {
|
||||
setIsCompiling(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const context = createContext();
|
||||
|
||||
return (
|
||||
<div className="compiler-dialog-overlay">
|
||||
<div className="compiler-dialog">
|
||||
<div className="compiler-dialog-header">
|
||||
<h3>{compiler?.name || '编译器配置'}</h3>
|
||||
<button className="close-button" onClick={onClose}>
|
||||
<X size={18} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="compiler-dialog-body">
|
||||
{compiler?.createConfigUI ? (
|
||||
compiler.createConfigUI(handleOptionsChange, context)
|
||||
) : (
|
||||
<div className="no-config">
|
||||
{compiler ? '该编译器没有配置界面' : '编译器未找到'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{compileResult && (
|
||||
<div className={`compile-result ${compileResult.success ? 'success' : 'error'}`}>
|
||||
<div className="result-message">{compileResult.message}</div>
|
||||
{compileResult.outputFiles && compileResult.outputFiles.length > 0 && (
|
||||
<div className="output-files">
|
||||
已生成 {compileResult.outputFiles.length} 个文件
|
||||
</div>
|
||||
)}
|
||||
{compileResult.errors && compileResult.errors.length > 0 && (
|
||||
<div className="error-list">
|
||||
{compileResult.errors.map((err, i) => (
|
||||
<div key={i} className="error-item">{err}</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="compiler-dialog-footer">
|
||||
<button
|
||||
className="cancel-button"
|
||||
onClick={onClose}
|
||||
disabled={isCompiling}
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
className="compile-button"
|
||||
onClick={handleCompile}
|
||||
disabled={isCompiling || !compiler || !options}
|
||||
>
|
||||
{isCompiling ? (
|
||||
<>
|
||||
<Loader2 size={16} className="spinning" />
|
||||
编译中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play size={16} />
|
||||
编译
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user