refactor(ui): 去除 Rust 中硬编码颜色，统一语义色阶
跟随 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 报错为既有问题， 与本次配色迁移无关，不在范围内。
This commit is contained in:
parent
90fc6977b0
commit
45f4e9cde0
@ -78,7 +78,7 @@ pub fn CommentForm(post_id: i32, parent_id: Option<i64>, parent_indent: Option<i
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
class: if is_reply { "mt-3 pt-3 border-t border-gray-100 dark:border-[#333]" } else { "" },
|
||||
class: if is_reply { "mt-3 pt-3 border-t border-gray-100 dark:border-gray-700" } else { "" },
|
||||
style: "{negative_margin}",
|
||||
role: "form",
|
||||
aria_label: if is_reply { "回复评论" } else { "发表评论" },
|
||||
|
||||
@ -62,7 +62,7 @@ pub fn CommentItem(comment: PublicComment, 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",
|
||||
|
||||
@ -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! {
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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" }
|
||||
|
||||
|
||||
@ -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(""),
|
||||
}
|
||||
}
|
||||
|
||||
@ -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" }
|
||||
// 摘要第一行
|
||||
|
||||
@ -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" }
|
||||
|
||||
@ -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";
|
||||
|
||||
|
||||
@ -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" }
|
||||
|
||||
@ -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"
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -367,7 +367,7 @@ fn AutoPurgeSettings(settings: Signal<TrashSettings>) -> 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"
|
||||
};
|
||||
|
||||
@ -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 {}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user