zen-gitsync 2.0.6 → 2.0.8

package/src/ui/client/src/components/LogList.vue

@@ -1,6 +1,20 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, watch } from 'vue'
-import { ElTable, ElTableColumn, ElTag, ElButton, ElSlider, ElDialog, ElSelect, ElOption, ElDatePicker, ElInput, ElBadge } from 'element-plus'
+import { ref, onMounted, computed, watch, onBeforeUnmount, nextTick } from 'vue'
+import { 
+  ElTable, 
+  ElTableColumn, 
+  ElTag, 
+  ElButton, 
+  ElSlider, 
+  ElDialog, 
+  ElSelect, 
+  ElOption, 
+  ElDatePicker, 
+  ElInput, 
+  ElBadge,
+  ElMessage,
+  ElMessageBox
+} from 'element-plus'
 import { RefreshRight, ZoomIn, ZoomOut, Filter, Document, TrendCharts, List, More } from '@element-plus/icons-vue'
 import 'element-plus/dist/index.css'
 import { createGitgraph } from '@gitgraph/js'
@@ -33,6 +47,12 @@ const totalCommits = ref(0)
 const showGraphView = ref(false)
 const graphContainer = ref<HTMLElement | null>(null)
 
+// 添加分页相关变量
+const currentPage = ref(1)
+const hasMoreData = ref(true)
+const isLoadingMore = ref(false)
+const loadTimerInterval = ref<number | null>(null)
+
 // 添加提交详情弹窗相关变量
 const commitDetailVisible = ref(false)
 const selectedCommit = ref<LogItem | null>(null)
@@ -52,68 +72,28 @@ const logRefreshed = ref(false)
 
 // 添加筛选相关变量
 const filterVisible = ref(false)
-const authorFilter = ref('')
+const authorFilter = ref<string[]>([])
 const messageFilter = ref('')
 const dateRangeFilter = ref<any>(null)
-const availableAuthors = computed(() => {
-  // 从日志中提取不重复的作者列表
-  const authors = new Set<string>()
-  logs.value.forEach(log => {
-    if (log.author) {
-      authors.add(log.author)
-    }
-  })
-  return Array.from(authors).sort()
-})
+const availableAuthors = ref<string[]>([])
+// 添加分支筛选
+const branchFilter = ref<string[]>([])
+const availableBranches = ref<string[]>([])
+
+// 添加右键菜单相关变量
+const contextMenuVisible = ref(false)
+const contextMenuTop = ref(0)
+const contextMenuLeft = ref(0)
+const selectedContextCommit = ref<LogItem | null>(null)
 
 // 应用筛选后的日志
 const filteredLogs = computed(() => {
-  if (!authorFilter.value && !messageFilter.value && !dateRangeFilter.value) {
-    return logs.value
-  }
-  
-  return logs.value.filter(log => {
-    // 作者筛选
-    if (authorFilter.value && log.author !== authorFilter.value) {
-      return false
-    }
-    
-    // 提交信息关键词筛选
-    if (messageFilter.value && !log.message.toLowerCase().includes(messageFilter.value.toLowerCase())) {
-      return false
-    }
-    
-    // 日期范围筛选
-    if (dateRangeFilter.value && dateRangeFilter.value.length === 2) {
-      const logDate = new Date(log.date)
-      const [startDateStr, endDateStr] = dateRangeFilter.value
-      
-      // 转换日期字符串为Date对象
-      const startDate = new Date(startDateStr)
-      const endDate = new Date(endDateStr)
-      
-      // 设置时间为一天的开始和结束，确保包含完整日期
-      startDate.setHours(0, 0, 0, 0)
-      endDate.setHours(23, 59, 59, 999)
-      
-      if (logDate < startDate || logDate > endDate) {
-        return false
-      }
-    }
-    
-    return true
-  })
+  // 不再在前端进行筛选，直接使用加载的日志
+  return logs.value;
 })
 
-// 重置筛选条件
-function resetFilters() {
-  authorFilter.value = ''
-  messageFilter.value = ''
-  dateRangeFilter.value = null
-}
-
 // 加载提交历史
