style: Adjust the global interval style

ssongliu · ssongliu · commit 398775f2fb14 · 2025-04-16T14:40:42.000+08:00
diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
@@ -2,7 +2,7 @@
     <div class="app-status" v-if="data.isExist">
         <el-card>
             <div class="flex w-full flex-col gap-4 md:flex-row">
-                <div class="flex flex-wrap gap-4">
+                <div class="flex flex-wrap gap-4 ml-3">
                     <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
                     <Status class="mt-0.5" :key="refresh" :status="data.status"></Status>
                     <el-tag>{{ $t('app.version') }}{{ data.version }}</el-tag>
diff --git a/frontend/src/components/layout-content/index.vue b/frontend/src/components/layout-content/index.vue
@@ -93,11 +93,11 @@ const showBack = computed(() => {
 @use '@/styles/mixins.scss' as *;
 
 .content-container__app {
-    margin-top: 20px;
+    margin-top: 7px;
 }
 
 .content-container__search {
-    margin-top: 20px;
+    margin-top: 7px;
     .el-card {
         --el-card-padding: 12px;
     }
@@ -121,7 +121,7 @@ const showBack = computed(() => {
 }
 
 .content-container__main {
-    margin-top: 20px;
+    margin-top: 7px;
 }
 
 .prompt {
diff --git a/frontend/src/layout/components/Sidebar/components/Logo.vue b/frontend/src/layout/components/Sidebar/components/Logo.vue
@@ -41,7 +41,7 @@ const goHome = () => {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 55px;
+    height: 49px;
     z-index: 1;
     img {
         object-fit: contain;
diff --git a/frontend/src/layout/components/Sidebar/index.scss b/frontend/src/layout/components/Sidebar/index.scss
@@ -7,8 +7,8 @@
     .el-menu-item {
         border-radius: 4px;
         background-color: var(--el-menu-item-bg-color);
-        margin: 6px 0;
-        height: 46px;
+        margin: 7px 0;
+        height: 42px;
         box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
         box-sizing: border-box;
 
@@ -51,7 +51,7 @@
         .el-sub-menu__title {
             background-color: var(--el-menu-item-bg-color);
             box-shadow: 0 0 4px rgba(0, 94, 235, 0.1);
-            margin: 6px 0;
+            margin-top: 7px;
             height: 46px;
             border-radius: 4px;
             &:hover {
diff --git 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="18" class="affix">
+            <el-affix :offset="17" class="affix">
                 <el-tooltip
                     :content="menuStore.isCollapse ? $t('commons.button.expand') : $t('commons.button.collapse')"
                 >
@@ -180,7 +180,7 @@ onMounted(() => {
     overflow-x: hidden;
 }
 .app-main {
-    padding: 20px;
+    padding: 7px 20px;
     flex: 1;
     overflow: auto;
 }
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
@@ -144,7 +144,7 @@ html {
     font-size: 12px;
 
     .el-card {
-        --el-card-padding: 12px;
+        --el-card-padding: 9px;
 
         .buttons {
             margin-left: 100px;
@@ -271,6 +271,10 @@ html {
     width: 200px !important;
 }
 
+.card-interval {
+    margin-top: 7px;
+}
+
 .p-w-300 {
     width: 300px !important;
 }
diff --git a/frontend/src/views/ai/gpu/index.vue b/frontend/src/views/ai/gpu/index.vue
@@ -33,7 +33,7 @@
                             {{ gpuInfo.cudaVersion }}
                         </el-descriptions-item>
                     </el-descriptions>
-                    <el-collapse v-model="activeNames" class="mt-5">
+                    <el-collapse v-model="activeNames" class="card-interval">
                         <el-collapse-item v-for="item in gpuInfo.gpu" :key="item.index" :name="item.index">
                             <template #title>
                                 <span class="name-class">{{ item.index + '. ' + item.productName }}</span>
@@ -152,7 +152,7 @@
                                     }}
                                 </el-descriptions-item>
                             </el-descriptions>
-                            <div class="mt-5">
+                            <div class="card-interval">
                                 <span class="title-class">{{ $t('aiTools.gpu.process') }}</span>
                             </div>
                             <el-table :data="item.processes" v-if="item.processes?.length !== 0">
@@ -191,7 +191,7 @@
                             {{ xpuInfo.driverVersion }}
                         </el-descriptions-item>
                     </el-descriptions>
-                    <el-collapse v-model="activeNames" class="mt-5">
+                    <el-collapse v-model="activeNames" class="card-interval">
                         <el-collapse-item
                             v-for="item in xpuInfo.xpu"
                             :key="item.basic.deviceID"
@@ -226,7 +226,7 @@
                                     {{ item.basic.pciBdfAddress }}
                                 </el-descriptions-item>
                             </el-descriptions>
-                            <div class="mt-5">
+                            <div class="card-interval">
                                 <span class="title-class">{{ $t('aiTools.gpu.process') }}</span>
                             </div>
                             <el-table :data="item.processes" v-if="item.processes?.length !== 0">
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
@@ -2,7 +2,7 @@
     <div v-loading="loading">
         <docker-status v-model:isActive="isActive" v-model:isExist="isExist" @search="search" />
 
-        <div class="mt-5" v-if="isExist && isActive">
+        <div class="card-interval" v-if="isExist && isActive">
             <el-tag @click="searchWithStatus('all')" v-if="countItem.all" effect="plain" size="large">
                 {{ $t('commons.table.all') }} * {{ countItem.all }}
             </el-tag>
diff --git a/frontend/src/views/container/dashboard/index.vue b/frontend/src/views/container/dashboard/index.vue
@@ -8,7 +8,7 @@
         />
 
         <div v-if="isExist" :class="{ mask: !isActive }">
-            <CardWithHeader :header="$t('menu.container')" class="mt-5">
+            <CardWithHeader :header="$t('menu.container')" class="card-interval">
                 <template #body>
                     <span class="count" @click="goRouter('Container')">{{ countItem.containerCount }}</span>
                 </template>
@@ -39,7 +39,7 @@
                     </el-tag>
                 </template>
             </CardWithHeader>
-            <el-row :gutter="20" class="mt-5">
+            <el-row :gutter="7" class="card-interval">
                 <el-col :span="8">
                     <CardWithHeader :header="$t('container.compose')">
                         <template #body>
@@ -69,7 +69,7 @@
                     </CardWithHeader>
                 </el-col>
             </el-row>
-            <el-row :gutter="20" class="mt-5">
+            <el-row :gutter="7" class="card-interval">
                 <el-col :span="8">
                     <CardWithHeader :header="$t('container.imageRepo')">
                         <template #body>
@@ -92,7 +92,7 @@
                     </CardWithHeader>
                 </el-col>
             </el-row>
-            <CardWithHeader :header="$t('container.setting')" class="mt-5">
+            <CardWithHeader :header="$t('container.setting')" class="card-interval">
                 <template #body>
                     <el-descriptions :column="1" border>
                         <el-descriptions-item :label="$t('container.sockPath')">
diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
@@ -8,10 +8,10 @@
             @search="search"
         />
 
-        <div v-if="isExist" class="app-status p-mt-20">
+        <div v-if="isExist" class="app-status card-interval">
             <el-card>
                 <div class="flex w-full flex-col gap-4 md:flex-row">
-                    <div class="flex flex-wrap gap-4">
+                    <div class="flex flex-wrap gap-4 ml-3">
                         <el-tag class="float-left" effect="dark" type="success">Docker</el-tag>
                         <Status class="mt-0.5" :status="isActive ? 'enable' : 'disable'" />
                         <el-tag>{{ $t('app.version') }}: {{ form.version }}</el-tag>
@@ -32,7 +32,7 @@
             </el-card>
         </div>
 
-        <LayoutContent v-if="isExist" class="p-mt-20" :title="$t('container.setting')">
+        <LayoutContent v-if="isExist" class="card-interval" :title="$t('container.setting')">
             <template #main>
                 <el-radio-group v-model="confShowType" @change="changeMode">
                     <el-radio-button value="base">{{ $t('database.baseConf') }}</el-radio-button>
diff --git a/frontend/src/views/cronjob/cronjob/record/index.vue b/frontend/src/views/cronjob/cronjob/record/index.vue
@@ -1,9 +1,9 @@
 <template>
     <div v-if="recordShow" v-loading="loading">
-        <div class="app-status p-mt-20">
+        <div class="app-status card-interval">
             <el-card>
                 <div class="flex w-full flex-col gap-4 md:flex-row">
-                    <div class="flex flex-wrap gap-4">
+                    <div class="flex flex-wrap gap-4 ml-3">
                         <el-popover
                             v-if="dialogData.rowData.name.length >= 15"
                             placement="top-start"
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
@@ -3,7 +3,7 @@
         <div class="app-status mt-5" v-if="currentDB?.from === 'remote'">
             <el-card>
                 <div class="flex w-full flex-col gap-4 md:flex-row">
-                    <div class="flex flex-wrap gap-4">
+                    <div class="flex flex-wrap gap-4 ml-3">
                         <el-tag class="float-left" effect="dark" type="success">
                             {{ currentDB?.type === 'mysql' ? 'Mysql' : 'MariaDB' }}
                         </el-tag>
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
@@ -3,7 +3,7 @@
         <div class="app-status mt-5" v-if="currentDB?.from === 'remote'">
             <el-card>
                 <div class="flex w-full flex-col gap-4 md:flex-row">
-                    <div class="flex flex-wrap gap-4">
+                    <div class="flex flex-wrap gap-4 ml-3">
                         <el-tag class="float-left" effect="dark" type="success">PostgreSQL</el-tag>
                         <el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
                     </div>
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
@@ -3,7 +3,7 @@
         <div class="app-status mt-5" v-if="currentDB && currentDB.from === 'remote'">
             <el-card>
                 <div class="flex w-full flex-col gap-4 md:flex-row">
-                    <div class="flex flex-wrap gap-4">
+                    <div class="flex flex-wrap gap-4 ml-3">
                         <el-tag class="float-left" effect="dark" type="success">Redis</el-tag>
                         <el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
                     </div>
diff --git a/frontend/src/views/home/app/index.vue b/frontend/src/views/home/app/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <CardWithHeader :header="$t('app.app')" class="mt-5" :loading="loading">
+        <CardWithHeader :header="$t('app.app')" class="card-interval" :loading="loading">
             <template #header-r>
                 <el-popover placement="left" :width="226" trigger="click">
                     <el-input size="small" v-model="filter" clearable @input="loadOption()" />
@@ -23,7 +23,7 @@
                 </el-popover>
             </template>
             <template #body>
-                <el-scrollbar height="545px" class="moz-height">
+                <el-scrollbar height="531px" class="moz-height">
                     <div class="h-app-card" v-for="(app, index) in apps" :key="index">
                         <el-row :gutter="5">
                             <el-col :span="5">
diff --git a/frontend/src/views/home/index.vue b/frontend/src/views/home/index.vue
@@ -21,7 +21,7 @@
 
         <el-alert
             v-if="!isSafety && globalStore.showEntranceWarn"
-            style="margin-top: 20px"
+            class="card-interval"
             type="warning"
             @close="hideEntrance"
         >
@@ -40,7 +40,7 @@
             </template>
         </el-alert>
 
-        <el-row :gutter="20" style="margin-top: 20px">
+        <el-row :gutter="7" class="card-interval">
             <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
                 <CardWithHeader :header="$t('menu.home')" height="166px">
                     <template #body>
@@ -82,12 +82,12 @@
                         </div>
                     </template>
                 </CardWithHeader>
-                <CardWithHeader :header="$t('commons.table.status')" style="margin-top: 20px">
+                <CardWithHeader :header="$t('commons.table.status')" class="card-interval">
                     <template #body>
                         <Status ref="statusRef" style="margin-bottom: 33px" />
                     </template>
                 </CardWithHeader>
-                <CardWithHeader :header="$t('menu.monitor')" style="margin-top: 20px; margin-bottom: 20px">
+                <CardWithHeader :header="$t('menu.monitor')" class="card-interval">
                     <template #header-r>
                         <el-radio-group
                             style="float: right; margin-left: 5px"
@@ -253,7 +253,7 @@
                     </template>
                 </CardWithHeader>
 
-                <AppLauncher ref="appRef" style="margin-top: 20px" />
+                <AppLauncher ref="appRef" class="card-interval" />
             </el-col>
         </el-row>
 
diff --git a/frontend/src/views/host/firewall/status/index.vue b/frontend/src/views/host/firewall/status/index.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="app-status" style="margin-top: 20px" v-if="baseInfo.isExist">
+    <div class="app-status card-interval" v-if="baseInfo.isExist">
         <el-card>
             <div class="flex w-full flex-col gap-4 md:flex-row">
-                <div class="flex flex-wrap gap-4">
+                <div class="flex flex-wrap gap-4 ml-3">
                     <el-tag effect="dark" type="success">{{ baseInfo.name }}</el-tag>
                     <Status class="mt-0.5" :status="baseInfo.isActive ? 'enable' : 'disable'" />
                     <el-tag>{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>
diff --git a/frontend/src/views/host/monitor/monitor/index.vue b/frontend/src/views/host/monitor/monitor/index.vue
@@ -19,7 +19,7 @@
                 </div>
             </el-card>
         </div>
-        <el-row :gutter="20" style="margin-top: 20px">
+        <el-row :gutter="7" class="card-interval">
             <el-col :span="24">
                 <el-card style="overflow: inherit">
                     <template #header>
@@ -51,7 +51,7 @@
                 </el-card>
             </el-col>
         </el-row>
-        <el-row :gutter="20" style="margin-top: 20px">
+        <el-row :gutter="7" class="card-interval">
             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                 <el-card style="overflow: inherit">
                     <template #header>
@@ -113,7 +113,7 @@
                 </el-card>
             </el-col>
         </el-row>
-        <el-row :gutter="20" style="margin-top: 20px">
+        <el-row :gutter="7" class="card-interval">
             <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                 <el-card style="overflow: inherit">
                     <template #header>
@@ -570,7 +570,7 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .content-container__search {
-    margin-top: 20px;
+    margin-top: 7px;
     .el-card {
         --el-card-padding: 12px;
     }
diff --git a/frontend/src/views/host/ssh/ssh/index.vue b/frontend/src/views/host/ssh/ssh/index.vue
@@ -2,10 +2,10 @@
     <div v-loading="loading">
         <FireRouter />
 
-        <div class="app-status mt-5">
+        <div class="app-status card-interval">
             <el-card>
                 <div class="flex w-full flex-col gap-4 md:flex-row">
-                    <div class="flex flex-wrap gap-4">
+                    <div class="flex flex-wrap gap-4 ml-3">
                         <el-tag class="float-left" effect="dark" type="success">SSH</el-tag>
                         <Status class="mt-0.5" :status="form.isActive ? 'enable' : 'disable'" :msg="form.message" />
                     </div>
diff --git a/frontend/src/views/terminal/terminal/index.vue b/frontend/src/views/terminal/terminal/index.vue
@@ -2,8 +2,8 @@
     <div>
         <el-tabs
             type="card"
-            class="terminal-tabs"
-            style="background-color: var(--panel-terminal-tag-bg-color); margin-top: 20px"
+            class="terminal-tabs card-interval"
+            style="background-color: var(--panel-terminal-tag-bg-color)"
             v-model="terminalValue"
             :before-leave="beforeLeave"
             @tab-change="quickCmd = ''"
@@ -246,13 +246,13 @@ const cleanTimer = () => {
 };
 
 const loadHeight = () => {
-    return globalStore.openMenuTabs ? '269px' : '229px';
+    return globalStore.openMenuTabs ? '230px' : '190px';
 };
 const loadEmptyHeight = () => {
-    return globalStore.openMenuTabs ? '240px' : '200px';
+    return globalStore.openMenuTabs ? '201px' : '156px';
 };
 const loadFullScreenHeight = () => {
-    return globalStore.openMenuTabs ? '66px' : '90px';
+    return globalStore.openMenuTabs ? '105px' : '60px';
 };
 
 const handleTabsRemove = (targetName: string, action: 'remove' | 'add') => {
diff --git a/frontend/src/views/toolbox/clam/status/index.vue b/frontend/src/views/toolbox/clam/status/index.vue
diff --git a/frontend/src/views/toolbox/fail2ban/index.vue b/frontend/src/views/toolbox/fail2ban/index.vue
diff --git a/frontend/src/views/toolbox/ftp/index.vue b/frontend/src/views/toolbox/ftp/index.vue
diff --git a/frontend/src/views/toolbox/supervisor/status/index.vue b/frontend/src/views/toolbox/supervisor/status/index.vue

Original file line number	Diff line number	Diff line change
`@@ -93,11 +93,11 @@ const showBack = computed(() => {`
`93`	`93`	`@use '@/styles/mixins.scss' as *;`
`94`	`94`
`95`	`95`	`.content-container__app {`
`96`		`- margin-top: 20px;`
	`96`	`+ margin-top: 7px;`
`97`	`97`	`}`
`98`	`98`
`99`	`99`	`.content-container__search {`
`100`		`- margin-top: 20px;`
	`100`	`+ margin-top: 7px;`
`101`	`101`	`.el-card {`
`102`	`102`	`--el-card-padding: 12px;`
`103`	`103`	`}`
`@@ -121,7 +121,7 @@ const showBack = computed(() => {`
`121`	`121`	`}`
`122`	`122`
`123`	`123`	`.content-container__main {`
`124`		`- margin-top: 20px;`
	`124`	`+ margin-top: 7px;`
`125`	`125`	`}`
`126`	`126`
`127`	`127`	`.prompt {`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`	`<div :class="classObj" class="app-wrapper" v-loading="loading" :element-loading-text="loadingText" fullscreen>`
`3`	`3`	`<div v-if="classObj.mobile && classObj.openSidebar" class="drawer-bg" @click="handleClickOutside" />`
`4`	`4`	`<div class="app-sidebar" v-if="!globalStore.isFullScreen">`
`5`		`- <el-affix :offset="18" class="affix">`
	`5`	`+ <el-affix :offset="17" class="affix">`
`6`	`6`	`<el-tooltip`
`7`	`7`	`:content="menuStore.isCollapse ? $t('commons.button.expand') : $t('commons.button.collapse')"`
`8`	`8`	`>`
`@@ -180,7 +180,7 @@ onMounted(() => {`
`180`	`180`	`overflow-x: hidden;`
`181`	`181`	`}`
`182`	`182`	`.app-main {`
`183`		`- padding: 20px;`
	`183`	`+ padding: 7px 20px;`
`184`	`184`	`flex: 1;`
`185`	`185`	`overflow: auto;`
`186`	`186`	`}`