fix(frontend): 调整状态监控网络模块布局
让历史图区按内容自适应,统计表区占用剩余空间并支持内部滚动, 同时微调卡片与图表的间距和字号,避免低高度下内容被裁切。
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user