From 960e6e1c9591e288bae8ae094563bcff9c478ef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=9D=E5=8D=9C?= <dev@saasshop.local>
Date: Mon, 16 Mar 2026 12:34:12 +0800
Subject: [PATCH] fix(admin-ui): align grid cards top (remove card+card margin
 in grids)

---
 public/css/admin-components.css               | 14 +++++++++++++
 .../admin/platform_orders/index.blade.php     | 20 +++++++++----------
 ...CardsShouldBeEqualHeightByCssGuardTest.php |  8 ++++++++
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/public/css/admin-components.css b/public/css/admin-components.css
index 68f9789..c1cf845 100644
--- a/public/css/admin-components.css
+++ b/public/css/admin-components.css
@@ -482,6 +482,15 @@
     align-items:stretch; /* 关键：保证同一行 KPI 卡片等高 */
 }
 
+/*
+ * 重要：admin-base.css 有全局规则 `.card + .card{margin-top:20px;}` 用于“纵向堆叠卡片”。
+ * 但在 grid（KPI / 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));
diff --git a/resources/views/admin/platform_orders/index.blade.php b/resources/views/admin/platform_orders/index.blade.php
index 1d64468..41c9f66 100644
--- a/resources/views/admin/platform_orders/index.blade.php
+++ b/resources/views/admin/platform_orders/index.blade.php
@@ -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">
 
diff --git a/tests/Feature/AdminDashboardKpiCardsShouldBeEqualHeightByCssGuardTest.php b/tests/Feature/AdminDashboardKpiCardsShouldBeEqualHeightByCssGuardTest.php
index 555e0ee..a03c47a 100644
--- a/tests/Feature/AdminDashboardKpiCardsShouldBeEqualHeightByCssGuardTest.php
+++ b/tests/Feature/AdminDashboardKpiCardsShouldBeEqualHeightByCssGuardTest.php
@@ -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);