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