Merge branch 'develop'

README.md

@@ -99,22 +99,25 @@
 
 **捐赠名单**
 
-| 🕰 时间      | 📡 平台 | 🤲 捐赠者    | 💰 金额 | ✉️ 捐赠留言            |
+| 🕰 时间      | 📡 平台 | 🤲 捐赠者    | 💰 金额 | ✉️ 捐赠留言                  |
-|------------|-------|-----------|-------|--------------------|
+|------------|-------|-----------|-------|--------------------------|
-| 2024-08-06 | 微信    | 三木        | 1 元   | 无                  |
+| 2024-08-06 | 微信    | 三木        | 1 元   | 无                        |
-| 2024-08-25 | 微信    | 晚风        | 1 元   | 无                  |
+| 2024-08-25 | 微信    | 晚风        | 1 元   | 无                        |
-| 2024-08-27 | 微信    | x         | 1 元   | 无                  |
+| 2024-08-27 | 微信    | x         | 1 元   | 无                        |
-| 2024-10-09 | 微信    | 解脱        | 20 元  | 无                  |
+| 2024-10-09 | 微信    | 解脱        | 20 元  | 无                        |
-| 2024-10-09 | 微信    | KMDN      | 20 元  | 无                  |
+| 2024-10-09 | 微信    | KMDN      | 20 元  | 无                        |
-| 2024-10-14 | 微信    | 121       | 5 元   | 无                  |
+| 2024-10-14 | 微信    | 121       | 5 元   | 无                        |
-| 2024-10-14 | 微信    | Different | 10 元  | 感谢您的开源             |
+| 2024-10-14 | 微信    | Different | 10 元  | 感谢您的开源                   |
-| 2024-10-16 | 微信    | 。 。 。     | 50 元  | 感谢开源的frp软件         |
+| 2024-10-16 | 微信    | 。 。 。     | 50 元  | 感谢开源的frp软件               |
-| 2024-11-2  | 微信    | gesoft    | 10 元  | 加油                 |
+| 2024-11-2  | 微信    | gesoft    | 10 元  | 加油                       |
-| 2024-11-7  | 微信    | *进        | 10 元  | 谢谢，可见可得，省心省力       |
+| 2024-11-7  | 微信    | *进        | 10 元  | 谢谢，可见可得，省心省力             |
-| 2024-11-8  | 微信    | **创       | 10 元  | 无                  |
+| 2024-11-8  | 微信    | **创       | 10 元  | 无                        |
-| 2024-11-20 | 微信    | 一東        | 20 元  | 请你喝咖啡              |
+| 2024-11-20 | 微信    | 一東        | 20 元  | 请你喝咖啡                    |
-| 2024-11-20 | 微信    | KEVINSKH  | 10 元  | 感谢开发方便快捷的图形化操作界面👍 |
+| 2024-11-20 | 微信    | KEVINSKH  | 10 元  | 感谢开发方便快捷的图形化操作界面👍       |
-| 2024-11-26 | 微信    |           | 3 元   | 无                  |
+| 2024-11-26 | 微信    |           | 3 元   | 无                        |
+| 2024-11-26 | 微信    | Kaori     | 1 元   | 谢谢大佬的项目，要是能添加web控制页面就更好了 |
+| 2024-12-03 | 微信    | 17¥       | 20 元  | 谢谢，很方便的软件                |
+| 2024-12-03 | 微信    | Cr@k3r    | 5 元   | 感谢你的工作                   |
 
 ## 贡献者
 

electron/api/config.ts

@@ -144,7 +144,9 @@ export const initConfigApi = win => {
       metaToken: sourceConfig?.metadatas?.token || "",
       systemSelfStart: false,
       systemStartupConnect: false,
-      systemSilentStartup: false
+      systemSilentStartup: false,
+      webEnable: true,
+      webPort: sourceConfig?.webServer?.port || 57400
     };
     let frpcProxys = [];
     // 解析proxy

