feat: Implement commit diff file directory tree and detailed change information API (#1711)

* feat: Implement commit diff file directory tree and detailed change information API

* feat: Implement commit diff file directory tree and detailed change information API

---------

Co-authored-by: Quanyi Ma <eli@patch.sh>

Author: juanlou1217

moon/apps/web/components/ClView/FileChangeTab.tsx

@@ -23,7 +23,7 @@ export const FileChangeTab = React.memo<FileChangeTabProps>(({ id }) => {
     <FileDiff
       fileChangeData={ClFilesChangedData}
       fileChangeIsLoading={isFileChangeLoading}
-      treeData={treeResponse as CommonResultVecMuiTreeNode}
+      treeData={treeResponse?.data as CommonResultVecMuiTreeNode['data']}
       treeIsLoading={treeIsLoading}
     />
   )

moon/apps/web/components/CodeView/CommitsView/detail/index.tsx

@@ -1,20 +1,21 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useMemo } from 'react'
 import { CopyIcon, FileCodeIcon } from '@primer/octicons-react'
 import copy from 'copy-to-clipboard'
 import { format, formatDistance, fromUnixTime } from 'date-fns'
 import { useAtom } from 'jotai'
 import { useRouter } from 'next/router'
 import toast from 'react-hot-toast'
 
-import { CommitSummary, CommonPageDiffItem, DiffItem } from '@gitmono/types'
+import { CommitSummary, CommonPageDiffItem, CommonResultVecMuiTreeNode, DiffItem } from '@gitmono/types'
 import { LoadingSpinner } from '@gitmono/ui'
 
 import { formatAssignees } from '@/components/CodeView/CommitsView'
 import { commitPath } from '@/components/CodeView/CommitsView/items'
 import FileDiff from '@/components/DiffView/FileDiff'
 import { MemberHoverAvatarList } from '@/components/Issues/MemberHoverAvatarList'
 import { useScope } from '@/contexts/scope'
-import { useGetCommitsDetail } from '@/hooks/commits/useGetCommitsDetail'
+import { useGetCommitsMuiTree } from '@/hooks/commits/useGetCommitsMuiTree'
+import { usePostCommitsFilesChanged } from '@/hooks/commits/usePostCommitsFilesChanged'
 
 interface CommitDetailData {
   commit: CommitSummary
@@ -26,44 +27,42 @@ export const CommitsDetailView: React.FC = () => {
   const { sha } = router.query
   const { scope } = useScope()
 
-  const { mutate: commitDetail, isPending: isLoadingCommitDetail } = useGetCommitsDetail()
-
   const [commitPathValue, _setCommitPath] = useAtom(commitPath)
-  const [commitsDetail, setCommitsDetail] = useState<CommitDetailData>()
 
-  useEffect(() => {
-    if (!sha || !commitPathValue) return
+  const commitSha = Array.isArray(sha) ? sha[0] : (sha ?? '')
 
-    commitDetail(
-      {
-        data: {
-          path: commitPathValue,
-          sha: Array.isArray(sha) ? sha[0] : (sha ?? '')
-        }
-      },
-      {
-        onSuccess: (response) => {
-          const data = response.data
+  const commitParams = useMemo(() => {
+    if (!commitSha || !commitPathValue) return null
+    return {
+      path: commitPathValue,
+      sha: commitSha
+    }
+  }, [commitPathValue, commitSha])
 
-          if (data) {
-            setCommitsDetail(data)
-          }
-        }
-      }
-    )
-  }, [sha, commitDetail, commitPathValue])
+  const { data: filesChangedRes, isLoading: isLoadingFilesChanged } = usePostCommitsFilesChanged(commitParams, {
+    page: 1,
+    per_page: 100
+  })
+
+  const { data: treeResponse, isLoading: treeIsLoading } = useGetCommitsMuiTree(commitParams)
+
+  const commitsDetail: CommitDetailData | undefined = useMemo(() => {
+    if (!filesChangedRes?.data) return undefined
+    return {
+      commit: filesChangedRes.data.commit,
+      diffs: filesChangedRes.data.page.items as DiffItem[]
+    }
+  }, [filesChangedRes])
 
-  // Convert diffs to CommonPageDiffItem format
   const fileChangeData: CommonPageDiffItem | undefined = useMemo(() => {
     if (!commitsDetail?.diffs) return undefined
 
     return {
       items: commitsDetail.diffs,
-      total: commitsDetail.diffs.length
+      total: filesChangedRes?.data?.page.total ?? commitsDetail.diffs.length
     }
-  }, [commitsDetail])
+  }, [commitsDetail, filesChangedRes])
 
-  // Calculate total stats
   const stats = useMemo(() => {
     if (!commitsDetail?.diffs) return { additions: 0, deletions: 0, files: 0 }
 
@@ -89,10 +88,9 @@ export const CommitsDetailView: React.FC = () => {
     }
   }, [commitsDetail])
 
-  const commitSha = Array.isArray(sha) ? sha[0] : (sha ?? '')
   const commitDate = commitsDetail?.commit.date ? fromUnixTime(parseInt(commitsDetail.commit.date, 10)) : null
 
-  if (isLoadingCommitDetail && !commitsDetail) {
+  if (isLoadingFilesChanged && !commitsDetail) {
     return (
       <div className='flex h-[400px] items-center justify-center'>
         <LoadingSpinner />
@@ -147,21 +145,27 @@ export const CommitsDetailView: React.FC = () => {
           </div>
 
           {commitDate && (
-            <span className='inline-flex items-center rounded-full border border-gray-300 bg-gray-50 px-2 py-0.5 text-[11px] font-medium text-gray-700'>
-              GPG Verified{/*{item.Verified}*/}
+            <span
+              className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium ${
+                commitsDetail.commit.gpg_status === 'Verified'
+                  ? 'border-green-600 text-green-600'
+                  : commitsDetail.commit.gpg_status === 'Unverified'
+                    ? 'border-yellow-600 text-yellow-600'
+                    : 'border-gray-600 text-gray-600'
+              }`}
+            >
+              {commitsDetail.commit.gpg_status}
             </span>
           )}
         </div>
       </div>
 
-      {/* File Stats */}
       {fileChangeData && (
         <div className='flex flex-col px-5'>
           <div className='justify-center rounded-lg border border-gray-200'>
             <div className='border-b px-4 py-2 text-gray-900'> {commitsDetail.commit.short_message}</div>
 
             <div className='flex items-center justify-between px-4 py-2 text-sm'>
-              {/* Left side: File stats */}
               <div className='flex items-center gap-4'>
                 <div className='flex items-center gap-2'>
                   <span className='font-medium text-gray-700'>{stats.files}</span>
@@ -177,7 +181,6 @@ export const CommitsDetailView: React.FC = () => {
                 </div>
               </div>
 
-              {/* Right side: Parent commits and current commit */}
               <div className='flex items-center gap-2 text-sm text-gray-600'>
                 {commitsDetail.commit.parents && commitsDetail.commit.parents.length > 0 ? (
                   <>
@@ -240,13 +243,9 @@ export const CommitsDetailView: React.FC = () => {
       {fileChangeData ? (
         <FileDiff
           fileChangeData={fileChangeData}
-          fileChangeIsLoading={isLoadingCommitDetail}
-          treeData={{
-            data: [],
-            err_message: '',
-            req_result: true
-          }}
-          treeIsLoading={false}
+          fileChangeIsLoading={isLoadingFilesChanged}
+          treeData={treeResponse?.data as CommonResultVecMuiTreeNode['data']}
+          treeIsLoading={treeIsLoading}
         />
       ) : (
         <div className='flex h-[200px] items-center justify-center text-gray-500'>No file changes</div>

moon/apps/web/components/CodeView/CommitsView/index.tsx

@@ -7,6 +7,7 @@ import { useSetAtom } from 'jotai'
 import { useRouter } from 'next/router'
 import toast from 'react-hot-toast'
 
+import { GpgStatus } from '@gitmono/types'
 import { GitCommitIcon } from '@gitmono/ui'
 
 import { ListBanner } from '@/components/ClView/ClList'
@@ -55,6 +56,7 @@ type Commits = {
   author: string
   committer: string
   date: string
+  gpg_status?: GpgStatus
   parents: string[]
   sha: string
   short_message: string
@@ -176,11 +178,19 @@ export const CommitsView: React.FC = () => {
                             key={item.sha}
                             title={item.short_message}
                             labels={
-                              <span className='inline-flex items-center rounded-full border border-gray-300 bg-gray-50 px-2 py-0.5 text-[11px] font-medium text-gray-700'>
-                                GPG Verified{/*{item.Verified}*/}
+                              <span
+                                className={`inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium ${
+                                  item.gpg_status === 'Verified'
+                                    ? 'border-green-600 text-green-600'
+                                    : item.gpg_status === 'Unverified'
+                                      ? 'border-yellow-600 text-yellow-600'
+                                      : 'border-gray-600 text-gray-600'
+                                }`}
+                              >
+                                {item.gpg_status}
                               </span>
                             }
-                            gitId={
+                            sha={
                               <span className='items-center font-mono text-xs text-gray-500'>
                                 {item.sha.substring(0, 7)}
                               </span>

moon/apps/web/components/CodeView/CommitsView/items.tsx

@@ -11,15 +11,15 @@ export const CommitsItem = memo(
   ({
     title,
     children,
-    gitId,
+    sha,
     labels,
     rightIcon,
     onClick,
     copyIcon
   }: {
     title: string
     children?: ReactNode
-    gitId?: ReactNode
+    sha?: ReactNode
     labels?: ReactNode
     rightIcon?: ReactNode
     copyIcon?: ReactNode
@@ -48,31 +48,22 @@ export const CommitsItem = memo(
           </div>
 
           <div className='right ml-4 flex items-center gap-2 text-xs text-gray-600'>
-            {/* Labels (Verified 状态) */}
-            {labels && (
-              <div className='flex items-center'>
-                {/* 移除了内层冗余的 div/padding，直接使用 labels 的样式 */}
-                {labels}
-              </div>
-            )}
+            {labels && <div className='flex items-center'>{labels}</div>}
 
-            {/* Git ID (短 SHA) */}
-            {gitId && (
+            {sha && (
               <div className='flex items-center'>
                 <div className='rounded-md px-1.5 py-1 font-mono transition duration-150 ease-in-out hover:bg-gray-100'>
-                  {gitId}
+                  {sha}
                 </div>
               </div>
             )}
 
-            {/* Copy Icon (复制 SHA) */}
             {copyIcon && (
               <div className='flex items-center'>
                 <div className='rounded-md p-1 transition duration-150 ease-in-out hover:bg-gray-100'>{copyIcon}</div>
               </div>
             )}
 
-            {/* Right Icon (箭头/详情图标) */}
             {rightIcon && (
               <div className='flex items-center'>
                 <div className='rounded-md p-1 transition duration-150 ease-in-out hover:bg-gray-100'>{rightIcon}</div>

moon/apps/web/components/DiffView/FileDiff.tsx

@@ -64,7 +64,7 @@ function generateParsedFiles(diffFiles: { path: string; lang: string; diff: stri
 interface FileDiffProps {
   fileChangeData: CommonPageDiffItem
   fileChangeIsLoading: boolean
-  treeData: CommonResultVecMuiTreeNode
+  treeData: CommonResultVecMuiTreeNode['data']
   treeIsLoading: boolean
 }
 

moon/apps/web/components/DiffView/TreeView/FileTree.tsx

@@ -12,7 +12,7 @@ import { CustomTreeItem } from './CustomTreeItem'
 import { convertToTreeData, getDescendantIds } from './TreeUtils'
 
 interface FileTreeProps {
-  treeData: CommonResultVecMuiTreeNode
+  treeData: CommonResultVecMuiTreeNode['data']
   treeDataLoading: boolean
   onFileClick?: (filePath: string) => void
 }
@@ -25,8 +25,8 @@ const FileTree = ({ treeData, treeDataLoading, onFileClick }: FileTreeProps) =>
 
   // Process the tree data when API returns
   useEffect(() => {
-    if (treeData?.data) {
-      const convertedData = convertToTreeData(treeData.data)
+    if (treeData) {
+      const convertedData = convertToTreeData(treeData)
 
       setTreeAllData(convertedData)
     }

moon/apps/web/hooks/commits/useGetCommitsMuiTree.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { GetApiCommitsMuiTreeData, GetApiCommitsMuiTreeParams } from '@gitmono/types/generated'
+
+import { legacyApiClient } from '@/utils/queryClient'
+
+export function useGetCommitsMuiTree(params: GetApiCommitsMuiTreeParams | null) {
+  return useQuery<GetApiCommitsMuiTreeData>({
+    queryKey: ['commits-mui-tree', params],
+    queryFn: () => legacyApiClient.v1.getApiCommitsMuiTree().request(params!),
+    enabled: Boolean(params?.sha && params?.path)
+  })
+}

moon/apps/web/hooks/commits/usePostCommitsFilesChanged.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { Pagination, PostApiCommitsFilesChangedData, PostApiCommitsFilesChangedParams } from '@gitmono/types/generated'
+
+import { legacyApiClient } from '@/utils/queryClient'
+
+export function usePostCommitsFilesChanged(params: PostApiCommitsFilesChangedParams | null, data: Pagination) {
+  return useQuery<PostApiCommitsFilesChangedData>({
+    queryKey: ['commits-files-changed', params, data],
+    queryFn: () => legacyApiClient.v1.postApiCommitsFilesChanged().request(params!, data),
+    enabled: Boolean(params?.sha && params?.path)
+  })
+}