feat: replace alerts with toast notifications

open-isle-cli/package-lock.json

@@ -12,7 +12,8 @@
         "markdown-it": "^14.1.0",
         "vditor": "^3.8.7",
         "vue": "^3.2.13",
-        "vue-router": "^4.5.1"
+        "vue-router": "^4.5.1",
+        "vue-toastification": "^2.0.0-rc.5"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -11518,6 +11519,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-toastification": {
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/vue-toastification/-/vue-toastification-2.0.0-rc.5.tgz",
+      "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.4",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.4.tgz",

open-isle-cli/package.json

@@ -12,7 +12,8 @@
     "markdown-it": "^14.1.0",
     "vditor": "^3.8.7",
     "vue": "^3.2.13",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vue-toastification": "^2.0.0-rc.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

open-isle-cli/src/main.js

@@ -2,6 +2,8 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import './assets/global.css'
+import Toast, { POSITION } from 'vue-toastification'
+import 'vue-toastification/dist/index.css'
 
 // Configurable API domain and port
 export const API_DOMAIN =
@@ -10,4 +12,7 @@ export const API_DOMAIN =
 export const API_PORT = process.env.VUE_APP_API_PORT || window.location.port
 export const API_BASE_URL = API_PORT ? `${API_DOMAIN}:${API_PORT}` : API_DOMAIN
 
-createApp(App).use(router).mount('#app')
+const app = createApp(App)
+app.use(router)
+app.use(Toast, { position: POSITION.TOP_RIGHT })
+app.mount('#app')

open-isle-cli/src/views/LoginPageView.vue

@@ -68,13 +68,13 @@ export default {
         const data = await res.json()
         if (res.ok && data.token) {
           localStorage.setItem('token', data.token)
-          alert('登录成功')
+          this.$toast.success('登录成功')
           this.$router.push('/')
         } else {
-          alert(data.error || '登录失败')
+          this.$toast.error(data.error || '登录失败')
         }
       } catch (e) {
-        alert('登录失败')
+        this.$toast.error('登录失败')
       }
     }
   }

open-isle-cli/src/views/SignupPageView.vue

@@ -111,12 +111,12 @@ export default {
         const data = await res.json()
         if (res.ok) {
           this.emailStep = 1
-          alert('验证码已发送，请查看邮箱')
+          this.$toast.success('验证码已发送，请查看邮箱')
         } else {
-          alert(data.error || '发送失败')
+          this.$toast.error(data.error || '发送失败')
         }
       } catch (e) {
-        alert('发送失败')
+        this.$toast.error('发送失败')
       }
     },
     async verifyCode() {
@@ -128,13 +128,13 @@ export default {
         })
         const data = await res.json()
         if (res.ok) {
-          alert('注册成功，请登录')
+          this.$toast.success('注册成功，请登录')
           this.$router.push('/login')
         } else {
-          alert(data.error || '注册失败')
+          this.$toast.error(data.error || '注册失败')
         }
       } catch (e) {
-        alert('注册失败')
+        this.$toast.error('注册失败')
       }
     }
   }