merge

.gitignore

@@ -43,7 +43,6 @@ target/
 ._*
 .Spotlight-V100
 .Trashes
-Icon?
 ehthumbs.db
 Thumbs.db
 .factorypath

react-ui/config/routes.ts

@@ -135,6 +135,17 @@ export default [
         path: '/dataset/datasetIntro/:id',
         component: './Dataset/datasetIntro',
       },
+      {
+        name: '镜像',
+        path: 'mirror',
+        routes: [
+          {
+            name: '镜像列表',
+            path: '',
+            component: './Mirror/list',
+          },
+        ],
+      },
       {
         name: '模型管理',
         path: '/dataset/modelIndex',

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

@@ -1,22 +1,35 @@
-// 自定义 Modal
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-15 10:01:29
+ * @Description: 自定义 Modal
+ */
 
 import ModalTitle from '@/components/ModalTitle';
-import { Modal, type ModalProps } from 'antd';
+import { ConfigProvider, Modal, theme, type ModalProps } from 'antd';
 import classNames from 'classnames';
+import { useAntdConfig } from 'umi';
 import './index.less';
 
-type KFModalProps = ModalProps & {
+const { useToken } = theme;
+
+export interface KFModalProps extends ModalProps {
   image: string;
-};
-function KFModal({ title, image, children, className, ...rest }: KFModalProps) {
+}
+function KFModal({ title, image, children, className = '', ...rest }: KFModalProps) {
+  const { token } = useToken();
+  console.log('token', token);
+  const antdConfig = useAntdConfig();
+  console.log('antdConfig', antdConfig);
   return (
-    <Modal
-      className={classNames(['kf-modal', className])}
-      {...rest}
-      title={<ModalTitle title={title} image={image}></ModalTitle>}
-    >
-      {children}
-    </Modal>
+    <ConfigProvider {...antdConfig}>
+      <Modal
+        className={classNames(['kf-modal', className])}
+        {...rest}
+        title={<ModalTitle title={title} image={image}></ModalTitle>}
+      >
+        {children}
+      </Modal>
+    </ConfigProvider>
   );
 }
 

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

@@ -0,0 +1,32 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 14:55:40
+ * @Description:
+ */
+// import { useEffect, useState } from 'react';
+// import styles from './index.less';
+// import { Tabs } from "antd"
+
+// function KFTabs() {
+//   const [iframeUrl, setIframeUrl] = useState('');
+//   useEffect(() => {
+
+//   }, []);
+
+//   return (
+//     <div className={styles.container}>
+//       <div className={Styles.datasetAllBox}>
+//         <Tabs defaultActiveKey="1">
+//           <TabPane tab="数据广场" key="1">
+//             <PublicData />
+//           </TabPane>
+//           <TabPane tab="个人数据" key="2">
+//             <PersonalData />
+//           </TabPane>
+//         </Tabs>
+//       </div>
+//     </div>
+//   );
+// }
+
+// export default KFTabs;

react-ui/src/global.less

@@ -31,10 +31,10 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-a{
-  color:#1664ff;
+a {
+  color: #1664ff;
 }
-.ant-btn-link{
+.ant-btn-link {
   color: #1664ff;
 }
 .ant-pro-layout .ant-pro-layout-content {
@@ -52,9 +52,8 @@ a{
 .ant-menu-light .ant-menu-item-selected {
   background: rgba(197, 232, 255, 0.8) !important;
 }
-.ant-pro-layout .ant-pro-sider .ant-layout-sider-children{
-  background:#f2f5f7;
-
+.ant-pro-layout .ant-pro-sider .ant-layout-sider-children {
+  background: #f2f5f7;
 }
 .ant-pro-base-menu-inline {
   // height: 87vh;
@@ -64,12 +63,12 @@ a{
 .ant-pro-layout .ant-pro-layout-content {
   background-color: transparent;
 }
-.ant-table-wrapper .ant-table-pagination.ant-pagination{
-  background-color: #fff;
+.ant-table-wrapper .ant-table-pagination.ant-pagination {
   margin: 0;
   padding: 21px 16px;
+  background-color: #fff;
 }
-.ant-table-wrapper .ant-table{
+.ant-table-wrapper .ant-table {
   height: 75vh;
 }
 .ant-pro-global-header-logo img {
@@ -85,7 +84,7 @@ a{
   margin: 54px 0 auto;
   text-align: center;
 }
-.ant-modal-confirm-confirm .ant-modal-confirm-body>.anticon{
+.ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon {
   display: none;
 }
 .ant-modal-confirm .ant-modal-confirm-btns {
@@ -102,8 +101,8 @@ font-size:18px;
 margin-right: 10px;
 border-color: transparent;
 }
-.ant-modal-confirm-btns .ant-btn-default:hover{
-  background:rgba(22, 100, 255, 0.06);
+.ant-modal-confirm-btns .ant-btn-default:hover {
+  background: rgba(22, 100, 255, 0.06);
   border-color: transparent;
 }
 .ant-modal-confirm-btns .ant-btn-primary{
@@ -124,19 +123,18 @@ border-color: transparent;
 .ant-modal .ant-select-single .ant-select-selector .ant-select-selection-placeholder{
   line-height: 46px;
 }
-.ant-modal .ant-modal-close-x{
-  border: 2px solid #272536;
-  border-radius: 50%;
+.ant-modal .ant-modal-close-x {
   width: 26px;
   height: 26px;
   color: #272536;
+  border: 2px solid #272536;
+  border-radius: 50%;
 }
-.ant-modal-content{
-  margin-left: -130px;
+.ant-modal-content {
   margin-top: 50px;
-  
+  margin-left: -130px;
 }
-.ant-modal .ant-modal-content{
+.ant-modal .ant-modal-content {
   padding: 0;
 }
 .ant-modal-confirm-body-wrapper{
@@ -154,24 +152,24 @@ border-radius: 0;
 .ant-modal .ant-modal-close:hover {
   background-color: transparent;
 }
-.ant-modal .ant-modal-footer >.ant-btn+.ant-btn{
+.ant-modal .ant-modal-footer > .ant-btn + .ant-btn {
   margin-left: 20px;
 }
 .ant-pagination .ant-pagination-item-active a {
   color: #fff;
   background: #1664ff;
   border-color: #1664ff;
-  border-radius:6px;
+  border-radius: 6px;
 }
 .ant-pagination .ant-pagination-item-active:hover {
   color: #fff;
   background: rgba(22, 100, 255, 0.8);
   border-color: rgba(22, 100, 255, 0.8);
-  border-radius:6px;
+  border-radius: 6px;
 }
 .ant-pagination .ant-pagination-item {
   border: 1px solid #e6e6e6;
-  border-radius:6px;
+  border-radius: 6px;
 }
 // ::-webkit-scrollbar-button {
 //   background: #97a1bd;
@@ -211,3 +209,7 @@ ol {
     }
   }
 }
+
+.umi-local-svg {
+  vertical-align: -1px;
+}

react-ui/src/hooks/index.ts

@@ -24,7 +24,7 @@ export function useStateRef<T>(initialValue: T) {
  * @param initialValue - The initial visibility state of the modal.
  * @return An array containing the visibility state and functions to open and close the modal.
  */
-export function useAntdModal(initialValue: boolean) {
+export function useVisible(initialValue: boolean) {
   const [visible, setVisible] = useState(initialValue);
 
   const open = useCallback(() => {

react-ui/src/icons/dataset-select-button.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12.572" height="12.993" viewBox="0 0 12.572 12.993" fill="currentColor"><path class="a" d="M88.236,67l-5.66-2.951a.627.627,0,0,0-.579,0l-5.655,2.906a.627.627,0,0,0-.342.558v6.009a.629.629,0,0,0,.348.563l5.658,2.82a.627.627,0,0,0,.561,0l5.657-2.82a.629.629,0,0,0,.348-.563V67.555A.626.626,0,0,0,88.236,67Zm-6,2.842-2.124-1.046,4.811-2.577L87,67.3Zm.045-5,1.742.909-4.836,2.59-1.9-.934Zm-5.447,3.276,2.007.988v2.2a.419.419,0,0,0,.838,0V69.516l2.184,1.075V75.9l-5.029-2.509ZM82.705,75.9V70.54l5.029-2.681v5.531Z" transform="translate(-76 -63.975)"/></svg>

react-ui/src/icons/magnifying-glass.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15.429" height="15.429" viewBox="0 0 15.429 15.429">
+  <path id="搜索" d="M98.21,97.392a7.248,7.248,0,1,0-3.422,2.26.579.579,0,1,0-.338-1.107,6.218,6.218,0,1,1,2.6-1.6.669.669,0,0,0,.007.939l2.712,2.712a.579.579,0,0,0,.818-.818Z" transform="translate(-85.333 -85.333)" fill="rgba(22,100,255,0.4)"/>
+</svg>

react-ui/src/icons/mirror-select-button.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.246" height="11.246" viewBox="0 0 11.246 11.246" fill="currentColor"><path class="a" d="M70.025,64a.2.2,0,0,1,.2.2V75.045a.2.2,0,0,1-.2.2h-.8a.2.2,0,0,1-.2-.2V64.2a.2.2,0,0,1,.2-.2Zm-2.008,1.2a.2.2,0,0,1,.2.2v.8a.2.2,0,0,1-.2.2H65.2v6.426h2.812a.2.2,0,0,1,.2.2v.8a.2.2,0,0,1-.2.2H64.2a.2.2,0,0,1-.2-.2V65.406a.2.2,0,0,1,.2-.2Zm6.226,7.631v1.2h-1.2v-1.2Zm-2.008,0v1.2h-1.2v-1.2Zm3.012-1.807v1.2h-1.2v-1.2Zm0-2.008v1.2h-1.2v-1.2Zm0-2.008v1.2h-1.2v-1.2ZM72.234,65.2v1.2h-1.2V65.2Zm2.008,0v1.2h-1.2V65.2Z" transform="translate(-64 -64)"/></svg>

react-ui/src/icons/modal-close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="currentColor"><path class="a" d="M872.8,755.637h0v-.012Z" transform="translate(-848.576 -735.009)"/><path class="a" d="M122.155,109.158a13,13,0,1,0-13,13,13.015,13.015,0,0,0,13-13m-13,11.135a11.134,11.134,0,1,1,11.134-11.135,11.149,11.149,0,0,1-11.134,11.135" transform="translate(-96.155 -96.158)"/><path class="a" d="M344.559,345.281l-4.141-4.154,4.137-4.091a.957.957,0,1,0-1.346-1.36l-4.141,4.1-4.08-4.092a.957.957,0,0,0-1.355,1.351l4.075,4.087-4.107,4.062a.956.956,0,0,0,1.345,1.36l4.113-4.068,4.145,4.16a.957.957,0,0,0,1.355-1.352" transform="translate(-326.072 -328.091)"/></svg>

react-ui/src/icons/model-select-button.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12.036" height="13.5" viewBox="0 0 12.036 13.5" fill="currentColor" stroke="currentColor"><defs><style>.a{stroke-width:0.1px;}</style></defs><g transform="translate(-205.25 -176.646)"><path class="a" d="M211.268,190.1a1.261,1.261,0,0,1-.626-.167l-4.717-2.721a1.255,1.255,0,0,1-.626-1.084v-5.442a1.258,1.258,0,0,1,.626-1.084l4.717-2.721a1.271,1.271,0,0,1,1.251,0l4.717,2.721a1.255,1.255,0,0,1,.626,1.084v5.442a1.255,1.255,0,0,1-.626,1.084l-4.717,2.721A1.276,1.276,0,0,1,211.268,190.1Zm0-12.6a.478.478,0,0,0-.232.062l-4.717,2.721a.466.466,0,0,0-.232.4v5.442a.464.464,0,0,0,.232.4l4.717,2.721a.469.469,0,0,0,.463,0l4.717-2.721a.466.466,0,0,0,.232-.4V180.68a.464.464,0,0,0-.232-.4l-4.717-2.721A.465.465,0,0,0,211.268,177.5Z" transform="translate(0 0)"/><path class="a" d="M282.168,379.033a1.242,1.242,0,0,1-.616-.163l-3.722-2.1a.394.394,0,1,1,.387-.685l3.722,2.1a.461.461,0,0,0,.451,0l3.847-2.105a.394.394,0,1,1,.377.691l-3.845,2.107A1.251,1.251,0,0,1,282.168,379.033Z" transform="translate(-70.894 -195.36)"/><path class="a" d="M486.392,383.935a.392.392,0,0,1-.393-.4l.016-4.236a1.252,1.252,0,0,1,.653-1.094l3.8-2.067a.393.393,0,1,1,.375.691l-3.8,2.067a.467.467,0,0,0-.242.405l-.016,4.236A.394.394,0,0,1,486.392,383.935Z" transform="translate(-275.124 -195.422)"/><path class="a" d="M282.23,383.9a.392.392,0,0,1-.393-.391l-.016-4.236a.463.463,0,0,0-.242-.407l-3.678-2.069a.394.394,0,0,1,.385-.687l3.676,2.067a1.245,1.245,0,0,1,.647,1.092l.016,4.234a.4.4,0,0,1-.4.4Z" transform="translate(-70.962 -195.384)"/></g></svg>

react-ui/src/icons/parameter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.893" height="13.83" viewBox="0 0 14.893 13.83" fill="currentColor"><path class="a" d="M60.718,92.155a.532.532,0,0,1,.532.532v1.064h2.66a.532.532,0,0,1,0,1.064H61.25v1.064a.532.532,0,0,1-1.064,0V92.687a.532.532,0,0,1,.532-.532Zm-2.128,1.6a.532.532,0,0,1,0,1.064H50.08a.532.532,0,1,1,0-1.064h8.51Zm-5.319-6.383a.532.532,0,0,1,.532.532v3.191a.532.532,0,1,1-1.064,0V90.027H50.08a.532.532,0,1,1,0-1.064h2.66V87.9a.532.532,0,0,1,.532-.532Zm10.638,1.6a.532.532,0,0,1,0,1.064H55.4a.532.532,0,1,1,0-1.064Zm-3.191-6.383a.532.532,0,0,1,.532.532v1.064h2.66a.532.532,0,0,1,0,1.064H61.25V86.3a.532.532,0,0,1-1.064,0V83.113a.532.532,0,0,1,.532-.532Zm-2.128,1.6a.532.532,0,0,1,0,1.064H50.08a.532.532,0,1,1,0-1.064h8.51Z" transform="translate(-49.548 -82.581)"/></svg>

react-ui/src/icons/view-param.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13.247" height="13.247" viewBox="0 0 13.247 13.247" fill="currentColor"><g transform="translate(-370.617 -114.129)"><path class="a" d="M93.531,82H83.716A1.718,1.718,0,0,0,82,83.716v9.815a1.718,1.718,0,0,0,1.716,1.716h9.815a1.718,1.718,0,0,0,1.716-1.716V83.716A1.718,1.718,0,0,0,93.531,82Zm.792,11.531a.793.793,0,0,1-.792.792H83.716a.793.793,0,0,1-.792-.792V83.716a.793.793,0,0,1,.792-.792h9.815a.793.793,0,0,1,.792.792ZM84,86.549a.462.462,0,0,1,.462-.462h4.148a.462.462,0,1,1,0,.924H84.465A.462.462,0,0,1,84,86.549Zm9.215,0a.462.462,0,0,1-.462.462h-1.7V87.8a.462.462,0,1,1-.924,0V85.3a.462.462,0,0,1,.924,0v.787h1.7a.462.462,0,0,1,.462.462Zm0,4.31a.462.462,0,0,1-.462.462H87.54a.462.462,0,1,1,0-.924h5.215A.462.462,0,0,1,93.217,90.859ZM85.926,89.61v2.5a.462.462,0,0,1-.924,0v-.787h-.537a.462.462,0,1,1,0-.924H85V89.61a.462.462,0,0,1,.924,0Z" transform="translate(288.617 32.129)"/></g></svg>

react-ui/src/pages/Experiment/experimentText/addExperimentModal.tsx

@@ -62,7 +62,7 @@ export const getParamRules = (paramType: number, required: boolean = false): For
 };
 
 // 根据参数设置 label
-const getParamType = (param: PipelineGlobalParam): string => {
+export const getParamType = (param: PipelineGlobalParam): string => {
   const paramTypes: Readonly<Record<number, string>> = {
     1: '字符串',
     2: '整型',

react-ui/src/pages/Experiment/experimentText/index.jsx

@@ -1,5 +1,5 @@
 import { ReactComponent as ViewParam } from '@/assets/svg/view-param.svg';
-import { useAntdModal } from '@/hooks';
+import { useVisible } from '@/hooks';
 import { getExperimentIns } from '@/services/experiment/index.js';
 import { getWorkflowById } from '@/services/pipeline/index.js';
 import { elapsedTime } from '@/utils/date';
@@ -22,7 +22,7 @@ function ExperimentText() {
   const navgite = useNavigate();
   const locationParams = useParams(); //新版本获取路由参数接口
   let graph = null;
-  const [paramsModalOpen, openParamsModal, closeParamsModal] = useAntdModal(false);
+  const [paramsModalOpen, openParamsModal, closeParamsModal] = useVisible(false);
 
   const timers = (time) => {
     let timer = new Date(time);

react-ui/src/pages/Experiment/experimentText/paramsModal.less

@@ -1,6 +1,7 @@
 .params_container {
   max-height: 230px;
   padding: 15px 15px 0;
+  overflow-y: auto;
   border: 1px solid #e6e6e6;
   border-radius: 8px;
 

react-ui/src/pages/Experiment/experimentText/paramsModal.tsx

@@ -1,6 +1,12 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-09 15:59:14
+ * @Description: 查看实验使用的参数
+ */
 import parameterImg from '@/assets/img/modal-parameter.png';
 import KFModal from '@/components/KFModal';
 import { type PipelineGlobalParam } from '@/types';
+import { getParamType } from './addExperimentModal';
 import styles from './paramsModal.less';
 
 type ParamsModalProps = {
@@ -22,7 +28,7 @@ function ParamsModal({ open, onCancel, globalParam = [] }: ParamsModalProps) {
       <div className={styles.params_container}>
         {globalParam.map((item) => (
           <div key={item.param_name} className={styles.params_container_line}>
-            <span className={styles.params_container_line_label}>{item.param_name}</span>
+            <span className={styles.params_container_line_label}>{getParamType(item)}</span>
             <span className={styles.params_container_line_value}>{item.param_value}</span>
           </div>
         ))}

react-ui/src/pages/Experiment/index.jsx

@@ -143,16 +143,16 @@ function Experiment() {
     const [res] = await to(getTensorBoardStatusReq(params));
     if (res && res.data) {
       setExperimentInList((prevList) => {
-        const newList = [...prevList];
-        const index = prevList.findIndex((item) => item.id === experimentIn.id);
-        const preObj = prevList[index];
-        const newObj = {
-          ...preObj,
-          tensorBoardStatus: res.data.status,
-          tensorboardUrl: res.data.url,
-        };
-        newList.splice(index, 1, newObj);
-        return newList;
+        return prevList.map((item) => {
+          if (item.id === experimentIn.id) {
+            return {
+              ...item,
+              tensorBoardStatus: res.data.status,
+              tensorboardUrl: res.data.url,
+            };
+          }
+          return item;
+        });
       });
       const timerId = setTimeout(() => {
         getTensorBoardStatus(experimentIn);

react-ui/src/pages/Mirror/list.less

@@ -0,0 +1,42 @@
+.mirror-list {
+  height: 100%;
+  background-color: #f9fafb;
+  &__tabs-container {
+    height: 59px;
+    background-image: url('../../assets/img/mirror-tabs-bg.png');
+  }
+
+  &__content {
+    height: calc(100% - 69px);
+    margin-top: 10px;
+    padding: 20px 30px 0;
+    background-color: white;
+    border-radius: 10px;
+
+    &__filter {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 10px;
+    }
+
+    &__table {
+      height: calc(100% - 44px);
+      margin-top: 12px;
+      :global {
+        .ant-table-wrapper {
+          height: 100%;
+          .ant-spin-nested-loading {
+            height: 100%;
+          }
+          .ant-spin-container {
+            height: 100%;
+          }
+          .ant-table {
+            height: calc(100% - 74px);
+          }
+        }
+      }
+    }
+  }
+}

react-ui/src/pages/Mirror/list.tsx

@@ -0,0 +1,155 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 13:58:08
+ * @Description: 镜像列表
+ */
+import { getMirrorListReq } from '@/services/mirror';
+import { to } from '@/utils/promise';
+import { Button, Input, Table } from 'antd';
+import dayjs from 'dayjs';
+import { useEffect, useRef, useState } from 'react';
+import styles from './list.less';
+
+const tabItems = [
+  {
+    key: 'Public',
+    label: '公共镜像',
+  },
+  {
+    key: 'Private',
+    label: '个人镜像',
+  },
+];
+
+function MirrorList() {
+  const [activeTab, setActiveTab] = useState('Public');
+  const [tableData, setTableData] = useState([]);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [tableHeight, setTableHeight] = useState(0);
+  const [pagination, setPagination] = useState({
+    showSizeChanger: true,
+    showQuickJumper: true,
+    current: 1,
+    pageSize: 10,
+    total: 0,
+  });
+  useEffect(() => {
+    getMirrorList('');
+  }, []);
+
+  useEffect(() => {
+    const setTableScollHeight = () => {
+      if (contentRef.current) {
+        setTableHeight(contentRef.current.offsetHeight - 74 - 55);
+      }
+    };
+    setTableScollHeight();
+    window.addEventListener('resize', setTableScollHeight);
+
+    return () => {
+      window.removeEventListener('resize', setTableScollHeight);
+    };
+  }, [contentRef]);
+
+  const columns = [
+    {
+      title: '镜像名称',
+      dataIndex: 'name',
+      key: 'name',
+      width: '10%',
+    },
+    {
+      title: '版本数据',
+      dataIndex: 'version_count',
+      key: 'version_count',
+      width: '10%',
+    },
+    {
+      title: '镜像描述',
+      dataIndex: 'description',
+      key: 'description',
+      width: '50%',
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'create_time',
+      key: 'create_time',
+      width: '20%',
+      render: (text: string) => <span>{dayjs(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
+    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      width: '100px',
+      key: 'operation',
+      render: (_: any, record: any) => [
+        <Button
+          type="link"
+          size="small"
+          key="download"
+          // onClick={(e) => downloadAlone(e, record)}
+        >
+          查看详情
+        </Button>,
+      ],
+    },
+  ];
+
+  const getMirrorList = async (name: string) => {
+    const params = {
+      page: pagination.current - 1,
+      size: pagination.pageSize,
+      name,
+      image_type: 1,
+    };
+    const [res] = await to(getMirrorListReq(params));
+    if (res && res.data) {
+      const { content = [], totalElements = 0 } = res.data;
+      console.log(res);
+      setTableData(content);
+      setPagination((prev) => ({
+        ...prev,
+        total: totalElements,
+      }));
+    }
+  };
+
+  const onSearch = (value: string) => {
+    getMirrorList(value);
+  };
+
+  return (
+    <div className={styles['mirror-list']}>
+      <div className={styles['mirror-list__tabs-container']}>
+        {/* <Tabs
+          activeKey={activeTab}
+          items={tabItems}
+          onChange={setActiveTab}
+          className={styles['model-tabs']}
+        /> */}
+      </div>
+      <div className={styles['mirror-list__content']}>
+        <div className={styles['mirror-list__content__filter']}>
+          <Input.Search
+            placeholder="按数据集名称筛选"
+            allowClear
+            onSearch={onSearch}
+            style={{ width: 300 }}
+          />
+          <Button type="default">刷新</Button>
+        </div>
+        <div className={styles['mirror-list__content__table']} ref={contentRef}>
+          <Table
+            dataSource={tableData}
+            columns={columns}
+            scroll={{ y: tableHeight }}
+            pagination={pagination}
+            rowKey="id"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default MirrorList;

react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.less

@@ -0,0 +1,83 @@
+@import '@/styles/theme.less';
+
+.model-tabs {
+  margin-left: 8px;
+  :global {
+    .ant-tabs-tab {
+      padding-top: 0;
+    }
+    .ant-tabs-nav::before,
+    div > .ant-tabs-nav::before {
+      border: none;
+    }
+
+    .ant-tabs-nav {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.model-selector {
+  display: flex;
+  align-items: flex-start;
+
+  :global {
+    .ant-input-affix-wrapper .ant-input-prefix {
+      margin-inline-end: 12px;
+    }
+  }
+
+  &__left {
+    width: 488px;
+    height: 398px;
+    margin-right: 15px;
+    padding: 15px;
+    background-color: @background-color-primay;
+    border: 1px solid @border-color;
+    border-radius: 8px;
+
+    &__search {
+      margin-bottom: 14px;
+      padding-left: 0;
+      background-color: transparent;
+      border-width: 0;
+      border-bottom: 1px solid @border-color-second;
+      border-radius: 0;
+    }
+  }
+
+  &__right {
+    width: calc(100% - 488px - 15px);
+    height: 398px;
+    padding: 15px;
+    background-color: @background-color-primay;
+    border: 1px solid @border-color;
+    border-radius: 8px;
+
+    &__title {
+      margin-bottom: 15px;
+      padding: 3px 0 6px;
+      color: @text-color;
+      font-size: @font-size;
+      border-bottom: 1px solid @border-color-second;
+    }
+    &__files {
+      height: calc(100% - 75px);
+      overflow-y: auto;
+
+      &__file {
+        height: 24px;
+        margin-bottom: 10px;
+        padding-left: 10px;
+        overflow: hidden;
+        color: #575757;
+        font-size: 13px;
+        line-height: 24px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        background: @background-color-gray;
+        border-radius: 4px;
+      }
+    }
+  }
+}

react-ui/src/pages/Pipeline/components/ResourceSelectorModal/index.tsx

@@ -0,0 +1,410 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-11 16:31:18
+ * @Description: 选择数据集和模型
+ */
+
+import datasetImg from '@/assets/img/modal-select-dataset.png';
+import modelImg from '@/assets/img/modal-select-model.png';
+import KFModal from '@/components/KFModal';
+import {
+  getDatasetList,
+  getDatasetVersionIdList,
+  getDatasetVersionsById,
+  getModelList,
+  getModelVersionIdList,
+  getModelVersionsById,
+} from '@/services/dataset/index.js';
+import { to } from '@/utils/promise';
+import { Icon } from '@umijs/max';
+import type { GetRef, ModalProps, TabsProps, TreeDataNode, TreeProps } from 'antd';
+import { Input, Tabs, Tree } from 'antd';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import styles from './index.less';
+
+export enum ResourceSelectorType {
+  Model = 'Model', // 模型
+  Dataset = 'Dataset', // 数据集
+}
+
+type ResourceSelectorTypeKeys = keyof typeof ResourceSelectorType;
+type ResourceSelectorTypeValues = (typeof ResourceSelectorType)[ResourceSelectorTypeKeys];
+
+type GetModelFilesReqParam = {
+  models_id: number;
+  version: string;
+};
+
+type GetDatasetFilesReqParam = {
+  dataset_id: number;
+  version: string;
+};
+
+type GetFilesReqParam = GetModelFilesReqParam | GetDatasetFilesReqParam;
+
+export type SelectorTypeInfo = {
+  getList: (params: { page: number; size: number; available_range: string }) => Promise<any>;
+  getVersions: (params: number) => Promise<any>;
+  getFiles: (params: GetFilesReqParam) => Promise<any>;
+  modalIcon: string;
+  buttonIcon: string;
+  name: string;
+  fileReqParamKey: 'models_id' | 'dataset_id';
+  tabItems: TabsProps['items'];
+};
+
+enum TabItemKeys {
+  Private = 'Private', // 我的
+  Public = 'Public', // 公开
+}
+
+export const selectorTypeData: Record<ResourceSelectorTypeValues, SelectorTypeInfo> = {
+  Model: {
+    getList: getModelList,
+    getVersions: getModelVersionsById,
+    getFiles: getModelVersionIdList,
+    name: '模型',
+    modalIcon: modelImg,
+    buttonIcon: 'local:model-select-button',
+    fileReqParamKey: 'models_id',
+    tabItems: [
+      {
+        key: TabItemKeys.Private,
+        label: '我的模型',
+      },
+      {
+        key: TabItemKeys.Public,
+        label: '公开模型',
+      },
+    ],
+  },
+  Dataset: {
+    getList: getDatasetList,
+    getVersions: getDatasetVersionsById,
+    getFiles: getDatasetVersionIdList,
+    name: '数据集',
+    modalIcon: datasetImg,
+    buttonIcon: 'local:dataset-select-button',
+    fileReqParamKey: 'dataset_id',
+    tabItems: [
+      {
+        key: TabItemKeys.Private,
+        label: '我的数据集',
+      },
+      {
+        key: TabItemKeys.Public,
+        label: '公开数据集',
+      },
+    ],
+  },
+};
+
+type ResourceSelectorResponse = {
+  id: number; // 数据集或者模型 id
+  name: string; // 数据集或者模型 name
+  version: string; // 数据集或者模型版本
+  path: string; // 数据集或者模型版本路径
+  activeTab: TabItemKeys; // 是我的还是公开的
+};
+
+interface ResourceSelectorModalProps extends Omit<ModalProps, 'onOk'> {
+  type: ResourceSelectorType; // 模型 | 数据集
+  defaultExpandedKeys: React.Key[];
+  defaultCheckedKeys: React.Key[];
+  defaultActiveTab: TabItemKeys;
+  onOk?: (params: ResourceSelectorResponse | null) => void;
+}
+
+type ResourceGroup = {
+  id: number; // 数据集或者模型 id
+  name: string; // 数据集或者模型 id
+};
+
+type ResourceFile = {
+  id: number; // 文件 id
+  file_name: string; // 文件 name
+};
+
+type TreeRef = GetRef<typeof Tree<TreeDataNode>>;
+
+// list 转成 treeData
+const convertToTreeData = (list: ResourceGroup[]): TreeDataNode[] => {
+  return list.map((v) => ({
+    title: v.name,
+    key: v.id,
+    isLeaf: false,
+    checkable: false,
+  }));
+};
+
+// 更新树形结构的 children
+const updateChildren = (parentId: number, children: TreeDataNode[]) => {
+  return (node: TreeDataNode) => {
+    if (node.key === parentId) {
+      return {
+        ...node,
+        children,
+      };
+    }
+    return node;
+  };
+};
+
+// 得到数据集或者模型 id 和下属版本号
+const getIdAndVersion = (versionKey: string) => {
+  const index = versionKey.indexOf('-');
+  const id = Number(versionKey.slice(0, index));
+  const version = versionKey.slice(index + 1);
+  return {
+    id,
+    version,
+  };
+};
+
+function ResourceSelectorModal({
+  type,
+  defaultExpandedKeys = [],
+  defaultCheckedKeys = [],
+  defaultActiveTab = TabItemKeys.Private,
+  onOk,
+  ...rest
+}: ResourceSelectorModalProps) {
+  const [activeTab, setActiveTab] = useState<string>(defaultActiveTab);
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
+  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([]);
+  const [loadedKeys, setLoadedKeys] = useState<React.Key[]>([]);
+  const [originTreeData, setOriginTreeData] = useState<TreeDataNode[]>([]);
+  const [files, setFiles] = useState<ResourceFile[]>([]);
+  const [versionPath, setVersionPath] = useState('');
+  const [searchText, setSearchText] = useState('');
+  const [fisrtLoadList, setFisrtLoadList] = useState(false);
+  const [fisrtLoadVersions, setFisrtLoadVersions] = useState(false);
+  const treeRef = useRef<TreeRef>(null);
+
+  useEffect(() => {
+    setExpandedKeys([]);
+    setCheckedKeys([]);
+    setLoadedKeys([]);
+    setFiles([]);
+    setVersionPath('');
+    setSearchText('');
+    getTreeData();
+  }, [activeTab, type]);
+
+  const treeData = useMemo(
+    () =>
+      originTreeData.filter((v) =>
+        (v.title as string).toLowerCase()?.includes(searchText.toLowerCase()),
+      ),
+    [originTreeData, searchText],
+  );
+
+  // 获取数据集或模型列表
+  const getTreeData = async () => {
+    const available_range = activeTab === TabItemKeys.Private ? '0' : '1';
+    const params = {
+      page: 0,
+      size: 200,
+      available_range: available_range,
+    };
+    const getListReq = selectorTypeData[type].getList;
+    const [res] = await to(getListReq(params));
+    if (res) {
+      const list = res.data?.content || [];
+      const treeData = convertToTreeData(list);
+      setOriginTreeData(treeData);
+
+      // 恢复上一次的 Expand 操作
+      restoreLastExpand();
+    } else {
+      setOriginTreeData([]);
+    }
+  };
+
+  // 获取数据集或模型版本列表
+  const getVersions = async (parentId: number) => {
+    const getVersionsReq = selectorTypeData[type].getVersions;
+    const [res, error] = await to(getVersionsReq(parentId));
+    if (res) {
+      const list = res.data || [];
+      const children = list.map((v: string) => ({
+        title: v,
+        key: `${parentId}-${v}`,
+        isLeaf: true,
+        checkable: true,
+      }));
+      // 更新 treeData children
+      setOriginTreeData((prev) => prev.map(updateChildren(parentId, children)));
+      // 缓存 loadedKeys
+      const index = loadedKeys.find((v) => v === parentId);
+      if (!index) {
+        setLoadedKeys((prev) => prev.concat(parentId));
+      }
+      // 恢复上一次的 Check 操作
+      restoreLastCheck(parentId);
+    } else {
+      setExpandedKeys([]);
+      return Promise.reject(error);
+    }
+  };
+
+  // 获取版本下的文件
+  const getFiles = async (id: number, version: string) => {
+    const getFilesReq = selectorTypeData[type].getFiles;
+    const paramsKey = selectorTypeData[type].fileReqParamKey;
+    const params = { version: version, [paramsKey]: id } as GetFilesReqParam;
+    const [res] = await to(getFilesReq(params));
+    if (res) {
+      setVersionPath(res.data?.path || '');
+      setFiles(res.data?.content || []);
+    } else {
+      setVersionPath('');
+      setFiles([]);
+    }
+  };
+
+  // 动态加载 tree children
+  const onLoadData = ({ key, children }: TreeDataNode) => {
+    if (children) {
+      return Promise.resolve();
+    } else {
+      return getVersions(key as number);
+    }
+  };
+
+  // 扩展
+  const onExpand: TreeProps['onExpand'] = (expandedKeysValue) => {
+    const lastKeys = expandedKeysValue.slice(-1);
+    setExpandedKeys(lastKeys);
+  };
+
+  // 选中
+  const onCheck: TreeProps['onCheck'] = (checkedKeysValue) => {
+    const lastKeys = (checkedKeysValue as React.Key[]).slice(-1);
+    setCheckedKeys(lastKeys);
+    if (lastKeys.length) {
+      const last = lastKeys[0] as string;
+      const { id, version } = getIdAndVersion(last);
+      getFiles(id, version);
+    } else {
+      setFiles([]);
+    }
+  };
+
+  // 恢复上一次的 Expand 操作
+  // 判断是否有 defaultExpandedKeys，如果有，设置 expandedKeys
+  // fisrtLoadList 标志位
+  const restoreLastExpand = () => {
+    if (!fisrtLoadList && defaultExpandedKeys.length > 0) {
+      setTimeout(() => {
+        setExpandedKeys(defaultExpandedKeys);
+        setFisrtLoadList(true);
+        setTimeout(() => {
+          treeRef.current?.scrollTo({ key: defaultExpandedKeys[0], align: 'bottom' });
+        }, 100);
+      }, 0);
+    }
+  };
+
+  // 恢复上一次的 Check 操作
+  // 判断是否有 defaultCheckedKeys，如果有，设置 checkedKeys，并且调用获取文件列表接口
+  // fisrtLoadVersions 标志位
+  const restoreLastCheck = (parentId: number) => {
+    if (!fisrtLoadVersions && defaultCheckedKeys.length > 0) {
+      const last = defaultCheckedKeys[0] as string;
+      const { id, version } = getIdAndVersion(last);
+      // 判断正在打开的 id 和 defaultCheckedKeys 的 id 是否一致
+      if (id === parentId) {
+        setTimeout(() => {
+          setCheckedKeys(defaultCheckedKeys);
+          getFiles(id, version);
+          setFisrtLoadVersions(true);
+          setTimeout(() => {
+            treeRef?.current?.scrollTo({
+              key: defaultCheckedKeys[0],
+              align: 'bottom',
+            });
+          }, 100);
+        }, 0);
+      }
+    }
+  };
+
+  // 提交
+  const handleOk = () => {
+    if (checkedKeys.length > 0) {
+      const last = checkedKeys[0] as string;
+      const { id, version } = getIdAndVersion(last);
+      const name = (treeData.find((v) => Number(v.key) === id)?.title ?? '') as string;
+      const res = {
+        id,
+        name,
+        path: versionPath,
+        version,
+        activeTab: activeTab as TabItemKeys,
+      };
+      onOk?.(res);
+    } else {
+      onOk?.(null);
+    }
+  };
+
+  const title = `选择${selectorTypeData[type].name}`;
+  const palceholder = `请输入${selectorTypeData[type].name}名称`;
+  const fileTitle = `已选${selectorTypeData[type].name}文件（${files.length}）`;
+  const tabItems = selectorTypeData[type].tabItems;
+  const titleImg = selectorTypeData[type].modalIcon;
+
+  return (
+    <KFModal {...rest} title={title} image={titleImg} onOk={handleOk} width={920} destroyOnClose>
+      <div>
+        <Tabs
+          activeKey={activeTab}
+          items={tabItems}
+          onChange={setActiveTab}
+          className={styles['model-tabs']}
+        />
+        <div className={styles['model-selector']}>
+          <div className={styles['model-selector__left']}>
+            <Input
+              className={styles['model-selector__left__search']}
+              placeholder={palceholder}
+              allowClear
+              variant="borderless"
+              value={searchText}
+              onChange={(e) => setSearchText(e.target.value)}
+              prefix={<Icon icon="local:magnifying-glass" style={{ height: '15px' }} />}
+            />
+            <Tree
+              ref={treeRef}
+              rootStyle={{ backgroundColor: 'transparent' }}
+              loadData={onLoadData}
+              treeData={treeData}
+              onCheck={onCheck}
+              checkedKeys={checkedKeys}
+              multiple={false}
+              selectable={false}
+              height={324}
+              loadedKeys={loadedKeys}
+              expandedKeys={expandedKeys}
+              onExpand={onExpand}
+              checkable
+            />
+          </div>
+          <div className={styles['model-selector__right']}>
+            <div className={styles['model-selector__right__title']}>{fileTitle}</div>
+            <div className={styles['model-selector__right__files']}>
+              {files.map((v) => (
+                <div key={v.id} className={styles['model-selector__right__files__file']}>
+                  {v.file_name}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </KFModal>
+  );
+}
+
+export default ResourceSelectorModal;

react-ui/src/pages/Pipeline/editPipeline/editPipeline.less

@@ -51,3 +51,19 @@
   color: #ffffff;
   background-color: rgba(24, 144, 255, 0.3);
 }
+
+.ref-row {
+  display: flex;
+  align-items: center;
+
+  .select-button {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100px;
+    margin-left: 10px;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -61,7 +61,7 @@ const EditPipeline = () => {
   });
   const graphRef = useRef();
   const paramsDrawerRef = useRef();
-  const [paramsDrawerOpen, openParamsDrawer, closeParamsDrawer] = useAntdModal(false);
+  const [paramsDrawerOpen, openParamsDrawer, closeParamsDrawer] = useVisible(false);
   const [globalParam, setGlobalParam] = useState([]);
 
   const onDragEnd = (val) => {
@@ -98,6 +98,7 @@ const EditPipeline = () => {
     const [res, error] = await to(paramsDrawerRef.current.getFieldsValue());
     if (error) {
       message.error('全局参数配置有误');
+      openParamsDrawer();
       return;
     }
     const data = graph.save();

react-ui/src/pages/Pipeline/editPipeline/props.jsx

@@ -1,16 +1,23 @@
-import { Drawer, Form, Input } from 'antd';
+import { pick } from '@/utils/index';
+import { openAntdModal } from '@/utils/modal';
+import { Icon } from '@umijs/max';
+import { Button, Drawer, Form, Input } from 'antd';
 import { forwardRef, useImperativeHandle, useState } from 'react';
+import ResourceSelectorModal, { ResourceSelectorType } from '../components/ResourceSelectorModal';
 import Styles from './editPipeline.less';
 const { TextArea } = Input;
 const Props = forwardRef(({ onParentChange }, ref) => {
   const [form] = Form.useForm();
   const [stagingItem, setStagingItem] = useState({});
   const [open, setOpen] = useState(false);
+  const [selectedModel, setSelectedModel] = useState(undefined);
+  const [selectedDataset, setSelectedDataset] = useState(undefined);
+
   const afterOpenChange = () => {
     if (!open) {
-      console.log(111, open);
-
       console.log(stagingItem, form.getFieldsValue());
+      // 禁止校验 guard-for-in
+      /* eslint-disable */
       for (let i in form.getFieldsValue()) {
         for (let j in stagingItem.in_parameters) {
           if (i == j) {
@@ -29,6 +36,7 @@ const Props = forwardRef(({ onParentChange }, ref) => {
           }
         }
       }
+      /* eslint-enable */
       // setStagingItem({...stagingItem,})
       console.log(stagingItem.control_strategy);
       onParentChange({
@@ -76,6 +84,63 @@ const Props = forwardRef(({ onParentChange }, ref) => {
       }
     },
   }));
+
+  // 选择数据集、模型
+  const selectResource = (name, item) => {
+    const type =
+      item.item_type === 'dataset' ? ResourceSelectorType.Dataset : ResourceSelectorType.Model;
+    const resource = type === ResourceSelectorType.Dataset ? selectedDataset : selectedModel;
+    const { close } = openAntdModal(
+      ResourceSelectorModal,
+      {
+        type,
+        defaultExpandedKeys: resource ? [resource.id] : [],
+        defaultCheckedKeys: resource ? [`${resource.id}-${resource.version}`] : [],
+        defaultActiveTab: resource?.activeTab,
+        onOk: (res) => {
+          if (res) {
+            const jsonObj = pick(res, ['id', 'version', 'path']);
+            const value = JSON.stringify(jsonObj);
+            form.setFieldValue(name, value);
+            if (type === ResourceSelectorType.Dataset) {
+              setSelectedDataset(res);
+            } else {
+              setSelectedModel(res);
+            }
+          } else {
+            if (type === ResourceSelectorType.Dataset) {
+              setSelectedDataset(null);
+            } else {
+              setSelectedModel(null);
+            }
+            form.setFieldValue(name, '');
+          }
+          close();
+        },
+      },
+      true,
+    );
+  };
+
+  // 获取选择数据集、模型后面按钮 icon
+  const getSelectBtnIcon = (item) => {
+    const type = item.item_type;
+    if (type === 'dataset') {
+      return <Icon icon="local:dataset-select-button" className="umi-local-svg" />;
+    } else if (type === 'model') {
+      return <Icon icon="local:model-select-button" className="umi-local-svg" />;
+    } else {
+      return <Icon icon="local:mirror-select-button" className="umi-local-svg" />;
+    }
+  };
+
+  // 控制策略
+  const controlStrategy = stagingItem.control_strategy;
+  // 输入参数
+  const inParameters = stagingItem.in_parameters;
+  // 输出参数
+  const outParameters = stagingItem.out_parameters;
+
   return (
     <>
       <Drawer
@@ -181,11 +246,9 @@ const Props = forwardRef(({ onParentChange }, ref) => {
           <Form.Item label="环境变量" name="env_variables">
             <TextArea />
           </Form.Item>
-          {stagingItem.control_strategy &&
-          Object.keys(stagingItem.control_strategy) &&
-          Object.keys(stagingItem.control_strategy).length > 0
-            ? Object.keys(stagingItem.control_strategy).map((item) => (
-                <Form.Item label={stagingItem.control_strategy[item].label} name={item}>
+          {controlStrategy && Object.keys(controlStrategy).length > 0
+            ? Object.keys(controlStrategy).map((item) => (
+                <Form.Item key={item} label={controlStrategy[item].label} name={item}>
                   <Input />
                 </Form.Item>
               ))
@@ -198,16 +261,34 @@ const Props = forwardRef(({ onParentChange }, ref) => {
             />
             输入参数
           </div>
-          {stagingItem.in_parameters &&
-          Object.keys(stagingItem.in_parameters) &&
-          Object.keys(stagingItem.in_parameters).length > 0
-            ? Object.keys(stagingItem.in_parameters).map((item) => (
+          {inParameters && Object.keys(inParameters).length > 0
+            ? Object.keys(inParameters).map((item) => (
                 <Form.Item
-                  label={stagingItem.in_parameters[item].label + '(' + item + ')'}
-                  name={item}
-                  rules={[{ required: stagingItem.in_parameters[item].require ? true : false }]}
+                  key={item}
+                  label={inParameters[item].label + '(' + item + ')'}
+                  required={inParameters[item].require ? true : false}
                 >
-                  <Input />
+                  <div className={Styles['ref-row']}>
+                    <Form.Item
+                      name={item}
+                      noStyle
+                      rules={[{ required: inParameters[item].require ? true : false }]}
+                    >
+                      <Input />
+                    </Form.Item>
+                    {inParameters[item].type === 'ref' && (
+                      <Form.Item noStyle>
+                        <Button
+                          type="link"
+                          icon={getSelectBtnIcon(inParameters[item])}
+                          onClick={() => selectResource(item, inParameters[item])}
+                          className={Styles['select-button']}
+                        >
+                          {inParameters[item].label}
+                        </Button>
+                      </Form.Item>
+                    )}
+                  </div>
                 </Form.Item>
               ))
             : ''}
@@ -219,13 +300,12 @@ const Props = forwardRef(({ onParentChange }, ref) => {
             />
             输出参数
           </div>
-          {stagingItem.out_parameters &&
-          Object.keys(stagingItem.out_parameters) &&
-          Object.keys(stagingItem.out_parameters).length > 0
-            ? Object.keys(stagingItem.out_parameters).map((item) => (
+          {outParameters && Object.keys(outParameters).length > 0
+            ? Object.keys(outParameters).map((item) => (
                 <Form.Item
-                  label={stagingItem.out_parameters[item].label + '(' + item + ')'}
-                  rules={[{ required: stagingItem.out_parameters[item].require ? true : false }]}
+                  key={item}
+                  label={outParameters[item].label + '(' + item + ')'}
+                  rules={[{ required: outParameters[item].require ? true : false }]}
                   name={item}
                 >
                   <Input />

react-ui/src/requestConfig.ts

@@ -1,4 +1,9 @@
-import type { RequestConfig } from '@umijs/max';
+/*
+ * @Author: 赵伟
+ * @Date: 2024-03-25 13:52:54
+ * @Description:
+ */
+import type { RequestConfig } from '@umijs/max';
 import { message } from 'antd';
 import { clearSessionToken, getAccessToken, getRefreshToken, getTokenExpireTime } from './access';
 

react-ui/src/services/mirror/index.ts

@@ -0,0 +1,22 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-16 14:29:44
+ * @Description:
+ */
+import { request } from '@umijs/max';
+
+// 分页查询镜像列表
+export function getMirrorListReq(params: any) {
+  return request(`/api/mmp/image/`, {
+    method: 'GET',
+    params,
+  });
+}
+
+// // 分页查询镜像列表
+// export function getMirrorList(params: any) {
+//   return request(`/image/`, {
+//     method: 'GET',
+//     params,
+//   });
+// }

react-ui/src/utils/index.js

@@ -1,12 +0,0 @@
-export function s8() {
-  return (((1 + Math.random()) * 0x100000000) | 0).toString(16).substring(1);
-}
-
-export function getNameByCode(list, code) {
-  let name = '';
-  list.forEach((item) => {
-    if (item.dictValue === code) name = item.dictLabel;
-  });
-  return name;
-}
-

react-ui/src/utils/index.ts

@@ -0,0 +1,50 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-03-25 13:52:54
+ * @Description:
+ */
+export function s8() {
+  return (((1 + Math.random()) * 0x100000000) | 0).toString(16).substring(1);
+}
+
+export function getNameByCode(list: any[], code: any) {
+  let name = '';
+  list.forEach((item) => {
+    if (item.dictValue === code) name = item.dictLabel;
+  });
+  return name;
+}
+
+/**
+ * Picks specified properties from an object and returns a new object with only those properties.
+ *
+ * @param obj - The object to pick properties from.
+ * @param properties - An array of property names to pick from the object.
+ * @return A new object with only the picked properties.
+ */
+export function pick<T extends object, K extends keyof T>(obj: T, properties: K[]): Pick<T, K> {
+  const picked: Partial<T> = {};
+  for (const key of properties) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      picked[key] = obj[key];
+    }
+  }
+  return picked as Pick<T, K>;
+}
+
+/**
+ * Omit properties from an object and return a new object without those properties.
+ *
+ * @param obj - The object to omit properties from.
+ * @param properties - An array of property names to omit from the object.
+ * @return A new object without the omitted properties.
+ */
+export function omit<T extends object, K extends keyof T>(obj: T, properties: K[]): Omit<T, K> {
+  const omitted: Partial<T> = { ...obj };
+  for (const key of properties) {
+    if (Object.prototype.hasOwnProperty.call(omitted, key)) {
+      delete omitted[key];
+    }
+  }
+  return omitted as Omit<T, K>;
+}

react-ui/src/utils/modal.tsx

@@ -0,0 +1,88 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-13 10:08:35
+ * @Description:
+ */
+import { type ModalProps } from 'antd';
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+/**
+ * Function to open an Ant Design modal.
+ *
+ * @param modal - The function that renders the modal content.
+ * @param modalProps - The modal properties.
+ * @return An object with a destroy method to close the modal.
+ */
+export const openAntdModal = <T extends ModalProps>(
+  modal: (props: T) => React.ReactNode,
+  modalProps: T,
+) => {
+  const CustomModel = modal;
+  const element = document.createElement('div');
+  element.id = 'modal-container';
+  document.body.appendChild(element);
+  const root = createRoot(element);
+  const { afterClose, onCancel } = modalProps;
+
+  function destroy() {
+    root.unmount();
+    document.body.removeChild(element);
+  }
+
+  function handleAfterClose() {
+    afterClose?.();
+    setTimeout(() => {
+      destroy();
+    }, 0);
+  }
+
+  function handleCancel(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+    if (onCancel) {
+      onCancel(e);
+    } else {
+      close();
+    }
+  }
+
+  function render(props: T) {
+    root.render(<CustomModel {...props} onCancel={handleCancel}></CustomModel>);
+  }
+
+  function close() {
+    render({ ...modalProps, open: false, afterClose: handleAfterClose });
+  }
+
+  render({ ...modalProps, open: true });
+
+  return {
+    close,
+  };
+};
+
+/**
+ * Generates a custom hook for managing an Ant Design modal.
+ *
+ * @param modal - The function that renders the modal content.
+ * @param key - The key for the modal.
+ * @return The modal component, open function, and close function.
+ */
+export const useAntdModal = <T extends ModalProps>(
+  modal: (props: T) => React.ReactNode,
+  key: React.Key,
+) => {
+  const [visible, setVisible] = useState(false);
+  const [props, setProps] = useState<T>({} as T);
+  const CustomModel = modal;
+
+  const open = (props: T) => {
+    setProps(props);
+    setVisible(true);
+  };
+
+  const close = () => {
+    setVisible(false);
+  };
+
+  return [<CustomModel key={key} open={visible} {...props} />, open, close] as const;
+};

ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/controller/dataset/DatasetController.java

@@ -19,6 +19,7 @@ import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
 
 import javax.annotation.Resource;
+import java.util.Map;
 
 /**
  * (Dataset)表控制层
@@ -195,9 +196,11 @@ public class DatasetController {
 
 
 
-    @GetMapping("/exportDataset")
+    @PostMapping("/exportDataset")
     @ApiOperation(value = "导出数据集", notes = "将流水线产物导出到数据集。")
-    public AjaxResult exportDataset(@RequestParam("path") String path, @RequestParam("uuid") String uuid) throws Exception {
+    public AjaxResult exportDataset(@RequestBody Map map) throws Exception {
+        String path = (String) map.get("path");
+        String uuid = (String) map.get("uuid");
         return AjaxResult.success(datasetService.exportDataset(path, uuid));
     }
 

ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/controller/model/ModelsController.java

@@ -2,6 +2,7 @@ package com.ruoyi.platform.controller.model;
 
 
 import com.ruoyi.common.core.web.controller.BaseController;
+import com.ruoyi.common.core.web.domain.AjaxResult;
 import com.ruoyi.common.core.web.domain.GenericsAjaxResult;
 import com.ruoyi.common.security.utils.SecurityUtils;
 import com.ruoyi.platform.domain.Models;
@@ -50,7 +51,7 @@ public class ModelsController extends BaseController {
     @ApiOperation("模型广场分页查询，可传model_type进行筛选")
     public GenericsAjaxResult<Page<Models>> queryByPage(Models models, @RequestParam("page") int page,
                                                         @RequestParam("size") int size,
-                                                        //@RequestParam("available_range") int availableRange,
+                                                        @RequestParam("available_range") int availableRange,
                                                         @RequestParam(value = "model_type", required = false) String modelType,
                                                         @RequestParam(value = "model_tag", required = false) String modelTag) {
         if (modelType != null){
@@ -59,9 +60,10 @@ public class ModelsController extends BaseController {
         if (modelTag != null){
             models.setModelTag(modelTag); // 设置筛选条件
         }
-        models.setAvailableRange(1); // 设置筛选条件
+        models.setAvailableRange(availableRange); // 设置筛选条件
         PageRequest pageRequest = PageRequest.of(page, size);
         return genericsSuccess(this.modelsService.queryByPage(models, pageRequest));
+
     }
 
 
@@ -225,6 +227,15 @@ public class ModelsController extends BaseController {
 
     }
 
+    @PostMapping("/exportModel")
+    @ApiOperation(value = "导出模型", notes = "将流水线产物导出到模型。")
+    public AjaxResult exportModels(@RequestBody Map map) throws Exception {
+        String path = (String) map.get("path");
+        String uuid = (String) map.get("uuid");
+        return AjaxResult.success(this.modelsService.exportModels(path, uuid));
+    }
+
+
 
 }
 

ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/ModelsService.java

@@ -81,4 +81,5 @@ public interface ModelsService {
 
     String readFileContent(Integer modelsId, String version) throws Exception;
 
+    List<Map<String, String>> exportModels(String path, String uuid) throws Exception;
 }

ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/DatasetServiceImpl.java

@@ -395,21 +395,24 @@ public class DatasetServiceImpl implements DatasetService {
         String srcBucketName = path.substring(0, path.indexOf("/"));
         //构建目标目录路径
         String username = SecurityUtils.getLoginUser().getUsername();
-        String targetDir = "datasets/" + username + "/" + uuid;
+        String srcDir = path.substring(path.indexOf("/") + 1);
+        String targetDir = "datasets/" + username + "/" + uuid + "/";
         // 递归拷贝整个原目录到目标目录下
-        minioUtil.copyDirectory(srcBucketName, path, bucketName, targetDir);
+        minioUtil.copyDirectory(srcBucketName, srcDir, bucketName, targetDir);
         List<Item> movedItems = minioUtil.getAllObjectsByPrefix(bucketName, targetDir, true);
         for (Item movedItem : movedItems) {
-            Map<String, String> result = new HashMap<>();
-            String url = movedItem.objectName();
-            String fileName = extractFileName(url);
-            // 获取文件大小并转换为可读形式
-            long sizeInBytes = movedItem.size();
-            String formattedSize = FileUtil.formatFileSize(sizeInBytes); // 格式化文件大小
-            result.put("fileName", fileName);
-            result.put("url", url); // objectName根据实际情况定义
-            result.put("fileSize", formattedSize);
-            results.add(result);
+            if(!movedItem.isDir() && movedItem.size() > 0){ // 检查是否为非目录且文件大小大于0
+                Map<String, String> result = new HashMap<>();
+                String url = movedItem.objectName();
+                String fileName = extractFileName(url);
+                // 获取文件大小并转换为可读形式
+                long sizeInBytes = movedItem.size();
+                String formattedSize = FileUtil.formatFileSize(sizeInBytes); // 格式化文件大小
+                result.put("fileName", fileName);
+                result.put("url", url); // objectName根据实际情况定义
+                result.put("fileSize", formattedSize);
+                results.add(result);
+            }
         }
         return results;
     }

ruoyi-modules/management-platform/src/main/java/com/ruoyi/platform/service/impl/ModelsServiceImpl.java

@@ -14,6 +14,7 @@ import com.ruoyi.platform.utils.MinioUtil;
 import com.ruoyi.platform.vo.ModelsVo;
 import com.ruoyi.platform.vo.VersionVo;
 import com.ruoyi.system.api.model.LoginUser;
+import io.minio.messages.Item;
 import io.netty.util.Version;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.core.io.InputStreamResource;
@@ -409,6 +410,35 @@ public class ModelsServiceImpl implements ModelsService {
 
     }
 
+    @Override
+    public List<Map<String, String>> exportModels(String path, String uuid) throws Exception {
+        List<Map<String, String>> results = new ArrayList<>();
+        //根据path得到源文件所在桶名
+        String srcBucketName = path.substring(0, path.indexOf("/"));
+        //构建目标目录路径
+        String username = SecurityUtils.getLoginUser().getUsername();
+        String srcDir = path.substring(path.indexOf("/") + 1);
+        String targetDir = "models/" + username + "/" + uuid + "/";
+        // 递归拷贝整个原目录到目标目录下
+        minioUtil.copyDirectory(srcBucketName, srcDir, bucketName, targetDir);
+        List<Item> movedItems = minioUtil.getAllObjectsByPrefix(bucketName, targetDir, true);
+        for (Item movedItem : movedItems) {
+            if(!movedItem.isDir() && movedItem.size() > 0){ // 检查是否为非目录且文件大小大于0
+                Map<String, String> result = new HashMap<>();
+                String url = movedItem.objectName();
+                String fileName = extractFileName(url);
+                // 获取文件大小并转换为可读形式
+                long sizeInBytes = movedItem.size();
+                String formattedSize = FileUtil.formatFileSize(sizeInBytes); // 格式化文件大小
+                result.put("fileName", fileName);
+                result.put("url", url); // objectName根据实际情况定义
+                result.put("fileSize", formattedSize);
+                results.add(result);
+            }
+        }
+        return results;
+    }
+
     private String extractFileName(String urlStr) {
         return urlStr.substring(urlStr.lastIndexOf('/') + 1);
     }