From 93b523b0828a6220dcf0a5ce794889fc9ccf6175 Mon Sep 17 00:00:00 2001
From: Flik <flik@92coco.cn>
Date: Sat, 3 Jan 2026 14:25:17 +0800
Subject: [PATCH] update html

---
 plugins/file-manager/plugin.js | 742 ++++++++++++++++-----------------
 1 file changed, 371 insertions(+), 371 deletions(-)
diff --git a/plugins/file-manager/plugin.js b/plugins/file-manager/plugin.js
index e37c1ac..5cacac2 100644
--- a/plugins/file-manager/plugin.js
+++ b/plugins/file-manager/plugin.js
@@ -351,375 +351,375 @@ function jsonError(status, message) {
 // ============================================================================
 
 function getIndexHTML() {
-  return '<!DOCTYPE html>\n\
-<html lang="zh-CN">\n\
-<head>\n\
-  <meta charset="UTF-8">\n\
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n\
-  <title>File Manager</title>\n\
-  <style>\n\
-    * { margin: 0; padding: 0; box-sizing: border-box; }\n\
-    :root {\n\
-      --bg-primary: #0f0f23;\n\
-      --bg-secondary: #1a1a2e;\n\
-      --bg-tertiary: #252542;\n\
-      --text-primary: #e4e4e7;\n\
-      --text-secondary: #a1a1aa;\n\
-      --accent: #6366f1;\n\
-      --accent-hover: #818cf8;\n\
-      --danger: #ef4444;\n\
-      --success: #22c55e;\n\
-      --border: #2e2e4a;\n\
-    }\n\
-    body {\n\
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;\n\
-      background: var(--bg-primary);\n\
-      color: var(--text-primary);\n\
-      min-height: 100vh;\n\
-    }\n\
-    .container { max-width: 1200px; margin: 0 auto; padding: 20px; }\n\
-    header {\n\
-      background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));\n\
-      padding: 20px;\n\
-      border-radius: 12px;\n\
-      margin-bottom: 20px;\n\
-      border: 1px solid var(--border);\n\
-    }\n\
-    header h1 { font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }\n\
-    header h1::before { content: "📁"; }\n\
-    .breadcrumb {\n\
-      display: flex; align-items: center; gap: 8px; margin-top: 15px;\n\
-      padding: 10px 15px; background: var(--bg-primary); border-radius: 8px;\n\
-      overflow-x: auto;\n\
-    }\n\
-    .breadcrumb a {\n\
-      color: var(--accent); text-decoration: none;\n\
-      white-space: nowrap;\n\
-    }\n\
-    .breadcrumb a:hover { color: var(--accent-hover); }\n\
-    .breadcrumb span { color: var(--text-secondary); }\n\
-    .toolbar {\n\
-      display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;\n\
-    }\n\
-    .btn {\n\
-      padding: 10px 20px; border: none; border-radius: 8px;\n\
-      cursor: pointer; font-size: 14px; font-weight: 500;\n\
-      transition: all 0.2s; display: flex; align-items: center; gap: 6px;\n\
-    }\n\
-    .btn-primary { background: var(--accent); color: white; }\n\
-    .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }\n\
-    .btn-danger { background: var(--danger); color: white; }\n\
-    .btn-danger:hover { opacity: 0.9; }\n\
-    .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }\n\
-    .btn-secondary:hover { background: var(--border); }\n\
-    .file-list {\n\
-      background: var(--bg-secondary); border-radius: 12px;\n\
-      border: 1px solid var(--border); overflow: hidden;\n\
-    }\n\
-    .file-item {\n\
-      display: flex; align-items: center; padding: 15px 20px;\n\
-      border-bottom: 1px solid var(--border); cursor: pointer;\n\
-      transition: background 0.2s;\n\
-    }\n\
-    .file-item:last-child { border-bottom: none; }\n\
-    .file-item:hover { background: var(--bg-tertiary); }\n\
-    .file-item.selected { background: rgba(99, 102, 241, 0.2); }\n\
-    .file-icon { font-size: 24px; margin-right: 15px; }\n\
-    .file-info { flex: 1; }\n\
-    .file-name { font-weight: 500; margin-bottom: 4px; }\n\
-    .file-meta { font-size: 12px; color: var(--text-secondary); }\n\
-    .file-actions { display: flex; gap: 8px; opacity: 0; transition: opacity 0.2s; }\n\
-    .file-item:hover .file-actions { opacity: 1; }\n\
-    .action-btn {\n\
-      width: 32px; height: 32px; border: none; border-radius: 6px;\n\
-      cursor: pointer; display: flex; align-items: center; justify-content: center;\n\
-      background: var(--bg-primary); color: var(--text-primary);\n\
-      transition: all 0.2s;\n\
-    }\n\
-    .action-btn:hover { background: var(--accent); }\n\
-    .action-btn.delete:hover { background: var(--danger); }\n\
-    .modal-overlay {\n\
-      position: fixed; top: 0; left: 0; right: 0; bottom: 0;\n\
-      background: rgba(0,0,0,0.7); display: flex;\n\
-      align-items: center; justify-content: center; z-index: 1000;\n\
-    }\n\
-    .modal {\n\
-      background: var(--bg-secondary); border-radius: 12px;\n\
-      padding: 25px; width: 90%; max-width: 500px;\n\
-      border: 1px solid var(--border);\n\
-    }\n\
-    .modal h2 { margin-bottom: 20px; font-size: 1.2rem; }\n\
-    .modal input, .modal textarea {\n\
-      width: 100%; padding: 12px; border-radius: 8px;\n\
-      border: 1px solid var(--border); background: var(--bg-primary);\n\
-      color: var(--text-primary); margin-bottom: 15px; font-size: 14px;\n\
-    }\n\
-    .modal textarea { min-height: 200px; resize: vertical; font-family: monospace; }\n\
-    .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }\n\
-    .empty-state {\n\
-      text-align: center; padding: 60px 20px; color: var(--text-secondary);\n\
-    }\n\
-    .empty-state::before { content: "📂"; font-size: 48px; display: block; margin-bottom: 15px; }\n\
-    .loading { text-align: center; padding: 40px; color: var(--text-secondary); }\n\
-    .toast {\n\
-      position: fixed; bottom: 20px; right: 20px; padding: 15px 25px;\n\
-      background: var(--success); color: white; border-radius: 8px;\n\
-      animation: slideIn 0.3s ease;\n\
-    }\n\
-    .toast.error { background: var(--danger); }\n\
-    @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } }\n\
-  </style>\n\
-</head>\n\
-<body>\n\
-  <div class="container">\n\
-    <header>\n\
-      <h1>File Manager</h1>\n\
-      <div class="breadcrumb" id="breadcrumb"></div>\n\
-    </header>\n\
-    <div class="toolbar">\n\
-      <button class="btn btn-primary" onclick="showNewFolderModal()">📁 新建文件夹</button>\n\
-      <button class="btn btn-primary" onclick="showNewFileModal()">📄 新建文件</button>\n\
-      <button class="btn btn-secondary" onclick="refresh()">🔄 刷新</button>\n\
-    </div>\n\
-    <div class="file-list" id="fileList">\n\
-      <div class="loading">加载中...</div>\n\
-    </div>\n\
-  </div>\n\
-  <div id="modalContainer"></div>\n\
-  <script>\n\
-    var currentPath = "/";\n\
-    \n\
-    function init() { loadDirectory("/"); }\n\
-    \n\
-    function loadDirectory(path) {\n\
-      currentPath = path;\n\
-      updateBreadcrumb();\n\
-      document.getElementById("fileList").innerHTML = "<div class=\\"loading\\">加载中...</div>";\n\
-      \n\
-      fetch("/api/list?path=" + encodeURIComponent(path))\n\
-        .then(function(r) { return r.json(); })\n\
-        .then(function(data) {\n\
-          if (!data.success) { showToast(data.error, true); return; }\n\
-          renderFileList(data.data.entries);\n\
-        })\n\
-        .catch(function(e) { showToast("加载失败: " + e.message, true); });\n\
-    }\n\
-    \n\
-    function renderFileList(entries) {\n\
-      var list = document.getElementById("fileList");\n\
-      if (!entries || entries.length === 0) {\n\
-        list.innerHTML = "<div class=\\"empty-state\\">空文件夹</div>";\n\
-        return;\n\
-      }\n\
-      \n\
-      var html = "";\n\
-      if (currentPath !== "/") {\n\
-        html += "<div class=\\"file-item\\" onclick=\\"goUp()\\"><span class=\\"file-icon\\">⬆️</span><div class=\\"file-info\\"><div class=\\"file-name\\">..</div><div class=\\"file-meta\\">返回上级</div></div></div>";\n\
-      }\n\
-      \n\
-      for (var i = 0; i < entries.length; i++) {\n\
-        var e = entries[i];\n\
-        var icon = e.isDir ? "📁" : getFileIcon(e.name);\n\
-        var size = e.isDir ? "" : formatSize(e.size);\n\
-        var onclick = e.isDir ? "navigateTo(\\"" + e.name + "\\")" : "viewFile(\\"" + e.name + "\\")";\n\
-        \n\
-        html += "<div class=\\"file-item\\" onclick=\\""+ onclick +"\\">";\n\
-        html += "<span class=\\"file-icon\\">" + icon + "</span>";\n\
-        html += "<div class=\\"file-info\\"><div class=\\"file-name\\">" + escapeHtml(e.name) + "</div>";\n\
-        html += "<div class=\\"file-meta\\">" + size + "</div></div>";\n\
-        html += "<div class=\\"file-actions\\">";\n\
-        if (!e.isDir) {\n\
-          html += "<button class=\\"action-btn\\" onclick=\\"event.stopPropagation();downloadFile(\\'"+e.name+"\\')\\">⬇️</button>";\n\
-        }\n\
-        html += "<button class=\\"action-btn\\" onclick=\\"event.stopPropagation();renameItem(\\'"+e.name+"\\')\\">✏️</button>";\n\
-        html += "<button class=\\"action-btn delete\\" onclick=\\"event.stopPropagation();deleteItem(\\'"+e.name+"\\')\\">🗑️</button>";\n\
-        html += "</div></div>";\n\
-      }\n\
-      list.innerHTML = html;\n\
-    }\n\
-    \n\
-    function updateBreadcrumb() {\n\
-      var parts = currentPath.split("/").filter(function(p) { return p; });\n\
-      var html = "<a href=\\"#\\" onclick=\\"loadDirectory(\\'/\\');return false;\\">🏠 根目录</a>";\n\
-      var path = "";\n\
-      for (var i = 0; i < parts.length; i++) {\n\
-        path += "/" + parts[i];\n\
-        html += "<span>/</span><a href=\\"#\\" onclick=\\"loadDirectory(\\'"+path+"\\');return false;\\">" + escapeHtml(parts[i]) + "</a>";\n\
-      }\n\
-      document.getElementById("breadcrumb").innerHTML = html;\n\
-    }\n\
-    \n\
-    function navigateTo(name) { loadDirectory(joinPath(currentPath, name)); }\n\
-    function goUp() {\n\
-      var parts = currentPath.split("/").filter(function(p) { return p; });\n\
-      parts.pop();\n\
-      loadDirectory("/" + parts.join("/"));\n\
-    }\n\
-    function refresh() { loadDirectory(currentPath); }\n\
-    \n\
-    function joinPath(base, name) {\n\
-      if (base === "/") return "/" + name;\n\
-      return base + "/" + name;\n\
-    }\n\
-    \n\
-    function viewFile(name) {\n\
-      var path = joinPath(currentPath, name);\n\
-      fetch("/api/read", {\n\
-        method: "POST",\n\
-        headers: {"Content-Type": "application/json"},\n\
-        body: JSON.stringify({path: path})\n\
-      })\n\
-      .then(function(r) { return r.json(); })\n\
-      .then(function(data) {\n\
-        if (!data.success) { showToast(data.error, true); return; }\n\
-        showEditModal(name, data.data.content);\n\
-      });\n\
-    }\n\
-    \n\
-    function downloadFile(name) {\n\
-      var path = joinPath(currentPath, name);\n\
-      window.open("/api/download?path=" + encodeURIComponent(path));\n\
-    }\n\
-    \n\
-    function deleteItem(name) {\n\
-      if (!confirm("确定删除 " + name + "？")) return;\n\
-      var path = joinPath(currentPath, name);\n\
-      fetch("/api/delete", {\n\
-        method: "POST",\n\
-        headers: {"Content-Type": "application/json"},\n\
-        body: JSON.stringify({path: path})\n\
-      })\n\
-      .then(function(r) { return r.json(); })\n\
-      .then(function(data) {\n\
-        if (data.success) { showToast("已删除"); refresh(); }\n\
-        else { showToast(data.error, true); }\n\
-      });\n\
-    }\n\
-    \n\
-    function renameItem(name) {\n\
-      var newName = prompt("输入新名称:", name);\n\
-      if (!newName || newName === name) return;\n\
-      var oldPath = joinPath(currentPath, name);\n\
-      var newPath = joinPath(currentPath, newName);\n\
-      fetch("/api/rename", {\n\
-        method: "POST",\n\
-        headers: {"Content-Type": "application/json"},\n\
-        body: JSON.stringify({path: oldPath, newPath: newPath})\n\
-      })\n\
-      .then(function(r) { return r.json(); })\n\
-      .then(function(data) {\n\
-        if (data.success) { showToast("已重命名"); refresh(); }\n\
-        else { showToast(data.error, true); }\n\
-      });\n\
-    }\n\
-    \n\
-    function showNewFolderModal() {\n\
-      var name = prompt("文件夹名称:");\n\
-      if (!name) return;\n\
-      fetch("/api/mkdir", {\n\
-        method: "POST",\n\
-        headers: {"Content-Type": "application/json"},\n\
-        body: JSON.stringify({path: joinPath(currentPath, name)})\n\
-      })\n\
-      .then(function(r) { return r.json(); })\n\
-      .then(function(data) {\n\
-        if (data.success) { showToast("已创建"); refresh(); }\n\
-        else { showToast(data.error, true); }\n\
-      });\n\
-    }\n\
-    \n\
-    function showNewFileModal() {\n\
-      var html = "<div class=\\"modal-overlay\\" onclick=\\"closeModal()\\">";\n\
-      html += "<div class=\\"modal\\" onclick=\\"event.stopPropagation()\\">";\n\
-      html += "<h2>📄 新建文件</h2>";\n\
-      html += "<input type=\\"text\\" id=\\"newFileName\\" placeholder=\\"文件名\\">";\n\
-      html += "<textarea id=\\"newFileContent\\" placeholder=\\"文件内容\\"></textarea>";\n\
-      html += "<div class=\\"modal-actions\\">";\n\
-      html += "<button class=\\"btn btn-secondary\\" onclick=\\"closeModal()\\">取消</button>";\n\
-      html += "<button class=\\"btn btn-primary\\" onclick=\\"createFile()\\">创建</button>";\n\
-      html += "</div></div></div>";\n\
-      document.getElementById("modalContainer").innerHTML = html;\n\
-    }\n\
-    \n\
-    function showEditModal(name, content) {\n\
-      var html = "<div class=\\"modal-overlay\\" onclick=\\"closeModal()\\">";\n\
-      html += "<div class=\\"modal\\" onclick=\\"event.stopPropagation()\\">";\n\
-      html += "<h2>📝 编辑: " + escapeHtml(name) + "</h2>";\n\
-      html += "<input type=\\"hidden\\" id=\\"editFileName\\" value=\\"" + escapeHtml(name) + "\\">";\n\
-      html += "<textarea id=\\"editFileContent\\">" + escapeHtml(content) + "</textarea>";\n\
-      html += "<div class=\\"modal-actions\\">";\n\
-      html += "<button class=\\"btn btn-secondary\\" onclick=\\"closeModal()\\">取消</button>";\n\
-      html += "<button class=\\"btn btn-primary\\" onclick=\\"saveFile()\\">保存</button>";\n\
-      html += "</div></div></div>";\n\
-      document.getElementById("modalContainer").innerHTML = html;\n\
-    }\n\
-    \n\
-    function createFile() {\n\
-      var name = document.getElementById("newFileName").value;\n\
-      var content = document.getElementById("newFileContent").value;\n\
-      if (!name) { showToast("请输入文件名", true); return; }\n\
-      fetch("/api/write", {\n\
-        method: "POST",\n\
-        headers: {"Content-Type": "application/json"},\n\
-        body: JSON.stringify({path: joinPath(currentPath, name), content: content})\n\
-      })\n\
-      .then(function(r) { return r.json(); })\n\
-      .then(function(data) {\n\
-        if (data.success) { closeModal(); showToast("已创建"); refresh(); }\n\
-        else { showToast(data.error, true); }\n\
-      });\n\
-    }\n\
-    \n\
-    function saveFile() {\n\
-      var name = document.getElementById("editFileName").value;\n\
-      var content = document.getElementById("editFileContent").value;\n\
-      fetch("/api/write", {\n\
-        method: "POST",\n\
-        headers: {"Content-Type": "application/json"},\n\
-        body: JSON.stringify({path: joinPath(currentPath, name), content: content})\n\
-      })\n\
-      .then(function(r) { return r.json(); })\n\
-      .then(function(data) {\n\
-        if (data.success) { closeModal(); showToast("已保存"); }\n\
-        else { showToast(data.error, true); }\n\
-      });\n\
-    }\n\
-    \n\
-    function closeModal() { document.getElementById("modalContainer").innerHTML = ""; }\n\
-    \n\
-    function showToast(msg, isError) {\n\
-      var toast = document.createElement("div");\n\
-      toast.className = "toast" + (isError ? " error" : "");\n\
-      toast.textContent = msg;\n\
-      document.body.appendChild(toast);\n\
-      setTimeout(function() { toast.remove(); }, 3000);\n\
-    }\n\
-    \n\
-    function formatSize(bytes) {\n\
-      if (bytes === 0) return "0 B";\n\
-      var k = 1024;\n\
-      var sizes = ["B", "KB", "MB", "GB"];\n\
-      var i = Math.floor(Math.log(bytes) / Math.log(k));\n\
-      return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];\n\
-    }\n\
-    \n\
-    function getFileIcon(name) {\n\
-      var ext = name.split(".").pop().toLowerCase();\n\
-      var icons = {\n\
-        js: "📜", json: "📋", html: "🌐", css: "🎨", md: "📝",\n\
-        txt: "📄", log: "📃", py: "🐍", go: "🔵", java: "☕",\n\
-        png: "🖼️", jpg: "🖼️", gif: "🖼️", svg: "🖼️",\n\
-        mp3: "🎵", mp4: "🎬", pdf: "📕", zip: "📦", tar: "📦"\n\
-      };\n\
-      return icons[ext] || "📄";\n\
-    }\n\
-    \n\
-    function escapeHtml(str) {\n\
-      return String(str).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");\n\
-    }\n\
-    \n\
-    init();\n\
-  </script>\n\
-</body>\n\
-</html>';
+  return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>File Manager</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    :root {
+      --bg-primary: #0f0f23;
+      --bg-secondary: #1a1a2e;
+      --bg-tertiary: #252542;
+      --text-primary: #e4e4e7;
+      --text-secondary: #a1a1aa;
+      --accent: #6366f1;
+      --accent-hover: #818cf8;
+      --danger: #ef4444;
+      --success: #22c55e;
+      --border: #2e2e4a;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      min-height: 100vh;
+    }
+    .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
+    header {
+      background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
+      padding: 20px;
+      border-radius: 12px;
+      margin-bottom: 20px;
+      border: 1px solid var(--border);
+    }
+    header h1 { font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }
+    header h1::before { content: "📁"; }
+    .breadcrumb {
+      display: flex; align-items: center; gap: 8px; margin-top: 15px;
+      padding: 10px 15px; background: var(--bg-primary); border-radius: 8px;
+      overflow-x: auto;
+    }
+    .breadcrumb a {
+      color: var(--accent); text-decoration: none;
+      white-space: nowrap;
+    }
+    .breadcrumb a:hover { color: var(--accent-hover); }
+    .breadcrumb span { color: var(--text-secondary); }
+    .toolbar {
+      display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;
+    }
+    .btn {
+      padding: 10px 20px; border: none; border-radius: 8px;
+      cursor: pointer; font-size: 14px; font-weight: 500;
+      transition: all 0.2s; display: flex; align-items: center; gap: 6px;
+    }
+    .btn-primary { background: var(--accent); color: white; }
+    .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
+    .btn-danger { background: var(--danger); color: white; }
+    .btn-danger:hover { opacity: 0.9; }
+    .btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }
+    .btn-secondary:hover { background: var(--border); }
+    .file-list {
+      background: var(--bg-secondary); border-radius: 12px;
+      border: 1px solid var(--border); overflow: hidden;
+    }
+    .file-item {
+      display: flex; align-items: center; padding: 15px 20px;
+      border-bottom: 1px solid var(--border); cursor: pointer;
+      transition: background 0.2s;
+    }
+    .file-item:last-child { border-bottom: none; }
+    .file-item:hover { background: var(--bg-tertiary); }
+    .file-item.selected { background: rgba(99, 102, 241, 0.2); }
+    .file-icon { font-size: 24px; margin-right: 15px; }
+    .file-info { flex: 1; }
+    .file-name { font-weight: 500; margin-bottom: 4px; }
+    .file-meta { font-size: 12px; color: var(--text-secondary); }
+    .file-actions { display: flex; gap: 8px; opacity: 0; transition: opacity 0.2s; }
+    .file-item:hover .file-actions { opacity: 1; }
+    .action-btn {
+      width: 32px; height: 32px; border: none; border-radius: 6px;
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      background: var(--bg-primary); color: var(--text-primary);
+      transition: all 0.2s;
+    }
+    .action-btn:hover { background: var(--accent); }
+    .action-btn.delete:hover { background: var(--danger); }
+    .modal-overlay {
+      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0,0,0,0.7); display: flex;
+      align-items: center; justify-content: center; z-index: 1000;
+    }
+    .modal {
+      background: var(--bg-secondary); border-radius: 12px;
+      padding: 25px; width: 90%; max-width: 500px;
+      border: 1px solid var(--border);
+    }
+    .modal h2 { margin-bottom: 20px; font-size: 1.2rem; }
+    .modal input, .modal textarea {
+      width: 100%; padding: 12px; border-radius: 8px;
+      border: 1px solid var(--border); background: var(--bg-primary);
+      color: var(--text-primary); margin-bottom: 15px; font-size: 14px;
+    }
+    .modal textarea { min-height: 200px; resize: vertical; font-family: monospace; }
+    .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
+    .empty-state {
+      text-align: center; padding: 60px 20px; color: var(--text-secondary);
+    }
+    .empty-state::before { content: "📂"; font-size: 48px; display: block; margin-bottom: 15px; }
+    .loading { text-align: center; padding: 40px; color: var(--text-secondary); }
+    .toast {
+      position: fixed; bottom: 20px; right: 20px; padding: 15px 25px;
+      background: var(--success); color: white; border-radius: 8px;
+      animation: slideIn 0.3s ease;
+    }
+    .toast.error { background: var(--danger); }
+    @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>File Manager</h1>
+      <div class="breadcrumb" id="breadcrumb"></div>
+    </header>
+    <div class="toolbar">
+      <button class="btn btn-primary" onclick="showNewFolderModal()">📁 新建文件夹</button>
+      <button class="btn btn-primary" onclick="showNewFileModal()">📄 新建文件</button>
+      <button class="btn btn-secondary" onclick="refresh()">🔄 刷新</button>
+    </div>
+    <div class="file-list" id="fileList">
+      <div class="loading">加载中...</div>
+    </div>
+  </div>
+  <div id="modalContainer"></div>
+  <script>
+    var currentPath = "/";
+    
+    function init() { loadDirectory("/"); }
+    
+    function loadDirectory(path) {
+      currentPath = path;
+      updateBreadcrumb();
+      document.getElementById("fileList").innerHTML = "<div class=\\"loading\\">加载中...</div>";
+      
+      fetch("/api/list?path=" + encodeURIComponent(path))
+        .then(function(r) { return r.json(); })
+        .then(function(data) {
+          if (!data.success) { showToast(data.error, true); return; }
+          renderFileList(data.data.entries);
+        })
+        .catch(function(e) { showToast("加载失败: " + e.message, true); });
+    }
+    
+    function renderFileList(entries) {
+      var list = document.getElementById("fileList");
+      if (!entries || entries.length === 0) {
+        list.innerHTML = "<div class=\\"empty-state\\">空文件夹</div>";
+        return;
+      }
+      
+      var html = "";
+      if (currentPath !== "/") {
+        html += "<div class=\\"file-item\\" onclick=\\"goUp()\\"><span class=\\"file-icon\\">⬆️</span><div class=\\"file-info\\"><div class=\\"file-name\\">..</div><div class=\\"file-meta\\">返回上级</div></div></div>";
+      }
+      
+      for (var i = 0; i < entries.length; i++) {
+        var e = entries[i];
+        var icon = e.isDir ? "📁" : getFileIcon(e.name);
+        var size = e.isDir ? "" : formatSize(e.size);
+        var onclick = e.isDir ? "navigateTo(\\"" + e.name + "\\")" : "viewFile(\\"" + e.name + "\\")";
+        
+        html += "<div class=\\"file-item\\" onclick=\\""+ onclick +"\\">";
+        html += "<span class=\\"file-icon\\">" + icon + "</span>";
+        html += "<div class=\\"file-info\\"><div class=\\"file-name\\">" + escapeHtml(e.name) + "</div>";
+        html += "<div class=\\"file-meta\\">" + size + "</div></div>";
+        html += "<div class=\\"file-actions\\">";
+        if (!e.isDir) {
+          html += "<button class=\\"action-btn\\" onclick=\\"event.stopPropagation();downloadFile('" + e.name + "')\\">⬇️</button>";
+        }
+        html += "<button class=\\"action-btn\\" onclick=\\"event.stopPropagation();renameItem('" + e.name + "')\\">✏️</button>";
+        html += "<button class=\\"action-btn delete\\" onclick=\\"event.stopPropagation();deleteItem('" + e.name + "')\\">🗑️</button>";
+        html += "</div></div>";
+      }
+      list.innerHTML = html;
+    }
+    
+    function updateBreadcrumb() {
+      var parts = currentPath.split("/").filter(function(p) { return p; });
+      var html = "<a href=\\"#\\" onclick=\\"loadDirectory('/');return false;\\">🏠 根目录</a>";
+      var path = "";
+      for (var i = 0; i < parts.length; i++) {
+        path += "/" + parts[i];
+        html += "<span>/</span><a href=\\"#\\" onclick=\\"loadDirectory('"+path+"');return false;\\">" + escapeHtml(parts[i]) + "</a>";
+      }
+      document.getElementById("breadcrumb").innerHTML = html;
+    }
+    
+    function navigateTo(name) { loadDirectory(joinPath(currentPath, name)); }
+    function goUp() {
+      var parts = currentPath.split("/").filter(function(p) { return p; });
+      parts.pop();
+      loadDirectory("/" + parts.join("/"));
+    }
+    function refresh() { loadDirectory(currentPath); }
+    
+    function joinPath(base, name) {
+      if (base === "/") return "/" + name;
+      return base + "/" + name;
+    }
+    
+    function viewFile(name) {
+      var path = joinPath(currentPath, name);
+      fetch("/api/read", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({path: path})
+      })
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        if (!data.success) { showToast(data.error, true); return; }
+        showEditModal(name, data.data.content);
+      });
+    }
+    
+    function downloadFile(name) {
+      var path = joinPath(currentPath, name);
+      window.open("/api/download?path=" + encodeURIComponent(path));
+    }
+    
+    function deleteItem(name) {
+      if (!confirm("确定删除 " + name + "？")) return;
+      var path = joinPath(currentPath, name);
+      fetch("/api/delete", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({path: path})
+      })
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        if (data.success) { showToast("已删除"); refresh(); }
+        else { showToast(data.error, true); }
+      });
+    }
+    
+    function renameItem(name) {
+      var newName = prompt("输入新名称:", name);
+      if (!newName || newName === name) return;
+      var oldPath = joinPath(currentPath, name);
+      var newPath = joinPath(currentPath, newName);
+      fetch("/api/rename", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({path: oldPath, newPath: newPath})
+      })
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        if (data.success) { showToast("已重命名"); refresh(); }
+        else { showToast(data.error, true); }
+      });
+    }
+    
+    function showNewFolderModal() {
+      var name = prompt("文件夹名称:");
+      if (!name) return;
+      fetch("/api/mkdir", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({path: joinPath(currentPath, name)})
+      })
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        if (data.success) { showToast("已创建"); refresh(); }
+        else { showToast(data.error, true); }
+      });
+    }
+    
+    function showNewFileModal() {
+      var html = "<div class=\\"modal-overlay\\" onclick=\\"closeModal()\\">";
+      html += "<div class=\\"modal\\" onclick=\\"event.stopPropagation()\\">";
+      html += "<h2>📄 新建文件</h2>";
+      html += "<input type=\\"text\\" id=\\"newFileName\\" placeholder=\\"文件名\\">";
+      html += "<textarea id=\\"newFileContent\\" placeholder=\\"文件内容\\"></textarea>";
+      html += "<div class=\\"modal-actions\\">";
+      html += "<button class=\\"btn btn-secondary\\" onclick=\\"closeModal()\\">取消</button>";
+      html += "<button class=\\"btn btn-primary\\" onclick=\\"createFile()\\">创建</button>";
+      html += "</div></div></div>";
+      document.getElementById("modalContainer").innerHTML = html;
+    }
+    
+    function showEditModal(name, content) {
+      var html = "<div class=\\"modal-overlay\\" onclick=\\"closeModal()\\">";
+      html += "<div class=\\"modal\\" onclick=\\"event.stopPropagation()\\">";
+      html += "<h2>📝 编辑: " + escapeHtml(name) + "</h2>";
+      html += "<input type=\\"hidden\\" id=\\"editFileName\\" value=\\"" + escapeHtml(name) + "\\">";
+      html += "<textarea id=\\"editFileContent\\">" + escapeHtml(content) + "</textarea>";
+      html += "<div class=\\"modal-actions\\">";
+      html += "<button class=\\"btn btn-secondary\\" onclick=\\"closeModal()\\">取消</button>";
+      html += "<button class=\\"btn btn-primary\\" onclick=\\"saveFile()\\">保存</button>";
+      html += "</div></div></div>";
+      document.getElementById("modalContainer").innerHTML = html;
+    }
+    
+    function createFile() {
+      var name = document.getElementById("newFileName").value;
+      var content = document.getElementById("newFileContent").value;
+      if (!name) { showToast("请输入文件名", true); return; }
+      fetch("/api/write", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({path: joinPath(currentPath, name), content: content})
+      })
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        if (data.success) { closeModal(); showToast("已创建"); refresh(); }
+        else { showToast(data.error, true); }
+      });
+    }
+    
+    function saveFile() {
+      var name = document.getElementById("editFileName").value;
+      var content = document.getElementById("editFileContent").value;
+      fetch("/api/write", {
+        method: "POST",
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify({path: joinPath(currentPath, name), content: content})
+      })
+      .then(function(r) { return r.json(); })
+      .then(function(data) {
+        if (data.success) { closeModal(); showToast("已保存"); }
+        else { showToast(data.error, true); }
+      });
+    }
+    
+    function closeModal() { document.getElementById("modalContainer").innerHTML = ""; }
+    
+    function showToast(msg, isError) {
+      var toast = document.createElement("div");
+      toast.className = "toast" + (isError ? " error" : "");
+      toast.textContent = msg;
+      document.body.appendChild(toast);
+      setTimeout(function() { toast.remove(); }, 3000);
+    }
+    
+    function formatSize(bytes) {
+      if (bytes === 0) return "0 B";
+      var k = 1024;
+      var sizes = ["B", "KB", "MB", "GB"];
+      var i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+    }
+    
+    function getFileIcon(name) {
+      var ext = name.split(".").pop().toLowerCase();
+      var icons = {
+        js: "📜", json: "📋", html: "🌐", css: "🎨", md: "📝",
+        txt: "📄", log: "📃", py: "🐍", go: "🔵", java: "☕",
+        png: "🖼️", jpg: "🖼️", gif: "🖼️", svg: "🖼️",
+        mp3: "🎵", mp4: "🎬", pdf: "📕", zip: "📦", tar: "📦"
+      };
+      return icons[ext] || "📄";
+    }
+    
+    function escapeHtml(str) {
+      return String(str).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");
+    }
+    
+    init();
+  </script>
+</body>
+</html>`;
 }
