334 lines
9.0 KiB
JavaScript
334 lines
9.0 KiB
JavaScript
"use strict";
|
|
|
|
const fs = require("fs");
|
|
|
|
Editor.Panel.extend({
|
|
style: fs.readFileSync(Editor.url("packages://mcp-bridge/panel/index.html"), "utf-8"),
|
|
template: fs.readFileSync(Editor.url("packages://mcp-bridge/panel/index.html"), "utf-8"),
|
|
|
|
messages: {
|
|
"mcp-bridge:on-log"(event, log) {
|
|
this.renderLog(log);
|
|
},
|
|
"mcp-bridge:state-changed"(event, config) {
|
|
this.updateUI(config.active);
|
|
},
|
|
},
|
|
|
|
ready() {
|
|
const portInput = this.shadowRoot.querySelector("#portInput");
|
|
const btnToggle = this.shadowRoot.querySelector("#btnToggle");
|
|
const autoStartCheck = this.shadowRoot.querySelector("#autoStartCheck");
|
|
const btnClear = this.shadowRoot.querySelector("#btnClear");
|
|
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) {
|
|
portInput.value = data.config.port;
|
|
this.updateUI(data.config.active);
|
|
data.logs.forEach((log) => this.renderLog(log));
|
|
}
|
|
});
|
|
|
|
// 标签页切换
|
|
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));
|
|
});
|
|
|
|
btnClear.addEventListener("confirm", () => {
|
|
logView.innerHTML = "";
|
|
Editor.Ipc.sendToMain("mcp-bridge:clear-logs");
|
|
});
|
|
|
|
btnCopy.addEventListener("confirm", () => {
|
|
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;
|
|
this.updateUI(data.config.active);
|
|
|
|
// 设置自动启动复选框状态
|
|
autoStartCheck.value = data.autoStart;
|
|
|
|
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) {
|
|
const logView = this.shadowRoot.querySelector("#logConsole");
|
|
if (!logView) return;
|
|
|
|
// 记录当前滚动条位置
|
|
const isAtBottom = logView.scrollHeight - logView.scrollTop <= logView.clientHeight + 50;
|
|
|
|
const el = document.createElement("div");
|
|
el.className = `log-item ${log.type}`;
|
|
el.innerHTML = `<span class="time">${log.time}</span><span class="msg">${log.content}</span>`;
|
|
logView.appendChild(el);
|
|
|
|
// 如果用户正在向上翻看，不自动滚动；否则自动滚到底部
|
|
if (isAtBottom) {
|
|
logView.scrollTop = logView.scrollHeight;
|
|
}
|
|
},
|
|
|
|
updateUI(isActive) {
|
|
const btnToggle = this.shadowRoot.querySelector("#btnToggle");
|
|
if (!btnToggle) return;
|
|
btnToggle.innerText = isActive ? "Stop" : "Start";
|
|
btnToggle.style.backgroundColor = isActive ? "#aa4444" : "#44aa44";
|
|
},
|
|
});
|