yggdrasil/components/post/
post_header.rs

1//! 文章页眉组件
2//!
3//! 组合面包屑、标题、摘要与元信息，草稿状态会在标题旁显示草稿图标。
4
5use dioxus::prelude::*;
6
7use crate::components::post::breadcrumbs::Breadcrumbs;
8use crate::components::post::post_meta::PostMeta;
9use crate::models::post::{Post, PostStatus};
10
11/// 文章页眉组件。
12///
13/// Props：
14/// - `post`：文章数据模型
15///
16/// 展示内容包括：
17/// - 面包屑导航（Home → 文章标题）
18/// - 文章标题，草稿状态附加草稿图标
19/// - 文章摘要（如有）
20/// - 文章元信息
21#[component]
22pub fn PostHeader(post: Post) -> Element {
23    rsx! {
24        header { class: "post-header",
25            Breadcrumbs { title: post.title.clone() }
26
27            h1 { class: "post-title",
28                "{post.title}"
29                if post.status == PostStatus::Draft {
30                    span { class: "entry-hint", title: "Draft",
31                        svg {
32                            xmlns: "http://www.w3.org/2000/svg",
33                            height: "35",
34                            view_box: "0 -960 960 960",
35                            fill: "currentColor",
36                            path { d: "M160-410v-60h300v60H160Zm0-165v-60h470v60H160Zm0-165v-60h470v60H160Zm360 580v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q9 9 13 20t4 22q0 11-4.5 22.5T862.09-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z" }
37                        }
38                    }
39                }
40            }
41
42            if let Some(summary) = &post.summary {
43                div { class: "post-description", "{summary}" }
44            }
45
46            PostMeta { post: post.clone() }
47        }
48    }
49}
yggdrasil/components/post/post_header.rs

yggdrasil/components/post/
post_header.rs
