237899745/vue-driven-cloud-storage
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(admin): 添加系统健康检测功能

Browse Source 
新增管理员健康检测面板，可检测以下配置项：
- 安全配置：JWT密钥、CORS、HTTPS、管理员账号、登录防爆破
- 服务状态：SMTP邮件、数据库连接、存储目录
- 运行配置：反向代理支持、Node环境

修改文件：
- backend/auth.js: 新增 isJwtSecretSecure() 函数
- backend/server.js: 新增 /api/admin/health-check API
- frontend/app.js: 新增健康检测数据和方法
- frontend/app.html: 新增健康检测UI界面

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yuyx
2025-11-27 19:37:42 +08:00
parent d2aa115b5b
commit 1dde17bb04
4 changed files with 385 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
frontend/app.html
View File

@@ -654,6 +654,12 @@
background: rgba(102, 126, 234, 0.05);
border-radius: 12px;
}
/* 健康检测状态颜色 */
.text-green-600 { color: #16a34a; }
.text-yellow-600 { color: #ca8a04; }
.text-red-600 { color: #dc2626; }
.text-blue-600 { color: #2563eb; }
</style>
</head>
<body>
@@ -1747,6 +1753,127 @@
</div>
</div>
<!-- 健康检测 -->
<div class="card" style="margin-bottom: 30px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<h3 style="margin: 0;">
<i class="fas fa-heartbeat"></i> 系统健康检测
</h3>
<button class="btn btn-primary" @click="loadHealthCheck" :disabled="healthCheck.loading">
<i class="fas" :class="healthCheck.loading ? 'fa-spinner fa-spin' : 'fa-sync'"></i>
{{ healthCheck.loading ? '检测中...' : '刷新检测' }}
</button>
</div>
<!-- 整体状态 -->
<div v-if="healthCheck.overallStatus" style="margin-bottom: 20px;">
<div style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
<div style="font-size: 18px; font-weight: bold;" :class="getOverallStatusColor(healthCheck.overallStatus)">
<i class="fas" :class="{
'fa-check-circle': healthCheck.overallStatus === 'healthy',
'fa-exclamation-triangle': healthCheck.overallStatus === 'warning',
'fa-times-circle': healthCheck.overallStatus === 'critical'
}"></i>
{{ getOverallStatusText(healthCheck.overallStatus) }}
</div>
<div style="display: flex; gap: 12px; font-size: 13px;">
<span style="color: #28a745;"><i class="fas fa-check"></i> 通过: {{ healthCheck.summary.pass }}</span>
<span style="color: #ffc107;"><i class="fas fa-exclamation"></i> 警告: {{ healthCheck.summary.warning }}</span>
<span style="color: #dc3545;"><i class="fas fa-times"></i> 失败: {{ healthCheck.summary.fail }}</span>
<span style="color: #17a2b8;"><i class="fas fa-info"></i> 信息: {{ healthCheck.summary.info }}</span>
</div>
</div>
<div v-if="healthCheck.lastCheck" style="font-size: 12px; color: #888; margin-top: 8px;">
上次检测: {{ new Date(healthCheck.lastCheck).toLocaleString() }}
</div>
</div>
<!-- 检测项列表 -->
<div v-if="healthCheck.checks.length > 0">
<!-- 按分类分组 -->
<div style="margin-bottom: 20px;">
<h4 style="margin-bottom: 12px; color: #333;"><i class="fas fa-shield-alt"></i> 安全配置</h4>
<div style="display: grid; gap: 10px;">
<div v-for="check in healthCheck.checks.filter(c => c.category === 'security')" :key="check.name"
style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #f8f9fa; border-radius: 8px;">
<span style="font-size: 18px; width: 24px; text-align: center;"
:class="{
'text-green-600': check.status === 'pass',
'text-yellow-600': check.status === 'warning',
'text-red-600': check.status === 'fail',
'text-blue-600': check.status === 'info'
}">
{{ getHealthStatusIcon(check.status) }}
</span>
<div style="flex: 1;">
<div style="font-weight: 500; margin-bottom: 4px;">{{ check.name }}</div>
<div style="font-size: 13px; color: #666;">{{ check.message }}</div>
<div v-if="check.suggestion" style="font-size: 12px; color: #e67e22; margin-top: 4px;">
<i class="fas fa-lightbulb"></i> {{ check.suggestion }}
</div>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 20px;">
<h4 style="margin-bottom: 12px; color: #333;"><i class="fas fa-server"></i> 服务状态</h4>
<div style="display: grid; gap: 10px;">
<div v-for="check in healthCheck.checks.filter(c => c.category === 'service')" :key="check.name"
style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #f8f9fa; border-radius: 8px;">
<span style="font-size: 18px; width: 24px; text-align: center;"
:class="{
'text-green-600': check.status === 'pass',
'text-yellow-600': check.status === 'warning',
'text-red-600': check.status === 'fail',
'text-blue-600': check.status === 'info'
}">
{{ getHealthStatusIcon(check.status) }}
</span>
<div style="flex: 1;">
<div style="font-weight: 500; margin-bottom: 4px;">{{ check.name }}</div>
<div style="font-size: 13px; color: #666;">{{ check.message }}</div>
<div v-if="check.suggestion" style="font-size: 12px; color: #e67e22; margin-top: 4px;">
<i class="fas fa-lightbulb"></i> {{ check.suggestion }}
</div>
</div>
</div>
</div>
</div>
<div>
<h4 style="margin-bottom: 12px; color: #333;"><i class="fas fa-cog"></i> 运行配置</h4>
<div style="display: grid; gap: 10px;">
<div v-for="check in healthCheck.checks.filter(c => c.category === 'config')" :key="check.name"
style="display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #f8f9fa; border-radius: 8px;">
<span style="font-size: 18px; width: 24px; text-align: center;"
:class="{
'text-green-600': check.status === 'pass',
'text-yellow-600': check.status === 'warning',
'text-red-600': check.status === 'fail',
'text-blue-600': check.status === 'info'
}">
{{ getHealthStatusIcon(check.status) }}
</span>
<div style="flex: 1;">
<div style="font-weight: 500; margin-bottom: 4px;">{{ check.name }}</div>
<div style="font-size: 13px; color: #666;">{{ check.message }}</div>
<div v-if="check.suggestion" style="font-size: 12px; color: #e67e22; margin-top: 4px;">
<i class="fas fa-lightbulb"></i> {{ check.suggestion }}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 未检测提示 -->
<div v-else style="text-align: center; padding: 40px; color: #888;">
<i class="fas fa-stethoscope" style="font-size: 48px; margin-bottom: 15px;"></i>
<p>点击"刷新检测"按钮开始系统健康检测</p>
</div>
</div>
<h3 style="margin-bottom: 20px;">用户管理</h3>
<div style="overflow-x: auto;">
<table style="width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 900px;">

