From 6d5f985dfe8fe5f04e9446c2ea0ded46a817ae83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=98=89=E4=BC=9F?= <8473136@qq.com>
Date: Sun, 15 Sep 2024 10:47:48 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/proxy/index.vue | 66 +++++++++++++++++++++++++++++----------
 1 file changed, 49 insertions(+), 17 deletions(-)

diff --git a/src/views/proxy/index.vue b/src/views/proxy/index.vue
index 59bf7d5..0519298 100644
--- a/src/views/proxy/index.vue
+++ b/src/views/proxy/index.vue
@@ -1,5 +1,12 @@
 <script lang="ts" setup>
-import { defineComponent, onMounted, onUnmounted, reactive, ref } from "vue";
+import {
+  computed,
+  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";
@@ -7,6 +14,7 @@ import { clone } from "@/utils/clone";
 import { useDebounceFn } from "@vueuse/core";
 import IconifyIconOffline from "@/components/IconifyIcon/src/iconifyIconOffline";
 import commonIps from "./commonIp.json";
+import router from "@/router";
 
 defineComponent({
   name: "Proxy"
@@ -133,6 +141,38 @@ const editFormRules = reactive<FormRules>({
  */
 const editFormRef = ref<FormInstance>();
 
+const isTcp = computed(() => {
+  return editForm.value.type === "tcp";
+});
+
+const isUdp = computed(() => {
+  return editForm.value.type === "udp";
+});
+
+const isHttp = computed(() => {
+  return editForm.value.type === "http";
+});
+
+const isHttps = computed(() => {
+  return editForm.value.type === "https";
+});
+
+const isStcp = computed(() => {
+  return editForm.value.type === "stcp";
+});
+
+const isStcpVisited = computed(() => {
+  return (
+    editForm.value.type === "stcp" && editForm.value.stcpModel === "visited"
+  );
+});
+
+const isStcpVisitors = computed(() => {
+  return (
+    editForm.value.type === "stcp" && editForm.value.stcpModel === "visitors"
+  );
+});
+
 const handleGetPortCount = (portString: string) => {
   let count = 0;
   const portRanges = portString.split(",");
@@ -618,7 +658,7 @@ onUnmounted(() => {
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <template v-if="editForm.type === 'stcp'">
+          <template v-if="isStcp">
             <el-col :span="12">
               <el-form-item label="stcp模式：" prop="stcpModel">
                 <el-radio-group v-model="editForm.stcpModel">
@@ -665,7 +705,7 @@ onUnmounted(() => {
               </el-form-item>
             </el-col>
           </template>
-          <el-col :span="editForm.stcpModel === 'visitors' ? 12 : 24">
+          <el-col :span="isStcpVisitors ? 12 : 24">
             <el-form-item label="代理名称：" prop="name">
               <el-input
                 v-model="editForm.name"
@@ -674,12 +714,7 @@ onUnmounted(() => {
               />
             </el-form-item>
           </el-col>
-          <template
-            v-if="
-              editForm.type !== 'stcp' ||
-              (editForm.type === 'stcp' && editForm.stcpModel === 'visited')
-            "
-          >
+          <template v-if="!isStcp || isStcpVisited">
             <el-col :span="12">
               <el-form-item label="内网地址：" prop="localIp">
                 <el-autocomplete
@@ -698,7 +733,7 @@ onUnmounted(() => {
             <el-col :span="12">
               <el-form-item label="内网端口：" prop="localPort">
                 <el-input-number
-                  v-if="editForm.type === 'http' || editForm.type === 'https'"
+                  v-if="isHttp || isHttps"
                   placeholder="8080"
                   class="local-port-input"
                   :min="0"
@@ -727,7 +762,8 @@ onUnmounted(() => {
               </el-form-item>
             </el-col>
           </template>
-          <template v-if="editForm.type === 'tcp' || editForm.type === 'udp'">
+          <template v-if="isHttp || isHttps"></template>
+          <template v-if="isTcp || isUdp">
             <el-col :span="8">
               <el-form-item label="外网端口：" prop="remotePort">
                 <!--                <el-input-number-->
@@ -745,9 +781,7 @@ onUnmounted(() => {
               </el-form-item>
             </el-col>
           </template>
-          <template
-            v-if="editForm.type === 'http' || editForm.type === 'https'"
-          >
+          <template v-if="isHttp || isHttps">
             <el-col :span="24">
               <el-form-item
                 v-for="(d, di) in editForm.customDomains"
@@ -832,9 +866,7 @@ onUnmounted(() => {
               </el-form-item>
             </el-col>
           </template>
-          <template
-            v-if="editForm.type === 'stcp' && editForm.stcpModel === 'visitors'"
-          >
+          <template v-if="isStcpVisitors">
             <el-col :span="12">
               <el-form-item label="被访问者代理名称：" prop="serverName">
                 <el-input