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

refactor: fix skeleton atoms - remove unused components, use &str, migrate all skeletons

Browse Source
This commit is contained in:
xfy 2026-06-04 15:43:40 +08:00
parent ebf0f84733
commit 6ed12ff1cb
7 changed files with 56 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/skeletons/archive_skeleton.rs
View File

@ -10,29 +10,29 @@ pub fn ArchiveSkeleton() -> Element {
div {
// 统计行占位
div { class: "mt-2 mb-6",
SkeletonBox { class: "h-5 w-32".to_string() }
SkeletonBox { class: "h-5 w-32 rounded" }
}
// 年份分组占位
for _ in 0..2 {
div { class: "archive-year mt-10",
// 年份标题 (h2 text-2xl)
SkeletonBox { class: "h-8 w-24 mb-4".to_string() }
SkeletonBox { class: "h-8 w-24 rounded mb-4" }
// 月份分组
for _ in 0..2 {
div { class: "archive-month flex flex-col md:flex-row md:items-start py-2.5 border-b border-gray-100 dark:border-[#333]/50",
// 月份标题 (h3 text-lg, md:w-[200px])
SkeletonBox { class: "h-6 w-32 md:w-[200px] shrink-0 mb-2 md:mb-0 md:py-1.5".to_string() }
SkeletonBox { class: "h-6 w-32 md:w-[200px] shrink-0 rounded mb-2 md:mb-0 md:py-1.5" }
// 文章条目列表
div { class: "flex-1 space-y-3",
for _ in 0..3 {
div { class: "archive-entry py-1.5 my-2.5",
// 文章标题
SkeletonBox { class: "h-4 w-3/4 mb-1".to_string() }
SkeletonBox { class: "h-4 w-3/4 rounded mb-1" }
// 日期
SkeletonBox { class: "h-3 w-20".to_string() }
SkeletonBox { class: "h-3 w-20 rounded" }
}
}
}

24
src/components/skeletons/atoms.rs
View File

@ -1,30 +1,10 @@
use dioxus::prelude::*;
#[component]
pub fn SkeletonLine(width: String, height: String) -> Element {
pub fn SkeletonBox(class: &'static str) -> Element {
rsx! {
div {
class: "bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse",
style: "width: {width}; height: {height};",
}
}
}
#[component]
pub fn SkeletonBox(class: String) -> Element {
rsx! {
div {
class: "bg-gray-200 dark:bg-[#2a2a2a] rounded animate-pulse {class}",
}
}
}
#[component]
pub fn SkeletonCard() -> Element {
rsx! {
div { class: "rounded-xl bg-white dark:bg-[#2e2e33] border border-gray-200 dark:border-[#333] p-6 text-center space-y-3",
SkeletonLine { width: "64px".to_string(), height: "36px".to_string() }
SkeletonLine { width: "80px".to_string(), height: "16px".to_string() }
class: "bg-gray-200 dark:bg-[#2a2a2a] animate-pulse {class}",
}
}
}

5
src/components/skeletons/home_skeleton.rs
View File

@ -1,5 +1,6 @@
use dioxus::prelude::*;
use crate::components::skeletons::atoms::SkeletonBox;
use crate::components::skeletons::post_card_skeleton::PostCardSkeleton;
/// 首页骨架屏 - 模拟文章卡片列表 + 分页区域
@ -14,8 +15,8 @@ pub fn HomeSkeleton() -> Element {
}
// 分页按钮占位
div { class: "flex mt-10 mb-6 justify-between",
div { class: "h-9 w-24 bg-gray-200 dark:bg-[#2a2a2a] rounded-full" }
div { class: "h-9 w-24 bg-gray-200 dark:bg-[#2a2a2a] rounded-full" }
SkeletonBox { class: "h-9 w-24 rounded-full" }
SkeletonBox { class: "h-9 w-24 rounded-full" }
}
}
}

14
src/components/skeletons/post_card_skeleton.rs
View File

@ -1,5 +1,7 @@
use dioxus::prelude::*;
use crate::components::skeletons::atoms::SkeletonBox;
/// 文章卡片骨架屏 - 模拟 PostCard 的视觉结构
/// 包含：标题行(24px bold) + 摘要2行 + 元信息行(日期+标签)
#[component]
@ -8,16 +10,16 @@ pub fn PostCardSkeleton() -> Element {
article {
class: "mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333]",
// 标题占位 (模拟 h2 text-2xl font-bold)
div { class: "h-7 w-3/4 bg-gray-200 dark:bg-[#2a2a2a] rounded mb-3" }
SkeletonBox { class: "h-7 w-3/4 rounded mb-3" }
// 摘要第一行
div { class: "h-4 w-full bg-gray-200 dark:bg-[#2a2a2a] rounded mb-2" }
SkeletonBox { class: "h-4 w-full rounded mb-2" }
// 摘要第二行
div { class: "h-4 w-5/6 bg-gray-200 dark:bg-[#2a2a2a] rounded mb-3" }
SkeletonBox { class: "h-4 w-5/6 rounded mb-3" }
// 元信息行 (日期 + 标签)
div { class: "flex items-center gap-3 mt-3",
div { class: "h-3.5 w-20 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
div { class: "h-3.5 w-1 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
div { class: "h-3.5 w-16 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
SkeletonBox { class: "h-3.5 w-20 rounded" }
SkeletonBox { class: "h-3.5 w-1 rounded" }
SkeletonBox { class: "h-3.5 w-16 rounded" }
}
}
}

40
src/components/skeletons/post_detail_skeleton.rs
View File

@ -8,46 +8,46 @@ pub fn PostDetailSkeleton() -> Element {
rsx! {
article { class: "post-single",
// 面包屑占位
SkeletonBox { class: "h-4 w-48 mb-6".to_string() }
SkeletonBox { class: "h-4 w-48 rounded mb-6" }
// 标题占位 (模拟 h1)
SkeletonBox { class: "h-10 w-4/5 mb-4".to_string() }
SkeletonBox { class: "h-10 w-4/5 rounded mb-4" }
// 摘要占位
SkeletonBox { class: "h-5 w-2/3 mb-4".to_string() }
SkeletonBox { class: "h-5 w-2/3 rounded mb-4" }
// 元信息行 (作者 · 日期 · 阅读时间)
div { class: "flex items-center gap-2 mb-8",
SkeletonBox { class: "h-4 w-16".to_string() }
SkeletonBox { class: "h-4 w-1".to_string() }
SkeletonBox { class: "h-4 w-24".to_string() }
SkeletonBox { class: "h-4 w-1".to_string() }
SkeletonBox { class: "h-4 w-20".to_string() }
SkeletonBox { class: "h-4 w-16 rounded" }
SkeletonBox { class: "h-4 w-1 rounded" }
SkeletonBox { class: "h-4 w-24 rounded" }
SkeletonBox { class: "h-4 w-1 rounded" }
SkeletonBox { class: "h-4 w-20 rounded" }
}
// 封面图占位 (模拟 PostCover 16:9 比例)
SkeletonBox { class: "w-full aspect-video rounded-lg mb-8".to_string() }
SkeletonBox { class: "w-full aspect-video rounded-lg mb-8" }
// 正文段落占位 (模拟多段 PostContent)
div { class: "space-y-4 mb-8",
SkeletonBox { class: "h-4 w-full".to_string() }
SkeletonBox { class: "h-4 w-full".to_string() }
SkeletonBox { class: "h-4 w-5/6".to_string() }
SkeletonBox { class: "h-4 w-full".to_string() }
SkeletonBox { class: "h-4 w-full".to_string() }
SkeletonBox { class: "h-4 w-3/4".to_string() }
SkeletonBox { class: "h-4 w-full rounded" }
SkeletonBox { class: "h-4 w-full rounded" }
SkeletonBox { class: "h-4 w-5/6 rounded" }
SkeletonBox { class: "h-4 w-full rounded" }
SkeletonBox { class: "h-4 w-full rounded" }
SkeletonBox { class: "h-4 w-3/4 rounded" }
// 空行模拟段落间距
div { class: "h-2" }
SkeletonBox { class: "h-4 w-full".to_string() }
SkeletonBox { class: "h-4 w-full".to_string() }
SkeletonBox { class: "h-4 w-2/3".to_string() }
SkeletonBox { class: "h-4 w-full rounded" }
SkeletonBox { class: "h-4 w-full rounded" }
SkeletonBox { class: "h-4 w-2/3 rounded" }
}
// PostFooter 占位
div { class: "border-t border-gray-200 dark:border-[#333] pt-6 mt-8",
div { class: "flex items-center justify-between",
SkeletonBox { class: "h-4 w-32".to_string() }
SkeletonBox { class: "h-4 w-24".to_string() }
SkeletonBox { class: "h-4 w-32 rounded" }
SkeletonBox { class: "h-4 w-24 rounded" }
}
}
}

7
src/components/skeletons/tags_skeleton.rs
View File

@ -1,5 +1,6 @@
use dioxus::prelude::*;
use crate::components::skeletons::atoms::SkeletonBox;
use crate::components::skeletons::post_card_skeleton::PostCardSkeleton;
/// 标签列表页骨架屏
@ -10,7 +11,7 @@ pub fn TagsSkeleton() -> Element {
div {
// 统计行占位
div { class: "mt-2 mb-6",
div { class: "h-5 w-48 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
SkeletonBox { class: "h-5 w-48 rounded" }
}
// 标签云占位 (flex wrap gap-4)
@ -18,7 +19,7 @@ pub fn TagsSkeleton() -> Element {
// 生成 24 个不同宽度的标签 pill
for i in 0..24 {
div {
class: "h-8 bg-gray-200 dark:bg-[#2a2a2a] rounded-lg",
class: "h-8 bg-gray-200 dark:bg-[#2a2a2a] rounded-lg animate-pulse",
// 不同宽度模拟标签名长短
style: match i % 6 {
0 => "width: 60px;",
@ -42,7 +43,7 @@ pub fn TagDetailSkeleton() -> Element {
div {
// 统计行占位
div { class: "mt-2 mb-6",
div { class: "h-5 w-32 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
SkeletonBox { class: "h-5 w-32 rounded" }
}
// 文章卡片列表

28
src/components/write_skeleton.rs
View File

@ -6,7 +6,7 @@ pub fn WriteSkeleton() -> Element {
rsx! {
div { class: "space-y-4",
// 标题输入骨架
SkeletonBox { class: "w-full h-[52px] mb-4".to_string() }
SkeletonBox { class: "w-full h-[52px] mb-4 rounded" }
// 编辑器区域骨架
div {
@ -14,28 +14,28 @@ pub fn WriteSkeleton() -> Element {
// 工具栏骨架
div { class: "flex gap-2 pb-4 border-b border-gray-100 dark:border-[#333]",
for _ in 0..8 {
SkeletonBox { class: "w-8 h-8".to_string() }
SkeletonBox { class: "w-8 h-8 rounded" }
}
}
// 内容行骨架
div { class: "space-y-3 pt-2",
SkeletonBox { class: "h-4 w-[90%]".to_string() }
SkeletonBox { class: "h-4 w-full".to_string() }
SkeletonBox { class: "h-4 w-[85%]".to_string() }
SkeletonBox { class: "h-4 w-[95%]".to_string() }
SkeletonBox { class: "h-4 w-[60%]".to_string() }
SkeletonBox { class: "h-4 w-full".to_string() }
SkeletonBox { class: "h-4 w-[75%]".to_string() }
SkeletonBox { class: "h-4 w-[80%]".to_string() }
SkeletonBox { class: "h-4 w-[90%] rounded" }
SkeletonBox { class: "h-4 w-full rounded" }
SkeletonBox { class: "h-4 w-[85%] rounded" }
SkeletonBox { class: "h-4 w-[95%] rounded" }
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%]".to_string() }
SkeletonBox { class: "h-4 w-full".to_string() }
SkeletonBox { class: "h-4 w-[90%]".to_string() }
SkeletonBox { class: "h-4 w-[70%] rounded" }
SkeletonBox { class: "h-4 w-full rounded" }
SkeletonBox { class: "h-4 w-[90%] rounded" }
}
}
// 保存按钮骨架
SkeletonBox { class: "mt-4 h-10 w-28 rounded-full".to_string() }
SkeletonBox { class: "mt-4 h-10 w-28 rounded-full" }
}
}
}