Feat/pseudo dhcp (#109)

* ✨ feat: pseudo dhcp
2025-12-12 20:57:26 +08:00 · 2024-05-17 23:16:56 +08:00
parent bad6a5946a
commit 0ead308392
14 changed files with 314 additions and 113 deletions
--- a/easytier-gui/locales/cn.yml
+++ b/easytier-gui/locales/cn.yml
@@ -4,6 +4,7 @@ public_server: 公共服务器
 manual: 手动
 standalone: 独立
 virtual_ipv4: 虚拟IPv4地址
+virtual_ipv4_dhcp: DHCP
 network_name: 网络名称
 network_secret: 网络密码
 public_server_url: 公共服务器地址
@@ -59,3 +60,4 @@ run_network: 运行网络
 stop_network: 停止网络
 network_running: 运行中
 network_stopped: 已停止
+dhcp_experimental_warning: 实验性警告！使用DHCP时如果组网环境中发生IP冲突，将自动更改IP。
--- a/easytier-gui/locales/en.yml
+++ b/easytier-gui/locales/en.yml
@@ -4,6 +4,7 @@ public_server: Public Server
 manual: Manual
 standalone: Standalone
 virtual_ipv4: Virtual IPv4
+virtual_ipv4_dhcp: DHCP
 network_name: Network Name
 network_secret: Network Secret
 public_server_url: Public Server URL
@@ -59,3 +60,4 @@ run_network: Run Network
 stop_network: Stop Network
 network_running: running
 network_stopped: stopped
+dhcp_experimental_warning: Experimental warning! if there is an IP conflict in the network when using DHCP, the IP will be automatically changed.
--- a/easytier-gui/src-tauri/src/main.rs
+++ b/easytier-gui/src-tauri/src/main.rs
@@ -41,6 +41,7 @@ impl Default for NetworkingMethod {
 struct NetworkConfig {
    instance_id: String,

+    dhcp: bool,
    virtual_ipv4: String,
    hostname: Option<String>,
    network_name: String,
@@ -53,7 +54,7 @@ struct NetworkConfig {
    proxy_cidrs: Vec<String>,

    enable_vpn_portal: bool,
-    vpn_portal_listne_port: i32,
+    vpn_portal_listen_port: i32,
    vpn_portal_client_network_addr: String,
    vpn_portal_client_network_len: i32,

@@ -72,18 +73,19 @@ impl NetworkConfig {
                .with_context(|| format!("failed to parse instance id: {}", self.instance_id))?,
        );
        cfg.set_hostname(self.hostname.clone());
+        cfg.set_dhcp(self.dhcp);
        cfg.set_inst_name(self.network_name.clone());
        cfg.set_network_identity(NetworkIdentity::new(
            self.network_name.clone(),
            self.network_secret.clone(),
        ));

-        if self.virtual_ipv4.len() > 0 {
-            cfg.set_ipv4(
-                self.virtual_ipv4.parse().with_context(|| {
+        if !self.dhcp {
+            if self.virtual_ipv4.len() > 0 {
+                cfg.set_ipv4(Some(self.virtual_ipv4.parse().with_context(|| {
                    format!("failed to parse ipv4 address: {}", self.virtual_ipv4)
-                })?,
-            )
+                })?))
+            }
        }

        match self.networking_method {
@@ -150,12 +152,12 @@ impl NetworkConfig {
                client_cidr: cidr
                    .parse()
                    .with_context(|| format!("failed to parse vpn portal client cidr: {}", cidr))?,
-                wireguard_listen: format!("0.0.0.0:{}", self.vpn_portal_listne_port)
+                wireguard_listen: format!("0.0.0.0:{}", self.vpn_portal_listen_port)
                    .parse()
                    .with_context(|| {
                        format!(
                            "failed to parse vpn portal wireguard listen port. {}",
-                            self.vpn_portal_listne_port
+                            self.vpn_portal_listen_port
                        )
                    })?,
            });
--- a/easytier-gui/src/components/Config.vue
+++ b/easytier-gui/src/components/Config.vue
@@ -2,7 +2,6 @@
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
 import { getOsHostname } from '~/composables/network'
-import { i18n } from '~/modules/i18n'
 import { NetworkingMethod } from '~/types/network'

 const props = defineProps<{
@@ -12,10 +11,12 @@ const props = defineProps<{

 defineEmits(['runNetwork'])

+const { t } = useI18n()
+
 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') },
+  { value: NetworkingMethod.PublicServer, label: t('public_server') },
+  { value: NetworkingMethod.Manual, label: t('manual') },
+  { value: NetworkingMethod.Standalone, label: t('standalone') },
 ])

 const networkStore = useNetworkStore()
@@ -56,14 +57,29 @@ onMounted(async () => {
 <template>
  <div class="flex flex-column h-full">
    <div class="flex flex-column">
+      <div class="w-7/12 self-center ">
+        <Message severity="warn">
+          {{ $t('dhcp_experimental_warning') }}
+        </Message>
+      </div>
      <div class="w-7/12 self-center ">
        <Panel :header="$t('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>
+                <div class="flex align-items-center" for="virtual_ip">
+                  <label class="mr-2"> {{ $t('virtual_ipv4') }} </label>
+                  <Checkbox v-model="curNetwork.dhcp" input-id="virtual_ip_auto" :binary="true" />
+
+                  <label for="virtual_ip_auto" class="ml-2">
+                    {{ t('virtual_ipv4_dhcp') }}
+                  </label>
+                </div>
                <InputGroup>
-                  <InputText id="virtual_ip" v-model="curNetwork.virtual_ipv4" aria-describedby="virtual_ipv4-help" />
+                  <InputText
+                    id="virtual_ip" v-model="curNetwork.virtual_ipv4" :disabled="curNetwork.dhcp"
+                    aria-describedby="virtual_ipv4-help"
+                  />
                  <InputGroupAddon>
                    <span>/24</span>
                  </InputGroupAddon>
@@ -112,7 +128,7 @@ onMounted(async () => {

        <Divider />

-        <Panel :header="$t('advanced_settings')" toggleable>
+        <Panel :header="$t('advanced_settings')" toggleable collapsed>
          <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">
@@ -154,7 +170,7 @@ onMounted(async () => {
                    </InputGroup>
                  </div>
                  <InputNumber
-                    v-if="curNetwork.enable_vpn_portal" v-model="curNetwork.vpn_portal_listne_port"
+                    v-if="curNetwork.enable_vpn_portal" v-model="curNetwork.vpn_portal_listen_port"
                    :placeholder="$t('vpn_portal_listen_port')" class="" :format="false" :min="0" :max="65535"
                  />
                </div>
--- a/easytier-gui/src/components/Status.vue
+++ b/easytier-gui/src/components/Status.vue
@@ -24,7 +24,7 @@ const curNetworkInst = computed(() => {

 const peerRouteInfos = computed(() => {
  if (curNetworkInst.value)
-    return curNetworkInst.value.detail.peer_route_pairs
+    return curNetworkInst.value.detail?.peer_route_pairs || []

  return []
 })
@@ -116,6 +116,13 @@ const myNodeInfoChips = computed(() => {
  if (!my_node_info)
    return chips

+  // virtual ipv4
+
+  chips.push({
+    label: `Virtual IPv4: ${my_node_info.virtual_ipv4}`,
+    icon: '',
+  } as Chip)
+
  // local ipv4s
  const local_ipv4s = my_node_info.ips?.interface_ipv4s
  for (const [idx, ip] of local_ipv4s?.entries()) {
@@ -290,82 +297,84 @@ function showEventLogs() {
      </template>
    </Card>

-    <Card v-if="!curNetworkInst?.error_msg">
-      <template #title>
-        {{ $t('my_node_info') }}
-      </template>
-      <template #content>
-        <div class="flex w-full flex-column gap-y-5">
-          <div class="m-0 flex flex-row justify-center gap-x-5">
-            <div
-              class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
-              style="border: 1px solid green"
-            >
-              <div class="font-bold">
-                {{ $t('peer_count') }}
+    <template v-else>
+      <Card>
+        <template #title>
+          {{ $t('my_node_info') }}
+        </template>
+        <template #content>
+          <div class="flex w-full flex-column gap-y-5">
+            <div class="m-0 flex flex-row justify-center gap-x-5">
+              <div
+                class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
+                style="border: 1px solid green"
+              >
+                <div class="font-bold">
+                  {{ $t('peer_count') }}
+                </div>
+                <div class="text-5xl mt-1">
+                  {{ peerCount }}
+                </div>
              </div>
-              <div class="text-5xl mt-1">
-                {{ peerCount }}
+
+              <div
+                class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
+                style="border: 1px solid purple"
+              >
+                <div class="font-bold">
+                  {{ $t('upload') }}
+                </div>
+                <div class="text-xl mt-2">
+                  {{ txRate }}/s
+                </div>
+              </div>
+
+              <div
+                class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
+                style="border: 1px solid fuchsia"
+              >
+                <div class="font-bold">
+                  {{ $t('download') }}
+                </div>
+                <div class="text-xl mt-2">
+                  {{ rxRate }}/s
+                </div>
              </div>
            </div>

-            <div
-              class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
-              style="border: 1px solid purple"
-            >
-              <div class="font-bold">
-                {{ $t('upload') }}
-              </div>
-              <div class="text-xl mt-2">
-                {{ txRate }}/s
-              </div>
+            <div class="flex flex-row align-items-center flex-wrap w-full">
+              <Chip
+                v-for="(chip, i) in myNodeInfoChips" :key="i" :label="chip.label" :icon="chip.icon"
+                class="mr-2 mt-2"
+              />
            </div>

-            <div
-              class="rounded-full w-32 h-32 flex flex-column align-items-center pt-4"
-              style="border: 1px solid fuchsia"
-            >
-              <div class="font-bold">
-                {{ $t('download') }}
-              </div>
-              <div class="text-xl mt-2">
-                {{ rxRate }}/s
-              </div>
+            <div v-if="myNodeInfo" class="m-0 flex flex-row justify-center gap-x-5 text-sm">
+              <Button severity="info" :label="$t('show_vpn_portal_config')" @click="showVpnPortalConfig" />
+              <Button severity="info" :label="$t('show_event_log')" @click="showEventLogs" />
            </div>
          </div>
+        </template>
+      </Card>

-          <div class="flex flex-row align-items-center flex-wrap w-full">
-            <Chip
-              v-for="(chip, i) in myNodeInfoChips" :key="i" :label="chip.label" :icon="chip.icon"
-              class="mr-2 mt-2"
-            />
-          </div>
+      <Divider />

-          <div v-if="myNodeInfo" class="m-0 flex flex-row justify-center gap-x-5 text-sm">
-            <Button severity="info" :label="$t('show_vpn_portal_config')" @click="showVpnPortalConfig" />
-            <Button severity="info" :label="$t('show_event_log')" @click="showEventLogs" />
-          </div>
-        </div>
-      </template>
-    </Card>
-
-    <Divider />
-
-    <Card v-if="!curNetworkInst?.error_msg">
-      <template #title>
-        {{ $t('peer_info') }}
-      </template>
-      <template #content>
-        <DataTable :value="peerRouteInfos" column-resize-mode="fit" table-style="width: 100%">
-          <Column field="route.ipv4_addr" style="width: 100px;" :header="$t('virtual_ipv4')" />
-          <Column field="route.hostname" style="max-width: 250px;" :header="$t('hostname')" />
-          <Column :field="routeCost" style="width: 100px;" :header="$t('route_cost')" />
-          <Column :field="latencyMs" style="width: 80px;" :header="$t('latency')" />
-          <Column :field="txBytes" style="width: 80px;" :header="$t('upload_bytes')" />
-          <Column :field="rxBytes" style="width: 80px;" :header="$t('download_bytes')" />
-          <Column :field="lossRate" style="width: 100px;" :header="$t('loss_rate')" />
-        </DataTable>
-      </template>
-    </Card>
+      <Card>
+        <template #title>
+          {{ $t('peer_info') }}
+        </template>
+        <template #content>
+          <DataTable :value="peerRouteInfos" column-resize-mode="fit" table-style="width: 100%">
+            <Column field="route.ipv4_addr" style="width: 100px;" :header="$t('virtual_ipv4')" />
+            <Column field="route.hostname" style="max-width: 250px;" :header="$t('hostname')" />
+            <Column :field="routeCost" style="width: 100px;" :header="$t('route_cost')" />
+            <Column :field="latencyMs" style="width: 80px;" :header="$t('latency')" />
+            <Column :field="txBytes" style="width: 80px;" :header="$t('upload_bytes')" />
+            <Column :field="rxBytes" style="width: 80px;" :header="$t('download_bytes')" />
+            <Column :field="lossRate" style="width: 100px;" :header="$t('loss_rate')" />
+          </DataTable>
+        </template>
+      </Card>
+    </template>
  </div>
 </template>
--- a/easytier-gui/src/pages/index.vue
+++ b/easytier-gui/src/pages/index.vue
@@ -52,7 +52,6 @@ enum Severity {

 const messageBarSeverity = ref(Severity.None)
 const messageBarContent = ref('')
-
 const toast = useToast()

 const networkStore = useNetworkStore()
@@ -108,12 +107,8 @@ onMounted(() => {
 })
 onUnmounted(() => clearInterval(intervalId))

-const curNetworkHasInstance = computed(() => {
-  return networkStore.networkInstanceIds.includes(networkStore.curNetworkId)
-})
-
 const activeStep = computed(() => {
-  return curNetworkHasInstance.value ? 1 : 0
+  return networkStore.networkInstanceIds.includes(networkStore.curNetworkId) ? 1 : 0
 })

 const setting_menu = ref()
@@ -190,8 +185,12 @@ function isRunning(id: string) {
                <div class="flex items-start content-center">
                  <div class="mr-3">
                    <span>{{ slotProps.value.network_name }}</span>
-                    <span v-if="isRunning(slotProps.value.instance_id)" class="ml-3">
-                      {{ slotProps.value.virtual_ipv4 }}
+                    <span
+                      v-if="isRunning(slotProps.value.instance_id) && networkStore.instances[slotProps.value.instance_id].detail && (networkStore.instances[slotProps.value.instance_id].detail?.my_node_info.virtual_ipv4 !== '')"
+                      class="ml-3"
+                    >
+                      {{ networkStore.instances[slotProps.value.instance_id].detail
+                        ? networkStore.instances[slotProps.value.instance_id].detail?.my_node_info.virtual_ipv4 : '' }}
                    </span>
                  </div>
                  <Tag
--- a/easytier-gui/src/stores/network.ts
+++ b/easytier-gui/src/stores/network.ts
@@ -56,7 +56,7 @@ export const useNetworkStore = defineStore('networkStore', {
        instance_id: instanceId,
        running: false,
        error_msg: '',
-        detail: {} as NetworkInstanceRunningInfo,
+        detail: undefined,
      }
    },

--- a/easytier-gui/src/styles.css
+++ b/easytier-gui/src/styles.css
@@ -31,3 +31,18 @@
  border-radius: 10px;
  margin-bottom: 1rem;
 }
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+  background-color: #0000005d;
+}
--- a/easytier-gui/src/types/network.ts
+++ b/easytier-gui/src/types/network.ts
@@ -9,6 +9,7 @@ export enum NetworkingMethod {
 export interface NetworkConfig {
  instance_id: string

+  dhcp: boolean
  virtual_ipv4: string
  hostname?: string
  network_name: string
@@ -17,18 +18,18 @@ export interface NetworkConfig {
  networking_method: NetworkingMethod

  public_server_url: string
-  peer_urls: Array<string>
+  peer_urls: string[]

-  proxy_cidrs: Array<string>
+  proxy_cidrs: string[]

  enable_vpn_portal: boolean
-  vpn_portal_listne_port: number
+  vpn_portal_listen_port: number
  vpn_portal_client_network_addr: string
  vpn_portal_client_network_len: number

  advanced_settings: boolean

-  listener_urls: Array<string>
+  listener_urls: string[]
  rpc_port: number
 }

@@ -36,8 +37,9 @@ export function DEFAULT_NETWORK_CONFIG(): NetworkConfig {
  return {
    instance_id: uuidv4(),

+    dhcp: false,
    virtual_ipv4: '',
-    network_name: 'default',
+    network_name: 'easytier',
    network_secret: '',

    networking_method: NetworkingMethod.PublicServer,
@@ -48,7 +50,7 @@ export function DEFAULT_NETWORK_CONFIG(): NetworkConfig {
    proxy_cidrs: [],

    enable_vpn_portal: false,
-    vpn_portal_listne_port: 22022,
+    vpn_portal_listen_port: 22022,
    vpn_portal_client_network_addr: '',
    vpn_portal_client_network_len: 24,

@@ -59,7 +61,7 @@ export function DEFAULT_NETWORK_CONFIG(): NetworkConfig {
      'udp://0.0.0.0:11010',
      'wg://0.0.0.0:11011',
    ],
-    rpc_port: 15888,
+    rpc_port: 0,
  }
 }

@@ -69,7 +71,7 @@ export interface NetworkInstance {
  running: boolean
  error_msg: string

-  detail: NetworkInstanceRunningInfo
+  detail?: NetworkInstanceRunningInfo
 }

 export interface NetworkInstanceRunningInfo {