map-client-vue/web/BLANK_PAGE_FIX.md

🔧 编辑按钮空白页面修复报告

问题描述

点击 MCP 服务器的"编辑"按钮后，弹出对话框但显示空白页面。

已实施的修复

修复 1: Modal 样式优化

文件: web/src/components/MCPSettings.vue (Line 289-308)

问题: Modal 和 Card 的尺寸设置不当，导致内容无法正常显示

修复内容:

<!-- 修复后 -->
<n-modal 
  v-model:show="showServerDetail"
  :style="{ padding: 0 }"
  transform-origin="center"
>
  <n-card
    style="width: 90vw; max-width: 1200px; max-height: 90vh; overflow: auto;"
    :bordered="false"
    size="huge"
    role="dialog"
    aria-modal="true"
  >
    <MCPServerDetail ... />
  </n-card>
</n-modal>

关键改进:

• 使用 90vw 和 90vh 确保响应式尺寸
• 添加 max-height 和 overflow: auto 处理内容溢出
• 移除了 modal 上的多余样式配置

修复 2: 组件高度调整

文件: web/src/components/MCPServerDetail.vue (Line 536)

问题: 组件使用 height: 100% 但父容器没有明确高度，导致高度为 0

修复内容:

/* 修复前 */
.mcp-server-detail {
  height: 100%;  /* ❌ 父容器高度不确定 */
  display: flex;
  flex-direction: column;
}

/* 修复后 */
.mcp-server-detail {
  min-height: 500px;  /* ✅ 确保最小可见高度 */
  display: flex;
  flex-direction: column;
}

修复 3: 增强调试日志

文件: web/src/components/MCPServerDetail.vue

添加了详细的生命周期和数据更新日志：

// 组件加载时
console.log('🎯 MCPServerDetail 组件加载')
console.log('📦 接收到的 server prop:', props.server)

// 数据监听时
watch(() => props.server, (newServer) => {
  console.log('👀 MCPServerDetail watch 触发, newServer:', newServer)
  if (newServer) {
    updateFormData(newServer)
    console.log('✅ 表单数据已更新:', formData)
  }
})

// 更新表单数据时
const updateFormData = (server: MCPServerConfig) => {
  console.log('📝 更新表单数据:', server)
  // ... 数据更新
  console.log('✅ formData 更新完成:', formData)
}

测试指南

环境准备

cd /Users/gavin/xhs/mcp_client/mcp-client-vue/web
npm run dev

确保开发服务器运行在 http://localhost:5173

测试步骤

1. 刷新页面

强制刷新浏览器以加载最新代码：

• Mac: Cmd + Shift + R
• Windows/Linux: Ctrl + Shift + R

2. 打开开发者工具

• Mac: Cmd + Option + I
• Windows/Linux: F12
• 切换到 Console 标签

3. 点击编辑按钮

在 MCP 设置页面，找到任意服务器卡片，点击"编辑"按钮

4. 观察结果

✅ 成功的表现:

1. Modal 对话框弹出
2. 可以看到服务器详情表单
3. 有 4 个标签页: 通用、工具、提示词、资源
4. 控制台显示完整日志序列

📝 预期控制台日志:

🔍 [1] 打开服务器详情被调用
🔍 [2] 服务器数据: {id: "xxx", name: "test", ...}
🔍 [3] 当前 showServerDetail 值: false
🔍 [4] editingServer 设置完成: {...}
✅ [5] showServerDetail 设置为 true
✅ [6] 最终状态检查 - showServerDetail: true editingServer: {...}
🎯 MCPServerDetail 组件加载
📦 接收到的 server prop: {...}
👀 MCPServerDetail watch 触发, newServer: {...}
📝 更新表单数据: {...}
✅ formData 更新完成: {...}

问题排查

场景 A: Modal 弹出但空白

诊断步骤:

1. 打开 Elements 标签
2. 搜索 mcp-server-detail
3. 检查该元素是否存在
4. 查看元素的 computed styles

在控制台执行诊断:

const detail = document.querySelector('.mcp-server-detail')
if (detail) {
  console.log('元素存在:', detail)
  console.log('尺寸:', detail.getBoundingClientRect())
  console.log('样式:', {
    display: window.getComputedStyle(detail).display,
    minHeight: window.getComputedStyle(detail).minHeight,
    height: window.getComputedStyle(detail).height,
    visibility: window.getComputedStyle(detail).visibility
  })
} else {
  console.error('元素不存在！')
}

可能原因:

• CSS 高度为 0
• display: none
• visibility: hidden
• z-index 被覆盖

临时解决方案:

const detail = document.querySelector('.mcp-server-detail')
if (detail) {
  detail.style.minHeight = '600px'
  detail.style.display = 'flex'
  detail.style.visibility = 'visible'
  console.log('✅ 强制显示成功')
}

