dsh-mcloud 0.2.1 → 0.3.1

package/lib/client.js

@@ -56,6 +56,7 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
         refreshFailed: '读取状态失败：{detail}',
         account: '账号',
         expires: '授权有效期',
+        expiresShort: '有效期：',
         expired: '已过期',
         quota: '容量',
         used: '已用',
@@ -98,7 +99,9 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
         loginSecurityNote: '仅用于换取访问令牌；密码不会发送到除运营商外的任何地方',
         loginEmpty: '请输入手机号/邮箱和密码',
         reauthorize: '重新授权',
+        reauthorizeShort: '授权',
         clearAuth: '清除授权',
+        clearAuthShort: '退出',
         clearConfirm: '退出登录并清除本机保存的凭据？之后需要重新登录。',
         root: '/',
         up: '返回上级',
@@ -147,7 +150,56 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
         menuTypePath: '直接填路径',
         // 下载目录 / 上传
         downloadDir: '下载目录',
+        downloadDirShort: '下载到',
         downloadDirHint: '「下载到本地」的文件会存到这个目录；路径是运行 DSH 那台机器上的路径。',
+        downloadDirSaved: '下载目录已保存',
+        chooseDir: '选择目录',
+        resetDefault: '恢复默认',
+        save: '保存',
+
+        // ===== 0.3.0 资源管理器 =====
+        folders: '文件夹',
+        treeResizeHint: '拖动调整宽度（双击恢复默认）',
+        expand: '展开',
+        collapse: '收起',
+        toggleTree: '显示/隐藏文件夹树',
+        colName: '名称',
+        colSize: '大小',
+        colModified: '修改时间',
+        colResizeHint: '拖动调整列宽（双击恢复默认）',
+        search: '搜索',
+        searchPlaceholder: '搜索文件…',
+        searchClear: '清空搜索',
+        searching: '正在搜索…',
+        searchIn: '在 {path} 及其子目录中搜索',
+        searchNoResult: '没有找到匹配的文件',
+        searchCount: '找到 {count} 项',
+        searchTruncated: '找到 {count} 项（结果过多，已截断）',
+        searchExit: '退出搜索',
+        feedMoreHint: '继续向下滚动加载更多',
+
+        // 历史传输记录
+        history: '传输记录',
+        historyShort: '记录',
+        historyTitle: '传输记录',
+        historyClear: '清空记录',
+        historyClearConfirm: '清空全部传输记录？\n\n只删除记录列表，网盘和本地文件都不会受影响。正在传输的任务会保留。',
+        historyCleared: '已清空 {count} 条记录',
+        historyActive: '进行中',
+        historyDone: '已完成',
+        historyFailed: '失败',
+        historyCancelled: '已取消',
+        historyEmpty: '还没有传输记录。上传或下载一个文件就会出现在这里。',
+        jobDone: '已完成',
+        jobFailed: '失败',
+        jobCancelled: '已取消',
+        jobQueued: '排队中',
+        jobScanning: '扫描目录',
+        jobRunning: '传输中',
+        close: '关闭',
+        transfersMore: '还有 {count} 项',
+        transfersDone: '已完成 {count} 个传输任务',
+        transfersFailed: '{count} 个任务失败',
         upload: '上传',
         uploadPath: '本机文件绝对路径，例如 D:\\tmp\\a.zip',
         uploadPathHint: '这个路径指向运行 DSH 的那台机器，不是浏览器所在的机器。',
@@ -210,6 +262,7 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
         refreshFailed: 'Could not read status: {detail}',
         account: 'Account',
         expires: 'Authorized until',
+        expiresShort: 'Expires: ',
         expired: 'Expired',
         quota: 'Storage',
         used: 'Used',
@@ -252,7 +305,9 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
         loginSecurityNote: 'Used only to obtain an access token; the password is never sent anywhere but the carrier',
         loginEmpty: 'Enter your phone/email and password',
         reauthorize: 'Re-authorize',
+        reauthorizeShort: 'Auth',
         clearAuth: 'Clear authorization',
+        clearAuthShort: 'Sign out',
         clearConfirm: 'Clear the stored Mobile Cloud authorization? You will need to paste the Authorization value again.',
         root: '/',
         up: 'Up one level',
@@ -301,7 +356,56 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
         menuTypePath: 'Type a path instead',
         // Download dir / upload
         downloadDir: 'Download folder',
+        downloadDirShort: 'Save to',
         downloadDirHint: 'Files downloaded to this machine land in this folder; the path is on the machine running DSH.',
+        downloadDirSaved: 'Download folder saved',
+        chooseDir: 'Choose folder',
+        resetDefault: 'Reset to default',
+        save: 'Save',
+
+        // ===== 0.3.0 explorer =====
+        folders: 'Folders',
+        treeResizeHint: 'Drag to resize (double-click to reset)',
+        expand: 'Expand',
+        collapse: 'Collapse',
+        toggleTree: 'Show/hide folder tree',
+        colName: 'Name',
+        colSize: 'Size',
+        colModified: 'Modified',
+        colResizeHint: 'Drag to resize column (double-click to reset)',
+        search: 'Search',
+        searchPlaceholder: 'Search files…',
+        searchClear: 'Clear search',
+        searching: 'Searching…',
+        searchIn: 'Searching in {path} and its subfolders',
+        searchNoResult: 'No matching files',
+        searchCount: 'Found {count}',
+        searchTruncated: 'Found {count} (truncated)',
+        searchExit: 'Exit search',
+        feedMoreHint: 'Scroll down to load more',
+
+        // Transfer history
+        history: 'Transfers',
+        historyShort: 'Log',
+        historyTitle: 'Transfer history',
+        historyClear: 'Clear history',
+        historyClearConfirm: 'Clear all transfer records?\n\nOnly the list is removed — files on the drive and on disk are untouched. Transfers still running are kept.',
+        historyCleared: 'Cleared {count} record(s)',
+        historyActive: 'In progress',
+        historyDone: 'Completed',
+        historyFailed: 'Failed',
+        historyCancelled: 'Cancelled',
+        historyEmpty: 'No transfers yet. Upload or download a file and it will show up here.',
+        jobDone: 'Done',
+        jobFailed: 'Failed',
+        jobCancelled: 'Cancelled',
+        jobQueued: 'Queued',
+        jobScanning: 'Scanning',
+        jobRunning: 'Transferring',
+        close: 'Close',
+        transfersMore: '{count} more',
+        transfersDone: '{count} transfer(s) completed',
+        transfersFailed: '{count} transfer(s) failed',
         upload: 'Upload',
         uploadPath: 'Absolute path on this machine, e.g. D:\\tmp\\a.zip',
         uploadPathHint: 'The path is on the machine running DSH, not the machine with the browser.',
@@ -517,6 +621,265 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
         '.mc-formNote{font-size:11px;line-height:17px;color:' + GREY_2 + ';margin:0;word-break:break-word}',
         '.mc-submitRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}',
         '.mc-submit{justify-content:center;min-width:132px}',
