style(ui): 统一 admin 分页按钮为圆角胶囊样式
admin 分页的上一页/下一页按钮原先用 rounded-sm 方角实心(灰黑底 + font-mono),与本页其它操作按钮(BTN_OUTLINE 等圆角胶囊)风格 不一致。改为与描边按钮同族的 rounded-full 胶囊,hover 走主题强调 色,禁用态同步圆角。 因三个 admin 列表页(posts / posts_trash / comments)共用 Pagination 组件的 admin variant,此改动一次性统一全部后台分页。
This commit is contained in:
parent
093940a0d7
commit
cf14aae17f
@ -106,8 +106,8 @@ pub const BTN_ICON: &str =
|
||||
/// 分页导航组件。
|
||||
///
|
||||
/// 统一了后台与前台的分页 UI,通过 `variant` 切换配色与展示细节:
|
||||
/// - `"admin"`:灰黑胶囊按钮,显示页码计数(`{当前} / {总} 页 (共 {total} {unit})`),
|
||||
/// 首尾页渲染禁用态。
|
||||
/// - `"admin"`:描边胶囊按钮(与 `BTN_OUTLINE` 同族),显示页码计数
|
||||
/// (`{当前} / {总} 页 (共 {total} {unit})`),首尾页渲染禁用态。
|
||||
/// - `"frontend"`:主题绿胶囊按钮,不显示计数,首尾页直接不渲染按钮。
|
||||
///
|
||||
/// Props:
|
||||
@ -132,11 +132,12 @@ pub fn Pagination(
|
||||
let total_pages = ((total + per_page as i64 - 1) / per_page as i64).max(1) as i32;
|
||||
let has_next = current_page < total_pages;
|
||||
|
||||
// admin 与 frontend 的配色差异。
|
||||
// admin 与 frontend 的配色差异。admin 上一页/下一页用描边胶囊,与本页其它
|
||||
// 操作按钮(BTN_OUTLINE)同族,避免出现方角实心按钮破坏整体圆角语言。
|
||||
let is_admin = variant == "admin";
|
||||
let (link_class, link_extra_next) = if is_admin {
|
||||
(
|
||||
"inline-flex items-center px-4 py-2 text-xs font-mono tracking-wider text-paper-theme bg-paper-primary rounded-sm hover:brightness-110 active:scale-[0.98] transition-all duration-200 cursor-pointer",
|
||||
"inline-flex items-center px-4 py-2 text-sm font-medium text-paper-primary border border-paper-border rounded-full hover:border-paper-accent hover:text-paper-accent active:scale-[0.98] transition-all duration-200 cursor-pointer",
|
||||
"",
|
||||
)
|
||||
} else {
|
||||
@ -146,7 +147,7 @@ pub fn Pagination(
|
||||
)
|
||||
};
|
||||
let disabled_class =
|
||||
"inline-flex items-center px-4 py-2 text-xs font-mono tracking-wider text-paper-secondary bg-paper-entry border border-paper-border rounded-sm cursor-not-allowed";
|
||||
"inline-flex items-center px-4 py-2 text-sm font-medium text-paper-secondary border border-paper-border rounded-full cursor-not-allowed";
|
||||
|
||||
// admin 首尾页渲染禁用态;frontend 首尾页直接不渲染。
|
||||
rsx! {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user