🎨添加静态打包
This commit is contained in:
229
web/src/components/page/ClientListHeaderPage.vue
Normal file
229
web/src/components/page/ClientListHeaderPage.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user