从零搭建基于 AI GitHub 分析平台 (13) Commit Log 页面

效果

实现步骤如下：

添加 Commit Log 模块

修改 src/app/(protected)/dashboard/CommitLog.tsx:

"use client"

import React from 'react'
import useProject from '@/hooks/use-project'
import { api } from '@/trpc/react';
import { cn, formatToLocalTime } from '@/lib/utils';
import Link from 'next/link';
import { ExternalLink } from 'lucide-react';


const CommitLog = () => {
  const { projectId, project } = useProject();
  const { data: commits } = api.project.getCommits.useQuery( { projectId });
  return (
    <>
      <ul className='space-y-6'>
        { commits?.map( ( commit, index ) => {
          return <li key={commit.id} className='relative flex gap-x-4'>
            <div className={cn(
              index === commits.length -1 ? 'h-6' : '-bottom-6',
              'absolute left-0 top-0 flex w-6 justify-center'
            )}>
              <div className='w-px translate-x-1 bg-gray-200'></div>
            </div>
            <>
              <img src={commit.commitAuthorAvatar} alt='commit avatar' className='relative mt-4 size-8 flex-none rounded-full bg-gray-50'/>
              <div className='flex-auto rounded-s-md bg-white p-3 ring-1 ring-inset ring-gray-200'>
                <div className='flex justify-between gap-x-4'>
                  <Link target='_blank' href={`${project?.githubURL}/commit/${commit.commitHash}`} className='py-0.5 text-xs leading-5 text-gray-500'>
                    <span className='font-medium text-gray-900'>
                      {commit.commitAuthorName}
                    </span>{" "}
                    <span className='inline-flex items-center'>
                      commited on { formatToLocalTime(commit.commitDate) }
                      <ExternalLink className='ml-1 size-4' />
                    </span>
                  </Link>
                </div>
                <span className='font-semibold'>
                  {commit.commitMessage}
                </span>
                <pre className='mt-2 whitespace-pre-wrap text-sm leading-6 text-gray-500'>
                  {commit.summary}
                </pre>
              </div>
            </>
          </li>
        })}
      </ul>
    </>
  )
}

export default CommitLog

布局注意点1：竖向线

• 用 absolute 构造一个左边的 div，用宽度为 1 背景为灰色的 div 构造竖线
• translate-x-1 构造偏移量，原本是居中的，但和头像有一些偏离
• -bottom-6 负偏移量让线条可以和下面的线条连接起来
• 如果是最后一个commit，只需要连接到头像，h-6 就可以了

<div className={cn(
  index === commits.length -1 ? 'h-6' : '-bottom-6',
  'absolute left-0 top-0 flex w-6 justify-center'
)}>
  <div className='w-px translate-x-1 bg-gray-200'></div>
</div>

布局注意点2：卡片效果

这个 div 会创建一个灵活的容器，占据 flex 布局中的可用空间。它有一个白色背景，左侧有中等大小的圆角。内容周围有 12px 的内边距。整个元素有一个 1px 宽的内嵌式浅灰色轮廓，给人一种精致的边界感。

<div className='flex-auto rounded-s-md bg-white p-3 ring-1 ring-inset ring-gray-200'>
</div>

布局注意点3：链接条

Link 内编写内容，可以让整个部分都作为可点击部分

<div className='flex justify-between gap-x-4'>
  <Link target='_blank' href={`${project?.githubURL}/commit/${commit.commitHash}`} className='py-0.5 text-xs leading-5 text-gray-500'>
    <span className='font-medium text-gray-900'>
      {commit.commitAuthorName}
    </span>{" "}
    <span className='inline-flex items-center'>
      commited on { formatToLocalTime(commit.commitDate) }
      <ExternalLink className='ml-1 size-4' />
    </span>
  </Link>
</div>

添加 CommitLog 组件

修改 src/app/(protected)/dashboard/page.tsx

...
    {/* commit log */}
    <div className="mt-8"></div>
    <CommitLog />
  </div>

---

作者：Bearalise
出处：从零搭建基于 AI GitHub 分析平台 (13) Commit Log 页面
版权：本文版权归作者所有
转载：欢迎转载，但未经作者同意，必须保留此段声明，必须在文章中给出原文链接。