refactor: 重构缓存

react-ui/src/components/IFramePage/index.tsx

@@ -2,11 +2,7 @@ import FullScreenFrame from '@/components/FullScreenFrame';
 import KFSpin from '@/components/KFSpin';
 import { getLabelStudioUrl } from '@/services/developmentEnvironment';
 import { to } from '@/utils/promise';
-import {
-  editorUrlKey,
-  getSessionStorageItem,
-  removeSessionStorageItem,
-} from '@/utils/sessionStorage';
+import SessionStorage from '@/utils/sessionStorage';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -25,7 +21,11 @@ const getRequestAPI = (type: IframePageType): (() => Promise<any>) => {
     case IframePageType.AppDevelopment:
       return () => Promise.resolve({ code: 200, data: 'http://172.20.32.181:30080/' });
     case IframePageType.DevEnv:
-      return () => Promise.resolve({ code: 200, data: getSessionStorageItem(editorUrlKey) || '' });
+      return () =>
+        Promise.resolve({
+          code: 200,
+          data: SessionStorage.getItem(SessionStorage.editorUrlKey) || '',
+        });
   }
 };
 
@@ -42,7 +42,7 @@ function IframePage({ type, className, style }: IframePageProps) {
     requestIframeUrl();
     return () => {
       if (type === IframePageType.DevEnv) {
-        removeSessionStorageItem(editorUrlKey);
+        SessionStorage.removeItem(SessionStorage.editorUrlKey);
       }
     };
   }, []);

react-ui/src/hooks/sessionStorage.ts

@@ -1,4 +1,4 @@
-import { getSessionStorageItem, removeSessionStorageItem } from '@/utils/sessionStorage';
+import SessionStorage from '@/utils/sessionStorage';
 import { useEffect, useState } from 'react';
 
 // 读取缓存数据，组件卸载时清除缓存
