timeline 添加样式

Author: CatCodeMe

packages/pure/components/user/Timeline.astro

@@ -21,19 +21,22 @@ const { class: className, ...props } = Astro.props
 
   :global(.timeline-list > li) {
     margin-top: 0 !important;
-    margin-bottom: 0 !important;
     padding-inline-start: 0 !important;
   }
 
+  :global(.timeline-list > li:last-child) {
+    margin-bottom: 0 !important;
+  }
+  
   /* 为 TimelineItem 添加连接线（除了最后一个） */
-  /* 竖线对齐圆点：从当前圆点中心到下一个圆点中心 */
+  /* 竖线对齐圆点：从当前圆点底部到下一个圆点顶部 */
   :global(.timeline-list > li[data-timeline-item]:not(:last-child)::after) {
     content: '';
     position: absolute;
     left: 14px; /* ms-2 (8px) + 圆圈半径 (6px) = 14px，使竖线在圆圈中心 */
-    top: 20px; /* 从当前圆点中心开始（pt-0.5 + 圆点中心约20px） */
+    top: calc(0.125rem + 12px); /* mt-[0.125rem] (2px) + 圆圈高度 (12px) = 14px，从圆点底部开始 */
     width: 1px;
-    height: calc(100% - 20px); /* 延伸到下一个圆点中心 */
+    height: calc(100% - 14px); /* 延伸到下一个圆点顶部 */
     background-color: hsl(var(--border));
     z-index: 0;
   }
@@ -42,12 +45,11 @@ const { class: className, ...props } = Astro.props
   :global(.timeline-list > li[data-milestone="true"]) {
     background: linear-gradient(
       to right,
-      hsl(var(--primary) / 0.05),
+      hsl(var(--primary) / 0.12),
       transparent 20%
     );
     border-radius: 0.375rem;
     padding: 0.25rem 0;
-    margin: 0.125rem 0;
   }
 </style>
 

packages/pure/components/user/TimelineItem.astro

@@ -23,18 +23,18 @@ interface Props {
 const { date, class: className, milestone = false } = Astro.props
 ---
 
-<li class:list={['group relative flex list-none gap-x-3 rounded-full ps-0 sm:gap-x-2', className]} data-timeline-item data-milestone={milestone}>
+<li class:list={['group relative flex list-none gap-x-3 rounded-full ps-0 sm:gap-x-2 mb-2', className]} data-timeline-item data-milestone={milestone}>
   {/* circle container */}
-  <div class='relative flex items-start pt-0.5'>
+  <div class='relative flex items-start'>
     {/* circle */}
     <span class:list={[
-      'z-10 ms-2 h-3 w-3 min-w-3 rounded-full border-2 transition-all duration-300',
+      'z-10 ms-2 mt-[0.125rem] h-3 w-3 min-w-3 rounded-full border-2 transition-all duration-300',
       milestone 
         ? 'border-primary bg-primary' 
         : 'border-muted-foreground bg-background group-hover:border-primary group-hover:scale-110'
     ]} />
   </div>
-  <div class='flex flex-col gap-0 flex-1 timeline-content py-0.5'>
+  <div class='flex flex-col gap-0 flex-1 timeline-content'>
     <samp class='w-fit rounded-md py-0 text-sm max-sm:bg-primary-foreground max-sm:px-2 sm:min-w-[82px] leading-tight'>
       {date}
     </samp>

src/pages/about/index.mdx

@@ -200,10 +200,10 @@ Current support tools as follow:
     <TimelineItem date="2025-09-17">
       从 <ExternalLink href="https://pages.cloudflare.com"> CloudFlare Pages </ExternalLink> 迁移到 <ExternalLink href="https://edgeone.cloud.tencent.com">Tencent EdgeOne CDN</ExternalLink>
     </TimelineItem>
-    <TimelineItem date="2025-09-16">
+    <TimelineItem date="2025-09-16" milestone>
       添加备案号
     </TimelineItem>
-    <TimelineItem date="2025-07-11">
+    <TimelineItem date="2025-07-11" milestone>
       Website refactored from <ExternalLink href="https://github.com/srleom/astro-theme-resume">Astro Theme Pure</ExternalLink>
     </TimelineItem>
   </Timeline>