feat: add operation exception toasts for loading plugin resources and…

… login (#645)

#### What type of PR is this?

/kind feature
/milestone 2.0

#### What this PR does / why we need it:

为登录操作和加载插件资源添加异常提示。

#### Which issue(s) this PR fixes:

Fixes halo-dev/halo#2534

#### Screenshots:

<img width="650" alt="image" src="https://user-images.githubusercontent.com/21301288/196105634-ece58153-d9e0-450d-8068-8cda1bed8bcc.png">

<img width="634" alt="image" src="https://user-images.githubusercontent.com/21301288/196105704-e3a59808-8a33-456d-b668-13e891512353.png">

#### Special notes for your reviewer:

目前还没有处理全局的接口请求异常，需要后端修改异常返回结构。

/cc @halo-dev/sig-halo-console 

#### Does this PR introduce a user-facing change?

<!--
如果当前 Pull Request 的修改不会造成用户侧的任何变更，在 `release-note` 代码块儿中填写 `NONE`。
否则请填写用户侧能够理解的 Release Note。如果当前 Pull Request 包含破坏性更新（Break Change），
Release Note 需要以 `action required` 开头。
If no, just write "NONE" in the release-note block below.
If yes, a release note is required:
Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required".
-->

```release-note
为登录操作和加载插件资源添加异常提示。
```

packages/components/src/components/dialog/Dialog.story.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { VButton } from "@/components/button";
+import { Toast } from "../toast";
 import { Dialog } from "@/components/dialog";
 
 const initState = () => {
@@ -11,10 +12,10 @@ const initState = () => {
     cancelText: "取消",
     type: "info",
     onConfirm: () => {
-      alert("已删除");
+      Toast.info("已删除");
     },
     onCancel: () => {
-      alert("已取消");
+      Toast.info("已取消");
     },
   };
 };

src/main.ts

@@ -8,6 +8,7 @@ import type {
   MenuItemType,
   Plugin,
 } from "@halo-dev/console-shared";
+import { Toast } from "@halo-dev/components";
 import { apiClient } from "@/utils/api-client";
 import { menus, minimenus, registerMenu } from "./router/menus.config";
 // setup
@@ -135,7 +136,7 @@ async function loadPluginModules() {
           registerModule(pluginModule);
         }
       } catch (e) {
-        const message = `${plugin.metadata.name}: Failed load plugin entry module`;
+        const message = `${plugin.metadata.name}: 加载插件入口文件失败`;
         console.error(message, e);
         pluginErrorMessages.push(message);
       }
@@ -145,7 +146,7 @@ async function loadPluginModules() {
       try {
         await loadStyle(`${import.meta.env.VITE_API_URL}${stylesheet}`);
       } catch (e) {
-        const message = `${plugin.metadata.name}: Failed load plugin stylesheet`;
+        const message = `${plugin.metadata.name}: 加载插件样式文件失败`;
         console.error(message, e);
         pluginErrorMessages.push(message);
       }
@@ -155,7 +156,9 @@ async function loadPluginModules() {
   }
 
   if (pluginErrorMessages.length > 0) {
-    alert(pluginErrorMessages.join("\n"));
+    pluginErrorMessages.forEach((message) => {
+      Toast.error(message);
+    });
   }
 }
 

src/modules/system/users/Login.vue

@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-import { IconShieldUser, IconUserLine, VButton } from "@halo-dev/components";
+import {
+  IconShieldUser,
+  IconUserLine,
+  VButton,
+  Toast,
+} from "@halo-dev/components";
 import { v4 as uuid } from "uuid";
 import qs from "qs";
 import logo from "@/assets/logo.svg";
@@ -47,7 +52,7 @@ const handleLogin = async () => {
     router.go(0);
   } catch (e) {
     console.error("Failed to login", e);
-    alert("登录失败，用户名或密码错误");
+    Toast.error("登录失败，用户名或密码错误");
     loginForm.value.password = "";
     setFocus("passwordInput");
   } finally {