From 2059119d89dc0a903f283f6b24a3f2cb2cbd9176 Mon Sep 17 00:00:00 2001
From: ssongliu <sloooop1x@gmail.com>
Date: Sun, 1 Nov 2026 22:32:06 +0800
Subject: [PATCH] fix(dashboard): restore monitor layout and compact single GPU
 status (#14267)

---
 frontend/src/views/home/index.vue      | 276 ++++++++++++++-----------
 frontend/src/views/home/status/gpu.vue | 110 +++++++++-
 2 files changed, 262 insertions(+), 124 deletions(-)

diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 78a72a2ee..6e1a27d59 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -86,6 +86,92 @@
                         />
                     </template>
                 </CardWithHeader>
+                <CardWithHeader
+                    :header="$t('menu.monitor')"
+                    class="card-interval chart-card"
+                    @mouseenter="refreshOptionsOnHover"
+                >
+                    <template #header-r>
+                        <el-radio-group
+                            style="float: right; margin-left: 5px"
+                            v-model="chartOption"
+                            @change="changeOption"
+                        >
+                            <el-radio-button value="network">{{ $t('home.network') }}</el-radio-button>
+                            <el-radio-button value="io">{{ $t('home.io') }}</el-radio-button>
+                        </el-radio-group>
+                        <el-select
+                            v-if="chartOption === 'network'"
+                            @change="onLoadBaseInfo(false, 'network')"
+                            v-model="searchInfo.netOption"
+                            class="p-w-200 float-right"
+                        >
+                            <template #prefix>{{ $t('home.networkCard') }}</template>
+                            <el-option
+                                v-for="item in netOptions"
+                                :key="item"
+                                :label="item == 'all' ? $t('commons.table.all') : item"
+                                :value="item"
+                            />
+                        </el-select>
+                        <el-select
+                            v-if="chartOption === 'io'"
+                            v-model="searchInfo.ioOption"
+                            @change="onLoadBaseInfo(false, 'io')"
+                            class="p-w-200 float-right"
+                        >
+                            <template #prefix>{{ $t('home.disk') }}</template>
+                            <el-option
+                                v-for="item in ioOptions"
+                                :key="item"
+                                :label="item == 'all' ? $t('commons.table.all') : item"
+                                :value="item"
+                            />
+                        </el-select>
+                    </template>
+                    <template #body>
+                        <div class="monitor-chart-content">
+                            <div class="monitor-tags" :style="monitorTagsStyle" v-if="chartOption === 'network'">
+                                <el-tag>
+                                    {{ $t('monitor.up') }}: {{ computeSizeFromKBs(currentChartInfo.netBytesSent) }}
+                                </el-tag>
+                                <el-tag>
+                                    {{ $t('monitor.down') }}: {{ computeSizeFromKBs(currentChartInfo.netBytesRecv) }}
+                                </el-tag>
+                                <el-tag>{{ $t('home.totalSend') }}: {{ computeSize(currentInfo.netBytesSent) }}</el-tag>
+                                <el-tag>{{ $t('home.totalRecv') }}: {{ computeSize(currentInfo.netBytesRecv) }}</el-tag>
+                            </div>
+                            <div class="monitor-tags" :style="monitorTagsStyle" v-if="chartOption === 'io'">
+                                <el-tag>{{ $t('monitor.read') }}: {{ currentChartInfo.ioReadBytes }} MB</el-tag>
+                                <el-tag>{{ $t('monitor.write') }}: {{ currentChartInfo.ioWriteBytes }} MB</el-tag>
+                                <el-tag>
+                                    {{ $t('home.rwPerSecond') }}: {{ currentChartInfo.ioCount }}
+                                    {{ $t('commons.units.time') }}/s
+                                </el-tag>
+                                <el-tag>{{ $t('home.ioDelay') }}: {{ currentChartInfo.ioTime }} ms</el-tag>
+                            </div>
+
+                            <div v-if="chartOption === 'io'" class="mobile-monitor-chart">
+                                <v-charts
+                                    height="383px"
+                                    id="ioChart"
+                                    type="line"
+                                    :option="chartsOption['ioChart']"
+                                    :dataZoom="true"
+                                />
+                            </div>
+                            <div v-if="chartOption === 'network'" class="mobile-monitor-chart">
+                                <v-charts
+                                    height="383px"
+                                    id="networkChart"
+                                    type="line"
+                                    :option="chartsOption['networkChart']"
+                                    :dataZoom="true"
+                                />
+                            </div>
+                        </div>
+                    </template>
+                </CardWithHeader>
             </el-col>
             <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="dashboard-right">
                 <el-carousel
@@ -352,82 +438,6 @@
             </el-col>
         </el-row>
 
-        <CardWithHeader :header="$t('menu.monitor')" class="card-interval" @mouseenter="refreshOptionsOnHover">
-            <template #body>
-                <div class="monitor-grid">
-                    <section class="monitor-panel">
-                        <div class="monitor-panel-header">
-                            <span>{{ $t('home.network') }}</span>
-                            <el-select
-                                @change="onLoadBaseInfo(false, 'network')"
-                                v-model="searchInfo.netOption"
-                                class="monitor-select"
-                            >
-                                <template #prefix>{{ $t('home.networkCard') }}</template>
-                                <el-option
-                                    v-for="item in netOptions"
-                                    :key="item"
-                                    :label="item == 'all' ? $t('commons.table.all') : item"
-                                    :value="item"
-                                />
-                            </el-select>
-                        </div>
-                        <div class="monitor-tags">
-                            <el-tag>
-                                {{ $t('monitor.up') }}: {{ computeSizeFromKBs(currentChartInfo.netBytesSent) }}
-                            </el-tag>
-                            <el-tag>
-                                {{ $t('monitor.down') }}: {{ computeSizeFromKBs(currentChartInfo.netBytesRecv) }}
-                            </el-tag>
-                            <el-tag>{{ $t('home.totalSend') }}: {{ computeSize(currentInfo.netBytesSent) }}</el-tag>
-                            <el-tag>{{ $t('home.totalRecv') }}: {{ computeSize(currentInfo.netBytesRecv) }}</el-tag>
-                        </div>
-                        <v-charts
-                            height="383px"
-                            id="networkChart"
-                            type="line"
-                            :option="chartsOption['networkChart']"
-                            :dataZoom="true"
-                        />
-                    </section>
-                    <section class="monitor-panel">
-                        <div class="monitor-panel-header">
-                            <span>{{ $t('home.io') }}</span>
-                            <el-select
-                                v-model="searchInfo.ioOption"
-                                @change="onLoadBaseInfo(false, 'io')"
-                                class="monitor-select"
-                            >
-                                <template #prefix>{{ $t('home.disk') }}</template>
-                                <el-option
-                                    v-for="item in ioOptions"
-                                    :key="item"
-                                    :label="item == 'all' ? $t('commons.table.all') : item"
-                                    :value="item"
-                                />
-                            </el-select>
-                        </div>
-                        <div class="monitor-tags">
-                            <el-tag>{{ $t('monitor.read') }}: {{ currentChartInfo.ioReadBytes }} MB</el-tag>
-                            <el-tag>{{ $t('monitor.write') }}: {{ currentChartInfo.ioWriteBytes }} MB</el-tag>
-                            <el-tag>
-                                {{ $t('home.rwPerSecond') }}: {{ currentChartInfo.ioCount }}
-                                {{ $t('commons.units.time') }}/s
-                            </el-tag>
-                            <el-tag>{{ $t('home.ioDelay') }}: {{ currentChartInfo.ioTime }} ms</el-tag>
-                        </div>
-                        <v-charts
-                            height="383px"
-                            id="ioChart"
-                            type="line"
-                            :option="chartsOption['ioChart']"
-                            :dataZoom="true"
-                        />
-                    </section>
-                </div>
-            </template>
-        </CardWithHeader>
-
         <QuickJump @search="onLoadBaseInfo(false, 'all')" ref="quickJumpRef" />
 
         <DialogPro v-model="welcomeOpen" size="w-70" id="welcomeDialog">
@@ -491,8 +501,12 @@ const DASHBOARD_CACHE_TTL = {
     netOptions: 60 * 60 * 1000,
     ioOptions: 60 * 60 * 1000,
 };
-const monitorChartGrid = { left: 55, right: 25, bottom: '20%' };
+const monitorChartGrid = { left: 65, right: 65, bottom: '20%' };
 const monitorChartLegend = { top: 0, bottom: 'auto' };
+const monitorTagsStyle = {
+    left: `${monitorChartGrid.left}px`,
+    right: `${monitorChartGrid.right}px`,
+};
 const monitorChartEmptyLength = 20;
 const loadMonitorEmptyData = () => Array.from({ length: monitorChartEmptyLength }, () => null);
 const loadMonitorEmptyTime = () => Array.from({ length: monitorChartEmptyLength }, () => '');
@@ -539,9 +553,11 @@ const isSafety = ref();
 const welcomeOpen = ref();
 const shadowContainer = ref();
 
+const chartOption = ref('network');
 const statusOption = ref(localStorage.getItem('dashboard_status_view') === 'gpu' ? 'gpu' : 'system');
 let timer: ReturnType<typeof setInterval> | null = null;
 let initialSampleTimer: ReturnType<typeof setTimeout> | null = null;
+let isInit = ref<boolean>(true);
 let isStatusInit = ref<boolean>(true);
 let isActive = ref(true);
 let isCurrentActive = ref(true);
@@ -708,6 +724,11 @@ const updateCurrentInfo = (data: Dashboard.CurrentInfo) => {
     };
 };
 
