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): 修复字符串替换安全问题

packages/behavior-tree-editor/src/components/common/DraggablePanel.tsx

@@ -0,0 +1,181 @@
+import React, { useState, useRef, useEffect, ReactNode } from 'react';
+import { GripVertical } from 'lucide-react';
+
+interface DraggablePanelProps {
+    title: string | ReactNode;
+    icon?: ReactNode;
+    isVisible: boolean;
+    onClose: () => void;
+    width?: number;
+    maxHeight?: number;
+    initialPosition?: { x: number; y: number };
+    headerActions?: ReactNode;
+    children: ReactNode;
+    footer?: ReactNode | false;
+}
+
+/**
+ * 可拖动面板通用组件
+ * 提供标题栏拖动、关闭按钮等基础功能
+ */
+export const DraggablePanel: React.FC<DraggablePanelProps> = ({
+    title,
+    icon,
+    isVisible,
+    onClose,
+    width = 400,
+    maxHeight = 600,
+    initialPosition = { x: 20, y: 100 },
+    headerActions,
+    children,
+    footer
+}) => {
+    const [position, setPosition] = useState(initialPosition);
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+    const panelRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!isVisible) return;
+
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!isDragging) return;
+
+            const newX = e.clientX - dragOffset.x;
+            const newY = e.clientY - dragOffset.y;
+
+            // 限制面板在视口内
+            const maxX = window.innerWidth - width;
+            const maxY = window.innerHeight - 100;
+
+            setPosition({
+                x: Math.max(0, Math.min(newX, maxX)),
+                y: Math.max(0, Math.min(newY, maxY))
+            });
+        };
+
+        const handleMouseUp = () => {
+            setIsDragging(false);
+        };
+
+        if (isDragging) {
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+        }
+
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isDragging, dragOffset, width]);
+
+    const handleMouseDown = (e: React.MouseEvent) => {
+        if (!panelRef.current) return;
+
+        const rect = panelRef.current.getBoundingClientRect();
+        setDragOffset({
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top
+        });
+        setIsDragging(true);
+    };
+
+    if (!isVisible) return null;
+
+    return (
+        <div
+            ref={panelRef}
+            style={{
+                position: 'fixed',
+                left: `${position.x}px`,
+                top: `${position.y}px`,
+                width: `${width}px`,
+                maxHeight: `${maxHeight}px`,
+                backgroundColor: '#1e1e1e',
+                border: '1px solid #3f3f3f',
+                borderRadius: '8px',
+                boxShadow: '0 4px 20px rgba(0,0,0,0.5)',
+                zIndex: 1000,
+                display: 'flex',
+                flexDirection: 'column',
+                userSelect: isDragging ? 'none' : 'auto'
+            }}
+        >
+            {/* 可拖动标题栏 */}
+            <div
+                onMouseDown={handleMouseDown}
+                style={{
+                    padding: '12px 16px',
+                    borderBottom: '1px solid #3f3f3f',
+                    backgroundColor: '#252525',
+                    borderTopLeftRadius: '8px',
+                    borderTopRightRadius: '8px',
+                    cursor: isDragging ? 'grabbing' : 'grab',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                }}
+            >
+                <div style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px'
+                }}>
+                    <GripVertical size={14} color="#666" style={{ flexShrink: 0 }} />
+                    {icon}
+                    {typeof title === 'string' ? (
+                        <span style={{
+                            fontSize: '14px',
+                            fontWeight: 'bold',
+                            color: '#fff'
+                        }}>
+                            {title}
+                        </span>
+                    ) : (
+                        title
+                    )}
+                </div>
+                <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+                    {headerActions}
+                    <button
+                        onClick={onClose}
+                        onMouseDown={(e) => e.stopPropagation()}
+                        style={{
+                            padding: '4px 8px',
+                            backgroundColor: '#3c3c3c',
+                            border: 'none',
+                            borderRadius: '4px',
+                            color: '#ccc',
+                            fontSize: '11px',
+                            cursor: 'pointer'
+                        }}
+                    >
+                        ✕
+                    </button>
+                </div>
+            </div>
+
+            {/* 内容区域 */}
+            <div style={{
+                flex: 1,
+                overflowY: 'auto',
+                display: 'flex',
+                flexDirection: 'column'
+            }}>
+                {children}
+            </div>
+
+            {/* 页脚 */}
+            {footer && (
+                <div style={{
+                    borderTop: '1px solid #3f3f3f',
+                    backgroundColor: '#252525',
+                    borderBottomLeftRadius: '8px',
+                    borderBottomRightRadius: '8px'
+                }}>
+                    {footer}
+                </div>
+            )}
+        </div>
+    );
+};