# 调试指南

## 已实施的修复

### 修复1: 连接状态管理
- **问题**: 添加服务器时自动尝试连接并失败，导致状态为'error'，无法再次连接
- **修复**: 修改 `newServer.ts` 的 `addServer` 函数，默认状态改为 'disconnected'
- **位置**: `web/src/stores/newServer.ts` 第 99 行

### 修复2: 连接失败处理
- **问题**: 连接失败后状态设置为'error'，无法重试
- **修复**: 修改 `connectServer` 函数，失败时设置为 'disconnected' 而不是 'error'
- **位置**: `web/src/stores/newServer.ts` 第 170-174 行

### 修复3: 断开连接时保存状态
- **问题**: 断开连接后状态没有持久化
- **修复**: 在 `disconnectServer` 函数中添加 `saveServers()` 调用
- **位置**: `web/src/stores/newServer.ts` 第 190 行

### 修复4: 编辑按钮调试
- **问题**: 编辑按钮点击没有响应
- **修复**: 添加了详细的 console.log 调试信息
- **位置**: `web/src/components/MCPSettings.vue` 第 490-495 行

## 测试步骤

### 1. 测试编辑按钮功能

1. 打开浏览器: http://localhost:5173
2. 打开开发者工具 (F12 或 Cmd+Option+I)
3. 切换到 Console 标签
4. 点击任意服务器的"编辑"按钮
5. **预期输出**:
   ```
   🔍 打开服务器详情: {id: "...", name: "...", ...}
   ✅ 详情页状态: true {id: "...", name: "...", ...}
   ```
6. **预期行为**: 应该弹出服务器详情对话框

**如果没有输出**:
- 检查按钮是否正确绑定了 `@click="openServerDetail(server)"`
- 检查是否有 JavaScript 错误

**如果有输出但没有弹窗**:
- 检查 `showServerDetail` 是否正确控制 modal 显示
- 检查 `MCPServerDetail` 组件的 props 绑定

### 2. 测试连接功能

#### 2.1 确保MCP服务器运行
```bash
# 在新终端运行HTTP服务器
cd /Users/gavin/xhs/mcp_client/xhsLoginMCP
node server.js

# 应该看到: HTTP MCP 服务器运行在 http://0.0.0.0:3100
```

#### 2.2 添加新服务器
1. 点击"添加服务器"按钮
2. 填写配置:
   - **名称**: Test HTTP Server
   - **URL**: http://localhost:3100/mcp
   - **传输类型**: HTTP
3. 点击"确定"
4. **预期**: 服务器添加成功，状态为 "disconnected"（灰色点）
5. **检查控制台**: 应该看到 `🎯 服务器添加成功，状态: disconnected`

#### 2.3 测试连接
1. 找到刚添加的服务器卡片
2. 点击"连接"按钮
3. **检查控制台输出**:
   ```
   🔌 开始连接服务器: server-id-xxx
   📡 正在连接 Test HTTP Server (HTTP)...
   ✅ 连接成功: server-id-xxx
   ```
4. **预期行为**:
   - 服务器状态变为 "connected"（绿色点）
   - "连接"按钮变为"断开"按钮
   - 可以看到服务器提供的工具列表

#### 2.4 测试断开连接
1. 点击"断开"按钮
2. **检查控制台输出**:
   ```
   🔌 断开服务器连接: server-id-xxx
   ```
3. **预期行为**:
   - 服务器状态变为 "disconnected"
   - "断开"按钮变回"连接"按钮

#### 2.5 测试重新连接
1. 再次点击"连接"按钮
2. **预期**: 应该能够成功连接（之前因为error状态无法重连）

## 常见问题排查

### Q1: 点击编辑按钮完全没有反应

**排查步骤**:
1. 打开 Console，看是否有任何错误
2. 检查是否有 `🔍 打开服务器详情` 日志
3. 如果没有日志，检查 Vue 组件是否正确渲染
4. 检查按钮的 `@click` 事件是否被其他元素遮挡

**可能原因**:
- JavaScript 错误导致事件处理器失效
- 按钮 DOM 事件被父元素阻止
- Vue 响应式系统问题

### Q2: 有日志输出但modal不显示

**排查步骤**:
1. 检查 `showServerDetail.value` 是否确实设置为 `true`
2. 在 Elements 标签中查找 `<n-modal>` 元素
3. 检查 modal 的 CSS 是否被覆盖（z-index等）

**解决方案**:
```vue
<!-- 检查 MCPServerDetail 组件的 v-model 绑定 -->
<MCPServerDetail
  v-model:show="showServerDetail"
  :server="editingServer"
/>
```

### Q3: 连接按钮始终不可用

**排查步骤**:
1. 检查服务器的 `status` 值
2. 查看连接按钮的条件渲染逻辑:
   ```vue
   v-if="server.status !== 'connected' && server.status !== 'connecting'"
   ```
3. 如果状态是 'error'，应该已经被修复为 'disconnected'

**验证修复**:
```javascript
// 在Console中执行
const store = useServerStore()
console.log(store.servers.map(s => ({ id: s.id, name: s.name, status: s.status })))
```

### Q4: 连接一直失败

**排查步骤**:
1. 确认MCP服务器确实在运行:
   ```bash
   curl -X POST http://localhost:3100/mcp \
     -H "Content-Type: application/json" \
     -d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2024-11-05","clientInfo":{"name":"test","version":"1.0.0"}}}'
   ```
   预期响应包含 `"result"` 字段

2. 检查浏览器控制台的Network标签
   - 查看请求是否发送
   - 查看响应状态码和内容
   - 检查是否有CORS错误

3. 查看详细的连接日志:
   ```
   📡 正在连接 xxx...
   ❌ 连接失败: Error message
   ```

## 验证清单

- [ ] 开发服务器运行在 http://localhost:5173
- [ ] MCP服务器运行在 http://localhost:3100
- [ ] 浏览器控制台打开并切换到 Console 标签
- [ ] 点击"编辑"按钮能看到调试日志
- [ ] 编辑按钮能正常打开详情对话框
- [ ] 添加服务器后状态为 "disconnected"
- [ ] 点击"连接"按钮能成功连接
- [ ] 连接后能看到工具列表
- [ ] 点击"断开"按钮能断开连接
- [ ] 断开后能再次连接

## 下一步调试

如果以上修复仍然不能解决问题，请在控制台执行以下代码并提供输出:

```javascript
// 检查Vue应用状态
const app = document.querySelector('#app').__vueParentComponent
console.log('Vue应用:', app)

// 检查服务器store状态
const { useServerStore } = await import('/src/stores/newServer.ts')
const store = useServerStore()
console.log('服务器列表:', store.servers)
console.log('连接状态:', store.servers.map(s => ({ name: s.name, status: s.status })))

// 检查响应式状态
console.log('showServerDetail:', showServerDetail?.value)
console.log('editingServer:', editingServer?.value)
```