修复了一些挂载bug，将面板技术从纯html变更成了Vue3，界面更有好些，后期扩展更方便。增加了工具配置功能，可以自行选择需要使用的工具。

source/panels/tool-manager/index.ts

@@ -0,0 +1,585 @@
+import { readFileSync } from 'fs-extra';
+import { join } from 'path';
+
+module.exports = Editor.Panel.define({
+    listeners: {
+        show() { console.log('Tool Manager panel shown'); },
+        hide() { console.log('Tool Manager panel hidden'); }
+    },
+    template: readFileSync(join(__dirname, '../../../static/template/default/tool-manager.html'), 'utf-8'),
+    style: readFileSync(join(__dirname, '../../../static/style/default/index.css'), 'utf-8'),
+    $: {
+        panelTitle: '#panelTitle',
+        createConfigBtn: '#createConfigBtn',
+        importConfigBtn: '#importConfigBtn',
+        exportConfigBtn: '#exportConfigBtn',
+        configSelector: '#configSelector',
+        applyConfigBtn: '#applyConfigBtn',
+        editConfigBtn: '#editConfigBtn',
+        deleteConfigBtn: '#deleteConfigBtn',
+        toolsContainer: '#toolsContainer',
+        selectAllBtn: '#selectAllBtn',
+        deselectAllBtn: '#deselectAllBtn',
+        saveChangesBtn: '#saveChangesBtn',
+        totalToolsCount: '#totalToolsCount',
+        enabledToolsCount: '#enabledToolsCount',
+        disabledToolsCount: '#disabledToolsCount',
+        configModal: '#configModal',
+        modalTitle: '#modalTitle',
+        configForm: '#configForm',
+        configName: '#configName',
+        configDescription: '#configDescription',
+        closeModal: '#closeModal',
+        cancelConfigBtn: '#cancelConfigBtn',
+        saveConfigBtn: '#saveConfigBtn',
+        importModal: '#importModal',
+        importConfigJson: '#importConfigJson',
+        closeImportModal: '#closeImportModal',
+        cancelImportBtn: '#cancelImportBtn',
+        confirmImportBtn: '#confirmImportBtn'
+    },
+    methods: {
+        async loadToolManagerState(this: any) {
+            try {
+                this.toolManagerState = await Editor.Message.request('cocos-mcp-server', 'getToolManagerState');
+                this.currentConfiguration = this.toolManagerState.currentConfiguration;
+                this.configurations = this.toolManagerState.configurations;
+                this.availableTools = this.toolManagerState.availableTools;
+                this.updateUI();
+            } catch (error) {
+                console.error('Failed to load tool manager state:', error);
+                this.showError('加载工具管理器状态失败');
+            }
+        },
+
+        updateUI(this: any) {
+            this.updateConfigSelector();
+            this.updateToolsDisplay();
+            this.updateStatusBar();
+            this.updateButtons();
+        },
+
+        updateConfigSelector(this: any) {
+            const selector = this.$.configSelector;
+            selector.innerHTML = '<option value="">选择配置...</option>';
+            
+            this.configurations.forEach((config: any) => {
+                const option = document.createElement('option');
+                option.value = config.id;
+                option.textContent = config.name;
+                if (this.currentConfiguration && config.id === this.currentConfiguration.id) {
+                    option.selected = true;
+                }
+                selector.appendChild(option);
+            });
+        },
+
+        updateToolsDisplay(this: any) {
+            const container = this.$.toolsContainer;
+            
+            if (!this.currentConfiguration) {
+                container.innerHTML = `
+                    <div class="empty-state">
+                        <h3>没有选择配置</h3>
+                        <p>请先选择一个配置或创建新配置</p>
+                    </div>
+                `;
+                return;
+            }
+
+            const toolsByCategory: any = {};
+            this.currentConfiguration.tools.forEach((tool: any) => {
+                if (!toolsByCategory[tool.category]) {
+                    toolsByCategory[tool.category] = [];
+                }
+                toolsByCategory[tool.category].push(tool);
+            });
+
+            container.innerHTML = '';
+            
+            Object.entries(toolsByCategory).forEach(([category, tools]: [string, any]) => {
+                const categoryDiv = document.createElement('div');
+                categoryDiv.className = 'tool-category';
+                
+                const enabledCount = tools.filter((t: any) => t.enabled).length;
+                const totalCount = tools.length;
+                
+                categoryDiv.innerHTML = `
+                    <div class="category-header">
+                        <div class="category-name">${this.getCategoryDisplayName(category)}</div>
+                        <div class="category-toggle">
+                            <span>${enabledCount}/${totalCount}</span>
+                            <input type="checkbox" class="checkbox category-checkbox" 
+                                   data-category="${category}" 
+                                   ${enabledCount === totalCount ? 'checked' : ''}>
+                        </div>
+                    </div>
+                    <div class="tool-list">
+                        ${tools.map((tool: any) => `
+                            <div class="tool-item">
+                                <div class="tool-info">
+                                    <div class="tool-name">${tool.name}</div>
+                                    <div class="tool-description">${tool.description}</div>
+                                </div>
+                                <div class="tool-toggle">
+                                    <input type="checkbox" class="checkbox tool-checkbox" 
+                                           data-category="${tool.category}" 
+                                           data-name="${tool.name}" 
+                                           ${tool.enabled ? 'checked' : ''}>
+                                </div>
+                            </div>
+                        `).join('')}
+                    </div>
+                `;
+                
+                container.appendChild(categoryDiv);
+            });
+
+            this.bindToolEvents();
+        },
+
+        bindToolEvents(this: any) {
+            document.querySelectorAll('.category-checkbox').forEach((checkbox: any) => {
+                checkbox.addEventListener('change', (e: any) => {
+                    const category = e.target.dataset.category;
+                    const checked = e.target.checked;
+                    this.toggleCategoryTools(category, checked);
+                });
+            });
+
+            document.querySelectorAll('.tool-checkbox').forEach((checkbox: any) => {
+                checkbox.addEventListener('change', (e: any) => {
+                    const category = e.target.dataset.category;
+                    const name = e.target.dataset.name;
+                    const enabled = e.target.checked;
+                    this.updateToolStatus(category, name, enabled);
+                });
+            });
+        },
+
+        async toggleCategoryTools(this: any, category: string, enabled: boolean) {
+            if (!this.currentConfiguration) return;
+
+            console.log(`Toggling category tools: ${category} = ${enabled}`);
+
+            const categoryTools = this.currentConfiguration.tools.filter((tool: any) => tool.category === category);
+            if (categoryTools.length === 0) return;
+
+            const updates = categoryTools.map((tool: any) => ({
+                category: tool.category,
+                name: tool.name,
+                enabled: enabled
+            }));
+
+            try {
+                // 先更新本地状态
+                categoryTools.forEach((tool: any) => {
+                    tool.enabled = enabled;
+                });
+                console.log(`Updated local category state: ${category} = ${enabled}`);
+                
+                // 立即更新UI
+                this.updateStatusBar();
+                this.updateCategoryCounts();
+                this.updateToolCheckboxes(category, enabled);
+
+                // 然后发送到后端
+                await Editor.Message.request('cocos-mcp-server', 'updateToolStatusBatch', 
+                    this.currentConfiguration.id, updates);
+                
+            } catch (error) {
+                console.error('Failed to toggle category tools:', error);
+                this.showError('切换类别工具失败');
+                
+                // 如果后端更新失败，回滚本地状态
+                categoryTools.forEach((tool: any) => {
+                    tool.enabled = !enabled;
+                });
+                this.updateStatusBar();
+                this.updateCategoryCounts();
+                this.updateToolCheckboxes(category, !enabled);
+            }
+        },
+
+        async updateToolStatus(this: any, category: string, name: string, enabled: boolean) {
+            if (!this.currentConfiguration) return;
+
+            console.log(`Updating tool status: ${category}.${name} = ${enabled}`);
+            console.log(`Current config ID: ${this.currentConfiguration.id}`);
+
+            // 先更新本地状态
+            const tool = this.currentConfiguration.tools.find((t: any) => 
+                t.category === category && t.name === name);
+            if (!tool) {
+                console.error(`Tool not found: ${category}.${name}`);
+                return;
+            }
+
+            try {
+                tool.enabled = enabled;
+                console.log(`Updated local tool state: ${tool.name} = ${tool.enabled}`);
+                
+                // 立即更新UI（只更新统计信息，不重新渲染工具列表）
+                this.updateStatusBar();
+                this.updateCategoryCounts();
+
+                // 然后发送到后端
+                console.log(`Sending to backend: configId=${this.currentConfiguration.id}, category=${category}, name=${name}, enabled=${enabled}`);
+                const result = await Editor.Message.request('cocos-mcp-server', 'updateToolStatus', 
+                    this.currentConfiguration.id, category, name, enabled);
+                console.log('Backend response:', result);
+                
+            } catch (error) {
+                console.error('Failed to update tool status:', error);
+                this.showError('更新工具状态失败');
+                
+                // 如果后端更新失败，回滚本地状态
+                tool.enabled = !enabled;
+                this.updateStatusBar();
+                this.updateCategoryCounts();
+            }
+        },
+
+        updateStatusBar(this: any) {
+            if (!this.currentConfiguration) {
+                this.$.totalToolsCount.textContent = '0';
+                this.$.enabledToolsCount.textContent = '0';
+                this.$.disabledToolsCount.textContent = '0';
+                return;
+            }
+
+            const total = this.currentConfiguration.tools.length;
+            const enabled = this.currentConfiguration.tools.filter((t: any) => t.enabled).length;
+            const disabled = total - enabled;
+
+            console.log(`Status bar update: total=${total}, enabled=${enabled}, disabled=${disabled}`);
+
+            this.$.totalToolsCount.textContent = total.toString();
+            this.$.enabledToolsCount.textContent = enabled.toString();
+            this.$.disabledToolsCount.textContent = disabled.toString();
+        },
+
+        updateCategoryCounts(this: any) {
+            if (!this.currentConfiguration) return;
+
+            // 更新每个类别的计数显示
+            document.querySelectorAll('.category-checkbox').forEach((checkbox: any) => {
+                const category = checkbox.dataset.category;
+                const categoryTools = this.currentConfiguration.tools.filter((t: any) => t.category === category);
+                const enabledCount = categoryTools.filter((t: any) => t.enabled).length;
+                const totalCount = categoryTools.length;
+                
+                // 更新计数显示
+                const countSpan = checkbox.parentElement.querySelector('span');
+                if (countSpan) {
+                    countSpan.textContent = `${enabledCount}/${totalCount}`;
+                }
+                
+                // 更新类别复选框状态
+                checkbox.checked = enabledCount === totalCount;
+            });
+        },
+
+        updateToolCheckboxes(this: any, category: string, enabled: boolean) {
+            // 更新特定类别的所有工具复选框
+            document.querySelectorAll(`.tool-checkbox[data-category="${category}"]`).forEach((checkbox: any) => {
+                checkbox.checked = enabled;
+            });
+        },
+
+        updateButtons(this: any) {
+            const hasCurrentConfig = !!this.currentConfiguration;
+            this.$.editConfigBtn.disabled = !hasCurrentConfig;
+            this.$.deleteConfigBtn.disabled = !hasCurrentConfig;
+            this.$.exportConfigBtn.disabled = !hasCurrentConfig;
+            this.$.applyConfigBtn.disabled = !hasCurrentConfig;
+        },
+
+        async createConfiguration(this: any) {
+            this.editingConfig = null;
+            this.$.modalTitle.textContent = '新建配置';
+            this.$.configName.value = '';
+            this.$.configDescription.value = '';
+            this.showModal('configModal');
+        },
+
+        async editConfiguration(this: any) {
+            if (!this.currentConfiguration) return;
+
+            this.editingConfig = this.currentConfiguration;
+            this.$.modalTitle.textContent = '编辑配置';
+            this.$.configName.value = this.currentConfiguration.name;
+            this.$.configDescription.value = this.currentConfiguration.description || '';
+            this.showModal('configModal');
+        },
+
+        async saveConfiguration(this: any) {
+            const name = this.$.configName.value.trim();
+            const description = this.$.configDescription.value.trim();
+
+            if (!name) {
+                this.showError('配置名称不能为空');
+                return;
+            }
+
+            try {
+                if (this.editingConfig) {
+                    await Editor.Message.request('cocos-mcp-server', 'updateToolConfiguration', 
+                        this.editingConfig.id, { name, description });
+                } else {
+                    await Editor.Message.request('cocos-mcp-server', 'createToolConfiguration', name, description);
+                }
+                
+                this.hideModal('configModal');
+                await this.loadToolManagerState();
+            } catch (error) {
+                console.error('Failed to save configuration:', error);
+                this.showError('保存配置失败');
+            }
+        },
+
+        async deleteConfiguration(this: any) {
+            if (!this.currentConfiguration) return;
+
+            const confirmed = await Editor.Dialog.warn('确认删除', {
+                detail: `确定要删除配置 "${this.currentConfiguration.name}" 吗？此操作不可撤销。`
+            });
+            
+            if (confirmed) {
+                try {
+                    await Editor.Message.request('cocos-mcp-server', 'deleteToolConfiguration', 
+                        this.currentConfiguration.id);
+                    await this.loadToolManagerState();
+                } catch (error) {
+                    console.error('Failed to delete configuration:', error);
+                    this.showError('删除配置失败');
+                }
+            }
+        },
+
+        async applyConfiguration(this: any) {
+            const configId = this.$.configSelector.value;
+            if (!configId) return;
+
+            try {
+                await Editor.Message.request('cocos-mcp-server', 'setCurrentToolConfiguration', configId);
+                await this.loadToolManagerState();
+            } catch (error) {
+                console.error('Failed to apply configuration:', error);
+                this.showError('应用配置失败');
+            }
+        },
+
+        async exportConfiguration(this: any) {
+            if (!this.currentConfiguration) return;
+
+            try {
+                const result = await Editor.Message.request('cocos-mcp-server', 'exportToolConfiguration', 
+                    this.currentConfiguration.id);
+                
+                Editor.Clipboard.write('text', result.configJson);
+                Editor.Dialog.info('导出成功', { detail: '配置已复制到剪贴板' });
+            } catch (error) {
+                console.error('Failed to export configuration:', error);
+                this.showError('导出配置失败');
+            }
+        },
+
+        async importConfiguration(this: any) {
+            this.$.importConfigJson.value = '';
+            this.showModal('importModal');
+        },
+
+        async confirmImport(this: any) {
+            const configJson = this.$.importConfigJson.value.trim();
+            if (!configJson) {
+                this.showError('请输入配置JSON');
+                return;
+            }
+
+            try {
+                await Editor.Message.request('cocos-mcp-server', 'importToolConfiguration', configJson);
+                this.hideModal('importModal');
+                await this.loadToolManagerState();
+                Editor.Dialog.info('导入成功', { detail: '配置已成功导入' });
+            } catch (error) {
+                console.error('Failed to import configuration:', error);
+                this.showError('导入配置失败');
+            }
+        },
+
+        async selectAllTools(this: any) {
+            if (!this.currentConfiguration) return;
+
+            console.log('Selecting all tools');
+
+            const updates = this.currentConfiguration.tools.map((tool: any) => ({
+                category: tool.category,
+                name: tool.name,
+                enabled: true
+            }));
+
+            try {
+                // 先更新本地状态
+                this.currentConfiguration.tools.forEach((tool: any) => {
+                    tool.enabled = true;
+                });
+                console.log('Updated local state: all tools enabled');
+                
+                // 立即更新UI
+                this.updateStatusBar();
+                this.updateToolsDisplay();
+
+                // 然后发送到后端
+                await Editor.Message.request('cocos-mcp-server', 'updateToolStatusBatch', 
+                    this.currentConfiguration.id, updates);
+                
+            } catch (error) {
+                console.error('Failed to select all tools:', error);
+                this.showError('全选工具失败');
+                
+                // 如果后端更新失败，回滚本地状态
+                this.currentConfiguration.tools.forEach((tool: any) => {
+                    tool.enabled = false;
+                });
+                this.updateStatusBar();
+                this.updateToolsDisplay();
+            }
+        },
+
+        async deselectAllTools(this: any) {
+            if (!this.currentConfiguration) return;
+
+            console.log('Deselecting all tools');
+
+            const updates = this.currentConfiguration.tools.map((tool: any) => ({
+                category: tool.category,
+                name: tool.name,
+                enabled: false
+            }));
+
+            try {
+                // 先更新本地状态
+                this.currentConfiguration.tools.forEach((tool: any) => {
+                    tool.enabled = false;
+                });
+                console.log('Updated local state: all tools disabled');
+                
+                // 立即更新UI
+                this.updateStatusBar();
+                this.updateToolsDisplay();
+
+                // 然后发送到后端
+                await Editor.Message.request('cocos-mcp-server', 'updateToolStatusBatch', 
+                    this.currentConfiguration.id, updates);
+                
+            } catch (error) {
+                console.error('Failed to deselect all tools:', error);
+                this.showError('取消全选工具失败');
+                
+                // 如果后端更新失败，回滚本地状态
+                this.currentConfiguration.tools.forEach((tool: any) => {
+                    tool.enabled = true;
+                });
+                this.updateStatusBar();
+                this.updateToolsDisplay();
+            }
+        },
+
+        getCategoryDisplayName(this: any, category: string): string {
+            const categoryNames: any = {
+                'scene': '场景工具',
+                'node': '节点工具',
+                'component': '组件工具',
+                'prefab': '预制体工具',
+                'project': '项目工具',
+                'debug': '调试工具',
+                'preferences': '偏好设置工具',
+                'server': '服务器工具',
+                'broadcast': '广播工具',
+                'sceneAdvanced': '高级场景工具',
+                'sceneView': '场景视图工具',
+                'referenceImage': '参考图片工具',
+                'assetAdvanced': '高级资源工具',
+                'validation': '验证工具'
+            };
+            return categoryNames[category] || category;
+        },
+
+        showModal(this: any, modalId: string) {
+            this.$[modalId].style.display = 'block';
+        },
+
+        hideModal(this: any, modalId: string) {
+            this.$[modalId].style.display = 'none';
+        },
+
+        showError(this: any, message: string) {
+            Editor.Dialog.error('错误', { detail: message });
+        },
+
+        async saveChanges(this: any) {
+            if (!this.currentConfiguration) {
+                this.showError('没有选择配置');
+                return;
+            }
+
+            try {
+                // 确保当前配置已保存到后端
+                await Editor.Message.request('cocos-mcp-server', 'updateToolConfiguration', 
+                    this.currentConfiguration.id, {
+                        name: this.currentConfiguration.name,
+                        description: this.currentConfiguration.description,
+                        tools: this.currentConfiguration.tools
+                    });
+                
+                Editor.Dialog.info('保存成功', { detail: '配置更改已保存' });
+            } catch (error) {
+                console.error('Failed to save changes:', error);
+                this.showError('保存更改失败');
+            }
+        },
+
+        bindEvents(this: any) {
+            this.$.createConfigBtn.addEventListener('click', this.createConfiguration.bind(this));
+            this.$.editConfigBtn.addEventListener('click', this.editConfiguration.bind(this));
+            this.$.deleteConfigBtn.addEventListener('click', this.deleteConfiguration.bind(this));
+            this.$.applyConfigBtn.addEventListener('click', this.applyConfiguration.bind(this));
+            this.$.exportConfigBtn.addEventListener('click', this.exportConfiguration.bind(this));
+            this.$.importConfigBtn.addEventListener('click', this.importConfiguration.bind(this));
+
+            this.$.selectAllBtn.addEventListener('click', this.selectAllTools.bind(this));
+            this.$.deselectAllBtn.addEventListener('click', this.deselectAllTools.bind(this));
+            this.$.saveChangesBtn.addEventListener('click', this.saveChanges.bind(this));
+
+            this.$.closeModal.addEventListener('click', () => this.hideModal('configModal'));
+            this.$.cancelConfigBtn.addEventListener('click', () => this.hideModal('configModal'));
+            this.$.configForm.addEventListener('submit', (e: any) => {
+                e.preventDefault();
+                this.saveConfiguration();
+            });
+
+            this.$.closeImportModal.addEventListener('click', () => this.hideModal('importModal'));
+            this.$.cancelImportBtn.addEventListener('click', () => this.hideModal('importModal'));
+            this.$.confirmImportBtn.addEventListener('click', this.confirmImport.bind(this));
+
+            this.$.configSelector.addEventListener('change', this.applyConfiguration.bind(this));
+        }
+    },
+    ready() {
+        (this as any).toolManagerState = null;
+        (this as any).currentConfiguration = null;
+        (this as any).configurations = [];
+        (this as any).availableTools = [];
+        (this as any).editingConfig = null;
+
+        (this as any).bindEvents();
+        (this as any).loadToolManagerState();
+    },
+    beforeClose() {
+        // 清理工作
+    },
+    close() {
+        // 面板关闭清理
+    }
+} as any);