From a3a12e5c5d0c8ad0746564791e0c465222de01f6 Mon Sep 17 00:00:00 2001
From: zyj <zyj@qq.com>
Date: Tue, 10 Mar 2026 09:37:49 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8F=98=E6=9B=B4=E5=8E=86?=
 =?UTF-8?q?=E5=8F=B2=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/components/CommitFileTreeNode.vue     | 154 ++++++++++++++++++
 frontend/app/components/ContentArea.vue       |  50 +-----
 2 files changed, 162 insertions(+), 42 deletions(-)
 create mode 100644 frontend/app/components/CommitFileTreeNode.vue

diff --git a/frontend/app/components/CommitFileTreeNode.vue b/frontend/app/components/CommitFileTreeNode.vue
new file mode 100644
index 0000000..db76596
--- /dev/null
+++ b/frontend/app/components/CommitFileTreeNode.vue
@@ -0,0 +1,154 @@
+<script setup>
+import {
+  FileOutlined,
+  FolderOutlined,
+  FolderOpenOutlined,
+  CaretRightOutlined,
+  CaretDownOutlined,
+} from '@ant-design/icons-vue'
+
+const props = defineProps({
+  node: { type: Object, required: true },
+  collapsedDirs: { type: Set, default: () => new Set() },
+  selectedFile: { type: Object, default: null },
+  depth: { type: Number, default: 0 },
+})
+
+const emit = defineEmits(['select-file', 'toggle-dir'])
+
+function getStatusColor(status) {
+  const map = { M: 'orange', A: 'green', D: 'red', R: 'blue', C: 'cyan' }
+  return map[status] || 'default'
+}
+function getStatusLabel(status) {
+  const map = { M: '修改', A: '新增', D: '删除', R: '重命名', C: '复制' }
+  return map[status] || status
+}
+</script>
+
+<template>
+  <!-- 目录节点 -->
+  <div v-if="node.type === 'dir'" class="commit-tree-dir">
+    <div class="commit-tree-dir-header" :style="{ paddingLeft: (8 + depth * 16) + 'px' }" @click="emit('toggle-dir', node.path)">
+      <CaretDownOutlined v-if="!collapsedDirs.has(node.path)" class="commit-tree-arrow" />
+      <CaretRightOutlined v-else class="commit-tree-arrow" />
+      <FolderOpenOutlined v-if="!collapsedDirs.has(node.path)" class="commit-tree-icon dir-icon" />
+      <FolderOutlined v-else class="commit-tree-icon dir-icon" />
+      <span class="commit-tree-dir-name">{{ node.name }}</span>
+      <span class="commit-tree-dir-count">{{ node.fileCount }}</span>
+    </div>
+    <div v-show="!collapsedDirs.has(node.path)">
+      <CommitFileTreeNode
+        v-for="child in node.children"
+        :key="child.type + '-' + (child.path || child.data?.filePath)"
+        :node="child"
+        :collapsed-dirs="collapsedDirs"
+        :selected-file="selectedFile"
+        :depth="depth + 1"
+        @select-file="emit('select-file', $event)"
+        @toggle-dir="emit('toggle-dir', $event)"
+      />
+    </div>
+  </div>
+
+  <!-- 文件节点 -->
+  <div
+    v-else
+    class="commit-tree-file-item"
+    :style="{ paddingLeft: (8 + depth * 16) + 'px' }"
+    :class="{ active: selectedFile?.filePath === node.data.filePath }"
+    @click="emit('select-file', node.data)"
+  >
+    <FileOutlined class="commit-tree-icon file-icon" />
+    <span class="commit-tree-file-name">{{ node.name }}</span>
+    <a-tag :color="getStatusColor(node.data.status)" size="small" class="commit-tree-status-tag">{{ getStatusLabel(node.data.status) }}</a-tag>
+  </div>
+</template>
+
+<style scoped>
+.commit-tree-dir-header {
+  display: flex;
+  align-items: center;
+  padding: 3px 8px;
+  cursor: pointer;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  transition: background 0.12s;
+}
+
+.commit-tree-dir-header:hover {
+  background: var(--bg-hover);
+}
+
+.commit-tree-arrow {
+  font-size: 10px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+  width: 14px;
+  text-align: center;
+}
+
+.commit-tree-icon {
+  flex-shrink: 0;
+  font-size: 14px;
+}
+
+.dir-icon {
+  color: var(--accent, #89b4fa);
+}
+
+.file-icon {
+  color: var(--text-muted);
+}
+
+.commit-tree-dir-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.commit-tree-dir-count {
+  font-size: 11px;
+  color: var(--text-muted);
+  background: var(--bg-hover, rgba(255,255,255,0.06));
+  border-radius: 8px;
+  padding: 0 6px;
+  min-width: 18px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.commit-tree-file-item {
+  display: flex;
+  align-items: center;
+  padding: 3px 8px;
+  cursor: pointer;
+  gap: 6px;
+  font-size: 13px;
+  transition: background 0.12s;
+}
+
+.commit-tree-file-item:hover {
+  background: var(--bg-hover);
+}
+
+.commit-tree-file-item.active {
+  background: var(--bg-active);
+}
+
+.commit-tree-file-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.commit-tree-status-tag {
+  flex-shrink: 0;
+  font-size: 11px;
+  margin-left: auto;
+}
+</style>
diff --git a/frontend/app/components/ContentArea.vue b/frontend/app/components/ContentArea.vue
index 551a19b..ee75366 100644
--- a/frontend/app/components/ContentArea.vue
+++ b/frontend/app/components/ContentArea.vue
@@ -29,6 +29,7 @@ import {
 import { Modal } from 'ant-design-vue'
 import { AppService } from '../../bindings/github.com/zhuy1228/GitPilot/internal/app'
 import FileTreeNode from './FileTreeNode.vue'
+import CommitFileTreeNode from './CommitFileTreeNode.vue'
 
 const props = defineProps({
   project: { type: Object, default: null }
@@ -1036,50 +1037,15 @@ watch(activeTab, (tab) => {
                       无变更文件
                     </div>
                     <template v-else>
-                      <div
+                      <CommitFileTreeNode
                         v-for="cf in commitFileTree"
                         :key="cf.type + '-' + (cf.path || cf.data?.filePath)"
-                      >
-                        <!-- 目录节点 -->
-                        <template v-if="cf.type === 'dir'">
-                          <div class="commit-file-item dir" @click="toggleCommitDir(cf.path)">
-                            <span :style="{ paddingLeft: '4px' }">
-                              <CaretDownOutlined v-if="!commitCollapsedDirs.has(cf.path)" class="section-arrow" />
-                              <CaretRightOutlined v-else class="section-arrow" />
-                            </span>
-                            <span class="commit-file-name">{{ cf.name }}</span>
-                            <span class="commit-file-count">{{ cf.fileCount }}</span>
-                          </div>
-                          <template v-if="!commitCollapsedDirs.has(cf.path)">
-                            <div
-                              v-for="child in cf.children"
-                              :key="child.data?.filePath || child.path"
-                            >
-                              <div
-                                v-if="child.type === 'file'"
-                                class="commit-file-item"
-                                :class="{ active: selectedCommitFile?.filePath === child.data.filePath }"
-                                @click="selectCommitFile(child.data)"
-                              >
-                                <FileOutlined style="flex-shrink: 0; margin-left: 20px;" />
-                                <span class="commit-file-name">{{ child.name }}</span>
-                                <a-tag :color="getCommitStatusColor(child.data.status)" size="small" style="margin-left: auto; flex-shrink: 0;">{{ getCommitStatusLabel(child.data.status) }}</a-tag>
-                              </div>
-                            </div>
-                          </template>
-                        </template>
-                        <!-- 文件节点 -->
-                        <div
-                          v-else
-                          class="commit-file-item"
-                          :class="{ active: selectedCommitFile?.filePath === cf.data.filePath }"
-                          @click="selectCommitFile(cf.data)"
-                        >
-                          <FileOutlined style="flex-shrink: 0;" />
-                          <span class="commit-file-name">{{ cf.name }}</span>
-                          <a-tag :color="getCommitStatusColor(cf.data.status)" size="small" style="margin-left: auto; flex-shrink: 0;">{{ getCommitStatusLabel(cf.data.status) }}</a-tag>
-                        </div>
-                      </div>
+                        :node="cf"
+                        :collapsed-dirs="commitCollapsedDirs"
+                        :selected-file="selectedCommitFile"
+                        @select-file="selectCommitFile($event)"
+                        @toggle-dir="toggleCommitDir($event)"
+                      />
                     </template>
                   </div>
                 </template>