场景 B: 看不到组件加载日志

意味着: MCPServerDetail 组件没有被实例化

检查项:

1. editingServer 的值是否为 null/undefined
2. v-if="editingServer" 条件是否满足
3. 组件导入是否正确
4. 是否有 Vue 编译错误

控制台检查:

// 查看 Vue 实例状态
const app = document.querySelector('#app').__vueParentComponent
console.log('editingServer:', app?.setupState?.editingServer)
console.log('showServerDetail:', app?.setupState?.showServerDetail)

场景 C: Modal 根本没弹出

检查步骤:

1. 控制台是否有 "showServerDetail 设置为 true" 日志
2. Elements 标签搜索 n-modal
3. 检查 modal 的 display 和 opacity

可能原因:

• showServerDetail 值没有变化
• Modal 组件渲染失败
• z-index 太低被遮挡

诊断工具

方法 1: 使用诊断页面

访问: http://localhost:5173/blank-page-debug.html

提供:

• 完整的测试步骤清单
• 常见问题解决方案
• 快速诊断脚本
• 问题报告模板

方法 2: 全面诊断脚本

在浏览器控制台执行:

console.log('=== MCP Modal 诊断 ===')

// 1. Modal 元素
const modals = document.querySelectorAll('.n-modal')
console.log('1️⃣ Modal 数量:', modals.length)
modals.forEach((m, i) => {
  const styles = window.getComputedStyle(m)
  console.log(`  Modal ${i}:`, {
    display: styles.display,
    opacity: styles.opacity,
    zIndex: styles.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️⃣ Detail 组件:', detail ? '✅ 存在' : '❌ 不存在')
if (detail) {
  const rect = detail.getBoundingClientRect()
  const styles = window.getComputedStyle(detail)
  console.log('  尺寸:', rect)
  console.log('  样式:', {
    display: styles.display,
    minHeight: styles.minHeight,
    height: styles.height,
    visibility: styles.visibility
  })
}

// 4. Tabs
const tabs = document.querySelectorAll('.n-tabs')
console.log('4️⃣ Tabs 数量:', tabs.length)

console.log('=== 诊断完成 ===')

验证清单

在报告问题前，请确认：

• 开发服务器运行正常 (http://localhost:5173)
• 页面已强制刷新 (Cmd+Shift+R)
• 浏览器开发者工具已打开
• Console 标签已选中
• 点击编辑按钮能看到日志输出
• 运行了诊断脚本
• 检查了 Elements 标签中的 DOM 结构
• 确认没有 JavaScript 错误

如何报告问题

如果修复后仍有问题，请提供：

1. 控制台截图

包含：

• 所有相关日志（从 🔍 [1] 到最后）
• 任何红色错误信息
• 诊断脚本的输出

2. Elements 标签信息

• 搜索 "mcp-server-detail" 的结果截图
• 该元素的 Computed 样式截图

3. 环境信息

• 浏览器类型和版本
• 操作系统
• 是否使用了浏览器扩展

4. 具体现象

• Modal 是否弹出？
• 是否完全空白还是部分内容可见？
• 控制台有哪些日志？

相关文件

• web/src/components/MCPSettings.vue - Modal 配置
• web/src/components/MCPServerDetail.vue - 详情页面组件
• web/public/blank-page-debug.html - 调试辅助页面
• web/MODAL_FIX_GUIDE.md - 之前的修复指南
• web/TYPESCRIPT_FIXES.md - TypeScript 类型问题

技术细节

Naive UI Modal 注意事项

1. 尺寸单位

   • 推荐使用 vw/vh 而不是百分比
   • 确保有 max-width/max-height 限制

2. 内容容器

   • 需要 n-card 或其他容器包装
   • 容器需要明确的尺寸设置

3. 高度问题

   • 避免使用 height: 100% 除非父容器有明确高度
   • 使用 min-height 确保最小可见高度
   • 使用 max-height + overflow 处理内容过长

Vue 响应式调试

// 检查响应式状态
import { toRaw } from 'vue'
console.log('原始值:', toRaw(editingServer.value))

// 检查 ref 是否正确
console.log('是否为 ref:', typeof editingServer.value)

修复状态

✅ Modal 样式优化完成 ✅ 组件高度问题修复完成 ✅ 调试日志增强完成 ✅ 诊断工具创建完成 ✅ 开发服务器运行正常

🔄 待确认: 请按照测试指南验证修复效果

下一步

1. 刷新页面 - 强制刷新加载最新代码
2. 测试功能 - 点击编辑按钮
3. 查看日志 - 确认控制台输出完整
4. 报告结果 - 告诉我是否成功或提供诊断信息

祝测试顺利！🚀