XW-AIOT/aiot-platform-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(@vben-core/design): 添加毛玻璃卡片系统 CSS 变量和全局样式

Browse Source 
- 新增毛玻璃专用 CSS 变量（glass-surface, glass-border, glass-shadow 等）
- 为所有 17 个主题变体添加深色模式适配
- 添加全局毛玻璃工具类（glass-card, glass-border, glass-shadow 等）
- 实现 Ant Design 卡片和 VxeTable 的全局毛玻璃样式覆盖
- 添加顶部高光效果和悬浮动画效果
This commit is contained in:
lzh
2025-12-22 14:54:38 +08:00
parent b14bd96cb2
commit da9a0b94a2
3 changed files with 333 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
packages/@core/base/design/src/css/global.css
View File

@@ -14,7 +14,10 @@
}
html {
@apply text-foreground bg-background font-sans text-[100%];
@apply text-foreground font-sans text-[100%];
/* 浅色主题 - 添加线性渐变背景 */
background: linear-gradient(135deg, #FFFCF5 0%, #FFF8ED 50%, #FFF0D4 100%);
font-variation-settings: normal;
line-height: 1.15;
@@ -28,6 +31,11 @@
-moz-osx-font-smoothing: grayscale; */
}
/* 深色主题 - 使用纯色背景 */
html.dark {
@apply bg-background;
}
#app,
body,
html {
@@ -149,6 +157,189 @@
.card-box {
@apply bg-card text-card-foreground border-border rounded-xl border;
}
/* ============= 毛玻璃卡片全局样式覆盖 ============= */
/* 统一卡片毛玻璃效果 - 覆盖所有卡片类型（包括 scoped 样式） */
.bg-card,
.ant-card,
div.ant-card,
.device-card.ant-card {
background: rgb(var(--glass-surface)) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border: 1px solid rgb(var(--glass-border)) !important;
border-radius: 2rem !important;
box-shadow: var(--glass-shadow) !important;
transition: all 0.3s ease-out !important;
position: relative !important;
}
/* 统一顶部高光效果 */
.bg-card::before,
.ant-card::before,
div.ant-card::before,
.device-card.ant-card::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, white, transparent) !important;
opacity: 0.7 !important;
pointer-events: none !important;
border-radius: 2rem 2rem 0 0 !important;
z-index: 1 !important;
}
/* 统一悬浮效果 */
.bg-card:hover,
.ant-card:hover,
div.ant-card:hover,
.device-card.ant-card:hover {
transform: translateY(-4px) !important;
box-shadow: var(--glass-shadow-hover) !important;
}
/* Card 子元素样式调整 */
.ant-card-body {
padding: 24px !important;
position: relative !important;
z-index: 2 !important;
}
.ant-card-head {
border-bottom: 1px solid rgb(var(--glass-border)) !important;
background: transparent !important;
position: relative !important;
z-index: 2 !important;
}
/* ============= VxeTable/VxeGrid 全局毛玻璃样式覆盖 ============= */
/* VxeTable 主容器 */
.vxe-table,
.vxe-grid,
div.vxe-table,
div.vxe-grid {
background: transparent !important;
}
/* VxeTable 表格容器 */
.vxe-table--main-wrapper,
div.vxe-table--main-wrapper {
background: rgb(var(--glass-surface)) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
border: 1px solid rgb(var(--glass-border)) !important;
border-radius: 1.5rem !important;
overflow: hidden !important;
}
/* 表头样式 */
.vxe-table--header-wrapper,
div.vxe-table--header-wrapper {
background: rgba(255, 255, 255, 0.3) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
}
.vxe-header--column,
th.vxe-header--column {
background: transparent !important;
border-bottom: 1px solid rgb(var(--glass-border)) !important;
}
/* 表格主体 */
.vxe-table--body-wrapper,
div.vxe-table--body-wrapper {
background: transparent !important;
}
.vxe-body--row,
tr.vxe-body--row {
background: transparent !important;
}
.vxe-body--row:hover,
tr.vxe-body--row:hover {
background: rgba(255, 255, 255, 0.2) !important;
}
/* 表格边框 */
.vxe-table--border-line {
border-color: rgb(var(--glass-border)) !important;
}
.vxe-body--column,
.vxe-header--column,
.vxe-footer--column,
td.vxe-body--column,
th.vxe-header--column,
td.vxe-footer--column {
border-color: rgba(255, 255, 255, 0.1) !important;
}
/* 工具栏 */
.vxe-toolbar,
div.vxe-toolbar {
background: transparent !important;
border-bottom: 1px solid rgb(var(--glass-border)) !important;
}
/* 分页器 */
.vxe-pager,
div.vxe-pager {
background: transparent !important;
border-top: 1px solid rgb(var(--glass-border)) !important;
}
/* ============= 毛玻璃卡片工具类 ============= */
/* 玻璃表面背景 + 毛玻璃模糊 */
.glass-card {
background: rgb(var(--glass-surface));
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
/* 玻璃边框 */
.glass-border {
border: 1px solid rgb(var(--glass-border));
}
/* 玻璃阴影 */
.glass-shadow {
box-shadow: var(--glass-shadow);
}
/* 玻璃悬浮阴影 */
.glass-shadow-hover {
box-shadow: var(--glass-shadow-hover);
}
/* 软阴影 */
.shadow-soft {
box-shadow: var(--shadow-soft);
}
/* 顶部高光效果 - 使用伪元素 */
.glass-highlight {
position: relative;
}
.glass-highlight::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, white, transparent);
opacity: 0.7;
pointer-events: none;
}
}
html.invert-mode {

116
packages/@core/base/design/src/design-tokens/dark.css
View File

@@ -104,6 +104,18 @@
/* header */
--header: 222.34deg 10.43% 12.27%;
/* tabbar */
--tabbar: 222.34deg 10.43% 12.27%;
/* ============= 毛玻璃卡片系统 (深色模式适配) ============= */
/* 深色模式毛玻璃 - 更低的透明度 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
color-scheme: dark;
}
@@ -131,6 +143,14 @@
--sidebar: 224 71.4% 4.1%;
--sidebar-deep: 224 71.4% 4.1%;
--header: 224 71.4% 4.1%;
--tabbar: 224 71.4% 4.1%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}
.dark[data-theme='pink'],
@@ -157,6 +177,14 @@
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
--header: 20 14.3% 4.1%;
--tabbar: 20 14.3% 4.1%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}
.dark[data-theme='rose'],
@@ -183,6 +211,14 @@
--sidebar: 0 0% 3.9%;
--sidebar-deep: 0 0% 3.9%;
--header: 0 0% 3.9%;
--tabbar: 0 0% 3.9%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}
.dark[data-theme='sky-blue'],
@@ -209,6 +245,14 @@
--sidebar: 222.2 84% 4.9%;
--sidebar-deep: 222.2 84% 4.9%;
--header: 222.2 84% 4.9%;
--tabbar: 222.2 84% 4.9%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}
.dark[data-theme='deep-blue'],
@@ -235,6 +279,14 @@
--sidebar: 222.2 84% 4.9%;
--sidebar-deep: 222.2 84% 4.9%;
--header: 222.2 84% 4.9%;
--tabbar: 222.2 84% 4.9%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}
.dark[data-theme='green'],
@@ -261,6 +313,14 @@
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
--header: 20 14.3% 4.1%;
--tabbar: 20 14.3% 4.1%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}
.dark[data-theme='deep-green'],
@@ -287,6 +347,14 @@
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
--header: 20 14.3% 4.1%;
--tabbar: 20 14.3% 4.1%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}
.dark[data-theme='orange'],
@@ -313,6 +381,14 @@
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
--header: 20 14.3% 4.1%;
--tabbar: 20 14.3% 4.1%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}
.dark[data-theme='yellow'],
@@ -339,6 +415,14 @@
--sidebar: 20 14.3% 4.1%;
--sidebar-deep: 20 14.3% 4.1%;
--header: 20 14.3% 4.1%;
--tabbar: 20 14.3% 4.1%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}
.dark[data-theme='zinc'],
@@ -365,6 +449,14 @@
--sidebar: 240 10% 3.9%;
--sidebar-deep: 240 10% 3.9%;
--header: 240 10% 3.9%;
--tabbar: 240 10% 3.9%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}
.dark[data-theme='neutral'],
@@ -391,6 +483,14 @@
--sidebar: 0 0% 3.9%;
--sidebar-deep: 0 0% 3.9%;
--header: 0 0% 3.9%;
--tabbar: 0 0% 3.9%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}
.dark[data-theme='slate'],
@@ -417,6 +517,14 @@
--sidebar: 222.2 84% 4.9%;
--sidebar-deep: 222.2 84% 4.9%;
--header: 222.2 84% 4.9%;
--tabbar: 222.2 84% 4.9%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}
.dark[data-theme='gray'],
@@ -443,4 +551,12 @@
--sidebar: 224 71.4% 4.1%;
--sidebar-deep: 224 71.4% 4.1%;
--header: 224 71.4% 4.1%;
--tabbar: 224 71.4% 4.1%;
/* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2);
}

30
packages/@core/base/design/src/design-tokens/default.css
View File

@@ -9,8 +9,8 @@
/* Default background color of <body />...etc */
--background: 0 0% 100%;
/* 主体区域背景色 */
--background-deep: 216 20.11% 95.47%;
/* 主体区域背景色 - 改为更浅的颜色以显示光晕 */
--background-deep: 37 30% 98%;
--foreground: 210 6% 21%;
/* Background color for <Card /> */
@@ -87,6 +87,23 @@
/* ============= custom ============= */
/* ============= 毛玻璃卡片系统 ============= */
/* 玻璃表面 - 45% 透明度白色 */
--glass-surface: 255 255 255 / 0.45;
/* 玻璃边框 - 60% 透明度白色 */
--glass-border: 255 255 255 / 0.6;
/* 玻璃阴影 */
--glass-shadow: 0 8px 32px 0 rgb(31 38 135 / 0.05);
/* 玻璃悬浮阴影 */
--glass-shadow-hover: 0 16px 48px 0 rgb(31 38 135 / 0.08);
/* 软阴影 (通用) */
--shadow-soft: 0 4px 16px 0 rgb(31 38 135 / 0.03);
/* 遮罩颜色 */
--overlay: 0 0% 0% / 45%;
--overlay-content: 0 0% 95% / 45%;
@@ -97,12 +114,15 @@
/* =============component & UI============= */
/* menu */
--sidebar: 0 0% 100%;
--sidebar-deep: 0 0% 100%;
--sidebar: 37 40% 98%; /* 微妙橙色调 - 浅奶黄色 */
--sidebar-deep: 37 45% 97%; /* 微妙橙色调 - 稍深 */
--menu: var(--sidebar);
/* header */
--header: 0 0% 100%;
--header: 37 40% 98%; /* 微妙橙色调 - 与侧边栏一致 */
/* tabbar */
--tabbar: 37 40% 98%; /* 微妙橙色调 - 与侧边栏、顶部栏一致 */
accent-color: var(--primary);
color-scheme: light;