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

282
web/public/blank-page-debug.html Normal file
View File

@@ -0,0 +1,282 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编辑按钮问题诊断</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
padding: 20px;
max-width: 1000px;
margin: 0 auto;
background: #f5f5f5;
}
.section {
background: white;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h1 { color: #333; }
h2 { color: #666; margin-top: 0; }
.step {
background: #f8f9fa;
padding: 15px;
margin: 10px 0;
border-left: 4px solid #18a058;
border-radius: 4px;
}
.code {
background: #1e1e1e;
color: #d4d4d4;
padding: 15px;
border-radius: 4px;
font-family: monospace;
font-size: 12px;
overflow-x: auto;
margin: 10px 0;
}
.success { color: #4ade80; }
.error { color: #f87171; }
.warning { color: #fbbf24; }
.info { color: #60a5fa; }
.button {
background: #18a058;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-right: 10px;
text-decoration: none;
display: inline-block;
}
.button:hover { background: #16955d; }
ul { line-height: 2; }
.checklist { list-style: none; padding: 0; }
.checklist li { padding: 8px 0; }
.checklist input { margin-right: 10px; }
</style>
</head>
<body>
<h1>🔍 编辑按钮空白页面诊断</h1>
<div class="section">
<h2>❓ 问题描述</h2>
<p>点击"MCP 设置" → "已配置的服务器" → "编辑"按钮后，弹出的对话框显示空白。</p>
</div>
<div class="section">
<h2>🛠️ 已实施的修复</h2>
<div class="step">
<strong>修复 1: 调整 Modal 样式</strong>
<p>修改了 modal 和 card 的样式配置，确保内容能正确显示：</p>
<div class="code">
&lt;n-modal v-model:show="showServerDetail"&gt;
&lt;n-card style="width: 90vw; max-width: 1200px; max-height: 90vh; overflow: auto;"&gt;
&lt;MCPServerDetail .../&gt;
&lt;/n-card&gt;
&lt;/n-modal&gt;
</div>
</div>
<div class="step">
<strong>修复 2: 调整组件高度</strong>
<p>将 MCPServerDetail 组件的 height: 100% 改为 min-height: 500px</p>
<div class="code">
.mcp-server-detail {
min-height: 500px;
display: flex;
flex-direction: column;
}
</div>
</div>
<div class="step">
<strong>修复 3: 添加详细调试日志</strong>
<p>在组件加载、数据更新等关键位置添加了console.log</p>
</div>
</div>
<div class="section">
<h2>📋 测试步骤</h2>
<div class="step">
<strong>步骤 1: 刷新页面</strong>
<p>强制刷新浏览器页面以加载最新代码</p>
<ul>
<li>Mac: <code>Cmd + Shift + R</code></li>
<li>Windows/Linux: <code>Ctrl + Shift + R</code></li>
</ul>
</div>
<div class="step">
<strong>步骤 2: 打开开发者工具</strong>
<p>打开浏览器的开发者工具并切换到 Console 标签</p>
<ul>
<li>Mac: <code>Cmd + Option + I</code></li>
<li>Windows/Linux: <code>F12</code></li>
</ul>
</div>
<div class="step">
<strong>步骤 3: 点击编辑按钮</strong>
<p>在 MCP 设置页面，点击任意服务器的"编辑"按钮</p>
</div>
<div class="step">
<strong>步骤 4: 观察控制台输出</strong>
<p>应该看到以下日志序列：</p>
<div class="code">
<span class="info">🔍 [1] 打开服务器详情被调用</span>
<span class="info">🔍 [2] 服务器数据: {...}</span>
<span class="info">🔍 [3] 当前 showServerDetail 值: false</span>
<span class="info">🔍 [4] editingServer 设置完成: {...}</span>
<span class="success">✅ [5] showServerDetail 设置为 true</span>
<span class="success">✅ [6] 最终状态检查 - showServerDetail: true</span>
<span class="info">🎯 MCPServerDetail 组件加载</span>
<span class="info">📦 接收到的 server prop: {...}</span>
<span class="info">👀 MCPServerDetail watch 触发, newServer: {...}</span>
<span class="info">📝 更新表单数据: {...}</span>
<span class="success">✅ formData 更新完成: {...}</span>
</div>
</div>
</div>
<div class="section">
<h2>🐛 问题排查清单</h2>
<h3>情况 A: Modal 弹出但完全空白</h3>
<ul>
<li><strong>检查</strong>: Elements 标签中搜索 "mcp-server-detail"</li>
<li><strong>检查</strong>: 该元素的 computed styles，特别是 height, display, visibility</li>
<li><strong>可能原因</strong>: CSS 样式问题导致内容不可见</li>
</ul>
<p><strong>临时解决方案 - 在控制台执行</strong>:</p>
<div class="code">
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 元素')
}
</div>
<h3>情况 B: Modal 没有弹出</h3>
<ul>
<li><strong>检查</strong>: 控制台是否有 "showServerDetail 设置为 true" 的日志</li>
<li><strong>检查</strong>: Elements 标签中搜索 "n-modal"，看元素是否存在</li>
<li><strong>可能原因</strong>: Modal 组件渲染问题或 z-index 太低</li>
</ul>
<h3>情况 C: 有日志但没有组件加载日志</h3>
<ul>
<li><strong>意味着</strong>: MCPServerDetail 组件根本没有被创建</li>
<li><strong>检查</strong>: editingServer 的值是否为 null 或 undefined</li>
<li><strong>检查</strong>: 控制台是否有组件导入或编译错误</li>
</ul>
</div>
<div class="section">
<h2>🔧 快速诊断脚本</h2>
<p>在浏览器控制台执行以下代码进行全面诊断：</p>
<div class="code">
// 诊断脚本
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('=== 诊断结束 ===')
</div>
</div>
<div class="section">
<h2>✅ 验证清单</h2>
<ul class="checklist">
<li><input type="checkbox" id="c1"><label for="c1">开发服务器运行在 http://localhost:5173</label></li>
<li><input type="checkbox" id="c2"><label for="c2">页面已强制刷新 (Cmd+Shift+R)</label></li>
<li><input type="checkbox" id="c3"><label for="c3">浏览器开发者工具已打开</label></li>
<li><input type="checkbox" id="c4"><label for="c4">Console 标签已选中</label></li>
<li><input type="checkbox" id="c5"><label for="c5">点击编辑按钮能看到日志</label></li>
<li><input type="checkbox" id="c6"><label for="c6">看到 "MCPServerDetail 组件加载" 日志</label></li>
<li><input type="checkbox" id="c7"><label for="c7">Modal 对话框成功弹出</label></li>
<li><input type="checkbox" id="c8"><label for="c8">可以看到服务器详情内容</label></li>
</ul>
</div>
<div class="section">
<h2>📸 需要提供的信息</h2>
<p>如果问题依然存在，请提供以下信息的截图：</p>
<ol>
<li><strong>Console 标签</strong>: 点击编辑后的所有日志输出</li>
<li><strong>Elements 标签</strong>: 搜索 "mcp-server-detail" 的结果</li>
<li><strong>Network 标签</strong>: 是否有加载失败的资源</li>
<li><strong>控制台诊断脚本输出</strong>: 运行上面的诊断脚本后的输出</li>
</ol>
</div>
<div class="section">
<h2>🚀 快速操作</h2>
<a href="http://localhost:5173" class="button" target="_blank">打开 MCP Client</a>
<a href="#" class="button" onclick="window.location.reload(); return false;">刷新本页</a>
</div>
<script>
// 检查清单进度
document.querySelectorAll('.checklist input').forEach(cb => {
cb.addEventListener('change', () => {
const total = document.querySelectorAll('.checklist input').length
const checked = document.querySelectorAll('.checklist input:checked').length
if (checked === total) {
alert('🎉 太棒了！所有检查项都完成了！\n\n如果问题仍然存在，请提供控制台截图。')
}
})
})
console.log('📋 诊断页面已加载')
console.log('💡 提示: 在主应用中打开控制台进行调试')
</script>
</body>
</html>