Skip to content

feat(组件): 支持组件液态玻璃效果 #227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
qianmoQ merged 10 commits into from
Dec 28, 2025
Merged

feat(组件): 支持组件液态玻璃效果 #227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f720456
feat(组件): 支持 Skeleton 液态玻璃效果
qianmoQ Dec 28, 2025
2451448
feat(组件): 支持 Global Footer 液态玻璃效果
qianmoQ Dec 28, 2025
83ef58d
feat(组件): 支持 Toolbar Footer 液态玻璃效果
qianmoQ Dec 28, 2025
dc87a00
feat(组件): 支持 Modal 液态玻璃效果
qianmoQ Dec 28, 2025
0cb54b5
feat(组件): 支持 Tooltip 液态玻璃效果
qianmoQ Dec 28, 2025
c985c52
feat(组件): 支持 Progress 液态玻璃效果
qianmoQ Dec 28, 2025
61a841c
feat(组件): 支持 Drawer 液态玻璃效果
qianmoQ Dec 28, 2025
7fde614
fix(抽屉): 修复顶部空白问题
qianmoQ Dec 28, 2025
3ce9e11
feat(组件): 支持 Message 液态玻璃效果
qianmoQ Dec 28, 2025
2b157a8
feat(组件): 支持 Table 液态玻璃效果
qianmoQ Dec 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 111 additions & 0 deletions docs/components/layout/global-footer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,82 @@ const socials = [

:::

## 液态玻璃效果 (glass)

::: raw

<CodeRunner title="液态玻璃效果 (glass)">
<div :class="['p-8 rounded-lg', darkMode ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
<div :class="['rounded-lg overflow-hidden', darkMode ? 'bg-gray-800/50' : 'bg-white/50']">
<ShadcnGlobalFooter
glass
:dark="darkMode"
company="Your Company"
description="为开发者提供优质的组件库和工具"
:links="glassLinks"
:socials="glassSocials"
/>
</div>
</div>
</CodeRunner>

:::

::: details 查看代码

```vue
<template>
<div class="p-8 rounded-lg bg-gradient-to-r from-blue-400 to-indigo-400">
<div class="rounded-lg overflow-hidden bg-white/50">
<ShadcnGlobalFooter
glass
company="Your Company"
description="为开发者提供优质的组件库和工具"
:links="footerLinks"
:socials="footerSocials"
/>
</div>
</div>
</template>

<script setup lang="ts">
const footerLinks = [
{
title: '产品',
links: [
{ label: '功能', href: '#', icon: 'lucide:sparkles' },
{ label: '定价', href: '#', icon: 'lucide:dollar-sign' },
{ label: '更新日志', href: '#', icon: 'lucide:history' }
]
},
{
title: '资源',
links: [
{ label: '文档', href: '#', icon: 'lucide:book-open' },
{ label: 'API', href: '#', icon: 'lucide:code' },
{ label: '博客', href: '#', icon: 'lucide:newspaper' }
]
},
{
title: '社区',
links: [
{ label: 'GitHub', href: 'https://github.com', icon: 'lucide:github', external: true },
{ label: 'Discord', href: '#', icon: 'lucide:message-circle' },
{ label: '论坛', href: '#', icon: 'lucide:users' }
]
}
]

const footerSocials = [
{ label: 'GitHub', href: 'https://github.com', icon: 'lucide:github' },
{ label: 'Twitter', href: 'https://twitter.com', icon: 'lucide:twitter' },
{ label: 'Discord', href: '#', icon: 'lucide:message-circle' }
]
</script>
```

:::

## 全局页脚 (Global Footer) 属性

<ApiTable title="全局页脚 (Global Footer) 属性"
Expand All @@ -67,6 +143,8 @@ const socials = [
['description', '描述', 'string', 'The Devlive Software Foundation is a community of developers who are passionate about creating innovative software solutions.'],
['links', '链接组，3列', 'array', '\[\]'],
['socials', '社交链接', 'array', '\[\]'],
['dark', '是否为暗黑模式', 'boolean', 'false'],
['glass', '是否启用液态玻璃效果', 'boolean', 'false'],
]">
</ApiTable>

Expand Down Expand Up @@ -109,6 +187,39 @@ const socials = [
{ icon: 'Github', href: 'https://github.com/devlive-community', label: 'GitHub' }
]

const glassLinks = [
{
title: '产品',
links: [
{ label: '功能', href: '#', icon: 'lucide:sparkles' },
{ label: '定价', href: '#', icon: 'lucide:dollar-sign' },
{ label: '更新日志', href: '#', icon: 'lucide:history' }
]
},
{
title: '资源',
links: [
{ label: '文档', href: '#', icon: 'lucide:book-open' },
{ label: 'API', href: '#', icon: 'lucide:code' },
{ label: '博客', href: '#', icon: 'lucide:newspaper' }
]
},
{
title: '社区',
links: [
{ label: 'GitHub', href: 'https://github.com', icon: 'lucide:github', external: true },
{ label: 'Discord', href: '#', icon: 'lucide:message-circle' },
{ label: '论坛', href: '#', icon: 'lucide:users' }
]
}
]

const glassSocials = [
{ label: 'GitHub', href: 'https://github.com', icon: 'lucide:github' },
{ label: 'Twitter', href: 'https://twitter.com', icon: 'lucide:twitter' },
{ label: 'Discord', href: '#', icon: 'lucide:message-circle' }
]

import { useData } from 'vitepress'
import { computed } from 'vue'

Expand Down
69 changes: 69 additions & 0 deletions docs/components/layout/skeleton.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,71 @@ title: 骨架屏 (Skeleton)

:::

## 液态玻璃效果 (glass)

<CodeRunner title="液态玻璃效果 (glass)">
<div :class="['p-8 rounded-lg', darkMode ? 'bg-gradient-to-r from-purple-900 to-pink-900' : 'bg-gradient-to-r from-purple-400 to-pink-400']">
<div :class="['p-6 rounded-lg space-y-6', darkMode ? 'bg-gray-800/50' : 'bg-white/50']">
<div>
<h4 :class="['text-sm font-medium mb-3', darkMode ? 'text-gray-300' : 'text-gray-700']">基础骨架屏</h4>
<ShadcnSkeleton glass :dark="darkMode" />
</div>
<div>
<h4 :class="['text-sm font-medium mb-3', darkMode ? 'text-gray-300' : 'text-gray-700']">带动画效果</h4>
<ShadcnSkeleton glass animation :dark="darkMode" />
</div>
<div>
<h4 :class="['text-sm font-medium mb-3', darkMode ? 'text-gray-300' : 'text-gray-700']">不同形状</h4>
<div class="flex gap-4 items-center">
<ShadcnSkeletonItem type="circle" size="large" glass :dark="darkMode"/>
<ShadcnSkeletonItem type="square" size="large" glass :dark="darkMode"/>
<ShadcnSkeletonItem type="rect" width="200px" size="large" glass :dark="darkMode"/>
</div>
</div>
<div>
<h4 :class="['text-sm font-medium mb-3', darkMode ? 'text-gray-300' : 'text-gray-700']">图片骨架屏</h4>
<ShadcnSkeletonItem type="image" size="large" glass animation :dark="darkMode"/>
</div>
</div>
</div>
</CodeRunner>

::: details 查看代码

```vue
<template>
<div :class="['p-8 rounded-lg', 'bg-gradient-to-r from-purple-400 to-pink-400']">
<div :class="['p-6 rounded-lg space-y-6', 'bg-white/50']">
<div>
<h4 class="text-sm font-medium mb-3 text-gray-700">基础骨架屏</h4>
<ShadcnSkeleton glass />
</div>
<div>
<h4 class="text-sm font-medium mb-3 text-gray-700">带动画效果</h4>
<ShadcnSkeleton glass animation />
</div>
<div>
<h4 class="text-sm font-medium mb-3 text-gray-700">不同形状</h4>
<div class="flex gap-4 items-center">
<ShadcnSkeletonItem type="circle" size="large" glass />
<ShadcnSkeletonItem type="square" size="large" glass />
<ShadcnSkeletonItem type="rect" width="200px" size="large" glass />
</div>
</div>
<div>
<h4 class="text-sm font-medium mb-3 text-gray-700">图片骨架屏</h4>
<ShadcnSkeletonItem type="image" size="large" glass animation />
</div>
</div>
</div>
</template>

<script setup lang="ts">
</script>
```

:::

## 骨架屏 (Skeleton) 属性

<ApiTable title="骨架屏 (Skeleton) 属性"
Expand All @@ -127,6 +192,8 @@ title: 骨架屏 (Skeleton)
['cols', '骨架的列数', 'number | string', '1'],
['animation', '是否显示动画', 'boolean', 'false'],
['paragraph', '骨架的排版', '{ rows: 5, width: \[100, 200, 300px, 50%, 62%\] }', '-'],
['dark', '是否为暗黑模式', 'boolean', 'false'],
['glass', '是否启用液态玻璃效果', 'boolean', 'false'],
]">
</ApiTable>

