zen-gitsync 2.0.3 → 2.0.5

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

@@ -1,13 +1,26 @@
 <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 status = ref('加载中...')
+const gitLogStore = useGitLogStore()
+const gitStore = useGitStore()
+// 移除本地status定义，直接使用store中的statusText
+// const status = ref('加载中...')
 // const socket = io()
-const isRefreshing = ref(false)
-const fileList = ref<{path: string, type: string}[]>([])
+const isRefreshing = computed(() => gitLogStore.isLoadingStatus)
+// 移除本地fileList定义，改用store中的fileList
 const selectedFile = ref('')
 const diffContent = ref('')
 const diffDialogVisible = ref(false)
@@ -25,66 +38,33 @@ 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('')
+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) {
-      status.value = '当前目录不是一个Git仓库'
-      fileList.value = []
-      ElMessage.warning('当前目录不是一个Git仓库')
+    // 如果不是Git仓库，直接显示提示并返回
+    if (!gitStore.isGitRepo) {
       return
     }
     
-    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',
     })
-  } finally {
-    isRefreshing.value = false
   }
 }
 
@@ -134,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 || '没有变更'
@@ -152,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)
 }
 
@@ -289,13 +269,25 @@ 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仓库')
+        // 清空Git相关状态
+        gitStore.$reset() // 使用pinia的reset方法重置状态
       }
-      
-      // 刷新状态
-      loadStatus()
     } else {
       ElMessage.error(result.error || '切换目录失败')
     }
@@ -368,13 +360,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 +385,7 @@ defineExpose({
       </el-button>
     </div>
     <div class="status-header">
-      <h2>Git 状态</h2>
+      <h2>Git 状态(git status)</h2>
       <el-button 
         type="primary" 
         :icon="Refresh" 
@@ -407,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]"
       >
@@ -492,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>
     
@@ -524,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>
@@ -708,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 {