Merge remote-tracking branch 'origin/dev'

k8s/build.sh

@@ -139,7 +139,7 @@ fi
 
 if [ "$service" == "all" ]; then
   # 编译前端
-#  compile_front
+  compile_front
 
   # 编译java
   compile_java "all"

react-ui/config/config.ts

@@ -129,6 +129,15 @@ export default defineConfig({
     // 解决首次加载时白屏的问题
     { src: '/scripts/loading.js', async: true },
   ],
+  // links: [
+  //   {
+  //     href: '/fonts/ALIBABA-PUHUITI-MEDIUM.TTF',
+  //     rel: 'preload',
+  //     as: 'font',
+  //     type: 'font/woff2',
+  //     crossOrigin: 'anonymous',
+  //   },
+  // ],
   //================ pro 插件配置 =================
   presets: ['umi-presets-pro'],
   /**

react-ui/package.json

@@ -58,9 +58,11 @@
     "@ant-design/use-emotion-css": "1.0.4",
     "@antv/g6": "^4.8.24",
     "@antv/hierarchy": "^0.6.12",
+    "@types/crypto-js": "^4.2.2",
     "@umijs/route-utils": "^4.0.1",
     "antd": "^5.4.4",
     "classnames": "^2.3.2",
+    "crypto-js": "^4.2.0",
     "echarts": "^5.5.0",
     "fabric": "^5.3.0",
     "highlight.js": "^11.7.0",

react-ui/public/fonts/font.css

@@ -1,4 +1,5 @@
 @font-face {  
     font-family: Alibaba;  
     src: url('./ALIBABA-PUHUITI-MEDIUM.TTF');
+    font-display: swap;
   }

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,13 +1,18 @@
 import { clearSessionToken, setSessionToken } from '@/access';
 import { getCaptchaImg, login } from '@/services/system/auth';
-import { loginPasswordKey, loginUserKey, rememberPasswordKey } from '@/utils/localStorage';
+import { safeInvoke } from '@/utils/functional';
+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';
+import CryptoJS from 'crypto-js';
 import { useEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 import styles from './login.less';
 
+const VERSION = 1;
+const AESKEY = 'OPENSOURCETECHNOLOGYCENTER';
+
 const LoginInputPrefix = ({ icon }: { icon: string }) => {
   return (
     <div className={styles['login-input-prefix']}>
@@ -26,16 +31,24 @@ const Login = () => {
 
   useEffect(() => {
     getCaptchaCode();
-    const autoLogin = localStorage.getItem(rememberPasswordKey) ?? 'false';
+    const autoLogin = LocalStorage.getItem(LocalStorage.rememberPasswordKey) ?? 'false';
     if (autoLogin === 'true') {
-      const username = localStorage.getItem(loginUserKey);
-      const password = localStorage.getItem(loginPasswordKey);
-      form.setFieldsValue({ username: username, password: password, autoLogin: true });
+      const userStorage = LocalStorage.getItem(LocalStorage.loginUserKey);
+      const userJson = safeInvoke((text: string) =>
+        CryptoJS.AES.decrypt(text, AESKEY).toString(CryptoJS.enc.Utf8),
+      )(userStorage);
+      const user = safeInvoke(JSON.parse)(userJson);
+      if (user && typeof user === 'object' && user.version === VERSION) {
+        const { username, password } = user;
+        form.setFieldsValue({ username: username, password: password, autoLogin: true });
+      } else {
+        form.setFieldsValue({ username: '', password: '', autoLogin: true });
+        LocalStorage.removeItem(LocalStorage.loginUserKey);
+      }
     } else {
       form.setFieldsValue({ username: '', password: '', autoLogin: false });
     }
   }, []);
-
   const getCaptchaCode = async () => {
     const [res] = await to(getCaptchaImg());
     if (res) {
@@ -67,13 +80,17 @@ 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) {
-        localStorage.setItem(loginUserKey, values.username ?? '');
-        localStorage.setItem(loginPasswordKey, values.password ?? '');
+        const user = {
+          username: values.username,
+          password: values.password,
+          version: VERSION,
+        };
+        const encrypted = CryptoJS.AES.encrypt(JSON.stringify(user), AESKEY).toString();
+        LocalStorage.setItem(LocalStorage.loginUserKey, encrypted);
       } else {
-        localStorage.removeItem(loginUserKey);
-        localStorage.removeItem(loginPasswordKey);
+        LocalStorage.removeItem(LocalStorage.loginUserKey);
       }
 
       await fetchUserInfo();

react-ui/src/utils/functional.ts

@@ -0,0 +1,16 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-10-12 14:27:29
+ * @Description: 函数式编程
+ */
+
+export function safeInvoke<T, M>(
+  fn: (value: T) => M | undefined | null,
+): (value: T | undefined | null) => M | undefined | null {
+  return (arg: T | undefined | null) => {
+    if (arg === undefined || arg === null) {
+      return arg as undefined | null;
+    }
+    return fn(arg);
+  };
+}

react-ui/src/utils/index.ts

@@ -216,8 +216,5 @@ export const getGitUrl = (url: string, branch: string): string => {
     return '';
   }
   const gitUrl = url.replace(/\.git$/, '');
-  if (branch) {
-    return `${gitUrl}/tree/${branch}`;
-  }
-  return gitUrl;
+  return branch ? `${gitUrl}/tree/${branch}` : gitUrl;
 };

react-ui/src/utils/localStorage.ts

@@ -1,31 +1,31 @@
-// 登录的用户名
-export const loginUserKey = 'login-user';
-// 登录的密码
-export const loginPasswordKey = 'login-password';
-// 记住密码
-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);
+  }
+}