admin/nexus-terminal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): 压缩状态监控历史图布局

Browse Source 
收紧 CPU 和网络历史图的高度，减少标题区占用，
并同步调整 CPU 核心面板与卡片间距，避免侧栏内
出现多余留白。
This commit is contained in:
yinjianm
2026-04-19 05:08:10 +08:00
parent 30cc596ed8
commit af513c22ca
4 changed files with 85 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/StatusMonitor.vue
+67 -21
View File
@@ -69,22 +69,24 @@
<div class="module-split module-split--cpu">
<StatusMonitorCpuHistoryChart :cpu-history="currentCpuHistory" />
<div class="cpu-core-grid">
<article
v-for="item in cpuCoreItems"
:key="item.key"
class="usage-lane usage-lane--cpu"
>
<div class="usage-lane__content">
<div class="usage-lane__meta">
<span class="usage-lane__label">{{ item.label }}</span>
<span class="usage-lane__value-inline">{{ item.value }}</span>
<div class="cpu-core-panel">
<div class="cpu-core-grid">
<article
v-for="item in cpuCoreItems"
:key="item.key"
class="usage-lane usage-lane--cpu"
>
<div class="usage-lane__content">
<div class="usage-lane__meta">
<span class="usage-lane__label">{{ item.label }}</span>
<span class="usage-lane__value-inline">{{ item.value }}</span>
</div>
<div class="usage-lane__track">
<span class="usage-lane__fill" :style="{ width: `${item.percent}%` }"></span>
</div>
</div>
<div class="usage-lane__track">
<span class="usage-lane__fill" :style="{ width: `${item.percent}%` }"></span>
</div>
</div>
</article>
</article>
</div>
</div>
</div>
</section>
@@ -221,7 +223,6 @@
<div class="monitor-module__heading">
<div>
<span class="monitor-module__eyebrow">{{ t('statusMonitor.processManager.title') }}</span>
<h5 class="monitor-module__title">{{ t('statusMonitor.processManager.subtitle') }}</h5>
</div>
<div class="monitor-module__heading-actions">
<div class="process-summary-pills">
@@ -851,6 +852,13 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
min-height: clamp(188px, 62cqw, 220px);
}
.monitor-module--usage {
grid-template-rows: auto minmax(0, 1fr);
max-height: 320px;
gap: 8px;
overflow: hidden;
}
.monitor-module--process {
min-height: clamp(340px, 116cqw, 420px);
}
@@ -977,16 +985,50 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
background: linear-gradient(90deg, #7dd3fc, #2563eb);
}
.usage-lane--cpu {
gap: 6px;
border-radius: 10px;
padding: 6px 8px;
}
.usage-lane--cpu .usage-lane__content {
gap: 6px;
}
.usage-lane--cpu .usage-lane__label {
font-size: 11px;
}
.usage-lane--cpu .usage-lane__value-inline {
font-size: 14px;
}
.usage-lane--cpu .usage-lane__track {
height: 6px;
}
.cpu-core-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
align-content: start;
gap: 8px;
max-height: 208px;
gap: 6px;
min-height: 0;
height: 100%;
overflow-y: auto;
padding-right: 2px;
}
.cpu-core-panel {
min-height: 0;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02)),
radial-gradient(circle at top left, rgba(59, 130, 246, 0.04), transparent 60%);
padding: 8px 10px;
overflow: hidden;
}
.module-split {
display: grid;
gap: 12px;
@@ -998,8 +1040,12 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
}
.module-split--cpu {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: stretch;
grid-template-columns: 1fr;
grid-template-rows: minmax(0, 126px) minmax(0, 112px);
min-height: 0;
align-content: start;
gap: 8px;
overflow: hidden;
}
.module-split--network {
packages/frontend/src/components/StatusMonitorCpuHistoryChart.vue
+11 -9
View File
@@ -2,7 +2,6 @@
<div ref="chartHostRef" class="cpu-history-chart">
<div class="cpu-history-chart__header">
<div>
<p class="cpu-history-chart__subtitle">{{ t('statusMonitor.cpuHistoryRecentPoints', { count: displayPointCount }) }}</p>
<h6 class="cpu-history-chart__title">{{ t('statusMonitor.cpuUsageTitle') }}</h6>
</div>
<span class="cpu-history-chart__latest">{{ t('statusMonitor.latestCpuValue', { value: latestCpuValue }) }}</span>
@@ -184,23 +183,25 @@ onBeforeUnmount(() => {
<style scoped>
.cpu-history-chart {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 8px;
min-width: 0;
height: 188px;
align-self: start;
min-height: 0;
height: 100%;
border-radius: 16px;
border: 1px solid rgba(148, 163, 184, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02)),
radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 62%);
padding: 10px;
overflow: hidden;
}
.cpu-history-chart__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
gap: 8px;
}
.cpu-history-chart__subtitle {
@@ -213,22 +214,22 @@ onBeforeUnmount(() => {
}
.cpu-history-chart__title {
margin: 4px 0 0;
margin: 6px 0 0;
color: #f8fbff;
font-size: 13px;
font-size: 14px;
font-weight: 800;
line-height: 1.2;
}
.cpu-history-chart__latest {
display: inline-flex;
min-height: 24px;
min-height: 22px;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(96, 165, 250, 0.22);
background: rgba(37, 99, 235, 0.18);
padding: 0 9px;
padding: 0 8px;
color: #dbeafe;
font-size: 11px;
font-weight: 800;
@@ -237,8 +238,9 @@ onBeforeUnmount(() => {
.cpu-history-chart__canvas {
min-width: 0;
min-height: 0;
width: 100%;
height: 112px;
height: 70px;
overflow: hidden;
}
packages/frontend/src/components/StatusMonitorNetworkHistoryChart.vue
+1 -2
View File
@@ -2,7 +2,6 @@
<div ref="chartHostRef" class="network-history-chart">
<div class="network-history-chart__header">
<div>
<p class="network-history-chart__subtitle">{{ t('statusMonitor.networkHistoryRecentPoints', { count: displayPointCount }) }}</p>
<h6 class="network-history-chart__title">
{{ t('statusMonitor.networkSpeedTitleUnit', { unit: networkRateUnitIsMB ? 'MB/s' : 'KB/s' }) }}
</h6>
@@ -331,7 +330,7 @@ onBeforeUnmount(() => {
min-width: 0;
min-height: 0;
width: 100%;
height: 88px;
height: 60px;
overflow: hidden;
}