限制端口号范围

src/renderer/src/views/login/index.vue

@@ -116,11 +116,26 @@
               <div class="item port">
                 <template v-if="servVal == '单机'">
                   <span class="itemLabel">端口</span>
-                  <el-input v-model="localport"></el-input>
+                  <el-form-item prop="localport" :rules="[
+                      {
+                        validator: validateLocalportRange,
+                        trigger: 'blur'
+                      }
+                    ]">
+                    <el-input-number v-model="localport" :controls="false" />
+                  </el-form-item>
                 </template>
                 <template v-if="servVal == '网络'">
                   <span class="itemLabel">端口</span>
-                  <el-input v-model="port"></el-input>
+                  <el-form-item prop="port" :rules="[
+                      {
+                        validator: validatePortRange,
+                        message: '端口号必须在 1024–65535 之间',
+                        trigger: 'blur'
+                      }
+                    ]">
+                    <el-input-number v-model="port" :controls="false" />
+                  </el-form-item>
                 </template>
               </div>
             </template>
@@ -419,6 +434,29 @@ else {
   })
 }
 
+const validateLocalportRange = (rule, value, callback) => {
+  if(!localport.value) {
+    callback(new Error('请输入端口号')); // 校验失败
+    return
+  }
+  if (localport.value < 1024 || localport.value > 65535) {
+    callback(new Error('端口号范围在 1024–65535 之间')); // 校验失败
+  } else {
+    callback(); // 校验通过
+  }
+};
+const validatePortRange = (rule, value, callback) => {
+  if(!port.value) {
+    callback(new Error('请输入端口号')); // 校验失败
+    return
+  }
+  if (port.value < 1024 || port.value > 65535) {
+    callback(new Error('端口号范围在 1024–65535 之间')); // 校验失败
+  } else {
+    callback(); // 校验通过
+  }
+};
+
 </script>
 <style lang="scss">
 // 添加过渡样式
@@ -794,8 +832,20 @@ else {
             display: flex;
             align-items: center;
             margin: 15px 0;
+            ::v-deep .el-input__wrapper {
+              padding: 1px 12px;
+            }
 
-            .select {}
+            .el-form-item {
+              margin-bottom: 0px;
+              flex: 1;
+              .el-input-number {
+                width: 100%;
+                ::v-deep .el-input__inner {
+                  text-align: left;
+                }
+              }
+            }
           }
         }
       }

src/renderer/src/views/login/useSetUp.ts

@@ -8,9 +8,9 @@ export const useSetUp = () => {
   const servVal = ref('单机') // 服务类型选择值
   const prototype = ref('http') // 协议选择值
   const ip = ref('192.168.1.1')
-  const port = ref('8890')
+  const port = ref(8890)
   const localip = ref('127.0.0.1')
-  const localport = ref('8848')
+  const localport = ref(8848)
   const gpsVal = ref('') // 服务类型选择值
   const gpsOptions: any = ref([])
   const servOptions: any = ref([{ name: '单机' }, { name: '网络' }])
@@ -32,12 +32,12 @@ export const useSetUp = () => {
     if (serverMode === 'false') {
       servVal.value = '网络'
       ip.value = ipPort[0]
-      port.value = ipPort[1]
+      port.value = Number(ipPort[1])
       prototype.value = parsedUrl.protocol.slice(0, -1)
     }
     else {
       localip.value = ipPort[0]
-      localport.value = ipPort[1]
+      localport.value = Number(ipPort[1])
     }
   }
 
@@ -45,6 +45,19 @@ export const useSetUp = () => {
     switch (selectedService.value) {
       case '接口服务':
         //   this.submitIP();
+        if (serverMode === 'false') {
+          if(Number(port.value) < 1024 || Number(port.value) > 65535) {
+            // ElMessage.error('端口号范围为1024-65535')
+            return
+          }
+        }
+        else {
+          if(Number(localport.value) < 1024 || Number(localport.value) > 65535) {
+            // ElMessage.error('端口号范围为1024-65535')
+            return
+          }
+        }
+        
         submitIP()
         break
       case '北斗串口':