yggdrasil/components/skeletons/
mcp_skeleton.rs

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

yggdrasil/components/skeletons/
mcp_skeleton.rs
