feat: add zustand for state management and refactor History component

package.json

@@ -43,7 +43,8 @@
     "react-redux": "^9.2.0",
     "react-router-dom": "^6.26.0",
     "redux": "^5.0.1",
-    "redux-thunk": "^3.1.0"
+    "redux-thunk": "^3.1.0",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",

pnpm-lock.yaml

@@ -35,6 +35,9 @@ importers:
       redux-thunk:
         specifier: ^3.1.0
         version: 3.1.0(redux@5.0.1)
+      zustand:
+        specifier: ^5.0.8
+        version: 5.0.8(@types/react@18.3.24)(immer@10.1.3)(react@18.3.1)(use-sync-external-store@1.5.0(react@18.3.1))
     devDependencies:
       '@commitlint/cli':
         specifier: ^19.8.1
@@ -3579,6 +3582,24 @@ packages:
     resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
     engines: {node: '>=12.20'}
 
+  zustand@5.0.8:
+    resolution: {integrity: sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@adobe/css-tools@4.4.4': {}
@@ -7510,3 +7531,10 @@ snapshots:
   yocto-queue@0.1.0: {}
 
   yocto-queue@1.2.1: {}
+
+  zustand@5.0.8(@types/react@18.3.24)(immer@10.1.3)(react@18.3.1)(use-sync-external-store@1.5.0(react@18.3.1)):
+    optionalDependencies:
+      '@types/react': 18.3.24
+      immer: 10.1.3
+      react: 18.3.1
+      use-sync-external-store: 1.5.0(react@18.3.1)

src/hooks/useSdk.ts

@@ -1,10 +1,12 @@
-import { SdkServer } from "../sdk/sdk-server";
+import { SdkServer } from '../sdk/sdk-server';
 
 export function useSdk() {
-    // H5版本暂时返回空对象，广告相关功能不需要
+  // H5版本暂时返回空对象，广告相关功能不需要
-    return {};
+  return {};
 }
 
-export function useServerSdk(){
+export function useServerSdk() {
-    return new SdkServer();
+  return new SdkServer();
 }
+
+export const serverSdk = new SdkServer();

src/pages/history/index.css

@@ -156,6 +156,8 @@
   align-items: center;
   position: relative;
   overflow: hidden;
+  text-decoration: none;
+  color: #1d1f22;
 }
 
 .item-thumbnail {

src/pages/history/index.tsx

@@ -1,23 +1,19 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { serverSdk } from '../../hooks/useSdk';
-import { useServerSdk } from '../../hooks/index';
 import { useI18n } from '../../hooks/useI18n';
-import { i18nManager } from '../../i18n/manager';
 import { authService } from '../../services/auth';
-// import LanguageSwitcher from '../../components/LanguageSwitcher'; // 已隐藏 - 只支持英语
 import './index.css';
+
 export default function History() {
   const { t } = useI18n();
-  const navigate = useNavigate();
   const [records, setRecords] = useState<any[]>([]);
   const [refreshing, setRefreshing] = useState(false);
   const [loading, setLoading] = useState(true);
-  const [isLoggedIn, setIsLoggedIn] = useState<boolean | null>(null);
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
-  const serverSdk = useServerSdk();
 
   const [loginRedirecting, setLoginRedirecting] = useState(false);
 
-  const checkLoginStatus = async () => {
+  const checkLoginStatus = useCallback(async () => {
     try {
       const loginStatus = await authService.checkLogin();
       setIsLoggedIn(loginStatus);
@@ -27,9 +23,9 @@ export default function History() {
       setIsLoggedIn(false);
       return false;
     }
-  };
+  }, []);
 
-  const loadRecords = async () => {
+  const loadRecords = useCallback(async () => {
     try {
       const logs = await serverSdk.getMineLogs();
       setRecords(logs || []);
@@ -38,7 +34,7 @@ export default function History() {
     } finally {
       setLoading(false);
     }
-  };
+  }, []);
 
   useEffect(() => {
     const initPage = async () => {
@@ -51,25 +47,10 @@ export default function History() {
     };
 
     initPage();
-    // Set page title
-    i18nManager.updateNavigationBarTitle('history');
   }, []);
 
-  // Regularly update progress of generating tasks
-  useEffect(() => {
-    const hasGeneratingTasks = records.some(record => record.status === 'processing');
-    if (!hasGeneratingTasks) return;
-
-    const interval = setInterval(() => {
-      // Trigger re-render to update progress
-      setRecords(prevRecords => [...prevRecords]);
-    }, 1000);
-
-    return () => clearInterval(interval);
-  }, [records]);
-
   // Pull to refresh
-  const handleRefresh = async () => {
+  const handleRefresh = useCallback(async () => {
     setRefreshing(true);
     try {
       await loadRecords();
@@ -78,41 +59,16 @@ export default function History() {
     } finally {
       setRefreshing(false);
     }
-  };
+  }, [loadRecords]);
 
-  // Click history record item
+  const handleLogin = useCallback(async () => {
-  const handleItemClick = (record: any) => {
-    console.log('record', record);
-    if (record.status === 'failed') {
-      console.error('Refresh failed:', record.errorMessage);
-      // Show error message
-    } else {
-      console.log('record.paymentId', record);
-      // Navigate to generation page to view progress
-      navigate(`/result?taskId=${record.paymentId}`);
-    }
-  };
-
-  const formatTime = (timeStr: string) => {
-    const date = new Date(timeStr);
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const hours = String(date.getHours()).padStart(2, '0');
-    const minutes = String(date.getMinutes()).padStart(2, '0');
-    const seconds = String(date.getSeconds()).padStart(2, '0');
-
-    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-  };
-
-  const handleLogin = async () => {
     try {
       setLoginRedirecting(true);
       await authService.login('/history');
     } catch (error) {
       console.error('Login failed:', error);
     }
-  };
+  }, []);
 
   if (loginRedirecting) {
     return (
@@ -122,6 +78,14 @@ export default function History() {
     );
   }
 
+  if (loading) {
+    return (
+      <div className="loading-state">
+        <span className="loading-text">{t('common.loading')}</span>
+      </div>
+    );
+  }
+
   return (
     <div className="history">
       {/* Settings area */}
@@ -130,11 +94,7 @@ export default function History() {
           {refreshing && <div className="refresh-indicator">Refreshing...</div>}
         </div>
         <div className="history-grid">
-          {loading ? (
+          {isLoggedIn === false ? (
-            <div className="loading-state">
-              <span className="loading-text">{t('common.loading')}</span>
-            </div>
-          ) : isLoggedIn === false ? (
             <div className="login-required-state">
               <img className="login-icon-image" src="/assets/icons/user.png" alt="login" />
               <div className="login-content">
@@ -155,7 +115,7 @@ export default function History() {
               // const progress = calculateProgress(record); // Temporarily unused
               const isGenerating = record.status === 'processing';
               return (
-                <div key={record.id} className="history-item" onClick={() => handleItemClick(record)}>
+                <a key={record.id} className="history-item" href={`/result?taskId=${record.paymentId}`}>
                   <div className="item-thumbnail">
                     {record.status === 'completed' && record.outputResult ? (
                       <img className="thumbnail-image" src={record.inputImages?.[0] || ''} alt="thumbnail" />
@@ -183,7 +143,7 @@ export default function History() {
                       <span className="item-time">{formatTime(record.createdAt)}</span>
                     </div>
                   </div>
-                </div>
+                </a>
               );
             })
           )}
@@ -192,3 +152,15 @@ export default function History() {
     </div>
   );
 }
+
+const formatTime = (timeStr: string) => {
+  const date = new Date(timeStr);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+};

src/sdk/sdk-server.ts

@@ -4,7 +4,7 @@ import { IToken, IUser } from "./types";
 
 // ==================== 常量定义 ====================
 
-const TOKEN_STORAGE_KEY = 'access_token';      // OAuth访问令牌存储键
+export const TOKEN_STORAGE_KEY = 'access_token';      // OAuth访问令牌存储键
 const TOKEN_UID_KEY = 'user_uid';              // 用户ID存储键
 
 /**