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

style: 代码格式化和样式

Browse Source
This commit is contained in:
lzh
2025-12-22 15:30:43 +08:00
parent eaaa23fb84
commit 5c7b401417
12 changed files with 161 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
apps/web-antd/GLASSMORPHISM_SUMMARY.md
View File

@@ -16,12 +16,14 @@
**文件位置：** `packages/@core/base/design/src/design-tokens/` **文件位置：** `packages/@core/base/design/src/design-tokens/`
#### 新增变量（浅色主题） #### 新增变量（浅色主题）
- `--glass-surface`: 45% 透明度白色背景 - `--glass-surface`: 45% 透明度白色背景
- `--glass-border`: 60% 透明度白色边框 - `--glass-border`: 60% 透明度白色边框
- `--glass-shadow`: 玻璃阴影效果 - `--glass-shadow`: 玻璃阴影效果
- `--glass-shadow-hover`: 悬浮时阴影增强 - `--glass-shadow-hover`: 悬浮时阴影增强
#### 深色主题适配 #### 深色主题适配
- 所有 17 个主题变体均已适配 - 所有 17 个主题变体均已适配
- 深色模式下自动降低透明度（8% 背景，10% 边框） - 深色模式下自动降低透明度（8% 背景，10% 边框）
@@ -30,6 +32,7 @@
**文件位置：** `packages/@core/base/design/src/css/global.css` **文件位置：** `packages/@core/base/design/src/css/global.css`
#### 新增工具类 #### 新增工具类
- `.glass-card`: 基础毛玻璃卡片（32px 圆角） - `.glass-card`: 基础毛玻璃卡片（32px 圆角）
- `.glass-border`: 玻璃边框 - `.glass-border`: 玻璃边框
- `.glass-shadow`: 玻璃阴影 - `.glass-shadow`: 玻璃阴影
@@ -41,6 +44,7 @@
**文件位置：** `packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue` **文件位置：** `packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue`
#### 自动应用特性 #### 自动应用特性
- ✅ 超大圆角：32px (`rounded-[2rem]`) - ✅ 超大圆角：32px (`rounded-[2rem]`)
- ✅ 毛玻璃背景：45% 透明度 + 24px 模糊 - ✅ 毛玻璃背景：45% 透明度 + 24px 模糊
- ✅ 玻璃边框：60% 透明度 - ✅ 玻璃边框：60% 透明度
@@ -49,6 +53,7 @@
- ✅ 流畅过渡：300ms ease-out - ✅ 流畅过渡：300ms ease-out
**使用方式：** **使用方式：**
```vue ```vue
<!-- 自动应用，无需修改代码 --> <!-- 自动应用，无需修改代码 -->
<Card> <Card>
@@ -65,13 +70,13 @@
### 性能指标 ### 性能指标
| 指标 | 影响 | 状态 | | 指标 | 影响 | 状态 |
|------|------|------| | ------------------ | --------- | --------- |
| 首次绘制 (FCP) | +8% | ✅ 优秀 | | 首次绘制 (FCP) | +8% | ✅ 优秀 |
| 最大内容绘制 (LCP) | +11% | ✅ 优秀 | | 最大内容绘制 (LCP) | +11% | ✅ 优秀 |
| 交互时间 (TTI) | +5% | ✅ 优秀 | | 交互时间 (TTI) | +5% | ✅ 优秀 |
| 滚动 FPS | 58-60 FPS | ✅ 优秀 | | 滚动 FPS | 58-60 FPS | ✅ 优秀 |
| GPU 内存 | +50% | ✅ 可接受 | | GPU 内存 | +50% | ✅ 可接受 |
### 性能优化建议 ### 性能优化建议
@@ -84,14 +89,14 @@
## 🎨 视觉特性 ## 🎨 视觉特性
| 特性 | 值 | 说明 | | 特性 | 值 | 说明 |
|------|-----|------| | ---------- | ---- | ------------------------------------ |
| 背景透明度 | 45% | 浅色主题 `rgba(255, 255, 255, 0.45)` | | 背景透明度 | 45% | 浅色主题 `rgba(255, 255, 255, 0.45)` |
| 模糊半径 | 24px | `backdrop-filter: blur(24px)` | | 模糊半径 | 24px | `backdrop-filter: blur(24px)` |
| 边框透明度 | 60% | `rgba(255, 255, 255, 0.6)` | | 边框透明度 | 60% | `rgba(255, 255, 255, 0.6)` |
| 圆角大小 | 32px | `rounded-[2rem]` | | 圆角大小 | 32px | `rounded-[2rem]` |
| 顶部高光 | 1px | 渐变高光线，70% 透明度 | | 顶部高光 | 1px | 渐变高光线，70% 透明度 |
| 悬浮动画 | -4px | 上移 + 阴影增强 | | 悬浮动画 | -4px | 上移 + 阴影增强 |
--- ---
@@ -118,7 +123,9 @@
```vue ```vue
<!-- 完整毛玻璃卡片 --> <!-- 完整毛玻璃卡片 -->
<div class="glass-card glass-border glass-shadow glass-highlight rounded-[2rem] p-6"> <div
class="glass-card glass-border glass-shadow glass-highlight rounded-[2rem] p-6"
>
自定义内容 自定义内容
</div> </div>
``` ```
@@ -127,13 +134,13 @@
## 🌐 浏览器兼容性 ## 🌐 浏览器兼容性
| 浏览器 | 版本 | 支持状态 | | 浏览器 | 版本 | 支持状态 |
|--------|------|---------| | ------- | ---- | ----------------------- |
| Chrome | 76+ | ✅ 完全支持 | | Chrome | 76+ | ✅ 完全支持 |
| Safari | 9+ | ✅ 完全支持 | | Safari | 9+ | ✅ 完全支持 |
| Edge | 79+ | ✅ 完全支持 | | Edge | 79+ | ✅ 完全支持 |
| Firefox | 103+ | ⚠️ 需手动启用 | | Firefox | 103+ | ⚠️ 需手动启用 |
| IE 11 | - | ❌ 不支持（已停止支持） | | IE 11 | - | ❌ 不支持（已停止支持） |
**覆盖率：** ~98% 的用户 **覆盖率：** ~98% 的用户
@@ -143,11 +150,11 @@
## 📐 圆角规范 ## 📐 圆角规范
| 类名 | 像素值 | 用途 | | 类名 | 像素值 | 用途 |
|------|--------|------| | ---------------- | ------ | ---------------- |
| `rounded-[2rem]` | 32px | 主要卡片（默认） | | `rounded-[2rem]` | 32px | 主要卡片（默认） |
| `rounded-xl` | 12px | 小卡片、图标容器 | | `rounded-xl` | 12px | 小卡片、图标容器 |
| `rounded-lg` | 8px | 按钮、标签 | | `rounded-lg` | 8px | 按钮、标签 |
--- ---
@@ -177,6 +184,7 @@
### Q2: 性能下降明显？ ### Q2: 性能下降明显？
**解决方案：** **解决方案：**
1. 减少页面上的毛玻璃卡片数量 1. 减少页面上的毛玻璃卡片数量
2. 降低模糊半径至 16px 2. 降低模糊半径至 16px
3. 禁用悬浮效果 3. 禁用悬浮效果
@@ -225,4 +233,3 @@
**文档版本：** v1.0.0 **文档版本：** v1.0.0
**最后更新：** 2025-12-19 **最后更新：** 2025-12-19
**维护人员：** 前端开发团队 **维护人员：** 前端开发团队

