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