zen-gitsync 2.0.1 → 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 { ElMessage } from 'element-plus'
+import { ref, onMounted, computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 // import { io } from 'socket.io-client'
-import { Refresh, ArrowLeft, ArrowRight, Folder } from '@element-plus/icons-vue'
+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('')
@@ -14,6 +26,16 @@ const diffDialogVisible = ref(false)
 const isLoadingDiff = ref(false)
 // 添加当前文件索引
 const currentFileIndex = ref(-1)
+// 添加切换目录相关的状态
+const isDirectoryDialogVisible = ref(false)
+const newDirectoryPath = ref('')
+const isChangingDirectory = ref(false)
+// 添加目录浏览相关的状态
+const isDirectoryBrowserVisible = ref(false)
+const currentBrowsePath = ref('')
+const directoryItems = ref<{name: string, path: string, type: string}[]>([])
+const isBrowsing = ref(false)
+const browseErrorMessage = ref('')
 
 // 解析 git status 输出，提取文件及类型
 function parseStatus(statusText: string) {
@@ -38,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
@@ -73,8 +96,6 @@ async function loadStatus() {
       message: '刷新失败: ' + (error as Error).message,
       type: 'error',
     })
-  } finally {
-    isRefreshing.value = false
   }
 }
 
@@ -158,24 +179,224 @@ async function goToNextFile() {
   await getFileDiff(nextFile.path)
 }
 
+// 打开切换目录对话框
+function openDirectoryDialog() {
+  newDirectoryPath.value = currentDirectory.value
+  isDirectoryDialogVisible.value = true
+}
+
+// 打开目录浏览器
+function openDirectoryBrowser() {
+  browseErrorMessage.value = ''
+  currentBrowsePath.value = newDirectoryPath.value || currentDirectory.value
+  isDirectoryBrowserVisible.value = true
+  browseDirectory(currentBrowsePath.value)
+}
+
+// 浏览目录
+async function browseDirectory(directoryPath: string) {
+  try {
+    isBrowsing.value = true
+    browseErrorMessage.value = ''
+    
+    // 确保Windows盘符路径格式正确
+    let normalizedPath = directoryPath
+    if (/^[A-Za-z]:$/.test(normalizedPath)) {
+      normalizedPath += '/'
+    }
+    
+    const response = await fetch(`/api/browse_directory?path=${encodeURIComponent(normalizedPath)}`)
+    
+    if (response.status === 403) {
+      const data = await response.json()
+      browseErrorMessage.value = data.error || '目录浏览功能未启用'
+      return
+    }
+    
+    if (!response.ok) {
+      const data = await response.json()
+      browseErrorMessage.value = data.error || '获取目录内容失败'
+      return
+    }
+    
+    const data = await response.json()
+    
+    if (data.success) {
+      directoryItems.value = data.items
+      currentBrowsePath.value = data.currentPath
+    } else {
+      browseErrorMessage.value = data.error || '获取目录内容失败'
+    }
+  } catch (error) {
+    browseErrorMessage.value = `获取目录内容失败: ${(error as Error).message}`
+  } finally {
+    isBrowsing.value = false
+  }
+}
+
+// 导航到父目录
+function navigateToParent() {
+  // 检查是否已经是根目录
+  // Windows盘符根目录情况 (如 "E:")
+  if (/^[A-Za-z]:$/.test(currentBrowsePath.value) || 
+      /^[A-Za-z]:[\\/]$/.test(currentBrowsePath.value) || 
+      currentBrowsePath.value === '/') {
+    // 已经是根目录，不做任何操作
+    return
+  }
+  
+  // 获取当前路径的父目录
+  let pathParts = currentBrowsePath.value.split(/[/\\]/)
+  
+  // 移除最后一个目录部分
+  pathParts.pop()
+  
+  // 处理Windows盘符特殊情况
+  let parentPath = pathParts.join('/')
+  if (pathParts.length === 1 && /^[A-Za-z]:$/.test(pathParts[0])) {
+    // 如果只剩下盘符，确保添加斜杠 (例如 "E:/")
+    parentPath = pathParts[0] + '/'
+  }
+  
+  if (parentPath) {
+    browseDirectory(parentPath)
+  }
+}
+
+// 选择目录项
+function selectDirectoryItem(item: {name: string, path: string, type: string}) {
+  if (item.type === 'directory') {
+    browseDirectory(item.path)
+  }
+}
+
+// 选择当前目录
+function selectCurrentDirectory() {
+  newDirectoryPath.value = currentBrowsePath.value
+  isDirectoryBrowserVisible.value = false
+}
+
+// 切换工作目录
+async function changeDirectory() {
+  if (!newDirectoryPath.value) {
+    ElMessage.warning('目录路径不能为空')
+    return
+  }
+  
+  try {
+    isChangingDirectory.value = true
+    const response = await fetch('/api/change_directory', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ path: newDirectoryPath.value })
+    })
+    
+    const result = await response.json()
+    
+    if (result.success) {
+      ElMessage.success('已切换工作目录')
+      currentDirectory.value = result.directory
+      isDirectoryDialogVisible.value = false
+      
+      // 直接使用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方法重置状态
+      }
+    } else {
+      ElMessage.error(result.error || '切换目录失败')
+    }
+  } catch (error) {
+    ElMessage.error(`切换目录失败: ${(error as Error).message}`)
+  } finally {
+    isChangingDirectory.value = false
+  }
+}
+
 // 处理文件点击
 function handleFileClick(file: {path: string, type: string}) {
   getFileDiff(file.path)
 }
 
