From a1b531da305056afa8e157b981711866e248e990 Mon Sep 17 00:00:00 2001
From: lan-yonghui <yonghui.lan@fit2cloud.com>
Date: Thu, 12 Dec 2024 16:52:41 +0800
Subject: [PATCH] feat: Adjust the empty status prompt layout
---
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 c40f4c4b346d..4371ca39b604 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 2e8002cf056f..f216f7dc95dd 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 f127d3d78144..185af7f2044c 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 39cc4361494e..9fcb087af289 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 f5a0090021e0..da43329009b0 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 161e78015eb2..a61af4fe696d 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 b26100b9a6af..b9ddfa43a731 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 da98622334dc..28dec602a8cd 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 d4491c4385c3..4eb624b000dc 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 08a02fa3357a..014fd20decbd 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 9bd2b5277dd2..6f66ff0adcd7 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>