apps/EasyTier
1
0
Fork 0
mirror of https://github.com/EasyTier/EasyTier.git synced 2025-10-06 09:16:56 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🌈 style: eslint lint

Browse Source
This commit is contained in:
m1m1sha
2024-05-06 11:08:51 +08:00
parent 6f75dd72b9
commit c66939249f
16 changed files with 602 additions and 568 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
easytier-gui/src/components/Config.vue
View File

@@ -1,39 +1,37 @@
<script setup lang="ts">
import InputGroup from "primevue/inputgroup";
import InputGroupAddon from "primevue/inputgroupaddon";
import { i18n } from "~/modules/i18n";
import { NetworkingMethod } from "~/types/network";
import InputGroup from 'primevue/inputgroup'
import InputGroupAddon from 'primevue/inputgroupaddon'
import { i18n } from '~/modules/i18n'
import { NetworkingMethod } from '~/types/network'
const props = defineProps<{
configInvalid?: boolean
instanceId?: string
}>()
defineEmits(['runNetwork'])
const networking_methods = ref([
{ value: NetworkingMethod.PublicServer, label: i18n.global.t('public_server') },
{ value: NetworkingMethod.Manual, label: i18n.global.t('manual') },
{ value: NetworkingMethod.Standalone, label: i18n.global.t('standalone') },
]);
])
const props = defineProps<{
configInvalid?: boolean,
instanceId?: string,
}>()
defineEmits(["runNetwork"]);
const networkStore = useNetworkStore();
const networkStore = useNetworkStore()
const curNetwork = computed(() => {
if (props.instanceId) {
console.log("instanceId", props.instanceId);
const c = networkStore.networkList.find(n => n.instance_id == props.instanceId);
if (c != undefined) {
return c;
}
// console.log('instanceId', props.instanceId)
const c = networkStore.networkList.find(n => n.instance_id === props.instanceId)
if (c !== undefined)
return c
}
return networkStore.curNetwork;
});
return networkStore.curNetwork
})
const presetPublicServers = [
"tcp://easytier.public.kkrainbow.top:11010",
];
'tcp://easytier.public.kkrainbow.top:11010',
]
</script>
<template>
@@ -41,9 +39,7 @@ const presetPublicServers = [
<div class="flex flex-column">
<div class="w-10/12 max-w-fit self-center ">
<Panel header="Basic Settings">
<div class="flex flex-column gap-y-2">
<div class="flex flex-row gap-x-9 flex-wrap">
<div class="flex flex-column gap-2 basis-5/12 grow">
<label for="virtual_ip">{{ $t('virtual_ipv4') }}</label>
@@ -63,8 +59,10 @@ const presetPublicServers = [
</div>
<div class="flex flex-column gap-2 basis-5/12 grow">
<label for="network_secret">{{ $t('network_secret') }}</label>
<InputText id="network_secret" v-model="curNetwork.network_secret"
aria-describedby=" network_secret-help" />
<InputText
id="network_secret" v-model="curNetwork.network_secret"
aria-describedby=" network_secret-help"
/>
</div>
</div>
@@ -72,15 +70,21 @@ const presetPublicServers = [
<div class="flex flex-column gap-2 basis-5/12 grow">
<label for="nm">{{ $t('networking_method') }}</label>
<div class="items-center flex flex-row p-fluid gap-x-1">
<Dropdown v-model="curNetwork.networking_method" :options="networking_methods" optionLabel="label"
optionValue="value" placeholder="Select Method" class="" />
<Chips id="chips" v-model="curNetwork.peer_urls"
:placeholder="$t('chips_placeholder', ['tcp://8.8.8.8:11010'])" separator=" " class="grow"
v-if="curNetwork.networking_method == NetworkingMethod.Manual" />
<Dropdown
v-model="curNetwork.networking_method" :options="networking_methods" option-label="label"
option-value="value" placeholder="Select Method" class=""
/>
<Chips
v-if="curNetwork.networking_method === NetworkingMethod.Manual" id="chips"
v-model="curNetwork.peer_urls" :placeholder="$t('chips_placeholder', ['tcp://8.8.8.8:11010'])"
separator=" " class="grow"
/>
<Dropdown :editable="true" v-model="curNetwork.public_server_url" class="grow"
<Dropdown
v-if="curNetwork.networking_method === NetworkingMethod.PublicServer"
v-model="curNetwork.public_server_url" :editable="true" class="grow"
:options="presetPublicServers"
v-if="curNetwork.networking_method == NetworkingMethod.PublicServer" />
/>
</div>
</div>
</div>
@@ -88,8 +92,10 @@ const presetPublicServers = [
<div class="flex flex-row gap-x-9 flex-wrap w-full">
<div class="flex flex-column gap-2 grow p-fluid">
<label for="username">{{ $t('proxy_cidrs') }}</label>
<Chips id="chips" v-model="curNetwork.proxy_cidrs"
:placeholder="$t('chips_placeholder', ['10.0.0.0/24'])" separator=" " class="w-full" />
<Chips
id="chips" v-model="curNetwork.proxy_cidrs"
:placeholder="$t('chips_placeholder', ['10.0.0.0/24'])" separator=" " class="w-full"
/>
</div>
</div>
@@ -97,24 +103,29 @@ const presetPublicServers = [
<div class="flex flex-column gap-2 grow">
<label for="username">VPN Portal</label>
<div class="items-center flex flex-row gap-x-4">
<ToggleButton onIcon="pi pi-check" offIcon="pi pi-times" v-model="curNetwork.enable_vpn_portal"
:onLabel="$t('off_text')" :offLabel="$t('on_text')" />
<div class="grow" v-if="curNetwork.enable_vpn_portal">
<ToggleButton
v-model="curNetwork.enable_vpn_portal" on-icon="pi pi-check" off-icon="pi pi-times"
:on-label="$t('off_text')" :off-label="$t('on_text')"
/>
<div v-if="curNetwork.enable_vpn_portal" class="grow">
<InputGroup>
<InputText :placeholder="$t('vpn_portal_client_network')"
v-model="curNetwork.vpn_portal_client_network_addr" />
<InputText
v-model="curNetwork.vpn_portal_client_network_addr"
:placeholder="$t('vpn_portal_client_network')"
/>
<InputGroupAddon>
<span>/{{ curNetwork.vpn_portal_client_network_len }}</span>
</InputGroupAddon>
</InputGroup>
</div>
<InputNumber :placeholder="$t('vpn_portal_listen_port')" class="" v-if="curNetwork.enable_vpn_portal"
:format="false" v-model="curNetwork.vpn_portal_listne_port" :min="0" :max="65535" />
<InputNumber
v-if="curNetwork.enable_vpn_portal" v-model="curNetwork.vpn_portal_listne_port"
:placeholder="$t('vpn_portal_listen_port')" class="" :format="false" :min="0" :max="65535"
/>
</div>
</div>
</div>
</div>
</Panel>
<Divider />
@@ -124,17 +135,20 @@ const presetPublicServers = [
<div class="flex flex-row gap-x-9 flex-wrap w-full">
<div class="flex flex-column gap-2 grow p-fluid">
<label for="listener_urls">{{ $t('listener_urls') }}</label>
<Chips id="listener_urls" v-model="curNetwork.listener_urls"
:placeholder="$t('chips_placeholder', ['tcp://1.1.1.1:11010'])" separator=" " class="w-full" />
<Chips
id="listener_urls" v-model="curNetwork.listener_urls"
:placeholder="$t('chips_placeholder', ['tcp://1.1.1.1:11010'])" separator=" " class="w-full"
/>
</div>
</div>
<div class="flex flex-row gap-x-9 flex-wrap">
<div class="flex flex-column gap-2 basis-5/12 grow">
<label for="rpc_port">{{ $t('rpc_port') }}</label>
<InputNumber id="rpc_port" v-model="curNetwork.rpc_port" aria-describedby="username-help"
:format="false" :min="0" :max="65535" />
<InputNumber
id="rpc_port" v-model="curNetwork.rpc_port" aria-describedby="username-help"
:format="false" :min="0" :max="65535"
/>
</div>
</div>
</div>
@@ -142,10 +156,11 @@ const presetPublicServers = [
<Divider />
<div class="flex pt-4 justify-content-center">
<Button :label="$t('run_network')" icon="pi pi-arrow-right" iconPos="right"
@click="$emit('runNetwork', curNetwork)" :disabled="configInvalid" />
<Button
:label="$t('run_network')" icon="pi pi-arrow-right" icon-pos="right" :disabled="configInvalid"
@click="$emit('runNetwork', curNetwork)"
/>
</div>
</div>
</div>