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

Implement Rust web sidebar title and tree interactions

Browse Source
This commit is contained in:
lix-2026
2026-04-30 05:46:36 +08:00
parent 559c5ce652
commit 3cc090ba5e
35 changed files with 3029 additions and 424 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rust/crates/mnote-web/src/tree_shell/filetree_renderer.rs
+30 -1
View File
@@ -57,18 +57,46 @@ fn render_filetree_row(
row: &FileTreeRenderRow,
children_by_parent: &BTreeMap<Option<String>, Vec<FileTreeRenderRow>>,
) {
let toggle_html = if row.expandable {
format!(
r#"<button type="button" class="tree-toggle" data-testid="filetree-toggle" data-rust-action="toggle" data-row-id="{row_id}" aria-label="{label} {title}">{marker}</button>"#,
row_id = escape_html(&row.row_id),
label = if row.expanded { "折叠" } else { "展开" },
title = escape_html(&row.title),
marker = if row.expanded { "▾" } else { "▸" },
)
} else {
r#"<span class="tree-spacer" aria-hidden="true"></span>"#.to_string()
};
let parent_attr = row
.parent_node_id
.as_deref()
.map(|parent_id| format!(r#" data-parent-id="{}""#, escape_html(parent_id)))
.unwrap_or_default();
let create_action_html = if row.row_kind == "document" {
format!(
r#"<button type="button" class="tree-action" data-testid="filetree-create" data-rust-action="create" data-row-id="{row_id}" data-node-id="{node_id}" aria-label="新建子页面">+</button>"#,
row_id = escape_html(&row.row_id),
node_id = escape_html(&row.node_id),
)
} else {
String::new()
};
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}" data-document-id="{document_id}" data-asset-id="{asset_id}" data-shell-mode="filetree" data-selected="{selected}" data-active="false"><span class="tree-spacer" aria-hidden="true"></span><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}"><span class="tree-link-title">{title}</span></button><div class="tree-actions"><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-asset-id="{asset_id}" 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-asset-id="{asset_id}"><span class="tree-link-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" },
test_id = row_test_id(&row.row_kind),
row_id = escape_html(&row.row_id),
row_kind = escape_html(&row.row_kind),
parent_attr = parent_attr,
document_id = escape_html(row.document_id.as_deref().unwrap_or_default()),
asset_id = escape_html(row.asset_id.as_deref().unwrap_or_default()),
selected = row.selected,
toggle_html = toggle_html,
icon_kind = escape_html(&row.icon_kind),
create_action_html = create_action_html,
title = escape_html(&row.title),
));
if row.expandable && row.expanded {
@@ -165,6 +193,7 @@ mod tests {
assert!(html.contains("data-rust-rendered-row=\"filetree\""));
assert!(html.contains("data-testid=\"filetree-doc-row\""));
assert!(html.contains("data-testid=\"filetree-index-row\""));
assert!(html.contains("data-doc-id=\"page_root\""));
assert!(html.contains("tree-children"));
assert!(html.contains("首页 &lt;安全&gt;"));
assert!(html.contains("data-selected=\"true\""));