From 16e2ad64a290ccf6642dbd05c1ca2894ca0947d6 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Thu, 16 Oct 2025 18:54:46 +0800
Subject: [PATCH] style: Fix the issue of incomplete watermark display (#10668)

---
 frontend/src/layout/index.vue            |  56 +++++-------
 frontend/src/views/home/index.vue        |   8 +-
 frontend/src/views/home/status/index.vue | 107 ++++++++++++++++-------
 3 files changed, 101 insertions(+), 70 deletions(-)

diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 53c1fcb74..3b5850c1a 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -23,28 +23,31 @@
             <Sidebar @menu-click="handleMenuClick" :menu-router="!classObj.openMenuTabs" @open-task="openTask" />
         </div>
 
-        <div class="main-container">
+        <el-watermark
+            v-if="globalStore.isMasterProductPro && globalStore.watermark"
+            :content="loadContent()"
+            :font="{
+                fontSize: globalStore.watermark.fontSize,
+                color: globalStore.watermark.color,
+                textBaseline: 'top',
+            }"
+            :rotate="globalStore.watermark.rotate"
+            :gap="[globalStore.watermark.gap, globalStore.watermark.gap]"
+        >
+            <div class="main-container">
+                <mobile-header v-if="classObj.mobile" />
+                <Tabs v-if="classObj.openMenuTabs" />
+                <app-main :keep-alive="classObj.openMenuTabs ? tabsStore.cachedTabs : null" class="app-main" />
+                <Footer class="app-footer" v-if="!globalStore.isFullScreen" />
+            </div>
+        </el-watermark>
+        <div class="main-container" v-else>
             <mobile-header v-if="classObj.mobile" />
             <Tabs v-if="classObj.openMenuTabs" />
-            <el-watermark
-                v-if="globalStore.isMasterProductPro && globalStore.watermark"
-                :content="loadContent()"
-                :font="{
-                    fontSize: globalStore.watermark.fontSize,
-                    color: globalStore.watermark.color,
-                    textBaseline: 'top',
-                }"
-                :rotate="globalStore.watermark.rotate"
-                :gap="[globalStore.watermark.gap, globalStore.watermark.gap]"
-            >
-                <div class="app-main">
-                    <app-main :keep-alive="classObj.openMenuTabs ? tabsStore.cachedTabs : null" />
-                </div>
-            </el-watermark>
-            <app-main class="app-main" v-else :keep-alive="classObj.openMenuTabs ? tabsStore.cachedTabs : null" />
-            <Footer :class="[!classObj.mobile ? 'app-footer' : '']" v-if="!globalStore.isFullScreen" />
-            <TaskList ref="taskListRef" />
+            <app-main :keep-alive="classObj.openMenuTabs ? tabsStore.cachedTabs : null" class="app-main" />
+            <Footer class="app-footer" v-if="!globalStore.isFullScreen" />
         </div>
+        <TaskList ref="taskListRef" />
     </div>
 </template>
 
