linxianzhuang/saasshop
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(admin-ui): tokenise popover shadow and surface tint

Browse Source
This commit is contained in:
萝卜
2026-03-16 02:24:09 +08:00
parent a8845422aa
commit 9c6756e991
4 changed files with 74 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/css/admin-components.css
View File

@@ -24,7 +24,7 @@
border-radius:var(--adm-radius, 12px);
padding:12px 12px;
color:var(--adm-text, #0f172a);
box-shadow:0 12px 30px rgba(15, 23, 42, .12);
box-shadow:var(--adm-shadow-popover, 0 12px 30px rgba(15, 23, 42, .12));
display:flex;
align-items:flex-start;
justify-content:space-between;
@@ -250,7 +250,7 @@
.list-card-table .table-empty{
padding:24px 12px;
text-align:center;
background:rgba(15, 23, 42, .02);
background:var(--adm-surface-tint, rgba(15, 23, 42, .02));
}
/* 可复用：PageHeader（参考 Ant Design Pro：标题区 + 描述 + 右侧操作区） */
@@ -549,7 +549,7 @@
border:1px solid var(--adm-border-color, #e5e7eb);
border-radius:var(--adm-radius, 12px);
padding:10px;
box-shadow:0 12px 30px rgba(15, 23, 42, .12);
box-shadow:var(--adm-shadow-popover, 0 12px 30px rgba(15, 23, 42, .12));
z-index:100;
}

4
public/css/admin-theme.css
View File

@@ -33,6 +33,10 @@
--adm-radius-sm: 10px;
--adm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--adm-shadow-header: 0 1px 0 rgba(15, 23, 42, 0.04), 0 2px 10px rgba(15, 23, 42, 0.06);
--adm-shadow-popover: 0 12px 30px rgba(15, 23, 42, .12);
/* 中性色衍生（用于空态背景等） */
--adm-surface-tint: rgba(15, 23, 42, .02);
/* 表单 */
--adm-input-bg: #ffffff;

35
tests/Feature/AdminComponentsCssShouldUsePopoverShadowAndSurfaceTintTokensTest.php Normal file
View File

@@ -0,0 +1,35 @@
<?php
namespace Tests\Feature;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;
class AdminComponentsCssShouldUsePopoverShadowAndSurfaceTintTokensTest 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_admin_components_css_should_use_popover_shadow_and_surface_tint_tokens(): void
{
$this->loginAsPlatformAdmin();
$css = file_get_contents(public_path('css/admin-components.css'));
$this->assertIsString($css);
// popover/toast/dropdown 的阴影应走 token。
$this->assertStringContainsString('var(--adm-shadow-popover', $css);
// 列表空态背景应走 surface token。
$this->assertStringContainsString('var(--adm-surface-tint', $css);
}
}

32
tests/Feature/AdminThemeCssShouldDefinePopoverShadowAndSurfaceTintTokensTest.php Normal file
View File

@@ -0,0 +1,32 @@
<?php
namespace Tests\Feature;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;
class AdminThemeCssShouldDefinePopoverShadowAndSurfaceTintTokensTest 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_admin_theme_css_should_define_popover_shadow_and_surface_tint_tokens(): void
{
$this->loginAsPlatformAdmin();
$css = file_get_contents(public_path('css/admin-theme.css'));
$this->assertIsString($css);
$this->assertStringContainsString('--adm-shadow-popover', $css);
$this->assertStringContainsString('--adm-surface-tint', $css);
}
}