electron/api/frpc.ts

@@ -56,7 +56,8 @@ ${
     : ""
 }
 [[${
-      (m.type === "stcp" || m.type === "xtcp") && m.stcpModel === "visitors"
+      (m.type === "stcp" || m.type === "xtcp" || m.type === "sudp") &&
+      m.stcpModel === "visitors"
         ? "visitors"
         : "proxies"
     }]]
@@ -98,6 +99,7 @@ httpPassword = "${m.httpPassword}"
         break;
       case "stcp":
       case "xtcp":
+      case "sudp":
         if (m.stcpModel === "visitors") {
           // 访问者
           toml += `
@@ -169,7 +171,7 @@ log.to = "frpc.log"
 log.level = "${config.logLevel}"
 log.maxDays = ${config.logMaxDays}
 webServer.addr = "127.0.0.1"
-webServer.port = 57400
+webServer.port = ${config.webPort}
 transport.tls.enable = ${config.tlsConfigEnable}
 ${
   config.tlsConfigEnable && config.tlsConfigCertFile
@@ -252,6 +254,7 @@ httpPassword = "${m.httpPassword}"
         break;
       case "stcp":
       case "xtcp":
+      case "sudp":
         if (m.stcpModel === "visitors") {
           // 访问者
           ini += `
@@ -322,7 +325,7 @@ log_file = "frpc.log"
 log_level = ${config.logLevel}
 log_max_days = ${config.logMaxDays}
 admin_addr = 127.0.0.1
-admin_port = 57400
+admin_port = ${config.webPort}
 tls_enable = ${config.tlsConfigEnable}
 
 ${

electron/api/github.ts

@@ -119,7 +119,8 @@ export const initGitHubApi = () => {
   ipcMain.on("github.getFrpVersions", async event => {
     const request = net.request({
       method: "get",
-      url: "https://api.github.com/repos/fatedier/frp/releases?page=1&per_page=1000"
+      // url: "https://api.github.com/repos/fatedier/frp/releases?page=1&per_page=1000"
+      url: "https://api.jwinks.com/github/releases"
     });
     request.on("response", response => {
       let responseData: Buffer = Buffer.alloc(0);

electron/api/logger.ts

@@ -1,4 +1,4 @@
-import { app, ipcMain } from "electron";
+import { app, ipcMain, shell } from "electron";
 
 const fs = require("fs");
 const path = require("path");
@@ -28,4 +28,17 @@ export const initLoggerApi = () => {
       }
     });
   });
+
+  ipcMain.on("logger.openLog", (event, args) => {
+    console.log('正在打开日志');
+    shell.openPath(logPath).then((errorMessage) => {
+      if (errorMessage) {
+        console.error('Failed to open Logger:', errorMessage);
+        event.reply("Logger.openLog.hook", false);
+      } else {
+        console.log('Logger opened successfully');
+        event.reply("Logger.openLog.hook", true);
+      }
+    });
+  });
 };

package.json

@@ -11,7 +11,10 @@
     "frp",
     "frpc",
     "proxy",
-    "electron-app"
+    "electron-app",
+    "vue",
+    "vue3",
+    "vite"
   ],
   "engines": {
     "node": ">= 18"

src/components/IconifyIcon/src/offlineIcon.ts

@@ -1,10 +1,5 @@
 import {addIcon} from "@iconify/vue/dist/offline";
 
-/**
- * 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
- */
-
-// 本地菜单图标，后端在路由的icon中返回对应的图标字符串并且前端在此处使用addIcon添加即可渲染菜单图标
 import Cloud from "@iconify-icons/material-symbols/cloud";
 import RocketLaunchRounded from "@iconify-icons/material-symbols/rocket-launch-rounded";
 import Download from "@iconify-icons/material-symbols/download-2";
@@ -17,7 +12,6 @@ import MoreVert from "@iconify-icons/material-symbols/more-vert";
 import Add from "@iconify-icons/material-symbols/add";
 import BringYourOwnIpRounded from "@iconify-icons/material-symbols/bring-your-own-ip-rounded";
 import DeleteRounded from "@iconify-icons/material-symbols/delete-rounded";
-import RefreshRounded from "@iconify-icons/material-symbols/refresh-rounded";
 import CancelPresentation from "@iconify-icons/material-symbols/cancel-presentation";
 import GestureSelect from "@iconify-icons/material-symbols/gesture-select";
 import SaveRounded from "@iconify-icons/material-symbols/save-rounded";
@@ -36,6 +30,10 @@ import deviceReset from "@iconify-icons/material-symbols/device-reset";
 import switchAccessOutlineRounded from "@iconify-icons/material-symbols/switch-access-outline-rounded";
 import switchAccessRounded from "@iconify-icons/material-symbols/switch-access-rounded";
 import chargerRounded from "@iconify-icons/material-symbols/charger-rounded";
+import fileOpenRounded from "@iconify-icons/material-symbols/file-open-rounded";
+import attachMoneyRounded from "@iconify-icons/material-symbols/attach-money-rounded";
+import volunteerActivismSharp from "@iconify-icons/material-symbols/volunteer-activism-sharp";
+import description from "@iconify-icons/material-symbols/description";
 
 addIcon("cloud", Cloud);
 addIcon("rocket-launch-rounded", RocketLaunchRounded);
@@ -52,7 +50,6 @@ addIcon("delete-rounded", DeleteRounded);
 addIcon("cancel-presentation", CancelPresentation);
 addIcon("gesture-select", GestureSelect);
 addIcon("save-rounded", SaveRounded);
-addIcon("refresh-rounded", RefreshRounded);
 addIcon("info", Info);
 addIcon("question-mark", QuestionMark);
 addIcon("check-circle-rounded", CheckCircleRounded);
@@ -67,5 +64,8 @@ addIcon("downloadRounded", downloadRounded);
 addIcon("deviceReset", deviceReset);
 addIcon("switchAccessOutlineRounded", switchAccessOutlineRounded);
 addIcon("switchAccessRounded", switchAccessRounded);
-
+addIcon("file-open-rounded", fileOpenRounded);
+addIcon("attach-money-rounded", attachMoneyRounded);
+addIcon("volunteer-activism-sharp", volunteerActivismSharp);
+addIcon("description", description);
 

src/layout/compoenets/LeftMenu.vue

@@ -118,14 +118,28 @@ onMounted(() => {
         ></IconifyIconOffline>
       </li>
     </ul>
-    <div
+    <div class="menu-footer mb-2">
-      class="version mb-2 animate__animated"
+<!--      <div-->
-      @click="handleOpenGitHubReleases"
+<!--        class="menu animate__animated"-->
-      :data-step="guideSteps.Version?.step"
+<!--        @click="handleOpenGitHubReleases"-->
-      :data-intro="guideSteps.Version?.intro"
+<!--        :data-step="guideSteps.Version?.step"-->
-      data-position="top"
+<!--        :data-intro="guideSteps.Version?.intro"-->
-    >
+<!--        data-position="top"-->
-      {{ pkg.version }}
+<!--      >-->
+<!--        <IconifyIconOffline-->
+<!--          class="animate__animated"-->
+<!--          icon="attach-money-rounded"-->
+<!--        ></IconifyIconOffline>-->
+<!--      </div>-->
+      <div
+        class="version animate__animated"
+        @click="handleOpenGitHubReleases"
+        :data-step="guideSteps.Version?.step"
+        :data-intro="guideSteps.Version?.intro"
+        data-position="top"
+      >
+        {{ pkg.version }}
+      </div>
     </div>
   </div>
 </template>

src/styles/layout.scss

@@ -54,11 +54,18 @@ $danger-color: #F56C6C;
   display: flex; /* 设置为 flexbox */
   flex-direction: column; /* 纵向排列子元素 */
 
+  .menu-footer {
+    margin-top: auto;
+
+  }
+
   .version {
     height: 40px;
+    width: 60px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     color: $primary-color;
-    text-align: center;
-    margin-top: auto;
     font-weight: bold;
     font-size: 14px;
     cursor: pointer;
@@ -68,7 +75,7 @@ $danger-color: #F56C6C;
     animation: heartBeat 1s;
   }
 
-  .menu-container {
+  .menu-container, .menu-footer {
 
     .menu {
       display: flex;

src/views/about/index.vue

@@ -44,6 +44,22 @@ const handleOpenGitHub = () => {
   ipcRenderer.send("common.openUrl", "https://github.com/luckjiawei/frpc-desktop")
 }
 
+/**
+ * 打开捐赠界面
+ */
+const handleOpenDonate = () => {
+  ipcRenderer.send("common.openUrl", "https://jwinks.com/donate")
+}
+
+
+/**
+ * 打开文档
+ */
+const handleOpenDoc = () => {
+  ipcRenderer.send("common.openUrl", "https://jwinks.com/p/frp")
+}
+
+
 /**
  * 获取最后一个版本
  */
@@ -124,6 +140,14 @@ defineComponent({
           </p>
         </div>
         <div class="mt-[12px]">
+          <el-button plain type="success" @click="handleOpenDoc">
+            <IconifyIconOffline class="cursor-pointer mr-2" icon="description"/>
+            使用教程
+          </el-button>
+          <el-button plain type="success" @click="handleOpenDonate">
+            <IconifyIconOffline class="cursor-pointer mr-2" icon="volunteer-activism-sharp"/>
+            捐赠名单
+          </el-button>
           <el-button plain type="primary" @click="handleOpenGitHub">
             <Icon class="cursor-pointer mr-2" icon="logos:github-icon"/>
             仓库地址

src/views/config/index.vue

@@ -45,7 +45,9 @@ const defaultFormData = ref<FrpConfig>({
   user: "",
   metaToken: "",
   transportHeartbeatInterval: 30,
-  transportHeartbeatTimeout: 90
+  transportHeartbeatTimeout: 90,
+  webEnable: true,
+  webPort: 57400
 });
 
 const formData = ref<FrpConfig>(defaultFormData.value);
@@ -113,6 +115,12 @@ const rules = reactive<FormRules>({
   ],
   transportHeartbeatTimeout: [
     { required: true, message: "心跳超时时间不能为空", trigger: "change" }
+  ],
+  webEnable: [
+    { required: true, message: "web界面开关不能为空", trigger: "change" }
+  ],
+  webPort: [
+    { required: true, message: "web界面端口不能为空", trigger: "change" }
   ]
 });
 
@@ -187,6 +195,10 @@ onMounted(() => {
           data.transportHeartbeatTimeout =
             defaultFormData.value.transportHeartbeatTimeout;
         }
+        if (data.webEnable == null || data.webEnable == undefined) {
+          data.webEnable = true;
+          data.webPort = 57400;
+        }
         formData.value = data;
       }
     }
@@ -687,7 +699,7 @@ onUnmounted(() => {
               <div class="h2">TLS Config</div>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="是否启用TLS：" prop="tlsConfigEnable">
+              <el-form-item label="启用TLS：" prop="tlsConfigEnable">
                 <el-switch
                   active-text="开"
                   inline-prompt
@@ -876,7 +888,7 @@ onUnmounted(() => {
               <div class="h2">代理</div>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="是否启动代理：" prop="proxyConfigEnable">
+              <el-form-item label="启用代理：" prop="proxyConfigEnable">
                 <el-switch
                   active-text="开"
                   inline-prompt
@@ -915,6 +927,73 @@ onUnmounted(() => {
               </el-col>
             </template>
 
+            <el-col :span="24">
+              <div class="h2">Web 界面</div>
+            </el-col>
+
+            <el-col :span="12">
+              <el-form-item label="启用Web界面：" prop="webEnable">
+                <template #label>
+                  <div class="h-full flex items-center mr-1">
+                    <el-popover width="300" placement="top" trigger="hover">
+                      <template #reference>
+                        <IconifyIconOffline
+                          class="text-base"
+                          color="#5A3DAA"
+                          icon="info"
+                        />
+                      </template>
+                      热更新等功能依赖于web界面，<span class="font-black text-[#5A3DAA]"
+                    >不可停用Web</span
+                    >
+                    </el-popover>
+                  </div>
+                  启用Web：
+                </template>
+                <el-switch
+                  active-text="开"
+                  inline-prompt
+                  disabled
+                  inactive-text="关"
+                  v-model="formData.webEnable"
+                />
+              </el-form-item>
+            </el-col>
+
+            <template v-if="formData.webEnable">
+              <el-col :span="12">
+                <el-form-item label="Web 端口：" prop="webPort">
+                  <template #label>
+                    <div class="h-full flex items-center mr-1">
+                      <el-popover width="300" placement="top" trigger="hover">
+                        <template #default>
+                          对应参数：<span class="font-black text-[#5A3DAA]"
+                            >webServer.port</span
+                          ><br/>
+                          自行保证端口没有被占用，否则会导致启动失败
+                        </template>
+                        <template #reference>
+                          <IconifyIconOffline
+                            class="text-base"
+                            color="#5A3DAA"
+                            icon="info"
+                          />
+                        </template>
+                      </el-popover>
+                    </div>
+                    Web 端口：
+                  </template>
+                  <el-input-number
+                    placeholder="57400"
+                    v-model="formData.webPort"
+                    :min="0"
+                    :max="65535"
+                    controls-position="right"
+                  ></el-input-number>
+                </el-form-item>
+              </el-col>
+            </template>
+
             <el-col :span="24">
               <div class="h2">日志配置</div>
             </el-col>
@@ -977,8 +1056,8 @@ onUnmounted(() => {
                     <el-popover placement="top" trigger="hover">
                       <template #default>
                         开启后启动时<span class="font-black text-[#5A3DAA]"
-                      >不打开界面</span
+                          >不打开界面</span
-                      >
+                        >
                       </template>
                       <template #reference>
                         <IconifyIconOffline

src/views/logger/index.vue

@@ -1,7 +1,10 @@
 <script lang="ts" setup>
-import {defineComponent, onMounted, onUnmounted, ref} from "vue";
+import { createVNode, defineComponent, onMounted, onUnmounted, ref } from "vue";
 import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
-import {ipcRenderer} from "electron";
+import { ipcRenderer } from "electron";
+import IconifyIconOffline from "@/components/IconifyIcon/src/iconifyIconOffline";
+import { useDebounce, useDebounceFn } from "@vueuse/core";
+import { ElMessage } from "element-plus";
 
 defineComponent({
   name: "Logger"
@@ -11,24 +14,28 @@ const loggerContent = ref('<div class="text-white">暂无日志</div>');
 
 const handleLog2Html = (logContent: string) => {
   const logs = logContent
-      .split("\n")
+    .split("\n")
-      .filter(f => f)
+    .filter(f => f)
-      .map(m => {
+    .map(m => {
-        if (m.indexOf("[E]") !== -1) {
+      if (m.indexOf("[E]") !== -1) {
-          return `<div class="text-[#FF0006]">${m}</div> `;
+        return `<div class="text-[#FF0006]">${m}</div> `;
-        } else if (m.indexOf("[I]") !== -1) {
+      } else if (m.indexOf("[I]") !== -1) {
-          return `<div class="text-[#48BB31]">${m}</div> `;
+        return `<div class="text-[#48BB31]">${m}</div> `;
-        } else if (m.indexOf("[D]") !== -1) {
+      } else if (m.indexOf("[D]") !== -1) {
-          return `<div class="text-[#0070BB]">${m}</div> `;
+        return `<div class="text-[#0070BB]">${m}</div> `;
-        } else if (m.indexOf("[W]") !== -1) {
+      } else if (m.indexOf("[W]") !== -1) {
-          return `<div class="text-[#BBBB23]">${m}</div> `;
+        return `<div class="text-[#BBBB23]">${m}</div> `;
-        } else {
+      } else {
-          return `<div class="text-[#BBBBBB]">${m}</div> `;
+        return `<div class="text-[#BBBBBB]">${m}</div> `;
-        }
+      }
-      });
+    });
   return logs.reverse().join("");
 };
 
+const refreshStatus = ref(false);
+
+const logLoading = ref(true);
+
 onMounted(() => {
   ipcRenderer.send("logger.getLog");
   ipcRenderer.on("Logger.getLog.hook", (event, args) => {
@@ -38,26 +45,67 @@ onMounted(() => {
     if (args) {
       loggerContent.value = handleLog2Html(args);
     }
-    ipcRenderer.send("logger.update");
+    logLoading.value = false;
+    if (refreshStatus.value) {
+      // 刷新逻辑
+      ElMessage({
+        type: "success",
+        message: "刷新成功"
+      });
+    } else {
+      ipcRenderer.send("logger.update");
+    }
   });
   ipcRenderer.on("Logger.update.hook", (event, args) => {
+    console.log("logger update hook", 1);
     if (args) {
       loggerContent.value = handleLog2Html(args);
     }
   });
+
+  ipcRenderer.on("Logger.openLog.hook", (event, args) => {
+    if (args) {
+      ElMessage({
+        type: "success",
+        message: "打开日志成功"
+      });
+    }
+  });
 });
 
+const openLocalLog = useDebounceFn(() => {
+  ipcRenderer.send("logger.openLog");
+}, 1000);
+
+const refreshLog = useDebounceFn(() => {
+  // ElMessage({
+  //   type: "warning",
+  //   icon: "<IconifyIconOffline icon=\"file-open-rounded\" />",
+  //   message: "正在刷新日志..."
+  // });
+  refreshStatus.value = true;
+  logLoading.value = true;
+  ipcRenderer.send("logger.getLog");
+}, 300);
+
 onUnmounted(() => {
   ipcRenderer.removeAllListeners("Logger.getLog.hook");
 });
 </script>
 <template>
   <div class="main">
-    <breadcrumb/>
+    <breadcrumb>
-    <div class="app-container-breadcrumb">
+      <el-button plain type="primary" @click="refreshLog">
+        <IconifyIconOffline icon="refresh-rounded" />
+      </el-button>
+      <el-button plain type="primary" @click="openLocalLog">
+        <IconifyIconOffline icon="file-open-rounded" />
+      </el-button>
+    </breadcrumb>
+    <div class="app-container-breadcrumb" v-loading="logLoading">
       <div
-          class="w-full h-full p-2 bg-[#2B2B2B] rounded drop-shadow-lg overflow-y-auto"
+        class="w-full h-full p-2 bg-[#2B2B2B] rounded drop-shadow-lg overflow-y-auto"
-          v-html="loggerContent"
+        v-html="loggerContent"
       ></div>
     </div>
   </div>

src/views/proxy/index.vue

@@ -74,7 +74,7 @@ const editForm = ref<Proxy>(defaultForm.value);
 /**
  * 代理类型
  */
-const proxyTypes = ref(["http", "https", "tcp", "udp", "stcp", "xtcp"]);
+const proxyTypes = ref(["http", "https", "tcp", "udp", "stcp", "xtcp", "sudp"]);
 
 const stcpModels = ref([
   {
@@ -172,20 +172,28 @@ const isStcp = computed(() => {
   return editForm.value.type === "stcp";
 });
 
+const isSudp = computed(() => {
+  return editForm.value.type === "sudp";
+});
+
 const isXtcp = computed(() => {
   return editForm.value.type === "xtcp";
 });
 
 const isStcpVisited = computed(() => {
   return (
-    (editForm.value.type === "stcp" || editForm.value.type === "xtcp") &&
+    (editForm.value.type === "stcp" ||
+      editForm.value.type === "sudp" ||
+      editForm.value.type === "xtcp") &&
     editForm.value.stcpModel === "visited"
   );
 });
 
 const isStcpVisitors = computed(() => {
   return (
-    (editForm.value.type === "stcp" || editForm.value.type === "xtcp") &&
+    (editForm.value.type === "stcp" ||
+      editForm.value.type === "sudp" ||
+      editForm.value.type === "xtcp") &&
     editForm.value.stcpModel === "visitors"
   );
 });
@@ -463,7 +471,11 @@ const handleCopyAccessAddress = (proxy: Proxy) => {
     accessAddressStr = `${proxy.type}://${proxy.customDomains[0]}`;
   } else if (proxy.type === "tcp" || proxy.type === "udp") {
     accessAddressStr = `${frpcConfig.value.serverAddr}:${proxy.remotePort}`;
-  } else if (proxy.type === "stcp" || proxy.type === "xtcp") {
+  } else if (
+    proxy.type === "stcp" ||
+    proxy.type === "xtcp" ||
+    proxy.type === "sudp"
+  ) {
     accessAddressStr = `${proxy.bindAddr}:${proxy.bindPort}`;
   }
   const { copy, copied } = useClipboard();
@@ -612,7 +624,9 @@ onUnmounted(() => {
                     </el-tag>
                     <el-tag
                       v-if="
-                        (proxy.type === 'stcp' || proxy.type === 'xtcp') &&
+                        (proxy.type === 'stcp' ||
+                          proxy.type === 'xtcp' ||
+                          proxy.type === 'sudp') &&
                         proxy.stcpModel === 'visitors'
                       "
                       size="small"
@@ -622,7 +636,9 @@ onUnmounted(() => {
                     <el-tag
                       size="small"
                       v-if="
-                        (proxy.type === 'stcp' || proxy.type === 'xtcp') &&
+                        (proxy.type === 'stcp' ||
+                          proxy.type === 'xtcp' ||
+                          proxy.type === 'sudp') &&
                         proxy.stcpModel === 'visited'
                       "
                       >被访问者
@@ -796,7 +812,7 @@ onUnmounted(() => {
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <template v-if="isStcp || isXtcp">
+          <template v-if="isStcp || isSudp || isXtcp">
             <el-col :span="12">
               <el-form-item :label="`${editForm.type}模式：`" prop="stcpModel">
                 <el-radio-group v-model="editForm.stcpModel">
@@ -866,7 +882,7 @@ onUnmounted(() => {
               </el-button>
             </el-form-item>
           </el-col>
-          <template v-if="!(isStcp || isXtcp) || isStcpVisited">
+          <template v-if="!(isStcp || isXtcp || isSudp) || isStcpVisited">
             <el-col :span="12">
               <el-form-item label="内网地址：" prop="localIp">
                 <el-autocomplete
@@ -1325,6 +1341,10 @@ onUnmounted(() => {
   background: #f8bf4b;
 }
 
+.sudp {
+  background: #3d4bb9;
+}
+
 .domain-input {
   width: calc(100% - 115px);
 }

types/global.d.ts

@@ -83,6 +83,8 @@ declare global {
         metaToken: string;
         transportHeartbeatInterval: number;
         transportHeartbeatTimeout: number;
+        webEnable: boolean;
+        webPort: number;
     };
 
     type GitHubMirror = {