zen-gitsync 2.0.4 → 2.0.6

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'
 
@@ -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方法重置状态
       }
@@ -337,15 +303,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状态的方法
@@ -383,26 +348,57 @@ 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()
 })
 
+// 监听autoUpdateEnabled的变化，手动调用toggleAutoUpdate
+watch(() => gitLogStore.autoUpdateEnabled, (newValue, oldValue) => {
+  console.log(`自动更新状态变更: ${oldValue} -> ${newValue}`)
+  // 调用store中的方法来实现服务器通信功能
+  gitLogStore.toggleAutoUpdate()
+}, { immediate: false })
+
 // onUnmounted(() => {
 //   socket.disconnect()
 // })
-
 // 暴露刷新方法给父组件
 defineExpose({
   refreshStatus
@@ -411,47 +407,165 @@ 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"
-      />
+      <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 class="status-box">{{ status }}</div>
-    <!-- 颜色区分不同类型文件 -->
-    <div v-if="fileList.length" class="file-list">
-      <div 
-        v-for="file in 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">
+        当前目录不是一个Git仓库
+      </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 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 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>
     </div>
     
@@ -514,18 +628,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>
     
@@ -535,6 +651,7 @@ defineExpose({
       :title="`文件差异: ${selectedFile}`"
       width="80%"
       destroy-on-close
+      class="diff-dialog"
     >
       <div v-loading="isLoadingDiff" class="diff-content">
         <div v-if="diffContent" v-html="formatDiff(diffContent)" class="diff-formatted"></div>
@@ -546,14 +663,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>
@@ -565,215 +682,418 @@ 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;
+}
+
+.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: calc(100% - 70px); /* 给底部留出些空间 */
+}
+
+.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; /* 最小高度 */
+  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;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.2;
 }
 
-.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;
-  justify-content: center;
+  flex-direction: column;
   align-items: center;
+  justify-content: center;
+  height: calc(100% - 70px);
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #ebeef5;
   margin-top: 15px;
 }
 
-.file-counter {
-  margin: 0 15px;
+.empty-icon {
+  font-size: 32px;
+  color: #c0c4cc;
+  margin-bottom: 10px;
+}
+
+.empty-text {
+  color: #909399;
   font-size: 14px;
-  color: #606266;
 }
 
-.current-directory {
+/* 添加针对空内容区域的样式 */
+.card-content:empty {
   display: flex;
   align-items: center;
-  margin-bottom: 15px;
-  padding: 8px 12px;
-  background-color: #f5f7fa;
-  border-radius: 4px;
-  font-family: monospace;
-}
-
-.current-directory .el-icon {
-  margin-right: 8px;
-  color: #409eff;
+  justify-content: center;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  border: 1px dashed #dcdfe6;
+  color: #909399;
+  height: 100%;
 }
 
-.current-directory span {
-  flex-grow: 1;
-  word-break: break-all;
-  margin-right: 10px;
+.card-content:empty::after {
+  content: '没有Git状态信息可显示';
+  font-size: 14px;
 }
 
+/* 添加目录浏览相关样式 */
 .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;
+  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;
-}
-
-.directory-browser {
-  padding: 10px;
-  max-height: 400px;
-  overflow-y: auto;
+  border-left: 3px solid #f56c6c;
 }
 
 .browser-nav {
+  display: flex;
+  gap: 10px;
   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;
+  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 {
@@ -781,41 +1101,87 @@ defineExpose({
   gap: 10px;
   margin-top: 10px;
 }
-
-/* 移除按钮左侧的内边距 */
-.no-padding-left {
-  padding-left: 8px !important;
-}
 </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>