Merge pull request #5 from tbphp/fix-auth-web-auth-error

Fix Auth web auth error

Author: tbphp

web/src/App.vue

@@ -1,18 +1,11 @@
 <script setup lang="ts">
 import GlobalProviders from "@/components/GlobalProviders.vue";
-import Layout from "@/components/Layout.vue";
-import { useAuthKey } from "@/services/auth";
-import { computed } from "vue";
-
-const authKey = useAuthKey();
-const isLoggedIn = computed(() => !!authKey.value);
 </script>
 
 <template>
   <global-providers>
     <div id="app-root">
-      <layout v-if="isLoggedIn" key="layout" />
-      <router-view v-else key="auth" />
+      <router-view />
     </div>
   </global-providers>
 </template>

web/src/components/GlobalProviders.vue

@@ -71,7 +71,7 @@ const Message = defineComponent({
 <template>
   <n-config-provider :theme-overrides="themeOverrides">
     <n-loading-bar-provider>
-      <n-message-provider>
+      <n-message-provider placement="top-right">
         <n-dialog-provider>
           <slot />
           <loading-bar />

web/src/components/GlobalTaskProgressBar.vue

@@ -136,10 +136,10 @@ function handleClose() {
 <style scoped>
 .global-task-progress {
   position: fixed;
-  top: 20px;
-  right: 20px;
+  bottom: 62px;
+  right: 10px;
   z-index: 9999;
-  width: 360px;
+  width: 350px;
   background: white;
   border-radius: var(--border-radius-md);
   box-shadow: var(--shadow-lg);

web/src/components/keys/KeyTable.vue

@@ -176,7 +176,11 @@ async function testKey(_key: KeyRow) {
     if (curValid.is_valid) {
       window.$message.success("密钥测试成功");
     } else {
-      window.$message.error(curValid.error || "密钥测试失败: 无效的API密钥");
+      window.$message.error(curValid.error || "密钥测试失败: 无效的API密钥", {
+        keepAliveOnHover: true,
+        duration: 5000,
+        closable: true,
+      });
     }
   } catch (_error) {
     console.error("测试失败");

web/src/components/logs/LogTable.vue

@@ -72,7 +72,11 @@ const loadLogs = async () => {
     } else {
       logs.value = [];
       total.value = 0;
-      window.$message.error(res.message || "加载日志失败");
+      window.$message.error(res.message || "加载日志失败", {
+        keepAliveOnHover: true,
+        duration: 5000,
+        closable: true,
+      });
     }
   } catch (_error) {
     window.$message.error("加载日志请求失败");

web/src/router/index.ts

@@ -1,26 +1,33 @@
 import { useAuthService } from "@/services/auth";
 import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
+import Layout from "@/components/Layout.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/",
-    name: "dashboard",
-    component: () => import("@/views/Dashboard.vue"),
-  },
-  {
-    path: "/keys",
-    name: "keys",
-    component: () => import("@/views/Keys.vue"),
-  },
-  {
-    path: "/logs",
-    name: "logs",
-    component: () => import("@/views/Logs.vue"),
-  },
-  {
-    path: "/settings",
-    name: "settings",
-    component: () => import("@/views/Settings.vue"),
+    component: Layout,
+    children: [
+      {
+        path: "",
+        name: "dashboard",
+        component: () => import("@/views/Dashboard.vue"),
+      },
+      {
+        path: "keys",
+        name: "keys",
+        component: () => import("@/views/Keys.vue"),
+      },
+      {
+        path: "logs",
+        name: "logs",
+        component: () => import("@/views/Logs.vue"),
+      },
+      {
+        path: "settings",
+        name: "settings",
+        component: () => import("@/views/Settings.vue"),
+      },
+    ],
   },
   {
     path: "/login",

web/src/utils/http.ts

@@ -35,26 +35,28 @@ http.interceptors.response.use(
   response => {
     appState.loading = false;
     if (response.config.method !== "get" && !response.config.hideMessage) {
-      window.$message.success("操作成功");
+      window.$message.success(response.data.message ?? "操作成功");
     }
     return response.data;
   },
   error => {
     appState.loading = false;
     if (error.response) {
-      // The request was made and the server responded with a status code
-      // that falls out of the range of 2xx
       if (error.response.status === 401) {
-        const { logout } = useAuthService();
-        logout();
-        window.location.href = "/login";
+        if (window.location.pathname !== "/login") {
+          const { logout } = useAuthService();
+          logout();
+          window.location.href = "/login";
+        }
       }
-      window.$message.error(error.response.data?.message || `请求失败: ${error.response.status}`);
+      window.$message.error(error.response.data?.message || `请求失败: ${error.response.status}`, {
+        keepAliveOnHover: true,
+        duration: 5000,
+        closable: true,
+      });
     } else if (error.request) {
-      // The request was made but no response was received
       window.$message.error("网络错误，请检查您的连接");
     } else {
-      // Something happened in setting up the request that triggered an Error
       window.$message.error("请求设置错误");
     }
     return Promise.reject(error);

web/src/views/Login.vue

@@ -22,8 +22,6 @@ const handleLogin = async () => {
   loading.value = false;
   if (success) {
     router.push("/");
-  } else {
-    message.error("登录失败，请检查您的授权密钥");
   }
 };
 </script>