From db376c75040b4488f947d9b90787f91cfd652ec9 Mon Sep 17 00:00:00 2001
From: LTbinglingfeng <tan13318527080@163.com>
Date: Sat, 3 Jan 2026 01:40:54 +0800
Subject: [PATCH] fix(layout): wire header refresh to page loaders and quota
 config refresh

---
 src/components/layout/MainLayout.tsx | 21 +++++++++++++-----
 src/hooks/index.ts                   |  1 +
 src/hooks/useHeaderRefresh.ts        | 24 +++++++++++++++++++++
 src/pages/AuthFilesPage.tsx          | 32 +++++++++++++++++++---------
 src/pages/LogsPage.tsx               |  3 +++
 src/pages/QuotaPage.tsx              | 27 ++++++++++++++++-------
 src/pages/UsagePage.tsx              |  3 +++
 7 files changed, 88 insertions(+), 23 deletions(-)
 create mode 100644 src/hooks/useHeaderRefresh.ts

diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index 1a3b8bf..4226607 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -36,6 +36,7 @@ import {
   useThemeStore,
 } from '@/stores';
 import { configApi, versionApi } from '@/services/api';
+import { triggerHeaderRefresh } from '@/hooks/useHeaderRefresh';
 
 const sidebarIcons: Record<string, ReactNode> = {
   dashboard: <IconLayoutDashboard size={18} />,
@@ -384,12 +385,22 @@ export function MainLayout() {
 
   const handleRefreshAll = async () => {
     clearCache();
-    try {
-      await fetchConfig(undefined, true);
-      showNotification(t('notification.data_refreshed'), 'success');
-    } catch (error: any) {
-      showNotification(`${t('notification.refresh_failed')}: ${error?.message || ''}`, 'error');
+    const results = await Promise.allSettled([
+      fetchConfig(undefined, true),
+      triggerHeaderRefresh()
+    ]);
+    const rejected = results.find((result) => result.status === 'rejected');
+    if (rejected && rejected.status === 'rejected') {
+      const reason = rejected.reason;
+      const message =
+        typeof reason === 'string' ? reason : reason instanceof Error ? reason.message : '';
+      showNotification(
+        `${t('notification.refresh_failed')}${message ? `: ${message}` : ''}`,
+        'error'
+      );
+      return;
     }
+    showNotification(t('notification.data_refreshed'), 'success');
   };
 
   const handleVersionCheck = async () => {
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 6dc876f..ee756c7 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -8,3 +8,4 @@ export { useLocalStorage } from './useLocalStorage';
 export { useInterval } from './useInterval';
 export { useMediaQuery } from './useMediaQuery';
 export { usePagination } from './usePagination';
+export { useHeaderRefresh } from './useHeaderRefresh';
diff --git a/src/hooks/useHeaderRefresh.ts b/src/hooks/useHeaderRefresh.ts
new file mode 100644
index 0000000..88f60e4
--- /dev/null
+++ b/src/hooks/useHeaderRefresh.ts
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+export type HeaderRefreshHandler = () => void | Promise<void>;
+
+let activeHeaderRefreshHandler: HeaderRefreshHandler | null = null;
+
+export const triggerHeaderRefresh = async () => {
+  if (!activeHeaderRefreshHandler) return;
+  await activeHeaderRefreshHandler();
+};
+
+export const useHeaderRefresh = (handler?: HeaderRefreshHandler | null) => {
+  useEffect(() => {
+    if (!handler) return;
+
+    activeHeaderRefreshHandler = handler;
+
+    return () => {
+      if (activeHeaderRefreshHandler === handler) {
+        activeHeaderRefreshHandler = null;
+      }
+    };
+  }, [handler]);
+};
diff --git a/src/pages/AuthFilesPage.tsx b/src/pages/AuthFilesPage.tsx
index fdabaa3..35aa4e9 100644
--- a/src/pages/AuthFilesPage.tsx
+++ b/src/pages/AuthFilesPage.tsx
@@ -1,8 +1,9 @@
-import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useInterval } from '@/hooks/useInterval';
-import { Card } from '@/components/ui/Card';
-import { Button } from '@/components/ui/Button';
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useInterval } from '@/hooks/useInterval';
+import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
+import { Card } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { Input } from '@/components/ui/Input';
 import { Modal } from '@/components/ui/Modal';
@@ -270,6 +271,12 @@ export function AuthFilesPage() {
     }
   }, [showNotification, t]);
 
