From e09c9f76a75db3b44571c564fc8cbe6ef3905146 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sat, 19 Sep 2026 01:12:33 +0000
Subject: [PATCH] feat(web): tree batch auto-expand with depth limit and view
 icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

勾选文件树文件夹时自动展开并懒加载子节点，按最大深度（默认 4，勾选文件夹为第 0 层）递归收集可下载文件；触及上限时中文提示部分文件已跳过。树侧栏顶部增加显眼的批量下载入口。Home/ShowList 窗格与文件树切换增加 Font Awesome 图标。

Co-authored-by: qaiu <qaiu@vip.qq.com>
---
 web-front/package.json                       |   3 +-
 web-front/src/components/DirectoryTree.vue   | 286 +++++++++++++++++--
 web-front/src/components/ViewModeSwitch.vue  |  65 +++++
 web-front/src/utils/batchTreeCollect.js      | 147 ++++++++++
 web-front/src/utils/batchTreeCollect.spec.js | 194 +++++++++++++
 web-front/src/views/Home.vue                 |   8 +-
 web-front/src/views/ShowList.vue             |  13 +-
 7 files changed, 682 insertions(+), 34 deletions(-)
 create mode 100644 web-front/src/components/ViewModeSwitch.vue
 create mode 100644 web-front/src/utils/batchTreeCollect.js
 create mode 100644 web-front/src/utils/batchTreeCollect.spec.js

diff --git a/web-front/package.json b/web-front/package.json
index 9de737b..b13c687 100644
--- a/web-front/package.json
+++ b/web-front/package.json
@@ -7,7 +7,8 @@
     "dev": "vue-cli-service serve",
     "build": "node scripts/sync-version.js && vue-cli-service build && node scripts/compress-vs.js",
     "build:no-compress": "node scripts/sync-version.js && vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "test": "node --test src/utils/batchTreeCollect.spec.js"
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
diff --git a/web-front/src/components/DirectoryTree.vue b/web-front/src/components/DirectoryTree.vue
index 6e886b2..06ee87d 100644
--- a/web-front/src/components/DirectoryTree.vue
+++ b/web-front/src/components/DirectoryTree.vue
@@ -103,7 +103,23 @@
           <splitpanes v-if="!isMobile" class="split-theme custom-splitpanes" style="height:100%;">
             <pane>
               <div class="tree-sidebar">
-                <div class="tree-scroll-wrap">
+                <div class="tree-toolbar">
+                  <span class="tree-toolbar-title">
+                    <i class="fas fa-sitemap" aria-hidden="true"></i> 文件树
+                  </span>
+                  <el-button
+                    v-if="!batchMode"
+                    type="warning"
+                    size="small"
+                    @click="toggleBatchMode"
+                  >
+                    <i class="fas fa-check-double"></i> 批量下载
+                  </el-button>
+                  <span v-else class="tree-toolbar-hint">
+                    {{ treeExpanding ? '正在展开并收集文件…' : `勾选文件夹将自动展开（最多 ${effectiveBatchMaxDepth} 层）` }}
+                  </span>
+                </div>
+                <div class="tree-scroll-wrap" v-loading="treeExpanding">
                   <el-tree
                     ref="fileTree"
                     :data="treeData"
@@ -115,6 +131,7 @@
                     :show-checkbox="batchMode"
                     :check-strictly="false"
                     @node-click="onNodeClick"
+                    @check="onTreeCheck"
                     @check-change="onTreeCheckChange"
                     :default-expand-all="false"
                     :default-expanded-keys="['root']"
@@ -128,7 +145,7 @@
                     <el-button
                       type="primary"
                       size="small"
-                      :disabled="selectedFiles.length === 0 || batchDownloading || batchBrowserDownloadDisabled"
+                      :disabled="selectedFiles.length === 0 || batchDownloading || treeExpanding || batchBrowserDownloadDisabled"
                       :loading="batchDownloading"
                       @click="batchBrowserDownload"
                       :title="batchBrowserDownloadDisabled ? '所选文件需使用下载器下载' : ''"
@@ -138,7 +155,7 @@
                     <el-button
                       type="success"
                       size="small"
-                      :disabled="selectedFiles.length === 0 || batchDownloading"
+                      :disabled="selectedFiles.length === 0 || batchDownloading || treeExpanding"
                       :loading="batchDownloading"
                       @click="batchSendToDownloader"
                     >
