wireguard-dashboard/web/src/components/page/ClientListHeaderPage.vue
coward 12e551b4e9
Some checks failed
continuous-integration/drone/tag Build is failing
🎨添加静态打包
2024-08-21 09:10:01 +08:00

229 lines
6.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<AppPage :show-footer="showFooter">
<header v-if="showHeader" mt-10 mb-20 min-h-45 flex items-center justify-between px-15>
<slot v-if="$slots.header" name="header" />
<template v-else>
<n-card style="margin-left: 1.65%; width: 97.25%">
<n-space justify="end">
<n-button size="small" style="float: right" type="info" @click="addClient">添加</n-button>
<n-button size="small" style="float: right" type="primary" @click="refreshList">刷新</n-button>
</n-space>
</n-card>
<slot name="action" />
</template>
</header>
<div>
<slot />
</div>
</AppPage>
<n-modal
style="width: 25%"
v-model:show="addModalShow"
preset="card"
title="添加"
header-style="margin-left: 40%"
>
<n-form
ref="addModalFormRef"
:rules="addModalFormRules"
:model="addModalForm"
label-placement="left"
label-width="auto"
label-align="left"
require-mark-placement="right"
>
<n-form-item label="名称" path="name">
<n-input v-model:value="addModalForm.name"/>
</n-form-item>
<n-form-item label="邮箱" path="email">
<n-input v-model:value="addModalForm.email"/>
</n-form-item>
<n-form-item label="IP" path="addModalForm.ipAllocation">
<n-select
v-model:value="addModalForm.ipAllocation"
filterable
multiple
tag
placeholder="输入,按回车确认"
:show-arrow="false"
:show="false"
/>
</n-form-item>
<n-form-item label="可访问IP" path="allowedIps">
<n-select
v-model:value="addModalForm.allowedIps"
filterable
multiple
tag
placeholder="输入,按回车确认"
:show-arrow="false"
:show="false"
/>
</n-form-item>
<n-form-item label="可访问IP扩展" path="extraAllowedIps">
<n-select
v-model:value="addModalForm.extraAllowedIps"
filterable
multiple
tag
placeholder="输入,按回车确认"
:show-arrow="false"
:show="false"
/>
</n-form-item>
<n-form-item label="服务端DNS" path="useServerDns">
<n-radio value="1" :checked="addModalForm.useServerDns === 1" @change="addModalForm.useServerDns = 1"></n-radio>
<n-radio value="0" :checked="addModalForm.useServerDns === 0" @change="addModalForm.useServerDns = 0"></n-radio>
</n-form-item>
<n-form-item label="公钥" path="keys.publicKey">
<n-input v-model:value="addModalForm.keys.publicKey"></n-input>
</n-form-item>
<n-form-item label="私钥" path="keys.privateKey">
<n-input v-model:value="addModalForm.keys.privateKey"></n-input>
</n-form-item>
<n-form-item label="共享密钥" path="keys.presharedKey">
<n-input v-model:value="addModalForm.keys.presharedKey"></n-input>
</n-form-item>
<n-form-item>
<n-button style="margin-left: 28%" size="small" type="info" @click="generateKeys">生成密钥对</n-button>
</n-form-item>
<n-form-item label="状态" path="editModalForm.enabled">
<n-radio-group :value="addModalForm.enabled">
<n-radio :value="1" :checked="addModalForm.enabled === 1" @change="addModalForm.enabled = 1">启用</n-radio>
<n-radio :value="0" :checked="addModalForm.enabled === 0" @change="addModalForm.enabled = 0">禁用</n-radio>
</n-radio-group>
</n-form-item>
<n-form-item label="离线监听" path="offlineMonitoring">
<n-radio-group :value="addModalForm.offlineMonitoring">
<n-radio :value="1" :checked="addModalForm.offlineMonitoring === 1" @change="addModalForm.offlineMonitoring = 1">启用</n-radio>
<n-radio :value="0" :checked="addModalForm.offlineMonitoring === 0" @change="addModalForm.offlineMonitoring = 0">禁用</n-radio>
</n-radio-group>
</n-form-item>
<n-button type="info" style="margin-left: 40%" @click="confirmAddClient()">确认</n-button>
</n-form>
</n-modal>
</template>
<script setup>
import clientApi from '@/views/client/api'
import { NButton } from 'naive-ui'
import { debounce } from '@/utils'
defineProps({
showFooter: {
type: Boolean,
default: false,
},
showHeader: {
type: Boolean,
default: true,
},
title: {
type: String,
default: undefined,
},
})
const route = useRoute()
const addModalShow = ref(false)
// 添加模态框的form ref
const addModalFormRef = ref()
// 添加模态框的form rules
const addModalFormRules = {
name: [
{ required: true, message: '名称不能为空', trigger: 'blur' }
],
ipAllocation: [
{ required: true, message: '客户端IP不能为空', trigger: 'change' }
],
keys: {
privateKey: [
{ required: true, message: '密钥不能为空', trigger: 'blur' }
],
publicKey: [
{ required: true, message: '公钥不能为空', trigger: 'blur' }
],
presharedKey: [
{ required: true, message: '共享密钥不能为空', trigger: 'blur' }
],
},
enabled: [
{ required: true, message: '状态不能为空', trigger: 'change' }
]
}
// 添加模态框的数据集
const addModalForm = ref({
id: '',
name: '',
email: '',
ipAllocation: [],
allowedIps: [],
extraAllowedIps: [],
useServerDns: 0,
keys: {
privateKey: '',
publicKey: '',
presharedKey: ''
},
enabled: 1,
offlineMonitoring: 1
})
// 点击确认按钮
async function confirmAddClient() {
addModalFormRef.value.validate(async (valid) => {
if (valid) {
return valid
}
clientApi.saveClient(addModalForm.value).then((response) => {
if (response.data.code === 200) {
refreshList()
addModalShow.value = false
}
})
})
}
// 添加客户端
const addClient = debounce(() => {
generateClientIPS()
addModalShow.value = true
},300)
// 生成密钥对
function generateKeys() {
clientApi.generateClientKeys().then(res => {
if (res.data.code === 200) {
addModalForm.value.keys.privateKey = res.data.data.privateKey
addModalForm.value.keys.publicKey = res.data.data.publicKey
addModalForm.value.keys.presharedKey = res.data.data.presharedKey
}
})
}
// 生成客户端IP
function generateClientIPS() {
clientApi.generateClientIP().then(res => {
if (res.data.code === 200) {
addModalForm.value.ipAllocation = res.data.data.clientIPS
addModalForm.value.allowedIps = res.data.data.serverIPS
generateKeys()
}
})
}
// 刷新列表
function refreshList() {
clientApi.clientList({
current: 1,
size: 8
})
}
</script>