chore(admin-ui): align topnav to light AntD Pro header
This commit is contained in:
@@ -332,9 +332,9 @@
|
|||||||
.sidebar.topnav{
|
.sidebar.topnav{
|
||||||
white-space:normal;
|
white-space:normal;
|
||||||
overflow-x:visible;
|
overflow-x:visible;
|
||||||
background:var(--adm-bg-header, #0f172a);
|
background:var(--adm-bg-header, #ffffff);
|
||||||
border-bottom:1px solid var(--adm-border-color, #22384f);
|
border-bottom:1px solid var(--adm-border-color, #e5e7eb);
|
||||||
box-shadow:var(--adm-shadow-header, none);
|
box-shadow:var(--adm-shadow-header, 0 1px 0 rgba(15, 23, 42, 0.04), 0 2px 10px rgba(15, 23, 42, 0.06));
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav-row{
|
.topnav-row{
|
||||||
@@ -348,14 +348,14 @@
|
|||||||
display:inline-flex;
|
display:inline-flex;
|
||||||
align-items:center;
|
align-items:center;
|
||||||
font-weight:800;
|
font-weight:800;
|
||||||
color:var(--adm-text, #e2e8f0);
|
color:var(--adm-text, #0f172a);
|
||||||
padding:8px 10px;
|
padding:8px 10px;
|
||||||
border-radius:var(--adm-radius-sm, 10px);
|
border-radius:var(--adm-radius-sm, 10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav-brand:hover{
|
.topnav-brand:hover{
|
||||||
text-decoration:none;
|
text-decoration:none;
|
||||||
background:rgba(15, 23, 42, .04);
|
background:rgba(22, 119, 255, .08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav-menu{
|
.topnav-menu{
|
||||||
@@ -373,7 +373,7 @@
|
|||||||
gap:6px;
|
gap:6px;
|
||||||
padding:8px 10px;
|
padding:8px 10px;
|
||||||
border-radius:var(--adm-radius-sm, 10px);
|
border-radius:var(--adm-radius-sm, 10px);
|
||||||
color:var(--adm-text-secondary, #cbd5e1);
|
color:var(--adm-text-secondary, #64748b);
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav-link:hover,
|
.topnav-link:hover,
|
||||||
@@ -402,11 +402,11 @@
|
|||||||
top:calc(100% + 8px);
|
top:calc(100% + 8px);
|
||||||
left:0;
|
left:0;
|
||||||
min-width:180px;
|
min-width:180px;
|
||||||
background:var(--adm-bg-container, #0f172a);
|
background:var(--adm-bg-container, #ffffff);
|
||||||
border:1px solid var(--adm-border-color, #334155);
|
border:1px solid var(--adm-border-color, #e5e7eb);
|
||||||
border-radius:var(--adm-radius, 12px);
|
border-radius:var(--adm-radius, 12px);
|
||||||
padding:10px;
|
padding:10px;
|
||||||
box-shadow:0 12px 30px rgba(15, 23, 42, .18);
|
box-shadow:0 12px 30px rgba(15, 23, 42, .12);
|
||||||
z-index:100;
|
z-index:100;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,42 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Tests\Feature;
|
||||||
|
|
||||||
|
use Illuminate\Foundation\Testing\RefreshDatabase;
|
||||||
|
use Tests\TestCase;
|
||||||
|
|
||||||
|
class AdminComponentsCssTopNavShouldUseLightThemeTokensTest 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_top_nav_should_use_light_theme_tokens(): void
|
||||||
|
{
|
||||||
|
$this->loginAsPlatformAdmin();
|
||||||
|
|
||||||
|
$css = file_get_contents(public_path('css/admin-components.css'));
|
||||||
|
$this->assertIsString($css);
|
||||||
|
|
||||||
|
// 顶部导航必须走浅色主题基线(Ant Design Pro-ish),避免回退到深色 header。
|
||||||
|
$this->assertStringContainsString('.sidebar.topnav{', $css);
|
||||||
|
$this->assertStringContainsString('background:var(--adm-bg-header, #ffffff)', $css);
|
||||||
|
$this->assertStringContainsString('border-bottom:1px solid var(--adm-border-color, #e5e7eb)', $css);
|
||||||
|
|
||||||
|
// 下拉必须是白底容器 + 浅色边框。
|
||||||
|
$this->assertStringContainsString('.topnav-dropdown{', $css);
|
||||||
|
$this->assertStringContainsString('background:var(--adm-bg-container, #ffffff)', $css);
|
||||||
|
$this->assertStringContainsString('border:1px solid var(--adm-border-color, #e5e7eb)', $css);
|
||||||
|
|
||||||
|
// 顶部导航链接默认应是 secondary 文本色(灰),hover 才变深。
|
||||||
|
$this->assertStringContainsString('color:var(--adm-text-secondary, #64748b)', $css);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user