From 2219b3f47b7273adcc3cd7f074dd09fc751bc59b Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <79562285+wangdan-fit2cloud@users.noreply.github.com>
Date: Tue, 10 Sep 2024 00:18:10 -0700
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8F=E6=A0=B7=E5=BC=8F=20(#6431)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What this PR does / why we need it?

#### Summary of your change

#### Please indicate you've done the following:

- [ ] Made sure tests are passing and test coverage is added if needed.
- [ ] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/).
- [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.
---
 .../src/components/layout-content/index.vue   |  3 ++
 frontend/src/styles/common.scss               |  1 -
 frontend/src/views/app-store/index.scss       |  1 -
 .../src/views/container/container/index.vue   | 15 +++---
 frontend/src/views/container/image/index.vue  |  6 +--
 .../src/views/container/network/index.vue     |  6 +--
 .../src/views/container/template/index.vue    |  6 +--
 frontend/src/views/container/volume/index.vue |  6 +--
 frontend/src/views/cronjob/index.vue          | 12 ++---
 frontend/src/views/database/mysql/index.vue   |  4 +-
 .../src/views/database/mysql/remote/index.vue | 15 ++----
 .../src/views/database/postgresql/index.vue   | 12 ++---
 .../database/postgresql/remote/index.vue      | 15 ++----
 .../src/views/host/firewall/forward/index.vue | 12 ++---
 frontend/src/views/host/firewall/ip/index.vue | 12 ++---
 .../src/views/host/firewall/port/index.vue    | 12 ++---
 .../src/views/host/process/network/index.vue  | 53 ++++++++-----------
 .../src/views/host/process/process/index.vue  | 53 ++++++++-----------
 frontend/src/views/host/ssh/log/log.vue       | 10 ++--
 frontend/src/views/host/ssh/session/index.vue | 13 ++---
 frontend/src/views/log/operation/index.vue    | 12 ++---
 frontend/src/views/log/website/index.vue      | 36 ++++++-------
 frontend/src/views/setting/snapshot/index.vue | 12 ++---
 .../src/views/website/runtime/go/index.vue    | 14 ++---
 .../src/views/website/runtime/java/index.vue  | 14 ++---
 .../src/views/website/runtime/node/index.vue  | 14 ++---
 .../src/views/website/runtime/php/index.vue   | 20 +++----
 frontend/src/views/website/ssl/index.vue      |  2 +-
 frontend/src/views/website/website/index.vue  | 16 +++---
 29 files changed, 190 insertions(+), 217 deletions(-)

diff --git a/frontend/src/components/layout-content/index.vue b/frontend/src/components/layout-content/index.vue
index d6b3b52df..bd2b3ef4a 100644
--- a/frontend/src/components/layout-content/index.vue
+++ b/frontend/src/components/layout-content/index.vue
@@ -105,6 +105,9 @@ const showBack = computed(() => {
 
 .content-container__toolbar {
     margin-top: 20px;
+    .el-button + .el-button {
+        margin: 0 !important;
+    }
 }
 
 .content-container_form {
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 2901b40cb..146e77c81 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -375,7 +375,6 @@ html {
 }
 
 .tag-button {
-    margin-right: 10px;
     &.no-active {
         background: none;
         border: none;
diff --git a/frontend/src/views/app-store/index.scss b/frontend/src/views/app-store/index.scss
index ab8d82fcc..af3880519 100644
--- a/frontend/src/views/app-store/index.scss
+++ b/frontend/src/views/app-store/index.scss
@@ -85,7 +85,6 @@
 }
 
 .tag-button {
-    margin-right: 10px;
     &.no-active {
         background: none;
         border: none;
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index c8c55a6d0..c247fc8e2 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -24,14 +24,13 @@
             <template #toolbar>
                 <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
                     <div class="flex flex-wrap gap-4">
-                        <div>
-                            <el-button type="primary" @click="onOpenDialog('create')">
-                                {{ $t('container.create') }}
-                            </el-button>
-                            <el-button type="primary" plain @click="onClean()">
-                                {{ $t('container.containerPrune') }}
-                            </el-button>
-                        </div>
+                        <el-button type="primary" @click="onOpenDialog('create')">
+                            {{ $t('container.create') }}
+                        </el-button>
+                        <el-button type="primary" plain @click="onClean()">
+                            {{ $t('container.containerPrune') }}
+                        </el-button>
+
                         <el-button-group>
                             <el-button :disabled="checkStatus('start', null)" @click="onOperate('start', null)">
                                 {{ $t('container.start') }}
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index b758e3888..9c97ae2c2 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@@ -8,8 +8,8 @@
 
         <LayoutContent :title="$t('container.image')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
-                <div class="flex flex-col gap-4 justify-between items-center flex-wrap sm:flex-row">
-                    <div class="flex gap-4 flex-wrap">
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
                         <el-button type="primary" plain @click="onOpenPull">
                             {{ $t('container.imagePull') }}
                         </el-button>
@@ -26,7 +26,7 @@
                             {{ $t('container.imagePrune') }}
                         </el-button>
                     </div>
-                    <div class="flex ml-2 gap-2">
+                    <div class="flex flex-wrap gap-3">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
                     </div>
diff --git a/frontend/src/views/container/network/index.vue b/frontend/src/views/container/network/index.vue
index fe68bea36..4ed609b7f 100644
--- a/frontend/src/views/container/network/index.vue
+++ b/frontend/src/views/container/network/index.vue
@@ -8,8 +8,8 @@
 
         <LayoutContent :title="$t('container.network')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
-                <div class="flex flex-col gap-4 justify-between sm:flex-row">
-                    <div class="flex gap-4">
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
                         <el-button type="primary" @click="onCreate()">
                             {{ $t('container.createNetwork') }}
                         </el-button>
@@ -20,7 +20,7 @@
                             {{ $t('commons.button.delete') }}
                         </el-button>
                     </div>
-                    <div class="flex flex-row gap-2">
+                    <div class="flex flex-wrap gap-3">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
                     </div>
diff --git a/frontend/src/views/container/template/index.vue b/frontend/src/views/container/template/index.vue
index ad1314acb..ea320e7aa 100644
--- a/frontend/src/views/container/template/index.vue
+++ b/frontend/src/views/container/template/index.vue
@@ -8,8 +8,8 @@
 
         <LayoutContent :title="$t('container.composeTemplate')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
-                <div class="flex flex-col gap-2 sm:flex-row sm:justify-between">
-                    <div class="flex gap-4">
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
                         <el-button type="primary" @click="onOpenDialog('create')">
                             {{ $t('container.createComposeTemplate') }}
                         </el-button>
@@ -17,7 +17,7 @@
                             {{ $t('commons.button.delete') }}
                         </el-button>
                     </div>
-                    <div class="flex gap-4 sm:gap-2">
+                    <div class="flex flex-wrap gap-3">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
                     </div>
diff --git a/frontend/src/views/container/volume/index.vue b/frontend/src/views/container/volume/index.vue
index 267267455..5244b1191 100644
--- a/frontend/src/views/container/volume/index.vue
+++ b/frontend/src/views/container/volume/index.vue
@@ -8,8 +8,8 @@
 
         <LayoutContent :title="$t('container.volume')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
-                <div class="flex flex-col gap-4 sm:flex-row justify-between">
-                    <div class="flex flex-wrap gap-4">
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
                         <el-button type="primary" @click="onCreate()">
                             {{ $t('container.createVolume') }}
                         </el-button>
@@ -20,7 +20,7 @@
                             {{ $t('commons.button.delete') }}
                         </el-button>
                     </div>
-                    <div class="flex flex-row flex-wrap gap-2">
+                    <div class="flex flex-wrap gap-3">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
                     </div>
diff --git a/frontend/src/views/cronjob/index.vue b/frontend/src/views/cronjob/index.vue
index c16eb1b55..8c7dc1745 100644
--- a/frontend/src/views/cronjob/index.vue
+++ b/frontend/src/views/cronjob/index.vue
@@ -10,8 +10,8 @@
         />
         <LayoutContent v-loading="loading" v-if="!isRecordShow" :title="$t('cronjob.cronTask')">
             <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
                         <el-button type="primary" @click="onOpenDialog('create')">
                             {{ $t('commons.button.create') }}{{ $t('cronjob.cronTask') }}
                         </el-button>
@@ -26,12 +26,12 @@
                                 {{ $t('commons.button.delete') }}
                             </el-button>
                         </el-button-group>
-                    </el-col>
-                    <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
+                    </div>
+                    <div class="flex flex-wrap gap-3">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index c80296cc6..1fe782ad2 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -61,8 +61,8 @@
             </template>
 
             <template #toolbar>
-                <div class="flex flex-wrap gap-4 sm:justify-between">
-                    <div class="flex gap-2 flex-wrap items-center justify-start [&>*]:ml-3">
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row"> 
+                    <div class="flex flex-wrap gap-3">
                         <el-button
                             v-if="currentDB && (currentDB.from !== 'local' || mysqlStatus === 'Running')"
                             type="primary"
diff --git a/frontend/src/views/database/mysql/remote/index.vue b/frontend/src/views/database/mysql/remote/index.vue
index efc275000..27926688a 100644
--- a/frontend/src/views/database/mysql/remote/index.vue
+++ b/frontend/src/views/database/mysql/remote/index.vue
@@ -5,16 +5,11 @@
                 <back-button name="MySQL" :header="$t('database.remoteDB')" />
             </template>
             <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
-                        <el-button type="primary" @click="onOpenDialog('create')">
-                            {{ $t('database.createRemoteDB') }}
-                        </el-button>
-                    </el-col>
-                    <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
-                        <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                <el-button type="primary" @click="onOpenDialog('create')">
+                    {{ $t('database.createRemoteDB') }}
+                </el-button>
+
+                <TableSearch @search="search()" v-model:searchName="searchName" />
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index c73dc6ff5..c9158e241 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -53,8 +53,8 @@
             </template>
 
             <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
                         <el-button
                             v-if="currentDB && (currentDB.from !== 'local' || postgresqlStatus === 'Running')"
                             type="primary"
@@ -77,11 +77,9 @@
                             {{ $t('database.remoteDB') }}
                         </el-button>
                         <el-button @click="goDashboard()" type="primary" plain>PGAdmin4</el-button>
-                    </el-col>
-                    <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
-                        <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                    <div><TableSearch @search="search()" v-model:searchName="searchName" /></div>
+                </div>
             </template>
             <template #main v-if="currentDB">
                 <ComplexTable
diff --git a/frontend/src/views/database/postgresql/remote/index.vue b/frontend/src/views/database/postgresql/remote/index.vue
index 85f105901..493c82787 100644
--- a/frontend/src/views/database/postgresql/remote/index.vue
+++ b/frontend/src/views/database/postgresql/remote/index.vue
@@ -5,16 +5,11 @@
                 <back-button name="PostgreSQL" :header="$t('database.remoteDB')" />
             </template>
             <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
-                        <el-button type="primary" @click="onOpenDialog('create')">
-                            {{ $t('database.createRemoteDB') }}
-                        </el-button>
-                    </el-col>
-                    <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
-                        <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                <el-button type="primary" @click="onOpenDialog('create')">
+                    {{ $t('database.createRemoteDB') }}
+                </el-button>
+
+                <TableSearch @search="search()" v-model:searchName="searchName" />
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" @sort-change="search" @search="search" :data="data">
diff --git a/frontend/src/views/host/firewall/forward/index.vue b/frontend/src/views/host/firewall/forward/index.vue
index 9bde10fba..ac99c64fd 100644
--- a/frontend/src/views/host/firewall/forward/index.vue
+++ b/frontend/src/views/host/firewall/forward/index.vue
@@ -19,20 +19,20 @@
 
                 <LayoutContent :title="$t('firewall.forwardRule')" :class="{ mask: fireStatus != 'running' }">
                     <template #toolbar>
-                        <el-row>
-                            <el-col :span="16">
+                        <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                            <div class="flex flex-wrap gap-3">
                                 <el-button type="primary" @click="onOpenDialog('create')">
                                     {{ $t('commons.button.create') }}{{ $t('firewall.forwardRule') }}
                                 </el-button>
                                 <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
                                     {{ $t('commons.button.delete') }}
                                 </el-button>
-                            </el-col>
-                            <el-col :span="8">
+                            </div>
+                            <div class="flex flex-wrap gap-3">
                                 <TableSetting @search="search()" />
                                 <TableSearch @search="search()" v-model:searchName="searchName" />
-                            </el-col>
-                        </el-row>
+                            </div>
+                        </div>
                     </template>
                     <template #main>
                         <ComplexTable
diff --git a/frontend/src/views/host/firewall/ip/index.vue b/frontend/src/views/host/firewall/ip/index.vue
index 5008c6923..e3840f1a4 100644
--- a/frontend/src/views/host/firewall/ip/index.vue
+++ b/frontend/src/views/host/firewall/ip/index.vue
@@ -20,20 +20,20 @@
 
                 <LayoutContent :title="$t('firewall.ipRule')" :class="{ mask: fireStatus != 'running' }">
                     <template #toolbar>
-                        <el-row>
-                            <el-col :span="16">
+                        <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                            <div class="flex flex-wrap gap-3">
                                 <el-button type="primary" @click="onOpenDialog('create')">
                                     {{ $t('commons.button.create') }} {{ $t('firewall.ipRule') }}
                                 </el-button>
                                 <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
                                     {{ $t('commons.button.delete') }}
                                 </el-button>
-                            </el-col>
-                            <el-col :span="8">
+                            </div>
+                            <div class="flex flex-wrap gap-3">
                                 <TableSetting @search="search()" />
                                 <TableSearch @search="search()" v-model:searchName="searchName" />
-                            </el-col>
-                        </el-row>
+                            </div>
+                        </div>
                     </template>
                     <template #search>
                         <div class="flx-align-center">
diff --git a/frontend/src/views/host/firewall/port/index.vue b/frontend/src/views/host/firewall/port/index.vue
index c60a81ace..869383a19 100644
--- a/frontend/src/views/host/firewall/port/index.vue
+++ b/frontend/src/views/host/firewall/port/index.vue
@@ -52,20 +52,20 @@
                         </div>
                     </template>
                     <template #toolbar>
-                        <el-row>
-                            <el-col :span="16">
+                        <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                            <div class="flex flex-wrap gap-3">
                                 <el-button type="primary" @click="onOpenDialog('create')">
                                     {{ $t('commons.button.create') }}{{ $t('firewall.portRule') }}
                                 </el-button>
                                 <el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
                                     {{ $t('commons.button.delete') }}
                                 </el-button>
-                            </el-col>
-                            <el-col :span="8">
+                            </div>
+                            <div class="flex flex-wrap gap-3">
                                 <TableSetting @search="search()" />
                                 <TableSearch @search="search()" v-model:searchName="searchName" />
-                            </el-col>
-                        </el-row>
+                            </div>
+                        </div>
                     </template>
                     <template #main>
                         <ComplexTable
diff --git a/frontend/src/views/host/process/network/index.vue b/frontend/src/views/host/process/network/index.vue
index 84d5819ae..e5432c099 100644
--- a/frontend/src/views/host/process/network/index.vue
+++ b/frontend/src/views/host/process/network/index.vue
@@ -3,37 +3,28 @@
         <FireRouter />
         <LayoutContent :title="$t('menu.network')" v-loading="loading">
             <template #toolbar>
-                <el-row>
-                    <el-col :span="24">
-                        <div style="width: 100%">
-                            <el-form-item style="float: right">
-                                <el-row :gutter="20">
-                                    <el-col :span="8">
-                                        <TableSearch
-                                            @search="search()"
-                                            :placeholder="$t('process.pid')"
-                                            v-model:searchName="netSearch.processID"
-                                        />
-                                    </el-col>
-                                    <el-col :span="8">
-                                        <TableSearch
-                                            @search="search()"
-                                            :placeholder="$t('process.processName')"
-                                            v-model:searchName="netSearch.processName"
-                                        />
-                                    </el-col>
-                                    <el-col :span="8">
-                                        <TableSearch
-                                            @search="search()"
-                                            :placeholder="$t('commons.table.port')"
-                                            v-model:searchName="netSearch.port"
-                                        />
-                                    </el-col>
-                                </el-row>
-                            </el-form-item>
-                        </div>
-                    </el-col>
-                </el-row>
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div><!-- 占位 --></div>
+                    <div class="flex flex-wrap gap-3">
+                        <TableSearch
+                            @search="search()"
+                            :placeholder="$t('process.pid')"
+                            v-model:searchName="netSearch.processID"
+                        />
+
+                        <TableSearch
+                            @search="search()"
+                            :placeholder="$t('process.processName')"
+                            v-model:searchName="netSearch.processName"
+                        />
+
+                        <TableSearch
+                            @search="search()"
+                            :placeholder="$t('commons.table.port')"
+                            v-model:searchName="netSearch.port"
+                        />
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :data="data" @sort-change="changeSort" @filter-change="changeFilter" ref="tableRef">
diff --git a/frontend/src/views/host/process/process/index.vue b/frontend/src/views/host/process/process/index.vue
index f9963ef7d..1712ca5ff 100644
--- a/frontend/src/views/host/process/process/index.vue
+++ b/frontend/src/views/host/process/process/index.vue
@@ -3,37 +3,28 @@
         <FireRouter />
         <LayoutContent :title="$t('menu.process')" v-loading="loading">
             <template #toolbar>
-                <el-row>
-                    <el-col :span="24">
-                        <div style="width: 100%">
-                            <el-form-item class="float-right">
-                                <el-row :gutter="20">
-                                    <el-col :span="8">
-                                        <TableSearch
-                                            @search="search()"
-                                            :placeholder="$t('process.pid')"
-                                            v-model:searchName="processSearch.pid"
-                                        />
-                                    </el-col>
-                                    <el-col :span="8">
-                                        <TableSearch
-                                            @search="search()"
-                                            :placeholder="$t('commons.table.name')"
-                                            v-model:searchName="processSearch.name"
-                                        />
-                                    </el-col>
-                                    <el-col :span="8">
-                                        <TableSearch
-                                            @search="search()"
-                                            :placeholder="$t('commons.table.user')"
-                                            v-model:searchName="processSearch.username"
-                                        />
-                                    </el-col>
-                                </el-row>
-                            </el-form-item>
-                        </div>
-                    </el-col>
-                </el-row>
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div><!-- 占位 --></div>
+                    <div class="flex flex-wrap gap-3">
+                        <TableSearch
+                            @search="search()"
+                            :placeholder="$t('process.pid')"
+                            v-model:searchName="processSearch.pid"
+                        />
+
+                        <TableSearch
+                            @search="search()"
+                            :placeholder="$t('commons.table.name')"
+                            v-model:searchName="processSearch.name"
+                        />
+
+                        <TableSearch
+                            @search="search()"
+                            :placeholder="$t('commons.table.user')"
+                            v-model:searchName="processSearch.username"
+                        />
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :data="data" @sort-change="changeSort" @filter-change="changeFilter" ref="tableRef">
diff --git a/frontend/src/views/host/ssh/log/log.vue b/frontend/src/views/host/ssh/log/log.vue
index dbd243aaa..f02e7eb7c 100644
--- a/frontend/src/views/host/ssh/log/log.vue
+++ b/frontend/src/views/host/ssh/log/log.vue
@@ -14,13 +14,13 @@
                 </el-select>
             </template>
             <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16"></el-col>
-                    <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div><!-- 占位 --></div>
+                    <div class="flex flex-wrap gap-3">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchInfo" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
 
             <template #main>
diff --git a/frontend/src/views/host/ssh/session/index.vue b/frontend/src/views/host/ssh/session/index.vue
index 67282d999..73de5e6a7 100644
--- a/frontend/src/views/host/ssh/session/index.vue
+++ b/frontend/src/views/host/ssh/session/index.vue
@@ -3,14 +3,11 @@
         <FireRouter />
         <LayoutContent :title="$t('ssh.session')">
             <template #toolbar>
-                <div style="width: 100%">
-                    <el-row :gutter="20">
-                        <el-col :span="8"></el-col>
-                        <el-col :span="8"></el-col>
-                        <el-col :span="8">
-                            <TableSearch @search="search()" v-model:searchName="sshSearch.loginUser" />
-                        </el-col>
-                    </el-row>
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div><!-- 占位 --></div>
+                    <div class="flex flex-wrap gap-3">
+                        <TableSearch @search="search()" v-model:searchName="sshSearch.loginUser" />
+                    </div>
                 </div>
             </template>
             <template #main>
diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
index 3d23838f8..8e522a581 100644
--- a/frontend/src/views/log/operation/index.vue
+++ b/frontend/src/views/log/operation/index.vue
@@ -2,8 +2,8 @@
     <div>
         <LayoutContent v-loading="loading" :title="$t('logs.operation')">
             <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
                         <el-button type="primary" class="tag-button" @click="onChangeRoute('OperationLog')">
                             {{ $t('logs.operation') }}
                         </el-button>
@@ -13,12 +13,12 @@
                         <el-button class="tag-button no-active" @click="onChangeRoute('SystemLog')">
                             {{ $t('logs.system') }}
                         </el-button>
-                    </el-col>
-                    <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
+                    </div>
+                    <div class="flex flex-wrap gap-3">
                         <TableSetting @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <template #search>
                 <el-select v-model="searchGroup" @change="search()" clearable class="p-w-200">
diff --git a/frontend/src/views/log/website/index.vue b/frontend/src/views/log/website/index.vue
index 42eb01f06..f0da29cad 100644
--- a/frontend/src/views/log/website/index.vue
+++ b/frontend/src/views/log/website/index.vue
@@ -2,26 +2,22 @@
     <div>
         <LayoutContent v-loading="loading" :title="$t('logs.websiteLog')">
             <template #toolbar>
-                <el-row>
-                    <el-col :span="16">
-                        <el-button
-                            class="tag-button"
-                            :class="logConfig.name === 'access.log' ? '' : 'no-active'"
-                            :type="logConfig.name === 'access.log' ? 'primary' : ''"
-                            @click="changeType('access.log')"
-                        >
-                            {{ $t('logs.runLog') }}
-                        </el-button>
-                        <el-button
-                            class="tag-button"
-                            :class="logConfig.name === 'error.log' ? '' : 'no-active'"
-                            :type="logConfig.name === 'error.log' ? 'primary' : ''"
-                            @click="changeType('error.log')"
-                        >
-                            {{ $t('logs.errLog') }}
-                        </el-button>
-                    </el-col>
-                </el-row>
+                <el-button
+                    class="tag-button"
+                    :class="logConfig.name === 'access.log' ? '' : 'no-active'"
+                    :type="logConfig.name === 'access.log' ? 'primary' : ''"
+                    @click="changeType('access.log')"
+                >
+                    {{ $t('logs.runLog') }}
+                </el-button>
+                <el-button
+                    class="tag-button"
+                    :class="logConfig.name === 'error.log' ? '' : 'no-active'"
+                    :type="logConfig.name === 'error.log' ? 'primary' : ''"
+                    @click="changeType('error.log')"
+                >
+                    {{ $t('logs.errLog') }}
+                </el-button>
             </template>
             <template #search>
                 <div>
diff --git a/frontend/src/views/setting/snapshot/index.vue b/frontend/src/views/setting/snapshot/index.vue
index 5b8707055..fafd06fa2 100644
--- a/frontend/src/views/setting/snapshot/index.vue
+++ b/frontend/src/views/setting/snapshot/index.vue
@@ -2,8 +2,8 @@
     <div>
         <LayoutContent v-loading="loading" v-if="!isRecordShow" :title="$t('setting.snapshot')">
             <template #toolbar>
-                <el-row>
-                    <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
+                <div class="flex justify-between gap-2 flex-wrap sm:flex-row">
+                    <div class="flex flex-wrap gap-3">
                         <el-button type="primary" @click="onCreate()">
                             {{ $t('setting.createSnapshot') }}
                         </el-button>
@@ -16,12 +16,12 @@
                         <el-button type="primary" plain :disabled="selects.length === 0" @click="batchDelete(null)">
                             {{ $t('commons.button.delete') }}
                         </el-button>
-                    </el-col>
-                    <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
+                    </div>
+                    <div class="flex flex-wrap gap-3">
                         <TableSetting ref="timerRef" @search="search()" />
                         <TableSearch @search="search()" v-model:searchName="searchName" />
-                    </el-col>
-                </el-row>
+                    </div>
+                </div>
             </template>
             <template #main>
                 <ComplexTable
diff --git a/frontend/src/views/website/runtime/go/index.vue b/frontend/src/views/website/runtime/go/index.vue
index a8d050b91..5becb10fd 100644
--- a/frontend/src/views/website/runtime/go/index.vue
+++ b/frontend/src/views/website/runtime/go/index.vue
@@ -10,13 +10,15 @@
                 </el-alert>
             </template>
             <template #toolbar>
-                <el-button type="primary" @click="openCreate">
-                    {{ $t('runtime.create') }}
-                </el-button>
+                <div class="flex flex-wrap gap-3">
+                    <el-button type="primary" @click="openCreate">
+                        {{ $t('runtime.create') }}
+                    </el-button>
 
-                <el-button type="primary" plain @click="onOpenBuildCache()">
-                    {{ $t('container.cleanBuildCache') }}
-                </el-button>
+                    <el-button type="primary" plain @click="onOpenBuildCache()">
+                        {{ $t('container.cleanBuildCache') }}
+                    </el-button>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()">
diff --git a/frontend/src/views/website/runtime/java/index.vue b/frontend/src/views/website/runtime/java/index.vue
index 21d6b03c0..a1c9b9856 100644
--- a/frontend/src/views/website/runtime/java/index.vue
+++ b/frontend/src/views/website/runtime/java/index.vue
@@ -10,13 +10,15 @@
                 </el-alert>
             </template>
             <template #toolbar>
-                <el-button type="primary" @click="openCreate">
-                    {{ $t('runtime.create') }}
-                </el-button>
+                <div class="flex flex-wrap gap-3">
+                    <el-button type="primary" @click="openCreate">
+                        {{ $t('runtime.create') }}
+                    </el-button>
 
-                <el-button type="primary" plain @click="onOpenBuildCache()">
-                    {{ $t('container.cleanBuildCache') }}
-                </el-button>
+                    <el-button type="primary" plain @click="onOpenBuildCache()">
+                        {{ $t('container.cleanBuildCache') }}
+                    </el-button>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()">
diff --git a/frontend/src/views/website/runtime/node/index.vue b/frontend/src/views/website/runtime/node/index.vue
index 04d6ffd58..1ed36cb8c 100644
--- a/frontend/src/views/website/runtime/node/index.vue
+++ b/frontend/src/views/website/runtime/node/index.vue
@@ -10,13 +10,15 @@
                 </el-alert>
             </template>
             <template #toolbar>
-                <el-button type="primary" @click="openCreate">
-                    {{ $t('runtime.create') }}
-                </el-button>
+                <div class="flex flex-wrap gap-3">
+                    <el-button type="primary" @click="openCreate">
+                        {{ $t('runtime.create') }}
+                    </el-button>
 
-                <el-button type="primary" plain @click="onOpenBuildCache()">
-                    {{ $t('container.cleanBuildCache') }}
-                </el-button>
+                    <el-button type="primary" plain @click="onOpenBuildCache()">
+                        {{ $t('container.cleanBuildCache') }}
+                    </el-button>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()">
diff --git a/frontend/src/views/website/runtime/php/index.vue b/frontend/src/views/website/runtime/php/index.vue
index 98ed307cd..acb0aebd8 100644
--- a/frontend/src/views/website/runtime/php/index.vue
+++ b/frontend/src/views/website/runtime/php/index.vue
@@ -10,17 +10,19 @@
                 </el-alert>
             </template>
             <template #toolbar>
-                <el-button type="primary" @click="openCreate">
-                    {{ $t('runtime.create') }}
-                </el-button>
+                <div class="flex flex-wrap gap-3">
+                    <el-button type="primary" @click="openCreate">
+                        {{ $t('runtime.create') }}
+                    </el-button>
 
-                <el-button @click="openExtensions">
-                    {{ $t('php.extensions') }}
-                </el-button>
+                    <el-button @click="openExtensions">
+                        {{ $t('php.extensions') }}
+                    </el-button>
 
-                <el-button type="primary" plain @click="onOpenBuildCache()">
-                    {{ $t('container.cleanBuildCache') }}
-                </el-button>
+                    <el-button type="primary" plain @click="onOpenBuildCache()">
+                        {{ $t('container.cleanBuildCache') }}
+                    </el-button>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="items" @search="search()">
diff --git a/frontend/src/views/website/ssl/index.vue b/frontend/src/views/website/ssl/index.vue
index a4b140ca5..4b47e675c 100644
--- a/frontend/src/views/website/ssl/index.vue
+++ b/frontend/src/views/website/ssl/index.vue
@@ -3,7 +3,7 @@
         <RouterButton :buttons="routerButton" />
         <LayoutContent :title="$t('website.ssl')">
             <template #toolbar>
-                <div class="flex flex-wrap gap-3 [&>*]:ml-3">
+                <div class="flex flex-wrap gap-3">
                     <el-button type="primary" @click="openSSL()">
                         {{ $t('ssl.create') }}
                     </el-button>
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index cfaab7992..1dd765fab 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -19,8 +19,11 @@
                 ></AppStatus>
             </template>
             <template v-if="nginxIsExist && !openNginxConfig" #toolbar>
-                <el-row :class="{ mask: nginxStatus != 'Running' }">
-                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
+                <div
+                    class="flex justify-between gap-2 flex-wrap sm:flex-row"
+                    :class="{ mask: nginxStatus != 'Running' }"
+                >
+                    <div class="flex flex-wrap gap-3">
                         <el-button type="primary" @click="openCreate">
                             {{ $t('website.create') }}
                         </el-button>
@@ -33,11 +36,10 @@
                         <el-button type="primary" plain @click="openDefaultHtml">
                             {{ $t('website.defaultHtml') }}
                         </el-button>
-                    </el-col>
-                    <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4">
-                        <TableSearch @search="search()" v-model:searchName="req.name" />
-                    </el-col>
-                </el-row>
+                    </div>
+
+                    <TableSearch @search="search()" v-model:searchName="req.name" />
+                </div>
             </template>
             <template v-if="nginxIsExist && !openNginxConfig" #search>
                 <div :class="{ mask: nginxStatus != 'Running' }">