zen-gitsync 2.0.6 → 2.0.8

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

@@ -2,7 +2,7 @@
 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, Check, Close } from '@element-plus/icons-vue'
+import { Refresh, ArrowLeft, ArrowRight, Folder, Document, ArrowUp, RefreshRight, Check, Close, Download, Connection } from '@element-plus/icons-vue'
 import { useGitLogStore } from '../stores/gitLogStore'
 import { useGitStore } from '../stores/gitStore'
 
@@ -38,6 +38,10 @@ const directoryItems = ref<{name: string, path: string, type: string}[]>([])
 const isBrowsing = ref(false)
 const browseErrorMessage = ref('')
 
+// 添加git操作相关状态
+const isGitPulling = ref(false)
+const isGitFetching = ref(false)
+
 const currentDirectory = ref(props.initialDirectory || '');
 async function loadStatus() {
   try {
@@ -56,6 +60,9 @@ async function loadStatus() {
     // 使用gitLogStore获取Git状态
     await gitLogStore.fetchStatus()
     
+    // 同时刷新分支状态信息，确保显示最新的领先/落后提交数
+    await gitStore.getBranchStatus()
+    
     ElMessage({
       message: 'Git 状态已刷新',
       type: 'success',
@@ -115,10 +122,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,
@@ -318,6 +356,30 @@ async function refreshStatus() {
   await loadStatus()
 }
 
+// 添加git pull操作方法
+async function handleGitPull() {
+  isGitPulling.value = true
+  try {
+    await gitStore.gitPull()
+    // 刷新Git状态
+    await loadStatus()
+  } finally {
+    isGitPulling.value = false
+  }
+}
+
+// 添加git fetch --all操作方法
+async function handleGitFetchAll() {
+  isGitFetching.value = true
+  try {
+    await gitStore.gitFetchAll()
+    // 刷新Git状态
+    await loadStatus()
+  } finally {
+    isGitFetching.value = false
+  }
+}
+
 // 添加撤回文件修改的方法
 async function revertFileChanges(filePath: string) {
   try {
@@ -387,6 +449,11 @@ onMounted(() => {
   // App.vue已经加载了Git相关数据，此时只需加载状态
   // 如果已有初始目录，则只需加载状态
   loadStatus()
+  
+  // 如果是Git仓库，确保分支状态也被加载
+  if (gitStore.isGitRepo) {
+    gitStore.getBranchStatus()
+  }
 })
 
 // 监听autoUpdateEnabled的变化，手动调用toggleAutoUpdate
@@ -424,6 +491,32 @@ defineExpose({
             class="auto-update-switch"
           />
         </el-tooltip>
+        
+        <!-- 添加Git Pull按钮 -->
+        <el-tooltip content="Git Pull (拉取远程更新)" placement="top" :hide-after="1000">
+          <el-button 
+            type="primary" 
+            :icon="Download" 
+            circle 
+            size="small" 
+            @click="handleGitPull" 
+            :loading="isGitPulling"
+            :disabled="!gitStore.hasUpstream"
+          />
+        </el-tooltip>
+        
+        <!-- 添加Git Fetch All按钮 -->
+        <el-tooltip content="Git Fetch All (获取所有远程分支)" placement="top" :hide-after="1000">
+          <el-button 
+            type="info" 
+            :icon="Connection" 
+            circle 
+            size="small" 
+            @click="handleGitFetchAll" 
+            :loading="isGitFetching"
+          />
+        </el-tooltip>
+        
         <el-tooltip content="刷新状态" placement="top" :hide-after="1000">
           <el-button 
             type="primary" 
@@ -447,125 +540,180 @@ defineExpose({
       </div>
       
       <div v-if="!gitStore.isGitRepo" class="status-box">
-        当前目录不是一个Git仓库
+        <div class="empty-status">
+          <p>当前目录不是Git仓库</p>
+          <el-button type="primary" size="small" @click="openDirectoryDialog">
+            切换目录
+          </el-button>
+        </div>
       </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 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>
-            </div>
+            </el-tooltip>
           </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 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 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 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 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 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>
-      
-      <div v-else-if="gitStore.isGitRepo" class="empty-status">
-        <div class="empty-icon">
-          <el-icon><Document /></el-icon>
+        
+        <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 class="empty-text">没有检测到任何更改</div>
       </div>
     </div>
     
@@ -648,32 +796,72 @@ defineExpose({
     <!-- 文件差异对话框 -->
     <el-dialog
       v-model="diffDialogVisible"
-      :title="`文件差异: ${selectedFile}`"
-      width="80%"
+      width="80vw"
+      top="70px"
       destroy-on-close
       class="diff-dialog"
+      :show-close="false"
+      style="height: calc(100vh - 140px);"
+      :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>
@@ -718,6 +906,7 @@ defineExpose({
   flex: 1;
   display: flex;
   flex-direction: column;
+  min-height: 300px; /* 确保内容区有最小高度 */
 }
 
 .current-directory {
@@ -764,7 +953,8 @@ defineExpose({
   flex-direction: column;
   margin-bottom: 0;
   gap: 12px;
-  height: calc(100% - 70px); /* 给底部留出些空间 */
+  height: auto; /* 改为自适应高度，不固定高度 */
+  min-height: 100px; /* 设置最小高度 */
 }
 
 .file-group {
@@ -801,6 +991,7 @@ defineExpose({
 .file-list {
   overflow-y: auto;
   min-height: 40px; /* 最小高度 */
+  max-height: 200px; /* 最大高度限制，避免过长列表 */
   flex-grow: 1; /* 允许文件列表在文件组内扩展 */
   padding: 0;
   margin: 0;
@@ -946,9 +1137,10 @@ defineExpose({
 .file-directory {
   font-size: 12px;
   color: #909399;
+  max-width: 200px;
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
-  line-height: 1.2;
 }
 
 .file-actions {
@@ -967,22 +1159,87 @@ defineExpose({
   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;
+  padding: 40px 20px;
+  text-align: center;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  margin-top: 10px;
 }
 
 .empty-icon {
-  font-size: 32px;
-  color: #c0c4cc;
-  margin-bottom: 10px;
+  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;
+}
+
+.branch-info p {
+  margin: 5px 0;
   font-size: 14px;
+  color: #606266;
+}
+
+.branch-sync-info {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 13px;
+  margin-top: 5px;
+  padding: 5px 8px;
+  border-radius: 4px;
+  background-color: #f5f7fa;
+}
+
+.branch-sync-info.warning {
+  color: #e6a23c;
+  background-color: #fdf6ec;
+}
+
+.branch-sync-info.info {
+  color: #909399;
+  background-color: #f4f4f5;
+}
+
+.branch-sync-info.success {
+  color: #67c23a;
+  background-color: #f0f9eb;
 }
 
 /* 添加针对空内容区域的样式 */
@@ -1101,6 +1358,186 @@ defineExpose({
   gap: 10px;
   margin-top: 10px;
 }
+
+/* 添加分支状态样式 */
+.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格式化样式对动态内容生效 -->