Expand All @@ -139,6 +206,8 @@ title: 骨架屏 (Skeleton)
['width', '节点的宽度', 'Number | String', '-', '-'],
['type', '节点的类型', 'Enum', 'rect', 'circle | square | rect | image'],
['size', '节点的尺寸', 'Enum', 'default', 'small | default | large'],
['dark', '是否为暗黑模式', 'boolean', 'false', '-'],
['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'],
]">
</ApiTable>

Expand Down
49 changes: 49 additions & 0 deletions docs/components/layout/toolbar-footer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,53 @@ title: 工具栏页脚 (Toolbar Footer)

:::

## 液态玻璃效果 (glass)

::: raw

<CodeRunner title="液态玻璃效果 (glass)">
<div :class="['p-8 rounded-lg', darkMode ? 'bg-gradient-to-r from-green-900 to-teal-900' : 'bg-gradient-to-r from-green-400 to-teal-400']">
<div :class="['rounded-lg relative h-48 overflow-hidden', darkMode ? 'bg-gray-800/50' : 'bg-white/50']">
<div :class="['p-4', darkMode ? 'text-gray-300' : 'text-gray-700']">
<p class="text-sm">液态玻璃效果工具栏</p>
<p class="text-sm mt-2">底部显示带有玻璃效果的工具栏</p>
</div>
<ShadcnToolbarFooter glass :dark="darkMode" :hide-on-scroll="false">
<template #left>
<span class="text-sm">液态玻璃效果工具栏</span>
</template>
</ShadcnToolbarFooter>
</div>
</div>
</CodeRunner>