@@ -236,7 +253,23 @@
           <!-- 移动端：上下布局 -->
           <template v-else>
             <div class="mobile-tree-top">
-              <div class="tree-scroll-wrap">
+              <div class="tree-toolbar">
+                <span class="tree-toolbar-title">
+                  <i class="fas fa-sitemap" aria-hidden="true"></i> 文件树
+                </span>
+                <el-button
+                  v-if="!batchMode"
+                  type="warning"
+                  size="small"
+                  @click="toggleBatchMode"
+                >
+                  <i class="fas fa-check-double"></i> 批量下载
+                </el-button>
+                <span v-else class="tree-toolbar-hint">
+                  {{ treeExpanding ? '正在展开并收集文件…' : `勾选文件夹将自动展开（最多 ${effectiveBatchMaxDepth} 层）` }}
+                </span>
+              </div>
+              <div class="tree-scroll-wrap" v-loading="treeExpanding">
                 <el-tree
                   ref="fileTree"
                   :data="treeData"
@@ -248,6 +281,7 @@
                   :show-checkbox="batchMode"
                   :check-strictly="false"
                   @node-click="onNodeClick"
+                  @check="onTreeCheck"
                   @check-change="onTreeCheckChange"
                   :default-expand-all="false"
                   :default-expanded-keys="['root']"
@@ -328,8 +362,8 @@
               <div v-if="batchMode" class="mobile-batch-footer">
                 <span class="tree-sidebar-count">已勾选 {{ selectedFiles.length }} 个文件</span>
                 <div class="tree-sidebar-actions">
-                  <el-button type="primary" size="small" :disabled="selectedFiles.length === 0 || batchDownloading || batchBrowserDownloadDisabled" :loading="batchDownloading" @click="batchBrowserDownload" :title="batchBrowserDownloadDisabled ? '所选文件需使用下载器下载' : ''">浏览器下载</el-button>
-                  <el-button type="success" size="small" :disabled="selectedFiles.length === 0 || batchDownloading" :loading="batchDownloading" @click="batchSendToDownloader">发送到下载器</el-button>
+                  <el-button type="primary" size="small" :disabled="selectedFiles.length === 0 || batchDownloading || treeExpanding || batchBrowserDownloadDisabled" :loading="batchDownloading" @click="batchBrowserDownload" :title="batchBrowserDownloadDisabled ? '所选文件需使用下载器下载' : ''">浏览器下载</el-button>
+                  <el-button type="success" size="small" :disabled="selectedFiles.length === 0 || batchDownloading || treeExpanding" :loading="batchDownloading" @click="batchSendToDownloader">发送到下载器</el-button>
                   <el-button size="small" @click="toggleBatchMode">取消</el-button>
                 </div>
                 <div v-if="batchDownloading" class="batch-progress-info">
@@ -420,6 +454,15 @@ import 'splitpanes/dist/splitpanes.css'
 import fileTypeUtils from '@/utils/fileTypeUtils'
 import DownloadDialog from '@/components/DownloadDialog.vue'
 import { testConnection, autoDetect, addDownload, batchAddDownload, getConfig, saveConfig } from '@/utils/downloaderService'
+import batchTreeCollect from '@/utils/batchTreeCollect'
+
+const {
+  DEFAULT_BATCH_MAX_DEPTH,
+  getTreeNodeId,
+  normalizeTreeItem,
+  uniqueFiles,
+  collectFolderFiles
+} = batchTreeCollect
 
 export default {
   name: 'DirectoryTree',
@@ -445,6 +488,11 @@ export default {
     viewMode: {
       type: String,
       default: 'pane' // 'pane' or 'tree'
+    },
+    // 树批量勾选文件夹时的最大展开深度；用户勾选的文件夹为第 0 层，默认 4
+    batchMaxDepth: {
+      type: Number,
+      default: DEFAULT_BATCH_MAX_DEPTH
     }
   },
   data() {
@@ -477,7 +525,8 @@ export default {
       batchMode: false,
       selectedFiles: [],
       batchDownloading: false,
-      batchProgress: { current: 0, total: 0, failed: 0 }
+      batchProgress: { current: 0, total: 0, failed: 0 },
+      treeExpanding: false
     }
   },
   computed: {
@@ -513,6 +562,10 @@ export default {
     batchBrowserDownloadDisabled() {
       return this.selectedFiles.length > 0
         && this.selectedFiles.every(f => this.needsDownloader(f))
+    },
+    effectiveBatchMaxDepth() {
+      const depth = Number(this.batchMaxDepth)
+      return Number.isFinite(depth) && depth >= 0 ? depth : DEFAULT_BATCH_MAX_DEPTH
     }
   },
   watch: {
@@ -525,10 +578,7 @@ export default {
             id: 'root',
             fileName: '全部文件',
             fileType: 'folder',
-            children: (newList || []).map(item => ({
-              ...item,
-              isLeaf: item.fileType !== 'folder'
-            })),
+            children: (newList || []).map(item => normalizeTreeItem(item)),
             isLeaf: false
           }
         ]
@@ -536,6 +586,9 @@ export default {
       }
     }
   },