@@ -6,12 +6,12 @@ export function useSessionStorage<T>(key: string, isObject: boolean, initialValu
   const [storage, setStorage] = useState<T>(initialValue);
 
   useEffect(() => {
-    const res = getSessionStorageItem(key, isObject);
+    const res = SessionStorage.getItem(key, isObject);
     if (res) {
       setStorage(res);
     }
     return () => {
-      removeSessionStorageItem(key);
+      SessionStorage.removeItem(key);
     };
   }, []);
 

react-ui/src/pages/DevelopmentEnvironment/List/index.tsx

@@ -18,7 +18,7 @@ import {
 import themes from '@/styles/theme.less';
 import { openAntdModal } from '@/utils/modal';
 import { to } from '@/utils/promise';
-import { editorUrlKey, setSessionStorageItem } from '@/utils/sessionStorage';
+import SessionStorage from '@/utils/sessionStorage';
 import { modalConfirm } from '@/utils/ui';
 import { useNavigate } from '@umijs/max';
 import {
@@ -145,7 +145,7 @@ function EditorList() {
   // 跳转编辑器页面
   const gotoEditorPage = (e: React.MouseEvent, record: EditorData) => {
     e.stopPropagation();
-    setSessionStorageItem(editorUrlKey, record.url);
+    SessionStorage.setItem(SessionStorage.editorUrlKey, record.url);
     navigate(`/developmentEnvironment/editor`);
     setCacheState({
       pagination,

react-ui/src/pages/Mirror/Create/index.tsx

@@ -11,11 +11,7 @@ import SubAreaTitle from '@/components/SubAreaTitle';
 import { CommonTabKeys } from '@/enums';
 import { createMirrorReq } from '@/services/mirror';
 import { to } from '@/utils/promise';
-import {
-  getSessionStorageItem,
-  mirrorNameKey,
-  removeSessionStorageItem,
-} from '@/utils/sessionStorage';
+import SessionStorage from '@/utils/sessionStorage';
 import { getFileListFromEvent, validateUploadFiles } from '@/utils/ui';
 import { useNavigate } from '@umijs/max';
 import { App, Button, Col, Form, Input, Row, Upload, UploadFile, type UploadProps } from 'antd';
@@ -61,13 +57,13 @@ function MirrorCreate() {
   };
 
   useEffect(() => {
-    const name = getSessionStorageItem(mirrorNameKey);
+    const name = SessionStorage.getItem(SessionStorage.mirrorNameKey);
     if (name) {
       form.setFieldValue('name', name);
       setNameDisabled(true);
     }
     return () => {
-      removeSessionStorageItem(mirrorNameKey);
+      SessionStorage.removeItem(SessionStorage.mirrorNameKey);
     };
   }, []);
 

react-ui/src/pages/Mirror/Info/index.tsx

@@ -19,7 +19,7 @@ import {
 import themes from '@/styles/theme.less';
 import { formatDate } from '@/utils/date';
 import { to } from '@/utils/promise';
-import { mirrorNameKey, setSessionStorageItem } from '@/utils/sessionStorage';
+import SessionStorage from '@/utils/sessionStorage';
 import { modalConfirm } from '@/utils/ui';
 import { useNavigate, useParams } from '@umijs/max';
 import {
@@ -144,7 +144,7 @@ function MirrorInfo() {
 
   const createMirrorVersion = () => {
     navigate(`/dataset/mirror/create`);
-    setSessionStorageItem(mirrorNameKey, mirrorInfo.name || '');
+    SessionStorage.setItem(SessionStorage.mirrorNameKey, mirrorInfo.name || '');
     setCacheState({
       pagination,
     });

react-ui/src/pages/Mirror/List/index.tsx

@@ -11,7 +11,7 @@ import { useCacheState } from '@/hooks/pageCacheState';
 import { deleteMirrorReq, getMirrorListReq } from '@/services/mirror';
 import themes from '@/styles/theme.less';
 import { to } from '@/utils/promise';
-import { mirrorNameKey, setSessionStorageItem } from '@/utils/sessionStorage';
+import SessionStorage from '@/utils/sessionStorage';
 import { modalConfirm } from '@/utils/ui';
 import { useNavigate } from '@umijs/max';
 import {
@@ -147,7 +147,7 @@ function MirrorList() {
   // 创建镜像
   const createMirror = () => {
     navigate(`/dataset/mirror/create`);
-    setSessionStorageItem(mirrorNameKey, '');
+    SessionStorage.setItem(SessionStorage.mirrorNameKey, '');
     setCacheState({
       activeTab,
       pagination,

react-ui/src/pages/ModelDeployment/CreateService/index.tsx

@@ -9,11 +9,7 @@ import SubAreaTitle from '@/components/SubAreaTitle';
 import { CommonTabKeys, serviceTypeOptions } from '@/enums';
 import { createServiceReq, updateServiceReq } from '@/services/modelDeployment';
 import { to } from '@/utils/promise';
-import {
-  getSessionStorageItem,
-  removeSessionStorageItem,
-  serviceInfoKey,
-} from '@/utils/sessionStorage';
+import SessionStorage from '@/utils/sessionStorage';
 import { useNavigate } from '@umijs/max';
 import { App, Button, Col, Form, Input, Row, Select } from 'antd';
 import { pick } from 'lodash';
@@ -36,14 +32,14 @@ function CreateService() {
   const { message } = App.useApp();
 
   useEffect(() => {
-    const res = getSessionStorageItem(serviceInfoKey, true);
+    const res = SessionStorage.getItem(SessionStorage.serviceInfoKey, true);
     if (res) {
       setOperationType(res.operationType);
       setServiceInfo(res);
       form.setFieldsValue(pick(res, ['service_name', 'service_type', 'description']));
     }
     return () => {
-      removeSessionStorageItem(serviceInfoKey);
+      SessionStorage.removeItem(SessionStorage.serviceInfoKey);
     };
   }, []);
 

react-ui/src/pages/ModelDeployment/CreateVersion/index.tsx

@@ -20,11 +20,7 @@ import {
 } from '@/services/modelDeployment';
 import { changePropertyName } from '@/utils';
 import { to } from '@/utils/promise';
-import {
-  getSessionStorageItem,
-  removeSessionStorageItem,
-  serviceVersionInfoKey,
-} from '@/utils/sessionStorage';
+import SessionStorage from '@/utils/sessionStorage';
 import { modalConfirm } from '@/utils/ui';
 import { PlusOutlined } from '@ant-design/icons';
 import { useNavigate, useParams } from '@umijs/max';
@@ -71,7 +67,7 @@ function CreateServiceVersion() {
           operationType: ServiceOperationType;
           lastPage: CreateServiceVersionFrom;
         })
-      | undefined = getSessionStorageItem(serviceVersionInfoKey, true);
+      | undefined = SessionStorage.getItem(SessionStorage.serviceVersionInfoKey, true);
     if (res) {
       setOperationType(res.operationType);
       setLastPage(res.lastPage);
@@ -103,7 +99,7 @@ function CreateServiceVersion() {
       form.setFieldsValue(formData);
     }
     return () => {
-      removeSessionStorageItem(serviceVersionInfoKey);
+      SessionStorage.removeItem(SessionStorage.serviceVersionInfoKey);
     };
   }, []);
 

react-ui/src/pages/ModelDeployment/List/index.tsx

@@ -12,11 +12,7 @@ import { useCacheState } from '@/hooks/pageCacheState';
 import { deleteServiceReq, getServiceListReq } from '@/services/modelDeployment';
 import themes from '@/styles/theme.less';
 import { to } from '@/utils/promise';
-import {
-  serviceInfoKey,
-  serviceVersionInfoKey,
-  setSessionStorageItem,
-} from '@/utils/sessionStorage';
+import SessionStorage from '@/utils/sessionStorage';
 import { modalConfirm } from '@/utils/ui';
 import { useNavigate } from '@umijs/max';
 import {
@@ -122,8 +118,8 @@ function ModelDeployment() {
 
   // 创建、更新服务
   const createService = (type: ServiceOperationType, record?: ServiceData) => {
-    setSessionStorageItem(
-      serviceInfoKey,
+    SessionStorage.setItem(
+      SessionStorage.serviceInfoKey,
       {
         ...record,
         operationType: type,
@@ -142,8 +138,6 @@ function ModelDeployment() {
 
   // 查看详情
   const toDetail = (record: ServiceData) => {
-    setSessionStorageItem(serviceInfoKey, record, true);
-
     setCacheState({
       pagination,
       searchText,
@@ -170,8 +164,8 @@ function ModelDeployment() {
 
   // 去创建服务版本
   const gotoCreateServiceVersion = (serviceId: number) => {
-    setSessionStorageItem(
-      serviceVersionInfoKey,
+    SessionStorage.setItem(
+      SessionStorage.serviceVersionInfoKey,
       {
         operationType: ServiceOperationType.Create,
         lastPage: CreateServiceVersionFrom.CreateService,

react-ui/src/pages/ModelDeployment/ServiceInfo/index.tsx

@@ -20,7 +20,7 @@ import {
 import themes from '@/styles/theme.less';
 import { formatDate } from '@/utils/date';
 import { to } from '@/utils/promise';
-import { serviceVersionInfoKey, setSessionStorageItem } from '@/utils/sessionStorage';
+import SessionStorage from '@/utils/sessionStorage';
 import { modalConfirm } from '@/utils/ui';
 import { useNavigate, useParams } from '@umijs/max';
 import {
@@ -178,8 +178,8 @@ function ServiceInfo() {
 
   // 创建、更新、重启服务版本
   const createServiceVersion = (type: ServiceOperationType, record?: ServiceVersionData) => {
-    setSessionStorageItem(
-      serviceVersionInfoKey,
+    SessionStorage.setItem(
+      SessionStorage.serviceVersionInfoKey,
       {
         ...record,
         operationType: type,
@@ -199,8 +199,6 @@ function ServiceInfo() {
 
   // 查看详情
   const toDetail = (record: ServiceVersionData) => {
-    setSessionStorageItem(serviceVersionInfoKey, record, true);
-
     setCacheState({
       pagination,
       searchText,

react-ui/src/pages/User/Login/index.tsx

@@ -1,7 +1,7 @@
 import { clearSessionToken, setSessionToken } from '@/access';
 import { getCaptchaImg, login } from '@/services/system/auth';
 import { safeInvoke } from '@/utils/functional';
-import { loginUserKey, rememberPasswordKey } from '@/utils/localStorage';
+import LocalStorage from '@/utils/localStorage';
 import { to } from '@/utils/promise';
 import { history, useModel } from '@umijs/max';
 import { Button, Checkbox, Flex, Form, Image, Input, message, type InputRef } from 'antd';
@@ -31,9 +31,9 @@ const Login = () => {
 
   useEffect(() => {
     getCaptchaCode();
-    const autoLogin = localStorage.getItem(rememberPasswordKey) ?? 'false';
+    const autoLogin = LocalStorage.getItem(LocalStorage.rememberPasswordKey) ?? 'false';
     if (autoLogin === 'true') {
-      const userStorage = localStorage.getItem(loginUserKey);
+      const userStorage = LocalStorage.getItem(LocalStorage.loginUserKey);
       const userJson = safeInvoke((text: string) =>
         CryptoJS.AES.decrypt(text, AESKEY).toString(CryptoJS.enc.Utf8),
       )(userStorage);
@@ -43,7 +43,7 @@ const Login = () => {
         form.setFieldsValue({ username: username, password: password, autoLogin: true });
       } else {
         form.setFieldsValue({ username: '', password: '', autoLogin: true });
-        localStorage.removeItem(loginUserKey);
+        LocalStorage.removeItem(LocalStorage.loginUserKey);
       }
     } else {
       form.setFieldsValue({ username: '', password: '', autoLogin: false });
@@ -80,7 +80,7 @@ const Login = () => {
       setSessionToken(access_token, access_token, expireTime);
       message.success('登录成功！');
 
-      localStorage.setItem(rememberPasswordKey, values.autoLogin ? 'true' : 'false');
+      LocalStorage.setItem(LocalStorage.rememberPasswordKey, values.autoLogin ? 'true' : 'false');
       if (values.autoLogin) {
         const user = {
           username: values.username,
@@ -88,9 +88,9 @@ const Login = () => {
           version: VERSION,
         };
         const encrypted = CryptoJS.AES.encrypt(JSON.stringify(user), AESKEY).toString();
-        localStorage.setItem(loginUserKey, encrypted);
+        LocalStorage.setItem(LocalStorage.loginUserKey, encrypted);
       } else {
-        localStorage.removeItem(loginUserKey);
+        LocalStorage.removeItem(LocalStorage.loginUserKey);
       }
 
       await fetchUserInfo();

react-ui/src/utils/localStorage.ts

@@ -1,29 +1,31 @@
-// 登录的用户，包括用户名、密码和版本号
-export const loginUserKey = 'login-user';
-// 记住密码
-export const rememberPasswordKey = 'login-remember-password';
+export default class LocalStorage {
+  // 登录的用户，包括用户名、密码和版本号
+  static readonly loginUserKey = 'login-user';
+  // 记住密码
+  static readonly rememberPasswordKey = 'login-remember-password';
 
-export const getLocalStorageItem = (key: string, isObject: boolean = false) => {
-  const jsonStr = localStorage.getItem(key);
-  if (!isObject) {
-    return jsonStr;
-  }
-  if (jsonStr) {
-    try {
-      return JSON.parse(jsonStr);
-    } catch (error) {
-      return undefined;
+  static getItem(key: string, isObject: boolean = false) {
+    const jsonStr = localStorage.getItem(key);
+    if (!isObject) {
+      return jsonStr;
+    }
+    if (jsonStr) {
+      try {
+        return JSON.parse(jsonStr);
+      } catch (error) {
+        return undefined;
+      }
     }
+    return undefined;
   }
-  return undefined;
-};
 
-export const setLocalStorageItem = (key: string, state?: any, isObject: boolean = false) => {
-  if (state) {
-    localStorage.setItem(key, isObject ? JSON.stringify(state) : state);
+  static setItem(key: string, state?: any, isObject: boolean = false) {
+    if (state) {
+      localStorage.setItem(key, isObject ? JSON.stringify(state) : state);
+    }
   }
-};
 
-export const removeLocalStorageItem = (key: string) => {
-  localStorage.removeItem(key);
-};
+  static removeItem(key: string) {
+    localStorage.removeItem(key);
+  }
+}

react-ui/src/utils/sessionStorage.ts

@@ -1,74 +1,37 @@
-// 用于新建镜像
-export const mirrorNameKey = 'mirror-name';
-// 模型部署服务
-export const serviceInfoKey = 'service-info';
-// 模型部署服务版本
-export const serviceVersionInfoKey = 'service-version-info';
-// 编辑器 url
-export const editorUrlKey = 'editor-url';
-// 数据集、模型资源
-export const resourceItemKey = 'resource-item';
+export default class SessionStorage {
+  // 用于新建镜像
+  static readonly mirrorNameKey = 'mirror-name';
+  // 模型部署服务
+  static readonly serviceInfoKey = 'service-info';
+  // 模型部署服务版本
+  static readonly serviceVersionInfoKey = 'service-version-info';
+  // 编辑器 url
+  static readonly editorUrlKey = 'editor-url';
+  // 数据集、模型资源
+  static readonly resourceItemKey = 'resource-item';
 
-/**
- * Retrieves an item from session storage by key.
- *
- * If `isObject` is true, the function attempts to parse the stored value as JSON.
- * If parsing fails, the function returns undefined.
- *
- * @param {string} key - The key of the item to retrieve
- * @param {boolean} [isObject=false] - Whether to parse the stored value as JSON
- * @return {any} The retrieved item, or undefined if not found or parsing fails
- */
-export const getSessionStorageItem = (key: string, isObject: boolean = false): any => {
-  const jsonStr = sessionStorage.getItem(key);
-  if (!isObject) {
-    return jsonStr;
-  }
-  if (jsonStr) {
-    try {
-      return JSON.parse(jsonStr);
-    } catch (error) {
-      return undefined;
+  static getItem(key: string, isObject: boolean = false) {
+    const jsonStr = sessionStorage.getItem(key);
+    if (!isObject) {
+      return jsonStr;
+    }
+    if (jsonStr) {
+      try {
+        return JSON.parse(jsonStr);
+      } catch (error) {
+        return undefined;
+      }
     }
+    return undefined;
   }
-  return undefined;
-};
 
-/**
- * Sets an item in session storage by key.
- *
- * If `isObject` is true, the function stringifies the state as JSON before storing.
- *
- * @param {string} key - The key of the item to set
- * @param {any} [state] - The value of the item to set
- * @param {boolean} [isObject=false] - Whether to stringify the state as JSON
- */
-export const setSessionStorageItem = (key: string, state?: any, isObject: boolean = false) => {
-  if (state) {
-    sessionStorage.setItem(key, isObject ? JSON.stringify(state) : state);
+  static setItem(key: string, state?: any, isObject: boolean = false) {
+    if (state) {
+      sessionStorage.setItem(key, isObject ? JSON.stringify(state) : state);
+    }
   }
-};
 
-/**
- * Removes an item from session storage by key.
- *
- * @param {string} key - The key of the item to remove
- */
-export const removeSessionStorageItem = (key: string) => {
-  sessionStorage.removeItem(key);
-};
-
-/**
- * Retrieves an item from session storage by key and then removes it.
- *
- * This function is useful for passing data from one page to another.
- *
- * @param {string} key - The key of the item to retrieve
- * @param {boolean} [isObject=false] - Whether to parse the stored value as JSON
- * @return {any} The retrieved item, or undefined if not found or parsing fails
- */
-export const getSessionItemThenRemove = (key: string, isObject: boolean = false): any => {
-  const res = getSessionStorageItem(key, isObject);
-  sessionStorage.removeItem(key);
-  return res;
-};
+  static removeItem(key: string) {
+    sessionStorage.removeItem(key);
+  }
+}