feat(admin): 引入 AntD Pro 风格主题令牌(CSS vars)并统一基础样式引用

This commit is contained in:
萝卜
2026-03-15 18:28:39 +08:00
parent 2de55fe9b3
commit d50a4fd846
3 changed files with 72 additions and 16 deletions

View File

@@ -1,10 +1,11 @@
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
color:#e5e7eb;
color:var(--adm-text, #e5e7eb);
background:var(--adm-bg-layout, transparent);
margin:0;
}
a{color:#60a5fa;text-decoration:none;}
a{color:var(--adm-color-link, #60a5fa);text-decoration:none;}
a:hover{text-decoration:underline;}
.layout{display:grid;min-height:100vh;}
@@ -48,7 +49,7 @@ a:hover{text-decoration:underline;}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;}
.page-title{margin:0;}
.card{border:1px solid #334155;border-radius:14px;padding:16px;}
.card{border:1px solid var(--adm-border-color, #334155);border-radius:var(--adm-radius, 14px);padding:16px;background:var(--adm-bg-container, transparent);box-shadow:var(--adm-shadow-sm, none);}
.card + .card{margin-top:20px;}
.card-spaced{margin-bottom:20px;}
@@ -86,12 +87,15 @@ input,select,button,textarea,
.login-form input,
.login-form button{
padding:10px 12px;
border-radius:10px;
border:1px solid #475569;
background:#0f172a;
color:#fff;
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);
box-sizing:border-box;
}
input:hover,select:hover,textarea:hover{
border-color:var(--adm-input-border-hover, var(--adm-input-border, #475569));
}
button{cursor:pointer;}
/* Buttons (UI Components)
@@ -117,14 +121,14 @@ button.btn-danger{
.btn,
button.btn{
background:#1d4ed8;
border-color:#1d4ed8;
color:#dbeafe;
background:var(--adm-color-primary, #1d4ed8);
border-color:var(--adm-color-primary, #1d4ed8);
color:#fff;
}
.btn:hover,
button.btn:hover{
background:#1e40af;
border-color:#1e40af;
background:var(--adm-color-primary-hover, #1e40af);
border-color:var(--adm-color-primary-hover, #1e40af);
text-decoration:none;
}
@@ -194,10 +198,10 @@ input.w-90{width:90px;}
.my-20{margin:20px 0;}
.list-indent,.ml-18{margin:8px 0 0 18px;}
.flash{background:#052e16;color:#bbf7d0;padding:12px 14px;border-radius:10px;margin-bottom:16px;}
.warning{background:#78350f;color:#fde68a;padding:12px 14px;border-radius:10px;margin-bottom:16px;}
.error-box{background:#7f1d1d;color:#fecaca;padding:12px 14px;border-radius:10px;margin-bottom:16px;}
.error,.error-inline{color:#fca5a5;margin-top:10px;}
.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;}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

View File

@@ -0,0 +1,51 @@
/*
* Admin Theme Tokens (Ant Design Pro-ish)
*
* 目标在不引入构建链less/webpack的前提下 CSS Variables 复刻 Ant Design Pro 的视觉基线
*
* 说明Ant Design Pro 文档中的 theme 实际是 less 变量@primary-color
* 我们这里用 --adm-* 变量做一层设计令牌后续页面/组件统一引用变量逐步推广
*/
:root{
/* 品牌色 / 链接色Ant Design v5 默认主色接近 #1677ff */
--adm-color-primary: #1677ff;
--adm-color-primary-hover: #4096ff;
--adm-color-primary-active: #0958d9;
--adm-color-link: var(--adm-color-primary);
/* 背景 / 容器(接近 Ant Design Pro Analysis 默认浅色主题) */
--adm-bg-layout: #f5f7fb;
--adm-bg-container: #ffffff;
--adm-bg-header: #ffffff;
/* 文本 */
--adm-text: #0f172a;
--adm-text-secondary: #64748b;
--adm-text-muted: #94a3b8;
/* 边框 / 分割线 */
--adm-border-color: #e5e7eb;
--adm-border-color-strong: #d1d5db;
/* 圆角 / 阴影AntD 更偏轻量阴影) */
--adm-radius: 12px;
--adm-radius-sm: 10px;
--adm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--adm-shadow-header: 0 1px 0 rgba(15, 23, 42, 0.04), 0 2px 10px rgba(15, 23, 42, 0.06);
/* 表单 */
--adm-input-bg: #ffffff;
--adm-input-border: #d1d5db;
--adm-input-border-hover: #a3aab6;
--adm-input-text: #0f172a;
/* 状态色(接近 Ant Design */
--adm-success: #16a34a;
--adm-warning: #f59e0b;
--adm-error: #ef4444;
--adm-success-bg: #f0fdf4;
--adm-warning-bg: #fffbeb;
--adm-error-bg: #fef2f2;
}

View File

@@ -4,6 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title', 'SaaSShop 总台管理')</title>
<link rel="stylesheet" href="/css/admin-theme.css">
<link rel="stylesheet" href="/css/admin-base.css">
<link rel="stylesheet" href="/css/admin.css">
<link rel="stylesheet" href="/css/admin-components.css">