zen-gitsync 2.0.3 → 2.0.4

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

@@ -1,12 +1,24 @@
 <script setup lang="ts">
-import { ref, onMounted, defineExpose } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 // import { io } from 'socket.io-client'
 import { Refresh, ArrowLeft, ArrowRight, Folder, Document, ArrowUp, RefreshRight } from '@element-plus/icons-vue'
+import { useGitLogStore } from '../stores/gitLogStore'
+import { useGitStore } from '../stores/gitStore'
+
+// 定义props
+const props = defineProps({
+  initialDirectory: {
+    type: String,
+    default: ''
+  }
+})
 
+const gitLogStore = useGitLogStore()
+const gitStore = useGitStore()
 const status = ref('加载中...')
 // const socket = io()
-const isRefreshing = ref(false)
+const isRefreshing = computed(() => gitLogStore.isLoadingStatus)
 const fileList = ref<{path: string, type: string}[]>([])
 const selectedFile = ref('')
 const diffContent = ref('')
@@ -48,23 +60,24 @@ function parseStatus(statusText: string) {
   fileList.value = files
 }
 
-const currentDirectory = ref('')
+const currentDirectory = ref(props.initialDirectory || '');
 async function loadStatus() {
   try {
-    isRefreshing.value = true
-    // 获取当前工作目录
-    const responseDir = await fetch('/api/current_directory')
-    const dirData = await responseDir.json()
-    currentDirectory.value = dirData.directory || '未知目录'
+    // 如果没有初始目录，才需要请求当前目录
+    if (!currentDirectory.value) {
+      const responseDir = await fetch('/api/current_directory')
+      const dirData = await responseDir.json()
+      currentDirectory.value = dirData.directory || '未知目录'
+    }
     
-    // 如果不是Git仓库，显示提示并返回
-    if (dirData.isGitRepo === false) {
+    // 如果不是Git仓库，直接显示提示并返回
+    if (!gitStore.isGitRepo) {
       status.value = '当前目录不是一个Git仓库'
       fileList.value = []
-      ElMessage.warning('当前目录不是一个Git仓库')
       return
     }
     
+    // 直接获取Git状态，不再通过store调用
     const response = await fetch('/api/status')
     const data = await response.json()
     status.value = data.status
@@ -83,8 +96,6 @@ async function loadStatus() {
       message: '刷新失败: ' + (error as Error).message,
       type: 'error',
     })
-  } finally {
-    isRefreshing.value = false
   }
 }
 
