feat: DevTools 数据库监看面板 + 隧道控制 + 多项 Bug 修复

**DevTools 新增功能 (Tasks 13-14):** - 首页仪表盘添加数据库实时监看卡片 (5端口状态 + 记忆数) - 侧边栏新增数据库面板，支持自动 5 秒刷新 - 数据库面板显示 PostgreSQL/Redis/Qdrant/MinIO/NATS 端口状态 - 隧道控制按钮 (启动/停止/重启/查看状态) - 新增 API 端点: GET /api/database/status, POST /api/tunnel/:action - 更新 docs/api-reference/ API 文档 **Bug 修复 (Task 15):** - 修复 pgrep -f 自匹配导致隧道状态误判 (添加 ^ssh 锚点) - devtools/src/index.js (dashboard + database/status) - scripts/tunnel.sh (is_tunnel_running + show_status) - 修复数据库面板缺少自动刷新定时器 - 修复侧边栏数据库徽章永远 display:none - 修复僵尸进程场景下按钮死锁问题 **其他改进:** - .gitignore 添加 backend/cmd, backend/iot-debug-service/main - 前端多项改进 (登录/注册/会话/流式动画等)
2026-05-17 11:42:42 +08:00
parent 0757ad26b5
commit 5d0bb96abe
28 changed files with 1723 additions and 218 deletions
@@ -300,6 +300,35 @@ input[type="range"] { accent-color: var(--accent); padding: 0; }
 /* 刷新按钮旋转 */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 .spinning { animation: spin 1s linear infinite; }
+
+/* 数据库监看 */
+.db-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
+.db-port-card {
+  background: var(--bg3); border-radius: var(--radius-sm); padding: 12px;
+  display: flex; align-items: center; gap: 10px; transition: all .2s;
+  border: 1px solid transparent;
+}
+.db-port-card.alive { border-color: var(--green); background: var(--green-bg); }
+.db-port-card.dead { border-color: var(--red); background: var(--red-bg); opacity: .7; }
+.db-port-card .db-dot {
+  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
+}
+.db-port-card.alive .db-dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
+.db-port-card.dead .db-dot { background: var(--red); }
+.db-port-card .db-info { flex: 1; min-width: 0; }
+.db-port-card .db-name { font-size: 12px; font-weight: 600; }
+.db-port-card .db-port-label { font-size: 10px; color: var(--text2); font-family: 'JetBrains Mono', monospace; }
+.db-summary { display: flex; gap: 20px; align-items: center; padding: 12px 0; }
+.db-summary-stat { text-align: center; }
+.db-summary-stat .val { font-size: 20px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
+.db-summary-stat .lbl { font-size: 10px; color: var(--text2); }
+
+.tunnel-log {
+  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
+  max-height: 200px; overflow-y: auto; padding: 8px; margin-top: 8px;
+  font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.5;
+  white-space: pre-wrap; word-break: break-all; color: var(--text2);
+}
 </style>
 </head>
 <body>
@@ -327,6 +356,10 @@ input[type="range"] { accent-color: var(--accent); padding: 0; }
    <button class="nav-item" data-panel="performance">
      <span class="nav-icon">📊</span><span class="nav-label">性能监控</span>
    </button>
+    <button class="nav-item" data-panel="database">
+      <span class="nav-icon">🗄️</span><span class="nav-label">数据库监看</span>
+      <span class="nav-badge" id="db-badge" style="display:none">●</span>
+    </button>
  </nav>
  <div class="sidebar-footer">
    <span id="ws-dot" class="disconnected"></span>
@@ -351,6 +384,8 @@ input[type="range"] { accent-color: var(--accent); padding: 0; }
    <div class="panel" id="panel-services"></div>
    <!-- 性能监控 -->
    <div class="panel" id="panel-performance"></div>
+    <!-- 数据库监看 -->
+    <div class="panel" id="panel-database"></div>
  </div>
 </div>

@@ -379,6 +414,7 @@ const STATE = {
  // 计时器
  dashboardInterval: null,
  statusInterval: null,
+  dbInterval: null,
 };

 // ========== WebSocket ==========
@@ -529,7 +565,7 @@ function switchPanel(name) {
  // 更新标题
  const titles = {
    dashboard: '🏠 仪表盘', memory: '🧠 记忆管理', sessions: '💬 会话监看',
-    services: '🖥 服务管理', performance: '📊 性能监控',
+    services: '🖥 服务管理', performance: '📊 性能监控', database: '🗄️ 数据库监看',
  };
  document.getElementById('panel-title').textContent = titles[name] || name;

@@ -542,11 +578,12 @@ function switchPanel(name) {

  // 渲染面板
  switch (name) {
-    case 'dashboard': renderDashboard(); startDashboardAutoRefresh(); break;
-    case 'memory': renderMemoryPanel(); stopDashboardAutoRefresh(); break;
-    case 'sessions': renderSessionsPanel(); startSessionsAutoRefresh(); stopDashboardAutoRefresh(); break;
-    case 'services': renderServicesPanel(); stopSessionsAutoRefresh(); stopDashboardAutoRefresh(); break;
-    case 'performance': renderPerformancePanel(); stopSessionsAutoRefresh(); stopDashboardAutoRefresh(); break;
+    case 'dashboard': renderDashboard(); startDashboardAutoRefresh(); stopDbAutoRefresh(); break;
+    case 'memory': renderMemoryPanel(); stopDashboardAutoRefresh(); stopDbAutoRefresh(); break;
+    case 'sessions': renderSessionsPanel(); startSessionsAutoRefresh(); stopDashboardAutoRefresh(); stopDbAutoRefresh(); break;
+    case 'services': renderServicesPanel(); stopSessionsAutoRefresh(); stopDashboardAutoRefresh(); stopDbAutoRefresh(); break;
+    case 'performance': renderPerformancePanel(); stopSessionsAutoRefresh(); stopDashboardAutoRefresh(); stopDbAutoRefresh(); break;
+    case 'database': renderDatabasePanel(); stopSessionsAutoRefresh(); stopDashboardAutoRefresh(); startDbAutoRefresh(); break;
  }
 }

@@ -572,6 +609,17 @@ function startSessionsAutoRefresh() {
  }, 5000);
 }

