feat: 文件管理器 + Windows兼容 + SVG主题适配 (v0.6.0)

新增: - services/web_panel/routes/files.py — 全功能文件管理后端API (11个端点) - pages/files.html + files.js — 文件管理前端 (浏览/编辑/上传/删除/右键菜单) - 插件Picker API: window.open+postMessage唤出文件选择器 - 符号链接目录双层面包屑 (逻辑路径+物理路径) - 文件系统全访问+跨平台 (Linux/Windows/macOS) - permission_rules.yaml新增4个filemanager.*权限修复: - SVG fill=currentColor 日夜模式自适应 - 特殊目录容错 (/dev/fd损坏符号链接/proc) - 面包屑每层级独立可点击+可编辑路径跳转 - ..行返回上级+data-is-dir补全 - rmlint→lstat回退损坏符号链接不炸页面文档: - 插件开发指南新增第八章(文件管理器集成) - 开发踩坑记录新增4条(特殊目录/双面包屑/SVG颜色/Windows) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-11 18:23:32 +08:00
parent 4a989bf50f
commit fd715eac2b
12 changed files with 1015 additions and 9 deletions
@@ -64,6 +64,7 @@

 /* ── Reset ── */
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+svg{fill:currentColor}
 body{
  background:var(--bg);color:var(--text);
  font-family:"Google Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
@@ -189,7 +190,7 @@ h3{font-size:1rem;font-weight:500;letter-spacing:.15px}
 .nav-item:hover{background:rgba(208,188,255,.08);color:var(--text)}
 .nav-item.active{background:var(--primary-container);color:var(--md-sys-color-on-primary-container)}
 .nav-item .nav-icon{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
-.nav-item svg{width:20px;height:20px;flex-shrink:0}
+.nav-item svg{width:20px;height:20px;flex-shrink:0;fill:currentColor}
 .nav-item .nav-label{overflow:hidden;text-overflow:ellipsis}
 .toggle-sidebar{
  margin-top:auto;padding:16px;text-align:center;cursor:pointer;
@@ -426,3 +427,56 @@ h3{font-size:1rem;font-weight:500;letter-spacing:.15px}

 /* ── Menu reveal animation for login error ── */
 .err-msg{transition:opacity .3s}
+
+/* ═══════════════════════════════════════════
+   File Manager
+   ═══════════════════════════════════════════ */
+.fm-container{display:flex;flex-direction:column;height:calc(100vh - var(--topbar-h) - 48px);gap:12px}
+.fm-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
+.fm-path-bar{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
+.fm-path-input{width:100%;padding:8px 12px;background:var(--md-sys-color-surface-container-lowest);border:1px solid var(--outline);border-radius:var(--shape-xs);color:var(--text);font-family:"JetBrains Mono",monospace;font-size:12px;outline:none;transition:border-color .2s}
+.fm-path-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(208,188,255,.15)}
+.fm-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
+.fm-breadcrumb::-webkit-scrollbar{display:none}
+.fm-crumb{white-space:nowrap;padding:4px 10px;border-radius:var(--shape-full);cursor:pointer;font-size:.82rem;color:var(--text-dim);transition:.15s}
+.fm-crumb:hover{background:rgba(208,188,255,.1);color:var(--primary)}
+.fm-crumb-sep{color:var(--outline);font-size:.7rem;flex-shrink:0}
+.fm-resolved-crumbs{display:flex;align-items:center;gap:4px;font-size:.75rem;opacity:.8;flex-basis:100%}
+.fm-actions{display:flex;gap:6px;flex-shrink:0;align-items:center}
+.fm-toggle{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--text-dim);cursor:pointer}
+.fm-toggle input{margin:0}
+.fm-list{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--outline) transparent}
+.fm-row{display:grid;grid-template-columns:32px 1fr 100px 140px;align-items:center;padding:10px 12px;cursor:pointer;border-radius:var(--shape-xs);transition:background .12s;gap:8px;font-size:.88rem}
+.fm-row:hover{background:rgba(208,188,255,.06)}
+.fm-row.fm-dir{font-weight:500}
+.fm-row.fm-parent{border-bottom:1px solid var(--outline);margin-bottom:2px;font-weight:600}
+.fm-icon{font-size:1.2rem;text-align:center}
+.fm-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fm-size{text-align:right;color:var(--text-dim);font-size:.8rem;font-variant-numeric:tabular-nums}
+.fm-date{text-align:right;color:var(--text-dim);font-size:.78rem}
+
+/* Editor overlay */
+.fm-editor-overlay{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:var(--md-sys-color-surface-container-high)}
+.fm-editor-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--outline);background:var(--bg-card)}
+.fm-editor-header span{font-weight:500;color:var(--primary)}
+.fm-editor-header div{display:flex;gap:8px}
+.fm-editor-overlay textarea{flex:1;padding:16px 20px;background:var(--md-sys-color-surface-container-lowest);color:var(--text);border:none;outline:none;resize:none;font-family:"JetBrains Mono","Fira Code",monospace;font-size:13px;line-height:1.6;tab-size:4}
+
+/* Dialog overlay */
+.fm-dialog-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5)}
+.fm-dialog{background:var(--md-sys-color-surface-container-high);border-radius:var(--shape-md);padding:24px;min-width:320px;max-width:450px;box-shadow:var(--md-sys-elevation-4)}
+
+/* Context menu */
+.fm-context{position:fixed;z-index:250;background:var(--md-sys-color-surface-container-high);border-radius:var(--shape-xs);box-shadow:var(--md-sys-elevation-3);min-width:160px;padding:4px 0;overflow:hidden}
+.fm-context-item{padding:8px 16px;cursor:pointer;font-size:.82rem;color:var(--text);transition:background .12s}
+.fm-context-item:hover{background:rgba(208,188,255,.1)}
+.fm-context-item.danger{color:var(--error)}
+.fm-context-item.danger:hover{background:rgba(242,184,181,.1)}
+.fm-context-sep{height:1px;background:var(--outline);margin:4px 0}
+
+/* Responsive */
+@media(max-width:768px){
+  .fm-row{grid-template-columns:28px 1fr 70px}
+  .fm-date{display:none}
+  .fm-actions{flex-wrap:wrap}
+}
@@ -42,6 +42,10 @@
                <svg width="20" height="20" viewBox="0 0 24 24"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
                <span>反向代理</span>
            </a>
