diff --git a/public/css/admin-base.css b/public/css/admin-base.css index bf097d9..32d7fa1 100644 --- a/public/css/admin-base.css +++ b/public/css/admin-base.css @@ -1,21 +1,41 @@ body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; - color:var(--adm-text, #e5e7eb); + color:var(--adm-text, #0f172a); background:var(--adm-bg-layout, transparent); margin:0; } -a{color:var(--adm-color-link, #60a5fa);text-decoration:none;} +a{color:var(--adm-color-link, #1677ff);text-decoration:none;} a:hover{text-decoration:underline;} .layout{display:grid;min-height:100vh;} .sidebar{padding:24px;} .sidebar-title,.sidebar-brand{margin-top:0;} -.sidebar a, -.sidebar-link{display:block;color:#cbd5e1;text-decoration:none;padding:10px 12px;border-radius:10px;margin-bottom:8px;} -.sidebar a:hover, -.sidebar-link:hover{text-decoration:none;} -.group-title{font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.08em;margin:18px 0 8px;} + +/* 左侧菜单形态(兼容):不应覆盖顶部导航 topnav 的链接样式 */ +.sidebar:not(.topnav) a, +.sidebar:not(.topnav) .sidebar-link{ + display:block; + color:var(--adm-text-secondary, #64748b); + text-decoration:none; + padding:10px 12px; + border-radius:10px; + margin-bottom:8px; +} +.sidebar:not(.topnav) a:hover, +.sidebar:not(.topnav) .sidebar-link:hover{ + text-decoration:none; + background:rgba(22, 119, 255, .08); + color:var(--adm-text, #0f172a); +} + +.group-title{ + font-size:12px; + color:var(--adm-text-muted, #94a3b8); + text-transform:uppercase; + letter-spacing:.08em; + margin:18px 0 8px; +} .sidebar-logout,.logout-form{margin-top:18px;} .content{padding:28px;} @@ -28,24 +48,12 @@ a:hover{text-decoration:underline;} z-index:50; padding:16px 20px; border-right:none !important; - border-bottom:1px solid #22384f; + border-bottom:1px solid var(--adm-border-color, #e5e7eb); } .layout.layout-topnav .content{padding-top:20px;} -/* 顶部导航:把链接横向排布,超出则可横向滚动 */ -.layout.layout-topnav .sidebar a, -.layout.layout-topnav .sidebar-link{ - display:inline-block; - margin:0 8px 0 0; - padding:8px 10px; - border-radius:10px; -} -.layout.layout-topnav .group-title{display:inline-block;margin:0 10px 0 0;} -.layout.layout-topnav .logout-form, -.layout.layout-topnav .sidebar-logout{display:inline-block;margin:0 0 0 10px;} -.layout.layout-topnav .sidebar{white-space:nowrap;overflow-x:auto;} -.layout.layout-topnav .sidebar::-webkit-scrollbar{height:8px;} -.layout.layout-topnav .sidebar::-webkit-scrollbar-thumb{background:#334155;border-radius:999px;} +/* 顶部导航:链接样式由 admin-components.css 的 topnav 组件接管;这里不再做强样式覆盖 */ +.layout.layout-topnav .sidebar{white-space:normal;overflow-x:visible;} .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;} .page-title{margin:0;} @@ -72,14 +80,28 @@ a:hover{text-decoration:underline;} .metric-number{font-size:28px;font-weight:700;} .text-md{font-size:16px;display:block;} -.muted{color:#94a3b8;} +.muted{color:var(--adm-text-muted, #94a3b8);} .muted-tight{margin-top:0;} .muted-xs{margin-top:6px;font-size:12px;} .badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;margin-top:8px;} -table{width:100%;border-collapse:collapse;} -th,td{padding:10px;border-bottom:1px solid #334155;text-align:left;vertical-align:top;} +table{ + width:100%; + border-collapse:collapse; +} + +th,td{ + padding:10px; + border-bottom:1px solid var(--adm-border-color, #e5e7eb); + text-align:left; + vertical-align:top; +} + +th{ + color:var(--adm-text-secondary, #64748b); + font-weight:600; +} input,select,button,textarea, .form-grid input, @@ -88,14 +110,22 @@ input,select,button,textarea, .login-form button{ padding:10px 12px; border-radius:var(--adm-radius-sm, 10px); - border:1px solid var(--adm-input-border, #475569); - background:var(--adm-input-bg, #0f172a); - color:var(--adm-input-text, #fff); + border:1px solid var(--adm-input-border, #d1d5db); + background:var(--adm-input-bg, #ffffff); + color:var(--adm-input-text, #0f172a); box-sizing:border-box; } + input:hover,select:hover,textarea:hover{ - border-color:var(--adm-input-border-hover, var(--adm-input-border, #475569)); + border-color:var(--adm-input-border-hover, var(--adm-input-border, #a3aab6)); } + +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); +} + button{cursor:pointer;} /* Buttons (UI Components) @@ -134,27 +164,27 @@ button.btn:hover{ .btn-secondary, button.btn-secondary{ - background:transparent; - border-color:#334155; - color:#cbd5e1; + background:#ffffff; + border-color:var(--adm-border-color-strong, #d1d5db); + color:var(--adm-text, #0f172a); } .btn-secondary:hover, button.btn-secondary:hover{ - background:#1e293b; - border-color:#475569; + background:#f8fafc; + border-color:var(--adm-border-color-strong, #d1d5db); text-decoration:none; } .btn-danger, button.btn-danger{ - background:#7f1d1d; - border-color:#7f1d1d; - color:#fecaca; + background:var(--adm-error, #ef4444); + border-color:var(--adm-error, #ef4444); + color:#fff; } .btn-danger:hover, button.btn-danger:hover{ - background:#991b1b; - border-color:#991b1b; + background:#dc2626; + border-color:#dc2626; text-decoration:none; } @@ -198,11 +228,42 @@ input.w-90{width:90px;} .my-20{margin:20px 0;} .list-indent,.ml-18{margin:8px 0 0 18px;} -.flash{background:var(--adm-success-bg, #052e16);color:var(--adm-success, #bbf7d0);padding:12px 14px;border-radius:var(--adm-radius-sm, 10px);margin-bottom:16px;border:1px solid rgba(22,163,74,.25);} -.warning{background:var(--adm-warning-bg, #78350f);color:var(--adm-warning, #fde68a);padding:12px 14px;border-radius:var(--adm-radius-sm, 10px);margin-bottom:16px;border:1px solid rgba(245,158,11,.25);} -.error-box{background:var(--adm-error-bg, #7f1d1d);color:var(--adm-error, #fecaca);padding:12px 14px;border-radius:var(--adm-radius-sm, 10px);margin-bottom:16px;border:1px solid rgba(239,68,68,.25);} -.error,.error-inline{color:var(--adm-error, #fca5a5);margin-top:10px;} -.filter-error{margin-bottom:12px;padding:12px;border:1px solid #fecaca;background:#fef2f2;color:#991b1b;border-radius:8px;} +.flash{ + background:var(--adm-success-bg, #f0fdf4); + color:var(--adm-success, #16a34a); + padding:12px 14px; + border-radius:var(--adm-radius-sm, 10px); + margin-bottom:16px; + border:1px solid rgba(22, 163, 74, .25); +} +.warning{ + background:var(--adm-warning-bg, #fffbeb); + color:var(--adm-warning, #f59e0b); + padding:12px 14px; + border-radius:var(--adm-radius-sm, 10px); + margin-bottom:16px; + border:1px solid rgba(245, 158, 11, .25); +} +.error-box{ + background:var(--adm-error-bg, #fef2f2); + color:var(--adm-error, #ef4444); + padding:12px 14px; + border-radius:var(--adm-radius-sm, 10px); + margin-bottom:16px; + border:1px solid rgba(239, 68, 68, .25); +} +.error,.error-inline{ + color:var(--adm-error, #ef4444); + margin-top:10px; +} +.filter-error{ + margin-bottom:12px; + padding:12px; + border:1px solid #fecaca; + background:#fef2f2; + color:#991b1b; + border-radius:8px; +} .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;} .actions-spread{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;} @@ -215,8 +276,18 @@ input.w-90{width:90px;} .gap-12{gap:12px;} .gap-10{gap:10px;} -.focus-box,.nav-box,.profile-box{padding:12px;border:1px solid #334155;border-radius:8px;} -.summary-box,.stat-box,.status-card,.status-link{padding:12px;border:1px solid #334155;border-radius:8px;} +.focus-box,.nav-box,.profile-box{ + padding:12px; + border:1px solid var(--adm-border-color, #e5e7eb); + border-radius:8px; + background:var(--adm-bg-container, #ffffff); +} +.summary-box,.stat-box,.status-card,.status-link{ + padding:12px; + border:1px solid var(--adm-border-color, #e5e7eb); + border-radius:8px; + background:var(--adm-bg-container, #ffffff); +} .status-card,.status-link{color:inherit;text-decoration:none;display:block;} .status-card:hover,.status-link:hover{text-decoration:none;} .pagination-wrap{margin-top:16px;} diff --git a/tests/Feature/AdminBaseCssShouldUseLightThemeTokensTest.php b/tests/Feature/AdminBaseCssShouldUseLightThemeTokensTest.php new file mode 100644 index 0000000..fba8e54 --- /dev/null +++ b/tests/Feature/AdminBaseCssShouldUseLightThemeTokensTest.php @@ -0,0 +1,38 @@ +seed(); + + $this->post('/admin/login', [ + 'email' => 'platform.admin@demo.local', + 'password' => 'Platform@123456', + ])->assertRedirect('/admin'); + } + + public function test_admin_base_css_should_use_light_theme_tokens(): void + { + $this->loginAsPlatformAdmin(); + + $css = file_get_contents(public_path('css/admin-base.css')); + $this->assertIsString($css); + + // 核心:body 文本应引用 --adm-text(浅色主题为深色文字),避免仍残留暗色文字默认值 + $this->assertStringContainsString('color:var(--adm-text, #0f172a)', $css); + + // 表格分割线应引用 --adm-border-color(浅色主题为浅边框),避免仍硬编码 #334155 + $this->assertStringContainsString('border-bottom:1px solid var(--adm-border-color', $css); + + // 表单 focus 需要有主色描边(Ant Design Pro 关键交互反馈) + $this->assertStringContainsString('box-shadow:0 0 0 3px rgba(22, 119, 255, .12)', $css); + } +}