+function startDbAutoRefresh() {
+  stopDbAutoRefresh();
+  STATE.dbInterval = setInterval(() => {
+    if (STATE.activePanel === 'database') renderDatabasePanel();
+  }, 5000);
+}
+
+function stopDbAutoRefresh() {
+  if (STATE.dbInterval) { clearInterval(STATE.dbInterval); STATE.dbInterval = null; }
+}
+
 // ========== 面板1: 仪表盘 ==========
 async function renderDashboard() {
  const data = await api('/api/dashboard');
@@ -619,6 +667,22 @@ async function renderDashboard() {
      <div class="cards-grid cards-4" id="dashboard-svc-cards"></div>
    </div>

+    <!-- 数据库连接状态 -->
+    <div class="card">
+      <div class="card-header">
+        <span class="card-title">🗄️ 数据库连接</span>
+        ${data.database?.checked ? `
+          <span class="badge ${data.database.postgresAlive ? 'badge-running' : 'badge-error'}">
+            PostgreSQL ${data.database.postgresAlive ? '通联' : '断开'}
+          </span>
+          <span class="badge ${data.database.tunnelRunning ? 'badge-running' : 'badge-stopped'}" style="margin-left:6px">
+            隧道 ${data.database.tunnelRunning ? '运行中' : '未运行'}
+          </span>
+        ` : '<span class="badge badge-stopped">待检查</span>'}
+        <a href="#" onclick="switchPanel('database');return false" style="font-size:11px;color:var(--accent);text-decoration:none">🔍 详情 →</a>
+      </div>
+    </div>
+
    <!-- 性能快照 + 性能仪表盘 -->
    <div class="cards-grid cards-2">
      <div class="card">
@@ -1427,6 +1491,139 @@ function drawChart(history) {
  `;
 }

+// ========== 面板: 数据库监看 ==========
+async function fetchDatabaseStatus() {
+  return await api('/api/database/status');
+}
+
+async function renderDatabasePanel() {
+  const data = await fetchDatabaseStatus();
+
+  document.getElementById('panel-actions').innerHTML = `
+    <button class="btn btn-sm" onclick="refreshDatabasePanel()" id="db-refresh-btn">🔄 刷新</button>
+    <span style="font-size:11px;color:var(--text2)">⏱ 每5秒自动刷新</span>
+  `;
+
+  const panel = document.getElementById('panel-database');
+  if (data.error) {
+    panel.innerHTML = `<div class="empty-state"><div class="icon">⚠️</div>${escHtml(data.error)}</div>`;
+    return;
+  }
+
+  const ports = data.ports || [];
+  const tunnelRunning = data.tunnelRunning;
+  const allAlive = data.allAlive;
+  const aliveCount = data.aliveCount;
+  const totalPorts = data.totalPorts;
+  const pg = data.pgDetails;
+
+  // 更新侧边栏数据库徽章
+  const badge = document.getElementById('db-badge');
+  if (badge) {
+    if (allAlive) {
+      badge.style.display = 'inline';
+      badge.style.color = 'var(--green)';
+    } else if (aliveCount > 0) {
+      badge.style.display = 'inline';
+      badge.style.color = 'var(--yellow)';
+    } else {
+      badge.style.display = 'none';
+    }
+  }
+
+  panel.innerHTML = `
+    <!-- 概览 -->
+    <div class="card">
+      <div class="card-header">
+        <span class="card-title">🔌 SSH 隧道状态</span>
+        <span class="badge ${tunnelRunning ? 'badge-running' : 'badge-stopped'}">${tunnelRunning ? '运行中' : '未运行'}</span>
+      </div>
+      <div class="db-summary">
+        <div class="db-summary-stat">
+          <div class="val" style="color:${allAlive ? 'var(--green)' : 'var(--red)'}">${aliveCount}/${totalPorts}</div>
+          <div class="lbl">数据库端口通联</div>
+        </div>
+        ${pg ? `
+        <div class="db-summary-stat">
+          <div class="val" style="color:var(--blue)">${pg.memories ?? '—'}</div>
+          <div class="lbl">记忆条目 (${escHtml(pg.database || '')})</div>
+        </div>
+        ` : ''}
+        <div class="db-summary-stat">
+          <div class="val" style="color:var(--text2)">${formatTime(data.timestamp)}</div>
+          <div class="lbl">最后检查时间</div>
+        </div>
+      </div>
+      <div class="db-grid">
+        ${ports.map(p => `
+          <div class="db-port-card ${p.alive ? 'alive' : 'dead'}">
+            <div class="db-dot"></div>
+            <div class="db-info">
+              <div class="db-name">${escHtml(p.name)}</div>
+              <div class="db-port-label">:${p.port} ${p.alive ? '✅' : '❌'}</div>
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    </div>
+
+    <!-- 隧道操作 -->
+    <div class="card">
+      <div class="card-header"><span class="card-title">🕹️ 隧道控制</span></div>
+      <div class="btn-group" style="margin-bottom:8px">
+        <button class="btn btn-green btn-sm" onclick="tunnelAction('start')" ${tunnelRunning && allAlive ? 'disabled' : ''}>▶ 启动隧道</button>
+        <button class="btn btn-red btn-sm" onclick="tunnelAction('stop')" ${!tunnelRunning ? 'disabled' : ''}>⏹ 停止隧道</button>
+        <button class="btn btn-sm" onclick="tunnelAction('restart')">🔄 重启隧道</button>
+        <button class="btn btn-sm" onclick="tunnelAction('status')">📋 查看状态</button>
+      </div>
+      ${tunnelRunning && !allAlive ? '<div style="font-size:11px;color:var(--yellow);margin-bottom:8px">⚠️ 隧道进程存在但部分端口不通，可能是僵尸进程，请尝试重启隧道</div>' : ''}
+      <div id="tunnel-log-container" style="display:none">
+        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px">
+          <span style="font-size:11px;color:var(--text2)">操作日志</span>
+          <button class="btn btn-xs" onclick="document.getElementById('tunnel-log-container').style.display='none'">✕</button>
+        </div>
+        <div class="tunnel-log" id="tunnel-log"></div>
+      </div>
+    </div>
+
+    <!-- 数据库连接信息 -->
+    <div class="card">
+      <div class="card-header"><span class="card-title">📋 连接说明</span></div>
+      <div style="font-size:12px;color:var(--text2);line-height:1.8">
+        <div>🔑 SSH 服务器: <code style="color:var(--text)">root@cd.yeij.top</code></div>
+        <div>📁 隧道脚本: <code style="color:var(--text)">scripts/tunnel.sh</code></div>
+        <div>💡 所有数据库端口通过 SSH 转发至 <code style="color:var(--text)">localhost</code>，无需修改 .env</div>
+      </div>
+    </div>
+  `;
+}
+
+function refreshDatabasePanel() {
+  renderDatabasePanel();
+}
+
+async function tunnelAction(action) {
+  showToast(`正在执行: ${action} 隧道...`, 'info');
+  const logContainer = document.getElementById('tunnel-log-container');
+  const logEl = document.getElementById('tunnel-log');
+  logEl.textContent = '执行中...';
+  logContainer.style.display = 'block';
+
+  const data = await api(`/api/tunnel/${action}`, { method: 'POST' });
+  if (data.error && !data.output) {
+    logEl.textContent = `错误: ${data.error}`;
+    showToast(`操作失败: ${data.error}`, 'error');
+  } else {
+    logEl.textContent = data.output || data.error || '(无输出)';
+    if (data.success) {
+      showToast(`${action} 隧道完成`, 'success');
+    } else {
+      showToast(`${action} 完成 (查看日志)`, 'info');
+    }
+    setTimeout(refreshDatabasePanel, 1500);
+  }
+}
+
 // ========== 初始化 ==========
 connectWS();
 refreshStatus();