252 lines
7.5 KiB
Vue
252 lines
7.5 KiB
Vue
<script setup lang="tsx">
|
|
import { reactive, ref } from "vue";
|
|
import type { FormInstance } from "element-plus";
|
|
import { useServerStoreHook } from "@/store/modules/server";
|
|
import { serverFormRules } from "@/views/server/utils/rules";
|
|
import { useGlobalSettingStoreHook } from "@/store/modules/globalSetting";
|
|
import { getPublicIP } from "@/api/server";
|
|
|
|
defineOptions({
|
|
// name 作为一种规范最好必须写上并且和路由的name保持一致
|
|
name: "Server"
|
|
});
|
|
|
|
const serverFormRef = ref<FormInstance>();
|
|
|
|
let serverForm = reactive({
|
|
id: "",
|
|
ipScope: "",
|
|
listenPort: 0,
|
|
privateKey: "",
|
|
publicKey: "",
|
|
postUpScript: "",
|
|
preDownScript: "",
|
|
postDownScript: ""
|
|
});
|
|
|
|
const configFormRef = ref<FormInstance>();
|
|
let configForm = reactive({
|
|
endpointAddress: "",
|
|
dnsServer: [],
|
|
MTU: 0,
|
|
persistentKeepalive: 0,
|
|
firewallMark: "",
|
|
table: "",
|
|
configFilePath: ""
|
|
});
|
|
|
|
// 获取服务端信息接口
|
|
const getServerApi = () => {
|
|
useServerStoreHook()
|
|
.getServerApi()
|
|
.then(res => {
|
|
if (res.code === 200) {
|
|
const data = useServerStoreHook().getServerInfo;
|
|
serverForm.id = data.id || "";
|
|
serverForm.ipScope = data.ipScope || "";
|
|
serverForm.listenPort = data.listenPort || 0;
|
|
serverForm.privateKey = data.privateKey || "";
|
|
serverForm.publicKey = data.publicKey || "";
|
|
serverForm.postUpScript = data.postUpScript || "";
|
|
serverForm.preDownScript = data.preDownScript || "";
|
|
serverForm.postDownScript = data.postDownScript || "";
|
|
}
|
|
});
|
|
};
|
|
|
|
// 更新服务端信息
|
|
const updateServerApi = (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return;
|
|
formEl.validate((valid, fields) => {
|
|
if (!valid) return fields;
|
|
useServerStoreHook()
|
|
.updateServerApi(serverForm)
|
|
.then(res => {
|
|
if (res.code === 200) {
|
|
getServerApi();
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
// 获取全局配置
|
|
const getGlobalSettingApi = () => {
|
|
useGlobalSettingStoreHook()
|
|
.getGlobalSettingApi()
|
|
.then(res => {
|
|
if (res.code === 200) {
|
|
const data = useGlobalSettingStoreHook().getGlobalSetting;
|
|
configForm.endpointAddress = data.endpointAddress || "";
|
|
configForm.dnsServer = data.dnsServer || [];
|
|
configForm.MTU = data.MTU || 0;
|
|
configForm.persistentKeepalive = data.persistentKeepalive || 0;
|
|
configForm.firewallMark = data.firewallMark || "";
|
|
configForm.table = data.table || "";
|
|
configForm.configFilePath = data.configFilePath || "";
|
|
}
|
|
});
|
|
};
|
|
|
|
// 更新全局配置
|
|
const updateGlobalSettingApi = (formEl: FormInstance | undefined) => {
|
|
if (!formEl) return;
|
|
formEl.validate((valid, fields) => {
|
|
if (!valid) return fields;
|
|
useGlobalSettingStoreHook()
|
|
.updateGlobalSettingApi(configForm)
|
|
.then(res => {
|
|
if (res.code === 200) {
|
|
getGlobalSettingApi();
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
// 获取当前主机的公网IP
|
|
const getPublicIPApi = () => {
|
|
getPublicIP().then(res => {
|
|
if (res.code === 200) {
|
|
useGlobalSettingStoreHook().SET_ENDPOINT_ADDRESS(res.data.IP);
|
|
configForm.endpointAddress =
|
|
useGlobalSettingStoreHook().getEndpointAddress;
|
|
}
|
|
});
|
|
};
|
|
|
|
getServerApi();
|
|
getGlobalSettingApi();
|
|
</script>
|
|
|
|
<template>
|
|
<el-row :gutter="10">
|
|
<el-col :span="10" style="padding-left: 50px">
|
|
<el-card class="left-card" style="max-width: 800px">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>服务端信息</span>
|
|
</div>
|
|
</template>
|
|
<div class="server-form">
|
|
<el-form
|
|
ref="serverFormRef"
|
|
:model="serverForm"
|
|
:rules="serverFormRules"
|
|
label-position="top"
|
|
>
|
|
<el-form-item prop="ipScope" label="子网IP段">
|
|
<el-input v-model="serverForm.ipScope" />
|
|
</el-form-item>
|
|
<el-form-item prop="listenPort" label="监听端口">
|
|
<el-input-number
|
|
v-model="serverForm.listenPort"
|
|
:min="49152"
|
|
:max="65535"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="privateKey" label="私钥">
|
|
<el-input v-model="serverForm.privateKey" disabled />
|
|
</el-form-item>
|
|
<el-form-item prop="publicKey" label="公钥">
|
|
<el-input v-model="serverForm.publicKey" disabled />
|
|
</el-form-item>
|
|
<el-form-item prop="postUpScript" label="postUpScript">
|
|
<el-input v-model="serverForm.postUpScript" />
|
|
</el-form-item>
|
|
<el-form-item prop="postDownScript" label="postDownScript">
|
|
<el-input v-model="serverForm.preDownScript" />
|
|
</el-form-item>
|
|
<el-form-item prop="postDownScript" label="postDownScript">
|
|
<el-input v-model="serverForm.postDownScript" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="updateServerApi(serverFormRef)"
|
|
>确认</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="10" style="padding-left: 50px">
|
|
<el-card style="max-width: 800px">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<span>全局配置信息</span>
|
|
</div>
|
|
</template>
|
|
<el-form ref="configFormRef" :model="configForm" label-position="top">
|
|
<el-form-item prop="endpointAddress" label="endpointAddress">
|
|
<el-input v-model="configForm.endpointAddress" />
|
|
<el-button size="small" type="warning" class="getIp" @click="getPublicIPApi">获取IP</el-button>
|
|
</el-form-item>
|
|
<el-form-item prop="dnsServer" label="dnsServer">
|
|
<el-select
|
|
v-model="configForm.dnsServer"
|
|
:clearable="true"
|
|
:reserve-keyword="false"
|
|
suffix-icon=""
|
|
tag-type="success"
|
|
popper-class="options-class"
|
|
placeholder=""
|
|
multiple
|
|
filterable
|
|
allow-create
|
|
default-first-option
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item prop="MTU" label="MTU">
|
|
<el-input v-model="configForm.MTU" />
|
|
</el-form-item>
|
|
<el-form-item prop="persistentKeepalive" label="persistentKeepalive">
|
|
<el-input v-model="configForm.persistentKeepalive" />
|
|
</el-form-item>
|
|
<el-form-item prop="firewallMark" label="firewallMark">
|
|
<el-input v-model="configForm.firewallMark" />
|
|
</el-form-item>
|
|
<el-form-item prop="table" label="table">
|
|
<el-input v-model="configForm.table" />
|
|
</el-form-item>
|
|
<el-form-item prop="configFilePath" label="configFilePath">
|
|
<el-input v-model="configForm.configFilePath" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
type="primary"
|
|
@click="updateGlobalSettingApi(configFormRef)"
|
|
>确认</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
<style lang="scss">
|
|
.options-class {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.el-row {
|
|
margin-bottom: 30px;
|
|
margin-left: 20px;
|
|
}
|
|
.el-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.el-col {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.grid-content {
|
|
border-radius: 4px;
|
|
min-height: 36px;
|
|
}
|
|
.options-class {
|
|
display: none;
|
|
}
|
|
.getIp{
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|