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/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>