From af2b53412d2627288b2b8d65b239cc1a4fd8a89e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Wed, 7 May 2025 17:41:39 +0800
Subject: [PATCH] style: Optimize page style (#8562)

---
 .../src/components/layout-content/index.vue   |  2 +-
 frontend/src/layout/components/Tabs/index.vue |  3 +++
 frontend/src/layout/index.vue                 |  2 +-
 frontend/src/styles/common.scss               |  2 +-
 .../src/views/host/file-management/index.vue  | 22 ++++++++++---------
 frontend/src/views/website/website/index.vue  |  8 ++++---
 6 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/layout-content/index.vue b/frontend/src/components/layout-content/index.vue
index ba38b78ba..1bbc21cad 100644
--- a/frontend/src/components/layout-content/index.vue
+++ b/frontend/src/components/layout-content/index.vue
@@ -127,7 +127,7 @@ const showBack = computed(() => {
 }
 
 .content-container__main {
-    margin-top: 7px;
+    margin-top: 10px;
 }
 
 .prompt {
diff --git a/frontend/src/layout/components/Tabs/index.vue b/frontend/src/layout/components/Tabs/index.vue
index 18ddc5578..7a6a03476 100644
--- a/frontend/src/layout/components/Tabs/index.vue
+++ b/frontend/src/layout/components/Tabs/index.vue
@@ -80,4 +80,7 @@ const dropdownVisibleChange = (visible, tabPath) => {
 :deep(.el-tabs__header) {
     margin: 0;
 }
+.common-tabs {
+    margin-bottom: 7px;
+}
 </style>
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index d2ed7d345..e75655a11 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -2,7 +2,7 @@
     <div :class="classObj" class="app-wrapper" v-loading="loading" :element-loading-text="loadingText" fullscreen>
         <div v-if="classObj.mobile && classObj.openSidebar" class="drawer-bg" @click="handleClickOutside" />
         <div class="app-sidebar" v-if="!globalStore.isFullScreen">
-            <el-affix :offset="17" class="affix">
+            <el-affix :offset="15" class="affix">
                 <el-tooltip
                     :content="menuStore.isCollapse ? $t('commons.button.expand') : $t('commons.button.collapse')"
                 >
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 33dc9cd3d..3d1495c6c 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -272,7 +272,7 @@ html {
 }
 
 .card-interval {
-    margin-top: 7px;
+    margin-top: 7px !important;
 }
 
 .p-w-300 {
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 8108ae9e2..0be99e5cc 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -354,6 +354,8 @@
                     :data="data"
                     @search="search"
                     @sort-change="changeSort"
+                    @cell-mouse-enter="showFavorite"
+                    @cell-mouse-leave="hideFavorite"
                     :heightDiff="300"
                 >
                     <el-table-column type="selection" width="30" />
@@ -366,7 +368,7 @@
                         prop="name"
                     >
                         <template #default="{ row, $index }">
-                            <div class="file-row" @mouseenter="showFavorite($index)" @mouseleave="hideFavorite">
+                            <div class="file-row">
                                 <div>
                                     <svg-icon
                                         v-if="row.isDir"
@@ -487,20 +489,20 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, reactive, ref, computed } from '@vue/runtime-core';
+import { computed, nextTick, onMounted, reactive, ref } from '@vue/runtime-core';
 import {
-    getFilesList,
-    getFileContent,
-    computeDirSize,
     addFavorite,
+    computeDirSize,
+    fileWgetKeys,
+    getFileContent,
+    getFilesList,
     removeFavorite,
     searchFavorite,
-    fileWgetKeys,
     searchHostMount,
 } from '@/api/modules/files';
-import { computeSize, copyText, dateFormat, getFileType, getIcon, getRandomStr, downloadFile } from '@/utils/util';
+import { computeSize, copyText, dateFormat, downloadFile, getFileType, getIcon, getRandomStr } from '@/utils/util';
 import { File } from '@/api/interface/file';
-import { Mimetypes, Languages } from '@/global/mimetype';
+import { Languages, Mimetypes } from '@/global/mimetype';
 import { useRouter } from 'vue-router';
 import { MsgWarning } from '@/utils/message';
 import { useSearchable } from './hooks/searchable';
@@ -1102,8 +1104,8 @@ const changeSort = ({ prop, order }) => {
     search();
 };
 
-const showFavorite = (index: any) => {
-    hoveredRowIndex.value = index;
+const showFavorite = (row: any) => {
+    hoveredRowIndex.value = data.value.findIndex((item) => item === row);
 };
 
 const hideFavorite = () => {
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index 32b5d856c..d5e90c635 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -79,6 +79,8 @@
                     :class="{ mask: nginxStatus != 'Running' }"
                     :heightDiff="310"
                     :columns="columns"
+                    @cell-mouse-enter="showFavorite"
+                    @cell-mouse-leave="hideFavorite"
                     localKey="websiteColumn"
                 >
                     <el-table-column
@@ -91,7 +93,7 @@
                         show-overflow-tooltip
                     >
                         <template #default="{ row, $index }">
-                            <div class="name-row" @mouseenter="showFavorite($index)" @mouseleave="hideFavorite">
+                            <div class="name-row">
                                 <div>
                                     <el-text type="primary" class="cursor-pointer" @click="openConfig(row.id)">
                                         {{ row.primaryDomain }}
@@ -376,8 +378,8 @@ const goRouter = async (key: string) => {
     router.push({ name: 'AppAll', query: { install: key } });
 };
 
-const showFavorite = (index: any) => {
-    hoveredRowIndex.value = index;
+const showFavorite = (row: any) => {
+    hoveredRowIndex.value = data.value.findIndex((item) => item === row);
 };
 
 const hideFavorite = () => {