xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(write): 骨架屏同步为左右两栏布局

Browse Source 
骨架屏原为单列结构(顶部标题+元信息 → 编辑器 → 底栏),
与重构后的页面布局脱节。重写为镜像真实页面:

- 两栏容器:左 flex-1 + 右 w-80 border-l
- 左栏:标题 + 摘要 + 编辑器(flex-1 撑满,含工具栏+正文行)
- 右栏:链接/标签/封面三节(p-6 + border-b 分隔线)
- 底栏:px-6 border-t,圆角按钮占位

这样加载瞬间骨架屏与真实内容对齐,不会出现布局跳变。
This commit is contained in:
xfy 2026-07-09 14:11:48 +08:00
parent aba2aa2105
commit 1716976d91
1 changed files with 56 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/write_skeleton.rs
View File

@ -1,40 +1,40 @@
//! 文章编辑器页骨架屏
//!
//! 在写文章/编辑文章页面加载时展示，模拟标题、元信息、编辑器工具栏与正文区域。
//! 在写文章/编辑文章页面加载时展示，镜像 Write 页面的左右两栏结构：
//! 左栏(标题+摘要+编辑器) + 右栏(链接/标签/封面) + 底部操作栏。
use crate::components::skeletons::atoms::*;
use dioxus::prelude::*;
/// 文章编辑器页骨架屏组件。
///
/// 模拟 Write 页面的整体结构：顶部标题与元信息、中间编辑器区域、底部操作按钮。
/// 镜像 Write 页面的左右两栏布局：左栏主写作区(标题、摘要、编辑器)，
/// 右栏侧边栏(链接、标签、封面图)，底部贴底操作栏。
#[component]
pub fn WriteSkeleton() -> Element {
rsx! {
// 根:与 write.rs 根容器一致
div { class: "relative flex flex-col flex-1 min-h-0 overflow-hidden",
div { class: "flex-shrink-0 space-y-5 pt-8",
SkeletonBox { class: "h-12 w-2/3 rounded-lg" }
// 两栏容器:与真实页面一致,左 flex-1 + 右 w-80
div { class: "flex-1 min-h-0 flex",
// 左栏(主写作区)
div { class: "flex-1 min-w-0 min-h-0 overflow-y-auto px-6 py-8 flex flex-col",
// 标题输入
SkeletonBox { class: "h-10 w-3/4 rounded-lg" }
// 摘要
SkeletonBox { class: "h-5 w-full rounded mt-6" }
SkeletonBox { class: "h-14 w-full rounded-lg" }
div { class: "flex flex-wrap items-end gap-x-8 gap-y-4 text-sm",
for _ in 0..3 {
div { class: "flex-1 min-w-[140px]",
SkeletonBox { class: "h-[11px] w-10 rounded mb-2" }
SkeletonBox { class: "h-5 w-full rounded" }
}
}
}
}
div { class: "flex-1 min-h-0 flex flex-col my-4",
div { class: "flex-1 min-h-0 w-full border border-[var(--color-paper-border)] rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:shadow-none space-y-4 p-4",
// 编辑器区域:flex-1 撑满左栏剩余高度
div { class: "flex-1 min-h-[400px] flex flex-col my-4",
div { class: "flex-1 min-h-0 w-full border border-[var(--color-paper-border)] rounded-3xl overflow-hidden bg-[var(--color-paper-entry)] shadow-sm 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",
// 正文占位行
div { class: "space-y-3 pt-4",
SkeletonBox { class: "h-4 w-[90%] rounded" }
SkeletonBox { class: "h-4 w-full rounded" }
SkeletonBox { class: "h-4 w-[85%] rounded" }
@ -42,21 +42,38 @@ pub fn WriteSkeleton() -> Element {
SkeletonBox { class: "h-4 w-[60%] rounded" }
SkeletonBox { class: "h-4 w-full rounded" }
SkeletonBox { class: "h-4 w-[75%] rounded" }
SkeletonBox { class: "h-4 w-[80%] rounded" }
div { class: "h-4" }
SkeletonBox { class: "h-4 w-[70%] rounded" }
SkeletonBox { class: "h-4 w-full rounded" }
SkeletonBox { class: "h-4 w-[90%] rounded" }
}
}
}
}
div { class: "flex-shrink-0 flex items-center gap-2 pt-2 pb-4",
SkeletonBox { class: "h-9 w-[56px] rounded-xl" }
// 右栏(侧边栏):w-80 border-l,分节式
div { class: "w-80 flex-shrink-0 min-h-0 overflow-y-auto border-l border-[var(--color-paper-border)] flex flex-col",
// 链接节
div { class: "p-6 border-b border-[var(--color-paper-border)]",
SkeletonBox { class: "h-3 w-10 rounded mb-3" }
SkeletonBox { class: "h-8 w-full rounded-xl" }
}
// 标签节
div { class: "p-6 border-b border-[var(--color-paper-border)]",
SkeletonBox { class: "h-3 w-10 rounded mb-3" }
SkeletonBox { class: "h-8 w-full rounded-xl" }
}
// 封面图节
div { class: "p-6",
SkeletonBox { class: "h-3 w-12 rounded mb-3" }
SkeletonBox { class: "h-14 w-full rounded-2xl" }
}
}
}
// 底部操作栏:与真实页面 px-6 py-4 border-t 一致
div { class: "flex-shrink-0 px-6 py-4 flex items-center gap-4 border-t border-[var(--color-paper-border)]",
SkeletonBox { class: "h-9 w-[56px] rounded-full" }
div { class: "w-px h-5 bg-[var(--color-paper-border)]" }
SkeletonBox { class: "h-9 w-[72px] rounded-xl" }
SkeletonBox { class: "h-9 w-[96px] rounded-full" }
div { class: "w-px h-5 bg-[var(--color-paper-border)]" }
SkeletonBox { class: "h-9 w-[56px] rounded-xl" }
SkeletonBox { class: "h-9 w-[72px] rounded-full" }
}
}
}