zen-gitsync 2.0.4 → 2.0.5

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

@@ -16,10 +16,11 @@ const props = defineProps({
 
 const gitLogStore = useGitLogStore()
 const gitStore = useGitStore()
-const status = ref('加载中...')
+// 移除本地status定义，直接使用store中的statusText
+// const status = ref('加载中...')
 // const socket = io()
 const isRefreshing = computed(() => gitLogStore.isLoadingStatus)
-const fileList = ref<{path: string, type: string}[]>([])
+// 移除本地fileList定义，改用store中的fileList
 const selectedFile = ref('')
 const diffContent = ref('')
 const diffDialogVisible = ref(false)
@@ -37,29 +38,6 @@ const directoryItems = ref<{name: string, path: string, type: string}[]>([])
 const isBrowsing = ref(false)
 const browseErrorMessage = ref('')
 
-// 解析 git status 输出，提取文件及类型
-function parseStatus(statusText: string) {
-  if (statusText === undefined) return
-  const lines = statusText.split('\n')
-  const files: {path: string, type: string}[] = []
-  for (const line of lines) {
-    // 匹配常见的 git status --porcelain 格式
-    // M: 修改, A: 新增, D: 删除, ??: 未跟踪
-    const match = line.match(/^([ MADRCU\?]{2})\s+(.+)$/)
-    if (match) {
-      let type = ''
-      const code = match[1].trim()
-      if (code === 'M' || code === 'MM' || code === 'AM' || code === 'RM') type = 'modified'
-      else if (code === 'A' || code === 'AA') type = 'added'
-      else if (code === 'D' || code === 'AD' || code === 'DA') type = 'deleted'
-      else if (code === '??') type = 'untracked'
-      else type = 'other'
-      files.push({ path: match[2], type })
-    }
-  }
-  fileList.value = files
-}
-
 const currentDirectory = ref(props.initialDirectory || '');
 async function loadStatus() {
   try {
@@ -72,26 +50,17 @@ async function loadStatus() {
     
     // 如果不是Git仓库，直接显示提示并返回
     if (!gitStore.isGitRepo) {
-      status.value = '当前目录不是一个Git仓库'
-      fileList.value = []
       return
     }
     
-    // 直接获取Git状态，不再通过store调用
-    const response = await fetch('/api/status')
-    const data = await response.json()
-    status.value = data.status
-
-    const response_porcelain = await fetch('/api/status_porcelain')
-    const data_porcelain = await response_porcelain.json()
-    parseStatus(data_porcelain.status)
+    // 使用gitLogStore获取Git状态
+    await gitLogStore.fetchStatus()
+    
     ElMessage({
       message: 'Git 状态已刷新',
       type: 'success',
     })
   } catch (error) {
-    status.value = '加载状态失败: ' + (error as Error).message
-    fileList.value = []
     ElMessage({
       message: '刷新失败: ' + (error as Error).message,
       type: 'error',
@@ -145,7 +114,7 @@ async function getFileDiff(filePath: string) {
     isLoadingDiff.value = true
     selectedFile.value = filePath
     // 设置当前文件索引
-    currentFileIndex.value = fileList.value.findIndex(file => file.path === filePath)
+    currentFileIndex.value = gitLogStore.fileList.findIndex(file => file.path === filePath)
     const response = await fetch(`/api/diff?file=${encodeURIComponent(filePath)}`)
     const data = await response.json()
     diffContent.value = data.diff || '没有变更'
@@ -163,19 +132,19 @@ async function getFileDiff(filePath: string) {
 
 // 添加切换到上一个文件的方法
 async function goToPreviousFile() {
-  if (fileList.value.length === 0 || currentFileIndex.value <= 0) return
+  if (gitLogStore.fileList.length === 0 || currentFileIndex.value <= 0) return
   
   const newIndex = currentFileIndex.value - 1
-  const prevFile = fileList.value[newIndex]
+  const prevFile = gitLogStore.fileList[newIndex]
   await getFileDiff(prevFile.path)
 }
 
 // 添加切换到下一个文件的方法
 async function goToNextFile() {
-  if (fileList.value.length === 0 || currentFileIndex.value >= fileList.value.length - 1) return
+  if (gitLogStore.fileList.length === 0 || currentFileIndex.value >= gitLogStore.fileList.length - 1) return
   
   const newIndex = currentFileIndex.value + 1
-  const nextFile = fileList.value[newIndex]
+  const nextFile = gitLogStore.fileList[newIndex]
   await getFileDiff(nextFile.path)
 }
 
@@ -316,9 +285,6 @@ async function changeDirectory() {
         await loadStatus()
       } else {
         ElMessage.warning('当前目录不是一个Git仓库')
-        status.value = '当前目录不是一个Git仓库'
-        fileList.value = []
-        
         // 清空Git相关状态
         gitStore.$reset() // 使用pinia的reset方法重置状态
       }
@@ -429,11 +395,13 @@ defineExpose({
         :loading="isRefreshing"
       />
     </div>
-    <div class="status-box">{{ status }}</div>
+    <div class="status-box">
+      {{ !gitStore.isGitRepo ? '当前目录不是一个Git仓库' : gitLogStore.statusText || '加载中...' }}
+    </div>
     <!-- 颜色区分不同类型文件 -->
-    <div v-if="fileList.length" class="file-list">
+    <div v-if="gitLogStore.fileList.length" class="file-list">
       <div 
-        v-for="file in fileList" 
+        v-for="file in gitLogStore.fileList" 
         :key="file.path" 
         :class="['file-item', file.type]"
       >
@@ -514,18 +482,20 @@ defineExpose({
         </div>
         
         <!-- 目录内容列表 -->
-        <ul class="directory-items">
-          <li 
-            v-for="item in directoryItems" 
-            :key="item.path"
-            :class="['directory-item', item.type]"
-            @click="selectDirectoryItem(item)"
-          >
-            <el-icon v-if="item.type === 'directory'"><Folder /></el-icon>
-            <el-icon v-else><Document /></el-icon>
-            <span>{{ item.name }}</span>
-          </li>
-        </ul>
+        <div class="directory-items-container">
+          <ul class="directory-items">
+            <li 
+              v-for="item in directoryItems" 
+              :key="item.path"
+              :class="['directory-item', item.type]"
+              @click="selectDirectoryItem(item)"
+            >
+              <el-icon v-if="item.type === 'directory'"><Folder /></el-icon>
+              <el-icon v-else><Document /></el-icon>
+              <span>{{ item.name }}</span>
+            </li>
+          </ul>
+        </div>
       </div>
     </el-dialog>
     
@@ -546,14 +516,14 @@ defineExpose({
         <el-button 
           :icon="ArrowLeft" 
           @click="goToPreviousFile" 
-          :disabled="currentFileIndex <= 0 || fileList.length === 0"
+          :disabled="currentFileIndex <= 0 || gitLogStore.fileList.length === 0"
           circle
         />
-        <span class="file-counter">{{ currentFileIndex + 1 }} / {{ fileList.length }}</span>
+        <span class="file-counter">{{ currentFileIndex + 1 }} / {{ gitLogStore.fileList.length }}</span>
         <el-button 
           :icon="ArrowRight" 
           @click="goToNextFile" 
-          :disabled="currentFileIndex >= fileList.length - 1 || fileList.length === 0"
+          :disabled="currentFileIndex >= gitLogStore.fileList.length - 1 || gitLogStore.fileList.length === 0"
           circle
         />
       </div>
@@ -730,14 +700,25 @@ defineExpose({
 
 .directory-browser {
   padding: 10px;
-  max-height: 400px;
-  overflow-y: auto;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
 }
 
 .browser-nav {
   margin-bottom: 10px;
   display: flex;
   justify-content: space-between;
+  position: sticky;
+  top: 0;
+  background-color: #fff;
+  z-index: 1;
+  padding: 10px 0;
+}
+
+.directory-items-container {
+  flex: 1;
+  overflow-y: auto;
 }
 
 .directory-items {

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

@@ -39,6 +39,9 @@ const minScale = 0.5
 const maxScale = 1.5
 const scaleStep = 0.1
 
+// 添加日志被刷新的提示状态
+const logRefreshed = ref(false)
+
 // 加载提交历史
 async function loadLog(all = false) {
   // 从gitStore获取仓库状态
@@ -95,6 +98,11 @@ async function loadLog(all = false) {
     
     console.log(`logsData长度: ${logsData.length}`) // 添加调试日志
     
+    // 设置刷新提示状态
+    logRefreshed.value = true
+    // 2秒后隐藏提示
+    setTimeout(() => { logRefreshed.value = false }, 2000)
+    
     // 加载完数据后渲染图表
     if (showGraphView.value) {
       setTimeout(renderGraph, 0)
@@ -365,11 +373,17 @@ function fitGraphToContainer() {
           size="small" 
           @click="refreshLog()" 
           :loading="isLoading"
+          :class="{ 'refresh-button-animated': logRefreshed }"
         />
       </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">
@@ -528,6 +542,34 @@ function fitGraphToContainer() {
   font-size: 14px;
   color: #606266;
 }
+
+.refresh-button-animated {
+  animation: pulse 1s;
+}
+
+.refresh-notification {
+  background-color: #f0f9eb;
+  color: #67c23a;
+  padding: 8px;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  text-align: center;
+  font-size: 14px;
+  border-left: 4px solid #67c23a;
+  animation: fadeOut 2s forwards;
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+@keyframes fadeOut {
+  0% { opacity: 1; }
+  70% { opacity: 1; }
+  100% { opacity: 0; }
+}
 </style>
 
 /* 添加表格列调整样式 */

package/src/ui/client/src/stores/gitLogStore.ts

@@ -3,6 +3,9 @@ import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useGitStore } from './gitStore'
 
+// 定义Git操作间隔时间（毫秒）
+const GIT_OPERATION_DELAY = 300
+
 export const useGitLogStore = defineStore('gitLog', () => {
   // 引用gitStore获取仓库状态
   const gitStore = useGitStore()
@@ -14,11 +17,45 @@ export const useGitLogStore = defineStore('gitLog', () => {
     unstaged: [],
     untracked: []
   })
+  // 添加Git状态文本
+  const statusText = ref('')
+  // 添加fileList状态用于保存porcelain格式的状态
+  const fileList = ref<{path: string, type: string}[]>([])
   const isLoadingLog = ref(false)
   const isLoadingStatus = ref(false)
   const isAddingFiles = ref(false)
+  const isCommiting = ref(false)
+  const isPushing = ref(false)
   const isResetting = ref(false)
   
+  // 解析 git status --porcelain 输出，提取文件及类型
+  function parseStatusPorcelain(statusText: string) {
+    if (statusText === undefined || statusText === '') {
+      // 如果状态为空字符串，清空文件列表
+      fileList.value = []
+      return
+    }
+    
+    const lines = statusText.split('\n')
+    const files: {path: string, type: string}[] = []
+    for (const line of lines) {
+      // 匹配常见的 git status --porcelain 格式
+      // M: 修改, A: 新增, D: 删除, ??: 未跟踪
+      const match = line.match(/^([ MADRCU\?]{2})\s+(.+)$/)
+      if (match) {
+        let type = ''
+        const code = match[1].trim()
+        if (code === 'M' || code === 'MM' || code === 'AM' || code === 'RM') type = 'modified'
+        else if (code === 'A' || code === 'AA') type = 'added'
+        else if (code === 'D' || code === 'AD' || code === 'DA') type = 'deleted'
+        else if (code === '??') type = 'untracked'
+        else type = 'other'
+        files.push({ path: match[2], type })
+      }
+    }
+    fileList.value = files
+  }
+  
   // 获取提交日志
   async function fetchLog() {
     // 检查是否是Git仓库
@@ -32,8 +69,8 @@ export const useGitLogStore = defineStore('gitLog', () => {
       console.log('开始加载提交历史...')
       const response = await fetch('/api/log')
       const data = await response.json()
-      if (data.log && Array.isArray(data.log)) {
-        log.value = data.log
+      if (data && Array.isArray(data)) {
+        log.value = data
       }
       console.log(`提交历史加载完成，共 ${log.value.length} 条记录`)
     } catch (error) {
@@ -60,12 +97,17 @@ export const useGitLogStore = defineStore('gitLog', () => {
       const response = await fetch('/api/status')
       const data = await response.json()
       if (data.status) {
+        // 更新状态文本
+        statusText.value = data.status
         status.value = {
           staged: data.status.staged || [],
           unstaged: data.status.unstaged || [],
           untracked: data.status.untracked || []
         }
       }
+      
+      // 同时获取porcelain格式的状态
+      await fetchStatusPorcelain()
     } catch (error) {
       console.error('获取Git状态失败:', error)
       ElMessage({
@@ -77,6 +119,34 @@ export const useGitLogStore = defineStore('gitLog', () => {
     }
   }
   
+  // 获取Git状态 (porcelain格式)
+  async function fetchStatusPorcelain() {
+    // 检查是否是Git仓库
+    if (!gitStore.isGitRepo) {
+      console.log('当前目录不是Git仓库，跳过加载Git状态')
+      return
+    }
+    
+    try {
+      const response = await fetch('/api/status_porcelain')
+      const data = await response.json()
+      if (data.status !== undefined) {
+        parseStatusPorcelain(data.status)
+      } else {
+        // 如果没有收到有效的 status 字段，清空文件列表
+        fileList.value = []
+      }
+    } catch (error) {
+      console.error('获取Git状态(porcelain)失败:', error)
+      ElMessage({
+        message: `获取Git状态(porcelain)失败: ${(error as Error).message}`,
+        type: 'error'
+      })
+      // 清空文件列表
+      fileList.value = []
+    }
+  }
+  
   // 添加文件到暂存区 (git add .)
   async function addToStage() {
     // 检查是否是Git仓库
@@ -120,6 +190,11 @@ export const useGitLogStore = defineStore('gitLog', () => {
     }
   }
   
+  // 添加延时函数
+  function delay(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms))
+  }
+  
   // 提交更改
   async function commitChanges(message: string, noVerify = false) {
     // 检查是否是Git仓库
@@ -129,6 +204,7 @@ export const useGitLogStore = defineStore('gitLog', () => {
     }
     
     try {
+      isCommiting.value = true
       const response = await fetch('/api/commit', {
         method: 'POST',
         headers: {
@@ -166,6 +242,8 @@ export const useGitLogStore = defineStore('gitLog', () => {
         type: 'error'
       })
       return false
+    } finally {
+      isCommiting.value = false
     }
   }
   
@@ -178,6 +256,7 @@ export const useGitLogStore = defineStore('gitLog', () => {
     }
     
     try {
+      isPushing.value = true
       const response = await fetch('/api/push', {
         method: 'POST'
       })
@@ -188,6 +267,8 @@ export const useGitLogStore = defineStore('gitLog', () => {
           message: '推送成功',
           type: 'success'
         })
+        // 刷新状态
+        fetchStatus()
         
         // 刷新日志
         fetchLog()
@@ -206,54 +287,57 @@ export const useGitLogStore = defineStore('gitLog', () => {
         type: 'error'
       })
       return false
+    } finally {
+      isPushing.value = false
     }
   }
   
   // 暂存并提交
   async function addAndCommit(message: string, noVerify = false) {
-    try {
-      // 先添加到暂存区
-      const addResult = await addToStage()
-      if (!addResult) {
-        return false
-      }
-      
-      // 再提交
-      return await commitChanges(message, noVerify)
-    } catch (error) {
-      ElMessage({
-        message: `暂存并提交失败: ${(error as Error).message}`,
-        type: 'error'
-      })
-      return false
-    }
+    const addResult = await addToStage()
+    if (!addResult) return false
+    
+    // 使用新的延时常量
+    await delay(GIT_OPERATION_DELAY)
+    
+    return await commitChanges(message, noVerify)
   }
   
   // 暂存、提交并推送
   async function addCommitAndPush(message: string, noVerify = false) {
     try {
-      // 先添加并提交
-      const commitResult = await addAndCommit(message, noVerify)
-      if (!commitResult) {
-        return false
-      }
+      const addResult = await addToStage()
+      if (!addResult) return false
       
-      // 再推送
-      const pushResult = await pushToRemote()
+      // 使用新的延时常量
+      await delay(GIT_OPERATION_DELAY)
       
-      // 推送成功后，确保刷新日志
-      if (pushResult) {
-        // 添加延迟以确保服务器处理完成
-        setTimeout(() => {
-          console.log('刷新提交历史...')
-          fetchLog()
-        }, 300)
-      }
+      const commitResult = await commitChanges(message, noVerify)
+      if (!commitResult) return false
+      
+      // 使用新的延时常量
+      await delay(GIT_OPERATION_DELAY)
       
-      return pushResult
+      return await pushToRemote()
     } catch (error) {
+      // 如果发生错误，尝试删除 index.lock 文件
+      try {
+        const response = await fetch('/api/remove-lock', {
+          method: 'POST'
+        })
+        const result = await response.json()
+        if (result.success) {
+          ElMessage({
+            message: '已清理锁定文件，请重试操作',
+            type: 'warning'
+          })
+        }
+      } catch (e) {
+        console.error('清理锁定文件失败:', e)
+      }
+      
       ElMessage({
-        message: `暂存、提交并推送失败: ${(error as Error).message}`,
+        message: `操作失败: ${(error as Error).message}`,
         type: 'error'
       })
       return false
@@ -351,114 +435,30 @@ export const useGitLogStore = defineStore('gitLog', () => {
     }
   }
   
-  // 暂存文件
-  async function stageFiles(files: string[]) {
-    // 检查是否是Git仓库
-    if (!gitStore.isGitRepo) {
-      ElMessage.warning('当前目录不是Git仓库')
-      return false
-    }
-    
-    try {
-      const response = await fetch('/api/stage', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ files })
-      })
-      
-      const result = await response.json()
-      if (result.success) {
-        ElMessage({
-          message: '暂存文件成功',
-          type: 'success'
-        })
-        
-        // 刷新状态
-        fetchStatus()
-        
-        return true
-      } else {
-        ElMessage({
-          message: `暂存文件失败: ${result.error}`,
-          type: 'error'
-        })
-        return false
-      }
-    } catch (error) {
-      ElMessage({
-        message: `暂存文件失败: ${(error as Error).message}`,
-        type: 'error'
-      })
-      return false
-    }
-  }
-  
-  // 取消暂存文件
-  async function unstageFiles(files: string[]) {
-    // 检查是否是Git仓库
-    if (!gitStore.isGitRepo) {
-      ElMessage.warning('当前目录不是Git仓库')
-      return false
-    }
-    
-    try {
-      const response = await fetch('/api/unstage', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({ files })
-      })
-      
-      const result = await response.json()
-      if (result.success) {
-        ElMessage({
-          message: '取消暂存成功',
-          type: 'success'
-        })
-        
-        // 刷新状态
-        fetchStatus()
-        
-        return true
-      } else {
-        ElMessage({
-          message: `取消暂存失败: ${result.error}`,
-          type: 'error'
-        })
-        return false
-      }
-    } catch (error) {
-      ElMessage({
-        message: `取消暂存失败: ${(error as Error).message}`,
-        type: 'error'
-      })
-      return false
-    }
-  }
-  
   return {
     // 状态
     log,
     status,
+    statusText,
+    fileList,
     isLoadingLog,
     isLoadingStatus,
     isAddingFiles,
     isResetting,
+    isCommiting,
+    isPushing,
     
     // 方法
     fetchLog,
     fetchStatus,
+    fetchStatusPorcelain,
+    parseStatusPorcelain,
     addToStage,
     commitChanges,
     pushToRemote,
     addAndCommit,
     addCommitAndPush,
     resetHead,
-    resetToRemote,
-    stageFiles,
-    unstageFiles
+    resetToRemote
   }
 })