feat: dnd resize the column width

Author: zhangmo8

src/views/history/components/CommitTable.vue

@@ -25,6 +25,75 @@ const currentPage = ref(1)
 const observer = ref<IntersectionObserver | null>(null)
 const loadingTriggerRef = ref<HTMLElement | null>(null)
 
+// 列宽度状态
+const columnWidths = ref({
+  hash: 80,
+  message: 400, // 给定初始宽度，不再使用 flex: 1
+  stats: 140,
+  author: 120,
+  date: 160,
+})
+
+// 拖拽状态
+const isDragging = ref(false)
+const currentColumn = ref('')
+const startX = ref(0)
+const startWidth = ref(0)
+
+function handleDragStart(e: MouseEvent, column: string) {
+  e.preventDefault()
+  e.stopPropagation()
+
+  isDragging.value = true
+  currentColumn.value = column
+  startX.value = e.clientX
+  startWidth.value = columnWidths.value[column]
+
+  document.addEventListener('mousemove', handleDragging, { passive: false })
+  document.addEventListener('mouseup', handleDragEnd, { once: true })
+  document.addEventListener('mouseleave', handleDragEnd, { once: true })
+  document.addEventListener('keydown', handleKeyDown)
+
+  document.body.style.userSelect = 'none'
+  document.body.style.cursor = 'col-resize'
+}
+
+function handleDragging(e: MouseEvent) {
+  if (!isDragging.value) {
+    handleDragEnd()
+    return
+  }
+
+  e.preventDefault()
+  e.stopPropagation()
+
+  const diff = e.clientX - startX.value
+  const newWidth = Math.max(100, startWidth.value + diff)
+  columnWidths.value[currentColumn.value] = newWidth
+}
+
+function handleKeyDown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    handleDragEnd()
+  }
+}
+
+function handleDragEnd() {
+  if (!isDragging.value)
+    return
+
+  isDragging.value = false
+  currentColumn.value = ''
+
+  document.removeEventListener('mousemove', handleDragging)
+  document.removeEventListener('mouseup', handleDragEnd)
+  document.removeEventListener('mouseleave', handleDragEnd)
+  document.removeEventListener('keydown', handleKeyDown)
+
+  document.body.style.userSelect = ''
+  document.body.style.cursor = ''
+}
+
 function handleCommitClick(commit: Commit & { date: string }) {
   try {
     if (window.vscode) {
@@ -93,18 +162,51 @@ onUnmounted(() => {
   if (observer.value) {
     observer.value.disconnect()
   }
+  if (isDragging.value) {
+    handleDragEnd()
+  }
 })
 </script>
 
 <template>
   <div class="git-graph">
-    <ul class="commit-list">
+    <ul class="commit-list" :class="{ dragging: isDragging }">
       <li class="commit-header">
-        <span class="hash-col">CommitId</span>
-        <span class="message-col">Message</span>
-        <span class="stats-col">Changes</span>
-        <span class="author">Author</span>
-        <span class="date">Date</span>
+        <span class="hash-col column-header" :style="{ width: `${columnWidths.hash}px` }">
+          CommitId
+          <div
+            class="resize-handle"
+            :class="{ active: currentColumn === 'hash' }"
+            @mousedown="handleDragStart($event, 'hash')"
+          />
+        </span>
+        <span class="message-col column-header" :style="{ width: `${columnWidths.message}px` }">
+          Message
+          <div
+            class="resize-handle"
+            :class="{ active: currentColumn === 'message' }"
+            @mousedown="handleDragStart($event, 'message')"
+          />
+        </span>
+        <span class="stats-col column-header" :style="{ width: `${columnWidths.stats}px` }">
+          Changes
+          <div
+            class="resize-handle"
+            :class="{ active: currentColumn === 'stats' }"
+            @mousedown="handleDragStart($event, 'stats')"
+          />
+        </span>
+        <span class="author column-header" :style="{ width: `${columnWidths.author}px` }">
+          Author
+          <div
+            class="resize-handle"
+            :class="{ active: currentColumn === 'author' }"
+            @mousedown="handleDragStart($event, 'author')"
+          />
+        </span>
+        <span class="date column-header">
+          Date
+        </span>
       </li>
       <li
         v-for="commit in visibleCommits"
@@ -113,17 +215,17 @@ onUnmounted(() => {
         @click="handleCommitClick(commit)"
         @dblclick="handleDoubleClick"
       >
-        <span class="hash-col">{{ commit.hash.substring(0, 7) }}</span>
-        <span class="message-col">{{ commit.message }}</span>
-        <span class="stats-col">
+        <span class="hash-col" :style="{ width: `${columnWidths.hash}px` }">{{ commit.hash.substring(0, 7) }}</span>
+        <span class="message-col" :style="{ width: `${columnWidths.message}px` }">{{ commit.message }}</span>
+        <span class="stats-col" :style="{ width: `${columnWidths.stats}px` }">
           <span v-if="commit.stats" class="commit-stats">
             <span class="files">{{ commit.stats.files }} files</span>
             <span v-if="commit.stats.additions" class="additions">+{{ commit.stats.additions }}</span>
             <span v-if="commit.stats.deletions" class="deletions">-{{ commit.stats.deletions }}</span>
           </span>
         </span>
-        <span class="author">{{ commit.authorName }}</span>
-        <span class="date">{{ commit.date }}</span>
+        <span class="author" :style="{ width: `${columnWidths.author}px` }">{{ commit.authorName }}</span>
+        <span class="date" :style="{ width: `${columnWidths.date}px` }">{{ commit.date }}</span>
       </li>
       <li ref="loadingTriggerRef" class="loading-trigger">
         <div v-if="visibleCommits.length < graphData.length" class="loading-text">
@@ -148,80 +250,113 @@ onUnmounted(() => {
   list-style: none;
   font-size: var(--vscode-font-size);
   color: var(--vscode-foreground);
+  min-width: min-content;
 }
 
 .commit-header {
   position: sticky;
   top: 0;
   display: flex;
   align-items: center;
-  padding: 8px;
   background-color: var(--vscode-sideBar-background);
   border-bottom: 1px solid var(--vscode-panel-border);
   font-weight: bold;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+  z-index: 2;
 }
 
 .commit-row {
   display: flex;
   align-items: center;
-  padding: 8px;
   border-bottom: 1px solid var(--vscode-panel-border);
   cursor: pointer;
-  gap: 5px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px;
 }
 
 .commit-row:hover {
   background-color: var(--vscode-list-hoverBackground);
 }
 
-.hash-col {
-  width: 80px;
-  padding-right: 8px;
+.column-header,
+.hash-col,
+.message-col,
+.stats-col,
+.author,
+.date {
+  position: relative;
+  box-sizing: border-box;
+  padding: 0 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: flex;
+  align-items: center;
 }
 
-.commit-row .hash-col {
-  color: var(--vscode-gitDecoration-addedResourceForeground);
+.column-header {
+  user-select: none;
 }
 
-.commit-row .hash-col:hover {
-  text-decoration: underline;
+.hash-col {
+  width: 80px;
+  color: var(--vscode-gitDecoration-addedResourceForeground);
 }
 
 .message-col {
-  flex: 1;
-  padding-right: 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  min-width: 100px;
 }
 
 .stats-col {
   width: 140px;
-  padding-right: 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .author {
   width: 120px;
-  padding-right: 8px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .date {
   width: 160px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  padding-right: 16px;
   color: var(--vscode-descriptionForeground);
 }
 
+.resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  cursor: col-resize;
+  background: var(--vscode-scrollbarSlider-hoverBackground);
+  opacity: 0.6;
+  z-index: 1;
+  transition: background-color 0.1s ease;
+}
+
+.resize-handle:hover {
+  background: var(--vscode-activityBar-activeBorder);
+  opacity: 0.8;
+}
+
+.resize-handle.active {
+  background: var(--vscode-activityBar-activeBorder);
+  opacity: 1;
+}
+
+.commit-list.dragging {
+  cursor: col-resize;
+}
+
+.commit-list.dragging .resize-handle.active {
+  display: block;
+  background: var(--vscode-activityBar-activeBorder);
+  opacity: 1;
+}
+
 .commit-stats {
   display: inline-flex;
   gap: 8px;
@@ -238,17 +373,12 @@ onUnmounted(() => {
 }
 
 .loading-trigger {
-  text-align: center;
   padding: 8px;
+  text-align: center;
 }
 
 .loading-text {
   font-size: 12px;
   color: var(--vscode-descriptionForeground);
 }
-
-/* Ensure the graph lines remain visible when hovering */
-.commit-row:hover .commit-line {
-  opacity: 0.8;
-}
 </style>