feat: 新增实验可视化对比

react-ui/config/routes.ts

@@ -143,6 +143,11 @@ export default [
             path: 'compare',
             component: './Experiment/Comparison/index',
           },
+          {
+            name: '实验可视化对比',
+            path: 'compare-visual',
+            component: './Experiment/Aim/index',
+          },
         ],
       },
       {

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

@@ -3,6 +3,7 @@ import KFSpin from '@/components/KFSpin';
 import { getLabelStudioUrl } from '@/services/developmentEnvironment';
 import { to } from '@/utils/promise';
 import SessionStorage from '@/utils/sessionStorage';
+import { FloatButton } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -13,6 +14,7 @@ export enum IframePageType {
   AppDevelopment = 'AppDevelopment', // 应用开发
   DevEnv = 'DevEnv', // 开发环境
   GitLink = 'GitLink', // git link
+  Aim = 'Aim', // 实验对比
 }
 
 const getRequestAPI = (type: IframePageType): (() => Promise<any>) => {
@@ -29,12 +31,20 @@ const getRequestAPI = (type: IframePageType): (() => Promise<any>) => {
         });
     case IframePageType.GitLink: // git link
       return () => Promise.resolve({ code: 200, data: 'http://172.20.32.201:4000' });
+    case IframePageType.Aim: // Aim
+      return () =>
+        Promise.resolve({
+          code: 200,
+          data: SessionStorage.getItem(SessionStorage.aimUrlKey) || '',
+        });
   }
 };
 
 type IframePageProps = {
   /** 子系统 */
   type: IframePageType;
+  /** 是否可以在页签上打开 */
+  openInTab: boolean;
   /** 自定义样式类名 */
   className?: string;
   /** 自定义样式 */
@@ -42,7 +52,7 @@ type IframePageProps = {
 };
 
 /** 系统内嵌 iframe，目前系统有数据标注、应用开发、开发环境、GitLink 四个子系统，使用时可以添加其他子系统 */
-function IframePage({ type, className, style }: IframePageProps) {
+function IframePage({ type, openInTab = true, className, style }: IframePageProps) {
   const [iframeUrl, setIframeUrl] = useState('');
   const [loading, setLoading] = useState(false);
 
@@ -65,6 +75,7 @@ function IframePage({ type, className, style }: IframePageProps) {
     <div className={classNames('kf-iframe-page', className)} style={style}>
       {loading && createPortal(<KFSpin size="large" />, document.body)}
       <FullScreenFrame url={iframeUrl} onLoad={hideLoading} onError={hideLoading} />
+      {openInTab && <FloatButton onClick={() => window.open(iframeUrl, '_blank')} />}
     </div>
   );
 }

react-ui/src/pages/Experiment/Aim/index.tsx

@@ -0,0 +1,12 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2025-03-31 16:38:59
+ * @Description: 实验对比 Aim
+ */
+
+import IframePage, { IframePageType } from '@/components/IFramePage';
+
+function AimPage() {
+  return <IframePage type={IframePageType.Aim}></IframePage>;
+}
+export default AimPage;

react-ui/src/pages/Experiment/Comparison/index.tsx

@@ -12,8 +12,9 @@ import {
 } from '@/services/experiment';
 import { tableSorter } from '@/utils';
 import { to } from '@/utils/promise';
+import SessionStorage from '@/utils/sessionStorage';
 import tableCellRender, { TableCellValueType } from '@/utils/table';
-import { useSearchParams } from '@umijs/max';
+import { useNavigate, useSearchParams } from '@umijs/max';
 import { App, Button, Table, TablePaginationConfig, TableProps } from 'antd';
 import classNames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
@@ -46,6 +47,7 @@ function ExperimentComparison() {
   });
 
   const { message } = App.useApp();
+  const navigate = useNavigate();
   const config = comparisonConfig[comparisonType];
 
   useEffect(() => {
@@ -73,7 +75,9 @@ function ExperimentComparison() {
     const [res] = await to(getExpMetricsReq(selectedRowKeys));
     if (res && res.data) {
       const url = res.data;
-      window.open(url, '_blank');
+      // window.open(url, '_blank');
+      SessionStorage.setItem(SessionStorage.aimUrlKey, url);
+      navigate('../compare-visual');
     }
   };
 

react-ui/src/utils/localStorage.ts

@@ -25,6 +25,7 @@ export default class LocalStorage {
   /**
    * 设置 LocalStorage 值
    * @param key - LocalStorage key
+   * @param state - SessionStorage state
    * @param isObject - 是不是对象
    */
   static setItem(key: string, state?: any, isObject: boolean = false) {

react-ui/src/utils/sessionStorage.ts

@@ -9,6 +9,8 @@ export default class SessionStorage {
   static readonly editorUrlKey = 'editor-url';
   /** 客户端信息 */
   static readonly clientInfoKey = 'client-info';
+  /** aim url */
+  static readonly aimUrlKey = 'aim-url';
 
   /**
    * 获取 SessionStorage 值
@@ -29,6 +31,7 @@ export default class SessionStorage {
   /**
    * 设置 SessionStorage 值
    * @param key - SessionStorage key
+   * @param state - SessionStorage state
    * @param isObject - 是不是对象
    */
   static setItem(key: string, state?: any, isObject: boolean = false) {