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