From 3cabce0d917fcb7acf57ab173383b5a995228ff4 Mon Sep 17 00:00:00 2001
From: yinjianm <admin@mxmicah.com>
Date: Sun, 19 Apr 2026 05:21:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E8=B0=83=E6=95=B4=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E7=9B=91=E6=8E=A7=E7=BD=91=E7=BB=9C=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

让历史图区按内容自适应，统计表区占用剩余空间并支持内部滚动，
同时微调卡片与图表的间距和字号，避免低高度下内容被裁切。
---
 .helloagents/CHANGELOG.md                     |  3 +++
 .../frontend/src/components/StatusMonitor.vue | 20 +++++++++++--------
 .../StatusMonitorNetworkHistoryChart.vue      | 12 +++++------
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/.helloagents/CHANGELOG.md b/.helloagents/CHANGELOG.md
index 8a36796..df41d6b 100644
--- a/.helloagents/CHANGELOG.md
+++ b/.helloagents/CHANGELOG.md
@@ -101,6 +101,9 @@
   - 方案: [202603250614_terminal-ansi-color-effects](archive/2026-03/202603250614_terminal-ansi-color-effects/)
 
 ### 快速修改
+- **[frontend]**: 修正状态监控网络模块的上下布局分配，让历史图区按内容自适应、统计表区拿剩余空间并在极限高度下内部滚动，避免下半部分被直接裁切 — by yinjianm
+  - 类型: 快速修改（无方案包）
+  - 文件: packages/frontend/src/components/StatusMonitor.vue, packages/frontend/src/components/StatusMonitorNetworkHistoryChart.vue
 - **[frontend]**: 删除状态监控“进程管理”模块标题下的“默认概览 / 点击查看全部”副标题，只保留眉标与右侧操作区，收紧标题区纵向占用 — by yinjianm
   - 类型: 快速修改（无方案包）
   - 文件: packages/frontend/src/components/StatusMonitor.vue:222-228
diff --git a/packages/frontend/src/components/StatusMonitor.vue b/packages/frontend/src/components/StatusMonitor.vue
index be11700..7889c76 100644
--- a/packages/frontend/src/components/StatusMonitor.vue
+++ b/packages/frontend/src/components/StatusMonitor.vue
@@ -1050,7 +1050,7 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
 
 .module-split--network {
   grid-template-columns: 1fr;
-  grid-template-rows: minmax(0, 146px) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
   min-height: 0;
   align-content: start;
   gap: 8px;
@@ -1059,7 +1059,9 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
 
 .monitor-module--network {
   grid-template-rows: auto minmax(0, 1fr);
-  max-height: 350px;
+  height: 316px;
+  min-height: 316px;
+  max-height: 316px;
   gap: 8px;
   overflow: hidden;
 }
@@ -1182,10 +1184,10 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
 .network-table {
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
-  gap: 4px;
+  gap: 3px;
   min-height: 0;
   height: 100%;
-  padding: 8px 10px;
+  padding: 7px 9px;
   overflow: hidden;
 }
 
@@ -1202,7 +1204,7 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: 8px;
-  padding-bottom: 4px;
+  padding-bottom: 3px;
   border-bottom: 1px solid rgba(148, 163, 184, 0.1);
   font-size: 11px;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -1215,14 +1217,16 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
   gap: 6px;
   padding-top: 0;
   color: #9cb0c2;
-  font-size: 10px;
+  font-size: 9px;
   font-weight: 700;
 }
 
 .network-stat-stack {
   min-height: 0;
   align-content: start;
-  gap: 4px;
+  gap: 3px;
+  overflow-y: auto;
+  padding-right: 1px;
 }
 
 .network-table__columns span,
@@ -1256,7 +1260,7 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
   border-radius: 10px;
   border: 1px solid rgba(148, 163, 184, 0.06);
   background: rgba(255, 255, 255, 0.03);
-  padding: 6px 8px;
+  padding: 5px 7px;
 }
 
 .network-stat__label {
diff --git a/packages/frontend/src/components/StatusMonitorNetworkHistoryChart.vue b/packages/frontend/src/components/StatusMonitorNetworkHistoryChart.vue
index e3871e6..6238b68 100644
--- a/packages/frontend/src/components/StatusMonitorNetworkHistoryChart.vue
+++ b/packages/frontend/src/components/StatusMonitorNetworkHistoryChart.vue
@@ -259,7 +259,7 @@ onBeforeUnmount(() => {
 .network-history-chart {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
-  gap: 8px;
+  gap: 6px;
   min-width: 0;
   min-height: 0;
   height: auto;
@@ -268,7 +268,7 @@ onBeforeUnmount(() => {
   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.06), transparent 62%);
-  padding: 10px;
+  padding: 8px 10px;
   overflow: hidden;
 }
 
@@ -289,9 +289,9 @@ onBeforeUnmount(() => {
 }
 
 .network-history-chart__title {
-  margin: 6px 0 0;
+  margin: 0;
   color: #f8fbff;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 800;
   line-height: 1.2;
 }
@@ -306,9 +306,9 @@ onBeforeUnmount(() => {
 .network-history-chart__legend-item {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
   color: #d9e5f1;
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 700;
 }