feat: 完成代码配置结构和样式修改

react-ui/src/pages/CodeConfig/List/index.less

@@ -1,47 +1,46 @@
-.code-config-list {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
+.code-config {
   height: 100%;
-  height: 100%;
-  padding: 20px 0;
-  background: white;
-  box-shadow: 0px 3px 6px rgba(146, 146, 146, 0.09);
 
-  &__header {
+  &__list {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 32px;
-    margin-bottom: 30px;
-    padding: 0 30px;
-    color: @text-color;
-    font-size: 15px;
-  }
+    flex-direction: column;
+    height: calc(100% - 60px);
+    margin-top: 10px;
+    padding: 30px 30px 0;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0px 2px 12px rgba(180, 182, 191, 0.09);
 
-  &__content {
-    display: flex;
-    flex: 1;
-    flex-wrap: wrap;
-    gap: 20px;
-    align-content: flex-start;
-    width: 100%;
-    margin-bottom: 30px;
-    padding: 0 30px;
-    overflow-y: auto;
-  }
+    &__header {
+      display: flex;
+      align-items: center;
+      height: 32px;
+      color: @text-color;
+      font-size: 15px;
+    }
 
-  &__empty {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: center;
-  }
+    &__content {
+      display: flex;
+      flex: 1 1 0%;
+      flex-wrap: wrap;
+      gap: 20px;
+      align-content: flex-start;
+      width: 100%;
+      margin: 25px 0;
+      overflow-y: auto;
+    }
+
+    &__empty {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+    }
 
-  :global {
-    .ant-pagination {
-      margin-right: 30px;
-      text-align: right;
+    :global {
+      .ant-pagination {
+        margin-bottom: 25px;
+      }
     }
   }
 }

react-ui/src/pages/CodeConfig/List/index.tsx

@@ -1,5 +1,12 @@
+/*
+ * @Author: 赵伟
+ * @Date: 2024-10-10 09:55:12
+ * @Description: 代码配置
+ */
+
 import KFEmpty, { EmptyType } from '@/components/KFEmpty';
 import KFIcon from '@/components/KFIcon';
+import PageTitle from '@/components/PageTitle';
 import { deleteCodeConfigReq, getCodeConfigListReq } from '@/services/codeConfig';
 import { getGitUrl } from '@/utils';
 import { openAntdModal } from '@/utils/modal';
@@ -127,64 +134,69 @@ function CodeConfigList() {
   };
 
   return (
-    <div className={styles['code-config-list']}>
-      <div className={styles['code-config-list__header']}>
-        <span>数据总数：{total} 个</span>
-        <div>
+    <div className={styles['code-config']}>
+      <PageTitle title="代码配置"></PageTitle>
+      <div className={styles['code-config__list']}>
+        <div className={styles['code-config__list__header']}>
+          <span>数据总数：{total} 个</span>
           <Input.Search
             placeholder="按代码仓库名称筛选"
             allowClear
             onSearch={handleSearch}
             style={{
               width: 300,
+              marginRight: '20px',
+              marginLeft: 'auto',
             }}
             onChange={(e) => setInputText(e.target.value)}
             value={inputText}
           />
           <Button
             type="default"
-            style={{ marginLeft: '20px' }}
+            style={{ marginRight: 0 }}
             onClick={createCodeConfig}
             icon={<KFIcon type="icon-xinjian2" />}
           >
             新建代码配置
           </Button>
         </div>
-      </div>
-      {dataList && dataList.length !== 0 && (
-        <>
-          <div className={styles['code-config-list__content']}>
-            {dataList.map((item) => (
-              <CodeConfigItem
-                item={item}
-                key={item.id}
-                onRemove={handleRemove}
-                onEdit={handleEdit}
-                onClick={handleClick}
-              />
-            ))}
-          </div>
-          <Pagination
-            total={total}
-            showSizeChanger
-            defaultPageSize={20}
-            pageSizeOptions={[20, 40, 60, 80, 100]}
-            showQuickJumper
-            onChange={handlePageChange}
-            {...pagination}
+
+        {dataList && dataList.length !== 0 && (
+          <>
+            <div className={styles['code-config__list__content']}>
+              {dataList.map((item) => (
+                <CodeConfigItem
+                  item={item}
+                  key={item.id}
+                  onRemove={handleRemove}
+                  onEdit={handleEdit}
+                  onClick={handleClick}
+                />
+              ))}
+            </div>
+            <Pagination
+              align="end"
+              total={total}
+              showSizeChanger
+              defaultPageSize={20}
+              pageSizeOptions={[20, 40, 60, 80, 100]}
+              showQuickJumper
+              onChange={handlePageChange}
+              {...pagination}
+            />
+          </>
+        )}
+        {dataList && dataList.length === 0 && (
+          <KFEmpty
+            className={styles['code-config__list__empty']}
+            type={EmptyType.NoData}
+            title="暂无数据"
+            content={'很抱歉，没有搜索到您想要的内容\n建议刷新试试'}
+            hasFooter={true}
+            onRefresh={getDataList}
           />
-        </>
-      )}
-      {dataList && dataList.length === 0 && (
-        <KFEmpty
-          className={styles['code-config-list__empty']}
-          type={EmptyType.NoData}
-          title="暂无数据"
-          content={'很抱歉，没有搜索到您想要的内容\n建议刷新试试'}
-          hasFooter={true}
-          onRefresh={getDataList}
-        />
-      )}
+        )}
+      </div>
     </div>
   );
 }

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

@@ -2,50 +2,96 @@
   position: relative;
   width: calc(25% - 15px);
   padding: 20px;
-  background: white;
-  border: 1px solid #eaeaea;
+  background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
+  border: 2px solid white;
   border-radius: 4px;
+  box-shadow: 0px 3px 10px rgba(164, 169, 181, 0.13);
   cursor: pointer;
 
+  &:hover {
+    border-color: @primary-color;
+  }
+
   @media screen and (max-width: 1860px) {
     & {
       width: calc(33.33% - 13.33px);
     }
   }
 
-  &__name {
+  &__icon {
+    flex: none;
+    width: 16px;
+    height: 16px;
     margin-right: 10px;
+  }
+
+  &__name {
+    position: relative;
+    margin-right: 20px;
     margin-bottom: 0 !important;
     color: @text-color;
+    font-weight: 500;
     font-size: 16px;
+
+    &::after {
+      position: absolute;
+      top: 14px;
+      left: 0;
+      width: 100%;
+      height: 6px;
+      background: linear-gradient(
+        to right,
+        .addAlpha(@primary-color, 0.4) [] 0,
+        .addAlpha(@primary-color, 0) [] 100%
+      );
+      content: '';
+    }
+  }
+
+  &:hover &__name {
+    color: @primary-color;
   }
 
   &__tag {
-    padding: 2px 11px;
-    font-size: 12px;
-    border-radius: 1000px;
+    flex: none;
+    padding: 1px 10px;
+    font-size: 13px;
+    border-radius: 2px;
 
     &--public {
       color: @primary-color;
-      background-color: .addAlpha(@primary-color, 0.08) [];
+      background-color: .addAlpha(@primary-color, 0.1) [];
       border-color: .addAlpha(@primary-color, 0.5) [];
     }
 
     &--private {
       color: @warning-color;
-      background-color: .addAlpha(@warning-color, 0.08) [];
+      background-color: .addAlpha(@warning-color, 0.1) [];
       border-color: .addAlpha(@warning-color, 0.5) [];
     }
   }
 
+  :global {
+    .ant-btn {
+      flex: none;
+      color: #808080;
+    }
+  }
+
+  &__url-box {
+    margin-bottom: 15px;
+    padding: 14px;
+    background-color: .addAlpha(@primary-color, 0.03) [];
+    border-radius: 4px;
+  }
+
   &__url {
-    margin-bottom: 10px !important;
+    margin-bottom: 15px !important;
     color: @text-color-secondary;
     font-size: 14px;
   }
 
   &__branch {
-    margin-bottom: 20px;
     color: @text-color-tertiary;
     font-size: 14px;
   }
@@ -59,13 +105,4 @@
     color: #808080;
     font-size: 13px;
   }
-
-  &:hover {
-    border-color: @primary-color;
-    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
-  }
-
-  &:hover &__name {
-    color: @primary-color;
-  }
 }

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

@@ -19,6 +19,11 @@ function CodeConfigItem({ item, onClick, onEdit, onRemove }: CodeConfigItemProps
   return (
     <div className={styles['code-config-item']} onClick={() => onClick?.(item)}>
       <Flex justify="space-between" align="center" style={{ marginBottom: '20px', height: '32px' }}>
+        <img
+          className={styles['code-config-item__icon']}
+          src={require('@/assets/img/code-name-icon.png')}
+          alt=""
+        />
         <Typography.Paragraph
           className={styles['code-config-item__name']}
           ellipsis={{ tooltip: item.code_repo_name }}
@@ -58,17 +63,19 @@ function CodeConfigItem({ item, onClick, onEdit, onRemove }: CodeConfigItemProps
           <KFIcon type="icon-shanchu" font={17} />
         </Button>
       </Flex>
-      <Typography.Paragraph
-        className={styles['code-config-item__url']}
-        ellipsis={{ tooltip: item.git_url }}
-      >
-        {item.git_url}
-      </Typography.Paragraph>
-      <div className={styles['code-config-item__branch']}>{item.git_branch}</div>
+      <div className={styles['code-config-item__url-box']}>
+        <Typography.Paragraph
+          className={styles['code-config-item__url']}
+          ellipsis={{ tooltip: item.git_url }}
+        >
+          {item.git_url}
+        </Typography.Paragraph>
+        <div className={styles['code-config-item__branch']}>{item.git_branch}</div>
+      </div>
       <Flex justify="space-between">
         <div className={styles['code-config-item__user']}>
           <img
-            style={{ width: '17px', marginRight: '6px' }}
+            style={{ width: '16px', marginRight: '6px' }}
             src={creatByImg}
             alt=""
             draggable={false}

react-ui/src/pages/Dataset/components/ResourceItem/index.less

@@ -13,6 +13,11 @@
     }
   }
 
+  &:hover {
+    border-color: @primary-color;
+    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
+  }
+
   &__name {
     position: relative;
     display: inline-block;
@@ -20,6 +25,24 @@
     margin: 0 10px 0 0 !important;
     color: @text-color;
     font-size: 16px;
+
+    &::after {
+      position: absolute;
+      top: 14px;
+      left: 0;
+      width: 100%;
+      height: 6px;
+      background: linear-gradient(
+        to right,
+        .addAlpha(@primary-color, 0.3) [] 0,
+        .addAlpha(@primary-color, 0) [] 100%
+      );
+      content: '';
+    }
+  }
+
+  &:hover &__name {
+    color: @primary-color;
   }
 
   &__description {
@@ -37,25 +60,4 @@
     color: #808080;
     font-size: 13px;
   }
-
-  &: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: '';
-  }
 }

