🛠️ 已实施的修复
修复 1: 调整 Modal 样式
修改了 modal 和 card 的样式配置，确保内容能正确显示：
<n-modal v-model:show="showServerDetail">
<n-card style="width: 90vw; max-width: 1200px; max-height: 90vh; overflow: auto;">
<MCPServerDetail .../>
</n-card>
</n-modal>
修复 2: 调整组件高度
将 MCPServerDetail 组件的 height: 100% 改为 min-height: 500px
.mcp-server-detail {
min-height: 500px;
display: flex;
flex-direction: column;
}
修复 3: 添加详细调试日志
在组件加载、数据更新等关键位置添加了console.log
📋 测试步骤
步骤 1: 刷新页面
强制刷新浏览器页面以加载最新代码
- Mac:
Cmd + Shift + R
- Windows/Linux:
Ctrl + Shift + R
步骤 2: 打开开发者工具
打开浏览器的开发者工具并切换到 Console 标签
- Mac:
Cmd + Option + I
- Windows/Linux:
F12
步骤 3: 点击编辑按钮
在 MCP 设置页面，点击任意服务器的"编辑"按钮
步骤 4: 观察控制台输出
应该看到以下日志序列：
🔍 [1] 打开服务器详情被调用
🔍 [2] 服务器数据: {...}
🔍 [3] 当前 showServerDetail 值: false
🔍 [4] editingServer 设置完成: {...}
✅ [5] showServerDetail 设置为 true
✅ [6] 最终状态检查 - showServerDetail: true
🎯 MCPServerDetail 组件加载
📦 接收到的 server prop: {...}
👀 MCPServerDetail watch 触发, newServer: {...}
📝 更新表单数据: {...}
✅ formData 更新完成: {...}
🐛 问题排查清单
情况 A: Modal 弹出但完全空白
- 检查: Elements 标签中搜索 "mcp-server-detail"
- 检查: 该元素的 computed styles，特别是 height, display, visibility
- 可能原因: CSS 样式问题导致内容不可见
临时解决方案 - 在控制台执行:
const detail = document.querySelector('.mcp-server-detail')
if (detail) {
console.log('找到组件元素:', detail)
console.log('元素尺寸:', detail.getBoundingClientRect())
console.log('Computed styles:', window.getComputedStyle(detail))
// 强制设置可见
detail.style.minHeight = '600px'
detail.style.display = 'flex'
detail.style.visibility = 'visible'
console.log('✅ 已尝试强制显示')
} else {
console.error('❌ 未找到 .mcp-server-detail 元素')
}
情况 B: Modal 没有弹出
- 检查: 控制台是否有 "showServerDetail 设置为 true" 的日志
- 检查: Elements 标签中搜索 "n-modal"，看元素是否存在
- 可能原因: Modal 组件渲染问题或 z-index 太低
情况 C: 有日志但没有组件加载日志
- 意味着: MCPServerDetail 组件根本没有被创建
- 检查: editingServer 的值是否为 null 或 undefined
- 检查: 控制台是否有组件导入或编译错误
🔧 快速诊断脚本
在浏览器控制台执行以下代码进行全面诊断：
// 诊断脚本
console.log('=== MCP Modal 诊断开始 ===')
// 1. 检查 Modal 元素
const modals = document.querySelectorAll('.n-modal')
console.log('1️⃣ Modal 元素数量:', modals.length)
modals.forEach((m, i) => {
console.log(` Modal ${i}:`, {
display: m.style.display || window.getComputedStyle(m).display,
opacity: window.getComputedStyle(m).opacity,
zIndex: window.getComputedStyle(m).zIndex
})
})
// 2. 检查 Card 元素
const cards = document.querySelectorAll('.n-card')
console.log('2️⃣ Card 元素数量:', cards.length)
// 3. 检查 MCPServerDetail 组件
const detail = document.querySelector('.mcp-server-detail')
console.log('3️⃣ MCPServerDetail 元素:', detail ? '✅ 存在' : '❌ 不存在')
if (detail) {
const rect = detail.getBoundingClientRect()
const styles = window.getComputedStyle(detail)
console.log(' 尺寸:', {
width: rect.width,
height: rect.height,
minHeight: styles.minHeight,
display: styles.display
})
}
// 4. 检查 tabs
const tabs = document.querySelectorAll('.n-tabs')
console.log('4️⃣ Tabs 元素数量:', tabs.length)
console.log('=== 诊断结束 ===')