feat: 完成第一阶段核心功能实现\n\n- 添加 manage_components 工具\n- 添加 manage_script 工具（默认创建TS脚本）\n- 添加 batch_execute 工具\n- 添加 manage_asset 工具\n- 修复面板布局问题\n- 添加默认父目录创建功能\n- 更新 README 文档\n- 创建 DEVELOPMENT 开发文档

panel/index.html

@@ -1,23 +1,71 @@
 <div class="mcp-container">
-	<div class="toolbar">
-		<div class="ctrl-group">
-			<span>Port:</span>
-			<ui-input id="portInput" value="3456"></ui-input>
-			<ui-button id="btnToggle" class="green">Start</ui-button>
-		</div>
-
-		<!-- 新增的自动启动勾选框 -->
-		<div class="ctrl-group" style="margin-left: 15px">
-			<ui-checkbox id="autoStartCheck">Auto Start</ui-checkbox>
-		</div>
-
-		<div class="spacer"></div>
-		<ui-button id="btnClear" class="transparent">Clear</ui-button>
-		<ui-button id="btnCopy" class="transparent">Copy All</ui-button>
+	<!-- 标签页 -->
+	<div class="tabs">
+		<ui-button id="tabMain" class="tab-button active">Main</ui-button>
+		<ui-button id="tabTest" class="tab-button">Tool Test</ui-button>
 	</div>
 
-	<!-- 日志区域 -->
-	<div id="logConsole" class="log-view"></div>
+	<!-- 主面板内容 -->
+	<div id="panelMain" class="tab-content active">
+		<div class="toolbar">
+			<div class="ctrl-group">
+				<span>Port:</span>
+				<ui-input id="portInput" value="3456"></ui-input>
+				<ui-button id="btnToggle" class="green">Start</ui-button>
+			</div>
+
+			<!-- 新增的自动启动勾选框 -->
+			<div class="ctrl-group" style="margin-left: 15px">
+				<ui-checkbox id="autoStartCheck">Auto Start</ui-checkbox>
+			</div>
+
+			<div class="spacer"></div>
+			<ui-button id="btnClear" class="transparent">Clear</ui-button>
+			<ui-button id="btnCopy" class="transparent">Copy All</ui-button>
+		</div>
+
+		<!-- 日志区域 -->
+		<div id="logConsole" class="log-view"></div>
+	</div>
+
+	<!-- 测试面板内容 -->
+	<div id="panelTest" class="tab-content">
+		<div class="test-container">
+			<div class="test-layout">
+				<!-- 左侧工具列表 -->
+				<div class="left-panel">
+					<div class="tool-name-section">
+						<label for="toolName">工具名称:</label>
+						<ui-input id="toolName" placeholder="例如: manage_components"></ui-input>
+					</div>
+					<div class="tools-list" id="toolsList"></div>
+				</div>
+				
+				<!-- 右侧输入输出 -->
+				<div class="right-panel">
+					<div class="form-group">
+						<label for="toolParams">工具参数 (JSON格式):</label>
+						<textarea id="toolParams" placeholder="例如: {
+  \"nodeId\": \"节点UUID\",
+  \"action\": \"add\",
+  \"componentType\": \"cc.Button\"
+}"></textarea>
+					</div>
+					
+					<div class="button-group">
+						<ui-button id="testBtn" class="primary">测试工具</ui-button>
+						<ui-button id="listToolsBtn" class="secondary">获取工具列表</ui-button>
+						<ui-button id="clearBtn" class="secondary">清空结果</ui-button>
+					</div>
+					
+					<div class="result">
+						<h2>测试结果:</h2>
+						<textarea id="resultContent" placeholder="点击\"测试工具\"按钮开始测试"></textarea>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </div>
 
 <style>
@@ -34,6 +82,38 @@
 		padding: 5px;
 		box-sizing: border-box;
 	}
