fix(frontend): 调整状态监控网络模块布局

让历史图区按内容自适应,统计表区占用剩余空间并支持内部滚动,
同时微调卡片与图表的间距和字号,避免低高度下内容被裁切。
This commit is contained in:
yinjianm
2026-04-19 05:21:04 +08:00
parent af513c22ca
commit 3cabce0d91
3 changed files with 21 additions and 14 deletions
+3
View File
@@ -101,6 +101,9 @@
- 方案: [202603250614_terminal-ansi-color-effects](archive/2026-03/202603250614_terminal-ansi-color-effects/) - 方案: [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 - **[frontend]**: 删除状态监控“进程管理”模块标题下的“默认概览 / 点击查看全部”副标题,只保留眉标与右侧操作区,收紧标题区纵向占用 — by yinjianm
- 类型: 快速修改(无方案包) - 类型: 快速修改(无方案包)
- 文件: packages/frontend/src/components/StatusMonitor.vue:222-228 - 文件: packages/frontend/src/components/StatusMonitor.vue:222-228
@@ -1050,7 +1050,7 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
.module-split--network { .module-split--network {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: minmax(0, 146px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
min-height: 0; min-height: 0;
align-content: start; align-content: start;
gap: 8px; gap: 8px;
@@ -1059,7 +1059,9 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
.monitor-module--network { .monitor-module--network {
grid-template-rows: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
max-height: 350px; height: 316px;
min-height: 316px;
max-height: 316px;
gap: 8px; gap: 8px;
overflow: hidden; overflow: hidden;
} }
@@ -1182,10 +1184,10 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
.network-table { .network-table {
display: grid; display: grid;
grid-template-rows: auto auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
gap: 4px; gap: 3px;
min-height: 0; min-height: 0;
height: 100%; height: 100%;
padding: 8px 10px; padding: 7px 9px;
overflow: hidden; overflow: hidden;
} }
@@ -1202,7 +1204,7 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
grid-template-columns: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr) auto;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding-bottom: 4px; padding-bottom: 3px;
border-bottom: 1px solid rgba(148, 163, 184, 0.1); border-bottom: 1px solid rgba(148, 163, 184, 0.1);
font-size: 11px; font-size: 11px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 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; gap: 6px;
padding-top: 0; padding-top: 0;
color: #9cb0c2; color: #9cb0c2;
font-size: 10px; font-size: 9px;
font-weight: 700; font-weight: 700;
} }
.network-stat-stack { .network-stat-stack {
min-height: 0; min-height: 0;
align-content: start; align-content: start;
gap: 4px; gap: 3px;
overflow-y: auto;
padding-right: 1px;
} }
.network-table__columns span, .network-table__columns span,
@@ -1256,7 +1260,7 @@ const copyIpToClipboard = async (ipAddress: string | null) => {
border-radius: 10px; border-radius: 10px;
border: 1px solid rgba(148, 163, 184, 0.06); border: 1px solid rgba(148, 163, 184, 0.06);
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
padding: 6px 8px; padding: 5px 7px;
} }
.network-stat__label { .network-stat__label {
@@ -259,7 +259,7 @@ onBeforeUnmount(() => {
.network-history-chart { .network-history-chart {
display: grid; display: grid;
grid-template-rows: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
gap: 8px; gap: 6px;
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
height: auto; height: auto;
@@ -268,7 +268,7 @@ onBeforeUnmount(() => {
background: background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02)), 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%); radial-gradient(circle at top left, rgba(59, 130, 246, 0.06), transparent 62%);
padding: 10px; padding: 8px 10px;
overflow: hidden; overflow: hidden;
} }
@@ -289,9 +289,9 @@ onBeforeUnmount(() => {
} }
.network-history-chart__title { .network-history-chart__title {
margin: 6px 0 0; margin: 0;
color: #f8fbff; color: #f8fbff;
font-size: 14px; font-size: 13px;
font-weight: 800; font-weight: 800;
line-height: 1.2; line-height: 1.2;
} }
@@ -306,9 +306,9 @@ onBeforeUnmount(() => {
.network-history-chart__legend-item { .network-history-chart__legend-item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 5px;
color: #d9e5f1; color: #d9e5f1;
font-size: 11px; font-size: 10px;
font-weight: 700; font-weight: 700;
} }