From 396147542195dd43bd6452907c992c18c4c586d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=98=89=E4=BC=9F?= <8473136@qq.com>
Date: Fri, 16 Aug 2024 23:59:40 +0800
Subject: [PATCH] =?UTF-8?q?:construction:=20=E7=B1=BB=E5=9E=8B=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 electron/api/github.ts              |   2 +-
 electron/storage/config.ts          |  45 +-
 electron/storage/proxy.ts           |  12 +-
 electron/storage/version.ts         |  10 +-
 src/types/global.d.ts               |   9 -
 src/views/config/index.vue          | 769 ++++++++++++++++------------
 src/views/download/index.vue        |  25 +-
 src/views/proxy/index.vue           | 564 +++++++++++++-------
 types/global.d.ts                   |  80 +++
 {src/types => types}/shims-tsx.d.ts |   0
 {src/types => types}/shims-vue.d.ts |   0
 11 files changed, 921 insertions(+), 595 deletions(-)
 delete mode 100644 src/types/global.d.ts
 create mode 100644 types/global.d.ts
 rename {src/types => types}/shims-tsx.d.ts (100%)
 rename {src/types => types}/shims-vue.d.ts (100%)

diff --git a/electron/api/github.ts b/electron/api/github.ts
index d545b88..e94f756 100644
--- a/electron/api/github.ts
+++ b/electron/api/github.ts
@@ -74,7 +74,7 @@ const unZip = (zipPath: string, targetPath: string) => {
 
 export const initGitHubApi = () => {
     // 版本
-    let versions = [];
+    let versions: FrpVersion[] = [];
 
     const getVersion = versionId => {
         return versions.find(f => f.id === versionId);
diff --git a/electron/storage/config.ts b/electron/storage/config.ts
index 5c41b6c..e68ece2 100644
--- a/electron/storage/config.ts
+++ b/electron/storage/config.ts
@@ -1,47 +1,24 @@
 import Datastore from "nedb";
 import path from "path";
-import {app} from "electron";
+import { app } from "electron";
 
-const log = require('electron-log');
+const log = require("electron-log");
 
 const configDB = new Datastore({
-    autoload: true,
-    filename: path.join(app.getPath("userData"), "config.db")
+  autoload: true,
+  filename: path.join(app.getPath("userData"), "config.db")
 });
 
-export type Config = {
-    currentVersion: any;
-    serverAddr: string;
-    serverPort: number;
-    authMethod: string;
-    authToken: string;
-    logLevel: string;
-    logMaxDays: number;
-    tlsConfigEnable: boolean;
-    tlsConfigCertFile: string;
-    tlsConfigKeyFile: string;
-    tlsConfigTrustedCaFile: string;
-    tlsConfigServerName: string;
-    proxyConfigEnable: boolean;
-    proxyConfigProxyUrl: string;
-    systemSelfStart: boolean;
-    systemStartupConnect: boolean;
-    user: string;
-    metaToken: string;
-    transportHeartbeatInterval: number;
-    transportHeartbeatTimeout: number;
-};
-
 /**
  * 保存
  */
 export const saveConfig = (
-    document: Config,
-    cb?: (err: Error | null, numberOfUpdated: number, upsert: boolean) => void
+  document: FrpConfig,
+  cb?: (err: Error | null, numberOfUpdated: number, upsert: boolean) => void
 ) => {
-    document["_id"] = "1";
-    log.debug(`保存日志 ${JSON.stringify(document)}`)
-    configDB.update({_id: "1"}, document, {upsert: true}, cb);
+  document["_id"] = "1";
+  log.debug(`保存日志 ${JSON.stringify(document)}`);
+  configDB.update({ _id: "1" }, document, { upsert: true }, cb);
 };
 
 /**
@@ -49,7 +26,7 @@ export const saveConfig = (
  * @param cb
  */
 export const getConfig = (
-    cb: (err: Error | null, document: Config) => void
+  cb: (err: Error | null, document: FrpConfig) => void
 ) => {
-    configDB.findOne({_id: "1"}, cb);
+  configDB.findOne({ _id: "1" }, cb);
 };
diff --git a/electron/storage/proxy.ts b/electron/storage/proxy.ts
index f975b8a..904f971 100644
--- a/electron/storage/proxy.ts
+++ b/electron/storage/proxy.ts
@@ -1,22 +1,14 @@
 import Datastore from "nedb";
 import path from "path";
 import { app } from "electron";
-const log = require('electron-log');
+
+const log = require("electron-log");
 
 const proxyDB = new Datastore({
   autoload: true,
   filename: path.join(app.getPath("userData"), "proxy.db")
 });
 
-export type Proxy = {
-  _id: string;
-  name: string;
-  type: string;
-  localIp: string;
-  localPort: number;
-  remotePort: number;
-  customDomains: string[];
-};
 /**
  * 新增代理
  * @param proxy
diff --git a/electron/storage/version.ts b/electron/storage/version.ts
index 8c2600f..e700f3b 100644
--- a/electron/storage/version.ts
+++ b/electron/storage/version.ts
@@ -9,12 +9,12 @@ const versionDB = new Datastore({
 });
 
 /**
- * 新增代理
- * @param proxy
+ * 新增版本
+ * @param version
  * @param cb
  */
 export const insertVersion = (
-    version: any,
+    version: FrpVersion,
     cb?: (err: Error | null, document: any) => void
 ) => {
     log.debug(`新增版本：${JSON.stringify(version)}`);
@@ -26,14 +26,14 @@ export const insertVersion = (
  * @param cb
  */
 export const listVersion = (
-    callback: (err: Error | null, documents: any[]) => void
+    callback: (err: Error | null, documents: FrpVersion[]) => void
 ) => {
     versionDB.find({}, callback);
 };
 
 export const getVersionById = (
     id: string,
-    callback: (err: Error | null, document: any) => void
+    callback: (err: Error | null, document: FrpVersion) => void
 ) => {
     versionDB.findOne({id: id}, callback);
 };
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
deleted file mode 100644
index 277926a..0000000
--- a/src/types/global.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-declare module 'element-plus/dist/locale/zh-cn.mjs' {
-  const zhLocale: any;
-  export default zhLocale;
-}
-
-declare module 'element-plus/dist/locale/en.mjs' {
-  const enLocale: any;
-  export default enLocale;
-}
diff --git a/src/views/config/index.vue b/src/views/config/index.vue
index b6a96fe..4445206 100644
--- a/src/views/config/index.vue
+++ b/src/views/config/index.vue
@@ -1,57 +1,28 @@
 <script lang="ts" setup>
-import {defineComponent, onMounted, onUnmounted, reactive, ref} from "vue";
-import {ipcRenderer} from "electron";
-import {ElMessage, ElMessageBox, FormInstance, FormRules} from "element-plus";
+import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
+import { ipcRenderer } from "electron";
+import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
 import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
-import {useDebounceFn} from "@vueuse/core";
-import {clone} from "@/utils/clone";
-import {Base64} from "js-base64";
-
+import { useDebounceFn } from "@vueuse/core";
+import { clone } from "@/utils/clone";
+import { Base64 } from "js-base64";
 
 defineComponent({
   name: "Config"
 });
 
-type Config = {
-  currentVersion: string;
+type ShareLinkConfig = {
   serverAddr: string;
   serverPort: number;
   authMethod: string;
   authToken: string;
-  logLevel: string;
-  logMaxDays: number;
-  tlsConfigEnable: boolean;
-  tlsConfigCertFile: string;
-  tlsConfigKeyFile: string;
-  tlsConfigTrustedCaFile: string;
-  tlsConfigServerName: string;
-  proxyConfigEnable: boolean;
-  proxyConfigProxyUrl: string;
-  systemSelfStart: boolean;
-  systemStartupConnect: boolean;
-  user: string;
-  metaToken: string;
   transportHeartbeatInterval: number;
   transportHeartbeatTimeout: number;
+  user: string;
+  metaToken: string;
 };
 
-type Version = {
-  id: string;
-  name: string;
-}
-
-type ShareLinkConfig = {
-  serverAddr: string,
-  serverPort: number,
-  authMethod: string,
-  authToken: string,
-  transportHeartbeatInterval: number,
-  transportHeartbeatTimeout: number,
-  user: string,
-  metaToken: string,
-}
-
-const defaultFormData = ref<Config>({
+const defaultFormData = ref<FrpConfig>({
   currentVersion: "",
   serverAddr: "",
   serverPort: 7000,
@@ -71,18 +42,17 @@ const defaultFormData = ref<Config>({
   user: "",
   metaToken: "",
   transportHeartbeatInterval: 30,
-  transportHeartbeatTimeout: 90,
+  transportHeartbeatTimeout: 90
 });
 
-
-const formData = ref<Config>(defaultFormData.value);
+const formData = ref<FrpConfig>(defaultFormData.value);
 
 const loading = ref(1);
 
 const rules = reactive<FormRules>({
-  currentVersion: [{required: true, message: "请选择版本", trigger: "blur"}],
+  currentVersion: [{ required: true, message: "请选择版本", trigger: "blur" }],
   serverAddr: [
-    {required: true, message: "请输入服务端地址", trigger: "blur"},
+    { required: true, message: "请输入服务端地址", trigger: "blur" },
     {
       pattern: /^[\w-]+(\.[\w-]+)+$/,
       message: "请输入正确的服务端地址",
@@ -90,26 +60,36 @@ const rules = reactive<FormRules>({
     }
   ],
   serverPort: [
-    {required: true, message: "请输入服务器端口", trigger: "blur"}
+    { required: true, message: "请输入服务器端口", trigger: "blur" }
   ],
-  user: [
-    {required: true, message: "请输入用户", trigger: "blur"}
+  user: [{ required: true, message: "请输入用户", trigger: "blur" }],
+  metaToken: [{ required: true, message: "请输入多用户令牌", trigger: "blur" }],
+  authMethod: [{ required: true, message: "请选择验证方式", trigger: "blur" }],
+  authToken: [{ required: true, message: "请输入 Token 值 ", trigger: "blur" }],
+  logLevel: [{ required: true, message: "请选择日志级别 ", trigger: "blur" }],
+  logMaxDays: [
+    { required: true, message: "请输入日志保留天数 ", trigger: "blur" }
   ],
-  metaToken: [
-    {required: true, message: "请输入多用户令牌", trigger: "blur"}
+  tlsConfigEnable: [
+    { required: true, message: "请选择 TLS 状态", trigger: "change" }
+  ],
+  tlsConfigCertFile: [
+    { required: true, message: "请选择 TLS 证书文件", trigger: "change" }
+  ],
+  tlsConfigKeyFile: [
+    { required: true, message: "请选择 TLS 密钥文件", trigger: "change" }
+  ],
+  tlsConfigTrustedCaFile: [
+    { required: true, message: "请选择 CA 证书文件", trigger: "change" }
+  ],
+  tlsConfigServerName: [
+    { required: true, message: "请输入 TLS Server 名称", trigger: "blur" }
+  ],
+  proxyConfigEnable: [
+    { required: true, message: "请选择代理状态", trigger: "change" }
   ],
-  authMethod: [{required: true, message: "请选择验证方式", trigger: "blur"}],
-  authToken: [{required: true, message: "请输入 Token 值 ", trigger: "blur"}],
-  logLevel: [{required: true, message: "请选择日志级别 ", trigger: "blur"}],
-  logMaxDays: [{required: true, message: "请输入日志保留天数 ", trigger: "blur"}],
-  tlsConfigEnable: [{required: true, message: "请选择 TLS 状态", trigger: "change"}],
-  tlsConfigCertFile: [{required: true, message: "请选择 TLS 证书文件", trigger: "change"}],
-  tlsConfigKeyFile: [{required: true, message: "请选择 TLS 密钥文件", trigger: "change"}],
-  tlsConfigTrustedCaFile: [{required: true, message: "请选择 CA 证书文件", trigger: "change"}],
-  tlsConfigServerName: [{required: true, message: "请输入 TLS Server 名称", trigger: "blur"}],
-  proxyConfigEnable: [{required: true, message: "请选择代理状态", trigger: "change"}],
   proxyConfigProxyUrl: [
-    {required: true, message: "请输入代理地址", trigger: "change"},
+    { required: true, message: "请输入代理地址", trigger: "change" },
     {
       pattern: /^https?\:\/\/(\w+:\w+@)?([a-zA-Z0-9.-]+)(:\d+)?$/,
       message: "请输入正确的代理地址",
@@ -117,18 +97,17 @@ const rules = reactive<FormRules>({
     }
   ],
   systemSelfStart: [
-    {required: true, message: "请选择是否开机自启", trigger: "change"},
+    { required: true, message: "请选择是否开机自启", trigger: "change" }
   ],
   transportHeartbeatInterval: [
-    {required: true, message: "心跳间隔时间不能为空", trigger: "change"},
+    { required: true, message: "心跳间隔时间不能为空", trigger: "change" }
   ],
   transportHeartbeatTimeout: [
-    {required: true, message: "心跳超时时间不能为空", trigger: "change"},
-  ],
-
+    { required: true, message: "心跳超时时间不能为空", trigger: "change" }
+  ]
 });
 
-const versions = ref<Array<Version>>([]);
+const versions = ref<Array<FrpVersion>>([]);
 const copyServerConfigBase64 = ref();
 const pasteServerConfigBase64 = ref();
 
@@ -137,7 +116,7 @@ const protocol = ref("frp://");
 
 const visibles = reactive({
   copyServerConfig: false,
-  pasteServerConfig: false,
+  pasteServerConfig: false
 });
 
 const handleSubmit = useDebounceFn(() => {
@@ -156,36 +135,45 @@ const handleLoadVersions = () => {
 };
 
 const handleAuthMethodChange = e => {
-  if (e === 'multiuser') {
-    ElMessageBox.alert("多用户插件需要 Frp版本 >= <span class=\"font-black text-[#5A3DAA]\">v0.31.0</span> 请自行选择正确版本", "提示", {
-      // if you want to disable its autofocus
-      autofocus: false,
-      confirmButtonText: "知道了",
-      dangerouslyUseHTMLString: true,
-    })
+  if (e === "multiuser") {
+    ElMessageBox.alert(
+      '多用户插件需要 Frp版本 >= <span class="font-black text-[#5A3DAA]">v0.31.0</span> 请自行选择正确版本',
+      "提示",
+      {
+        // if you want to disable its autofocus
+        autofocus: false,
+        confirmButtonText: "知道了",
+        dangerouslyUseHTMLString: true
+      }
+    );
   }
-}
+};
 
 const checkAndResetVersion = () => {
   const currentVersion = formData.value.currentVersion;
-  if (currentVersion && !versions.value.some(item => item.id === currentVersion)) {
+  if (
+    currentVersion &&
+    !versions.value.some(item => item.id === currentVersion)
+  ) {
     formData.value.currentVersion = "";
   }
-}
+};
 
 onMounted(() => {
   ipcRenderer.send("config.getConfig");
   handleLoadVersions();
   ipcRenderer.on("Config.getConfig.hook", (event, args) => {
-    const {err, data} = args;
+    const { err, data } = args;
     if (!err) {
       if (data) {
-        console.log('data', data)
+        console.log("data", data);
         if (!data.transportHeartbeatInterval) {
-          data.transportHeartbeatInterval = defaultFormData.value.transportHeartbeatInterval
+          data.transportHeartbeatInterval =
+            defaultFormData.value.transportHeartbeatInterval;
         }
         if (!data.transportHeartbeatTimeout) {
-          data.transportHeartbeatTimeout = defaultFormData.value.transportHeartbeatTimeout
+          data.transportHeartbeatTimeout =
+            defaultFormData.value.transportHeartbeatTimeout;
         }
         formData.value = data;
       }
@@ -201,7 +189,7 @@ onMounted(() => {
     loading.value--;
   });
   ipcRenderer.on("Config.versions.hook", (event, args) => {
-    const {err, data} = args;
+    const { err, data } = args;
     if (!err) {
       versions.value = data;
       checkAndResetVersion();
@@ -213,19 +201,18 @@ const handleSelectFile = (type: number, ext: string[]) => {
   ipcRenderer.invoke("file.selectFile", ext).then(r => {
     switch (type) {
       case 1:
-        formData.value.tlsConfigCertFile = r[0]
+        formData.value.tlsConfigCertFile = r[0];
         break;
       case 2:
-        formData.value.tlsConfigKeyFile = r[0]
+        formData.value.tlsConfigKeyFile = r[0];
         break;
       case 3:
-        formData.value.tlsConfigTrustedCaFile = r[0]
+        formData.value.tlsConfigTrustedCaFile = r[0];
         break;
     }
-    console.log(r)
-
-  })
-}
+    console.log(r);
+  });
+};
 
 /**
  * 分享配置
@@ -239,14 +226,11 @@ const handleCopyServerConfig2Base64 = useDebounceFn(() => {
     transportHeartbeatInterval: formData.value.transportHeartbeatInterval,
     transportHeartbeatTimeout: formData.value.transportHeartbeatTimeout,
     user: formData.value.user,
-    metaToken: formData.value.metaToken,
+    metaToken: formData.value.metaToken
   };
-  const base64str = Base64.encode(
-      JSON.stringify(shareConfig)
-  )
+  const base64str = Base64.encode(JSON.stringify(shareConfig));
   copyServerConfigBase64.value = protocol.value + base64str;
   visibles.copyServerConfig = true;
-
 }, 300);
 
 /**
@@ -262,45 +246,45 @@ const handlePasteServerConfigBase64 = useDebounceFn(() => {
       type: "warning",
       message: "链接不正确 请输入正确的链接"
     });
-  }
+  };
   if (!pasteServerConfigBase64.value.startsWith(protocol.value)) {
-    tips()
-    return
+    tips();
+    return;
   }
-  const ciphertext = pasteServerConfigBase64.value.replace("frp://", "")
-  const plaintext = Base64.decode(ciphertext)
-  console.log('plain', plaintext)
+  const ciphertext = pasteServerConfigBase64.value.replace("frp://", "");
+  const plaintext = Base64.decode(ciphertext);
+  console.log("plain", plaintext);
   let serverConfig: ShareLinkConfig = null;
   try {
-    serverConfig = JSON.parse(plaintext)
+    serverConfig = JSON.parse(plaintext);
   } catch {
-    tips()
-    return
+    tips();
+    return;
   }
 
   if (!serverConfig && !serverConfig.serverAddr) {
-    tips()
-    return
+    tips();
+    return;
   }
   if (!serverConfig && !serverConfig.serverPort) {
-    tips()
-    return
+    tips();
+    return;
   }
-  formData.value.serverAddr = serverConfig.serverAddr
-  formData.value.serverPort = serverConfig.serverPort
-  formData.value.authMethod = serverConfig.authMethod
-  formData.value.authToken = serverConfig.authToken
-  formData.value.transportHeartbeatInterval = serverConfig.transportHeartbeatInterval
-  formData.value.transportHeartbeatTimeout = serverConfig.transportHeartbeatTimeout
-  formData.value.user = serverConfig.user
-  formData.value.metaToken = serverConfig.metaToken
+  formData.value.serverAddr = serverConfig.serverAddr;
+  formData.value.serverPort = serverConfig.serverPort;
+  formData.value.authMethod = serverConfig.authMethod;
+  formData.value.authToken = serverConfig.authToken;
+  formData.value.transportHeartbeatInterval =
+    serverConfig.transportHeartbeatInterval;
+  formData.value.transportHeartbeatTimeout =
+    serverConfig.transportHeartbeatTimeout;
+  formData.value.user = serverConfig.user;
+  formData.value.metaToken = serverConfig.metaToken;
 
   handleSubmit();
   pasteServerConfigBase64.value = "";
   visibles.pasteServerConfig = false;
-
-}, 300)
-
+}, 300);
 
 onUnmounted(() => {
   ipcRenderer.removeAllListeners("Config.getConfig.hook");
@@ -310,46 +294,47 @@ onUnmounted(() => {
 </script>
 <template>
   <div class="main">
-    <breadcrumb/>
+    <breadcrumb />
     <div class="app-container-breadcrumb pr-2" v-loading="loading > 0">
-      <div
-          class="w-full bg-white p-4 rounded drop-shadow-lg"
-      >
+      <div class="w-full bg-white p-4 rounded drop-shadow-lg">
         <el-form
-            :model="formData"
-            :rules="rules"
-            label-position="right"
-            ref="formRef"
-            label-width="130"
+          :model="formData"
+          :rules="rules"
+          label-position="right"
+          ref="formRef"
+          label-width="130"
         >
           <el-row :gutter="10">
             <el-col :span="24">
               <div class="h2 flex justify-between">
                 <div>版本选择</div>
               </div>
-
             </el-col>
             <el-col :span="24">
               <el-form-item label="Frp版本：" prop="currentVersion">
                 <el-select
-                    v-model="formData.currentVersion"
-                    class="w-full"
-                    clearable
+                  v-model="formData.currentVersion"
+                  class="w-full"
+                  clearable
                 >
                   <el-option
-                      v-for="v in versions"
-                      :key="v.id"
-                      :label="v.name"
-                      :value="v.id"
+                    v-for="v in versions"
+                    :key="v.id"
+                    :label="v.name"
+                    :value="v.id"
                   ></el-option>
                 </el-select>
                 <div class="w-full flex justify-end">
                   <el-link type="primary" @click="handleLoadVersions">
-                    <iconify-icon-offline class="mr-1" icon="refresh-rounded"/>
+                    <iconify-icon-offline class="mr-1" icon="refresh-rounded" />
                     手动刷新
                   </el-link>
-                  <el-link class="ml-2" type="primary" @click="$router.replace({ name: 'Download' })">
-                    <IconifyIconOffline class="mr-1" icon="download"/>
+                  <el-link
+                    class="ml-2"
+                    type="primary"
+                    @click="$router.replace({ name: 'Download' })"
+                  >
+                    <IconifyIconOffline class="mr-1" icon="download" />
                     点击这里去下载
                   </el-link>
                 </div>
@@ -359,48 +344,56 @@ onUnmounted(() => {
               <div class="h2 flex justify-between">
                 <div>服务器配置</div>
                 <div class="flex items-center justify-center">
-                  <IconifyIconOffline @click="handleCopyServerConfig2Base64"
-                                      class="mr-2 cursor-pointer text-xl font-bold" icon="content-copy"/>
-                  <IconifyIconOffline @click="handlePasteServerConfig4Base64"
-                                      class="mr-2 cursor-pointer text-xl font-bold" icon="content-paste-go"/>
+                  <IconifyIconOffline
+                    @click="handleCopyServerConfig2Base64"
+                    class="mr-2 cursor-pointer text-xl font-bold"
+                    icon="content-copy"
+                  />
+                  <IconifyIconOffline
+                    @click="handlePasteServerConfig4Base64"
+                    class="mr-2 cursor-pointer text-xl font-bold"
+                    icon="content-paste-go"
+                  />
                 </div>
               </div>
-
             </el-col>
             <el-col :span="24">
               <el-form-item label="服务器地址：" prop="serverAddr">
                 <template #label>
                   <div class="h-full flex items-center mr-1">
-                    <el-popover
-                        placement="top"
-                        trigger="hover"
-                    >
+                    <el-popover placement="top" trigger="hover">
                       <template #default>
-                        Frps服务端地址 <br/> 支持 <span class="font-black text-[#5A3DAA]">域名</span>、<span
-                          class="font-black text-[#5A3DAA]">IP</span>
+                        Frps服务端地址 <br />
+                        支持
+                        <span class="font-black text-[#5A3DAA]">域名</span
+                        >、<span class="font-black text-[#5A3DAA]">IP</span>
                       </template>
                       <template #reference>
-                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                        <IconifyIconOffline
+                          class="text-base"
+                          color="#5A3DAA"
+                          icon="info"
+                        />
                       </template>
                     </el-popover>
                   </div>
                   服务器地址：
                 </template>
                 <el-input
-                    v-model="formData.serverAddr"
-                    placeholder="127.0.0.1"
+                  v-model="formData.serverAddr"
+                  placeholder="127.0.0.1"
                 ></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="服务器端口：" prop="serverPort">
                 <el-input-number
-                    placeholder="7000"
-                    v-model="formData.serverPort"
-                    :min="0"
-                    :max="65535"
-                    controls-position="right"
-                    class="!w-full"
+                  placeholder="7000"
+                  v-model="formData.serverPort"
+                  :min="0"
+                  :max="65535"
+                  controls-position="right"
+                  class="!w-full"
                 ></el-input-number>
               </el-form-item>
             </el-col>
@@ -408,27 +401,29 @@ onUnmounted(() => {
               <el-form-item label="验证方式：" prop="authMethod">
                 <template #label>
                   <div class="h-full flex items-center mr-1">
-                    <el-popover
-                        width="200"
-                        placement="top"
-                        trigger="hover"
-                    >
+                    <el-popover width="200" placement="top" trigger="hover">
                       <template #default>
-                        对应参数：<span class="font-black text-[#5A3DAA]">auth.method</span>
+                        对应参数：<span class="font-black text-[#5A3DAA]"
+                          >auth.method</span
+                        >
                       </template>
                       <template #reference>
                         <!--                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>-->
-                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                        <IconifyIconOffline
+                          class="text-base"
+                          color="#5A3DAA"
+                          icon="info"
+                        />
                       </template>
                     </el-popover>
                   </div>
                   验证方式：
                 </template>
                 <el-select
-                    v-model="formData.authMethod"
-                    placeholder="请选择验证方式"
-                    @change="handleAuthMethodChange"
-                    clearable
+                  v-model="formData.authMethod"
+                  placeholder="请选择验证方式"
+                  @change="handleAuthMethodChange"
+                  clearable
                 >
                   <el-option label="无" value="null"></el-option>
                   <el-option label="令牌（token）" value="token"></el-option>
@@ -440,25 +435,27 @@ onUnmounted(() => {
               <el-form-item label="令牌：" prop="authToken">
                 <template #label>
                   <div class="h-full flex items-center mr-1">
-                    <el-popover
-                        placement="top"
-                        trigger="hover"
-                        width="200"
-                    >
+                    <el-popover placement="top" trigger="hover" width="200">
                       <template #default>
-                        对应参数：<span class="font-black text-[#5A3DAA]">auth.token</span>
+                        对应参数：<span class="font-black text-[#5A3DAA]"
+                          >auth.token</span
+                        >
                       </template>
                       <template #reference>
-                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                        <IconifyIconOffline
+                          class="text-base"
+                          color="#5A3DAA"
+                          icon="info"
+                        />
                       </template>
                     </el-popover>
                   </div>
                   令牌：
                 </template>
                 <el-input
-                    placeholder="token"
-                    type="password"
-                    v-model="formData.authToken"
+                  placeholder="token"
+                  type="password"
+                  v-model="formData.authToken"
                 />
               </el-form-item>
             </el-col>
@@ -466,74 +463,87 @@ onUnmounted(() => {
               <el-form-item label="用户：" prop="user">
                 <template #label>
                   <div class="h-full flex items-center mr-1">
-                    <el-popover
-                        placement="top"
-                        trigger="hover"
-                    >
+                    <el-popover placement="top" trigger="hover">
                       <template #default>
-                        对应参数：<span class="font-black text-[#5A3DAA]">user</span>
+                        对应参数：<span class="font-black text-[#5A3DAA]"
+                          >user</span
+                        >
                       </template>
                       <template #reference>
-                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                        <IconifyIconOffline
+                          class="text-base"
+                          color="#5A3DAA"
+                          icon="info"
+                        />
                       </template>
                     </el-popover>
                   </div>
                   用户：
                 </template>
-                <el-input
-                    placeholder="请输入用户"
-                    v-model="formData.user"
-                />
+                <el-input placeholder="请输入用户" v-model="formData.user" />
               </el-form-item>
             </el-col>
             <el-col :span="12" v-if="formData.authMethod === 'multiuser'">
               <el-form-item label="用户令牌：" prop="metaToken">
                 <template #label>
                   <div class="h-full flex items-center mr-1">
-                    <el-popover
-                        width="200"
-                        placement="top"
-                        trigger="hover"
-                    >
+                    <el-popover width="200" placement="top" trigger="hover">
                       <template #default>
-                        对应参数：<span class="font-black text-[#5A3DAA]">metadatas.token</span>
+                        对应参数：<span class="font-black text-[#5A3DAA]"
+                          >metadatas.token</span
+                        >
                       </template>
                       <template #reference>
-                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                        <IconifyIconOffline
+                          class="text-base"
+                          color="#5A3DAA"
+                          icon="info"
+                        />
                       </template>
                     </el-popover>
                   </div>
                   用户令牌：
                 </template>
                 <el-input
-                    placeholder="请输入用户令牌"
-                    type="password"
-                    v-model="formData.metaToken"
+                  placeholder="请输入用户令牌"
+                  type="password"
+                  v-model="formData.metaToken"
                 />
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="心跳间隔：" prop="transportHeartbeatInterval">
+              <el-form-item
+                label="心跳间隔："
+                prop="transportHeartbeatInterval"
+              >
                 <template #label>
                   <div class="h-full flex items-center mr-1">
-                    <el-popover
-                        width="300"
-                        placement="top"
-                        trigger="hover"
-                    >
+                    <el-popover width="300" placement="top" trigger="hover">
                       <template #default>
-                        多长向服务端发发送一次心跳包 单位： <span class="font-black text-[#5A3DAA]">秒</span> <br/>
-                        对应参数：<span class="font-black text-[#5A3DAA]">transport.heartbeatInterval</span>
+                        多长向服务端发发送一次心跳包 单位：
+                        <span class="font-black text-[#5A3DAA]">秒</span> <br />
+                        对应参数：<span class="font-black text-[#5A3DAA]"
+                          >transport.heartbeatInterval</span
+                        >
                       </template>
                       <template #reference>
-                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                        <IconifyIconOffline
+                          class="text-base"
+                          color="#5A3DAA"
+                          icon="info"
+                        />
                       </template>
                     </el-popover>
                   </div>
                   心跳间隔：
                 </template>
-                <el-input-number class="w-full" v-model="formData.transportHeartbeatInterval" :min="1" :max="10"
-                                 controls-position="right"/>
+                <el-input-number
+                  class="w-full"
+                  v-model="formData.transportHeartbeatInterval"
+                  :min="1"
+                  :max="10"
+                  controls-position="right"
+                />
                 <!--                <el-input-->
                 <!--                    placeholder="请输入心跳间隔"-->
                 <!--                    type="number"-->
@@ -548,24 +558,32 @@ onUnmounted(() => {
               <el-form-item label="心跳超时：" prop="transportHeartbeatTimeout">
                 <template #label>
                   <div class="h-full flex items-center mr-1">
-                    <el-popover
-                        width="300"
-                        placement="top"
-                        trigger="hover"
-                    >
+                    <el-popover width="300" placement="top" trigger="hover">
                       <template #default>
-                        心跳超时时间 单位： <span class="font-black text-[#5A3DAA]">秒</span> <br/>
-                        对应参数：<span class="font-black text-[#5A3DAA]">transport.heartbeatTimeout</span>
+                        心跳超时时间 单位：
+                        <span class="font-black text-[#5A3DAA]">秒</span> <br />
+                        对应参数：<span class="font-black text-[#5A3DAA]"
+                          >transport.heartbeatTimeout</span
+                        >
                       </template>
                       <template #reference>
-                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                        <IconifyIconOffline
+                          class="text-base"
+                          color="#5A3DAA"
+                          icon="info"
+                        />
                       </template>
                     </el-popover>
                   </div>
                   心跳超时：
                 </template>
-                <el-input-number class="w-full" v-model="formData.transportHeartbeatTimeout" :min="1" :max="10"
-                                 controls-position="right"/>
+                <el-input-number
+                  class="w-full"
+                  v-model="formData.transportHeartbeatTimeout"
+                  :min="1"
+                  :max="10"
+                  controls-position="right"
+                />
                 <!--                <el-input-->
                 <!--                    placeholder="请输入心跳超时时间"-->
                 <!--                    :min="0"-->
@@ -581,119 +599,160 @@ onUnmounted(() => {
             </el-col>
             <el-col :span="24">
               <el-form-item label="是否启用TSL：" prop="tlsConfigEnable">
-                <el-switch active-text="开"
-                           inline-prompt
-                           inactive-text="关"
-                           v-model="formData.tlsConfigEnable"/>
+                <el-switch
+                  active-text="开"
+                  inline-prompt
+                  inactive-text="关"
+                  v-model="formData.tlsConfigEnable"
+                />
               </el-form-item>
             </el-col>
             <template v-if="formData.tlsConfigEnable">
               <el-col :span="24">
-                <el-form-item label="TLS证书文件：" prop="tlsConfigCertFile" label-width="180">
+                <el-form-item
+                  label="TLS证书文件："
+                  prop="tlsConfigCertFile"
+                  label-width="180"
+                >
                   <template #label>
                     <div class="h-full flex items-center mr-1">
-                      <el-popover
-                          width="260"
-                          placement="top"
-                          trigger="hover"
-                      >
+                      <el-popover width="260" placement="top" trigger="hover">
                         <template #default>
-                          对应参数：<span class="font-black text-[#5A3DAA]">transport.tls.certFile</span>
+                          对应参数：<span class="font-black text-[#5A3DAA]"
+                            >transport.tls.certFile</span
+                          >
                         </template>
                         <template #reference>
-                          <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                          <IconifyIconOffline
+                            class="text-base"
+                            color="#5A3DAA"
+                            icon="info"
+                          />
                         </template>
                       </el-popover>
                     </div>
                     TLS 证书文件：
                   </template>
                   <el-input
-                      class="button-input"
-                      v-model="formData.tlsConfigCertFile"
-                      placeholder="请选择TLS证书文件"
-                      readonly
+                    class="button-input"
+                    v-model="formData.tlsConfigCertFile"
+                    placeholder="请选择TLS证书文件"
+                    readonly
                   />
-                  <el-button class="ml-2" type="primary" @click="handleSelectFile(1, ['crt'])">选择</el-button>
+                  <el-button
+                    class="ml-2"
+                    type="primary"
+                    @click="handleSelectFile(1, ['crt'])"
+                    >选择</el-button
+                  >
                 </el-form-item>
               </el-col>
               <el-col :span="24">
-                <el-form-item label="TLS密钥文件：" prop="tlsConfigKeyFile" label-width="180">
+                <el-form-item
+                  label="TLS密钥文件："
+                  prop="tlsConfigKeyFile"
+                  label-width="180"
+                >
                   <template #label>
                     <div class="h-full flex items-center mr-1">
-                      <el-popover
-                          width="260"
-                          placement="top"
-                          trigger="hover"
-                      >
+                      <el-popover width="260" placement="top" trigger="hover">
                         <template #default>
-                          对应参数：<span class="font-black text-[#5A3DAA]">transport.tls.keyFile</span>
+                          对应参数：<span class="font-black text-[#5A3DAA]"
+                            >transport.tls.keyFile</span
+                          >
                         </template>
                         <template #reference>
-                          <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                          <IconifyIconOffline
+                            class="text-base"
+                            color="#5A3DAA"
+                            icon="info"
+                          />
                         </template>
                       </el-popover>
                     </div>
                     TLS 密钥文件：
                   </template>
                   <el-input
-                      class="button-input"
-                      v-model="formData.tlsConfigKeyFile"
-                      placeholder="请选择 TLS 密钥文件"
-                      readonly
+                    class="button-input"
+                    v-model="formData.tlsConfigKeyFile"
+                    placeholder="请选择 TLS 密钥文件"
+                    readonly
                   />
-                  <el-button class="ml-2" type="primary" @click="handleSelectFile(2, ['key'])">选择</el-button>
+                  <el-button
+                    class="ml-2"
+                    type="primary"
+                    @click="handleSelectFile(2, ['key'])"
+                    >选择</el-button
+                  >
                 </el-form-item>
               </el-col>
               <el-col :span="24">
-                <el-form-item label="CA证书文件：" prop="tlsConfigTrustedCaFile" label-width="180">
+                <el-form-item
+                  label="CA证书文件："
+                  prop="tlsConfigTrustedCaFile"
+                  label-width="180"
+                >
                   <template #label>
                     <div class="h-full flex items-center mr-1">
-                      <el-popover
-                          width="310"
-                          placement="top"
-                          trigger="hover"
-                      >
+                      <el-popover width="310" placement="top" trigger="hover">
                         <template #default>
-                          对应参数：<span class="font-black text-[#5A3DAA]">transport.tls.trustedCaFile</span>
+                          对应参数：<span class="font-black text-[#5A3DAA]"
+                            >transport.tls.trustedCaFile</span
+                          >
                         </template>
                         <template #reference>
-                          <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                          <IconifyIconOffline
+                            class="text-base"
+                            color="#5A3DAA"
+                            icon="info"
+                          />
                         </template>
                       </el-popover>
                     </div>
                     CA 证书文件：
                   </template>
                   <el-input
-                      class="button-input"
-                      v-model="formData.tlsConfigTrustedCaFile"
-                      placeholder="请选择CA证书文件"
-                      readonly
+                    class="button-input"
+                    v-model="formData.tlsConfigTrustedCaFile"
+                    placeholder="请选择CA证书文件"
+                    readonly
                   />
-                  <el-button class="ml-2" type="primary" @click="handleSelectFile(3, ['crt'])">选择</el-button>
+                  <el-button
+                    class="ml-2"
+                    type="primary"
+                    @click="handleSelectFile(3, ['crt'])"
+                    >选择</el-button
+                  >
                 </el-form-item>
               </el-col>
               <el-col :span="24">
-                <el-form-item label="TLS Server 名称：" prop="tlsConfigServerName" label-width="180">
+                <el-form-item
+                  label="TLS Server 名称："
+                  prop="tlsConfigServerName"
+                  label-width="180"
+                >
                   <template #label>
                     <div class="h-full flex items-center mr-1">
-                      <el-popover
-                          width="300"
-                          placement="top"
-                          trigger="hover"
-                      >
+                      <el-popover width="300" placement="top" trigger="hover">
                         <template #default>
-                          对应参数：<span class="font-black text-[#5A3DAA]">transport.tls.serverName</span>
+                          对应参数：<span class="font-black text-[#5A3DAA]"
+                            >transport.tls.serverName</span
+                          >
                         </template>
                         <template #reference>
-                          <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                          <IconifyIconOffline
+                            class="text-base"
+                            color="#5A3DAA"
+                            icon="info"
+                          />
                         </template>
                       </el-popover>
                     </div>
                     TLS Server 名称：
                   </template>
                   <el-input
-                      v-model="formData.tlsConfigServerName"
-                      placeholder="请输入TLS Server 名称"
+                    v-model="formData.tlsConfigServerName"
+                    placeholder="请输入TLS Server 名称"
                   />
                 </el-form-item>
               </el-col>
@@ -703,10 +762,12 @@ onUnmounted(() => {
             </el-col>
             <el-col :span="24">
               <el-form-item label="是否启动代理：" prop="proxyConfigEnable">
-                <el-switch active-text="开"
-                           inline-prompt
-                           inactive-text="关"
-                           v-model="formData.proxyConfigEnable"/>
+                <el-switch
+                  active-text="开"
+                  inline-prompt
+                  inactive-text="关"
+                  v-model="formData.proxyConfigEnable"
+                />
               </el-form-item>
             </el-col>
             <template v-if="formData.proxyConfigEnable">
@@ -714,23 +775,27 @@ onUnmounted(() => {
                 <el-form-item label="代理地址：" prop="proxyConfigProxyUrl">
                   <template #label>
                     <div class="h-full flex items-center mr-1">
-                      <el-popover
-                          width="300"
-                          placement="top"
-                          trigger="hover"
-                      >
+                      <el-popover width="300" placement="top" trigger="hover">
                         <template #default>
-                          对应参数：<span class="font-black text-[#5A3DAA]">transport.proxyURL</span>
+                          对应参数：<span class="font-black text-[#5A3DAA]"
+                            >transport.proxyURL</span
+                          >
                         </template>
                         <template #reference>
-                          <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                          <IconifyIconOffline
+                            class="text-base"
+                            color="#5A3DAA"
+                            icon="info"
+                          />
                         </template>
                       </el-popover>
                     </div>
                     代理地址：
                   </template>
-                  <el-input v-model="formData.proxyConfigProxyUrl"
-                            placeholder="http://user:pwd@192.168.1.128:8080"/>
+                  <el-input
+                    v-model="formData.proxyConfigProxyUrl"
+                    placeholder="http://user:pwd@192.168.1.128:8080"
+                  />
                 </el-form-item>
               </el-col>
             </template>
@@ -741,16 +806,20 @@ onUnmounted(() => {
             <el-col :span="12">
               <el-form-item class="!w-full" label="日志级别：" prop="logLevel">
                 <el-select v-model="formData.logLevel">
-                  <el-option label="info" value="info"/>
-                  <el-option label="debug" value="debug"/>
-                  <el-option label="waring" value="waring"/>
-                  <el-option label="error" value="error"/>
+                  <el-option label="info" value="info" />
+                  <el-option label="debug" value="debug" />
+                  <el-option label="waring" value="waring" />
+                  <el-option label="error" value="error" />
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="日志保留天数：" prop="logMaxDays">
-                <el-input-number class="!w-full" controls-position="right" v-model="formData.logMaxDays"/>
+                <el-input-number
+                  class="!w-full"
+                  controls-position="right"
+                  v-model="formData.logMaxDays"
+                />
               </el-form-item>
             </el-col>
             <el-col :span="24">
@@ -760,55 +829,65 @@ onUnmounted(() => {
               <el-form-item label="开机自启：" prop="systemSelfStart">
                 <template #label>
                   <div class="h-full flex items-center mr-1">
-                    <el-popover
-                        placement="top"
-                        trigger="hover"
-                    >
+                    <el-popover placement="top" trigger="hover">
                       <template #default>
-                        开机自动启动 <br/><span class="font-black text-[#5A3DAA]">Frpc Desktop</span>
+                        开机自动启动 <br /><span
+                          class="font-black text-[#5A3DAA]"
+                          >Frpc Desktop</span
+                        >
                       </template>
                       <template #reference>
-                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                        <IconifyIconOffline
+                          class="text-base"
+                          color="#5A3DAA"
+                          icon="info"
+                        />
                       </template>
                     </el-popover>
                   </div>
                   开机自启：
                 </template>
-                <el-switch active-text="开"
-                           inline-prompt
-                           inactive-text="关"
-                           v-model="formData.systemSelfStart"/>
+                <el-switch
+                  active-text="开"
+                  inline-prompt
+                  inactive-text="关"
+                  v-model="formData.systemSelfStart"
+                />
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="自动连接：" prop="systemStartupConnect">
                 <template #label>
                   <div class="h-full flex items-center mr-1">
-                    <el-popover
-                        placement="top"
-                        trigger="hover"
-                    >
+                    <el-popover placement="top" trigger="hover">
                       <template #default>
-                        启动软件后是否<span class="font-black text-[#5A3DAA]">自动连接</span>服务器
-
+                        启动软件后是否<span class="font-black text-[#5A3DAA]"
+                          >自动连接</span
+                        >服务器
                       </template>
                       <template #reference>
-                        <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                        <IconifyIconOffline
+                          class="text-base"
+                          color="#5A3DAA"
+                          icon="info"
+                        />
                       </template>
                     </el-popover>
                   </div>
                   自动连接：
                 </template>
-                <el-switch active-text="开"
-                           inline-prompt
-                           inactive-text="关"
-                           v-model="formData.systemStartupConnect"/>
+                <el-switch
+                  active-text="开"
+                  inline-prompt
+                  inactive-text="关"
+                  v-model="formData.systemStartupConnect"
+                />
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item>
                 <el-button plain type="primary" @click="handleSubmit">
-                  <IconifyIconOffline icon="save"/>
+                  <IconifyIconOffline icon="save" />
                   保 存
                 </el-button>
               </el-form-item>
@@ -818,47 +897,73 @@ onUnmounted(() => {
       </div>
     </div>
 
-    <el-dialog v-model="visibles.copyServerConfig" title="复制链接" width="500" top="5%">
-      <el-alert class="mb-4" title="生成内容包含服务器密钥等内容 请妥善保管 且链接仅在Frpc-Desktop中可用" type="warning"
-                :closable="false"/>
-      <el-input class="h-30" v-model="copyServerConfigBase64" type="textarea" :rows="8"></el-input>
+    <el-dialog
+      v-model="visibles.copyServerConfig"
+      title="复制链接"
+      width="500"
+      top="5%"
+    >
+      <el-alert
+        class="mb-4"
+        title="生成内容包含服务器密钥等内容 请妥善保管 且链接仅在Frpc-Desktop中可用"
+        type="warning"
+        :closable="false"
+      />
+      <el-input
+        class="h-30"
+        v-model="copyServerConfigBase64"
+        type="textarea"
+        :rows="8"
+      ></el-input>
     </el-dialog>
 
-    <el-dialog v-model="visibles.pasteServerConfig" title="导入链接" width="500" top="5%">
-      <el-input class="h-30"
-                v-model="pasteServerConfigBase64"
-                type="textarea" placeholder="frp://......"
-                :rows="8"></el-input>
+    <el-dialog
+      v-model="visibles.pasteServerConfig"
+      title="导入链接"
+      width="500"
+      top="5%"
+    >
+      <el-input
+        class="h-30"
+        v-model="pasteServerConfigBase64"
+        type="textarea"
+        placeholder="frp://......"
+        :rows="8"
+      ></el-input>
       <template #footer>
         <div class="dialog-footer">
-
-          <el-button plain type="primary" @click="handlePasteServerConfigBase64">
-            <IconifyIconOffline class="cursor-pointer mr-2" icon="label-important-rounded"/>
+          <el-button
+            plain
+            type="primary"
+            @click="handlePasteServerConfigBase64"
+          >
+            <IconifyIconOffline
+              class="cursor-pointer mr-2"
+              icon="label-important-rounded"
+            />
             导 入
           </el-button>
         </div>
       </template>
-
     </el-dialog>
   </div>
 </template>
 
 <style lang="scss" scoped>
-
 .h2 {
-  color: #5A3DAA;
+  color: #5a3daa;
   font-size: 16px;
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
   font-weight: 700;
   padding: 6px 10px 6px 15px;
-  border-left: 5px solid #5A3DAA;
+  border-left: 5px solid #5a3daa;
   border-radius: 4px;
-  background-color: #EEEBF6;
+  background-color: #eeebf6;
   margin-bottom: 18px;
 }
 
 .button-input {
   width: calc(100% - 68px);
 }
-
 </style>
diff --git a/src/views/download/index.vue b/src/views/download/index.vue
index 910b7f6..665a9f9 100644
--- a/src/views/download/index.vue
+++ b/src/views/download/index.vue
@@ -11,20 +11,7 @@ defineComponent({
   name: "Download"
 });
 
-type Asset = {
-  name: string
-}
-
-type Version = {
-  id: string;
-  name: string;
-  published_at: string;
-  download_completed: boolean;
-  absPath: string;
-  assets: Asset[]
-};
-
-const versions = ref<Array<Version>>([]);
+const versions = ref<Array<FrpVersion>>([]);
 const loading = ref(1);
 const downloadPercentage = ref(0);
 const downloading = ref<Map<string, number>>(new Map<string, number>());
@@ -40,7 +27,7 @@ const handleLoadVersions = () => {
  * 下载
  * @param version
  */
-const handleDownload = useDebounceFn((version: Version) => {
+const handleDownload = useDebounceFn((version: FrpVersion) => {
   ipcRenderer.send("github.download", version.id);
   downloading.value.set(version.id, 0);
 }, 300);
@@ -49,7 +36,7 @@ const handleDownload = useDebounceFn((version: Version) => {
  * 删除下载
  * @param version
  */
-const handleDeleteVersion = useDebounceFn((version: Version) => {
+const handleDeleteVersion = useDebounceFn((version: FrpVersion) => {
   ipcRenderer.send("github.deleteVersion", {
     id: version.id,
     absPath: version.absPath
@@ -61,8 +48,8 @@ const handleInitDownloadHook = () => {
     loading.value--;
     versions.value = args.map(m => {
       m.published_at = moment(m.published_at).format("YYYY-MM-DD HH:mm:ss")
-      return m as Version;
-    }) as Array<Version>;
+      return m as FrpVersion;
+    }) as Array<FrpVersion>;
     console.log(versions, 'versions')
   });
   // 进度监听
@@ -75,7 +62,7 @@ const handleInitDownloadHook = () => {
   });
   ipcRenderer.on("Download.frpVersionDownloadOnCompleted", (event, args) => {
     downloading.value.delete(args);
-    const version: Version | undefined = versions.value.find(
+    const version: FrpVersion | undefined = versions.value.find(
         f => f.id === args
     );
     if (version) {
diff --git a/src/views/proxy/index.vue b/src/views/proxy/index.vue
index db6e18a..399645e 100644
--- a/src/views/proxy/index.vue
+++ b/src/views/proxy/index.vue
@@ -1,33 +1,16 @@
 <script lang="ts" setup>
-import {defineComponent, onMounted, onUnmounted, reactive, ref} from "vue";
+import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
 import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
-import {ElMessage, FormInstance, FormRules} from "element-plus";
-import {ipcRenderer} from "electron";
-import {clone} from "@/utils/clone";
-import {useDebounceFn} from "@vueuse/core";
+import { ElMessage, FormInstance, FormRules } from "element-plus";
+import { ipcRenderer } from "electron";
+import { clone } from "@/utils/clone";
+import { useDebounceFn } from "@vueuse/core";
 import IconifyIconOffline from "@/components/IconifyIcon/src/iconifyIconOffline";
 
-
 defineComponent({
   name: "Proxy"
 });
 
-type Proxy = {
-  _id: string;
-  name: string;
-  type: string;
-  localIp: string;
-  localPort: number;
-  remotePort: number;
-  customDomains: string[];
-};
-
-type LocalPort = {
-  protocol: string;
-  ip: string;
-  port: number;
-}
-
 /**
  * 代理列表
  */
@@ -52,42 +35,81 @@ const edit = ref({
   visible: false
 });
 
-/**
- * 表单内容
- */
-const editForm = ref<Proxy>({
+const defaultForm = ref<Proxy>({
   _id: "",
   name: "",
   type: "http",
   localIp: "",
   localPort: 8080,
   remotePort: 8080,
-  customDomains: [""]
+  customDomains: [""],
+  stcpModel: "visitor",
+  serverName: "",
+  secretKey: "",
+  bindAddr: "",
+  bindPort: null
 });
 
+/**
+ * 表单内容
+ */
+const editForm = ref<Proxy>(defaultForm.value);
+
+/**
+ * 代理类型
+ */
+const proxyTypes = ref(["http", "https", "tcp", "udp", "stcp"]);
+
+const stcpModels = ref([
+  {
+    label: "访问者",
+    value: "visitor"
+  },
+  {
+    label: "被访问者",
+    value: "visited"
+  }
+]);
+
 /**
  * 表单校验
  */
 const editFormRules = reactive<FormRules>({
   name: [
-    {required: true, message: "请输入名称", trigger: "blur"},
+    { required: true, message: "请输入名称", trigger: "blur" }
     // {
     //   pattern: /^[a-zA-Z]+$/,
     //   message: "名称只能是英文",
     //   trigger: "blur"
     // }
   ],
-  type: [{required: true, message: "请选择类型", trigger: "blur"}],
+  type: [{ required: true, message: "请选择类型", trigger: "blur" }],
   localIp: [
-    {required: true, message: "请输入内网地址", trigger: "blur"},
+    { required: true, message: "请输入内网地址", trigger: "blur" },
     {
       pattern: /^[\w-]+(\.[\w-]+)+$/,
       message: "请输入正确的内网地址",
       trigger: "blur"
     }
   ],
-  localPort: [{required: true, message: "请输入本地端口", trigger: "blur"}],
-  remotePort: [{required: true, message: "请输入远程端口", trigger: "blur"}]
+  localPort: [{ required: true, message: "请输入本地端口", trigger: "blur" }],
+  remotePort: [{ required: true, message: "请输入远程端口", trigger: "blur" }],
+  stcpModel: [{ required: true, message: "请选择stcp模式", trigger: "blur" }],
+  secretKey: [
+    { required: true, message: "请输入stcp共享密钥", trigger: "blur" }
+  ],
+  serverName: [
+    { required: true, message: "请输入stcp被访问者代理名称", trigger: "blur" }
+  ],
+  bindAddr: [
+    { required: true, message: "请输入绑定的地址", trigger: "blur" },
+    {
+      pattern: /^[\w-]+(\.[\w-]+)+$/,
+      message: "请输入正确的内网地址",
+      trigger: "blur"
+    }
+  ],
+  bindPort: [{ required: true, message: "请输入绑定的端口", trigger: "blur" }]
 });
 
 /**
@@ -147,15 +169,7 @@ const handleDeleteProxy = (proxy: Proxy) => {
  * 重置表单
  */
 const handleResetForm = () => {
-  editForm.value = {
-    _id: "",
-    name: "",
-    type: "http",
-    localIp: "",
-    localPort: 0,
-    remotePort: 0,
-    customDomains: [""]
-  };
+  editForm.value = defaultForm.value;
 };
 
 /**
@@ -164,7 +178,7 @@ const handleResetForm = () => {
 const handleInitHook = () => {
   const InsertOrUpdateHook = (message: string, args: any) => {
     loading.value.form--;
-    const {err} = args;
+    const { err } = args;
     if (!err) {
       ElMessage({
         type: "success",
@@ -186,8 +200,8 @@ const handleInitHook = () => {
   ipcRenderer.on("local.getLocalPorts.hook", (event, args) => {
     loading.value.localPorts--;
     localPorts.value = args.data;
-    console.log('本地端口', localPorts.value)
-  })
+    console.log("本地端口", localPorts.value);
+  });
   // ipcRenderer.on("Proxy.updateProxy.hook", (event, args) => {
   //   loading.value.form--;
   //   const { err } = args;
@@ -203,13 +217,13 @@ const handleInitHook = () => {
   // });
   ipcRenderer.on("Proxy.getProxys.hook", (event, args) => {
     loading.value.list--;
-    const {err, data} = args;
+    const { err, data } = args;
     if (!err) {
       proxys.value = data;
     }
   });
   ipcRenderer.on("Proxy.deleteProxyById.hook", (event, args) => {
-    const {err, data} = args;
+    const { err, data } = args;
     if (!err) {
       handleLoadProxys();
       ElMessage({
@@ -236,40 +250,38 @@ const handleOpenUpdate = (proxy: Proxy) => {
 
 const handleLoadLocalPorts = () => {
   loading.value.localPorts = 1;
-  ipcRenderer.send("local.getLocalPorts")
-}
-
+  ipcRenderer.send("local.getLocalPorts");
+};
 
 const handleSelectLocalPort = useDebounceFn((port: number) => {
   editForm.value.localPort = port;
   handleCloseLocalPortDialog();
-})
+});
 
 const handleCloseLocalPortDialog = () => {
   listPortsVisible.value = false;
-}
+};
 
 const handleOpenLocalPortDialog = () => {
   listPortsVisible.value = true;
   handleLoadLocalPorts();
 };
 
-
 interface RestaurantItem {
-  value: string
+  value: string;
 }
 
-const commonIp = ref<Array<RestaurantItem>>([])
+const commonIp = ref<Array<RestaurantItem>>([]);
 
 const handleIpFetchSuggestions = (queryString: string, cb: any) => {
   const results = queryString
-      ? commonIp.value.filter(f => {
-        return f.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
+    ? commonIp.value.filter(f => {
+        return f.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
       })
-      : commonIp.value
-  console.log(results, 'results')
-  cb(commonIp.value)
-}
+    : commonIp.value;
+  console.log(results, "results");
+  cb(commonIp.value);
+};
 
 onMounted(() => {
   handleInitHook();
@@ -289,31 +301,31 @@ onUnmounted(() => {
   <div class="main">
     <breadcrumb>
       <div
-          class="cursor-pointer h-[36px] w-[36px] bg-[#5f3bb0] rounded text-white flex justify-center items-center"
-          @click="handleOpenInsert"
+        class="cursor-pointer h-[36px] w-[36px] bg-[#5f3bb0] rounded text-white flex justify-center items-center"
+        @click="handleOpenInsert"
       >
-        <IconifyIconOffline icon="add"/>
+        <IconifyIconOffline icon="add" />
       </div>
     </breadcrumb>
-    <div class="app-container-breadcrumb" v-loading="loading.list > 0">
+    <div class="app-container-breadcrumb pr-2" v-loading="loading.list > 0">
       <template v-if="proxys && proxys.length > 0">
         <el-row :gutter="20">
           <el-col
-              v-for="proxy in proxys"
-              :key="proxy._id"
-              :lg="6"
-              :md="8"
-              :sm="12"
-              :xl="6"
-              :xs="24"
-              class="mb-[20px]"
+            v-for="proxy in proxys"
+            :key="proxy._id"
+            :lg="6"
+            :md="8"
+            :sm="12"
+            :xl="6"
+            :xs="24"
+            class="mb-[20px]"
           >
             <div class="bg-white w-full rounded drop-shadow-xl p-4">
               <div class="w-full flex justify-between">
                 <div class="flex">
                   <div
-                      class="w-12 h-12 rounded mr-4 flex justify-center items-center font-bold"
-                      :class="proxy.type"
+                    class="w-12 h-12 rounded mr-4 flex justify-center items-center font-bold"
+                    :class="proxy.type"
                   >
                     <span class="text-white text-sm">{{ proxy.type }}</span>
                   </div>
@@ -330,24 +342,25 @@ onUnmounted(() => {
                 </div>
                 <div>
                   <el-dropdown size="small">
-                    <a href="javascript:void(0)"
-                       class="text-xl text-[#ADADAD] hover:text-[#5A3DAA]"
+                    <a
+                      href="javascript:void(0)"
+                      class="text-xl text-[#ADADAD] hover:text-[#5A3DAA]"
                     >
-                      <IconifyIconOffline icon="more-vert"/>
+                      <IconifyIconOffline icon="more-vert" />
                     </a>
                     <template #dropdown>
                       <el-dropdown-menu>
                         <el-dropdown-item @click="handleOpenUpdate(proxy)">
                           <IconifyIconOffline
-                              icon="edit"
-                              class="primary-text text-[14px]"
+                            icon="edit"
+                            class="primary-text text-[14px]"
                           />
                           <span class="ml-1">修 改</span>
                         </el-dropdown-item>
                         <el-dropdown-item @click="handleDeleteProxy(proxy)">
                           <IconifyIconOffline
-                              icon="delete-rounded"
-                              class="text-red-500 text-[14px]"
+                            icon="delete-rounded"
+                            class="text-red-500 text-[14px]"
                           />
                           <span class="ml-1">删 除</span>
                         </el-dropdown-item>
@@ -376,93 +389,164 @@ onUnmounted(() => {
         </el-row>
       </template>
       <div
-          v-else
-          class="w-full h-full bg-white rounded p-2 overflow-hidden drop-shadow-xl flex justify-center items-center"
+        v-else
+        class="w-full h-full bg-white rounded p-2 overflow-hidden drop-shadow-xl flex justify-center items-center"
       >
-        <el-empty description="暂无代理"/>
+        <el-empty description="暂无代理" />
       </div>
     </div>
 
     <el-dialog
-        v-model="edit.visible"
-        :title="edit.title"
-        width="500"
-        top="5%"
+      v-model="edit.visible"
+      :title="edit.title"
+      class="sm:w-[500px] md:w-[600px] lg:w-[800px]"
+      top="5%"
     >
       <el-form
-          v-loading="loading.form"
-          label-position="top"
-          :model="editForm"
-          :rules="editFormRules"
-          ref="editFormRef"
+        v-loading="loading.form"
+        label-position="top"
+        :model="editForm"
+        :rules="editFormRules"
+        ref="editFormRef"
       >
         <el-row :gutter="10">
           <el-col :span="24">
             <el-form-item label="代理类型：" prop="type">
               <el-radio-group v-model="editForm.type">
-                <el-radio label="http" model-value="http"/>
-                <el-radio label="https" model-value="https"/>
-                <el-radio label="tcp" model-value="tcp"/>
-                <el-radio label="udp" model-value="udp"/>
-                <!--                <el-radio label="stcp" model-value="stcp" />-->
+                <el-radio-button
+                  v-for="p in proxyTypes"
+                  :key="p"
+                  :label="p"
+                  :value="p"
+                />
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <el-col :span="12">
+          <template v-if="editForm.type === 'stcp'">
+            <el-col :span="12">
+              <el-form-item label="stcp模式：" prop="stcpModel">
+                <el-radio-group v-model="editForm.stcpModel">
+                  <el-radio
+                    v-for="p in stcpModels"
+                    :key="p.value"
+                    :label="p.label"
+                    :value="p.value"
+                  />
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="共享密钥：" prop="secretKey">
+                <template #label>
+                  <div class="inline-block">
+                    <div class="flex items-center">
+                      <div class="mr-1">
+                        <el-popover placement="top" trigger="hover" width="300">
+                          <template #default>
+                            对应参数：<span class="font-black text-[#5A3DAA]"
+                              >secretKey</span
+                            >
+                            只有访问者与被访问者共享密钥一致的用户才能访问该服务
+                          </template>
+                          <template #reference>
+                            <IconifyIconOffline
+                              class="text-base"
+                              color="#5A3DAA"
+                              icon="info"
+                            />
+                          </template>
+                        </el-popover>
+                      </div>
+                      共享密钥：
+                    </div>
+                  </div>
+                </template>
+                <el-input
+                  type="password"
+                  v-model="editForm.secretKey"
+                  placeholder="密钥"
+                />
+              </el-form-item>
+            </el-col>
+          </template>
+          <el-col :span="editForm.stcpModel === 'visitor' ? 12 : 24">
             <el-form-item label="代理名称：" prop="name">
-              <el-input v-model="editForm.name" placeholder="代理名称" clearable/>
+              <el-input
+                v-model="editForm.name"
+                placeholder="代理名称"
+                clearable
+              />
             </el-form-item>
           </el-col>
-          <el-col :span="12">
-            <el-form-item label="内网地址：" prop="localIp">
-              <!--              <el-autocomplete-->
-              <!--                  v-model="editForm.localIp"-->
-              <!--                  :fetch-suggestions="handleIpFetchSuggestions"-->
-              <!--                  clearable-->
-              <!--                  placeholder="127.0.0.1"-->
-              <!--              />-->
-              <el-input v-model="editForm.localIp" placeholder="127.0.0.1" clearable/>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="内网端口：" prop="localPort">
-              <el-input-number
+          <template
+            v-if="
+              editForm.type !== 'stcp' ||
+              (editForm.type === 'stcp' && editForm.stcpModel === 'visited')
+            "
+          >
+            <el-col :span="12">
+              <el-form-item label="内网地址：" prop="localIp">
+                <!--              <el-autocomplete-->
+                <!--                  v-model="editForm.localIp"-->
+                <!--                  :fetch-suggestions="handleIpFetchSuggestions"-->
+                <!--                  clearable-->
+                <!--                  placeholder="127.0.0.1"-->
+                <!--              />-->
+                <el-input
+                  v-model="editForm.localIp"
+                  placeholder="127.0.0.1"
+                  clearable
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="内网端口：" prop="localPort">
+                <el-input-number
                   placeholder="8080"
                   class="local-port-input"
                   :min="0"
                   :max="65535"
                   v-model="editForm.localPort"
                   controls-position="right"
-              />
-              <el-button class="ml-[10px]" plain type="primary" @click="handleOpenLocalPortDialog">
-                <IconifyIconOffline class="cursor-pointer mr-2" icon="bring-your-own-ip-rounded"/>
-                本地端口
-              </el-button>
-            </el-form-item>
-          </el-col>
+                />
+                <el-button
+                  class="ml-[10px]"
+                  plain
+                  type="primary"
+                  @click="handleOpenLocalPortDialog"
+                >
+                  <IconifyIconOffline
+                    class="cursor-pointer mr-2"
+                    icon="bring-your-own-ip-rounded"
+                  />
+                  本地端口
+                </el-button>
+              </el-form-item>
+            </el-col>
+          </template>
           <template v-if="editForm.type === 'tcp' || editForm.type === 'udp'">
             <el-col :span="8">
               <el-form-item label="外网端口：" prop="remotePort">
                 <el-input-number
-                    :min="0"
-                    :max="65535"
-                    placeholder="8080"
-                    v-model="editForm.remotePort"
-                    controls-position="right"
+                  :min="0"
+                  :max="65535"
+                  placeholder="8080"
+                  v-model="editForm.remotePort"
+                  controls-position="right"
                 />
               </el-form-item>
             </el-col>
           </template>
           <template
-              v-if="editForm.type === 'http' || editForm.type === 'https'"
+            v-if="editForm.type === 'http' || editForm.type === 'https'"
           >
             <el-col :span="24">
               <el-form-item
-                  v-for="(d, di) in editForm.customDomains"
-                  :key="'domain' + di"
-                  :label="di === 0 ? '自定义域名：' : ''"
-                  :prop="`customDomains.${di}`"
-                  :rules="[
+                v-for="(d, di) in editForm.customDomains"
+                :key="'domain' + di"
+                :label="di === 0 ? '自定义域名：' : ''"
+                :prop="`customDomains.${di}`"
+                :rules="[
                   {
                     required: true,
                     message: `自定义域名不能为空`,
@@ -480,73 +564,177 @@ onUnmounted(() => {
                   <div class="inline-block">
                     <div class="flex items-center">
                       <div class="mr-1">
-                        <el-popover
-                            placement="top"
-                            trigger="hover"
-                        >
+                        <el-popover placement="top" trigger="hover">
                           <template #default>
-                            对应参数：<span class="font-black text-[#5A3DAA]">customDomains</span>
+                            对应参数：<span class="font-black text-[#5A3DAA]"
+                              >customDomains</span
+                            >
                           </template>
                           <template #reference>
-                            <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>
+                            <IconifyIconOffline
+                              class="text-base"
+                              color="#5A3DAA"
+                              icon="info"
+                            />
                           </template>
                         </el-popover>
                       </div>
                       自定义域名：
                     </div>
                   </div>
-<!--                  <el-popover-->
-<!--                      placement="top"-->
-<!--                      trigger="hover"-->
-<!--                  >-->
-<!--                    <template #default>-->
-<!--                      对应参数：<span class="font-black text-[#5A3DAA]">customDomains</span>-->
-<!--                    </template>-->
-<!--                    <template #reference>-->
-<!--                      <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>-->
-<!--                    </template>-->
-<!--                  </el-popover>-->
-<!--                  <div class="flex items-center inin">-->
-<!--                    <div class="h-full flex items-center mr-1">-->
-<!--                      -->
-<!--                    </div>-->
-<!--                    <div>自定义域名：</div>-->
-<!--                  </div>-->
+                  <!--                  <el-popover-->
+                  <!--                      placement="top"-->
+                  <!--                      trigger="hover"-->
+                  <!--                  >-->
+                  <!--                    <template #default>-->
+                  <!--                      对应参数：<span class="font-black text-[#5A3DAA]">customDomains</span>-->
+                  <!--                    </template>-->
+                  <!--                    <template #reference>-->
+                  <!--                      <IconifyIconOffline class="text-base" color="#5A3DAA" icon="info"/>-->
+                  <!--                    </template>-->
+                  <!--                  </el-popover>-->
+                  <!--                  <div class="flex items-center inin">-->
+                  <!--                    <div class="h-full flex items-center mr-1">-->
+                  <!--                      -->
+                  <!--                    </div>-->
+                  <!--                    <div>自定义域名：</div>-->
+                  <!--                  </div>-->
                 </template>
                 <el-input
-                    class="domain-input"
-                    placeholder="github.com"
-                    v-model="editForm.customDomains[di]"
+                  class="domain-input"
+                  placeholder="github.com"
+                  v-model="editForm.customDomains[di]"
                 />
                 <el-button
-                    class="ml-[10px]"
-                    type="primary"
-                    plain
-                    @click="handleAddDomain"
+                  class="ml-[10px]"
+                  type="primary"
+                  plain
+                  @click="handleAddDomain"
                 >
-                  <IconifyIconOffline icon="add"/>
+                  <IconifyIconOffline icon="add" />
                 </el-button>
                 <el-button
-                    type="danger"
-                    plain
-                    @click="handleDeleteDomain(di)"
-                    :disabled="editForm.customDomains.length === 1"
+                  type="danger"
+                  plain
+                  @click="handleDeleteDomain(di)"
+                  :disabled="editForm.customDomains.length === 1"
                 >
-                  <IconifyIconOffline icon="delete-rounded"/>
+                  <IconifyIconOffline icon="delete-rounded" />
                 </el-button>
               </el-form-item>
             </el-col>
           </template>
+          <template
+            v-if="editForm.type === 'stcp' && editForm.stcpModel === 'visitor'"
+          >
+            <el-col :span="12">
+              <el-form-item label="被访问者代理名称：" prop="serverName">
+                <el-input
+                  type="text"
+                  v-model="editForm.serverName"
+                  placeholder="stcp被访问者代理名称"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="绑定地址：" prop="bindAddr">
+                <template #label>
+                  <div class="inline-block">
+                    <div class="flex items-center">
+                      <div class="mr-1">
+                        <el-popover placement="top" trigger="hover" width="300">
+                          <template #default>
+                            对应参数：<span class="font-black text-[#5A3DAA]"
+                              >bindAddr</span
+                            >
+                            要将被访问者的服务绑定到本地哪个<span
+                              class="font-black text-[#5A3DAA]"
+                              >IP</span
+                            >
+                            <br />
+                            仅本机访问：<span class="font-black text-[#5A3DAA]"
+                              >127.0.0.1</span
+                            >
+                            <br />
+                            支持局域网其他设备访问：<span
+                              class="font-black text-[#5A3DAA]"
+                              >0.0.0.0</span
+                            >
+                            <br />
+                          </template>
+                          <template #reference>
+                            <IconifyIconOffline
+                              class="text-base"
+                              color="#5A3DAA"
+                              icon="info"
+                            />
+                          </template>
+                        </el-popover>
+                      </div>
+                      绑定地址：
+                    </div>
+                  </div>
+                </template>
+                <el-input
+                  type="text"
+                  v-model="editForm.bindAddr"
+                  placeholder="127.0.0.1"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="绑定端口：" prop="bindPort">
+                <template #label>
+                  <div class="inline-block">
+                    <div class="flex items-center">
+                      <div class="mr-1">
+                        <el-popover placement="top" trigger="hover" width="300">
+                          <template #default>
+                            对应参数：<span class="font-black text-[#5A3DAA]"
+                              >bindAddr</span
+                            >
+                            要将被访问者的服务绑定到本地哪个<span
+                              class="font-black text-[#5A3DAA]"
+                              >端口</span
+                            >
+                            <br />
+                            请自行确保端口未被占用
+                          </template>
+                          <template #reference>
+                            <IconifyIconOffline
+                              class="text-base"
+                              color="#5A3DAA"
+                              icon="info"
+                            />
+                          </template>
+                        </el-popover>
+                      </div>
+                      绑定端口：
+                    </div>
+                  </div>
+                </template>
+                <el-input-number
+                  v-model="editForm.bindPort"
+                  placeholder="8080"
+                />
+              </el-form-item>
+            </el-col>
+          </template>
           <el-col :span="24">
             <el-form-item>
               <div class="w-full flex justify-end">
                 <el-button @click="edit.visible = false">
-                  <iconify-icon-offline class="cursor-pointer mr-2" icon="cancel-presentation"/>
+                  <iconify-icon-offline
+                    class="cursor-pointer mr-2"
+                    icon="cancel-presentation"
+                  />
                   关 闭
                 </el-button>
-                <el-button plain type="primary" @click="handleSubmit"
-                >
-                  <IconifyIconOffline class="cursor-pointer mr-2" icon="save-rounded"/>
+                <el-button plain type="primary" @click="handleSubmit">
+                  <IconifyIconOffline
+                    class="cursor-pointer mr-2"
+                    icon="save-rounded"
+                  />
                   保 存
                 </el-button>
               </div>
@@ -556,24 +744,30 @@ onUnmounted(() => {
       </el-form>
     </el-dialog>
 
-    <el-dialog v-model="listPortsVisible"
-               title="本地端口"
-               width="600"
-               top="5%">
-      <el-table :data="localPorts" stripe
-                v-loading="loading.localPorts"
-                border height="400">
-        <el-table-column label="协议" :width="60" prop="protocol"/>
-        <el-table-column label="IP" prop="ip"/>
-        <el-table-column label="端口" :width="80" prop="port"/>
+    <el-dialog v-model="listPortsVisible" title="本地端口" width="600" top="5%">
+      <el-table
+        :data="localPorts"
+        stripe
+        v-loading="loading.localPorts"
+        border
+        height="400"
+      >
+        <el-table-column label="协议" :width="60" prop="protocol" />
+        <el-table-column label="IP" prop="ip" />
+        <el-table-column label="端口" :width="80" prop="port" />
         <el-table-column label="操作" :width="80">
           <template #default="scope">
-            <el-button type="text" @click="handleSelectLocalPort(scope.row.port)">
-              <IconifyIconOffline class="cursor-pointer mr-2" icon="gesture-select"/>
+            <el-button
+              type="text"
+              @click="handleSelectLocalPort(scope.row.port)"
+            >
+              <IconifyIconOffline
+                class="cursor-pointer mr-2"
+                icon="gesture-select"
+              />
               选择
             </el-button>
           </template>
-
         </el-table-column>
       </el-table>
     </el-dialog>
diff --git a/types/global.d.ts b/types/global.d.ts
new file mode 100644
index 0000000..1434e79
--- /dev/null
+++ b/types/global.d.ts
@@ -0,0 +1,80 @@
+declare module 'element-plus/dist/locale/zh-cn.mjs' {
+    const zhLocale: any;
+    export default zhLocale;
+}
+
+declare module 'element-plus/dist/locale/en.mjs' {
+    const enLocale: any;
+    export default enLocale;
+}
+
+declare global {
+
+    /**
+     * 代理配置类型
+     */
+    type Proxy = {
+        _id: string;
+        name: string;
+        type: string;
+        localIp: string;
+        localPort: number;
+        remotePort: number;
+        customDomains: string[];
+        stcpModel: string;
+        serverName: string;
+        secretKey: string;
+        bindAddr: string;
+        bindPort: string;
+    };
+
+    /**
+     * 本地端口类型
+     */
+    type LocalPort = {
+        protocol: string;
+        ip: string;
+        port: number;
+    }
+
+    /**
+     * 版本类型
+     */
+    type FrpVersion = {
+        id: string;
+        name: string;
+        published_at: string;
+        download_completed: boolean;
+        absPath: string;
+        assets: Asset[]
+    };
+
+    /**
+     * 全局配置
+     */
+    type FrpConfig = {
+        currentVersion: string;
+        serverAddr: string;
+        serverPort: number;
+        authMethod: string;
+        authToken: string;
+        logLevel: string;
+        logMaxDays: number;
+        tlsConfigEnable: boolean;
+        tlsConfigCertFile: string;
+        tlsConfigKeyFile: string;
+        tlsConfigTrustedCaFile: string;
+        tlsConfigServerName: string;
+        proxyConfigEnable: boolean;
+        proxyConfigProxyUrl: string;
+        systemSelfStart: boolean;
+        systemStartupConnect: boolean;
+        user: string;
+        metaToken: string;
+        transportHeartbeatInterval: number;
+        transportHeartbeatTimeout: number;
+    };
+
+
+}
+export {};
\ No newline at end of file
diff --git a/src/types/shims-tsx.d.ts b/types/shims-tsx.d.ts
similarity index 100%
rename from src/types/shims-tsx.d.ts
rename to types/shims-tsx.d.ts
diff --git a/src/types/shims-vue.d.ts b/types/shims-vue.d.ts
similarity index 100%
rename from src/types/shims-vue.d.ts
rename to types/shims-vue.d.ts