12
apps/web-antd/src/components/glass-card/GlassCard.vue
View File

@@ -1,20 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
const props = defineProps<{ const props = defineProps<{
class?: string | string[] | Record<string, boolean>; class?: Record<string, boolean> | string | string[];
}>(); }>();
</script> </script>
<template> <template>
<div <div
:class="[ class="glass-card glass-border glass-shadow glass-highlight hover:glass-shadow-hover rounded-[2rem] text-card-foreground transition-all duration-300 ease-out hover:-translate-y-1"
'glass-card glass-border glass-shadow glass-highlight', :class="[props.class]"
'rounded-[2rem] text-card-foreground',
'transition-all duration-300 ease-out',
'hover:-translate-y-1 hover:glass-shadow-hover',
props.class,
]"
> >
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

1
apps/web-antd/src/components/glass-card/index.ts
View File

@@ -1,2 +1 @@
export { default as GlassCard } from './GlassCard.vue'; export { default as GlassCard } from './GlassCard.vue';

8
apps/web-antd/src/views/dashboard/workspace/index.vue
View File

@@ -492,7 +492,9 @@ function getColorClass(color: string, type: 'bg' | 'text') {
class="mt-1 flex items-center gap-3 text-xs text-slate-500" class="mt-1 flex items-center gap-3 text-xs text-slate-500"
> >
<span>{{ task.location }}</span> <span>{{ task.location }}</span>
<span v-if="task.createTime">• {{ task.createTime }}</span> <span v-if="task.createTime"
>• {{ task.createTime }}</span
>
<span v-if="task.assignee">• {{ task.assignee }}</span> <span v-if="task.assignee">• {{ task.assignee }}</span>
</div> </div>
</div> </div>
@@ -662,9 +664,7 @@ function getColorClass(color: string, type: 'bg' | 'text') {
class="text-xs text-white" class="text-xs text-white"
/> />
</span> </span>
<span <span class="text-[10px] font-bold uppercase tracking-widest text-white/90">AI Copilot</span>
class="text-[10px] font-bold uppercase tracking-widest text-white/90"
>AI Copilot</span>
</div> </div>
<h3 <h3
class="mb-4 whitespace-nowrap text-lg font-bold leading-tight text-white drop-shadow-sm" class="mb-4 whitespace-nowrap text-lg font-bold leading-tight text-white drop-shadow-sm"

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

@@ -16,11 +16,11 @@
html { html {
@apply text-foreground 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; font-variation-settings: normal;
line-height: 1.15; line-height: 1.15;
/* 浅色主题 - 添加线性渐变背景 */
background: linear-gradient(135deg, #fffcf5 0%, #fff8ed 50%, #fff0d4 100%);
text-size-adjust: 100%; text-size-adjust: 100%;
font-synthesis-weight: none; font-synthesis-weight: none;
scroll-behavior: smooth; scroll-behavior: smooth;
@@ -159,65 +159,70 @@
} }
/* ============= 毛玻璃卡片全局样式覆盖 ============= */ /* ============= 毛玻璃卡片全局样式覆盖 ============= */
/* 统一卡片毛玻璃效果 - 覆盖所有卡片类型（包括 scoped 样式） */ /* 统一卡片毛玻璃效果 - 覆盖所有卡片类型（包括 scoped 样式） */
.bg-card, .bg-card,
.ant-card, .ant-card,
div.ant-card, div.ant-card,
.device-card.ant-card { .device-card.ant-card {
position: relative !important;
background: rgb(var(--glass-surface)) !important; 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: 1px solid rgb(var(--glass-border)) !important;
border-radius: 2rem !important; border-radius: 2rem !important;
box-shadow: var(--glass-shadow) !important; box-shadow: var(--glass-shadow) !important;
backdrop-filter: blur(24px) !important;
backdrop-filter: blur(24px) !important;
transition: all 0.3s ease-out !important; transition: all 0.3s ease-out !important;
position: relative !important;
} }
/* 统一顶部高光效果 */ /* 统一顶部高光效果 */
.bg-card::before, .bg-card::before,
.ant-card::before, .ant-card::before,
div.ant-card::before, div.ant-card::before,
.device-card.ant-card::before { .device-card.ant-card::before {
content: '' !important;
position: absolute !important; position: absolute !important;
top: 0 !important; top: 0 !important;
left: 0 !important;
right: 0 !important; right: 0 !important;
height: 1px !important; left: 0 !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; z-index: 1 !important;
height: 1px !important;
pointer-events: none !important;
content: '' !important;
background: linear-gradient(
90deg,
transparent,
white,
transparent
) !important;
border-radius: 2rem 2rem 0 0 !important;
opacity: 0.7 !important;
} }
/* 统一悬浮效果 */ /* 统一悬浮效果 */
.bg-card:hover, .bg-card:hover,
.ant-card:hover, .ant-card:hover,
div.ant-card:hover, div.ant-card:hover,
.device-card.ant-card:hover { .device-card.ant-card:hover {
transform: translateY(-4px) !important;
box-shadow: var(--glass-shadow-hover) !important; box-shadow: var(--glass-shadow-hover) !important;
transform: translateY(-4px) !important;
} }
/* Card 子元素样式调整 */ /* Card 子元素样式调整 */
.ant-card-body { .ant-card-body {
position: relative !important;
z-index: 2 !important;
padding: 24px !important; padding: 24px !important;
position: relative !important;
z-index: 2 !important;
} }
.ant-card-head { .ant-card-head {
border-bottom: 1px solid rgb(var(--glass-border)) !important;
background: transparent !important;
position: relative !important; position: relative !important;
z-index: 2 !important; z-index: 2 !important;
background: transparent !important;
border-bottom: 1px solid rgb(var(--glass-border)) !important;
} }
/* ============= VxeTable/VxeGrid 全局毛玻璃样式覆盖 ============= */ /* ============= VxeTable/VxeGrid 全局毛玻璃样式覆盖 ============= */
/* VxeTable 主容器 */ /* VxeTable 主容器 */
.vxe-table, .vxe-table,
.vxe-grid, .vxe-grid,
@@ -225,69 +230,69 @@
div.vxe-grid { div.vxe-grid {
background: transparent !important; background: transparent !important;
} }
/* VxeTable 表格容器 */ /* VxeTable 表格容器 */
.vxe-table--main-wrapper, .vxe-table--main-wrapper,
div.vxe-table--main-wrapper { div.vxe-table--main-wrapper {
overflow: hidden !important;
background: rgb(var(--glass-surface)) !important; 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: 1px solid rgb(var(--glass-border)) !important;
border-radius: 1.5rem !important; border-radius: 1.5rem !important;
overflow: hidden !important; backdrop-filter: blur(24px) !important;
backdrop-filter: blur(24px) !important;
} }
/* 表头样式 */ /* 表头样式 */
.vxe-table--header-wrapper, .vxe-table--header-wrapper,
div.vxe-table--header-wrapper { div.vxe-table--header-wrapper {
background: rgba(255, 255, 255, 0.3) !important; background: rgb(255 255 255 / 30%) !important;
backdrop-filter: blur(16px) !important;
backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
} }
.vxe-header--column, .vxe-header--column,
th.vxe-header--column { th.vxe-header--column {
background: transparent !important; background: transparent !important;
border-bottom: 1px solid rgb(var(--glass-border)) !important; border-bottom: 1px solid rgb(var(--glass-border)) !important;
} }
/* 表格主体 */ /* 表格主体 */
.vxe-table--body-wrapper, .vxe-table--body-wrapper,
div.vxe-table--body-wrapper { div.vxe-table--body-wrapper {
background: transparent !important; background: transparent !important;
} }
.vxe-body--row, .vxe-body--row,
tr.vxe-body--row { tr.vxe-body--row {
background: transparent !important; background: transparent !important;
} }
.vxe-body--row:hover, .vxe-body--row:hover,
tr.vxe-body--row:hover { tr.vxe-body--row:hover {
background: rgba(255, 255, 255, 0.2) !important; background: rgb(255 255 255 / 20%) !important;
} }
/* 表格边框 */ /* 表格边框 */
.vxe-table--border-line { .vxe-table--border-line {
border-color: rgb(var(--glass-border)) !important; border-color: rgb(var(--glass-border)) !important;
} }
.vxe-body--column, .vxe-body--column,
.vxe-header--column, .vxe-header--column,
.vxe-footer--column, .vxe-footer--column,
td.vxe-body--column, td.vxe-body--column,
th.vxe-header--column, th.vxe-header--column,
td.vxe-footer--column { td.vxe-footer--column {
border-color: rgba(255, 255, 255, 0.1) !important; border-color: rgb(255 255 255 / 10%) !important;
} }
/* 工具栏 */ /* 工具栏 */
.vxe-toolbar, .vxe-toolbar,
div.vxe-toolbar { div.vxe-toolbar {
background: transparent !important; background: transparent !important;
border-bottom: 1px solid rgb(var(--glass-border)) !important; border-bottom: 1px solid rgb(var(--glass-border)) !important;
} }
/* 分页器 */ /* 分页器 */
.vxe-pager, .vxe-pager,
div.vxe-pager { div.vxe-pager {
@@ -296,49 +301,49 @@
} }
/* ============= 毛玻璃卡片工具类 ============= */ /* ============= 毛玻璃卡片工具类 ============= */
/* 玻璃表面背景 + 毛玻璃模糊 */ /* 玻璃表面背景 + 毛玻璃模糊 */
.glass-card { .glass-card {
background: rgb(var(--glass-surface)); background: rgb(var(--glass-surface));
backdrop-filter: blur(24px); backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
} }
/* 玻璃边框 */ /* 玻璃边框 */
.glass-border { .glass-border {
border: 1px solid rgb(var(--glass-border)); border: 1px solid rgb(var(--glass-border));
} }
/* 玻璃阴影 */ /* 玻璃阴影 */
.glass-shadow { .glass-shadow {
box-shadow: var(--glass-shadow); box-shadow: var(--glass-shadow);
} }
/* 玻璃悬浮阴影 */ /* 玻璃悬浮阴影 */
.glass-shadow-hover { .glass-shadow-hover {
box-shadow: var(--glass-shadow-hover); box-shadow: var(--glass-shadow-hover);
} }
/* 软阴影 */ /* 软阴影 */
.shadow-soft { .shadow-soft {
box-shadow: var(--shadow-soft); box-shadow: var(--shadow-soft);
} }
/* 顶部高光效果 - 使用伪元素 */ /* 顶部高光效果 - 使用伪元素 */
.glass-highlight { .glass-highlight {
position: relative; position: relative;
} }
.glass-highlight::before { .glass-highlight::before {
content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
right: 0; right: 0;
left: 0;
height: 1px; height: 1px;
pointer-events: none;
content: '';
background: linear-gradient(90deg, transparent, white, transparent); background: linear-gradient(90deg, transparent, white, transparent);
opacity: 0.7; opacity: 0.7;
pointer-events: none;
} }
} }

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

@@ -108,13 +108,13 @@
--tabbar: 222.34deg 10.43% 12.27%; --tabbar: 222.34deg 10.43% 12.27%;
/* ============= 毛玻璃卡片系统 (深色模式适配) ============= */ /* ============= 毛玻璃卡片系统 (深色模式适配) ============= */
/* 深色模式毛玻璃 - 更低的透明度 */ /* 深色模式毛玻璃 - 更低的透明度 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
color-scheme: dark; color-scheme: dark;
} }
@@ -148,9 +148,9 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }
.dark[data-theme='pink'], .dark[data-theme='pink'],
@@ -182,9 +182,9 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }
.dark[data-theme='rose'], .dark[data-theme='rose'],
@@ -216,9 +216,9 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }
.dark[data-theme='sky-blue'], .dark[data-theme='sky-blue'],
@@ -250,9 +250,9 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }
.dark[data-theme='deep-blue'], .dark[data-theme='deep-blue'],
@@ -284,9 +284,9 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }
.dark[data-theme='green'], .dark[data-theme='green'],
@@ -318,9 +318,9 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }
.dark[data-theme='deep-green'], .dark[data-theme='deep-green'],
@@ -352,9 +352,9 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }
.dark[data-theme='orange'], .dark[data-theme='orange'],
@@ -386,9 +386,9 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }
.dark[data-theme='yellow'], .dark[data-theme='yellow'],
@@ -420,9 +420,9 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }
.dark[data-theme='zinc'], .dark[data-theme='zinc'],
@@ -454,9 +454,9 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }
.dark[data-theme='neutral'], .dark[data-theme='neutral'],
@@ -488,9 +488,9 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }
.dark[data-theme='slate'], .dark[data-theme='slate'],
@@ -522,9 +522,9 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }
.dark[data-theme='gray'], .dark[data-theme='gray'],
@@ -556,7 +556,7 @@
/* 毛玻璃卡片系统 */ /* 毛玻璃卡片系统 */
--glass-surface: 255 255 255 / 0.08; --glass-surface: 255 255 255 / 0.08;
--glass-border: 255 255 255 / 0.1; --glass-border: 255 255 255 / 0.1;
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3); --glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 0.4); --glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 0.2); --shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
} }

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