+  created() {
+    this.resetTreeCollectState()
+  },
   methods: {
     ...fileTypeUtils,
     apiKeyHeaders() {
@@ -563,17 +616,14 @@ export default {
       }
       return this.withAuth(`${baseUrl}?${params.toString()}`)
     },
-    // 懒加载子节点
+    // 懒加载子节点（批量勾选文件夹时会通过 node.expand → store.load 复用此方法）
     loadNode(node, resolve) {
       if (node.level === 0) {
-        resolve(this.treeData[0].children)
+        resolve((this.treeData[0]?.children || []).map(item => normalizeTreeItem(item)))
       } else if (node.data.fileType === 'folder' && node.data.parserUrl) {
         axios.get(this.withAuth(node.data.parserUrl), { headers: this.apiKeyHeaders() }).then(res => {
           if (res.data.code === 200) {
-            const children = (res.data.data || []).map(item => ({
-              ...item,
-              isLeaf: item.fileType !== 'folder'
-            }))
+            const children = (res.data.data || []).map(item => normalizeTreeItem(item))
             resolve(children)
           } else {
             this.$message.error(res.data.msg || '获取子节点失败')
@@ -970,9 +1020,156 @@ export default {
       this.selectedFiles = []
       this.batchDownloading = false
       this.batchProgress = { current: 0, total: 0, failed: 0 }
-      // tree 模式下清除勾选
-      if (this.$refs.fileTree) {
-        this.$refs.fileTree.setCheckedKeys([])
+      this.treeExpanding = false
+      this.resetTreeCollectState()
+      const tree = this.getFileTree()
+      if (tree) {
+        tree.setCheckedKeys([])
+      }
+    },
+    resetTreeCollectState() {
+      this._folderCheckQueue = []
+      this._queuedFolderKeys = new Set()
+      this._visitedInCollect = new Set()
+      this._folderLoadPromises = new Map()
+      this._treeCollecting = false
+    },
+    getFileTree() {
+      const ref = this.$refs.fileTree
+      if (!ref) return null
+      return Array.isArray(ref) ? ref[0] : ref
+    },
+    findTreeNode(data) {
+      const tree = this.getFileTree()
+      if (!tree || !data) return null
+      const key = getTreeNodeId(data)
+      if (key) {
+        const byKey = tree.getNode(key)
+        if (byKey) return byKey
+      }
+      const byData = tree.getNode(data)
+      if (byData) return byData
+      const nodesMap = tree.store?.nodesMap
+      if (nodesMap) {
+        return Object.values(nodesMap).find(node => getTreeNodeId(node.data) === key) || null
+      }
+      return null
+    },
+    ensureTreeNodeLoaded(node) {
+      if (!node) return Promise.resolve(null)
+      const key = getTreeNodeId(node.data)
+      if (key && this._folderLoadPromises.has(key)) {
+        return this._folderLoadPromises.get(key)
+      }
+      const promise = new Promise((resolve) => {
+        if (node.loaded && node.expanded) {
+          resolve(node)
+          return
+        }
+        let settled = false
+        const finish = () => {
+          if (settled) return
+          settled = true
+          resolve(node)
+        }
+        const timer = setTimeout(finish, 20000)
+        const expandNow = () => {
+          if (node.loaded && node.expanded) {
+            clearTimeout(timer)
+            finish()
+            return
+          }
+          try {
+            node.expand(() => {
+              clearTimeout(timer)
+              finish()
+            })
+          } catch (e) {
+            clearTimeout(timer)
+            finish()
+          }
+        }
+        if (node.loading) {
+          const started = Date.now()
+          const poll = () => {
+            if (!node.loading || Date.now() - started > 20000) {
+              expandNow()
+              return
+            }
+            setTimeout(poll, 50)
+          }
+          poll()
+          return
+        }
+        expandNow()
+      })
+      if (key) this._folderLoadPromises.set(key, promise)
+      return promise
+    },
+    isCheckedInInfo(data, info) {
+      if (!info) return false
+      const key = getTreeNodeId(data)
+      if (key && (info.checkedKeys || []).map(String).includes(key)) return true
+      return (info.checkedNodes || []).some(n => getTreeNodeId(n) === key)
+    },
+    syncSelectedFilesFromTree(extraFiles = []) {
+      const tree = this.getFileTree()
+      const fromTree = tree
+        ? tree.getCheckedNodes().filter(n => this.isDownloadableFile(n))
+        : []
+      this.selectedFiles = uniqueFiles([...fromTree, ...extraFiles])
+    },
+    enqueueFolderCollect(folderData) {
+      const key = getTreeNodeId(folderData)
+      if (!key || this._queuedFolderKeys.has(key) || this._visitedInCollect.has(key)) return
+      this._queuedFolderKeys.add(key)
+      this._folderCheckQueue.push(folderData)
+      this.drainFolderCollectQueue()
+    },
+    async drainFolderCollectQueue() {
+      if (this._treeCollecting) return
+      this._treeCollecting = true
+      this.treeExpanding = true
+      try {
+        while (this._folderCheckQueue.length) {
+          const next = this._folderCheckQueue.shift()
+          this._queuedFolderKeys.delete(getTreeNodeId(next))
+          await this.handleFolderCheck(next)
+        }
+      } finally {
+        this._treeCollecting = false
+        this.treeExpanding = false
+        this._visitedInCollect.clear()
+      }
+    },
+    async handleFolderCheck(folderData) {
+      try {
+        const ctx = await collectFolderFiles({
+          folderData,
+          depth: 0,
+          maxDepth: this.effectiveBatchMaxDepth,
+          getNode: (data) => this.findTreeNode(data),
+          ensureLoaded: (node) => this.ensureTreeNodeLoaded(node),
+          isDownloadable: (data) => this.isDownloadableFile(data),
+          visitedKeys: this._visitedInCollect
+        })
+        this.syncSelectedFilesFromTree(ctx.files)
+        if (ctx.depthExceeded) {
+          this.$message.warning(
+            `已达到最大展开深度（${this.effectiveBatchMaxDepth} 层），部分深层文件未勾选`
+          )
+        }
+      } catch (e) {
+        console.error('批量展开文件夹失败:', e)
+        this.$message.error('展开文件夹失败，已跳过部分内容')
+        this.syncSelectedFilesFromTree()
+      }
+    },
+    // 用户点击复选框（不含级联），文件夹勾选时触发递归展开
+    onTreeCheck(data, info) {
+      if (!this.batchMode || !data || data.fileType !== 'folder') return
+      if (this.isCheckedInInfo(data, info)) {
+        this.enqueueFolderCollect(data)
       }
     },
     isFileSelected(file) {
@@ -988,6 +1185,8 @@ export default {
       }
     },
     onBatchClick(file) {
+      // 窗格批量：点击文件夹仍进入该目录（避免破坏现有导航）。
+      // 仅收集当前目录文件；递归展开只在树模式勾选文件夹时进行。
       if (file.fileType === 'folder') {
         this.enterFolder(file)
         return
@@ -1001,9 +1200,8 @@ export default {
       this.selectedFiles = []
     },
     onTreeCheckChange() {
-      if (!this.$refs.fileTree) return
-      const checked = this.$refs.fileTree.getCheckedNodes()
-      this.selectedFiles = checked.filter(n => this.isDownloadableFile(n))
+      if (!this.batchMode || this._treeCollecting) return
+      this.syncSelectedFilesFromTree()
     },
     extractTypeParam(file) {
       if (!file.parserUrl) return null
@@ -1762,6 +1960,48 @@ html, body, #app, .main-container, .directory-tree, .content-card {
   border-right: 1px solid #eaeaea;
 }
 
+.tree-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  padding: 8px 10px;
+  border-bottom: 1px solid #eaeaea;
+  background: #f8f9fa;
+}
+
+.dark-theme .tree-toolbar {
+  border-bottom-color: #404040;
+  background: #232323;
+}
+
+.tree-toolbar-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.dark-theme .tree-toolbar-title {
+  color: #e1e1e1;
+}
+
+.tree-toolbar-hint {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.4;
+}
+
+.dark-theme .tree-toolbar-hint {
+  color: #bdc3c7;
+}
+
 .tree-content {
   width: 100%;
   height: 100%;
diff --git a/web-front/src/components/ViewModeSwitch.vue b/web-front/src/components/ViewModeSwitch.vue
new file mode 100644
index 0000000..e42092e
--- /dev/null
+++ b/web-front/src/components/ViewModeSwitch.vue
@@ -0,0 +1,65 @@
+<template>
+  <el-radio-group
+    :model-value="modelValue"
+    size="small"
+    class="view-mode-switch"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <el-radio-button label="pane" title="窗格视图">
+      <i class="fas fa-th" aria-hidden="true"></i>
+      <span class="view-mode-text">{{ paneLabel }}</span>
+    </el-radio-button>
+    <el-radio-button label="tree" title="文件树视图">
+      <i class="fas fa-sitemap" aria-hidden="true"></i>
+      <span class="view-mode-text">{{ treeLabel }}</span>
+    </el-radio-button>
+  </el-radio-group>
+</template>
+
+<script>
+export default {
+  name: 'ViewModeSwitch',
+  props: {
+    modelValue: {
+      type: String,
+      default: 'pane'
+    },
+    paneLabel: {
+      type: String,
+      default: '窗格'
+    },
+    treeLabel: {
+      type: String,
+      default: '文件树'
+    }
+  },
+  emits: ['update:modelValue']
+}
+</script>
+
+<style scoped>
+.view-mode-switch :deep(.el-radio-button__inner) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 36px;
+  min-width: 76px;
+  padding: 8px 12px;
+}
+.view-mode-switch i {
+  font-size: 14px;
+  line-height: 1;
+}
+.view-mode-text {
+  line-height: 1;
+}
+
+@media (max-width: 480px) {
+  .view-mode-switch :deep(.el-radio-button__inner) {
+    min-width: 68px;
+    min-height: 40px;
+    padding: 10px 12px;
+  }
+}
+</style>
diff --git a/web-front/src/utils/batchTreeCollect.js b/web-front/src/utils/batchTreeCollect.js
new file mode 100644
index 0000000..7445fa8
--- /dev/null
+++ b/web-front/src/utils/batchTreeCollect.js
@@ -0,0 +1,147 @@
+/**
+ * 文件树批量勾选：按深度递归展开并收集可下载文件。
+ *
+ * Depth convention (checked folder = depth 0):
+ * - 用户勾选的文件夹为第 0 层。
+ * - 其直接子项为第 1 层。
+ * - 当 depth < maxDepth 时继续展开子文件夹；默认 maxDepth = 4，
+ *   即最多再向下展开 4 层（第 0/1/2/3 层会 load，第 4 层文件夹不再展开）。
+ * - 触及上限时若仍有未加载/剩余子文件夹，标记 depthExceeded，由 UI 提示跳过。
+ */
+
+const DEFAULT_BATCH_MAX_DEPTH = 4
+
+function getTreeNodeId(item) {
+  if (!item) return ''
+  if (item.id) return String(item.id)
+  if (item.fileId) return `fid:${item.fileId}`
+  if (item.parserUrl) return `url:${item.parserUrl}`
+  return `name:${item.fileName || ''}:${item.fileType || ''}`
+}
+
+function normalizeTreeItem(item) {
+  if (!item || typeof item !== 'object') return item
+  return {
+    ...item,
+    id: getTreeNodeId(item),
+    isLeaf: item.fileType !== 'folder'
+  }
+}
+
+function fileIdentity(file) {
+  return `${file?.parserUrl || ''}::${file?.fileName || ''}::${file?.fileId || file?.id || ''}`
+}
+
+function uniqueFiles(files) {
+  const seen = new Set()
+  const out = []
+  for (const file of files || []) {
+    const key = fileIdentity(file)
+    if (!key || seen.has(key)) continue
+    seen.add(key)
+    out.push(file)
+  }
+  return out
+}
+
+function isFolderNode(data) {
+  return !!(data && data.fileType === 'folder')
+}
+
+function collectAlreadyLoadedFiles(node, isDownloadable, ctx) {
+  for (const child of node.childNodes || []) {
+    if (isDownloadable(child.data)) {
+      ctx.files.push(child.data)
+    } else if (isFolderNode(child.data) && child.loaded) {
+      collectAlreadyLoadedFiles(child, isDownloadable, ctx)
+    }
+  }
+}
+
+function hasUnexploredFolders(node) {
+  if (!node) return false
+  if (isFolderNode(node.data) && !node.loaded) return true
+  return (node.childNodes || []).some((child) => {
+    if (!isFolderNode(child.data)) return false
+    if (!child.loaded) return true
+    return hasUnexploredFolders(child)
+  })
+}
+
+/**
+ * 递归展开文件夹并收集可下载文件（对接 el-tree node / loadNode）。
+ *
+ * @param {object} opts
+ * @param {object} opts.folderData 勾选的文件夹 data（depth 从 0 计）
+ * @param {number} [opts.depth=0]
+ * @param {number} opts.maxDepth
+ * @param {(data: object) => any} opts.getNode el-tree getNode
+ * @param {(node: any) => Promise<any>} opts.ensureLoaded 展开并触发懒加载
+ * @param {(data: object) => boolean} opts.isDownloadable
+ * @param {Set<string>} [opts.visitedKeys]
+ * @param {(data: object) => string} [opts.getKey]
+ * @param {{ files: object[], depthExceeded: boolean }} [opts.ctx]
+ */
+async function collectFolderFiles(opts) {
+  const {
+    folderData,
+    depth = 0,
+    maxDepth,
+    getNode,
+    ensureLoaded,
+    isDownloadable,
+    getKey = getTreeNodeId,
+    visitedKeys = new Set(),
+    ctx = { files: [], depthExceeded: false }
+  } = opts
+
+  if (!folderData || typeof maxDepth !== 'number') return ctx
+
+  const key = getKey(folderData)
+  if (key) visitedKeys.add(key)
+
+  const node = getNode(folderData)
+  if (!node) return ctx
+
+  if (depth >= maxDepth) {
+    collectAlreadyLoadedFiles(node, isDownloadable, ctx)
+    if (hasUnexploredFolders(node)) {
+      ctx.depthExceeded = true
+    }
+    return ctx
+  }
+
+  try {
+    await ensureLoaded(node)
+  } catch {
+    // 单层加载失败：跳过该分支，不中断整次收集
+    return ctx
+  }
+
+  for (const child of node.childNodes || []) {
+    const data = child.data
+    if (!data) continue
+    if (isDownloadable(data)) {
+      ctx.files.push(data)
+    } else if (isFolderNode(data)) {
+      await collectFolderFiles({
+        ...opts,
+        folderData: data,
+        depth: depth + 1,
+        visitedKeys,
+        ctx
+      })
+    }
+  }
+  return ctx
+}
+
+module.exports = {
+  DEFAULT_BATCH_MAX_DEPTH,
+  getTreeNodeId,
+  normalizeTreeItem,
+  fileIdentity,
+  uniqueFiles,
+  isFolderNode,
+  collectFolderFiles
+}
diff --git a/web-front/src/utils/batchTreeCollect.spec.js b/web-front/src/utils/batchTreeCollect.spec.js
new file mode 100644
index 0000000..ff810b6
--- /dev/null
+++ b/web-front/src/utils/batchTreeCollect.spec.js
@@ -0,0 +1,194 @@
+const { describe, it } = require('node:test')
+const assert = require('node:assert/strict')
+
+const {
+  DEFAULT_BATCH_MAX_DEPTH,
+  getTreeNodeId,
+  normalizeTreeItem,
+  fileIdentity,
+  uniqueFiles,
+  collectFolderFiles
+} = require('./batchTreeCollect.js')
+
+function file(name, extra = {}) {
+  return {
+    fileName: name,
+    fileType: 'file',
+    parserUrl: `/v2/redirectUrl/demo/${name}`,
+    ...extra
+  }
+}
+
+function folder(name, extra = {}) {
+  return {
+    fileName: name,
+    fileType: 'folder',
+    parserUrl: `/v2/getFileList?dir=${name}`,
+    ...extra
+  }
+}
+
+function makeNode(data, children = [], { loaded = true, expanded = true, failLoad = false } = {}) {
+  const node = {
+    data,
+    loaded,
+    expanded,
+    childNodes: [],
+    expand(cb) {
+      if (failLoad) throw new Error('load failed')
+      this.loaded = true
+      this.expanded = true
+      if (cb) cb()
+    }
+  }
+  node.childNodes = children.map((child) => (child.data ? child : makeNode(child)))
+  return node
+}
+
+function createStore(rootNode) {
+  const map = new Map()
+  const walk = (node) => {
+    map.set(getTreeNodeId(node.data), node)
+    for (const child of node.childNodes || []) walk(child)
+  }
+  walk(rootNode)
+  return {
+    getNode(data) {
+      return map.get(getTreeNodeId(data)) || null
+    },
+    async ensureLoaded(node) {
+      if (node.loaded && node.expanded) return node
+      await new Promise((resolve) => node.expand(resolve))
+      for (const child of node.childNodes || []) {
+        map.set(getTreeNodeId(child.data), child)
+      }
+      return node
+    },
+    isDownloadable(data) {
+      return !!(data && data.parserUrl && data.fileType !== 'folder' && data.fileType !== 'url')
+    }
+  }
+}
+
+describe('batchTreeCollect helpers', () => {
+  it('uses checked folder as depth 0 and defaults max depth to 4', () => {
+    assert.equal(DEFAULT_BATCH_MAX_DEPTH, 4)
+    assert.equal(getTreeNodeId({ id: 'root' }), 'root')
+    assert.equal(normalizeTreeItem({ fileId: 'abc', fileType: 'folder' }).id, 'fid:abc')
+    assert.equal(normalizeTreeItem({ fileId: 'abc', fileType: 'folder' }).isLeaf, false)
+  })
+
+  it('deduplicates files by parserUrl + name + id', () => {
+    const a = file('a.txt', { fileId: '1' })
+    const dup = file('a.txt', { fileId: '1' })
+    const b = file('b.txt', { fileId: '2' })
+    assert.equal(fileIdentity(a), fileIdentity(dup))
+    assert.deepEqual(uniqueFiles([a, dup, b]).map((f) => f.fileName), ['a.txt', 'b.txt'])
+  })
+
+  it('collects current-level files and recurses into folders', async () => {
+    const leafA = file('a.txt')
+    const leafB = file('b.txt')
+    const nested = folder('nested')
+    const root = folder('root')
+    const store = createStore(makeNode(root, [
+      makeNode(leafA),
+      makeNode(nested, [makeNode(leafB)])
+    ]))
+
+    const ctx = await collectFolderFiles({
+      folderData: root,
+      maxDepth: 4,
+      ...store
+    })
+    assert.equal(ctx.depthExceeded, false)
+    assert.deepEqual(ctx.files.map((f) => f.fileName).sort(), ['a.txt', 'b.txt'])
+  })
+
+  it('stops expanding at maxDepth and warns when remaining folders exist', async () => {
+    // depth 0: root
+    // depth 1: d1
+    // depth 2: d2
+    // depth 3: d3
+    // depth 4: d4 (cap) — still has child folder d5
+    const deepFile = file('deep.txt')
+    const skipped = file('skipped.txt')
+    const d5 = folder('d5')
+    const d4 = folder('d4')
+    const d3 = folder('d3')
+    const d2 = folder('d2')
+    const d1 = folder('d1')
+    const root = folder('root')
+
+    const d5Node = makeNode(d5, [makeNode(skipped)], { loaded: false, expanded: false })
+    const d4Node = makeNode(d4, [makeNode(deepFile), d5Node], { loaded: true })
+    const tree = makeNode(root, [
+      makeNode(d1, [
+        makeNode(d2, [
+          makeNode(d3, [d4Node])
+        ])
+      ])
+    ])
+    const store = createStore(tree)
+
+    let loadedIds = []
+    const ctx = await collectFolderFiles({
+      folderData: root,
+      maxDepth: 4,
+      getNode: store.getNode,
+      ensureLoaded: async (node) => {
+        loadedIds.push(node.data.fileName)
+        return store.ensureLoaded(node)
+      },
+      isDownloadable: store.isDownloadable
+    })
+
+    assert.equal(ctx.depthExceeded, true)
+    assert.deepEqual(ctx.files.map((f) => f.fileName), ['deep.txt'])
+    assert.ok(!ctx.files.some((f) => f.fileName === 'skipped.txt'))
+    assert.ok(!loadedIds.includes('d4'), 'depth-4 folder must not be expanded')
+    assert.ok(loadedIds.includes('root'))
+    assert.ok(loadedIds.includes('d3'))
+  })
+
+  it('collects already-loaded files at the depth cap without expanding further', async () => {
+    const capFile = file('cap.txt')
+    const inner = folder('inner')
+    const cap = folder('cap')
+    const root = folder('root')
+    const tree = makeNode(root, [
+      makeNode(cap, [
+        makeNode(capFile),
+        makeNode(inner, [makeNode(file('too-deep.txt'))], { loaded: false })
+      ])
+    ])
+    const store = createStore(tree)
+    const ctx = await collectFolderFiles({
+      folderData: root,
+      maxDepth: 1,
+      ...store
+    })
+    assert.equal(ctx.depthExceeded, true)
+    assert.deepEqual(ctx.files.map((f) => f.fileName), ['cap.txt'])
+  })
+
+  it('skips a branch when ensureLoaded throws', async () => {
+    const ok = file('ok.txt')
+    const badFolder = folder('bad')
+    const root = folder('root')
+    const badNode = makeNode(badFolder, [makeNode(file('lost.txt'))], { loaded: false, failLoad: true })
+    const tree = makeNode(root, [makeNode(ok), badNode])
+    const store = createStore(tree)
+    const ctx = await collectFolderFiles({
+      folderData: root,
+      maxDepth: 4,
+      getNode: store.getNode,
+      ensureLoaded: async (node) => {
+        if (node.data.fileName === 'bad') throw new Error('network')
+        return store.ensureLoaded(node)
+      },
+      isDownloadable: store.isDownloadable
+    })
+    assert.deepEqual(ctx.files.map((f) => f.fileName), ['ok.txt'])
+  })
+})
diff --git a/web-front/src/views/Home.vue b/web-front/src/views/Home.vue
index bd45069..ada2838 100644
--- a/web-front/src/views/Home.vue
+++ b/web-front/src/views/Home.vue
@@ -417,10 +417,7 @@
           <!-- 目录树组件 -->
           <div v-if="showDirectoryTree" class="directory-tree-container">
             <div style="margin-bottom: 10px; text-align: right;">
-              <el-radio-group v-model="directoryViewMode" size="small">
-                <el-radio-button label="pane">窗格</el-radio-button>
-                <el-radio-button label="tree">文件树</el-radio-button>
-              </el-radio-group>
+              <ViewModeSwitch v-model="directoryViewMode" pane-label="窗格" tree-label="文件树" />
             </div>
             <DirectoryTree 
               :file-list="directoryData" 
@@ -619,6 +616,7 @@ import axios from 'axios'
 import QRCode from 'qrcode'
 import DarkMode from '@/components/DarkMode'
 import DirectoryTree from '@/components/DirectoryTree'
+import ViewModeSwitch from '@/components/ViewModeSwitch'
 import DownloadDialog from '@/components/DownloadDialog'
 import parserUrl from '../parserUrl1'
 import fileTypeUtils from '@/utils/fileTypeUtils'
@@ -629,7 +627,7 @@ import { PREVIEW_BASE_URL } from '@/utils/constants'
 
 export default {
   name: 'Home',
-  components: { DarkMode, DirectoryTree, DownloadDialog },
+  components: { DarkMode, DirectoryTree, ViewModeSwitch, DownloadDialog },
   mixins: [fileTypeUtils],
   data() {
     return {
diff --git a/web-front/src/views/ShowList.vue b/web-front/src/views/ShowList.vue
index e3dad17..dba89b6 100644
--- a/web-front/src/views/ShowList.vue
+++ b/web-front/src/views/ShowList.vue
@@ -8,10 +8,12 @@
     </div>
     <div style="text-align:right;margin-bottom:12px;">
       <DarkMode @theme-change="toggleTheme" style="float: left;"/>
-      <el-radio-group v-model="viewMode" size="small" style="margin-left:20px;">
-        <el-radio-button label="pane">窗格</el-radio-button>
-        <el-radio-button label="tree">目录树</el-radio-button>
-      </el-radio-group>
+      <ViewModeSwitch
+        v-model="viewMode"
+        pane-label="窗格"
+        tree-label="目录树"
+        style="margin-left:20px;"
+      />
     </div>
     <div v-if="loading" style="text-align:center;margin-top:40px;">加载中...</div>
     <div v-else-if="error" style="color:red;text-align:center;margin-top:40px;">{{ error }}</div>
@@ -29,11 +31,12 @@
 <script>
 import axios from 'axios'
 import DirectoryTree from '@/components/DirectoryTree'
+import ViewModeSwitch from '@/components/ViewModeSwitch'
 import DarkMode from '@/components/DarkMode'
 
 export default {
   name: 'ShowList',
-  components: { DirectoryTree, DarkMode },
+  components: { DirectoryTree, ViewModeSwitch, DarkMode },
   data() {
     return {
       loading: true,