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

fix: align rust web stitch sidebar tabs

Browse Source
This commit is contained in:
lix-2026
2026-04-29 16:23:49 +08:00
parent 33ddda9dfd
commit 6ddc95412c
9 changed files with 874 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rust/crates/mnote-web/src/ssr/pages/document.rs
+10
View File
@@ -37,11 +37,21 @@ pub fn DocumentPage(
.map(str::trim)
.filter(|value| !value.is_empty() && *value != "null")
.is_some();
let workspace_label = workspace_name
.clone()
.map(|value| value.trim().to_string())
.filter(|value| !value.is_empty())
.unwrap_or_else(|| "个人空间".to_string());
view! {
<PageLayout current_nav="documents" sidebar_tree_html={sidebar_tree_html.unwrap_or_default()} workspace_name={workspace_name.unwrap_or_default()} workspace_sidebar_html={workspace_sidebar_html.unwrap_or_default()} topbar_title={title.clone()}>
<main class="document-shell" data-editor-host="leptos_tiptap_island" data-document-id={document_id.clone()}>
<header class="document-shell-header">
<div class="document-page-icon" aria-hidden="true">"⌂"</div>
<h1>{title}</h1>
<div class="document-shell-meta" aria-label="页面元信息">
<span><span aria-hidden="true">"◌"</span>{workspace_label}</span>
<span><span aria-hidden="true">"▣"</span>"已同步"</span>
</div>
</header>
<section data-page-aggregate-snapshot="mnote.page_aggregate.v1"></section>
<section
rust/crates/mnote-web/src/ssr/pages/home.rs
+6 -1
View File
@@ -43,9 +43,14 @@ pub fn HomePage(
<PageLayout current_nav="home" sidebar_tree_html={sidebar_tree_html.unwrap_or_default()} workspace_name={workspace_name.unwrap_or_default()} workspace_sidebar_html={workspace_sidebar_html.unwrap_or_default()} topbar_title={active_page_title.clone()}>
{move || if has_active_page {
view! {
<main class="document-shell" data-root-active-page-id={active_page_id.clone()} data-editor-host="leptos_tiptap_island">
<main class="document-shell document-shell--workspace-entry" data-root-active-page-id={active_page_id.clone()} data-editor-host="leptos_tiptap_island">
<header class="document-shell-header">
<div class="document-page-icon" aria-hidden="true">"⌂"</div>
<h1>{active_page_title.clone()}</h1>
<div class="document-shell-meta" aria-label="页面元信息">
<span><span aria-hidden="true">"◌"</span>"个人空间"</span>
<span><span aria-hidden="true">"▣"</span>"工作区首页"</span>
</div>
</header>
<section class="mnote-workspace-active-state" data-testid="mnote-workspace-active-page-state">
<a class="mnote-workspace-active-link" href={active_href.clone()}>"打开当前页面"</a>
rust/crates/mnote-web/src/ssr/pages/layout.rs
+44 -13
View File
@@ -51,7 +51,32 @@ const SIDEBAR_TREE_JS: &str = r##"
window.location.href = '/documents/' + encodeURIComponent(result.documentId) + '?workspaceId=' + encodeURIComponent(nextWorkspaceId);
}
function switchSidebarTreeTab(trigger) {
var mode = (trigger.getAttribute('data-mnote-sidebar-tree-tab') || 'page').trim();
var shell = trigger.closest('[data-testid="wolai-sidebar-page-tree-shell"]');
if (!shell) return;
var tabs = shell.querySelectorAll('[data-mnote-sidebar-tree-tab]');
for (var i = 0; i < tabs.length; i++) {
var isActive = tabs[i].getAttribute('data-mnote-sidebar-tree-tab') === mode;
tabs[i].setAttribute('aria-selected', isActive ? 'true' : 'false');
tabs[i].classList.toggle('wolai-sidebar-tab-active', isActive);
tabs[i].classList.toggle('wolai-sidebar-tab-muted', !isActive);
}
var panels = shell.querySelectorAll('[data-mnote-sidebar-tree-panel]');
for (var j = 0; j < panels.length; j++) {
var isCurrentPanel = panels[j].getAttribute('data-mnote-sidebar-tree-panel') === mode;
panels[j].hidden = !isCurrentPanel;
}
}
document.addEventListener('click', function(e) {
var tabTrigger = closestAction(e.target, '[data-mnote-sidebar-tree-tab]');
if (tabTrigger) {
e.preventDefault();
switchSidebarTreeTab(tabTrigger);
return;
}
var createTrigger = closestAction(e.target, '[data-mnote-action="create-page"]');
if (createTrigger) {
e.preventDefault();
@@ -184,10 +209,10 @@ pub fn PageLayout(
</div>
<nav class="mnote-sidebar-nav wolai-quick-actions" aria-label="快捷操作">
<a href="/search" class:active={current_nav == "search"} title="搜索"><span class="nav-icon">"⌕"</span></a>
<a href="/graph" title="关系图"><span class="nav-icon">"⌬"</span></a>
<a href="/graph" title="关系图"><span class="nav-icon">"⌘"</span></a>
<a href="/actions" title="快捷动作"><span class="nav-icon">"↯"</span></a>
<a href="/inbox" title="收纳"><span class="nav-icon">"▣"</span></a>
<a href="/files" title="文件"><span class="nav-icon">"▱"</span></a>
<a href="/help" title="帮助"><span class="nav-icon">"?"</span></a>
<a href="/files" title="文件"><span class="nav-icon">"▣"</span></a>
<a href="/more" title="更多"><span class="nav-icon">"…"</span></a>
</nav>
<div class="wolai-sidebar-body" inner_html={sidebar_sections_html}></div>
@@ -195,23 +220,29 @@ pub fn PageLayout(
</aside>
<div class="mnote-main">
<header class="wolai-topbar" data-testid="wolai-topbar">
<div class="wolai-topbar-left"><span class="wolai-menu-icon">"☰"</span><span class="wolai-home-icon">"⌂"</span><span>{topbar_title}</span></div>
<div class="wolai-topbar-left">
<button type="button" class="wolai-icon-button wolai-menu-button" aria-label="切换侧栏">"☰"</button>
<nav class="wolai-breadcrumb" aria-label="页面路径">
<span class="wolai-breadcrumb-root">"The Digital Atelier"</span>
<span class="wolai-breadcrumb-separator" aria-hidden="true">"/"</span>
<span class="wolai-breadcrumb-current"><span class="wolai-home-icon" aria-hidden="true">"⌂"</span>{topbar_title}</span>
</nav>
</div>
<div class="wolai-topbar-actions" aria-label="页面操作">
<span title="收藏">"☆"</span>
<span title="演示">"▻"</span>
<span title="评论">"◴"</span>
<span title="关系">"⌬"</span>
<span title="成员">"♙+"</span>
<span title="历史">"◷"</span>
<span title="更多">"…"</span>
<span class="wolai-public-pill"><span aria-hidden="true">"●"</span>"Public"</span>
<button type="button" class="wolai-icon-button" title="收藏" aria-label="收藏">"☆"</button>
<button type="button" class="wolai-icon-button" title="历史" aria-label="历史">"◷"</button>
<button type="button" class="wolai-icon-button wolai-ai-inline" title="AI" aria-label="AI">"✦"</button>
<button type="button" class="wolai-icon-button" title="搜索" aria-label="搜索">"⌕"</button>
<button type="button" class="wolai-icon-button" title="更多" aria-label="更多">"…"</button>
</div>
</header>
<article class="mnote-content">
{children()}
</article>
<div class="wolai-floating-actions" aria-label="浮动操作">
<button type="button" data-testid="wolai-floating-ai" class="wolai-floating-button">"AI"</button>
<button type="button" data-testid="wolai-floating-help" class="wolai-floating-button">"?"</button>
<button type="button" data-testid="wolai-floating-help" class="wolai-floating-button wolai-floating-button--help" aria-label="帮助">"?"</button>
<button type="button" data-testid="wolai-floating-ai" class="wolai-floating-button wolai-floating-button--ai" aria-label="AI 助手">"✦"</button>
</div>
</div>
</div>