+	
+	/* 标签页样式 */
+	.tabs {
+		display: flex;
+		border-bottom: 1px solid #444;
+		margin-bottom: 10px;
+		flex-shrink: 0;
+	}
+	.tab-button {
+		padding: 8px 16px;
+		margin-right: 2px;
+		border: none;
+		background-color: #333;
+		color: #ccc;
+		cursor: pointer;
+		border-bottom: 2px solid transparent;
+	}
+	.tab-button.active {
+		background-color: #2d2d2d;
+		color: #fff;
+		border-bottom-color: #4CAF50;
+	}
+	.tab-content {
+		display: none;
+		flex: 1;
+		flex-direction: column;
+	}
+	.tab-content.active {
+		display: flex;
+	}
+
+	/* 主面板样式 */
 	.toolbar {
 		display: flex;
 		align-items: center;
@@ -102,4 +182,178 @@
 		border-left-color: #c678dd;
 		color: #d19a66;
 	}
+
+	/* 测试面板样式 */
+	.test-container {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		padding: 10px;
+		box-sizing: border-box;
+	}
+	
+	.test-layout {
+		display: flex;
+		height: 100%;
+		gap: 15px;
+	}
+	
+	.left-panel {
+		width: 300px;
+		flex-shrink: 0;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		background-color: #333;
+		border-radius: 4px;
+		padding: 10px;
+	}
+	
+	.right-panel {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 15px;
+		height: 100%;
+		min-height: 0;
+	}
+	
+	.left-panel .tool-name-section {
+		margin-bottom: 10px;
+	}
+	
+	.left-panel .tools-list {
+		flex: 1;
+		border: 1px solid #444;
+		border-radius: 4px;
+		padding: 5px;
+		background-color: #222;
+		overflow-y: auto;
+		min-height: 0;
+	}
+	
+	.left-panel label {
+		display: block;
+		margin-bottom: 5px;
+		color: #ccc;
+		font-size: 12px;
+	}
+	
+	.left-panel ui-input {
+		width: 100%;
+		padding: 8px;
+		border: 1px solid #444;
+		border-radius: 4px;
+		font-size: 12px;
+		box-sizing: border-box;
+		background-color: #222;
+		color: #fff;
+		margin-bottom: 10px;
+	}
+	
+	.right-panel .form-group {
+		margin-bottom: 0;
+	}
+	
+	.right-panel .result {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+		margin-bottom: 0;
+	}
+	
+	.right-panel .result textarea {
+		flex: 1;
+		min-height: 100px;
+	}
+	
+	.right-panel .button-group {
+		flex-shrink: 0;
+	}
+	.form-group {
+		margin-bottom: 15px;
+		background-color: #333;
+		padding: 10px;
+		border-radius: 4px;
+	}
+	.form-group label {
+		display: block;
+		margin-bottom: 5px;
+		color: #ccc;
+		font-size: 12px;
+	}
+	.form-group ui-input,
+	.form-group textarea {
+		width: 100%;
+		padding: 8px;
+		border: 1px solid #444;
+		border-radius: 4px;
+		font-size: 12px;
+		box-sizing: border-box;
+		background-color: #222;
+		color: #fff;
+	}
+	.form-group textarea {
+		height: 150px;
+		resize: vertical;
+		font-family: 'Courier New', monospace;
+	}
+	.tool-item {
+		padding: 5px;
+		margin-bottom: 5px;
+		background-color: #333;
+		border-radius: 3px;
+		cursor: pointer;
+		font-size: 12px;
+		color: #ccc;
+	}
+	.tool-item:hover {
+		background-color: #444;
+	}
+	.button-group {
+		display: flex;
+		gap: 10px;
+		margin-bottom: 15px;
+	}
+	.button-group ui-button {
+		padding: 8px 16px;
+		border: none;
+		border-radius: 4px;
+		cursor: pointer;
+		font-size: 12px;
+		font-weight: bold;
+	}
+	.button-group ui-button.primary {
+		background-color: #4CAF50;
+		color: white;
+	}
+	.button-group ui-button.secondary {
+		background-color: #2196F3;
+		color: white;
+	}
+	.result {
+		flex: 1;
+		background-color: #333;
+		padding: 15px;
+		border-radius: 4px;
+	}
+	.result h2 {
+		color: #ccc;
+		font-size: 14px;
+		margin-bottom: 10px;
+	}
+	.result textarea {
+		width: 100%;
+		height: 100%;
+		background-color: #222;
+		color: #fff;
+		border: 1px solid #444;
+		border-radius: 4px;
+		padding: 10px;
+		font-family: 'Courier New', monospace;
+		font-size: 12px;
+		box-sizing: border-box;
+		resize: vertical;
+	}
 </style>

