perf: 优化工具栏样式 (#6431)

#### 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.

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 {

frontend/src/styles/common.scss

@@ -375,7 +375,6 @@ html {
 }
 
 .tag-button {
-    margin-right: 10px;
     &.no-active {
         background: none;
         border: none;

frontend/src/views/app-store/index.scss

@@ -85,7 +85,6 @@
 }
 
 .tag-button {
-    margin-right: 10px;
     &.no-active {
         background: none;
         border: none;

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') }}

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>

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>

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>

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>

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

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"

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">

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

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">

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

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">

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

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">

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">

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>

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>

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">

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>

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

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()">

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()">

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()">

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()">

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>

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' }">