adui_dioxus/components/
empty.rs

1use dioxus::prelude::*;
2
3/// Built-in image presets for the Empty component.
4#[derive(Clone, PartialEq)]
5pub enum EmptyImage {
6    /// Default illustration.
7    Default,
8    /// Minimal/simple illustration.
9    Simple,
10    /// Smaller footprint variant.
11    Small,
12    /// Custom image URL or label.
13    Custom(String),
14}
15
16/// Props for the Empty component.
17#[derive(Props, Clone, PartialEq)]
18pub struct EmptyProps {
19    /// Optional description text shown under the image.
20    #[props(optional)]
21    pub description: Option<String>,
22    /// Image preset or custom image.
23    #[props(optional)]
24    pub image: Option<EmptyImage>,
25    /// Extra class name applied to the root.
26    #[props(optional)]
27    pub class: Option<String>,
28    /// Inline style applied to the root.
29    #[props(optional)]
30    pub style: Option<String>,
31    /// Optional footer content rendered below the description (e.g. action buttons).
32    #[props(optional)]
33    pub footer: Option<Element>,
34}
35
36/// Ant Design flavored Empty component (MVP).
37#[component]
38pub fn Empty(props: EmptyProps) -> Element {
39    let EmptyProps {
40        description,
41        image,
42        class,
43        style,
44        footer,
45    } = props;
46
47    let mut classes = vec!["adui-empty".to_string()];
48    if let Some(extra) = class {
49        classes.push(extra);
50    }
51
52    // Mark small variant for styling when using `EmptyImage::Small`.
53    if matches!(image, Some(EmptyImage::Small)) {
54        classes.push("adui-empty-sm".to_string());
55    }
56
57    let class_attr = classes.join(" ");
58    let style_attr = style.unwrap_or_default();
59
60    let description_text = description.unwrap_or_else(|| "暂无数据".to_string());
61
62    // Render image content based on preset.
63    let image_node = match image.unwrap_or(EmptyImage::Default) {
64        EmptyImage::Default => rsx! {
65            svg {
66                class: "adui-empty-image-svg",
67                view_box: "0 0 64 41",
68                xmlns: "http://www.w3.org/2000/svg",
69                path { d: "M8 33h48v2H8z", fill: "#f5f5f5" }
70                rect { x: "16", y: "13", width: "32", height: "16", rx: "2", fill: "#fafafa", stroke: "#e5e5e5" }
71                circle { cx: "24", cy: "21", r: "3", fill: "#e5e5e5" }
72                rect { x: "30", y: "19", width: "12", height: "2", fill: "#e5e5e5" }
73                rect { x: "30", y: "23", width: "10", height: "2", fill: "#f0f0f0" }
74            }
75        },
76        EmptyImage::Simple => rsx! {
77            div { class: "adui-empty-image-simple" }
78        },
79        EmptyImage::Small => rsx! {
80            div { class: "adui-empty-image-simple" }
81        },
82        EmptyImage::Custom(url) => rsx! {
83            img { class: "adui-empty-image-img", src: "{url}", alt: "empty" }
84        },
85    };
86
87    rsx! {
88        div { class: "{class_attr}", style: "{style_attr}",
89            div { class: "adui-empty-image",
90                {image_node}
91            }
92            p { class: "adui-empty-description", "{description_text}" }
93            if let Some(footer_node) = footer {
94                div { class: "adui-empty-footer", {footer_node} }
95            }
96        }
97    }
98}
adui_dioxus/components/empty.rs

adui_dioxus/components/
empty.rs