react-ui/src/pages/Dataset/components/ResourceList/index.less

@@ -33,7 +33,6 @@
   :global {
     .ant-pagination {
       margin-right: 30px;
-      text-align: right;
     }
   }
 

react-ui/src/pages/Dataset/components/ResourceList/index.tsx

@@ -204,6 +204,7 @@ function ResourceList(
             ))}
           </div>
           <Pagination
+            align="end"
             total={total}
             showSizeChanger
             defaultPageSize={20}

react-ui/src/pages/DevelopmentEnvironment/List/index.tsx

@@ -152,7 +152,12 @@ function EditorList() {
   };
 
   // 分页切换
-  const handleTableChange: TableProps['onChange'] = (pagination, _filters, _sorter, { action }) => {
+  const handleTableChange: TableProps<EditorData>['onChange'] = (
+    pagination,
+    _filters,
+    _sorter,
+    { action },
+  ) => {
     if (action === 'paginate') {
       setPagination(pagination);
     }

react-ui/src/pages/Experiment/components/ExperimentInstance/index.less

@@ -4,7 +4,7 @@
   width: 100%;
   padding: 0 0 0 33px;
   color: @text-color;
-  font-size: 15px;
+  font-size: 14px;
 
   & > div {
     padding: 0 16px;

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

@@ -129,7 +129,8 @@ function ExperimentInstanceComponent({
           {selectedIns.length > 0 && (
             <Button
               style={{ position: 'absolute', right: '0' }}
-              type="primary"
+              color="primary"
+              variant="filled"
               size="small"
               onClick={handleDeleteAll}
               icon={<KFIcon type="icon-shanchu" />}

react-ui/src/pages/Experiment/components/TensorBoardStatus/index.less

@@ -5,7 +5,7 @@
 
   &__label {
     color: rgba(29, 29, 32, 0.75);
-    font-size: 15px;
+    font-size: 14px;
 
     &--running {
       color: @success-color;

react-ui/src/pages/Mirror/Info/index.tsx

@@ -124,7 +124,12 @@ function MirrorInfo() {
   };
 
   // 分页切换
-  const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter, { action }) => {
+  const handleTableChange: TableProps<MirrorVersionData>['onChange'] = (
+    pagination,
+    _filters,
+    _sorter,
+    { action },
+  ) => {
     if (action === 'paginate') {
       setPagination(pagination);
     }

react-ui/src/pages/Mirror/List/index.tsx

@@ -155,7 +155,12 @@ function MirrorList() {
   };
 
   // 分页切换
-  const handleTableChange: TableProps['onChange'] = (pagination, filters, sorter, { action }) => {
+  const handleTableChange: TableProps<MirrorData>['onChange'] = (
+    pagination,
+    _filters,
+    _sorter,
+    { action },
+  ) => {
     if (action === 'paginate') {
       setPagination(pagination);
     }

react-ui/src/pages/ModelDeployment/List/index.tsx

@@ -176,7 +176,12 @@ function ModelDeployment() {
   };
 
   // 分页切换
-  const handleTableChange: TableProps['onChange'] = (pagination, _filters, _sorter, { action }) => {
+  const handleTableChange: TableProps<ServiceData>['onChange'] = (
+    pagination,
+    _filters,
+    _sorter,
+    { action },
+  ) => {
     if (action === 'paginate') {
       setPagination(pagination);
     }

react-ui/src/pages/ModelDeployment/components/VersionCompareModal/index.tsx

@@ -164,7 +164,9 @@ function VersionCompareModal({ version1, version2, ...rest }: CreateMirrorModalP
                   [styles['version-compare__left__text--different']]: isDifferent(key),
                 })}
               >
-                <Typography.Text ellipsis={{ tooltip: text }}>{text}</Typography.Text>
+                <Typography.Text ellipsis={{ tooltip: text }} style={{ color: 'inherit' }}>
+                  {text}
+                </Typography.Text>
               </div>
             );
           })}
@@ -180,7 +182,9 @@ function VersionCompareModal({ version1, version2, ...rest }: CreateMirrorModalP
                   [styles['version-compare__right__text--different']]: isDifferent(key),
                 })}
               >
-                <Typography.Text ellipsis={{ tooltip: text }}>{text}</Typography.Text>
+                <Typography.Text ellipsis={{ tooltip: text }} style={{ color: 'inherit' }}>
+                  {text}
+                </Typography.Text>
               </div>
             );
           })}

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

@@ -20,10 +20,6 @@
       }
     }
 
-    .ant-pagination {
-      text-align: center;
-    }
-
     .ant-input-group-addon {
       display: none;
     }

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

@@ -97,6 +97,7 @@ function CodeSelectorModal({ onOk, ...rest }: CodeSelectorModalProps) {
               ))}
             </div>
             <Pagination
+              align="center"
               total={total}
               showSizeChanger
               defaultPageSize={20}