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

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