CocosPlugin/mcp-bridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement VFX management, Undo/Redo, Find in File; docs: Update README and plans

Browse Source
This commit is contained in:
火焰库拉
2026-02-01 13:30:11 +08:00
parent 157b99290d
commit a851493966
11 changed files with 3071 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
panel/index.html
View File

@@ -36,6 +36,10 @@
<div class="resizer" id="testResizer"></div>
<div class="right-panel">
<div class="tool-description">
<label>工具说明:</label>
<div id="toolDescription" class="description-box">选择工具查看说明</div>
</div>
<div class="flex-v">
<label>工具参数 (JSON):</label>
<textarea id="toolParams" spellcheck="false" placeholder='{}'></textarea>
@@ -90,4 +94,19 @@
#resultContent { flex: 1; }
.button-group { display: flex; gap: 5px; padding: 5px 0; }
label { font-size: 11px; color: #888; margin: 4px 0; }
.tool-description {
margin-bottom: 10px;
}
.description-box {
background: #222;
color: #ccc;
border: 1px solid #444;
padding: 8px;
font-size: 11px;
line-height: 1.4;
min-height: 60px;
max-height: 120px;
overflow-y: auto;
border-radius: 2px;
}
</style>

346
panel/index.js
View File

@@ -2,151 +2,225 @@
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"),
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); }
},
messages: {
"mcp-bridge:on-log"(event, log) {
this.renderLog(log);
},
"mcp-bridge:state-changed"(event, config) {
this.updateUI(config.active);
},
},
ready() {
const root = this.shadowRoot;
// 获取元素
const els = {
port: root.querySelector("#portInput"),
btnToggle: root.querySelector("#btnToggle"),
autoStart: root.querySelector("#autoStartCheck"),
logView: root.querySelector("#logConsole"),
tabMain: root.querySelector("#tabMain"),
tabTest: root.querySelector("#tabTest"),
panelMain: root.querySelector("#panelMain"),
panelTest: root.querySelector("#panelTest"),
toolName: root.querySelector("#toolName"),
toolParams: root.querySelector("#toolParams"),
toolsList: root.querySelector("#toolsList"),
testBtn: root.querySelector("#testBtn"),
listBtn: root.querySelector("#listToolsBtn"),
clearBtn: root.querySelector("#clearTestBtn"),
result: root.querySelector("#resultContent"),
left: root.querySelector("#testLeftPanel"),
resizer: root.querySelector("#testResizer")
};
ready() {
const root = this.shadowRoot;
// 获取元素
const els = {
port: root.querySelector("#portInput"),
btnToggle: root.querySelector("#btnToggle"),
autoStart: root.querySelector("#autoStartCheck"),
logView: root.querySelector("#logConsole"),
tabMain: root.querySelector("#tabMain"),
tabTest: root.querySelector("#tabTest"),
panelMain: root.querySelector("#panelMain"),
panelTest: root.querySelector("#panelTest"),
toolName: root.querySelector("#toolName"),
toolParams: root.querySelector("#toolParams"),
toolDescription: root.querySelector("#toolDescription"),
toolsList: root.querySelector("#toolsList"),
testBtn: root.querySelector("#testBtn"),
listBtn: root.querySelector("#listToolsBtn"),
clearBtn: root.querySelector("#clearTestBtn"),
result: root.querySelector("#resultContent"),
left: root.querySelector("#testLeftPanel"),
resizer: root.querySelector("#testResizer"),
};
// 1. 初始化状态
Editor.Ipc.sendToMain("mcp-bridge:get-server-state", (err, data) => {
if (data) {
els.port.value = data.config.port;
els.autoStart.value = data.autoStart;
this.updateUI(data.config.active);
els.logView.innerHTML = "";
data.logs.forEach(l => this.renderLog(l));
}
});
// 1. 初始化状态
Editor.Ipc.sendToMain("mcp-bridge:get-server-state", (err, data) => {
if (data) {
els.port.value = data.config.port;
els.autoStart.value = data.autoStart;
this.updateUI(data.config.active);
els.logView.innerHTML = "";
data.logs.forEach((l) => this.renderLog(l));
}
});
// 2. 标签切换
els.tabMain.addEventListener("confirm", () => {
els.tabMain.classList.add("active"); els.tabTest.classList.remove("active");
els.panelMain.classList.add("active"); els.panelTest.classList.remove("active");
});
els.tabTest.addEventListener("confirm", () => {
els.tabTest.classList.add("active"); els.tabMain.classList.remove("active");
els.panelTest.classList.add("active"); els.panelMain.classList.remove("active");
this.fetchTools(els);
});
// 2. 标签切换
els.tabMain.addEventListener("confirm", () => {
els.tabMain.classList.add("active");
els.tabTest.classList.remove("active");
els.panelMain.classList.add("active");
els.panelTest.classList.remove("active");
});
els.tabTest.addEventListener("confirm", () => {
els.tabTest.classList.add("active");
els.tabMain.classList.remove("active");
els.panelTest.classList.add("active");
els.panelMain.classList.remove("active");
this.fetchTools(els);
});
// 3. 基础功能
els.btnToggle.addEventListener("confirm", () => {
Editor.Ipc.sendToMain("mcp-bridge:toggle-server", parseInt(els.port.value));
});
root.querySelector("#btnClear").addEventListener("confirm", () => {
els.logView.innerHTML = ""; Editor.Ipc.sendToMain("mcp-bridge:clear-logs");
});
root.querySelector("#btnCopy").addEventListener("confirm", () => {
require("electron").clipboard.writeText(els.logView.innerText);
Editor.success("Logs Copied");
});
els.autoStart.addEventListener("change", (e) => {
Editor.Ipc.sendToMain("mcp-bridge:set-auto-start", e.target.value);
});
// 3. 基础功能
els.btnToggle.addEventListener("confirm", () => {
Editor.Ipc.sendToMain("mcp-bridge:toggle-server", parseInt(els.port.value));
});
root.querySelector("#btnClear").addEventListener("confirm", () => {
els.logView.innerHTML = "";
Editor.Ipc.sendToMain("mcp-bridge:clear-logs");
});
root.querySelector("#btnCopy").addEventListener("confirm", () => {
require("electron").clipboard.writeText(els.logView.innerText);
Editor.success("Logs Copied");
});
els.autoStart.addEventListener("change", (e) => {
Editor.Ipc.sendToMain("mcp-bridge:set-auto-start", e.target.value);
});
// 4. 测试页功能
els.listBtn.addEventListener("confirm", () => this.fetchTools(els));
els.clearBtn.addEventListener("confirm", () => { els.result.value = ""; });
els.testBtn.addEventListener("confirm", () => this.runTest(els));
// 4. 测试页功能
els.listBtn.addEventListener("confirm", () => this.fetchTools(els));
els.clearBtn.addEventListener("confirm", () => {
els.result.value = "";
});
els.testBtn.addEventListener("confirm", () => this.runTest(els));
// 5. 【修复】拖拽逻辑
if (els.resizer && els.left) {
els.resizer.addEventListener('mousedown', (e) => {
e.preventDefault();
const startX = e.clientX;
const startW = els.left.offsetWidth;
const onMove = (ev) => { els.left.style.width = (startW + (ev.clientX - startX)) + "px"; };
const onUp = () => {
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseup', onUp);
document.body.style.cursor = 'default';
};
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseup', onUp);
document.body.style.cursor = 'col-resize';
});
}
},
// 5. 【修复】拖拽逻辑
if (els.resizer && els.left) {
els.resizer.addEventListener("mousedown", (e) => {
e.preventDefault();
const startX = e.clientX;
const startW = els.left.offsetWidth;
const onMove = (ev) => {
els.left.style.width = startW + (ev.clientX - startX) + "px";
};
const onUp = () => {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
document.body.style.cursor = "default";
};
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
document.body.style.cursor = "col-resize";
});
}
},
fetchTools(els) {
const url = `http://localhost:${els.port.value}/list-tools`;
fetch(url).then(r => r.json()).then(data => {
els.toolsList.innerHTML = "";
data.tools.forEach(t => {
const item = document.createElement('div');
item.className = 'tool-item';
item.textContent = t.name;
item.onclick = () => {
els.toolName.value = t.name;
els.toolParams.value = JSON.stringify(this.getExample(t.name), null, 2);
};
els.toolsList.appendChild(item);
});
els.result.value = `Loaded ${data.tools.length} tools.`;
}).catch(e => { els.result.value = "Error: " + e.message; });
},
fetchTools(els) {
const url = `http://localhost:${els.port.value}/list-tools`;
fetch(url)
.then((r) => r.json())
.then((data) => {
els.toolsList.innerHTML = "";
const toolsMap = {};
data.tools.forEach((t) => {
toolsMap[t.name] = t;
const item = document.createElement("div");
item.className = "tool-item";
item.textContent = t.name;
item.onclick = () => {
els.toolName.value = t.name;
els.toolParams.value = JSON.stringify(this.getExample(t.name), null, 2);
this.showToolDescription(els, t);
};
els.toolsList.appendChild(item);
});
// 保存工具信息到实例，以便后续使用
this.toolsMap = toolsMap;
els.result.value = `Loaded ${data.tools.length} tools.`;
})
.catch((e) => {
els.result.value = "Error: " + e.message;
});
},
runTest(els) {
const url = `http://localhost:${els.port.value}/call-tool`;
const body = { name: els.toolName.value, arguments: JSON.parse(els.toolParams.value || "{}") };
els.result.value = "Testing...";
fetch(url, { method: 'POST', body: JSON.stringify(body) })
.then(r => r.json())
.then(d => { els.result.value = JSON.stringify(d, null, 2); })
.catch(e => { els.result.value = "Error: " + e.message; });
},
showToolDescription(els, tool) {
if (!tool) {
els.toolDescription.textContent = "选择工具查看说明";
return;
}
let description = tool.description || "无描述";
let inputSchema = tool.inputSchema;
let details = [];
if (inputSchema && inputSchema.properties) {
details.push("参数说明:");
for (const [key, prop] of Object.entries(inputSchema.properties)) {
let propDesc = `- ${key}`;
if (prop.description) {
propDesc += `: ${prop.description}`;
}
if (prop.required || (inputSchema.required && inputSchema.required.includes(key))) {
propDesc += " (必填)";
}
details.push(propDesc);
}
}
els.toolDescription.innerHTML = `${description}<br><br>${details.join('<br>')}`;
},
getExample(name) {
const examples = {
"set_node_name": { "id": "UUID", "newName": "Hello" },
"update_node_transform": { "id": "UUID", "x": 0, "y": 0, "color": "#FF0000" },
"create_node": { "name": "Node", "type": "sprite", "parentId": "" },
"open_scene": { "url": "db://assets/Scene.fire" }
};
return examples[name] || {};
},
runTest(els) {
const url = `http://localhost:${els.port.value}/call-tool`;
const body = { name: els.toolName.value, arguments: JSON.parse(els.toolParams.value || "{}") };
els.result.value = "Testing...";
fetch(url, { method: "POST", body: JSON.stringify(body) })
.then((r) => r.json())
.then((d) => {
els.result.value = JSON.stringify(d, null, 2);
})
.catch((e) => {
els.result.value = "Error: " + e.message;
});
},
renderLog(log) {
const view = this.shadowRoot.querySelector("#logConsole");
if (!view) return;
const atBottom = view.scrollHeight - view.scrollTop <= view.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>`;
view.appendChild(el);
if (atBottom) view.scrollTop = view.scrollHeight;
},
getExample(name) {
const examples = {
set_node_name: { id: "UUID", newName: "Hello" },
update_node_transform: { id: "UUID", x: 0, y: 0, color: "#FF0000" },
create_node: { name: "Node", type: "sprite", parentId: "" },
open_scene: { url: "db://assets/Scene.fire" },
manage_editor: { action: "get_selection" },
find_gameobjects: { conditions: { name: "Node", active: true }, recursive: true },
manage_material: {
action: "create",
path: "db://assets/materials/NewMaterial.mat",
properties: { uniforms: {} },
},
manage_texture: {
action: "create",
path: "db://assets/textures/NewTexture.png",
properties: { width: 128, height: 128 },
},
execute_menu_item: { menuPath: "Assets/Create/Folder" },
apply_text_edits: {
filePath: "db://assets/scripts/TestScript.ts",
edits: [{ type: "insert", position: 0, text: "// Test comment\n" }],
},
read_console: { limit: 10, type: "log" },
validate_script: { filePath: "db://assets/scripts/TestScript.ts" },
};
return examples[name] || {};
},
updateUI(active) {
const btn = this.shadowRoot.querySelector("#btnToggle");
if (!btn) return;
btn.innerText = active ? "Stop" : "Start";
btn.style.backgroundColor = active ? "#aa4444" : "#44aa44";
}
});
renderLog(log) {
const view = this.shadowRoot.querySelector("#logConsole");
if (!view) return;
const atBottom = view.scrollHeight - view.scrollTop <= view.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>`;
view.appendChild(el);
if (atBottom) view.scrollTop = view.scrollHeight;
},
updateUI(active) {
const btn = this.shadowRoot.querySelector("#btnToggle");
if (!btn) return;
btn.innerText = active ? "Stop" : "Start";
btn.style.backgroundColor = active ? "#aa4444" : "#44aa44";
},
});