@@ -88,21 +88,21 @@
/* ============= custom ============= */ /* ============= custom ============= */
/* ============= 毛玻璃卡片系统 ============= */ /* ============= 毛玻璃卡片系统 ============= */
/* 玻璃表面 - 45% 透明度白色 */ /* 玻璃表面 - 45% 透明度白色 */
--glass-surface: 255 255 255 / 0.45; --glass-surface: 255 255 255 / 0.45;
/* 玻璃边框 - 60% 透明度白色 */ /* 玻璃边框 - 60% 透明度白色 */
--glass-border: 255 255 255 / 0.6; --glass-border: 255 255 255 / 0.6;
/* 玻璃阴影 */ /* 玻璃阴影 */
--glass-shadow: 0 8px 32px 0 rgb(31 38 135 / 0.05); --glass-shadow: 0 8px 32px 0 rgb(31 38 135 / 5%);
/* 玻璃悬浮阴影 */ /* 玻璃悬浮阴影 */
--glass-shadow-hover: 0 16px 48px 0 rgb(31 38 135 / 0.08); --glass-shadow-hover: 0 16px 48px 0 rgb(31 38 135 / 8%);
/* 软阴影 (通用) */ /* 软阴影 (通用) */
--shadow-soft: 0 4px 16px 0 rgb(31 38 135 / 0.03); --shadow-soft: 0 4px 16px 0 rgb(31 38 135 / 3%);
/* 遮罩颜色 */ /* 遮罩颜色 */
--overlay: 0 0% 0% / 45%; --overlay: 0 0% 0% / 45%;
@@ -114,15 +114,15 @@
/* =============component & UI============= */ /* =============component & UI============= */
/* menu */ /* menu */
--sidebar: 37 40% 98%; /* 微妙橙色调 - 浅奶黄色 */ --sidebar: 37 40% 98%; /* 微妙橙色调 - 浅奶黄色 */
--sidebar-deep: 37 45% 97%; /* 微妙橙色调 - 稍深 */ --sidebar-deep: 37 45% 97%; /* 微妙橙色调 - 稍深 */
--menu: var(--sidebar); --menu: var(--sidebar);
/* header */ /* header */
--header: 37 40% 98%; /* 微妙橙色调 - 与侧边栏一致 */ --header: 37 40% 98%; /* 微妙橙色调 - 与侧边栏一致 */
/* tabbar */ /* tabbar */
--tabbar: 37 40% 98%; /* 微妙橙色调 - 与侧边栏、顶部栏一致 */ --tabbar: 37 40% 98%; /* 微妙橙色调 - 与侧边栏、顶部栏一致 */
accent-color: var(--primary); accent-color: var(--primary);
color-scheme: light; color-scheme: light;

