diff --git a/admin/dashboard/templates/index.html b/admin/dashboard/templates/index.html index ca637f0..72d4c2b 100644 --- a/admin/dashboard/templates/index.html +++ b/admin/dashboard/templates/index.html @@ -146,6 +146,13 @@ {% raw %}{{ getHealthStatusText(card.status) }}{% endraw %} +
{% raw %}{{ card.value }}{% endraw %}
{% raw %}{{ card.summary }}{% endraw %}
@@ -534,7 +541,9 @@ value: `${this.countHealthyInfrastructureServices(infrastructure)} / 2`, summary: infrastructure.summary || '暂无状态', serviceBlocks: this.buildInfrastructureServiceBlocks(infrastructure), - extra: '首页展示的是服务摘要;如果后续要做更深入的运维排查,再单独拆详细页会更合适。' + extra: '首页展示的是服务摘要;如果后续要做更深入的运维排查,再单独拆详细页会更合适。', + actionLabel: '系统状态', + actionPath: '/system_status' }, { key: 'ai_runtime', @@ -545,7 +554,9 @@ : `${aiRuntime.scene_count || 0} 个场景`, summary: aiRuntime.summary || '暂无状态', serviceBlocks: this.buildAiRuntimeServiceBlocks(aiRuntime), - extra: this.buildAiRuntimeExtra(aiRuntime) + extra: this.buildAiRuntimeExtra(aiRuntime), + actionLabel: 'LLM详情', + actionPath: '/system_llm' }, { key: 'scheduler', @@ -554,7 +565,9 @@ value: `${scheduler.enabled_jobs || 0} / ${scheduler.total_jobs || 0}`, summary: scheduler.summary || '暂无状态', serviceBlocks: this.buildSchedulerServiceBlocks(scheduler), - extra: this.buildSchedulerExtra(scheduler) + extra: this.buildSchedulerExtra(scheduler), + actionLabel: '任务中心', + actionPath: '/system_jobs' } ]; } @@ -584,6 +597,13 @@ this.loadSystemInfo(); this.loadSystemHealth(); }, + openHealthDetail(path) { + // 健康卡片统一走这里做详情跳转,避免模板层分散路由字符串,后续改版时维护成本更低。 + if (!path) { + return; + } + window.location.href = path; + }, loadSystemInfo() { axios.get('/api/system_info') .then(response => { @@ -1507,6 +1527,8 @@ border: 1px solid rgba(148, 163, 184, 0.14); background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.88)); min-height: 156px; + display: flex; + flex-direction: column; } .health-item--healthy { @@ -1575,9 +1597,31 @@ color: #475569; } + .health-item__action { + align-self: flex-start; + margin: -4px 0 12px; + padding: 6px 10px; + border-radius: 999px; + border: 1px solid rgba(148, 163, 184, 0.18); + background: rgba(255, 255, 255, 0.92); + color: #475569; + font-size: 11px; + font-weight: 700; + cursor: pointer; + transition: all .18s ease; + } + + .health-item__action:hover { + color: #1d4ed8; + border-color: rgba(59, 130, 246, 0.22); + background: rgba(59, 130, 246, 0.08); + } + .health-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); + /* 同一张卡片内的服务面板按等高网格排列,避免信息多少不同导致页面右侧出现明显错层。 */ + grid-auto-rows: 1fr; gap: 12px; margin-top: 16px; } @@ -1587,6 +1631,10 @@ border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.14); background: rgba(248, 250, 252, 0.72); + /* 纵向弹性布局可以让摘要自然占位,指标区稳定贴底,三类健康卡片的视觉节奏会更统一。 */ + display: flex; + flex-direction: column; + height: 100%; } .health-service-panel--healthy { @@ -1790,6 +1838,8 @@ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; + /* 指标区放到底部,服务名称、状态说明与关键指标之间能自动拉开间距。 */ + margin-top: auto; } .health-service-metric {