Initial commit

2026-06-30 15:14:37 +08:00
commit 15dab96872
311 changed files with 95639 additions and 0 deletions
@@ -0,0 +1,279 @@
+# MeshRay 数据获取问题修复说明
+
+## ✅ 已完成的修复
+
+### 1. 添加调试日志
+
+在 `web/src/views/Networks/Detail.vue` 的 `loadDevices` 函数中添加了详细的调试日志：
+
+```javascript
+console.log('🔍 开始加载设备列表，networkId:', route.params.id)
+console.log('📋 设备列表响应:', res)
+console.log('✅ 设备数量:', allDevices.value.length)
+```
+
+### 2. 重新编译前端
+
+```bash
+cd web
+npm run build
+# ✅ built in 13.55s
+```
+
+---
+
+## 🔍 问题诊断步骤
+
+### 第一步：访问应用并查看调试信息
+
+1. **打开浏览器** (推荐使用 Chrome/Edge)
+2. **访问**: `http://localhost:9531`
+3. **按 F12** 打开开发者工具
+4. **切换到 Console（控制台）标签页**
+5. **导航到网络详情页** (`/networks/:id`)
+
+### 第二步：查看控制台输出
+
+正常情况下应该看到类似这样的日志：
+
+```
+🔍 开始加载设备列表，networkId: 1
+📋 设备列表响应：{data: Array(2), message: "..."}
+✅ 设备数量：2
+```
+
+### 第三步：根据输出判断问题
+
+#### ✅ 情况 A：显示正常数据
+
+```
+🔍 开始加载设备列表，networkId: 1
+📋 设备列表响应：{data: Array(2)}
+✅ 设备数量：2
+```
+
+**结论**: 数据获取正常，如果页面仍无显示，检查 Vue 组件渲染逻辑
+
+---
+
+#### ❌ 情况 B：networkId 为 undefined
+
+```
+🔍 开始加载设备列表，networkId: undefined
+❌ 错误：Invalid network ID
+```
+
+**原因**: 路由参数未正确传递
+
+**解决**:
+1. 检查 URL 是否为 `/networks/1` 格式
+2. 确认从列表页点击跳转时携带了正确的 ID
+3. 刷新页面或重新进入
+
+---
+
+#### ❌ 情况 C：API 请求失败
+
+```
+🔍 开始加载设备列表，networkId: 1
+❌ Network Error: Request failed with status code 404
+```
+
+**原因**: 后端服务未启动或 API 路径错误
+
+**解决**:
+1. 确认后端服务已启动：`.\meshray.exe`
+2. 检查 API 路径是否正确
+3. 查看 Network 面板中的详细请求信息
+
+---
+
+#### ❌ 情况 D：返回数据为空数组
+
+```
+🔍 开始加载设备列表，networkId: 1
+📋 设备列表响应：{data: []}
+✅ 设备数量：0
+```
+
+**原因**: 该网络下还没有设备
+
+**解决**:
+1. 这是正常现象
+2. 在该网络下创建设备即可
+3. 或检查是否选择了正确的网络 ID
+
+---
+
+## 🛠️ 常用排查命令
+
+### 检查后端服务状态
+
+```bash
+# 查看服务是否在运行
+Get-Process meshray -ErrorAction SilentlyContinue
+
+# 测试健康检查接口
+curl http://localhost:9531/api/v1/health
+```
+
+### 检查数据库数据
+
+```sql
+-- 使用 SQLite 工具连接 ./data/meshray.db
+
+-- 查看所有网络
+SELECT id, name, created_at FROM networks;
+
+-- 查看指定网络的设备
+SELECT id, name, public_key, status 
+FROM devices 
+WHERE network_id = 1;
+```
+
+### 清除浏览器缓存
+
+**Chrome/Edge**:
+1. 按 `Ctrl+Shift+Delete`
+2. 选择"缓存的图像和文件"
+3. 点击"清除数据"
+4. 刷新页面 (`F5`)
+
+---
+
+## 📊 Network 面板调试技巧
+
+### 1. 找到设备列表请求
+
+在 Network 面板中搜索：`devices`
+
+应该能看到：
+```
+GET /api/v1/devices?network_id=1
+Status: 200 OK
+```
+
+### 2. 检查请求详情
+
+**Headers（请求头）**:
+```
+Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
+```
+
+**Response（响应）**:
+```json
+{
+  "data": [
+    {
+      "id": 1,
+      "name": "Device-1",
+      "status": "online",
+      ...
+    }
+  ]
+}
+```
+
+### 3. 常见错误码
+
+| 状态码 | 含义 | 解决方法 |
+|--------|------|----------|
+| 200 | 成功 | ✅ 正常 |
+| 401 | 未授权 | 重新登录 |
+| 404 | 资源不存在 | 检查网络 ID |
+| 500 | 服务器错误 | 查看后端日志 |
+| (failed) | 网络错误 | 检查服务是否启动 |
+
+---
+
+## 🎯 快速验证脚本
+
+在浏览器控制台执行以下代码，自动诊断问题：
+
+```javascript
+// === MeshRay 数据获取诊断 ===
+(async () => {
+  const token = localStorage.getItem('token')
+  if (!token) {
+    console.error('❌ 未登录，请先登录系统')
+    return
+  }
+  
+  try {
+    // 测试设备列表 API
+    const response = await fetch('/api/v1/devices?network_id=1', {
+      headers: { 'Authorization': `Bearer ${token}` }
+    })
+    
+    if (response.status === 404) {
+      console.error('❌ API 返回 404，检查网络 ID 是否正确')
+    } else if (response.status === 401) {
+      console.error('❌ Token 无效，请重新登录')
+    } else if (response.status === 200) {
+      const result = await response.json()
+      console.log('✅ API 调用成功')
+      console.log('📋 设备数量:', result.data?.length || 0)
+      if (result.data?.length > 0) {
+        console.log('📋 第一个设备:', result.data[0])
+      } else {
+        console.warn('⚠️ 该网络下没有设备')
+      }
+    }
+  } catch (error) {
+    console.error('❌ 请求失败:', error.message)
+  }
+})()
+```
+
+---
+
+## 📞 仍然无法解决？
+
+请收集以下信息以便进一步诊断：
+
+### 必需信息
+
+1. **浏览器控制台完整日志**
+   - 包括所有 console.log 输出
+   - 任何错误信息
+
+2. **Network 面板截图**
+   - 失败的请求详情
+   - 请求头和响应头
+
+3. **后端服务日志**
+   ```bash
+   # 如果在命令行运行，复制完整的输出
+   .\meshray.exe
+   
+   # 或者查看日志文件（如果有）
+   Get-Content .\logs\*.log -Tail 50
+   ```
+
+4. **当前访问的 URL**
+   - 例如：`http://localhost:9531/networks/1`
+
+### 可选信息
+
+- 数据库中是否有网络和设备的截图
+- 是否是首次安装使用
+- 最近是否修改过配置文件
+
+---
+
+## ✅ 修复验证清单
+
+完成修复后，按顺序检查以下项目：
+
+- [ ] 后端服务正常启动（访问 `http://localhost:9531`）
+- [ ] 能够成功登录系统
+- [ ] 数据库中至少有一个网络
+- [ ] 访问 `/networks/:id` 时控制台显示 `🔍 开始加载设备列表`
+- [ ] 控制台显示具体的 networkId 值（不是 undefined）
+- [ ] 控制台显示设备列表响应数据
+- [ ] 页面正常显示设备列表
+- [ ] Network 面板中请求状态为 200
+
+---
+
+*MeshRay | 数据获取问题修复 | v1.1*