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
- 前端多项改进 (登录/注册/会话/流式动画等)
This commit is contained in:
2026-05-17 11:42:42 +08:00
parent 0757ad26b5
commit 5d0bb96abe
28 changed files with 1723 additions and 218 deletions
+203 -6
View File
@@ -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();
+16 -1
View File
@@ -24,6 +24,8 @@ export const SERVICES = {
env: {
AI_CORE_PORT: '8081',
PERSONA_DIR: './internal/persona',
IOT_DEBUG_SERVICE_URL: process.env.IOT_DEBUG_SERVICE_URL || 'http://localhost:8083',
ENABLE_BACKGROUND_THINKING: process.env.ENABLE_BACKGROUND_THINKING || 'true',
},
healthUrl: 'http://localhost:8081/api/v1/health',
port: 8081,
@@ -31,6 +33,19 @@ export const SERVICES = {
buildArgs: ['build', '-o', 'main', './cmd/main.go'],
goBin: '/usr/local/go/bin/go',
},
'iot-debug-service': {
name: 'IoT Debug',
cwd: path.join(ROOT, 'backend/iot-debug-service'),
command: './main',
env: {
IOT_DEBUG_PORT: '8083',
},
healthUrl: 'http://localhost:8083/api/v1/health',
port: 8083,
buildCommand: 'go',
buildArgs: ['build', '-o', 'main', './cmd/main.go'],
goBin: '/usr/local/go/bin/go',
},
gateway: {
name: 'Gateway',
cwd: path.join(ROOT, 'backend/gateway'),
@@ -41,7 +56,7 @@ export const SERVICES = {
AI_CORE_URL: 'http://localhost:8081',
ADMIN_USERNAME: process.env.ADMIN_USERNAME || 'admin',
ADMIN_PASSWORD: process.env.ADMIN_PASSWORD || 'cyrene-dev-admin',
REGISTRATION_ENABLED: process.env.REGISTRATION_ENABLED || 'false',
REGISTRATION_ENABLED: process.env.REGISTRATION_ENABLED || 'true',
},
healthUrl: 'http://localhost:8080/api/v1/health',
port: 8080,
+137
View File
@@ -13,11 +13,15 @@ import http from 'http';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
import { execSync, spawn } from 'child_process';
import { processManager } from './process-manager.js';
import { performanceMonitor } from './performance.js';
import { SERVICES, DEVTOOLS_PORT, LOGS_DIR, logFile, GATEWAY_URL, ADMIN_USERNAME, ADMIN_PASSWORD } from './config.js';
const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
const TUNNEL_SCRIPT = path.join(ROOT, 'scripts/tunnel.sh');
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
@@ -194,6 +198,19 @@ app.get('/api/dashboard', async (_req, res) => {
}
} catch { /* 忽略 */ }
// 数据库状态(快速检查,不阻塞)
let dbStatus = { checked: false };
try {
let tunnelRunning = false;
try {
// ^ssh 锚点确保只匹配实际的 SSH 进程,排除 pgrep 自身的 shell 包装器
const out = execSync('pgrep -f "^ssh .*cyrene-tunnel"', { encoding: 'utf-8', timeout: 2000 });
tunnelRunning = out.trim().length > 0;
} catch { /* 未运行 */ }
const port5432Alive = checkPort(5432);
dbStatus = { checked: true, tunnelRunning, postgresAlive: port5432Alive };
} catch { /* 忽略 */ }
const sysMem = process.memoryUsage();
res.json({
@@ -202,6 +219,7 @@ app.get('/api/dashboard', async (_req, res) => {
performance: { totalCpu: Math.round(totalCpu * 100) / 100, totalMem: Math.round(totalMem * 100) / 100, perService: perfSnapshot },
sessions: { active: activeSessions, totalMessages },
memory: { total: memoryCount },
database: dbStatus,
system: { heapUsedMB: Math.round(sysMem.heapUsed / 1024 / 1024 * 100) / 100, heapTotalMB: Math.round(sysMem.heapTotal / 1024 / 1024 * 100) / 100, uptime: process.uptime() },
});
} catch (err) {
@@ -461,6 +479,125 @@ app.get('/api/proxy/:id/health', async (req, res) => {
}
});
// ---- 数据库状态检查 ----
// 需要检查的远程数据库端口映射 (对应 tunnel.sh 中的 SERVICES)
const DB_PORTS = [
{ port: 5432, name: 'PostgreSQL' },
{ port: 6379, name: 'Redis' },
{ port: 6334, name: 'Qdrant HTTP' },
{ port: 9000, name: 'MinIO API' },
{ port: 4222, name: 'NATS' },
];
/**
* 检查本地端口是否在监听 (对应 tunnel 转发的远程服务)
*/
function checkPort(port) {
try {
const hexPort = port.toString(16).padStart(4, '0').toUpperCase();
const tcpContent = fs.readFileSync('/proc/net/tcp', 'utf-8');
for (const line of tcpContent.split('\n')) {
const parts = line.trim().split(/\s+/);
if (parts.length > 1 && parts[1]) {
const localAddr = parts[1].split(':')[1];
if (localAddr === hexPort) {
return true;
}
}
}
} catch { /* fallback: try TCP connect */ }
// 备用方案: 使用 /dev/tcp (在 bash 中可用)
try {
execSync(`timeout 1 bash -c "echo >/dev/tcp/127.0.0.1/${port}" 2>/dev/null`, { timeout: 1500 });
return true;
} catch {
return false;
}
}
app.get('/api/database/status', (_req, res) => {
// 检查 SSH 隧道进程是否运行
let tunnelRunning = false;
try {
const out = execSync('pgrep -f "^ssh .*cyrene-tunnel"', { encoding: 'utf-8', timeout: 3000 });
tunnelRunning = out.trim().length > 0;
} catch { /* 没找到进程 */ }
// 检查各端口
const ports = DB_PORTS.map(({ port, name }) => {
const alive = checkPort(port);
return { port, name, alive };
});
const allAlive = ports.every(p => p.alive);
const aliveCount = ports.filter(p => p.alive).length;
// 尝试获取 PostgreSQL 详情
let pgDetails = null;
if (ports.find(p => p.port === 5432)?.alive) {
try {
// 读取 .env 获取凭据
const envPath = path.join(ROOT, 'backend', '.env');
let pgUser = 'cyrene', pgPass = 'change_me', pgDb = 'cyrene_ai';
if (fs.existsSync(envPath)) {
const envContent = fs.readFileSync(envPath, 'utf-8');
const mUser = envContent.match(/^POSTGRES_USER=(.+)$/m);
const mPass = envContent.match(/^POSTGRES_PASSWORD=(.+)$/m);
const mDb = envContent.match(/^POSTGRES_DB=(.+)$/m);
if (mUser) pgUser = mUser[1];
if (mPass) pgPass = mPass[1];
if (mDb) pgDb = mDb[1];
}
const out = execSync(
`PGPASSWORD="${pgPass}" psql -h localhost -p 5432 -U "${pgUser}" -d "${pgDb}" -t -c "SELECT count(*) FROM memories;" 2>/dev/null`,
{ encoding: 'utf-8', timeout: 5000 }
);
const match = out.match(/(\d+)/);
pgDetails = { memories: match ? parseInt(match[1]) : 0, database: pgDb };
} catch { /* pg query failed */ }
}
res.json({
timestamp: Date.now(),
tunnelRunning,
ports,
allAlive,
aliveCount,
totalPorts: DB_PORTS.length,
pgDetails,
});
});
// ---- 隧道控制 ----
app.post('/api/tunnel/:action', (req, res) => {
const { action } = req.params;
if (!['start', 'stop', 'restart', 'status'].includes(action)) {
return res.status(400).json({ error: `不支持的操作: ${action},支持: start/stop/restart/status` });
}
if (!fs.existsSync(TUNNEL_SCRIPT)) {
return res.status(404).json({ error: `隧道脚本不存在: ${TUNNEL_SCRIPT}` });
}
try {
const out = execSync(`bash "${TUNNEL_SCRIPT}" ${action}`, {
encoding: 'utf-8',
timeout: 20000,
cwd: path.join(ROOT, 'scripts'),
});
res.json({ success: true, action, output: out.trim() });
} catch (err) {
// tunnel.sh 可能返回非零退出码但仍成功(如 start 时发现已在运行)
const output = err.stdout || err.stderr || err.message;
res.json({
success: false,
action,
output: output.trim(),
error: err.message,
});
}
});
// ========== 启动 ==========
// 启动性能监控
performanceMonitor.start();
+44 -39
View File
@@ -339,45 +339,50 @@ class ProcessManager extends EventEmitter {
* 每步等待健康检查通过后再启动下一个
*/
async startAllSequential() {
const order = ['ai-core', 'gateway', 'frontend'];
const results = [];
for (const id of order) {
const svc = SERVICES[id];
// 先尝试接管已运行的服务
const adopted = await this.tryAdopt(id);
if (adopted) {
results.push({ id, success: true, message: `${svc.name} 已接管 (无需重启)` });
continue;
}
// 启动服务
try {
const r = await this.start(id);
results.push({ id, ...r });
// 等待健康检查通过
if (svc.healthUrl) {
let healthy = false;
for (let i = 0; i < 15; i++) {
await new Promise((r) => setTimeout(r, 1000));
try {
const resp = await fetch(svc.healthUrl, { signal: AbortSignal.timeout(2000) });
if (resp.ok) { healthy = true; break; }
} catch { /* continue waiting */ }
}
if (!healthy) {
this.emit('log', id, 'error', `${svc.name} 健康检查超时`);
} else {
this.emit('log', id, 'system', `${svc.name} 健康检查通过 ✓`);
}
}
} catch (err) {
results.push({ id, success: false, message: err.message });
}
}
return results;
const order = ['iot-debug-service', 'ai-core', 'gateway', 'frontend'];
const results = [];
for (const id of order) {
const svc = SERVICES[id];
// 先尝试接管已运行的服务
const adopted = await this.tryAdopt(id);
if (adopted) {
results.push({ id, success: true, message: `${svc.name} 已接管 (无需重启)` });
continue;
}
// 启动服务
try {
const r = await this.start(id);
results.push({ id, ...r });
// 等待健康检查通过
if (svc.healthUrl) {
let healthy = false;
for (let i = 0; i < 15; i++) {
await new Promise((r) => setTimeout(r, 1000));
try {
const resp = await fetch(svc.healthUrl, { signal: AbortSignal.timeout(2000) });
if (resp.ok) { healthy = true; break; }
} catch { /* continue waiting */ }
}
if (!healthy) {
this.emit('log', id, 'error', `${svc.name} 健康检查超时`);
} else {
this.emit('log', id, 'system', `${svc.name} 健康检查通过 ✓`);
// Gateway 和 AI-Core 启动后额外等待 2 秒,确保内部路由和 Handler 完全初始化
if (id === 'gateway' || id === 'ai-core') {
await new Promise((r) => setTimeout(r, 2000));
this.emit('log', id, 'system', `${svc.name} 已就绪 (额外等待 2s 确保服务稳定)`);
}
}
}
} catch (err) {
results.push({ id, success: false, message: err.message });
}
}
return results;
}
}