zen-gitsync 2.0.5 → 2.0.7

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

@@ -1,7 +1,21 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, watch } from 'vue'
-import { ElTable, ElTableColumn, ElTag, ElButton, ElSlider } from 'element-plus'
-import { RefreshRight, ZoomIn, ZoomOut } from '@element-plus/icons-vue'
+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'
 import { useGitLogStore } from '../stores/gitLogStore'
@@ -30,9 +44,23 @@ const localLoading = ref(false)
 const isLoading = computed(() => gitLogStore.isLoadingLog || localLoading.value)
 const showAllCommits = ref(false)
 const totalCommits = ref(0)
-const showGraphView = ref(true)
+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)
+const commitFiles = ref<string[]>([])
+const commitDiff = ref('')
+const isLoadingCommitDetail = ref(false)
+const selectedCommitFile = ref('')
+
 // 添加图表缩放控制
 const graphScale = ref(1)
 const minScale = 0.5
@@ -42,8 +70,27 @@ const scaleStep = 0.1
 // 添加日志被刷新的提示状态
 const logRefreshed = ref(false)
 
+// 添加筛选相关变量
+const filterVisible = ref(false)
+const authorFilter = ref<string[]>([])
+const messageFilter = ref('')
+const dateRangeFilter = ref<any>(null)
+const availableAuthors = ref<string[]>([])
+
+// 添加右键菜单相关变量
+const contextMenuVisible = ref(false)
+const contextMenuTop = ref(0)
+const contextMenuLeft = ref(0)
+const selectedContextCommit = ref<LogItem | null>(null)
+
+// 应用筛选后的日志
+const filteredLogs = computed(() => {
+  // 不再在前端进行筛选，直接使用加载的日志
+  return logs.value;
+})
+
 // 加载提交历史
-async function loadLog(all = false) {
+async function loadLog(all = false, page = 1) {
   // 从gitStore获取仓库状态
   const gitStore = useGitStore()
   
@@ -54,57 +101,81 @@ 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 (messageFilter.value) {
+      queryParams.append('message', messageFilter.value)
+    }
     
-    // 更新本地数据
-    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 (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)
     }
     
@@ -112,9 +183,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
+    }
   }
 }
 
@@ -224,6 +304,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) {
@@ -250,9 +383,30 @@ onMounted(() => {
       console.log('初始加载日志数据')
       loadLog()
     }
+    
+    // 加载所有可能的作者列表
+    fetchAllAuthors()
   } else {
     errorMessage.value = '当前目录不是Git仓库'
   }
+  
+  // 在下一个tick中设置表格滚动监听
+  nextTick(() => {
+    setTimeout(() => {
+      setupTableScrollListener()
+    }, 500) // 给表格足够的时间来渲染
+  })
+})
+
+onBeforeUnmount(() => {
+  // 清除表格滚动监听
+  removeTableScrollListener()
+  
+  // 清除定时器
+  if (loadTimerInterval.value !== null) {
+    window.clearInterval(loadTimerInterval.value)
+    loadTimerInterval.value = null
+  }
 })
 
 // 简化刷新函数，只需调用loadLog即可
