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

chore(admin-ui): tokenise sidebar hover and focus ring with primary tokens

Browse Source
This commit is contained in:
萝卜
2026-03-16 02:13:45 +08:00
parent 35902de44b
commit 2605e1c287
4 changed files with 70 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,7 +25,7 @@ a:hover{text-decoration:underline;}
.sidebar:not(.topnav) a:hover,
.sidebar:not(.topnav) .sidebar-link:hover{
text-decoration:none;
background:rgba(22, 119, 255, .08);
background:var(--adm-primary-tint-08, rgba(22, 119, 255, .08));
color:var(--adm-text, #0f172a);
}
@@ -123,7 +123,7 @@ input:hover,select:hover,textarea:hover{
input:focus,select:focus,textarea:focus{
outline:none;
border-color:var(--adm-color-primary, #1677ff);
box-shadow:0 0 0 3px rgba(22, 119, 255, .12);
box-shadow:0 0 0 3px var(--adm-primary-focus-ring, rgba(22, 119, 255, .12));
}
button{cursor:pointer;}

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

@@ -50,6 +50,7 @@
--adm-primary-tint-08: rgba(22, 119, 255, .08);
--adm-primary-border-35: rgba(22, 119, 255, .35);
--adm-primary-border-45: rgba(22, 119, 255, .45);
--adm-primary-focus-ring: rgba(22, 119, 255, .12);
/* 状态色（接近 Ant Design） */
--adm-success: #16a34a;

36
tests/Feature/AdminBaseCssSidebarHoverAndInputFocusShouldUsePrimaryTokensTest.php Normal file
View File

@@ -0,0 +1,36 @@
<?php
namespace Tests\Feature;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;
class AdminBaseCssSidebarHoverAndInputFocusShouldUsePrimaryTokensTest 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_base_css_sidebar_hover_and_input_focus_should_use_primary_tokens(): void
{
$this->loginAsPlatformAdmin();
$css = file_get_contents(public_path('css/admin-base.css'));
$this->assertIsString($css);
// 左侧菜单 hover 高亮必须走 primary tint token。
$this->assertStringContainsString('.sidebar:not(.topnav) a:hover', $css);
$this->assertStringContainsString('background:var(--adm-primary-tint-08', $css);
// input focus ring 必须走 focus-ring token。
$this->assertStringContainsString('box-shadow:0 0 0 3px var(--adm-primary-focus-ring', $css);
}
}

31
tests/Feature/AdminThemeCssShouldDefinePrimaryFocusRingTokenTest.php Normal file
View File

@@ -0,0 +1,31 @@
<?php
namespace Tests\Feature;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Tests\TestCase;
class AdminThemeCssShouldDefinePrimaryFocusRingTokenTest 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_primary_focus_ring_token(): void
{
$this->loginAsPlatformAdmin();
$css = file_get_contents(public_path('css/admin-theme.css'));
$this->assertIsString($css);
$this->assertStringContainsString('--adm-primary-focus-ring', $css);
}
}