+
+        // ================================================================
+        // 资源管理器布局（0.3.0）
+        //
+        // 目标：像 Windows 资源管理器那样「左边目录树 + 右边内容」，
+        // 并且整块区域要**撑满**插件面板（不再是一条条卡片往下堆）。
+        //
+        // 高度链条很重要：外层 .mc-explorer 必须是 flex 列 + min-height:0，
+        // 里面的滚动区才能正确收缩。任何一环忘了 min-height:0，
+        // 滚动区就会把父元素顶高、整页出现双滚动条。
+        // ================================================================
+        // 整页不再居中、不再滚动：由内部各区域自己滚。
+        // min-height 写 100% 做兜底：万一宿主给的外层没有确定高度，
+        // height:100% 会退化成 auto（塌成内容高），面板就「撑不满」了。
+        '.mc-root-ide{height:100%;min-height:100%;overflow:hidden;padding:0;align-items:stretch;gap:0}',
+        '.mc-root-ide>*{max-width:none}',
+
+        // 外壳：纵向 = 顶部栏 / 中间主体 / 底部传输条
+        // --mc-right-w 是「右上角容量条」和「搜索框」共用的宽度：
+        // 用同一个变量，两者永远同宽，右边缘也永远对齐；窗口变窄时一起缩，
+        // 这样按钮 + 容量条才能塞进一行。
+        // 🔴 flex:1 1 0 + min-height:0 是必须的：作为 .mc-root-ide（flex column）的子项，
+        // 只写 height:100% 会被 flex 算法忽略，结果被内容撑开十倍、列表永远不滚。
+        '.mc-explorer{position:relative;flex:1 1 0;display:flex;flex-direction:column;height:100%;min-height:0;width:100%;box-sizing:border-box;overflow:hidden;--mc-right-w:240px}',
+        '@media (max-width:1180px){.mc-explorer{--mc-right-w:190px}}',
+        '@media (max-width:980px){.mc-explorer{--mc-right-w:150px}}',
+        '.mc-root-ide .mc-explorer{max-width:none}',
+
+        // ---- 顶部工具条 ----
+        // 注意：这里**不要** border-bottom —— 底部那条线由容量条自己画。
+        '.mc-exTop{flex:none;display:flex;flex-direction:column;gap:0}',
+
+        // ---- 容量条：顶部栏底部那条贯通的粗进度线（替代原来的浅横线）----
+        // 文字压在条里居中，白字 + 深色描边：
+        //   · 已用段是品牌色（较深），白字清楚；
+        //   · 未用段是浅灰底，靠描边把白字托出来。
+        // 所以亮色 / 暗色主题下都能读，不会「白字压在浅色上消失」。
+        '.mc-exQuotaLine{position:relative;flex:none;height:15px;overflow:hidden;background:' + LAYER_2 + '}',
+        '.mc-exQuotaLineFill{position:absolute;left:0;top:0;bottom:0;background:var(--dsw-alias-brand-primary,#4f8cff);transition:width .35s ease}',
+        '.mc-exQuotaLineText{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:10px;line-height:1;font-weight:600;letter-spacing:.2px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.72),0 0 3px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;font-variant-numeric:tabular-nums}',
+        // 第一行：账号 / 按钮 / 容量条 三者同一水平线（align-items:center = 同高对齐）。
+        // 塞得下的关键：左边账号区允许收缩（flex:1 1 0 + min-width:0），
+        // 右边按钮组和容量条都是 flex:none —— 空间不够时压账号区，绝不折行。
+        '.mc-exTopRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px clamp(10px,1.6vw,18px);flex-wrap:nowrap;min-width:0}',
+        // 账号区：纵向三行（手机号 / 有效期 / 下载目录），保持原来的高度
+        '.mc-exTopLeft{display:flex;flex-direction:column;gap:3px;flex:1 1 0;min-width:0;overflow:hidden}',
+        // 有效期：一行小字
+        '.mc-exExpiry{display:flex;align-items:baseline;gap:4px;min-width:0;font-size:11px;line-height:16px;color:' + GREY_2 + ';font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}',
+        // 右上：按钮 + 容量条横向一排，不换行、不收缩
+        '.mc-exTopRight{display:flex;align-items:center;gap:6px;flex:0 0 auto;flex-wrap:nowrap;min-width:0;align-self:flex-start}',
+        '.mc-exTopRight .mc-btn{flex:none;white-space:nowrap}',
+        // 真的挤不下时才折行（很窄的窗口）
+        '@media (max-width:720px){.mc-exTopRow{flex-wrap:wrap}.mc-exTopRight{width:100%;justify-content:flex-start}}',
+        // 容量条：和搜索框同宽（240px），不再居中、不再占满
+
+        // 账号行：名字 + 铅笔 + 有效期
+        '.mc-exAcct{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;line-height:19px;font-weight:600}',
+        '.mc-exAcctName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+        '.mc-exAcctMasked{font-size:11px;line-height:15px;font-weight:400;color:' + GREY_2 + '}',
+        '.mc-exAcctEdit{flex:none;appearance:none;border:0;background:transparent;color:' + GREY_2 + ';font-size:11px;line-height:1;padding:2px 3px;border-radius:4px;cursor:pointer}',
+        '.mc-exAcctEdit:hover{background:' + LAYER_2 + ';color:' + GREY_1 + '}',
+        '.mc-exExpiryWarn{color:' + DANGER + '}',
+        // 下载目录小按钮：带框、可点。
+        // ⚠️ 必须限宽：路径很长（C:\Users\xxx\Downloads\dsh-mcloud），
+        // 不限的话这个框会把左上角撑得很长，还挤压右边的按钮。
+        // self-start 让它按内容收缩，max-width 兜住上限，超出部分用省略号。
+        '.mc-exChip{appearance:none;font:inherit;display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;border:0.5px solid ' + LINE + ';border-radius:6px;background:' + LAYER_1 + ';color:' + GREY_2 + ';font-size:11px;line-height:16px;padding:3px 8px;cursor:pointer;max-width:min(100%,230px);min-width:0;align-self:flex-start;transition:background-color .14s ease,color .14s ease,border-color .14s ease}',
+        '.mc-exChip:hover{background:' + LAYER_2 + ';color:' + GREY_1 + ';border-color:' + GREY_2 + '}',
+        '.mc-exChipIcon{flex:none;font-size:11px;line-height:1;opacity:.9}',
+        '.mc-exChipLabel{flex:none;font-weight:600}',
+        '.mc-exChipValue{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left;font-variant-numeric:tabular-nums}',
+
+        // 容量条（顶部居中）
+
+        // 第二行：工具条（返回 / 路径 / 搜索 / 新建）
+        // 第二行工具条：不换行（换行会把搜索框挤到第三行）
+        '.mc-exTools{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;padding:0 clamp(10px,1.6vw,18px) 8px}',
+        '.mc-exToolsGrow{flex:1 1 0;min-width:0;overflow:hidden}',
+
+        // 搜索框
+        // 搜索框：固定 240px —— 和上一行的容量条严格同宽，
+        // 这样两者的右边缘能对齐（一个在上、一个在下）。
+        '.mc-exSearch{position:relative;display:flex;align-items:center;gap:0;flex:0 0 var(--mc-right-w);width:var(--mc-right-w);min-width:0}',
+        '@media (max-width:720px){.mc-exSearch{flex:1 1 100%;width:auto}}',
+        '.mc-exSearchInput{box-sizing:border-box;width:100%;font:inherit;font-size:12px;line-height:17px;color:' + GREY_1 + ';background:transparent;border:0.5px solid ' + LINE + ';border-radius:7px;padding:4px 26px 4px 8px}',
+        '.mc-exSearchInput::placeholder{color:' + GREY_2 + '}',
+        '.mc-exSearchClear{position:absolute;right:2px;top:50%;transform:translateY(-50%);appearance:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:0;border-radius:5px;background:transparent;color:' + GREY_2 + ';font-size:13px;line-height:1;cursor:pointer}',
+        '.mc-exSearchClear:hover{background:' + LAYER_2 + ';color:' + GREY_1 + '}',
+
+        // ---- 中部主体：左树 + 右列表 ----
+        '.mc-exBody{flex:1 1 0;display:flex;min-height:0;overflow:hidden}',
+        // 左树
+        // 左树：宽度由 CSS 自适应，拖过之后由 inline style 固定
+        '.mc-exTree{flex:none;display:flex;flex-direction:column;min-height:0;width:clamp(150px,19vw,240px);border-right:0.5px solid ' + LINE + '}',
+        // 拖动中的分隔条：6px 热区 + 中间 2px 竖线
+        // 热区给到 14px：6px 太窄，鼠标很难精确落在上面（用户反馈要拖到边上去才生效）。
+        // 视觉上仍然是中间那条 1px 的线，只是可抓取范围宽了。
+        '.mc-exSplitter{flex:none;position:relative;width:14px;margin-left:-7px;margin-right:-7px;cursor:col-resize;z-index:6;display:flex;align-items:center;justify-content:center;touch-action:none}',
+        '.mc-exSplitterBar{width:1px;height:100%;background:' + LINE + ';opacity:0;border-radius:1px;transition:opacity .12s ease,background-color .12s ease,width .12s ease}',
+        // 悬停时才显形，平时不打扰
+        '.mc-exSplitter:hover .mc-exSplitterBar{opacity:1;width:2px;background:' + GREY_2 + '}',
+        '.mc-exSplitterActive .mc-exSplitterBar{opacity:1;width:2px;background:' + GREY_1 + '}',
+        // 拖动时禁掉整页选中（否则会拖出一片蓝色选区）
+        '.mc-exResizing,.mc-exResizing *{user-select:none !important;cursor:col-resize !important}',
+        // 窄屏时收起左树（靠 localStorage 记住用户选择）
+        '.mc-exTreeHidden{display:none}',
+        '.mc-exTreeHead{flex:none;display:flex;align-items:center;justify-content:space-between;gap:6px;height:29px;box-sizing:border-box;padding:0 10px;font-size:11px;line-height:16px;color:' + GREY_2 + ';border-bottom:0.5px solid ' + LINE + '}',
+        // overscroll-behavior:contain —— 滚到底别把滚动传给外层对话页
+        '.mc-exTreeScroll{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:4px 4px 10px}',
+        '.mc-exTreeNode{display:flex;align-items:center;gap:3px;min-width:0;border-radius:6px}',
+        '.mc-exTreeNode:hover{background:' + LAYER_1 + '}',
+        '.mc-exTreeNodeActive{background:' + LAYER_2 + '}',
+        // 箭头格子：宽度恒定 14px，任何状态都不变，所以行不会跳
+        '.mc-exTreeToggle{flex:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;width:14px;min-width:14px;height:20px;padding:0;border:0;background:transparent;color:' + GREY_2 + ';cursor:pointer;border-radius:4px}',
+        '.mc-exTreeToggle:hover:not(:disabled){color:' + GREY_1 + ';background:' + LAYER_2 + '}',
+        '.mc-exTreeToggle:disabled{cursor:default;opacity:.5}',
+        '.mc-exCaretSlot{display:inline-flex;align-items:center;justify-content:center;width:10px;height:10px;flex:none}',
+        // SVG 折角：收起指向右，展开转 90°，带过渡。
+        // 颜色比普通文字淡一档，但悬停整行会变亮 —— 平时不抢戏，需要时看得见。
+        '.mc-exCaret{display:block;color:' + GREY_2 + ';opacity:1;transition:transform .16s cubic-bezier(.4,0,.2,1),color .12s ease}',
+        '.mc-exCaretOpen{transform:rotate(90deg)}',
+        '.mc-exTreeNode:hover .mc-exCaret,.mc-exTreeToggle:hover .mc-exCaret{color:' + GREY_1 + '}',
+        // 加载中的小转圈（和箭头同尺寸，不撑开布局）
+        '.mc-exTreeSpinner{display:block;width:9px;height:9px;box-sizing:border-box;border:1.2px solid currentColor;border-top-color:transparent;border-radius:50%;opacity:.6;animation:mc-exSpin .7s linear infinite}',
+        '@keyframes mc-exSpin{to{transform:rotate(360deg)}}',
+        // 子节点容器：展开时淡入，避免"啪"一下出现
+        '.mc-exTreeKids{animation:mc-exTreeIn .14s ease-out}',
+        '@keyframes mc-exTreeIn{from{opacity:0}to{opacity:1}}',
+        '.mc-exTreeLabel{flex:1 1 auto;min-width:0;appearance:none;display:flex;align-items:center;gap:5px;border:0;background:transparent;font:inherit;font-size:12px;line-height:18px;color:' + GREY_1 + ';text-align:left;padding:3px 4px;border-radius:5px;cursor:pointer;overflow:hidden}',
+        '.mc-exTreeIcon{flex:none;font-size:12px;line-height:1}',
+        '.mc-exTreeName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+        '.mc-exTreeLoading{flex:none;font-size:10px;color:' + GREY_2 + '}',
+        // 树里的「继续加载」：比正常节点淡，明确是占位而不是真目录
+
+        // 右列表
+        '.mc-exMain{flex:1 1 0;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}',
+        // 列头（像资源管理器那样）
+        '.mc-exCols{position:relative;flex:none;display:grid;grid-template-columns:minmax(0,1fr) var(--mc-col-size,84px) var(--mc-col-time,132px);align-items:stretch;gap:0;height:29px;padding:0;box-sizing:border-box;border-bottom:0.5px solid ' + LINE + ';font-size:11px;line-height:16px;color:' + GREY_2 + ';user-select:none}',
+        // ⚠️ 用「面板自身宽度」而不是视口宽度判断：对话区可能很窄，但整个浏览器窗口很宽，
+        // 媒体查询（基于视口）在这种布局下会失效，三列直接挤成一团。
+        // 这里由 JS 量 .mc-exMain 的宽度挂上 mc-narrow 类。
+        '.mc-exMain.mc-narrow .mc-exCols{grid-template-columns:minmax(0,1fr) var(--mc-col-size,72px)}',
+        '.mc-exMain.mc-narrow .mc-exColsTime{display:none}',
+        '.mc-exMain.mc-narrow .mc-exColHandleTime{display:none}',
+        '.mc-exColsName{display:flex;align-items:center;min-width:0;padding:0 8px 0 clamp(8px,1.2vw,14px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+        // 「大小」左右两条竖线（用户要求），同时也是拖动把手的视觉落点
+        '.mc-exColsSize{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;border-left:0.5px solid ' + LINE + ';border-right:0.5px solid ' + LINE + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+        '.mc-exColsTime{display:flex;align-items:center;justify-content:flex-end;padding:0 clamp(8px,1.2vw,14px) 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+        // 滚动列表：撑满剩余高度，自己滚
+        '.mc-exScroll{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 0 6px}',
+        '.mc-exRows{display:flex;flex-direction:column}',
+        // 行：网格列对齐列头。
+        // 不要边框 —— 资源管理器里行是「无框」的，靠整行背景色区分 hover / 选中，
+        // 加边框会让列表看着像一堆小方块，又碎又脏。
+        // 列宽拖动把手：热区 12px，视觉上是一条悬停才亮起来的竖线
+        '.mc-exColHandle{position:absolute;top:0;bottom:0;width:12px;margin-left:-6px;cursor:col-resize;z-index:4;display:flex;align-items:center;justify-content:center;touch-action:none}',
+        '.mc-exColHandleBar{width:1px;height:55%;background:transparent;border-radius:1px;transition:background-color .12s ease,height .12s ease,width .12s ease}',
+        '.mc-exColHandle:hover .mc-exColHandleBar{width:2px;height:100%;background:' + GREY_2 + '}',
+        '.mc-exColHandleActive .mc-exColHandleBar{width:2px;height:100%;background:' + GREY_1 + '}',
+        // 拖动时禁掉列头的文字选中，避免拖出一片蓝
+        '.mc-exColsResizing{user-select:none;cursor:col-resize}',
+        '.mc-exRow{display:grid;grid-template-columns:minmax(0,1fr) var(--mc-col-size,84px) var(--mc-col-time,132px);align-items:stretch;gap:0;min-height:29px;padding:0;box-sizing:border-box;font-size:13px;line-height:19px;cursor:default;position:relative}',
+        '.mc-exMain.mc-narrow .mc-exRow{grid-template-columns:minmax(0,1fr) var(--mc-col-size,72px)}',
+        '.mc-exMain.mc-narrow .mc-exRowTime{display:none}',
+        '.mc-exRow:hover{background:' + LAYER_1 + '}',
+        // 选中：只把背景加深一档，左侧留一条短竖线做焦点提示（资源管理器的做法）
+        '.mc-exRowSelected{background:' + LAYER_2 + '}',
+        '.mc-exRowSelected::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:2px;height:14px;border-radius:1px;background:' + GREY_2 + '}',
+'.mc-exRowName{display:flex;align-items:center;gap:7px;min-width:0;padding:0 8px 0 calc(clamp(8px,1.2vw,14px) + 3px);overflow:hidden}',
+        '.mc-exRowIcon{flex:none;font-size:13px;line-height:1}',
+        '.mc-exRowText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+        '.mc-exRowTextBtn{appearance:none;border:0;background:transparent;font:inherit;color:inherit;text-align:left;padding:0;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+        // 左右竖线要贯穿整列：列头有，每一行也必须有，否则只有表头那一段有线
+        '.mc-exRowSize{display:flex;align-items:center;justify-content:flex-end;font-size:12px;color:' + GREY_2 + ';font-variant-numeric:tabular-nums;padding:0 8px;border-left:0.5px solid ' + LINE + ';border-right:0.5px solid ' + LINE + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+        '.mc-exRowTime{display:flex;align-items:center;justify-content:flex-end;font-size:12px;color:' + GREY_2 + ';font-variant-numeric:tabular-nums;padding:0 clamp(8px,1.2vw,14px) 0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+        // 提示条 / 空态 / 加载
+        '.mc-exBanner{flex:none;margin:6px clamp(8px,1.2vw,14px) 0;border-radius:8px;padding:6px 10px;font-size:12px;line-height:17px;background:' + LAYER_1 + ';word-break:break-word}',
+        '.mc-exBannerErr{color:' + DANGER + '}',
+        '.mc-exEmpty{padding:22px 12px;font-size:12px;line-height:18px;color:' + GREY_2 + ';text-align:center}',
+        '.mc-exSearchHint{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px clamp(8px,1.2vw,14px);font-size:11px;line-height:16px;color:' + GREY_2 + '}',
+        '.mc-exSearchHit{font-weight:600;color:' + GREY_1 + '}',
+        // 触底自动加载：底部只给一行极小的小字，不用按钮
+        '.mc-exFeedFoot{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0 4px;font-size:11px;line-height:16px;color:' + GREY_2 + ';opacity:.75}',
+        '.mc-exFeedDot{width:4px;height:4px;border-radius:50%;background:currentColor;animation:mc-exFeedPulse 1.1s ease-in-out infinite}',
+        '@keyframes mc-exFeedPulse{0%,100%{opacity:.25}50%{opacity:1}}',
+
+        // ---- 底部传输条 ----
+        // 平时完全隐形（就是一条和背景同色的细条）；
+        // 有任务时进度填充出现颜色，跑满后停留 5 秒再淡出。
+        // 高度会随「有没有任务」在 3px / 5px 之间切换：只改 CSS 变量不影响布局链条。
+        // 传输条浮层：绝对定位钉在面板底部，任何视图/滚动位置都看得见。
+        // 空闲时 pointer-events:none，不挡下面的点击。
+        '.mc-exTransDock{position:absolute;left:0;right:0;bottom:0;z-index:20;pointer-events:none}',
+        '.mc-exTransDockActive{pointer-events:auto}',
+        // 空闲时也留一条极淡的底线 —— 不然用户根本不知道进度条在哪儿
+        '.mc-exTrans{flex:none;position:relative;height:6px;background:' + LINE + ';transition:height .18s ease,background-color .25s ease}',
+        '.mc-exTransActive{height:8px;background:transparent}',
+        '.mc-exTransTrack{position:absolute;inset:0;overflow:hidden;background:transparent}',
+        // 褪色要慢一点：1.5s 让颜色缓缓溶进背景，而不是「唰」一下没了
+        '.mc-exTransFill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:0 3px 3px 0;background:transparent;transition:width .28s ease,background-color .3s ease,opacity 1.5s ease}',
+        '.mc-exTransDraw{background:var(--dsw-alias-brand-primary,#4f8cff)}',
+        '.mc-exTransDone{background:var(--dsw-alias-state-success-primary,#2ea043)}',
+        '.mc-exTransErr{background:' + DANGER + '}',
+        // 不确定进度（还不知道总量）：一小段来回跑，别让用户以为卡住了
+        '.mc-exTransIndet{animation:mc-exTransIndet 1.2s ease-in-out infinite}',
+        '@keyframes mc-exTransIndet{0%{width:8%;margin-left:0}50%{width:26%;margin-left:37%}100%{width:8%;margin-left:92%}}',
+        '.mc-exTransBar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px clamp(10px,1.6vw,18px);border-top:0.5px solid ' + LINE + ';background:var(--dsw-alias-bg-layer-3,#ffffff);box-shadow:0 -4px 14px rgba(0,0,0,.10);font-size:11px;line-height:16px;color:' + GREY_2 + ';font-variant-numeric:tabular-nums;transition:opacity 1.5s ease}',
+        '.mc-exTransBarFade{opacity:0}',
+        '.mc-exTransSummary{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+        '.mc-exTransActions{flex:none;display:flex;align-items:center;gap:6px}',
+
+        // ---- 弹层（下载目录 / 选择目录）----
+        '.mc-exModalHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}',
+        '.mc-exModalTitle{font-size:14px;font-weight:600;line-height:21px;margin:0}',
+        '.mc-exModalRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}',
+        '.mc-exModalRow .mc-input{flex:1 1 200px;min-width:0}',
+        '.mc-exModalNote{font-size:11px;line-height:17px;color:' + GREY_2 + ';margin:0;word-break:break-word}',
+
+        // ---- 传输记录 ----
+        // 按钮上只有文字（不再放时钟图标），所以**任何宽度都不能把文字藏掉**，
+        // 否则窄屏会变成一个空白按钮。窄屏时改成更短的词。
+        '.mc-exHistoryBtn{display:inline-flex;align-items:center;gap:5px;position:relative}',
+        '.mc-exHistoryLabel{display:inline}',
+        '.mc-exHistoryLabelShort{display:none}',
+        '@media (max-width:960px){.mc-exHistoryLabel{display:none}.mc-exHistoryLabelShort{display:inline}}',
+        // 有任务在跑时按钮上一个小圆点
+        '.mc-exHistoryDot{width:5px;height:5px;border-radius:50%;background:var(--dsw-alias-brand-primary,#4f8cff);animation:mc-exFeedPulse 1.1s ease-in-out infinite}',
+        // 弹层自身不滚，让里面的列表滚 —— 否则内外两层都能滚，滚动手感很怪
+        '.mc-exHistPanel{width:min(560px,100%);overflow:hidden}',
+        // 列表区自己滚：flex:1 + min-height:0 才能在高面板里正确收缩
+        '.mc-exHistBody{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;min-height:0;max-height:min(62vh,470px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px}',
+        // 细一点的滚动条，别抢视觉
+        '.mc-exHistBody::-webkit-scrollbar{width:8px}',
+        '.mc-exHistBody::-webkit-scrollbar-thumb{background:' + LAYER_2 + ';border-radius:4px}',
+        '.mc-exHistBody::-webkit-scrollbar-thumb:hover{background:' + GREY_2 + '}',
+        '.mc-exHistBody::-webkit-scrollbar-track{background:transparent}',
+        '.mc-exHistEmpty{padding:26px 12px;font-size:12px;line-height:18px;color:' + GREY_2 + ';text-align:center}',
+        '.mc-exHistSection{display:flex;flex-direction:column;gap:2px}',
+        '.mc-exHistSectionHead{font-size:11px;line-height:16px;color:' + GREY_2 + ';font-weight:600;padding:0 0 4px}',
+        '.mc-exHistItem{display:flex;flex-direction:column;gap:3px;padding:7px 8px;border-radius:7px}',
+        '.mc-exHistItem:hover{background:' + LAYER_1 + '}',
+        '.mc-exHistRow{display:flex;align-items:center;gap:7px;min-width:0}',
+        // 图标：上传绿、下载蓝，一眼分清方向
+        '.mc-exHistIcon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:12px;height:14px;font-size:11px;line-height:1;color:' + GREY_2 + '}',
+        '.mc-exHistIconUp{color:var(--dsw-alias-state-success-primary,#2ea043)}',
+        '.mc-exHistIconDown{color:var(--dsw-alias-brand-primary,#4f8cff)}',
+        '.mc-exHistName{flex:1 1 auto;min-width:0;font-size:12px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+        '.mc-exHistState{flex:none;font-size:11px;line-height:16px;color:' + GREY_2 + '}',
+        '.mc-exHistStateOk{color:var(--dsw-alias-state-success-primary,#2ea043)}',
+        '.mc-exHistStateErr{color:' + DANGER + '}',
+        '.mc-exHistMeta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;line-height:15px;color:' + GREY_2 + ';font-variant-numeric:tabular-nums}',
+        '.mc-exHistBar{position:relative;height:3px;border-radius:999px;overflow:hidden;background:' + LAYER_2 + '}',
+        '.mc-exHistBarFill{height:100%;border-radius:999px;background:var(--dsw-alias-brand-primary,#4f8cff);transition:width .25s ease}',
+        '.mc-exHistErr{font-size:11px;line-height:15px;color:' + DANGER + ';overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+
+        // 极窄屏：左树会让列表没地方放，直接收起来（用户可用顶栏 ◀ 手动开）
+        '@media (max-width:520px){.mc-exTree{width:132px}}',
+        // 高 DPI / 小高度：顶部栏压缩一点，给列表让高度
+        '@media (max-height:520px){.mc-exTopRow{padding:5px clamp(8px,1.2vw,12px)}.mc-exTools{padding-bottom:5px}.mc-exTransBar{padding:2px clamp(8px,1.2vw,12px)}}',
       ].join('')
       var CSS_ID = 'dsh-mcloud/panel.css'
       function ensureStyle() {
@@ -670,7 +1033,6 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
         complete: 'phaseComplete',
       }
 
-      var JOB_ICONS = { upload: '⬆', download: '⬇', 'download-folder': '🗂', 'upload-folder': '🗂' }
 
       // ---------------------------------------------------------------- HTTP
       /** 非 2xx 与 { ok:false, error } 都转成 Error 抛出去；响应体不是 JSON 也当失败。 */
@@ -695,12 +1057,29 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
        * 统一出口：GET 不带自定义头，POST 一律 content-type + x-dsh-mcloud。
        * 非 2xx 与 { ok:false, error } 都转成 Error 抛出去。
        */
+      /**
+       * 客户端请求超时（比宿主的 25s 稍长，让宿主先报错）。
+       *
+       * 没有超时的话，一旦某个请求挂住（浏览器层面卡死、代理断了），
+       * `listLoading` 会永久停在 true —— 而「加载更多」的守卫是
+       * `if (listLoading) return`，于是列表从此再也不会续加载，
+       * 用户滚到底就彻底卡住。大目录最容易撞上这个。
+       */
+      var CLIENT_TIMEOUT_MS = 30 * 1000
+
       function requestJson(method, path, body) {
         var init = { method: method, credentials: 'same-origin', cache: 'no-store' }
         if (method === 'POST') {
           init.headers = { 'content-type': 'application/json', 'x-dsh-mcloud': '1' }
           init.body = JSON.stringify(body || {})
         }
+        try {
+          if (typeof AbortSignal !== 'undefined' && typeof AbortSignal.timeout === 'function') {
+            init.signal = AbortSignal.timeout(CLIENT_TIMEOUT_MS)
+          }
+        } catch (failure) {
+          /* 老浏览器没有 AbortSignal.timeout，退化成不超时 */
+        }
         return fetch(BASE + path, init).then(readJsonResponse)
       }
 
@@ -736,13 +1115,31 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
         clearAuth: function () {
           return requestJson('POST', '/auth/clear', {})
         },