:::

::: details 查看代码

```vue
<template>
<div class="p-8 rounded-lg bg-gradient-to-r from-green-400 to-teal-400">
<div class="rounded-lg relative h-48 overflow-hidden bg-white/50">
<div class="p-4 text-gray-700">
<p class="text-sm">液态玻璃效果工具栏</p>
<p class="text-sm mt-2">底部显示带有玻璃效果的工具栏</p>
</div>
<ShadcnToolbarFooter glass :hide-on-scroll="false">
<template #left>
<span class="text-sm">液态玻璃效果工具栏</span>
</template>
</ShadcnToolbarFooter>
</div>
</div>
</template>

<script setup lang="ts">
</script>
```

:::

## 工具栏页脚 (Toolbar Footer) 属性

<ApiTable title="工具栏页脚 (Toolbar Footer) 属性"
Expand All @@ -126,6 +173,8 @@ title: 工具栏页脚 (Toolbar Footer)
['hideOnScroll', '是否在滚动时隐藏', 'boolean', 'true'],
['scrollStopDelay', '滚动停止延迟', 'number', '600'],
['fullWidth', '是否全宽', 'boolean', 'false'],
['dark', '是否为暗黑模式', 'boolean', 'false'],
['glass', '是否启用液态玻璃效果', 'boolean', 'false'],
]">
</ApiTable>

Expand Down
57 changes: 57 additions & 0 deletions docs/components/view/drawer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,60 @@ const heightValue = ref(false)

:::

## 液态玻璃效果 (glass)

<CodeRunner title="液态玻璃效果 (glass)">
<ShadcnButton @click="glassValue = !glassValue" :dark="darkMode">打开液态玻璃抽屉</ShadcnButton>
<ShadcnDrawer v-model="glassValue" glass :dark="darkMode" title="液态玻璃效果" width="400px">
<div class="space-y-4">
<p :class="['text-sm', darkMode ? 'text-gray-300' : 'text-gray-700']">
这是一个带有液态玻璃效果的抽屉组件。
</p>
<p :class="['text-sm', darkMode ? 'text-gray-300' : 'text-gray-700']">
背景具有模糊和半透明特性，同时保持良好的可读性。
</p>
</div>
<template #footer>
<div class="flex gap-2 justify-end">
<ShadcnButton @click="glassValue = false" :dark="darkMode">关闭</ShadcnButton>
<ShadcnButton type="primary" @click="glassValue = false" :dark="darkMode">确定</ShadcnButton>
</div>
</template>
</ShadcnDrawer>
</CodeRunner>

::: details 查看代码

```vue
<template>
<ShadcnButton @click="drawer = !drawer">打开液态玻璃抽屉</ShadcnButton>
<ShadcnDrawer v-model="drawer" glass title="液态玻璃效果" width="400px">
<div class="space-y-4">
<p class="text-sm text-gray-700">
这是一个带有液态玻璃效果的抽屉组件。
</p>
<p class="text-sm text-gray-700">
背景具有模糊和半透明特性，同时保持良好的可读性。
</p>
</div>
<template #footer>
<div class="flex gap-2 justify-end">
<ShadcnButton @click="drawer = false">关闭</ShadcnButton>
<ShadcnButton type="primary" @click="drawer = false">确定</ShadcnButton>
</div>
</template>
</ShadcnDrawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const drawer = ref(false);
</script>
```

:::

## 抽屉 (Drawer) 属性

<ApiTable title="抽屉 (Drawer) 属性"
Expand All @@ -196,6 +250,8 @@ const heightValue = ref(false)
['position', '抽屉位置', 'string', 'bottom', '-', 'top, bottom, left, right'],
['width', '组件的宽度', 'string | number', '300', 'position = left || right', '-'],
['height', '组件的高度', 'string | number', '300', 'position = top || bottom', '-'],
['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-', '-'],
['dark', '是否启用暗黑模式', 'boolean', 'false', '-', '-'],
]">
</ApiTable>

Expand Down Expand Up @@ -237,4 +293,5 @@ const leftValue = ref(false)
const rightValue = ref(false)
const widthValue = ref(false)
const heightValue = ref(false)
const glassValue = ref(false)
</script>
Loading