+            <a class="nav-item" data-page="files">
+                <svg width="20" height="20" viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-1 4H5V8h14v2zm0 2v6H5v-6h14z"/></svg>
+                <span>文件管理</span>
+            </a>
            <div class="toggle-sidebar" onclick="toggleSidebar()">☰</div>
        </aside>

@@ -74,7 +74,7 @@
        <!-- 3. 快捷操作 -->
        <div class="side-card">
            <h3>
-                <svg width="18" height="18" viewBox="0 0 24 24" style="vertical-align:-3px;margin-right:6px"><path fill="var(--primary)" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41L9.25 5.35c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
+                <svg width="18" height="18" viewBox="0 0 24 24" style="vertical-align:-3px;margin-right:6px"><path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41L9.25 5.35c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
                快捷操作
            </h3>
            <button class="btn btn-sm btn-tonal" style="width:100%;margin-bottom:6px" onclick="window.PluginsModule?.refresh()">
@@ -0,0 +1,66 @@
+<!-- File Manager Page -->
+<div class="fm-container">
+    <!-- Top bar: editable path + actions -->
+    <div class="fm-toolbar">
+        <div class="fm-path-bar">
+            <input class="fm-path-input" id="fm-path-input" type="text" spellcheck="false" title="输入路径后回车跳转">
+            <div class="fm-breadcrumb" id="fm-breadcrumb"></div>
+        </div>
+        <div class="fm-actions">
+            <label class="fm-toggle">
+                <input type="checkbox" id="fm-hidden" onchange="FilesModule.refresh()">
+                <span>显示隐藏</span>
+            </label>
+            <button class="btn btn-sm btn-outlined" onclick="FilesModule.createFile()">
+                <svg width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 2l5 5h-5V4zM8 14h8v2H8v-2zm0-4h8v2H8v-2z"/></svg>
+                新建文件
+            </button>
+            <button class="btn btn-sm btn-outlined" onclick="FilesModule.createDir()">
+                <svg width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M20 6h-8l-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-2 4h-3v3h-2v-3h-3V8h3V5h2v3h3v2z"/></svg>
+                新建文件夹
+            </button>
+            <button class="btn btn-sm btn-tonal" onclick="document.getElementById('fm-upload-input').click()">
+                <svg width="14" height="14" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>
+                上传
+            </button>
+            <input type="file" id="fm-upload-input" multiple style="display:none" onchange="FilesModule.upload(this.files)">
+        </div>
+    </div>
+
+    <!-- File list -->
+    <div class="fm-list" id="fm-list">
+        <div style="text-align:center;color:var(--text-dim);padding:40px">加载中...</div>
+    </div>
+
+    <!-- Editor overlay -->
+    <div class="fm-editor-overlay" id="fm-editor" style="display:none">
+        <div class="fm-editor-header">
+            <span id="fm-editor-title">编辑文件</span>
+            <div>
+                <button class="btn btn-sm btn-tonal" onclick="FilesModule.saveFile()">💾 保存</button>
+                <button class="btn btn-sm btn-outlined" onclick="FilesModule.closeEditor()">✕ 关闭</button>
+            </div>
+        </div>
+        <textarea id="fm-editor-textarea" spellcheck="false"></textarea>
+    </div>
+
+    <!-- Delete confirm dialog -->
+    <div class="fm-dialog-overlay" id="fm-dialog" style="display:none">
+        <div class="fm-dialog">
+            <p id="fm-dialog-msg">确认删除？</p>
+            <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:16px">
+                <button class="btn btn-sm btn-outlined" onclick="FilesModule.closeDialog()">取消</button>
+                <button class="btn btn-sm btn-danger" id="fm-dialog-confirm" onclick="FilesModule.confirmDelete()">删除</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Context menu -->
+    <div class="fm-context" id="fm-context" style="display:none">
+        <div class="fm-context-item" onclick="FilesModule.ctxDownload()">⬇ 下载</div>
+        <div class="fm-context-item" onclick="FilesModule.ctxRename()">✏ 重命名</div>
+        <div class="fm-context-item" onclick="FilesModule.ctxEdit()">📝 编辑</div>
+        <div class="fm-context-sep"></div>
+        <div class="fm-context-item danger" onclick="FilesModule.ctxDelete()">🗑 删除</div>
+    </div>
+</div>
@@ -0,0 +1,371 @@
+/* ── File Manager Module ── */
+window.FilesModule = {
+    currentPath: '',
+    contextTarget: null,
+    toDelete: null,
+    pickerMode: false,
+    pickerCallback: null,
+
+    init: function() {
+        var self = this;
+        var params = new URLSearchParams(window.location.search);
+        if (params.get('picker') === '1') {
+            self.pickerMode = true;
+            self.pickerMode = params.get('mode') || 'dir';
+        }
+        window.addEventListener('message', function(e) {
+            try {
+                var d = JSON.parse(e.data);
+                if (d.action === 'fm-picker-open') {
+                    self.pickerMode = true;
+                    self.pickerMode = d.mode || 'dir';
+                    self.pickerCallback = d.callback_id || null;
+                    self.refresh();
+                }
+            } catch(ex) {}
+        });
+
+        // Path input: Enter to jump
+        var input = document.getElementById('fm-path-input');
+        input.onkeydown = function(e) {
+            if (e.key === 'Enter') {
+                var p = input.value.trim();
+                if (p) self._jumpTo(p);
+            }
+        };
+
+        self.refresh();
+    },
+
+    /* ── API helpers ── */
+    _api: function(url, opts) {
+        opts = opts || {};
+        opts.credentials = 'include';
+        return fetch(url, opts).then(function(r) {
+            if (!r.ok) throw new Error(r.status + ' ' + r.statusText);
+            return r.json();
+        });
+    },
+    _get: function(url) { return this._api(url); },
+    _post: function(url, body) {
+        return this._api(url, {method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body)});
+    },
+
+    /* ── Jump to path (with existence check) ── */
+    _jumpTo: function(path) {
+        var self = this;
+        // Probe: try to list the target path
+        this._get('./api/files/info?path=' + encodeURIComponent(path))
+            .then(function(info) {
+                if (info.error) { self._pathError(info.error); return; }
+                if (info.is_dir) {
+                    self.currentPath = info.path;
+                    self.refresh();
+                } else {
+                    self._pathError('路径是文件，不是目录');
+                }
+            }).catch(function(e) {
+                self._pathError('目录不存在或无权限访问: ' + path);
+            });
+    },
+
+    _pathError: function(msg) {
+        var list = document.getElementById('fm-list');
+        list.innerHTML = '<div style="text-align:center;color:var(--error);padding:40px">' +
+            '⚠ ' + this._esc(msg) + '</div>';
+        // Still update the input and breadcrumb to show what was attempted
+        document.getElementById('fm-breadcrumb').innerHTML =
+            '<span class="fm-crumb" style="color:var(--error)">' + this._esc(msg) + '</span>';
+    },
+
+    navigate: function(path) {
+        this.currentPath = path || '';
+        this.refresh();
+    },
+
+    refresh: function() {
+        var self = this;
+        var showHidden = document.getElementById('fm-hidden')?.checked ? '1' : '0';
+        self._get('./api/files/list?path=' + encodeURIComponent(self.currentPath) + '&show_hidden=' + showHidden)
+            .then(function(d) {
+                self._render(d);
+            }).catch(function(e) {
+                document.getElementById('fm-list').innerHTML =
+                    '<div style="text-align:center;color:var(--error);padding:40px">加载失败: ' + self._esc(e.message) + '</div>';
+            });
+    },
+
+    /* ── Render ── */
+    _render: function(d) {
+        var self = this;
+
+        // Update editable path input
+        var input = document.getElementById('fm-path-input');
+        input.value = d.current || '';
+
+        // Breadcrumbs (logical path)
+        var bc = document.getElementById('fm-breadcrumb');
+        var html = self._buildBreadcrumbHTML(d.breadcrumbs);
+        // Resolved breadcrumbs — show as second row when symlink redirect
+        if (d.resolved_breadcrumbs) {
+            html += '<div class="fm-resolved-crumbs">' +
+                '<span class="fm-crumb-sep" style="color:var(--primary)">↳</span>' +
+                self._buildBreadcrumbHTML(d.resolved_breadcrumbs) + '</div>';
+        }
+        bc.innerHTML = html;
+        bc.querySelectorAll('.fm-crumb').forEach(function(el) {
+            el.onclick = function() { self.navigate(this.dataset.path); };
+        });
+
+        // File list
+        var list = document.getElementById('fm-list');
+        var rows = '';
+
+        // ".." row for parent (unless at filesystem root)
+        if (d.parent && d.parent !== d.current) {
+            rows += '<div class="fm-row fm-dir fm-parent" data-path="' + self._escAttr(d.parent) + '" data-is-dir="1">' +
+                '<span class="fm-icon">📂</span>' +
+                '<span class="fm-name" style="font-weight:600">..</span>' +
+                '<span class="fm-size"></span>' +
+                '<span class="fm-date"></span>' +
+                '</div>';
+        }
+
+        if (d.items && d.items.length) {
+            d.items.forEach(function(item) {
+                if (item.broken) {
+                    // Broken symlink or unreadable entry — show as disabled
+                    rows += '<div class="fm-row fm-broken" data-path="">' +
+                        '<span class="fm-icon">❓</span>' +
+                        '<span class="fm-name" style="color:var(--error)" title="损坏的链接或无法访问">' + self._esc(item.name) + '</span>' +
+                        '<span class="fm-size">—</span>' +
+                        '<span class="fm-date">—</span></div>';
+                    return;
+                }
+                var icon = item.is_dir ? '📁' : FilesModule._fileIcon(item.ext);
+                var sizeStr = item.is_dir ? '—' : FilesModule._fmtSize(item.size);
+                rows += '<div class="fm-row' + (item.is_dir ? ' fm-dir' : '') +
+                    '" data-path="' + self._escAttr(item.path) +
+                    '" data-is-dir="' + (item.is_dir?'1':'0') + '">' +
+                    '<span class="fm-icon">' + icon + '</span>' +
+                    '<span class="fm-name">' + self._esc(item.name) + '</span>' +
+                    '<span class="fm-size">' + sizeStr + '</span>' +
+                    '<span class="fm-date">' + (item.mtime_str || '') + '</span>' +
+                    '</div>';
+            });
+        }
+        if (!rows) {
+            list.innerHTML = '<div style="text-align:center;color:var(--text-dim);padding:40px">空目录</div>';
+        } else {
+            list.innerHTML = rows;
+        }
+
+        // Row click handlers
+        list.querySelectorAll('.fm-row').forEach(function(row) {
+            row.onclick = function(e) {
+                var p = this.dataset.path;
+                var isDir = this.dataset.isDir === '1';
+                if (isDir) {
+                    self.navigate(p);
+                } else if (self.pickerMode) {
+                    self._pickResult(p);
+                }
+            };
+            row.oncontextmenu = function(e) {
+                e.preventDefault();
+                self._showContext(e, {
+                    path: this.dataset.path,
+                    isDir: this.dataset.isDir === '1',
+                    name: this.querySelector('.fm-name').textContent
+                });
+            };
+        });
+
+        // Close context on outside click
+        document.onclick = function() {
+            document.getElementById('fm-context').style.display = 'none';
+        };
+
+        // Picker banner
+        if (self.pickerMode) {
+            var banner = document.getElementById('fm-picker-banner');
+            if (!banner) {
+                banner = document.createElement('div');
+                banner.id = 'fm-picker-banner';
+                banner.innerHTML = '<div style="display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--primary-container);color:var(--md-sys-color-on-primary-container);border-radius:var(--shape-xs);margin-bottom:8px;font-size:.85rem">' +
+                    '<span>📂 选择' + (self.pickerMode === 'file' ? '文件' : '目录') + '模式</span>' +
+                    '<button class="btn btn-sm btn-filled" onclick="FilesModule._pickResult(FilesModule.currentPath)" style="margin-left:auto">选择当前目录</button>' +
+                    '<button class="btn btn-sm btn-outlined" onclick="FilesModule._cancelPicker()">取消</button>' +
+                    '</div>';
+                list.parentNode.insertBefore(banner, list);
+            }
+        }
+    },
+
+    /* ── Picker ── */
+    _pickResult: function(path) {
+        if (window.opener) {
+            window.opener.postMessage(JSON.stringify({action:'fm-picked', path: path, callback_id: this.pickerCallback}), '*');
+            window.close();
+        } else if (window.parent !== window) {
+            window.parent.postMessage(JSON.stringify({action:'fm-picked', path: path, callback_id: this.pickerCallback}), '*');
+        } else {
+            navigator.clipboard?.writeText(path);
+            alert('已选择: ' + path + '\n(路径已复制到剪贴板)');
+            this.pickerMode = false;
+            this.refresh();
+        }
+    },
+    _cancelPicker: function() {
+        this.pickerMode = false;
+        this.refresh();
+    },
+
+    /* ── Create ── */
+    createFile: function() {
+        var self = this;
+        var name = prompt('新建文件名:');
+        if (!name) return;
+        this._post('./api/files/touch', {path: this.currentPath, name: name})
+            .then(function() { self.refresh(); })
+            .catch(function(e) { alert('创建失败: ' + e.message); });
+    },
+    createDir: function() {
+        var self = this;
+        var name = prompt('新建文件夹名:');
+        if (!name) return;
+        this._post('./api/files/mkdir', {path: this.currentPath, name: name})
+            .then(function() { self.refresh(); })
+            .catch(function(e) { alert('创建失败: ' + e.message); });
+    },
+    upload: function(files) {
+        var self = this;
+        if (!files || !files.length) return;
+        var form = new FormData();
+        for (var i = 0; i < files.length; i++) form.append('file', files[i]);
+        fetch('./api/files/upload?path=' + encodeURIComponent(self.currentPath), {method:'POST', credentials:'include', body:form})
+            .then(function(r) { return r.json(); })
+            .then(function(d) {
+                if (d.ok) self.refresh();
+                else alert('上传失败: ' + (d.error || 'unknown'));
+            }).catch(function(e) { alert('上传失败: ' + e.message); });
+    },
+
+    /* ── Editor ── */
+    openEditor: function(path, name) {
+        var self = this;
+        this._get('./api/files/read?path=' + encodeURIComponent(path))
+            .then(function(d) {
+                document.getElementById('fm-editor-title').textContent = '📝 ' + (name || d.name);
+                document.getElementById('fm-editor-textarea').value = d.content;
+                document.getElementById('fm-editor-textarea').dataset.path = path;
+                document.getElementById('fm-editor').style.display = 'flex';
+            }).catch(function(e) { alert('无法读取: ' + e.message); });
+    },
+    closeEditor: function() {
+        document.getElementById('fm-editor').style.display = 'none';
+    },
+    saveFile: function() {
+        var self = this;
+        var ta = document.getElementById('fm-editor-textarea');
+        this._post('./api/files/write', {path: ta.dataset.path, content: ta.value})
+            .then(function() { self.closeEditor(); self.refresh(); })
+            .catch(function(e) { alert('保存失败: ' + e.message); });
+    },
+
+    /* ── Context menu ── */
+    _showContext: function(e, item) {
+        this.contextTarget = item;
+        var ctx = document.getElementById('fm-context');
+        ctx.style.display = 'block';
+        ctx.style.left = e.pageX + 'px';
+        ctx.style.top = e.pageY + 'px';
+        var items = ctx.querySelectorAll('.fm-context-item');
+        items[2].style.display = item.isDir ? 'none' : 'block';
+    },
+    ctxDownload: function() {
+        var t = this.contextTarget;
+        if (t) window.open('./api/files/download?path=' + encodeURIComponent(t.path), '_blank');
+        document.getElementById('fm-context').style.display = 'none';
+    },
+    ctxRename: function() {
+        var self = this;
+        var t = this.contextTarget;
+        if (!t) return;
+        var nn = prompt('新名称:', t.name);
+        if (!nn || nn === t.name) return;
+        this._post('./api/files/rename', {path: t.path, new_name: nn})
+            .then(function() { self.refresh(); })
+            .catch(function(e) { alert('重命名失败: ' + e.message); });
+        document.getElementById('fm-context').style.display = 'none';
+    },
+    ctxEdit: function() {
+        var t = this.contextTarget;
+        if (t && !t.isDir) this.openEditor(t.path, t.name);
+        document.getElementById('fm-context').style.display = 'none';
+    },
+    ctxDelete: function() {
+        var t = this.contextTarget;
+        if (!t) return;
+        this.toDelete = t;
+        document.getElementById('fm-dialog-msg').textContent = '确认删除 "' + t.name + '"？此操作不可撤销。';
+        document.getElementById('fm-dialog').style.display = 'flex';
+        document.getElementById('fm-context').style.display = 'none';
+    },
+    confirmDelete: function() {
+        var self = this;
+        if (!this.toDelete) return;
+        this._post('./api/files/delete', {path: this.toDelete.path})
+            .then(function() { self.toDelete = null; self.closeDialog(); self.refresh(); })
+            .catch(function(e) { alert('删除失败: ' + e.message); });
+    },
+    closeDialog: function() {
+        document.getElementById('fm-dialog').style.display = 'none';
+        this.toDelete = null;
+    },
+
+    /* ── Helpers ── */
+    _buildBreadcrumbHTML: function(crumbs) {
+        if (!crumbs || !crumbs.length) return '';
+        var h = '';
+        for (var i = 0; i < crumbs.length; i++) {
+            var c = crumbs[i];
+            h += '<span class="fm-crumb" data-path="' + this._escAttr(c.path || '') + '">' + this._esc(c.label) + '</span>';
+            if (i < crumbs.length - 1) h += '<span class="fm-crumb-sep">▸</span>';
+        }
+        return h;
+    },
+    _esc: function(s) {
+        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    },
+    _escAttr: function(s) {
+        return String(s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+    },
+    _fmtSize: function(bytes) {
+        if (bytes === null || bytes === undefined) return '—';
+        if (bytes < 1024) return bytes + ' B';
+        if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+        if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
+        return (bytes / 1073741824).toFixed(2) + ' GB';
+    },
+    _fileIcon: function(ext) {
+        var map = {
+            '.py':'🐍','.js':'📜','.ts':'📘','.html':'🌐','.css':'🎨',
+            '.json':'📋','.yaml':'⚙','.yml':'⚙','.md':'📝','.txt':'📄',
+            '.log':'📊','.sh':'💻','.bat':'💻','.xml':'📰','.toml':'⚙',
+            '.cfg':'⚙','.ini':'⚙','.conf':'⚙','.sql':'🗄','.csv':'📊',
+            '.zip':'📦','.tar':'📦','.gz':'📦','.7z':'📦',
+            '.png':'🖼','.jpg':'🖼','.jpeg':'🖼','.gif':'🖼','.svg':'🖼','.ico':'🖼',
+            '.mp3':'🎵','.wav':'🎵','.ogg':'🎵','.mp4':'🎬','.avi':'🎬',
+            '.pdf':'📕','.doc':'📃','.docx':'📃','.xls':'📊','.xlsx':'📊',
+            '.c':'⚡','.h':'⚡','.cpp':'⚡','.java':'☕','.rs':'🦀','.go':'🔵',
+        };
+        return map[ext] || '📄';
+    },
+
+    destroy: function() {
+        document.getElementById('fm-context').style.display = 'none';
+        document.getElementById('fm-dialog').style.display = 'none';
+        document.getElementById('fm-editor').style.display = 'none';
+    }
+};
@@ -1,6 +1,6 @@
 <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
    <h2 style="color:var(--primary); display:flex; align-items:center; gap:8px">
-        <svg width="22" height="22" viewBox="0 0 24 24"><path fill="var(--primary)" d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>
+        <svg width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"/></svg>
        插件管理
    </h2>
    <button class="btn btn-sm btn-tonal" onclick="window.PluginsModule.refresh()">