From 4ba22a5695bbb31384c7ad88de52ae43223faf07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=9D=E5=8D=9C?= <dev@saasshop.local>
Date: Mon, 16 Mar 2026 00:51:27 +0800
Subject: [PATCH] chore(admin-ui): align topnav to light AntD Pro header

---
 public/css/admin-components.css               | 18 ++++----
 ...CssTopNavShouldUseLightThemeTokensTest.php | 42 +++++++++++++++++++
 2 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 tests/Feature/AdminComponentsCssTopNavShouldUseLightThemeTokensTest.php

diff --git a/public/css/admin-components.css b/public/css/admin-components.css
index 0e56051..0abc013 100644
--- a/public/css/admin-components.css
+++ b/public/css/admin-components.css
@@ -332,9 +332,9 @@
 .sidebar.topnav{
     white-space:normal;
     overflow-x:visible;
-    background:var(--adm-bg-header, #0f172a);
-    border-bottom:1px solid var(--adm-border-color, #22384f);
-    box-shadow:var(--adm-shadow-header, none);
+    background:var(--adm-bg-header, #ffffff);
+    border-bottom:1px solid var(--adm-border-color, #e5e7eb);
+    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{
@@ -348,14 +348,14 @@
     display:inline-flex;
     align-items:center;
     font-weight:800;
-    color:var(--adm-text, #e2e8f0);
+    color:var(--adm-text, #0f172a);
     padding:8px 10px;
     border-radius:var(--adm-radius-sm, 10px);
 }
 
 .topnav-brand:hover{
     text-decoration:none;
-    background:rgba(15, 23, 42, .04);
+    background:rgba(22, 119, 255, .08);
 }
 
 .topnav-menu{
@@ -373,7 +373,7 @@
     gap:6px;
     padding:8px 10px;
     border-radius:var(--adm-radius-sm, 10px);
-    color:var(--adm-text-secondary, #cbd5e1);
+    color:var(--adm-text-secondary, #64748b);
 }
 
 .topnav-link:hover,
@@ -402,11 +402,11 @@
     top:calc(100% + 8px);
     left:0;
     min-width:180px;
-    background:var(--adm-bg-container, #0f172a);
-    border:1px solid var(--adm-border-color, #334155);
+    background:var(--adm-bg-container, #ffffff);
+    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, .18);
+    box-shadow:0 12px 30px rgba(15, 23, 42, .12);
     z-index:100;
 }
 
diff --git a/tests/Feature/AdminComponentsCssTopNavShouldUseLightThemeTokensTest.php b/tests/Feature/AdminComponentsCssTopNavShouldUseLightThemeTokensTest.php
new file mode 100644
index 0000000..aaf5b7e
--- /dev/null
+++ b/tests/Feature/AdminComponentsCssTopNavShouldUseLightThemeTokensTest.php
@@ -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);
+    }
+}