272 lines
8.5 KiB
HTML
272 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>MCP Modal 调试</title>
|
||
<style>
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||
padding: 20px;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background: #f5f5f5;
|
||
}
|
||
.debug-section {
|
||
background: white;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
h2 {
|
||
margin-top: 0;
|
||
color: #333;
|
||
}
|
||
.button {
|
||
background: #18a058;
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 20px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
margin-right: 10px;
|
||
}
|
||
.button:hover {
|
||
background: #16955d;
|
||
}
|
||
.button.secondary {
|
||
background: #666;
|
||
}
|
||
.button.secondary:hover {
|
||
background: #555;
|
||
}
|
||
.log-area {
|
||
background: #1e1e1e;
|
||
color: #d4d4d4;
|
||
padding: 15px;
|
||
border-radius: 4px;
|
||
font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
|
||
font-size: 12px;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
margin-top: 10px;
|
||
}
|
||
.log-entry {
|
||
margin: 4px 0;
|
||
line-height: 1.5;
|
||
}
|
||
.log-success { color: #4ade80; }
|
||
.log-error { color: #f87171; }
|
||
.log-warning { color: #fbbf24; }
|
||
.log-info { color: #60a5fa; }
|
||
.status-indicator {
|
||
display: inline-block;
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
margin-right: 8px;
|
||
}
|
||
.status-connected { background: #4ade80; }
|
||
.status-disconnected { background: #94a3b8; }
|
||
.status-error { background: #f87171; }
|
||
.test-result {
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
margin-top: 10px;
|
||
}
|
||
.test-result.success {
|
||
background: #d1fae5;
|
||
border: 1px solid #4ade80;
|
||
color: #065f46;
|
||
}
|
||
.test-result.error {
|
||
background: #fee2e2;
|
||
border: 1px solid #f87171;
|
||
color: #991b1b;
|
||
}
|
||
.code-block {
|
||
background: #f3f4f6;
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
font-family: monospace;
|
||
font-size: 12px;
|
||
overflow-x: auto;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>🔍 MCP Modal 调试工具</h1>
|
||
|
||
<div class="debug-section">
|
||
<h2>📋 调试步骤</h2>
|
||
<ol>
|
||
<li>打开浏览器开发者工具 (F12 或 Cmd+Option+I)</li>
|
||
<li>切换到 <strong>Console</strong> 标签</li>
|
||
<li>回到主应用 (<a href="http://localhost:5173" target="_blank">http://localhost:5173</a>)</li>
|
||
<li>点击任意 MCP 服务器的 <strong>"编辑"</strong> 按钮</li>
|
||
<li>在 Console 中查找以下日志</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="debug-section">
|
||
<h2>🔎 预期的控制台输出</h2>
|
||
<div class="log-area">
|
||
<div class="log-entry log-info">🔍 [1] 打开服务器详情被调用</div>
|
||
<div class="log-entry log-info">🔍 [2] 服务器数据: { id: "...", name: "test", url: "...", ... }</div>
|
||
<div class="log-entry log-info">🔍 [3] 当前 showServerDetail 值: false</div>
|
||
<div class="log-entry log-info">🔍 [4] editingServer 设置完成: { id: "...", name: "test", ... }</div>
|
||
<div class="log-entry log-success">✅ [5] showServerDetail 设置为 true</div>
|
||
<div class="log-entry log-success">✅ [6] 最终状态检查 - showServerDetail: true editingServer: {...}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="debug-section">
|
||
<h2>🐛 可能的问题和解决方案</h2>
|
||
|
||
<h3>问题 1: 点击"编辑"按钮后，控制台完全没有日志</h3>
|
||
<div class="test-result error">
|
||
<strong>原因</strong>: 按钮的点击事件没有被触发
|
||
<br><br>
|
||
<strong>检查</strong>:
|
||
<ul>
|
||
<li>检查按钮是否被其他元素遮挡</li>
|
||
<li>检查是否有 JavaScript 错误阻止了事件处理</li>
|
||
<li>在 Elements 标签中检查按钮的 DOM 结构</li>
|
||
</ul>
|
||
<strong>解决方案</strong>: 刷新页面后重试，或清除浏览器缓存
|
||
</div>
|
||
|
||
<h3>问题 2: 有日志输出，但 modal 不显示</h3>
|
||
<div class="test-result error">
|
||
<strong>原因</strong>: Modal 组件渲染或样式问题
|
||
<br><br>
|
||
<strong>检查</strong>:
|
||
<ul>
|
||
<li>在 Elements 标签中搜索 "n-modal"，查看元素是否存在</li>
|
||
<li>检查 modal 的 CSS 样式（display、opacity、z-index等）</li>
|
||
<li>查看是否有 Vue 组件渲染错误</li>
|
||
</ul>
|
||
<strong>在控制台执行此代码</strong>:
|
||
<div class="code-block">
|
||
const modal = document.querySelector('.n-modal')<br>
|
||
console.log('Modal 元素:', modal)<br>
|
||
console.log('Modal 样式:', modal ? window.getComputedStyle(modal) : 'Not found')
|
||
</div>
|
||
</div>
|
||
|
||
<h3>问题 3: 日志显示 showServerDetail 为 true，但看不到 modal</h3>
|
||
<div class="test-result error">
|
||
<strong>原因</strong>: Modal 可能被渲染在错误的位置或 z-index 太低
|
||
<br><br>
|
||
<strong>临时解决方案</strong>:
|
||
<div class="code-block">
|
||
// 在控制台执行，强制显示 modal<br>
|
||
const modals = document.querySelectorAll('.n-modal')<br>
|
||
modals.forEach(m => {<br>
|
||
m.style.display = 'flex'<br>
|
||
m.style.opacity = '1'<br>
|
||
m.style.zIndex = '9999'<br>
|
||
})
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="debug-section">
|
||
<h2>✅ 测试清单</h2>
|
||
<ul>
|
||
<li>
|
||
<input type="checkbox" id="check1">
|
||
<label for="check1">开发服务器运行在 http://localhost:5173</label>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox" id="check2">
|
||
<label for="check2">浏览器开发者工具已打开</label>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox" id="check3">
|
||
<label for="check3">Console 标签已选中</label>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox" id="check4">
|
||
<label for="check4">可以看到至少一个 MCP 服务器卡片</label>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox" id="check5">
|
||
<label for="check5">点击"编辑"按钮后看到控制台日志</label>
|
||
</li>
|
||
<li>
|
||
<input type="checkbox" id="check6">
|
||
<label for="check6">Modal 对话框成功显示</label>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="debug-section">
|
||
<h2>🔧 快速修复脚本</h2>
|
||
<p>如果 modal 不显示，在浏览器控制台执行以下代码:</p>
|
||
|
||
<h3>检查 Vue 应用状态</h3>
|
||
<div class="code-block">
|
||
// 检查 showServerDetail 的值<br>
|
||
const app = document.querySelector('#app')<br>
|
||
const vueInstance = app?.__vueParentComponent<br>
|
||
console.log('Vue 实例:', vueInstance)<br>
|
||
<br>
|
||
// 如果能访问到 setupState<br>
|
||
console.log('showServerDetail:', vueInstance?.setupState?.showServerDetail)<br>
|
||
console.log('editingServer:', vueInstance?.setupState?.editingServer)
|
||
</div>
|
||
|
||
<h3>强制触发 modal 显示</h3>
|
||
<div class="code-block">
|
||
// 在控制台直接设置状态（需要 Vue Devtools）<br>
|
||
// 或者尝试直接修改 DOM<br>
|
||
const backdrop = document.querySelector('.n-modal-container')<br>
|
||
if (backdrop) {<br>
|
||
backdrop.style.display = 'block'<br>
|
||
backdrop.style.opacity = '1'<br>
|
||
console.log('✅ Modal backdrop 已强制显示')<br>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="debug-section">
|
||
<h2>📞 需要报告的信息</h2>
|
||
<p>如果问题持续，请提供以下信息：</p>
|
||
<ol>
|
||
<li>点击"编辑"后控制台的完整输出（截图）</li>
|
||
<li>浏览器的 Elements 标签中搜索 "n-modal" 的结果（截图）</li>
|
||
<li>Console 中是否有任何红色错误信息</li>
|
||
<li>浏览器类型和版本</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="debug-section">
|
||
<h2>🚀 返回主应用</h2>
|
||
<button class="button" onclick="window.location.href='http://localhost:5173'">
|
||
打开 MCP Client (http://localhost:5173)
|
||
</button>
|
||
<button class="button secondary" onclick="window.location.reload()">
|
||
刷新此页面
|
||
</button>
|
||
</div>
|
||
|
||
<script>
|
||
// 添加一些交互功能
|
||
document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
|
||
checkbox.addEventListener('change', () => {
|
||
const allChecked = Array.from(document.querySelectorAll('input[type="checkbox"]')).every(c => c.checked)
|
||
if (allChecked) {
|
||
alert('🎉 太棒了！所有步骤都完成了！')
|
||
}
|
||
})
|
||
})
|
||
|
||
console.log('📋 调试页面已加载')
|
||
console.log('📍 请访问 http://localhost:5173 进行测试')
|
||
</script>
|
||
</body>
|
||
</html>
|