fix(admin-ui): align grid cards top (remove card+card margin in grids)

This commit is contained in:
萝卜
2026-03-16 12:34:12 +08:00
parent b7c1bfa724
commit 960e6e1c95
3 changed files with 32 additions and 10 deletions

View File

@@ -482,6 +482,15 @@
align-items:stretch; /* 关键:保证同一行 KPI 卡片等高 */
}
/*
* 重要admin-base.css 有全局规则 `.card + .card{margin-top:20px;}` 用于纵向堆叠卡片
* 但在 gridKPI / two-col 里会导致第二张卡片整体下沉出现你看到的站点在中间其它在底部的错位
* 因此 KPI grid 场景显式清零 margin-top
*/
.kpi-grid .card{
margin-top:0;
}
/* KPI 卡片:统一为竖向 flex保证标题/数值/脚注布局稳定且等高 */
.kpi-grid .card{
display:flex;
@@ -492,6 +501,11 @@
margin-top:auto; /* 把脚注推到底部,进一步锁定等高视觉 */
}
/* Dashboard 两列卡片:同样清理“纵向堆叠 margin-top”对 grid 的干扰,确保“趋势/排行/工作台/定位/最近订单/占比”顶边对齐 */
.two-col .card{
margin-top:0;
}
@media (max-width: 1024px){
.kpi-grid{
grid-template-columns:repeat(2,minmax(0,1fr));

View File

@@ -826,7 +826,7 @@
<div class="tool-group focus-box">
<div class="tool-group-title">批量同步订阅</div>
<form method="post" action="/admin/platform-orders/batch-activate-subscriptions" onsubmit="return confirm('确认批量同步当前筛选范围内“可同步”的订单?(仅处理:已支付+已生效+未同步)');" class="mb-10">
<form method="post" action="/admin/platform-orders/batch-activate-subscriptions" data-action="disable-on-submit" onsubmit="return confirm('确认批量同步当前筛选范围内“可同步”的订单?(仅处理:已支付+已生效+未同步)');" class="mb-10">
@csrf
<input type="hidden" name="scope" value="filtered">
<input type="hidden" name="status" value="{{ $filters['status'] ?? '' }}">
@@ -864,7 +864,7 @@
</div>
</form>
<form method="post" action="/admin/platform-orders/batch-activate-subscriptions" onsubmit="return confirm('确认对全部订单执行批量同步?该操作仍只处理“已支付+已生效+未同步”的订单,但范围可能很大。');" class="mb-10">
<form method="post" action="/admin/platform-orders/batch-activate-subscriptions" data-action="disable-on-submit" onsubmit="return confirm('确认对全部订单执行批量同步?该操作仍只处理“已支付+已生效+未同步”的订单,但范围可能很大。');" class="mb-10">
@csrf
<input type="hidden" name="scope" value="all">
<input type="hidden" name="status" value="{{ $filters['status'] ?? '' }}">
@@ -905,7 +905,7 @@
<div class="tool-group focus-box">
<div class="tool-group-title">批量标记支付并生效BMPA</div>
<form method="post" action="/admin/platform-orders/batch-mark-paid-and-activate" onsubmit="return confirm('确认批量将当前筛选范围内“待处理+未支付”的订单标记为已支付并生效,并同步订阅?(会补回执留痕;遇到退款/回执不一致会安全阀阻断并记录失败原因)');" class="mb-10">
<form method="post" action="/admin/platform-orders/batch-mark-paid-and-activate" data-action="disable-on-submit" onsubmit="return confirm('确认批量将当前筛选范围内“待处理+未支付”的订单标记为已支付并生效,并同步订阅?(会补回执留痕;遇到退款/回执不一致会安全阀阻断并记录失败原因)');" class="mb-10">
@csrf
<input type="hidden" name="scope" value="filtered">
<input type="hidden" name="status" value="{{ $filters['status'] ?? '' }}">
@@ -943,7 +943,7 @@
</div>
</form>
<form method="post" action="/admin/platform-orders/batch-mark-paid-and-activate" onsubmit="return confirm('确认对全部订单执行批量标记支付并生效(含订阅同步)?该操作仍只处理“待处理+未支付”的订单,但范围可能很大。');" class="mb-10">
<form method="post" action="/admin/platform-orders/batch-mark-paid-and-activate" data-action="disable-on-submit" onsubmit="return confirm('确认对全部订单执行批量标记支付并生效(含订阅同步)?该操作仍只处理“待处理+未支付”的订单,但范围可能很大。');" class="mb-10">
@csrf
<input type="hidden" name="scope" value="all">
<label class="muted form-inline-row mb-8">
@@ -962,7 +962,7 @@
<div class="tool-group focus-box">
<div class="tool-group-title">批量仅标记为已生效</div>
<form method="post" action="/admin/platform-orders/batch-mark-activated" onsubmit="return confirm('确认批量将当前筛选范围内“已支付+待处理”的订单标记为已生效?(不修改支付状态,不自动同步订阅)');" class="mb-10">
<form method="post" action="/admin/platform-orders/batch-mark-activated" data-action="disable-on-submit" onsubmit="return confirm('确认批量将当前筛选范围内“已支付+待处理”的订单标记为已生效?(不修改支付状态,不自动同步订阅)');" class="mb-10">
@csrf
<input type="hidden" name="scope" value="filtered">
<input type="hidden" name="status" value="{{ $filters['status'] ?? '' }}">
@@ -1000,7 +1000,7 @@
</div>
</form>
<form method="post" action="/admin/platform-orders/batch-mark-activated" onsubmit="return confirm('确认对全部订单执行批量仅标记为已生效?该操作仍只处理“已支付+待处理”的订单,但范围可能很大。');" class="mb-10">
<form method="post" action="/admin/platform-orders/batch-mark-activated" data-action="disable-on-submit" onsubmit="return confirm('确认对全部订单执行批量仅标记为已生效?该操作仍只处理“已支付+待处理”的订单,但范围可能很大。');" class="mb-10">
@csrf
<input type="hidden" name="scope" value="all">
<label class="muted form-inline-row mb-8">
@@ -1019,7 +1019,7 @@
<div class="tool-group focus-box">
<div class="tool-group-title">清理失败标记:同步订阅</div>
<form method="post" action="/admin/platform-orders/clear-sync-errors" onsubmit="return confirm('确认清除当前筛选范围内命中的订单的“同步失败”标记?');" class="mb-10">
<form method="post" action="/admin/platform-orders/clear-sync-errors" data-action="disable-on-submit" onsubmit="return confirm('确认清除当前筛选范围内命中的订单的“同步失败”标记?');" class="mb-10">
@csrf
<input type="hidden" name="scope" value="filtered">
<input type="hidden" name="status" value="{{ $filters['status'] ?? '' }}">
@@ -1049,7 +1049,7 @@
</div>
</form>
<form method="post" action="/admin/platform-orders/clear-sync-errors" onsubmit="return confirm('确认清除全部订单的“同步失败”标记?该操作不可逆(仅清理 meta 标记),请谨慎。');" class="mb-10">
<form method="post" action="/admin/platform-orders/clear-sync-errors" data-action="disable-on-submit" onsubmit="return confirm('确认清除全部订单的“同步失败”标记?该操作不可逆(仅清理 meta 标记),请谨慎。');" class="mb-10">
@csrf
<input type="hidden" name="scope" value="all">
@@ -1067,7 +1067,7 @@
<div class="tool-group focus-box">
<div class="tool-group-title">清理失败标记:批量 BMPA</div>
<form method="post" action="/admin/platform-orders/clear-bmpa-errors" onsubmit="return confirm('确认清除当前筛选范围内命中的订单的“批量标记支付失败”标记?');" class="mb-10">
<form method="post" action="/admin/platform-orders/clear-bmpa-errors" data-action="disable-on-submit" onsubmit="return confirm('确认清除当前筛选范围内命中的订单的“批量标记支付失败”标记?');" class="mb-10">
@csrf
<input type="hidden" name="scope" value="filtered">
<input type="hidden" name="status" value="{{ $filters['status'] ?? '' }}">
@@ -1097,7 +1097,7 @@
</div>
</form>
<form method="post" action="/admin/platform-orders/clear-bmpa-errors" onsubmit="return confirm('确认清除全部订单的“批量标记支付失败”标记?该操作不可逆(仅清理 meta 标记),请谨慎。');">
<form method="post" action="/admin/platform-orders/clear-bmpa-errors" data-action="disable-on-submit" onsubmit="return confirm('确认清除全部订单的“批量标记支付失败”标记?该操作不可逆(仅清理 meta 标记),请谨慎。');">
@csrf
<input type="hidden" name="scope" value="all">

View File

@@ -34,6 +34,14 @@ class AdminDashboardKpiCardsShouldBeEqualHeightByCssGuardTest extends TestCase
// 护栏kpi-grid 应显式 stretch且卡片应为 flex column保证等高和脚注沉底
$this->assertStringContainsString('.kpi-grid{', $css);
$this->assertStringContainsString('align-items:stretch', $css);
// 关键grid 场景必须清理 admin-base.css 的 `.card + .card{margin-top:20px;}` 纵向堆叠规则
// 否则会出现“第一张卡在上、第二张卡整体下沉”的错位。
$this->assertStringContainsString('.kpi-grid .card{', $css);
$this->assertStringContainsString('margin-top:0', $css);
$this->assertStringContainsString('.two-col .card{', $css);
$this->assertStringContainsString('margin-top:0', $css);
$this->assertStringContainsString('.kpi-grid .card', $css);
$this->assertStringContainsString('display:flex', $css);
$this->assertStringContainsString('flex-direction:column', $css);