fix(frontend): 修复状态监控 CPU 卡片布局截断

This commit is contained in:
yinjianm
2026-04-19 05:42:13 +08:00
parent aad6b84eb9
commit 940c8babc2
2 changed files with 16 additions and 4 deletions
+4
View File
@@ -2,6 +2,10 @@
## [Unreleased]
- **[frontend]**: 移除状态监控默认 CPU 卡里重复的 `CPU 使用率` 标题,并修正 CPU 摘要区固定高度导致的卡片/按钮截断问题 — by yinjianm
- 类型: 快速修改(无方案包)
- 文件: packages/frontend/src/components/StatusMonitor.vue:61-88,1035-1100,1565-1580
- **[frontend]**: 将状态监控默认 CPU 卡改为“总 CPU 历史图 + 当前/平均/最忙核心紧凑摘要 + 查看全部核心详情弹层”,避免多核机器下侧栏被逐核心条卡撑高 — by yinjianm
- 方案: [202604190520_status-monitor-cpu-summary-modal](archive/2026-04/202604190520_status-monitor-cpu-summary-modal/)
@@ -61,7 +61,6 @@
<div class="monitor-module__heading">
<div>
<span class="monitor-module__eyebrow">{{ t('statusMonitor.cpuLabel') }}</span>
<h5 class="monitor-module__title">{{ t('statusMonitor.cpuUsageTitle') }}</h5>
</div>
<span class="monitor-module__pill">{{ displayCpuCores }}</span>
</div>
@@ -1033,6 +1032,8 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
}
.cpu-summary-panel {
display: grid;
gap: 10px;
min-height: 0;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.08);
@@ -1045,10 +1046,14 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
.cpu-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.cpu-summary-card:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.cpu-summary-card {
display: grid;
gap: 6px;
@@ -1076,7 +1081,6 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
}
.cpu-summary-action {
margin-top: 10px;
width: 100%;
}
@@ -1092,7 +1096,7 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
.module-split--cpu {
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 126px) minmax(0, 112px);
grid-template-rows: minmax(0, 126px) auto;
min-height: 0;
align-content: start;
gap: 8px;
@@ -1574,6 +1578,10 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
grid-template-columns: 1fr;
}
.cpu-summary-grid {
grid-template-columns: 1fr;
}
.network-table__header,
.network-table__columns,
.network-stat,