From c0e0db670cf4e5b3d8dd853dbccb72d818d0db84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=98=AD?= <81747598+lan-yonghui@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:03:50 +0800
Subject: [PATCH] feat: Adjust the empty status prompt layout (#7350)

---
 frontend/src/components/app-status/index.vue        |  2 +-
 frontend/src/views/database/mysql/index.vue         | 12 ++++++------
 frontend/src/views/database/postgresql/index.vue    | 12 ++++++------
 frontend/src/views/database/redis/index.vue         | 12 ++++++------
 frontend/src/views/host/firewall/forward/index.vue  | 12 ++++++------
 frontend/src/views/host/firewall/ip/index.vue       | 13 +++++++------
 frontend/src/views/host/firewall/port/index.vue     | 12 ++++++------
 frontend/src/views/toolbox/clam/status/index.vue    | 12 ++++++------
 frontend/src/views/toolbox/fail2ban/index.vue       | 12 ++++++------
 frontend/src/views/toolbox/ftp/index.vue            | 12 ++++++------
 .../src/views/toolbox/supervisor/status/index.vue   | 12 ++++++------
 11 files changed, 62 insertions(+), 61 deletions(-)

diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index c40f4c4b3..4371ca39b 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -92,7 +92,7 @@
                         <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <div>{{ $t('app.checkInstalledWarn', [data.app]) }}</div>
                             <span @click="goRouter(key)" class="flex items-center justify-center gap-0.5">
-                                <el-icon class="flex items-center justify-center"><Position /></el-icon>
+                                <el-icon><Position /></el-icon>
                                 {{ $t('database.goInstall') }}
                             </span>
                         </div>
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 2e8002cf0..f216f7dc9 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -229,15 +229,15 @@
             <LayoutContent :title="'MySQL ' + $t('menu.database')" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div>
+                        <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <span>{{ $t('app.checkInstalledWarn', [$t('database.noMysql')]) }}</span>
-                            <span @click="goRouter('app')">
-                                <el-icon class="ml-2"><Position /></el-icon>
+                            <span @click="goRouter('app')" class="flex items-center justify-center gap-0.5">
+                                <el-icon><Position /></el-icon>
                                 {{ $t('database.goInstall') }}
                             </span>
-                            <div>
-                                <img src="@/assets/images/no_app.svg" />
-                            </div>
+                        </div>
+                        <div>
+                            <img src="@/assets/images/no_app.svg" />
                         </div>
                     </div>
                 </template>
diff --git a/frontend/src/views/database/postgresql/index.vue b/frontend/src/views/database/postgresql/index.vue
index f127d3d78..185af7f20 100644
--- a/frontend/src/views/database/postgresql/index.vue
+++ b/frontend/src/views/database/postgresql/index.vue
@@ -189,15 +189,15 @@
             <LayoutContent :title="'PostgreSQL ' + $t('menu.database')" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div>
+                        <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <span>{{ $t('app.checkInstalledWarn', [$t('database.noPostgresql')]) }}</span>
-                            <span @click="goRouter('app')">
-                                <el-icon class="ml-2"><Position /></el-icon>
+                            <span @click="goRouter('app')" class="flex items-center justify-center gap-0.5">
+                                <el-icon><Position /></el-icon>
                                 {{ $t('database.goInstall') }}
                             </span>
-                            <div>
-                                <img src="@/assets/images/no_app.svg" />
-                            </div>
+                        </div>
+                        <div>
+                            <img src="@/assets/images/no_app.svg" />
                         </div>
                     </div>
                 </template>
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index 39cc43614..9fcb087af 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -99,15 +99,15 @@
             <LayoutContent :title="'Redis ' + $t('menu.database')" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div>
+                        <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <span>{{ $t('app.checkInstalledWarn', ['Redis']) }}</span>
-                            <span @click="goRouter('app')">
-                                <el-icon class="ml-2"><Position /></el-icon>
+                            <span @click="goRouter('app')" class="flex items-center justify-center gap-0.5">
+                                <el-icon><Position /></el-icon>
                                 {{ $t('database.goInstall') }}
                             </span>
-                            <div>
-                                <img src="@/assets/images/no_app.svg" />
-                            </div>
+                        </div>
+                        <div>
+                            <img src="@/assets/images/no_app.svg" />
                         </div>
                     </div>
                 </template>
diff --git a/frontend/src/views/host/firewall/forward/index.vue b/frontend/src/views/host/firewall/forward/index.vue
index f5a009002..da4332900 100644
--- a/frontend/src/views/host/firewall/forward/index.vue
+++ b/frontend/src/views/host/firewall/forward/index.vue
@@ -61,15 +61,15 @@
                 <LayoutContent :title="$t('firewall.firewall')" :divider="true">
                     <template #main>
                         <div class="app-warn">
-                            <div>
+                            <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                                 <span>{{ $t('firewall.notSupport') }}</span>
-                                <span @click="toDoc">
-                                    <el-icon class="ml-2"><Position /></el-icon>
+                                <span @click="toDoc" class="flex items-center justify-center gap-0.5">
+                                    <el-icon><Position /></el-icon>
                                     {{ $t('firewall.quickJump') }}
                                 </span>
-                                <div>
-                                    <img src="@/assets/images/no_app.svg" />
-                                </div>
+                            </div>
+                            <div>
+                                <img src="@/assets/images/no_app.svg" />
                             </div>
                         </div>
                     </template>
diff --git a/frontend/src/views/host/firewall/ip/index.vue b/frontend/src/views/host/firewall/ip/index.vue
index 161e78015..a61af4fe6 100644
--- a/frontend/src/views/host/firewall/ip/index.vue
+++ b/frontend/src/views/host/firewall/ip/index.vue
@@ -99,15 +99,15 @@
                 <LayoutContent :title="$t('firewall.firewall')" :divider="true">
                     <template #main>
                         <div class="app-warn">
-                            <div>
+                            <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                                 <span>{{ $t('firewall.notSupport') }}</span>
-                                <span @click="toDoc">
-                                    <el-icon class="ml-2"><Position /></el-icon>
+                                <span @click="toDoc" class="flex items-center justify-center gap-0.5">
+                                    <el-icon><Position /></el-icon>
                                     {{ $t('firewall.quickJump') }}
                                 </span>
-                                <div>
-                                    <img src="@/assets/images/no_app.svg" />
-                                </div>
+                            </div>
+                            <div>
+                                <img src="@/assets/images/no_app.svg" />
                             </div>
                         </div>
                     </template>
@@ -130,6 +130,7 @@ import { Host } from '@/api/interface/host';
 import { ElMessageBox } from 'element-plus';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
+import {Position} from "@element-plus/icons-vue";
 
 const loading = ref();
 const activeTag = ref('address');
diff --git a/frontend/src/views/host/firewall/port/index.vue b/frontend/src/views/host/firewall/port/index.vue
index b26100b9a..b9ddfa43a 100644
--- a/frontend/src/views/host/firewall/port/index.vue
+++ b/frontend/src/views/host/firewall/port/index.vue
@@ -149,15 +149,15 @@
                 <LayoutContent :title="$t('firewall.firewall')" :divider="true">
                     <template #main>
                         <div class="app-warn">
-                            <div>
+                            <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                                 <span>{{ $t('firewall.notSupport') }}</span>
-                                <span @click="toDoc">
-                                    <el-icon class="ml-2"><Position /></el-icon>
+                                <span @click="toDoc" class="flex items-center justify-center gap-0.5">
+                                    <el-icon><Position /></el-icon>
                                     {{ $t('firewall.quickJump') }}
                                 </span>
-                                <div>
-                                    <img src="@/assets/images/no_app.svg" />
-                                </div>
+                            </div>
+                            <div>
+                                <img src="@/assets/images/no_app.svg" />
                             </div>
                         </div>
                     </template>
diff --git a/frontend/src/views/toolbox/clam/status/index.vue b/frontend/src/views/toolbox/clam/status/index.vue
index da9862233..28dec602a 100644
--- a/frontend/src/views/toolbox/clam/status/index.vue
+++ b/frontend/src/views/toolbox/clam/status/index.vue
@@ -76,15 +76,15 @@
         <LayoutContent :title="$t('toolbox.clam.clam')" :divider="true" v-if="!data.isExist" v-loading="loading">
             <template #main>
                 <div class="app-warn">
-                    <div>
+                    <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                         <span v-if="!data.isExist">{{ $t('toolbox.clam.noClam') }}</span>
-                        <span @click="toDoc()" v-if="!data.isExist">
-                            <el-icon class="ml-2"><Position /></el-icon>
+                        <span @click="toDoc()" v-if="!data.isExist" class="flex items-center justify-center gap-0.5">
+                            <el-icon><Position /></el-icon>
                             {{ $t('firewall.quickJump') }}
                         </span>
-                        <div>
-                            <img alt="" src="@/assets/images/no_app.svg" />
-                        </div>
+                    </div>
+                    <div>
+                        <img alt="" src="@/assets/images/no_app.svg" />
                     </div>
                 </div>
             </template>
diff --git a/frontend/src/views/toolbox/fail2ban/index.vue b/frontend/src/views/toolbox/fail2ban/index.vue
index d4491c438..4eb624b00 100644
--- a/frontend/src/views/toolbox/fail2ban/index.vue
+++ b/frontend/src/views/toolbox/fail2ban/index.vue
@@ -149,15 +149,15 @@
             <LayoutContent title="Fail2ban" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div>
+                        <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <span>{{ $t('toolbox.fail2ban.noFail2ban') }}</span>
-                            <span @click="toDoc">
-                                <el-icon class="ml-2"><Position /></el-icon>
+                            <span @click="toDoc" class="flex items-center justify-center gap-0.5">
+                                <el-icon><Position /></el-icon>
                                 {{ $t('firewall.quickJump') }}
                             </span>
-                            <div>
-                                <img src="@/assets/images/no_app.svg" />
-                            </div>
+                        </div>
+                        <div>
+                            <img src="@/assets/images/no_app.svg" />
                         </div>
                     </div>
                 </template>
diff --git a/frontend/src/views/toolbox/ftp/index.vue b/frontend/src/views/toolbox/ftp/index.vue
index 08a02fa33..014fd20de 100644
--- a/frontend/src/views/toolbox/ftp/index.vue
+++ b/frontend/src/views/toolbox/ftp/index.vue
@@ -148,15 +148,15 @@
             <LayoutContent title="FTP" :divider="true">
                 <template #main>
                     <div class="app-warn">
-                        <div>
+                        <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                             <span>{{ $t('toolbox.ftp.noFtp') }}</span>
-                            <span @click="toDoc">
-                                <el-icon class="ml-2"><Position /></el-icon>
+                            <span @click="toDoc" class="flex items-center justify-center gap-0.5">
+                                <el-icon><Position /></el-icon>
                                 {{ $t('firewall.quickJump') }}
                             </span>
-                            <div>
-                                <img src="@/assets/images/no_app.svg" />
-                            </div>
+                        </div>
+                        <div>
+                            <img src="@/assets/images/no_app.svg" />
                         </div>
                     </div>
                 </template>
diff --git a/frontend/src/views/toolbox/supervisor/status/index.vue b/frontend/src/views/toolbox/supervisor/status/index.vue
index 9bd2b5277..6f66ff0ad 100644
--- a/frontend/src/views/toolbox/supervisor/status/index.vue
+++ b/frontend/src/views/toolbox/supervisor/status/index.vue
@@ -40,17 +40,17 @@
         >
             <template #main>
                 <div class="app-warn">
-                    <div>
+                    <div class="flex flex-col gap-2 items-center justify-center w-full sm:flex-row">
                         <span v-if="!data.isExist">{{ $t('tool.supervisor.notSupport') }}</span>
                         <span v-else-if="!data.ctlExist">{{ $t('tool.supervisor.notSupportCrl') }}</span>
                         <span v-else-if="data.init">{{ $t('tool.supervisor.initHelper') }}</span>
-                        <span @click="toDoc()" v-if="!data.isExist || !data.ctlExist">
-                            <el-icon class="ml-2"><Position /></el-icon>
+                        <span @click="toDoc()" v-if="!data.isExist || !data.ctlExist" class="flex items-center justify-center gap-0.5">
+                            <el-icon><Position /></el-icon>
                             {{ $t('firewall.quickJump') }}
                         </span>
-                        <div>
-                            <img alt="" src="@/assets/images/no_app.svg" />
-                        </div>
+                    </div>
+                    <div>
+                        <img alt="" src="@/assets/images/no_app.svg" />
                     </div>
                 </div>
             </template>