Skip to content

Commit

Permalink
fix: 防火墙空状态页面优化
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssongliu
ssongliu committed Apr 14, 2023
1 parent 9603389 commit cbb5962
Show file tree
Hide file tree
Showing 7 changed files with 253 additions and 188 deletions.
24 changes: 0 additions & 24 deletions frontend/src/components/app-status/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 2 additions & 0 deletions frontend/src/lang/modules/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
1 change: 1 addition & 0 deletions frontend/src/lang/modules/zh.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1220,6 +1220,7 @@ const message = {
createAcme: '创建账户',
},
firewall: {
notSupport: '未检测到系统防火墙（firewalld 或者 ufw），请参考官方文档进行安装',
ccDeny: 'CC 防护',
ipWhiteList: 'IP 白名单',
ipBlockList: 'IP 黑名单',
Expand Down
22 changes: 22 additions & 0 deletions frontend/src/styles/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
171 changes: 102 additions & 69 deletions frontend/src/views/host/firewall/ip/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,83 +2,109 @@
<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"
/>

<el-card v-if="fireStatus != 'running' && maskShow" class="mask-prompt">
<span>{{ $t('firewall.firewallNotStart') }}</span>
</el-card>
<div v-if="fireName !== '-'">
<el-card v-if="fireStatus != 'running' && maskShow" class="mask-prompt">
<span>{{ $t('firewall.firewallNotStart') }}</span>
</el-card>

<LayoutContent :title="$t('firewall.ipRule')" :class="{ mask: fireStatus != 'running' }">
<template #toolbar>
<el-row>
<el-col :span="16">
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }} {{ $t('firewall.ipRule') }}
</el-button>
<el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
{{ $t('commons.button.delete') }}
</el-button>
</el-col>
<el-col :span="8">
<TableSetting @search="search()" />
<div class="search-button">
<el-input
v-model="searchName"
clearable
@clear="search()"
suffix-icon="Search"
@keyup.enter="search()"
@blur="search()"
:placeholder="$t('commons.button.search')"
></el-input>
</div>
</el-col>
</el-row>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
@search="search"
:data="data"
>
<el-table-column type="selection" fix />
<el-table-column :min-width="80" :label="$t('firewall.address')" prop="address">
<template #default="{ row }">
<span v-if="row.address && row.address !== 'Anywhere'">{{ row.address }}</span>
<span v-else>{{ $t('firewall.allIP') }}</span>
</template>
</el-table-column>
<el-table-column :min-width="80" :label="$t('firewall.strategy')" prop="strategy">
<template #default="{ row }">
<el-button
v-if="row.strategy === 'accept'"
@click="onChangeStatus(row, 'drop')"
link
type="success"
>
{{ $t('firewall.allow') }}
<LayoutContent :title="$t('firewall.ipRule')" :class="{ mask: fireStatus != 'running' }">
<template #toolbar>
<el-row>
<el-col :span="16">
<el-button type="primary" @click="onOpenDialog('create')">
{{ $t('commons.button.create') }} {{ $t('firewall.ipRule') }}
</el-button>
<el-button v-else link type="danger" @click="onChangeStatus(row, 'accept')">
{{ $t('firewall.deny') }}
<el-button @click="onDelete(null)" plain :disabled="selects.length === 0">
{{ $t('commons.button.delete') }}
</el-button>
</template>
</el-table-column>
<fu-table-operations
width="200px"
:buttons="buttons"
:ellipsis="10"
:label="$t('commons.table.operate')"
fix
/>
</ComplexTable>
</template>
</LayoutContent>
</el-col>
<el-col :span="8">
<TableSetting @search="search()" />
<div class="search-button">
<el-input
v-model="searchName"
clearable
@clear="search()"
suffix-icon="Search"
@keyup.enter="search()"
@blur="search()"
:placeholder="$t('commons.button.search')"
></el-input>
</div>
</el-col>
</el-row>
</template>
<template #main>
<ComplexTable
:pagination-config="paginationConfig"
v-model:selects="selects"
@search="search"
:data="data"
>
<el-table-column type="selection" fix />
<el-table-column :min-width="80" :label="$t('firewall.address')" prop="address">
<template #default="{ row }">
<span v-if="row.address && row.address !== 'Anywhere'">{{ row.address }}</span>
<span v-else>{{ $t('firewall.allIP') }}</span>
</template>
</el-table-column>
<el-table-column :min-width="80" :label="$t('firewall.strategy')" prop="strategy">
<template #default="{ row }">
<el-button
v-if="row.strategy === 'accept'"
@click="onChangeStatus(row, 'drop')"
link
type="success"
>
{{ $t('firewall.allow') }}
</el-button>
<el-button v-else link type="danger" @click="onChangeStatus(row, 'accept')">
{{ $t('firewall.deny') }}
</el-button>
</template>
</el-table-column>
<fu-table-operations
width="200px"
:buttons="buttons"
:ellipsis="10"
:label="$t('commons.table.operate')"
fix
/>
</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>
Expand All @@ -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');
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -244,7 +275,9 @@ const buttons = [
];
onMounted(() => {
loading.value = true;
fireStatuRef.value.acceptParams();
if (fireName.value !== '-') {
loading.value = true;
fireStatuRef.value.acceptParams();
}
});
</script>
Loading

0 comments on commit cbb5962

Please sign in to comment.