yggdrasil/components/skeletons/
mcp_skeleton.rs

1//! 后台 MCP 服务骨架屏
2//!
3//! 镜像后台 Mcp 页面的结构：Header（标题+描述）+ Token 列表表格卡片 + 新建 Token 表单卡片 + 客户端配置网格。
4
5use dioxus::prelude::*;
6
7use crate::components::skeletons::atoms::{
8    SkeletonBox, SkeletonCard, SkeletonCellShape, SkeletonTable, SkeletonTableColumn,
9};
10
11/// 后台 MCP 服务骨架屏组件。
12#[component]
13pub fn McpSkeleton() -> Element {
14    let token_columns = vec![
15        SkeletonTableColumn {
16            header_class: "px-5 py-3.5",
17            header_box_class: "h-3 w-16",
18            cell_class: "px-5 py-3.5",
19            cell_shape: SkeletonCellShape::Single("h-4 w-28"),
20        },
21        SkeletonTableColumn {
22            header_class: "px-4 py-3.5",
23            header_box_class: "h-3 w-16",
24            cell_class: "px-4 py-3.5",
25            cell_shape: SkeletonCellShape::Single("h-5 w-16 rounded-md"),
26        },
27        SkeletonTableColumn {
28            header_class: "px-4 py-3.5",
29            header_box_class: "h-3 w-14",
30            cell_class: "px-4 py-3.5",
31            cell_shape: SkeletonCellShape::Single("h-4 w-20"),
32        },
33        SkeletonTableColumn {
34            header_class: "px-4 py-3.5",
35            header_box_class: "h-3 w-14",
36            cell_class: "px-4 py-3.5",
37            cell_shape: SkeletonCellShape::Single("h-4 w-20"),
38        },
39        SkeletonTableColumn {
40            header_class: "px-4 py-3.5",
41            header_box_class: "h-3 w-16",
42            cell_class: "px-4 py-3.5",
43            cell_shape: SkeletonCellShape::Single("h-4 w-24"),
44        },
45        SkeletonTableColumn {
46            header_class: "px-4 py-3.5",
47            header_box_class: "h-3 w-10 mx-auto",
48            cell_class: "px-4 py-3.5",
49            cell_shape: SkeletonCellShape::Single("h-5 w-12 mx-auto rounded-full"),
50        },
51        SkeletonTableColumn {
52            header_class: "px-5 py-3.5",
53            header_box_class: "h-3 w-16 ml-auto",
54            cell_class: "px-5 py-3.5",
55            cell_shape: SkeletonCellShape::Single("h-6 w-36 ml-auto rounded"),
56        },
57    ];
58    rsx! {
59        div { class: "w-full max-w-7xl mx-auto space-y-8",
60            // 页头
61            div { class: "flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-6 border-b border-[var(--color-paper-border)]/70",
62                div { class: "space-y-1.5",
63                    SkeletonBox { class: "h-9 w-36 rounded-lg" }
64                    SkeletonBox { class: "h-4 w-96 rounded" }
65                }
66                SkeletonBox { class: "h-8 w-32 rounded-full" }
67            }
68
69            // Token 列表表格卡片占位
70            SkeletonCard { class: Some("p-6 sm:p-8 space-y-6 shadow-xs"),
71                div { class: "flex justify-between items-center border-b border-[var(--color-paper-border)]/60 pb-4",
72                    SkeletonBox { class: "h-6 w-36 rounded" }
73                    SkeletonBox { class: "h-7 w-20 rounded-full" }
74                }
75                SkeletonCard { class: Some("overflow-hidden"),
76                    SkeletonTable { columns: token_columns, rows: 3 }
77                }
78            }
79
80            // 新建 Token 表单卡片占位
81            SkeletonCard { class: Some("p-6 sm:p-8 space-y-6 shadow-xs"),
82                SkeletonBox { class: "h-6 w-32 rounded" }
83                div { class: "grid grid-cols-1 md:grid-cols-3 gap-5",
84                    div { class: "space-y-2",
85                        SkeletonBox { class: "h-3.5 w-16 rounded" }
86                        SkeletonBox { class: "h-10 w-full rounded-2xl" }
87                    }
88                    div { class: "space-y-2",
89                        SkeletonBox { class: "h-3.5 w-20 rounded" }
90                        SkeletonBox { class: "h-10 w-full rounded-2xl" }
91                    }
92                    div { class: "space-y-2",
93                        SkeletonBox { class: "h-3.5 w-16 rounded" }
94                        SkeletonBox { class: "h-10 w-full rounded-2xl" }
95                    }
96                }
97                SkeletonBox { class: "h-10 w-28 rounded-full" }
98            }
99
100            // 客户端配置卡片占位
101            SkeletonCard { class: Some("p-6 sm:p-8 space-y-6 shadow-xs"),
102                SkeletonBox { class: "h-6 w-36 rounded" }
103                SkeletonBox { class: "h-10 w-full rounded-2xl" }
104                div { class: "space-y-4",
105                    for i in 0..3 {
106                        div { key: "{i}", class: "p-5 rounded-2xl border border-[var(--color-paper-border)]/60 space-y-3",
107                            div { class: "flex justify-between items-center",
108                                SkeletonBox { class: "h-4 w-32 rounded" }
109                                SkeletonBox { class: "h-7 w-16 rounded-full" }
110                            }
111                            SkeletonBox { class: "h-16 w-full rounded-xl" }
112                        }
113                    }
114                }
115            }
116        }
117    }
118}
yggdrasil/components/skeletons/mcp_skeleton.rs

yggdrasil/components/skeletons/
mcp_skeleton.rs
