feat(admin): 引入 AntD Pro 风格主题令牌(CSS vars)并统一基础样式引用
This commit is contained in:
@@ -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;}
|
||||
|
||||
51
public/css/admin-theme.css
Normal file
51
public/css/admin-theme.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user