修复了一些挂载bug，将面板技术从纯html变更成了Vue3，界面更有好些，后期扩展更方便。增加了工具配置功能，可以自行选择需要使用的工具。
This commit is contained in:
root
@@ -1,229 +1,386 @@
|
||||
import { readSettings } from '../../settings';
|
||||
/* eslint-disable vue/one-component-per-file */
|
||||
|
||||
import { readFileSync } from 'fs-extra';
|
||||
import { join } from 'path';
|
||||
import { createApp, App, defineComponent, ref, computed, onMounted, watch, nextTick } from 'vue';
|
||||
|
||||
/**
|
||||
* @zh 如果希望兼容 3.3 之前的版本可以使用下方的代码
|
||||
* @en You can add the code below if you want compatibility with versions prior to 3.3
|
||||
*/
|
||||
// Editor.Panel.define = Editor.Panel.define || function(options: any) { return options }
|
||||
const panelDataMap = new WeakMap<any, App>();
|
||||
|
||||
// 定义工具配置接口
|
||||
interface ToolConfig {
|
||||
category: string;
|
||||
name: string;
|
||||
enabled: boolean;
|
||||
description: string;
|
||||
}
|
||||
|
||||
// 定义配置接口
|
||||
interface Configuration {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
tools: ToolConfig[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
// 定义服务器设置接口
|
||||
interface ServerSettings {
|
||||
port: number;
|
||||
autoStart: boolean;
|
||||
debugLog: boolean;
|
||||
maxConnections: number;
|
||||
}
|
||||
|
||||
module.exports = Editor.Panel.define({
|
||||
listeners: {
|
||||
show() { console.log('MCP Server panel shown'); },
|
||||
hide() { console.log('MCP Server panel hidden'); }
|
||||
show() {
|
||||
console.log('[MCP Panel] Panel shown');
|
||||
},
|
||||
hide() {
|
||||
console.log('[MCP Panel] Panel hidden');
|
||||
},
|
||||
},
|
||||
template: readFileSync(join(__dirname, '../../../static/template/default/index.html'), 'utf-8'),
|
||||
style: readFileSync(join(__dirname, '../../../static/style/default/index.css'), 'utf-8'),
|
||||
$: {
|
||||
app: '#app',
|
||||
panelTitle: '#panelTitle',
|
||||
serverStatusLabel: '#serverStatusLabel',
|
||||
serverStatusLabelProp: '#serverStatusLabelProp',
|
||||
serverStatusValue: '#serverStatusValue',
|
||||
connectedLabel: '#connectedLabel',
|
||||
connectedClients: '#connectedClients',
|
||||
toggleServerBtn: '#toggleServerBtn',
|
||||
settingsLabel: '#settingsLabel',
|
||||
portLabel: '#portLabel',
|
||||
autoStartLabel: '#autoStartLabel',
|
||||
debugLogLabel: '#debugLogLabel',
|
||||
maxConnectionsLabel: '#maxConnectionsLabel',
|
||||
connectionInfoLabel: '#connectionInfoLabel',
|
||||
httpUrlLabel: '#httpUrlLabel',
|
||||
httpUrlInput: '#httpUrlInput',
|
||||
copyBtn: '#copyBtn',
|
||||
saveSettingsBtn: '#saveSettingsBtn',
|
||||
// 新增输入控件id
|
||||
portInput: '#portInput',
|
||||
maxConnInput: '#maxConnInput',
|
||||
autoStartInput: '#autoStartInput',
|
||||
debugLogInput: '#debugLogInput',
|
||||
},
|
||||
methods: {
|
||||
async updateServerStatus(this: any) {
|
||||
try {
|
||||
const status = await Editor.Message.request('cocos-mcp-server', 'get-server-status');
|
||||
this.serverRunning = status.running;
|
||||
this.connectedClients = status.clients || 0;
|
||||
this.serverStatus = this.serverRunning ?
|
||||
Editor.I18n.t('cocos-mcp-server.connected') :
|
||||
Editor.I18n.t('cocos-mcp-server.disconnected');
|
||||
this.statusClass = this.serverRunning ? 'running' : 'stopped';
|
||||
this.buttonText = this.serverRunning ?
|
||||
Editor.I18n.t('cocos-mcp-server.stop_server') :
|
||||
Editor.I18n.t('cocos-mcp-server.start_server');
|
||||
// 刷新UI
|
||||
this.$.serverStatusValue.innerText = this.serverStatus;
|
||||
this.$.connectedClients.innerText = this.connectedClients;
|
||||
this.$.toggleServerBtn.innerText = this.buttonText;
|
||||
if (this.serverRunning) {
|
||||
this.httpUrl = `http://localhost:${this.settings.port}/mcp`;
|
||||
this.$.httpUrlInput.value = this.httpUrl;
|
||||
} else {
|
||||
this.httpUrl = '';
|
||||
this.$.httpUrlInput.value = '';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to update server status:', err);
|
||||
}
|
||||
},
|
||||
|
||||
async toggleServer(this: any) {
|
||||
this.isProcessing = true;
|
||||
try {
|
||||
if (this.serverRunning) {
|
||||
await this.stopServer();
|
||||
} else {
|
||||
await this.startServer();
|
||||
}
|
||||
} finally {
|
||||
this.isProcessing = false;
|
||||
}
|
||||
},
|
||||
|
||||
async startServer(this: any) {
|
||||
try {
|
||||
await Editor.Message.request('cocos-mcp-server', 'start-server');
|
||||
Editor.Dialog.info(Editor.I18n.t('cocos-mcp-server.server_started'), {
|
||||
detail: Editor.I18n.t('cocos-mcp-server.server_running').replace('{0}', this.settings.port.toString())
|
||||
});
|
||||
await this.updateServerStatus();
|
||||
} catch (err: any) {
|
||||
Editor.Dialog.error(Editor.I18n.t('cocos-mcp-server.failed_to_start'), err.message);
|
||||
}
|
||||
},
|
||||
|
||||
async stopServer(this: any) {
|
||||
try {
|
||||
await Editor.Message.request('cocos-mcp-server', 'stop-server');
|
||||
Editor.Dialog.info(Editor.I18n.t('cocos-mcp-server.server_stopped_msg'), {
|
||||
detail: Editor.I18n.t('cocos-mcp-server.server_stopped')
|
||||
});
|
||||
await this.updateServerStatus();
|
||||
} catch (err: any) {
|
||||
Editor.Dialog.error(Editor.I18n.t('cocos-mcp-server.failed_to_stop'), err.message);
|
||||
}
|
||||
},
|
||||
|
||||
async saveSettings(this: any) {
|
||||
try {
|
||||
// 直接用 this.$ 获取所有输入控件的当前值
|
||||
const port = this.$.portInput ? Number((this.$.portInput as any).value) : 3000;
|
||||
const maxConnections = this.$.maxConnInput ? Number((this.$.maxConnInput as any).value) : 10;
|
||||
const autoStart = this.$.autoStartInput ? !!(this.$.autoStartInput as any).checked : false;
|
||||
const enableDebugLog = this.$.debugLogInput ? !!(this.$.debugLogInput as any).checked : false;
|
||||
// 组装 settings
|
||||
const settings = {
|
||||
...this.settings,
|
||||
port,
|
||||
maxConnections,
|
||||
autoStart,
|
||||
enableDebugLog,
|
||||
};
|
||||
await Editor.Message.request('cocos-mcp-server', 'update-settings', settings);
|
||||
// 重新拉取设置
|
||||
const newSettings = await Editor.Message.request('cocos-mcp-server', 'get-server-settings');
|
||||
this.settings = newSettings;
|
||||
this.originalSettings = JSON.stringify(newSettings);
|
||||
Editor.Dialog.info(Editor.I18n.t('cocos-mcp-server.settings_saved'));
|
||||
} catch (err: any) {
|
||||
Editor.Dialog.error(Editor.I18n.t('cocos-mcp-server.failed_to_save'), err.message);
|
||||
}
|
||||
},
|
||||
|
||||
copyUrl(this: any) {
|
||||
Editor.Clipboard.write('text', this.httpUrl);
|
||||
Editor.Dialog.info(Editor.I18n.t('cocos-mcp-server.url_copied'));
|
||||
},
|
||||
|
||||
settingsChanged(this: any) {
|
||||
return JSON.stringify(this.settings) !== this.originalSettings;
|
||||
},
|
||||
bindSettingsEvents(this: any) {
|
||||
// 端口输入框
|
||||
const portInput = document.querySelectorAll('ui-num-input[slot="content"]')[0];
|
||||
if (portInput) {
|
||||
portInput.addEventListener('change', (e: any) => {
|
||||
this.settings.port = Number(e.detail.value);
|
||||
});
|
||||
}
|
||||
// 最大连接数
|
||||
const maxConnInput = document.querySelectorAll('ui-num-input[slot="content"]')[1];
|
||||
if (maxConnInput) {
|
||||
maxConnInput.addEventListener('change', (e: any) => {
|
||||
this.settings.maxConnections = Number(e.detail.value);
|
||||
});
|
||||
}
|
||||
// 复选框
|
||||
const checkboxes = document.querySelectorAll('ui-checkbox[slot="content"]');
|
||||
if (checkboxes && checkboxes.length >= 2) {
|
||||
checkboxes[0].addEventListener('change', (e: any) => {
|
||||
this.settings.autoStart = !!e.detail.value;
|
||||
});
|
||||
checkboxes[1].addEventListener('change', (e: any) => {
|
||||
this.settings.enableDebugLog = !!e.detail.value;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
ready() {
|
||||
Editor.Message.request('cocos-mcp-server', 'get-server-settings').then((settings) => {
|
||||
this.settings = settings;
|
||||
this.originalSettings = JSON.stringify(settings);
|
||||
// 本地化label赋值
|
||||
this.$.panelTitle.innerText = Editor.I18n.t('cocos-mcp-server.panel_title');
|
||||
this.$.serverStatusLabel.innerText = Editor.I18n.t('cocos-mcp-server.server_status');
|
||||
this.$.serverStatusLabelProp.innerText = Editor.I18n.t('cocos-mcp-server.server_status');
|
||||
this.$.connectedLabel.innerText = Editor.I18n.t('cocos-mcp-server.connected');
|
||||
this.$.settingsLabel.innerText = Editor.I18n.t('cocos-mcp-server.settings');
|
||||
this.$.portLabel.innerText = Editor.I18n.t('cocos-mcp-server.port');
|
||||
this.$.autoStartLabel.innerText = Editor.I18n.t('cocos-mcp-server.auto_start');
|
||||
this.$.debugLogLabel.innerText = Editor.I18n.t('cocos-mcp-server.debug_log');
|
||||
this.$.maxConnectionsLabel.innerText = Editor.I18n.t('cocos-mcp-server.max_connections');
|
||||
this.$.connectionInfoLabel.innerText = Editor.I18n.t('cocos-mcp-server.connection_info');
|
||||
this.$.httpUrlLabel.innerText = Editor.I18n.t('cocos-mcp-server.http_url');
|
||||
this.$.copyBtn.innerText = Editor.I18n.t('cocos-mcp-server.copy');
|
||||
this.$.saveSettingsBtn.innerText = Editor.I18n.t('cocos-mcp-server.save_settings');
|
||||
// 动态内容初始化
|
||||
this.$.serverStatusValue.innerText = '';
|
||||
this.$.connectedClients.innerText = '';
|
||||
this.$.toggleServerBtn.innerText = '';
|
||||
this.$.httpUrlInput.value = '';
|
||||
// 绑定按钮事件
|
||||
this.$.toggleServerBtn.addEventListener('confirm', this.toggleServer.bind(this));
|
||||
this.$.saveSettingsBtn.addEventListener('confirm', this.saveSettings.bind(this));
|
||||
this.$.copyBtn.addEventListener('confirm', this.copyUrl.bind(this));
|
||||
// 延迟绑定事件，确保 UI 组件已渲染
|
||||
setTimeout(() => {
|
||||
this.bindSettingsEvents();
|
||||
}, 100);
|
||||
// Set up periodic status updates
|
||||
(this as any).statusInterval = setInterval(() => {
|
||||
(this as any).updateServerStatus();
|
||||
}, 2000);
|
||||
// 不再自动启动服务器，用户点击才启动
|
||||
(this as any).updateServerStatus();
|
||||
});
|
||||
},
|
||||
beforeClose() {
|
||||
if ((this as any).statusInterval) {
|
||||
clearInterval((this as any).statusInterval);
|
||||
if (this.$.app) {
|
||||
const app = createApp({});
|
||||
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('ui-');
|
||||
|
||||
// 创建主应用组件
|
||||
app.component('McpServerApp', defineComponent({
|
||||
setup() {
|
||||
// 响应式数据
|
||||
const activeTab = ref('server');
|
||||
const serverRunning = ref(false);
|
||||
const serverStatus = ref('已停止');
|
||||
const connectedClients = ref(0);
|
||||
const httpUrl = ref('');
|
||||
const isProcessing = ref(false);
|
||||
|
||||
const settings = ref<ServerSettings>({
|
||||
port: 3000,
|
||||
autoStart: false,
|
||||
debugLog: false,
|
||||
maxConnections: 10
|
||||
});
|
||||
|
||||
const availableTools = ref<ToolConfig[]>([]);
|
||||
const toolCategories = ref<string[]>([]);
|
||||
|
||||
|
||||
|
||||
// 计算属性
|
||||
const statusClass = computed(() => ({
|
||||
'status-running': serverRunning.value,
|
||||
'status-stopped': !serverRunning.value
|
||||
}));
|
||||
|
||||
const totalTools = computed(() => availableTools.value.length);
|
||||
const enabledTools = computed(() => availableTools.value.filter(t => t.enabled).length);
|
||||
const disabledTools = computed(() => totalTools.value - enabledTools.value);
|
||||
|
||||
|
||||
|
||||
const settingsChanged = ref(false);
|
||||
|
||||
// 方法
|
||||
const switchTab = (tabName: string) => {
|
||||
activeTab.value = tabName;
|
||||
if (tabName === 'tools') {
|
||||
loadToolManagerState();
|
||||
}
|
||||
};
|
||||
|
||||
const toggleServer = async () => {
|
||||
try {
|
||||
if (serverRunning.value) {
|
||||
await Editor.Message.request('cocos-mcp-server', 'stop-server');
|
||||
} else {
|
||||
// 启动服务器时使用当前面板设置
|
||||
const currentSettings = {
|
||||
port: settings.value.port,
|
||||
autoStart: settings.value.autoStart,
|
||||
enableDebugLog: settings.value.debugLog,
|
||||
maxConnections: settings.value.maxConnections
|
||||
};
|
||||
await Editor.Message.request('cocos-mcp-server', 'update-settings', currentSettings);
|
||||
await Editor.Message.request('cocos-mcp-server', 'start-server');
|
||||
}
|
||||
console.log('[Vue App] Server toggled');
|
||||
} catch (error) {
|
||||
console.error('[Vue App] Failed to toggle server:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const saveSettings = async () => {
|
||||
try {
|
||||
// 创建一个简单的对象，避免克隆错误
|
||||
const settingsData = {
|
||||
port: settings.value.port,
|
||||
autoStart: settings.value.autoStart,
|
||||
debugLog: settings.value.debugLog,
|
||||
maxConnections: settings.value.maxConnections
|
||||
};
|
||||
|
||||
const result = await Editor.Message.request('cocos-mcp-server', 'update-settings', settingsData);
|
||||
console.log('[Vue App] Save settings result:', result);
|
||||
settingsChanged.value = false;
|
||||
} catch (error) {
|
||||
console.error('[Vue App] Failed to save settings:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const copyUrl = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(httpUrl.value);
|
||||
console.log('[Vue App] URL copied to clipboard');
|
||||
} catch (error) {
|
||||
console.error('[Vue App] Failed to copy URL:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadToolManagerState = async () => {
|
||||
try {
|
||||
const result = await Editor.Message.request('cocos-mcp-server', 'getToolManagerState');
|
||||
if (result && result.success) {
|
||||
// 总是加载后端状态，确保数据是最新的
|
||||
availableTools.value = result.availableTools || [];
|
||||
console.log('[Vue App] Loaded tools:', availableTools.value.length);
|
||||
|
||||
// 更新工具分类
|
||||
const categories = new Set(availableTools.value.map(tool => tool.category));
|
||||
toolCategories.value = Array.from(categories);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[Vue App] Failed to load tool manager state:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const updateToolStatus = async (category: string, name: string, enabled: boolean) => {
|
||||
try {
|
||||
console.log('[Vue App] updateToolStatus called:', category, name, enabled);
|
||||
|
||||
// 先更新本地状态
|
||||
const toolIndex = availableTools.value.findIndex(t => t.category === category && t.name === name);
|
||||
if (toolIndex !== -1) {
|
||||
availableTools.value[toolIndex].enabled = enabled;
|
||||
// 强制触发响应式更新
|
||||
availableTools.value = [...availableTools.value];
|
||||
console.log('[Vue App] Local state updated, tool enabled:', availableTools.value[toolIndex].enabled);
|
||||
}
|
||||
|
||||
// 调用后端更新
|
||||
const result = await Editor.Message.request('cocos-mcp-server', 'updateToolStatus', category, name, enabled);
|
||||
if (!result || !result.success) {
|
||||
// 如果后端更新失败，回滚本地状态
|
||||
if (toolIndex !== -1) {
|
||||
availableTools.value[toolIndex].enabled = !enabled;
|
||||
availableTools.value = [...availableTools.value];
|
||||
}
|
||||
console.error('[Vue App] Backend update failed, rolled back local state');
|
||||
} else {
|
||||
console.log('[Vue App] Backend update successful');
|
||||
}
|
||||
} catch (error) {
|
||||
// 如果发生错误，回滚本地状态
|
||||
const toolIndex = availableTools.value.findIndex(t => t.category === category && t.name === name);
|
||||
if (toolIndex !== -1) {
|
||||
availableTools.value[toolIndex].enabled = !enabled;
|
||||
availableTools.value = [...availableTools.value];
|
||||
}
|
||||
console.error('[Vue App] Failed to update tool status:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const selectAllTools = async () => {
|
||||
try {
|
||||
// 直接更新本地状态，然后保存
|
||||
availableTools.value.forEach(tool => tool.enabled = true);
|
||||
await saveChanges();
|
||||
} catch (error) {
|
||||
console.error('[Vue App] Failed to select all tools:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const deselectAllTools = async () => {
|
||||
try {
|
||||
// 直接更新本地状态，然后保存
|
||||
availableTools.value.forEach(tool => tool.enabled = false);
|
||||
await saveChanges();
|
||||
} catch (error) {
|
||||
console.error('[Vue App] Failed to deselect all tools:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const saveChanges = async () => {
|
||||
try {
|
||||
// 创建普通对象，避免Vue3响应式对象克隆错误
|
||||
const updates = availableTools.value.map(tool => ({
|
||||
category: String(tool.category),
|
||||
name: String(tool.name),
|
||||
enabled: Boolean(tool.enabled)
|
||||
}));
|
||||
|
||||
console.log('[Vue App] Sending updates:', updates.length, 'tools');
|
||||
|
||||
const result = await Editor.Message.request('cocos-mcp-server', 'updateToolStatusBatch', updates);
|
||||
|
||||
if (result && result.success) {
|
||||
console.log('[Vue App] Tool changes saved successfully');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[Vue App] Failed to save tool changes:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
const toggleCategoryTools = async (category: string, enabled: boolean) => {
|
||||
try {
|
||||
// 直接更新本地状态，然后保存
|
||||
availableTools.value.forEach(tool => {
|
||||
if (tool.category === category) {
|
||||
tool.enabled = enabled;
|
||||
}
|
||||
});
|
||||
await saveChanges();
|
||||
} catch (error) {
|
||||
console.error('[Vue App] Failed to toggle category tools:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const getToolsByCategory = (category: string) => {
|
||||
return availableTools.value.filter(tool => tool.category === category);
|
||||
};
|
||||
|
||||
const getCategoryDisplayName = (category: string): string => {
|
||||
const categoryNames: { [key: string]: string } = {
|
||||
'scene': '场景工具',
|
||||
'node': '节点工具',
|
||||
'component': '组件工具',
|
||||
'prefab': '预制体工具',
|
||||
'project': '项目工具',
|
||||
'debug': '调试工具',
|
||||
'preferences': '偏好设置工具',
|
||||
'server': '服务器工具',
|
||||
'broadcast': '广播工具',
|
||||
'sceneAdvanced': '高级场景工具',
|
||||
'sceneView': '场景视图工具',
|
||||
'referenceImage': '参考图片工具',
|
||||
'assetAdvanced': '高级资源工具',
|
||||
'validation': '验证工具'
|
||||
};
|
||||
return categoryNames[category] || category;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 监听设置变化
|
||||
watch(settings, () => {
|
||||
settingsChanged.value = true;
|
||||
}, { deep: true });
|
||||
|
||||
|
||||
|
||||
// 组件挂载时加载数据
|
||||
onMounted(async () => {
|
||||
// 加载工具管理器状态
|
||||
await loadToolManagerState();
|
||||
|
||||
// 从服务器状态获取设置信息
|
||||
try {
|
||||
const serverStatus = await Editor.Message.request('cocos-mcp-server', 'get-server-status');
|
||||
if (serverStatus && serverStatus.settings) {
|
||||
settings.value = {
|
||||
port: serverStatus.settings.port || 3000,
|
||||
autoStart: serverStatus.settings.autoStart || false,
|
||||
debugLog: serverStatus.settings.enableDebugLog || false,
|
||||
maxConnections: serverStatus.settings.maxConnections || 10
|
||||
};
|
||||
console.log('[Vue App] Server settings loaded from status:', serverStatus.settings);
|
||||
} else if (serverStatus && serverStatus.port) {
|
||||
// 兼容旧版本，只获取端口信息
|
||||
settings.value.port = serverStatus.port;
|
||||
console.log('[Vue App] Port loaded from server status:', serverStatus.port);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[Vue App] Failed to get server status:', error);
|
||||
console.log('[Vue App] Using default server settings');
|
||||
}
|
||||
|
||||
// 定期更新服务器状态
|
||||
setInterval(async () => {
|
||||
try {
|
||||
const result = await Editor.Message.request('cocos-mcp-server', 'get-server-status');
|
||||
if (result) {
|
||||
serverRunning.value = result.running;
|
||||
serverStatus.value = result.running ? '运行中' : '已停止';
|
||||
connectedClients.value = result.clients || 0;
|
||||
httpUrl.value = result.running ? `http://localhost:${result.port}` : '';
|
||||
isProcessing.value = false;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[Vue App] Failed to get server status:', error);
|
||||
}
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
return {
|
||||
// 数据
|
||||
activeTab,
|
||||
serverRunning,
|
||||
serverStatus,
|
||||
connectedClients,
|
||||
httpUrl,
|
||||
isProcessing,
|
||||
settings,
|
||||
availableTools,
|
||||
toolCategories,
|
||||
settingsChanged,
|
||||
|
||||
// 计算属性
|
||||
statusClass,
|
||||
totalTools,
|
||||
enabledTools,
|
||||
disabledTools,
|
||||
|
||||
// 方法
|
||||
switchTab,
|
||||
toggleServer,
|
||||
saveSettings,
|
||||
copyUrl,
|
||||
loadToolManagerState,
|
||||
updateToolStatus,
|
||||
selectAllTools,
|
||||
deselectAllTools,
|
||||
saveChanges,
|
||||
toggleCategoryTools,
|
||||
getToolsByCategory,
|
||||
getCategoryDisplayName
|
||||
};
|
||||
},
|
||||
template: readFileSync(join(__dirname, '../../../static/template/vue/mcp-server-app.html'), 'utf-8'),
|
||||
}));
|
||||
|
||||
app.mount(this.$.app);
|
||||
panelDataMap.set(this, app);
|
||||
|
||||
console.log('[MCP Panel] Vue3 app mounted successfully');
|
||||
}
|
||||
},
|
||||
beforeClose() { },
|
||||
close() {
|
||||
// Panel close cleanup
|
||||
const app = panelDataMap.get(this);
|
||||
if (app) {
|
||||
app.unmount();
|
||||
}
|
||||
},
|
||||
|
||||
// Direct properties for data access
|
||||
serverRunning: false,
|
||||
connectedClients: 0,
|
||||
serverStatus: '',
|
||||
statusClass: 'stopped',
|
||||
buttonText: '',
|
||||
isProcessing: false,
|
||||
settings: {},
|
||||
httpUrl: '',
|
||||
statusInterval: null as any,
|
||||
originalSettings: ''
|
||||
} as any);
|
||||
});
|
||||
Reference in New Issue
Block a user