refactor: split tree shell icon runtime

design/10-review/process/16-mnote-web-runtime-module-maintainability-checklist-v1.md

@@ -209,7 +209,7 @@ cargo test --manifest-path rust/Cargo.toml -p mnote-web --lib ssr::pages::layout
 - [ ] D3. `tree-shell-filetree-runtime.js`：filetree row normalization、resource meta、open target。
 - [ ] D4. `tree-shell-picker-runtime.js`：picker search/focus/pick root。
 - [ ] D5. `tree-shell-dom-runtime.js`：DOM patch/render helpers。
-- [ ] D6. `tree-shell-icons-runtime.js`：icon templates 和 resource kind badge。
+- [x] D6. `tree-shell-icons-runtime.js`：icon templates 和 resource kind badge。
 - [ ] D7. entrypoint 少于 2,500 行。
 
 验收命令：

rust/crates/mnote-web/browser/tree-shell-icons-runtime.js

@@ -0,0 +1,133 @@
+// MNote debug /tree shell icon templates and small DOM factories.
+
+export const TREE_SHELL_ICONS = {
+  add: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M8 3.2v9.6M3.2 8h9.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+    </svg>
+  `,
+  more: `
+    <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <circle cx="4" cy="8" r="1.2"/>
+      <circle cx="8" cy="8" r="1.2"/>
+      <circle cx="12" cy="8" r="1.2"/>
+    </svg>
+  `,
+  edit: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M3.4 11.8 3 13l1.2-.4 6.6-6.6-1.4-1.4-6 6.2Z" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
+      <path d="m9.9 4.6 1.5-1.5a1 1 0 0 1 1.4 0l.6.6a1 1 0 0 1 0 1.4l-1.5 1.5" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
+    </svg>
+  `,
+  up: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M8 12.6V4.2M8 4.2 5.4 6.8M8 4.2l2.6 2.6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
+  page: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+      <path d="M9.2 2.8v2.8H12" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+    </svg>
+  `,
+  index: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+      <path d="M6 7h4M6 9h4M6 11h3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+    </svg>
+  `,
+  mindmap: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <circle cx="8" cy="8" r="1.6" fill="currentColor"/>
+      <circle cx="4" cy="4.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
+      <circle cx="12" cy="4.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
+      <circle cx="12" cy="11.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
+      <path d="M6.8 7 4.9 5.4M9.2 7l1.9-1.6M9.1 9l2 1.6" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
+    </svg>
+  `,
+  table: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <rect x="3.2" y="3.2" width="9.6" height="9.6" rx="1.4" stroke="currentColor" stroke-width="1.2"/>
+      <path d="M3.8 6.6h8.4M6.6 3.8v8.4M9.4 3.8v8.4" stroke="currentColor" stroke-width="1.1"/>
+    </svg>
+  `,
+  pdf: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+      <path d="M6 10.8V6.5h1.5a1.2 1.2 0 1 1 0 2.4H6m3.2-2.4v4.3m0 0c1.1 0 1.8-.8 1.8-2.1 0-1.3-.7-2.2-1.8-2.2m-1.7 4.3h1.7" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
+  book: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M4.2 3.2h6.2a1.6 1.6 0 0 1 1.6 1.6v7.4H5.4a1.2 1.2 0 0 0-1.2 1.2V4.4a1.2 1.2 0 0 1 1.2-1.2Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+      <path d="M5.4 12.2V4.1M7 6h3.1M7 8.2h3.1" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
+    </svg>
+  `,
+  image: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <rect x="3" y="3" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
+      <circle cx="6.2" cy="6.2" r="1.1" stroke="currentColor" stroke-width="1"/>
+      <path d="M4.5 11 7.1 8.6l1.8 1.7 1.7-1.5L12 11" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
+  video: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <rect x="3" y="3.4" width="7.8" height="9.2" rx="1.4" stroke="currentColor" stroke-width="1.2"/>
+      <path d="m9.8 7 2.8-1.7v5.4L9.8 9" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
+    </svg>
+  `,
+  audio: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M6.4 4.2v7.6a1.5 1.5 0 1 1-1-1.4V5.6l5.2-1.2v5.2a1.5 1.5 0 1 1-1-1.4V3.5L6.4 4.2Z" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
+    </svg>
+  `,
+  file: `
+    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+      <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
+      <path d="M6 8.2h4M6 10.4h2.8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
+    </svg>
+  `,
+};
+
+export function createTreeShellKindBadge(kind) {
+  const badge = document.createElement("span");
+  badge.className = "tree-kind-badge";
+  badge.dataset.kind = kind;
+  badge.innerHTML =
+    kind === "mindmap"
+      ? TREE_SHELL_ICONS.mindmap
+      : kind === "table"
+        ? TREE_SHELL_ICONS.table
+        : kind === "pdf"
+          ? TREE_SHELL_ICONS.pdf
+          : kind === "book"
+            ? TREE_SHELL_ICONS.book
+            : kind === "image"
+              ? TREE_SHELL_ICONS.image
+              : kind === "video"
+                ? TREE_SHELL_ICONS.video
+                : kind === "audio"
+                  ? TREE_SHELL_ICONS.audio
+                  : kind === "index"
+                    ? TREE_SHELL_ICONS.index
+                    : kind === "page"
+                      ? TREE_SHELL_ICONS.page
+                      : TREE_SHELL_ICONS.file;
+  return badge;
+}
+
+export function createTreeShellActionButton(icon, testId, title, onClick, disabled, busy) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "tree-action";
+  button.dataset.testid = testId;
+  button.title = title;
+  button.setAttribute("aria-label", title);
+  button.innerHTML = icon;
+  button.disabled = disabled || busy;
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    onClick(button);
+  });
+  return button;
+}

rust/crates/mnote-web/browser/tree-shell-runtime.js

@@ -5,6 +5,11 @@ import {
   reconcilePageRuntimeResult,
   reducePageActionWithRuntime,
 } from "./tree-shell-page-runtime.js";
+import {
+  TREE_SHELL_ICONS as ICONS,
+  createTreeShellActionButton,
+  createTreeShellKindBadge as createKindBadge,
+} from "./tree-shell-icons-runtime.js";
 
 function buildFileTreeRuntimeEnvironment(runtimeContext) {
   const fileTreeRowById = runtimeContext.fileTreeRowById || new Map();
@@ -1759,95 +1764,6 @@ function startTreeShellRuntime() {
     return text ? text.slice(0, 180) : "树命令执行失败";
   };
 
-  const ICONS = {
-    add: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <path d="M8 3.2v9.6M3.2 8h9.6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-      </svg>
-    `,
-    more: `
-      <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-        <circle cx="4" cy="8" r="1.2"/>
-        <circle cx="8" cy="8" r="1.2"/>
-        <circle cx="12" cy="8" r="1.2"/>
-      </svg>
-    `,
-    edit: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <path d="M3.4 11.8 3 13l1.2-.4 6.6-6.6-1.4-1.4-6 6.2Z" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
-        <path d="m9.9 4.6 1.5-1.5a1 1 0 0 1 1.4 0l.6.6a1 1 0 0 1 0 1.4l-1.5 1.5" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
-      </svg>
-    `,
-    up: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <path d="M8 12.6V4.2M8 4.2 5.4 6.8M8 4.2l2.6 2.6" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    `,
-    page: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
-        <path d="M9.2 2.8v2.8H12" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
-      </svg>
-    `,
-    index: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
-        <path d="M6 7h4M6 9h4M6 11h3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
-      </svg>
-    `,
-    mindmap: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <circle cx="8" cy="8" r="1.6" fill="currentColor"/>
-        <circle cx="4" cy="4.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
-        <circle cx="12" cy="4.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
-        <circle cx="12" cy="11.5" r="1.3" stroke="currentColor" stroke-width="1.1"/>
-        <path d="M6.8 7 4.9 5.4M9.2 7l1.9-1.6M9.1 9l2 1.6" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
-      </svg>
-    `,
-    table: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <rect x="3.2" y="3.2" width="9.6" height="9.6" rx="1.4" stroke="currentColor" stroke-width="1.2"/>
-        <path d="M3.8 6.6h8.4M6.6 3.8v8.4M9.4 3.8v8.4" stroke="currentColor" stroke-width="1.1"/>
-      </svg>
-    `,
-    pdf: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
-        <path d="M6 10.8V6.5h1.5a1.2 1.2 0 1 1 0 2.4H6m3.2-2.4v4.3m0 0c1.1 0 1.8-.8 1.8-2.1 0-1.3-.7-2.2-1.8-2.2m-1.7 4.3h1.7" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    `,
-    book: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <path d="M4.2 3.2h6.2a1.6 1.6 0 0 1 1.6 1.6v7.4H5.4a1.2 1.2 0 0 0-1.2 1.2V4.4a1.2 1.2 0 0 1 1.2-1.2Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
-        <path d="M5.4 12.2V4.1M7 6h3.1M7 8.2h3.1" stroke="currentColor" stroke-width="1.1" stroke-linecap="round"/>
-      </svg>
-    `,
-    image: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <rect x="3" y="3" width="10" height="10" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
-        <circle cx="6.2" cy="6.2" r="1.1" stroke="currentColor" stroke-width="1"/>
-        <path d="M4.5 11 7.1 8.6l1.8 1.7 1.7-1.5L12 11" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    `,
-    video: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <rect x="3" y="3.4" width="7.8" height="9.2" rx="1.4" stroke="currentColor" stroke-width="1.2"/>
-        <path d="m9.8 7 2.8-1.7v5.4L9.8 9" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
-      </svg>
-    `,
-    audio: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <path d="M6.4 4.2v7.6a1.5 1.5 0 1 1-1-1.4V5.6l5.2-1.2v5.2a1.5 1.5 0 1 1-1-1.4V3.5L6.4 4.2Z" stroke="currentColor" stroke-width="1.1" stroke-linejoin="round"/>
-      </svg>
-    `,
-    file: `
-      <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
-        <path d="M4 2.8h5.2l2.8 2.8v7.6H4V2.8Z" stroke="currentColor" stroke-width="1.2" stroke-linejoin="round"/>
-        <path d="M6 8.2h4M6 10.4h2.8" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
-      </svg>
-    `,
-  };
-
   const sendCommand = async (payload) => {
     setBusy(true);
     setStatus("正在提交树命令…");
@@ -3768,48 +3684,8 @@ function startTreeShellRuntime() {
     return false;
   };
 
-  const createKindBadge = (kind) => {
+  const createActionButton = (icon, testId, title, onClick, disabled) =>
-    const badge = document.createElement("span");
+    createTreeShellActionButton(icon, testId, title, onClick, disabled, busy);
-    badge.className = "tree-kind-badge";
-    badge.dataset.kind = kind;
-    badge.innerHTML =
-      kind === "mindmap"
-        ? ICONS.mindmap
-        : kind === "table"
-          ? ICONS.table
-          : kind === "pdf"
-            ? ICONS.pdf
-            : kind === "book"
-              ? ICONS.book
-              : kind === "image"
-                ? ICONS.image
-                : kind === "video"
-                  ? ICONS.video
-                  : kind === "audio"
-                    ? ICONS.audio
-            : kind === "index"
-              ? ICONS.index
-              : kind === "page"
-              ? ICONS.page
-              : ICONS.file;
-    return badge;
-  };
-
-  const createActionButton = (icon, testId, title, onClick, disabled) => {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = "tree-action";
-    button.dataset.testid = testId;
-    button.title = title;
-    button.setAttribute("aria-label", title);
-    button.innerHTML = icon;
-    button.disabled = disabled || busy;
-    button.addEventListener("click", (event) => {
-      event.stopPropagation();
-      onClick(button);
-    });
-    return button;
-  };
 
   const renderNode = (item) => {
     const hasChildren = item.childCount > 0;

rust/crates/mnote-web/src/routes/mod.rs

@@ -170,6 +170,10 @@ pub fn build_router(state: AppState) -> Router {
             "/api/mnote-browser-runtime/tree-shell-page-runtime.js",
             get(web_shell::tree_shell_page_runtime_asset),
         )
+        .route(
+            "/api/mnote-browser-runtime/tree-shell-icons-runtime.js",
+            get(web_shell::tree_shell_icons_runtime_asset),
+        )
         .route(
             "/api/mnote-browser-runtime/document-conflict-panel-runtime.js",
             get(web_shell::document_conflict_panel_runtime_asset),
@@ -622,6 +626,7 @@ mod tests {
             "/api/mnote-browser-runtime/tree-live-controller.js",
             "/api/mnote-browser-runtime/tree-shell-runtime.js",
             "/api/mnote-browser-runtime/tree-shell-page-runtime.js",
+            "/api/mnote-browser-runtime/tree-shell-icons-runtime.js",
             "/api/mnote-browser-runtime/document-conflict-panel-runtime.js",
             "/api/mnote-browser-runtime/document-pane-runtime.js",
             "/api/mnote-browser-runtime/document-mindmap-host-runtime.js",

rust/crates/mnote-web/src/routes/web_shell.rs

@@ -952,6 +952,20 @@ pub async fn tree_shell_page_runtime_asset() -> Response {
         .unwrap_or_else(|_| Response::new(Body::empty()))
 }
 
+pub async fn tree_shell_icons_runtime_asset() -> Response {
+    const JS: &str = include_str!("../../browser/tree-shell-icons-runtime.js");
+    Response::builder()
+        .status(StatusCode::OK)
+        .header(
+            header::CONTENT_TYPE,
+            "application/javascript; charset=utf-8",
+        )
+        .header(header::CACHE_CONTROL, "no-store")
+        .header(HEADER_MNOTE_WEB_OWNER, "mnote-web")
+        .body(Body::from(JS))
+        .unwrap_or_else(|_| Response::new(Body::empty()))
+}
+
 pub async fn document_conflict_panel_runtime_asset() -> Response {
     // include_str! 路径相对于当前源文件 (src/routes/web_shell.rs -> ../../browser/)
     const JS: &str = include_str!("../../browser/document-conflict-panel-runtime.js");