refactor: clean up write page formatting and remove separator line

- Reorder imports to group wasm32-gated items together
- Format struct pattern matches for readability
- Remove metadata/editor separator line for cleaner visual flow

Dioxus.toml

@@ -14,5 +14,5 @@ style = ["/style.css", "/highlight.css", "/tiptap/editor.css"]
 script = ["/tiptap/editor.js"]
 
 [web.resource.dev]
-style = ["/tiptap/editor.css"]
+style = ["/style.css", "/highlight.css", "/tiptap/editor.css"]
 script = ["/tiptap/editor.js"]

src/components/admin_layout.rs

@@ -73,12 +73,26 @@ pub fn AdminLayout() -> Element {
         }
     };
 
+    let is_write_route = matches!(route, Route::Write {}) || matches!(route, Route::WriteEdit { .. });
+    let main_class = if is_write_route {
+        "flex-1 w-full max-w-5xl mx-auto px-6 flex flex-col overflow-hidden"
+    } else {
+        "flex-1 w-full max-w-5xl mx-auto px-6 py-8"
+    };
+
+    // Write 路由：页面固定高度，不滚动，由编辑器内部处理滚动
+    let root_class = if is_write_route {
+        "h-dvh flex flex-col overflow-hidden bg-white dark:bg-[#1d1e20]"
+    } else {
+        "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20]"
+    };
+
     match ((ctx.checked)(), (ctx.user)()) {
         (true, Some(_)) => {
             rsx! {
-                div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20]",
+                div { class: "{root_class}",
                     Header { nav_items: admin_nav_items, right_content: right_content }
-                    main { class: "flex-1 w-full max-w-5xl mx-auto px-6 py-8",
+                    main { class: "{main_class}",
                         Outlet::<Route> {}
                     }
                     Footer {}
@@ -87,17 +101,19 @@ pub fn AdminLayout() -> Element {
         }
         (true, None) => {
             rsx! {
-                div { class: "min-h-screen flex items-center justify-center bg-white dark:bg-[#1d1e20]",
+                div { class: "{root_class}",
+                    div { class: "flex-1 flex items-center justify-center",
                         p { class: "text-gray-600 dark:text-[#9b9c9d]", "未登录，正在跳转..." }
                     }
                 }
             }
+        }
         (false, _) => {
             // 使用与真实布局完全相同的结构包裹内容骨架，避免 checked 变化时的布局闪烁
             rsx! {
-                div { class: "min-h-screen flex flex-col bg-white dark:bg-[#1d1e20]",
+                div { class: "{root_class}",
                     Header { nav_items: admin_nav_items, right_content: right_content }
-                    main { class: "flex-1 w-full max-w-5xl mx-auto px-6 py-8",
+                    main { class: "{main_class}",
                         div { class: if show_skeleton() { "" } else { "opacity-0" },
                             {match route {
                                 Route::Write {} => rsx! { WriteSkeleton {} },

src/components/write_skeleton.rs

@@ -4,26 +4,39 @@ use crate::components::skeletons::atoms::*;
 #[component]
 pub fn WriteSkeleton() -> Element {
     rsx! {
-        div { class: "space-y-6 p-1",
+        div { class: "relative flex flex-col flex-1 min-h-0 overflow-hidden",
-            div { class: "rounded-xl bg-white dark:bg-[#2e2e33] border border-gray-200 dark:border-[#333] p-6 space-y-5",
+            // 顶部元信息骨架 - 固定高度
-                SkeletonBox { class: "h-9 w-2/3 rounded-lg" }
+            div { class: "flex-shrink-0 space-y-5 pt-8",
-                SkeletonBox { class: "h-16 w-full rounded-lg" }
+                // 标题骨架
-                div { class: "grid grid-cols-1 md:grid-cols-3 gap-3",
+                SkeletonBox { class: "h-12 w-2/3 rounded-lg" }
+
+                // 摘要骨架
+                SkeletonBox { class: "h-14 w-full rounded-lg" }
+
+                // 元数据行骨架
+                div { class: "flex flex-wrap items-end gap-x-8 gap-y-4",
                     for _ in 0..3 {
-                        div { class: "space-y-2",
+                        div { class: "flex-1 min-w-[140px] space-y-2",
-                            SkeletonBox { class: "h-3 w-10 rounded" }
+                            SkeletonBox { class: "h-3 w-12 rounded" }
-                            SkeletonBox { class: "h-10 w-full rounded-lg" }
+                            SkeletonBox { class: "h-8 w-full rounded-lg" }
-                        }
                         }
                     }
                 }
 
-            div { class: "w-full h-[500px] rounded-lg border border-gray-200 dark:border-[#333] bg-white dark:bg-[#1e1e1e] space-y-4",
+                // 分隔线
-                div { class: "flex gap-2 p-4 border-b border-gray-100 dark:border-[#333]",
+                div { class: "h-px bg-[var(--color-paper-tertiary)]" }
+            }
+
+            // 编辑器骨架 - 沾满剩余高度
+            div { class: "flex-1 min-h-0 flex flex-col my-4",
+                div { class: "flex-1 min-h-0 w-full rounded-xl border border-[var(--color-paper-border)] bg-[var(--color-paper-entry)] space-y-4 p-4",
+                    // 编辑器工具栏骨架
+                    div { class: "flex gap-2 pb-3 border-b border-[var(--color-paper-border)]",
                         for _ in 0..8 {
                             SkeletonBox { class: "w-8 h-8 rounded" }
                         }
                     }
+                    // 编辑器内容骨架
                     div { class: "space-y-3 pt-2",
                         SkeletonBox { class: "h-4 w-[90%] rounded" }
                         SkeletonBox { class: "h-4 w-full rounded" }
@@ -39,12 +52,13 @@ pub fn WriteSkeleton() -> Element {
                         SkeletonBox { class: "h-4 w-[90%] rounded" }
                     }
                 }
+            }
 
-            div { class: "flex items-center gap-3 pt-2",
+            // 按钮行骨架
-                div { class: "flex-1" }
+            div { class: "flex-shrink-0 flex items-center gap-2 pt-2 pb-4",
-                SkeletonBox { class: "h-10 w-[72px] rounded-full" }
+                SkeletonBox { class: "h-9 w-[60px] rounded-full" }
-                SkeletonBox { class: "h-10 w-[100px] rounded-full" }
+                SkeletonBox { class: "h-9 w-[80px] rounded-full" }
-                SkeletonBox { class: "h-10 w-[72px] rounded-full" }
+                SkeletonBox { class: "h-9 w-[60px] rounded-full" }
             }
         }
     }

src/pages/admin/write.rs

@@ -3,9 +3,9 @@ use dioxus::prelude::*;
 #[cfg(target_arch = "wasm32")]
 use wasm_bindgen::JsCast;
 
-use crate::api::posts::{get_post_by_id, SinglePostResponse};
 #[cfg(target_arch = "wasm32")]
 use crate::api::posts::{create_post, update_post, CreatePostResponse};
+use crate::api::posts::{get_post_by_id, SinglePostResponse};
 use crate::components::write_skeleton::WriteSkeleton;
 use crate::router::Route;
 
@@ -276,7 +276,11 @@ fn write_editor(post_id: Option<i32>) -> Element {
                             success.set(true);
                             let _ = dioxus::router::navigator().push(Route::Posts {});
                         }
-                        Ok(CreatePostResponse { success: false, message, .. }) => {
+                        Ok(CreatePostResponse {
+                            success: false,
+                            message,
+                            ..
+                        }) => {
                             saving.set(false);
                             error.set(Some(message));
                         }
@@ -305,7 +309,11 @@ fn write_editor(post_id: Option<i32>) -> Element {
                             success.set(true);
                             let _ = dioxus::router::navigator().push(Route::Admin {});
                         }
-                        Ok(CreatePostResponse { success: false, message, .. }) => {
+                        Ok(CreatePostResponse {
+                            success: false,
+                            message,
+                            ..
+                        }) => {
                             saving.set(false);
                             error.set(Some(message));
                         }
@@ -328,53 +336,64 @@ fn write_editor(post_id: Option<i32>) -> Element {
     };
 
     rsx! {
-        div { class: "relative",
+        div { class: "relative flex flex-col flex-1 min-h-0 overflow-hidden",
             if loading() {
-                div { class: "absolute inset-0 z-10 bg-white dark:bg-[#1d1e20]",
+                div { class: "absolute inset-0 z-10 bg-[var(--color-paper-theme)]",
                     WriteSkeleton {}
                 }
             }
 
-            div { class: "space-y-6",
+            // 顶部元信息区域 - 固定高度，不滚动
-                div { class: "rounded-xl bg-white dark:bg-[#2e2e33] border border-gray-200 dark:border-[#333] p-6 space-y-5",
+            div { class: "flex-shrink-0 space-y-5 pt-8",
+                // 标题区域 - 大字号无框输入
+                div {
                     input {
-                        class: "w-full text-2xl font-bold bg-transparent text-gray-900 dark:text-[#dadadb] placeholder-gray-300 dark:placeholder-[#555] focus:outline-none",
+                        class: "w-full text-3xl md:text-4xl font-bold bg-transparent text-[var(--color-paper-primary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none tracking-tight leading-tight",
                         placeholder: "文章标题",
                         value: "{title}",
                         oninput: move |evt| title.set(evt.value()),
                     }
+                }
 
+                // 摘要
                 textarea {
-                        class: "w-full text-sm bg-gray-50 dark:bg-[#1d1e20] rounded-lg px-4 py-3 text-gray-700 dark:text-[#9b9c9d] placeholder-gray-400 dark:placeholder-[#555] focus:outline-none resize-none border border-gray-100 dark:border-[#333]",
+                    class: "w-full text-base bg-transparent text-[var(--color-paper-secondary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none resize-none leading-relaxed",
                     placeholder: "摘要（留空则自动生成）",
                     rows: "2",
                     value: "{summary}",
                     oninput: move |evt| summary.set(evt.value()),
                 }
 
-                    div { class: "grid grid-cols-1 md:grid-cols-3 gap-3",
+                // 元数据行 - 紧凑精致
-                        div {
+                div { class: "flex flex-wrap items-end gap-x-8 gap-y-4 text-sm",
-                            label { class: "block text-xs text-gray-600 dark:text-[#9b9c9d] mb-1.5 font-medium", "Slug" }
+                    div { class: "flex-1 min-w-[140px]",
+                        label { class: "block text-[11px] font-medium text-[var(--color-paper-secondary)] tracking-wider mb-2",
+                            "Slug"
+                        }
                         input {
-                                class: "w-full text-sm bg-gray-50 dark:bg-[#1d1e20] rounded-lg px-3 py-2.5 text-gray-700 dark:text-[#9b9c9d] placeholder-gray-400 dark:placeholder-[#555] focus:outline-none border border-gray-100 dark:border-[#333]",
+                            class: "w-full text-sm bg-transparent text-[var(--color-paper-primary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none border-b border-[var(--color-paper-tertiary)] focus:border-[var(--color-paper-primary)] transition-colors pb-1.5",
                             placeholder: "自动生成",
                             value: "{slug}",
                             oninput: move |evt| slug.set(evt.value()),
                         }
                     }
-                        div {
+                    div { class: "flex-1 min-w-[140px]",
-                            label { class: "block text-xs text-gray-600 dark:text-[#9b9c9d] mb-1.5 font-medium", "标签" }
+                        label { class: "block text-[11px] font-medium text-[var(--color-paper-secondary)] tracking-wider mb-2",
+                            "标签"
+                        }
                         input {
-                                class: "w-full text-sm bg-gray-50 dark:bg-[#1d1e20] rounded-lg px-3 py-2.5 text-gray-700 dark:text-[#9b9c9d] placeholder-gray-400 dark:placeholder-[#555] focus:outline-none border border-gray-100 dark:border-[#333]",
+                            class: "w-full text-sm bg-transparent text-[var(--color-paper-primary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none border-b border-[var(--color-paper-tertiary)] focus:border-[var(--color-paper-primary)] transition-colors pb-1.5",
                             placeholder: "逗号分隔",
                             value: "{tags}",
                             oninput: move |evt| tags.set(evt.value()),
                         }
                     }
-                        div {
+                    div { class: "flex-1 min-w-[140px]",
-                            label { class: "block text-xs text-gray-600 dark:text-[#9b9c9d] mb-1.5 font-medium", "封面图" }
+                        label { class: "block text-[11px] font-medium text-[var(--color-paper-secondary)] tracking-wider mb-2",
+                            "封面图"
+                        }
                         input {
-                                class: "w-full text-sm bg-gray-50 dark:bg-[#1d1e20] rounded-lg px-3 py-2.5 text-gray-700 dark:text-[#9b9c9d] placeholder-gray-400 dark:placeholder-[#555] focus:outline-none border border-gray-100 dark:border-[#333]",
+                            class: "w-full text-sm bg-transparent text-[var(--color-paper-primary)] placeholder-[var(--color-paper-tertiary)] focus:outline-none border-b border-[var(--color-paper-tertiary)] focus:border-[var(--color-paper-primary)] transition-colors pb-1.5",
                             placeholder: "URL（可选）",
                             value: "{cover_image}",
                             oninput: move |evt| cover_image.set(evt.value()),
@@ -383,40 +402,45 @@ fn write_editor(post_id: Option<i32>) -> Element {
                 }
             }
 
+            // 编辑器区域 - 沾满剩余高度
+            div { class: "flex-1 min-h-0 flex flex-col my-4",
                 div {
-                    class: "w-full h-[500px] border border-gray-200 dark:border-[#333] rounded-lg overflow-hidden bg-white dark:bg-[#1e1e1e]",
+                    class: "flex-1 min-h-0 w-full border border-[var(--color-paper-border)] rounded-xl overflow-hidden bg-[var(--color-paper-entry)] shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:shadow-none",
                     id: "tiptap-editor",
                 }
+            }
 
+            // 错误和成功提示
             if let Some(err) = load_error() {
-                    div { class: "px-4 py-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-xl text-sm border border-red-100 dark:border-red-900/30",
+                div { class: "flex-shrink-0 px-4 py-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-xl text-sm border border-red-100 dark:border-red-900/30 mb-2",
                     "{err}"
                 }
             }
 
             if let Some(err) = error() {
-                    div { class: "px-4 py-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-xl text-sm border border-red-100 dark:border-red-900/30",
+                div { class: "flex-shrink-0 px-4 py-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-xl text-sm border border-red-100 dark:border-red-900/30 mb-2",
                     "{err}"
                 }
             }
 
             if success() {
-                    div { class: "px-4 py-3 bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 rounded-xl text-sm border border-green-100 dark:border-green-900/30",
+                div { class: "flex-shrink-0 px-4 py-2 bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 rounded-xl text-sm border border-green-100 dark:border-green-900/30 mb-2",
                     "保存成功"
                 }
             }
 
-                div { class: "flex items-center gap-3 pt-2",
+            // 底部操作栏 - 在编辑器下方，左对齐
-                    div { class: "flex-1" }
+            div { class: "flex-shrink-0 flex items-center gap-2 pt-2 pb-4",
                 button {
-                        class: "px-5 py-2.5 text-sm bg-gray-200 dark:bg-[#333] text-gray-700 dark:text-[#dadadb] rounded-full font-medium hover:opacity-80 transition-opacity cursor-pointer",
+                    class: "px-4 py-1.5 text-sm text-[var(--color-paper-secondary)] hover:text-[var(--color-paper-primary)] transition-colors cursor-pointer",
                     onclick: move |_| {
                         let _ = dioxus::router::navigator().push(Route::Posts {});
                     },
                     "取消"
                 }
+                div { class: "w-px h-5 bg-[var(--color-paper-border)]" }
                 div {
-                        class: "relative inline-flex items-center px-5 py-2.5 text-sm bg-gray-50 dark:bg-[#1d1e20] border border-gray-200 dark:border-[#333] rounded-full text-gray-700 dark:text-[#9b9c9d] cursor-pointer min-w-[80px]",
+                    class: "relative inline-flex items-center px-3 py-1.5 text-sm text-[var(--color-paper-secondary)] cursor-pointer",
                     select {
                         class: "absolute inset-0 w-full h-full opacity-0 cursor-pointer",
                         style: "appearance: none; -webkit-appearance: none;",
@@ -425,11 +449,11 @@ fn write_editor(post_id: Option<i32>) -> Element {
                         option { value: "draft", "草稿" }
                         option { value: "published", "发布" }
                     }
-                        span { class: "pr-2",
+                    span { class: "pr-1.5 text-[var(--color-paper-primary)] font-medium",
                         if status() == "draft" { "草稿" } else { "发布" }
                     }
                     svg {
-                            class: "h-4 w-4 text-gray-500 dark:text-[#666] pointer-events-none",
+                        class: "h-3.5 w-3.5 text-[var(--color-paper-tertiary)] pointer-events-none",
                         xmlns: "http://www.w3.org/2000/svg",
                         view_box: "0 0 20 20",
                         fill: "currentColor",
@@ -440,11 +464,12 @@ fn write_editor(post_id: Option<i32>) -> Element {
                         }
                     }
                 }
+                div { class: "w-px h-5 bg-[var(--color-paper-border)]" }
                 button {
                     class: if saving() {
-                            "px-6 py-2.5 text-sm bg-gray-400 text-white rounded-full font-medium cursor-not-allowed"
+                        "px-5 py-1.5 text-sm bg-[var(--color-paper-tertiary)] text-[var(--color-paper-secondary)] rounded-xl font-medium cursor-not-allowed"
                     } else {
-                            "px-6 py-2.5 text-sm bg-gray-900 dark:bg-[#dadadb] text-white dark:text-gray-900 rounded-full font-medium hover:opacity-80 transition-opacity cursor-pointer"
+                        "px-5 py-1.5 text-sm bg-[var(--color-paper-primary)] text-[var(--color-paper-theme)] rounded-xl font-medium hover:opacity-90 transition-opacity cursor-pointer"
                     },
                     disabled: saving(),
                     onclick: on_submit,
@@ -454,4 +479,3 @@ fn write_editor(post_id: Option<i32>) -> Element {
         }
     }
 }
-}