feat: finish rust web dual pane document shell

rust/crates/mnote-web/src/ssr/styles.rs

@@ -1828,12 +1828,68 @@ body {
   margin: 0 auto;
 }
 
+.document-workspace {
+  --mnote-secondary-pane-width: minmax(320px, 42%);
+  --mnote-secondary-pane-resizer-width: 6px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  width: 100%;
+  min-width: 0;
+}
+
+.document-workspace[data-has-secondary-pane="true"] {
+  grid-template-columns: minmax(0, 1fr) var(--mnote-secondary-pane-resizer-width) var(--mnote-secondary-pane-width);
+}
+
+.document-pane {
+  min-width: 0;
+}
+
+.document-pane[hidden] {
+  display: none !important;
+}
+
+.document-pane-resizer {
+  display: none;
+  width: var(--mnote-secondary-pane-resizer-width);
+  min-height: calc(100vh - 40px);
+  cursor: col-resize;
+  position: relative;
+}
+
+.document-workspace[data-has-secondary-pane="true"] .document-pane-resizer {
+  display: block;
+}
+
+.document-pane-resizer::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 64px;
+  bottom: 48px;
+  width: 2px;
+  border-radius: 999px;
+  background: rgba(27, 28, 28, 0.08);
+}
+
 .document-shell-header {
   max-width: none;
   padding: 0;
   margin: 0 0 50px;
 }
 
+.document-pane-header-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.document-pane-header-row .document-title-heading {
+  flex: 1;
+  min-width: 0;
+}
+
 .document-page-icon {
   display: none;
 }
@@ -1886,6 +1942,26 @@ body {
   text-underline-offset: 6px;
 }
 
+.document-pane-close {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 8px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #6D6A65;
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+
+.document-pane-close:hover {
+  background: #F4F3F3;
+  color: #1B1C1C;
+}
+
 .document-shell-meta {
   display: none;
 }
@@ -2048,6 +2124,16 @@ body {
   width: min(100%, 980px);
 }
 
+.document-pane[data-pane-role="secondary"] .document-shell {
+  width: min(100%, 820px);
+  padding-left: 28px;
+  padding-right: 20px;
+}
+
+.document-pane[data-pane-role="secondary"] .document-shell-header {
+  margin-bottom: 36px;
+}
+
 .document-shell[data-page-small-text="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror,
 .document-shell[data-page-small-text="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror p,
 .document-shell[data-page-small-text="true"] #mnote-leptos-tiptap-island-editor-root .ProseMirror li {
@@ -2601,6 +2687,20 @@ body {
     display: none;
   }
 
+  .document-workspace[data-has-secondary-pane="true"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .document-workspace[data-has-secondary-pane="true"] .document-pane-resizer {
+    display: none;
+  }
+
+  .document-pane[data-pane-role="secondary"] .document-shell {
+    padding-top: 32px;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
   .document-shell {
     width: 100%;
     padding: 48px 28px 120px;
@@ -2711,7 +2811,7 @@ mod tests {
     fn mnote_css_is_reasonably_sized() {
         // 至少 2000 字符才能包含完整样式
         assert!(MNOTE_CSS.len() > 2000);
-        // 菜单与本地 SVG mask 图标会增加体积，仍保持在单文件可审阅范围内。
-        assert!(MNOTE_CSS.len() < 46000);
+        // 当前整合了工作区壳、编辑器样式、树菜单和双 pane 布局，仍保持在单文件可审阅范围内。
+        assert!(MNOTE_CSS.len() < 70000);
     }
 }