zen-gitsync 2.0.5 → 2.0.7

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, watch } 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 { Refresh, ArrowLeft, ArrowRight, Folder, Document, ArrowUp, RefreshRight, Check, Close } from '@element-plus/icons-vue'
 import { useGitLogStore } from '../stores/gitLogStore'
 import { useGitStore } from '../stores/gitStore'
 
@@ -56,6 +56,9 @@ async function loadStatus() {
     // 使用gitLogStore获取Git状态
     await gitLogStore.fetchStatus()
     
+    // 同时刷新分支状态信息，确保显示最新的领先/落后提交数
+    await gitStore.getBranchStatus()
+    
     ElMessage({
       message: 'Git 状态已刷新',
       type: 'success',
@@ -115,10 +118,41 @@ async function getFileDiff(filePath: string) {
     selectedFile.value = 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 || '没有变更'
-    diffDialogVisible.value = true
+    
+    // 获取当前文件的状态类型
+    const currentFile = gitLogStore.fileList[currentFileIndex.value]
+    
+    // 对未跟踪文件特殊处理
+    if (currentFile && currentFile.type === 'untracked') {
+      try {
+        // 获取未跟踪文件的内容
+        const response = await fetch(`/api/file-content?file=${encodeURIComponent(filePath)}`)
+        const data = await response.json()
+        
+        if (data.success && data.content) {
+          // 构建一个类似diff的格式来显示新文件内容
+          diffContent.value = `diff --git a/${filePath} b/${filePath}\n` +
+            `新文件: ${filePath}\n` +
+            `--- /dev/null\n` +
+            `+++ b/${filePath}\n` +
+            `@@ -0,0 +1,${data.content.split('\n').length} @@\n` +
+            data.content.split('\n').map((line: string) => `+${line}`).join('\n')
+        } else {
+          diffContent.value = '这是一个新文件，尚未被Git跟踪。\n添加到暂存区后可以提交该文件。'
+        }
+      } catch (error) {
+        console.error('获取未跟踪文件内容失败:', error)
+        diffContent.value = '这是一个新文件，尚未被Git跟踪。\n添加到暂存区后可以提交该文件。'
+      }
+      
+      diffDialogVisible.value = true
+    } else {
+      // 对于已跟踪的文件，获取常规差异
+      const response = await fetch(`/api/diff?file=${encodeURIComponent(filePath)}`)
+      const data = await response.json()
+      diffContent.value = data.diff || '没有变更'
+      diffDialogVisible.value = true
+    }
   } catch (error) {
     ElMessage({
       message: '获取文件差异失败: ' + (error as Error).message,
@@ -303,15 +337,14 @@ 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 '其他';
-  }
+// 暂存单个文件
+async function stageFile(filePath: string) {
+  await gitLogStore.addFileToStage(filePath)
+}
+
+// 取消暂存单个文件
+async function unstageFile(filePath: string) {
+  await gitLogStore.unstageFile(filePath)
 }
 
 // 刷新Git状态的方法
@@ -349,26 +382,62 @@ async function revertFileChanges(filePath: string) {
       // 刷新Git状态
       await loadStatus()
     } else {
-      ElMessage.error(result.error || '撤回文件修改失败')
+      // 使用自定义错误信息，避免显示undefined
+      ElMessage.error(result.error ? `撤回失败: ${result.error}` : '撤回文件修改失败，请重试')
     }
   } catch (error) {
-    // 用户取消或发生错误
-    if ((error as Error).message !== 'cancel') {
-      ElMessage.error(`撤回文件修改失败: ${(error as Error).message}`)
+    // 用户取消操作不显示错误
+    if ((error as any) === 'cancel' || (error as Error).message === 'cancel') {
+      // 用户取消操作，不做任何处理，也不显示错误
+      return
+    }
+    
+    // 其他错误情况才显示错误消息
+    // 避免显示undefined错误信息
+    const errorMessage = (error as Error).message || '未知错误';
+    if (errorMessage !== 'undefined') {
+      ElMessage.error(`撤回文件修改失败: ${errorMessage}`)
+    } else {
+      ElMessage.error('撤回文件修改失败，请重试')
     }
   }
 }
 
+// 提取文件名和目录
+function getFileName(path: string): string {
+  const parts = path.split('/')
+  return parts[parts.length - 1]
+}
+
+function getFileDirectory(path: string): string {
+  const parts = path.split('/')
+  if (parts.length <= 1) return ''
+  
+  // 保留所有除最后一个部分的路径
+  return parts.slice(0, -1).join('/')
+}
+
 onMounted(() => {
   // App.vue已经加载了Git相关数据，此时只需加载状态
   // 如果已有初始目录，则只需加载状态
   loadStatus()
+  
+  // 如果是Git仓库，确保分支状态也被加载
+  if (gitStore.isGitRepo) {
+    gitStore.getBranchStatus()
+  }
 })
 
+// 监听autoUpdateEnabled的变化，手动调用toggleAutoUpdate
+watch(() => gitLogStore.autoUpdateEnabled, (newValue, oldValue) => {
+  console.log(`自动更新状态变更: ${oldValue} -> ${newValue}`)
+  // 调用store中的方法来实现服务器通信功能
+  gitLogStore.toggleAutoUpdate()
+}, { immediate: false })
+
 // onUnmounted(() => {
 //   socket.disconnect()
 // })
-
 // 暴露刷新方法给父组件
 defineExpose({
   refreshStatus
@@ -377,48 +446,219 @@ defineExpose({
 
 <template>
   <div class="card">
-    <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 状态(git status)</h2>
-      <el-button 
-        type="primary" 
-        :icon="Refresh" 
-        circle 
-        size="small" 
-        @click="refreshStatus" 
-        :loading="isRefreshing"
-      />
-    </div>
-    <div class="status-box">
-      {{ !gitStore.isGitRepo ? '当前目录不是一个Git仓库' : gitLogStore.statusText || '加载中...' }}
+      <h2>Git 状态</h2>
+      <div class="header-actions">
+        <el-tooltip 
+          :content="gitLogStore.autoUpdateEnabled ? '禁用自动更新文件状态' : '启用自动更新文件状态'" 
+          placement="top" 
+          :hide-after="1000"
+        >
+          <el-switch 
+            v-model="gitLogStore.autoUpdateEnabled" 
+            style="--el-switch-on-color: #67C23A; --el-switch-off-color: #909399; margin-right: 10px;"
+            inline-prompt
+            :active-icon="Check"
+            :inactive-icon="Close"
+            class="auto-update-switch"
+          />
+        </el-tooltip>
+        <el-tooltip content="刷新状态" placement="top" :hide-after="1000">
+          <el-button 
+            type="primary" 
+            :icon="Refresh" 
+            circle 
+            size="small" 
+            @click="refreshStatus" 
+            :loading="isRefreshing"
+          />
+        </el-tooltip>
+      </div>
     </div>
-    <!-- 颜色区分不同类型文件 -->
-    <div v-if="gitLogStore.fileList.length" class="file-list">
-      <div 
-        v-for="file in gitLogStore.fileList" 
-        :key="file.path" 
-        :class="['file-item', file.type]"
-      >
-        <div class="file-info" @click="handleFileClick(file)">
-          <span class="file-type">{{ fileTypeLabel(file.type) }}</span>
-          <span class="file-path">{{ file.path }}</span>
+    
+    <div class="card-content">
+      <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 v-if="!gitStore.isGitRepo" class="status-box">
+        <div class="empty-status">
+          <p>当前目录不是Git仓库</p>
+          <el-button type="primary" size="small" @click="openDirectoryDialog">
+            切换目录
+          </el-button>
         </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 v-else>
+        <!-- 分支同步状态信息 -->
+        <div v-if="gitStore.hasUpstream && (gitStore.branchAhead > 0 || gitStore.branchBehind > 0)" class="branch-sync-status">
+          <div class="sync-status-content">
+            <el-tooltip content="本地分支与远程分支的状态对比" placement="top">
+              <div class="status-badges">
+                <el-tag v-if="gitStore.branchAhead > 0" size="small" type="warning" class="status-badge">
+                  <template #default>
+                    <span class="badge-content">
+                      <el-icon><ArrowUp /></el-icon> 你的分支领先 'origin/{{ gitStore.currentBranch }}' {{ gitStore.branchAhead }} 个提交
+                    </span>
+                  </template>
+                </el-tag>
+                <el-tag v-if="gitStore.branchBehind > 0" size="small" type="info" class="status-badge">
+                  <template #default>
+                    <span class="badge-content">
+                      <el-icon><ArrowDown /></el-icon> 你的分支落后 'origin/{{ gitStore.currentBranch }}' {{ gitStore.branchBehind }} 个提交
+                    </span>
+                  </template>
+                </el-tag>
+              </div>
+            </el-tooltip>
+          </div>
+        </div>
+        
+        <!-- 默认状态信息 -->
+        <div v-if="!gitStore.hasUpstream || (gitStore.branchAhead === 0 && gitStore.branchBehind === 0)" class="git-status-message">
+          <p>当前工作在 <el-tag size="small" type="success">{{ gitStore.currentBranch }}</el-tag> 分支</p>
+        </div>
+        
+        <!-- 现代化、简洁的文件列表 -->
+        <div v-if="gitLogStore.fileList.length" class="file-list-container">
+          <!-- 分组显示文件 -->
+          <div v-if="gitLogStore.fileList.some(f => f.type === 'added')" class="file-group">
+            <div class="file-group-header">已暂存的更改</div>
+            <div class="file-list">
+              <div
+                v-for="file in gitLogStore.fileList.filter(f => f.type === 'added')"
+                :key="file.path"
+                class="file-item"
+                @click="handleFileClick(file)"
+              >
+                <div class="file-info">
+                  <div class="file-path-container">
+                    <span class="file-name">{{ getFileName(file.path) }}</span>
+                    <span class="file-directory">{{ getFileDirectory(file.path) }}</span>
+                  </div>
+                </div>
+                <div class="file-actions">
+                  <el-tooltip content="取消暂存" placement="top" :hide-after="1000">
+                    <el-button
+                      type="warning"
+                      size="small"
+                      circle
+                      @click.stop="unstageFile(file.path)"
+                    >-</el-button>
+                  </el-tooltip>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div v-if="gitLogStore.fileList.some(f => f.type === 'modified' || f.type === 'deleted')" class="file-group">
+            <div class="file-group-header">未暂存的更改</div>
+            <div class="file-list">
+              <div
+                v-for="file in gitLogStore.fileList.filter(f => f.type === 'modified' || f.type === 'deleted')"
+                :key="file.path"
+                class="file-item"
+                @click="handleFileClick(file)"
+              >
+                <div class="file-info">
+                  <div class="file-status-indicator" :class="file.type"></div>
+                  <div class="file-path-container">
+                    <span class="file-name">{{ getFileName(file.path) }}</span>
+                    <span class="file-directory">{{ getFileDirectory(file.path) }}</span>
+                  </div>
+                </div>
+                <div class="file-actions">
+                  <el-tooltip content="添加到暂存区" placement="top" :hide-after="1000">
+                    <el-button
+                      type="success"
+                      size="small"
+                      circle
+                      @click.stop="stageFile(file.path)"
+                    >+</el-button>
+                  </el-tooltip>
+                  <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>
+          </div>
+          
+          <div v-if="gitLogStore.fileList.some(f => f.type === 'untracked')" class="file-group">
+            <div class="file-group-header">未跟踪的文件</div>
+            <div class="file-list">
+              <div
+                v-for="file in gitLogStore.fileList.filter(f => f.type === 'untracked')"
+                :key="file.path"
+                class="file-item"
+                @click="handleFileClick(file)"
+              >
+                <div class="file-info">
+                  <div class="file-status-indicator untracked"></div>
+                  <div class="file-path-container">
+                    <span class="file-name">{{ getFileName(file.path) }}</span>
+                    <span class="file-directory">{{ getFileDirectory(file.path) }}</span>
+                  </div>
+                </div>
+                <div class="file-actions">
+                  <el-tooltip content="添加到暂存区" placement="top" :hide-after="1000">
+                    <el-button
+                      type="success"
+                      size="small"
+                      circle
+                      @click.stop="stageFile(file.path)"
+                    >+</el-button>
+                  </el-tooltip>
+                  <el-tooltip content="删除文件" placement="top" :hide-after="1000">
+                    <el-button
+                      type="danger"
+                      size="small"
+                      :icon="Close"
+                      circle
+                      @click.stop="revertFileChanges(file.path)"
+                    />
+                  </el-tooltip>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div v-else-if="gitStore.isGitRepo" class="empty-status">
+          <div class="empty-icon">
+            <el-icon><Document /></el-icon>
+          </div>
+          <div class="empty-text">没有检测到任何更改</div>
+          <div class="empty-subtext">工作区是干净的</div>
+          
+          <!-- 添加分支信息 -->
+          <div class="branch-info">
+            <p>当前工作在 <el-tag size="small" type="success">{{ gitStore.currentBranch }}</el-tag> 分支</p>
+            
+            <!-- 显示分支同步状态 -->
+            <div v-if="gitStore.hasUpstream">
+              <span v-if="gitStore.branchAhead > 0" class="branch-sync-info warning">
+                <el-icon><ArrowUp /></el-icon> 你的分支领先 'origin/{{ gitStore.currentBranch }}' {{ gitStore.branchAhead }} 个提交
+              </span>
+              <span v-else-if="gitStore.branchBehind > 0" class="branch-sync-info info">
+                <el-icon><ArrowDown /></el-icon> 你的分支落后 'origin/{{ gitStore.currentBranch }}' {{ gitStore.branchBehind }} 个提交
+              </span>
+              <span v-else class="branch-sync-info success">
+                <el-icon><Check /></el-icon> 你的分支与 'origin/{{ gitStore.currentBranch }}' 同步
+              </span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -502,31 +742,72 @@ defineExpose({
     <!-- 文件差异对话框 -->
     <el-dialog
       v-model="diffDialogVisible"
-      :title="`文件差异: ${selectedFile}`"
-      width="80%"
+      width="85%"
+      top="5vh"
       destroy-on-close
+      class="diff-dialog"
+      :show-close="false"
+      style="height: calc(100vh - 150px);"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
     >
+      <template #header>
+        <div class="diff-dialog-header">
+          <div class="file-title">
+            <el-icon class="file-icon"><Document /></el-icon>
+            <span class="file-path">{{ selectedFile }}</span>
+          </div>
+          <div class="header-actions">
+            <el-button 
+              @click="diffDialogVisible = false" 
+              circle 
+              size="small" 
+              :icon="Close" 
+              class="close-button"
+            />
+          </div>
+        </div>
+      </template>
+      
       <div v-loading="isLoadingDiff" class="diff-content">
         <div v-if="diffContent" v-html="formatDiff(diffContent)" class="diff-formatted"></div>
         <div v-else class="no-diff">该文件没有差异或是新文件</div>
       </div>
       
-      <!-- 添加文件导航按钮 -->
-      <div class="file-navigation">
-        <el-button 
-          :icon="ArrowLeft" 
-          @click="goToPreviousFile" 
-          :disabled="currentFileIndex <= 0 || gitLogStore.fileList.length === 0"
-          circle
-        />
-        <span class="file-counter">{{ currentFileIndex + 1 }} / {{ gitLogStore.fileList.length }}</span>
-        <el-button 
-          :icon="ArrowRight" 
-          @click="goToNextFile" 
-          :disabled="currentFileIndex >= gitLogStore.fileList.length - 1 || gitLogStore.fileList.length === 0"
-          circle
-        />
-      </div>
+      <template #footer>
+        <div class="file-navigation">
+          <el-button 
+            type="primary"
+            :icon="ArrowLeft" 
+            @click="goToPreviousFile" 
+            :disabled="currentFileIndex <= 0 || gitLogStore.fileList.length === 0"
+            plain
+            class="nav-button"
+          >
+            上一个文件
+          </el-button>
+          
+          <div class="file-counter">
+            <el-tag type="info" effect="plain" class="counter-tag">
+              {{ currentFileIndex + 1 }} / {{ gitLogStore.fileList.length }}
+            </el-tag>
+          </div>
+          
+          <el-button 
+            type="primary"
+            :icon="ArrowRight" 
+            @click="goToNextFile" 
+            :disabled="currentFileIndex >= gitLogStore.fileList.length - 1 || gitLogStore.fileList.length === 0"
+            plain
+            class="nav-button"
+          >
+            下一个文件
+            <template #icon>
+              <el-icon class="el-icon--right"><ArrowRight /></el-icon>
+            </template>
+          </el-button>
+        </div>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -535,226 +816,487 @@ defineExpose({
 .card {
   background-color: #fff;
   border-radius: 8px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  margin-bottom: 20px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.03);
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 .status-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 10px;
+  padding: 8px 16px;
+  border-bottom: 1px solid #f0f0f0;
+  height: 36px;
 }
 
 .status-header h2 {
   margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+}
+
+.card-content {
+  padding: 15px;
+  overflow-y: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 300px; /* 确保内容区有最小高度 */
+}
+
+.current-directory {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 10px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  font-family: monospace;
+  border: 1px solid #f0f0f0;
+}
+
+.current-directory .el-icon {
+  margin-right: 8px;
+  color: #409eff;
+}
+
+.current-directory span {
+  flex-grow: 1;
+  word-break: break-all;
+  margin-right: 10px;
 }
 
 .status-box {
   white-space: pre-wrap;
   font-family: monospace;
-  background-color: #f5f7fa;
-  padding: 15px;
-  border-radius: 4px;
-  margin-bottom: 15px;
-  max-height: 300px;
+  background-color: #f8f9fa;
+  padding: 16px;
+  border-radius: 6px;
+  margin-bottom: 20px;
+  max-height: 200px;
   overflow-y: auto;
+  border: 1px solid #f0f0f0;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* 现代化的文件列表容器 */
+.file-list-container {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0;
+  gap: 12px;
+  height: auto; /* 改为自适应高度，不固定高度 */
+  min-height: 100px; /* 设置最小高度 */
+}
+
+.file-group {
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid #ebeef5;
+  margin-bottom: 12px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 让每个文件组根据内容自动增长 */
+.file-group {
+  flex: 0 1 auto; /* 不主动增长，但允许缩小，基于内容大小 */
+}
+
+/* 最后一个分组可以吸收剩余空间 */
+.file-group:last-child {
+  margin-bottom: 0;
+  flex: 1 1 auto; /* 可以增长占用剩余空间 */
+}
+
+.file-group-header {
+  font-size: 14px;
+  font-weight: bold;
+  padding: 8px 12px;
+  background-color: #f0f2f5;
+  color: #606266;
+  border-bottom: 1px solid #ebeef5;
+  flex-shrink: 0; /* 防止header被压缩 */
 }
 
 .file-list {
-  max-height: 300px;
   overflow-y: auto;
+  min-height: 40px; /* 最小高度 */
+  max-height: 200px; /* 最大高度限制，避免过长列表 */
+  flex-grow: 1; /* 允许文件列表在文件组内扩展 */
+  padding: 0;
+  margin: 0;
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: rgba(144, 147, 153, 0.3) transparent; /* Firefox */
+}
+
+/* Webkit浏览器的滚动条样式 */
+.file-list::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.file-list::-webkit-scrollbar-thumb {
+  background-color: rgba(144, 147, 153, 0.3);
+  border-radius: 4px;
+}
+
+.file-list::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(144, 147, 153, 0.5);
+}
+
+.file-list::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+/* 让每个文件列表自适应高度，使其在容器中更好地分配空间 */
+.file-list:empty {
+  display: none; /* 如果列表为空，不显示 */
+}
+
+/* 当没有足够的项目填充列表时，禁用滚动 */
+.file-list:has(.empty-file-group) {
+  overflow-y: hidden;
+}
+
+/* 替换为更兼容的选择器 */
+/* 改用直接为empty-file-group父容器添加样式 */
+.empty-file-container {
+  overflow-y: hidden !important; /* 强制禁用滚动 */
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex: 1;
+}
+
+.empty-file-group {
+  padding: 16px;
+  text-align: center;
+  color: #909399;
+  font-size: 13px;
+  font-style: italic;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 50px; /* 增加最小高度 */
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  margin: 8px;
+}
+
+/* 自定义每个分组的展开逻辑 */
+/* 已暂存文件分组 - 保持小巧 */
+.file-group:nth-child(1) {
+  flex: 0 1 auto;
+}
+
+/* 未暂存更改分组 - 稍微大一些 */
+.file-group:nth-child(2) {
+  flex: 0 1 auto;
+}
+
+/* 未跟踪文件分组 - 可以占据剩余空间 */
+.file-group:nth-child(3) {
+  flex: 1 1 auto;
 }
 
 .file-item {
   padding: 8px 12px;
-  margin-bottom: 5px;
-  border-radius: 4px;
-  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  border-bottom: 1px solid #ebeef5;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.file-item:last-child {
+  border-bottom: none;
 }
 
 .file-item:hover {
-  background-color: #f5f7fa;
+  background-color: #ecf5ff;
 }
 
 .file-info {
   display: flex;
   align-items: center;
   flex-grow: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  gap: 8px;
 }
 
-.file-actions {
-  margin-left: 10px;
-  opacity: 0.5;
-  transition: opacity 0.2s;
+.file-status-indicator {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #409eff;
+  flex-shrink: 0;
 }
 
-.file-item:hover .file-actions {
-  opacity: 1;
+.file-status-indicator.added {
+  background-color: #67c23a;
 }
 
-.file-type {
-  font-size: 12px;
-  padding: 2px 6px;
-  border-radius: 10px;
-  margin-right: 10px;
-  flex-shrink: 0;
+.file-status-indicator.modified {
+  background-color: #409eff;
 }
 
-.added .file-type {
-  background-color: #e1f3d8;
-  color: #67c23a;
+.file-status-indicator.deleted {
+  background-color: #f56c6c;
 }
 
-.modified .file-type {
-  background-color: #e6f1fc;
-  color: #409eff;
+.file-status-indicator.untracked {
+  background-color: #e6a23c;
 }
 
-.deleted .file-type {
-  background-color: #fef0f0;
-  color: #f56c6c;
+.file-path-container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.untracked .file-type {
-  background-color: #fdf6ec;
-  color: #e6a23c;
+.file-name {
+  font-weight: 500;
+  color: #303133;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.2;
 }
 
-.file-path {
-  font-family: monospace;
-  word-break: break-all;
+.file-directory {
+  font-size: 12px;
+  color: #909399;
+  max-width: 200px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-.diff-content {
-  font-family: monospace;
-  white-space: pre-wrap;
-  max-height: 60vh;
-  overflow-y: auto;
-  padding: 10px;
-  background-color: #f5f7fa;
-  border-radius: 4px;
+.file-actions {
+  display: flex;
+  gap: 5px;
+  opacity: 0;
+  transition: opacity 0.2s;
 }
 
-.diff-formatted {
-  font-size: 14px;
-  line-height: 1.5;
+.file-item:hover .file-actions {
+  opacity: 1;
 }
 
-.file-navigation {
+.empty-status {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  margin-top: 10px;
+}
+
+.empty-icon {
+  width: 60px;
+  height: 60px;
+  display: flex;
   align-items: center;
+  justify-content: center;
+  background-color: #ebeef5;
+  border-radius: 50%;
+  margin-bottom: 15px;
+  font-size: 24px;
+  color: #909399;
+  animation: pulse 2s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); opacity: 0.7; }
+  50% { transform: scale(1.05); opacity: 1; }
+  100% { transform: scale(1); opacity: 0.7; }
+}
+
+.empty-text {
+  font-size: 16px;
+  font-weight: 500;
+  color: #606266;
+  margin-bottom: 5px;
+}
+
+.empty-subtext {
+  font-size: 14px;
+  color: #909399;
+  margin-bottom: 20px;
+}
+
+/* 分支信息样式 */
+.branch-info {
   margin-top: 15px;
+  padding: 10px 15px;
+  background-color: #ebeef5;
+  border-radius: 6px;
+  text-align: left;
+  width: 100%;
+  max-width: 400px;
 }
 
-.file-counter {
-  margin: 0 15px;
+.branch-info p {
+  margin: 5px 0;
   font-size: 14px;
   color: #606266;
 }
 
-.current-directory {
+.branch-sync-info {
   display: flex;
   align-items: center;
-  margin-bottom: 15px;
-  padding: 8px 12px;
-  background-color: #f5f7fa;
+  gap: 5px;
+  font-size: 13px;
+  margin-top: 5px;
+  padding: 5px 8px;
   border-radius: 4px;
-  font-family: monospace;
+  background-color: #f5f7fa;
 }
 
-.current-directory .el-icon {
-  margin-right: 8px;
-  color: #409eff;
+.branch-sync-info.warning {
+  color: #e6a23c;
+  background-color: #fdf6ec;
 }
 
-.current-directory span {
-  flex-grow: 1;
-  word-break: break-all;
-  margin-right: 10px;
+.branch-sync-info.info {
+  color: #909399;
+  background-color: #f4f4f5;
 }
 
-.browser-current-path {
-  margin-bottom: 10px;
+.branch-sync-info.success {
+  color: #67c23a;
+  background-color: #f0f9eb;
+}
+
+/* 添加针对空内容区域的样式 */
+.card-content:empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  border: 1px dashed #dcdfe6;
+  color: #909399;
+  height: 100%;
+}
+
+.card-content:empty::after {
+  content: '没有Git状态信息可显示';
   font-size: 14px;
-  color: #606266;
-  background-color: #f5f7fa;
-  padding: 8px 12px;
-  border-radius: 4px;
+}
+
+/* 添加目录浏览相关样式 */
+.browser-current-path {
   font-family: monospace;
-  word-break: break-all;
+  margin-bottom: 15px;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 6px;
+  overflow-x: auto;
+  white-space: nowrap;
+  border: 1px solid #ebeef5;
 }
 
 .browser-error {
-  margin-bottom: 10px;
   color: #f56c6c;
-  padding: 8px 12px;
+  margin: 10px 0;
+  padding: 10px;
   background-color: #fef0f0;
   border-radius: 4px;
+  border-left: 3px solid #f56c6c;
 }
 
-.directory-browser {
-  padding: 10px;
-  height: 400px;
+.browser-nav {
   display: flex;
-  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
 }
 
-.browser-nav {
-  margin-bottom: 10px;
+.no-padding-left {
+  padding-left: 12px;
+}
+
+.directory-browser {
+  height: 400px;
+  border: 1px solid #ebeef5;
+  border-radius: 6px;
+  overflow: hidden;
   display: flex;
-  justify-content: space-between;
-  position: sticky;
-  top: 0;
-  background-color: #fff;
-  z-index: 1;
-  padding: 10px 0;
+  flex-direction: column;
 }
 
 .directory-items-container {
   flex: 1;
   overflow-y: auto;
+  background-color: #f8f9fa;
+  padding: 10px;
 }
 
 .directory-items {
   list-style: none;
   padding: 0;
   margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 10px;
 }
 
 .directory-item {
-  padding: 8px 12px;
-  margin-bottom: 5px;
-  border-radius: 4px;
-  cursor: pointer;
   display: flex;
   align-items: center;
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  background-color: white;
+  border: 1px solid #ebeef5;
+  transition: all 0.2s;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  gap: 5px;
 }
 
 .directory-item:hover {
-  background-color: #f5f7fa;
+  background-color: #ecf5ff;
+  border-color: #c6e2ff;
 }
 
 .directory-item.directory {
+  background-color: #f0f7ff;
   color: #409eff;
 }
 
-.directory-item.file {
-  color: #606266;
+.directory-item .el-icon {
+  margin-right: 5px;
+  flex-shrink: 0;
 }
 
-.directory-item .el-icon {
-  margin-right: 10px;
+.directory-item.directory .el-icon {
+  color: #409eff;
 }
 
-.directory-item span {
-  font-family: monospace;
-  word-break: break-all;
+.directory-item.file .el-icon {
+  color: #909399;
 }
 
 .directory-buttons {
@@ -763,40 +1305,266 @@ defineExpose({
   margin-top: 10px;
 }
 
-/* 移除按钮左侧的内边距 */
-.no-padding-left {
-  padding-left: 8px !important;
+/* 添加分支状态样式 */
+.branch-sync-status {
+  display: flex;
+  align-items: center;
+  padding: 12px 15px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  margin-bottom: 15px;
+  border-left: 3px solid #e6a23c;
+}
+
+/* 添加默认分支状态信息样式 */
+.git-status-message {
+  padding: 12px 15px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  margin-bottom: 15px;
+  border-left: 3px solid #67c23a;
+}
+
+.git-status-message p {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #606266;
+}
+
+.sync-status-content {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.status-badges {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.status-badge {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.status-badge.el-tag--warning {
+  background-color: #fdf6ec;
+  border-color: #faecd8;
+}
+
+.status-badge.el-tag--info {
+  background-color: #f4f4f5;
+  border-color: #e9e9eb;
+}
+
+.badge-content {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+}
+.diff-dialog {
+  height: calc(100vh - 150px);
+}
+
+.diff-dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+  background-color: #f9f9fb;
+}
+
+.file-title {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  gap: 10px;
+  overflow: hidden;
+}
+
+.file-icon {
+  color: #409eff;
+  font-size: 20px;
+}
+
+.file-path {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-family: monospace;
+}
+
+.diff-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 20px;
+  background-color: #fafafa;
+  /* height: 100%;
+  overflow: auto; */
+}
+:deep(.el-dialog__body) {
+  height: calc(100vh - 320px);
+  overflow: auto;
+}
+.diff-formatted {
+  font-family: 'Consolas', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  padding-bottom: 20px;
+}
+
+.no-diff {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #909399;
+  font-size: 14px;
+}
+
+.file-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  border-top: 1px solid #ebeef5;
+  background-color: #f9f9fb;
+}
+
+.counter-tag {
+  font-family: monospace;
+  font-size: 14px;
+  padding: 6px 12px;
+  min-width: 80px;
+  text-align: center;
+}
+
+.nav-button {
+  min-width: 120px;
+}
+
+/* 确保文件差异对话框里的内容滚动条样式一致 */
+.diff-formatted::-webkit-scrollbar,
+.diff-content::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.diff-formatted::-webkit-scrollbar-thumb,
+.diff-content::-webkit-scrollbar-thumb {
+  background-color: rgba(144, 147, 153, 0.3);
+  border-radius: 4px;
+}
+
+.diff-formatted::-webkit-scrollbar-thumb:hover,
+.diff-content::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(144, 147, 153, 0.5);
+}
+
+.diff-formatted::-webkit-scrollbar-track,
+.diff-content::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+/* 兼容Firefox滚动条样式 */
+.diff-formatted,
+.diff-content {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(144, 147, 153, 0.3) transparent;
 }
 </style>
 
-<!-- 添加非scoped样式，使diff格式化样式对动态内容生效 -->
+<!-- 非scoped样式，使diff格式化样式对动态内容生效 -->
 <style>
 .diff-header {
   font-weight: bold;
   background-color: #e6f1fc;
-  padding: 3px;
-  margin: 5px 0;
+  padding: 5px;
+  margin: 8px 0;
+  border-radius: 4px;
+  color: #0366d6;
+  border-bottom: 1px solid #c8e1ff;
 }
 
 .diff-old-file, .diff-new-file {
-  color: #888;
+  color: #586069;
+  padding: 2px 5px;
+  font-family: monospace;
+}
+
+.diff-old-file {
+  color: #cb2431;
+}
+
+.diff-new-file {
+  color: #22863a;
 }
 
 .diff-hunk-header {
   color: #6f42c1;
+  background-color: #f1f8ff;
+  padding: 2px 5px;
+  margin: 5px 0;
+  border-radius: 3px;
+  font-family: monospace;
 }
 
 .diff-added {
   background-color: #e6ffed;
-  color: #28a745;
+  color: #22863a;
+  padding: 0 5px;
+  border-left: 4px solid #22863a;
+  font-family: monospace;
+  display: block;
+  margin: 2px 0;
 }
 
 .diff-removed {
   background-color: #ffeef0;
-  color: #d73a49;
+  color: #cb2431;
+  padding: 0 5px;
+  border-left: 4px solid #cb2431;
+  font-family: monospace;
+  display: block;
+  margin: 2px 0;
 }
 
 .diff-context {
   color: #444;
+  padding: 0 5px;
+  font-family: monospace;
+  display: block;
+  margin: 2px 0;
+  background-color: #fafbfc;
+}
+
+/* 增加自动更新开关的样式 */
+.auto-update-switch .el-switch__core {
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.auto-update-switch .el-switch__core:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.auto-update-switch.is-checked .el-switch__core {
+  box-shadow: 0 2px 5px rgba(103, 194, 58, 0.3);
+}
+
+.auto-update-switch.is-checked .el-switch__core:hover {
+  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.5);
 }
 </style>