+// 文件类型标签显示
+function fileTypeLabel(type: string) {
+  switch (type) {
+    case 'added': return '新增';
+    case 'modified': return '修改';
+    case 'deleted': return '删除';
+    case 'untracked': return '未跟踪';
+    default: return '其他';
+  }
+}
+
 // 刷新Git状态的方法
 async function refreshStatus() {
   await loadStatus()
 }
 
+// 添加撤回文件修改的方法
+async function revertFileChanges(filePath: string) {
+  try {
+    // 请求用户确认
+    await ElMessageBox.confirm(
+      `确定要撤回文件 "${filePath}" 的所有修改吗？此操作无法撤销。`,
+      '撤回修改',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    )
+    
+    // 发送请求到后端API
+    const response = await fetch('/api/revert_file', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ filePath })
+    })
+    
+    const result = await response.json()
+    
+    if (result.success) {
+      ElMessage.success('已撤回文件修改')
+      // 刷新Git状态
+      await loadStatus()
+    } else {
+      ElMessage.error(result.error || '撤回文件修改失败')
+    }
+  } catch (error) {
+    // 用户取消或发生错误
+    if ((error as Error).message !== 'cancel') {
+      ElMessage.error(`撤回文件修改失败: ${(error as Error).message}`)
+    }
+  }
+}
+
 onMounted(() => {
+  // App.vue已经加载了Git相关数据，此时只需加载状态
+  // 如果已有初始目录，则只需加载状态
   loadStatus()
-  
-  // Socket.io 事件
-  // socket.on('status_update', (data: { status: string }) => {
-  //   status.value = data.status
-  //   parseStatus(data.status)
-  // })
 })
 
 // onUnmounted(() => {
