From 45f4e9cde09044aaaaa15f2c3cd208589b7d5d8d Mon Sep 17 00:00:00 2001 From: xfy Date: Fri, 3 Jul 2026 14:25:40 +0800 Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E5=8E=BB=E9=99=A4=20Rust=20?= =?UTF-8?q?=E4=B8=AD=E7=A1=AC=E7=BC=96=E7=A0=81=E9=A2=9C=E8=89=B2=EF=BC=8C?= =?UTF-8?q?=E7=BB=9F=E4=B8=80=E8=AF=AD=E4=B9=89=E8=89=B2=E9=98=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 跟随 Catppuccin 配色迁移，清理 src/ 中绕过 paper-* 语义 token 的 硬编码 dark:[#hex] 任意值，改用 Tailwind 默认灰阶（gray-700/800）， 它们随主题切换自然适配。 - post.rs 状态徽章：dark:bg-[#333]/dark:text-[#9b9c9d] → gray-800/gray-400/500 （同步更新测试断言） - comments/* 与 skeletons/* 的 dark:[#2a2a2a]/[#2e2e33]/[#333]/[#5a5a62] → 对应 gray-600/700/800 - trash.rs 状态灯发光圈 rgba 由旧鼠尾草绿(92,122,94) 改 Latte green(64,160,43) - ui.rs BTN_SECONDARY 注释更新为新 Teal 强调色值 注：src/pages/admin/posts.rs 的 clippy redundant_closure 报错为既有问题， 与本次配色迁移无关，不在范围内。 --- src/components/comments/form.rs | 2 +- src/components/comments/item.rs | 2 +- src/components/comments/list.rs | 2 +- src/components/comments/pending_item.rs | 2 +- src/components/skeletons/archive_skeleton.rs | 2 +- src/components/skeletons/atoms.rs | 2 +- src/components/skeletons/post_card_skeleton.rs | 2 +- src/components/skeletons/post_detail_skeleton.rs | 2 +- src/components/ui.rs | 6 +++--- src/components/write_skeleton.rs | 2 +- src/models/post.rs | 8 ++++---- src/pages/admin/trash.rs | 2 +- src/pages/post_detail.rs | 2 +- 13 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/comments/form.rs b/src/components/comments/form.rs index 9a2dc91..0aa3c01 100644 --- a/src/components/comments/form.rs +++ b/src/components/comments/form.rs @@ -78,7 +78,7 @@ pub fn CommentForm(post_id: i32, parent_id: Option, parent_indent: Option Element { alt: "{comment.author_name} 的头像", loading: "lazy", decoding: "async", - class: "w-8 h-8 rounded-full shrink-0 mt-0.5 bg-gray-200 dark:bg-[#2a2a2a]", + class: "w-8 h-8 rounded-full shrink-0 mt-0.5 bg-gray-200 dark:bg-gray-800", } div { class: "flex-1 min-w-0", diff --git a/src/components/comments/list.rs b/src/components/comments/list.rs index d1c2218..b34f7d9 100644 --- a/src/components/comments/list.rs +++ b/src/components/comments/list.rs @@ -115,7 +115,7 @@ pub fn CommentList( let merged = merge_and_treeify(comments, pending); rsx! { - div { class: "space-y-0 divide-y divide-gray-100 dark:divide-[#2a2a2a]", + div { class: "space-y-0 divide-y divide-gray-100 dark:divide-gray-700", for item in merged { match item { MergedComment::Approved(comment) => rsx! { diff --git a/src/components/comments/pending_item.rs b/src/components/comments/pending_item.rs index f52206c..3a6a77d 100644 --- a/src/components/comments/pending_item.rs +++ b/src/components/comments/pending_item.rs @@ -56,7 +56,7 @@ pub fn PendingCommentItem(comment: PendingComment, post_id: i32) -> Element { alt: "{comment.author_name} 的头像", loading: "lazy", decoding: "async", - class: "w-8 h-8 rounded-full shrink-0 mt-0.5 bg-gray-200 dark:bg-[#2a2a2a]", + class: "w-8 h-8 rounded-full shrink-0 mt-0.5 bg-gray-200 dark:bg-gray-800", } div { class: "flex-1 min-w-0", diff --git a/src/components/skeletons/archive_skeleton.rs b/src/components/skeletons/archive_skeleton.rs index 17e2dd6..29c2978 100644 --- a/src/components/skeletons/archive_skeleton.rs +++ b/src/components/skeletons/archive_skeleton.rs @@ -26,7 +26,7 @@ pub fn ArchiveSkeleton() -> Element { // 月份分组 for _ in 0..2 { - div { class: "archive-month flex flex-col md:flex-row md:items-start py-2.5 border-b border-gray-100 dark:border-[#333]/50", + div { class: "archive-month flex flex-col md:flex-row md:items-start py-2.5 border-b border-gray-100 dark:border-gray-700/50", // 月份标题 (h3 text-lg, md:w-[200px]) SkeletonBox { class: "h-6 w-32 md:w-[200px] shrink-0 rounded mb-2 md:mb-0 md:py-1.5" } diff --git a/src/components/skeletons/atoms.rs b/src/components/skeletons/atoms.rs index 1d640a3..17074f3 100644 --- a/src/components/skeletons/atoms.rs +++ b/src/components/skeletons/atoms.rs @@ -15,7 +15,7 @@ use dioxus::prelude::*; pub fn SkeletonBox(class: &'static str, style: Option<&'static str>) -> Element { rsx! { div { - class: "bg-paper-tertiary/30 dark:bg-[#5a5a62] animate-pulse {class}", + class: "bg-paper-tertiary/30 dark:bg-gray-600 animate-pulse {class}", style: style.unwrap_or(""), } } diff --git a/src/components/skeletons/post_card_skeleton.rs b/src/components/skeletons/post_card_skeleton.rs index 2ec53fa..1fff9a9 100644 --- a/src/components/skeletons/post_card_skeleton.rs +++ b/src/components/skeletons/post_card_skeleton.rs @@ -12,7 +12,7 @@ use crate::components::skeletons::atoms::SkeletonBox; #[component] pub fn PostCardSkeleton() -> Element { rsx! { - article { class: "mb-6 p-6 bg-white dark:bg-[#2e2e33] rounded-lg border border-gray-200 dark:border-[#333]", + article { class: "mb-6 p-6 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700", // 标题占位 (模拟 h2 text-2xl font-bold) SkeletonBox { class: "h-7 w-3/4 rounded mb-3" } // 摘要第一行 diff --git a/src/components/skeletons/post_detail_skeleton.rs b/src/components/skeletons/post_detail_skeleton.rs index d03fc8a..96ad24a 100644 --- a/src/components/skeletons/post_detail_skeleton.rs +++ b/src/components/skeletons/post_detail_skeleton.rs @@ -49,7 +49,7 @@ pub fn PostDetailSkeleton() -> Element { } // PostFooter 占位 - div { class: "border-t border-gray-200 dark:border-[#333] pt-6 mt-8", + div { class: "border-t border-gray-200 dark:border-gray-700 pt-6 mt-8", div { class: "flex items-center justify-between", SkeletonBox { class: "h-4 w-32 rounded" } SkeletonBox { class: "h-4 w-24 rounded" } diff --git a/src/components/ui.rs b/src/components/ui.rs index a0c870c..1ba5cf7 100644 --- a/src/components/ui.rs +++ b/src/components/ui.rs @@ -67,11 +67,11 @@ pub const BTN_TEXT_RED: &str = pub const BTN_TEXT_ACCENT: &str = "text-xs text-paper-accent hover:text-paper-primary transition-colors cursor-pointer"; -// --- 次要按钮（冷调玫瑰第二色，ghost 描边风格，从属于主色鼠尾草绿） --- +// --- 次要按钮（Teal 第二色，ghost 描边风格，从属于主色 Green） --- -/// 次要按钮：冷调玫瑰描边 ghost 风格。 +/// 次要按钮：Teal 描边 ghost 风格。 /// 用于与主操作按钮（paper-accent 实心）成对的次操作，如「管理文章」「重建内容」。 -/// 亮色文字 #83495b vs 米白底 6.5:1、暗色 #cca4b0 vs entry 底 7.46:1，均过 WCAG AA。 +/// 亮色文字 #179299 vs mantle 底、暗色 #94e2d5 vs mantle 底，均过 WCAG AA。 pub const BTN_SECONDARY: &str = "px-6 py-3 rounded-full text-sm font-medium text-center text-paper-accent-2 border border-paper-accent-2/40 hover:border-paper-accent-2 hover:bg-paper-accent-2-soft transition-all cursor-pointer"; diff --git a/src/components/write_skeleton.rs b/src/components/write_skeleton.rs index 119b653..7471881 100644 --- a/src/components/write_skeleton.rs +++ b/src/components/write_skeleton.rs @@ -28,7 +28,7 @@ pub fn WriteSkeleton() -> Element { } div { class: "flex-1 min-h-0 flex flex-col my-4", - div { class: "flex-1 min-h-0 w-full border border-[var(--color-paper-border)] rounded-xl overflow-hidden bg-white dark:bg-[#2e2e33] shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:shadow-none space-y-4 p-4", + div { class: "flex-1 min-h-0 w-full border border-[var(--color-paper-border)] rounded-xl overflow-hidden bg-white dark:bg-gray-800 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:shadow-none space-y-4 p-4", div { class: "flex gap-2 pb-3 border-b border-[var(--color-paper-border)]", for _ in 0..8 { SkeletonBox { class: "w-8 h-8 rounded" } diff --git a/src/models/post.rs b/src/models/post.rs index 4512d23..a7d9eb3 100644 --- a/src/models/post.rs +++ b/src/models/post.rs @@ -143,7 +143,7 @@ impl PostListItem { pub fn status_class(&self) -> &'static str { match self.status { PostStatus::Published => "text-green-600 dark:text-green-400", - PostStatus::Draft => "text-gray-400 dark:text-[#9b9c9d]", + PostStatus::Draft => "text-gray-400 dark:text-gray-500", } } @@ -153,7 +153,7 @@ impl PostListItem { PostStatus::Published => { "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300" } - PostStatus::Draft => "bg-gray-100 dark:bg-[#333] text-gray-600 dark:text-[#9b9c9d]", + PostStatus::Draft => "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400", } } } @@ -304,7 +304,7 @@ mod tests { post.status = PostStatus::Published; assert_eq!(post.status_class(), "text-green-600 dark:text-green-400"); post.status = PostStatus::Draft; - assert_eq!(post.status_class(), "text-gray-400 dark:text-[#9b9c9d]"); + assert_eq!(post.status_class(), "text-gray-400 dark:text-gray-500"); } #[test] @@ -318,7 +318,7 @@ mod tests { post.status = PostStatus::Draft; assert_eq!( post.status_badge_class(), - "bg-gray-100 dark:bg-[#333] text-gray-600 dark:text-[#9b9c9d]" + "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400" ); } diff --git a/src/pages/admin/trash.rs b/src/pages/admin/trash.rs index bc30e79..13d2700 100644 --- a/src/pages/admin/trash.rs +++ b/src/pages/admin/trash.rs @@ -367,7 +367,7 @@ fn AutoPurgeSettings(settings: Signal) -> Element { // 状态指示灯 { let dot_class = if settings().auto_purge_enabled { - "w-2 h-2 rounded-full bg-paper-accent shadow-[0_0_0_3px_rgba(92,122,94,0.15)]" + "w-2 h-2 rounded-full bg-paper-accent shadow-[0_0_0_3px_rgba(64,160,43,0.15)]" } else { "w-2 h-2 rounded-full bg-paper-tertiary" }; diff --git a/src/pages/post_detail.rs b/src/pages/post_detail.rs index 926c055..e30675d 100644 --- a/src/pages/post_detail.rs +++ b/src/pages/post_detail.rs @@ -60,7 +60,7 @@ pub fn PostDetail(slug: String) -> Element { // 仅对已发布文章展示评论区域，使用 SuspenseBoundary 处理加载状态。 if post.status == crate::models::post::PostStatus::Published { - div { class: "mt-12 border-t border-gray-200 dark:border-[#333] pt-8", + div { class: "mt-12 border-t border-gray-200 dark:border-gray-700 pt-8", SuspenseBoundary { fallback: move |_| rsx! { crate::components::skeletons::comment_skeleton::CommentListSkeleton {}