feat: git graph with Claude 3.7

Author: zhangmo8

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

@@ -8,6 +8,8 @@ const props = defineProps<{
   activeBranches?: string[]
   // 是否被选中
   isSelected?: boolean
+  // 标记哪些分支不应该向上延伸
+  branchEndingUp?: string[]
 }>()
 
 // SVG宽度将根据分支数量动态计算
@@ -53,8 +55,18 @@ function getBranchColorFromData(branchName: string): string {
     return props.graphData.sourceBranchColors[branchName]
   }
   
-  // 如果没有找到预处理的颜色，返回默认颜色
-  return '#888888'
+  // 生成一个基于分支名的稳定颜色
+  // 使用分支名作为唯一标识符来生成一个稳定的哈希值
+  let hash = 0;
+  for (let i = 0; i < branchName.length; i++) {
+    hash = ((hash << 5) - hash) + branchName.charCodeAt(i);
+    hash = hash & hash; // 转换为32位整数
+  }
+  
+  // 使用哈希值选择一个颜色
+  // 黄金比例法生成分散均匀的颜色
+  const hue = (hash % 360 + 360) % 360; // 确保是正数
+  return `hsl(${hue}, 70%, 45%)`; // 使用 HSL 颜色格式
 }
 
 // 计算当前提交涉及的所有分支
@@ -95,10 +107,10 @@ const allBranches = computed(() => {
       <g v-if="graphData">
         <!-- 第1层: 先绘制所有活跃分支的竖线 -->
         <template v-for="(branch, index) in allBranches" :key="`branch-${index}`">
-          <!-- 垂直分支线 - 贯穿整个图表 -->
+          <!-- 垂直分支线 - 如果是最后一个提交则不向上延伸 -->
           <line
             :x1="getBranchPosition(branch)"
-            y1="0"
+            :y1="props.branchEndingUp?.includes(branch) ? SVG_HEIGHT / 2 : 0"
             :x2="getBranchPosition(branch)"
             :y2="SVG_HEIGHT"
             :stroke="getBranchColorFromData(branch)"

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import CopyButton from '../CopyButton/index.vue'
 import GitGraph from './GitGraph.vue'
 
@@ -20,19 +20,35 @@ const emit = defineEmits(['select'])
 const hoveredCell = ref<string | null>(null)
 
 function getBranchColorFromGraphData(branchName: string): string {
+  if (!props.graphData) return '#888888'
+  
+  // 检查当前提交的主分支颜色
   if (props.graphData.branch === branchName && props.graphData.branchColor) {
     return props.graphData.branchColor
   }
 
+  // 检查目标分支颜色
   if (props.graphData.targetBranch === branchName && props.graphData.targetBranchColor) {
     return props.graphData.targetBranchColor
   }
 
+  // 检查源分支颜色
   if (props.graphData.sourceBranchColors && props.graphData.sourceBranchColors[branchName]) {
     return props.graphData.sourceBranchColors[branchName]
   }
 
-  return '#888888'
+  // 生成一个基于分支名的稳定颜色
+  // 使用分支名作为唯一标识符来生成一个稳定的哈希值
+  let hash = 0;
+  for (let i = 0; i < branchName.length; i++) {
+    hash = ((hash << 5) - hash) + branchName.charCodeAt(i);
+    hash = hash & hash; // 转换为32位整数
+  }
+  
+  // 使用哈希值选择一个颜色
+  // 黄金比例法生成分散均匀的颜色
+  const hue = (hash % 360 + 360) % 360; // 确保是正数
+  return `hsl(${hue}, 70%, 45%)`; // 使用 HSL 颜色格式
 }
 
 // 解析Git引用字符串为数组
@@ -100,6 +116,33 @@ function handleDoubleClick() {
     console.error('Error sending commit details:', error)
   }
 }
+
+// 计算在当前提交处结束（不应向上延伸）的分支
+const branchEndingUp = computed(() => {
+  if (!props.graphData) return []
+  
+  const endingBranches = []
+  
+  // 当前提交的相关分支
+  if (props.graphData.branch) {
+    // 当前分支如果没有父提交，则结束于此
+    if (!props.commit.parents || props.commit.parents.length === 0) {
+      endingBranches.push(props.graphData.branch)
+    }
+  }
+  
+  // 源分支在此结束
+  if (props.graphData.sourceBranches && props.graphData.sourceBranches.length) {
+    props.graphData.sourceBranches.forEach(branch => {
+      // 如果源分支不等于主分支，则在此结束
+      if (branch !== props.graphData.branch) {
+        endingBranches.push(branch)
+      }
+    })
+  }
+  
+  return endingBranches
+})
 </script>
 
 <template>
@@ -117,7 +160,11 @@ function handleDoubleClick() {
             <span
               class="ref-item"
               :class="{ tag: ref.isTag, branch: !ref.isTag }"
-              :style="{ color: !ref.isTag ? getBranchColorFromGraphData(ref.name) : undefined, borderColor: !ref.isTag ? getBranchColorFromGraphData(ref.name) : undefined }"
+              :style="{ 
+                backgroundColor: !ref.isTag ? `${getBranchColorFromGraphData(ref.name)}20` : undefined,
+                color: !ref.isTag ? getBranchColorFromGraphData(ref.name) : undefined, 
+                borderColor: !ref.isTag ? getBranchColorFromGraphData(ref.name) : undefined 
+              }"
             >
               {{ ref.displayName }}
             </span>
@@ -126,7 +173,12 @@ function handleDoubleClick() {
       </template>
     </div>
     <div class="branch-col commit-cell" :style="{ width: `${columnWidths.branch}px` }">
-      <GitGraph :graph-data="graphData" :active-branches="activeBranches" :is-selected="isSelected" />
+      <GitGraph 
+        :graph-data="graphData" 
+        :active-branches="activeBranches" 
+        :is-selected="isSelected"
+        :branch-ending-up="branchEndingUp"
+      />
     </div>
     <span
       class="hash-col commit-cell" :style="{ width: `${columnWidths.hash}px` }" @mouseenter="hoveredCell = 'hash'"
@@ -231,6 +283,7 @@ function handleDoubleClick() {
 .branch-name-col {
   white-space: normal;
   overflow: visible;
+  padding: 0px;
 }
 
 .refs-container {

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

@@ -69,6 +69,30 @@ const activeBranches = computed(() => {
     }
   })
 
+  // 收集所有提交中的分支引用信息
+  props.commits.forEach(commit => {
+    if (commit.refs) {
+      const refsList = commit.refs.split(',').map(ref => ref.trim())
+      
+      refsList.forEach(ref => {
+        // 处理各种分支格式
+        if (!ref.includes('tag:') && !ref.includes('refs/tags/')) {
+          let branchName = ref
+          
+          // 清理分支名称
+          if (ref.includes('refs/heads/')) {
+            branchName = ref.replace('refs/heads/', '')
+          }
+          else if (ref.includes('refs/remotes/')) {
+            branchName = ref.replace('refs/remotes/', '')
+          }
+          
+          branches.add(branchName)
+        }
+      })
+    }
+  })
+
   return Array.from(branches)
 })