lix/mnote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve local filetree view state and sidebar performance

Browse Source
This commit is contained in:
lix-2026
2026-05-27 11:31:12 +08:00
parent 58e2fdb5d8
commit 3ae33cc21d
56 changed files with 8614 additions and 461 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rust/crates/mnote-web/src/tree_shell/filetree_renderer.rs
+34 -1
View File
@@ -14,6 +14,7 @@ pub struct FileTreeRenderRow {
pub icon_kind: String,
pub document_id: Option<String>,
pub asset_id: Option<String>,
pub relative_path: Option<String>,
pub object_identity: Option<String>,
pub selected: bool,
}
@@ -90,7 +91,7 @@ fn render_filetree_row(
};
let owner_document_id = row.document_id.as_deref().unwrap_or_default();
html.push_str(&format!(
r#"<li class="tree-node" data-node-id="{node_id}"><div class="tree-row" role="treeitem" aria-level="{aria_level}" aria-expanded="{expanded_attr}" data-rust-rendered-row="filetree" data-testid="{test_id}" data-row-id="{row_id}" data-row-kind="{row_kind}" data-node-id="{node_id}"{parent_attr} data-document-id="{document_id}" data-doc-id="{document_id}" data-owner-document-id="{owner_document_id}" data-asset-id="{asset_id}" data-object-identity="{object_identity}" data-shell-mode="filetree" data-selected="{selected}" data-active="false" draggable="true">{toggle_html}<span class="tree-kind-badge" data-kind="{icon_kind}" aria-hidden="true"></span><button type="button" class="tree-link" data-rust-action="open" data-row-id="{row_id}" data-document-id="{document_id}" data-owner-document-id="{owner_document_id}" data-asset-id="{asset_id}" title="{title}"><span class="tree-link-title" title="{title}">{title}</span></button><div class="tree-actions">{create_action_html}<button type="button" class="tree-action" data-testid="filetree-action-menu" data-rust-action="menu" data-row-id="{row_id}" aria-label="更多操作">…</button></div></div>"#,
r#"<li class="tree-node" data-node-id="{node_id}"><div class="tree-row" role="treeitem" aria-level="{aria_level}" aria-expanded="{expanded_attr}" data-rust-rendered-row="filetree" data-testid="{test_id}" data-row-id="{row_id}" data-row-kind="{row_kind}" data-node-id="{node_id}"{parent_attr} data-document-id="{document_id}" data-doc-id="{document_id}" data-owner-document-id="{owner_document_id}" data-asset-id="{asset_id}" data-local-relative-path="{relative_path}" data-object-identity="{object_identity}" data-shell-mode="filetree" data-selected="{selected}" data-active="false" draggable="true">{toggle_html}<span class="tree-kind-badge" data-kind="{icon_kind}" aria-hidden="true"></span><button type="button" class="tree-link" data-rust-action="open" data-row-id="{row_id}" data-document-id="{document_id}" data-owner-document-id="{owner_document_id}" data-asset-id="{asset_id}" data-local-relative-path="{relative_path}" title="{title}"><span class="tree-link-title" title="{title}">{title}</span></button><div class="tree-actions">{create_action_html}<button type="button" class="tree-action" data-testid="filetree-action-menu" data-rust-action="menu" data-row-id="{row_id}" aria-label="更多操作">…</button></div></div>"#,
node_id = escape_html(&row.node_id),
aria_level = row.depth + 1,
expanded_attr = if row.expandable && row.expanded { "true" } else { "false" },
@@ -101,6 +102,7 @@ fn render_filetree_row(
document_id = escape_html(command_document_id),
owner_document_id = escape_html(owner_document_id),
asset_id = escape_html(row.asset_id.as_deref().unwrap_or_default()),
relative_path = escape_html(row.relative_path.as_deref().unwrap_or_default()),
object_identity = escape_html(row.object_identity.as_deref().unwrap_or_default()),
selected = row.selected,
toggle_html = toggle_html,
@@ -176,6 +178,7 @@ mod tests {
icon_kind: "page".into(),
document_id: Some("page_root".into()),
asset_id: None,
relative_path: None,
object_identity: Some(
r#"{"objectKind":"page","documentId":"page_root","blockId":null,"assetId":null}"#.into(),
),
@@ -193,6 +196,7 @@ mod tests {
icon_kind: "mindmap".into(),
document_id: Some("page_root".into()),
asset_id: Some("mind_1".into()),
relative_path: Some("assets/思维导图.json".into()),
object_identity: Some(
r#"{"objectKind":"mindmap","documentId":"page_root","blockId":null,"assetId":"mind_1"}"#.into(),
),
@@ -210,6 +214,7 @@ mod tests {
assert!(html.contains("data-doc-id=\"page_root\""));
assert!(html.contains("data-row-id=\"asset:mind_1\" data-row-kind=\"asset\" data-node-id=\"asset:mind_1\" data-parent-id=\"page_root\" data-document-id=\"\" data-doc-id=\"\" data-owner-document-id=\"page_root\" data-asset-id=\"mind_1\""));
assert!(html.contains("data-asset-id=\"mind_1\""));
assert!(html.contains("data-local-relative-path=\"assets/思维导图.json\""));
assert!(html.contains("data-object-identity=\"{&quot;objectKind&quot;:&quot;mindmap&quot;"));
assert!(html.contains("tree-children"));
assert!(html.contains("首页 &lt;安全&gt;"));
@@ -234,6 +239,7 @@ mod tests {
icon_kind: "folder".into(),
document_id: None,
asset_id: None,
relative_path: Some("docs".into()),
object_identity: None,
selected: false,
},
@@ -249,6 +255,7 @@ mod tests {
icon_kind: "file".into(),
document_id: Some("local-md:docs~2FREADME.md".into()),
asset_id: None,
relative_path: Some("docs/README.md".into()),
object_identity: None,
selected: false,
},
@@ -256,8 +263,34 @@ mod tests {
});
assert!(html.contains("data-row-id=\"local:folder:docs\""));
assert!(html.contains("data-local-relative-path=\"docs\""));
assert!(!html.contains("data-row-id=\"local:markdown:docs/README.md\""));
assert!(!html.contains("README.md"));
assert!(!html.contains("tree-children--collapsed"));
}
#[test]
fn filetree_ssr_rows_include_local_relative_path() {
let html = render_initial_filetree_html(&FileTreeInitialRenderInput {
rows: vec![FileTreeRenderRow {
row_id: "local:folder:design/03-rust-web".into(),
row_kind: "folder".into(),
node_id: "local:node:design/03-rust-web".into(),
parent_node_id: None,
title: "03-rust-web".into(),
depth: 1,
expandable: true,
expanded: false,
icon_kind: "folder".into(),
document_id: None,
asset_id: None,
relative_path: Some("design/03-rust-web".into()),
object_identity: None,
selected: false,
}],
});
assert!(html.contains(r#"data-local-relative-path="design/03-rust-web""#));
assert!(html.contains(r#"<button type="button" class="tree-link""#));
}
}