fix: alert issue on Windows by using native messageBox (#509)

* Fix alert issue on Windows by using native messageBox

* Update related docs for alert fix

* Remove unlocalized hint

src/utils/nativeAlert.js

@@ -0,0 +1,32 @@
+/**
+ * Returns an alert-like function that fits current runtime environment
+ *
+ * This function is amid to solve a electron bug on Windows, that, when
+ * user dismissed a browser alert, <input> elements cannot be focused
+ * for further editing unless switching to another window and then back
+ *
+ * @returns { (message:string) => void }
+ * Built-in alert function for browser environment
+ * A function wrapping {@link dialog.showMessageBoxSync} for electron environment
+ *
+ * @see {@link https://github.com/electron/electron/issues/19977} for upstream electron issue
+ */
+const nativeAlert = (() => {
+  if (process.env.IS_ELECTRON === true) {
+    const {
+      remote: { dialog },
+    } = require("electron");
+    if (dialog) {
+      return (message) => {
+        var options = {
+          type: "warning",
+          detail: message,
+        };
+        dialog.showMessageBoxSync(null, options);
+      };
+    }
+  }
+  return alert;
+})();
+
+export default nativeAlert;

src/views/loginAccount.vue

@@ -96,6 +96,7 @@ import { loginWithPhone, loginWithEmail } from "@/api/auth";
 import { setCookies } from "@/utils/auth";
 import md5 from "crypto-js/md5";
 import { mapMutations } from "vuex";
+import nativeAlert from "@/utils/nativeAlert";
 
 export default {
   name: "Login",
@@ -130,7 +131,7 @@ export default {
         this.phone === "" ||
         this.password === ""
       ) {
-        alert("国家区号或手机号不正确");
+        nativeAlert("国家区号或手机号不正确");
         this.processing = false;
         return false;
       }
@@ -143,7 +144,7 @@ export default {
         this.password === "" ||
         !emailReg.test(this.email)
       ) {
-        alert("邮箱不正确");
+        nativeAlert("邮箱不正确");
         return false;
       }
       return true;
@@ -161,7 +162,7 @@ export default {
           .then(this.handleLoginResponse)
           .catch((error) => {
             this.processing = false;
-            alert(`发生错误，请检查你的账号密码是否正确\n${error}`);
+            nativeAlert(`发生错误，请检查你的账号密码是否正确\n${error}`);
           });
       } else {
         this.processing = this.validateEmail();
@@ -174,7 +175,7 @@ export default {
           .then(this.handleLoginResponse)
           .catch((error) => {
             this.processing = false;
-            alert(`发生错误，请检查你的账号密码是否正确\n${error}`);
+            nativeAlert(`发生错误，请检查你的账号密码是否正确\n${error}`);
           });
       }
     },
@@ -191,7 +192,7 @@ export default {
       } else {
         this.processing = false;
         console.log(data.msg);
-        alert(data.msg ?? data.message ?? "账号或密码错误，请检查");
+        nativeAlert(data.msg ?? data.message ?? "账号或密码错误，请检查");
       }
     },
   },

src/views/playlist.vue

@@ -199,6 +199,7 @@ import {
 } from "@/api/playlist";
 import { getTrackDetail } from "@/api/track";
 import { isAccountLoggedIn } from "@/utils/auth";
+import nativeAlert from "@/utils/nativeAlert";
 
 import ButtonTwoTone from "@/components/ButtonTwoTone.vue";
 import ContextMenu from "@/components/ContextMenu.vue";
@@ -467,16 +468,16 @@ export default {
       if (confirmation === true) {
         deletePlaylist(this.playlist.id).then((data) => {
           if (data.code === 200) {
-            alert(`已删除歌单 ${this.playlist.name}`);
+            nativeAlert(`已删除歌单 ${this.playlist.name}`);
             this.$router.go(-1);
           } else {
-            alert("发生错误");
+            nativeAlert("发生错误");
           }
         });
       }
     },
     editPlaylist() {
-      alert("此功能开发中");
+      nativeAlert("此功能开发中");
     },
     searchInPlaylist() {
       this.displaySearchInPlaylist = !this.displaySearchInPlaylist;