-async function loadLog(all = false) {
+async function loadLog(all = false, page = 1) {
   // 从gitStore获取仓库状态
   const gitStore = useGitStore()
   
@@ -124,57 +104,86 @@ async function loadLog(all = false) {
   }
   
   try {
-    showAllCommits.value = all
+    // 设置加载状态
+    if (page > 1) {
+      isLoadingMore.value = true
+    } else {
+      localLoading.value = true
+    }
     
-    // 设置本地加载状态
-    localLoading.value = true
+    console.log(`加载提交历史: page=${page}, all=${all}`)
     
-    // 保留graph参数，但服务器端其实不做特殊处理
-    // 这样可以兼容之前的代码，避免大量修改
-    const url = all ? '/api/log?all=true&graph=true' : '/api/log?graph=true'
-    console.log(`加载日志数据: ${url}`)
+    // 构建查询参数
+    const queryParams = new URLSearchParams()
+    queryParams.append('page', page.toString())
+    queryParams.append('all', all.toString())
     
-    const response = await fetch(url)
-    const data = await response.json()
+    // 添加筛选参数
+    if (authorFilter.value.length > 0) {
+      queryParams.append('author', authorFilter.value.join(','))
+    }
     
-    // 清空现有数据
-    logsData.length = 0
+    // 添加分支筛选参数
+    if (branchFilter.value.length > 0) {
+      queryParams.append('branch', branchFilter.value.join(','))
+    }
     
-    // 更新本地数据
-    if (Array.isArray(data)) {
-      // 新的API格式，直接返回数组
-      console.log(`日志加载完成: 共${data.length}条记录`)
-      
-      // 填充logsData
-      data.forEach((item: LogItem) => logsData.push(item))
-      
-      totalCommits.value = data.length
-    } else if (data.log && Array.isArray(data.log)) {
-      // 旧版API格式，兼容处理
-      console.log(`日志加载完成: 共${data.log.length}条记录`)
-      
-      // 填充logsData
-      data.log.forEach((item: LogItem) => logsData.push(item))
-      
-      totalCommits.value = data.log.length
-    } else {
-      console.error('未知的日志数据格式:', data)
-      errorMessage.value = '日志数据格式错误'
+    if (messageFilter.value) {
+      queryParams.append('message', messageFilter.value)
+    }
+    
+    if (dateRangeFilter.value && Array.isArray(dateRangeFilter.value) && dateRangeFilter.value.length === 2) {
+      queryParams.append('dateFrom', dateRangeFilter.value[0])
+      queryParams.append('dateTo', dateRangeFilter.value[1])
+    }
+    
+    // 添加时间戳防止缓存
+    queryParams.append('_t', Date.now().toString())
+    
+    const response = await fetch(`/api/log?${queryParams.toString()}`)
+    const result = await response.json()
+    
+    // 确保result有正确的数据结构
+    if (!result || !result.data || !Array.isArray(result.data)) {
+      console.error('API返回的数据格式不正确:', result)
+      errorMessage.value = '加载提交历史失败: 服务器返回数据格式不正确'
       return
     }
     
-    // 确保logs.value也更新
+    const isLoadMore = page > 1
+    
+    // 处理结果
+    // 如果是加载更多，追加数据，否则替换数据
+    if (isLoadMore) {
+      result.data.forEach((item: LogItem) => logsData.push(item))
+    } else {
+      logsData.length = 0
+      result.data.forEach((item: LogItem) => logsData.push(item))
+    }
+    
+    // 强制重新渲染列表
     logs.value = [...logsData]
     
-    console.log(`logsData长度: ${logsData.length}`) // 添加调试日志
+    // 更新当前页码
+    currentPage.value = page
     
-    // 设置刷新提示状态
-    logRefreshed.value = true
-    // 2秒后隐藏提示
-    setTimeout(() => { logRefreshed.value = false }, 2000)
+    // 更新总数和分页标记
+    totalCommits.value = result.total || logsData.length
+    hasMoreData.value = result.hasMore === true
+    
+    if (!hasMoreData.value) {
+      console.log('已加载所有提交记录')
+    }
+    
+    // 设置刷新提示状态（仅在初次加载时）
+    if (!isLoadMore) {
+      logRefreshed.value = true
+      // 2秒后隐藏提示
+      setTimeout(() => { logRefreshed.value = false }, 2000)
+    }
     
-    // 加载完数据后渲染图表
-    if (showGraphView.value) {
+    // 加载完数据后渲染图表（仅在初次加载时）
+    if (!isLoadMore && showGraphView.value) {
       setTimeout(renderGraph, 0)
     }
     
@@ -182,9 +191,18 @@ async function loadLog(all = false) {
   } catch (error) {
     errorMessage.value = '加载提交历史失败: ' + (error instanceof Error ? error.message : String(error))
     console.error('加载日志失败:', error)
+    
+    // 如果加载更多失败，标记没有更多数据
+    if (page > 1) {
+      hasMoreData.value = false
+    }
   } finally {
-    // 重置本地加载状态
-    localLoading.value = false
+    // 重置加载状态
+    if (page > 1) {
+      isLoadingMore.value = false
+    } else {
+      localLoading.value = false
+    }
   }
 }
 
@@ -294,6 +312,59 @@ function getBranchTagType(ref: string) {
   return 'info'
 }
 
+// 添加对表格实例的引用
+const tableRef = ref<InstanceType<typeof ElTable> | null>(null)
+const tableBodyWrapper = ref<HTMLElement | null>(null)
+
+// 监听表格滚动事件的处理函数
+function handleTableScroll(event: Event) {
+  if (showGraphView.value || !hasMoreData.value || isLoadingMore.value || isLoading.value) {
+    return
+  }
+  
+  const target = event.target as HTMLElement
+  const { scrollTop, scrollHeight, clientHeight } = target
+  const scrollDistance = scrollHeight - scrollTop - clientHeight
+  
+  // 调试信息
+  console.log('表格滚动:', {
+    scrollTop,
+    scrollHeight,
+    clientHeight,
+    scrollDistance
+  })
+  
+  // 当滚动到距离底部20px时触发加载
+  if (scrollDistance <= 20) {
+    console.log('已滚动到底部，加载更多数据')
+    loadMoreLogs()
+  }
+}
+
+// 设置表格滚动监听
+function setupTableScrollListener() {
+  if (!tableRef.value) return
+  
+  // 获取表格的body-wrapper
+  tableBodyWrapper.value = tableRef.value.$el.querySelector('.el-table__body-wrapper')
+  
+  if (tableBodyWrapper.value) {
+    console.log('添加表格滚动监听')
+    tableBodyWrapper.value.addEventListener('scroll', handleTableScroll, true)
+  } else {
+    console.error('未找到表格的body-wrapper元素')
+  }
+}
+
+// 移除表格滚动监听
+function removeTableScrollListener() {
+  if (tableBodyWrapper.value) {
+    console.log('移除表格滚动监听')
+    tableBodyWrapper.value.removeEventListener('scroll', handleTableScroll, true)
+    tableBodyWrapper.value = null
+  }
+}
+
 onMounted(() => {
   // 检查gitLogStore中是否已有数据
   if (gitStore.isGitRepo) {
@@ -320,9 +391,33 @@ onMounted(() => {
       console.log('初始加载日志数据')
       loadLog()
     }
+    
+    // 加载所有可能的作者列表
+    fetchAllAuthors()
+    
+    // 加载所有可能的分支列表
+    fetchAllBranches()
   } else {
     errorMessage.value = '当前目录不是Git仓库'
   }
+  
+  // 在下一个tick中设置表格滚动监听
+  nextTick(() => {
+    setTimeout(() => {
+      setupTableScrollListener()
+    }, 500) // 给表格足够的时间来渲染
+  })
+})
+
+onBeforeUnmount(() => {
+  // 清除表格滚动监听
+  removeTableScrollListener()
+  
+  // 清除定时器
+  if (loadTimerInterval.value !== null) {
+    window.clearInterval(loadTimerInterval.value)
+    loadTimerInterval.value = null
+  }
 })
 
 // 简化刷新函数，只需调用loadLog即可
@@ -331,36 +426,49 @@ const refreshLog = () => {
     errorMessage.value = '当前目录不是Git仓库'
     return
   }
-  loadLog(showAllCommits.value)
+  // 重置页码，重新加载第一页
+  currentPage.value = 1
+  hasMoreData.value = true
+  loadLog(showAllCommits.value, 1)
 }
 
 // 监听store中的日志变化
 watch(() => gitLogStore.log, (newLogs) => {
   console.log('监听到gitLogStore.log变化，更新图表数据')
   
-  // 清空logsData
-  logsData.length = 0
-  
-  // 重新填充数据
-  newLogs.forEach((item: LogItem) => logsData.push(item))
-  
-  // 更新计数器
-  totalCommits.value = newLogs.length
-  
-  // 尝试解决logs.value赋值问题
   try {
-    // @ts-ignore - 忽略TypeScript错误
+    // 清空logsData
+    logsData.length = 0
+    
+    // 重新填充数据，使用类型断言
+    if (Array.isArray(newLogs)) {
+      // @ts-ignore - 忽略类型校验
+      newLogs.forEach(item => item && logsData.push(item))
+    }
+    
+    // 更新计数器
+    totalCommits.value = logsData.length
+    
+    // 重置当前页为第1页
+    currentPage.value = 1
+    
+    // 确保引用更新，触发UI重渲染
+    // @ts-ignore - 忽略类型校验
     logs.value = [...logsData]
+    
+    // 设置刷新提示
+    logRefreshed.value = true
+    setTimeout(() => { logRefreshed.value = false }, 2000)
+    
+    console.log(`数据更新完成，共${logs.value.length}条记录，准备渲染图表`)
+    
+    if (showGraphView.value && logsData.length > 0) {
+      setTimeout(renderGraph, 0)
+    }
   } catch (error) {
-    console.warn('无法更新logs.value:', error)
+    console.error('更新日志数据失败:', error)
   }
-  
-  console.log(`数据更新完成，准备渲染图表(${logsData.length}条记录)`)
-  
-  if (showGraphView.value && logsData.length > 0) {
-    setTimeout(renderGraph, 0)
-  }
-})
+}, { immediate: true })
 
 // 暴露方法给父组件
 defineExpose({
@@ -417,7 +525,9 @@ function fitGraphToContainer() {
 }
 
 // 查看提交详情
-async function viewCommitDetail(commit: LogItem) {
+async function viewCommitDetail(commit: LogItem | null) {
+  if (!commit) return
+  
   selectedCommit.value = commit
   commitDetailVisible.value = true
   isLoadingCommitDetail.value = true
@@ -547,6 +657,232 @@ function formatCommitMessage(message: string) {
   // 返回格式化后的提交信息，保留换行符
   return message.trim();
 }
+
+// 加载更多日志
+function loadMoreLogs() {
+  if (!hasMoreData.value || isLoadingMore.value || isLoading.value) return
+  
+  console.log(`加载更多日志，页码: ${currentPage.value + 1}`)
+  loadLog(showAllCommits.value, currentPage.value + 1)
+}
+
+// 重置筛选条件并重新加载数据
+function resetFilters() {
+  authorFilter.value = []
+  branchFilter.value = []
+  messageFilter.value = ''
+  dateRangeFilter.value = null
+  
+  // 重置筛选后重新加载数据
+  currentPage.value = 1
+  loadLog(showAllCommits.value, 1)
+}
+
+// 应用筛选条件
+function applyFilters() {
+  // 应用筛选时重置到第一页
+  currentPage.value = 1
+  loadLog(showAllCommits.value, 1)
+}
+
+// 添加获取所有作者的函数
+async function fetchAllAuthors() {
+  try {
+    console.log('获取所有可用作者...')
+    const response = await fetch('/api/authors')
+    const result = await response.json()
+    
+    if (result.success && Array.isArray(result.authors)) {
+      // 更新可用作者列表
+      availableAuthors.value = result.authors.sort()
+      console.log(`获取到${availableAuthors.value.length}位作者`)
+    } else {
+      // 如果获取作者列表失败，但正常获取了日志
+      // 从当前加载的日志中提取作者列表作为备选
+      console.warn('从API获取作者列表失败，将从现有日志中提取作者列表')
+      extractAuthorsFromLogs()
+    }
+  } catch (error) {
+    console.error('获取作者列表失败:', error)
+    // 从当前加载的日志中提取作者列表作为备选
+    extractAuthorsFromLogs()
+  }
+}
+
+// 从已加载的日志中提取作者列表
+function extractAuthorsFromLogs() {
+  const authors = new Set<string>()
+  logs.value.forEach(log => {
+    if (log.author) {
+      authors.add(log.author)
+    }
+  })
+  availableAuthors.value = Array.from(authors).sort()
+  console.log(`从现有日志中提取了${availableAuthors.value.length}位作者`)
+}
+
+// 添加获取所有分支的函数
+async function fetchAllBranches() {
+  try {
+    console.log('获取所有可用分支...')
+    const response = await fetch('/api/branches')
+    const result = await response.json()
+    
+    if (result.branches && Array.isArray(result.branches)) {
+      // 更新可用分支列表
+      availableBranches.value = result.branches.sort()
+      console.log(`获取到${availableBranches.value.length}个分支`)
+    } else {
+      console.warn('获取分支列表失败')
+      extractBranchesFromLogs()
+    }
+  } catch (error) {
+    console.error('获取分支列表失败:', error)
+    extractBranchesFromLogs()
+  }
+}
+
+// 从日志中提取分支
+function extractBranchesFromLogs() {
+  // 从当前加载的日志中提取唯一的分支名称
+  const branches = new Set<string>()
+  
+  logs.value.forEach(log => {
+    if (log.branch) {
+      // 分支可能是逗号分隔的多个引用
+      const refs = log.branch.split(',')
+      refs.forEach(ref => {
+        const branch = formatBranchName(ref.trim())
+        if (branch) {
+          branches.add(branch)
+        }
+      })
+    }
+  })
+  
+  availableBranches.value = Array.from(branches).sort()
+  console.log(`从日志中提取了${availableBranches.value.length}个分支`)
+}
+
+// 处理右键菜单事件
+function handleContextMenu(row: LogItem, column: any, event: MouseEvent) {
+  console.log('handleContextMenu', row, column, event)
+  // 阻止默认右键菜单
+  event.preventDefault()
+  
+  // 设置右键菜单位置
+  contextMenuTop.value = event.clientY
+  contextMenuLeft.value = event.clientX
+  
+  // 设置选中的提交
+  selectedContextCommit.value = row
+  
+  // 显示右键菜单
+  contextMenuVisible.value = true
+  
+  // 点击其他地方时隐藏菜单
+  const hideContextMenu = () => {
+    contextMenuVisible.value = false
+    document.removeEventListener('click', hideContextMenu)
+  }
+  
+  // 添加点击监听器
+  setTimeout(() => {
+    document.addEventListener('click', hideContextMenu)
+  }, 0)
+}
+
+// 撤销提交 (Revert)
+async function revertCommit(commit: LogItem | null) {
+  if (!commit) return
+  
+  try {
+    // 询问确认
+    await ElMessageBox.confirm(
+      `确定要撤销提交 ${commit.hash.substring(0, 7)} 吗？这将创建一个新的提交来撤销这次提交的更改。`,
+      '撤销提交确认',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+    
+    // 发送请求
+    const response = await fetch('/api/revert-commit', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ hash: commit.hash })
+    })
+    
+    const result = await response.json()
+    
+    if (result.success) {
+      ElMessage.success(result.message || '已成功撤销提交')
+      // 刷新日志
+      refreshLog()
+      // 刷新Git状态
+      gitLogStore.fetchStatus()
+      // 添加: 刷新分支状态
+      gitStore.getBranchStatus()
+    } else {
+      ElMessage.error(result.error || '撤销提交失败')
+    }
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      console.error('撤销提交出错:', error)
+      ElMessage.error('撤销提交失败: ' + (error.message || error))
+    }
+  }
+}
+
+// Cherry-pick提交
+async function cherryPickCommit(commit: LogItem | null) {
+  if (!commit) return
+  
+  try {
+    // 询问确认
+    await ElMessageBox.confirm(
+      `确定要将提交 ${commit.hash.substring(0, 7)} Cherry-Pick 到当前分支吗？`,
+      'Cherry-Pick确认',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+    
+    // 发送请求
+    const response = await fetch('/api/cherry-pick-commit', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ hash: commit.hash })
+    })
+    
+    const result = await response.json()
+    
+    if (result.success) {
+      ElMessage.success(result.message || '已成功Cherry-Pick提交')
+      // 刷新日志
+      refreshLog()
+      // 刷新Git状态
+      gitLogStore.fetchStatus()
+      // 添加: 刷新分支状态
+      gitStore.getBranchStatus()
+    } else {
+      ElMessage.error(result.error || 'Cherry-Pick提交失败')
+    }
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      console.error('Cherry-Pick提交出错:', error)
+      ElMessage.error('Cherry-Pick提交失败: ' + (error.message || error))
+    }
+  }
+}
 </script>
 
 <template>
