fix(admin-dashboard): make KPI cards equal height
This commit is contained in:
@@ -479,6 +479,17 @@
|
|||||||
display:grid;
|
display:grid;
|
||||||
grid-template-columns:repeat(4,minmax(0,1fr));
|
grid-template-columns:repeat(4,minmax(0,1fr));
|
||||||
gap:12px;
|
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){
|
@media (max-width: 1024px){
|
||||||
|
|||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Tests\Feature;
|
||||||
|
|
||||||
|
use Illuminate\Foundation\Testing\RefreshDatabase;
|
||||||
|
use Tests\TestCase;
|
||||||
|
|
||||||
|
class AdminDashboardKpiCardsShouldBeEqualHeightByCssGuardTest extends TestCase
|
||||||
|
{
|
||||||
|
use RefreshDatabase;
|
||||||
|
|
||||||
|
protected function loginAsPlatformAdmin(): void
|
||||||
|
{
|
||||||
|
$this->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);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user