From 0ea142d6dbbe4ef3d8b9566f2bf4a7cddee956f3 Mon Sep 17 00:00:00 2001
From: see-more <107225647+see-more@users.noreply.github.com>
Date: Wed, 11 Sep 2024 10:16:02 +0800
Subject: [PATCH] =?UTF-8?q?style:=E4=BC=98=E5=8C=96=E6=97=A5=E5=BF=97?=
 =?UTF-8?q?=E5=AE=A1=E8=AE=A1=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=20(#6441?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles/common.scss               |  2 +-
 .../src/views/host/file-management/index.vue  |  1 +
 frontend/src/views/log/operation/index.vue    | 56 +++++++++----------
 frontend/src/views/log/system/index.vue       | 10 ++--
 frontend/src/views/log/website/index.vue      | 14 +++--
 5 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 779cac84d..9ec920ae5 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -188,10 +188,10 @@ html {
     width: 400px;
     text-align: center;
     font-size: 14px;
+    z-index: 1;
     .bt {
         margin-top: -2px;
     }
-    z-index: 1;
 }
 
 .table-button {
diff --git a/frontend/src/views/host/file-management/index.vue b/frontend/src/views/host/file-management/index.vue
index 5ddc38298..ded3dbd0d 100644
--- a/frontend/src/views/host/file-management/index.vue
+++ b/frontend/src/views/host/file-management/index.vue
@@ -1205,6 +1205,7 @@ onMounted(() => {
 .right-section {
     display: flex;
     align-items: center;
+    gap: 1rem;
 }
 
 .left-section > *:not(:first-child) {
diff --git a/frontend/src/views/log/operation/index.vue b/frontend/src/views/log/operation/index.vue
index 8e522a581..fb41a8e15 100644
--- a/frontend/src/views/log/operation/index.vue
+++ b/frontend/src/views/log/operation/index.vue
@@ -21,36 +21,32 @@
                 </div>
             </template>
             <template #search>
-                <el-select v-model="searchGroup" @change="search()" clearable class="p-w-200">
-                    <template #prefix>{{ $t('logs.resource') }}</template>
-                    <el-option :label="$t('commons.table.all')" value=""></el-option>
-                    <el-option :label="$t('logs.detail.apps')" value="apps"></el-option>
-                    <el-option :label="$t('logs.detail.websites')" value="websites"></el-option>
-                    <el-option :label="$t('logs.detail.runtimes')" value="runtimes"></el-option>
-                    <el-option :label="$t('logs.detail.databases')" value="databases"></el-option>
-                    <el-option :label="$t('logs.detail.containers')" value="containers"></el-option>
-                    <el-option :label="$t('logs.detail.cronjobs')" value="cronjobs"></el-option>
-                    <el-option :label="$t('logs.detail.files')" value="files"></el-option>
-                    <el-option :label="$t('logs.detail.hosts')" value="hosts"></el-option>
-                    <el-option :label="$t('logs.detail.process')" value="process"></el-option>
-                    <el-option :label="$t('logs.detail.logs')" value="logs"></el-option>
-                    <el-option :label="$t('logs.detail.settings')" value="settings"></el-option>
-                </el-select>
-                <el-select
-                    v-model="searchStatus"
-                    @change="search()"
-                    clearable
-                    style="margin-left: 10px"
-                    class="p-w-200"
-                >
-                    <template #prefix>{{ $t('commons.table.status') }}</template>
-                    <el-option :label="$t('commons.table.all')" value=""></el-option>
-                    <el-option :label="$t('commons.status.success')" value="Success"></el-option>
-                    <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
-                </el-select>
-                <el-button type="primary" style="margin-left: 10px" plain @click="onClean()">
-                    {{ $t('logs.deleteLogs') }}
-                </el-button>
+                <div class="flex flex-wrap gap-2 sm:gap-4 items-center">
+                    <el-select v-model="searchGroup" @change="search()" clearable class="p-w-200">
+                        <template #prefix>{{ $t('logs.resource') }}</template>
+                        <el-option :label="$t('commons.table.all')" value=""></el-option>
+                        <el-option :label="$t('logs.detail.apps')" value="apps"></el-option>
+                        <el-option :label="$t('logs.detail.websites')" value="websites"></el-option>
+                        <el-option :label="$t('logs.detail.runtimes')" value="runtimes"></el-option>
+                        <el-option :label="$t('logs.detail.databases')" value="databases"></el-option>
+                        <el-option :label="$t('logs.detail.containers')" value="containers"></el-option>
+                        <el-option :label="$t('logs.detail.cronjobs')" value="cronjobs"></el-option>
+                        <el-option :label="$t('logs.detail.files')" value="files"></el-option>
+                        <el-option :label="$t('logs.detail.hosts')" value="hosts"></el-option>
+                        <el-option :label="$t('logs.detail.process')" value="process"></el-option>
+                        <el-option :label="$t('logs.detail.logs')" value="logs"></el-option>
+                        <el-option :label="$t('logs.detail.settings')" value="settings"></el-option>
+                    </el-select>
+                    <el-select v-model="searchStatus" @change="search()" clearable class="p-w-200">
+                        <template #prefix>{{ $t('commons.table.status') }}</template>
+                        <el-option :label="$t('commons.table.all')" value=""></el-option>
+                        <el-option :label="$t('commons.status.success')" value="Success"></el-option>
+                        <el-option :label="$t('commons.status.failed')" value="Failed"></el-option>
+                    </el-select>
+                    <el-button type="primary" plain @click="onClean()">
+                        {{ $t('logs.deleteLogs') }}
+                    </el-button>
+                </div>
             </template>
             <template #main>
                 <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search">
diff --git a/frontend/src/views/log/system/index.vue b/frontend/src/views/log/system/index.vue
index 3b258920e..173c9f2c8 100644
--- a/frontend/src/views/log/system/index.vue
+++ b/frontend/src/views/log/system/index.vue
@@ -17,11 +17,11 @@
                 </el-row>
             </template>
             <template #search>
-                <el-select class="float-left p-w-200" v-model="logConfig.name" @change="search()">
-                    <template #prefix>{{ $t('commons.button.log') }}</template>
-                    <el-option v-for="(item, index) in fileList" :key="index" :label="item" :value="item" />
-                </el-select>
-                <div class="watchCheckbox">
+                <div class="flex flex-wrap gap-2 sm:gap-4">
+                    <el-select class="p-w-200" v-model="logConfig.name" @change="search()">
+                        <template #prefix>{{ $t('commons.button.log') }}</template>
+                        <el-option v-for="(item, index) in fileList" :key="index" :label="item" :value="item" />
+                    </el-select>
                     <el-checkbox border @change="changeTail" v-model="isWatch">
                         {{ $t('commons.button.watch') }}
                     </el-checkbox>
diff --git a/frontend/src/views/log/website/index.vue b/frontend/src/views/log/website/index.vue
index f0da29cad..a24966aaf 100644
--- a/frontend/src/views/log/website/index.vue
+++ b/frontend/src/views/log/website/index.vue
@@ -20,7 +20,7 @@
                 </el-button>
             </template>
             <template #search>
-                <div>
+                <div class="flex flex-wrap items-center gap-2 sm:gap-4">
                     <el-select v-model="logConfig.id" @change="changeWebsite()" class="p-w-200">
                         <template #prefix>{{ $t('website.website') }}</template>
                         <el-option
@@ -30,15 +30,15 @@
                             :value="website.id"
                         ></el-option>
                     </el-select>
-                    <el-button class="left-button">
+                    <el-button>
                         <el-checkbox v-model="tailLog" @change="changeTail" :disabled="logConfig.id == undefined">
                             {{ $t('commons.button.watch') }}
                         </el-checkbox>
                     </el-button>
-                    <el-button class="left-button" @click="onDownload" icon="Download" :disabled="!hasContent">
+                    <el-button @click="onDownload" icon="Download" :disabled="!hasContent">
                         {{ $t('file.download') }}
                     </el-button>
-                    <el-button type="primary" plain @click="onClean()" class="left-button" :disabled="!hasContent">
+                    <el-button type="primary" plain @click="onClean()" :disabled="!hasContent">
                         {{ $t('logs.deleteLogs') }}
                     </el-button>
                 </div>
@@ -158,3 +158,9 @@ onMounted(() => {
     getWebsites();
 });
 </script>
+
+<style scoped>
+.el-button + .el-button {
+    margin: 0 !important;
+}
+</style>