style： 自动机器学习列表样式调整

react-ui/src/hooks/useSSE.ts

@@ -5,8 +5,9 @@ import { NodeStatus } from '@/types';
 
 export type MessageHandler = (experimentInsId: number, status: string, finishedAt: string, nodes: Record<string, NodeStatus>) => void
 export const useSSE = (experimentInsId: number, status: ExperimentStatus, name: string, namespace: string, onMessage: MessageHandler) => {
+  const isRunning = status === ExperimentStatus.Pending || status === ExperimentStatus.Running
   useEffect(() => {
-    if (status === ExperimentStatus.Pending || status === ExperimentStatus.Running) {
+    if (isRunning) {
       const { origin } = location;
       const params = encodeURIComponent(`metadata.namespace=${namespace},metadata.name=${name}`);
       const evtSource = new EventSource(
@@ -35,5 +36,5 @@ export const useSSE = (experimentInsId: number, status: ExperimentStatus, name:
       }
     }
     
-  }, [experimentInsId, status, name, namespace, onMessage]);
+  }, [experimentInsId, isRunning, name, namespace, onMessage]);
 };

react-ui/src/hooks/useServerTime.ts

@@ -17,7 +17,7 @@ export const globalGetSeverTime = async () => {
   const requestDuration = (requestEndTime - requestStartTime) / 2;
   if (res && res.data) {
     const serverDate = new Date(res.data);
-    const timeOffset = serverDate.getTime() + requestDuration - requestEndTime ;
+    const timeOffset = serverDate.getTime() + requestDuration - requestEndTime;
     globalTimeOffset = timeOffset;
     return timeOffset
   }

react-ui/src/pages/AutoML/components/ExperimentInstanceList/index.less

@@ -1,3 +1,5 @@
+@cellWidth: calc(100% + 32px + 33px - 48px - 200px - 344px);
+
 .tableExpandBox {
   display: flex;
   align-items: center;
@@ -11,22 +13,22 @@
   }
 
   .check {
-    width: calc((100% + 32px + 33px) / 5 / 2);
+    width: calc(@cellWidth * 3 / 20); // 15%
   }
 
   .index {
-    width: calc((100% + 32px + 33px) / 5 / 2);
+    width: calc(@cellWidth * 3 / 20); // 15%
   }
 
   .description {
     display: flex;
-    flex: 1;
     align-items: center;
+    width: calc(@cellWidth / 2); // 50%
   }
 
   .startTime {
     .singleLine();
-    width: 200px;
+    width: calc(@cellWidth / 5); // 20%
   }
 
   .status {

react-ui/src/pages/AutoML/components/ExperimentList/index.tsx

@@ -302,7 +302,7 @@ function ExperimentList({ type }: ExperimentListProps) {
       title: '类型',
       dataIndex: 'type',
       key: 'type',
-      width: '10%',
+      width: '15%',
       render: tableCellRender(false, TableCellValueType.Enum, {
         options: autoMLTypeOptions,
       }),
@@ -316,7 +316,7 @@ function ExperimentList({ type }: ExperimentListProps) {
       title: '实验名称',
       dataIndex: config.nameProperty,
       key: 'name',
-      width: '20%',
+      width: '30%',
       render: tableCellRender(false, TableCellValueType.Link, {
         onClick: gotoDetail,
       }),
@@ -326,13 +326,14 @@ function ExperimentList({ type }: ExperimentListProps) {
       dataIndex: config.descProperty,
       key: 'description',
       render: tableCellRender(true),
+      width: type === ExperimentListType.AutoML ? '35%' : '50%',
     },
     ...diffColumns,
     {
       title: '创建时间',
       dataIndex: 'update_time',
       key: 'update_time',
-      width: 200,
+      width: '20%',
       render: tableCellRender(false, TableCellValueType.Date),
     },
     {

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

@@ -58,5 +58,6 @@
     align-items: center;
     color: #808080;
     font-size: 13px;
+    min-width: 0;
   }
 }

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

@@ -14,6 +14,10 @@ type ResourceItemProps = {
 };
 
 function ResourceItem({ item, isPublic, onClick, onRemove }: ResourceItemProps) {
+  const timeAgo =
+    '最近更新: ' +
+    (item.update_time ? formatDate(item.update_time, 'YYYY-MM-DD') : item.time_ago ?? '');
+  const create_by = item.create_by ?? '';
   return (
     <div className={styles['resource-item']} onClick={() => onClick(item)}>
       <Flex justify="space-between" align="center" style={{ marginBottom: '20px', height: '32px' }}>
@@ -37,7 +41,7 @@ function ResourceItem({ item, isPublic, onClick, onRemove }: ResourceItemProps)
         )}
       </Flex>
       <div className={styles['resource-item__description']}>{item.description}</div>
-      <Flex justify="space-between">
+      <Flex justify="space-between" gap={'0 8px'}>
         <div className={styles['resource-item__time']}>
           <img
             style={{ width: '17px', marginRight: '6px' }}
@@ -45,14 +49,11 @@ function ResourceItem({ item, isPublic, onClick, onRemove }: ResourceItemProps)
             draggable={false}
             alt=""
           />
-          <span>{item.create_by ?? ''}</span>
+          <Typography.Text ellipsis={{ tooltip: create_by }}>{create_by}</Typography.Text>
         </div>
         <div className={styles['resource-item__time']}>
           <img style={{ width: '12px', marginRight: '5px' }} src={clock} draggable={false} alt="" />
-          <span>
-            {'最近更新: '}
-            {item.update_time ? formatDate(item.update_time, 'YYYY-MM-DD') : item.time_ago ?? ''}
-          </span>
+          <Typography.Text ellipsis={{ tooltip: timeAgo }}>{timeAgo}</Typography.Text>
         </div>
       </Flex>
     </div>

react-ui/src/pages/ModelDeployment/CreateVersion/index.less

@@ -36,6 +36,13 @@
       .ant-btn-variant-text {
         color: #565658;
       }
+
+      .anticon-question-circle {
+        margin-top: -12px;
+        margin-left: 1px !important;
+        color: @text-color-tertiary !important;
+        font-size: 12px !important;
+      }
     }
   }
 }

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

@@ -337,7 +337,11 @@ function CreateServiceVersion() {
             </Row>
             <Row gutter={8}>
               <Col span={10}>
-                <Form.Item label="代码配置" name="code_config">
+                <Form.Item
+                  label="代码配置"
+                  name="code_config"
+                  tooltip="此处代码配置为可引用的代码配置，具体代码编写指南见用户手册中服务部署模块"
+                >
                   <CodeSelect
                     placeholder="请选择代码配置"
                     canInput={false}