fix: 防火墙空状态页面样式优化 (#625)

frontend/src/components/app-status/index.vue

@@ -161,27 +161,3 @@ onMounted(() => {
     onCheck();
 });
 </script>
-
-<style lang="scss">
-.app-warn {
-    text-align: center;
-    margin-top: 100px;
-    span:first-child {
-        color: #bbbfc4;
-    }
-
-    span:nth-child(2) {
-        color: $primary-color;
-        cursor: pointer;
-    }
-
-    span:nth-child(2):hover {
-        color: #74a4f3;
-    }
-
-    img {
-        width: 300px;
-        height: 300px;
-    }
-}
-</style>

frontend/src/lang/modules/en.ts

@@ -1227,6 +1227,8 @@ const message = {
             'This certificate has been associated with the following websites, and the renewal will be applied to these websites simultaneously',
     },
     firewall: {
+        notSupport:
+            'No system firewall detected (firewalld or ufw). Please refer to the official documentation for installation.',
         ccDeny: 'CC Protection',
         ipWhiteList: 'IP Whitelist',
         ipBlockList: 'IP Blacklist',

frontend/src/lang/modules/zh.ts

@@ -1220,6 +1220,7 @@ const message = {
         createAcme: '创建账户',
     },
     firewall: {
+        notSupport: '未检测到系统防火墙（firewalld 或者 ufw），请参考官方文档进行安装',
         ccDeny: 'CC 防护',
         ipWhiteList: 'IP 白名单',
         ipBlockList: 'IP 黑名单',

frontend/src/styles/common.scss

@@ -302,3 +302,25 @@
 .table-link:hover {
     opacity: 0.6;
 }
+
+.app-warn {
+    text-align: center;
+    margin-top: 100px;
+    span:first-child {
+        color: #bbbfc4;
+    }
+
+    span:nth-child(2) {
+        color: $primary-color;
+        cursor: pointer;
+    }
+
+    span:nth-child(2):hover {
+        color: #74a4f3;
+    }
+
+    img {
+        width: 300px;
+        height: 300px;
+    }
+}

frontend/src/views/host/firewall/ip/index.vue

@@ -2,13 +2,16 @@
     <div v-loading="loading" style="position: relative">
         <FireRouter />
         <FireStatus
+            v-show="fireName !== '-'"
             ref="fireStatuRef"
             @search="search"
             v-model:loading="loading"
+            v-model:name="fireName"
             v-model:mask-show="maskShow"
             v-model:status="fireStatus"
         />
 
+        <div v-if="fireName !== '-'">
             <el-card v-if="fireStatus != 'running' && maskShow" class="mask-prompt">
                 <span>{{ $t('firewall.firewallNotStart') }}</span>
             </el-card>
@@ -79,6 +82,29 @@
                     </ComplexTable>
                 </template>
             </LayoutContent>
+        </div>
+        <div v-else>
+            <LayoutContent :title="$t('firewall.firewall')" :divider="true">
+                <template #main>
+                    <div class="app-warn">
+                        <div>
+                            <span>{{ $t('firewall.notSupport') }}</span>
+                            <el-link
+                                style="font-size: 12px; margin-left: 5px"
+                                @click="toDoc"
+                                icon="Position"
+                                type="primary"
+                            >
+                                {{ $t('firewall.quickJump') }}
+                            </el-link>
+                            <div>
+                                <img src="@/assets/images/no_app.svg" />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </LayoutContent>
+        </div>
 
         <OperatrDialog @search="search" ref="dialogRef" />
     </div>
@@ -102,6 +128,7 @@ const loading = ref();
 const activeTag = ref('address');
 const selects = ref<any>([]);
 const searchName = ref();
+const fireName = ref();
 
 const maskShow = ref(true);
 const fireStatus = ref('running');
@@ -153,6 +180,10 @@ const onOpenDialog = async (
     dialogRef.value!.acceptParams(params);
 };
 
+const toDoc = () => {
+    window.open('https://1panel.cn/docs/user_manual/hosts/firewall/', '_blank');
+};
+
 const onChangeStatus = async (row: Host.RuleInfo, status: string) => {
     let operation =
         status === 'accept'
@@ -244,7 +275,9 @@ const buttons = [
 ];
 
 onMounted(() => {
+    if (fireName.value !== '-') {
         loading.value = true;
         fireStatuRef.value.acceptParams();
+    }
 });
 </script>

frontend/src/views/host/firewall/port/index.vue

@@ -3,6 +3,7 @@
         <FireRouter />
 
         <FireStatus
+            v-show="fireName !== '-'"
             ref="fireStatuRef"
             @search="search"
             v-model:loading="loading"
@@ -10,7 +11,7 @@
             v-model:status="fireStatus"
             v-model:name="fireName"
         />
-
+        <div v-if="fireName !== '-'">
             <el-card v-if="fireStatus != 'running' && maskShow" class="mask-prompt">
                 <span>{{ $t('firewall.firewallNotStart') }}</span>
             </el-card>
@@ -73,7 +74,9 @@
                             <template #default="{ row }">
                                 <el-tag type="info" v-if="row.isUsed">
                                     {{
-                                    row.appName ? $t('firewall.used') + ' ( ' + row.appName + ' )' : $t('firewall.used')
+                                        row.appName
+                                            ? $t('firewall.used') + ' ( ' + row.appName + ' )'
+                                            : $t('firewall.used')
                                     }}
                                 </el-tag>
                                 <el-tag type="success" v-else>{{ $t('firewall.unUsed') }}</el-tag>
@@ -111,6 +114,29 @@
                     </ComplexTable>
                 </template>
             </LayoutContent>
+        </div>
+        <div v-else>
+            <LayoutContent :title="$t('firewall.firewall')" :divider="true">
+                <template #main>
+                    <div class="app-warn">
+                        <div>
+                            <span>{{ $t('firewall.notSupport') }}</span>
+                            <el-link
+                                style="font-size: 12px; margin-left: 5px"
+                                @click="toDoc"
+                                icon="Position"
+                                type="primary"
+                            >
+                                {{ $t('firewall.quickJump') }}
+                            </el-link>
+                            <div>
+                                <img src="@/assets/images/no_app.svg" />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </LayoutContent>
+        </div>
 
         <OperatrDialog @search="search" ref="dialogRef" />
     </div>
@@ -192,6 +218,9 @@ const onOpenDialog = async (
 const quickJump = () => {
     router.push({ name: 'ContainerSetting' });
 };
+const toDoc = () => {
+    window.open('https://1panel.cn/docs/user_manual/hosts/firewall/', '_blank');
+};
 
 const onChangeStatus = async (row: Host.RuleInfo, status: string) => {
     let operation =
@@ -300,7 +329,9 @@ const buttons = [
 ];
 
 onMounted(() => {
+    if (fireName.value !== '-') {
         loading.value = true;
         fireStatuRef.value.acceptParams();
+    }
 });
 </script>

frontend/src/views/host/firewall/status/index.vue

@@ -91,7 +91,7 @@ const onOperate = async (operation: string) => {
                     loadBaseInfo(true);
                 })
                 .catch(() => {
-                    emit('update:loading', false);
+                    loadBaseInfo(true);
                 });
         })
         .catch(() => {