style(admin/posts): 操作列加宽横排,重建按钮 loading 用 spinner 图标
- 操作列宽 w-24 → w-44,三个按钮一行排开不换行 - 重建按钮 loading 态由「重建中...」文案改为 spinner 图标 + 「重建中」 - spinner 复用 public/icons/90-ring-with-gradient.svg,作为 SPINNER_SVG 常量收入 ui.rs(修正原 SVG 损坏的孤立 ':' 选择器,重命名 id/类名 避免多处内联时冲突),用 currentColor 继承按钮文字色
This commit is contained in:
parent
e55f2e12bd
commit
a5c00caa80
@ -29,6 +29,12 @@ pub const ADMIN_ROW_HOVER: &str =
|
|||||||
/// 列表复选框统一样式(全选表头 + 行内)。
|
/// 列表复选框统一样式(全选表头 + 行内)。
|
||||||
pub const CHECKBOX_CLASS: &str = "rounded border-paper-border";
|
pub const CHECKBOX_CLASS: &str = "rounded border-paper-border";
|
||||||
|
|
||||||
|
/// 行内加载 spinner:环形渐变 + 自旋动画,用 currentColor 继承文字色。
|
||||||
|
///
|
||||||
|
/// 内联 SVG(含 `@keyframes`),通过 `dangerous_inner_html` 注入;尺寸由外层
|
||||||
|
/// Tailwind 类(如 `w-3.5 h-3.5`)控制。源文件 `public/icons/90-ring-with-gradient.svg`。
|
||||||
|
pub const SPINNER_SVG: &str = r#"<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="yggSpinnerGrad"><stop offset="0%" stop-color="currentColor" stop-opacity="1"/><stop offset="100%" stop-color="currentColor" stop-opacity="0.25"/></linearGradient></defs><style>@keyframes yggSpin { to { transform: rotate(360deg); } } .ygg-spinner-circle { transform-origin: 50% 50%; stroke: url(#yggSpinnerGrad); fill: none; animation: yggSpin .5s infinite linear; }</style><circle cx="10" cy="10" r="8" class="ygg-spinner-circle" stroke-width="2"/></svg>"#;
|
||||||
|
|
||||||
/// 状态徽章外层:小号圆角胶囊。
|
/// 状态徽章外层:小号圆角胶囊。
|
||||||
pub const BADGE_BASE: &str =
|
pub const BADGE_BASE: &str =
|
||||||
"inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap";
|
"inline-flex items-center px-2 py-0.5 rounded text-xs font-medium whitespace-nowrap";
|
||||||
|
|||||||
@ -17,6 +17,7 @@ use crate::components::skeletons::delayed_skeleton::DelayedSkeleton;
|
|||||||
use crate::components::skeletons::posts_skeleton::PostsSkeleton;
|
use crate::components::skeletons::posts_skeleton::PostsSkeleton;
|
||||||
use crate::components::ui::{
|
use crate::components::ui::{
|
||||||
Pagination, StatusBadge, ADMIN_ROW_HOVER, ADMIN_TABLE_CLASS, BTN_TEXT_ACCENT, BTN_TEXT_RED,
|
Pagination, StatusBadge, ADMIN_ROW_HOVER, ADMIN_TABLE_CLASS, BTN_TEXT_ACCENT, BTN_TEXT_RED,
|
||||||
|
SPINNER_SVG,
|
||||||
};
|
};
|
||||||
use crate::hooks::query::use_paginated;
|
use crate::hooks::query::use_paginated;
|
||||||
use crate::models::post::PostListItem;
|
use crate::models::post::PostListItem;
|
||||||
@ -118,7 +119,7 @@ pub fn PostsPage(page: i32) -> Element {
|
|||||||
"状态"
|
"状态"
|
||||||
}
|
}
|
||||||
th { class: "px-4 py-3 font-medium w-32", "日期" }
|
th { class: "px-4 py-3 font-medium w-32", "日期" }
|
||||||
th { class: "px-4 py-3 font-medium w-24 text-right",
|
th { class: "px-4 py-3 font-medium w-44 text-right",
|
||||||
"操作"
|
"操作"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -302,11 +303,18 @@ fn PostRow(
|
|||||||
"编辑"
|
"编辑"
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
class: if rebuilding { "text-xs text-paper-secondary cursor-not-allowed" } else { BTN_TEXT_ACCENT },
|
class: if rebuilding {
|
||||||
|
"inline-flex items-center gap-1 text-xs text-paper-secondary cursor-not-allowed"
|
||||||
|
} else {
|
||||||
|
BTN_TEXT_ACCENT
|
||||||
|
},
|
||||||
disabled: rebuilding,
|
disabled: rebuilding,
|
||||||
onclick: move |_| on_rebuild.call(post.id),
|
onclick: move |_| on_rebuild.call(post.id),
|
||||||
if rebuilding {
|
if rebuilding {
|
||||||
"重建中..."
|
{rsx! {
|
||||||
|
span { dangerous_inner_html: SPINNER_SVG }
|
||||||
|
"重建中"
|
||||||
|
}}
|
||||||
} else {
|
} else {
|
||||||
"重建"
|
"重建"
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user