gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-31 14:08:06 +08:00
Code

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

Browse Source
This commit is contained in:
ssongliu 2023-04-14 15:08:51 +08:00 committed by GitHub
parent 975663f0ff
commit 4c8fc1defa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 254 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/app-status/index.vue
View File

@ -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>

2
frontend/src/lang/modules/en.ts
View File

@ -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',

1
frontend/src/lang/modules/zh.ts
View File

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

22
frontend/src/styles/common.scss
View File

@ -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;
}
}

33
frontend/src/views/host/firewall/ip/index.vue
View File

@ -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>

35
frontend/src/views/host/firewall/port/index.vue
View File

@ -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>

2
frontend/src/views/host/firewall/status/index.vue
View File

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