fix(admin-ui): prevent orders dashboard dark background regression
This commit is contained in:
@@ -333,8 +333,18 @@ input.w-90{width:90px;}
|
|||||||
.pagination-wrap a:focus,
|
.pagination-wrap a:focus,
|
||||||
.pagination-wrap a:active{text-decoration:none;}
|
.pagination-wrap a:active{text-decoration:none;}
|
||||||
.text-center,.table-empty{text-align:center;}
|
.text-center,.table-empty{text-align:center;}
|
||||||
.section-dark{background:#0f172a;}
|
.section-dark{
|
||||||
.stat-box-light,.status-link-light{padding:12px;border:1px solid #e5e7eb;border-radius:8px;}
|
/* 说明:早期是深色块,但与当前 Ant Design Pro-ish 浅色主题不一致,且容易造成文字对比度问题。
|
||||||
|
* 统一收敛:用 surface tint 作为“弱强调区块”,避免“颜色回退”。
|
||||||
|
*/
|
||||||
|
background:var(--adm-surface-tint, rgba(15, 23, 42, .02));
|
||||||
|
}
|
||||||
|
.stat-box-light,.status-link-light{
|
||||||
|
padding:12px;
|
||||||
|
border:1px solid var(--adm-border-color, #e5e7eb);
|
||||||
|
border-radius:8px;
|
||||||
|
background:var(--adm-bg-container, #ffffff);
|
||||||
|
}
|
||||||
.status-link-light{color:inherit;text-decoration:none;display:block;}
|
.status-link-light{color:inherit;text-decoration:none;display:block;}
|
||||||
.is-active-dark,.status-card-active{background:#1e293b;border-color:#60a5fa;}
|
.is-active-dark,.status-card-active{background:#1e293b;border-color:#60a5fa;}
|
||||||
.is-active-light{background:#f5faff;border-color:#93c5fd;}
|
.is-active-light{background:#f5faff;border-color:#93c5fd;}
|
||||||
|
|||||||
@@ -318,7 +318,7 @@
|
|||||||
padding:10px 10px;
|
padding:10px 10px;
|
||||||
border:1px solid var(--adm-border-color, #e5e7eb);
|
border:1px solid var(--adm-border-color, #e5e7eb);
|
||||||
border-radius:var(--adm-radius, 12px);
|
border-radius:var(--adm-radius, 12px);
|
||||||
background:var(--adm-surface-tint, rgba(15, 23, 42, .02));
|
background:var(--adm-surface-tint);
|
||||||
box-shadow:var(--adm-shadow-sm);
|
box-shadow:var(--adm-shadow-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -30,5 +30,7 @@ class AdminComponentsCssShouldUseTokenOnlyForShadowAndSurfaceTintTest extends Te
|
|||||||
$this->assertStringNotContainsString('var(--adm-shadow-popover,', $css);
|
$this->assertStringNotContainsString('var(--adm-shadow-popover,', $css);
|
||||||
$this->assertStringNotContainsString('var(--adm-shadow-sm,', $css);
|
$this->assertStringNotContainsString('var(--adm-shadow-sm,', $css);
|
||||||
$this->assertStringNotContainsString('var(--adm-surface-tint,', $css);
|
$this->assertStringNotContainsString('var(--adm-surface-tint,', $css);
|
||||||
|
|
||||||
|
// 说明:surface tint fallback 的检测放在 admin-base.css(基础样式层)里,components 层仍坚持 token-only。
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
namespace Tests\Feature;
|
||||||
|
|
||||||
|
use Illuminate\Foundation\Testing\RefreshDatabase;
|
||||||
|
use Tests\TestCase;
|
||||||
|
|
||||||
|
class AdminOrdersIndexSectionDarkShouldUseSurfaceTintTest 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_orders_index_should_not_use_hardcoded_dark_section_background(): void
|
||||||
|
{
|
||||||
|
$this->loginAsPlatformAdmin();
|
||||||
|
|
||||||
|
$res = $this->get('/admin/orders');
|
||||||
|
$res->assertOk();
|
||||||
|
|
||||||
|
// 页面仍然可以使用 section-dark 作为“强调区块”类名,但样式不应回到深色背景
|
||||||
|
$res->assertSee('section-dark', false);
|
||||||
|
|
||||||
|
$css = (string) file_get_contents(public_path('css/admin-base.css'));
|
||||||
|
|
||||||
|
// 旧版硬编码深色背景:background:#0f172a
|
||||||
|
$this->assertStringNotContainsString('background:#0f172a', $css);
|
||||||
|
$this->assertStringContainsString('--adm-surface-tint', $css);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user