feat: 支持多实例与配置隔离，全面本地化测试面板
- 实现多实例支持：自动扫描可用端口 - 实现项目级配置隔离：配置存储于项目 settings 目录 - 更新测试面板：界面完全汉化，端口显示实时同步 - 本地化：main.js 日志与 IPC 测试模块全面中文化
This commit is contained in:
火焰库拉
@@ -47,6 +47,8 @@
|
||||
|
||||
- **端口**: 可以自定义 HTTP 服务监听的端口，默认为 3456
|
||||
- **自动启动**: 可以设置编辑器启动时自动开启服务
|
||||
- **多实例支持**: 如果默认端口 (3456) 被占用，插件会自动尝试端口+1 (如 3457)，直到找到可用端口。
|
||||
- **配置隔离**: 插件配置（是否自动启动、上次使用的端口）现已存储在项目目录 (`settings/mcp-bridge.json`) 中，不同项目的配置互不干扰。
|
||||
|
||||
## 连接 AI 编辑器
|
||||
|
||||
|
||||
572
dist/IpcUi.js
vendored
572
dist/IpcUi.js
vendored
@@ -1,233 +1,353 @@
|
||||
"use strict";
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
||||
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||
function step(op) {
|
||||
if (f) throw new TypeError("Generator is already executing.");
|
||||
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||
switch (op[0]) {
|
||||
case 0: case 1: t = op; break;
|
||||
case 4: _.label++; return { value: op[1], done: false };
|
||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||
default:
|
||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||
if (t[2]) _.ops.pop();
|
||||
_.trys.pop(); continue;
|
||||
}
|
||||
op = body.call(thisArg, _);
|
||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||
}
|
||||
};
|
||||
var __awaiter =
|
||||
(this && this.__awaiter) ||
|
||||
function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) {
|
||||
return value instanceof P
|
||||
? value
|
||||
: new P(function (resolve) {
|
||||
resolve(value);
|
||||
});
|
||||
}
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) {
|
||||
try {
|
||||
step(generator.next(value));
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
}
|
||||
}
|
||||
function rejected(value) {
|
||||
try {
|
||||
step(generator["throw"](value));
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
}
|
||||
}
|
||||
function step(result) {
|
||||
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
|
||||
}
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
var __generator =
|
||||
(this && this.__generator) ||
|
||||
function (thisArg, body) {
|
||||
var _ = {
|
||||
label: 0,
|
||||
sent: function () {
|
||||
if (t[0] & 1) throw t[1];
|
||||
return t[1];
|
||||
},
|
||||
trys: [],
|
||||
ops: [],
|
||||
},
|
||||
f,
|
||||
y,
|
||||
t,
|
||||
g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
||||
return (
|
||||
(g.next = verb(0)),
|
||||
(g["throw"] = verb(1)),
|
||||
(g["return"] = verb(2)),
|
||||
typeof Symbol === "function" &&
|
||||
(g[Symbol.iterator] = function () {
|
||||
return this;
|
||||
}),
|
||||
g
|
||||
);
|
||||
function verb(n) {
|
||||
return function (v) {
|
||||
return step([n, v]);
|
||||
};
|
||||
}
|
||||
function step(op) {
|
||||
if (f) throw new TypeError("Generator is already executing.");
|
||||
while ((g && ((g = 0), op[0] && (_ = 0)), _))
|
||||
try {
|
||||
if (
|
||||
((f = 1),
|
||||
y &&
|
||||
(t =
|
||||
op[0] & 2
|
||||
? y["return"]
|
||||
: op[0]
|
||||
? y["throw"] || ((t = y["return"]) && t.call(y), 0)
|
||||
: y.next) &&
|
||||
!(t = t.call(y, op[1])).done)
|
||||
)
|
||||
return t;
|
||||
if (((y = 0), t)) op = [op[0] & 2, t.value];
|
||||
switch (op[0]) {
|
||||
case 0:
|
||||
case 1:
|
||||
t = op;
|
||||
break;
|
||||
case 4:
|
||||
_.label++;
|
||||
return { value: op[1], done: false };
|
||||
case 5:
|
||||
_.label++;
|
||||
y = op[1];
|
||||
op = [0];
|
||||
continue;
|
||||
case 7:
|
||||
op = _.ops.pop();
|
||||
_.trys.pop();
|
||||
continue;
|
||||
default:
|
||||
if (
|
||||
!((t = _.trys), (t = t.length > 0 && t[t.length - 1])) &&
|
||||
(op[0] === 6 || op[0] === 2)
|
||||
) {
|
||||
_ = 0;
|
||||
continue;
|
||||
}
|
||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
|
||||
_.label = op[1];
|
||||
break;
|
||||
}
|
||||
if (op[0] === 6 && _.label < t[1]) {
|
||||
_.label = t[1];
|
||||
t = op;
|
||||
break;
|
||||
}
|
||||
if (t && _.label < t[2]) {
|
||||
_.label = t[2];
|
||||
_.ops.push(op);
|
||||
break;
|
||||
}
|
||||
if (t[2]) _.ops.pop();
|
||||
_.trys.pop();
|
||||
continue;
|
||||
}
|
||||
op = body.call(thisArg, _);
|
||||
} catch (e) {
|
||||
op = [6, e];
|
||||
y = 0;
|
||||
} finally {
|
||||
f = t = 0;
|
||||
}
|
||||
if (op[0] & 5) throw op[1];
|
||||
return { value: op[0] ? op[1] : void 0, done: true };
|
||||
}
|
||||
};
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.IpcUi = void 0;
|
||||
// @ts-ignore
|
||||
var Editor = window.Editor;
|
||||
var IpcUi = /** @class */ (function () {
|
||||
function IpcUi(root) {
|
||||
this.logArea = null;
|
||||
this.ipcList = null;
|
||||
this.allMessages = [];
|
||||
this.filterSelect = null;
|
||||
this.paramInput = null;
|
||||
this.root = root;
|
||||
this.bindEvents();
|
||||
}
|
||||
IpcUi.prototype.bindEvents = function () {
|
||||
var _this = this;
|
||||
var btnScan = this.root.querySelector("#btnScanIpc");
|
||||
var btnTest = this.root.querySelector("#btnTestIpc");
|
||||
var cbSelectAll = this.root.querySelector("#cbSelectAllIpc");
|
||||
this.logArea = this.root.querySelector("#ipcLog");
|
||||
this.ipcList = this.root.querySelector("#ipcList");
|
||||
this.filterSelect = this.root.querySelector("#ipcFilter");
|
||||
this.paramInput = this.root.querySelector("#ipcParams");
|
||||
if (btnScan) {
|
||||
btnScan.addEventListener("confirm", function () { return _this.scanMessages(); });
|
||||
}
|
||||
if (btnTest) {
|
||||
btnTest.addEventListener("confirm", function () { return _this.testSelected(); });
|
||||
}
|
||||
if (cbSelectAll) {
|
||||
cbSelectAll.addEventListener("change", function (e) { return _this.toggleAll(e.detail ? e.detail.value : (e.target.value === 'true' || e.target.checked)); });
|
||||
}
|
||||
if (this.filterSelect) {
|
||||
this.filterSelect.addEventListener("change", function () { return _this.filterMessages(); });
|
||||
}
|
||||
};
|
||||
IpcUi.prototype.scanMessages = function () {
|
||||
var _this = this;
|
||||
this.log("Scanning IPC messages...");
|
||||
// @ts-ignore
|
||||
Editor.Ipc.sendToMain("mcp-bridge:scan-ipc-messages", function (err, msgs) {
|
||||
if (err) {
|
||||
_this.log("Scan Error: ".concat(err));
|
||||
return;
|
||||
}
|
||||
if (msgs) {
|
||||
_this.allMessages = msgs;
|
||||
_this.filterMessages();
|
||||
_this.log("Found ".concat(msgs.length, " messages."));
|
||||
}
|
||||
else {
|
||||
_this.log("No messages found.");
|
||||
}
|
||||
});
|
||||
};
|
||||
IpcUi.prototype.filterMessages = function () {
|
||||
if (!this.allMessages)
|
||||
return;
|
||||
var filter = this.filterSelect ? this.filterSelect.value : "all";
|
||||
var filtered = this.allMessages;
|
||||
if (filter === "available") {
|
||||
filtered = this.allMessages.filter(function (m) { return m.status === "可用"; });
|
||||
}
|
||||
else if (filter === "unavailable") {
|
||||
filtered = this.allMessages.filter(function (m) { return m.status && m.status.includes("不可用"); });
|
||||
}
|
||||
else if (filter === "untested") {
|
||||
filtered = this.allMessages.filter(function (m) { return !m.status || m.status === "未测试"; });
|
||||
}
|
||||
this.renderList(filtered);
|
||||
};
|
||||
IpcUi.prototype.renderList = function (msgs) {
|
||||
var _this = this;
|
||||
if (!this.ipcList)
|
||||
return;
|
||||
this.ipcList.innerHTML = "";
|
||||
msgs.forEach(function (msg) {
|
||||
var item = document.createElement("div");
|
||||
item.className = "ipc-item";
|
||||
item.style.padding = "4px";
|
||||
item.style.borderBottom = "1px solid #333";
|
||||
item.style.display = "flex";
|
||||
item.style.alignItems = "center";
|
||||
// Checkbox
|
||||
var checkbox = document.createElement("ui-checkbox");
|
||||
// @ts-ignore
|
||||
checkbox.value = false;
|
||||
checkbox.setAttribute("data-name", msg.name);
|
||||
checkbox.style.marginRight = "8px";
|
||||
// Content
|
||||
var content = document.createElement("div");
|
||||
content.style.flex = "1";
|
||||
content.style.fontSize = "11px";
|
||||
var statusColor = "#888"; // Untested
|
||||
if (msg.status === "可用")
|
||||
statusColor = "#4CAF50"; // Green
|
||||
else if (msg.status && msg.status.includes("不可用"))
|
||||
statusColor = "#F44336"; // Red
|
||||
content.innerHTML = "\n <div style=\"display:flex; justify-content:space-between;\">\n <span style=\"color: #4CAF50; font-weight: bold;\">".concat(msg.name, "</span>\n <span style=\"color: ").concat(statusColor, "; font-size: 10px; border: 1px solid ").concat(statusColor, "; padding: 0 4px; border-radius: 4px;\">").concat(msg.status || "未测试", "</span>\n </div>\n <div style=\"color: #888;\">").concat(msg.description || "No desc", "</div>\n <div style=\"color: #666; font-size: 10px;\">Params: ").concat(msg.params || "None", "</div>\n ");
|
||||
// Action Button
|
||||
var btnRun = document.createElement("ui-button");
|
||||
btnRun.innerText = "Run";
|
||||
btnRun.className = "tiny";
|
||||
btnRun.style.height = "20px";
|
||||
btnRun.style.lineHeight = "20px";
|
||||
btnRun.addEventListener("confirm", function () {
|
||||
_this.runTest(msg.name);
|
||||
});
|
||||
item.appendChild(checkbox);
|
||||
item.appendChild(content);
|
||||
item.appendChild(btnRun);
|
||||
_this.ipcList.appendChild(item);
|
||||
});
|
||||
};
|
||||
IpcUi.prototype.testSelected = function () {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
var checkboxes, toTest, _i, toTest_1, name_1;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
checkboxes = this.root.querySelectorAll("#ipcList ui-checkbox");
|
||||
toTest = [];
|
||||
checkboxes.forEach(function (cb) {
|
||||
// In Cocos 2.x, ui-checkbox value is boolean
|
||||
if (cb.checked || cb.value === true) {
|
||||
toTest.push(cb.getAttribute("data-name"));
|
||||
}
|
||||
});
|
||||
if (toTest.length === 0) {
|
||||
this.log("No messages selected.");
|
||||
return [2 /*return*/];
|
||||
}
|
||||
this.log("Starting batch test for ".concat(toTest.length, " messages..."));
|
||||
_i = 0, toTest_1 = toTest;
|
||||
_a.label = 1;
|
||||
case 1:
|
||||
if (!(_i < toTest_1.length)) return [3 /*break*/, 4];
|
||||
name_1 = toTest_1[_i];
|
||||
return [4 /*yield*/, this.runTest(name_1)];
|
||||
case 2:
|
||||
_a.sent();
|
||||
_a.label = 3;
|
||||
case 3:
|
||||
_i++;
|
||||
return [3 /*break*/, 1];
|
||||
case 4:
|
||||
this.log("Batch test completed.");
|
||||
return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
IpcUi.prototype.runTest = function (name) {
|
||||
var _this = this;
|
||||
return new Promise(function (resolve) {
|
||||
var params = null;
|
||||
if (_this.paramInput && _this.paramInput.value.trim()) {
|
||||
try {
|
||||
params = JSON.parse(_this.paramInput.value.trim());
|
||||
}
|
||||
catch (e) {
|
||||
_this.log("[Error] Invalid JSON Params: ".concat(e));
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
}
|
||||
_this.log("Testing: ".concat(name, " with params: ").concat(JSON.stringify(params), "..."));
|
||||
// @ts-ignore
|
||||
Editor.Ipc.sendToMain("mcp-bridge:test-ipc-message", { name: name, params: params }, function (err, result) {
|
||||
if (err) {
|
||||
_this.log("[".concat(name, "] Failed: ").concat(err));
|
||||
}
|
||||
else {
|
||||
_this.log("[".concat(name, "] Success: ").concat(JSON.stringify(result)));
|
||||
}
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
};
|
||||
IpcUi.prototype.toggleAll = function (checked) {
|
||||
var checkboxes = this.root.querySelectorAll("#ipcList ui-checkbox");
|
||||
checkboxes.forEach(function (cb) {
|
||||
cb.value = checked;
|
||||
});
|
||||
};
|
||||
IpcUi.prototype.log = function (msg) {
|
||||
if (this.logArea) {
|
||||
// @ts-ignore
|
||||
var time = new Date().toLocaleTimeString();
|
||||
this.logArea.value += "[".concat(time, "] ").concat(msg, "\n");
|
||||
this.logArea.scrollTop = this.logArea.scrollHeight;
|
||||
}
|
||||
};
|
||||
return IpcUi;
|
||||
}());
|
||||
function IpcUi(root) {
|
||||
this.logArea = null;
|
||||
this.ipcList = null;
|
||||
this.allMessages = [];
|
||||
this.filterSelect = null;
|
||||
this.paramInput = null;
|
||||
this.root = root;
|
||||
this.bindEvents();
|
||||
}
|
||||
IpcUi.prototype.bindEvents = function () {
|
||||
var _this = this;
|
||||
var btnScan = this.root.querySelector("#btnScanIpc");
|
||||
var btnTest = this.root.querySelector("#btnTestIpc");
|
||||
var cbSelectAll = this.root.querySelector("#cbSelectAllIpc");
|
||||
this.logArea = this.root.querySelector("#ipcLog");
|
||||
this.ipcList = this.root.querySelector("#ipcList");
|
||||
this.filterSelect = this.root.querySelector("#ipcFilter");
|
||||
this.paramInput = this.root.querySelector("#ipcParams");
|
||||
if (btnScan) {
|
||||
btnScan.addEventListener("confirm", function () {
|
||||
return _this.scanMessages();
|
||||
});
|
||||
}
|
||||
if (btnTest) {
|
||||
btnTest.addEventListener("confirm", function () {
|
||||
return _this.testSelected();
|
||||
});
|
||||
}
|
||||
if (cbSelectAll) {
|
||||
cbSelectAll.addEventListener("change", function (e) {
|
||||
return _this.toggleAll(e.detail ? e.detail.value : e.target.value === "true" || e.target.checked);
|
||||
});
|
||||
}
|
||||
if (this.filterSelect) {
|
||||
this.filterSelect.addEventListener("change", function () {
|
||||
return _this.filterMessages();
|
||||
});
|
||||
}
|
||||
};
|
||||
IpcUi.prototype.scanMessages = function () {
|
||||
var _this = this;
|
||||
this.log("正在扫描 IPC 消息...");
|
||||
// @ts-ignore
|
||||
Editor.Ipc.sendToMain("mcp-bridge:scan-ipc-messages", function (err, msgs) {
|
||||
if (err) {
|
||||
_this.log("扫描错误: ".concat(err));
|
||||
return;
|
||||
}
|
||||
if (msgs) {
|
||||
_this.allMessages = msgs;
|
||||
_this.filterMessages();
|
||||
_this.log("找到 ".concat(msgs.length, " 条消息。"));
|
||||
} else {
|
||||
_this.log("未找到任何消息。");
|
||||
}
|
||||
});
|
||||
};
|
||||
IpcUi.prototype.filterMessages = function () {
|
||||
if (!this.allMessages) return;
|
||||
var filter = this.filterSelect ? this.filterSelect.value : "all";
|
||||
var filtered = this.allMessages;
|
||||
if (filter === "available") {
|
||||
filtered = this.allMessages.filter(function (m) {
|
||||
return m.status === "可用";
|
||||
});
|
||||
} else if (filter === "unavailable") {
|
||||
filtered = this.allMessages.filter(function (m) {
|
||||
return m.status && m.status.includes("不可用");
|
||||
});
|
||||
} else if (filter === "untested") {
|
||||
filtered = this.allMessages.filter(function (m) {
|
||||
return !m.status || m.status === "未测试";
|
||||
});
|
||||
}
|
||||
this.renderList(filtered);
|
||||
};
|
||||
IpcUi.prototype.renderList = function (msgs) {
|
||||
var _this = this;
|
||||
if (!this.ipcList) return;
|
||||
this.ipcList.innerHTML = "";
|
||||
msgs.forEach(function (msg) {
|
||||
var item = document.createElement("div");
|
||||
item.className = "ipc-item";
|
||||
item.style.padding = "4px";
|
||||
item.style.borderBottom = "1px solid #333";
|
||||
item.style.display = "flex";
|
||||
item.style.alignItems = "center";
|
||||
// Checkbox
|
||||
var checkbox = document.createElement("ui-checkbox");
|
||||
// @ts-ignore
|
||||
checkbox.value = false;
|
||||
checkbox.setAttribute("data-name", msg.name);
|
||||
checkbox.style.marginRight = "8px";
|
||||
// Content
|
||||
var content = document.createElement("div");
|
||||
content.style.flex = "1";
|
||||
content.style.fontSize = "11px";
|
||||
var statusColor = "#888"; // Untested
|
||||
if (msg.status === "可用")
|
||||
statusColor = "#4CAF50"; // Green
|
||||
else if (msg.status && msg.status.includes("不可用")) statusColor = "#F44336"; // Red
|
||||
content.innerHTML =
|
||||
'\n <div style="display:flex; justify-content:space-between;">\n <span style="color: #4CAF50; font-weight: bold;">'
|
||||
.concat(msg.name, '</span>\n <span style="color: ')
|
||||
.concat(statusColor, "; font-size: 10px; border: 1px solid ")
|
||||
.concat(statusColor, '; padding: 0 4px; border-radius: 4px;">')
|
||||
.concat(
|
||||
msg.status || "未测试",
|
||||
'</span>\n </div>\n <div style="color: #888;">',
|
||||
)
|
||||
.concat(
|
||||
msg.description || "无描述",
|
||||
'</div>\n <div style="color: #666; font-size: 10px;">参数: ',
|
||||
)
|
||||
.concat(msg.params || "无", "</div>\n ");
|
||||
// Action Button
|
||||
var btnRun = document.createElement("ui-button");
|
||||
btnRun.innerText = "执行";
|
||||
btnRun.className = "tiny";
|
||||
btnRun.style.height = "20px";
|
||||
btnRun.style.lineHeight = "20px";
|
||||
btnRun.addEventListener("confirm", function () {
|
||||
_this.runTest(msg.name);
|
||||
});
|
||||
item.appendChild(checkbox);
|
||||
item.appendChild(content);
|
||||
item.appendChild(btnRun);
|
||||
_this.ipcList.appendChild(item);
|
||||
});
|
||||
};
|
||||
IpcUi.prototype.testSelected = function () {
|
||||
return __awaiter(this, void 0, void 0, function () {
|
||||
var checkboxes, toTest, _i, toTest_1, name_1;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
checkboxes = this.root.querySelectorAll("#ipcList ui-checkbox");
|
||||
toTest = [];
|
||||
checkboxes.forEach(function (cb) {
|
||||
// In Cocos 2.x, ui-checkbox value is boolean
|
||||
if (cb.checked || cb.value === true) {
|
||||
toTest.push(cb.getAttribute("data-name"));
|
||||
}
|
||||
});
|
||||
if (toTest.length === 0) {
|
||||
this.log("未选择任何消息。");
|
||||
return [2 /*return*/];
|
||||
}
|
||||
this.log("开始批量测试 ".concat(toTest.length, " 条消息..."));
|
||||
((_i = 0), (toTest_1 = toTest));
|
||||
_a.label = 1;
|
||||
case 1:
|
||||
if (!(_i < toTest_1.length)) return [3 /*break*/, 4];
|
||||
name_1 = toTest_1[_i];
|
||||
return [4 /*yield*/, this.runTest(name_1)];
|
||||
case 2:
|
||||
_a.sent();
|
||||
_a.label = 3;
|
||||
case 3:
|
||||
_i++;
|
||||
return [3 /*break*/, 1];
|
||||
case 4:
|
||||
this.log("批量测试完成。");
|
||||
return [2 /*return*/];
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
IpcUi.prototype.runTest = function (name) {
|
||||
var _this = this;
|
||||
return new Promise(function (resolve) {
|
||||
var params = null;
|
||||
if (_this.paramInput && _this.paramInput.value.trim()) {
|
||||
try {
|
||||
params = JSON.parse(_this.paramInput.value.trim());
|
||||
} catch (e) {
|
||||
_this.log("[错误] 无效的 JSON 参数: ".concat(e));
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
}
|
||||
_this.log("正在测试: ".concat(name, "，参数: ").concat(JSON.stringify(params), "..."));
|
||||
// @ts-ignore
|
||||
Editor.Ipc.sendToMain(
|
||||
"mcp-bridge:test-ipc-message",
|
||||
{ name: name, params: params },
|
||||
function (err, result) {
|
||||
if (err) {
|
||||
_this.log("[".concat(name, "] 失败: ").concat(err));
|
||||
} else {
|
||||
_this.log("[".concat(name, "] 成功: ").concat(JSON.stringify(result)));
|
||||
}
|
||||
resolve();
|
||||
},
|
||||
);
|
||||
});
|
||||
};
|
||||
IpcUi.prototype.toggleAll = function (checked) {
|
||||
var checkboxes = this.root.querySelectorAll("#ipcList ui-checkbox");
|
||||
checkboxes.forEach(function (cb) {
|
||||
cb.value = checked;
|
||||
});
|
||||
};
|
||||
IpcUi.prototype.log = function (msg) {
|
||||
if (this.logArea) {
|
||||
// @ts-ignore
|
||||
var time = new Date().toLocaleTimeString();
|
||||
this.logArea.value += "[".concat(time, "] ").concat(msg, "\n");
|
||||
this.logArea.scrollTop = this.logArea.scrollHeight;
|
||||
}
|
||||
};
|
||||
return IpcUi;
|
||||
})();
|
||||
exports.IpcUi = IpcUi;
|
||||
|
||||
279
main.js
279
main.js
@@ -704,8 +704,8 @@ module.exports = {
|
||||
* @returns {Object} Editor.Profile 实例
|
||||
*/
|
||||
getProfile() {
|
||||
// 'local' 表示存储在项目本地（local/mcp-bridge.json）
|
||||
return Editor.Profile.load("profile://local/mcp-bridge.json", "mcp-bridge");
|
||||
// 'project' 表示存储在项目本地（settings/mcp-bridge.json），实现配置隔离
|
||||
return Editor.Profile.load("profile://project/mcp-bridge.json", "mcp-bridge");
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -721,139 +721,161 @@ module.exports = {
|
||||
startServer(port) {
|
||||
if (mcpServer) this.stopServer();
|
||||
|
||||
try {
|
||||
mcpServer = http.createServer((req, res) => {
|
||||
res.setHeader("Content-Type", "application/json");
|
||||
res.setHeader("Access-Control-Allow-Origin", "*");
|
||||
const tryStart = (currentPort, retries) => {
|
||||
if (retries <= 0) {
|
||||
addLog("error", `Failed to find an available port after multiple attempts.`);
|
||||
return;
|
||||
}
|
||||
|
||||
let body = "";
|
||||
req.on("data", (chunk) => {
|
||||
body += chunk;
|
||||
try {
|
||||
mcpServer = http.createServer((req, res) => {
|
||||
this._handleRequest(req, res);
|
||||
});
|
||||
req.on("end", () => {
|
||||
const url = req.url;
|
||||
if (url === "/list-tools") {
|
||||
const tools = getToolsList();
|
||||
addLog("info", `AI Client requested tool list`);
|
||||
// 明确返回成功结构
|
||||
res.writeHead(200);
|
||||
return res.end(JSON.stringify({ tools: tools }));
|
||||
}
|
||||
if (url === "/list-resources") {
|
||||
const resources = this.getResourcesList();
|
||||
addLog("info", `AI Client requested resource list`);
|
||||
res.writeHead(200);
|
||||
return res.end(JSON.stringify({ resources: resources }));
|
||||
}
|
||||
if (url === "/read-resource") {
|
||||
|
||||
mcpServer.on("error", (e) => {
|
||||
if (e.code === "EADDRINUSE") {
|
||||
addLog("warn", `Port ${currentPort} is in use, trying ${currentPort + 1}...`);
|
||||
try {
|
||||
const { uri } = JSON.parse(body || "{}");
|
||||
addLog("mcp", `READ -> [${uri}]`);
|
||||
this.handleReadResource(uri, (err, content) => {
|
||||
if (err) {
|
||||
addLog("error", `读取失败: ${err}`);
|
||||
res.writeHead(500);
|
||||
return res.end(JSON.stringify({ error: err }));
|
||||
}
|
||||
addLog("success", `读取成功: ${uri}`);
|
||||
res.writeHead(200);
|
||||
// 返回 MCP Resource 格式: { contents: [{ uri, mimeType, text }] }
|
||||
res.end(
|
||||
JSON.stringify({
|
||||
contents: [
|
||||
{
|
||||
uri: uri,
|
||||
mimeType: "application/json",
|
||||
text: typeof content === "string" ? content : JSON.stringify(content),
|
||||
},
|
||||
],
|
||||
}),
|
||||
);
|
||||
});
|
||||
} catch (e) {
|
||||
mcpServer.close();
|
||||
} catch (err) {
|
||||
// align
|
||||
}
|
||||
mcpServer = null;
|
||||
// Delay slightly to ensure cleanup
|
||||
setTimeout(() => {
|
||||
tryStart(currentPort + 1, retries - 1);
|
||||
}, 100);
|
||||
} else {
|
||||
addLog("error", `Server Error: ${e.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
mcpServer.listen(currentPort, () => {
|
||||
serverConfig.active = true;
|
||||
serverConfig.port = currentPort;
|
||||
addLog("success", `MCP Server running at http://127.0.0.1:${currentPort}`);
|
||||
Editor.Ipc.sendToPanel("mcp-bridge", "mcp-bridge:state-changed", serverConfig);
|
||||
|
||||
// Important: Do NOT save the auto-assigned port to profile to avoid pollution
|
||||
});
|
||||
} catch (e) {
|
||||
addLog("error", `Failed to start server: ${e.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
// Start trying from the configured port, retry 10 times
|
||||
tryStart(port, 10);
|
||||
},
|
||||
|
||||
_handleRequest(req, res) {
|
||||
res.setHeader("Content-Type", "application/json");
|
||||
res.setHeader("Access-Control-Allow-Origin", "*");
|
||||
|
||||
let body = "";
|
||||
req.on("data", (chunk) => {
|
||||
body += chunk;
|
||||
});
|
||||
req.on("end", () => {
|
||||
const url = req.url;
|
||||
if (url === "/list-tools") {
|
||||
const tools = getToolsList();
|
||||
addLog("info", `AI Client requested tool list`);
|
||||
res.writeHead(200);
|
||||
return res.end(JSON.stringify({ tools: tools }));
|
||||
}
|
||||
if (url === "/list-resources") {
|
||||
const resources = this.getResourcesList();
|
||||
addLog("info", `AI Client requested resource list`);
|
||||
res.writeHead(200);
|
||||
return res.end(JSON.stringify({ resources: resources }));
|
||||
}
|
||||
if (url === "/read-resource") {
|
||||
try {
|
||||
const { uri } = JSON.parse(body || "{}");
|
||||
addLog("mcp", `READ -> [${uri}]`);
|
||||
this.handleReadResource(uri, (err, content) => {
|
||||
if (err) {
|
||||
addLog("error", `读取失败: ${err}`);
|
||||
res.writeHead(500);
|
||||
res.end(JSON.stringify({ error: e.message }));
|
||||
return res.end(JSON.stringify({ error: err }));
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (url === "/call-tool") {
|
||||
try {
|
||||
const { name, arguments: args } = JSON.parse(body || "{}");
|
||||
addLog("mcp", `REQ -> [${name}] (队列长度: ${commandQueue.length})`);
|
||||
addLog("success", `读取成功: ${uri}`);
|
||||
res.writeHead(200);
|
||||
res.end(
|
||||
JSON.stringify({
|
||||
contents: [
|
||||
{
|
||||
uri: uri,
|
||||
mimeType: "application/json",
|
||||
text: typeof content === "string" ? content : JSON.stringify(content),
|
||||
},
|
||||
],
|
||||
}),
|
||||
);
|
||||
});
|
||||
} catch (e) {
|
||||
res.writeHead(500);
|
||||
res.end(JSON.stringify({ error: e.message }));
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (url === "/call-tool") {
|
||||
try {
|
||||
const { name, arguments: args } = JSON.parse(body || "{}");
|
||||
addLog("mcp", `REQ -> [${name}] (队列长度: ${commandQueue.length})`);
|
||||
|
||||
// 【关键修复】所有 MCP 指令通过队列串行化执行，
|
||||
// 防止 AssetDB.refresh 等异步操作被并发请求打断导致编辑器卡死
|
||||
enqueueCommand((done) => {
|
||||
this.handleMcpCall(name, args, (err, result) => {
|
||||
const response = {
|
||||
content: [
|
||||
{
|
||||
type: "text",
|
||||
text: err
|
||||
? `Error: ${err}`
|
||||
: typeof result === "object"
|
||||
? JSON.stringify(result, null, 2)
|
||||
: result,
|
||||
},
|
||||
],
|
||||
};
|
||||
if (err) {
|
||||
addLog("error", `RES <- [${name}] 失败: ${err}`);
|
||||
} else {
|
||||
// 成功时尝试捕获简单的结果预览（如果是字符串或简短对象）
|
||||
let preview = "";
|
||||
if (typeof result === "string") {
|
||||
preview = result.length > 100 ? result.substring(0, 100) + "..." : result;
|
||||
} else if (typeof result === "object") {
|
||||
try {
|
||||
const jsonStr = JSON.stringify(result);
|
||||
preview =
|
||||
jsonStr.length > 100 ? jsonStr.substring(0, 100) + "..." : jsonStr;
|
||||
} catch (e) {
|
||||
preview = "Object (Circular/Unserializable)";
|
||||
}
|
||||
}
|
||||
addLog("success", `RES <- [${name}] 成功 : ${preview}`);
|
||||
}
|
||||
res.writeHead(200);
|
||||
res.end(JSON.stringify(response));
|
||||
done(); // 当前指令完成，释放队列给下一个指令
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
if (e instanceof SyntaxError) {
|
||||
addLog("error", `JSON Parse Error: ${e.message}`);
|
||||
res.writeHead(400);
|
||||
res.end(JSON.stringify({ error: "Invalid JSON" }));
|
||||
enqueueCommand((done) => {
|
||||
this.handleMcpCall(name, args, (err, result) => {
|
||||
const response = {
|
||||
content: [
|
||||
{
|
||||
type: "text",
|
||||
text: err
|
||||
? `Error: ${err}`
|
||||
: typeof result === "object"
|
||||
? JSON.stringify(result, null, 2)
|
||||
: result,
|
||||
},
|
||||
],
|
||||
};
|
||||
if (err) {
|
||||
addLog("error", `RES <- [${name}] 失败: ${err}`);
|
||||
} else {
|
||||
addLog("error", `Internal Server Error: ${e.message}`);
|
||||
res.writeHead(500);
|
||||
res.end(JSON.stringify({ error: e.message }));
|
||||
let preview = "";
|
||||
if (typeof result === "string") {
|
||||
preview = result.length > 100 ? result.substring(0, 100) + "..." : result;
|
||||
} else if (typeof result === "object") {
|
||||
try {
|
||||
const jsonStr = JSON.stringify(result);
|
||||
preview = jsonStr.length > 100 ? jsonStr.substring(0, 100) + "..." : jsonStr;
|
||||
} catch (e) {
|
||||
preview = "Object (Circular/Unserializable)";
|
||||
}
|
||||
}
|
||||
addLog("success", `RES <- [${name}] 成功 : ${preview}`);
|
||||
}
|
||||
}
|
||||
return;
|
||||
res.writeHead(200);
|
||||
res.end(JSON.stringify(response));
|
||||
done();
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
if (e instanceof SyntaxError) {
|
||||
addLog("error", `JSON Parse Error: ${e.message}`);
|
||||
res.writeHead(400);
|
||||
res.end(JSON.stringify({ error: "Invalid JSON" }));
|
||||
} else {
|
||||
addLog("error", `Internal Server Error: ${e.message}`);
|
||||
res.writeHead(500);
|
||||
res.end(JSON.stringify({ error: e.message }));
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// --- 兜底处理 (404) ---
|
||||
res.writeHead(404);
|
||||
res.end(JSON.stringify({ error: "Not Found", url: url }));
|
||||
});
|
||||
});
|
||||
|
||||
mcpServer.on("error", (e) => {
|
||||
addLog("error", `Server Error: ${e.message}`);
|
||||
});
|
||||
mcpServer.listen(port, () => {
|
||||
serverConfig.active = true;
|
||||
addLog("success", `MCP Server running at http://127.0.0.1:${port}`);
|
||||
Editor.Ipc.sendToPanel("mcp-bridge", "mcp-bridge:state-changed", serverConfig);
|
||||
});
|
||||
// 启动成功后顺便存一下端口
|
||||
this.getProfile().set("last-port", port);
|
||||
this.getProfile().save();
|
||||
} catch (e) {
|
||||
addLog("error", `Failed to start server: ${e.message}`);
|
||||
}
|
||||
res.writeHead(404);
|
||||
res.end(JSON.stringify({ error: "Not Found", url: url }));
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -2273,7 +2295,12 @@ CCProgram fs %{
|
||||
|
||||
"toggle-server"(event, port) {
|
||||
if (serverConfig.active) this.stopServer();
|
||||
else this.startServer(port);
|
||||
else {
|
||||
// 用户手动启动时，保存偏好端口
|
||||
this.getProfile().set("last-port", port);
|
||||
this.getProfile().save();
|
||||
this.startServer(port);
|
||||
}
|
||||
},
|
||||
"clear-logs"() {
|
||||
logBuffer = [];
|
||||
|
||||
574
panel/index.html
574
panel/index.html
@@ -1,316 +1,340 @@
|
||||
<div class="mcp-container">
|
||||
<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>
|
||||
<ui-button id="tabIpc" class="tab-button">IPC Test</ui-button>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<ui-button id="tabMain" class="tab-button active">主页</ui-button>
|
||||
<ui-button id="tabTest" class="tab-button">工具测试</ui-button>
|
||||
<ui-button id="tabIpc" class="tab-button">IPC 测试</ui-button>
|
||||
</div>
|
||||
|
||||
<div id="panelMain" class="tab-content active">
|
||||
<div class="toolbar">
|
||||
<div class="ctrl-group">
|
||||
<span>Port:</span>
|
||||
<ui-input id="portInput" style="width: 60px;"></ui-input>
|
||||
<ui-button id="btnToggle">Start</ui-button>
|
||||
</div>
|
||||
<div class="ctrl-group" style="margin-left: 10px">
|
||||
<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="panelMain" class="tab-content active">
|
||||
<div class="toolbar">
|
||||
<div class="ctrl-group">
|
||||
<span>端口:</span>
|
||||
<ui-input id="portInput" style="width: 60px"></ui-input>
|
||||
<ui-button id="btnToggle">启动</ui-button>
|
||||
</div>
|
||||
<div class="ctrl-group" style="margin-left: 10px">
|
||||
<ui-checkbox id="autoStartCheck">自动启动</ui-checkbox>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<ui-button id="btnClear" class="transparent">清空日志</ui-button>
|
||||
<ui-button id="btnCopy" class="transparent">复制全部</ui-button>
|
||||
</div>
|
||||
<div id="logConsole" class="log-view"></div>
|
||||
</div>
|
||||
|
||||
<div id="panelTest" class="tab-content">
|
||||
<!-- ... existing content ... -->
|
||||
<div class="test-layout">
|
||||
<div class="left-panel" id="testLeftPanel">
|
||||
<div class="form-item">
|
||||
<label>工具名称:</label>
|
||||
<ui-input id="toolName" placeholder="选中下方列表填充"></ui-input>
|
||||
</div>
|
||||
<label>可用工具列表:</label>
|
||||
<div class="tools-list" id="toolsList"></div>
|
||||
</div>
|
||||
<div id="panelTest" class="tab-content">
|
||||
<!-- ... existing content ... -->
|
||||
<div class="test-layout">
|
||||
<div class="left-panel" id="testLeftPanel">
|
||||
<div class="form-item">
|
||||
<label>工具名称:</label>
|
||||
<ui-input id="toolName" placeholder="选中下方列表填充"></ui-input>
|
||||
</div>
|
||||
<label>可用工具列表:</label>
|
||||
<div class="tools-list" id="toolsList"></div>
|
||||
</div>
|
||||
|
||||
<!-- 拖动条 -->
|
||||
<div class="resizer" id="testResizer"></div>
|
||||
<!-- 拖动条 -->
|
||||
<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>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<ui-button id="testBtn" class="green">测试工具</ui-button>
|
||||
<ui-button id="listToolsBtn">刷新列表</ui-button>
|
||||
<ui-button id="clearTestBtn">清空结果</ui-button>
|
||||
<ui-button id="probeApisBtn">探查 API</ui-button>
|
||||
</div>
|
||||
<div class="flex-v">
|
||||
<label>测试结果:</label>
|
||||
<textarea id="resultContent" readonly spellcheck="false"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<ui-button id="testBtn" class="green">测试工具</ui-button>
|
||||
<ui-button id="listToolsBtn">刷新列表</ui-button>
|
||||
<ui-button id="clearTestBtn">清空结果</ui-button>
|
||||
<ui-button id="probeApisBtn">探查 API</ui-button>
|
||||
</div>
|
||||
<div class="flex-v">
|
||||
<label>测试结果:</label>
|
||||
<textarea id="resultContent" readonly spellcheck="false"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="panelIpc" class="tab-content">
|
||||
<div class="toolbar">
|
||||
<ui-button id="btnScanIpc">Scan Messages</ui-button>
|
||||
<select id="ipcFilter"
|
||||
style="margin-left: 5px; background: #333; color: #ccc; border: 1px solid #555; height: 25px;">
|
||||
<option value="all">Check All</option>
|
||||
<option value="available">Show Available</option>
|
||||
<option value="unavailable">Show Unavailable</option>
|
||||
<option value="untested">Show Untested</option>
|
||||
</select>
|
||||
<div class="spacer"></div>
|
||||
<ui-button id="btnTestIpc" class="green">Test Selected</ui-button>
|
||||
</div>
|
||||
<div class="ipc-container" style="display:flex; flex:1; flex-direction:column; min-height:0;">
|
||||
<div class="ipc-list-header" style="padding: 5px; background: #222; border-bottom: 1px solid #444;">
|
||||
<ui-checkbox id="cbSelectAllIpc">Select All/None</ui-checkbox>
|
||||
</div>
|
||||
<div id="ipcList" class="ipc-list"
|
||||
style="flex:1; overflow-y:auto; background: #1e1e1e; border: 1px solid #444;"></div>
|
||||
<div style="padding: 5px; border-top: 1px solid #444; display: flex; flex-direction: column;">
|
||||
<label>Parameters (JSON):</label>
|
||||
<textarea id="ipcParams" placeholder='e.g. {"uuid": "..."}'
|
||||
style="height: 50px; width: 100%; box-sizing: border-box; background: #222; color: #ccc; border: 1px solid #444; margin-bottom: 5px;"></textarea>
|
||||
</div>
|
||||
<div
|
||||
style="height: 100px; display:flex; flex-direction:column; border-top: 1px solid #444; padding-top: 5px;">
|
||||
<label>Test Log:</label>
|
||||
<textarea id="ipcLog" readonly style="flex:1; font-family:monospace; font-size:10px;"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="panelIpc" class="tab-content">
|
||||
<div class="toolbar">
|
||||
<ui-button id="btnScanIpc">扫描消息</ui-button>
|
||||
<select
|
||||
id="ipcFilter"
|
||||
style="margin-left: 5px; background: #333; color: #ccc; border: 1px solid #555; height: 25px"
|
||||
>
|
||||
<option value="all">全部显示</option>
|
||||
<option value="available">仅显示可用</option>
|
||||
<option value="unavailable">仅显示不可用</option>
|
||||
<option value="untested">仅显示未测试</option>
|
||||
</select>
|
||||
<div class="spacer"></div>
|
||||
<ui-button id="btnTestIpc" class="green">测试选中项</ui-button>
|
||||
</div>
|
||||
<div class="ipc-container" style="display: flex; flex: 1; flex-direction: column; min-height: 0">
|
||||
<div class="ipc-list-header" style="padding: 5px; background: #222; border-bottom: 1px solid #444">
|
||||
<ui-checkbox id="cbSelectAllIpc">全选/反选</ui-checkbox>
|
||||
</div>
|
||||
<div
|
||||
id="ipcList"
|
||||
class="ipc-list"
|
||||
style="flex: 1; overflow-y: auto; background: #1e1e1e; border: 1px solid #444"
|
||||
></div>
|
||||
<div style="padding: 5px; border-top: 1px solid #444; display: flex; flex-direction: column">
|
||||
<label>参数 (JSON):</label>
|
||||
<textarea
|
||||
id="ipcParams"
|
||||
placeholder='例如: {"uuid": "..."}'
|
||||
style="
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #222;
|
||||
color: #ccc;
|
||||
border: 1px solid #444;
|
||||
margin-bottom: 5px;
|
||||
"
|
||||
></textarea>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-top: 1px solid #444;
|
||||
padding-top: 5px;
|
||||
"
|
||||
>
|
||||
<label>测试日志:</label>
|
||||
<textarea id="ipcLog" readonly style="flex: 1; font-family: monospace; font-size: 10px"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:host {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: #2d2d2d;
|
||||
overflow: hidden;
|
||||
}
|
||||
:host {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: #2d2d2d;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mcp-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.mcp-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #444;
|
||||
margin-bottom: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #444;
|
||||
margin-bottom: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 4px 12px;
|
||||
margin-right: 2px;
|
||||
background: #333;
|
||||
}
|
||||
.tab-button {
|
||||
padding: 4px 12px;
|
||||
margin-right: 2px;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
.tab-button.active {
|
||||
background: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tab-content {
|
||||
display: none;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: flex;
|
||||
}
|
||||
.tab-content.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Main Panel */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
gap: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* Main Panel */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0;
|
||||
gap: 5px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.log-view {
|
||||
flex: 1;
|
||||
background: #1a1a1a;
|
||||
margin-top: 5px;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
-webkit-user-select: text;
|
||||
min-height: 0;
|
||||
}
|
||||
.log-view {
|
||||
flex: 1;
|
||||
background: #1a1a1a;
|
||||
margin-top: 5px;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
border-left: 4px solid #555;
|
||||
padding-left: 8px;
|
||||
margin-bottom: 3px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
.log-item {
|
||||
border-left: 4px solid #555;
|
||||
padding-left: 8px;
|
||||
margin-bottom: 3px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.log-item.info {
|
||||
border-left-color: #61afef;
|
||||
color: #abb2bf;
|
||||
}
|
||||
.log-item.info {
|
||||
border-left-color: #61afef;
|
||||
color: #abb2bf;
|
||||
}
|
||||
|
||||
.log-item.success {
|
||||
border-left-color: #98c379;
|
||||
color: #98c379;
|
||||
}
|
||||
.log-item.success {
|
||||
border-left-color: #98c379;
|
||||
color: #98c379;
|
||||
}
|
||||
|
||||
.log-item.warn {
|
||||
border-left-color: #e5c07b;
|
||||
color: #e5c07b;
|
||||
}
|
||||
.log-item.warn {
|
||||
border-left-color: #e5c07b;
|
||||
color: #e5c07b;
|
||||
}
|
||||
|
||||
.log-item.error {
|
||||
border-left-color: #e06c75;
|
||||
color: #e06c75;
|
||||
}
|
||||
.log-item.error {
|
||||
border-left-color: #e06c75;
|
||||
color: #e06c75;
|
||||
}
|
||||
|
||||
.log-item.mcp {
|
||||
border-left-color: #c678dd;
|
||||
color: #d19a66;
|
||||
background: rgba(198, 120, 221, 0.05);
|
||||
}
|
||||
.log-item.mcp {
|
||||
border-left-color: #c678dd;
|
||||
color: #d19a66;
|
||||
background: rgba(198, 120, 221, 0.05);
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #5c6370;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.time {
|
||||
color: #5c6370;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* Test Panel */
|
||||
.test-layout {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
/* Test Panel */
|
||||
.test-layout {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
width: 250px;
|
||||
min-width: 150px;
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.left-panel {
|
||||
width: 250px;
|
||||
min-width: 150px;
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.resizer {
|
||||
width: 6px;
|
||||
cursor: col-resize;
|
||||
background: #1a1a1a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.resizer {
|
||||
width: 6px;
|
||||
cursor: col-resize;
|
||||
background: #1a1a1a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.resizer:hover {
|
||||
background: #4CAF50;
|
||||
}
|
||||
.resizer:hover {
|
||||
background: #4caf50;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.right-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.tools-list {
|
||||
flex: 1;
|
||||
background: #222;
|
||||
border: 1px solid #444;
|
||||
overflow-y: auto;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tools-list {
|
||||
flex: 1;
|
||||
background: #222;
|
||||
border: 1px solid #444;
|
||||
overflow-y: auto;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.tool-item {
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid #333;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
}
|
||||
.tool-item {
|
||||
padding: 6px;
|
||||
border-bottom: 1px solid #333;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.tool-item:hover {
|
||||
background: #444;
|
||||
}
|
||||
.tool-item:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.flex-v {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.flex-v {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
background: #222;
|
||||
color: #ccc;
|
||||
border: 1px solid #444;
|
||||
padding: 5px;
|
||||
font-family: monospace;
|
||||
resize: none;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
background: #222;
|
||||
color: #ccc;
|
||||
border: 1px solid #444;
|
||||
padding: 5px;
|
||||
font-family: monospace;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
#toolParams {
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#toolParams {
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#resultContent {
|
||||
flex: 1;
|
||||
}
|
||||
#resultContent {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin: 4px 0;
|
||||
}
|
||||
label {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.tool-description {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.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>
|
||||
.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>
|
||||
|
||||
@@ -39,6 +39,11 @@ Editor.Panel.extend({
|
||||
*/
|
||||
"mcp-bridge:state-changed"(event, config) {
|
||||
this.updateUI(config.active);
|
||||
// 如果服务器已启动，更新面板显示的端口为实际运行端口
|
||||
if (config.active && config.port) {
|
||||
const portInput = this.shadowRoot.querySelector("#portInput");
|
||||
if (portInput) portInput.value = config.port;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user