panel/index.js

@@ -23,6 +23,24 @@ Editor.Panel.extend({
 		const btnCopy = this.shadowRoot.querySelector("#btnCopy");
 		const logView = this.shadowRoot.querySelector("#logConsole");
 
+		// 标签页元素
+		const tabMain = this.shadowRoot.querySelector("#tabMain");
+		const tabTest = this.shadowRoot.querySelector("#tabTest");
+		const panelMain = this.shadowRoot.querySelector("#panelMain");
+		const panelTest = this.shadowRoot.querySelector("#panelTest");
+
+		// 测试面板元素
+		const toolNameInput = this.shadowRoot.querySelector("#toolName");
+		const toolParamsTextarea = this.shadowRoot.querySelector("#toolParams");
+		const toolsList = this.shadowRoot.querySelector("#toolsList");
+		const testBtn = this.shadowRoot.querySelector("#testBtn");
+		const listToolsBtn = this.shadowRoot.querySelector("#listToolsBtn");
+		const clearBtn = this.shadowRoot.querySelector("#clearBtn");
+		const resultContent = this.shadowRoot.querySelector("#resultContent");
+
+		let tools = [];
+		const API_BASE = 'http://localhost:3456';
+
 		// 初始化
 		Editor.Ipc.sendToMain("mcp-bridge:get-server-state", (err, data) => {
 			if (data) {
@@ -32,6 +50,23 @@ Editor.Panel.extend({
 			}
 		});
 
+		// 标签页切换
+		tabMain.addEventListener("confirm", () => {
+			tabMain.classList.add("active");
+			tabTest.classList.remove("active");
+			panelMain.classList.add("active");
+			panelTest.classList.remove("active");
+		});
+
+		tabTest.addEventListener("confirm", () => {
+			tabTest.classList.add("active");
+			tabMain.classList.remove("active");
+			panelTest.classList.add("active");
+			panelMain.classList.remove("active");
+			// 自动获取工具列表
+			this.getToolsList();
+		});
+
 		btnToggle.addEventListener("confirm", () => {
 			Editor.Ipc.sendToMain("mcp-bridge:toggle-server", parseInt(portInput.value));
 		});
@@ -45,6 +80,7 @@ Editor.Panel.extend({
 			require("electron").clipboard.writeText(logView.innerText);
 			Editor.success("All logs copied!");
 		});
+
 		Editor.Ipc.sendToMain("mcp-bridge:get-server-state", (err, data) => {
 			if (data) {
 				portInput.value = data.config.port;
@@ -56,10 +92,218 @@ Editor.Panel.extend({
 				data.logs.forEach((log) => this.renderLog(log));
 			}
 		});
+
 		autoStartCheck.addEventListener("change", (event) => {
 			// event.target.value 在 ui-checkbox 中是布尔值
 			Editor.Ipc.sendToMain("mcp-bridge:set-auto-start", event.target.value);
 		});
+
+		// 测试面板事件
+		testBtn.addEventListener("confirm", () => this.testTool());
+		listToolsBtn.addEventListener("confirm", () => this.getToolsList());
+		clearBtn.addEventListener("confirm", () => this.clearResult());
+
+		// 获取工具列表
+		this.getToolsList = function() {
+			this.showResult('获取工具列表中...');
+			
+			fetch(`${API_BASE}/list-tools`)
+				.then(response => {
+					if (!response.ok) {
+						throw new Error(`HTTP error! status: ${response.status}`);
+					}
+					return response.json();
+				})
+				.then(data => {
+					if (data.tools) {
+						tools = data.tools;
+						this.displayToolsList(tools);
+						this.showResult(`成功获取 ${tools.length} 个工具`, 'success');
+					} else {
+						this.showResult('获取工具列表失败：未找到工具数据', 'error');
+					}
+				})
+				.catch(error => {
+					this.showResult(`获取工具列表失败：${error.message}`, 'error');
+				});
+		};
+
+		// 显示工具列表
+		this.displayToolsList = function(tools) {
+			toolsList.innerHTML = '';
+			
+			tools.forEach(tool => {
+				const toolItem = document.createElement('div');
+				toolItem.className = 'tool-item';
+				toolItem.textContent = `${tool.name} - ${tool.description}`;
+				toolItem.addEventListener('click', () => {
+					toolNameInput.value = tool.name;
+					// 尝试填充示例参数
+					this.fillExampleParams(tool);
+				});
+				toolsList.appendChild(toolItem);
+			});
+		};
+
+		// 填充示例参数
+		this.fillExampleParams = function(tool) {
+			let exampleParams = {};
+			
+			switch (tool.name) {
+				case 'get_selected_node':
+				case 'save_scene':
+				case 'get_scene_hierarchy':
+					exampleParams = {};
+					break;
+				
+				case 'set_node_name':
+					exampleParams = {
+						"id": "节点UUID",
+						"newName": "新节点名称"
+					};
+					break;
+				
+				case 'update_node_transform':
+					exampleParams = {
+						"id": "节点UUID",
+						"x": 100,
+						"y": 100,
+						"scaleX": 1,
+						"scaleY": 1
+					};
+					break;
+				
+				case 'create_scene':
+					exampleParams = {
+						"sceneName": "NewScene"
+					};
+					break;
+				
+				case 'create_prefab':
+					exampleParams = {
+						"nodeId": "节点UUID",
+						"prefabName": "NewPrefab"
+					};
+					break;
+				
+				case 'open_scene':
+					exampleParams = {
+						"url": "db://assets/NewScene.fire"
+					};
+					break;
+				
+				case 'create_node':
+					exampleParams = {
+						"name": "NewNode",
+						"parentId": "父节点UUID",
+						"type": "empty"
+					};
+					break;
+				
+				case 'manage_components':
+					exampleParams = {
+						"nodeId": "节点UUID",
+						"action": "add",
+						"componentType": "cc.Button"
+					};
+					break;
+				
+				case 'manage_script':
+					exampleParams = {
+						"action": "create",
+						"path": "db://assets/scripts/TestScript.ts",
+						"content": "const { ccclass, property } = cc._decorator;\n\n@ccclass\nexport default class TestScript extends cc.Component {\n    // LIFE-CYCLE CALLBACKS:\n\n    onLoad () {}\n\n    start () {}\n\n    update (dt) {}\n}"
+					};
+					break;
+				
+				case 'batch_execute':
+					exampleParams = {
+						"operations": [
+							{
+								"tool": "get_selected_node",
+								"params": {}
+							}
+						]
+					};
+					break;
+				
+				case 'manage_asset':
+					exampleParams = {
+						"action": "create",
+						"path": "db://assets/test.txt",
+						"content": "Hello, MCP!"
+					};
+					break;
+			}
+			
+			toolParamsTextarea.value = JSON.stringify(exampleParams, null, 2);
+		};
+
+		// 测试工具
+		this.testTool = function() {
+			const toolName = toolNameInput.value.trim();
+			const toolParamsStr = toolParamsTextarea.value.trim();
+			
+			if (!toolName) {
+				this.showResult('请输入工具名称', 'error');
+				return;
+			}
+			
+			let toolParams;
+			try {
+				toolParams = toolParamsStr ? JSON.parse(toolParamsStr) : {};
+			} catch (error) {
+				this.showResult(`参数格式错误：${error.message}`, 'error');
+				return;
+			}
+			
+			this.showResult('测试工具中...');
+			
+			fetch(`${API_BASE}/call-tool`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify({
+					name: toolName,
+					arguments: toolParams
+				})
+			})
+			.then(response => {
+				if (!response.ok) {
+					throw new Error(`HTTP error! status: ${response.status}`);
+				}
+				return response.json();
+			})
+			.then(data => {
+				if (data.error) {
+					this.showResult(`测试失败：${data.error}`, 'error');
+				} else {
+					this.showResult(JSON.stringify(data, null, 2), 'success');
+				}
+			})
+			.catch(error => {
+				this.showResult(`测试失败：${error.message}`, 'error');
+			});
+		};
+
+		// 显示结果
+		this.showResult = function(message, type = 'info') {
+			resultContent.value = message;
+			
+			// 移除旧样式
+			resultContent.className = '';
+			
+			// 添加新样式
+			if (type === 'error' || type === 'success') {
+				resultContent.className = type;
+			}
+		};
+
+		// 清空结果
+		this.clearResult = function() {
+			this.showResult('点击"测试工具"按钮开始测试');
+		};
 	},
 
 	renderLog(log) {