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

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

@@ -16,12 +16,14 @@
**文件位置：** `packages/@core/base/design/src/design-tokens/`
#### 新增变量（浅色主题）
- `--glass-surface`: 45% 透明度白色背景
- `--glass-border`: 60% 透明度白色边框
- `--glass-shadow`: 玻璃阴影效果
- `--glass-shadow-hover`: 悬浮时阴影增强
#### 深色主题适配
- 所有 17 个主题变体均已适配
- 深色模式下自动降低透明度（8% 背景，10% 边框）
@@ -30,6 +32,7 @@
**文件位置：** `packages/@core/base/design/src/css/global.css`
#### 新增工具类
- `.glass-card`: 基础毛玻璃卡片（32px 圆角）
- `.glass-border`: 玻璃边框
- `.glass-shadow`: 玻璃阴影
@@ -41,6 +44,7 @@
**文件位置：** `packages/@core/ui-kit/shadcn-ui/src/ui/card/Card.vue`
#### 自动应用特性
- ✅ 超大圆角：32px (`rounded-[2rem]`)
- ✅ 毛玻璃背景：45% 透明度 + 24px 模糊
- ✅ 玻璃边框：60% 透明度
@@ -49,6 +53,7 @@
- ✅ 流畅过渡：300ms ease-out
**使用方式：**
```vue
<!-- 自动应用，无需修改代码 -->
<Card>
@@ -66,7 +71,7 @@
### 性能指标
| 指标 | 影响 | 状态 |
|------|------|------|
| ------------------ | --------- | --------- |
| 首次绘制 (FCP) | +8% | ✅ 优秀 |
| 最大内容绘制 (LCP) | +11% | ✅ 优秀 |
| 交互时间 (TTI) | +5% | ✅ 优秀 |
@@ -85,7 +90,7 @@
## 🎨 视觉特性
| 特性 | 值 | 说明 |
|------|-----|------|
| ---------- | ---- | ------------------------------------ |
| 背景透明度 | 45% | 浅色主题 `rgba(255, 255, 255, 0.45)` |
| 模糊半径 | 24px | `backdrop-filter: blur(24px)` |
| 边框透明度 | 60% | `rgba(255, 255, 255, 0.6)` |
@@ -118,7 +123,9 @@
```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>
```
@@ -128,7 +135,7 @@
## 🌐 浏览器兼容性
| 浏览器 | 版本 | 支持状态 |
|--------|------|---------|
| ------- | ---- | ----------------------- |
| Chrome | 76+ | ✅ 完全支持 |
| Safari | 9+ | ✅ 完全支持 |
| Edge | 79+ | ✅ 完全支持 |
@@ -144,7 +151,7 @@
## 📐 圆角规范
| 类名 | 像素值 | 用途 |
|------|--------|------|
| ---------------- | ------ | ---------------- |
| `rounded-[2rem]` | 32px | 主要卡片（默认） |
| `rounded-xl` | 12px | 小卡片、图标容器 |
| `rounded-lg` | 8px | 按钮、标签 |
@@ -177,6 +184,7 @@
### Q2: 性能下降明显？
**解决方案：**
1. 减少页面上的毛玻璃卡片数量
2. 降低模糊半径至 16px
3. 禁用悬浮效果
@@ -225,4 +233,3 @@
**文档版本：** v1.0.0
**最后更新：** 2025-12-19
**维护人员：** 前端开发团队

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

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

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

@@ -1,2 +1 @@
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"
>
<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>
</div>
</div>
@@ -662,9 +664,7 @@ function getColorClass(color: string, type: 'bg' | 'text') {
class="text-xs text-white"
/>
</span>
<span
class="text-[10px] font-bold uppercase tracking-widest text-white/90"
>AI Copilot</span>
<span class="text-[10px] font-bold uppercase tracking-widest text-white/90">AI Copilot</span>
</div>
<h3
class="mb-4 whitespace-nowrap text-lg font-bold leading-tight text-white drop-shadow-sm"

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

@@ -16,11 +16,11 @@
html {
@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;
/* 浅色主题 - 添加线性渐变背景 */
background: linear-gradient(135deg, #fffcf5 0%, #fff8ed 50%, #fff0d4 100%);
text-size-adjust: 100%;
font-synthesis-weight: none;
scroll-behavior: smooth;
@@ -165,14 +165,14 @@
.ant-card,
div.ant-card,
.device-card.ant-card {
position: relative !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-radius: 2rem !important;
box-shadow: var(--glass-shadow) !important;
backdrop-filter: blur(24px) !important;
backdrop-filter: blur(24px) !important;
transition: all 0.3s ease-out !important;
position: relative !important;
}
/* 统一顶部高光效果 */
@@ -180,17 +180,22 @@
.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;
left: 0 !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;
}
/* 统一悬浮效果 */
@@ -198,22 +203,22 @@
.ant-card:hover,
div.ant-card:hover,
.device-card.ant-card:hover {
transform: translateY(-4px) !important;
box-shadow: var(--glass-shadow-hover) !important;
transform: translateY(-4px) !important;
}
/* Card 子元素样式调整 */
.ant-card-body {
padding: 24px !important;
position: relative !important;
z-index: 2 !important;
padding: 24px !important;
}
.ant-card-head {
border-bottom: 1px solid rgb(var(--glass-border)) !important;
background: transparent !important;
position: relative !important;
z-index: 2 !important;
background: transparent !important;
border-bottom: 1px solid rgb(var(--glass-border)) !important;
}
/* ============= VxeTable/VxeGrid 全局毛玻璃样式覆盖 ============= */
@@ -229,20 +234,20 @@
/* VxeTable 表格容器 */
.vxe-table--main-wrapper,
div.vxe-table--main-wrapper {
overflow: hidden !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-radius: 1.5rem !important;
overflow: hidden !important;
backdrop-filter: blur(24px) !important;
backdrop-filter: blur(24px) !important;
}
/* 表头样式 */
.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;
-webkit-backdrop-filter: blur(16px) !important;
}
.vxe-header--column,
@@ -264,7 +269,7 @@
.vxe-body--row:hover,
tr.vxe-body--row:hover {
background: rgba(255, 255, 255, 0.2) !important;
background: rgb(255 255 255 / 20%) !important;
}
/* 表格边框 */
@@ -278,7 +283,7 @@
td.vxe-body--column,
th.vxe-header--column,
td.vxe-footer--column {
border-color: rgba(255, 255, 255, 0.1) !important;
border-color: rgb(255 255 255 / 10%) !important;
}
/* 工具栏 */
@@ -301,7 +306,7 @@
.glass-card {
background: rgb(var(--glass-surface));
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
}
/* 玻璃边框 */
@@ -330,15 +335,15 @@
}
.glass-highlight::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
left: 0;
height: 1px;
pointer-events: none;
content: '';
background: linear-gradient(90deg, transparent, white, transparent);
opacity: 0.7;
pointer-events: none;
}
}

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

@@ -112,9 +112,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
color-scheme: dark;
}
@@ -148,9 +148,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}
.dark[data-theme='pink'],
@@ -182,9 +182,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}
.dark[data-theme='rose'],
@@ -216,9 +216,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}
.dark[data-theme='sky-blue'],
@@ -250,9 +250,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}
.dark[data-theme='deep-blue'],
@@ -284,9 +284,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}
.dark[data-theme='green'],
@@ -318,9 +318,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}
.dark[data-theme='deep-green'],
@@ -352,9 +352,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}
.dark[data-theme='orange'],
@@ -386,9 +386,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}
.dark[data-theme='yellow'],
@@ -420,9 +420,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}
.dark[data-theme='zinc'],
@@ -454,9 +454,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}
.dark[data-theme='neutral'],
@@ -488,9 +488,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}
.dark[data-theme='slate'],
@@ -522,9 +522,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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}
.dark[data-theme='gray'],
@@ -556,7 +556,7 @@
/* 毛玻璃卡片系统 */
--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);
--glass-shadow: 0 8px 32px 0 rgb(0 0 0 / 30%);
--glass-shadow-hover: 0 16px 48px 0 rgb(0 0 0 / 40%);
--shadow-soft: 0 4px 16px 0 rgb(0 0 0 / 20%);
}

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

@@ -96,13 +96,13 @@
--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%;

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="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
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>
@@ -631,8 +631,8 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
<style>
/* 橙色渐变光晕背景 - 只在浅色主题下显示 */
.vben-layout-gradient {
display: block;
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',
'rounded-[2rem] text-card-foreground',
'transition-all duration-300 ease-out',
'hover:-translate-y-1 hover:glass-shadow-hover',
'hover:glass-shadow-hover hover:-translate-y-1',
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',
'rounded-[2rem] text-card-foreground',
'transition-all duration-300 ease-out',
'hover:-translate-y-1 hover:glass-shadow-hover',
'hover:glass-shadow-hover hover:-translate-y-1',
props.class,
)
"
@@ -21,4 +21,3 @@ const props = defineProps<{
<slot></slot>
</div>
</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';

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

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