refactor: split tree shell icon runtime
This commit is contained in:
lix-2026
+1
-1
@@ -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 行。
|
||||
|
||||
验收命令：
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 badge = document.createElement("span");
|
||||
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 createActionButton = (icon, testId, title, onClick, disabled) =>
|
||||
createTreeShellActionButton(icon, testId, title, onClick, disabled, busy);
|
||||
|
||||
const renderNode = (item) => {
|
||||
const hasChildren = item.childCount > 0;
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user