From ab7efea8c5f34a2e936eb5ad0988cd1be915aba6 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Wed, 11 Sep 2024 15:24:15 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E6=A0=B7=E5=BC=8F=20(#6448)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/app-status/index.vue  | 19 +++---
 .../src/views/container/setting/index.vue     | 23 +++-----
 frontend/src/views/cronjob/record/index.vue   | 59 +++++++++++--------
 frontend/src/views/database/mysql/index.vue   | 12 ++--
 .../src/views/database/postgresql/index.vue   |  8 ++-
 frontend/src/views/database/redis/index.vue   |  8 ++-
 .../src/views/host/firewall/status/index.vue  | 37 ++++++------
 frontend/src/views/host/ssh/ssh/index.vue     | 42 ++++++-------
 frontend/src/views/log/system/index.vue       |  1 +
 .../src/views/toolbox/clam/status/index.vue   | 50 ++++++++--------
 frontend/src/views/toolbox/fail2ban/index.vue | 32 +++++-----
 frontend/src/views/toolbox/ftp/index.vue      | 22 +++----
 .../views/toolbox/supervisor/status/index.vue | 14 +++--
 .../views/website/website/status/index.vue    | 30 +++++-----
 14 files changed, 187 insertions(+), 170 deletions(-)

diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index b702d97d1..e4e9e3d65 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -2,19 +2,14 @@
     <div>
         <div class="app-status" v-if="data.isExist">
             <el-card>
-                <div class="flex items-center justify-between gap-2 sm:gap-10 sm:justify-start">
-                    <div class="flex items-center justify-center gap-2 sm:flex-row">
-                        <div>
-                            <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
-                        </div>
-                        <div>
-                            <Status :key="refresh" :status="data.status"></Status>
-                        </div>
-                        <div>
-                            <el-tag>{{ $t('app.version') }}:{{ data.version }}</el-tag>
-                        </div>
+                <div class="flex w-full flex-col gap-4 md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
+                        <Status :key="refresh" :status="data.status"></Status>
+                        <el-tag>{{ $t('app.version') }}:{{ data.version }}</el-tag>
                     </div>
-                    <div class="grid grid-cols-4 sm:flex sm:flex-row">
+
+                    <div class="mt-0.5">
                         <el-button
                             type="primary"
                             v-if="data.status != 'Running'"
diff --git a/frontend/src/views/container/setting/index.vue b/frontend/src/views/container/setting/index.vue
index 31786ce72..08e541409 100644
--- a/frontend/src/views/container/setting/index.vue
+++ b/frontend/src/views/container/setting/index.vue
@@ -2,29 +2,22 @@
     <div v-loading="loading">
         <div class="app-status" style="margin-top: 20px">
             <el-card>
-                <div class="flex flex-col gap-2 sm:flex-row sm:justify-between">
-                    <div class="flex">
+                <div class="flex w-full flex-col gap-4 md:flex-row">
+                    <div class="flex flex-wrap gap-4">
                         <el-tag style="float: left" effect="dark" type="success">Docker</el-tag>
-                        <el-tag round class="status-content" v-if="form.status === 'Running'" type="success">
+                        <el-tag round v-if="form.status === 'Running'" type="success">
                             {{ $t('commons.status.running') }}
                         </el-tag>
-                        <el-tag round class="status-content" v-if="form.status === 'Stopped'" type="info">
+                        <el-tag round v-if="form.status === 'Stopped'" type="info">
                             {{ $t('commons.status.stopped') }}
                         </el-tag>
-                        <el-tag class="status-content">{{ $t('app.version') }}: {{ form.version }}</el-tag>
+                        <el-tag>{{ $t('app.version') }}: {{ form.version }}</el-tag>
                     </div>
-                    <div class="flex justify-start" v-if="form.status === 'Running'">
-                        <el-button type="primary" @click="onOperator('stop')" link>
+                    <div class="mt-0.5">
+                        <el-button type="primary" v-if="form.status === 'Running'" @click="onOperator('stop')" link>
                             {{ $t('container.stop') }}
                         </el-button>
-                        <el-divider direction="vertical" />
-                        <el-button type="primary" @click="onOperator('restart')" link>
-                            {{ $t('container.restart') }}
-                        </el-button>
-                    </div>
-
-                    <div clsas="flex justify-start" v-if="form.status === 'Stopped'" class="buttons">
-                        <el-button type="primary" @click="onOperator('start')" link>
+                        <el-button type="primary" v-if="form.status === 'Stopped'" @click="onOperator('start')" link>
                             {{ $t('container.start') }}
                         </el-button>
                         <el-divider direction="vertical" />
diff --git a/frontend/src/views/cronjob/record/index.vue b/frontend/src/views/cronjob/record/index.vue
index 587cf6f3f..dabbcfd8a 100644
--- a/frontend/src/views/cronjob/record/index.vue
+++ b/frontend/src/views/cronjob/record/index.vue
@@ -2,32 +2,39 @@
     <div v-if="recordShow" v-loading="loading">
         <div class="app-status p-mt-20">
             <el-card>
-                <div>
-                    <el-popover
-                        v-if="dialogData.rowData.name.length >= 15"
-                        placement="top-start"
-                        trigger="hover"
-                        width="250"
-                        :content="$t('cronjob.' + dialogData.rowData.type) + ' - ' + dialogData.rowData.name"
-                    >
-                        <template #reference>
-                            <el-tag style="float: left" effect="dark" type="success">
-                                {{ $t('cronjob.' + dialogData.rowData.type) }} -
-                                {{ dialogData.rowData.name.substring(0, 12) }}...
-                            </el-tag>
-                        </template>
-                    </el-popover>
-                    <el-tag v-if="dialogData.rowData.name.length < 15" class="float-left" effect="dark" type="success">
-                        {{ $t('cronjob.' + dialogData.rowData.type) }} - {{ dialogData.rowData.name }}
-                    </el-tag>
+                <div class="flex w-full flex-col gap-4 md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <el-popover
+                            v-if="dialogData.rowData.name.length >= 15"
+                            placement="top-start"
+                            trigger="hover"
+                            width="250"
+                            :content="$t('cronjob.' + dialogData.rowData.type) + ' - ' + dialogData.rowData.name"
+                        >
+                            <template #reference>
+                                <el-tag style="float: left" effect="dark" type="success">
+                                    {{ $t('cronjob.' + dialogData.rowData.type) }} -
+                                    {{ dialogData.rowData.name.substring(0, 12) }}...
+                                </el-tag>
+                            </template>
+                        </el-popover>
+                        <el-tag
+                            v-if="dialogData.rowData.name.length < 15"
+                            class="float-left"
+                            effect="dark"
+                            type="success"
+                        >
+                            {{ $t('cronjob.' + dialogData.rowData.type) }} - {{ dialogData.rowData.name }}
+                        </el-tag>
 
-                    <el-tag v-if="dialogData.rowData.status === 'Enable'" round class="status-content" type="success">
-                        {{ $t('commons.status.running') }}
-                    </el-tag>
-                    <el-tag v-if="dialogData.rowData.status === 'Disable'" round class="status-content" type="info">
-                        {{ $t('commons.status.stopped') }}
-                    </el-tag>
-                    <span class="buttons">
+                        <el-tag v-if="dialogData.rowData.status === 'Enable'" round type="success">
+                            {{ $t('commons.status.running') }}
+                        </el-tag>
+                        <el-tag v-if="dialogData.rowData.status === 'Disable'" round type="info">
+                            {{ $t('commons.status.stopped') }}
+                        </el-tag>
+                    </div>
+                    <div class="mt-0.5">
                         <el-button type="primary" @click="onHandle(dialogData.rowData)" link>
                             {{ $t('commons.button.handle') }}
                         </el-button>
@@ -52,7 +59,7 @@
                         <el-button :disabled="!hasRecords" type="primary" @click="onClean" link>
                             {{ $t('commons.button.clean') }}
                         </el-button>
-                    </span>
+                    </div>
                 </div>
             </el-card>
         </div>
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 7730ba4a2..656236837 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -2,11 +2,13 @@
     <div v-loading="loading">
         <div class="app-status" style="margin-top: 20px" v-if="currentDB?.from === 'remote'">
             <el-card>
-                <div>
-                    <el-tag style="float: left" effect="dark" type="success">
-                        {{ currentDB?.type === 'mysql' ? 'Mysql' : 'MariaDB' }}
-                    </el-tag>
-                    <el-tag class="status-content">{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
+                <div class="flex w-full flex-col gap-4 md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <el-tag style="float: left" effect="dark" type="success">
+                            {{ currentDB?.type === 'mysql' ? 'Mysql' : 'MariaDB' }}
+                        </el-tag>
+                        <el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
+                    </div>
                 </div>
             </el-card>
         </div>
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index c9158e241..4fb1b0998 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -2,9 +2,11 @@
     <div v-loading="loading">
         <div class="app-status" style="margin-top: 20px" v-if="currentDB?.from === 'remote'">
             <el-card>
-                <div>
-                    <el-tag style="float: left" effect="dark" type="success">PostgreSQL</el-tag>
-                    <el-tag class="status-content">{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
+                <div class="flex w-full flex-col gap-4 md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <el-tag style="float: left" effect="dark" type="success">PostgreSQL</el-tag>
+                        <el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
+                    </div>
                 </div>
             </el-card>
         </div>
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index 77b7ff77c..a2d3f8b12 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -2,9 +2,11 @@
     <div v-loading="loading">
         <div class="app-status" style="margin-top: 20px" v-if="currentDB && currentDB.from === 'remote'">
             <el-card>
-                <div>
-                    <el-tag style="float: left" effect="dark" type="success">Redis</el-tag>
-                    <el-tag class="status-content">{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
+                <div class="flex w-full flex-col gap-4 md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <el-tag style="float: left" effect="dark" type="success">Redis</el-tag>
+                        <el-tag>{{ $t('app.version') }}: {{ currentDB?.version }}</el-tag>
+                    </div>
                 </div>
             </el-card>
         </div>
diff --git a/frontend/src/views/host/firewall/status/index.vue b/frontend/src/views/host/firewall/status/index.vue
index 396d227c7..f31d12e68 100644
--- a/frontend/src/views/host/firewall/status/index.vue
+++ b/frontend/src/views/host/firewall/status/index.vue
@@ -2,33 +2,34 @@
     <div>
         <div class="app-status" style="margin-top: 20px">
             <el-card>
-                <div class="flex flex-row flex-wrap gap-2 sm:justify-between items-center">
-                    <div class="flex flex-row flex-wrap">
+                <div class="flex w-full flex-col gap-4 md:flex-row">
+                    <div class="flex flex-wrap gap-4">
                         <el-tag effect="dark" type="success">{{ baseInfo.name }}</el-tag>
-                        <el-tag round class="status-content" v-if="baseInfo.status === 'running'" type="success">
+                        <el-tag round v-if="baseInfo.status === 'running'" type="success">
                             {{ $t('commons.status.running') }}
                         </el-tag>
-                        <el-tag round class="status-content" v-if="baseInfo.status === 'not running'" type="info">
+                        <el-tag round v-if="baseInfo.status === 'not running'" type="info">
                             {{ $t('commons.status.stopped') }}
                         </el-tag>
-                        <el-tag class="status-content">{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>
+                        <el-tag>{{ $t('app.version') }}: {{ baseInfo.version }}</el-tag>
                     </div>
-                    <div class="flex flex-wrap items-center">
-                        <div v-if="baseInfo.status === 'running'">
-                            <el-button type="primary" @click="onOperate('stop')" link>
-                                {{ $t('commons.button.stop') }}
-                            </el-button>
-                        </div>
-                        <div v-if="baseInfo.status === 'not running'">
-                            <el-button type="primary" @click="onOperate('start')" link>
-                                {{ $t('commons.button.start') }}
-                            </el-button>
-                        </div>
+                    <div class="mt-0.5">
+                        <el-button type="primary" v-if="baseInfo.status === 'running'" @click="onOperate('stop')" link>
+                            {{ $t('commons.button.stop') }}
+                        </el-button>
+                        <el-button
+                            type="primary"
+                            v-if="baseInfo.status === 'not running'"
+                            @click="onOperate('start')"
+                            link
+                        >
+                            {{ $t('commons.button.start') }}
+                        </el-button>
                         <el-divider direction="vertical" />
                         <el-button type="primary" @click="onOperate('restart')" link>
                             {{ $t('container.restart') }}
                         </el-button>
-                        <div v-if="onPing !== 'None'">
+                        <span v-if="onPing !== 'None'">
                             <el-divider direction="vertical" />
                             <el-button type="primary" link>{{ $t('firewall.noPing') }}</el-button>
                             <el-switch
@@ -39,7 +40,7 @@
                                 @change="onPingOperate"
                                 v-model="onPing"
                             />
-                        </div>
+                        </span>
                     </div>
                 </div>
             </el-card>
diff --git a/frontend/src/views/host/ssh/ssh/index.vue b/frontend/src/views/host/ssh/ssh/index.vue
index 01c2a601c..abf3aff38 100644
--- a/frontend/src/views/host/ssh/ssh/index.vue
+++ b/frontend/src/views/host/ssh/ssh/index.vue
@@ -4,25 +4,27 @@
 
         <div class="app-status" style="margin-top: 20px">
             <el-card>
-                <div>
-                    <el-tag style="float: left" effect="dark" type="success">SSH</el-tag>
-                    <el-tag round class="status-content" v-if="form.status === 'Enable'" type="success">
-                        {{ $t('commons.status.running') }}
-                    </el-tag>
-                    <el-popover
-                        v-if="form.status === 'Disable'"
-                        placement="top-start"
-                        trigger="hover"
-                        width="450"
-                        :content="form.message"
-                    >
-                        <template #reference>
-                            <el-tag round class="status-content" v-if="form.status === 'Disable'" type="info">
-                                {{ $t('commons.status.stopped') }}
-                            </el-tag>
-                        </template>
-                    </el-popover>
-                    <span class="buttons">
+                <div class="flex w-full flex-col gap-4 md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <el-tag style="float: left" effect="dark" type="success">SSH</el-tag>
+                        <el-tag round v-if="form.status === 'Enable'" type="success">
+                            {{ $t('commons.status.running') }}
+                        </el-tag>
+                        <el-popover
+                            v-if="form.status === 'Disable'"
+                            placement="top-start"
+                            trigger="hover"
+                            width="450"
+                            :content="form.message"
+                        >
+                            <template #reference>
+                                <el-tag round v-if="form.status === 'Disable'" type="info">
+                                    {{ $t('commons.status.stopped') }}
+                                </el-tag>
+                            </template>
+                        </el-popover>
+                    </div>
+                    <div class="mt-0.5">
                         <el-button v-if="form.status === 'Enable'" type="primary" @click="onOperate('stop')" link>
                             {{ $t('commons.button.stop') }}
                         </el-button>
@@ -45,7 +47,7 @@
                             @change="onOperate(autoStart)"
                             v-model="autoStart"
                         />
-                    </span>
+                    </div>
                 </div>
             </el-card>
         </div>
diff --git a/frontend/src/views/log/system/index.vue b/frontend/src/views/log/system/index.vue
index 173c9f2c8..73be061d2 100644
--- a/frontend/src/views/log/system/index.vue
+++ b/frontend/src/views/log/system/index.vue
@@ -31,6 +31,7 @@
                 <LogFile
                     ref="logRef"
                     :config="logConfig"
+                    v-if="showLog"
                     :default-button="false"
                     v-model:loading="loading"
                     v-model:hasContent="hasContent"
diff --git a/frontend/src/views/toolbox/clam/status/index.vue b/frontend/src/views/toolbox/clam/status/index.vue
index 3edcf16b9..da9862233 100644
--- a/frontend/src/views/toolbox/clam/status/index.vue
+++ b/frontend/src/views/toolbox/clam/status/index.vue
@@ -1,17 +1,19 @@
 <template>
     <div>
-        <div class="app-status tool-status" v-if="data.isExist">
+        <div class="app-status" v-if="data.isExist">
             <el-card>
-                <div>
-                    <el-tag class="w-17" effect="dark" type="success">ClamAV</el-tag>
-                    <el-tag round class="status-content" v-if="data.isActive" type="success">
-                        {{ $t('commons.status.running') }}
-                    </el-tag>
-                    <el-tag round class="status-content" v-if="!data.isActive" type="info">
-                        {{ $t('commons.status.stopped') }}
-                    </el-tag>
-                    <el-tag class="status-content w-24">{{ $t('app.version') }}:{{ data.version }}</el-tag>
-                    <span class="buttons">
+                <div class="flex w-full flex-col gap-4 md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <el-tag effect="dark" type="success">ClamAV</el-tag>
+                        <el-tag round v-if="data.isActive" type="success">
+                            {{ $t('commons.status.running') }}
+                        </el-tag>
+                        <el-tag round v-if="!data.isActive" type="info">
+                            {{ $t('commons.status.stopped') }}
+                        </el-tag>
+                        <el-tag class="w-24">{{ $t('app.version') }}:{{ data.version }}</el-tag>
+                    </div>
+                    <div class="mt-0.5">
                         <el-button type="primary" v-if="!data.isActive" link @click="onOperate('ClamAV', 'start')">
                             {{ $t('app.start') }}
                         </el-button>
@@ -33,18 +35,20 @@
                         <el-button type="primary" v-if="!showFresh" link @click="changeShow(true)">
                             {{ $t('toolbox.clam.showFresh') }}
                         </el-button>
-                    </span>
+                    </div>
                 </div>
-                <div class="mt-4" v-if="showFresh">
-                    <el-tag class="w-16" effect="dark" type="success">FreshClam</el-tag>
-                    <el-tag round class="status-content" v-if="data.freshIsActive" type="success">
-                        {{ $t('commons.status.running') }}
-                    </el-tag>
-                    <el-tag round class="status-content" v-if="!data.freshIsActive" type="info">
-                        {{ $t('commons.status.stopped') }}
-                    </el-tag>
-                    <el-tag class="status-content w-24">{{ $t('app.version') }}:{{ data.freshVersion }}</el-tag>
-                    <span class="buttons">
+                <div v-if="showFresh" class="flex w-full flex-col gap-4 md:flex-row mt-5">
+                    <div class="flex flex-wrap gap-4">
+                        <el-tag class="w-16" effect="dark" type="success">FreshClam</el-tag>
+                        <el-tag round v-if="data.freshIsActive" type="success">
+                            {{ $t('commons.status.running') }}
+                        </el-tag>
+                        <el-tag round v-if="!data.freshIsActive" type="info">
+                            {{ $t('commons.status.stopped') }}
+                        </el-tag>
+                        <el-tag class="w-24">{{ $t('app.version') }}:{{ data.freshVersion }}</el-tag>
+                    </div>
+                    <div class="mt-0.5">
                         <el-button
                             type="primary"
                             v-if="!data.freshIsActive"
@@ -65,7 +69,7 @@
                         <el-button type="primary" link @click="onOperate('FreshClam', 'restart')">
                             {{ $t('app.restart') }}
                         </el-button>
-                    </span>
+                    </div>
                 </div>
             </el-card>
         </div>
diff --git a/frontend/src/views/toolbox/fail2ban/index.vue b/frontend/src/views/toolbox/fail2ban/index.vue
index 5b5f4b71c..d4491c438 100644
--- a/frontend/src/views/toolbox/fail2ban/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/index.vue
@@ -2,16 +2,18 @@
     <div v-loading="loading">
         <div class="app-status" style="margin-top: 20px">
             <el-card v-if="form.isExist">
-                <div>
-                    <el-tag effect="dark" type="success">Fail2ban</el-tag>
-                    <el-tag round class="status-content" v-if="form.isActive" type="success">
-                        {{ $t('commons.status.running') }}
-                    </el-tag>
-                    <el-tag round class="status-content" v-if="!form.isActive" type="info">
-                        {{ $t('commons.status.stopped') }}
-                    </el-tag>
-                    <el-tag class="status-content">{{ form.version }}</el-tag>
-                    <span class="buttons">
+                <div class="flex w-full flex-col gap-4 md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <el-tag effect="dark" type="success">Fail2ban</el-tag>
+                        <el-tag round v-if="form.isActive" type="success">
+                            {{ $t('commons.status.running') }}
+                        </el-tag>
+                        <el-tag round v-if="!form.isActive" type="info">
+                            {{ $t('commons.status.stopped') }}
+                        </el-tag>
+                        <el-tag>{{ form.version }}</el-tag>
+                    </div>
+                    <div class="mt-0.5">
                         <el-button v-if="form.isActive" type="primary" @click="onOperate('stop')" link>
                             {{ $t('commons.button.stop') }}
                         </el-button>
@@ -34,7 +36,7 @@
                             @change="onOperate(autoStart)"
                             v-model="autoStart"
                         />
-                    </span>
+                    </div>
                 </div>
             </el-card>
         </div>
@@ -42,16 +44,16 @@
         <div v-if="form.isExist">
             <LayoutContent title="Fail2ban" :divider="true">
                 <template #toolbar>
-                    <el-row>
-                        <el-col :span="16">
+                    <div class="flex w-full flex-col gap-4 md:justify-between md:flex-row">
+                        <div class="flex flex-wrap gap-4">
                             <el-button :disabled="!form.isActive" type="primary" plain @click="onLoadList('ignore')">
                                 {{ $t('toolbox.fail2ban.ignoreIP') }}
                             </el-button>
                             <el-button :disabled="!form.isActive" type="primary" plain @click="onLoadList('banned')">
                                 {{ $t('toolbox.fail2ban.bannedIP') }}
                             </el-button>
-                        </el-col>
-                    </el-row>
+                        </div>
+                    </div>
                 </template>
                 <template #main>
                     <el-radio-group v-model="confShowType" @change="changeMode">
diff --git a/frontend/src/views/toolbox/ftp/index.vue b/frontend/src/views/toolbox/ftp/index.vue
index 5f7f0eb3c..08a02fa33 100644
--- a/frontend/src/views/toolbox/ftp/index.vue
+++ b/frontend/src/views/toolbox/ftp/index.vue
@@ -2,15 +2,17 @@
     <div>
         <div class="app-status" style="margin-top: 20px">
             <el-card v-if="form.isExist">
-                <div>
-                    <el-tag effect="dark" type="success">FTP</el-tag>
-                    <el-tag round class="status-content" v-if="form.isActive" type="success">
-                        {{ $t('commons.status.running') }}
-                    </el-tag>
-                    <el-tag round class="status-content" v-if="!form.isActive" type="info">
-                        {{ $t('commons.status.stopped') }}
-                    </el-tag>
-                    <span class="buttons">
+                <div class="flex w-full flex-col gap-4 md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <el-tag effect="dark" type="success">FTP</el-tag>
+                        <el-tag round v-if="form.isActive" type="success">
+                            {{ $t('commons.status.running') }}
+                        </el-tag>
+                        <el-tag round v-if="!form.isActive" type="info">
+                            {{ $t('commons.status.stopped') }}
+                        </el-tag>
+                    </div>
+                    <div class="mt-0.5">
                         <el-button v-if="form.isActive" type="primary" @click="onOperate('stop')" link>
                             {{ $t('commons.button.stop') }}
                         </el-button>
@@ -21,7 +23,7 @@
                         <el-button type="primary" @click="onOperate('restart')" link>
                             {{ $t('container.restart') }}
                         </el-button>
-                    </span>
+                    </div>
                 </div>
             </el-card>
         </div>
diff --git a/frontend/src/views/toolbox/supervisor/status/index.vue b/frontend/src/views/toolbox/supervisor/status/index.vue
index f6ce460de..9bd2b5277 100644
--- a/frontend/src/views/toolbox/supervisor/status/index.vue
+++ b/frontend/src/views/toolbox/supervisor/status/index.vue
@@ -2,11 +2,13 @@
     <div>
         <div class="app-status tool-status" v-if="data.isExist">
             <el-card>
-                <div>
-                    <el-tag effect="dark" type="success">{{ 'Supervisor' }}</el-tag>
-                    <Status class="status-content" :key="data.status" :status="data.status"></Status>
-                    <el-tag class="status-content">{{ $t('app.version') }}:{{ data.version }}</el-tag>
-                    <span class="buttons" v-if="!data.init">
+                <div class="flex w-full flex-col gap-4 md:flex-row">
+                    <div class="flex flex-wrap gap-4">
+                        <el-tag effect="dark" type="success">{{ 'Supervisor' }}</el-tag>
+                        <Status :key="data.status" :status="data.status"></Status>
+                        <el-tag>{{ $t('app.version') }}:{{ data.version }}</el-tag>
+                    </div>
+                    <div class="mt-0.5" v-if="!data.init">
                         <el-button type="primary" v-if="data.status != 'running'" link @click="onOperate('start')">
                             {{ $t('app.start') }}
                         </el-button>
@@ -21,7 +23,7 @@
                         <el-button type="primary" link @click="setting">
                             {{ $t('commons.button.set') }}
                         </el-button>
-                    </span>
+                    </div>
                     <span class="buttons" v-else>
                         <el-button type="primary" link @click="init">
                             {{ $t('commons.button.init') }}
diff --git a/frontend/src/views/website/website/status/index.vue b/frontend/src/views/website/website/status/index.vue
index 46787da24..bc0ce47e3 100644
--- a/frontend/src/views/website/website/status/index.vue
+++ b/frontend/src/views/website/website/status/index.vue
@@ -1,20 +1,22 @@
 <template>
     <div class="app-status">
         <el-card>
-            <div>
-                <el-tag effect="dark" type="success">{{ props.primaryDomain }}</el-tag>
-                <span class="status-content">
-                    <Status class="span-font" :key="props.status" :status="props.status"></Status>
-                </span>
-                <span class="status-content">
-                    <el-tag type="info">
-                        {{ $t('website.expireDate') }}:
-                        <span v-if="isEver(props.expireDate)">
-                            {{ $t('website.neverExpire') }}
-                        </span>
-                        <span v-else>{{ dateFormatSimple(props.expireDate) }}</span>
-                    </el-tag>
-                </span>
+            <div class="flex w-full flex-col gap-4 md:flex-row">
+                <div class="flex flex-wrap gap-4">
+                    <el-tag effect="dark" type="success">{{ props.primaryDomain }}</el-tag>
+                    <span>
+                        <Status class="span-font" :key="props.status" :status="props.status"></Status>
+                    </span>
+                    <span>
+                        <el-tag type="info">
+                            {{ $t('website.expireDate') }}:
+                            <span v-if="isEver(props.expireDate)">
+                                {{ $t('website.neverExpire') }}
+                            </span>
+                            <span v-else>{{ dateFormatSimple(props.expireDate) }}</span>
+                        </el-tag>
+                    </span>
+                </div>
             </div>
         </el-card>
     </div>