120行代码，实现丝滑滚动的时间轴组件

前言

产品又看见一个非常高级的时间轴页面交互（对于前端来说，实现不难，主要是花时间），我们尝试一下让Trae 的solo来实现，最简洁的代码实现，尽可能的描述一下细节，这样才可以最准确的实现，少走弯路，不浪费我们宝贵的时间（有这时间多看几篇技术文章，不香？啊哈哈哈）

首先先搭建好一个项目，这里使用的是vite+vue3+ts，然后是对应的安装tailwind css，这些都是让Trae solo模式帮我们搭建一下，我们就不用从0搭建了

先来看看最终的效果实现，你很难相信这是一次对话就实现的

一.首先是描述细节

1.时间轴的中间是可以滚动的，然后要根据鼠标进行滚动，不要滚动条

2.奇数是在上面，时间轴的连接线比较长，偶数是在下面，连接线比较短

3.箭头在右下角固定，保证用户知道这个是时间轴

4.卡片最大宽度是240px，超出隐藏

5.线和卡片中间使用倒三角连接起来

附加上一张ui设计的截图，就可以开始提问了

等待了一会，就实现了

来看看代码，119行就实现了，看起来确实优雅，解读一下代码trae solo是如何实现这个组件的

1.卡片（奇偶项交错，下移以视觉区分）,使用tailwind的mt-[210px],

xml 复制代码

<div
          class="relative max-w-[230px] overflow-hidden rounded-lg bg-[#1D2129] shadow-lg"
          :class="i % 2 !== 0 ? 'mt-[210px]' : ''"
        >
          <!-- 卡片头部：深色背景 -->
          <div class="flex items-center justify-between px-3 py-2">
            <span class="text-sm font-medium text-white">共7条</span>
            <span class="cursor-pointer text-xs text-white">全部></span>
          </div>

          <!-- 卡片内容：两张图片并排 -->
          <div class="flex gap-2 overflow-hidden p-3">
            <div class="relative shrink-0 overflow-hidden rounded">
              <img :src="item.image" class="aspect-video h-[150px] w-[89px] object-cover" alt="">
            </div>
            <div class="relative shrink-0 overflow-hidden rounded">
              <img :src="item.image" class="aspect-video h-[150px] w-[89px] object-cover" alt="">
            </div>
            <div class="relative shrink-0 overflow-hidden rounded">
              <img :src="item.image" class="aspect-video h-[150px] w-[89px] object-cover" alt="">
            </div>
          </div>
        </div>

2.底部小三角形指示器,有没有勾起你当时学前端的回忆，那道经典的面试题的，你是怎么实现一个三角形的

css 复制代码

<div class="border-x-[12px] border-t-[12px] border-[#1D2129] border-x-transparent" />

3.竖线：奇数项加长（视觉第1、3、5项）,使用tailwind的h- $310px$ 和h- $101px$ 来实现连接线的长短

less 复制代码

<div
          class="w-[2px]" :class="[            isCreation ? 'bg-blue-500' : 'bg-[#685FE1]',            i % 2 === 0 ? 'h-[310px]' : 'h-[101px]',          ]"
        />

4.底部圆点的实现，也是使用一个div来实现的

less 复制代码

<div
    class="z-10 size-4 rounded-full border-[3px] bg-white" :class="[    isCreation ? 'border-blue-500' : 'border-[#685FE1]',    ]"
/>

5.底部横向主线（黑色）贯穿整个容器

scss 复制代码

<div class="absolute inset-x-0 bottom-[35px] h-[2px] bg-black"/>

6.底部时间轴右侧箭头（固定在轴线右端，靠内边距 right-[-11px] 可调）

js 复制代码

  <div class="pointer-events-none absolute bottom-[56px] right-[-11px] z-[999]">
    <!-- 向右的箭头 SVG，样式可改 -->
    <svg class="size-6 text-black" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M5 12h13" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
      <path d="M13 5l7 7-7 7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
  </div>

关键代码，通过监听鼠标滚轮来实现横向滚动的

js 复制代码

onMounted(() => {
  const el = scrollRef.value
  if (!el)
    return
  // 鼠标滚轮横向滚动
  el.addEventListener('wheel', (e) => {
    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
      e.preventDefault()
      el.scrollLeft += e.deltaY
    }
  })
})

来看看代码行数，确实很惊艳，简单的119行就实现了

总结

trae的solo确实比之前好很多，也惊艳到我了，前端可真是越来越难了，以后的时间排期也会进一步的压缩了，还是要适当的使用ai来辅助我们的编程，把一些比较容易实现的，耗时间的工作交给ai去实现，我们专注于一些工程化和架构上面去，也可以适当学一些node项目，提高我们自己的核心竞争力,加油吧，前端工程师们。