283 lines
9.7 KiB
HTML
283 lines
9.7 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>编辑按钮问题诊断</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">
|
||
<n-modal v-model:show="showServerDetail">
|
||
<n-card style="width: 90vw; max-width: 1200px; max-height: 90vh; overflow: auto;">
|
||
<MCPServerDetail .../>
|
||
</n-card>
|
||
</n-modal>
|
||
</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>
|