登录失效-logout对话框确定

src/App.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { NConfigProvider, NMessageProvider, useMessage } from "naive-ui";
+import {
+  NConfigProvider,
+  NMessageProvider,
+  useDialog,
+  useMessage,
+} from "naive-ui";
 import { zhCN, dateZhCN } from "naive-ui";
 import { defineComponent, watchEffect } from "vue";
 import { useStore, setStore, store } from "./store/store";
@@ -13,6 +18,8 @@ const DummyComp = defineComponent({
   setup() {
     /** @ts-expect-error 特殊处理，其他地方是可以直接用$message的 */
     window.$message = useMessage();
+    /** @ts-expect-error 特殊处理，其他地方是可以直接用$dialog的 */
+    window.$dialog = useDialog();
   },
   render() {
     return null;
@@ -27,14 +34,16 @@ watchEffect(() => {
 
 <template>
   <n-message-provider :duration="10000">
-    <n-config-provider
-      :locale="zhCN"
-      :dateLocale="dateZhCN"
-      :themeOverrides="themeOverrides"
-    >
-      <router-view />
-      <DummyComp />
-    </n-config-provider>
+    <n-dialog-provider>
+      <n-config-provider
+        :locale="zhCN"
+        :dateLocale="dateZhCN"
+        :themeOverrides="themeOverrides"
+      >
+        <router-view />
+        <DummyComp />
+      </n-config-provider>
+    </n-dialog-provider>
   </n-message-provider>
   <div
     v-if="spinning"

src/plugins/axiosNotice.ts

@@ -3,13 +3,22 @@ import router from "@/router";
 
 export const notifyInvalidTokenThrottled = throttle(
   () => {
-    $message.error("登录失效，请重新登录！");
+    // $message.error("登录失效，请重新登录！");
     logger({
       pgu: "AUTO",
       cnl: ["console", "server"],
       dtl: "登录失效，请重新登录",
     });
-    void router.push({ name: "UserLogin" });
+    $dialog.error({
+      title: "登录失效",
+      content: "请重新登录。",
+      positiveText: "确定",
+      closable: false,
+      maskClosable: false,
+      onPositiveClick() {
+        void router.push({ name: "UserLogin" });
+      },
+    });
   },
   3000,
   { trailing: false }

src/types/global.d.ts

@@ -1,6 +1,7 @@
 // import filters from "@/filters";
 // import { default as message } from "ant-design-vue/lib/message";
 
+import { DialogApiInjection } from "naive-ui/lib/dialog/src/DialogProvider";
 import { MessageApiInjection } from "naive-ui/lib/message/src/MessageProvider";
 
 export {};
@@ -13,6 +14,7 @@ export {};
 
 declare global {
   const $message: MessageApiInjection;
+  const $dialog: DialogApiInjection;
   const _hmt: string[][];
 
   interface Window {