@@ -261,36 +415,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({
@@ -345,18 +512,373 @@ function fitGraphToContainer() {
   
   applyScale()
 }
+
+// 查看提交详情
+async function viewCommitDetail(commit: LogItem | null) {
+  if (!commit) return
+  
+  selectedCommit.value = commit
+  commitDetailVisible.value = true
+  isLoadingCommitDetail.value = true
+  commitFiles.value = []
+  commitDiff.value = ''
+  selectedCommitFile.value = ''
+  
+  // 调试输出当前提交对象的所有属性
+  console.log('提交详情对象:', JSON.stringify(commit, null, 2))
+  console.log('哈希值类型和长度:', typeof commit.hash, commit.hash ? commit.hash.length : 0)
+  console.log('提交信息类型和长度:', typeof commit.message, commit.message ? commit.message.length : 0)
+  console.log('提交分支:', commit.branch)
+  
+  try {
+    console.log(`获取提交详情: ${commit.hash}`)
+    
+    // 确保哈希值有效
+    if (!commit.hash || commit.hash.length < 7) {
+      console.error('无效的提交哈希值:', commit.hash)
+      commitDiff.value = '无效的提交哈希值'
+      isLoadingCommitDetail.value = false
+      return
+    }
+    
+    // 获取提交的变更文件列表
+    const filesResponse = await fetch(`/api/commit-files?hash=${commit.hash}`)
+    console.log('API响应状态: ', filesResponse.status)
+    const filesData = await filesResponse.json()
+    console.log('文件列表数据: ', filesData)
+    
+    if (filesData.success && Array.isArray(filesData.files)) {
+      commitFiles.value = filesData.files
+      
+      // 如果有文件，自动加载第一个文件的差异
+      if (commitFiles.value.length > 0) {
+        await getCommitFileDiff(commit.hash, commitFiles.value[0])
+      } else {
+        console.log('没有找到变更文件')
+        commitDiff.value = '该提交没有变更文件'
+      }
+    } else {
+      console.error('获取提交文件列表失败:', filesData.error || '未知错误')
+      commitDiff.value = `获取文件列表失败: ${filesData.error || '未知错误'}`
+    }
+  } catch (error) {
+    console.error('获取提交详情失败:', error)
+    commitDiff.value = `获取提交详情失败: ${(error as Error).message}`
+  } finally {
+    isLoadingCommitDetail.value = false
+  }
+}
+
+// 获取提交中特定文件的差异
+async function getCommitFileDiff(hash: string, filePath: string) {
+  isLoadingCommitDetail.value = true
+  selectedCommitFile.value = filePath
+  
+  try {
+    console.log(`获取文件差异: hash=${hash}, file=${filePath}`)
+    const diffResponse = await fetch(`/api/commit-file-diff?hash=${hash}&file=${encodeURIComponent(filePath)}`)
+    console.log('差异API响应状态: ', diffResponse.status)
+    const diffData = await diffResponse.json()
+    console.log('差异数据: ', diffData.success, typeof diffData.diff)
+    
+    if (diffData.success) {
+      commitDiff.value = diffData.diff || '没有变更内容'
+    } else {
+      console.error('获取差异失败: ', diffData.error)
+      commitDiff.value = `获取差异失败: ${diffData.error || '未知错误'}`
+    }
+  } catch (error) {
+    console.error('获取文件差异失败:', error)
+    commitDiff.value = `获取差异失败: ${(error as Error).message}`
+  } finally {
+    isLoadingCommitDetail.value = false
+  }
+}
+
+// 格式化差异内容，添加颜色
+function formatDiff(diffText: string) {
+  if (!diffText) return '';
+  
+  // 将差异内容按行分割
+  const lines = diffText.split('\n');
+  
+  // 转义 HTML 标签的函数
+  function escapeHtml(text: string) {
+    return text
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+  }
+  
+  // 为每行添加适当的 CSS 类
+  return lines.map(line => {
+    // 先转义 HTML 标签，再添加样式
+    const escapedLine = escapeHtml(line);
+    
+    if (line.startsWith('diff --git')) {
+      return `<div class="diff-header">${escapedLine}</div>`;
+    } else if (line.startsWith('---')) {
+      return `<div class="diff-old-file">${escapedLine}</div>`;
+    } else if (line.startsWith('+++')) {
+      return `<div class="diff-new-file">${escapedLine}</div>`;
+    } else if (line.startsWith('@@')) {
+      return `<div class="diff-hunk-header">${escapedLine}</div>`;
+    } else if (line.startsWith('+')) {
+      return `<div class="diff-added">${escapedLine}</div>`;
+    } else if (line.startsWith('-')) {
+      return `<div class="diff-removed">${escapedLine}</div>`;
+    } else {
+      return `<div class="diff-context">${escapedLine}</div>`;
+    }
+  }).join('');
+}
+
+// 格式化提交信息，支持多行显示
+function formatCommitMessage(message: string) {
+  if (!message) return '(无提交信息)';
+  
+  // 调试输出
+  console.log('格式化前的提交信息:', message)
+  console.log('提交信息中的换行符数量:', (message.match(/\n/g) || []).length)
+  
+  // 返回格式化后的提交信息，保留换行符
+  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 = []
+  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}位作者`)
+}
+
+// 处理右键菜单事件
+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>
   <div class="card">
+    <!-- 添加刷新提示，移到最外层 -->
+    <div v-if="logRefreshed" class="refresh-notification">
+      提交历史已刷新
+    </div>
+    
+    <!-- 固定头部区域 -->
     <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"
           @click="toggleViewMode"
         >
+          <template #icon>
+            <el-icon><component :is="showGraphView ? Document : TrendCharts" /></el-icon>
+          </template>
           {{ showGraphView ? '表格视图' : '图表视图' }}
         </el-button>
         <el-button 
@@ -365,119 +887,288 @@ function fitGraphToContainer() {
           @click="toggleAllCommits" 
           :loading="isLoading"
         >
-          {{ showAllCommits ? '显示最近30条' : '显示所有提交' }}
+          <template #icon>
+            <el-icon><component :is="showAllCommits ? List : More" /></el-icon>
+          </template>
+          {{ showAllCommits ? '显示分页加载 (每页100条)' : '显示所有提交' }}
         </el-button>
         <el-button 
-          :icon="RefreshRight" 
           circle 
           size="small" 
           @click="refreshLog()" 
           :loading="isLoading"
           :class="{ 'refresh-button-animated': logRefreshed }"
-        />
+        >
+          <el-icon><RefreshRight /></el-icon>
+        </el-button>
       </div>
     </div>
-    <div v-if="errorMessage">{{ errorMessage }}</div>
-    <div v-else>
-      <!-- 添加刷新提示 -->
-      <div v-if="logRefreshed" class="refresh-notification">
-        提交历史已刷新
-      </div>
-      
-      <!-- 图表视图 -->
-      <div v-if="showGraphView" class="graph-view">
-        <div class="commit-count" v-if="logsData.length > 0">
-          显示 {{ logsData.length }} 条提交记录 {{ showAllCommits ? '(全部)' : '(最近30条)' }}
+    
+    <!-- 筛选面板放在头部下方，但在内容区域之前 -->
+    <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="graph-controls">
-          <div class="zoom-controls">
-            <el-button
-              type="primary"
-              :icon="ZoomOut"
-              circle
-              size="small"
-              @click="zoomOut"
-              :disabled="graphScale <= minScale"
-            />
-            
-            <el-slider
-              v-model="graphScale"
-              :min="minScale"
-              :max="maxScale"
-              :step="scaleStep"
-              @change="applyScale"
-              class="zoom-slider"
-            />
-            
-            <el-button
-              type="primary"
-              :icon="ZoomIn"
-              circle
-              size="small"
-              @click="zoomIn"
-              :disabled="graphScale >= maxScale"
-            />
-            
-            <el-button
-              type="primary"
-              size="small"
-              @click="fitGraphToContainer"
-            >
-              自适应大小
-            </el-button>
+        <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" :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 ? '(全部)' : '(分页加载，每页100条)' }}
           </div>
           
-          <div class="scale-info">
-            缩放: {{ Math.round(graphScale * 100) }}%
+          <!-- 添加缩放控制 -->
+          <div class="graph-controls">
+            <div class="zoom-controls">
+              <el-button
+                type="primary"
+                circle
+                size="small"
+                @click="zoomOut"
+                :disabled="graphScale <= minScale"
+              >
+                <el-icon><ZoomOut /></el-icon>
+              </el-button>
+              
+              <el-slider
+                v-model="graphScale"
+                :min="minScale"
+                :max="maxScale"
+                :step="scaleStep"
+                @change="applyScale"
+                class="zoom-slider"
+              />
+              
+              <el-button
+                type="primary"
+                circle
+                size="small"
+                @click="zoomIn"
+                :disabled="graphScale >= maxScale"
+              >
+                <el-icon><ZoomIn /></el-icon>
+              </el-button>
+              
+              <el-button
+                type="primary"
+                size="small"
+                @click="fitGraphToContainer"
+              >
+                自适应大小
+              </el-button>
+            </div>
+            
+            <div class="scale-info">
+              缩放: {{ Math.round(graphScale * 100) }}%
+            </div>
           </div>
+          
+          <div ref="graphContainer" class="graph-container"></div>
         </div>
         
-        <div ref="graphContainer" class="graph-container"></div>
-      </div>
-      
-      <!-- 表格视图 -->
-      <div v-else>
-        <div class="commit-count" v-if="logs.length > 0">
-          显示 {{ logs.length }} 条提交记录 {{ showAllCommits ? '(全部)' : '(最近30条)' }}
+        <!-- 表格视图 -->
+        <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>
+              </template>
+            </el-table-column>
+            <el-table-column prop="date" label="日期" width="120" resizable />
+            <el-table-column label="作者" width="120" resizable>
+              <template #default="scope">
+                <el-tooltip :content="scope.row.email" placement="top" :hide-after="1000">
+                  <span class="author-name">{{ scope.row.author }}</span>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+            <el-table-column label="分支" width="180" resizable>
+              <template #default="scope">
+                <div v-if="scope.row.branch" class="branch-container">
+                  <el-tag 
+                    v-for="(ref, index) in scope.row.branch.split(',')" 
+                    :key="index"
+                    size="small"
+                    :type="getBranchTagType(ref)"
+                    class="branch-tag"
+                  >
+                    {{ formatBranchName(ref) }}
+                  </el-tag>
+                </div>
+              </template>
+            </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>
-        <el-table :data="logs" style="width: 100%" stripe border v-loading="isLoading">
-          <el-table-column prop="hash" label="提交哈希" width="100" resizable />
-          <el-table-column prop="date" label="日期" width="180" resizable />
-          <el-table-column label="作者" width="200" resizable>
-            <template #default="scope">
-              {{ scope.row.author }} &lt;{{ scope.row.email }}&gt;
-            </template>
-          </el-table-column>
-          <el-table-column label="分支" width="180" resizable>
-            <template #default="scope">
-              <div v-if="scope.row.branch" class="branch-container">
-                <el-tag 
-                  v-for="(ref, index) in scope.row.branch.split(',')" 
-                  :key="index"
-                  size="small"
-                  :type="getBranchTagType(ref)"
-                  class="branch-tag"
-                >
-                  {{ formatBranchName(ref) }}
-                </el-tag>
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column prop="message" label="提交信息" min-width="250" />
-        </el-table>
       </div>
     </div>
-  </div>
-</template>
 
-<style scoped>
+    <!-- 提交详情弹窗 -->
+    <el-dialog
+      v-model="commitDetailVisible"
+      :title="`提交详情: ${selectedCommit?.hash ? selectedCommit.hash.substring(0, 7) : '未知'}`"
+      width="80%"
+      destroy-on-close
+      class="commit-detail-dialog"
+    >
+      <div v-loading="isLoadingCommitDetail" class="commit-detail-container">
+        <!-- 提交基本信息 -->
+        <div v-if="selectedCommit" class="commit-info">
+          <div class="commit-info-header">
+            <div class="info-item">
+              <span class="item-label">哈希:</span>
+              <span class="item-value">{{ selectedCommit.hash }}</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">作者:</span>
+              <span class="item-value">{{ selectedCommit.author }} &lt;{{ selectedCommit.email }}&gt;</span>
+            </div>
+            <div class="info-item">
+              <span class="item-label">日期:</span>
+              <span class="item-value">{{ selectedCommit.date }}</span>
+            </div>
+          </div>
+          <div class="commit-message-container">
+            <div class="message-label">提交信息:</div>
+            <div class="message-content" v-html="formatCommitMessage(selectedCommit.message).replace(/\n/g, '<br>')"></div>
+          </div>
+        </div>
+
+        <!-- 变更文件列表和差异 -->
+        <div class="commit-files-diff">
+          <div class="files-list">
+            <h3>变更文件</h3>
+            <el-empty v-if="commitFiles.length === 0" description="没有找到变更文件"></el-empty>
+            <ul v-else>
+              <li 
+                v-for="file in commitFiles" 
+                :key="file"
+                :class="{ 'active-file': file === selectedCommitFile }"
+                @click="getCommitFileDiff(selectedCommit!.hash, file)"
+              >
+                {{ file }}
+              </li>
+            </ul>
+          </div>
+          <div class="file-diff">
+            <h3 v-if="selectedCommitFile">文件差异: {{ selectedCommitFile }}</h3>
+            <h3 v-else>文件差异</h3>
+            <el-empty v-if="!commitDiff && !isLoadingCommitDetail" description="选择文件查看差异"></el-empty>
+            <div v-else-if="commitDiff" v-html="formatDiff(commitDiff)" class="diff-content"></div>
+          </div>
+        </div>
+      </div>
+          </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;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+}
+
 .log-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 10px;
+  margin-bottom: 0;
+  padding: 8px 16px;
+  background-color: white;
+  border-bottom: 1px solid #f0f0f0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  height: 36px;
+  flex-shrink: 0; /* 防止头部被压缩 */
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.log-header h2 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
 }
 
 .log-actions {
@@ -485,6 +1176,40 @@ function fitGraphToContainer() {
   gap: 8px;
 }
 
+.content-area {
+  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;
+}
+
+/* 优化表格区域 */
+.el-table {
+  --el-table-border-color: #f0f0f0;
+  --el-table-header-bg-color: #f8f9fa;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+/* 统一按钮间距 */
+.log-actions {
+  display: flex;
+  gap: 12px;
+}
+
 .branch-container {
   display: flex;
   flex-wrap: wrap;
@@ -502,10 +1227,18 @@ function fitGraphToContainer() {
   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;
@@ -518,10 +1251,6 @@ function fitGraphToContainer() {
   transition: transform 0.2s ease;
 }
 
-.graph-view {
-  width: 100%;
-}
-
 .graph-controls {
   display: flex;
   justify-content: space-between;
@@ -550,13 +1279,18 @@ function fitGraphToContainer() {
 .refresh-notification {
   background-color: #f0f9eb;
   color: #67c23a;
-  padding: 8px;
-  border-radius: 4px;
-  margin-bottom: 10px;
-  text-align: center;
+  padding: 10px 15px;
+  border-radius: 8px;
   font-size: 14px;
   border-left: 4px solid #67c23a;
   animation: fadeOut 2s forwards;
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 9999;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  max-width: 300px;
+  text-align: center;
 }
 
 @keyframes pulse {
@@ -566,13 +1300,572 @@ function fitGraphToContainer() {
 }
 
 @keyframes fadeOut {
-  0% { opacity: 1; }
-  70% { opacity: 1; }
+  0% { opacity: 0; transform: translateY(-20px); }
+  20% { opacity: 1; transform: translateY(0); }
+  80% { opacity: 1; }
   100% { opacity: 0; }
 }
+
+.author-name {
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.commit-hash {
+  cursor: pointer;
+  color: #409EFF;
+  font-family: monospace;
+}
+
+.commit-hash:hover {
+  text-decoration: underline;
+}
+
+.commit-detail-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.commit-info {
+  padding: 12px;
+  background-color: #f5f7fa;
+  border-radius: 8px;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.commit-info-header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  align-items: center;
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.item-label {
+  font-weight: bold;
+  color: #606266;
+  white-space: nowrap;
+}
+
+.item-value {
+  color: #333;
+  word-break: break-all;
+}
+
+.commit-message-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.message-label {
+  font-weight: bold;
+  color: #606266;
+}
+
+.message-content {
+  background-color: #fff;
+  padding: 12px;
+  border-radius: 4px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  border-left: 4px solid #409EFF;
+  line-height: 1.5;
+  border: 1px solid #e4e7ed;
+  border-left: 4px solid #409EFF;
+}
+
+.commit-files-diff {
+  margin-top: 5px;
+  display: flex;
+  gap: 20px;
+  height: 60vh;
+}
+
+.files-list {
+  width: 25%;
+  overflow-y: auto;
+  background-color: #f5f7fa;
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.files-list h3 {
+  margin-top: 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #dcdfe6;
+  font-size: 16px;
+}
+
+.files-list ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.files-list li {
+  padding: 8px 10px;
+  cursor: pointer;
+  border-radius: 4px;
+  margin-bottom: 5px;
+  font-family: monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+}
+
+.files-list li:hover {
+  background-color: #ecf5ff;
+}
+
+.files-list li.active-file {
+  background-color: #409eff;
+  color: white;
+}
+
+.file-diff {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f7fa;
+  border-radius: 8px;
+  padding: 10px;
+  overflow: hidden;
+}
+
+.file-diff h3 {
+  margin-top: 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #dcdfe6;
+  font-size: 16px;
+}
+
+.diff-content {
+  flex: 1;
+  overflow-y: auto;
+  background-color: #fff;
+  padding: 10px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.diff-header {
+  font-weight: bold;
+  color: #409EFF;
+}
+
+.diff-old-file {
+  color: #E6A23C;
+}
+
+.diff-new-file {
+  color: #67C23A;
+}
+
+.diff-hunk-header {
+  font-weight: bold;
+  color: #409EFF;
+}
+
+.diff-added {
+  background-color: #f0f9eb;
+  color: #67C23A;
+}
+
+.diff-removed {
+  background-color: #fef2f2;
+  color: #F56C6C;
+}
+
+.diff-context {
+  background-color: #f5f7fa;
+}
+
+/* 减小对话框的顶部边距 */
+:deep(.commit-detail-dialog) {
+  --el-dialog-margin-top: 5vh;
+}
+
+.history-controls {
+  display: flex;
+  justify-content: space-between;
+  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 {
+  display: flex;
+  align-items: center;
+}
+
+.record-count {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.record-count :deep(.el-icon) {
+  margin-right: 6px;
+}
+
+.filter-badge :deep(.el-badge__content) {
+  background-color: #409EFF;
+}
+
+.filter-panel {
+  background-color: #f5f7fa;
+  border-radius: 8px;
+  padding: 15px;
+  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 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  align-items: flex-end;
+}
+
+.filter-item {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.filter-label {
+  font-size: 13px;
+  color: #606266;
+  font-weight: bold;
+}
+
+.filter-input {
+  width: 200px;
+}
+
+.filter-input.date-range {
+  width: 350px;
+}
+
+.filter-actions {
+  display: flex;
+  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>