🔍 MCP Modal 调试工具

📋 调试步骤

  1. 打开浏览器开发者工具 (F12 或 Cmd+Option+I)
  2. 切换到 Console 标签
  3. 回到主应用 (http://localhost:5173)
  4. 点击任意 MCP 服务器的 "编辑" 按钮
  5. 在 Console 中查找以下日志

🔎 预期的控制台输出

🔍 [1] 打开服务器详情被调用
🔍 [2] 服务器数据: { id: "...", name: "test", url: "...", ... }
🔍 [3] 当前 showServerDetail 值: false
🔍 [4] editingServer 设置完成: { id: "...", name: "test", ... }
✅ [5] showServerDetail 设置为 true
✅ [6] 最终状态检查 - showServerDetail: true editingServer: {...}

🐛 可能的问题和解决方案

问题 1: 点击"编辑"按钮后，控制台完全没有日志

原因: 按钮的点击事件没有被触发

检查: 解决方案: 刷新页面后重试，或清除浏览器缓存

问题 2: 有日志输出，但 modal 不显示

原因: Modal 组件渲染或样式问题

检查: 在控制台执行此代码:
const modal = document.querySelector('.n-modal')
console.log('Modal 元素:', modal)
console.log('Modal 样式:', modal ? window.getComputedStyle(modal) : 'Not found')

问题 3: 日志显示 showServerDetail 为 true，但看不到 modal

原因: Modal 可能被渲染在错误的位置或 z-index 太低

临时解决方案:
// 在控制台执行，强制显示 modal
const modals = document.querySelectorAll('.n-modal')
modals.forEach(m => {
  m.style.display = 'flex'
  m.style.opacity = '1'
  m.style.zIndex = '9999'
})

✅ 测试清单

🔧 快速修复脚本

如果 modal 不显示，在浏览器控制台执行以下代码:

检查 Vue 应用状态

// 检查 showServerDetail 的值
const app = document.querySelector('#app')
const vueInstance = app?.__vueParentComponent
console.log('Vue 实例:', vueInstance)

// 如果能访问到 setupState
console.log('showServerDetail:', vueInstance?.setupState?.showServerDetail)
console.log('editingServer:', vueInstance?.setupState?.editingServer)

强制触发 modal 显示

// 在控制台直接设置状态（需要 Vue Devtools）
// 或者尝试直接修改 DOM
const backdrop = document.querySelector('.n-modal-container')
if (backdrop) {
  backdrop.style.display = 'block'
  backdrop.style.opacity = '1'
  console.log('✅ Modal backdrop 已强制显示')
}

📞 需要报告的信息

如果问题持续，请提供以下信息：

  1. 点击"编辑"后控制台的完整输出（截图）
  2. 浏览器的 Elements 标签中搜索 "n-modal" 的结果（截图）
  3. Console 中是否有任何红色错误信息
  4. 浏览器类型和版本

🚀 返回主应用