@@ -193,9 +414,12 @@ defineExpose({
     <div class="current-directory">
       <el-icon><Folder /></el-icon>
       <span>{{ currentDirectory }}</span>
+      <el-button type="primary" size="small" @click="openDirectoryDialog" plain>
+        切换目录
+      </el-button>
     </div>
     <div class="status-header">
-      <h2>Git 状态</h2>
+      <h2>Git 状态(git status)</h2>
       <el-button 
         type="primary" 
         :icon="Refresh" 
@@ -212,13 +436,99 @@ defineExpose({
         v-for="file in fileList" 
         :key="file.path" 
         :class="['file-item', file.type]"
-        @click="handleFileClick(file)"
       >
-        <span class="file-type">{{ fileTypeLabel(file.type) }}</span>
-        <span class="file-path">{{ file.path }}</span>
+        <div class="file-info" @click="handleFileClick(file)">
+          <span class="file-type">{{ fileTypeLabel(file.type) }}</span>
+          <span class="file-path">{{ file.path }}</span>
+        </div>
+        <div class="file-actions">
+          <el-tooltip content="撤回修改" placement="top" :hide-after="1000">
+            <el-button
+              type="danger"
+              size="small"
+              :icon="RefreshRight"
+              circle
+              @click.stop="revertFileChanges(file.path)"
+            />
+          </el-tooltip>
+        </div>
       </div>
     </div>
     
+    <!-- 切换目录对话框 -->
+    <el-dialog
+      v-model="isDirectoryDialogVisible"
+      title="切换工作目录"
+      width="500px"
+    >
+      <el-form>
+        <el-form-item label="目录路径">
+          <el-input v-model="newDirectoryPath" placeholder="请输入目录路径" clearable />
+          <div class="directory-buttons">
+            <el-button @click="openDirectoryBrowser" type="primary" plain class="no-padding-left">
+              <el-icon><Folder /></el-icon>
+              浏览
+            </el-button>
+            <el-button @click="changeDirectory" :loading="isChangingDirectory" type="primary">
+              切换
+            </el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    
+    <!-- 目录浏览对话框 -->
+    <el-dialog
+      v-model="isDirectoryBrowserVisible"
+      title="浏览目录"
+      width="600px"
+    >
+      <div class="browser-current-path">
+        <span>当前路径: {{ currentBrowsePath }}</span>
+      </div>
+      
+      <div v-if="browseErrorMessage" class="browser-error">
+        {{ browseErrorMessage }}
+      </div>
+      
+      <div v-loading="isBrowsing" class="directory-browser">
+        <!-- 导航栏 -->
+        <div class="browser-nav">
+          <el-button 
+            @click="navigateToParent" 
+            :disabled="!currentBrowsePath || isBrowsing"
+            size="small"
+            class="no-padding-left"
+          >
+            <el-icon><ArrowUp /></el-icon>
+            上级目录
+          </el-button>
+          <el-button 
+            @click="selectCurrentDirectory" 
+            type="primary" 
+            size="small"
+            class="no-padding-left"
+          >
+            选择当前目录
+          </el-button>
+        </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>
+    </el-dialog>
+    
     <!-- 文件差异对话框 -->
     <el-dialog
       v-model="diffDialogVisible"
@@ -251,18 +561,15 @@ defineExpose({
   </div>
 </template>
 
-<script lang="ts">
-// 辅助函数：类型标签
-function fileTypeLabel(type: string) {
-  if (type === 'added') return '新增'
-  if (type === 'modified') return '修改'
-  if (type === 'deleted') return '删除'
-  if (type === 'untracked') return '未跟踪'
-  return '其它'
+<style scoped>
+.card {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  margin-bottom: 20px;
 }
-</script>
 
-<style scoped>
 .status-header {
   display: flex;
   justify-content: space-between;
@@ -274,130 +581,241 @@ function fileTypeLabel(type: string) {
   margin: 0;
 }
 
+.status-box {
+  white-space: pre-wrap;
+  font-family: monospace;
+  background-color: #f5f7fa;
+  padding: 15px;
+  border-radius: 4px;
+  margin-bottom: 15px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
 .file-list {
-  margin-top: 10px;
+  max-height: 300px;
+  overflow-y: auto;
 }
 
 .file-item {
+  padding: 8px 12px;
+  margin-bottom: 5px;
+  border-radius: 4px;
+  cursor: pointer;
   display: flex;
   align-items: center;
-  margin-bottom: 4px;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 14px;
-  cursor: pointer;
-  transition: opacity 0.2s;
+  justify-content: space-between;
 }
+
 .file-item:hover {
-  opacity: 0.8;
-}
-.file-item.added {
-  background: #e6ffed;
-  color: #22863a;
+  background-color: #f5f7fa;
 }
-.file-item.modified {
-  background: #fff5b1;
-  color: #b08800;
+
+.file-info {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
 }
-.file-item.deleted {
-  background: #ffeef0;
-  color: #cb2431;
+
+.file-actions {
+  margin-left: 10px;
+  opacity: 0.5;
+  transition: opacity 0.2s;
 }
-.file-item.untracked {
-  background: #f1f8ff;
-  color: #0366d6;
+
+.file-item:hover .file-actions {
+  opacity: 1;
 }
+
 .file-type {
-  font-weight: bold;
-  margin-right: 8px;
+  font-size: 12px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.added .file-type {
+  background-color: #e1f3d8;
+  color: #67c23a;
 }
+
+.modified .file-type {
+  background-color: #e6f1fc;
+  color: #409eff;
+}
+
+.deleted .file-type {
+  background-color: #fef0f0;
+  color: #f56c6c;
+}
+
+.untracked .file-type {
+  background-color: #fdf6ec;
+  color: #e6a23c;
+}
+
 .file-path {
   font-family: monospace;
+  word-break: break-all;
 }
 
 .diff-content {
-  max-height: 70vh;
-  overflow-y: auto;
-  background-color: #f6f8fa;
-  border: 1px solid #e1e4e8;
-  border-radius: 3px;
-  padding: 15px;
   font-family: monospace;
   white-space: pre-wrap;
+  max-height: 60vh;
+  overflow-y: auto;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
 }
 
 .diff-formatted {
-  margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
 }
 
-/* 差异内容的颜色样式 - 使用深度选择器 */
-:deep(.diff-header) {
-  color: #24292e;
-  font-weight: bold;
+.file-navigation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 15px;
 }
 
-:deep(.diff-old-file) {
-  color: #cb2431;
-  background-color: #ffeef0;
+.file-counter {
+  margin: 0 15px;
+  font-size: 14px;
+  color: #606266;
 }
 
-:deep(.diff-new-file) {
-  color: #22863a;
-  background-color: #e6ffed;
+.current-directory {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  padding: 8px 12px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+  font-family: monospace;
 }
 
-:deep(.diff-hunk-header) {
-  color: #6f42c1;
-  background-color: #f1f8ff;
+.current-directory .el-icon {
+  margin-right: 8px;
+  color: #409eff;
 }
 
-:deep(.diff-added) {
-  color: #22863a;
-  background-color: #e6ffed;
+.current-directory span {
+  flex-grow: 1;
+  word-break: break-all;
+  margin-right: 10px;
 }
 
-:deep(.diff-removed) {
-  color: #cb2431;
-  background-color: #ffeef0;
+.browser-current-path {
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #606266;
+  background-color: #f5f7fa;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-family: monospace;
+  word-break: break-all;
+}
+
+.browser-error {
+  margin-bottom: 10px;
+  color: #f56c6c;
+  padding: 8px 12px;
+  background-color: #fef0f0;
+  border-radius: 4px;
 }
 
-:deep(.diff-context) {
-  color: #24292e;
+.directory-browser {
+  padding: 10px;
+  max-height: 400px;
+  overflow-y: auto;
 }
 
-.no-diff {
-  text-align: center;
-  padding: 20px;
-  color: #666;
+.browser-nav {
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
 }
 
-/* 添加文件导航样式 */
-.file-navigation {
+.directory-items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.directory-item {
+  padding: 8px 12px;
+  margin-bottom: 5px;
+  border-radius: 4px;
+  cursor: pointer;
   display: flex;
-  justify-content: center;
   align-items: center;
-  margin-top: 15px;
-  gap: 10px;
 }
 
-.file-counter {
-  font-size: 14px;
+.directory-item:hover {
+  background-color: #f5f7fa;
+}
+
+.directory-item.directory {
+  color: #409eff;
+}
+
+.directory-item.file {
   color: #606266;
 }
-.current-directory {
-  padding: 10px 15px;
-  background-color: #f0f0f0;
-  border-bottom: 1px solid #e1e4e8;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+
+.directory-item .el-icon {
+  margin-right: 10px;
+}
+
+.directory-item span {
   font-family: monospace;
+  word-break: break-all;
 }
-.not-git-repo {
-  margin: 10px 0;
-  padding: 10px;
-  background-color: #fffbf6;
-  border: 1px solid #f0c78a;
-  border-radius: 4px;
+
+.directory-buttons {
+  display: flex;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+/* 移除按钮左侧的内边距 */
+.no-padding-left {
+  padding-left: 8px !important;
+}
+</style>
+
+<!-- 添加非scoped样式，使diff格式化样式对动态内容生效 -->
+<style>
+.diff-header {
+  font-weight: bold;
+  background-color: #e6f1fc;
+  padding: 3px;
+  margin: 5px 0;
+}
+
+.diff-old-file, .diff-new-file {
+  color: #888;
+}
+
+.diff-hunk-header {
+  color: #6f42c1;
+}
+
+.diff-added {
+  background-color: #e6ffed;
+  color: #28a745;
+}
+
+.diff-removed {
+  background-color: #ffeef0;
+  color: #d73a49;
+}
+
+.diff-context {
+  color: #444;
 }
 </style>