add portforward config to gui (#1198)

* Added port forwarding to the GUI interface
* Separated port forwarding into a separate drop-down menu

easytier-web/frontend-lib/src/components/Config.vue

@@ -2,7 +2,13 @@
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
 import { SelectButton, Checkbox, InputText, InputNumber, AutoComplete, Panel, Divider, ToggleButton, Button, Password } from 'primevue'
-import { DEFAULT_NETWORK_CONFIG, NetworkConfig, NetworkingMethod } from '../types/network'
+import {
+  addRow,
+  DEFAULT_NETWORK_CONFIG,
+  NetworkConfig,
+  NetworkingMethod,
+  removeRow
+} from '../types/network'
 import { defineProps, defineEmits, ref, } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -163,6 +169,8 @@ const bool_flags: BoolFlag[] = [
   { field: 'enable_private_mode', help: 'enable_private_mode_help' },
 ]
 
+const portForwardProtocolOptions = ref(["tcp","udp"]);
+
 </script>
 
 <template>
@@ -416,6 +424,73 @@ const bool_flags: BoolFlag[] = [
             </div>
           </Panel>
 
+          <Divider />
+
+          <Panel :header="t('port_forwards')" toggleable collapsed>
+            <div class="flex flex-col gap-y-2">
+              <div class="flex flex-row gap-x-9 flex-wrap w-full">
+                <div class="flex flex-col gap-2 grow p-fluid">
+                  <div class="flex">
+                    <label for="port_forwards">{{ t('port_forwards_help') }}</label>
+                  </div>
+                  <div v-for="(row, index) in curNetwork.port_forwards" class="form-row">
+                    <div style="display: flex; gap: 0.5rem; align-items: flex-end;">
+                      <SelectButton v-model="row.proto" :options="portForwardProtocolOptions" :allow-empty="false"/>
+                      <div style="flex-grow: 4;">
+                        <InputGroup>
+                          <InputText
+                              v-model="row.bind_ip"
+                              :placeholder="t('port_forwards_bind_addr')"
+                          />
+                          <InputGroupAddon>
+                            <span style="font-weight: bold">:</span>
+                          </InputGroupAddon>
+                          <InputNumber v-model="row.bind_port" :format="false"
+                                       inputId="horizontal-buttons" :step="1" mode="decimal" :min="1"
+                                       :max="65535" fluid
+                                       class="max-w-20"/>
+                        </InputGroup>
+                      </div>
+                      <div style="flex-grow: 4;">
+                        <InputGroup>
+                          <InputText
+                              v-model="row.dst_ip"
+                              :placeholder="t('port_forwards_dst_addr')"
+                          />
+                          <InputGroupAddon>
+                            <span style="font-weight: bold">:</span>
+                          </InputGroupAddon>
+                          <InputNumber v-model="row.dst_port" :format="false"
+                                       inputId="horizontal-buttons" :step="1" mode="decimal" :min="1"
+                                       :max="65535" fluid
+                                       class="max-w-20"/>
+                        </InputGroup>
+                      </div>
+                      <div style="flex-grow: 1;">
+                        <Button
+                            v-if="curNetwork.port_forwards.length > 0"
+                            icon="pi pi-trash"
+                            severity="danger"
+                            text
+                            rounded
+                            @click="removeRow(index,curNetwork.port_forwards)"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div class="flex justify-content-end mt-4">
+                    <Button
+                        icon="pi pi-plus"
+                        :label="t('port_forwards_add_btn')"
+                        severity="success"
+                        @click="addRow(curNetwork.port_forwards)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Panel>
+
           <div class="flex pt-6 justify-center">
             <Button :label="t('run_network')" icon="pi pi-arrow-right" icon-pos="right" :disabled="configInvalid"
               @click="$emit('runNetwork', curNetwork)" />

easytier-web/frontend-lib/src/locales/cn.yaml

@@ -150,6 +150,12 @@ socks5_help: |
 
 exit_nodes: 出口节点列表
 exit_nodes_help: 转发所有流量的出口节点，虚拟IPv4地址，优先级由列表顺序决定
+  
+port_forwards: 端口转发
+port_forwards_help: "将本地端口转发到虚拟网络中的远程端口。例如：udp://0.0.0.0:12345/10.126.126.1:23456，表示将本地UDP端口12345转发到虚拟网络中的10.126.126.1:23456。可以指定多个。"
+port_forwards_bind_addr: "绑定地址，如：0.0.0.0"
+port_forwards_dst_addr: "目标地址，如：10.126.126.1"
+port_forwards_add_btn: "添加"
 
 mtu: MTU
 mtu_help: |

easytier-web/frontend-lib/src/locales/en.yaml

@@ -151,6 +151,12 @@ socks5_help: |
 exit_nodes: Exit Nodes
 exit_nodes_help: Exit nodes to forward all traffic to, a virtual ipv4 address, priority is determined by the order of the list
 
+port_forwards: Port Forward
+port_forwards_help: "forward local port to remote port in virtual network. e.g.: udp://0.0.0.0:12345/10.126.126.1:23456, means forward local udp port 12345 to 10.126.126.1:23456 in the virtual network. can specify multiple."
+port_forwards_bind_addr: "Bind address, e.g.: 0.0.0.0"
+port_forwards_dst_addr: "Destination address, e.g.: 10.126.126.1"
+port_forwards_add_btn: "Add"
+
 mtu: MTU
 mtu_help: |
   MTU of the TUN device, default is 1380 for non-encryption, 1360 for encryption. Range:400-1380

easytier-web/frontend-lib/src/types/network.ts

@@ -70,6 +70,8 @@ export interface NetworkConfig {
   enable_private_mode?: boolean
 
   rpc_portal_whitelists: string[]
+  
+  port_forwards: PortForwardConfig[]
 }
 
 export function DEFAULT_NETWORK_CONFIG(): NetworkConfig {
@@ -132,6 +134,7 @@ export function DEFAULT_NETWORK_CONFIG(): NetworkConfig {
     enable_magic_dns: false,
     enable_private_mode: false,
     rpc_portal_whitelists: [],
+    port_forwards: [],
   }
 }
 
@@ -255,6 +258,30 @@ export interface PeerConnStats {
   latency_us: number
 }
 
+export interface PortForwardConfig {
+  bind_ip: string,
+  bind_port: number,
+  dst_ip: string,
+  dst_port: number,
+  proto: string
+}
+
+// 添加新行
+export const addRow = (rows: PortForwardConfig[]) => {
+  rows.push({
+    proto: 'tcp',
+    bind_ip: '',
+    bind_port: 65535,
+    dst_ip: '',
+    dst_port: 65535,
+  });
+};
+
+// 删除行
+export const removeRow = (index: number, rows: PortForwardConfig[]) => {
+  rows.splice(index, 1);
+};
+
 export enum EventType {
   TunDeviceReady = 'TunDeviceReady', // string
   TunDeviceError = 'TunDeviceError', // string