+const changeOption = async () => {
+    isInit.value = true;
+    loadData();
+};
+
 const applyDefaultNetOption = () => {
     if (!netOptions.value || netOptions.value.length === 0) return;
     const defaultNet = defaultNetwork.value || netOptions.value[0];
@@ -1012,9 +1033,12 @@ const saveMemo = async () => {
     }
 };
 
-const loadData = () => {
-    chartsOption.value['ioChart'] = loadIOChartOption();
-    chartsOption.value['networkChart'] = loadNetworkChartOption();
+const loadData = async () => {
+    if (chartOption.value === 'io') {
+        chartsOption.value['ioChart'] = loadIOChartOption();
+    } else {
+        chartsOption.value['networkChart'] = loadNetworkChartOption();
+    }
 };
 
 const hideEntrance = () => {
@@ -1182,6 +1206,15 @@ onBeforeUnmount(() => {
     font-size: 12px;
 }
 
+.monitor-chart-content {
+    position: relative;
+    margin-top: 60px;
+}
+
+.mobile-monitor-chart {
+    margin-top: 40px;
+}
+
 @media only screen and (max-width: 767px) {
     .dashboard-entrance-alert {
         padding-right: 40px;
@@ -1328,54 +1361,49 @@ onBeforeUnmount(() => {
     border-top: var(--panel-border);
 }
 
-.monitor-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 24px;
-}
-
-.monitor-panel {
-    min-width: 0;
-}
-
-.monitor-panel-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-bottom: 12px;
-    font-weight: 500;
-}
-
-.monitor-select {
-    width: 200px;
-    max-width: 100%;
-}
-
 .monitor-tags {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
-    margin-bottom: 16px;
+    position: absolute;
+    top: -10px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
 
-    :deep(.el-tag) {
+@media only screen and (max-width: 1024px) {
+    .monitor-chart-content {
+        margin-top: 20px;
+    }
+
+    .monitor-chart-content .monitor-tags {
+        position: static;
+        display: grid;
         width: 100%;
-        max-width: 100%;
-        height: auto;
-        min-height: 24px;
-        justify-content: center;
-        padding-block: 3px;
-        line-height: 1.3;
-        text-align: center;
-        white-space: normal;
-        overflow-wrap: anywhere;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+        margin-bottom: 12px;
+
+        :deep(.el-tag) {
+            width: 100%;
+            max-width: 100%;
+            height: auto;
+            min-height: 24px;
+            justify-content: center;
+            padding-block: 3px;
+            line-height: 1.3;
+            text-align: center;
+            white-space: normal;
+            overflow-wrap: anywhere;
+        }
+    }
+
+    .mobile-monitor-chart {
+        margin-top: 0;
     }
 }
 
-@media only screen and (max-width: 991px) {
-    .monitor-grid {
-        grid-template-columns: minmax(0, 1fr);
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+    .monitor-chart-content .monitor-tags {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
     }
 }
 
@@ -1398,6 +1426,10 @@ onBeforeUnmount(() => {
     }
 }
 
+.chart-card {
+    min-height: 383px;
+}
+
 .memo-container {
     height: 270px;
 }
diff --git a/frontend/src/views/home/status/gpu.vue b/frontend/src/views/home/status/gpu.vue
index edb7e28e6..bd236311a 100644
--- a/frontend/src/views/home/status/gpu.vue
+++ b/frontend/src/views/home/status/gpu.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="gpu-status">
-        <div class="gpu-summary">
+    <div class="gpu-status" :class="{ 'gpu-status-single': devices.length === 1 }">
+        <div v-if="devices.length !== 1" class="gpu-summary">
             <div class="gpu-summary-header">
                 <div class="device-counts">
                     <strong v-for="group in deviceGroups" :key="group.type">
@@ -56,6 +56,10 @@
                             <el-button link type="primary" size="small">{{ $t('commons.button.view') }}</el-button>
                         </template>
                     </el-popover>
+                    <el-button v-if="devices.length === 1" link type="primary" size="small" @click="$emit('open')">
+                        {{ $t('aiTools.gpu.viewHistory') }}
+                        <el-icon><ArrowRight /></el-icon>
+                    </el-button>
                 </div>
                 <div class="device-metrics">
                     <div class="device-metric metric-utilization">
@@ -380,10 +384,112 @@ const usedMemory = computed(() =>
     font-size: 12px;
     font-weight: 500;
 }
+.gpu-status-single {
+    .gpu-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .gpu-card {
+        display: grid;
+        grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.35fr);
+        gap: 24px;
+        min-height: 174px;
+        padding: 18px 20px;
+    }
+
+    .device-header {
+        grid-column: 1 / -1;
+        margin-bottom: 0;
+    }
+
+    .device-identity {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .device-id {
+        flex-shrink: 0;
+        margin-bottom: 0;
+        padding: 4px 7px;
+        border-radius: 4px;
+        background: var(--el-fill-color-light);
+    }
+
+    .device-metrics {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
+        gap: 24px;
+    }
+
+    .metric-heading strong {
+        font-size: 23px;
+        line-height: 32px;
+    }
+
+    .device-footer {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 20px;
+        margin: 0;
+        padding: 0;
+        border-top: 0;
+    }
+
+    .device-footer > div {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+        padding-left: 20px;
+        border-left: 1px solid var(--el-border-color-extra-light);
+        min-width: 0;
+    }
+
+    .device-footer strong {
+        font-size: 23px;
+        line-height: 32px;
+        font-variant-numeric: tabular-nums;
+        overflow-wrap: anywhere;
+    }
+}
 @container (max-width: 560px) {
     .gpu-grid {
         grid-template-columns: minmax(0, 1fr);
     }
+
+    .gpu-status-single {
+        .gpu-card {
+            grid-template-columns: minmax(0, 1fr);
+            gap: 16px;
+            padding: 14px 16px;
+        }
+
+        .device-header {
+            flex-wrap: wrap;
+        }
+
+        .device-identity {
+            flex: 0 0 100%;
+        }
+
+        .metric-heading strong {
+            font-size: 18px;
+        }
+
+        .device-footer {
+            padding-top: 12px;
+            border-top: 1px solid var(--el-border-color-extra-light);
+        }
+
+        .device-footer > div {
+            padding-left: 0;
+            border-left: 0;
+        }
+
+        .device-footer strong {
+            font-size: 18px;
+        }
+    }
 }
 </style>
 <style lang="scss">