@@ -558,8 +894,38 @@ function formatCommitMessage(message: string) {
     
     <!-- 固定头部区域 -->
     <div class="log-header">
-      <h2>提交历史</h2>
+      <div class="header-left">
+        <h2>提交历史</h2>
+        <!-- <el-tag type="info" effect="plain" size="small" class="record-count" v-if="!showGraphView">
+          <template #icon>
+            <el-icon><Document /></el-icon>
+          </template>
+          {{ filteredLogs.length }}/{{ logs.length }}
+          <el-tag v-if="!showAllCommits" type="warning" size="small" effect="plain" style="margin-left: 5px">
+            分页加载 (每页100条)
+          </el-tag>
+          <el-tag v-else type="success" size="small" effect="plain" style="margin-left: 5px">
+            全部
+          </el-tag>
+        </el-tag> -->
+      </div>
+      
       <div class="log-actions">
+        <!-- 筛选按钮移到这里 -->
+        <el-button
+          v-if="!showGraphView" 
+          :type="filterVisible ? 'primary' : 'default'"
+          size="small" 
+          @click="filterVisible = !filterVisible"
+        >
+          <template #icon>
+            <el-icon><Filter /></el-icon>
+          </template>
+          筛选
+          <el-badge v-if="filteredLogs.length !== logs.length" :value="filteredLogs.length" class="filter-badge" />
+        </el-button>
+        
+        <!-- 原有的按钮 -->
         <el-button 
           type="primary" 
           size="small"
@@ -579,7 +945,7 @@ function formatCommitMessage(message: string) {
           <template #icon>
             <el-icon><component :is="showAllCommits ? List : More" /></el-icon>
           </template>
-          {{ showAllCommits ? '显示最近30条' : '显示所有提交' }}
+          {{ showAllCommits ? '显示分页加载 (每页100条)' : '显示所有提交' }}
         </el-button>
         <el-button 
           circle 
@@ -593,14 +959,90 @@ function formatCommitMessage(message: string) {
       </div>
     </div>
     
+    <!-- 筛选面板放在头部下方，但在内容区域之前 -->
+    <div v-if="filterVisible && !showGraphView" class="filter-panel-header">
+      <div class="filter-form">
+        <div class="filter-item">
+          <div class="filter-label">作者:</div>
+          <el-select 
+            v-model="authorFilter" 
+            placeholder="选择作者" 
+            multiple
+            clearable 
+            filterable
+            class="filter-input"
+            size="small"
+          >
+            <el-option 
+              v-for="author in availableAuthors" 
+              :key="author" 
+              :label="author" 
+              :value="author"
+            />
+          </el-select>
+        </div>
+        
+        <div class="filter-item">
+          <div class="filter-label">分支:</div>
+          <el-select 
+            v-model="branchFilter" 
+            placeholder="选择分支" 
+            multiple
+            clearable 
+            filterable
+            class="filter-input"
+            size="small"
+          >
+            <el-option 
+              v-for="branch in availableBranches" 
+              :key="branch" 
+              :label="branch" 
+              :value="branch"
+            />
+          </el-select>
+        </div>
+        
+        <div class="filter-item">
+          <div class="filter-label">提交信息包含:</div>
+          <el-input 
+            v-model="messageFilter" 
+            placeholder="关键词" 
+            clearable 
+            class="filter-input"
+            size="small"
+          />
+        </div>
+        
+        <div class="filter-item">
+          <div class="filter-label">日期范围:</div>
+          <el-date-picker
+            v-model="dateRangeFilter"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY-MM-DD"
+            value-format="YYYY-MM-DD"
+            class="filter-input date-range"
+            size="small"
+          />
+        </div>
+        
+        <div class="filter-actions">
+          <el-button type="primary" size="small" @click="applyFilters">应用筛选</el-button>
+          <el-button type="info" size="small" @click="resetFilters">重置</el-button>
+        </div>
+      </div>
+    </div>
+    
     <!-- 内容区域，添加上边距以避免被固定头部遮挡 -->
-    <div class="content-area">
+    <div class="content-area" :class="{'with-filter': filterVisible && !showGraphView}">
       <div v-if="errorMessage">{{ errorMessage }}</div>
       <div v-else>
         <!-- 图表视图 -->
         <div v-if="showGraphView" class="graph-view">
           <div class="commit-count" v-if="logsData.length > 0">
-            显示 {{ logsData.length }} 条提交记录 {{ showAllCommits ? '(全部)' : '(最近30条)' }}
+            显示 {{ logsData.length }} 条提交记录 {{ showAllCommits ? '(全部)' : '(分页加载，每页100条)' }}
           </div>
           
           <!-- 添加缩放控制 -->
@@ -653,92 +1095,8 @@ function formatCommitMessage(message: string) {
         </div>
         
         <!-- 表格视图 -->
-        <div v-else>
-          <div class="history-controls">
-            <div class="history-stats">
-              <el-tag type="info" effect="plain" size="large" class="record-count">
-                <template #icon>
-                  <el-icon><Document /></el-icon>
-                </template>
-                显示 {{ filteredLogs.length }}/{{ logs.length }} 条记录 
-                <el-tag v-if="!showAllCommits" type="warning" size="small" effect="plain" style="margin-left: 5px">
-                  最近30条
-                </el-tag>
-                <el-tag v-else type="success" size="small" effect="plain" style="margin-left: 5px">
-                  全部
-                </el-tag>
-              </el-tag>
-            </div>
-            
-            <div class="filter-actions">
-              <el-button 
-                :type="filterVisible ? 'primary' : 'default'"
-                size="default" 
-                @click="filterVisible = !filterVisible"
-              >
-                <template #icon>
-                  <el-icon>
-                    <Filter />
-                  </el-icon>
-                </template>
-                筛选
-                <el-badge v-if="filteredLogs.length !== logs.length" :value="filteredLogs.length" class="filter-badge" />
-              </el-button>
-            </div>
-          </div>
-          
-          <!-- 筛选条件面板 -->
-          <div v-if="filterVisible" class="filter-panel">
-            <div class="filter-form">
-              <div class="filter-item">
-                <div class="filter-label">作者:</div>
-                <el-select 
-                  v-model="authorFilter" 
-                  placeholder="选择作者" 
-                  clearable 
-                  filterable
-                  class="filter-input"
-                >
-                  <el-option 
-                    v-for="author in availableAuthors" 
-                    :key="author" 
-                    :label="author" 
-                    :value="author"
-                  />
-                </el-select>
-              </div>
-              
-              <div class="filter-item">
-                <div class="filter-label">提交信息包含:</div>
-                <el-input 
-                  v-model="messageFilter" 
-                  placeholder="关键词" 
-                  clearable 
-                  class="filter-input"
-                />
-              </div>
-              
-              <div class="filter-item">
-                <div class="filter-label">日期范围:</div>
-                <el-date-picker
-                  v-model="dateRangeFilter"
-                  type="daterange"
-                  range-separator="至"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  format="YYYY-MM-DD"
-                  value-format="YYYY-MM-DD"
-                  class="filter-input date-range"
-                />
-              </div>
-              
-              <div class="filter-actions">
-                <el-button type="info" size="small" @click="resetFilters">重置</el-button>
-              </div>
-            </div>
-          </div>
-          
-          <el-table :data="filteredLogs" style="width: 100%" stripe border v-loading="isLoading">
+        <div v-else class="table-view-container">
+                              <el-table             ref="tableRef"            :data="filteredLogs"             stripe             border             v-loading="isLoading"            class="log-table"            :empty-text="isLoading ? '加载中...' : '没有匹配的提交记录'"            height="500"            @row-contextmenu="handleContextMenu"          >
             <el-table-column label="提交哈希" width="100" resizable>
               <template #default="scope">
                 <span class="commit-hash" @click="viewCommitDetail(scope.row)">{{ scope.row.hash.substring(0, 7) }}</span>
@@ -769,6 +1127,26 @@ function formatCommitMessage(message: string) {
             </el-table-column>
             <el-table-column prop="message" label="提交信息" min-width="250" />
           </el-table>
+          
+          <!-- 添加底部加载状态和加载更多按钮 -->
+          <div v-if="!showAllCommits" class="load-more-container">
+            <!-- 显示加载状态和页码信息 -->
+            <div class="pagination-info">
+              <span>第 {{ currentPage }} 页 {{ totalCommits > 0 ? `/ 共 ${Math.ceil(totalCommits / 100) || 1} 页` : '' }} (总计 {{ totalCommits }} 条记录)</span>
+            </div>
+            
+            <div v-if="isLoadingMore" class="loading-more">
+              <div class="loading-spinner"></div>
+              <span>加载更多...</span>
+            </div>
+            <div v-else-if="hasMoreData" class="load-more-button" @click="loadMoreLogs">
+              <span>加载更多</span>
+            </div>
+            <div v-else class="no-more-data">
+              <span>没有更多数据了</span>
+              <span v-if="logs.length > 0" class="total-loaded">（已加载 {{ logs.length }} 条记录）</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -828,11 +1206,7 @@ function formatCommitMessage(message: string) {
           </div>
         </div>
       </div>
-    </el-dialog>
-  </div>
-</template>
-
-<style scoped>
+          </el-dialog>    </div>        <!-- 添加右键菜单 -->    <div       v-show="contextMenuVisible"       class="context-menu"       :style="{ top: contextMenuTop + 'px', left: contextMenuLeft + 'px' }"    >      <div class="context-menu-item" @click="viewCommitDetail(selectedContextCommit)">        <i class="el-icon-view"></i> 查看详情      </div>      <div class="context-menu-item" @click="revertCommit(selectedContextCommit)">        <i class="el-icon-delete"></i> 撤销提交 (Revert)      </div>      <div class="context-menu-item" @click="cherryPickCommit(selectedContextCommit)">        <i class="el-icon-edit"></i> Cherry-Pick 到当前分支      </div>    </div></template><style scoped>
 .card {
   background-color: white;
   border-radius: 8px;
@@ -857,6 +1231,13 @@ function formatCommitMessage(message: string) {
   top: 0;
   z-index: 100;
   height: 36px;
+  flex-shrink: 0; /* 防止头部被压缩 */
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .log-header h2 {
@@ -871,11 +1252,23 @@ function formatCommitMessage(message: string) {
 }
 
 .content-area {
-  padding: 0 20px 20px 20px;
-  overflow-y: auto;
+  padding: 10px 0;
   flex: 1;
   min-height: 100px;
   height: calc(100% - 52px);
+  display: flex;
+  flex-direction: column;
+}
+
+.content-area.with-filter {
+  height: calc(100% - 52px - 60px); /* 减去header高度和filter高度 */
+}
+
+/* 确保内容区域内的直接子元素占满高度 */
+.content-area > div {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 /* 优化表格区域 */
@@ -909,10 +1302,18 @@ function formatCommitMessage(message: string) {
   text-align: right;
 }
 
+.graph-view {
+  width: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
 .graph-container {
   width: 100%;
-  height: 600px;
-  overflow: auto;
+  flex: 1;
+  min-height: 500px;
   border: 1px solid #ebeef5;
   border-radius: 4px;
   padding: 10px;
@@ -925,10 +1326,6 @@ function formatCommitMessage(message: string) {
   transition: transform 0.2s ease;
 }
 
-.graph-view {
-  width: 100%;
-}
-
 .graph-controls {
   display: flex;
   justify-content: space-between;
@@ -1181,7 +1578,7 @@ function formatCommitMessage(message: string) {
 
 /* 减小对话框的顶部边距 */
 :deep(.commit-detail-dialog) {
-  --el-dialog-margin-top: 5vh;
+  --el-dialog-margin-top: 7vh;
 }
 
 .history-controls {
@@ -1190,6 +1587,17 @@ function formatCommitMessage(message: string) {
   align-items: center;
   margin-bottom: 15px;
   padding: 0;
+  position: sticky;
+  top: 52px; /* 与 log-header 的高度匹配 */
+  z-index: 90;
+  background-color: white;
+  padding: 5px 0;
+  transition: box-shadow 0.3s ease, background-color 0.3s ease, padding 0.2s ease;
+}
+
+/* 当滚动时添加微妙的阴影效果 */
+.content-area:not(:hover) .history-controls:not(:hover) {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
 
 .history-stats {
@@ -1220,6 +1628,19 @@ function formatCommitMessage(message: string) {
   margin-bottom: 15px;
   border: 1px solid #e4e7ed;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  position: sticky;
+  top: 98px; /* history-controls的高度(36px) + padding(10px) + log-header的高度(52px) */
+  z-index: 89; /* 比history-controls低一点 */
+  transition: box-shadow 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
+}
+
+/* 当滚动时增强视觉效果 */
+.content-area:not(:hover) .filter-panel:not(:hover) {
+  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.1);
+}
+
+.filter-panel:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }
 
 .filter-form {
@@ -1254,9 +1675,272 @@ function formatCommitMessage(message: string) {
   align-items: center;
   gap: 10px;
 }
+
+/* 表格样式 */
+.log-table {
+  transition: margin-top 0.3s ease;
+  min-height: 200px; /* 确保表格有最小高度 */
+  height: 100%; /* 填充可用空间 */
+}
+
+/* 为带筛选面板的表格添加顶部边距 */
+.log-table.has-filter {
+  margin-top: 10px;
+}
+
+/* 当控件固定时增加表格上边距 */
+.log-table.has-sticky-controls {
+  margin-top: 52px !important; /* controls 高度 + 一些额外空间 */
+}
+
+/* 当筛选面板固定时再增加表格上边距 */
+.log-table.has-sticky-filter {
+  margin-top: 140px !important; /* 筛选面板高度 + controls 高度 + 一些额外空间 */
+}
+
+/* 表格为空时的样式 */
+.el-table__empty-block {
+  min-height: 200px;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 确保表格容器占满可用空间 */
+.content-area > div:not(.graph-view) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* 表格视图容器 */
+.table-view-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.log-table {
+  width: 100%;
+  flex: 1;
+}
+
+/* 表格容器样式 */
+.table-view-container .el-table {
+  flex: 1;
+  width: 100%;
+}
+
+.table-view-container .el-table__inner-wrapper {
+  width: 100%;
+}
+
+.table-view-container .el-table__body-wrapper {
+  width: 100%;
+}
+
+.filter-panel.filter-sticky {
+  background-color: rgba(245, 247, 250, 0.97);
+  backdrop-filter: blur(4px);
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
+  border-top: none;
+}
+
+.history-controls.controls-sticky {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  background-color: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(4px);
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* 筛选面板头部样式 */
+.filter-panel-header {
+  background-color: #f5f7fa;
+  padding: 10px 16px;
+  border-bottom: 1px solid #e4e7ed;
+  position: sticky;
+  top: 36px; /* 紧贴log-header下方 */
+  z-index: 99;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+  margin-bottom: 0; /* 移除底部边距 */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.filter-panel-header .filter-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+
+.filter-panel-header .filter-item {
+  margin-right: 12px;
+}
+
+.filter-panel-header .filter-label {
+  font-size: 12px;
+  color: #606266;
+  margin-bottom: 4px;
+}
+
+.filter-panel-header .filter-input {
+  width: 180px;
+}
+
+.filter-panel-header .filter-input.date-range {
+  width: 320px;
+}
+
+.content-area.with-filter {
+  height: calc(100% - 52px - 60px); /* 减去header高度和filter高度 */
+}
+
+/* 记录计数标签 */
+.record-count {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  padding-left: 8px;
+  padding-right: 8px;
+  margin-left: 8px;
+}
+
+.record-count :deep(.el-icon) {
+  margin-right: 4px;
+  font-size: 12px;
+}
+
+/* 表格视图容器简化 */
+.table-view-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 400px; /* 确保至少有一定高度 */
+}
+
+.log-table {
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
+  flex: 1;
+}
+
+/* 重置或移除不再需要的样式 */
+.history-controls,
+.filter-panel {
+  display: none; /* 隐藏原来的筛选组件 */
+}
+
+.log-table.has-filter,
+.log-table.has-sticky-controls,
+.log-table.has-sticky-filter {
+  margin-top: 0 !important; /* 重置原来的边距 */
+}
+
+/* 添加底部加载更多相关样式 */
+.load-more-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 15px 0;
+  border-top: 1px dashed #ebeef5;
+  gap: 10px;
+  display: none;
+}
+
+.pagination-info {
+  font-size: 13px;
+  color: #909399;
+  margin-bottom: 5px;
+}
+
+.loading-more {
+  display: flex;
+  align-items: center;
+  color: #909399;
+  font-size: 14px;
+}
+
+.loading-spinner {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+  border: 2px solid #dcdfe6;
+  border-top-color: #409eff;
+  border-radius: 50%;
+  animation: spinner 1s linear infinite;
+}
+
+@keyframes spinner {
+  to {transform: rotate(360deg);}
+}
+
+.load-more-button {
+  cursor: pointer;
+  color: #409eff;
+  font-size: 14px;
+  padding: 6px 16px;
+  border: 1px solid #d9ecff;
+  background-color: #ecf5ff;
+  border-radius: 4px;
+  transition: all 0.3s;
+}
+
+.load-more-button:hover {
+  background-color: #d9ecff;
+}
+
+.no-more-data {
+  color: #909399;
+  font-size: 14px;
+  font-style: italic;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.total-loaded {
+  font-size: 12px;
+  margin-top: 5px;
+  color: #c0c4cc;
+}
+
+/* 右键菜单样式 */
+.context-menu {
+  position: fixed;
+  background: white;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  padding: 8px 0;
+  z-index: 3000;
+  min-width: 180px;
+}
+
+.context-menu-item {
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.context-menu-item:hover {
+  background-color: #f5f7fa;
+}
+
+.context-menu-item i {
+  margin-right: 8px;
+}
 </style>
 
 /* 添加表格列调整样式 */
+<style>
 .el-table .el-table__cell .cell {
   word-break: break-all;
-}
+}
+</style>