feat: 新增钓鱼日志组件并优化钓鱼页面交互

新增钓鱼日志组件，用于展示钓鱼记录。优化钓鱼页面的交互体验，增加动画效果和状态提示。同时，修复了请求拦截器中的错误处理逻辑，并改进了登录和注册页面的UI设计。

src/utils/request.js

@@ -7,58 +7,106 @@
  * @LastEditTime: 2025-04-12 14:17:15
  * @FilePath: \go_fish_web\src\utils\request.js
  */
-import axios from 'axios'
-import { ElMessage } from 'element-plus'
-import router from '@/router'
+import axios from "axios";
+import { ElMessage } from "element-plus";
+import router from "@/router";
 
-let isRefreshing = false
+let isRefreshing = false;
+let requestQueue = [];
 
 // 创建 axios 实例
+// 清理登录状态的函数
+export function clearLoginState() {
+  localStorage.removeItem("token");
+  localStorage.removeItem("fishingLogs");
+}
+
 const request = axios.create({
-  baseURL: 'http://49.235.165.171:31001',
+  baseURL: "http://49.235.165.171:31001",
   timeout: 5000,
-})
+});
 
 // 设置默认 Content-Type
-request.defaults.headers['Content-Type'] = 'application/json'
+request.defaults.headers["Content-Type"] = "application/json";
 
 // 请求拦截器：添加 token
 request.interceptors.request.use(
   (config) => {
-    const token = localStorage.getItem('token')
+    const token = localStorage.getItem("token");
     if (token) {
-      config.headers.Authorization = `Bearer ${token}`
+      config.headers.Authorization = `Bearer ${token}`;
+      // 登录成功后重试队列中的请求
+      if (requestQueue.length > 0) {
+        requestQueue.forEach(({ resolve, config }) => {
+          resolve(request(config));
+        });
+        requestQueue = [];
+      }
     }
-    return config
+    return config;
   },
   (error) => Promise.reject(error)
-)
+);
 
 // 响应拦截器
 request.interceptors.response.use(
   (response) => response.data,
   (error) => {
-    const status = error.response?.status
+    console.dir(error);
+    const status = error.response?.status;
+    const config = error.config;
 
-    if (status === 401) {
+    if (status === 400) {
+      // 处理400错误，解析并显示具体的验证错误信息
+      const errorData = error.response?.data;
+      if (errorData?.errors) {
+        // 收集所有错误信息
+        const errorMessages = [];
+        Object.entries(errorData.errors).forEach(([field, messages]) => {
+          if (Array.isArray(messages)) {
+            messages.forEach((msg) => errorMessages.push(msg));
+          }
+        });
+        // 显示合并后的错误信息
+        if (errorMessages.length > 0) {
+          ElMessage.error(errorMessages.join("\n"));
+        } else {
+          ElMessage.error("请求参数验证失败");
+        }
+      } else {
+        // 如果没有详细的错误信息，显示通用错误消息
+        ElMessage.error(errorData?.title || "请求参数错误");
+      }
+      return Promise.reject(error);
+    } else if (status === 401) {
       // 避免重复处理 401
       if (!isRefreshing) {
-        isRefreshing = true
-        ElMessage.warning('登录已过期，请重新登录')
-        localStorage.removeItem('token')
-        router.push('/login')
+        isRefreshing = true;
+        ElMessage.warning("登录已过期，请重新登录");
+        clearLoginState();
+        // 清空请求队列
+        requestQueue = [];
+        router.push("/login");
 
         // 重置标志位，避免死锁
         setTimeout(() => {
-          isRefreshing = false
-        }, 3000) // 避免多次跳转，给 3 秒冷却时间
+          isRefreshing = false;
+        }, 3000); // 避免多次跳转，给 3 秒冷却时间
       }
+
+      // 将请求加入队列
+      return new Promise((resolve) => {
+        requestQueue.push({
+          resolve,
+          config,
+        });
+      });
     } else {
-      ElMessage.error(error.response?.data?.message || '请求失败，请稍后再试')
+      ElMessage.error(error.response?.data?.message || "请求失败，请稍后再试");
     }
 
-    return Promise.reject(error)
+    return Promise.reject(error);
   }
-)
+);
 
-export default request
+export default request;