feat: 完善TimeLineList card模式

src/components/TimeLineList/index.less

@@ -2,9 +2,6 @@
   .time-item-content {
     @apply w-full w-full;
     .time-item-label {
-      height: 40px;
-      min-width: 120px;
-
       .time-item-label-forward {
         @apply text-xl text-black text-opacity-80 font-medium;
       }
@@ -28,6 +25,8 @@
   .time-item-has-line {
     @apply flex flex-nowrap relative;
     .time-item-label-has-line {
+      height: 40px;
+      min-width: 120px;
       @apply flex justify-center items-center;
     }
     .time-item-render-has-line {
@@ -44,23 +43,22 @@
     }
   }
   .time-item-has-card {
-    @apply flex flex-col relative pb-8;
+    @apply flex flex-col relative;
     .time-item-label-has-card {
       @apply flex justify-start items-center;
     }
-
-    .time-item-render-has-card {
-      @apply my-4 ml-0;
+    &.time-item-last {
+      @apply mb-8;
     }
-    &::after {
-      content: ' ';
+    .time-item-label-tail {
       position: absolute;
       width: 100%;
-      bottom: 0;
+      height: 1px;
+      bottom: -16px;
       border-bottom: 2px solid rgba(0, 0, 0, 0.1);
     }
-    &:not(:first-child) {
-      @apply pt-8;
+    .time-item-render-has-card {
+      @apply my-4 ml-0;
     }
   }
 }

src/components/TimeLineList/index.tsx

@@ -107,7 +107,11 @@ function TimeLineList<T>({
         if (itemTime && currentTime) {
           const renderTime = currentTime.diff(itemTime, 'day')
           return (
-            <div key={item.id} className="time-item-content time-item-has-card">
+            <div
+              key={item.id}
+              className={classNames('time-item-content time-item-has-card', {
+                'time-item-last': t.length - 1 === i
+              })}>
               <div className="time-item-label time-item-label-has-card">
                 <div
                   className={classNames('time-item-label-base', {
@@ -117,6 +121,7 @@ function TimeLineList<T>({
                 </div>
               </div>
               <div className="time-item-render time-item-render-has-card">{renderItem?.(item, i)}</div>
+              <div className={classNames({ 'time-item-label-tail': t.length - 1 === i })} />
             </div>
           )
         }

src/pages/Customer/Test/index.tsx

@@ -76,21 +76,15 @@ const Test = () => {
   ]
   return (
     <div className="h-full w-full flex flex-row overflow-scroll">
-      <div className="w-300px h-400px">
+      <div className="w-500px h-400px">
         <TimeLineList<LogItem>
           mode="line"
           dataSource={dataSource}
-          renderItem={() => <div className="w-200px h-150px bg-yellow-400" />}
+          renderItem={() => <div className="w-full h-150px bg-yellow-400 mb-4" />}
         />
       </div>
-      <div className="w-300px h-400px">
-        <TimeLineList<LogItem>
-          mode="line"
-          dataSource={dataSource}
-          // renderItem={() => <div className="w-200px h-150px bg-yellow-400" />}
-        />
-      </div>
-      <div className="w-300px h-400px">
+
+      <div className="w-500px h-400px ml-9">
         <TimeLineList<LogItem>
           mode="card"
           dataSource={dataSource1}