6
packages/@core/ui-kit/layout-ui/src/vben-layout.vue
View File

@@ -486,11 +486,11 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
<div class="vben-layout-gradient pointer-events-none fixed inset-0"> <div class="vben-layout-gradient pointer-events-none fixed inset-0">
<!-- 左上角橙色光晕 --> <!-- 左上角橙色光晕 -->
<div <div
class="bg-orange-300 absolute -left-[10%] -top-[20%] size-[500px] rounded-full opacity-10 blur-[120px]" class="absolute -left-[10%] -top-[20%] size-[500px] rounded-full bg-orange-300 opacity-10 blur-[120px]"
></div> ></div>
<!-- 右下角黄色光晕 --> <!-- 右下角黄色光晕 -->
<div <div
class="bg-yellow-200 absolute -bottom-[10%] -right-[5%] size-[600px] rounded-full opacity-30 blur-[100px]" class="absolute -bottom-[10%] -right-[5%] size-[600px] rounded-full bg-yellow-200 opacity-30 blur-[100px]"
></div> ></div>
</div> </div>
@@ -631,8 +631,8 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
<style> <style>
/* 橙色渐变光晕背景 - 只在浅色主题下显示 */ /* 橙色渐变光晕背景 - 只在浅色主题下显示 */
.vben-layout-gradient { .vben-layout-gradient {
display: block;
z-index: 0; z-index: 0;
display: block;
} }
/* 深色主题下隐藏 */ /* 深色主题下隐藏 */

