Merge remote-tracking branch 'origin/dev' into dev

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

@@ -0,0 +1,2 @@
+.tabs-container {
+}

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

@@ -1,30 +1,14 @@
-/*
- * @Author: 赵伟
- * @Date: 2024-04-16 14:55:40
- * @Description:
- */
+// import { Tabs } from 'antd';
 // import { useEffect, useState } from 'react';
 // import styles from './index.less';
-// import { Tabs } from "antd"
 
 // function KFTabs() {
 //   const [iframeUrl, setIframeUrl] = useState('');
-//   useEffect(() => {
-
-//   }, []);
+//   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 className={styles}>
+//       <Tabs></Tabs>
 //     </div>
 //   );
 // }

react-ui/src/enums/index.ts

@@ -0,0 +1,5 @@
+// 公开还是私有 TabKey
+export enum CommonTabKeys {
+  Private = 'Private', // 私有
+  Public = 'Public', // 公开
+}

react-ui/src/global.less

@@ -171,6 +171,18 @@ border-radius: 0;
   border: 1px solid #e6e6e6;
   border-radius: 6px;
 }
+
+.ant-tabs {
+  .ant-tabs-nav::before,
+  div > .ant-tabs-nav::before {
+    border: none;
+  }
+
+  .ant-tabs-nav {
+    margin-bottom: 0;
+  }
+}
+
 // ::-webkit-scrollbar-button {
 //   background: #97a1bd;
 // }

react-ui/src/hooks/index.ts

@@ -1,3 +1,9 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-04-15 10:01:29
+ * @Description:
+ */
+import { debounce } from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 /**
@@ -61,3 +67,35 @@ export function useCallbackState<T>(initialValue: T) {
   };
   return [state, setState];
 }
+
+/**
+ * A hook that tracks the size of a DOM element.
+ *
+ * @param initialWidth - The initial width of the element.
+ * @param initialHeight - The initial height of the element.
+ * @return - A tuple containing the ref to the DOM element, the current width, and the current height.
+ */
+export function useDomSize<T extends HTMLElement>(initialWidth: number, initialHeight: number) {
+  const domRef = useRef<T>(null);
+  const [width, setWidth] = useState(initialWidth);
+  const [height, setHeight] = useState(initialHeight);
+
+  useEffect(() => {
+    const setDomHeight = () => {
+      if (domRef.current) {
+        setHeight(domRef.current.offsetHeight);
+        setWidth(domRef.current.offsetWidth);
+      }
+    };
+    const debounceFunc = debounce(setDomHeight, 500);
+
+    setDomHeight();
+    window.addEventListener('resize', debounceFunc);
+
+    return () => {
+      window.removeEventListener('resize', debounceFunc);
+    };
+  }, [domRef]);
+
+  return [domRef, { width, height }] as const;
+}

react-ui/src/icons/private-mirror-tab.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.313" height="13.129" viewBox="0 0 14.313 13.129" fill="currentColor" stroke="currentColor"><defs><style>.a{stroke-width:0.2px;}</style></defs><g transform="translate(-106.567 -129.178)"><path class="a" d="M114.2,378.558H108a1.332,1.332,0,0,1-1.328-1.328v-6.2A1.328,1.328,0,0,1,108,369.707h4.255v.724H108a.6.6,0,0,0-.6.6v6.2a.6.6,0,0,0,.6.6h6.2a.6.6,0,0,0,.6-.6v-3.1h.724v3.1a1.328,1.328,0,0,1-1.328,1.328Z" transform="translate(0 -236.351)"/><path class="a" d="M423.317,138.14h-6.2a1.332,1.332,0,0,1-1.328-1.328v-6.2a1.332,1.332,0,0,1,1.328-1.332h6.2a1.328,1.328,0,0,1,1.339,1.332v6.2a1.328,1.328,0,0,1-1.339,1.328Zm-6.2-8.138a.608.608,0,0,0-.6.608v6.2a.6.6,0,0,0,.6.6h6.2a.6.6,0,0,0,.615-.6v-6.2a.608.608,0,0,0-.615-.608Z" transform="translate(-303.876)"/></g></svg>

