fix: admin pages use client-only fetching; fix theme cookie parsing; restore custom skeletons
This commit is contained in:
parent
6cfe664085
commit
ccffab851a
@ -1,16 +1,37 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use crate::api::posts::{get_post_stats, list_posts, PostListResponse, PostStatsResponse};
|
||||
use crate::components::suspense_wrapper::SuspenseWrapper;
|
||||
use crate::hooks::delayed_loading::use_delayed_loading;
|
||||
use crate::models::post::Post;
|
||||
|
||||
#[component]
|
||||
pub fn Admin() -> Element {
|
||||
let stats_res = use_resource(get_post_stats);
|
||||
let posts_res = use_resource(list_posts);
|
||||
let show_stats_skeleton = use_delayed_loading(move || stats_res.read().is_none());
|
||||
let show_posts_skeleton = use_delayed_loading(move || posts_res.read().is_none());
|
||||
|
||||
rsx! {
|
||||
div { class: "space-y-8",
|
||||
div { class: "grid grid-cols-1 md:grid-cols-3 gap-6",
|
||||
SuspenseWrapper {
|
||||
StatsSection {}
|
||||
match &*stats_res.read() {
|
||||
Some(Ok(PostStatsResponse { stats })) => {
|
||||
rsx! {
|
||||
StatCard { value: stats.total.to_string(), label: "文章总数" }
|
||||
StatCard { value: stats.drafts.to_string(), label: "草稿数" }
|
||||
StatCard { value: stats.published.to_string(), label: "已发布" }
|
||||
}
|
||||
}
|
||||
_ => {
|
||||
rsx! {
|
||||
for _ in 0..3 {
|
||||
div { class: if show_stats_skeleton() { "rounded-xl bg-white dark:bg-[#2e2e33] border border-gray-200 dark:border-[#333] p-6 text-center space-y-3 animate-pulse" } else { "rounded-xl bg-white dark:bg-[#2e2e33] border border-gray-200 dark:border-[#333] p-6 text-center space-y-3 opacity-0" },
|
||||
div { class: "h-9 w-16 mx-auto bg-gray-200 dark:bg-[#2a2a2a] rounded" }
|
||||
div { class: "h-4 w-20 mx-auto bg-gray-200 dark:bg-[#2a2a2a] rounded" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,78 +56,28 @@ pub fn Admin() -> Element {
|
||||
h2 { class: "text-xl font-bold text-gray-900 dark:text-[#dadadb] mb-4",
|
||||
"最近文章"
|
||||
}
|
||||
SuspenseWrapper {
|
||||
RecentPostsSection {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn StatsSection() -> Element {
|
||||
let stats_res = use_server_future(get_post_stats)?;
|
||||
|
||||
let stats_data = stats_res.read().as_ref().map(|r| match r {
|
||||
Ok(PostStatsResponse { stats }) => Ok(stats.clone()),
|
||||
Err(_) => Err(()),
|
||||
});
|
||||
|
||||
match stats_data {
|
||||
Some(Ok(stats)) => {
|
||||
rsx! {
|
||||
StatCard { value: stats.total.to_string(), label: "文章总数" }
|
||||
StatCard { value: stats.drafts.to_string(), label: "草稿数" }
|
||||
StatCard { value: stats.published.to_string(), label: "已发布" }
|
||||
}
|
||||
}
|
||||
Some(Err(_)) => {
|
||||
rsx! {
|
||||
div { class: "col-span-3 text-center text-red-500 dark:text-red-400 py-6",
|
||||
"加载统计失败"
|
||||
}
|
||||
}
|
||||
}
|
||||
_ => {
|
||||
rsx! {
|
||||
div { class: "col-span-3 text-center text-gray-500 dark:text-[#9b9c9d] py-6",
|
||||
"加载中..."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn RecentPostsSection() -> Element {
|
||||
let posts_res = use_server_future(list_posts)?;
|
||||
|
||||
let posts_data = posts_res.read().as_ref().map(|r| match r {
|
||||
Ok(PostListResponse { posts }) => Ok(posts.clone()),
|
||||
Err(_) => Err(()),
|
||||
});
|
||||
|
||||
match posts_data {
|
||||
Some(Ok(posts)) => {
|
||||
rsx! {
|
||||
div { class: "space-y-0",
|
||||
for post in posts.iter().take(5) {
|
||||
RecentPostItem { post: post.clone() }
|
||||
match &*posts_res.read() {
|
||||
Some(Ok(PostListResponse { posts })) => {
|
||||
rsx! {
|
||||
div { class: "space-y-0",
|
||||
for post in posts.iter().take(5) {
|
||||
RecentPostItem { post: post.clone() }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
_ => {
|
||||
rsx! {
|
||||
div { class: if show_posts_skeleton() { "space-y-4 animate-pulse" } else { "space-y-4 opacity-0" },
|
||||
for _ in 0..5 {
|
||||
div { class: "flex justify-between items-center py-3 border-b border-gray-100 dark:border-[#333]",
|
||||
div { class: "h-4 w-[45%] bg-gray-200 dark:bg-[#2a2a2a] rounded" }
|
||||
div { class: "h-3 w-20 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Some(Err(_)) => {
|
||||
rsx! {
|
||||
div { class: "text-center text-red-500 dark:text-red-400 py-6",
|
||||
"加载文章列表失败"
|
||||
}
|
||||
}
|
||||
}
|
||||
_ => {
|
||||
rsx! {
|
||||
div { class: "text-center text-gray-500 dark:text-[#9b9c9d] py-6",
|
||||
"加载中..."
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,15 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
use crate::api::posts::{delete_post, list_posts, CreatePostResponse, PostListResponse};
|
||||
use crate::components::suspense_wrapper::SuspenseWrapper;
|
||||
use crate::hooks::delayed_loading::use_delayed_loading;
|
||||
use crate::models::post::{Post, PostStatus};
|
||||
|
||||
#[component]
|
||||
pub fn Posts() -> Element {
|
||||
let mut posts_res = use_resource(list_posts);
|
||||
let mut deleting = use_signal(|| None::<i32>);
|
||||
let show_skeleton = use_delayed_loading(move || posts_res.read().is_none());
|
||||
|
||||
rsx! {
|
||||
div { class: "space-y-6",
|
||||
div { class: "flex items-center justify-between",
|
||||
@ -20,70 +24,52 @@ pub fn Posts() -> Element {
|
||||
"+ 写文章"
|
||||
}
|
||||
}
|
||||
SuspenseWrapper {
|
||||
PostsTable {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn PostsTable() -> Element {
|
||||
let mut refresh = use_signal(|| 0);
|
||||
let mut deleting = use_signal(|| None::<i32>);
|
||||
let posts_res = use_server_future(move || {
|
||||
let _ = refresh();
|
||||
list_posts()
|
||||
})?;
|
||||
|
||||
let posts_data = posts_res.read().as_ref().map(|r| match r {
|
||||
Ok(PostListResponse { posts }) => Ok(posts.clone()),
|
||||
Err(e) => Err(e.to_string()),
|
||||
});
|
||||
|
||||
match posts_data {
|
||||
Some(Ok(posts)) => {
|
||||
if posts.is_empty() {
|
||||
rsx! {
|
||||
div { class: "text-center py-20 text-gray-500 dark:text-[#9b9c9d]",
|
||||
"暂无文章"
|
||||
}
|
||||
}
|
||||
} else {
|
||||
rsx! {
|
||||
div { class: "bg-white dark:bg-[#2e2e33] rounded-xl border border-gray-200 dark:border-[#333] overflow-hidden",
|
||||
table { class: "w-full text-sm",
|
||||
thead {
|
||||
tr { class: "border-b border-gray-200 dark:border-[#333] text-left text-gray-500 dark:text-[#9b9c9d]",
|
||||
th { class: "px-4 py-3 font-medium", "标题" }
|
||||
th { class: "px-4 py-3 font-medium w-24 text-center", "状态" }
|
||||
th { class: "px-4 py-3 font-medium w-32", "日期" }
|
||||
th { class: "px-4 py-3 font-medium w-24 text-right", "操作" }
|
||||
}
|
||||
match &*posts_res.read() {
|
||||
Some(Ok(PostListResponse { posts })) => {
|
||||
if posts.is_empty() {
|
||||
rsx! {
|
||||
div { class: "text-center py-20 text-gray-500 dark:text-[#9b9c9d]",
|
||||
"暂无文章"
|
||||
}
|
||||
tbody {
|
||||
for post in posts.iter() {
|
||||
PostRow {
|
||||
post: post.clone(),
|
||||
deleting: deleting() == Some(post.id),
|
||||
on_delete: move |id| {
|
||||
deleting.set(Some(id));
|
||||
spawn(async move {
|
||||
match delete_post(id).await {
|
||||
Ok(CreatePostResponse { success: true, .. }) => {
|
||||
refresh.set(refresh() + 1);
|
||||
}
|
||||
Ok(CreatePostResponse { success: false, message, .. }) => {
|
||||
#[cfg(target_arch = "wasm32")]
|
||||
web_sys::window().map(|w| w.alert_with_message(&message).ok());
|
||||
}
|
||||
Err(e) => {
|
||||
#[cfg(target_arch = "wasm32")]
|
||||
web_sys::window().map(|w| w.alert_with_message(&format!("删除失败: {}", e)).ok());
|
||||
}
|
||||
}
|
||||
} else {
|
||||
rsx! {
|
||||
div { class: "bg-white dark:bg-[#2e2e33] rounded-xl border border-gray-200 dark:border-[#333] overflow-hidden",
|
||||
table { class: "w-full text-sm",
|
||||
thead {
|
||||
tr { class: "border-b border-gray-200 dark:border-[#333] text-left text-gray-500 dark:text-[#9b9c9d]",
|
||||
th { class: "px-4 py-3 font-medium", "标题" }
|
||||
th { class: "px-4 py-3 font-medium w-24 text-center", "状态" }
|
||||
th { class: "px-4 py-3 font-medium w-32", "日期" }
|
||||
th { class: "px-4 py-3 font-medium w-24 text-right", "操作" }
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
for post in posts.iter() {
|
||||
PostRow {
|
||||
post: post.clone(),
|
||||
deleting: deleting() == Some(post.id),
|
||||
on_delete: move |id| {
|
||||
deleting.set(Some(id));
|
||||
spawn(async move {
|
||||
match delete_post(id).await {
|
||||
Ok(CreatePostResponse { success: true, .. }) => {
|
||||
posts_res.restart();
|
||||
}
|
||||
Ok(CreatePostResponse { success: false, message, .. }) => {
|
||||
#[cfg(target_arch = "wasm32")]
|
||||
web_sys::window().map(|w| w.alert_with_message(&message).ok());
|
||||
}
|
||||
Err(_e) => {
|
||||
#[cfg(target_arch = "wasm32")]
|
||||
web_sys::window().map(|w| w.alert_with_message("删除失败").ok());
|
||||
}
|
||||
}
|
||||
deleting.set(None);
|
||||
});
|
||||
}
|
||||
deleting.set(None);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -91,19 +77,24 @@ fn PostsTable() -> Element {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Some(Err(e)) => {
|
||||
rsx! {
|
||||
div { class: "text-center text-red-500 dark:text-red-400 py-20",
|
||||
"加载失败: {e}"
|
||||
Some(Err(_e)) => {
|
||||
rsx! {
|
||||
div { class: "text-center text-red-500 dark:text-red-400 py-20",
|
||||
"加载失败"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
_ => {
|
||||
rsx! {
|
||||
div { class: "text-center text-gray-500 dark:text-[#9b9c9d] py-20",
|
||||
"加载中..."
|
||||
None => {
|
||||
rsx! {
|
||||
div { class: if show_skeleton() { "bg-white dark:bg-[#2e2e33] rounded-xl border border-gray-200 dark:border-[#333] animate-pulse" } else { "bg-white dark:bg-[#2e2e33] rounded-xl border border-gray-200 dark:border-[#333] opacity-0" },
|
||||
for _ in 0..5 {
|
||||
div { class: "flex items-center px-4 py-3 border-b border-gray-100 dark:border-[#333] last:border-0",
|
||||
div { class: "h-4 w-1/3 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
|
||||
div { class: "ml-auto h-4 w-16 bg-gray-200 dark:bg-[#2a2a2a] rounded" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
13
src/theme.rs
13
src/theme.rs
@ -46,11 +46,16 @@ fn detect_initial_theme() -> Theme {
|
||||
#[cfg(feature = "server")]
|
||||
{
|
||||
if let Some(ctx) = dioxus::fullstack::FullstackContext::current() {
|
||||
let parts = ctx.parts_mut();
|
||||
if let Some(cookie) = parts.headers.get("cookie") {
|
||||
if let Some(cookie) = ctx.parts_mut().headers.get("cookie") {
|
||||
if let Ok(cookie_str) = cookie.to_str() {
|
||||
if cookie_str.contains("theme=dark") {
|
||||
return Theme::Dark;
|
||||
// Parse cookies properly: split by ';' then by '='
|
||||
for cookie_pair in cookie_str.split(';') {
|
||||
let mut parts = cookie_pair.trim().splitn(2, '=');
|
||||
if let (Some(name), Some(value)) = (parts.next(), parts.next()) {
|
||||
if name == "theme" && value == "dark" {
|
||||
return Theme::Dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
208
static/index/6a1fccc1.html
Normal file
208
static/index/6a1fccc1.html
Normal file
File diff suppressed because one or more lines are too long
221
static/post/test-papermod/index/6a1fcf68.html
Normal file
221
static/post/test-papermod/index/6a1fcf68.html
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user