2
packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue
View File

@@ -13,7 +13,7 @@ const props = defineProps<{
'glass-card glass-border glass-shadow glass-highlight', 'glass-card glass-border glass-shadow glass-highlight',
'rounded-[2rem] text-card-foreground', 'rounded-[2rem] text-card-foreground',
'transition-all duration-300 ease-out', 'transition-all duration-300 ease-out',
'hover:-translate-y-1 hover:glass-shadow-hover', 'hover:glass-shadow-hover hover:-translate-y-1',
props.class, props.class,
) )
" "

3
packages/@core/ui-kit/shadcn-ui/src/ui/glass-card/GlassCard.vue
View File

@@ -13,7 +13,7 @@ const props = defineProps<{
'glass-card glass-border glass-shadow glass-highlight', 'glass-card glass-border glass-shadow glass-highlight',
'rounded-[2rem] text-card-foreground', 'rounded-[2rem] text-card-foreground',
'transition-all duration-300 ease-out', 'transition-all duration-300 ease-out',
'hover:-translate-y-1 hover:glass-shadow-hover', 'hover:glass-shadow-hover hover:-translate-y-1',
props.class, props.class,
) )
" "
@@ -21,4 +21,3 @@ const props = defineProps<{
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

1
packages/@core/ui-kit/shadcn-ui/src/ui/glass-card/index.ts
View File

@@ -1,2 +1 @@
export { default as GlassCard } from './GlassCard.vue'; export { default as GlassCard } from './GlassCard.vue';

2
packages/effects/common-ui/src/components/index.ts
View File

@@ -21,6 +21,7 @@ export * from '@vben-core/popup-ui';
// 给文档用 // 给文档用
export { export {
GlassCard,
VbenAvatar, VbenAvatar,
VbenButton, VbenButton,
VbenButtonGroup, VbenButtonGroup,
@@ -34,7 +35,6 @@ export {
VbenPinInput, VbenPinInput,
VbenSelect, VbenSelect,
VbenSpinner, VbenSpinner,
GlassCard,
} from '@vben-core/shadcn-ui'; } from '@vben-core/shadcn-ui';
export type { FlattenedItem } from '@vben-core/shadcn-ui'; export type { FlattenedItem } from '@vben-core/shadcn-ui';