perf(admin): 放慢仪表盘动画节奏
Some checks are pending
CI / check (push) Waiting to run
CI / build (push) Blocked by required conditions

- 卡片入场 400→600ms(内联 animation-duration 覆盖),阶梯延迟 0/60/120/180→0/120/240/360ms
- 近期文章行 row-enter 300→450ms,stagger 步进 50→80ms
- CountUp 滚动时长 500→900ms
This commit is contained in:
xfy 2026-07-27 14:56:00 +08:00
parent 61634882c5
commit f6e1dff600
2 changed files with 8 additions and 8 deletions

View File

@ -97,7 +97,7 @@
} }
.animate-row-enter { .animate-row-enter {
animation: row-enter 300ms cubic-bezier(0.22, 1, 0.36, 1) both; animation: row-enter 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
} }
/* Minimalist custom scrollbars */ /* Minimalist custom scrollbars */

View File

@ -90,13 +90,13 @@ pub fn Admin() -> Element {
value: s.published, value: s.published,
label: "已发布".to_string(), label: "已发布".to_string(),
trend: "活跃".to_string(), trend: "活跃".to_string(),
delay_ms: 60, delay_ms: 120,
} }
StatCard { StatCard {
value: s.drafts, value: s.drafts,
label: "草稿".to_string(), label: "草稿".to_string(),
trend: "待处理".to_string(), trend: "待处理".to_string(),
delay_ms: 120, delay_ms: 240,
} }
} }
} }
@ -117,7 +117,7 @@ pub fn Admin() -> Element {
// 骨架屏阶段不播(避免动画被骨架屏截断,见 yggdrasil-ui-design-taste 规范)。 // 骨架屏阶段不播(避免动画被骨架屏截断,见 yggdrasil-ui-design-taste 规范)。
Link { Link {
class: "block {ADMIN_CARD_CLASS} p-8 bg-[var(--color-paper-entry)] hover:bg-[var(--color-paper-border)]/20 transition-all h-36 flex flex-col justify-between group hover:-translate-y-1 hover:shadow-md duration-300 {pending_enter_class}", class: "block {ADMIN_CARD_CLASS} p-8 bg-[var(--color-paper-entry)] hover:bg-[var(--color-paper-border)]/20 transition-all h-36 flex flex-col justify-between group hover:-translate-y-1 hover:shadow-md duration-300 {pending_enter_class}",
style: "animation-delay: 180ms", style: "animation-delay: 360ms; animation-duration: 600ms",
to: Route::AdminComments {}, to: Route::AdminComments {},
match pending_count() { match pending_count() {
Some(count) => { Some(count) => {
@ -182,7 +182,7 @@ pub fn Admin() -> Element {
RecentPostItem { RecentPostItem {
key: "{post.id}", key: "{post.id}",
post: post.clone(), post: post.clone(),
delay_ms: (i as i32) * 50, delay_ms: (i as i32) * 80,
} }
} }
} }
@ -215,7 +215,7 @@ fn StatCard(value: i64, label: String, trend: String, delay_ms: i32) -> Element
rsx! { rsx! {
div { div {
class: "{ADMIN_CARD_CLASS} p-8 flex flex-col justify-between h-36 relative group hover:-translate-y-1 hover:shadow-md transition-all duration-300 animate-page-enter", class: "{ADMIN_CARD_CLASS} p-8 flex flex-col justify-between h-36 relative group hover:-translate-y-1 hover:shadow-md transition-all duration-300 animate-page-enter",
style: "animation-delay: {delay_ms}ms", style: "animation-delay: {delay_ms}ms; animation-duration: 600ms",
div { class: "flex justify-between items-start", div { class: "flex justify-between items-start",
div { class: "text-sm font-medium text-[var(--color-paper-secondary)]", div { class: "text-sm font-medium text-[var(--color-paper-secondary)]",
"{label}" "{label}"
@ -232,7 +232,7 @@ fn StatCard(value: i64, label: String, trend: String, delay_ms: i32) -> Element
} }
} }
/// 数字滚动组件:值从 0 以 easeOutQuint 缓动递增到 `target`(约 500ms)。 /// 数字滚动组件:值从 0 以 easeOutQuint 缓动递增到 `target`(约 900ms)。
/// ///
/// 命中 `prefers-reduced-motion` 时直接显示终值。动画在 `use_effect` 内驱动, /// 命中 `prefers-reduced-motion` 时直接显示终值。动画在 `use_effect` 内驱动,
/// 渲染体保持纯净(见 dioxus-render-purity 规范);数据仅 WASM 端加载,SSR 不挂载本组件。 /// 渲染体保持纯净(见 dioxus-render-purity 规范);数据仅 WASM 端加载,SSR 不挂载本组件。
@ -251,7 +251,7 @@ fn CountUp(target: i64, class: String) -> Element {
display.set(target); display.set(target);
return; return;
} }
const DURATION_MS: i64 = 500; const DURATION_MS: i64 = 900;
let start = crate::utils::time::now_millis(); let start = crate::utils::time::now_millis();
loop { loop {
crate::utils::time::sleep_ms(16).await; crate::utils::time::sleep_ms(16).await;