diff --git a/public/css/admin-components.css b/public/css/admin-components.css index 7369fb5..68f9789 100644 --- a/public/css/admin-components.css +++ b/public/css/admin-components.css @@ -479,6 +479,17 @@ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; + align-items:stretch; /* 关键:保证同一行 KPI 卡片等高 */ +} + +/* KPI 卡片:统一为竖向 flex,保证标题/数值/脚注布局稳定且等高 */ +.kpi-grid .card{ + display:flex; + flex-direction:column; + height:100%; +} +.kpi-grid .stat-card-footnote{ + margin-top:auto; /* 把脚注推到底部,进一步锁定等高视觉 */ } @media (max-width: 1024px){ diff --git a/tests/Feature/AdminDashboardKpiCardsShouldBeEqualHeightByCssGuardTest.php b/tests/Feature/AdminDashboardKpiCardsShouldBeEqualHeightByCssGuardTest.php new file mode 100644 index 0000000..555e0ee --- /dev/null +++ b/tests/Feature/AdminDashboardKpiCardsShouldBeEqualHeightByCssGuardTest.php @@ -0,0 +1,43 @@ +seed(); + + $this->post('/admin/login', [ + 'email' => 'platform.admin@demo.local', + 'password' => 'Platform@123456', + ])->assertRedirect('/admin'); + } + + public function test_kpi_grid_should_enable_equal_height_cards_via_css(): void + { + $this->loginAsPlatformAdmin(); + + $res = $this->get('/admin'); + $res->assertOk(); + + // 结构护栏:KPI 区必须存在 + $res->assertSee('data-role="kpi-grid"', false); + + $css = (string) file_get_contents(public_path('css/admin-components.css')); + + // 护栏:kpi-grid 应显式 stretch,且卡片应为 flex column(保证等高和脚注沉底) + $this->assertStringContainsString('.kpi-grid{', $css); + $this->assertStringContainsString('align-items:stretch', $css); + $this->assertStringContainsString('.kpi-grid .card', $css); + $this->assertStringContainsString('display:flex', $css); + $this->assertStringContainsString('flex-direction:column', $css); + $this->assertStringContainsString('.kpi-grid .stat-card-footnote', $css); + $this->assertStringContainsString('margin-top:auto', $css); + } +}