73
frontend/app.js
View File

@@ -148,6 +148,15 @@ createApp({
}
},
// 健康检测
healthCheck: {
loading: false,
lastCheck: null,
overallStatus: null, // healthy, warning, critical
summary: { total: 0, pass: 0, warning: 0, fail: 0, info: 0 },
checks: []
},
// Toast通知
toasts: [],
toastIdCounter: 0,
@@ -2041,10 +2050,11 @@ handleDragLeave(e) {
this.loadShares();
break;
case 'admin':
// 切换到管理后台时，重新加载用户列表
// 切换到管理后台时，重新加载用户列表和健康检测
if (this.user && this.user.is_admin) {
this.loadUsers();
this.loadServerStorageStats();
this.loadHealthCheck();
}
break;
case 'settings':
@@ -2260,6 +2270,67 @@ handleDragLeave(e) {
}
},
// ===== 健康检测 =====
async loadHealthCheck() {
this.healthCheck.loading = true;
try {
const response = await axios.get(`${this.apiBase}/api/admin/health-check`, {
headers: { Authorization: `Bearer ${this.token}` }
});
if (response.data.success) {
this.healthCheck.overallStatus = response.data.overallStatus;
this.healthCheck.summary = response.data.summary;
this.healthCheck.checks = response.data.checks;
this.healthCheck.lastCheck = response.data.timestamp;
}
} catch (error) {
console.error('健康检测失败:', error);
this.showToast('error', '错误', '健康检测失败');
} finally {
this.healthCheck.loading = false;
}
},
getHealthStatusColor(status) {
const colors = {
pass: 'bg-green-100 text-green-800',
warning: 'bg-yellow-100 text-yellow-800',
fail: 'bg-red-100 text-red-800',
info: 'bg-blue-100 text-blue-800'
};
return colors[status] || 'bg-gray-100 text-gray-800';
},
getHealthStatusIcon(status) {
const icons = {
pass: '✓',
warning: '⚠',
fail: '✗',
info: 'ℹ'
};
return icons[status] || '?';
},
getOverallStatusColor(status) {
const colors = {
healthy: 'text-green-600',
warning: 'text-yellow-600',
critical: 'text-red-600'
};
return colors[status] || 'text-gray-600';
},
getOverallStatusText(status) {
const texts = {
healthy: '系统健康',
warning: '存在警告',
critical: '存在问题'
};
return texts[status] || '未知';
},
// ===== 上传工具管理 =====
// 检测上传工具是否存在