feat: update commit data

Author: zhangmo8

demo.html

@@ -116,6 +116,7 @@
         <!-- <circle cx="30" cy="210" r="10" fill="red" /> -->
       </svg>
     </div>
+    <div style='width: 150px;height: 28px;background: url("data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\"><g><line fill=\"none\" shape-rendering=\"auto\" stroke-linejoin=\"round\" stroke-width=\"2\" stroke=\"rgba(21, 160, 191, 1)\" x1=\"39\" x2=\"39\" y2=\"28\" /><line fill=\"none\" shape-rendering=\"auto\" stroke-linejoin=\"round\" stroke-width=\"2\" stroke=\"rgba(6, 105, 247, 1)\" x1=\"61\" x2=\"61\" y2=\"28\" /><line fill=\"none\" shape-rendering=\"auto\" stroke-linejoin=\"round\" stroke-width=\"2\" stroke=\"rgba(142, 0, 194, 1)\" x1=\"83\" x2=\"83\" y2=\"28\" /><g><path d=\"M 116 14 H 113 A 8 8 0 0 0 105 22 V 25\" fill=\"none\" shape-rendering=\"auto\" stroke-linejoin=\"round\" stroke-width=\"2\" stroke=\"rgba(197, 23, 182, 1)\" /><line fill=\"none\" shape-rendering=\"auto\" stroke-linejoin=\"round\" stroke-width=\"2\" stroke=\"rgba(197, 23, 182, 1)\" x1=\"105\" x2=\"105\" y1=\"25\" y2=\"28\" /><line fill=\"none\" shape-rendering=\"auto\" stroke-linejoin=\"round\" stroke-width=\"2\" stroke=\"rgba(197, 23, 182, 1)\" x1=\"116\" x2=\"127\" y1=\"14\" y2=\"14\" /></g><line fill=\"none\" shape-rendering=\"auto\" stroke-linejoin=\"round\" stroke-width=\"2\" stroke=\"rgba(197, 23, 182, 1)\" x1=\"105\" x2=\"105\" y2=\"28\" /><line fill=\"none\" shape-rendering=\"auto\" stroke-linejoin=\"round\" stroke-width=\"2\" stroke=\"rgba(217, 1, 113, 1)\" x1=\"127\" x2=\"127\" y1=\"14\" y2=\"28\" /></g></svg>")'></div>
   </div>
   <script>
     const commits = [

src/git/index.ts

@@ -24,14 +24,12 @@ export const useGitService = createSingletonComposable(() => {
       const logResult = await git.log([
         '--all',
         '--stat',
-        '--max-count=50',
       ]) as ExtendedLogResult
 
       const rawParentsOutput = await git.raw([
         'log',
         '--all',
         '--pretty=format:%H %P',
-        '--max-count=50',
       ])
 
       const parentMap: { [hash: string]: string[] } = {}
@@ -102,16 +100,9 @@ export const useGitService = createSingletonComposable(() => {
         const branches = refs
           .filter(ref => ref.includes('refs/heads/') || ref.includes('refs/remotes/') || (!ref.includes('refs/') && !ref.includes('tag:')))
           .map((ref) => {
-            let branch = ref
-            if (ref.includes('refs/heads/')) {
-              branch = ref.replace('refs/heads/', '')
-            }
-            else if (ref.includes('refs/remotes/')) {
-              branch = ref.replace('refs/remotes/', '').split('/').slice(1).join('/')
-            }
-            else if (ref.includes('HEAD ->')) {
-              branch = ref.replace('HEAD -> ', '')
-            }
+            const branch = ref.replace('refs/heads/', '')
+              .replace('refs/remotes/', '').split('/').slice(1).join('/')
+              .replace('HEAD -> ', '')
             return branch
           })
           .filter(Boolean)
@@ -123,7 +114,6 @@ export const useGitService = createSingletonComposable(() => {
       }
     })
 
-    // 如果没有找到分支信息，使用默认分支名称
     if (branchSet.size === 0) {
       branchSet.add('master')
     }

src/storage.ts

@@ -1,29 +1,38 @@
 import { createSingletonComposable, extensionContext } from 'reactive-vscode'
-import type { Commit } from '@/git/types'
+import type { Commit, CommitGraph } from '@/git/types'
 
 const COMMITS_KEY = 'git-panel.commits'
 
 export const useStorage = createSingletonComposable(() => {
-  function saveCommits(commits: Commit[]) {
+  function saveCommits(commits: CommitGraph) {
     extensionContext.value?.globalState.update(COMMITS_KEY, commits)
   }
 
   function updateCommitFiles(commitHash: string, files: Array<{ status: string, path: string }>) {
-    const commits = getCommits()
-    const commit = commits.find(c => c.hash === commitHash)
+    const { operations, branches, logResult } = getCommits()
+    const commit = logResult.all.find(c => c.hash === commitHash)
 
     if (commit) {
       commit.files = files
-      saveCommits(commits)
+      saveCommits({ operations, branches, logResult })
     }
   }
 
-  function getCommits(): Commit[] {
-    return extensionContext.value?.globalState.get<Commit[]>(COMMITS_KEY) || []
+  function getCommits(): CommitGraph {
+    return extensionContext.value?.globalState.get<CommitGraph>(COMMITS_KEY) || ({
+      operations: [],
+      branches: [],
+      logResult: {
+        all: [],
+        total: 0,
+      },
+    }) as unknown as CommitGraph
   }
 
   function getCommit(hash: string): Commit | undefined {
-    const commits = getCommits()
+    const { logResult: { all: commits } } = getCommits()
+    if (!commits)
+      return
     return commits.find(commit => commit.hash === hash)
   }
 

src/views/diff/DiffTreeView.ts

@@ -22,7 +22,7 @@ export const useDiffTreeView = createSingletonComposable(() => {
       let commit = storage.getCommit(hash)
 
       if (!commit) {
-        const { logResult } = await git.getHistory()
+        const { logResult, operations, branches } = await git.getHistory()
         const historyCommit = logResult.all.find(c => c.hash === hash)
         if (!historyCommit)
           return
@@ -31,7 +31,7 @@ export const useDiffTreeView = createSingletonComposable(() => {
           ...historyCommit,
         }
 
-        storage.saveCommits(Array.from(logResult.all))
+        storage.saveCommits({ operations, branches, logResult })
       }
 
       commitDetails.value = commit

src/views/history/App.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import CommitTable from './components/CommitTable/index.vue'
 
 import { CHANNEL, WEBVIEW_CHANNEL } from '@/constant'
 
-import type { Commit } from '@/git'
+import type { CommitGraph } from '@/git'
 
 declare global {
   interface Window {
@@ -14,15 +14,15 @@ declare global {
 }
 
 interface State {
-  commits: Commit[]
+  commits: CommitGraph
   selectedHash?: string
   filter?: string
 }
 
-const commits = ref<Commit[]>([])
+const commits = ref<CommitGraph>()
 const error = ref<string>('')
-const selectedHash = ref<string>('')
-const filter = ref<string>('')
+// const selectedHash = ref<string>('')
+// const filter = ref<string>('')
 
 // VSCode webview API
 const vscode = acquireVsCodeApi<State>()
@@ -34,7 +34,7 @@ window.addEventListener('message', (event: { data: any }) => {
 
   switch (message.command) {
     case CHANNEL.HISTORY:
-      commits.value = message.commits as Commit[]
+      commits.value = message.commits as CommitGraph
       break
     case 'error':
       error.value = message.message
@@ -47,7 +47,7 @@ onMounted(() => {
 })
 
 const transformedCommits = computed(() => {
-  return commits.value
+  return Array.from(commits.value?.logResult.all || []) || []
 })
 </script>
 
@@ -57,7 +57,7 @@ const transformedCommits = computed(() => {
       <input v-model="filter" type="text" placeholder="Search commits..." class="search-input">
     </div> -->
 
-    <CommitTable :commits="transformedCommits" class="git-graph-container" />
+    <CommitTable :commits="transformedCommits" :graph-data="commits?.operations || []" class="git-graph-container" />
 
     <div v-if="error" class="error">
       {{ error }}

src/views/history/components/CommitTable/ColumnHeader.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { defineModel, ref } from 'vue'
-import ResizeHandle from './ResizeHandle.vue'
+import ResizeHandle from '../ResizeHandle/index.vue'
 
 interface ColumnWidths {
+  branch: number
   hash: number
   message: number
   stats: number
@@ -12,18 +13,18 @@ interface ColumnWidths {
 
 const modelValue = defineModel<ColumnWidths>()
 const isDragging = ref(false)
-const currentColumn = ref('')
+const currentColumn = ref<keyof ColumnWidths>()
 const startX = ref(0)
 const startWidth = ref(0)
 
-function handleDragStart(e: MouseEvent, column: string) {
+function handleDragStart(e: MouseEvent, column: keyof ColumnWidths) {
   e.preventDefault()
   e.stopPropagation()
 
   isDragging.value = true
   currentColumn.value = column
   startX.value = e.clientX
-  startWidth.value = modelValue.value[column]
+  startWidth.value = modelValue.value?.[column] || 0
 
   document.addEventListener('mousemove', handleDragging, { passive: false })
   document.addEventListener('mouseup', handleDragEnd, { once: true })
@@ -45,15 +46,15 @@ function handleDragging(e: MouseEvent) {
   const diff = e.clientX - startX.value
   const newWidth = Math.max(100, startWidth.value + diff)
 
-  modelValue.value[currentColumn.value] = newWidth
+  modelValue.value![currentColumn.value!] = newWidth
 }
 
 function handleDragEnd() {
   if (!isDragging.value)
     return
 
   isDragging.value = false
-  currentColumn.value = ''
+  currentColumn.value = undefined
 
   document.removeEventListener('mousemove', handleDragging)
   document.removeEventListener('mouseup', handleDragEnd)
@@ -66,19 +67,23 @@ function handleDragEnd() {
 
 <template>
   <li class="commit-header">
-    <span class="hash-col column-header" :style="{ width: `${modelValue.hash}px` }">
+    <!-- <span class="column-header" :style="{ width: `${modelValue?.branch}px` }">
+      Branch
+      <ResizeHandle :is-active="currentColumn === 'branch'" @mousedown="handleDragStart($event, 'branch')" />
+    </span> -->
+    <span class="hash-col column-header" :style="{ width: `${modelValue?.hash}px` }">
       CommitId
       <ResizeHandle :is-active="currentColumn === 'hash'" @mousedown="handleDragStart($event, 'hash')" />
     </span>
-    <span class="column-header" :style="{ width: `${modelValue.message}px` }">
+    <span class="column-header" :style="{ width: `${modelValue?.message}px` }">
       Message
       <ResizeHandle :is-active="currentColumn === 'message'" @mousedown="handleDragStart($event, 'message')" />
     </span>
-    <span class="column-header" :style="{ width: `${modelValue.stats}px` }">
+    <span class="column-header" :style="{ width: `${modelValue?.stats}px` }">
       Changes
       <ResizeHandle :is-active="currentColumn === 'stats'" @mousedown="handleDragStart($event, 'stats')" />
     </span>
-    <span class="column-header" :style="{ width: `${modelValue.author}px` }">
+    <span class="column-header" :style="{ width: `${modelValue?.author}px` }">
       Author
       <ResizeHandle :is-active="currentColumn === 'author'" @mousedown="handleDragStart($event, 'author')" />
     </span>

src/views/history/components/CommitTable/ListItem.vue

@@ -1,12 +1,22 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+// import GitGraph from './GitGraph.vue'
+import CopyButton from '../CopyButton/index.vue'
+
 import { WEBVIEW_CHANNEL } from '@/constant'
-import type { Commit } from '@/git'
+
+import type { Commit, GitOperation } from '@/git'
 
 const props = defineProps<{
   commit: Commit
+  graphData: GitOperation
+  prevGraphData?: GitOperation
+  nextGraphData?: GitOperation
   columnWidths: Record<string, number>
 }>()
 
+const hoveredCell = ref<string | null>(null)
+
 function handleCommitClick() {
   try {
     if (window.vscode) {
@@ -37,17 +47,45 @@ function handleDoubleClick() {
 
 <template>
   <li class="commit-row" @click="handleCommitClick" @dblclick="handleDoubleClick">
-    <span class="hash-col commit-cell" :style="{ width: `${columnWidths.hash}px` }">{{ commit.hash.substring(0, 7)
-    }}</span>
-    <span class="commit-cell" :style="{ width: `${columnWidths.message}px` }">{{ commit.message }}</span>
+    <!-- <div class="branch-col commit-cell" :style="{ width: `${columnWidths.branch}px` }">
+      <GitGraph
+        :graph-data="graphData"
+        :prev-graph-data="prevGraphData"
+        :next-graph-data="nextGraphData"
+      />
+    </div> -->
+    <span
+      class="hash-col commit-cell" :style="{ width: `${columnWidths.hash}px` }" @mouseenter="hoveredCell = 'hash'"
+      @mouseleave="hoveredCell = null"
+    >
+      {{ commit.hash.substring(0, 7) }}
+      <CopyButton v-show="hoveredCell === 'hash'" :copy-text="commit.hash" />
+    </span>
+
+    <span
+      class="commit-cell" :style="{ width: `${columnWidths.message}px` }" @mouseenter="hoveredCell = 'message'"
+      @mouseleave="hoveredCell = null"
+    >
+      {{ commit.message }}
+      <CopyButton v-show="hoveredCell === 'message'" :copy-text="commit.message" />
+    </span>
+
     <span class="commit-cell" :style="{ width: `${columnWidths.stats}px` }">
       <span v-if="commit.diff" class="commit-stats">
         <span class="files">{{ commit.diff.changed }} files</span>
         <span v-if="commit.diff.insertions" class="additions">+{{ commit.diff.insertions }}</span>
         <span v-if="commit.diff.deletions" class="deletions">-{{ commit.diff.deletions }}</span>
       </span>
     </span>
-    <span class="commit-cell" :style="{ width: `${columnWidths.author}px` }">{{ commit.authorName }}</span>
+
+    <span
+      class="commit-cell" :style="{ width: `${columnWidths.author}px` }" @mouseenter="hoveredCell = 'authorName'"
+      @mouseleave="hoveredCell = null"
+    >
+      {{ commit.authorName }}
+      <CopyButton v-show="hoveredCell === 'authorName'" :copy-text="`${commit.authorName} <${commit.authorEmail}>`" />
+    </span>
+
     <span class="commit-cell date" :style="{ width: `${columnWidths.date}px` }">{{ commit.date }}</span>
   </li>
 </template>
@@ -60,7 +98,7 @@ function handleDoubleClick() {
   cursor: pointer;
   width: 100%;
   box-sizing: border-box;
-  padding: 8px;
+  position: relative;
 }
 
 .commit-row:hover {
@@ -71,22 +109,24 @@ function handleDoubleClick() {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding: 8px;
+  position: relative;
 }
 
-.hash-col {
-  color: var(--vscode-gitDecoration-addedResourceForeground);
+.branch-col {
+  position: relative;
+  padding: 0px;
+  z-index: 1;
 }
 
-.date {
-  padding-right: 16px;
-  color: var(--vscode-descriptionForeground);
+.hash-col {
+  color: var(--vscode-gitDecoration-addedResourceForeground);
 }
 
 .commit-stats {
-  display: inline-flex;
+  font-size: 0.85em;
+  display: flex;
   gap: 8px;
-  font-size: 12px;
-  white-space: nowrap;
 }
 
 .additions {
@@ -96,4 +136,9 @@ function handleDoubleClick() {
 .deletions {
   color: var(--vscode-gitDecoration-deletedResourceForeground);
 }
+
+.date {
+  color: var(--vscode-descriptionForeground);
+  font-size: 0.9em;
+}
 </style>