zen-gitsync 2.0.5 → 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'
 
@@ -303,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状态的方法
@@ -349,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
@@ -377,49 +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"
-      />
-    </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">
+        当前目录不是一个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 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 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-if="gitStore.isGitRepo" class="empty-status">
+        <div class="empty-icon">
+          <el-icon><Document /></el-icon>
         </div>
+        <div class="empty-text">没有检测到任何更改</div>
       </div>
     </div>
     
@@ -505,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>
@@ -535,226 +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;
+  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 {
@@ -762,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>