:art:基本功能完善
This commit is contained in:
coward
251
src/views/server/server.vue
Normal file
251
src/views/server/server.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user