From af513c22ca7f1c3323786aa44df6ff3484467e76 Mon Sep 17 00:00:00 2001 From: yinjianm Date: Sun, 19 Apr 2026 05:08:10 +0800 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=8E=8B=E7=BC=A9=E7=8A=B6?= =?UTF-8?q?=E6=80=81=E7=9B=91=E6=8E=A7=E5=8E=86=E5=8F=B2=E5=9B=BE=E5=B8=83?= =?UTF-8?q?=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 收紧 CPU 和网络历史图的高度，减少标题区占用， 并同步调整 CPU 核心面板与卡片间距，避免侧栏内 出现多余留白。 --- .helloagents/CHANGELOG.md | 6 ++ .../frontend/src/components/StatusMonitor.vue | 88 ++++++++++++++----- .../StatusMonitorCpuHistoryChart.vue | 20 +++-- .../StatusMonitorNetworkHistoryChart.vue | 3 +- 4 files changed, 85 insertions(+), 32 deletions(-) diff --git a/.helloagents/CHANGELOG.md b/.helloagents/CHANGELOG.md index 9008d0a..8a36796 100644 --- a/.helloagents/CHANGELOG.md +++ b/.helloagents/CHANGELOG.md @@ -101,6 +101,12 @@ - 方案: [202603250614_terminal-ansi-color-effects](archive/2026-03/202603250614_terminal-ansi-color-effects/) ### 快速修改 +- **[frontend]**: 删除状态监控“进程管理”模块标题下的“默认概览 / 点击查看全部”副标题，只保留眉标与右侧操作区，收紧标题区纵向占用 — by yinjianm + - 类型: 快速修改（无方案包） + - 文件: packages/frontend/src/components/StatusMonitor.vue:222-228 +- **[frontend]**: 将 CPU 历史图的 `canvas` 高度继续收紧到 `70px`，并同步缩短上方历史图区块行高，避免外层保留多余留白 — by yinjianm + - 类型: 快速修改（无方案包） + - 文件: packages/frontend/src/components/StatusMonitor.vue, packages/frontend/src/components/StatusMonitorCpuHistoryChart.vue - **[frontend]**: 将 CPU 历史图卡片从随父容器拉伸改为固定紧凑高度约 `188px`，并同步压缩标题区与 canvas 高度，避免在窄侧栏下被撑到约 `278px` — by yinjianm - 类型: 快速修改（无方案包） - 文件: packages/frontend/src/components/StatusMonitorCpuHistoryChart.vue:185-245 diff --git a/packages/frontend/src/components/StatusMonitor.vue b/packages/frontend/src/components/StatusMonitor.vue index 0785ba1..be11700 100644 --- a/packages/frontend/src/components/StatusMonitor.vue +++ b/packages/frontend/src/components/StatusMonitor.vue @@ -69,22 +69,24 @@
-
-
-
-
- {{ item.label }} - {{ item.value }} +
+
+
+
+
+ {{ item.label }} + {{ item.value }} +
+
+ +
-
- -
-
-
+ +
@@ -221,7 +223,6 @@
{{ t('statusMonitor.processManager.title') }} -
{{ t('statusMonitor.processManager.subtitle') }}
@@ -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 { diff --git a/packages/frontend/src/components/StatusMonitorCpuHistoryChart.vue b/packages/frontend/src/components/StatusMonitorCpuHistoryChart.vue index 04013da..67b5094 100644 --- a/packages/frontend/src/components/StatusMonitorCpuHistoryChart.vue +++ b/packages/frontend/src/components/StatusMonitorCpuHistoryChart.vue @@ -2,7 +2,6 @@
-

{{ t('statusMonitor.cpuHistoryRecentPoints', { count: displayPointCount }) }}

{{ t('statusMonitor.cpuUsageTitle') }}
{{ t('statusMonitor.latestCpuValue', { value: latestCpuValue }) }} @@ -184,23 +183,25 @@ onBeforeUnmount(() => {