支持PC端支持使用IP+端口的方式登录

src/App.vue

@@ -11,6 +11,7 @@ import { defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { useStore } from "src/store";
+import GlobalData from "./common/GlobalData";
 
 export default defineComponent({
   name: "App",
@@ -101,6 +102,8 @@ export default defineComponent({
 
     (window as any).controlLogout = () => {
       Cookies.remove("auto_login");
+      GlobalData.getInstance().getCurrentClient()?.destory();
+      GlobalData.getInstance().clearClients();
       SessionStorage.clear();
       try {
         $q.fullscreen.exit();

src/common/ClientConnection.ts

@@ -1105,13 +1105,13 @@ export default class ClientConnection {
   }
 
   public destory() {
+    this.ws?.close();
     if (this.ws) {
       this.ws.onclose = null;
       this.ws.onerror = null;
       this.ws.onopen = null;
       this.ws.onmessage = null;
     }
-    this.ws?.close();
     this.ws = null;
   }
 }

src/common/GlobalData.ts

@@ -198,6 +198,17 @@ export default class GlobalData {
     return this.getClient(this._current_client_name);
   }
 
+  public clearClients() {
+    for (const item of this.clients) {
+      if (item && item[1]) {
+        item[1]?.destory();
+        (<any>item[1]) = null;
+      }
+    }
+    this.clients.clear();
+    this.clients = new Map<string, ClientConnection>();
+  }
+
   public createCurrentRequestUrl() {
     let client = this.getCurrentClient();
     if (client) {

src/components/FileManageDialog.vue

@@ -240,7 +240,7 @@
                     >
                       {{ $t("rename") }}
                       <q-tooltip>
-                        {{ $t("click") }}{{ $t("rename") }}
+                        {{ $t("click") }}{{ $t(" ") }}{{ $t("rename") }}
                       </q-tooltip>
                     </a>
                     &nbsp;&nbsp;&nbsp;&nbsp;
@@ -250,7 +250,7 @@
                     >
                       {{ $t("_copy2") }}
                       <q-tooltip>
-                        {{ $t("click") }}{{ $t("_copy2") }}
+                        {{ $t("click") }}{{ $t(" ") }}{{ $t("_copy2") }}
                       </q-tooltip>
                     </a>
                     &nbsp;&nbsp;&nbsp;&nbsp;
@@ -260,7 +260,7 @@
                     >
                       {{ $t("_cut2") }}
                       <q-tooltip>
-                        {{ $t("click") }}{{ $t("_cut2") }}
+                        {{ $t("click") }}{{ $t(" ") }}{{ $t("_cut2") }}
                       </q-tooltip>
                     </a>
                     &nbsp;&nbsp;&nbsp;&nbsp;
@@ -270,7 +270,7 @@
                     >
                       {{ $t("delete") }}
                       <q-tooltip>
-                        {{ $t("click") }}{{ $t("delete") }}
+                        {{ $t("click") }}{{ $t(" ") }}{{ $t("delete") }}
                       </q-tooltip>
                     </a>
                   </div>
@@ -282,7 +282,7 @@
                   >
                     {{ $t("select file") }}
                     <q-tooltip>
-                      {{ $t("click") }}{{ $t("select file") }}
+                      {{ $t("click") }}{{ $t(" ") }}{{ $t("select file") }}
                     </q-tooltip>
                   </a>
                 </div>

src/i18n/en-US/index.ts

@@ -304,4 +304,6 @@ export default {
   "cancel upload file": "Cancel Upload File",
   "are you sure power off device": "Are You Sure Power Off Device",
   "input folder name": "Input Folder Name",
+  example: "Example",
+  "example:": "Example:",
 };

src/pages/Login.vue

@@ -30,18 +30,19 @@
                       :disable="data.loading"
                       v-model="data.ip_address"
                       :label="$t('server ip address')"
-                      :hint="$t('please input server ip address')"
+                      :hint="
+                        $t('please input server ip address') +
+                        ', ' +
+                        $t('example') +
+                        ':' +
+                        '192.168.1.1:1234'
+                      "
                       lazy-rules
                       :rules="[
                         (val) =>
                           (val && val.length > 0) ||
                           $t('Please type something'),
-                        (val) =>
+                        checkLoginIpaddress,
-                          val == 'localhost' ||
-                          /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
-                            val
-                          ) ||
-                          $t('Please input vaild ip address'),
                       ]"
                       @keydown="
                         (evt) => {
@@ -210,6 +211,7 @@ class _Data {
   loading = false;
   ip_address = window.location.hostname;
   show_password = false;
+  websocket_port = GlobalData.kDefaultWebsocektPort;
 
   constructor() {
     let temp = LocalStorage.getItem("default_ip_address");
@@ -306,6 +308,10 @@ export default defineComponent({
       }
     } catch {}
 
+    if (data.websocket_port != GlobalData.kDefaultWebsocektPort) {
+      data.ip_address += ":" + data.websocket_port;
+    }
+
     return {
       login_form,
       data,
@@ -317,12 +323,22 @@ export default defineComponent({
         return new Promise((resolve) => {
           data.loading = true;
           try {
+            const pos = data.ip_address.lastIndexOf(":");
+            let target_ip = data.ip_address;
+            let target_port = GlobalData.kDefaultWebsocektPort;
+            if (pos != -1) {
+              target_ip = data.ip_address.substring(0, pos);
+              const port = parseInt(data.ip_address.substring(pos + 1));
+              if (!isNaN(port) && port != Infinity) {
+                target_port = port;
+              }
+            }
             let global_data = GlobalData.getInstance();
             const url =
               "ws://" +
-              data.ip_address +
+              target_ip +
               ":" +
-              GlobalData.kDefaultWebsocektPort.toString() +
+              target_port +
               GlobalData.kWebsocketResource;
             web_socket = new ClientConnection(
               url,
@@ -439,6 +455,37 @@ export default defineComponent({
         data.password = null;
         remember_password.value = false;
       },
+      checkLoginIpaddress(val: string) {
+        const is_ip_addrss = (ip: string) => {
+          return /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
+            ip
+          );
+        };
+
+        const is_port = (port: string) => {
+          return /^(:?)([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(
+            port
+          );
+        };
+
+        if (val.trim() == "localhost") {
+          return true;
+        } else {
+          const pos = val.lastIndexOf(":");
+          if (pos == -1) {
+            return is_ip_addrss(val) || $t.t("Please input vaild ip address");
+          } else {
+            const str_ip = val.substring(0, pos);
+            const str_port = val.substring(pos + 1);
+            if (str_port) {
+              return (
+                (is_ip_addrss(str_ip) && is_port(str_port)) ||
+                $t.t("Please input vaild ip address")
+              );
+            }
+          }
+        }
+      },
     };
   },
 });