-        list: function (parentFileId, cursor) {
+        list: function (parentFileId, cursor, pageSize) {
+          var query =
+            '/list?parentFileId=' + encodeURIComponent(parentFileId || '/') +
+            '&cursor=' + encodeURIComponent(cursor || '')
+          // 探测「这个目录有没有东西」时用 pageSize=1，比默认 10 更轻。
+          if (pageSize) query += '&pageSize=' + encodeURIComponent(String(pageSize))
+          return requestJson('GET', query)
+        },
+        /** 按文件名搜索：Host 端会从 parentFileId 往下走若干层。 */
+        search: function (options) {
+          var opts = options || {}
           return requestJson(
             'GET',
-            '/list?parentFileId=' + encodeURIComponent(parentFileId || '/') +
-              '&cursor=' + encodeURIComponent(cursor || '')
+            '/search?keyword=' + encodeURIComponent(opts.keyword || '') +
+              '&parentFileId=' + encodeURIComponent(opts.parentFileId || '/')
           )
         },
+        /** 弹宿主机的系统「选择文件夹」对话框（选下载目录用）。 */
+        pickDir: function () {
+          return requestJson('POST', '/pick-dir', {})
+        },
+        /** 清空已结束的传输记录（只删记录，不删文件）。 */
+        clearTransfers: function () {
+          return requestJson('POST', '/transfers/clear', {})
+        },
         mkdir: function (parentFileId, name) {
           return requestJson('POST', '/mkdir', { parentFileId: parentFileId, name: name })
         },
@@ -1106,6 +1503,343 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
           var uploadTarget = uploadTargetState[0]
           var setUploadTarget = uploadTargetState[1]
 
+          // ================================================================
+          // 0.3.0 资源管理器：目录树 / 搜索 / 下载目录弹层 / 传输条动画
+          // ================================================================
+          /**
+           * 左侧目录树。
+           *
+           * 结构：{ id, name, open, loading, loaded, children: [] }
+           * 只有「展开过」的节点才去请求子目录 —— 网盘目录可能很多，
+           * 一上来就把整棵树拉下来会让打开面板慢好几秒。
+           */
+          var treeRootState = React.useState({
+            id: '/',
+            name: '/',
+            open: true,
+            loading: false,
+            loaded: false,
+            children: [],
+          })
+          var treeRoot = treeRootState[0]
+          var setTreeRoot = treeRootState[1]
+
+          /** 左树是否显示（窄屏可手动收起）。 */
+          var treeShownState = React.useState(true)
+          var treeShown = treeShownState[0]
+          var setTreeShown = treeShownState[1]
+
+          /** 当前列表所对应的目录 id（右树的「焦点」）。 */
+          var treeFocusIdState = React.useState('/')
+          var treeFocusId = treeFocusIdState[0]
+          var setTreeFocusId = treeFocusIdState[1]
+
+          // 搜索
+          var searchOpenState = React.useState(false)
+          var searchOpen = searchOpenState[0]
+          var setSearchOpen = searchOpenState[1]
+          var searchKeywordState = React.useState('')
+          var searchKeyword = searchKeywordState[0]
+          var setSearchKeyword = searchKeywordState[1]
+          var searchBusyState = React.useState(false)
+          var searchBusy = searchBusyState[0]
+          var setSearchBusy = searchBusyState[1]
+          var searchItemsState = React.useState([])
+          var searchItems = searchItemsState[0]
+          var setSearchItems = searchItemsState[1]
+          var searchNoteState = React.useState('')
+          var searchNote = searchNoteState[0]
+          var setSearchNote = searchNoteState[1]
+          var searchErrorState = React.useState('')
+          var searchError = searchErrorState[0]
+          var setSearchError = searchErrorState[1]
+          var searchSeqRef = React.useRef(0)
+
+          // 下载目录弹层
+          var dirModalState = React.useState(false)
+          var dirModal = dirModalState[0]
+          var setDirModal = dirModalState[1]
+          var dirDraftState = React.useState('')
+          var dirDraft = dirDraftState[0]
+          var setDirDraft = dirDraftState[1]
+          var dirPickBusyState = React.useState(false)
+          var dirPickBusy = dirPickBusyState[0]
+          var setDirPickBusy = dirPickBusyState[1]
+          var dirErrorState = React.useState('')
+          var dirError = dirErrorState[0]
+          var setDirError = dirErrorState[1]
+
+          /** 底部传输条：'idle' | 'draw' | 'done' | 'error'。 */
+          var transPhaseState = React.useState('idle')
+          var transPhase = transPhaseState[0]
+          var setTransPhase = transPhaseState[1]
+          /** 刚刚完成时停留 5 秒再渐变回透明。 */
+          var transFadeRef = React.useRef(null)
+          /** 上一次的整体进度，用来推动画。 */
+          var transPercentState = React.useState(0)
+          var transPercent = transPercentState[0]
+          var setTransPercent = transPercentState[1]
+
+          /** 当前选中的行 id（选中态只影响视觉）。 */
+          var selectedIdState = React.useState('')
+          var selectedId = selectedIdState[0]
+          var setSelectedId = selectedIdState[1]
+
+          /**
+           * 列表滚动容器。
+           *
+           * 不用「加载更多」按钮：滚到底部就把下一批接上，
+           * 这才是资源管理器的样子。用 ref 是为了在滚动回调里读到最新值。
+           */
+          var listScrollRef = React.useRef(null)
+          /** 防重入：一次只允许一个「加载下一批」在飞。 */
+          var loadMoreBusyRef = React.useRef(false)
+          /** 滚到底部附近多少像素时开始预加载。 */
+          var LOAD_MORE_THRESHOLD = 240
+
+          /** 历史传输记录弹层。 */
+          var historyOpenState = React.useState(false)
+          var historyOpen = historyOpenState[0]
+          var setHistoryOpen = historyOpenState[1]
+          /** 清空记录进行中（防连点）。 */
+          var historyBusyState = React.useState(false)
+          var historyBusy = historyBusyState[0]
+          var setHistoryBusy = historyBusyState[1]
+
+          /**
+           * 左树宽度（px）。
+           *
+           * null = 还没拖过，用 CSS 的自适应宽度（clamp）。
+           * 用户拖动过之后就固定成他选的像素值，并记到 localStorage，
+           * 下次打开还是这个宽度。
+           */
+          var treeWidthState = React.useState(null)
+          var treeWidth = treeWidthState[0]
+          var setTreeWidth = treeWidthState[1]
+          /** 拖动中（用来加 cursor 和防止选中文字）。 */
+          var resizingState = React.useState(false)
+          var resizing = resizingState[0]
+          var setResizing = resizingState[1]
+
+          /**
+           * 资源管理器根节点的实测高度（px）。
+           *
+           * 不用 CSS 的 height:100% —— 它在父容器没有确定高度时会静默失效，
+           * 导致整个面板被内容撑开、列表滚不动、进度条被顶到最底下。
+           * 这里直接量父容器的像素高度写死，最可靠。
+           */
+          var ideRootRef = React.useRef(null)
+          var ideHeightState = React.useState(0)
+          var ideHeight = ideHeightState[0]
+          var setIdeHeight = ideHeightState[1]
+
+          /**
+           * 右侧列表的列宽（px）。
+           *
+           * 名称列是弹性的（占剩下的空间），大小 / 时间两列固定。
+           * 列头里「大小」左右各有竖线，都能拖：拖左线改大小列宽，拖右线改时间列宽。
+           * 下限见 COL_MIN_*，上限保证左边（名称列）至少还剩 NAME_MIN 宽 ——
+           * 否则能把某一列拖到只剩一条线。
+           */
+          var COL_SIZE_DEFAULT = 84
+          var COL_TIME_DEFAULT = 132
+          var COL_SIZE_MIN = 64
+          var COL_TIME_MIN = 88
+          var COL_NAME_MIN = 120
+          var colSizeState = React.useState(COL_SIZE_DEFAULT)
+          var colSize = colSizeState[0]
+          var setColSize = colSizeState[1]
+          var colTimeState = React.useState(COL_TIME_DEFAULT)
+          var colTime = colTimeState[0]
+          var setColTime = colTimeState[1]
+          /** 列头容器，用来量总宽算拖动边界。 */
+          var colsRef = React.useRef(null)
+          /**
+           * 右侧主栏是否太窄（决定要不要把「修改时间」列藏掉）。
+           *
+           * 必须按**面板自身宽度**判断，不能用 @media —— 对话区可能只占窗口一小半，
+           * 窗口很宽的时候媒体查询不会触发，三列就会挤在一起。
+           */
+          var mainNarrowState = React.useState(false)
+          var mainNarrow = mainNarrowState[0]
+          var setMainNarrow = mainNarrowState[1]
+          var mainRef = React.useRef(null)
+          /**
+           * 列表滚动条的宽度（px）。
+           *
+           * 列头在滚动容器**外面**，行在**里面** —— 列表一旦出现滚动条，
+           * 行的可用宽度就比列头少十几像素，名称列又是弹性的，于是两个固定列
+           * 整体左移，竖线和表头错位。这里量出实际滚动条宽度补给列头。
+           */
+          var scrollbarWState = React.useState(0)
+          var scrollbarW = scrollbarWState[0]
+          var setScrollbarW = scrollbarWState[1]
+          var colResizingState = React.useState('')
+          var colResizing = colResizingState[0]
+          var setColResizing = colResizingState[1]
+
+          /**
+           * 拖列头的竖线调整列宽。
+           *
+           * which: 'size' = 「大小」左侧那条线（拖它改大小列宽）
+           *        'time' = 「大小」右侧那条线（拖它改时间列宽）
+           *
+           * 边界：每列都有自己的下限，并且永远给名称列留够 COL_NAME_MIN ——
+           * 这样怎么拖都不会出现「某一列被压成一条线」。
+           */
+          function beginColResize(which, event) {
+            if (event && typeof event.preventDefault === 'function') event.preventDefault()
+            if (event && typeof event.stopPropagation === 'function') event.stopPropagation()
+            var startX = event && event.clientX ? event.clientX : 0
+            var startSize = colSize
+            var startTime = colTime
+            var total = 0
+            var node = colsRef.current
+            if (node) {
+              total = node.clientWidth || 0
+            }
+            if (!total) total = 600
+            setColResizing(which)
+            if (typeof document !== 'undefined' && document.body) {
+              document.body.style.cursor = 'col-resize'
+              document.body.style.userSelect = 'none'
+            }
+
+            function onMove(moveEvent) {
+              if (moveEvent && typeof moveEvent.preventDefault === 'function') moveEvent.preventDefault()
+              var delta = (moveEvent && moveEvent.clientX ? moveEvent.clientX : startX) - startX
+              if (which === 'size') {
+                // 往右拖 → 大小列变窄
+                var next = startSize - delta
+                var maxSize = total - COL_NAME_MIN - startTime
+                if (maxSize < COL_SIZE_MIN) maxSize = COL_SIZE_MIN
+                next = Math.max(COL_SIZE_MIN, Math.min(maxSize, next))
+                setColSize(Math.round(next))
+              } else {
+                var nextTime = startTime - delta
+                var maxTime = total - COL_NAME_MIN - startSize
+                if (maxTime < COL_TIME_MIN) maxTime = COL_TIME_MIN
+                nextTime = Math.max(COL_TIME_MIN, Math.min(maxTime, nextTime))
+                setColTime(Math.round(nextTime))
+              }
+            }
+
+            function onUp() {
+              setColResizing('')
+              if (typeof document !== 'undefined' && document.body) {
+                document.body.style.cursor = ''
+                document.body.style.userSelect = ''
+              }
+              if (typeof document !== 'undefined') {
+                document.removeEventListener('mousemove', onMove, true)
+                document.removeEventListener('mouseup', onUp, true)
+              }
+              if (typeof window !== 'undefined') {
+                window.removeEventListener('mouseup', onUp, true)
+              }
+            }
+
+            if (typeof document !== 'undefined') {
+              document.addEventListener('mousemove', onMove, true)
+              document.addEventListener('mouseup', onUp, true)
+            }
+            if (typeof window !== 'undefined') {
+              window.addEventListener('mouseup', onUp, true)
+            }
+          }
+
+          /** 双击竖线：两列都回到默认宽度。 */
+          function resetColWidth() {
+            setColSize(COL_SIZE_DEFAULT)
+            setColTime(COL_TIME_DEFAULT)
+          }
+
+          /** 量主栏宽度，窄到放不下三列时收起「修改时间」列。 */
+          React.useEffect(function () {
+            if (!authorized) return
+            var node = mainRef.current
+            if (!node || typeof window === 'undefined') return
+
+            function measureWidth() {
+              var el = mainRef.current
+              if (!el) return
+              var w = el.clientWidth || 0
+              var narrow = w > 0 && w < 620
+              setMainNarrow(function (previous) {
+                return previous === narrow ? previous : narrow
+              })
+            }
+
+            measureWidth()
+            var observer = null
+            try {
+              if (typeof ResizeObserver === 'function') {
+                observer = new ResizeObserver(measureWidth)
+                observer.observe(node)
+              }
+            } catch (failure) {
+              observer = null
+            }
+            window.addEventListener('resize', measureWidth)
+            var timers = [80, 300, 900].map(function (delay) {
+              return setTimeout(measureWidth, delay)
+            })
+            return function () {
+              for (var i = 0; i < timers.length; i += 1) clearTimeout(timers[i])
+              window.removeEventListener('resize', measureWidth)
+              if (observer) {
+                try {
+                  observer.disconnect()
+                } catch (failure) {
+                  /* 已断开 */
+                }
+              }
+            }
+          }, [authorized])
+
+          /** 量滚动条宽度，补偿给列头。 */
+          React.useEffect(function () {
+            if (!authorized) return
+            if (typeof window === 'undefined') return
+
+            function measureScrollbar() {
+              var el = listScrollRef.current
+              if (!el) return
+              var w = (el.offsetWidth || 0) - (el.clientWidth || 0)
+              if (w < 0) w = 0
+              if (w > 40) w = 40
+              setScrollbarW(function (previous) {
+                return previous === w ? previous : w
+              })
+            }
+
+            measureScrollbar()
+            var observer = null
+            try {
+              if (typeof ResizeObserver === 'function' && scrollRef.current) {
+                observer = new ResizeObserver(measureScrollbar)
+                observer.observe(listScrollRef.current)
+              }
+            } catch (failure) {
+              observer = null
+            }
+            window.addEventListener('resize', measureScrollbar)
+            var timers = [80, 300, 900].map(function (delay) {
+              return setTimeout(measureScrollbar, delay)
+            })
+            return function () {
+              for (var i = 0; i < timers.length; i += 1) clearTimeout(timers[i])
+              window.removeEventListener('resize', measureScrollbar)
+              if (observer) {
+                try {
+                  observer.disconnect()
+                } catch (failure) {
+                  /* 已断开 */
+                }
+              }
+            }
+          }, [authorized, items, nextCursor])
+
           // 请求序号：快速切目录时把旧响应丢掉。
           var seqRef = React.useRef(0)
           var pollTimerRef = React.useRef(null)
@@ -1238,9 +1972,62 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
               })
           }
 
+          /**
+           * 滚到底部就接上下一批。
+           *
+           * 判断「到底」用的是「滚动位置 + 可视高度 >= 内容高度 - 阈值」，
+           * 留 240px 提前量，滚动手感更连续（不会先看到空白再补上）。
+           */
+          function maybeLoadMore() {
+            if (loadMoreBusyRef.current) return
+            if (!nextCursor) return
+            if (listLoading || busy) return
+            if (searchOpen && searchKeyword.trim() !== '') return
+            var el = listScrollRef.current
+            if (!el) return
+            var remaining = el.scrollHeight - el.scrollTop - el.clientHeight
+            if (remaining > LOAD_MORE_THRESHOLD) return
+            loadMoreBusyRef.current = true
+            var cursor = nextCursor
+            /** 兜底：万一 promise 链路没走完，40 秒后强制放行，别永久锁死。 */
+            var releaseTimer = setTimeout(function () {
+              loadMoreBusyRef.current = false
+            }, 40000)
+            fetchListing(cursor, true)
+              .catch(function () {
+                /* fetchListing 内部已经处理错误展示 */
+              })
+              .then(function () {
+                clearTimeout(releaseTimer)
+                loadMoreBusyRef.current = false
+              })
+          }
+
+          /**
+           * 内容不够一屏时自动接着拉。
+           *
+           * 场景：目录里只有 3 项，但还有下一批 —— 这时列表根本滚不动，
+           * 用户看不到也滚不到底部，就永远触发不了 maybeLoadMore。
+           * 所以每次列表变化后量一下：没填满就再要一批。
+           *
+           * 用 requestAnimationFrame 让浏览器先完成布局，量到的 scrollHeight 才是真的。
+           */
+          React.useEffect(function () {
+            if (!nextCursor || listLoading) return
+            var raf =
+              typeof requestAnimationFrame === 'function'
+                ? requestAnimationFrame
+                : function (fn) { return setTimeout(fn, 16) }
+            raf(function () {
+              var el = listScrollRef.current
+              if (!el) return
+              if (listLoading || !nextCursor) return
+              if (el.scrollHeight - el.clientHeight <= 4) maybeLoadMore()
+            })
+          }, [items, nextCursor, listLoading])
+
           function reload() {
-            // 手动刷新：先清缓存，再强制拉一次
-            clearListingCache()
+            // 手动刷新：先清缓存，再强制拉一次            clearListingCache()
             return fetchListing('', false)
           }
 
