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/canvas/GridBackground.tsx

@@ -0,0 +1,127 @@
+import React, { useMemo } from 'react';
+
+interface GridBackgroundProps {
+    canvasOffset: { x: number; y: number };
+    canvasScale: number;
+    width: number;
+    height: number;
+}
+
+/**
+ * 编辑器网格背景
+ */
+export const GridBackground: React.FC<GridBackgroundProps> = ({
+    canvasOffset,
+    canvasScale,
+    width,
+    height
+}) => {
+    const gridPattern = useMemo(() => {
+        // 基础网格大小（未缩放）
+        const baseGridSize = 20;
+        const baseDotSize = 1.5;
+
+        // 根据缩放级别调整网格大小
+        const gridSize = baseGridSize * canvasScale;
+        const dotSize = Math.max(baseDotSize, baseDotSize * canvasScale);
+
+        // 计算网格偏移（考虑画布偏移）
+        const offsetX = canvasOffset.x % gridSize;
+        const offsetY = canvasOffset.y % gridSize;
+
+        // 计算需要渲染的网格点数量
+        const cols = Math.ceil(width / gridSize) + 2;
+        const rows = Math.ceil(height / gridSize) + 2;
+
+        const dots: Array<{ x: number; y: number }> = [];
+
+        for (let i = -1; i < rows; i++) {
+            for (let j = -1; j < cols; j++) {
+                dots.push({
+                    x: j * gridSize + offsetX,
+                    y: i * gridSize + offsetY
+                });
+            }
+        }
+
+        return { dots, dotSize, gridSize };
+    }, [canvasOffset, canvasScale, width, height]);
+
+    // 大网格（每5个小格一个大格）
+    const majorGridPattern = useMemo(() => {
+        const majorGridSize = gridPattern.gridSize * 5;
+        const offsetX = canvasOffset.x % majorGridSize;
+        const offsetY = canvasOffset.y % majorGridSize;
+
+        const lines: Array<{ type: 'h' | 'v'; pos: number }> = [];
+
+        // 垂直线
+        const vCols = Math.ceil(width / majorGridSize) + 2;
+        for (let i = -1; i < vCols; i++) {
+            lines.push({
+                type: 'v',
+                pos: i * majorGridSize + offsetX
+            });
+        }
+
+        // 水平线
+        const hRows = Math.ceil(height / majorGridSize) + 2;
+        for (let i = -1; i < hRows; i++) {
+            lines.push({
+                type: 'h',
+                pos: i * majorGridSize + offsetY
+            });
+        }
+
+        return lines;
+    }, [canvasOffset, canvasScale, width, height, gridPattern.gridSize]);
+
+    return (
+        <svg
+            style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none'
+            }}
+        >
+            {/* 主网格线 */}
+            {majorGridPattern.map((line, idx) => (
+                line.type === 'v' ? (
+                    <line
+                        key={`v-${idx}`}
+                        x1={line.pos}
+                        y1={0}
+                        x2={line.pos}
+                        y2={height}
+                        stroke="rgba(255, 255, 255, 0.03)"
+                        strokeWidth="1"
+                    />
+                ) : (
+                    <line
+                        key={`h-${idx}`}
+                        x1={0}
+                        y1={line.pos}
+                        x2={width}
+                        y2={line.pos}
+                        stroke="rgba(255, 255, 255, 0.03)"
+                        strokeWidth="1"
+                    />
+                )
+            ))}
+
+            {/* 点阵网格 */}
+            {gridPattern.dots.map((dot, idx) => (
+                <circle
+                    key={idx}
+                    cx={dot.x}
+                    cy={dot.y}
+                    r={gridPattern.dotSize}
+                    fill="rgba(255, 255, 255, 0.15)"
+                />
+            ))}
+        </svg>
+    );
+};