feat: 系统设置优化

web/src/App.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import GlobalProviders from "@/components/GlobalProviders.vue";
 import Layout from "@/components/Layout.vue";
 import { useAuthKey } from "@/services/auth";
-import { NDialogProvider, NMessageProvider } from "naive-ui";
 import { computed } from "vue";
 
 const authKey = useAuthKey();
@@ -9,10 +9,8 @@ const isLoggedIn = computed(() => !!authKey.value);
 </script>
 
 <template>
-  <n-message-provider>
-    <n-dialog-provider>
-      <layout v-if="isLoggedIn" />
-      <router-view v-else />
-    </n-dialog-provider>
-  </n-message-provider>
+  <global-providers>
+    <layout v-if="isLoggedIn" />
+    <router-view v-else />
+  </global-providers>
 </template>

web/src/api/settings.ts

@@ -0,0 +1,27 @@
+import http from "@/utils/http";
+
+export interface Setting {
+  key: string;
+  name: string;
+  value: string | number;
+  type: "int" | "string";
+  min_value?: number;
+  description: string;
+}
+
+export interface SettingCategory {
+  category_name: string;
+  settings: Setting[];
+}
+
+export type SettingsUpdatePayload = Record<string, string | number>;
+
+export const settingsApi = {
+  getSettings: async (): Promise<SettingCategory[]> => {
+    const response = await http.get("/settings");
+    return response.data || [];
+  },
+  updateSettings: (data: SettingsUpdatePayload): Promise<void> => {
+    return http.put("/settings", data);
+  },
+};

web/src/components/GlobalProviders.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { appState } from "@/utils/app-state";
+import {
+  NDialogProvider,
+  NLoadingBarProvider,
+  NMessageProvider,
+  useLoadingBar,
+  useMessage,
+} from "naive-ui";
+import { defineComponent, watch } from "vue";
+
+function useGlobalMessage() {
+  window.$message = useMessage();
+}
+
+const LoadingBar = defineComponent({
+  setup() {
+    const loadingBar = useLoadingBar();
+    watch(
+      () => appState.loading,
+      loading => {
+        if (loading) {
+          loadingBar.start();
+        } else {
+          loadingBar.finish();
+        }
+      }
+    );
+    return () => null;
+  },
+});
+
+const Message = defineComponent({
+  setup() {
+    useGlobalMessage();
+    return () => null;
+  },
+});
+</script>
+
+<template>
+  <n-loading-bar-provider>
+    <n-message-provider>
+      <n-dialog-provider>
+        <slot />
+        <loading-bar />
+        <message />
+      </n-dialog-provider>
+    </n-message-provider>
+  </n-loading-bar-provider>
+</template>

web/src/types/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+import type { MessageApiInjection } from "naive-ui/es/message/src/MessageProvider";
+
+declare global {
+  interface Window {
+    $message: MessageApiInjection;
+  }
+}

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);

web/src/views/Settings.vue

@@ -1,37 +1,19 @@
 <script setup lang="ts">
-import http from "@/utils/http";
-import type { FormValidationError } from "naive-ui";
+import { settingsApi, type SettingCategory } from "@/api/settings";
+import { NTooltip } from "naive-ui";
 import { ref } from "vue";
 
-interface Setting {
-  key: string;
-  name: string;
-  value: string | number;
-  type: "int" | "string";
-  min_value?: number;
-}
-
-interface SettingCategory {
-  category_name: string;
-  settings: Setting[];
-}
-
 const settingList = ref<SettingCategory[]>([]);
-const loading = ref(false);
 const formRef = ref();
 const form = ref<Record<string, string | number>>({});
+const isSaving = ref(false);
 
 fetchSettings();
 
 async function fetchSettings() {
-  loading.value = true;
-  try {
-    const response = await http.get("/settings");
-    settingList.value = response.data || [];
-    initForm();
-  } finally {
-    loading.value = false;
-  }
+  const data = await settingsApi.getSettings();
+  settingList.value = data || [];
+  initForm();
 }
 
 function initForm() {
@@ -43,36 +25,25 @@ function initForm() {
   }, {});
 }
 
-function handleSubmit() {
-  if (loading.value) {
+async function handleSubmit() {
+  if (isSaving.value) {
     return;
   }
 
-  formRef.value.validate(async (errors: Array<FormValidationError> | undefined) => {
-    if (errors) {
-      return;
-    }
-
-    try {
-      loading.value = true;
-      await http.put("/settings", form.value);
-      fetchSettings();
-    } finally {
-      loading.value = false;
-    }
-  });
+  try {
+    await formRef.value.validate();
+    isSaving.value = true;
+    await settingsApi.updateSettings(form.value);
+    await fetchSettings();
+  } finally {
+    isSaving.value = false;
+  }
 }
 </script>
 
 <template>
-  <n-spin :show="loading">
-    <n-form
-      ref="formRef"
-      :model="form"
-      label-placement="left"
-      label-width="110"
-      :disabled="loading"
-    >
+  <div>
+    <n-form ref="formRef" :model="form" label-placement="left" label-width="110">
       <n-card
         v-for="(category, cIndex) in settingList"
         :key="cIndex"
@@ -83,7 +54,6 @@ function handleSubmit() {
           <n-form-item
             v-for="item in category.settings"
             :key="item.key"
-            :label="item.name"
             :path="item.key"
             style="margin-right: 10px"
             :rule="{
@@ -91,6 +61,14 @@ function handleSubmit() {
               message: `请输入${item.name}`,
             }"
           >
+            <template #label>
+              <n-tooltip trigger="hover">
+                <template #trigger>
+                  <span>{{ item.name }}</span>
+                </template>
+                <span>{{ item.description }}</span>
+              </n-tooltip>
+            </template>
             <n-input-number
               v-if="item.type === 'int'"
               v-model:value="form[item.key]"
@@ -110,13 +88,14 @@ function handleSubmit() {
         </n-space>
       </n-card>
     </n-form>
-  </n-spin>
+  </div>
   <n-flex justify="center">
     <n-button
       v-show="settingList.length > 0"
       type="primary"
       style="width: 200px"
-      :loading="loading"
+      :loading="isSaving"
+      :disabled="isSaving"
       @click="handleSubmit"
     >
       保存设置