@@ -289,13 +300,28 @@ async function changeDirectory() {
       currentDirectory.value = result.directory
       isDirectoryDialogVisible.value = false
       
-      // 如果新目录不是Git仓库，显示警告
-      if (!result.isGitRepo) {
+      // 直接使用API返回的Git仓库状态
+      gitStore.isGitRepo = result.isGitRepo
+      
+      // 如果是Git仓库，加载Git相关数据
+      if (result.isGitRepo) {
+        // 加载Git分支和用户信息
+        await Promise.all([
+          gitStore.getCurrentBranch(),
+          gitStore.getAllBranches(),
+          gitStore.getUserInfo()
+        ])
+        
+        // 刷新Git状态
+        await loadStatus()
+      } else {
         ElMessage.warning('当前目录不是一个Git仓库')
+        status.value = '当前目录不是一个Git仓库'
+        fileList.value = []
+        
+        // 清空Git相关状态
+        gitStore.$reset() // 使用pinia的reset方法重置状态
       }
-      
-      // 刷新状态
-      loadStatus()
     } else {
       ElMessage.error(result.error || '切换目录失败')
     }
@@ -368,13 +394,9 @@ async function revertFileChanges(filePath: string) {
 }
 
 onMounted(() => {
+  // App.vue已经加载了Git相关数据，此时只需加载状态
+  // 如果已有初始目录，则只需加载状态
   loadStatus()
-  
-  // Socket.io 事件
-  // socket.on('status_update', (data: { status: string }) => {
-  //   status.value = data.status
-  //   parseStatus(data.status)
-  // })
 })
 
 // onUnmounted(() => {
@@ -397,7 +419,7 @@ defineExpose({
       </el-button>
     </div>
     <div class="status-header">
-      <h2>Git 状态</h2>
+      <h2>Git 状态(git status)</h2>
       <el-button 
         type="primary" 
         :icon="Refresh" 

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

@@ -1,105 +1,192 @@
 <script setup lang="ts">
-import { ref, onMounted, defineExpose } from 'vue'
-import { ElTable, ElTableColumn, ElTag, ElButton } from 'element-plus'
-import { RefreshRight } from '@element-plus/icons-vue'
+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 'element-plus/dist/index.css'
 import { createGitgraph } from '@gitgraph/js'
+import { useGitLogStore } from '../stores/gitLogStore'
+import { useGitStore } from '../stores/gitStore'
 
 interface LogItem {
   hash: string
   date: string
   author: string
-  email: string  // 添加邮箱字段
+  email: string
   message: string
-  branch?: string // 添加分支信息字段
-  parents?: string[] // 添加父提交信息
+  branch?: string
+  parents?: string[]
 }
 
-const logs = ref<LogItem[]>([])
+// 使用Git状态和日志Store
+const gitLogStore = useGitLogStore()
+const gitStore = useGitStore()
+
+// 获取日志数据
+let logsData: LogItem[] = []
+const logs = ref<LogItem[]>(logsData)
 const errorMessage = ref('')
-const isLoading = ref(false)
+// 定义本地加载状态，而不是依赖于computed
+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(true)
 const graphContainer = ref<HTMLElement | null>(null)
 
+// 添加图表缩放控制
+const graphScale = ref(1)
+const minScale = 0.5
+const maxScale = 1.5
+const scaleStep = 0.1
+
 // 加载提交历史
 async function loadLog(all = false) {
+  // 从gitStore获取仓库状态
+  const gitStore = useGitStore()
+  
+  // 检查是否是Git仓库
+  if (!gitStore.isGitRepo) {
+    errorMessage.value = '当前目录不是Git仓库'
+    return
+  }
+  
   try {
-    isLoading.value = true
     showAllCommits.value = all
-    // 修改API调用，获取更详细的提交信息，包括父提交
+    
+    // 设置本地加载状态
+    localLoading.value = true
+    
+    // 保留graph参数，但服务器端其实不做特殊处理
+    // 这样可以兼容之前的代码，避免大量修改
     const url = all ? '/api/log?all=true&graph=true' : '/api/log?graph=true'
+    console.log(`加载日志数据: ${url}`)
+    
     const response = await fetch(url)
-    logs.value = await response.json()
-    totalCommits.value = logs.value.length
-    errorMessage.value = ''
+    const data = await response.json()
+    
+    // 清空现有数据
+    logsData.length = 0
+    
+    // 更新本地数据
+    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 = '日志数据格式错误'
+      return
+    }
+    
+    // 确保logs.value也更新
+    logs.value = [...logsData]
+    
+    console.log(`logsData长度: ${logsData.length}`) // 添加调试日志
     
     // 加载完数据后渲染图表
     if (showGraphView.value) {
       setTimeout(renderGraph, 0)
     }
+    
+    errorMessage.value = ''
   } catch (error) {
-    errorMessage.value = '加载提交历史失败: ' + (error as Error).message
+    errorMessage.value = '加载提交历史失败: ' + (error instanceof Error ? error.message : String(error))
+    console.error('加载日志失败:', error)
   } finally {
-    isLoading.value = false
+    // 重置本地加载状态
+    localLoading.value = false
   }
 }
 
 // 渲染Git图表
 async function renderGraph() {
-  if (!graphContainer.value || logs.value.length === 0) return
-  
-  // 清空容器
-  graphContainer.value.innerHTML = ''
+  console.log(`开始渲染图表...数据长度: ${logsData.length}`)
   
-  // 获取当前分支
-  const branchResponse = await fetch('/api/branch')
-  const { branch: currentBranch } = await branchResponse.json()
-
-  // 创建gitgraph实例
-  const gitgraph = createGitgraph(graphContainer.value, {
-    // 自定义选项
-    // @ts-ignore: true
-    orientation: 'vertical-reverse', // 从上到下的方向
-    // @ts-ignore: true
-    template: 'metro', // 使用metro模板
-    author: '提交者 <committer@example.com>'
-  })
+  if (!graphContainer.value) {
+    console.error('图表容器未找到')
+    return
+  }
   
-  // 处理分支和提交数据
-  // 注意：这里的实现是简化的，实际需要根据API返回的数据结构调整
-  const branches: Record<string, any> = {}
-  const mainBranch = gitgraph.branch(currentBranch || 'main')  // 使用API获取的分支或默认main
-  branches[currentBranch || 'main'] = mainBranch
+  if (logsData.length === 0) {
+    console.error('没有日志数据可渲染')
+    return
+  }
   
-  // 简化示例 - 实际实现需要根据API返回的数据结构调整
-  logs.value.forEach(commit => {
-    // 这里需要根据实际数据结构构建分支图
-    let currentBranch = mainBranch
+  try {
+    // 清空容器
+    graphContainer.value.innerHTML = ''
     
-    // 如果有分支信息，使用对应的分支
-    if (commit.branch) {
-      const branchName = formatBranchName(commit.branch.split(',')[0])
-      if (!branches[branchName]) {
-        branches[branchName] = gitgraph.branch(branchName)
-      }
-      currentBranch = branches[branchName]
-    }
+    console.log(`创建gitgraph实例，分支: ${gitStore.currentBranch || 'main'}`)
+    
+    // 创建gitgraph实例
+    const gitgraph = createGitgraph(graphContainer.value, {
+      // 自定义选项
+      orientation: 'vertical-reverse' as any, // 使用类型断言解决类型错误
+      template: 'metro' as any, // 使用类型断言解决类型错误
+      author: '提交者 <committer@example.com>'
+    })
+    
+    // 处理分支和提交数据
+    const branches: Record<string, any> = {}
+    const mainBranch = gitgraph.branch(gitStore.currentBranch || 'main')
+    branches[gitStore.currentBranch || 'main'] = mainBranch
     
-    // 创建提交，添加邮箱信息
-    currentBranch.commit({
-      hash: commit.hash,
-      subject: commit.message,
-      author: `${commit.author} <${commit.email}>`
+    console.log(`开始创建提交图...共${logsData.length}条提交`)
+    
+    // 简化示例 - 实际实现需要根据API返回的数据结构调整
+    logsData.forEach((commit, index) => {
+      // 这里需要根据实际数据结构构建分支图
+      let currentBranch = mainBranch
+      
+      // 如果有分支信息，使用对应的分支
+      if (commit.branch) {
+        const branchName = formatBranchName(commit.branch.split(',')[0])
+        if (!branches[branchName]) {
+          branches[branchName] = gitgraph.branch(branchName)
+        }
+        currentBranch = branches[branchName]
+      }
+      
+      // 创建提交，添加邮箱信息
+      currentBranch.commit({
+        hash: commit.hash,
+        subject: commit.message,
+        author: `${commit.author} <${commit.email}>`
+      })
+      
+      if (index % 10 === 0) {
+        console.log(`已渲染 ${index + 1}/${logsData.length} 个提交`)
+      }
     })
-  })
+    
+    console.log('图表渲染完成')
+    
+    // 确保渲染完成后调用自适应缩放
+    setTimeout(() => {
+      fitGraphToContainer()
+    }, 100)
+  } catch (error) {
+    console.error('渲染图表失败:', error)
+    errorMessage.value = '渲染图表失败: ' + (error instanceof Error ? error.message : String(error))
+  }
 }
 
 // 切换视图模式
 function toggleViewMode() {
   showGraphView.value = !showGraphView.value
-  if (showGraphView.value && logs.value.length > 0) {
+  if (showGraphView.value && logsData.length > 0) {
     // 延迟执行以确保DOM已更新
     setTimeout(renderGraph, 0)
   }
@@ -110,14 +197,146 @@ function toggleAllCommits() {
   loadLog(!showAllCommits.value)
 }
 
+// 格式化分支名（实现该函数，因为在模板中调用了）
+function formatBranchName(ref: string) {
+  // 处理HEAD、远程分支等情况
+  if (ref.includes('HEAD -> ')) {
+    return ref.replace('HEAD -> ', '')
+  }
+  if (ref.includes('origin/')) {
+    return ref
+  }
+  return ref.trim()
+}
+
+// 获取分支标签类型（实现该函数，因为在模板中调用了）
+function getBranchTagType(ref: string) {
+  if (ref.includes('HEAD')) return 'success'
+  if (ref.includes('origin/')) return 'warning'
+  return 'info'
+}
+
 onMounted(() => {
-  loadLog()
+  // 检查gitLogStore中是否已有数据
+  if (gitStore.isGitRepo) {
+    if (gitLogStore.log.length > 0) {
+      // 如果已经有数据，直接使用现有数据
+      console.log('使用已加载的日志数据')
+      
+      // 清空并填充logsData
+      logsData.length = 0
+      gitLogStore.log.forEach(item => logsData.push(item))
+      
+      // 由于TypeScript类型错误，我们直接设置totalCommits而不是使用logs.value.length
+      totalCommits.value = gitLogStore.log.length
+      
+      // 确保视图被渲染
+      if (showGraphView.value) {
+        setTimeout(() => {
+          console.log(`准备渲染图表，数据长度: ${logsData.length}`)
+          renderGraph()
+        }, 100)
+      }
+    } else {
+      // 否则加载数据
+      console.log('初始加载日志数据')
+      loadLog()
+    }
+  } else {
+    errorMessage.value = '当前目录不是Git仓库'
+  }
 })
-const refreshLog = () => loadLog(showAllCommits.value)
+
+// 简化刷新函数，只需调用loadLog即可
+const refreshLog = () => {
+  if (!gitStore.isGitRepo) {
+    errorMessage.value = '当前目录不是Git仓库'
+    return
+  }
+  loadLog(showAllCommits.value)
+}
+
+// 监听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错误
+    logs.value = [...logsData]
+  } catch (error) {
+    console.warn('无法更新logs.value:', error)
+  }
+  
+  console.log(`数据更新完成，准备渲染图表(${logsData.length}条记录)`)
+  
+  if (showGraphView.value && logsData.length > 0) {
+    setTimeout(renderGraph, 0)
+  }
+})
+
 // 暴露方法给父组件
 defineExpose({
   refreshLog
 })
+
+// 增加/减少缩放比例
+function zoomIn() {
+  if (graphScale.value < maxScale) {
+    graphScale.value = Math.min(maxScale, graphScale.value + scaleStep)
+    applyScale()
+  }
+}
+
+function zoomOut() {
+  if (graphScale.value > minScale) {
+    graphScale.value = Math.max(minScale, graphScale.value - scaleStep)
+    applyScale()
+  }
+}
+
+// 应用缩放比例
+function applyScale() {
+  if (!graphContainer.value) return
+  
+  const svgElement = graphContainer.value.querySelector('svg')
+  if (svgElement) {
+    svgElement.style.transform = `scale(${graphScale.value})`
+    svgElement.style.transformOrigin = 'top left'
+  }
+}
+
+// 自适应图表大小
+function fitGraphToContainer() {
+  if (!graphContainer.value) return
+  
+  const svgElement = graphContainer.value.querySelector('svg')
+  if (!svgElement) return
+  
+  // 获取SVG和容器的宽度
+  const svgWidth = svgElement.getBoundingClientRect().width / graphScale.value
+  const containerWidth = graphContainer.value.clientWidth
+  
+  // 计算合适的缩放比例
+  if (svgWidth > containerWidth) {
+    // 如果SVG宽度大于容器，需要缩小
+    graphScale.value = Math.max(minScale, containerWidth / svgWidth)
+  } else {
+    // 否则恢复到默认比例
+    graphScale.value = 1
+  }
+  
+  applyScale()
+}
 </script>
 
 <template>
@@ -138,7 +357,7 @@ defineExpose({
           @click="toggleAllCommits" 
           :loading="isLoading"
         >
-          {{ showAllCommits ? '显示最近100条' : '显示所有提交' }}
+          {{ showAllCommits ? '显示最近30条' : '显示所有提交' }}
         </el-button>
         <el-button 
           :icon="RefreshRight" 
@@ -153,16 +372,61 @@ defineExpose({
     <div v-else>
       <!-- 图表视图 -->
       <div v-if="showGraphView" class="graph-view">
-        <div class="commit-count" v-if="logs.length > 0">
-          显示 {{ logs.length }} 条提交记录 {{ showAllCommits ? '(全部)' : '(最近100条)' }}
+        <div class="commit-count" v-if="logsData.length > 0">
+          显示 {{ logsData.length }} 条提交记录 {{ showAllCommits ? '(全部)' : '(最近30条)' }}
+        </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>
+          
+          <div class="scale-info">
+            缩放: {{ Math.round(graphScale * 100) }}%
+          </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 ? '(全部)' : '(最近100条)' }}
+          显示 {{ logs.length }} 条提交记录 {{ showAllCommits ? '(全部)' : '(最近30条)' }}
         </div>
         <el-table :data="logs" style="width: 100%" stripe border v-loading="isLoading">
           <el-table-column prop="hash" label="提交哈希" width="100" resizable />
@@ -232,37 +496,39 @@ defineExpose({
   border-radius: 4px;
   padding: 10px;
   background-color: #fff;
-  /* transform: scale(0.8); */
+  position: relative;
+}
+
+.graph-container svg {
+  transform-origin: top left;
+  transition: transform 0.2s ease;
 }
 
 .graph-view {
   width: 100%;
 }
-</style>
 
-<script lang="ts">
-// 辅助函数：格式化分支名称
-function formatBranchName(ref: string) {
-  // 移除 "HEAD -> " 前缀
-  ref = ref.trim().replace(/^HEAD\s*->\s*/, '')
-  
-  // 移除 "origin/" 前缀
-  ref = ref.replace(/^origin\//, '')
-  
-  // 移除 "tag: " 前缀，但保留标签名
-  ref = ref.replace(/^tag:\s*/, '')
-  
-  return ref.trim()
+.graph-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
 }
 
-// 辅助函数：根据分支类型返回不同的标签类型
-function getBranchTagType(ref: string) {
-  if (ref.includes('HEAD')) return 'success'
-  if (ref.includes('tag:')) return 'warning'
-  if (ref.includes('origin/')) return 'info'
-  return 'primary' // 修改空字符串为有效的type值
+.zoom-controls {
+  display: flex;
+  gap: 8px;
 }
-</script>
+
+.zoom-slider {
+  width: 200px;
+}
+
+.scale-info {
+  font-size: 14px;
+  color: #606266;
+}
+</style>
 
 /* 添加表格列调整样式 */
 .el-table .el-table__cell .cell {

package/src/ui/client/src/main.ts

@@ -1,4 +1,7 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
+
 const app = createApp(App)
+app.use(createPinia())
 app.mount('#app')