react-ui/src/icons/public-mirror-tab.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.239" height="14.266" viewBox="0 0 14.239 14.266" fill="currentColor"><g transform="translate(59 -12320.6)"><path class="a" d="M325.069,355.086a6.46,6.46,0,0,1-4.983-2.344.445.445,0,1,1,.684-.57,5.573,5.573,0,0,0,7.689.869.447.447,0,0,1,.542.712A6.341,6.341,0,0,1,325.069,355.086Zm5.9-4.826a.388.388,0,0,1-.085-.006.445.445,0,0,1-.35-.526,5.641,5.641,0,0,0,.107-1.1,5.548,5.548,0,0,0-3.09-4.993.442.442,0,0,1-.2-.6.447.447,0,0,1,.6-.2,6.443,6.443,0,0,1,3.582,5.79,6.374,6.374,0,0,1-.129,1.276A.442.442,0,0,1,330.972,350.26Zm-11.926-1.389h-.016a.448.448,0,0,1-.435-.463,6.5,6.5,0,0,1,4.965-6.08.448.448,0,0,1,.214.869,5.586,5.586,0,0,0-4.272,5.242A.461.461,0,0,1,319.046,348.871Zm0,0" transform="translate(-376.902 11979.78)"/><path class="a" d="M469.186,298.366a1.783,1.783,0,1,1,1.786-1.78A1.787,1.787,0,0,1,469.186,298.366Z" transform="translate(-521.02 12025.8)"/><path class="a" d="M303.767,323a.891.891,0,1,0,.891.891A.893.893,0,0,0,303.767,323Zm-5.38,11.287a1.786,1.786,0,1,1,1.786-1.786A1.787,1.787,0,0,1,298.386,334.287Z" transform="translate(-355.6 11998.488)"/><path class="a" d="M325.891,568.795a.892.892,0,1,0,.891.892A.893.893,0,0,0,325.891,568.795Zm10.666,2.678a1.786,1.786,0,1,1,1.786-1.786A1.787,1.787,0,0,1,336.558,571.472Z" transform="translate(-383.105 11761.302)"/><path class="a" d="M664.492,596.3a.891.891,0,1,0,.891.891A.893.893,0,0,0,664.492,596.3Z" transform="translate(-711.039 11733.797)"/></g></svg>