@@ -213,7 +216,6 @@ onMounted(() => {
     padding: 7px 20px;
     flex: 1;
     overflow: auto;
-    margin-bottom: 50px;
 }
 .app-sidebar {
     z-index: 2;
@@ -229,15 +231,7 @@ onMounted(() => {
         z-index: 5;
     }
 }
-.app-footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    margin-left: 180px;
-    width: calc(100% - 180px);
-    text-align: center;
-    z-index: 1000;
-}
+
 .hideSidebar {
     .main-container {
         margin-left: var(--panel-menu-hide-width);
@@ -248,10 +242,6 @@ onMounted(() => {
     .fixed-header {
         width: calc(100% - var(--panel-menu-hide-width));
     }
-    .app-footer {
-        margin-left: 75px;
-        width: calc(100% - 75px);
-    }
 }
 
 .fullScreen {
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
index 6cda4368b..64d55e8ea 100644
--- a/frontend/src/views/home/index.vue
+++ b/frontend/src/views/home/index.vue
@@ -166,7 +166,7 @@
                 <el-carousel
                     class="my-carousel"
                     :key="simpleNodes.length"
-                    height="346px"
+                    height="368px"
                     :indicator-position="showSimpleNode() ? '' : 'none'"
                     arrow="never"
                 >
@@ -177,7 +177,7 @@
                             </template>
                             <template #body>
                                 <el-scrollbar>
-                                    <el-descriptions :column="1" class="ml-5 -mt-2" border>
+                                    <el-descriptions :column="1" class="ml-5 -mt-2 h-systemInfo" border>
                                         <el-descriptions-item
                                             class-name="system-content"
                                             label-class-name="system-label"
@@ -263,7 +263,7 @@
                     <el-carousel-item key="simpleNode" v-if="showSimpleNode()">
                         <CardWithHeader :header="$t('setting.panel')">
                             <template #body>
-                                <el-scrollbar height="266px">
+                                <el-scrollbar height="286px">
                                     <div class="simple-node cursor-pointer" v-for="row in simpleNodes" :key="row.id">
                                         <el-row :gutter="5">
                                             <el-col :span="21">
@@ -746,7 +746,7 @@ onBeforeUnmount(() => {
 
 .h-systemInfo {
     margin-left: 18px;
-    height: 286px;
+    height: 306px;
 }
 @-moz-document url-prefix() {
     .h-systemInfo {
diff --git a/frontend/src/views/home/status/index.vue b/frontend/src/views/home/status/index.vue
index faea5ddb8..53f530bf4 100644
--- a/frontend/src/views/home/status/index.vue
+++ b/frontend/src/views/home/status/index.vue
@@ -75,34 +75,79 @@
             </span>
         </el-col>
         <el-col :xs="12" :sm="12" :md="6" :lg="6" :xl="6" align="center">
-            <el-popover placement="bottom" :width="160" trigger="hover" v-if="chartsOption['memory']">
-                <el-tag style="font-weight: 500">{{ $t('home.mem') }}:</el-tag>
-                <el-tag class="tagClass">{{ $t('home.total') }}: {{ computeSize(currentInfo.memoryTotal) }}</el-tag>
-                <el-tag class="tagClass">{{ $t('home.used') }}: {{ computeSize(currentInfo.memoryUsed) }}</el-tag>
-                <el-tag class="tagClass">{{ $t('home.free') }}: {{ computeSize(currentInfo.memoryFree) }}</el-tag>
-                <el-tag class="tagClass">{{ $t('home.shard') }}: {{ computeSize(currentInfo.memoryShard) }}</el-tag>
-                <el-tag class="tagClass">{{ $t('home.cache') }}: {{ computeSize(currentInfo.memoryCache) }}</el-tag>
-                <el-tag class="tagClass">
-                    {{ $t('home.available') }}: {{ computeSize(currentInfo.memoryAvailable) }}
-                </el-tag>
-                <el-tag class="tagClass">
-                    {{ $t('home.percent') }}: {{ formatNumber(currentInfo.memoryUsedPercent) }}%
-                </el-tag>
-                <div v-if="currentInfo.swapMemoryTotal" class="mt-2">
-                    <el-tag style="font-weight: 500">{{ $t('home.swapMem') }}:</el-tag>
-                    <el-tag class="tagClass">
-                        {{ $t('home.total') }}: {{ computeSize(currentInfo.swapMemoryTotal) }}
-                    </el-tag>
-                    <el-tag class="tagClass">
-                        {{ $t('home.used') }}: {{ computeSize(currentInfo.swapMemoryUsed) }}
-                    </el-tag>
-                    <el-tag class="tagClass">
-                        {{ $t('home.free') }}: {{ computeSize(currentInfo.swapMemoryAvailable) }}
-                    </el-tag>
-                    <el-tag class="tagClass">
-                        {{ $t('home.percent') }}: {{ formatNumber(currentInfo.swapMemoryUsedPercent) }}%
-                    </el-tag>
-                </div>
+            <el-popover
+                placement="bottom"
+                :width="currentInfo.swapMemoryTotal ? 360 : 160"
+                trigger="hover"
+                v-if="chartsOption['memory']"
+            >
+                <el-row :gutter="5">
+                    <el-col :span="12">
+                        <el-row>
+                            <el-tag style="font-weight: 500">{{ $t('home.mem') }}:</el-tag>
+                        </el-row>
+                        <el-row>
+                            <el-tag class="tagClass">
+                                {{ $t('home.total') }}: {{ computeSize(currentInfo.memoryTotal) }}
+                            </el-tag>
+                        </el-row>
+                        <el-row>
+                            <el-tag class="tagClass">
+                                {{ $t('home.used') }}: {{ computeSize(currentInfo.memoryUsed) }}
+                            </el-tag>
+                        </el-row>
+                        <el-row>
+                            <el-tag class="tagClass">
+                                {{ $t('home.free') }}: {{ computeSize(currentInfo.memoryFree) }}
+                            </el-tag>
+                        </el-row>
+                        <el-row>
+                            <el-tag class="tagClass">
+                                {{ $t('home.shard') }}: {{ computeSize(currentInfo.memoryShard) }}
+                            </el-tag>
+                        </el-row>
+                        <el-row>
+                            <el-tag class="tagClass">
+                                {{ $t('home.cache') }}: {{ computeSize(currentInfo.memoryCache) }}
+                            </el-tag>
+                        </el-row>
+                        <el-row>
+                            <el-tag class="tagClass">
+                                {{ $t('home.available') }}: {{ computeSize(currentInfo.memoryAvailable) }}
+                            </el-tag>
+                        </el-row>
+                        <el-row>
+                            <el-tag class="tagClass">
+                                {{ $t('home.percent') }}: {{ formatNumber(currentInfo.memoryUsedPercent) }}%
+                            </el-tag>
+                        </el-row>
+                    </el-col>
+                    <el-col :span="12" v-if="currentInfo.swapMemoryTotal" class="mt-20">
+                        <el-row>
+                            <el-tag style="font-weight: 500">{{ $t('home.swapMem') }}:</el-tag>
+                        </el-row>
+                        <el-row>
+                            <el-tag class="tagClass">
+                                {{ $t('home.total') }}: {{ computeSize(currentInfo.swapMemoryTotal) }}
+                            </el-tag>
+                        </el-row>
+                        <el-row>
+                            <el-tag class="tagClass">
+                                {{ $t('home.used') }}: {{ computeSize(currentInfo.swapMemoryUsed) }}
+                            </el-tag>
+                        </el-row>
+                        <el-row>
+                            <el-tag class="tagClass">
+                                {{ $t('home.free') }}: {{ computeSize(currentInfo.swapMemoryAvailable) }}
+                            </el-tag>
+                        </el-row>
+                        <el-row>
+                            <el-tag class="tagClass">
+                                {{ $t('home.percent') }}: {{ formatNumber(currentInfo.swapMemoryUsedPercent) }}%
+                            </el-tag>
+                        </el-row>
+                    </el-col>
+                </el-row>
                 <template #reference>
                     <v-charts
                         height="160px"
@@ -274,11 +319,6 @@ const showMore = ref(false);
 const totalCount = ref();
 
 const baseInfo = ref<Dashboard.BaseInfo>({
-    websiteNumber: 0,
-    databaseNumber: 0,
-    cronjobNumber: 0,
-    appInstalledNumber: 0,
-
     hostname: '',
     os: '',
     platform: '',
@@ -294,6 +334,7 @@ const baseInfo = ref<Dashboard.BaseInfo>({
     cpuLogicalCores: 0,
     cpuModelName: '',
     currentInfo: null,
+    quickJump: [],
 });
 const currentInfo = ref<Dashboard.CurrentInfo>({
     uptime: 0,