From 4ba4fedb231381f87e044c0dcaacb028b44dcf17 Mon Sep 17 00:00:00 2001 From: xfy Date: Tue, 16 Jun 2026 12:38:41 +0800 Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E6=96=B0=E5=A2=9E=20/admin/trash?= =?UTF-8?q?=20=E5=9B=9E=E6=94=B6=E7=AB=99=E7=AE=A1=E7=90=86=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E4=B8=8E=E5=AF=BC=E8=88=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/admin_layout.rs | 5 + src/pages/admin/mod.rs | 4 + src/pages/admin/trash.rs | 517 +++++++++++++++++++++++++++++++++ src/router.rs | 8 +- 4 files changed, 533 insertions(+), 1 deletion(-) create mode 100644 src/pages/admin/trash.rs diff --git a/src/components/admin_layout.rs b/src/components/admin_layout.rs index 5663a6a..cd97d74 100644 --- a/src/components/admin_layout.rs +++ b/src/components/admin_layout.rs @@ -67,6 +67,11 @@ pub fn AdminLayout() -> Element { label: "管理文章", is_active: matches!(route, Route::Posts {}), }, + NavItemConfig { + route: Route::Trash {}, + label: "回收站", + is_active: matches!(route, Route::Trash {}) || matches!(route, Route::TrashPage { .. }), + }, ]; // 右侧操作区：主题切换 + 登出按钮 diff --git a/src/pages/admin/mod.rs b/src/pages/admin/mod.rs index 75e89c8..0c2b849 100644 --- a/src/pages/admin/mod.rs +++ b/src/pages/admin/mod.rs @@ -8,6 +8,8 @@ pub mod comments; pub mod dashboard; /// 文章管理列表页面模块。 pub mod posts; +/// 回收站管理页面模块。 +pub mod trash; /// 文章编辑器页面模块（基于 Tiptap 富文本编辑器）。 pub mod write; @@ -17,5 +19,7 @@ pub use comments::{AdminComments, AdminCommentsPage}; pub use dashboard::Admin; /// 文章管理列表组件（带默认分页）。 pub use posts::{Posts, PostsPage}; +/// 回收站管理组件（带默认分页）。 +pub use trash::{Trash, TrashPage}; /// 文章编辑器组件（新建与编辑模式）。 pub use write::{Write, WriteEdit}; diff --git a/src/pages/admin/trash.rs b/src/pages/admin/trash.rs new file mode 100644 index 0000000..ec9fad0 --- /dev/null +++ b/src/pages/admin/trash.rs @@ -0,0 +1,517 @@ +//! 回收站管理页面。 +//! +//! 展示已软删除文章，支持恢复、彻底删除、批量操作、一键清空， +//! 以及自动清理配置（启用开关 + 保留天数）。 +//! 数据加载与操作仅在 WASM 前端通过 Dioxus server functions 交互。 + +use std::collections::HashSet; + +use dioxus::prelude::*; +use dioxus::router::components::Link; + +// 操作类 server function 在 SSR 与 WASM 均需可见（spawn 闭包需类型检查）， +// 但部分仅用于 WASM 代码路径，SSR 下触发 unused imports，按项目惯例放行。 +#[allow(unused_imports)] +use crate::api::posts::{ + batch_purge_posts, batch_restore_posts, empty_trash, purge_post, restore_post, +}; +#[cfg(target_arch = "wasm32")] +use crate::api::posts::{list_deleted_posts, PostListResponse}; +#[allow(unused_imports)] +use crate::api::settings::{get_trash_settings, update_trash_settings}; +use crate::components::skeletons::delayed_skeleton::DelayedSkeleton; +use crate::models::post::Post; +use crate::models::settings::TrashSettings; +use crate::router::Route; + +/// 每页展示的回收站文章数量。 +const TRASH_PER_PAGE: i32 = 20; + +/// 回收站入口组件，默认展示第 1 页。 +#[component] +pub fn Trash() -> Element { + rsx! { TrashPage { page: 1 } } +} + +/// 回收站分页组件。 +/// +/// 支持单条/批量恢复与彻底删除、一键清空，以及内联自动清理配置。 +#[allow(unused_mut, unused_variables)] +#[component] +pub fn TrashPage(page: i32) -> Element { + let current_page = page.max(1); + let mut selected_ids: Signal> = use_signal(HashSet::new); + let mut posts: Signal> = use_signal(Vec::new); + let mut total: Signal = use_signal(|| 0); + #[allow(unused_mut)] + let mut loading: Signal = use_signal(|| false); + #[allow(unused_mut)] + let mut error: Signal> = use_signal(|| None); + // 自动清理配置（含本地草稿态用于表单输入）。 + let mut settings: Signal = use_signal(TrashSettings::default); + let mut settings_draft_days: Signal = use_signal(|| "30".to_string()); + let mut settings_draft_enabled: Signal = use_signal(|| false); + let mut settings_panel_open: Signal = use_signal(|| false); + let mut saving_settings: Signal = use_signal(|| false); + // 配置只加载一次的标记，避免每次翻页 effect 重复拉取。 + let mut settings_loaded: Signal = use_signal(|| false); + + // 加载回收站列表；配置仅首次加载。 + use_effect(move || { + let _ = current_page; + loading.set(true); + error.set(None); + #[cfg(target_arch = "wasm32")] + { + let page = current_page; + spawn(async move { + match list_deleted_posts(page, TRASH_PER_PAGE).await { + Ok(PostListResponse { posts: list, total: t }) => { + posts.set(list); + total.set(t); + } + Err(e) => error.set(Some(e.to_string())), + } + loading.set(false); + }); + if !settings_loaded() { + settings_loaded.set(true); + spawn(async move { + if let Ok(s) = get_trash_settings().await { + settings_draft_days.set(s.retention_days.to_string()); + settings_draft_enabled.set(s.auto_purge_enabled); + settings.set(s); + } + }); + } + } + #[cfg(not(target_arch = "wasm32"))] + { + loading.set(false); + } + }); + + // 本地移除一篇文章（乐观更新）。 + let mut remove_post = move |id: i32| { + posts.with_mut(|list| list.retain(|p| p.id != id)); + total.with_mut(|t| *t = t.saturating_sub(1)); + selected_ids.with_mut(|s| { + s.remove(&id); + }); + }; + + rsx! { + div { class: "space-y-6", + // 标题 + 设置开关入口 + div { class: "flex items-center justify-between", + div { class: "flex items-center gap-3", + h1 { class: "text-2xl font-bold text-gray-900 dark:text-[#dadadb]", "回收站" } + span { class: "text-sm text-gray-500 dark:text-[#9b9c9d]", + "共 {total()} 篇" + } + } + button { + class: "px-4 py-2 rounded-full text-sm font-medium cursor-pointer text-gray-700 dark:text-[#b0b0b1] border border-gray-300 dark:border-[#444] hover:border-gray-900 dark:hover:border-[#dadadb] hover:text-gray-900 dark:hover:text-[#dadadb] transition-all flex items-center gap-2", + onclick: move |_| settings_panel_open.set(!settings_panel_open()), + // 齿轮 SVG（Material Symbols 风格） + svg { + class: "w-4 h-4", + view_box: "0 -960 960 960", + fill: "currentColor", + path { d: "m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t23.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-838l-13-106h-79l-14 106q-31 8-57.5 23.5T321-737l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-276l13 96Zm39-180q54 0 92-38t38-92q0-54-38-92t-92-38q-54 0-92 38t-38 92q0 54 38 92t92 38Z" } + } + "自动清理设置" + } + } + + // 摘要条：当前清理状态 + div { class: "flex items-center gap-4 px-4 py-3 bg-gray-50 dark:bg-[#2a2a2a] rounded-lg", + div { class: "flex items-center gap-2", + {let dot_class = if settings().auto_purge_enabled { + "w-2 h-2 rounded-full bg-green-500" + } else { + "w-2 h-2 rounded-full bg-gray-400 dark:bg-[#666]" + }; + rsx! { + div { class: "{dot_class}" } + }} + span { class: "text-sm text-gray-600 dark:text-[#9b9c9d]", + if settings().auto_purge_enabled { + "自动清理已开启 · 超过 {settings().retention_days} 天自动删除" + } else { + "自动清理已关闭" + } + } + } + } + + // 设置面板（可折叠） + if settings_panel_open() { + div { class: "bg-white dark:bg-[#2e2e33] rounded-xl border border-gray-200 dark:border-[#333] p-5 space-y-4", + div { + label { class: "flex items-center justify-between cursor-pointer", + span { class: "text-sm text-gray-700 dark:text-[#dadadb]", "启用自动清理" } + input { + r#type: "checkbox", + class: "w-4 h-4 rounded border-gray-300 dark:border-[#555]", + checked: settings_draft_enabled(), + onchange: move |e| settings_draft_enabled.set(e.checked()), + } + } + } + div { class: "flex items-center gap-3", + label { class: "text-sm text-gray-700 dark:text-[#dadadb] whitespace-nowrap", "保留天数" } + input { + r#type: "number", + min: "1", + max: "365", + class: "w-24 px-3 py-1.5 text-sm rounded-lg border border-gray-300 dark:border-[#444] bg-white dark:bg-[#1d1e20] text-gray-900 dark:text-[#dadadb] focus:outline-none focus:border-gray-900 dark:focus:border-[#dadadb]", + value: "{settings_draft_days()}", + oninput: move |e| settings_draft_days.set(e.value()), + } + span { class: "text-xs text-gray-400 dark:text-[#666]", "天后自动彻底删除（1–365）" } + } + div { class: "flex justify-end", + button { + class: if saving_settings() { + "px-4 py-1.5 text-sm font-medium cursor-not-allowed text-gray-400 bg-gray-100 dark:bg-[#2a2a2a] rounded-full" + } else { + "px-4 py-1.5 text-sm font-medium text-white bg-gray-900 dark:bg-[#dadadb] dark:text-gray-900 rounded-full hover:opacity-80 transition-opacity cursor-pointer" + }, + disabled: saving_settings(), + onclick: move |_| { + let days: i32 = settings_draft_days().parse().unwrap_or(30); + let enabled = settings_draft_enabled(); + saving_settings.set(true); + spawn(async move { + if let Ok(s) = update_trash_settings(enabled, days).await { + settings.set(s); + } + saving_settings.set(false); + }); + }, + if saving_settings() { "保存中..." } else { "保存设置" } + } + } + } + } + + // 批量操作栏（选中时显示） + if !selected_ids().is_empty() { + div { class: "flex items-center gap-3 p-3 bg-gray-50 dark:bg-[#2a2a2a] rounded-lg", + span { class: "text-sm text-gray-600 dark:text-[#9b9c9d]", + "已选择 {selected_ids().len()} 条" + } + button { + class: "px-3 py-1.5 text-xs font-medium bg-green-600 text-white rounded hover:bg-green-700 transition-colors", + onclick: move |_| { + let ids: Vec = selected_ids().iter().copied().collect(); + spawn(async move { + let _ = batch_restore_posts(ids).await; + }); + for id in selected_ids() { remove_post(id); } + selected_ids.set(HashSet::new()); + }, + "批量恢复" + } + button { + class: "px-3 py-1.5 text-xs font-medium bg-red-600 text-white rounded hover:bg-red-700 transition-colors", + onclick: move |_| { + #[cfg(target_arch = "wasm32")] + { + if web_sys::window() + .and_then(|w| w.confirm_with_message("确定要彻底删除选中的文章吗？此操作不可恢复。").ok()) + .unwrap_or(false) + { + let ids: Vec = selected_ids().iter().copied().collect(); + spawn(async move { + let _ = batch_purge_posts(ids).await; + }); + for id in selected_ids() { remove_post(id); } + selected_ids.set(HashSet::new()); + } + } + }, + "批量彻底删除" + } + } + } + + // 主内容：错误 / 加载骨架 / 空态 / 列表 + { + if error().is_some() { + rsx! { + div { class: "text-center text-red-500 dark:text-red-400 py-20", "加载失败" } + } + } else if loading() && posts().is_empty() { + rsx! { + DelayedSkeleton { + div { class: "bg-white dark:bg-[#2e2e33] rounded-xl border border-gray-200 dark:border-[#333] p-6 space-y-4", + for _ in 0..5 { + div { class: "h-10 bg-gray-200 dark:bg-[#2a2a2a] rounded" } + } + } + } + } + } else if posts().is_empty() { + rsx! { + div { class: "text-center py-20 text-gray-500 dark:text-[#9b9c9d]", + "回收站为空" + } + } + } else { + let list = posts(); + let all_selected = list.iter().all(|p| selected_ids().contains(&p.id)); + let all_ids: Vec = list.iter().map(|p| p.id).collect(); + rsx! { + div { class: "bg-white dark:bg-[#2e2e33] rounded-xl border border-gray-200 dark:border-[#333] overflow-hidden", + div { class: "overflow-x-auto", + 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 w-10", + input { + r#type: "checkbox", + class: "rounded border-gray-300 dark:border-[#555]", + checked: all_selected, + onchange: { + move |_| { + let mut s = selected_ids(); + if all_selected { + for id in &all_ids { s.remove(id); } + } else { + for id in &all_ids { s.insert(*id); } + } + selected_ids.set(s); + } + } + } + } + th { class: "px-4 py-3 font-medium", "标题" } + th { class: "px-4 py-3 font-medium", "原状态" } + th { class: "px-4 py-3 font-medium w-28", "删除时间" } + th { class: "px-4 py-3 font-medium w-24 text-center", "剩余" } + th { class: "px-4 py-3 font-medium w-32 text-right", "操作" } + } + } + tbody { + for post in list.iter() { + TrashRow { + key: "{post.id}", + post: post.clone(), + retention_days: settings().retention_days, + selected: selected_ids().contains(&post.id), + on_select: { + let id = post.id; + move |checked: bool| { + let mut s = selected_ids(); + if checked { s.insert(id); } else { s.remove(&id); } + selected_ids.set(s); + } + }, + on_restore: { + let id = post.id; + move |_| { + spawn(async move { + let _ = restore_post(id).await; + }); + remove_post(id); + } + }, + on_purge: { + let id = post.id; + move |_| { + #[cfg(target_arch = "wasm32")] + { + if web_sys::window() + .and_then(|w| w.confirm_with_message("确定要彻底删除这篇文章吗？此操作不可恢复。").ok()) + .unwrap_or(false) + { + spawn(async move { + let _ = purge_post(id).await; + }); + remove_post(id); + } + } + } + }, + } + } + } + } + } + } + // 底部：清空回收站 + 分页 + div { class: "flex items-center justify-between mt-4", + button { + class: "px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 border border-red-300 dark:border-red-900/50 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors cursor-pointer", + onclick: move |_| { + #[cfg(target_arch = "wasm32")] + { + if web_sys::window() + .and_then(|w| w.confirm_with_message("确定要清空回收站吗？所有已删除文章将被彻底移除，此操作不可恢复。").ok()) + .unwrap_or(false) + { + spawn(async move { + let _ = empty_trash().await; + }); + posts.set(Vec::new()); + total.set(0); + selected_ids.set(HashSet::new()); + } + } + }, + "清空回收站" + } + } + TrashPagination { current_page, total: total() } + } + } + } + } + } +} + +/// 计算剩余天数（保留期 - 已删除天数）。 +/// +/// 返回 (剩余天数, 是否已过期)。基于客户端时钟计算，轻微漂移可接受。 +fn remaining_days(post: &Post, retention_days: i32) -> (i64, bool) { + #[cfg(target_arch = "wasm32")] + { + if let Some(deleted_at) = post.deleted_at { + let now_ms = js_sys::Date::now() as i64; // 毫秒 + let deleted_ms = deleted_at.timestamp_millis(); + let elapsed_days = (now_ms - deleted_ms) / 86_400_000; + let remaining = retention_days as i64 - elapsed_days; + (remaining, remaining <= 0) + } else { + (retention_days as i64, false) + } + } + #[cfg(not(target_arch = "wasm32"))] + { + let _ = post; + (retention_days as i64, false) + } +} + +/// 回收站表格行组件。 +#[component] +fn TrashRow( + post: Post, + retention_days: i32, + selected: bool, + on_select: EventHandler, + on_restore: EventHandler, + on_purge: EventHandler, +) -> Element { + let (remaining, expired) = remaining_days(&post, retention_days); + // 剩余天数徽章配色：>7 天中性，≤7 天鼠尾草绿(主题色)，≤0/过期琥珀色。 + let badge_class = if expired { + "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400" + } else if remaining <= 7 { + "bg-[#e8f0e8] text-[#5c7a5e] dark:bg-[#1e2e1e] dark:text-[#7da97f]" + } else { + "bg-gray-100 text-gray-600 dark:bg-[#333] dark:text-[#9b9c9d]" + }; + let badge_text = if expired { "待清理".to_string() } else { format!("{remaining}天") }; + let deleted_str = post + .deleted_at + .map(|d| d.format("%Y-%m-%d").to_string()) + .unwrap_or_else(|| "—".to_string()); + + rsx! { + tr { class: "border-b border-gray-100 dark:border-[#333] last:border-0 hover:bg-gray-50 dark:hover:bg-[#2a2a2a] transition-colors", + td { class: "px-4 py-3", + input { + r#type: "checkbox", + class: "rounded border-gray-300 dark:border-[#555]", + checked: selected, + onchange: move |e| on_select.call(e.checked()), + } + } + td { class: "px-4 py-3", + div { class: "text-sm font-medium text-gray-900 dark:text-[#dadadb] truncate max-w-xs", + "{post.title}" + } + } + td { class: "px-4 py-3", + span { class: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap {post.status_badge_class()}", + "{post.status_label()}" + } + } + td { class: "px-4 py-3 text-sm text-gray-500 dark:text-[#9b9c9d]", + "{deleted_str}" + } + td { class: "px-4 py-3 text-center", + span { class: "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap {badge_class}", + "{badge_text}" + } + } + td { class: "px-4 py-3 text-right", + div { class: "flex justify-end gap-2", + button { + class: "text-xs text-[#5c7a5e] hover:text-[#3d5a3f] dark:text-[#7da97f] dark:hover:text-[#9dc79f] transition-colors cursor-pointer", + onclick: move |_| on_restore.call(()), + "恢复" + } + button { + class: "text-xs text-red-500 hover:text-red-700 dark:hover:text-red-300 transition-colors cursor-pointer", + onclick: move |_| on_purge.call(()), + "彻底删除" + } + } + } + } + } +} + +/// 回收站分页导航组件。 +#[component] +fn TrashPagination(current_page: i32, total: i64) -> Element { + let has_prev = current_page > 1; + let total_pages = + ((total + TRASH_PER_PAGE as i64 - 1) / TRASH_PER_PAGE as i64).max(1) as i32; + let has_next = current_page < total_pages; + + let prev_route = if current_page - 1 <= 1 { + Route::Trash {} + } else { + Route::TrashPage { page: current_page - 1 } + }; + let next_route = Route::TrashPage { page: current_page + 1 }; + + rsx! { + nav { class: "flex mt-6 justify-between", + if has_prev { + Link { + class: "inline-flex items-center px-4 py-2 text-sm text-white bg-gray-900 dark:bg-[#dadadb] dark:text-gray-900 rounded-full hover:opacity-80 transition-opacity cursor-pointer", + to: prev_route, + span { class: "mr-1", "«" } + "上一页" + } + } else { + span { class: "inline-flex items-center px-4 py-2 text-sm text-gray-400 bg-gray-100 dark:bg-[#2a2a2a] rounded-full cursor-not-allowed", + span { class: "mr-1", "«" } + "上一页" + } + } + span { class: "text-sm text-gray-500 dark:text-[#9b9c9d] self-center", + "{current_page} / {total_pages} 页 (共 {total} 条)" + } + if has_next { + Link { + class: "inline-flex items-center px-4 py-2 text-sm text-white bg-gray-900 dark:bg-[#dadadb] dark:text-gray-900 rounded-full hover:opacity-80 transition-opacity cursor-pointer", + to: next_route, + "下一页" + span { class: "ml-1", "»" } + } + } else { + span { class: "inline-flex items-center px-4 py-2 text-sm text-gray-400 bg-gray-100 dark:bg-[#2a2a2a] rounded-full cursor-not-allowed", + "下一页" + span { class: "ml-1", "»" } + } + } + } + } +} diff --git a/src/router.rs b/src/router.rs index 642a239..9cff4be 100644 --- a/src/router.rs +++ b/src/router.rs @@ -12,7 +12,7 @@ use crate::components::frontend_layout::FrontendLayout; use crate::context::UserContext; use crate::pages::about::About; use crate::pages::admin::{ - Admin, AdminComments, AdminCommentsPage, Posts, PostsPage, Write, WriteEdit, + Admin, AdminComments, AdminCommentsPage, Posts, PostsPage, Trash, TrashPage, Write, WriteEdit, }; use crate::pages::archives::Archives; use crate::pages::home::{Home, HomePage}; @@ -84,6 +84,12 @@ pub enum Route { /// 评论管理分页 #[route("/comments/:page")] AdminCommentsPage { page: i32 }, + /// 回收站 + #[route("/trash")] + Trash {}, + /// 回收站分页 + #[route("/trash/:page")] + TrashPage { page: i32 }, #[end_layout] #[end_nest]