react-ui/src/icons/refresh-btn.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.34" height="14.34" viewBox="0 0 14.34 14.34"><defs><style>.a{fill:#1664ff;}</style></defs><path class="a" d="M7.17,0a7.17,7.17,0,1,0,7.17,7.17.664.664,0,1,0-1.328,0A5.894,5.894,0,0,1,7.17,13.012,5.894,5.894,0,0,1,1.328,7.17,5.894,5.894,0,0,1,7.17,1.328a4.9,4.9,0,0,1,3.054.929V2.39h0l-.664.8c-.266.266,0,.8.4.8l3.054.133c.266,0,.531-.4.531-.664L12.614.531A.515.515,0,0,0,11.685.4l-.531.8A7.026,7.026,0,0,0,7.17,0Z"/></svg>

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

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="17" viewBox="0 0 17 17" fill="currentColor"><defs><style>.a{fill:#fff;stroke:#1431b3;}.b{clip-path:url(#a);}.c,.d{}.c{opacity:0.21;}</style><clipPath id="a"><rect class="a" width="17" height="17" transform="translate(1607 208)"/></clipPath></defs><g class="b" transform="translate(-1607 -208)"><g transform="translate(-0.136 -0.214)"><rect class="c" width="4.75" height="8.011" rx="2" transform="translate(1617.532 209.427)"/><g transform="translate(1511.991 145.627)"><path class="d" d="M282,256.622a.524.524,0,0,0-.522-.522h-6.657a.522.522,0,0,0,0,1.044h6.657A.524.524,0,0,0,282,256.622Zm-7.179,2.6a.522.522,0,0,0,0,1.044h3.109a.522.522,0,0,0,0-1.044Zm7.487,5.349a.464.464,0,0,0-.112-.085,2.565,2.565,0,0,0,.467-1.479,2.631,2.631,0,1,0-2.631,2.6,2.649,2.649,0,0,0,1.443-.425.521.521,0,0,0,.094.13l1.355,1.355a.522.522,0,0,0,.739-.739Zm-2.276.01a1.573,1.573,0,1,1,1.594-1.573A1.584,1.584,0,0,1,280.033,264.581Z" transform="translate(-174.416 -189.172)"/><path class="d" d="M104.819,77.329h-5.8a1.044,1.044,0,0,1-1.041-1.041V65.9a1.044,1.044,0,0,1,1.041-1.041h8.9a1.044,1.044,0,0,1,1.041,1.041v5.18h0v0a.524.524,0,0,0,1.048,0c0-.02,0-.037,0-.057V65.882c0-1.145-.449-2.082-1.594-2.082H99.082A2.089,2.089,0,0,0,97,65.882V76.291a2.089,2.089,0,0,0,2.082,2.082h5.73a.522.522,0,0,0,.007-1.044Z" transform="translate(0 0)"/><path class="d" d="M832.7,607.722a.524.524,0,1,0,.524-.522A.523.523,0,0,0,832.7,607.722Z" transform="translate(-723.731 -534.559)"/></g></g></g></svg>

react-ui/src/icons/刷新.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14.34" height="14.34" viewBox="0 0 14.34 14.34"><defs><style>.a{fill:#1664ff;}</style></defs><path class="a" d="M7.17,0a7.17,7.17,0,1,0,7.17,7.17.664.664,0,1,0-1.328,0A5.894,5.894,0,0,1,7.17,13.012,5.894,5.894,0,0,1,1.328,7.17,5.894,5.894,0,0,1,7.17,1.328a4.9,4.9,0,0,1,3.054.929V2.39h0l-.664.8c-.266.266,0,.8.4.8l3.054.133c.266,0,.531-.4.531-.664L12.614.531A.515.515,0,0,0,11.685.4l-.531.8A7.026,7.026,0,0,0,7.17,0Z"/></svg>

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

@@ -2,12 +2,13 @@
   height: 100%;
   background-color: #f9fafb;
   &__tabs-container {
-    height: 59px;
+    height: 49px;
+    padding-left: 27px;
     background-image: url('../../assets/img/mirror-tabs-bg.png');
   }
 
   &__content {
-    height: calc(100% - 69px);
+    height: calc(100% - 59px);
     margin-top: 10px;
     padding: 20px 30px 0;
     background-color: white;

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

@@ -3,29 +3,33 @@
  * @Date: 2024-04-16 13:58:08
  * @Description: 镜像列表
  */
+import { CommonTabKeys } from '@/enums';
+import { useDomSize } from '@/hooks';
 import { getMirrorListReq } from '@/services/mirror';
 import { to } from '@/utils/promise';
-import { Button, Input, Table } from 'antd';
+import { Icon } from '@umijs/max';
+import { Button, Input, Table, Tabs } from 'antd';
 import dayjs from 'dayjs';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styles from './list.less';
 
-const tabItems = [
+const mirrorTabItems = [
   {
-    key: 'Public',
+    key: CommonTabKeys.Public,
     label: '公共镜像',
+    icon: <Icon icon="local:public-mirror-tab" className="umi-local-svg" />,
   },
   {
-    key: 'Private',
+    key: CommonTabKeys.Private,
     label: '个人镜像',
+    icon: <Icon icon="local:private-mirror-tab" className="umi-local-svg" />,
   },
 ];
 
 function MirrorList() {
   const [activeTab, setActiveTab] = useState('Public');
   const [tableData, setTableData] = useState([]);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [tableHeight, setTableHeight] = useState(0);
+  const [contentRef, { height: tableHeight }] = useDomSize<HTMLDivElement>(0, 0);
   const [pagination, setPagination] = useState({
     showSizeChanger: true,
     showQuickJumper: true,
@@ -35,21 +39,7 @@ function MirrorList() {
   });
   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]);
+  }, [activeTab]);
 
   const columns = [
     {
@@ -69,6 +59,7 @@ function MirrorList() {
       dataIndex: 'description',
       key: 'description',
       width: '50%',
+      //ellipsis: true,
     },
     {
       title: '创建时间',
@@ -87,6 +78,7 @@ function MirrorList() {
           type="link"
           size="small"
           key="download"
+          icon={<Icon icon="local:view-detail" style={{ verticalAlign: '-4px' }} />}
           // onClick={(e) => downloadAlone(e, record)}
         >
           查看详情
@@ -100,7 +92,7 @@ function MirrorList() {
       page: pagination.current - 1,
       size: pagination.pageSize,
       name,
-      image_type: 1,
+      image_type: activeTab === CommonTabKeys.Public ? 1 : 0,
     };
     const [res] = await to(getMirrorListReq(params));
     if (res && res.data) {
@@ -121,12 +113,12 @@ function MirrorList() {
   return (
     <div className={styles['mirror-list']}>
       <div className={styles['mirror-list__tabs-container']}>
-        {/* <Tabs
+        <Tabs
           activeKey={activeTab}
-          items={tabItems}
+          items={mirrorTabItems}
           onChange={setActiveTab}
           className={styles['model-tabs']}
-        /> */}
+        />
       </div>
       <div className={styles['mirror-list__content']}>
         <div className={styles['mirror-list__content__filter']}>
@@ -136,13 +128,18 @@ function MirrorList() {
             onSearch={onSearch}
             style={{ width: 300 }}
           />
-          <Button type="default">刷新</Button>
+          <Button
+            type="primary"
+            icon={<Icon icon="local:refresh-btn" style={{ verticalAlign: '-2px' }} />}
+          >
+            刷新
+          </Button>
         </div>
         <div className={styles['mirror-list__content__table']} ref={contentRef}>
           <Table
             dataSource={tableData}
             columns={columns}
-            scroll={{ y: tableHeight }}
+            scroll={{ y: tableHeight - 55 - 74 }}
             pagination={pagination}
             rowKey="id"
           />

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

@@ -6,14 +6,6 @@
     .ant-tabs-tab {
       padding-top: 0;
     }
-    .ant-tabs-nav::before,
-    div > .ant-tabs-nav::before {
-      border: none;
-    }
-
-    .ant-tabs-nav {
-      margin-bottom: 0;
-    }
   }
 }
 

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

@@ -7,6 +7,7 @@
 import datasetImg from '@/assets/img/modal-select-dataset.png';
 import modelImg from '@/assets/img/modal-select-model.png';
 import KFModal from '@/components/KFModal';
+import { CommonTabKeys } from '@/enums';
 import {
   getDatasetList,
   getDatasetVersionIdList,
@@ -53,11 +54,6 @@ export type SelectorTypeInfo = {
   tabItems: TabsProps['items'];
 };
 
-enum TabItemKeys {
-  Private = 'Private', // 我的
-  Public = 'Public', // 公开
-}
-
 export const selectorTypeData: Record<ResourceSelectorTypeValues, SelectorTypeInfo> = {
   Model: {
     getList: getModelList,
@@ -69,11 +65,11 @@ export const selectorTypeData: Record<ResourceSelectorTypeValues, SelectorTypeIn
     fileReqParamKey: 'models_id',
     tabItems: [
       {
-        key: TabItemKeys.Private,
+        key: CommonTabKeys.Private,
         label: '我的模型',
       },
       {
-        key: TabItemKeys.Public,
+        key: CommonTabKeys.Public,
         label: '公开模型',
       },
     ],
@@ -88,11 +84,11 @@ export const selectorTypeData: Record<ResourceSelectorTypeValues, SelectorTypeIn
     fileReqParamKey: 'dataset_id',
     tabItems: [
       {
-        key: TabItemKeys.Private,
+        key: CommonTabKeys.Private,
         label: '我的数据集',
       },
       {
-        key: TabItemKeys.Public,
+        key: CommonTabKeys.Public,
         label: '公开数据集',
       },
     ],
@@ -104,14 +100,14 @@ type ResourceSelectorResponse = {
   name: string; // 数据集或者模型 name
   version: string; // 数据集或者模型版本
   path: string; // 数据集或者模型版本路径
-  activeTab: TabItemKeys; // 是我的还是公开的
+  activeTab: CommonTabKeys; // 是我的还是公开的
 };
 
 interface ResourceSelectorModalProps extends Omit<ModalProps, 'onOk'> {
   type: ResourceSelectorType; // 模型 | 数据集
   defaultExpandedKeys: React.Key[];
   defaultCheckedKeys: React.Key[];
-  defaultActiveTab: TabItemKeys;
+  defaultActiveTab: CommonTabKeys;
   onOk?: (params: ResourceSelectorResponse | null) => void;
 }
 
@@ -165,7 +161,7 @@ function ResourceSelectorModal({
   type,
   defaultExpandedKeys = [],
   defaultCheckedKeys = [],
-  defaultActiveTab = TabItemKeys.Private,
+  defaultActiveTab = CommonTabKeys.Private,
   onOk,
   ...rest
 }: ResourceSelectorModalProps) {
@@ -201,7 +197,7 @@ function ResourceSelectorModal({
 
   // 获取数据集或模型列表
   const getTreeData = async () => {
-    const available_range = activeTab === TabItemKeys.Private ? '0' : '1';
+    const available_range = activeTab === CommonTabKeys.Private ? '0' : '1';
     const params = {
       page: 0,
       size: 200,
@@ -341,7 +337,7 @@ function ResourceSelectorModal({
         name,
         path: versionPath,
         version,
-        activeTab: activeTab as TabItemKeys,
+        activeTab: activeTab as CommonTabKeys,
       };
       onOk?.(res);
     } else {

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

@@ -1,6 +1,6 @@
 import { ReactComponent as ParameterIcon } from '@/assets/svg/parameter.svg';
 import { ReactComponent as SaveAndReturn } from '@/assets/svg/save--return.svg';
-import { useAntdModal } from '@/hooks';
+import { useVisible } from '@/hooks';
 import { getWorkflowById, saveWorkflow } from '@/services/pipeline/index.js';
 import { to } from '@/utils/promise';
 import { SaveOutlined } from '@ant-design/icons';