fix(api): redefine corresponding api method for client due to get quota response structure change; feat(app): check overdue status on program startup, conditionally display prompt or render subcomponent

src/API/security/quotaActions.ts

@@ -6,13 +6,14 @@ interface QuotaResponse {
     total: number;
     available: number;
     online: boolean;
+    overdue: boolean;
   };
   description: string;
   solution: string;
 }
 
 export function getQuota(): Promise<QuotaResponse> {
-  return axiosInstance.get('/auth/resource/quota').then((response) => {
+  return axiosInstance.get('/pub/quota').then((response) => {
     if (response.data.code !== '0x000000') {
       throw new Error(`API error: ${response.data.description}`);
     }

src/app.tsx

@@ -5,6 +5,7 @@ import { ConfigProvider, Button } from 'antd';
 import { Provider } from 'react-redux';
 import store from './states/store';
 import { initializeProductState } from './states/productSlice';
+import { getQuota } from './API/security/quotaActions';
 import './app.css';
 import { lightTheme, darkTheme } from './themes';
 import ProductSelector from './components/ProductSelector';
@@ -38,11 +39,23 @@ function App({ children }: PropsWithChildren<React.ReactNode>) {
   });
 
   const [currentTheme, setCurrentTheme] = useState(lightTheme); // 默认使用 light 主题
+  const [quotaStatus, setQuotaStatus] = useState<boolean | null>(null);
   const changeTheme = (themeConfig: typeof lightTheme) => {
     setCurrentTheme(themeConfig);
   };
 
   useEffect(() => {
+    const checkQuota = async () => {
+      try {
+        const response = await getQuota();
+        console.error(`Quota response: ${JSON.stringify(response)}`);
+        setQuotaStatus(response.data.overdue);
+      } catch (error) {
+        console.error('Error fetching quota:', error);
+        setQuotaStatus(false); // Assume overdue if there's an error
+      }
+    };
+    checkQuota();
     store.dispatch(initializeProductState());
   }, []);
 
@@ -66,9 +79,17 @@ function App({ children }: PropsWithChildren<React.ReactNode>) {
               boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
             }}
           >
-            <AcquisitionTracer />
-            <QuotaAlertModal />
-            {children}
+            {quotaStatus === null ? (
+              <div>Loading...</div>
+            ) : quotaStatus === false ? (
+              <div>Please sync with the cloud to continue.</div>
+            ) : (
+              <>
+                <AcquisitionTracer />
+                <QuotaAlertModal />
+                {children}
+              </>
+            )}
             {process.env.NODE_ENV === 'development' && <ProductSelector />}
             <div
               style={{