354 lines
8.8 KiB
Markdown
354 lines
8.8 KiB
Markdown
# 🔧 编辑按钮空白页面修复报告
|
||
|
||
## 问题描述
|
||
点击 MCP 服务器的"编辑"按钮后，弹出对话框但显示空白页面。
|
||
|
||
## 已实施的修复
|
||
|
||
### 修复 1: Modal 样式优化
|
||
**文件**: `web/src/components/MCPSettings.vue` (Line 289-308)
|
||
|
||
**问题**: Modal 和 Card 的尺寸设置不当，导致内容无法正常显示
|
||
|
||
**修复内容**:
|
||
```vue
|
||
<!-- 修复后 -->
|
||
<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
|
||
|
||
**修复内容**:
|
||
```css
|
||
/* 修复前 */
|
||
.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`
|
||
|
||
添加了详细的生命周期和数据更新日志：
|
||
|
||
```typescript
|
||
// 组件加载时
|
||
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)
|
||
}
|
||
```
|
||
|
||
## 测试指南
|
||
|
||
### 环境准备
|
||
```bash
|
||
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
|
||
|
||
**在控制台执行诊断**:
|
||
```javascript
|
||
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 被覆盖
|
||
|
||
**临时解决方案**:
|
||
```javascript
|
||
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 编译错误
|
||
|
||
**控制台检查**:
|
||
```javascript
|
||
// 查看 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: 全面诊断脚本
|
||
|
||
在浏览器控制台执行:
|
||
```javascript
|
||
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 响应式调试
|
||
|
||
```javascript
|
||
// 检查响应式状态
|
||
import { toRaw } from 'vue'
|
||
console.log('原始值:', toRaw(editingServer.value))
|
||
|
||
// 检查 ref 是否正确
|
||
console.log('是否为 ref:', typeof editingServer.value)
|
||
```
|
||
|
||
## 修复状态
|
||
|
||
✅ Modal 样式优化完成
|
||
✅ 组件高度问题修复完成
|
||
✅ 调试日志增强完成
|
||
✅ 诊断工具创建完成
|
||
✅ 开发服务器运行正常
|
||
|
||
🔄 **待确认**: 请按照测试指南验证修复效果
|
||
|
||
## 下一步
|
||
|
||
1. **刷新页面** - 强制刷新加载最新代码
|
||
2. **测试功能** - 点击编辑按钮
|
||
3. **查看日志** - 确认控制台输出完整
|
||
4. **报告结果** - 告诉我是否成功或提供诊断信息
|
||
|
||
祝测试顺利！🚀
|