+  const handleHeaderRefresh = useCallback(async () => {
+    await Promise.all([loadFiles(), loadKeyStats(), loadExcluded()]);
+  }, [loadFiles, loadKeyStats, loadExcluded]);
+
+  useHeaderRefresh(handleHeaderRefresh);
+
   useEffect(() => {
     loadFiles();
     loadKeyStats();
@@ -824,11 +831,16 @@ export function AuthFilesPage() {
 
       <Card
         title={t('auth_files.title_section')}
-        extra={
-          <div className={styles.headerActions}>
-            <Button variant="secondary" size="sm" onClick={() => { loadFiles(); loadKeyStats(); }} disabled={loading}>
-              {t('common.refresh')}
-            </Button>
+        extra={
+          <div className={styles.headerActions}>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={handleHeaderRefresh}
+              disabled={loading}
+            >
+              {t('common.refresh')}
+            </Button>
             <Button
               variant="secondary"
               size="sm"
diff --git a/src/pages/LogsPage.tsx b/src/pages/LogsPage.tsx
index c86b70f..7e58d65 100644
--- a/src/pages/LogsPage.tsx
+++ b/src/pages/LogsPage.tsx
@@ -16,6 +16,7 @@ import {
   IconTrash2,
   IconX,
 } from '@/components/ui/icons';
+import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
 import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
 import { logsApi } from '@/services/api/logs';
 import { MANAGEMENT_API_PREFIX } from '@/utils/constants';
@@ -474,6 +475,8 @@ export function LogsPage() {
     }
   };
 
+  useHeaderRefresh(() => loadLogs(false));
+
   const clearLogs = async () => {
     if (!window.confirm(t('logs.clear_confirm'))) return;
     try {
diff --git a/src/pages/QuotaPage.tsx b/src/pages/QuotaPage.tsx
index 66e2cdf..a72d812 100644
--- a/src/pages/QuotaPage.tsx
+++ b/src/pages/QuotaPage.tsx
@@ -4,9 +4,9 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@/components/ui/Button';
+import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
 import { useAuthStore } from '@/stores';
-import { authFilesApi } from '@/services/api';
+import { authFilesApi, configFileApi } from '@/services/api';
 import {
   QuotaSection,
   ANTIGRAVITY_CONFIG,
@@ -26,6 +26,15 @@ export function QuotaPage() {
 
   const disableControls = connectionStatus !== 'connected';
 
+  const loadConfig = useCallback(async () => {
+    try {
+      await configFileApi.fetchConfigYaml();
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : t('notification.refresh_failed');
+      setError((prev) => prev || errorMessage);
+    }
+  }, [t]);
+
   const loadFiles = useCallback(async () => {
     setLoading(true);
     setError('');
@@ -40,20 +49,22 @@ export function QuotaPage() {
     }
   }, [t]);
 
+  const handleHeaderRefresh = useCallback(async () => {
+    await Promise.all([loadConfig(), loadFiles()]);
+  }, [loadConfig, loadFiles]);
+
+  useHeaderRefresh(handleHeaderRefresh);
+
   useEffect(() => {
     loadFiles();
-  }, [loadFiles]);
+    loadConfig();
+  }, [loadFiles, loadConfig]);
 
   return (
     <div className={styles.container}>
       <div className={styles.pageHeader}>
         <h1 className={styles.pageTitle}>{t('quota_management.title')}</h1>
         <p className={styles.description}>{t('quota_management.description')}</p>
-        <div className={styles.headerActions}>
-          <Button variant="secondary" size="sm" onClick={loadFiles} disabled={loading}>
-            {t('quota_management.refresh_files')}
-          </Button>
-        </div>
       </div>
 
       {error && <div className={styles.errorBox}>{error}</div>}
diff --git a/src/pages/UsagePage.tsx b/src/pages/UsagePage.tsx
index ba25420..14e61f0 100644
--- a/src/pages/UsagePage.tsx
+++ b/src/pages/UsagePage.tsx
@@ -14,6 +14,7 @@ import {
 import { Button } from '@/components/ui/Button';
 import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
 import { useThemeStore } from '@/stores';
 import {
   StatCards,
@@ -63,6 +64,8 @@ export function UsagePage() {
     importing
   } = useUsageData();
 
+  useHeaderRefresh(loadUsage);
+
   // Chart lines state
   const [chartLines, setChartLines] = useState<string[]>(['all']);
   const MAX_CHART_LINES = 9;