fix(web): show tree batch download on the right pane

Split tree view now has persistent 批量下载 chrome on the right
detail pane (top toolbar + bottom bar), so users can enter batch
mode without clicking the left tree first. Left-pane toolbar/footer
and tree batch auto-expand stay unchanged.

Co-authored-by: qaiu <[email protected]>

parser/src/main/java/cn/qaiu/parser/impl/LzTool.java

@@ -82,31 +82,24 @@ public class LzTool extends PanBase {
             Pattern.compile("(?s)文件描述：</span><br>(.*?)</td>|class=\"n_box_des\">(.*?)</div>");
     private static final Pattern P_FI_ID = Pattern.compile("\\?f=(.*?)&|fid = (.*?);");
     private static final Pattern P_FI_TIME = Pattern.compile(">上传时间：</span>(.*?)<");
-    /**
-     * 蓝奏全部对外 HTTP 共用的移动端身份。
-     * 桌面 Chrome UA 拉分享页常返回 off0 下线空壳（~665B，空 title，无 filemoreajax）。
-     */
-    private static final String MOBILE_UA = "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 "
-            + "(KHTML, like Gecko) Chrome/111.0.0.0 Mobile Safari/537.36";
-
-    /** 分享页 / iframe / 下载域导航头，只读共享；需要改写时先 addAll 到新 MultiMap。 */
-    private static final MultiMap PAGE_HEADERS = applyMobileIdentity(HeaderUtils.parseHeaders("""
+    /** 分享页导航头，只读共享；需要改写时先 addAll 到新 MultiMap。 */
+    private static final MultiMap PAGE_HEADERS = HeaderUtils.parseHeaders("""
         Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
         Accept-Encoding: identity
         Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
         Cache-Control: max-age=0
         DNT: 1
         Priority: u=0, i
-        Sec-CH-UA: "Chromium";v="111", "Not:A-Brand";v="24", "Google Chrome";v="111"
-        Sec-CH-UA-Mobile: ?1
-        Sec-CH-UA-Platform: "Android"
+        Sec-CH-UA: "Chromium";v="134", "Not:A-Brand";v="24", "Google Chrome";v="134"
+        Sec-CH-UA-Mobile: ?0
+        Sec-CH-UA-Platform: "Windows"
         Sec-Fetch-Dest: document
         Sec-Fetch-Mode: navigate
         Sec-Fetch-Site: cross-site
         Sec-Fetch-User: ?1
         Upgrade-Insecure-Requests: 1
-        User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Mobile Safari/537.36
-        """));
+        User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
+        """);
 
     private static final String DOWN_AJAX_HEADERS = """
             Accept: application/json, text/javascript, */*; q=0.01
@@ -118,7 +111,11 @@ public class LzTool extends PanBase {
             Sec-Fetch-Dest: empty
             Sec-Fetch-Mode: cors
             Sec-Fetch-Site: same-origin
+            User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
             X-Requested-With: XMLHttpRequest
+            sec-ch-ua: "Chromium";v="134", "Not:A-Brand";v="24", "Google Chrome";v="134"
+            sec-ch-ua-mobile: ?0
+            sec-ch-ua-platform: "Windows"
             """;
 
     private static final String VERIFY_AJAX_HEADERS = """
@@ -415,7 +412,7 @@ public class LzTool extends PanBase {
     }
 
     /** 页面里提取出的 ajax 调用：相对路径 + 表单参数。 */
-    record AjaxCall(String path, Map<String, String> form) {
+    private record AjaxCall(String path, Map<String, String> form) {
         MultiMap toForm() {
             MultiMap m = MultiMap.caseInsensitiveMultiMap();
             form.forEach(m::set);
@@ -488,7 +485,7 @@ public class LzTool extends PanBase {
         return new AjaxCall("/" + ajaxPath, data);
     }
 
-    static AjaxCall extractFolderAjax(String html, String pwd) {
+    private static AjaxCall extractFolderAjax(String html, String pwd) {
         if (html == null || html.isEmpty()) {
             return null;
         }
@@ -578,7 +575,7 @@ public class LzTool extends PanBase {
     }
 
     private void getDownURL(String referer, AjaxCall call) {
-        MultiMap headers = applyMobileIdentity(HeaderUtils.parseHeaders(DOWN_AJAX_HEADERS));
+        MultiMap headers = HeaderUtils.parseHeaders(DOWN_AJAX_HEADERS);
         // 个性域名 ajaxfile.php 会立刻 inf=已超时；POST 必须打 wwww。iframe 请求 Referer 用 iframe 地址。
         headers.set("referer", referer != null && !referer.isBlank() ? referer : resolveShareUrl());
         String url = joinUrl(SHARE_ORIGIN + "/", call.path());
@@ -619,7 +616,7 @@ public class LzTool extends PanBase {
 
     /**
      * 中间链：部分出口仍 302；多数（含机房 IP）固定出「验证并下载」页。
-     * dmpdmp 等下载域仍会出 arg1 挑战，必须算 acw_sc__v2 再请求。
+     * dmpdmp 等下载域仍会出 arg1 挑战（Windows UA 更常见），必须算 acw_sc__v2 再请求。
      * 必须等约 2s 后 POST /file/ajax.php el=2 拿 CDN 直链；立刻 POST 会 ?SignError。
      * 中间页不能当成功结果返回——用户侧裸打开永远是验证 HTML。
      */
@@ -751,17 +748,20 @@ public class LzTool extends PanBase {
     }
 
     /** 最后一步 GET 用完整浏览器导航头，裸 curl / 无 UA 会固定落到验证页。 */
-    static MultiMap lanrarPageHeaders(String referer) {
+    private static MultiMap lanrarPageHeaders(String referer) {
         MultiMap h = MultiMap.caseInsensitiveMultiMap();
         h.addAll(PAGE_HEADERS);
         h.set("referer", referer);
         return h;
     }
 
-    static MultiMap lanrarAjaxHeaders(String referer) {
-        MultiMap h = applyMobileIdentity(HeaderUtils.parseHeaders(VERIFY_AJAX_HEADERS));
+    private static MultiMap lanrarAjaxHeaders(String referer) {
+        MultiMap h = HeaderUtils.parseHeaders(VERIFY_AJAX_HEADERS);
         h.set("referer", referer);
+        copyHeader(h, "User-Agent", "User-Agent");
         copyHeader(h, "Sec-CH-UA", "sec-ch-ua");
+        copyHeader(h, "Sec-CH-UA-Mobile", "sec-ch-ua-mobile");
+        copyHeader(h, "Sec-CH-UA-Platform", "sec-ch-ua-platform");
         return h;
     }
 
@@ -871,45 +871,18 @@ public class LzTool extends PanBase {
         complete(downloadUrl);
     }
 
-    /** 蓝奏对外请求统一写成 Android Mobile，避免桌面 UA 落到 off0 空壳。 */
-    static MultiMap applyMobileIdentity(MultiMap headers) {
-        headers.set("User-Agent", MOBILE_UA);
-        headers.set("Sec-CH-UA-Mobile", "?1");
-        headers.set("Sec-CH-UA-Platform", "\"Android\"");
-        return headers;
-    }
-
-    static MultiMap folderListHeaders(String referer) {
-        MultiMap headers = applyMobileIdentity(MultiMap.caseInsensitiveMultiMap());
-        headers.set("Accept-Language", "zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2");
+    /** 目录列表 filemoreajax.php 用移动端 UA。 */
+    private static MultiMap folderListHeaders(String referer) {
+        MultiMap headers = MultiMap.caseInsensitiveMultiMap();
+        headers.set("User-Agent", "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 "
+                + "(KHTML, like Gecko) Chrome/111.0.0.0 Mobile Safari/537.36");
         headers.set("referer", referer);
+        headers.set("sec-ch-ua-platform", "Android");
+        headers.set("Accept-Language", "zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2");
+        headers.set("sec-ch-ua-mobile", "?1");
         return headers;
     }
 
-    static String mobileUserAgent() {
-        return MOBILE_UA;
-    }
-
-    static MultiMap sharePageHeaders() {
-        return PAGE_HEADERS;
-    }
-
-    static MultiMap downAjaxHeaders() {
-        return applyMobileIdentity(HeaderUtils.parseHeaders(DOWN_AJAX_HEADERS));
-    }
-
-    /** 蓝奏 off0 / off1 下线空壳：桌面 UA 拉分享页时常只有这个，没有 filemoreajax。 */
-    static boolean isLzOfflineStub(String html) {
-        if (html == null || html.isBlank()) {
-            return true;
-        }
-        if (html.contains("class=\"off0\"") || html.contains("class='off0'")
-                || html.contains("id=\"off0\"") || html.contains("id='off0'")
-                || html.contains("class=\"off1\"") || html.contains("class='off1'")) {
-            return true;
-        }
-        return P_OFF_MSG.matcher(html).find();
-    }
 
     @Override
     public Future<List<FileInfo>> parseFileList() {
@@ -985,7 +958,7 @@ public class LzTool extends PanBase {
         return path.charAt(0) == 'b' || path.charAt(0) == 'B';
     }
 
-    static boolean isLzFolderHtml(String html) {
+    private static boolean isLzFolderHtml(String html) {
         if (html == null || html.isBlank()) {
             return false;
         }

parser/src/test/java/cn/qaiu/parser/impl/LzToolFolderPageTest.java

@@ -1,110 +0,0 @@
-package cn.qaiu.parser.impl;
-
-import io.vertx.core.MultiMap;
-import org.junit.Test;
-
-import java.util.List;
-
-import static org.junit.Assert.*;
-
-/**
- * 蓝奏 LzTool 对外请求一律移动 UA：桌面 Chrome 会触发 off0 下线空壳。
- * 不访问真实蓝奏，只回归请求头与空壳/目录页识别。
- */
-public class LzToolFolderPageTest {
-
-    private static final String FOLDER_URL = "https://pan.lanzoux.com/b66477";
-    private static final String FILE_URL = "https://wwww.lanzoux.com/iULV2n4361c";
-
-    /** 桌面 UA 实测会落到的 off0 空壳（空 title，无 filemoreajax）。 */
-    private static final String OFF0_STUB = """
-            <!DOCTYPE html>
-            <html>
-            <head><meta charset="utf-8"><title></title></head>
-            <body>
-            <div class="off">
-            <div class="off0"></div>
-            <div class="off1"></div>
-            </div>
-            </body>
-            </html>
-            """;
-
-    /** 移动 UA 才能拿到的目录页片段。 */
-    private static final String FOLDER_HTML = """
-            <!DOCTYPE html>
-            <html>
-            <head><title>全网最全软件合集</title></head>
-            <body>
-            <div id="infos"></div>
-            <script type="text/javascript">
-            $.ajax({
-                url : '/filemoreajax.php?file=66477',
-                data : {
-                    'lx':2,
-                    'fid':66477,
-                    'uid':'u1',
-                    'pg':1,
-                    'rep':'0',
-                    't':t,
-                    'k':k,
-                    'up':1,
-                    'pwd':pwd
-                }
-            });
-            var t = 'TIME_TOKEN';
-            var k = 'KEY_TOKEN';
-            </script>
-            </body>
-            </html>
-            """;
-
-    @Test
-    public void testAllOutboundHeadersUseAndroidMobileUa() {
-        String mobileUa = LzTool.mobileUserAgent();
-        assertTrue(mobileUa.contains("Android"));
-        assertTrue(mobileUa.contains("Mobile Safari"));
-        assertFalse("蓝奏路径不应再带桌面 Chrome UA", mobileUa.contains("Windows NT"));
-
-        List<MultiMap> outbound = List.of(
-                LzTool.sharePageHeaders(),
-                LzTool.folderListHeaders(FOLDER_URL),
-                LzTool.downAjaxHeaders(),
-                LzTool.lanrarPageHeaders("https://developer2.lanrar.com"),
-                LzTool.lanrarAjaxHeaders(FILE_URL)
-        );
-        for (MultiMap headers : outbound) {
-            assertEquals(mobileUa, headers.get("User-Agent"));
-            assertEquals("?1", headers.get("Sec-CH-UA-Mobile"));
-            assertFalse(String.valueOf(headers.get("User-Agent")).contains("Windows NT"));
-            assertFalse("?0".equals(headers.get("Sec-CH-UA-Mobile")));
-        }
-        assertEquals("\"Android\"", LzTool.sharePageHeaders().get("Sec-CH-UA-Platform"));
-    }
-
-    @Test
-    public void testOff0StubDetectedWithoutFilemoreajax() {
-        assertTrue(LzTool.isLzOfflineStub(OFF0_STUB));
-        assertTrue(LzTool.isLzOfflineStub(""));
-        assertTrue(LzTool.isLzOfflineStub(null));
-        assertFalse(LzTool.isLzOfflineStub(FOLDER_HTML));
-        assertFalse(LzTool.isLzFolderHtml(OFF0_STUB));
-        assertNull(LzTool.extractFolderAjax(OFF0_STUB, null));
-    }
-
-    @Test
-    public void testRealFolderHtmlExtractsFilemoreajax() {
-        assertTrue(LzTool.isLzFolderHtml(FOLDER_HTML));
-        assertFalse(LzTool.isLzOfflineStub(FOLDER_HTML));
-        assertTrue(LzTool.isLzFolderUrl(FOLDER_URL));
-        assertFalse(LzTool.isLzFolderUrl(FILE_URL));
-
-        LzTool.AjaxCall call = LzTool.extractFolderAjax(FOLDER_HTML, "pwd1");
-        assertNotNull(call);
-        assertEquals("/filemoreajax.php?file=66477", call.path());
-        assertEquals("66477", call.form().get("fid"));
-        assertEquals("TIME_TOKEN", call.form().get("t"));
-        assertEquals("KEY_TOKEN", call.form().get("k"));
-        assertEquals("pwd1", call.form().get("pwd"));
-    }
-}

web-front/src/components/DirectoryTree.vue

@@ -139,113 +139,114 @@
                     style="background:transparent;"
                   />
                 </div>
-                <div v-if="batchMode" class="tree-sidebar-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 || 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">
-                    <el-progress :percentage="batchProgressPercent" :status="batchProgressStatus" />
-                    <p>{{ batchProgress.current }} / {{ batchProgress.total }}
-                      <span v-if="batchProgress.failed > 0" style="color:#f56c6c;"> ({{ batchProgress.failed }} 失败)</span>
-                    </p>
-                  </div>
-                </div>
+                <TreeBatchActionBar
+                  v-if="batchMode"
+                  class="tree-sidebar-footer"
+                  v-bind="treeBatchBarBind"
+                  @browser-download="batchBrowserDownload"
+                  @send-downloader="batchSendToDownloader"
+                  @cancel="toggleBatchMode"
+                />
               </div>
             </pane>
             <pane>
               <div class="tree-content">
-                <div v-if="selectedNode" class="file-detail-panel">
-                  <div class="file-detail-icon-wrap">
-                    <i :class="getFileIcon(selectedNode)" class="file-detail-icon"></i>
-                  </div>
-                  <h4 class="file-detail-name">{{ selectedNode.fileName }}</h4>
-                  <div v-if="selectedNode.fileType !== 'folder'" class="file-detail-meta">
-                    <p>类型: {{ selectedNode.fileType === 'url' ? '超链接' : getFileTypeClass(selectedNode) }}</p>
-                    <p v-if="selectedNode.fileType !== 'url'">大小: {{ selectedNode.sizeStr || '0B' }}</p>
-                    <p v-if="selectedNode.fileType === 'url' && selectedNode.previewUrl" class="file-detail-link">
-                      链接: {{ selectedNode.previewUrl }}
-                    </p>
-                    <p v-if="formatDate(selectedNode.createTime)">创建时间: {{ formatDate(selectedNode.createTime) }}</p>
-                    <p v-if="formatDate(selectedNode.updateTime)">更新时间: {{ formatDate(selectedNode.updateTime) }}</p>
-                  </div>
-                  <div class="file-detail-actions">
-                    <el-button
-                      v-if="selectedNode.fileType === 'url' && selectedNode.previewUrl"
-                      type="primary" size="small"
-                      @click="openExternalLink(selectedNode)"
-                    >
-                      <i class="fas fa-external-link-alt"></i> 打开链接
-                    </el-button>
-                    <el-button
-                      v-else-if="selectedNode.parserUrl || selectedNode.previewUrl"
-                      size="small"
-                      @click="previewFile(selectedNode)"
-                    >
-                      <i class="fas fa-external-link-alt"></i> 打开
-                    </el-button>
-                    <el-button
-                      v-if="isDownloadableFile(selectedNode)"
-                      type="success" size="small"
-                      @click="handleDownload(selectedNode)"
-                      :loading="downloadLoading"
-                      :disabled="needsDownloader(selectedNode)"
-                      :title="needsDownloader(selectedNode) ? '该网盘需使用下载器下载' : ''"
-                    >
-                      <i class="fas fa-download"></i> 下载
-                    </el-button>
-                    <el-button
-                      v-if="isDownloadableFile(selectedNode)"
-                      type="primary" size="small"
-                      @click="sendSingleToDownloader(selectedNode)"
-                      :loading="singleSendLoading"
-                    >
-                      <i class="fas fa-paper-plane"></i> 发送到下载器
-                    </el-button>
-                    <el-button
-                      v-if="isDownloadableFile(selectedNode)"
-                      size="small"
-                      @click="copyDirectLink(selectedNode)"
-                      :loading="copyLinkLoading"
-                      :disabled="needsDownloader(selectedNode)"
-                      :title="needsDownloader(selectedNode) ? '该网盘需使用下载器，无法直接复制直链' : ''"
-                    >
-                      <i class="fas fa-link"></i> 复制直链
-                    </el-button>
-                  </div>
-                </div>
-                <div v-else class="file-detail-empty">
-                  <i class="fas fa-hand-pointer" style="font-size:32px;color:#bbb;margin-bottom:12px;"></i>
-                  <p>请在左侧选择文件查看详情</p>
-                </div>
-                <div v-if="!batchMode" class="tree-batch-trigger">
-                  <el-button type="warning" size="small" @click="toggleBatchMode">
+                <div class="tree-toolbar tree-content-toolbar">
+                  <span class="tree-toolbar-title">
+                    <i class="fas fa-file-alt" 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-content-body">
+                  <div v-if="selectedNode" class="file-detail-panel">
+                    <div class="file-detail-icon-wrap">
+                      <i :class="getFileIcon(selectedNode)" class="file-detail-icon"></i>
+                    </div>
+                    <h4 class="file-detail-name">{{ selectedNode.fileName }}</h4>
+                    <div v-if="selectedNode.fileType !== 'folder'" class="file-detail-meta">
+                      <p>类型: {{ selectedNode.fileType === 'url' ? '超链接' : getFileTypeClass(selectedNode) }}</p>
+                      <p v-if="selectedNode.fileType !== 'url'">大小: {{ selectedNode.sizeStr || '0B' }}</p>
+                      <p v-if="selectedNode.fileType === 'url' && selectedNode.previewUrl" class="file-detail-link">
+                        链接: {{ selectedNode.previewUrl }}
+                      </p>
+                      <p v-if="formatDate(selectedNode.createTime)">创建时间: {{ formatDate(selectedNode.createTime) }}</p>
+                      <p v-if="formatDate(selectedNode.updateTime)">更新时间: {{ formatDate(selectedNode.updateTime) }}</p>
+                    </div>
+                    <div class="file-detail-actions">
+                      <el-button
+                        v-if="selectedNode.fileType === 'url' && selectedNode.previewUrl"
+                        type="primary" size="small"
+                        @click="openExternalLink(selectedNode)"
+                      >
+                        <i class="fas fa-external-link-alt"></i> 打开链接
+                      </el-button>
+                      <el-button
+                        v-else-if="selectedNode.parserUrl || selectedNode.previewUrl"
+                        size="small"
+                        @click="previewFile(selectedNode)"
+                      >
+                        <i class="fas fa-external-link-alt"></i> 打开
+                      </el-button>
+                      <el-button
+                        v-if="isDownloadableFile(selectedNode)"
+                        type="success" size="small"
+                        @click="handleDownload(selectedNode)"
+                        :loading="downloadLoading"
+                        :disabled="needsDownloader(selectedNode)"
+                        :title="needsDownloader(selectedNode) ? '该网盘需使用下载器下载' : ''"
+                      >
+                        <i class="fas fa-download"></i> 下载
+                      </el-button>
+                      <el-button
+                        v-if="isDownloadableFile(selectedNode)"
+                        type="primary" size="small"
+                        @click="sendSingleToDownloader(selectedNode)"
+                        :loading="singleSendLoading"
+                      >
+                        <i class="fas fa-paper-plane"></i> 发送到下载器
+                      </el-button>
+                      <el-button
+                        v-if="isDownloadableFile(selectedNode)"
+                        size="small"
+                        @click="copyDirectLink(selectedNode)"
+                        :loading="copyLinkLoading"
+                        :disabled="needsDownloader(selectedNode)"
+                        :title="needsDownloader(selectedNode) ? '该网盘需使用下载器，无法直接复制直链' : ''"
+                      >
+                        <i class="fas fa-link"></i> 复制直链
+                      </el-button>
+                    </div>
+                  </div>
+                  <div v-else class="file-detail-empty">
+                    <i class="fas fa-hand-pointer" style="font-size:32px;color:#bbb;margin-bottom:12px;"></i>
+                    <p>请在左侧选择文件查看详情</p>
+                    <p v-if="!batchMode" class="file-detail-empty-hint">或直接点击「批量下载」勾选多个文件</p>
+                  </div>
+                </div>
+                <div class="tree-content-footer" :class="{ 'is-batch': batchMode }">
+                  <template v-if="!batchMode">
+                    <span class="tree-content-footer-hint">可直接勾选多个文件下载</span>
+                    <el-button type="warning" size="small" @click="toggleBatchMode">
+                      <i class="fas fa-check-double"></i> 批量下载
+                    </el-button>
+                  </template>
+                  <TreeBatchActionBar
+                    v-else
+                    v-bind="treeBatchBarBind"
+                    @browser-download="batchBrowserDownload"
+                    @send-downloader="batchSendToDownloader"
+                    @cancel="toggleBatchMode"
+                  />
                 </div>
               </div>
             </pane>
@@ -353,26 +354,21 @@
               <div v-else class="file-detail-empty">
                 <i class="fas fa-hand-pointer" style="font-size:24px;color:#bbb;margin-bottom:8px;"></i>
                 <p>请在上方选择文件查看详情</p>
+                <p v-if="!batchMode" class="file-detail-empty-hint">或直接点击「批量下载」勾选多个文件</p>
               </div>
               <div v-if="!batchMode" class="mobile-batch-trigger">
                 <el-button type="warning" size="small" @click="toggleBatchMode">
                   <i class="fas fa-check-double"></i> 批量下载
                 </el-button>
               </div>
-              <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 || 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">
-                  <el-progress :percentage="batchProgressPercent" :status="batchProgressStatus" />
-                  <p>{{ batchProgress.current }} / {{ batchProgress.total }}
-                    <span v-if="batchProgress.failed > 0" style="color:#f56c6c;"> ({{ batchProgress.failed }} 失败)</span>
-                  </p>
-                </div>
-              </div>
+              <TreeBatchActionBar
+                v-if="batchMode"
+                class="mobile-batch-footer"
+                v-bind="treeBatchBarBind"
+                @browser-download="batchBrowserDownload"
+                @send-downloader="batchSendToDownloader"
+                @cancel="toggleBatchMode"
+              />
             </div>
           </template>
         </div>
@@ -453,6 +449,7 @@ import { Splitpanes, Pane } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
 import fileTypeUtils from '@/utils/fileTypeUtils'
 import DownloadDialog from '@/components/DownloadDialog.vue'
+import TreeBatchActionBar from '@/components/TreeBatchActionBar.vue'
 import { testConnection, autoDetect, addDownload, batchAddDownload, getConfig, saveConfig } from '@/utils/downloaderService'
 import batchTreeCollect from '@/utils/batchTreeCollect'
 
@@ -466,7 +463,7 @@ const {
 
 export default {
   name: 'DirectoryTree',
-  components: { ElTree, Splitpanes, Pane, DownloadDialog },
+  components: { ElTree, Splitpanes, Pane, DownloadDialog, TreeBatchActionBar },
   props: {
     fileList: {
       type: Array,
@@ -566,6 +563,19 @@ export default {
     effectiveBatchMaxDepth() {
       const depth = Number(this.batchMaxDepth)
       return Number.isFinite(depth) && depth >= 0 ? depth : DEFAULT_BATCH_MAX_DEPTH
+    },
+    treeBatchBarBind() {
+      return {
+        selectedCount: this.selectedFiles.length,
+        batchDownloading: this.batchDownloading,
+        treeExpanding: this.treeExpanding,
+        browserDisabled: this.batchBrowserDownloadDisabled,
+        progressPercent: this.batchProgressPercent,
+        progressStatus: this.batchProgressStatus,
+        progressCurrent: this.batchProgress.current,
+        progressTotal: this.batchProgress.total,
+        progressFailed: this.batchProgress.failed
+      }
     }
   },
   watch: {
@@ -1640,10 +1650,21 @@ html, body, #app, .main-container, .directory-tree, .content-card {
 .batch-progress-info {
   margin-top: 12px;
 }
-.tree-batch-trigger {
-  position: absolute;
-  bottom: 12px;
-  right: 12px;
+.tree-content-footer-hint {
+  font-size: 12px;
+  color: #909399;
+  line-height: 1.4;
+}
+.dark-theme .tree-content-footer-hint {
+  color: #bdc3c7;
+}
+.file-detail-empty-hint {
+  margin-top: 8px;
+  font-size: 13px;
+  color: #909399;
+}
+.dark-theme .file-detail-empty-hint {
+  color: #bdc3c7;
 }
 
 .stats {
@@ -1714,8 +1735,7 @@ html, body, #app, .main-container, .directory-tree, .content-card {
 }
 .tree-content {
   flex: 1;
-  padding: 16px;
-  overflow-y: auto;
+  min-height: 0;
   position: relative;
 }
 
@@ -2008,12 +2028,48 @@ html, body, #app, .main-container, .directory-tree, .content-card {
   min-height: 0;
   display: flex;
   flex-direction: column;
-  overflow: auto;
-  padding: 24px 16px 16px 16px;
-  align-items: center;
+  overflow: hidden;
+  padding: 0;
+  align-items: stretch;
   position: relative;
 }
 
+.tree-content-toolbar {
+  width: 100%;
+}
+
+.tree-content-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 24px 16px 16px;
+}
+
+.tree-content-footer {
+  flex-shrink: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 10px 12px;
+  border-top: 1px solid #eaeaea;
+  background: #f8f9fa;
+}
+
+.tree-content-footer.is-batch {
+  display: block;
+}
+
+.dark-theme .tree-content-footer {
+  border-top-color: #404040;
+  background: #232323;
+}
+
 .file-detail-panel {
   display: flex;
   flex-direction: column;

web-front/src/components/TreeBatchActionBar.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <span class="tree-sidebar-count">已勾选 {{ selectedCount }} 个文件</span>
+    <div class="tree-sidebar-actions">
+      <el-button
+        type="primary"
+        size="small"
+        :disabled="selectedCount === 0 || batchDownloading || treeExpanding || browserDisabled"
+        :loading="batchDownloading"
+        :title="browserDisabled ? '所选文件需使用下载器下载' : ''"
+        @click="$emit('browser-download')"
+      >
+        浏览器下载
+      </el-button>
+      <el-button
+        type="success"
+        size="small"
+        :disabled="selectedCount === 0 || batchDownloading || treeExpanding"
+        :loading="batchDownloading"
+        @click="$emit('send-downloader')"
+      >
+        发送到下载器
+      </el-button>
+      <el-button size="small" @click="$emit('cancel')">取消</el-button>
+    </div>
+    <div v-if="batchDownloading" class="batch-progress-info">
+      <el-progress :percentage="progressPercent" :status="progressStatus" />
+      <p>{{ progressCurrent }} / {{ progressTotal }}
+        <span v-if="progressFailed > 0" style="color:#f56c6c;"> ({{ progressFailed }} 失败)</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TreeBatchActionBar',
+  props: {
+    selectedCount: { type: Number, default: 0 },
+    batchDownloading: { type: Boolean, default: false },
+    treeExpanding: { type: Boolean, default: false },
+    browserDisabled: { type: Boolean, default: false },
+    progressPercent: { type: Number, default: 0 },
+    progressStatus: { type: String, default: '' },
+    progressCurrent: { type: Number, default: 0 },
+    progressTotal: { type: Number, default: 0 },
+    progressFailed: { type: Number, default: 0 }
+  },
+  emits: ['browser-download', 'send-downloader', 'cancel']
+}
+</script>