feat: 系统设置优化

web/src/utils/app-state.ts

@@ -0,0 +1,9 @@
+import { reactive } from "vue";
+
+interface AppState {
+  loading: boolean;
+}
+
+export const appState = reactive<AppState>({
+  loading: false,
+});

web/src/utils/http.ts

@@ -1,5 +1,6 @@
 import { useAuthService } from "@/services/auth";
 import axios from "axios";
+import { appState } from "./app-state";
 
 const http = axios.create({
   baseURL: "/api",
@@ -9,6 +10,7 @@ const http = axios.create({
 
 // 请求拦截器
 http.interceptors.request.use(config => {
+  appState.loading = true;
   const authKey = localStorage.getItem("authKey");
   if (authKey) {
     config.headers.Authorization = `Bearer ${authKey}`;
@@ -18,12 +20,30 @@ http.interceptors.request.use(config => {
 
 // 响应拦截器
 http.interceptors.response.use(
-  response => response.data,
+  response => {
+    appState.loading = false;
+    if (response.config.method !== "get") {
+      window.$message.success("操作成功");
+    }
+    return response.data;
+  },
   error => {
-    if (error.response && error.response.status === 401) {
-      const { logout } = useAuthService();
-      logout();
-      window.location.href = "/login";
+    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";
+      }
+      window.$message.error(error.response.data?.message || `请求失败: ${error.response.status}`);
+    } 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("请求设置错误");
     }
     console.error("API Error:", error);
     return Promise.reject(error);