@@ -1479,6 +2266,9 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
               .then(function () {
                 setBusy(false)
                 loadStatus()
+                // 增删改之后，「哪个文件夹还有下一级」的结论也可能变了 ——
+                // 不清掉的话，删空的目录会一直挂着箭头。
+                invalidateTreeKnowledge()
                 return reload()
               })
               .catch(function (failure) {
@@ -1628,130 +2418,890 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
             setStack([])
           }
 
-          function goUp() {
-            setStack(stack.slice(0, stack.length - 1))
-          }
+          // ================================================================
+          // 0.3.0 目录树
+          // ================================================================
 
-          function createFolder() {
-            var name = folderName.trim()
-            if (!name) return
-            runMutation(function () {
-              return api.mkdir(parentId, name).then(function (doc) {
-                setFolderName('')
-                setFolderOpen(false)
-                return doc
-              })
-            })
-          }
+          /**
+           * 🔴 网盘接口**不返回「这个文件夹有几个子项」**（folder 的 size 恒为 null，
+           * 也没有 fileCount / childCount 之类字段，实测确认过）。
+           *
+           * 所以「有没有下级」只能问一次。这里做的是：
+           *   · 展开父节点后，并发探测它的每个子文件夹（pageSize=1，最轻）；
+           *   · 结果进内存缓存，同一次会话里不重复问；
+           *   · 探测到「有」才给箭头 —— 所以永远不会出现「先有箭头、点一下没了」。
+           */
+          /**
+           * 「这个文件夹有没有下级」的缓存。
+           *
+           * ⚠️ 必须有有效期：以前是永久缓存，结果用户把某个目录的子文件夹删光之后，
+           * 箭头还一直挂着（缓存里还是「有」），看着像坏了。
+           * 现在 45 秒过期，并且任何增删改都会整体作废（invalidateTreeKnowledge）。
+           */
+          var kidProbeCache = Object.create(null)
+          /** 正在探测中的 folderId，避免同一目录被并发探测两次。 */
+          var kidProbeInflight = Object.create(null)
+          var KID_PROBE_TTL_MS = 45 * 1000
 
-          function renameEntry(item) {
-            if (typeof window === 'undefined' || typeof window.prompt !== 'function') return
-            var next = window.prompt(t('renamePrompt'), item.name)
-            if (next === null) return
-            next = String(next).trim()
-            if (!next || next === item.name) return
-            runMutation(function () {
-              return api.rename(item.id, next)
+          /**
+           * 把「树的结构知识」全部作废：探测缓存、展开状态、已加载的子节点。
+           * 增删改、手动刷新之后都该调一次 —— 目录内容变了，树上的箭头和层级就得重算。
+           *
+           * 保留根节点展开（用户正看着它），只是让它重新拉一次子目录。
+           */
+          function invalidateTreeKnowledge() {
+            kidProbeCache = Object.create(null)
+            kidProbeInflight = Object.create(null)
+            setTreeRoot({
+              id: '/',
+              name: '/',
+              open: true,
+              loading: false,
+              loaded: false,
+              children: [],
             })
           }
 
-          // ------------------------------------------------------ 复制路径
-          /** 当前所在目录的完整路径，例如 "/windows/实验"。 */
-          function currentDirPath() {
-            return '/' + stack.map(function (s) { return s.name }).join('/')
-          }
-
           /**
-           * 把一个项的完整路径拼出来（基于当前目录栈 + 名字）。
-           * 注意：这是**展示用的路径**，不是网盘的 fileId；移动云盘按 id 定位，
-           * 所以这个路径只适合给人看 / 粘到笔记里。
+           * 拿「这个目录里有没有**子文件夹**」。
+           *
+           * 🔴 这里踩过坑：一开始判的是 `items.length > 0`（这个目录里有没有任何东西），
+           * 结果「手机视频」这种只放了一堆视频文件、没有子文件夹的目录，
+           * 也被判成「有下级」→ 树里挂了个箭头，但点开什么都没有。
+           *
+           * 正确判据是 **至少有一个 type === 'folder'**。
+           * 麻烦在于列表按修改时间排序、文件和文件夹混在一起，
+           * 第一页可能全是文件 —— 所以「这一页没有文件夹」还得往后翻几页确认，
+           * 最多翻 3 页（30 项）；一旦翻到文件夹就立刻返回 true（大多数目录第一页就命中）。
            */
-          function itemFullPath(item) {
-            if (!item) return currentDirPath()
-            var base = currentDirPath()
-            return (base === '/' ? '' : base) + '/' + String(item.name || '')
+          function probeKid(folderId) {
+            var cached = kidProbeCache[folderId]
+            if (cached !== undefined && Date.now() - cached.at < KID_PROBE_TTL_MS) {
+              return Promise.resolve(cached.has)
+            }
+            if (kidProbeInflight[folderId]) return kidProbeInflight[folderId]
+
+            var MAX_PROBE_PAGES = 3
+            function scan(cursor, page) {
+              return api.list(folderId, cursor, 10).then(function (doc) {
+                var items = doc && Array.isArray(doc.items) ? doc.items : []
+                for (var i = 0; i < items.length; i += 1) {
+                  if (items[i] && items[i].type === 'folder') return true
+                }
+                var next = doc && doc.nextCursor ? String(doc.nextCursor) : ''
+                if (next && page < MAX_PROBE_PAGES) return scan(next, page + 1)
+                // 翻完了都没有文件夹 → 确实没有下级
+                return false
+              })
+            }
+
+            var p = scan('', 1)
+              .then(function (has) {
+                kidProbeCache[folderId] = { has: has, at: Date.now() }
+                delete kidProbeInflight[folderId]
+                return has
+              })
+              .catch(function () {
+                // 探测失败就先当作「未知」，不要缓存成 false（否则会永久少一个箭头）
+                delete kidProbeInflight[folderId]
+                return null
+              })
+            kidProbeInflight[folderId] = p
+            return p
           }
 
-          /** 优先用剪贴板 API；不支持时退回 textarea + execCommand。 */
-          function copyTextToClipboard(text) {
-            return new Promise(function (resolve, reject) {
-              if (typeof navigator !== 'undefined' && navigator.clipboard &&
-                  typeof navigator.clipboard.writeText === 'function') {
-                navigator.clipboard.writeText(text).then(resolve, function () {
-                  // 权限被拒之类：退回老办法
-                  fallbackCopy(text) ? resolve() : reject(new Error('clipboard unavailable'))
+          /**
+           * 批量探测一组子文件夹，探到一个就更新一个。
+           *
+           * 全并发：树第一页最多 10 个文件夹，10 个请求同时发 ≈ 一次网络往返
+           * （实测单次约 200ms，原来并发 4 要 480ms，现在一次就都回来了）。
+           * 探到一个立刻更新一个，所以用户看到的是箭头「一个个跳出来」，
+           * 不用等全部探完。
+           */
+          function probeTreeKids(parentId, folders) {
+            var now = Date.now()
+            var targets = folders.slice(0, 20).filter(function (folder) {
+              if (!folder || !folder.id) return false
+              var cached = kidProbeCache[folder.id]
+              // 没探过、或者缓存过期了，都要重新探
+              return cached === undefined || now - cached.at >= KID_PROBE_TTL_MS
+            })
+            if (!targets.length) return
+            function applyOne(folderId, has) {
+              if (has === null || has === undefined) return
+              setTreeRoot(function (current) {
+                return replaceTreeNode(current, parentId, function (node) {
+                  var kids = node.children || []
+                  var changed = false
+                  var next = kids.map(function (kid) {
+                    if (kid.id !== folderId) return kid
+                    changed = true
+                    return Object.assign({}, kid, { hasKids: has })
+                  })
+                  if (!changed) return node
+                  return Object.assign({}, node, { children: next })
                 })
-                return
-              }
-              if (fallbackCopy(text)) { resolve(); return }
-              reject(new Error('clipboard unavailable'))
+              })
+            }
+            // 全部并发，不再排队
+            var tasks = targets.map(function (folder) {
+              return probeKid(folder.id).then(function (has) {
+                applyOne(folder.id, has)
+              })
+            })
+            Promise.all(tasks).catch(function () {
+              /* 探测失败不影响树本身 */
             })
           }
 
-          function fallbackCopy(text) {
+          /**
+           * 拖动「左树 / 右列表」中间那条分隔线来调宽度。
+           *
+           * 范围按用户要求卡死：
+           *   · 最左：让左树刚好还能看清一级目录名（≈ 130px）；
+           *   · 最右：不超过整个面板的一半 —— 再往右列表就没地方了。
+           * 拖的时候给 body 加一个全局 cursor，避免鼠标移出分隔线后光标乱跳。
+           */
+          var TREE_MIN_WIDTH = 130
+
+          function beginTreeResize(event) {
+            // 只响应左键
+            if (event.button !== undefined && event.button !== 0) return
+            event.preventDefault()
+            event.stopPropagation()
+            var handle = event.currentTarget
+            var treeEl = handle && handle.parentNode ? handle.parentNode.querySelector('.mc-exTree') : null
+            var startX = event.clientX
+            var startWidth = treeEl ? treeEl.getBoundingClientRect().width : 200
+            setResizing(true)
+
+            function maxWidth() {
+              // 「页面中间」= 面板宽度的一半（面板宽度取 .mc-exBody 的宽度）
+              var body = treeEl && treeEl.parentNode ? treeEl.parentNode : null
+              var total = body ? body.getBoundingClientRect().width : (typeof window !== 'undefined' ? window.innerWidth : 1200)
+              return Math.max(TREE_MIN_WIDTH + 40, Math.floor(total / 2))
+            }
+
+            function onMove(moveEvent) {
+              // 拖动时吃掉默认行为：否则浏览器可能把它当文本选择/页面拖动
+              if (typeof moveEvent.preventDefault === 'function') moveEvent.preventDefault()
+              if (typeof moveEvent.stopPropagation === 'function') moveEvent.stopPropagation()
+              var delta = moveEvent.clientX - startX
+              var next = startWidth + delta
+              var limit = maxWidth()
+              if (next < TREE_MIN_WIDTH) next = TREE_MIN_WIDTH
+              if (next > limit) next = limit
+              setTreeWidth(Math.round(next))
+            }
+
+            function onUp() {
+              setResizing(false)
+              try {
+                if (typeof document !== 'undefined') {
+                  document.removeEventListener('mousemove', onMove, true)
+                  document.removeEventListener('mouseup', onUp, true)
+                  document.body.style.cursor = ''
+                  document.body.style.userSelect = ''
+                }
+              } catch (failure) {
+                /* 清理失败无所谓 */
+              }
+            }
+
             try {
-              if (typeof document === 'undefined' || typeof document.createElement !== 'function') return false
-              var area = document.createElement('textarea')
-              area.value = text
-              area.setAttribute('readonly', '')
-              area.style.position = 'fixed'
-              area.style.top = '-1000px'
-              area.style.opacity = '0'
-              var host = document.body || document.documentElement
-              if (!host || typeof host.appendChild !== 'function') return false
-              host.appendChild(area)
-              area.select()
-              if (typeof document.execCommand !== 'function') {
-                host.removeChild(area)
-                return false
+              if (typeof document !== 'undefined') {
+                document.addEventListener('mousemove', onMove, true)
+                document.addEventListener('mouseup', onUp, true)
+                document.body.style.cursor = 'col-resize'
+                document.body.style.userSelect = 'none'
               }
-              var ok = document.execCommand('copy')
-              host.removeChild(area)
-              return ok === true
             } catch (failure) {
-              logWarn('fallback copy failed', failure)
-              return false
+              onUp()
             }
           }
 
-          function copyItemPath(item) {
-            var path = itemFullPath(item)
-            setNotice(t('pathCopied', { path: path }))
-            copyTextToClipboard(path).then(function () {
-              setNotice(t('pathCopied', { path: path }))
-            }, function (failure) {
-              // 复制失败也别让用户抓空：把路径显示出来让他自己选中
-              setListError(t('copyFailed', { path: path }))
-              logWarn('copy path failed', failure)
-            })
+          /** 双击分隔线 = 恢复自适应宽度。 */
+          function resetTreeWidth() {
+            setTreeWidth(null)
           }
 
-          function removeEntry(item) {
-            if (typeof window !== 'undefined' && typeof window.confirm === 'function') {
-              if (!window.confirm(t('removeConfirm', { name: item.name }))) return
+          /** 在树里按 id 找节点，返回 { node, parentList, index }。 */          function findTreeNode(id, node, parentList, index) {
+            node = node || treeRoot
+            parentList = parentList || null
+            index = index === undefined ? -1 : index
+            if (node.id === id) return { node: node, parentList: parentList, index: index }
+            var kids = node.children || []
+            for (var i = 0; i < kids.length; i += 1) {
+              var hit = findTreeNode(id, kids[i], kids, i)
+              if (hit) return hit
             }
-            runMutation(function () {
-              return api.remove([item.id])
+            return null
+          }
+
+          /** 不可变地替换树里某个节点（React 要新对象才会重渲染）。 */
+          function replaceTreeNode(root, id, updater) {
+            if (root.id === id) return updater(root)
+            var kids = root.children || []
+            var changed = false
+            var nextKids = kids.map(function (kid) {
+              var next = replaceTreeNode(kid, id, updater)
+              if (next !== kid) changed = true
+              return next
             })
+            if (!changed) return root
+            var copy = Object.assign({}, root)
+            copy.children = nextKids
+            return copy
           }
 
-          // ------------------------------------------------------ 转移（移动）到别的文件夹
           /**
-           * 转移面板：打开时从根目录开始浏览，点文件夹进去，底部「转移到这里」。
-           * 目标不能是被移动项自己，也不能是它自己内部的子目录（服务端会拒绝，
-           * 但在这里先挡掉，省得用户白等一次往返）。
+           * 加载某个树节点的子目录。
+           *
+           * 只取**文件夹**，文件不进树（资源管理器左树也不列文件）。
+           * 一页 10 条的限制还在，这里循环翻页直到拿完 —— 树节点通常不多，
+           * 但如果真遇到几百个子目录，最多翻 8 页就停，避免卡死。
            */
-          function openMovePicker(item) {
-            if (!item) return
-            setMoveSource(item)
-            setMoveOpen(true)
-            setMoveStack([])
-            setMoveError('')
-            setMoveNote('')
-            setMoveLoading(true)
-            api.list('/', '')
-              .then(function (doc) {
-                setMoveItems(Array.isArray(doc.items) ? doc.items : [])
+          /**
+           * 加载某个树节点的子目录。
+           *
+           * ⚠️ 性能要点：**只取第一页**。
+           * 以前是串行翻页最多 8 页，按实测 pageSize=10 一次约 1.3 秒算，
+           * 一个放 30 个子文件夹的目录要翻 3 页 ≈ 4 秒 —— 点开树要等这么久，
+           * 这就是「目录打开慢」的主要来源。
+           *
+           * 树只是导航，第一页（10 项）已经够用；真还有更多，末尾会多出一个
+           * 「继续加载」的伪节点，用户点了再接下一页。右侧列表才是看全量的地方。
+           */
+          function loadTreeChildren(id, cursor) {
+            var hit = findTreeNode(id)
+            if (!hit || hit.node.loading) return
+            var appending = !!cursor
+            setTreeRoot(function (current) {
+              return replaceTreeNode(current, id, function (node) {
+                return Object.assign({}, node, { loading: true })
+              })
+            })
+            api.list(id, cursor || '')
+              .then(function (doc) {
+                if (!doc || doc.ok === false) throw new Error((doc && doc.error) || 'load failed')
+                var rows = Array.isArray(doc.items) ? doc.items : []
+                var folders = rows.filter(function (row) {
+                  return row.type === 'folder'
+                })
+                var more = doc.nextCursor ? String(doc.nextCursor) : ''
+                // 空目录：把 open 收回 false，并且记下「确实没有下级」，
+                // 这样用户点了一下之后箭头不会留着、也不会再显示。
+                var isEmpty = folders.length === 0 && !more
+                if (isEmpty) kidProbeCache[id] = { has: false, at: Date.now() }
+                setTreeRoot(function (current) {
+                  return replaceTreeNode(current, id, function (node) {
+                    var previous = node.children || []
+                    var mapped = folders.map(function (folder) {
+                      // 已经展开过的节点保留展开状态与已缓存的子节点
+                      var old = previous.filter(function (kid) {
+                        return kid.id === folder.id
+                      })[0]
+                      return {
+                        id: folder.id,
+                        name: folder.name,
+                        open: old ? old.open : false,
+                        loading: false,
+                        loaded: old ? old.loaded : false,
+                        children: old ? old.children : [],
+                        // 已知有没有子目录（探测后填），未知就是 null
+                        hasKids: old ? old.hasKids : null,
+                      }
+                    })
+                    var nextChildren = appending
+                      ? previous.concat(mapped)
+                      : mapped
+                    return Object.assign({}, node, {
+                      loading: false,
+                      loaded: true,
+                      // 空目录：子节点一并清空，别留着上次的
+                      children: isEmpty ? [] : nextChildren,
+                      // 空目录：收回展开态 + 明确标记没有下级
+                      open: isEmpty ? false : node.open,
+                      hasKids: isEmpty ? false : node.hasKids,
+                    })
+                  })
+                })
+                // 子列表到位后，顺手探测「哪些子目录还有下一级」，
+                // 这样箭头从一开始就是准的，不会先显示再消失。
+                if (!appending) probeTreeKids(id, folders)
+              })
+              .catch(function (failure) {
+                logWarn('tree load failed', failure)
+                setTreeRoot(function (current) {
+                  return replaceTreeNode(current, id, function (node) {
+                    return Object.assign({}, node, { loading: false })
+                  })
+                })
+              })
+          }
+
+          /** 点树的箭头：展开 / 收起。第一次展开时去拉子目录。 */
+          function toggleTreeNode(id) {
+            var hit = findTreeNode(id)
+            if (!hit) return
+            var willOpen = !hit.node.open
+            setTreeRoot(function (current) {
+              return replaceTreeNode(current, id, function (node) {
+                return Object.assign({}, node, { open: willOpen })
+              })
+            })
+            if (willOpen && !hit.node.loaded) loadTreeChildren(id)
+          }
+
+          /**
+           * 点树的名字：把右侧切到那个目录。
+           *
+           * 关键：右树的目录栈要和点击的节点对齐 ——
+           * 这样面包屑、右键「上传到当前目录」、新建文件夹都落在对的地方。
+           * 所以先把树上从根到该节点的名字路径算出来，再整体 setStack。
+           */
+          function selectTreeNode(id) {
+            if (id === '/') {
+              setStack([])
+              setTreeFocusId('/')
+              return
+            }
+            var path = []
+            function walk(node, trail) {
+              if (node.id === id) {
+                path = trail.concat([{ id: node.id, name: node.name }])
+                return true
+              }
+              var kids = node.children || []
+              for (var i = 0; i < kids.length; i += 1) {
+                if (walk(kids[i], trail.concat([{ id: node.id, name: node.name }]))) return true
+              }
+              return false
+            }
+            walk(treeRoot, [])
+            // 去掉根（根是 "/"，栈里不存它）
+            var next = path.filter(function (entry) {
+              return entry.id !== '/'
+            })
+            setStack(next)
+            setTreeFocusId(id)
+            // 顺手复核一次「这目录还有没有下级」：
+            // 用户可能刚在别处把它的子项删空/搬走，箭头得跟着变。
+            recheckNodeHasKids(id)
+          }
+
+          /** 重新问一次某个节点「还有没有下级」，并更新树上的箭头。 */
+          function recheckNodeHasKids(id) {
+            if (!id || id === '/') return
+            delete kidProbeCache[id]
+            probeKid(id).then(function (has) {
+              if (has === null || has === undefined) return
+              setTreeRoot(function (current) {
+                return replaceTreeNode(current, id, function (node) {
+                  if (node.hasKids === has) return node
+                  return Object.assign({}, node, { hasKids: has })
+                })
+              })
+            })
+          }
+
+          /** 右侧切目录时，把左树同步展开到该目录（让高亮看得见）。 */
+          function syncTreeToStack() {
+            setTreeFocusId(parentId)
+            if (parentId === '/') return
+            // 从根开始逐级展开路径上的节点
+            var trail = stack.map(function (entry) {
+              return entry.id
+            })
+            function ensure(index) {
+              if (index >= trail.length) return
+              var id = trail[index]
+              var hit = findTreeNode(id)
+              if (!hit) return
+              if (!hit.node.open) {
+                setTreeRoot(function (current) {
+                  return replaceTreeNode(current, id, function (node) {
+                    return Object.assign({}, node, { open: true })
+                  })
+                })
+              }
+              if (!hit.node.loaded) loadTreeChildren(id)
+              ensure(index + 1)
+            }
+            ensure(0)
+          }
+
+          // 目录一变就同步左树（第一层先展开，用户能看到自己点到了哪）
+          React.useEffect(function () {
+            if (!authorized) return
+            syncTreeToStack()
+            // 根节点第一次展开时把它的子目录拉出来
+            if (!treeRoot.loaded && !treeRoot.loading) loadTreeChildren('/')
+          }, [parentId, authorized])
+
+          /**
+           * 量出父容器的真实像素高度，写到根节点上。
+           *
+           * 为什么要这么干：`.mc-root-ide{height:100%}` 要求父元素有**确定高度**，
+           * 而 DSH 的 view 容器不保证给。一旦失效，面板会被内容撑成一条长页面：
+           *   · 列表内部的 overflow:auto 永远不触发（它没被压缩过）；
+           *   · 底部进度条被推到内容最底下，得拖外层滚动条到底才看得到。
+           * 这条现象和用户反馈完全一致，所以改用量出来的像素值。
+           *
+           * 同时用 ResizeObserver 跟随侧栏折叠、窗口缩放、对话区高度变化。
+           */
+          React.useEffect(function () {
+            if (!authorized) return
+            var el = ideRootRef.current
+            if (!el || typeof window === 'undefined') return
+
+            /**
+             * 量高度要跨浏览器稳妥，所以按「由近到远」分四级兜底：
+             *
+             *   1. 直接父容器的 clientHeight（最准，含 padding 不含 border）
+             *   2. 父容器的 getBoundingClientRect().height（clientHeight 报 0 时用，
+             *      某些 WebView / 旧 Safari 上 clientHeight 会晚一拍才有值）
+             *   3. 再往上一层的同样两种量法（父容器是 display:contents 或零高包裹时）
+             *   4. 实在量不到：用视觉视口估（移动端地址栏收起/展开时
+             *      innerHeight 会变，visualViewport.height 更贴近真实可视区）
+             *
+             * 高度只用来「撑满」，量小一点只是留白，量大才会出滚动条；
+             * 所以宁可偏保守。
+             */
+            function readHeight(node) {
+              if (!node) return 0
+              var h = 0
+              try {
+                h = node.clientHeight || 0
+              } catch (failure) {
+                h = 0
+              }
+              if (h <= 0) {
+                try {
+                  var rect = node.getBoundingClientRect()
+                  h = rect && rect.height ? Math.round(rect.height) : 0
+                } catch (failure) {
+                  h = 0
+                }
+              }
+              return h > 0 ? h : 0
+            }
+
+            function viewportHint() {
+              // 移动端地址栏会伸缩：visualViewport 比 innerHeight 准
+              var vv = 0
+              try {
+                if (window.visualViewport && window.visualViewport.height) {
+                  vv = Math.round(window.visualViewport.height)
+                }
+              } catch (failure) {
+                vv = 0
+              }
+              if (vv <= 0) vv = Math.round(window.innerHeight || 0)
+              if (vv <= 0) return 0
+              // 面板在对话区里，大致占视口的 3/4；留一点余量避免顶出滚动条
+              return Math.max(320, Math.floor(vv * 0.72))
+            }
+
+            function measure() {
+              var node = ideRootRef.current
+              if (!node) return
+              var parent = node.parentElement
+              var h = readHeight(parent)
+              if (h <= 0 && parent) h = readHeight(parent.parentElement)
+              if (h <= 0) h = viewportHint()
+              if (h > 0) {
+                setIdeHeight(function (previous) {
+                  return previous === h ? previous : h
+                })
+              }
+            }
+
+            // 首帧 + 下一帧各量一次：有些浏览器首帧还没算完布局
+            measure()
+            var raf1 = 0
+            var raf2 = 0
+            if (typeof requestAnimationFrame === 'function') {
+              raf1 = requestAnimationFrame(function () {
+                measure()
+                raf2 = requestAnimationFrame(measure)
+              })
+            }
+
+            var observer = null
+            try {
+              if (typeof ResizeObserver === 'function' && el.parentElement) {
+                observer = new ResizeObserver(measure)
+                observer.observe(el.parentElement)
+                // 父容器可能是零高包裹，再往上一层也盯一下
+                if (el.parentElement.parentElement) observer.observe(el.parentElement.parentElement)
+              }
+            } catch (failure) {
+              observer = null
+            }
+
+            window.addEventListener('resize', measure)
+            window.addEventListener('orientationchange', measure)
+            // 移动端软键盘 / 地址栏伸缩
+            try {
+              if (window.visualViewport && typeof window.visualViewport.addEventListener === 'function') {
+                window.visualViewport.addEventListener('resize', measure)
+                window.visualViewport.addEventListener('scroll', measure)
+              }
+            } catch (failure) {
+              /* 没有 visualViewport */
+            }
+
+            // 窗口布局可能异步完成，补几次延迟测量
+            var timers = [60, 200, 600, 1200, 2400].map(function (delay) {
+              return setTimeout(measure, delay)
+            })
+
+            return function () {
+              for (var i = 0; i < timers.length; i += 1) clearTimeout(timers[i])
+              if (raf1 && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(raf1)
+              if (raf2 && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(raf2)
+              window.removeEventListener('resize', measure)
+              window.removeEventListener('orientationchange', measure)
+              try {
+                if (window.visualViewport && typeof window.visualViewport.removeEventListener === 'function') {
+                  window.visualViewport.removeEventListener('resize', measure)
+                  window.visualViewport.removeEventListener('scroll', measure)
+                }
+              } catch (failure) {
+                /* 没有 visualViewport */
+              }
+              if (observer) {
+                try {
+                  observer.disconnect()
+                } catch (failure) {
+                  /* 已经断开 */
+                }
+              }
+            }
+          }, [authorized])
+
+          // ================================================================
+          // 0.3.0 搜索
+          // ================================================================
+          function clearSearch() {
+            searchSeqRef.current += 1
+            setSearchKeyword('')
+            setSearchItems([])
+            setSearchNote('')
+            setSearchError('')
+            setSearchBusy(false)
+            setSearchOpen(false)
+          }
+
+          /**
+           * 执行搜索。带请求序号，快速输入时只认最后一次的结果。
+           * 搜索范围：当前目录 + 若干层子目录（宿主端控制上限）。
+           */
+          function runSearch(keyword) {
+            var needle = String(keyword === undefined ? searchKeyword : keyword).trim()
+            if (!needle) {
+              clearSearch()
+              return
+            }
+            searchSeqRef.current += 1
+            var seq = searchSeqRef.current
+            setSearchBusy(true)
+            setSearchError('')
+            setSearchNote('')
+            setSearchOpen(true)
+            api
+              .search({ keyword: needle, parentFileId: parentId })
+              .then(function (doc) {
+                if (seq !== searchSeqRef.current) return
+                if (!doc || doc.ok === false) {
+                  setSearchError((doc && doc.error) || t('actFailed', { detail: '' }))
+                  setSearchItems([])
+                  setSearchBusy(false)
+                  return
+                }
+                var rows = Array.isArray(doc.items) ? doc.items : []
+                setSearchItems(rows)
+                setSearchBusy(false)
+                if (rows.length === 0) {
+                  setSearchNote(t('searchNoResult'))
+                } else if (doc.truncated) {
+                  setSearchNote(t('searchTruncated', { count: rows.length }))
+                } else {
+                  setSearchNote(t('searchCount', { count: rows.length }))
+                }
+              })
+              .catch(function (failure) {
+                if (seq !== searchSeqRef.current) return
+                setSearchBusy(false)
+                setSearchError(messageOf(failure))
+                setSearchItems([])
+              })
+          }
+
+          // 输入防抖：350ms 内不再输入就发请求
+          React.useEffect(function () {
+            if (!searchOpen) return
+            var kw = searchKeyword.trim()
+            if (!kw) {
+              setSearchItems([])
+              setSearchNote('')
+              setSearchError('')
+              return
+            }
+            var timer = setTimeout(function () {
+              runSearch(kw)
+            }, 350)
+            return function () {
+              clearTimeout(timer)
+            }
+          }, [searchKeyword])
+
+          // ================================================================
+          // 0.3.0 下载目录弹层
+          // ================================================================
+          function openDirModal() {
+            setDirDraft(downloadDir)
+            setDirError('')
+            setDirPickBusy(false)
+            setDirModal(true)
+          }
+
+          function closeDirModal() {
+            setDirModal(false)
+            setDirError('')
+            setDirPickBusy(false)
+          }
+
+          /** 调宿主的系统「选择文件夹」对话框，选中后填进草稿。 */
+          function pickDownloadDir() {
+            if (dirPickBusy) return
+            setDirPickBusy(true)
+            setDirError('')
+            api
+              .pickDir()
+              .then(function (doc) {
+                setDirPickBusy(false)
+                if (!doc || doc.ok === false) {
+                  setDirError((doc && doc.error) || t('actFailed', { detail: '' }))
+                  return
+                }
+                if (doc.cancelled) return
+                if (doc.path) setDirDraft(String(doc.path))
+              })
+              .catch(function (failure) {
+                setDirPickBusy(false)
+                setDirError(messageOf(failure))
+              })
+          }
+
+          function saveDownloadDir() {
+            var next = dirDraft.trim()
+            updateDownloadDir(next)
+            setDirModal(false)
+            setNotice(t('downloadDirSaved'))
+            setTimeout(function () { setNotice('') }, 2200)
+          }
+
+          // ================================================================
+          // 0.3.0 底部传输条：把 jobs 折算成一条整体进度
+          // ================================================================
+          /**
+           * 进度条「至少亮这么久」。
+           *
+           * 小图片下载可能 50ms 就完事，如果严格按真实进度显示，
+           * 进度条会闪一下就没 —— 用户根本看不到，以为没在传。
+           * 所以强行让它至少亮 1.2 秒再进入完成态。
+           */
+          var TRANS_MIN_DRAW_MS = 1200
+          /** 这一轮传输是什么时候开始的（0 = 当前没有在亮）。 */
+          var transBeganAtRef = React.useRef(0)
+
+          React.useEffect(function () {
+            var list = Array.isArray(jobs) ? jobs : []
+            // 和轮询用同一套「活跃」判断，别两处逻辑对不上
+            var running = list.filter(isJobActive)
+            var failed = list.filter(function (job) {
+              return job && job.state === 'error'
+            })
+            function clearTimer() {
+              if (transFadeRef.current !== null) {
+                clearTimeout(transFadeRef.current)
+                transFadeRef.current = null
+              }
+            }
+            if (running.length > 0) {
+              clearTimer()
+              if (transBeganAtRef.current === 0) transBeganAtRef.current = Date.now()
+              var total = 0
+              var done = 0
+              for (var i = 0; i < running.length; i += 1) {
+                total += Math.max(0, Number(running[i].total) || 0)
+                done += Math.max(0, Number(running[i].done) || 0)
+              }
+              setTransPercent(total > 0 ? Math.min(100, (done / total) * 100) : 0)
+              setTransPhase('draw')
+              return
+            }
+            // 没有运行中的任务：如果刚从「有任务」变成没有，就走
+            // 「完成（停留 5 秒）→ 缓缓褪色 → 归位」。
+            if (transPhase !== 'draw') return
+            var hasError = failed.length > 0
+            var began = transBeganAtRef.current
+            var elapsed = began ? Date.now() - began : TRANS_MIN_DRAW_MS
+            // 还没亮够时间就等一等，别让进度条闪一下就消失
+            var wait = Math.max(0, TRANS_MIN_DRAW_MS - elapsed)
+            clearTimer()
+            transFadeRef.current = setTimeout(function () {
+              transBeganAtRef.current = 0
+              setTransPercent(100)
+              setTransPhase(hasError ? 'error' : 'done')
+              // 完成态停留 5 秒，再花 1.5 秒褪色
+              transFadeRef.current = setTimeout(function () {
+                setTransPhase('fade')
+                transFadeRef.current = setTimeout(function () {
+                  setTransPhase('idle')
+                  setTransPercent(0)
+                  transFadeRef.current = null
+                }, 1600)
+              }, 5000)
+            }, wait)
+          }, [jobs])
+
+          // 卸载时清掉淡出定时器
+          React.useEffect(function () {
+            return function () {
+              if (transFadeRef.current !== null) {
+                clearTimeout(transFadeRef.current)
+                transFadeRef.current = null
+              }
+            }
+          }, [])
+
+          function goUp() {
+            setStack(stack.slice(0, stack.length - 1))
+          }
+
+          function createFolder() {
+            var name = folderName.trim()
+            if (!name) return
+            runMutation(function () {
+              return api.mkdir(parentId, name).then(function (doc) {
+                setFolderName('')
+                setFolderOpen(false)
+                return doc
+              })
+            })
+          }
+
+          function renameEntry(item) {
+            if (typeof window === 'undefined' || typeof window.prompt !== 'function') return
+            var next = window.prompt(t('renamePrompt'), item.name)
+            if (next === null) return
+            next = String(next).trim()
+            if (!next || next === item.name) return
+            runMutation(function () {
+              return api.rename(item.id, next)
+            })
+          }
+
+          // ------------------------------------------------------ 复制路径
+          /** 当前所在目录的完整路径，例如 "/windows/实验"。 */
+          function currentDirPath() {
+            return '/' + stack.map(function (s) { return s.name }).join('/')
+          }
+
+          /**
+           * 把一个项的完整路径拼出来（基于当前目录栈 + 名字）。
+           * 注意：这是**展示用的路径**，不是网盘的 fileId；移动云盘按 id 定位，
+           * 所以这个路径只适合给人看 / 粘到笔记里。
+           */
+          function itemFullPath(item) {
+            if (!item) return currentDirPath()
+            var base = currentDirPath()
+            return (base === '/' ? '' : base) + '/' + String(item.name || '')
+          }
+
+          /** 优先用剪贴板 API；不支持时退回 textarea + execCommand。 */
+          function copyTextToClipboard(text) {
+            return new Promise(function (resolve, reject) {
+              if (typeof navigator !== 'undefined' && navigator.clipboard &&
+                  typeof navigator.clipboard.writeText === 'function') {
+                navigator.clipboard.writeText(text).then(resolve, function () {
+                  // 权限被拒之类：退回老办法
+                  fallbackCopy(text) ? resolve() : reject(new Error('clipboard unavailable'))
+                })
+                return
+              }
+              if (fallbackCopy(text)) { resolve(); return }
+              reject(new Error('clipboard unavailable'))
+            })
+          }
+
+          function fallbackCopy(text) {
+            try {
+              if (typeof document === 'undefined' || typeof document.createElement !== 'function') return false
+              var area = document.createElement('textarea')
+              area.value = text
+              area.setAttribute('readonly', '')
+              area.style.position = 'fixed'
+              area.style.top = '-1000px'
+              area.style.opacity = '0'
+              var host = document.body || document.documentElement
+              if (!host || typeof host.appendChild !== 'function') return false
+              host.appendChild(area)
+              area.select()
+              if (typeof document.execCommand !== 'function') {
+                host.removeChild(area)
+                return false
+              }
+              var ok = document.execCommand('copy')
+              host.removeChild(area)
+              return ok === true
+            } catch (failure) {
+              logWarn('fallback copy failed', failure)
+              return false
+            }
+          }
+
+          function copyItemPath(item) {
+            var path = itemFullPath(item)
+            setNotice(t('pathCopied', { path: path }))
+            copyTextToClipboard(path).then(function () {
+              setNotice(t('pathCopied', { path: path }))
+            }, function (failure) {
+              // 复制失败也别让用户抓空：把路径显示出来让他自己选中
+              setListError(t('copyFailed', { path: path }))
+              logWarn('copy path failed', failure)
+            })
+          }
+
+          function removeEntry(item) {
+            if (typeof window !== 'undefined' && typeof window.confirm === 'function') {
+              if (!window.confirm(t('removeConfirm', { name: item.name }))) return
+            }
+            runMutation(function () {
+              return api.remove([item.id])
+            })
+          }
+
+          // ------------------------------------------------------ 转移（移动）到别的文件夹
+          /**
+           * 转移面板：打开时从根目录开始浏览，点文件夹进去，底部「转移到这里」。
+           * 目标不能是被移动项自己，也不能是它自己内部的子目录（服务端会拒绝，
+           * 但在这里先挡掉，省得用户白等一次往返）。
+           */
+          function openMovePicker(item) {
+            if (!item) return
+            setMoveSource(item)
+            setMoveOpen(true)
+            setMoveStack([])
+            setMoveError('')
+            setMoveNote('')
+            setMoveLoading(true)
+            api.list('/', '')
+              .then(function (doc) {
+                setMoveItems(Array.isArray(doc.items) ? doc.items : [])
                 setMoveCursor(doc.nextCursor || null)
                 setMoveLoading(false)
               })
@@ -1948,9 +3498,28 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
             setJobs(list)
           }
 
+          /**
+           * 这个任务是不是「还在动」。
+           *
+           * 🔴 这里踩过一个坑：一开始只认 state === 'running'，
+           * 但任务刚建出来时是 queued / scan（甚至 pending），
+           * 于是 startJob 之后第一次 fetchTransfers 判定「没有在跑的」→
+           * 直接把轮询停了，进度条永远等不到更新，用户就「看不见进度条」。
+           *
+           * 所以凡是「还没结束」的状态都算活跃。终态只有 done / error / cancelled。
+           */
+          function isJobActive(job) {
+            if (!job) return false
+            var state = String(job.state || '')
+            if (state === 'done' || state === 'error' || state === 'cancelled' || state === 'canceled') {
+              return false
+            }
+            return true
+          }
+
           function hasRunningJob(list) {
             for (var i = 0; i < list.length; i += 1) {
-              if (list[i] && list[i].state === 'running') return true
+              if (isJobActive(list[i])) return true
             }
             return false
           }
@@ -2007,6 +3576,19 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
             setJobBusy(key)
             setListError('')
             setNotice('')
+            /**
+             * 乐观地把进度条点亮。
+             *
+             * 🔴 这里踩过坑：小图片下载可能 50ms 就完事，等 fetchTransfers
+             * 回来时任务已经是 done —— 而进度条的状态机只在「当前是 draw」
+             * 时才肯转 done，于是整条进度条从头到尾都没出现过，用户以为没在传。
+             *
+             * 所以起任务的动作本身就先把 transPhase 设成 'draw' 并记下开始时间，
+             * 这样即使任务瞬间完成，也能走完「亮起 → 完成 → 停留 5 秒 → 褪色」。
+             */
+            transBeganAtRef.current = Date.now()
+            setTransPercent(0)
+            setTransPhase('draw')
             return factory()
               .then(function (doc) {
                 setJobBusy('')
@@ -2017,6 +3599,10 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
                 setJobBusy('')
                 setListError(t('actFailed', { detail: messageOf(failure) }))
                 logWarn('transfer start failed', failure)
+                // 任务没起来：把乐观点亮的进度条收回去
+                transBeganAtRef.current = 0
+                setTransPhase('idle')
+                setTransPercent(0)
                 return null
               })
           }
@@ -2709,19 +4295,21 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
             if (menu.item) {
               var item = menu.item
               if (item.type === 'folder') {
-                items.push(menuItem('open', t('menuOpen'), function () { enterFolder(item) }))
-                items.push(menuItem('download-folder', t('menuDownloadFolder'), function () { downloadFolder(item) }))
+                // 文件夹右键只留这两项（用户要求）：
+                // 进入文件夹靠点名字/双击，增删改移走其他入口。
+                items.push(menuItem('copy-path', t('menuCopyPath'), function () { copyItemPath(item) }))
+                items.push(menuItem('rename', t('menuRename'), function () { renameEntry(item) }))
               } else {
                 items.push(menuItem('link', t('menuDownloadLink'), function () { openLink(item) }))
                 items.push(menuItem('download', t('menuDownloadLocal'), function () { downloadFile(item) }))
+                items.push(h('hr', { key: 'menu-sep-upload', className: 'mc-menuSep' }))
+                pushUploadItems(items, item)
+                items.push(h('hr', { key: 'menu-sep', className: 'mc-menuSep' }))
+                items.push(menuItem('move', t('menuMove'), function () { openMovePicker(item) }))
+                items.push(menuItem('copy-path', t('menuCopyPath'), function () { copyItemPath(item) }))
+                items.push(menuItem('rename', t('menuRename'), function () { renameEntry(item) }))
+                items.push(menuItem('remove', t('menuRemove'), function () { removeEntry(item) }, 'mc-menuItemDanger'))
               }
-              items.push(h('hr', { key: 'menu-sep-upload', className: 'mc-menuSep' }))
-              pushUploadItems(items, item)
-              items.push(h('hr', { key: 'menu-sep', className: 'mc-menuSep' }))
-              items.push(menuItem('move', t('menuMove'), function () { openMovePicker(item) }))
-              items.push(menuItem('copy-path', t('menuCopyPath'), function () { copyItemPath(item) }))
-              items.push(menuItem('rename', t('menuRename'), function () { renameEntry(item) }))
-              items.push(menuItem('remove', t('menuRemove'), function () { removeEntry(item) }, 'mc-menuItemDanger'))
             } else {
               items.push(menuItem('new-folder', t('menuNewFolder'), function () {
                 setFolderOpen(true)
@@ -2897,176 +4485,905 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
             )
           }
 
-          
-          function renderAuthCard() {
-            return h('section', { className: 'mc-card', key: 'auth' },
-              h('h2', { className: 'mc-cardTitle' }, t('loginTitle')),
-              renderAuthTabs(),
-              authTab === 'scan' ? renderScanForm() : renderLoginForm()
+          
+          function renderAuthCard() {
+            return h('section', { className: 'mc-card', key: 'auth' },
+              h('h2', { className: 'mc-cardTitle' }, t('loginTitle')),
+              renderAuthTabs(),
+              authTab === 'scan' ? renderScanForm() : renderLoginForm()
+            )
+          }
+
+          // ------------------------------------------------------ 状态卡
+function renderExpires() {
+            var expiresAt = status ? status.expiresAt : null
+            if (!expiresAt) return '—'
+            var text = formatDateTime(expiresAt)
+            if (Number(expiresAt) < Date.now()) return t('expired') + ' · ' + text
+            return text
+          }
+
+          /** 打开显示名编辑：草稿 = 当前存储值（不是脱敏号码）。 */
+          function openDisplayNameEdit() {
+            setDisplayNameDraft(displayName)
+            setDisplayNameError('')
+            setDisplayNameEdit(true)
+          }
+
+          /**
+           * 保存显示名。只有「真想存的值写不进 localStorage」才算失败：
+           * 空值存不存得进去都无所谓（清除本来就是回退到脱敏号码）。
+           */
+          function saveDisplayName() {
+            var next = normalizeDisplayName(displayNameDraft)
+            setDisplayName(next)
+            var applied = writeDisplayName(next)
+            if (applied !== next) {
+              setDisplayNameError(t('actFailed', { detail: 'localStorage' }))
+              return
+            }
+            setDisplayNameError('')
+            setDisplayNameEdit(false)
+          }
+
+          function clearDisplayName() {
+            setDisplayName('')
+            setDisplayNameDraft('')
+            writeDisplayName('')
+            setDisplayNameError('')
+            setDisplayNameEdit(false)
+          }
+
+          /** 取消：不落盘，直接回到卡片。 */
+          function cancelDisplayNameEdit() {
+            setDisplayNameDraft('')
+            setDisplayNameError('')
+            setDisplayNameEdit(false)
+          }
+
+          /**
+           * 账号行：显示名（有的话）或脱敏手机号 accountMasked。
+           * ⚠️ 绝不渲染 status.account —— 那是完整手机号。
+           * 有显示名时，脱敏号码退成下面一行小字（仍然不是完整号码）。
+           */
+// ------------------------------------------------------ 文件浏览
+          // ================================================================
+          // 0.3.0 资源管理器渲染
+          // ================================================================
+
+          /**
+           * 顶部工具条。
+           *
+           * 布局按用户要求：
+           *   · 左上 = 账号 + 授权有效期（+ 下载目录小按钮）
+           *   · 顶部居中 = 容量
+           *   · 右上 = 操作按钮
+           */
+          function renderExTop() {
+            var quota = status ? status.quota : null
+            var total = quota && isFinite(Number(quota.totalBytes)) ? Number(quota.totalBytes) : 0
+            var used = quota && isFinite(Number(quota.usedBytes)) ? Number(quota.usedBytes) : 0
+            var percent = total > 0 ? Math.min(100, Math.max(0, (used / total) * 100)) : 0
+
+            // ---- 左上：账号 + 有效期 ----
+            // 账号区：纵向三行（手机号 / 有效期 / 下载目录），保持原来的高度
+            var accountBlock = h('div', { className: 'mc-exTopLeft' },
+              h('div', { className: 'mc-exAcct' },
+                h('span', { className: 'mc-exAcctName', title: accountMasked || '' },
+                  hasAccount ? accountLabel : t('notAuthorized')
+                ),
+                hasAccount ? h('button', {
+                  type: 'button',
+                  className: 'mc-exAcctEdit',
+                  title: t('displayName'),
+                  'aria-label': t('displayName'),
+                  onClick: openDisplayNameEdit,
+                }, '✎') : null
+              ),
+              displayName !== '' && hasAccount
+                ? h('span', { className: 'mc-exAcctMasked' }, accountMasked)
+                : null,
+              h('div', { className: 'mc-exExpiry' },
+                h('span', {}, t('expiresShort')),
+                h('span', { className: expiresSoon() ? 'mc-exExpiryWarn' : '' }, renderExpires())
+              ),
+              // 下载目录：小按钮（带框，限宽）
+              h('button', {
+                type: 'button',
+                className: 'mc-exChip',
+                title: (t('downloadDir') + '：' + (downloadDir || '—')),
+                onClick: openDirModal,
+              },
+                h('span', { className: 'mc-exChipIcon' },
+                  h('svg', { viewBox: '0 0 10 12', width: 9, height: 11, 'aria-hidden': 'true' },
+                    h('path', {
+                      d: 'M5 1.5 L5 10',
+                      fill: 'none',
+                      stroke: 'currentColor',
+                      strokeWidth: '1.5',
+                      strokeLinecap: 'round',
+                    }),
+                    h('path', {
+                      d: 'M2 7.4 L5 10.4 L8 7.4',
+                      fill: 'none',
+                      stroke: 'currentColor',
+                      strokeWidth: '1.5',
+                      strokeLinecap: 'round',
+                      strokeLinejoin: 'round',
+                    })
+                  )
+                ),
+                h('span', { className: 'mc-exChipValue' }, downloadDir || '—')
+              )
+            )
+
+            // ---- 容量条：第一行右侧，紧挨操作按钮 ----
+            // ---- 容量条：顶部栏底部那条贯通的进度线 ----
+            // 文字直接压在条里居中；白字 + 深色描边，所以不管底下是浅色未用区
+            // 还是品牌色已用区，都看得清（亮色/暗色主题都适配）。
+            var quotaBlock = h('div', {
+              className: 'mc-exQuotaLine',
+              title: total > 0
+                ? t('quota') + '：' + formatBytes(used) + ' / ' + formatBytes(total) + ' · ' + percent.toFixed(1) + '%'
+                : t('quotaUnavailable'),
+            },
+              h('div', {
+                className: 'mc-exQuotaLineFill',
+                style: { width: (total > 0 ? percent : 0).toFixed(1) + '%' },
+              }),
+              h('div', { className: 'mc-exQuotaLineText' },
+                total > 0
+                  ? formatBytes(used) + ' / ' + formatBytes(total) + ' · ' + percent.toFixed(1) + '%'
+                  : t('quotaUnavailable')
+              )
+            )
+
+            // ---- 右上：操作 ----
+            var activeCount = (Array.isArray(jobs) ? jobs : []).filter(isJobActive).length
+            // 右上：按钮 + 容量条横着排成一行（不换行）
+            var actionBlock = h('div', { className: 'mc-exTopRight' },
+              // 传输记录
+              h('button', {
+                type: 'button',
+                className: 'mc-btn mc-btnSmall mc-exHistoryBtn',
+                title: t('historyTitle'),
+                onClick: function () {
+                  fetchTransfers()
+                  setHistoryOpen(true)
+                },
+              },
+                h('span', { className: 'mc-exHistoryLabel' }, t('history')),
+                h('span', { className: 'mc-exHistoryLabelShort' }, t('historyShort')),
+                activeCount > 0 ? h('span', { className: 'mc-exHistoryDot' }) : null
+              ),
+              h('button', {
+                type: 'button',
+                className: 'mc-btn mc-btnSmall',
+                title: t('reauthorize'),
+                disabled: authBusy,
+                onClick: openReauth,
+              }, t('reauthorizeShort')),
+              h('button', {
+                type: 'button',
+                className: 'mc-btn mc-btnSmall mc-btnDanger',
+                title: t('clearAuth'),
+                disabled: authBusy,
+                onClick: clearAuth,
+              }, t('clearAuthShort')),
+              h('button', {
+                type: 'button',
+                className: 'mc-btn mc-btnSmall',
+                title: t('refresh'),
+                'aria-label': t('refresh'),
+                disabled: statusLoading,
+                onClick: function () {
+                  // 刷新不仅是刷容量和列表，树的结构也可能变了
+                  invalidateTreeKnowledge()
+                  loadStatus()
+                  reload()
+                },
+              }, '↻'),
+            )
+
+            return h('div', { className: 'mc-exTop' },
+              // 第一行：账号 + 操作按钮（容量条不在这儿了，所以永远塞得下）
+              h('div', { className: 'mc-exTopRow' }, accountBlock, actionBlock),
+              // 第二行：新建 + 面包屑 + 搜索
+              renderExTools(),
+              // 底部：贯通的容量条（它就是原来那条浅横线）
+              quotaBlock
+            )
+          }
+
+          /** 授权剩余天数是否已不足 7 天（用于把有效期标红）。 */
+          function expiresSoon() {
+            var expiresAt = status ? Number(status.expiresAt) : 0
+            if (!expiresAt) return false
+            return expiresAt - Date.now() < 7 * 24 * 3600 * 1000
+          }
+
+          /** 第二行：新建 / 路径 / 搜索。 */
+          function renderExTools() {
+            return h('div', { className: 'mc-exTools' },
+              h('button', {
+                type: 'button',
+                className: 'mc-btn mc-btnSmall',
+                disabled: busy,
+                title: t('newFolder'),
+                onClick: function () {
+                  setFolderOpen(!folderOpen)
+                  setFolderName('')
+                },
+              }, '+ ' + t('newFolder')),
+              h('div', { className: 'mc-exToolsGrow' }, renderCrumbs()),
+              h('div', { className: 'mc-exSearch' },
+                h('input', {
+                  className: 'mc-exSearchInput',
+                  type: 'search',
+                  spellCheck: false,
+                  autoComplete: 'off',
+                  placeholder: t('searchPlaceholder'),
+                  'aria-label': t('search'),
+                  value: searchKeyword,
+                  onChange: function (event) { setSearchKeyword(event.target.value) },
+                  onKeyDown: function (event) {
+                    if (event.key === 'Enter') runSearch(searchKeyword)
+                    if (event.key === 'Escape') clearSearch()
+                  },
+                }),
+                searchKeyword
+                  ? h('button', {
+                      type: 'button',
+                      className: 'mc-exSearchClear',
+                      title: t('searchClear'),
+                      onClick: clearSearch,
+                    }, '×')
+                  : null
+              )
+            )
+          }
+
+          /** 左树的一个节点（含子节点，递归）。 */
+          /**
+           * 左树的一个节点。
+           *
+           * 箭头这块踩过坑：一开始用 ▼ / ▶ / · 三个字符表示「展开 / 收起 / 加载中」，
+           * 结果是
+           *   · 三个字符宽度不同，切换时整行左右跳；
+           *   · 没子目录时用 visibility:hidden 把字藏了，用户就看见箭头「点了消失」；
+           *   · 字符切换没有过渡，观感很卡。
+           *
+           * 现在改成：固定 9px 的格子 + 一个 SVG 折角，展开靠 rotate 过渡。
+           * 任何状态都不改宽度，所以永远不跳。没有子目录时格子留白（不是消失）。
+           */
+          function renderCaret(node, hasKids) {
+            // 加载中：小转圈（占同样宽度）
+            if (node.loading) {
+              return h('span', { className: 'mc-exCaretSlot' },
+                h('span', { className: 'mc-exTreeSpinner' })
+              )
+            }
+            // 确定没有子目录：留白占位，不画箭头（但位置永远在，不会跳）
+            if (!hasKids) {
+              return h('span', { className: 'mc-exCaretSlot' })
+            }
+            return h('span', { className: 'mc-exCaretSlot' },
+              h('svg', {
+                className: 'mc-exCaret' + (node.open ? ' mc-exCaretOpen' : ''),
+                viewBox: '0 0 10 10',
+                width: 10,
+                height: 10,
+                'aria-hidden': 'true',
+              },
+                h('path', {
+                  d: 'M3.5 2 L7 5 L3.5 8',
+                  fill: 'none',
+                  stroke: 'currentColor',
+                  strokeWidth: '1.6',
+                  strokeLinecap: 'round',
+                  strokeLinejoin: 'round',
+                })
+              )
+            )
+          }
+
+          function renderTreeNode(node, depth) {
+            var isActive = treeFocusId === node.id
+            var kids = node.children || []
+
+            // 「有没有下一级」是三态：
+            //   true  → 画箭头，可点
+            //   false → 确实没有下级，**不画箭头也不可点**
+            //   null  → 还不知道（正在探测），不画箭头但可点（点了就去加载）
+            var known = node.hasKids
+            var hasKids = known === true
+            var canToggle = known !== false
+            // 展开过一次并且拿到了子节点，就一定是有下级的
+            if (node.loaded && kids.length > 0) {
+              hasKids = true
+              canToggle = true
+            }
+            var showKids = node.open && kids.length > 0
+
+            return h('div', { key: 'tn' + node.id },
+              h('div', {
+                className: 'mc-exTreeNode' + (isActive ? ' mc-exTreeNodeActive' : ''),
+                style: { paddingLeft: String(depth * 14 + 2) + 'px' },
+              },
+                h('button', {
+                  type: 'button',
+                  className: 'mc-exTreeToggle',
+                  tabIndex: -1,
+                  title: hasKids ? (node.open ? t('collapse') : t('expand')) : '',
+                  'aria-label': hasKids ? (node.open ? t('collapse') : t('expand')) : '',
+                  disabled: !canToggle,
+                  onClick: function (event) {
+                    event.stopPropagation()
+                    if (!canToggle) return
+                    toggleTreeNode(node.id)
+                  },
+                }, renderCaret(node, hasKids)),
+                h('button', {
+                  type: 'button',
+                  className: 'mc-exTreeLabel',
+                  title: node.id === '/' ? '/' : node.name,
+                  onClick: function () { selectTreeNode(node.id) },
+                  // 左树里也能右键：把它当成一个文件夹项交给同一套菜单，
+                  // 这样「上传到这儿 / 新建文件夹 / 复制路径 / 改名 / 删除」在树里也能用。
+                  onContextMenu: function (event) {
+                    if (node.id === '/' || node.id === '') return
+                    event.preventDefault()
+                    event.stopPropagation()
+                    openMenu(event, { id: node.id, name: node.name, type: 'folder' })
+                  },
+                  onDoubleClick: function () {
+                    // 双击 = 展开（资源管理器里双击目录就是展开）
+                    if (canToggle && !node.open) toggleTreeNode(node.id)
+                  },
+                },
+                  h('span', { className: 'mc-exTreeIcon' }, node.open && kids.length ? '📂' : '📁'),
+                  h('span', { className: 'mc-exTreeName' }, node.id === '/' ? '/' : node.name)
+                )
+              ),
+              node.open && kids.length
+                ? h('div', { className: 'mc-exTreeKids' },
+                    kids.map(function (kid) { return renderTreeNode(kid, depth + 1) })
+                  )
+                : null
+            )
+          }
+
+          function renderExTree() {
+            // 拖过就用用户选的固定宽度，没拖过就让 CSS 自适应
+            var treeStyle = treeWidth !== null ? { width: treeWidth + 'px', flex: '0 0 ' + treeWidth + 'px' } : undefined
+            return h('aside', {
+              className: 'mc-exTree' + (treeShown ? '' : ' mc-exTreeHidden'),
+              style: treeStyle,
+            },
+              h('div', { className: 'mc-exTreeHead' },
+                h('span', {}, t('folders'))
+              ),
+              h('div', { className: 'mc-exTreeScroll' },
+                renderTreeNode(treeRoot, 0)
+              )
+            )
+          }
+
+          /**
+           * 可拖动的分隔线。
+           *
+           * 单独成一个 6px 宽的窄条：中间画 2px 的竖线，
+           * 平时几乎看不见，hover / 拖动时才明显 —— 这样既有可拖区域又不占视觉。
+           */
+          function renderTreeSplitter() {
+            if (!treeShown) return null
+            return h('div', {
+              className: 'mc-exSplitter' + (resizing ? ' mc-exSplitterActive' : ''),
+              role: 'separator',
+              'aria-orientation': 'vertical',
+              title: t('treeResizeHint'),
+              onMouseDown: beginTreeResize,
+              onDoubleClick: resetTreeWidth,
+            },
+              h('span', { className: 'mc-exSplitterBar' })
+            )
+          }
+
+          /** 资源管理器风格的一行。 */
+          function renderExRow(item) {
+            var isFolder = item && item.type === 'folder'
+            var selected = selectedId === item.id
+            // 搜索结果多带 parentPath，用于告诉用户它在哪
+            var where = item.parentPath && item.parentPath !== '/' ? item.parentPath : ''
+            return h('div', {
+              className: 'mc-exRow' + (selected ? ' mc-exRowSelected' : ''),
+              key: item.id,
+              title: item.name + (where ? '\n' + where : ''),
+              onContextMenu: function (event) { openMenu(event, item) },
+              onClick: function () { setSelectedId(item.id) },
+              onDoubleClick: isFolder
+                ? function () { enterFolder(item) }
+                : function () { downloadFile(item) },
+            },
+              h('div', { className: 'mc-exRowName' },
+                h('span', { className: 'mc-exRowIcon' }, isFolder ? '📁' : '📄'),
+                isFolder
+                  ? h('button', {
+                      type: 'button',
+                      className: 'mc-exRowTextBtn',
+                      onClick: function (event) {
+                        event.stopPropagation()
+                        enterFolder(item)
+                      },
+                    }, item.name)
+                  : h('span', { className: 'mc-exRowText' }, item.name)
+              ),
+              h('span', { className: 'mc-exRowSize' }, isFolder ? '—' : formatBytes(item.size)),
+              h('span', { className: 'mc-exRowTime' }, formatDateTime(item.updatedAt))
             )
           }
 
-          // ------------------------------------------------------ 状态卡
-          function renderQuota() {
-            var quota = status ? status.quota : null
-            var total = quota && isFinite(Number(quota.totalBytes)) ? Number(quota.totalBytes) : 0
-            var used = quota && isFinite(Number(quota.usedBytes)) ? Number(quota.usedBytes) : 0
-            var free = quota && isFinite(Number(quota.freeBytes)) ? Number(quota.freeBytes) : Math.max(0, total - used)
+          /** 右侧内容区：搜索结果 / 当前目录 / 空态。 */
+          function renderExMain() {
+            var searching = searchOpen && searchKeyword.trim() !== ''
+            var rows = searching ? searchItems : items
+            var rowNodes = rows.map(renderExRow)
 
-            if (total <= 0) {
-              return h('div', { className: 'mc-barWrap' },
-                h('div', { className: 'mc-kv' },
-                  h('span', { className: 'mc-kvLabel' }, t('quota')),
-                  h('span', { className: 'mc-kvValue' }, t('quotaUnavailable'))
-                ),
-                h('div', { className: 'mc-cardActions' },
-                  h('button', {
-                    className: 'mc-btn mc-btnSmall',
-                    disabled: authBusy,
-                    onClick: openReauth,
-                  }, t('reauthorize'))
-                )
-              )
+            // 列宽走 CSS 变量，行和列头共用同一套，保证永远对齐
+            var colVars = {
+              '--mc-col-size': colSize + 'px',
+              '--mc-col-time': colTime + 'px',
             }
 
-            var percent = Math.min(100, Math.max(0, (used / total) * 100))
-            return h('div', { className: 'mc-barWrap' },
-              h('div', { className: 'mc-kv' },
-                h('span', { className: 'mc-kvLabel' }, t('quota')),
-                h('span', { className: 'mc-kvValue' }, t('used') + ' ' + formatBytes(used) + ' / ' + formatBytes(total))
-              ),
-              h('div', { className: 'mc-bar' },
-                h('div', { className: 'mc-barFill', style: { width: percent.toFixed(1) + '%' } })
+            return h('main', {
+              className: 'mc-exMain' + (mainNarrow ? ' mc-narrow' : ''),
+              style: colVars,
+              ref: mainRef,
+            },
+              h('div', {
+                className: 'mc-exCols' + (colResizing ? ' mc-exColsResizing' : ''),
+                ref: colsRef,
+                // 和列表滚动条同宽，保证列头与行的可用宽度一致（否则固定列会错位）
+                style: scrollbarW > 0 ? { paddingRight: scrollbarW + 'px' } : undefined,
+              },
+                h('span', { className: 'mc-exColsName' }, t('colName')),
+                h('span', { className: 'mc-exColsSize' }, t('colSize')),
+                h('span', { className: 'mc-exColsTime' }, t('colModified')),
+                // 「大小」左边界：拖它改大小列宽
+                h('div', {
+                  className: 'mc-exColHandle' + (colResizing === 'size' ? ' mc-exColHandleActive' : ''),
+                  style: { left: 'calc(100% - var(--mc-col-size) - var(--mc-col-time))' },
+                  role: 'separator',
+                  'aria-orientation': 'vertical',
+                  title: t('colResizeHint'),
+                  onMouseDown: function (event) { beginColResize('size', event) },
+                  onDoubleClick: resetColWidth,
+                }, h('span', { className: 'mc-exColHandleBar' })),
+                // 「大小」右边界：拖它改时间列宽
+                h('div', {
+                  className: 'mc-exColHandle mc-exColHandleTime' + (colResizing === 'time' ? ' mc-exColHandleActive' : ''),
+                  style: { left: 'calc(100% - var(--mc-col-time))' },
+                  role: 'separator',
+                  'aria-orientation': 'vertical',
+                  title: t('colResizeHint'),
+                  onMouseDown: function (event) { beginColResize('time', event) },
+                  onDoubleClick: resetColWidth,
+                }, h('span', { className: 'mc-exColHandleBar' }))
               ),
-              h('div', { className: 'mc-barText' }, formatBytes(used) + ' / ' + formatBytes(total) + ' · ' + percent.toFixed(1) + '%'),
-              h('div', { className: 'mc-kv' },
-                h('span', { className: 'mc-kvLabel' }, t('free')),
-                h('span', { className: 'mc-kvValue' }, formatBytes(free))
+              searching
+                ? h('div', { className: 'mc-exSearchHint' },
+                    h('span', {},
+                      searchBusy
+                        ? t('searching')
+                        : h('span', {}, t('searchIn', { path: currentDirPath() })),
+                      searchNote ? h('span', { className: 'mc-exSearchHit' }, ' · ' + searchNote) : null
+                    ),
+                    h('button', {
+                      type: 'button',
+                      className: 'mc-btn mc-btnSmall',
+                      onClick: clearSearch,
+                    }, t('searchExit'))
+                  )
+                : null,
+              listError ? h('div', { className: 'mc-exBanner mc-exBannerErr' }, listError) : null,
+              notice ? h('div', { className: 'mc-exBanner' }, notice) : null,
+              searchError ? h('div', { className: 'mc-exBanner mc-exBannerErr' }, searchError) : null,
+              folderOpen
+                ? h('div', { className: 'mc-exBanner' },
+                    h('div', { className: 'mc-inlineForm' },
+                      h('input', {
+                        className: 'mc-input',
+                        type: 'text',
+                        autoFocus: true,
+                        value: folderName,
+                        placeholder: t('folderName'),
+                        onChange: function (event) { setFolderName(event.target.value) },
+                        onKeyDown: onEnterKey(createFolder),
+                      }),
+                      h('button', {
+                        type: 'button',
+                        className: 'mc-btn mc-btnSmall mc-btnPrimary',
+                        disabled: busy || !folderName.trim(),
+                        onClick: createFolder,
+                      }, t('create')),
+                      h('button', {
+                        type: 'button',
+                        className: 'mc-btn mc-btnSmall',
+                        disabled: busy,
+                        onClick: function () { setFolderOpen(false); setFolderName('') },
+                      }, t('cancel'))
+                    )
+                  )
+                : null,
+              h('div', {
+                className: 'mc-exScroll',
+                ref: listScrollRef,
+                onScroll: maybeLoadMore,
+                onContextMenu: function (event) { openMenu(event, null) },
+              },
+                (!searching && listLoading && items.length === 0) || (searching && searchBusy && searchItems.length === 0)
+                  ? h('div', { className: 'mc-exEmpty' }, t('loading'))
+                  : null,
+                !searching && !listLoading && items.length === 0
+                  ? h('div', { className: 'mc-exEmpty' }, t('empty'))
+                  : null,
+                searching && !searchBusy && searchItems.length === 0
+                  ? h('div', { className: 'mc-exEmpty' }, searchNote || t('searchNoResult'))
+                  : null,
+                h('div', { className: 'mc-exRows' }, rowNodes),
+                // 触底自动加载的提示：只有真的还有下一批时才出现，且是一行小字，不是按钮
+                !searching && nextCursor
+                  ? h('div', { className: 'mc-exFeedFoot' },
+                      h('span', { className: 'mc-exFeedDot' }),
+                      h('span', {}, listLoading ? t('loading') : t('feedMoreHint'))
+                    )
+                  : null
               )
             )
           }
 
-          function renderExpires() {
-            var expiresAt = status ? status.expiresAt : null
-            if (!expiresAt) return '—'
-            var text = formatDateTime(expiresAt)
-            if (Number(expiresAt) < Date.now()) return t('expired') + ' · ' + text
-            return text
+          /**
+           * 底部传输条。
+           *
+           * 设计要求：平时**看不出来**（和背景同色 / 全透明）；
+           * 传文件时出现颜色并随进度推进；传完后保持颜色 5 秒再渐隐。
+           */
+          function renderExTransfers() {
+            var list = sortedJobs(jobs)
+            var running = list.filter(isJobActive)
+            var failed = list.filter(function (job) { return job && job.state === 'error' })
+            var doneCount = list.filter(function (job) { return job && job.state === 'done' }).length
+
+            var fading = transPhase === 'fade'
+            var visible = transPhase !== 'idle'
+            var indeterminate = running.length > 0 && totalOf(running) === 0
+            var percent = Math.min(100, Math.max(0, Number(transPercent) || 0))
+
+            var fillClass = 'mc-exTransFill'
+            // 褪色阶段保留最后一次的颜色（成功/失败），只是透明度降下去
+            if (transPhase === 'draw') fillClass += ' mc-exTransDraw'
+            else if (transPhase === 'done' || (fading && failed.length === 0)) fillClass += ' mc-exTransDone'
+            else if (transPhase === 'error' || (fading && failed.length > 0)) fillClass += ' mc-exTransErr'
+            if (indeterminate) fillClass += ' mc-exTransIndet'
+
+            // 摘要文字：只在有内容时显示，避免平时占地方。
+            // 褪色阶段**保留文字**，让它跟着进度条一起淡出 ——
+            // 之前是直接把文字置空，看起来就像「闪一下就没了」，很突兀。
+            var summary = ''
+            if (running.length > 0) {
+              var first = running[0]
+              summary = (first.label || t('transfers')) + ' · ' + percent.toFixed(0) + '%'
+              if (running.length > 1) summary += ' · ' + t('transfersMore', { count: running.length - 1 })
+            } else if (transPhase === 'done' || (fading && failed.length === 0)) {
+              summary = t('transfersDone', { count: doneCount })
+            } else if ((transPhase === 'error' || fading) && failed.length) {
+              summary = t('transfersFailed', { count: failed.length })
+            }
+
+            // 褪色时宽度**不收缩**，保持满格，只让颜色融进背景
+            var widthText = fading
+              ? '100%'
+              : indeterminate
+                ? '26%'
+                : percent.toFixed(1) + '%'
+
+            return h('div', {
+              // 浮在面板底部：不管当前在哪个目录、列表滚到哪里，都一定看得见。
+              // 之前它只是 flex 流里的最后一块，很容易被挤出可视区或被内容盖住。
+              className: 'mc-exTransDock' + (visible ? ' mc-exTransDockActive' : ''),
+            },
+              h('div', { className: 'mc-exTrans' + (visible ? ' mc-exTransActive' : '') },
+                h('div', { className: 'mc-exTransTrack' },
+                  h('div', {
+                    className: fillClass,
+                    style: {
+                      width: widthText,
+                      opacity: fading ? 0 : visible ? 1 : 0,
+                    },
+                  })
+                )
+              ),
+              summary
+                ? h('div', { className: 'mc-exTransBar' + (fading ? ' mc-exTransBarFade' : '') },
+                    h('span', { className: 'mc-exTransSummary', title: summary }, summary),
+                    h('span', { className: 'mc-exTransActions' },
+                      running.length > 0
+                        ? h('button', {
+                            type: 'button',
+                            className: 'mc-btn mc-btnSmall',
+                            onClick: function () { fetchTransfers() },
+                          }, t('refresh'))
+                        : null
+                    )
+                  )
+                : null
+            )
           }
 
-          /** 打开显示名编辑：草稿 = 当前存储值（不是脱敏号码）。 */
-          function openDisplayNameEdit() {
-            setDisplayNameDraft(displayName)
-            setDisplayNameError('')
-            setDisplayNameEdit(true)
+          /** 汇总一组任务的 total（进度条不确定态判断用）。 */
+          function totalOf(list) {
+            var sum = 0
+            for (var i = 0; i < list.length; i += 1) sum += Math.max(0, Number(list[i].total) || 0)
+            return sum
           }
 
           /**
-           * 保存显示名。只有「真想存的值写不进 localStorage」才算失败：
-           * 空值存不存得进去都无所谓（清除本来就是回退到脱敏号码）。
+           * 历史传输记录弹层。
+           *
+           * 数据就是 `jobs`（宿主保留最近 30 分钟的任务），按开始时间倒序。
+           * 分三组显示：正在进行 / 已完成 / 失败，这样一眼能看出「还有没有在跑」。
            */
-          function saveDisplayName() {
-            var next = normalizeDisplayName(displayNameDraft)
-            setDisplayName(next)
-            var applied = writeDisplayName(next)
-            if (applied !== next) {
-              setDisplayNameError(t('actFailed', { detail: 'localStorage' }))
-              return
+          function renderHistoryModal() {
+            if (!historyOpen) return null
+            var all = (Array.isArray(jobs) ? jobs : []).slice()
+            all.sort(function (a, b) {
+              return (Number(b.startedAt) || 0) - (Number(a.startedAt) || 0)
+            })
+            var active = all.filter(isJobActive)
+            var done = all.filter(function (job) { return job && job.state === 'done' })
+            var failed = all.filter(function (job) { return job && job.state === 'error' })
+            var cancelled = all.filter(function (job) {
+              return job && (job.state === 'cancelled' || job.state === 'canceled')
+            })
+
+            /**
+             * 任务类型图标：上传=向上箭头，下载=向下箭头。
+             *
+             * 用 SVG 而不是 emoji —— 箭头这类字形在不同字体下大小和粗细差别很大，
+             * 而这两个图标在列表里是**对齐参照**，必须稳定。
+             */
+            function kindIcon(kind) {
+              var k = String(kind || '')
+              var isUpload = k.indexOf('upload') === 0
+              var isDownload = k.indexOf('download') === 0
+              if (!isUpload && !isDownload) return h('span', { className: 'mc-exHistIcon' }, '⇄')
+              return h('span', {
+                className: 'mc-exHistIcon' + (isUpload ? ' mc-exHistIconUp' : ' mc-exHistIconDown'),
+                title: isUpload ? t('upload') : t('menuDownloadLocal'),
+              },
+                h('svg', { viewBox: '0 0 10 12', width: 9, height: 11, 'aria-hidden': 'true' },
+                  // 竖线
+                  h('path', {
+                    d: 'M5 10.5 L5 2',
+                    fill: 'none',
+                    stroke: 'currentColor',
+                    strokeWidth: '1.5',
+                    strokeLinecap: 'round',
+                  }),
+                  // 箭头（上传朝上，下载朝下）
+                  h('path', {
+                    d: isUpload ? 'M2 4.6 L5 1.6 L8 4.6' : 'M2 7.4 L5 10.4 L8 7.4',
+                    fill: 'none',
+                    stroke: 'currentColor',
+                    strokeWidth: '1.5',
+                    strokeLinecap: 'round',
+                    strokeLinejoin: 'round',
+                  })
+                )
+              )
             }
-            setDisplayNameError('')
-            setDisplayNameEdit(false)
-          }
 
-          function clearDisplayName() {
-            setDisplayName('')
-            setDisplayNameDraft('')
-            writeDisplayName('')
-            setDisplayNameError('')
-            setDisplayNameEdit(false)
-          }
+            function stateText(job) {
+              var s = String(job.state || '')
+              if (s === 'done') return t('jobDone')
+              if (s === 'error') return t('jobFailed')
+              if (s === 'cancelled' || s === 'canceled') return t('jobCancelled')
+              if (s === 'queued') return t('jobQueued')
+              if (s === 'scan') return t('jobScanning')
+              return t('jobRunning')
+            }
 
-          /** 取消：不落盘，直接回到卡片。 */
-          function cancelDisplayNameEdit() {
-            setDisplayNameDraft('')
-            setDisplayNameError('')
-            setDisplayNameEdit(false)
+            function progressText(job) {
+              var total = Number(job.total) || 0
+              var doneBytes = Number(job.done) || 0
+              if (total > 0) {
+                return formatBytes(doneBytes) + ' / ' + formatBytes(total) +
+                  ' · ' + Math.min(100, Math.round((doneBytes / total) * 100)) + '%'
+              }
+              return formatBytes(doneBytes)
+            }
+
+            function renderItem(job) {
+              var isErr = job.state === 'error'
+              var isDone = job.state === 'done'
+              var running = isJobActive(job)
+              var total = Number(job.total) || 0
+              var pct = total > 0 ? Math.min(100, ((Number(job.done) || 0) / total) * 100) : 0
+              return h('div', { className: 'mc-exHistItem', key: job.id },
+                h('div', { className: 'mc-exHistRow' },
+                  h('span', { className: 'mc-exHistIcon' }, kindIcon(job.kind)),
+                  h('span', { className: 'mc-exHistName', title: job.label || '' }, job.label || '—'),
+                  h('span', {
+                    className: 'mc-exHistState' + (isErr ? ' mc-exHistStateErr' : isDone ? ' mc-exHistStateOk' : ''),
+                  }, stateText(job))
+                ),
+                h('div', { className: 'mc-exHistMeta' },
+                  h('span', {}, progressText(job)),
+                  h('span', {}, formatDateTime(job.finishedAt || job.startedAt))
+                ),
+                running
+                  ? h('div', { className: 'mc-exHistBar' },
+                      h('div', { className: 'mc-exHistBarFill', style: { width: pct.toFixed(1) + '%' } })
+                    )
+                  : null,
+                isErr && job.error
+                  ? h('div', { className: 'mc-exHistErr', title: String(job.error) }, String(job.error))
+                  : null
+              )
+            }
+
+            function section(title, list, emptyHint) {
+              if (!list.length) return null
+              return h('div', { className: 'mc-exHistSection' },
+                h('div', { className: 'mc-exHistSectionHead' }, title + ' · ' + list.length),
+                list.map(renderItem)
+              )
+            }
+
+            var body
+            if (!all.length) {
+              body = h('div', { className: 'mc-exHistEmpty' }, t('historyEmpty'))
+            } else {
+              body = h('div', { className: 'mc-exHistBody' },
+                section(t('historyActive'), active),
+                section(t('historyDone'), done),
+                section(t('historyFailed'), failed),
+                section(t('historyCancelled'), cancelled)
+              )
+            }
+
+            return h('div', {
+              className: 'mc-overlay',
+              onMouseDown: function (event) {
+                if (event.target === event.currentTarget) setHistoryOpen(false)
+              },
+            }, h('div', { className: 'mc-panel mc-exHistPanel' },
+              h('div', { className: 'mc-exModalHead' },
+                h('h2', { className: 'mc-exModalTitle' }, t('historyTitle')),
+                h('button', {
+                  type: 'button',
+                  className: 'mc-btn mc-btnSmall mc-panelClose',
+                  title: t('cancel'),
+                  onClick: function () { setHistoryOpen(false) },
+                }, '×')
+              ),
+              body,
+              // 右上角已经有 × 关闭了，这里不再放「关闭」按钮（重复）
+              h('div', { className: 'mc-panelFoot' },
+                // 一键清空：只删记录，不动文件。正在传的任务会保留，所以要先说清楚。
+                h('button', {
+                  type: 'button',
+                  className: 'mc-btn mc-btnSmall mc-btnDanger',
+                  disabled: historyBusy || done.length + failed.length + cancelled.length === 0,
+                  title: t('historyClear'),
+                  onClick: clearHistory,
+                }, historyBusy ? t('loading') : t('historyClear')),
+                h('button', {
+                  type: 'button',
+                  className: 'mc-btn mc-btnSmall',
+                  disabled: historyBusy,
+                  onClick: function () { fetchTransfers() },
+                }, t('refresh'))
+              )
+            ))
           }
 
           /**
-           * 账号行：显示名（有的话）或脱敏手机号 accountMasked。
-           * ⚠️ 绝不渲染 status.account —— 那是完整手机号。
-           * 有显示名时，脱敏号码退成下面一行小字（仍然不是完整号码）。
+           * 清空传输记录。
+           *
+           * ⚠️ 只清「记录」，不删网盘/本地文件 —— 宿主那边也只动内存里的任务表。
+           * 正在传输的任务不会被动，所以这个操作随时可以做，不会打断下载。
+           * 二次确认是因为「清空」听起来像删东西，用户需要知道它不删文件。
            */
-          function renderAccountLine() {
-            var text = null
-            if (hasAccount) {
-              text = h('span', { className: 'mc-acctText' }, accountLabel)
-              if (displayName !== '') {
-                text = h('span', { className: 'mc-acctLine' },
-                  h('span', { className: 'mc-acctText' }, accountLabel),
-                  h('span', { className: 'mc-acctSub' }, accountMasked)
-                )
-              }
+          function clearHistory() {
+            if (historyBusy) return
+            if (typeof window !== 'undefined' && typeof window.confirm === 'function') {
+              if (!window.confirm(t('historyClearConfirm'))) return
             }
-            return h('span', { className: 'mc-acctLine' },
-              text,
-              hasAccount ? h('button', {
-                type: 'button',
-                className: 'mc-btn mc-btnSmall',
-                title: t('displayName'),
-                'aria-label': t('displayName'),
-                onClick: openDisplayNameEdit,
-              }, '✎') : null
-            )
+            setHistoryBusy(true)
+            api
+              .clearTransfers()
+              .then(function (doc) {
+                setHistoryBusy(false)
+                if (!doc || doc.ok === false) {
+                  setListError((doc && doc.error) || t('actFailed', { detail: '' }))
+                  return
+                }
+                // 立刻重拉一次，让列表反映真实的剩余记录（正在跑的还在）
+                return fetchTransfers().then(function () {
+                  var removed = Number(doc.removed) || 0
+                  if (removed > 0) {
+                    setNotice(t('historyCleared', { count: removed }))
+                    setTimeout(function () { setNotice('') }, 2400)
+                  }
+                })
+              })
+              .catch(function (failure) {
+                setHistoryBusy(false)
+                setListError(messageOf(failure))
+              })
           }
 
-          function renderStatusCard() {
-            return h('section', { className: 'mc-card', key: 'status' },
-              h('div', { className: 'mc-cardHead' },
-                h('h2', { className: 'mc-cardTitle' }, t('account')),
-                h('div', { className: 'mc-cardActions' },
-                  h('button', { className: 'mc-btn mc-btnSmall', disabled: authBusy, onClick: openReauth }, t('reauthorize')),
-                  h('button', { className: 'mc-btn mc-btnSmall mc-btnDanger', disabled: authBusy, onClick: clearAuth }, t('clearAuth'))
-                )
-              ),
-              h('div', {},
-                KeyValue({ label: t('account'), value: renderAccountLine() }),
-                KeyValue({ label: t('expires'), value: renderExpires() })
+          /** 下载目录弹层：手填 + 系统选择目录。 */
+          function renderDirModal() {
+            if (!dirModal) return null
+            var body = h('div', { className: 'mc-panel' },
+              h('div', { className: 'mc-exModalHead' },
+                h('h2', { className: 'mc-exModalTitle' }, t('downloadDir')),
+                h('button', {
+                  type: 'button',
+                  className: 'mc-btn mc-btnSmall mc-panelClose',
+                  title: t('cancel'),
+                  onClick: closeDirModal,
+                }, '×')
               ),
-              hasAccount && displayNameEdit ? h('div', { className: 'mc-acctForm' },
+              h('div', { className: 'mc-exModalRow' },
                 h('input', {
                   className: 'mc-input',
                   type: 'text',
                   spellCheck: false,
                   autoComplete: 'off',
-                  value: displayNameDraft,
-                  placeholder: t('displayNamePlaceholder'),
-                  'aria-label': t('displayName'),
-                  onChange: function (event) { setDisplayNameDraft(event.target.value) },
-                  onKeyDown: onEnterKey(saveDisplayName),
+                  value: dirDraft,
+                  placeholder: 'D:\\Downloads',
+                  'aria-label': t('downloadDir'),
+                  onChange: function (event) { setDirDraft(event.target.value) },
+                  onKeyDown: onEnterKey(saveDownloadDir),
                 }),
-                h('div', { className: 'mc-cardActions' },
-                  h('button', {
-                    className: 'mc-btn mc-btnSmall mc-btnPrimary',
-                    'aria-label': t('displayNameSave'),
-                    onClick: saveDisplayName,
-                  }, t('displayNameSave')),
-                  h('button', {
-                    className: 'mc-btn mc-btnSmall',
-                    'aria-label': t('displayNameClear'),
-                    onClick: clearDisplayName,
-                  }, t('displayNameClear')),
-                  h('button', {
-                    className: 'mc-btn mc-btnSmall',
-                    onClick: cancelDisplayNameEdit,
-                  }, t('cancel'))
-                ),
-                displayNameError ? h('span', { className: 'mc-acctWarn' }, displayNameError) : null
-              ) : null,
-              authError ? h('div', { className: 'mc-banner mc-bannerErr' }, authError) : null,
-              authNotice ? h('div', { className: 'mc-banner mc-bannerOk' }, authNotice) : null,
-              renderQuota()
+                h('button', {
+                  type: 'button',
+                  className: 'mc-btn mc-btnSmall',
+                  disabled: dirPickBusy,
+                  onClick: pickDownloadDir,
+                }, dirPickBusy ? t('loading') : t('chooseDir'))
+              ),
+              h('p', { className: 'mc-exModalNote' }, t('downloadDirHint')),
+              dirError ? h('div', { className: 'mc-banner mc-bannerErr' }, dirError) : null,
+              h('div', { className: 'mc-panelFoot' },
+                h('button', {
+                  type: 'button',
+                  className: 'mc-btn mc-btnPrimary',
+                  onClick: saveDownloadDir,
+                }, t('save')),
+                h('button', {
+                  type: 'button',
+                  className: 'mc-btn',
+                  onClick: function () {
+                    setDirDraft(status && status.defaultDownloadDir ? status.defaultDownloadDir : '')
+                  },
+                }, t('resetDefault')),
+                h('button', {
+                  type: 'button',
+                  className: 'mc-btn',
+                  onClick: closeDirModal,
+                }, t('cancel'))
+              )
             )
+            return h('div', {
+              className: 'mc-overlay',
+              onMouseDown: function (event) {
+                if (event.target === event.currentTarget) closeDirModal()
+              },
+            }, body)
           }
 
           // ------------------------------------------------------ 文件浏览
@@ -3098,142 +5415,8 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
             }, crumbs)
           }
 
-          function renderRow(item) {
-            var isFolder = item && item.type === 'folder'
-            var actions = []
-            if (isFolder) {
-              actions.push(h('button', {
-                key: 'rename',
-                className: 'mc-btn mc-btnSmall',
-                disabled: busy,
-                onClick: function () { renameEntry(item) },
-              }, t('rename')))
-              actions.push(h('button', {
-                key: 'remove',
-                className: 'mc-btn mc-btnSmall mc-btnDanger',
-                disabled: busy,
-                onClick: function () { removeEntry(item) },
-              }, t('remove')))
-            } else {
-              actions.push(h('button', {
-                key: 'link',
-                className: 'mc-btn mc-btnSmall',
-                disabled: busy || linkBusy === item.id,
-                onClick: function () { openLink(item) },
-              }, linkBusy === item.id ? t('loading') : t('downloadLink')))
-              actions.push(h('button', {
-                key: 'downloadLocal',
-                className: 'mc-btn mc-btnSmall',
-                disabled: busy || jobBusy === item.id,
-                onClick: function () { downloadFile(item) },
-              }, jobBusy === item.id ? t('loading') : t('menuDownloadLocal')))
-            }
-            return h('div', {
-              className: 'mc-row',
-              key: item.id,
-              // 右键任意一行 = 这一行的菜单（文件夹和文件各一套）。
-              onContextMenu: function (event) { openMenu(event, item) },
-            },
-              h('span', { className: 'mc-rowIcon' }, isFolder ? '📁' : '📄'),
-              isFolder
-                ? h('button', {
-                    className: 'mc-rowName mc-rowNameBtn',
-                    title: item.name,
-                    onClick: function () { enterFolder(item) },
-                  }, item.name)
-                : h('span', { className: 'mc-rowName', title: item.name }, item.name),
-              h('span', { className: 'mc-rowMeta mc-rowSize' }, isFolder ? '—' : formatBytes(item.size)),
-              h('span', { className: 'mc-rowMeta mc-rowTime' }, formatDateTime(item.updatedAt)),
-              h('span', { className: 'mc-rowActions' }, actions)
-            )
-          }
-
-          function renderBrowser() {
-            var rows = items.map(renderRow)
-            return h('section', { className: 'mc-card', key: 'browser' },
-              h('div', { className: 'mc-cardHead' },
-                renderCrumbs(),
-                h('div', { className: 'mc-headActions' },
-                  busy ? h('span', { className: 'mc-notice' }, t('loading')) : null,
-                  stack.length > 0 ? h('button', {
-                    className: 'mc-btn mc-btnSmall',
-                    disabled: busy,
-                    onClick: goUp,
-                  }, t('up')) : null,
-                  h('button', {
-                    className: 'mc-btn mc-btnSmall',
-                    disabled: busy,
-                    onClick: function () {
-                      setFolderOpen(!folderOpen)
-                      setFolderName('')
-                    },
-                  }, t('newFolder'))
-                )
-              ),
-              folderOpen ? h('div', { className: 'mc-inlineForm' },
-                h('input', {
-                  className: 'mc-input',
-                  type: 'text',
-                  autoFocus: true,
-                  value: folderName,
-                  placeholder: t('folderName'),
-                  onChange: function (event) { setFolderName(event.target.value) },
-                  onKeyDown: onEnterKey(createFolder),
-                }),
-                h('button', {
-                  className: 'mc-btn mc-btnSmall mc-btnPrimary',
-                  disabled: busy || !folderName.trim(),
-                  onClick: createFolder,
-                }, t('create')),
-                h('button', {
-                  className: 'mc-btn mc-btnSmall',
-                  disabled: busy,
-                  onClick: function () { setFolderOpen(false); setFolderName('') },
-                }, t('cancel'))
-              ) : null,
-              listError ? h('div', { className: 'mc-banner mc-bannerErr' }, listError) : null,
-              notice ? h('div', { className: 'mc-banner mc-bannerOk' }, notice) : null,
-              // 空白处右键 = 新建 / 刷新 / 上传；行上的右键会 stopPropagation，不会传到这里。
-              h('div', {
-                className: 'mc-listArea',
-                onContextMenu: function (event) { openMenu(event, null) },
-              },
-                listLoading && items.length === 0 ? h('div', { className: 'mc-loading' }, t('loading')) : null,
-                !listLoading && items.length === 0 ? h('div', { className: 'mc-empty' }, t('empty')) : null,
-                h('div', { className: 'mc-rows' }, rows)
-              ),
-              nextCursor ? h('div', { className: 'mc-cardActions' },
-                h('button', {
-                  className: 'mc-btn mc-btnSmall',
-                  disabled: listLoading || busy,
-                  onClick: function () { fetchListing(nextCursor, true) },
-                }, listLoading ? t('loading') : t('more'))
-              ) : null
-            )
-          }
-
-          // ------------------------------------------------------ 下载目录 / 上传 / 传输
-          function renderDownloadDirCard() {
-            return h('section', { className: 'mc-card', key: 'downloadDir' },
-              h('div', { className: 'mc-cardHead' },
-                h('h2', { className: 'mc-cardTitle' }, t('downloadDir'))
-              ),
-              h('div', { className: 'mc-inlineForm' },
-                h('input', {
-                  className: 'mc-input',
-                  type: 'text',
-                  spellCheck: false,
-                  autoComplete: 'off',
-                  value: downloadDir,
-                  placeholder: 'D:\\Downloads',
-                  onChange: function (event) { updateDownloadDir(event.target.value) },
-                })
-              ),
-              h('p', { className: 'mc-hint' }, t('downloadDirHint'))
-            )
-          }
-
-          /** 拖拽上传的逐文件进度行（浏览器 → Host 这一段）。 */
+// ------------------------------------------------------ 下载目录 / 上传 / 传输
+/** 拖拽上传的逐文件进度行（浏览器 → Host 这一段）。 */
           function renderUrlLines() {
             if (!urlItems || urlItems.length === 0) return null
             return h('div', { className: 'mc-urlLines' }, urlItems.map(function (entry) {
@@ -3428,72 +5611,7 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
             )
           }
 
-          function renderJob(job) {
-            var total = Number(job.total)
-            var done = Number(job.done)
-            if (!isFinite(total) || total < 0) total = 0
-            if (!isFinite(done) || done < 0) done = 0
-            var running = job.state === 'running'
-            var failed = job.state === 'error'
-            var finished = job.state === 'done'
-            // 只有「还在跑」的时候才拿 done/total 算百分比：宿主偶尔会少记几个字节，
-            // 已完成的任务被算成 54.9% 看着就像坏了；done > total 也夹到 100%。
-            var known = running && total > 0
-            var percent = 0
-            if (known) {
-              var capped = Math.min(done, total)
-              percent = Math.min(100, Math.max(0, (capped / total) * 100))
-            }
-            var phase = PHASE_KEYS[job.phase] ? t(PHASE_KEYS[job.phase]) : ''
-            var stateText = finished
-              ? '✅ ' + t('transferDone')
-              : failed
-                ? '❌ ' + t('transferFailed')
-                : t('transferRunning')
-            var meta = []
-            if (phase) meta.push(phase)
-            if (job.currentFile) meta.push(String(job.currentFile))
-            if (job.fileCount !== null && job.fileCount !== undefined && isFinite(Number(job.fileCount))) {
-              meta.push(String(job.fileCount) + ' ' + t('filesUnit'))
-            }
-            // 已完成 = 100% 实心条；失败 = 明说一句，不给进度条（免得看着像卡住了）；
-            // 进行中但没有 total = 流动条。
-            var bar = null
-            var barText = ''
-            if (finished) {
-              bar = h('div', { className: 'mc-bar' }, h('div', { className: 'mc-barFill', style: { width: '100%' } }))
-              barText = formatBytes(total > 0 ? total : done) + ' / ' + formatBytes(total > 0 ? total : done) + ' · 100.0%'
-            } else if (failed) {
-              barText = t('transferFailed')
-            } else if (known) {
-              bar = h('div', { className: 'mc-bar' }, h('div', { className: 'mc-barFill', style: { width: percent.toFixed(1) + '%' } }))
-              barText = formatBytes(done) + ' / ' + formatBytes(total) + ' · ' + percent.toFixed(1) + '%'
-            } else {
-              bar = h('div', { className: 'mc-bar mc-barIndet' }, h('div', { className: 'mc-barFill' }))
-              barText = formatBytes(done) + ' · ' + t('progressUnknown')
-            }
-            return h('div', { className: 'mc-job', key: job.id },
-              h('div', { className: 'mc-jobHead' },
-                h('span', { className: 'mc-jobIcon' }, JOB_ICONS[job.kind] || '⇄'),
-                h('span', { className: 'mc-jobLabel', title: job.label || job.id }, job.label || job.id),
-                h('span', { className: 'mc-jobState' }, stateText),
-                running ? h('button', {
-                  className: 'mc-btn mc-btnSmall',
-                  disabled: cancelBusy === job.id,
-                  onClick: function () { cancelJob(job) },
-                }, cancelBusy === job.id ? t('loading') : t('transferCancel')) : null
-              ),
-              h('div', { className: 'mc-barWrap' },
-                bar,
-                h('div', { className: 'mc-barText' }, barText)
-              ),
-              meta.length > 0 ? h('div', { className: 'mc-jobMeta' }, meta.join(' · ')) : null,
-              // 任务失败（含没授权）只在这里出现，必须原样显示，不能吞。
-              failed && job.error ? h('div', { className: 'mc-jobErr' }, String(job.error)) : null
-            )
-          }
-
-          /** 新的在前，最多 TRANSFER_VISIBLE 条。 */
+/** 新的在前，最多 TRANSFER_VISIBLE 条。 */
           function sortedJobs(list) {
             var copy = (Array.isArray(list) ? list.slice() : []).filter(function (job) {
               return job && job.id
@@ -3504,67 +5622,98 @@ if (typeof window !== 'undefined' && window.__ModuleLoader__ && typeof window.__
             return copy.slice(0, TRANSFER_VISIBLE)
           }
 
-          function renderTransfersCard() {
-            var list = sortedJobs(jobs)
-            return h('section', { className: 'mc-card', key: 'transfers' },
-              h('div', { className: 'mc-cardHead' },
-                h('h2', { className: 'mc-cardTitle' }, t('transfers')),
-                h('div', { className: 'mc-cardActions' },
-                  h('button', {
-                    className: 'mc-btn mc-btnSmall',
-                    onClick: function () { fetchTransfers() },
-                  }, t('refresh'))
-                )
-              ),
-              list.length === 0
-                ? h('div', { className: 'mc-empty' }, t('noTransfers'))
-                : h('div', {}, list.map(renderJob))
+// ------------------------------------------------------ 组装
+          //
+          // 两条完全不同的形态：
+          //   · 未登录 / 首屏加载 → 原来的居中卡片流（登录页按用户要求**不改**）
+          //   · 已登录         → 资源管理器（顶部栏 + 左树 + 右列表 + 底部传输条）
+          if (!status && statusLoading) {
+            return h('div', { className: 'mc-root' },
+              h('div', { className: 'mc-loading' }, t('loading'))
             )
           }
 
-          // ------------------------------------------------------ 组装
-          var body
-          if (!status && statusLoading) {
-            body = h('div', { className: 'mc-loading' }, t('loading'))
-          } else if (!authorized) {
-            body = h('div', { className: 'mc-stack' }, renderAuthCard())
-          } else {
-            body = h('div', { className: 'mc-stack' },
-              renderStatusCard(),
-              reauthOpen ? renderAuthCard() : null,
-              renderBrowser(),
-              renderDownloadDirCard(),
-              renderTransfersCard(),
-              h('div', { className: 'mc-footer' },
-                t('host') + ': ' + ((status && status.host) || '—') +
-                ' · ' + t('credentialPath') + ': ' + ((status && status.credentialPath) || '—')
-              )
+          if (!authorized) {
+            return h('div', { className: 'mc-root' },
+              h('div', { className: 'mc-head' },
+                h('div', {},
+                  h('h1', { className: 'mc-title' }, t('title')),
+                  h('p', { className: 'mc-subtitle' }, t('subtitle'))
+                )
+              ),
+              statusError ? h('div', { className: 'mc-banner mc-bannerErr' }, statusError) : null,
+              h('div', { className: 'mc-stack' }, renderAuthCard()),
+              renderMenu(),
+              renderUploadPanel(),
+              renderMovePicker()
             )
           }
 
-          return h('div', { className: 'mc-root' },
-            h('div', { className: 'mc-head' },
-              h('div', {},
-                h('h1', { className: 'mc-title' }, t('title')),
-                h('p', { className: 'mc-subtitle' }, t('subtitle'))
+          // ---- 已登录：资源管理器 ----
+          /**
+           * 根节点高度。
+           *
+           * 🔴 这里踩过大坑：CSS 的 `height:100%` 只有在**父元素有确定高度**时才生效。
+           * DSH 的 view 容器不一定给高度，于是 `height:100%` 静默失效，
+           * 面板按内容高度撑开 → 整个面板变成一条长页面 →
+           *   · 列表内部永远滚不起来（它根本没被压缩）；
+           *   · 底部进度条被推到内容最底下，要拖外层滚动条到底才看得见。
+           * 这完全对得上用户看到的现象。
+           *
+           * 所以这里改成：挂载后**实测父容器的像素高度**，直接写死到根节点上，
+           * 并用 ResizeObserver 跟随侧栏折叠/窗口缩放变化。CSS 的 100% 只当兜底。
+           */
+          return h('div', {
+            className: 'mc-root mc-root-ide',
+            ref: ideRootRef,
+            style: ideHeight ? { height: ideHeight + 'px', minHeight: ideHeight + 'px' } : undefined,
+            /**
+             * ⚠️ 这里**不要**挂 onWheel 去拦滚轮。
+             *
+             * 之前试过：为了不让滚动链把外层对话页带跑，在根节点上
+             * stopPropagation 掐掉滚轮。结果列表直接滚不动了 ——
+             * 滚动虽然主要是浏览器默认行为，但一旦中途 stopPropagation，
+             * 依赖冒泡的滚动逻辑（以及某些输入法/手势路径）就断了。
+             *
+             * 现在改成纯 CSS 方案：所有滚动容器加 `overscroll-behavior: contain`，
+             * 既能断开滚动链，又完全不干预原生滚动。
+             */
+          },
+            h('div', { className: 'mc-explorer' },
+              renderExTop(),
+              // 重新授权时把登录卡以浮层形式盖上来，不打乱布局
+              reauthOpen ? h('div', {
+                className: 'mc-overlay',
+                onMouseDown: function (event) {
+                  if (event.target === event.currentTarget) setReauthOpen(false)
+                },
+              }, h('div', { className: 'mc-panel' },
+                h('div', { className: 'mc-exModalHead' },
+                  h('h2', { className: 'mc-exModalTitle' }, t('reauthorize')),
+                  h('button', {
+                    type: 'button',
+                    className: 'mc-btn mc-btnSmall mc-panelClose',
+                    title: t('cancel'),
+                    onClick: function () { setReauthOpen(false) },
+                  }, '×')
+                ),
+                renderAuthCard()
+              )) : null,
+              statusError ? h('div', { className: 'mc-exBanner mc-exBannerErr' }, statusError) : null,
+              authError ? h('div', { className: 'mc-exBanner mc-exBannerErr' }, authError) : null,
+              h('div', { className: 'mc-exBody' },
+                renderExTree(),
+                renderTreeSplitter(),
+                renderExMain()
               ),
-              h('div', { className: 'mc-headActions' },
-                authNotice && authorized ? h('span', { className: 'mc-notice' }, authNotice) : null,
-                h('button', {
-                  className: 'mc-btn',
-                  disabled: statusLoading,
-                  onClick: function () { loadStatus() },
-                }, statusLoading ? t('loading') : t('refresh'))
-              )
+              renderExTransfers()
             ),
-            statusError ? h('div', { className: 'mc-banner mc-bannerErr' }, statusError) : null,
-            body,
-            // 浮层菜单挂在最后，fixed 定位，不会把面板挤变形。
+            // 浮层：菜单 / 上传 / 转移 / 下载目录 / 历史记录
             renderMenu(),
-            // 上传面板再压在最后：它的浮层 z-index 比菜单高。
             renderUploadPanel(),
-            // 转移面板同理（同一层级，同时只会开一个）。
-            renderMovePicker()
+            renderMovePicker(),
+            renderDirModal(),
+            renderHistoryModal()
           )
         }
       }