gavin/map-client-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

first commit

Browse Source
This commit is contained in:
douboer
2025-10-14 14:18:20 +08:00
commit d93bc02772
66 changed files with 21393 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
web/public/modal-debug.html Normal file
View File

@@ -0,0 +1,271 @@
<!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>
&nbsp;&nbsp;m.style.display = 'flex'<br>
&nbsp;&nbsp;m.style.opacity = '1'<br>
&nbsp;&nbsp;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>
&nbsp;&nbsp;backdrop.style.display = 'block'<br>
&nbsp;&nbsp;backdrop.style.opacity = '1'<br>
&nbsp;&nbsp;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>