linxianzhuang/saasshop
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

admin ui: align base styles to Ant Design Pro light tokens

Browse Source
This commit is contained in:
萝卜
2026-03-15 23:58:41 +08:00
parent 56ad502aac
commit 423723cd5a
2 changed files with 155 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
public/css/admin-base.css
View File

@@ -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;}