feat: 完成选择代码配置

react-ui/src/pages/CodeConfig/components/CodeConfigItem/index.less

@@ -14,35 +14,43 @@
   }
 
   &__name {
-    position: relative;
-    display: inline-block;
-    height: 24px;
-    margin: 0 10px 0 0 !important;
+    margin-right: 10px;
+    margin-bottom: 0 !important;
     color: @text-color;
     font-size: 16px;
   }
 
   &__tag {
-    padding: 4px;
-    color: @primary-color;
+    padding: 2px 11px;
     font-size: 12px;
-    background-color: .addAlpha(@primary-color, 0.1) [];
-    border-radius: 4px;
+    border-radius: 1000px;
+
+    &--public {
+      color: @primary-color;
+      background-color: .addAlpha(@primary-color, 0.08) [];
+      border-color: .addAlpha(@primary-color, 0.5) [];
+    }
+
+    &--private {
+      color: @warning-color;
+      background-color: .addAlpha(@warning-color, 0.08) [];
+      border-color: .addAlpha(@warning-color, 0.5) [];
+    }
   }
 
   &__url {
+    margin-bottom: 10px;
     color: @text-color-secondary;
     font-size: 14px;
   }
 
-  &__description {
-    height: 44px;
+  &__branch {
     margin-bottom: 20px;
-    color: @text-color-secondary;
+    color: @text-color-tertiary;
     font-size: 14px;
-    .multiLine(2);
   }
 
+  &__user,
   &__time {
     display: flex;
     flex: 0 1 content;
@@ -55,21 +63,9 @@
   &:hover {
     border-color: @primary-color;
     box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
-
-    .resource-item__name {
-      color: @primary-color;
-    }
   }
-}
 
-.resource-item__name {
-  &::after {
-    position: absolute;
-    top: 14px;
-    left: 0;
-    width: 100%;
-    height: 6px;
-    background: linear-gradient(to right, rgba(22, 100, 255, 0.3) 0, rgba(22, 100, 255, 0) 100%);
-    content: '';
+  &:hover &__name {
+    color: @primary-color;
   }
 }

react-ui/src/pages/CodeConfig/components/CodeConfigItem/index.tsx

@@ -5,6 +5,7 @@ import { AvailableRange } from '@/enums';
 import { type CodeConfigData } from '@/pages/CodeConfig/List';
 import { formatDate } from '@/utils/date';
 import { Button, Flex, Typography } from 'antd';
+import classNames from 'classnames';
 import styles from './index.less';
 
 type CodeConfigItemProps = {
@@ -24,10 +25,16 @@ function CodeConfigItem({ item, onClick, onEdit, onRemove }: CodeConfigItemProps
         >
           {item.code_repo_name}
         </Typography.Paragraph>
-        <div className={styles['code-config-item__tag']}>
+        <div
+          className={classNames(
+            styles['code-config-item__tag'],
+            item.code_repo_vis === AvailableRange.Public
+              ? styles['code-config-item__tag--public']
+              : styles['code-config-item__tag--private'],
+          )}
+        >
           {item.code_repo_vis === AvailableRange.Public ? '公开' : '私有'}
         </div>
-
         <Button
           type="text"
           shape="circle"
@@ -54,15 +61,12 @@ function CodeConfigItem({ item, onClick, onEdit, onRemove }: CodeConfigItemProps
       <Typography.Paragraph
         className={styles['code-config-item__url']}
         ellipsis={{ tooltip: item.git_url }}
-        style={{ marginBottom: '8px' }}
       >
         {item.git_url}
       </Typography.Paragraph>
-      <div className={styles['code-config-item__url']} style={{ marginBottom: '20px' }}>
-        {item.git_branch}
-      </div>
+      <div className={styles['code-config-item__branch']}>{item.git_branch}</div>
       <Flex justify="space-between">
-        <div className={styles['code-config-item__time']}>
+        <div className={styles['code-config-item__user']}>
           <img
             style={{ width: '17px', marginRight: '6px' }}
             src={creatByImg}

react-ui/src/pages/Experiment/components/ExportModelModal/index.tsx

@@ -10,6 +10,7 @@ import {
 import { to } from '@/utils/promise';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Form, Input, ModalProps, Select } from 'antd';
+import { pick } from 'lodash';
 import { useEffect, useState } from 'react';
 import styles from './index.less';
 
@@ -85,7 +86,11 @@ function ExportModelModal({ path, onOk, ...rest }: ExportModelModalProps) {
 
   // 获取模型版本列表
   const getModelVersions = async (id: number) => {
-    const [res] = await to(getModelVersionList(id));
+    const model = models.find((item) => item.id === id);
+    if (!model) {
+      return;
+    }
+    const [res] = await to(getModelVersionList(pick(model, ['identifier', 'owner'])));
     if (res && res.data) {
       setVersions(res.data);
     }

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

@@ -1,68 +1,56 @@
 .code-config-item {
   position: relative;
-  padding: 20px;
-  background: white;
-  border: 1px solid #eaeaea;
+  width: calc(25% - 7.5px);
+  padding: 15px;
+  background-color: .addAlpha(@primary-color, 0.04) [];
+  border: 1px solid transparent;
   border-radius: 4px;
   cursor: pointer;
 
   &__name {
-    position: relative;
-    display: inline-block;
-    height: 24px;
-    margin: 0 10px 0 0 !important;
+    margin-right: 8px;
+    margin-bottom: 0 !important;
     color: @text-color;
-    font-size: 16px;
+    font-size: 14px;
   }
 
   &__tag {
-    padding: 4px;
-    color: @primary-color;
+    flex: none;
+    padding: 2px 11px;
     font-size: 12px;
-    background-color: .addAlpha(@primary-color, 0.1) [];
-    border-radius: 4px;
-  }
+    border-radius: 1000px;
 
-  &__url {
-    color: @text-color-secondary;
-    font-size: 14px;
+    &--public {
+      color: @primary-color;
+      background-color: .addAlpha(@primary-color, 0.08) [];
+      border-color: .addAlpha(@primary-color, 0.5) [];
+    }
+
+    &--private {
+      color: @warning-color;
+      background-color: .addAlpha(@warning-color, 0.08) [];
+      border-color: .addAlpha(@warning-color, 0.5) [];
+    }
   }
 
-  &__description {
-    height: 44px;
-    margin-bottom: 20px;
+  &__url {
+    height: 40px;
+    margin-bottom: 10px !important;
     color: @text-color-secondary;
-    font-size: 14px;
-    .multiLine(2);
+    font-size: 13px;
   }
 
-  &__time {
-    display: flex;
-    flex: 0 1 content;
-    align-items: center;
-    width: 100%;
-    color: #808080;
-    font-size: 13px;
+  &__branch {
+    color: @text-color-tertiary;
+    font-size: 12px;
   }
 
   &:hover {
     border-color: @primary-color;
     box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
-
-    .resource-item__name {
-      color: @primary-color;
-    }
   }
-}
 
-.resource-item__name {
-  &::after {
-    position: absolute;
-    top: 14px;
-    left: 0;
-    width: 100%;
-    height: 6px;
-    background: linear-gradient(to right, rgba(22, 100, 255, 0.3) 0, rgba(22, 100, 255, 0) 100%);
-    content: '';
+  &:hover &__name {
+    color: @primary-color;
   }
 }

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

@@ -1,6 +1,7 @@
 import { AvailableRange } from '@/enums';
 import { type CodeConfigData } from '@/pages/CodeConfig/List';
 import { Flex, Typography } from 'antd';
+import classNames from 'classnames';
 import styles from './index.less';
 
 type CodeConfigItemProps = {
@@ -11,27 +12,31 @@ type CodeConfigItemProps = {
 function CodeConfigItem({ item, onClick }: CodeConfigItemProps) {
   return (
     <div className={styles['code-config-item']} onClick={() => onClick?.(item)}>
-      <Flex justify="space-between" align="center" style={{ marginBottom: '20px', height: '32px' }}>
+      <Flex justify="space-between" align="center" style={{ marginBottom: '15px' }}>
         <Typography.Paragraph
           className={styles['code-config-item__name']}
           ellipsis={{ tooltip: item.code_repo_name }}
         >
           {item.code_repo_name}
         </Typography.Paragraph>
-        <div className={styles['code-config-item__tag']}>
+        <div
+          className={classNames(
+            styles['code-config-item__tag'],
+            item.code_repo_vis === AvailableRange.Public
+              ? styles['code-config-item__tag--public']
+              : styles['code-config-item__tag--private'],
+          )}
+        >
           {item.code_repo_vis === AvailableRange.Public ? '公开' : '私有'}
         </div>
       </Flex>
       <Typography.Paragraph
         className={styles['code-config-item__url']}
-        ellipsis={{ tooltip: item.git_url }}
-        style={{ marginBottom: '8px' }}
+        ellipsis={{ rows: 2, tooltip: item.git_url }}
       >
         {item.git_url}
       </Typography.Paragraph>
-      <div className={styles['code-config-item__url']} style={{ marginBottom: '20px' }}>
-        {item.git_branch}
-      </div>
+      <div className={styles['code-config-item__branch']}>{item.git_branch}</div>
     </div>
   );
 }

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

@@ -2,28 +2,53 @@
   width: 100%;
   height: 100%;
 
+  &__search {
+    width: 100%;
+  }
+
   :global {
-    .ant-input-affix-wrapper .ant-input-prefix {
-      margin-inline-end: 12px;
+    .ant-input-affix-wrapper {
+      border-radius: 23px !important;
+      .ant-input-prefix {
+        margin-inline-end: 12px;
+      }
+      .ant-input-suffix {
+        margin-inline-end: 12px;
+      }
+      .ant-input-clear-icon {
+        font-size: 16px;
+      }
     }
 
     .ant-pagination {
-      text-align: right;
+      text-align: center;
     }
 
     .ant-input-group-addon {
       display: none;
     }
+
+    .ant-pagination {
+      .ant-select-single {
+        height: 32px !important;
+      }
+    }
   }
 
   &__content {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 20px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 10px;
     width: 100%;
-    margin-top: 30px;
+    max-height: 50vh;
+    margin-top: 24px;
     margin-bottom: 30px;
     overflow-x: hidden;
     overflow-y: auto;
   }
+
+  &__empty {
+    padding-top: 40px;
+  }
 }

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

@@ -8,6 +8,7 @@ import KFModal from '@/components/KFModal';
 import { type CodeConfigData } from '@/pages/CodeConfig/List';
 import { getCodeConfigListReq } from '@/services/codeConfig';
 import { to } from '@/utils/promise';
+import { Icon } from '@umijs/max';
 import type { ModalProps, PaginationProps } from 'antd';
 import { Empty, Input, Pagination } from 'antd';
 import { useEffect, useState } from 'react';
@@ -74,15 +75,17 @@ function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
     >
       <div className={styles['code-selector']}>
         <Input.Search
+          className={styles['code-selector__search']}
           placeholder="按代码仓库名称筛选"
           allowClear
           onSearch={handleSearch}
-          style={{
-            width: '100%',
-          }}
+          size="large"
           onChange={(e) => setInputText(e.target.value)}
           suffix={null}
           value={inputText}
+          prefix={
+            <Icon icon="local:magnifying-glass" style={{ marginLeft: '10px', marginTop: '2px' }} />
+          }
         />
         {dataList?.length !== 0 ? (
           <>
@@ -103,7 +106,7 @@ function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
           </>
         ) : (
           <div className={styles['code-selector__empty']}>
-            <Empty></Empty>
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
           </div>
         )}
       </div>

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

@@ -50,10 +50,12 @@
     border-radius: 8px;
 
     &__title {
+      height: 46px;
       margin-bottom: 15px;
       padding: 3px 0 6px;
       color: @text-color;
       font-size: @font-size;
+      line-height: 46px;
       border-bottom: 1px solid @border-color-secondary;
     }
     &__files {

react-ui/src/pages/Workspace/components/UserSpace/index.less

@@ -48,7 +48,7 @@
     &__count {
       width: 24px;
       height: 24px;
-      color: #8a8a8a;
+      color: @text-color-tertiary;
       font-size: 12px;
       line-height: 24px;
       text-align: center;

react-ui/src/styles/theme.less

@@ -11,6 +11,7 @@
 @background-color: #f9fafb; // 页面背景颜色
 @text-color: #1d1d20;
 @text-color-secondary: #575757;
+@text-color-tertiary: #8a8a8a;
 @success-color: #6ac21d;
 @error-color: #c73131;
 @warning-color: #f98e1b;
@@ -18,6 +19,7 @@
 @pending-color: #ecb934;
 @underline-color: #5d93ff;
 
+@border-color-base: #eaeaea;
 @border-color: rgba(22, 100, 255, 0.3);
 @border-color-secondary: rgba(22, 100, 255, 0.1);
 @background-color-primary: rgba(22, 100, 255, 0.03);
@@ -25,7 +27,7 @@
 
 @heading-color: rgba(0, 0, 0, 0.85);
 @input-icon-hover-color: rgba(0, 0, 0, 0.85);
-@border-color-base: #d9d9d9;
+
 @link-hover-color: #69b1ff;
 @sider-background-color: #f2f5f7;
 
@@ -74,6 +76,7 @@
   warningColor: @warning-color;
   textColor: @text-color;
   textColorSecondary: @text-color-secondary;
+  textColorTertiary: @text-color-tertiary;
   fontSize: @font-size;
   fontSizeTitle: @font-size-title;
   fontSizeContent: @font-size-content;