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

收敛树命令与投影切换

Browse Source
This commit is contained in:
lix-2026
2026-04-30 06:58:17 +08:00
parent 3cc090ba5e
commit 8c895b3dc0
16 changed files with 980 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
rust/crates/mnote-web/src/ssr/styles.rs
+224 -11
View File
@@ -93,6 +93,100 @@ a:hover {
stroke-width: 1.35;
}
.material-symbols-outlined {
font-family: var(--wolai-font-sans);
font-weight: normal;
font-style: normal;
font-size: 20px;
line-height: 1;
letter-spacing: 0;
text-transform: none;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
.material-symbols-outlined::before {
content: "";
display: block;
width: 1em;
height: 1em;
background: currentColor;
-webkit-mask: var(--mnote-icon-mask) center / contain no-repeat;
mask: var(--mnote-icon-mask) center / contain no-repeat;
}
.material-symbols-outlined[data-icon="search"]::before { content: "⌕"; }
.material-symbols-outlined[data-icon="account_tree"]::before { content: "⌘"; }
.material-symbols-outlined[data-icon="bolt"]::before { content: "ϟ"; }
.material-symbols-outlined[data-icon="help"]::before { content: "?"; }
.material-symbols-outlined[data-icon="inventory_2"]::before { content: "▣"; }
.material-symbols-outlined[data-icon="more_horiz"]::before { content: "…"; }
.material-symbols-outlined[data-icon="menu"]::before { content: "☰"; }
.material-symbols-outlined[data-icon="home"]::before { content: "⌂"; }
.material-symbols-outlined[data-icon="star"]::before { content: "☆"; }
.material-symbols-outlined[data-icon="history"]::before { content: "◷"; }
.material-symbols-outlined[data-icon="auto_awesome"]::before { content: "✦"; }
.material-symbols-outlined[data-icon="folder_open"]::before,
.material-symbols-outlined[data-icon="drive_file_move"]::before { content: "▱"; }
.material-symbols-outlined[data-icon="delete"]::before { content: "⌫"; }
.material-symbols-outlined[data-icon="right_panel_open"]::before,
.material-symbols-outlined[data-icon="open_in_new"]::before { content: "↗"; }
.material-symbols-outlined[data-icon="share"]::before { content: "⇪"; }
.material-symbols-outlined[data-icon="link"]::before { content: "∞"; }
.material-symbols-outlined[data-icon="content_copy"]::before,
.material-symbols-outlined[data-icon="file_copy"]::before { content: "⧉"; }
.material-symbols-outlined[data-icon="tag"]::before { content: "#"; }
.material-symbols-outlined[data-icon="edit"]::before { content: "✎"; }
.material-symbols-outlined[data-icon="add"]::before { content: "+"; }
.material-symbols-outlined[data-icon="subdirectory_arrow_right"]::before { content: "↳"; }
.material-symbols-filled {
font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}
/* 本地 SVG mask 图标，避免 Google Material Symbols 字体未加载时露出英文图标名。 */
.material-symbols-outlined[data-icon]::before { content: ""; }
.material-symbols-outlined[data-icon="search"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.8 18a7.2 7.2 0 1 1 0-14.4 7.2 7.2 0 0 1 0 14.4Z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='m16 16 4.2 4.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="account_tree"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6h4v4H6zM14 4h4v4h-4zM14 16h4v4h-4z' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 8h2a2 2 0 0 0 2-2M10 8h2a2 2 0 0 1 2 2v8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="bolt"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2 4.5 13h6L9 22l10.5-13h-6z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="help"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M9.8 9a2.4 2.4 0 0 1 4.6 1.1c0 1.7-1.7 2-2.2 3.1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.1' fill='black'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="inventory_2"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.5h16v4H4zM6 9.5h12V19H6z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.5 13.5h5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="more_horiz"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='12' r='2' fill='black'/%3E%3Ccircle cx='12' cy='12' r='2' fill='black'/%3E%3Ccircle cx='19' cy='12' r='2' fill='black'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="menu"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="home"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 11 12 4l8 7v9H5v-9Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.5 20v-6h5v6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="star"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3 2.7 5.4 6 .9-4.4 4.3 1 6-5.3-2.8-5.3 2.8 1-6-4.4-4.3 6-.9z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="history"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.7L4 8.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 4v4.5h4.5M12 8v5l3.5 2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="auto_awesome"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 3 1.6 5.2L19 10l-5.4 1.8L12 17l-1.6-5.2L5 10l5.4-1.8zM5.5 15.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8zM18.5 2.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z' fill='black'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="folder_open"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 7.5h6l2 2H21v8.5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9a1.5 1.5 0 0 1 1.5-1.5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M4 18 7 11h14l-3 7' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="drive_file_move"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h6l2 2h8v10H4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m13 12 3 3-3 3M8 15h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="delete"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 6h14M9 6V4h6v2M8 6l1 14h6l1-14M10.5 10v6M13.5 10v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="right_panel_open"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16v14H4zM14 5v14M8 12h6M11 9l3 3-3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="open_in_new"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 6H5v13h13v-3M12 5h7v7M10 14 19 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="share"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='18' cy='5' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='6' cy='12' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='18' cy='19' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m8.7 10.7 6.6-4.4M8.7 13.3l6.6 4.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="link"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 14.5 14.5 9.5M10.8 6.2l1.1-1.1a4 4 0 0 1 5.7 5.7l-1.6 1.6M13.2 17.8l-1.1 1.1a4 4 0 0 1-5.7-5.7L8 11.6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="content_copy"],
.material-symbols-outlined[data-icon="file_copy"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 8h10v12H8zM6 16H4V4h10v2' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="tag"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4 5 20M19 4l-4 16M4 9h16M3 15h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="edit"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 17-.5 3.5L7 20l11-11-3-3zM13 8l3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="add"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="subdirectory_arrow_right"] { --mnote-icon-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 4v7a3 3 0 0 0 3 3h8M14 10l4 4-4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.material-symbols-outlined[data-icon="radio_button_unchecked"]::before {
width: .78em;
height: .78em;
background: transparent;
border: 2px solid currentColor;
border-radius: 999px;
-webkit-mask: none;
mask: none;
}
/* ===== 滚动条（悬停时显示） ===== */
::-webkit-scrollbar {
width: 8px;
@@ -1190,10 +1284,14 @@ body {
flex: 0 0 20px;
color: #111111;
font-size: 15px;
overflow: hidden;
}
.sidebar-tree .tree-kind-badge::before {
content: "□";
font-family: var(--wolai-font-sans);
font-size: 18px;
line-height: 1;
}
.sidebar-tree .tree-kind-badge[data-kind="page"]::before {
@@ -1210,11 +1308,28 @@ body {
color: var(--atelier-secondary);
}
.sidebar-tree .tree-kind-badge[data-kind="folder"]::before {
.sidebar-tree .tree-kind-badge[data-kind="folder"]::before,
.sidebar-tree .tree-kind-badge[data-kind="asset_folder"]::before {
content: "▱";
color: #D08A1F;
}
.sidebar-tree .tree-kind-badge[data-kind="image"]::before {
content: "▧";
color: #5B7CFA;
}
.sidebar-tree .tree-kind-badge[data-kind="mindmap"]::before {
content: "⌘";
color: #31AA4D;
}
.sidebar-tree .tree-kind-badge[data-kind="table"]::before,
.sidebar-tree .tree-kind-badge[data-kind="luckysheet"]::before {
content: "▦";
color: #2367F6;
}
.sidebar-tree .tree-link {
padding: 0 2px;
color: inherit;
@@ -1245,6 +1360,89 @@ body {
color: var(--atelier-text);
}
.mnote-tree-context-menu {
position: fixed;
z-index: 1000;
min-width: 236px;
max-width: min(320px, calc(100vw - 16px));
padding: 6px;
border: 1px solid rgba(27, 28, 28, 0.08);
border-radius: 8px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 16px 32px rgba(27, 28, 28, 0.12);
backdrop-filter: blur(24px);
color: var(--atelier-text);
}
.mnote-tree-context-menu__item {
width: 100%;
min-height: 34px;
display: flex;
align-items: center;
gap: 10px;
padding: 0 9px;
border: 0;
border-radius: 5px;
background: transparent;
color: inherit;
font: inherit;
font-size: 14px;
line-height: 1.2;
text-align: left;
cursor: pointer;
}
.mnote-tree-context-menu__item:hover {
background: #F4F3F3;
}
.mnote-tree-context-menu__item:disabled {
opacity: 0.45;
cursor: default;
}
.mnote-tree-context-menu__item--danger {
color: #D64545;
}
.mnote-tree-context-menu__item--danger:hover {
background: rgba(214, 69, 69, 0.08);
}
.mnote-tree-context-menu__icon {
width: 18px;
flex: 0 0 18px;
color: #6D6A65;
font-size: 18px;
}
.mnote-tree-context-menu__icon::before {
font-size: 18px;
}
.mnote-tree-context-menu__item--danger .mnote-tree-context-menu__icon {
color: currentColor;
}
.mnote-tree-context-menu__label {
min-width: 0;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mnote-tree-context-menu__shortcut {
color: #A19D97;
font-size: 12px;
}
.mnote-tree-context-menu__separator {
height: 1px;
margin: 5px 4px;
background: rgba(27, 28, 28, 0.08);
}
.sidebar-tree .tree-node .tree-children .tree-row {
padding-left: 20px;
}
@@ -1406,6 +1604,16 @@ body {
margin-bottom: 12px;
}
.mnote-material-page-icon {
width: 72px;
height: 72px;
font-size: 72px;
}
.mnote-material-page-icon::before {
font-size: 72px;
}
.document-title-heading,
.document-shell-header h1 {
padding: 0;
@@ -1497,7 +1705,7 @@ body {
}
#mnote-leptos-tiptap-island-editor-root .block-handle-shell {
left: -52px !important;
left: -88px !important;
z-index: 5;
opacity: 0.2;
pointer-events: none;
@@ -1607,9 +1815,14 @@ body {
height: 60px;
}
.document-page-icon .mnote-symbol--document {
width: 44px;
height: 44px;
.mnote-material-page-icon {
width: 48px;
height: 48px;
font-size: 48px;
}
.mnote-material-page-icon::before {
font-size: 48px;
}
.document-shell-header h1 {
@@ -1617,7 +1830,7 @@ body {
}
#mnote-leptos-tiptap-island-editor-root .block-handle-shell {
left: -36px !important;
left: -64px !important;
}
}
@@ -1700,17 +1913,17 @@ mod tests {
fn mnote_css_keeps_tiptap_handles_in_margin_and_title_editable() {
assert!(MNOTE_CSS.contains(".document-title-input"));
assert!(MNOTE_CSS.contains(".block-handle-shell"));
assert!(MNOTE_CSS.contains("left: -52px !important"));
assert!(MNOTE_CSS.contains("left: -88px !important"));
assert!(MNOTE_CSS.contains("pointer-events: none"));
assert!(MNOTE_CSS.contains(".mnote-symbol"));
assert!(MNOTE_CSS.contains("data-icon=\"home\""));
assert!(MNOTE_CSS.contains(".material-symbols-outlined"));
assert!(MNOTE_CSS.contains(".mnote-tree-context-menu"));
}
#[test]
fn mnote_css_is_reasonably_sized() {
// 至少 2000 字符才能包含完整样式
assert!(MNOTE_CSS.len() > 2000);
// 最多 20000 字符避免过于臃肿
assert!(MNOTE_CSS.len() < 32000);
// 菜单与本地 SVG mask 图标会增加体积，仍保持在单文件可审阅范围内。
assert!(MNOTE_CSS.len() < 46000);
}
}