From f72045643109b0e5d8e2371de884bb3ffbd3065d Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 28 Dec 2025 19:56:46 +0800
Subject: [PATCH 01/10] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Skeleton=20=E6=B6=B2=E6=80=81=E7=8E=BB=E7=92=83?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/layout/skeleton.md        | 69 ++++++++++++++++++++
 playground/src/example/skeleton/glass.vue | 77 +++++++++++++++++++++++
 src/App.vue                               | 28 ++++-----
 src/ui/skeleton/ShadcnSkeleton.vue        |  6 +-
 src/ui/skeleton/ShadcnSkeletonItem.vue    |  8 ++-
 src/ui/skeleton/types.ts                  |  2 +
 6 files changed, 172 insertions(+), 18 deletions(-)
 create mode 100644 playground/src/example/skeleton/glass.vue

diff --git a/docs/components/layout/skeleton.md b/docs/components/layout/skeleton.md
index 72961034..a8208641 100644
--- a/docs/components/layout/skeleton.md
+++ b/docs/components/layout/skeleton.md
@@ -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) 属性"
@@ -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>
 
@@ -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>
 
diff --git a/playground/src/example/skeleton/glass.vue b/playground/src/example/skeleton/glass.vue
new file mode 100644
index 00000000..747dcb91
--- /dev/null
+++ b/playground/src/example/skeleton/glass.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="space-y-6 p-6">
+    <div>
+      <h3 class="text-lg font-semibold mb-4">液态玻璃效果</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-purple-400 to-pink-400">
+        <div class="p-8 rounded-lg bg-white/50">
+          <div class="space-y-6">
+            <div>
+              <h4 class="text-base font-semibold mb-3 text-gray-800">基础骨架屏</h4>
+              <ShadcnSkeleton glass />
+            </div>
+            <div>
+              <h4 class="text-base font-semibold mb-3 text-gray-800">带动画效果</h4>
+              <ShadcnSkeleton glass animation />
+            </div>
+            <div>
+              <h4 class="text-base font-semibold mb-3 text-gray-800">不同形状</h4>
+              <div class="flex gap-4 items-center">
+                <ShadcnSkeletonItem type="circle" size="large" glass animation />
+                <ShadcnSkeletonItem type="square" size="large" glass animation />
+                <ShadcnSkeletonItem type="rect" width="200px" size="large" glass animation />
+              </div>
+            </div>
+            <div>
+              <h4 class="text-base font-semibold mb-3 text-gray-800">图片骨架屏</h4>
+              <ShadcnSkeletonItem type="image" size="large" glass animation />
+            </div>
+            <div>
+              <h4 class="text-base font-semibold mb-3 text-gray-800">自定义排版</h4>
+              <ShadcnSkeleton glass animation :paragraph="{ rows: 5, width: [100, 200, '300px', '50%', '62%'] }" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">暗黑模式</h3>
+      <div class="p-6 bg-gray-900 rounded-lg">
+        <div class="p-6 rounded-lg bg-gradient-to-r from-purple-900 to-pink-900">
+          <div class="p-8 rounded-lg bg-gray-800/50">
+            <div class="space-y-6">
+              <div>
+                <h4 class="text-base font-semibold mb-3 text-gray-200">基础骨架屏</h4>
+                <ShadcnSkeleton glass dark />
+              </div>
+              <div>
+                <h4 class="text-base font-semibold mb-3 text-gray-200">带动画效果</h4>
+                <ShadcnSkeleton glass animation dark />
+              </div>
+              <div>
+                <h4 class="text-base font-semibold mb-3 text-gray-200">不同形状</h4>
+                <div class="flex gap-4 items-center">
+                  <ShadcnSkeletonItem type="circle" size="large" glass animation dark />
+                  <ShadcnSkeletonItem type="square" size="large" glass animation dark />
+                  <ShadcnSkeletonItem type="rect" width="200px" size="large" glass animation dark />
+                </div>
+              </div>
+              <div>
+                <h4 class="text-base font-semibold mb-3 text-gray-200">图片骨架屏</h4>
+                <ShadcnSkeletonItem type="image" size="large" glass animation dark />
+              </div>
+              <div>
+                <h4 class="text-base font-semibold mb-3 text-gray-200">自定义排版</h4>
+                <ShadcnSkeleton glass animation dark :paragraph="{ rows: 5, width: [100, 200, '300px', '50%', '62%'] }" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ShadcnSkeleton, ShadcnSkeletonItem } from '@/ui/skeleton'
+</script>
diff --git a/src/App.vue b/src/App.vue
index 76549021..054987af 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,29 +6,29 @@
 
     <div class="space-y-6 my-6">
       <div>
-        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnDivider - 液态玻璃效果</h3>
-        <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-teal-900 to-cyan-900' : 'bg-gradient-to-r from-teal-400 to-cyan-400']">
+        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnSkeleton - 液态玻璃效果</h3>
+        <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-purple-900 to-pink-900' : 'bg-gradient-to-r from-purple-400 to-pink-400']">
           <div :class="['p-8 rounded-lg', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
             <div class="space-y-6">
               <div>
-                <h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">基础分割线</h4>
-                <ShadcnDivider glass :dark="isDark"/>
+                <h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">基础骨架屏</h4>
+                <ShadcnSkeleton glass :dark="isDark"/>
               </div>
               <div>
-                <h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">带文字分割线</h4>
-                <ShadcnDivider text="文本内容" glass :dark="isDark"/>
+                <h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">带动画效果</h4>
+                <ShadcnSkeleton glass animation :dark="isDark"/>
               </div>
               <div>
-                <h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">不同位置</h4>
-                <div class="space-y-3">
-                  <ShadcnDivider text="左侧文本" orientation="left" glass :dark="isDark"/>
-                  <ShadcnDivider text="居中文本" orientation="center" glass :dark="isDark"/>
-                  <ShadcnDivider text="右侧文本" orientation="right" glass :dark="isDark"/>
+                <h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">不同形状</h4>
+                <div class="flex gap-4 items-center">
+                  <ShadcnSkeletonItem type="circle" size="large" glass :dark="isDark"/>
+                  <ShadcnSkeletonItem type="square" size="large" glass :dark="isDark"/>
+                  <ShadcnSkeletonItem type="rect" width="200px" size="large" glass :dark="isDark"/>
                 </div>
               </div>
               <div>
-                <h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">虚线样式</h4>
-                <ShadcnDivider text="虚线分割" dashed glass :dark="isDark"/>
+                <h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">图片骨架屏</h4>
+                <ShadcnSkeletonItem type="image" size="large" glass animation :dark="isDark"/>
               </div>
             </div>
           </div>
@@ -41,7 +41,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnDivider } from "@/ui/divider";
+import { ShadcnSkeleton, ShadcnSkeletonItem } from "@/ui/skeleton";
 
 const isDark = ref(false)
 </script>
\ No newline at end of file
diff --git a/src/ui/skeleton/ShadcnSkeleton.vue b/src/ui/skeleton/ShadcnSkeleton.vue
index a6cf4f4c..e85110cc 100644
--- a/src/ui/skeleton/ShadcnSkeleton.vue
+++ b/src/ui/skeleton/ShadcnSkeleton.vue
@@ -6,7 +6,8 @@
                           :width="width"
                           :size="size"
                           :animation="animation"
-                          :dark="dark"/>
+                          :dark="dark"
+                          :glass="glass"/>
     </slot>
   </div>
 </template>
@@ -21,7 +22,8 @@ const props = withDefaults(defineProps<SkeletonProps>(), {
   rows: 4,
   animation: false,
   size: 'mini',
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const addPxIfNumber = (value: number | string): string => {
diff --git a/src/ui/skeleton/ShadcnSkeletonItem.vue b/src/ui/skeleton/ShadcnSkeletonItem.vue
index 0ff98996..a11de54d 100644
--- a/src/ui/skeleton/ShadcnSkeletonItem.vue
+++ b/src/ui/skeleton/ShadcnSkeletonItem.vue
@@ -3,7 +3,10 @@
     <div :class="[animation ? 'animate-pulse' : '', skeletonClass]">
       <div :class="[
              'flex justify-center items-center',
-             dark ? 'bg-gray-700' : 'bg-gray-200',
+             glass && 'backdrop-blur-xl backdrop-saturate-150',
+             glass && 'shadow-lg shadow-black/5',
+             glass && (dark ? 'bg-white/10 border border-white/20' : 'bg-white/30 border border-gray-400/40'),
+             !glass && (dark ? 'bg-gray-700' : 'bg-gray-200'),
              skeletonShapeClass
            ]"
            :style="{ width }">
@@ -29,7 +32,8 @@ const props = withDefaults(defineProps<SkeletonItemProps>(), {
   animation: false,
   type: 'rect',
   size: 'default',
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const skeletonShapeClass = computed(() => {
diff --git a/src/ui/skeleton/types.ts b/src/ui/skeleton/types.ts
index 40b36881..500766d7 100644
--- a/src/ui/skeleton/types.ts
+++ b/src/ui/skeleton/types.ts
@@ -9,6 +9,7 @@ export interface SkeletonProps
     size?: keyof typeof SkeletonSize
     paragraph?: { rows: number, width: (number | string)[] }
     dark?: boolean
+    glass?: boolean
 }
 
 export interface SkeletonItemProps
@@ -18,4 +19,5 @@ export interface SkeletonItemProps
     type?: keyof typeof SkeletonType
     size?: keyof typeof SkeletonSize
     dark?: boolean
+    glass?: boolean
 }
\ No newline at end of file

From 24514481ce6a347f334c47a2bb93c53ca3c04fb4 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 28 Dec 2025 20:07:46 +0800
Subject: [PATCH 02/10] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Global=20Footer=20=E6=B6=B2=E6=80=81=E7=8E=BB?=
 =?UTF-8?q?=E7=92=83=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/layout/global-footer.md       | 111 ++++++++++++++++++
 .../src/example/global-footer/glass.vue       |  73 ++++++++++++
 src/App.vue                                   |  83 ++++++++-----
 src/ui/footer/ShadcnGlobalFooter.vue          |  11 +-
 4 files changed, 245 insertions(+), 33 deletions(-)
 create mode 100644 playground/src/example/global-footer/glass.vue

diff --git a/docs/components/layout/global-footer.md b/docs/components/layout/global-footer.md
index a47d852b..f41c00ea 100644
--- a/docs/components/layout/global-footer.md
+++ b/docs/components/layout/global-footer.md
@@ -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) 属性"
@@ -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>
 
@@ -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'
 
diff --git a/playground/src/example/global-footer/glass.vue b/playground/src/example/global-footer/glass.vue
new file mode 100644
index 00000000..4bb84d62
--- /dev/null
+++ b/playground/src/example/global-footer/glass.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="space-y-6 p-6">
+    <div>
+      <h3 class="text-lg font-semibold mb-4">液态玻璃效果</h3>
+      <div class="p-6 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>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">暗黑模式</h3>
+      <div class="p-6 bg-gray-900 rounded-lg">
+        <div class="p-6 rounded-lg bg-gradient-to-r from-blue-900 to-indigo-900">
+          <div class="rounded-lg overflow-hidden bg-gray-800/50">
+            <ShadcnGlobalFooter
+              glass
+              dark
+              company="Your Company"
+              description="为开发者提供优质的组件库和工具"
+              :links="footerLinks"
+              :socials="footerSocials"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ShadcnGlobalFooter } from '@/ui/footer'
+
+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>
diff --git a/src/App.vue b/src/App.vue
index 054987af..423b6231 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,35 +1,23 @@
 <template>
-  <div :class="['min-h-screen p-6 pb-32', isDark ? 'bg-gray-900' : 'bg-white']">
-    <ShadcnButton @click="isDark = !isDark" :dark="isDark">
-      切换暗黑模式
-    </ShadcnButton>
+  <div :class="['min-h-screen', isDark ? 'bg-gray-900' : 'bg-white']">
+    <div class="p-6">
+      <ShadcnButton @click="isDark = !isDark" :dark="isDark">
+        切换暗黑模式
+      </ShadcnButton>
 
-    <div class="space-y-6 my-6">
-      <div>
-        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnSkeleton - 液态玻璃效果</h3>
-        <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-purple-900 to-pink-900' : 'bg-gradient-to-r from-purple-400 to-pink-400']">
-          <div :class="['p-8 rounded-lg', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
-            <div class="space-y-6">
-              <div>
-                <h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">基础骨架屏</h4>
-                <ShadcnSkeleton glass :dark="isDark"/>
-              </div>
-              <div>
-                <h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">带动画效果</h4>
-                <ShadcnSkeleton glass animation :dark="isDark"/>
-              </div>
-              <div>
-                <h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">不同形状</h4>
-                <div class="flex gap-4 items-center">
-                  <ShadcnSkeletonItem type="circle" size="large" glass :dark="isDark"/>
-                  <ShadcnSkeletonItem type="square" size="large" glass :dark="isDark"/>
-                  <ShadcnSkeletonItem type="rect" width="200px" size="large" glass :dark="isDark"/>
-                </div>
-              </div>
-              <div>
-                <h4 :class="['text-base font-semibold mb-3', isDark ? 'text-gray-200' : 'text-gray-800']">图片骨架屏</h4>
-                <ShadcnSkeletonItem type="image" size="large" glass animation :dark="isDark"/>
-              </div>
+      <div class="space-y-6 my-6">
+        <div>
+          <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnGlobalFooter - 液态玻璃效果</h3>
+          <div :class="['p-6 rounded-lg', isDark ? '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', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
+              <ShadcnGlobalFooter
+                glass
+                :dark="isDark"
+                company="Your Company"
+                description="为开发者提供优质的组件库和工具"
+                :links="footerLinks"
+                :socials="footerSocials"
+              />
             </div>
           </div>
         </div>
@@ -41,7 +29,40 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnSkeleton, ShadcnSkeletonItem } from "@/ui/skeleton";
+import { ShadcnGlobalFooter } from "@/ui/footer";
 
 const isDark = ref(false)
+
+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>
\ No newline at end of file
diff --git a/src/ui/footer/ShadcnGlobalFooter.vue b/src/ui/footer/ShadcnGlobalFooter.vue
index 65d2afdb..2f1d077c 100644
--- a/src/ui/footer/ShadcnGlobalFooter.vue
+++ b/src/ui/footer/ShadcnGlobalFooter.vue
@@ -1,5 +1,10 @@
 <template>
-  <footer :class="['w-full border-t', dark ? 'bg-gray-800 border-gray-700' : 'bg-background border-gray-200']">
+  <footer :class="['w-full border-t',
+                   glass && 'backdrop-blur-xl backdrop-saturate-150',
+                   glass && 'shadow-lg shadow-black/5',
+                   glass && (dark ? 'bg-white/10 border-white/20' : 'bg-white/30 border-gray-400/40'),
+                   !glass && (dark ? 'bg-gray-800 border-gray-700' : 'bg-background border-gray-200')
+          ]">
     <!-- Main Footer Content -->
     <div class="container mx-auto px-4 py-8">
       <!-- Top Section with Links -->
@@ -95,6 +100,7 @@ interface Props
   links?: LinkGroup[]
   socials?: LinkItem[]
   dark?: boolean
+  glass?: boolean
 }
 
 withDefaults(defineProps<Props>(), {
@@ -102,6 +108,7 @@ withDefaults(defineProps<Props>(), {
   description: 'The Devlive Software Foundation is a community of developers who are passionate about creating innovative software solutions.',
   links: () => [] as LinkGroup[],
   socials: () => [] as LinkItem[],
-  dark: false
+  dark: false,
+  glass: false
 })
 </script>

From 83ef58d2413efefe804928c8bb6c27f5b3739f96 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 28 Dec 2025 20:10:43 +0800
Subject: [PATCH 03/10] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Toolbar=20Footer=20=E6=B6=B2=E6=80=81=E7=8E=BB?=
 =?UTF-8?q?=E7=92=83=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/layout/toolbar-footer.md      | 49 ++++++++++++++
 .../src/example/toolbar-footer/glass.vue      | 45 +++++++++++++
 src/App.vue                                   | 67 ++++++-------------
 src/ui/footer/ShadcnToolbarFooter.vue         | 15 ++++-
 4 files changed, 127 insertions(+), 49 deletions(-)
 create mode 100644 playground/src/example/toolbar-footer/glass.vue

diff --git a/docs/components/layout/toolbar-footer.md b/docs/components/layout/toolbar-footer.md
index f890b3c8..ec77a9b7 100644
--- a/docs/components/layout/toolbar-footer.md
+++ b/docs/components/layout/toolbar-footer.md
@@ -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) 属性"
@@ -126,6 +173,8 @@ title: 工具栏页脚 (Toolbar Footer)
         ['hideOnScroll', '是否在滚动时隐藏', 'boolean', 'true'],
         ['scrollStopDelay', '滚动停止延迟', 'number', '600'],
         ['fullWidth', '是否全宽', 'boolean', 'false'],
+        ['dark', '是否为暗黑模式', 'boolean', 'false'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false'],
     ]">
 </ApiTable>
 
diff --git a/playground/src/example/toolbar-footer/glass.vue b/playground/src/example/toolbar-footer/glass.vue
new file mode 100644
index 00000000..01eb827f
--- /dev/null
+++ b/playground/src/example/toolbar-footer/glass.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="space-y-6 p-6">
+    <div>
+      <h3 class="text-lg font-semibold mb-4">液态玻璃效果</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-green-400 to-teal-400">
+        <div class="rounded-lg relative h-64 overflow-hidden bg-white/50">
+          <div class="p-4 text-gray-700">
+            <p class="text-sm font-medium">液态玻璃效果工具栏</p>
+            <p class="text-sm mt-2">底部显示带有玻璃效果的工具栏</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>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">暗黑模式</h3>
+      <div class="p-6 bg-gray-900 rounded-lg">
+        <div class="p-6 rounded-lg bg-gradient-to-r from-green-900 to-teal-900">
+          <div class="rounded-lg relative h-64 overflow-hidden bg-gray-800/50">
+            <div class="p-4 text-gray-300">
+              <p class="text-sm font-medium">液态玻璃效果工具栏（暗黑模式）</p>
+              <p class="text-sm mt-2">底部显示带有玻璃效果的工具栏</p>
+              <p class="text-sm mt-2">点击按钮可以关闭或确认</p>
+            </div>
+            <ShadcnToolbarFooter glass dark :hide-on-scroll="false">
+              <template #left>
+                <span class="text-sm">液态玻璃效果工具栏</span>
+              </template>
+            </ShadcnToolbarFooter>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ShadcnToolbarFooter } from '@/ui/footer'
+</script>
diff --git a/src/App.vue b/src/App.vue
index 423b6231..b26389b0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['min-h-screen', isDark ? 'bg-gray-900' : 'bg-white']">
+  <div :class="['min-h-screen pb-32', isDark ? 'bg-gray-900' : 'bg-white']">
     <div class="p-6">
       <ShadcnButton @click="isDark = !isDark" :dark="isDark">
         切换暗黑模式
@@ -7,62 +7,37 @@
 
       <div class="space-y-6 my-6">
         <div>
-          <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnGlobalFooter - 液态玻璃效果</h3>
-          <div :class="['p-6 rounded-lg', isDark ? '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', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
-              <ShadcnGlobalFooter
-                glass
-                :dark="isDark"
-                company="Your Company"
-                description="为开发者提供优质的组件库和工具"
-                :links="footerLinks"
-                :socials="footerSocials"
-              />
+          <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnToolbarFooter - 液态玻璃效果</h3>
+          <div :class="['p-6 rounded-lg', isDark ? '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', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
+              <div :class="['p-4', isDark ? 'text-gray-300' : 'text-gray-700']">
+                <p class="text-sm">滚动页面查看工具栏页脚的液态玻璃效果</p>
+                <p class="text-sm mt-2">点击页面底部的按钮与工具栏交互</p>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+
+    <ShadcnToolbarFooter
+      v-model="showToolbar"
+      glass
+      :dark="isDark"
+      :hide-on-scroll="false"
+    >
+      <template #left>
+        <span :class="['text-sm', isDark ? 'text-gray-300' : 'text-gray-700']">液态玻璃效果工具栏</span>
+      </template>
+    </ShadcnToolbarFooter>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnGlobalFooter } from "@/ui/footer";
+import { ShadcnToolbarFooter } from "@/ui/footer";
 
 const isDark = ref(false)
-
-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' }
-]
+const showToolbar = ref(true)
 </script>
\ No newline at end of file
diff --git a/src/ui/footer/ShadcnToolbarFooter.vue b/src/ui/footer/ShadcnToolbarFooter.vue
index f2bc921d..5dd09229 100644
--- a/src/ui/footer/ShadcnToolbarFooter.vue
+++ b/src/ui/footer/ShadcnToolbarFooter.vue
@@ -1,7 +1,11 @@
 <template>
   <footer v-if="isVisible"
-          :class="['fixed bottom-0 left-0 right-0 z-50 border-t backdrop-blur supports-[backdrop-filter]:bg-background/60',
-              dark ? 'bg-gray-800/95 border-gray-700' : 'bg-background/95 border-gray-200',
+          :class="['fixed bottom-0 left-0 right-0 z-50 border-t',
+              glass && 'backdrop-blur-xl backdrop-saturate-150',
+              glass && 'shadow-lg shadow-black/5',
+              glass && (dark ? 'bg-white/10 border-white/20' : 'bg-white/30 border-gray-400/40'),
+              !glass && 'backdrop-blur supports-[backdrop-filter]:bg-background/60',
+              !glass && (dark ? 'bg-gray-800/95 border-gray-700' : 'bg-background/95 border-gray-200'),
               'transform transition-transform duration-200 ease-in-out',
               isVisible ? 'translate-y-0' : 'translate-y-full'
           ]">
@@ -67,6 +71,10 @@ interface Props
    * Enables dark mode
    */
   dark?: boolean
+  /**
+   * Enables glass effect
+   */
+  glass?: boolean
 }
 
 const emit = defineEmits<{
@@ -82,7 +90,8 @@ const props = withDefaults(defineProps<Props>(), {
   hideOnScroll: true,
   scrollStopDelay: 600,
   fullWidth: false,
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const isVisible = ref(props.modelValue)

From dc87a00b7697d20afa9faa4a58ed6c3e1d5d6bb0 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 28 Dec 2025 20:14:08 +0800
Subject: [PATCH 04/10] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Modal=20=E6=B6=B2=E6=80=81=E7=8E=BB=E7=92=83?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/view/modal.md          | 57 +++++++++++++++++++
 playground/src/example/modal/glass.vue | 79 ++++++++++++++++++++++++++
 src/App.vue                            | 60 +++++++++++--------
 src/ui/modal/ShadcnModal.vue           |  8 ++-
 src/ui/modal/types.ts                  |  1 +
 5 files changed, 180 insertions(+), 25 deletions(-)
 create mode 100644 playground/src/example/modal/glass.vue

diff --git a/docs/components/view/modal.md b/docs/components/view/modal.md
index 6e36f182..6ec13f4b 100644
--- a/docs/components/view/modal.md
+++ b/docs/components/view/modal.md
@@ -346,6 +346,60 @@ const value = ref(false);
 
 :::
 
+## 液态玻璃效果 (glass)
+
+<CodeRunner title="液态玻璃效果 (glass)">
+    <ShadcnButton @click="glassModal = true" :dark="darkMode">打开液态玻璃效果 Modal</ShadcnButton>
+    <ShadcnModal v-model="glassModal" glass :dark="darkMode" title="液态玻璃效果" description="这是一个带有液态玻璃效果的模态框" width="500px">
+        <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="glassModal = false" :dark="darkMode">关闭</ShadcnButton>
+                <ShadcnButton type="primary" @click="glassModal = false" :dark="darkMode">确定</ShadcnButton>
+            </div>
+        </template>
+    </ShadcnModal>
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+    <ShadcnButton @click="modal = true">打开液态玻璃效果 Modal</ShadcnButton>
+    <ShadcnModal v-model="modal" glass title="液态玻璃效果" description="这是一个带有液态玻璃效果的模态框" width="500px">
+        <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="modal = false">关闭</ShadcnButton>
+                <ShadcnButton type="primary" @click="modal = false">确定</ShadcnButton>
+            </div>
+        </template>
+    </ShadcnModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const modal = ref(false);
+</script>
+```
+
+:::
+
 ## 模态框 (Modal) 属性
 
 <ApiTable title="模态框 (Modal) 属性"
@@ -360,6 +414,8 @@ const value = ref(false);
         ['cancelText', '取消按钮的文本', 'string', 'Cancel', '-'],
         ['closable', '是否可关闭', 'boolean', 'true', '-'],
         ['maskClosable', '是否可通过点击遮罩关闭', 'boolean', 'true', '-'],
+        ['dark', '是否为暗黑模式', 'boolean', 'false', '-'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
@@ -405,4 +461,5 @@ const customHeightModal = ref(false);
 const closeableModal = ref(false);
 const noClosableModal = ref(false);
 const customClosableModal = ref(false);
+const glassModal = ref(false);
 </script>
\ No newline at end of file
diff --git a/playground/src/example/modal/glass.vue b/playground/src/example/modal/glass.vue
new file mode 100644
index 00000000..56041314
--- /dev/null
+++ b/playground/src/example/modal/glass.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="space-y-6 p-6">
+    <div>
+      <h3 class="text-lg font-semibold mb-4">液态玻璃效果</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-orange-400 to-red-400">
+        <div class="p-8 rounded-lg bg-white/50">
+          <ShadcnButton @click="showModal = true">打开液态玻璃效果 Modal</ShadcnButton>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">暗黑模式</h3>
+      <div class="p-6 bg-gray-900 rounded-lg">
+        <div class="p-6 rounded-lg bg-gradient-to-r from-orange-900 to-red-900">
+          <div class="p-8 rounded-lg bg-gray-800/50">
+            <ShadcnButton @click="showDarkModal = true" dark>打开液态玻璃效果 Modal（暗黑）</ShadcnButton>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <ShadcnModal
+      v-model="showModal"
+      glass
+      title="液态玻璃效果"
+      description="这是一个带有液态玻璃效果的模态框"
+      width="500px"
+    >
+      <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="showModal = false">关闭</ShadcnButton>
+          <ShadcnButton type="primary" @click="showModal = false">确定</ShadcnButton>
+        </div>
+      </template>
+    </ShadcnModal>
+
+    <ShadcnModal
+      v-model="showDarkModal"
+      glass
+      dark
+      title="液态玻璃效果（暗黑模式）"
+      description="这是一个带有液态玻璃效果的暗黑模式模态框"
+      width="500px"
+    >
+      <div class="space-y-4">
+        <p class="text-sm text-gray-300">
+          这个模态框使用了液态玻璃效果，背景具有模糊和半透明特性。
+        </p>
+        <p class="text-sm text-gray-300">
+          您可以通过背景看到后面的内容，同时保持良好的可读性。
+        </p>
+      </div>
+      <template #footer>
+        <div class="flex gap-2 justify-end">
+          <ShadcnButton @click="showDarkModal = false" dark>关闭</ShadcnButton>
+          <ShadcnButton type="primary" @click="showDarkModal = false" dark>确定</ShadcnButton>
+        </div>
+      </template>
+    </ShadcnModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ShadcnButton } from '@/ui/button'
+import { ShadcnModal } from '@/ui/modal'
+
+const showModal = ref(false)
+const showDarkModal = ref(false)
+</script>
diff --git a/src/App.vue b/src/App.vue
index b26389b0..99c283aa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,43 +1,57 @@
 <template>
-  <div :class="['min-h-screen pb-32', isDark ? 'bg-gray-900' : 'bg-white']">
-    <div class="p-6">
-      <ShadcnButton @click="isDark = !isDark" :dark="isDark">
-        切换暗黑模式
-      </ShadcnButton>
+  <div :class="['min-h-screen p-6', isDark ? 'bg-gray-900' : 'bg-white']">
+    <ShadcnButton @click="isDark = !isDark" :dark="isDark">
+      切换暗黑模式
+    </ShadcnButton>
 
-      <div class="space-y-6 my-6">
-        <div>
-          <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnToolbarFooter - 液态玻璃效果</h3>
-          <div :class="['p-6 rounded-lg', isDark ? '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', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
-              <div :class="['p-4', isDark ? 'text-gray-300' : 'text-gray-700']">
-                <p class="text-sm">滚动页面查看工具栏页脚的液态玻璃效果</p>
-                <p class="text-sm mt-2">点击页面底部的按钮与工具栏交互</p>
-              </div>
-            </div>
+    <div class="space-y-6 my-6">
+      <div>
+        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnModal - 液态玻璃效果</h3>
+        <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-orange-900 to-red-900' : 'bg-gradient-to-r from-orange-400 to-red-400']">
+          <div :class="['p-8 rounded-lg', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
+            <ShadcnButton @click="showModal = true" :dark="isDark">
+              打开液态玻璃效果 Modal
+            </ShadcnButton>
           </div>
         </div>
       </div>
     </div>
 
-    <ShadcnToolbarFooter
-      v-model="showToolbar"
+    <ShadcnModal
+      v-model="showModal"
       glass
       :dark="isDark"
-      :hide-on-scroll="false"
+      title="液态玻璃效果"
+      description="这是一个带有液态玻璃效果的模态框"
+      width="500px"
     >
-      <template #left>
-        <span :class="['text-sm', isDark ? 'text-gray-300' : 'text-gray-700']">液态玻璃效果工具栏</span>
+      <div class="space-y-4">
+        <p :class="['text-sm', isDark ? 'text-gray-300' : 'text-gray-700']">
+          这个模态框使用了液态玻璃效果，背景具有模糊和半透明特性。
+        </p>
+        <p :class="['text-sm', isDark ? 'text-gray-300' : 'text-gray-700']">
+          您可以通过背景看到后面的内容，同时保持良好的可读性。
+        </p>
+      </div>
+      <template #footer>
+        <div class="flex gap-2 justify-end">
+          <ShadcnButton @click="showModal = false" :dark="isDark">
+            关闭
+          </ShadcnButton>
+          <ShadcnButton type="primary" @click="showModal = false" :dark="isDark">
+            确定
+          </ShadcnButton>
+        </div>
       </template>
-    </ShadcnToolbarFooter>
+    </ShadcnModal>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnToolbarFooter } from "@/ui/footer";
+import { ShadcnModal } from "@/ui/modal";
 
 const isDark = ref(false)
-const showToolbar = ref(true)
+const showModal = ref(false)
 </script>
\ No newline at end of file
diff --git a/src/ui/modal/ShadcnModal.vue b/src/ui/modal/ShadcnModal.vue
index 13631d15..046fc486 100644
--- a/src/ui/modal/ShadcnModal.vue
+++ b/src/ui/modal/ShadcnModal.vue
@@ -9,7 +9,10 @@
       <!-- Dialog -->
       <div :class="[
                   'relative z-50 flex flex-col animate-in fade-in-0 zoom-in-95 w-full max-w-lg mx-auto rounded-sm',
-                  dark ? 'bg-gray-800' : 'bg-white'
+                  glass && 'backdrop-blur-xl backdrop-saturate-150',
+                  glass && 'shadow-lg shadow-black/5',
+                  glass && (dark ? 'bg-white/10 border border-white/20' : 'bg-white/30 border border-gray-400/40'),
+                  !glass && (dark ? 'bg-gray-800' : 'bg-white')
            ]"
            :style="[
                { width: calcSize(width), minWidth: calcSize(width), maxWidth: calcSize(width) },
@@ -79,7 +82,8 @@ const props = withDefaults(defineProps<ModalProps>(), {
   width: '30%',
   height: 'auto',
   maskClosable: true,
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const onMaskClick = () => {
diff --git a/src/ui/modal/types.ts b/src/ui/modal/types.ts
index c85430e0..a129f95f 100644
--- a/src/ui/modal/types.ts
+++ b/src/ui/modal/types.ts
@@ -10,6 +10,7 @@ export interface ModalProps
     closable?: boolean
     maskClosable?: boolean
     dark?: boolean
+    glass?: boolean
 }
 
 export type ModalEmits = {

From 0cb54b56a6f44628c5f26fa87b49f316dc02184b Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 28 Dec 2025 20:18:12 +0800
Subject: [PATCH 05/10] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Tooltip=20=E6=B6=B2=E6=80=81=E7=8E=BB=E7=92=83?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/view/tooltip.md          | 65 ++++++++++++++++++++
 playground/src/example/tooltip/glass.vue | 76 ++++++++++++++++++++++++
 src/App.vue                              | 59 +++++++-----------
 src/ui/tooltip/ShadcnTooltip.vue         | 10 +++-
 src/ui/tooltip/types.ts                  |  1 +
 5 files changed, 172 insertions(+), 39 deletions(-)
 create mode 100644 playground/src/example/tooltip/glass.vue

diff --git a/docs/components/view/tooltip.md b/docs/components/view/tooltip.md
index 789ff70e..ae0934e3 100644
--- a/docs/components/view/tooltip.md
+++ b/docs/components/view/tooltip.md
@@ -177,6 +177,69 @@ const darkMode = computed(() => isDark.value)
 
 :::
 
+## 液态玻璃效果 (glass)
+
+<CodeRunner title="液态玻璃效果 (glass)">
+    <div :class="['p-8 rounded-lg', darkMode ? 'bg-gradient-to-r from-cyan-900 to-blue-900' : 'bg-gradient-to-r from-cyan-400 to-blue-400']">
+        <div :class="['p-6 rounded-lg space-y-6', darkMode ? 'bg-gray-800/50' : 'bg-white/50']">
+            <div class="flex gap-4 items-center flex-wrap">
+                <ShadcnTooltip glass :dark="darkMode" content="这是液态玻璃效果的提示框" position="top">
+                    <ShadcnButton :dark="darkMode">上方提示</ShadcnButton>
+                </ShadcnTooltip>
+                <ShadcnTooltip glass :dark="darkMode" content="这是液态玻璃效果的提示框" position="bottom">
+                    <ShadcnButton :dark="darkMode">下方提示</ShadcnButton>
+                </ShadcnTooltip>
+                <ShadcnTooltip glass :dark="darkMode" content="这是液态玻璃效果的提示框" position="left">
+                    <ShadcnButton :dark="darkMode">左侧提示</ShadcnButton>
+                </ShadcnTooltip>
+                <ShadcnTooltip glass :dark="darkMode" content="这是液态玻璃效果的提示框" position="right">
+                    <ShadcnButton :dark="darkMode">右侧提示</ShadcnButton>
+                </ShadcnTooltip>
+            </div>
+            <div class="flex gap-4 items-center">
+                <ShadcnTooltip glass :dark="darkMode" content="带箭头的液态玻璃效果提示框" arrow>
+                    <ShadcnButton :dark="darkMode">带箭头提示</ShadcnButton>
+                </ShadcnTooltip>
+            </div>
+        </div>
+    </div>
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+    <div class="p-8 rounded-lg bg-gradient-to-r from-cyan-400 to-blue-400">
+        <div class="p-6 rounded-lg space-y-6 bg-white/50">
+            <div class="flex gap-4 items-center flex-wrap">
+                <ShadcnTooltip glass content="这是液态玻璃效果的提示框" position="top">
+                    <ShadcnButton>上方提示</ShadcnButton>
+                </ShadcnTooltip>
+                <ShadcnTooltip glass content="这是液态玻璃效果的提示框" position="bottom">
+                    <ShadcnButton>下方提示</ShadcnButton>
+                </ShadcnTooltip>
+                <ShadcnTooltip glass content="这是液态玻璃效果的提示框" position="left">
+                    <ShadcnButton>左侧提示</ShadcnButton>
+                </ShadcnTooltip>
+                <ShadcnTooltip glass content="这是液态玻璃效果的提示框" position="right">
+                    <ShadcnButton>右侧提示</ShadcnButton>
+                </ShadcnTooltip>
+            </div>
+            <div class="flex gap-4 items-center">
+                <ShadcnTooltip glass content="带箭头的液态玻璃效果提示框" arrow>
+                    <ShadcnButton>带箭头提示</ShadcnButton>
+                </ShadcnTooltip>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+```
+
+:::
+
 ## 提示 (Tooltip) 属性
 
 <ApiTable title="提示 (Tooltip) 属性"
@@ -187,6 +250,8 @@ const darkMode = computed(() => isDark.value)
         ['position', '组件的位置', 'enum', 'top', 'top | bottom | left | right'],
         ['arrow', '是否显示箭头', 'boolean', 'true', '-'],
         ['maxWidth', '如果宽度为 auto，则提示工具的最大宽度', 'number | string', '200', '-'],
+        ['dark', '是否为暗黑模式', 'boolean', 'false', '-'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
diff --git a/playground/src/example/tooltip/glass.vue b/playground/src/example/tooltip/glass.vue
new file mode 100644
index 00000000..b14d5092
--- /dev/null
+++ b/playground/src/example/tooltip/glass.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="space-y-6 p-6">
+    <div>
+      <h3 class="text-lg font-semibold mb-4">液态玻璃效果</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-cyan-400 to-blue-400">
+        <div class="p-8 rounded-lg space-y-6 bg-white/50">
+          <div>
+            <h4 class="text-base font-semibold mb-3 text-gray-800">不同位置</h4>
+            <div class="flex gap-4 items-center flex-wrap">
+              <ShadcnTooltip glass content="这是液态玻璃效果的提示框" position="top">
+                <ShadcnButton>上方提示</ShadcnButton>
+              </ShadcnTooltip>
+              <ShadcnTooltip glass content="这是液态玻璃效果的提示框" position="bottom">
+                <ShadcnButton>下方提示</ShadcnButton>
+              </ShadcnTooltip>
+              <ShadcnTooltip glass content="这是液态玻璃效果的提示框" position="left">
+                <ShadcnButton>左侧提示</ShadcnButton>
+              </ShadcnTooltip>
+              <ShadcnTooltip glass content="这是液态玻璃效果的提示框" position="right">
+                <ShadcnButton>右侧提示</ShadcnButton>
+              </ShadcnTooltip>
+            </div>
+          </div>
+          <div>
+            <h4 class="text-base font-semibold mb-3 text-gray-800">带箭头</h4>
+            <div class="flex gap-4 items-center">
+              <ShadcnTooltip glass content="带箭头的液态玻璃效果提示框" arrow>
+                <ShadcnButton>带箭头提示</ShadcnButton>
+              </ShadcnTooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">暗黑模式</h3>
+      <div class="p-6 bg-gray-900 rounded-lg">
+        <div class="p-6 rounded-lg bg-gradient-to-r from-cyan-900 to-blue-900">
+          <div class="p-8 rounded-lg space-y-6 bg-gray-800/50">
+            <div>
+              <h4 class="text-base font-semibold mb-3 text-gray-200">不同位置</h4>
+              <div class="flex gap-4 items-center flex-wrap">
+                <ShadcnTooltip glass dark content="这是液态玻璃效果的提示框" position="top">
+                  <ShadcnButton dark>上方提示</ShadcnButton>
+                </ShadcnTooltip>
+                <ShadcnTooltip glass dark content="这是液态玻璃效果的提示框" position="bottom">
+                  <ShadcnButton dark>下方提示</ShadcnButton>
+                </ShadcnTooltip>
+                <ShadcnTooltip glass dark content="这是液态玻璃效果的提示框" position="left">
+                  <ShadcnButton dark>左侧提示</ShadcnButton>
+                </ShadcnTooltip>
+                <ShadcnTooltip glass dark content="这是液态玻璃效果的提示框" position="right">
+                  <ShadcnButton dark>右侧提示</ShadcnButton>
+                </ShadcnTooltip>
+              </div>
+            </div>
+            <div>
+              <h4 class="text-base font-semibold mb-3 text-gray-200">带箭头</h4>
+              <div class="flex gap-4 items-center">
+                <ShadcnTooltip glass dark content="带箭头的液态玻璃效果提示框" arrow>
+                  <ShadcnButton dark>带箭头提示</ShadcnButton>
+                </ShadcnTooltip>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ShadcnButton } from '@/ui/button'
+import { ShadcnTooltip } from '@/ui/tooltip'
+</script>
diff --git a/src/App.vue b/src/App.vue
index 99c283aa..98ff3aa1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,52 +6,39 @@
 
     <div class="space-y-6 my-6">
       <div>
-        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnModal - 液态玻璃效果</h3>
-        <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-orange-900 to-red-900' : 'bg-gradient-to-r from-orange-400 to-red-400']">
-          <div :class="['p-8 rounded-lg', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
-            <ShadcnButton @click="showModal = true" :dark="isDark">
-              打开液态玻璃效果 Modal
-            </ShadcnButton>
+        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnTooltip - 液态玻璃效果</h3>
+        <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-cyan-900 to-blue-900' : 'bg-gradient-to-r from-cyan-400 to-blue-400']">
+          <div :class="['p-8 rounded-lg space-y-6', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
+            <div class="flex gap-4 items-center flex-wrap">
+              <ShadcnTooltip glass :dark="isDark" content="这是液态玻璃效果的提示框" position="top">
+                <ShadcnButton :dark="isDark">上方提示</ShadcnButton>
+              </ShadcnTooltip>
+              <ShadcnTooltip glass :dark="isDark" content="这是液态玻璃效果的提示框" position="bottom">
+                <ShadcnButton :dark="isDark">下方提示</ShadcnButton>
+              </ShadcnTooltip>
+              <ShadcnTooltip glass :dark="isDark" content="这是液态玻璃效果的提示框" position="left">
+                <ShadcnButton :dark="isDark">左侧提示</ShadcnButton>
+              </ShadcnTooltip>
+              <ShadcnTooltip glass :dark="isDark" content="这是液态玻璃效果的提示框" position="right">
+                <ShadcnButton :dark="isDark">右侧提示</ShadcnButton>
+              </ShadcnTooltip>
+            </div>
+            <div class="flex gap-4 items-center">
+              <ShadcnTooltip glass :dark="isDark" content="带箭头的液态玻璃效果提示框" arrow>
+                <ShadcnButton :dark="isDark">带箭头提示</ShadcnButton>
+              </ShadcnTooltip>
+            </div>
           </div>
         </div>
       </div>
     </div>
-
-    <ShadcnModal
-      v-model="showModal"
-      glass
-      :dark="isDark"
-      title="液态玻璃效果"
-      description="这是一个带有液态玻璃效果的模态框"
-      width="500px"
-    >
-      <div class="space-y-4">
-        <p :class="['text-sm', isDark ? 'text-gray-300' : 'text-gray-700']">
-          这个模态框使用了液态玻璃效果，背景具有模糊和半透明特性。
-        </p>
-        <p :class="['text-sm', isDark ? 'text-gray-300' : 'text-gray-700']">
-          您可以通过背景看到后面的内容，同时保持良好的可读性。
-        </p>
-      </div>
-      <template #footer>
-        <div class="flex gap-2 justify-end">
-          <ShadcnButton @click="showModal = false" :dark="isDark">
-            关闭
-          </ShadcnButton>
-          <ShadcnButton type="primary" @click="showModal = false" :dark="isDark">
-            确定
-          </ShadcnButton>
-        </div>
-      </template>
-    </ShadcnModal>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnModal } from "@/ui/modal";
+import { ShadcnTooltip } from "@/ui/tooltip";
 
 const isDark = ref(false)
-const showModal = ref(false)
 </script>
\ No newline at end of file
diff --git a/src/ui/tooltip/ShadcnTooltip.vue b/src/ui/tooltip/ShadcnTooltip.vue
index 4493f7aa..d1732c9d 100644
--- a/src/ui/tooltip/ShadcnTooltip.vue
+++ b/src/ui/tooltip/ShadcnTooltip.vue
@@ -8,7 +8,9 @@
       <div v-if="isVisible"
            ref="tooltipContent"
            :class="['fixed z-[100] px-3 py-2 text-sm rounded shadow-lg',
-                    dark ? 'text-gray-100 bg-gray-800' : 'text-white bg-black'
+                    glass && 'backdrop-blur-xl backdrop-saturate-150',
+                    glass && (dark ? 'bg-white/10 border border-white/20 text-gray-100' : 'bg-white/30 border border-gray-400/40 text-gray-800'),
+                    !glass && (dark ? 'text-gray-100 bg-gray-800' : 'text-white bg-black')
            ]"
            :style="[tooltipStyle, { maxWidth: computedMaxWidth }]">
         <div class="text-center break-words">
@@ -18,7 +20,8 @@
 
         <div v-if="arrow"
              :class="['absolute w-2.5 h-2.5 rotate-45',
-                      dark ? 'bg-gray-800' : 'bg-black',
+                      glass && (dark ? 'bg-white/10 border-r border-b border-white/20' : 'bg-white/30 border-r border-b border-gray-400/40'),
+                      !glass && (dark ? 'bg-gray-800' : 'bg-black'),
                       arrowPositionClass
              ]"
              :style="arrowStyle"/>
@@ -38,7 +41,8 @@ const props = withDefaults(defineProps<TooltipProps>(), {
   arrow: false,
   maxWidth: '250px',
   delay: 0,
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const isVisible = ref(false)
diff --git a/src/ui/tooltip/types.ts b/src/ui/tooltip/types.ts
index 078e2a5f..66413c39 100644
--- a/src/ui/tooltip/types.ts
+++ b/src/ui/tooltip/types.ts
@@ -8,4 +8,5 @@ export interface TooltipProps
     delay?: number
     maxWidth?: number | string
     dark?: boolean
+    glass?: boolean
 }

From c985c52a563ede751d2ff65c1a163ac9bbfc7f3c Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 28 Dec 2025 20:23:41 +0800
Subject: [PATCH 06/10] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Progress=20=E6=B6=B2=E6=80=81=E7=8E=BB=E7=92=83?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/view/progress.md          | 40 ++++++++++
 playground/src/example/progress/glass.vue | 91 +++++++++++++++++++++++
 src/App.vue                               | 32 ++++++++
 src/ui/progress/ShadcnProgress.vue        | 23 +++++-
 4 files changed, 182 insertions(+), 4 deletions(-)
 create mode 100644 playground/src/example/progress/glass.vue

diff --git a/docs/components/view/progress.md b/docs/components/view/progress.md
index 8f99a999..11e097ec 100644
--- a/docs/components/view/progress.md
+++ b/docs/components/view/progress.md
@@ -132,6 +132,44 @@ const value = ref(10)
 
 :::
 
+## 液态玻璃效果 (glass)
+
+<CodeRunner title="液态玻璃效果 (glass)">
+    <div class="p-6 rounded-lg bg-gradient-to-r from-purple-400 to-pink-400">
+        <div class="p-8 rounded-lg bg-white/50 space-y-4">
+            <ShadcnProgress v-model="value" glass>Basic Glass</ShadcnProgress>
+            <ShadcnProgress :model-value="75" glass status="success" show-label>Success</ShadcnProgress>
+            <ShadcnProgress :model-value="45" glass status="warning" show-label>Warning</ShadcnProgress>
+            <ShadcnProgress :model-value="30" glass status="error" show-label>Error</ShadcnProgress>
+            <ShadcnProgress v-model="value" glass size="large" show-label>Large</ShadcnProgress>
+        </div>
+    </div>
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+    <div class="p-6 rounded-lg bg-gradient-to-r from-purple-400 to-pink-400">
+        <div class="p-8 rounded-lg bg-white/50 space-y-4">
+            <ShadcnProgress v-model="value" glass>Basic Glass</ShadcnProgress>
+            <ShadcnProgress :model-value="75" glass status="success" show-label>Success</ShadcnProgress>
+            <ShadcnProgress :model-value="45" glass status="warning" show-label>Warning</ShadcnProgress>
+            <ShadcnProgress :model-value="30" glass status="error" show-label>Error</ShadcnProgress>
+            <ShadcnProgress v-model="value" glass size="large" show-label>Large</ShadcnProgress>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(60)
+</script>
+```
+
+:::
+
 <script setup lang="ts">
 import { useData } from 'vitepress'
 import { computed } from 'vue'
@@ -153,5 +191,7 @@ const value = ref(10)
         ['status', '组件的状态', 'enum', '-', 'success | error | warning | info'],
         ['size', '组件的尺寸', 'enum', '-', 'default | large'],
         ['showLabel', '是否显示标签, 将显示在组件的内部', 'boolean', 'false', '-'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'],
+        ['dark', '是否启用暗黑模式', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
\ No newline at end of file
diff --git a/playground/src/example/progress/glass.vue b/playground/src/example/progress/glass.vue
new file mode 100644
index 00000000..5d26302b
--- /dev/null
+++ b/playground/src/example/progress/glass.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="space-y-6 p-6">
+    <div>
+      <h3 class="text-lg font-semibold mb-4">液态玻璃效果</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-purple-400 to-pink-400">
+        <div class="p-8 rounded-lg bg-white/50 space-y-6">
+          <div class="space-y-4">
+            <div>
+              <p class="text-sm mb-2 text-gray-700">基础液态玻璃进度条</p>
+              <ShadcnProgress v-model="progress" glass />
+            </div>
+            <div>
+              <p class="text-sm mb-2 text-gray-700">带标签</p>
+              <ShadcnProgress v-model="progress" glass show-label />
+            </div>
+            <div>
+              <p class="text-sm mb-2 text-gray-700">大尺寸</p>
+              <ShadcnProgress v-model="progress" glass size="large" show-label />
+            </div>
+            <div>
+              <p class="text-sm mb-2 text-gray-700">不同状态</p>
+              <div class="space-y-3">
+                <ShadcnProgress :model-value="75" glass status="success" show-label />
+                <ShadcnProgress :model-value="45" glass status="warning" show-label />
+                <ShadcnProgress :model-value="30" glass status="error" show-label />
+                <ShadcnProgress :model-value="90" glass status="info" show-label />
+              </div>
+            </div>
+            <div class="flex gap-2 mt-4">
+              <ShadcnButton @click="decreaseProgress">减少</ShadcnButton>
+              <ShadcnButton type="primary" @click="increaseProgress">增加</ShadcnButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">暗黑模式</h3>
+      <div class="p-6 bg-gray-900 rounded-lg">
+        <div class="p-6 rounded-lg bg-gradient-to-r from-purple-900 to-pink-900">
+          <div class="p-8 rounded-lg bg-gray-800/50 space-y-6">
+            <div class="space-y-4">
+              <div>
+                <p class="text-sm mb-2 text-gray-300">基础液态玻璃进度条</p>
+                <ShadcnProgress v-model="progress" glass dark />
+              </div>
+              <div>
+                <p class="text-sm mb-2 text-gray-300">带标签</p>
+                <ShadcnProgress v-model="progress" glass dark show-label />
+              </div>
+              <div>
+                <p class="text-sm mb-2 text-gray-300">大尺寸</p>
+                <ShadcnProgress v-model="progress" glass dark size="large" show-label />
+              </div>
+              <div>
+                <p class="text-sm mb-2 text-gray-300">不同状态</p>
+                <div class="space-y-3">
+                  <ShadcnProgress :model-value="75" glass dark status="success" show-label />
+                  <ShadcnProgress :model-value="45" glass dark status="warning" show-label />
+                  <ShadcnProgress :model-value="30" glass dark status="error" show-label />
+                  <ShadcnProgress :model-value="90" glass dark status="info" show-label />
+                </div>
+              </div>
+              <div class="flex gap-2 mt-4">
+                <ShadcnButton @click="decreaseProgress" dark>减少</ShadcnButton>
+                <ShadcnButton type="primary" @click="increaseProgress" dark>增加</ShadcnButton>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ShadcnProgress } from '@/ui/progress'
+import { ShadcnButton } from '@/ui/button'
+
+const progress = ref(60)
+
+const increaseProgress = () => {
+  progress.value = Math.min(progress.value + 10, 100)
+}
+
+const decreaseProgress = () => {
+  progress.value = Math.max(progress.value - 10, 0)
+}
+</script>
diff --git a/src/App.vue b/src/App.vue
index 98ff3aa1..0d076d27 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,36 @@
     </ShadcnButton>
 
     <div class="space-y-6 my-6">
+      <div>
+        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnProgress - 液态玻璃效果</h3>
+        <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-purple-900 to-pink-900' : 'bg-gradient-to-r from-purple-400 to-pink-400']">
+          <div :class="['p-8 rounded-lg space-y-6', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
+            <div class="space-y-4">
+              <div>
+                <p :class="['text-sm mb-2', isDark ? 'text-gray-300' : 'text-gray-700']">基础液态玻璃进度条</p>
+                <ShadcnProgress v-model="progress" glass :dark="isDark" />
+              </div>
+              <div>
+                <p :class="['text-sm mb-2', isDark ? 'text-gray-300' : 'text-gray-700']">带标签</p>
+                <ShadcnProgress v-model="progress" glass :dark="isDark" show-label />
+              </div>
+              <div>
+                <p :class="['text-sm mb-2', isDark ? 'text-gray-300' : 'text-gray-700']">大尺寸</p>
+                <ShadcnProgress v-model="progress" glass :dark="isDark" size="large" show-label />
+              </div>
+              <div>
+                <p :class="['text-sm mb-2', isDark ? 'text-gray-300' : 'text-gray-700']">不同状态</p>
+                <div class="space-y-3">
+                  <ShadcnProgress :model-value="75" glass :dark="isDark" status="success" show-label />
+                  <ShadcnProgress :model-value="45" glass :dark="isDark" status="warning" show-label />
+                  <ShadcnProgress :model-value="30" glass :dark="isDark" status="error" show-label />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div>
         <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnTooltip - 液态玻璃效果</h3>
         <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-cyan-900 to-blue-900' : 'bg-gradient-to-r from-cyan-400 to-blue-400']">
@@ -39,6 +69,8 @@
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
 import { ShadcnTooltip } from "@/ui/tooltip";
+import { ShadcnProgress } from "@/ui/progress";
 
 const isDark = ref(false)
+const progress = ref(60)
 </script>
\ No newline at end of file
diff --git a/src/ui/progress/ShadcnProgress.vue b/src/ui/progress/ShadcnProgress.vue
index 144af5d1..8ac05998 100644
--- a/src/ui/progress/ShadcnProgress.vue
+++ b/src/ui/progress/ShadcnProgress.vue
@@ -1,12 +1,17 @@
 <template>
   <div :class="cn('relative w-full rounded-lg',
                   size && Size[size],
-                  dark ? 'bg-gray-700' : 'bg-gray-200')">
+                  glass && 'backdrop-blur-xl backdrop-saturate-150',
+                  glass && 'shadow-lg shadow-black/5',
+                  glass && (dark ? 'bg-white/10 border border-white/20' : 'bg-white/30 border border-gray-400/40'),
+                  !glass && (dark ? 'bg-gray-700' : 'bg-gray-200'))">
     <div :class="cn('h-full rounded-lg transition-all',
-                    status && Status[status])"
+                    glass && status && GlassStatus[status],
+                    !glass && status && Status[status])"
          :style="{ width: localValue + '%' }">
     </div>
-    <div v-if="showLabel" class="absolute inset-0 flex items-center justify-center text-white text-xs font-normal">
+    <div v-if="showLabel" :class="cn('absolute inset-0 flex items-center justify-center text-xs font-normal',
+                                      glass ? (dark ? 'text-gray-200' : 'text-gray-800') : 'text-white')">
       {{ localValue }}%
     </div>
   </div>
@@ -24,6 +29,14 @@ enum Status
   info = 'bg-blue-500'
 }
 
+enum GlassStatus
+{
+  success = 'bg-green-500/50',
+  error = 'bg-red-500/50',
+  warning = 'bg-yellow-500/50',
+  info = 'bg-blue-500/50'
+}
+
 enum Size
 {
   default = 'h-2.5',
@@ -36,10 +49,12 @@ const props = withDefaults(defineProps<{
   size?: keyof typeof Size
   showLabel?: boolean
   dark?: boolean
+  glass?: boolean
 }>(), {
   status: 'info',
   size: 'default',
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const applyValue = (value: number) => {

From 61a841c752f3936c947b22562b7a2e9a092be01b Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 28 Dec 2025 20:55:21 +0800
Subject: [PATCH 07/10] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Drawer=20=E6=B6=B2=E6=80=81=E7=8E=BB=E7=92=83?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/view/drawer.md          |  57 ++++++++++
 playground/src/example/drawer/glass.vue | 138 ++++++++++++++++++++++++
 src/App.vue                             |  76 ++++---------
 src/ui/drawer/ShadcnDrawer.vue          |  17 +--
 4 files changed, 228 insertions(+), 60 deletions(-)
 create mode 100644 playground/src/example/drawer/glass.vue

diff --git a/docs/components/view/drawer.md b/docs/components/view/drawer.md
index ddaae3de..26ea64e1 100644
--- a/docs/components/view/drawer.md
+++ b/docs/components/view/drawer.md
@@ -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) 属性"
@@ -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>
 
@@ -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>
\ No newline at end of file
diff --git a/playground/src/example/drawer/glass.vue b/playground/src/example/drawer/glass.vue
new file mode 100644
index 00000000..099352e5
--- /dev/null
+++ b/playground/src/example/drawer/glass.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="space-y-6 p-6">
+    <div>
+      <h3 class="text-lg font-semibold mb-4">液态玻璃效果</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-green-400 to-teal-400">
+        <div class="p-8 rounded-lg bg-white/50 space-y-4">
+          <div class="flex gap-4 flex-wrap">
+            <ShadcnButton @click="rightDrawer = true">右侧抽屉</ShadcnButton>
+            <ShadcnButton @click="leftDrawer = true">左侧抽屉</ShadcnButton>
+            <ShadcnButton @click="topDrawer = true">顶部抽屉</ShadcnButton>
+            <ShadcnButton @click="bottomDrawer = true">底部抽屉</ShadcnButton>
+          </div>
+
+          <ShadcnDrawer v-model="rightDrawer" glass title="右侧液态玻璃抽屉" position="right" width="400px">
+            <div class="space-y-4">
+              <p class="text-sm text-gray-700">
+                这是一个带有液态玻璃效果的右侧抽屉组件。
+              </p>
+              <p class="text-sm text-gray-700">
+                背景具有模糊和半透明特性，同时保持良好的可读性。
+              </p>
+              <div class="space-y-2">
+                <ShadcnProgress :model-value="75" glass status="success" show-label />
+                <ShadcnProgress :model-value="45" glass status="warning" show-label />
+              </div>
+            </div>
+            <template #footer>
+              <div class="flex gap-2 justify-end">
+                <ShadcnButton @click="rightDrawer = false">关闭</ShadcnButton>
+                <ShadcnButton type="primary" @click="rightDrawer = false">确定</ShadcnButton>
+              </div>
+            </template>
+          </ShadcnDrawer>
+
+          <ShadcnDrawer v-model="leftDrawer" glass title="左侧液态玻璃抽屉" position="left" width="400px">
+            <div class="space-y-4">
+              <p class="text-sm text-gray-700">左侧抽屉内容</p>
+            </div>
+            <template #footer>
+              <div class="flex gap-2 justify-end">
+                <ShadcnButton @click="leftDrawer = false">关闭</ShadcnButton>
+              </div>
+            </template>
+          </ShadcnDrawer>
+
+          <ShadcnDrawer v-model="topDrawer" glass title="顶部液态玻璃抽屉" position="top" height="300px">
+            <div class="space-y-4">
+              <p class="text-sm text-gray-700">顶部抽屉内容</p>
+            </div>
+          </ShadcnDrawer>
+
+          <ShadcnDrawer v-model="bottomDrawer" glass title="底部液态玻璃抽屉" position="bottom" height="300px">
+            <div class="space-y-4">
+              <p class="text-sm text-gray-700">底部抽屉内容</p>
+            </div>
+          </ShadcnDrawer>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">暗黑模式</h3>
+      <div class="p-6 bg-gray-900 rounded-lg">
+        <div class="p-6 rounded-lg bg-gradient-to-r from-green-900 to-teal-900">
+          <div class="p-8 rounded-lg bg-gray-800/50 space-y-4">
+            <div class="flex gap-4 flex-wrap">
+              <ShadcnButton @click="darkRightDrawer = true" dark>右侧抽屉</ShadcnButton>
+              <ShadcnButton @click="darkLeftDrawer = true" dark>左侧抽屉</ShadcnButton>
+              <ShadcnButton @click="darkTopDrawer = true" dark>顶部抽屉</ShadcnButton>
+              <ShadcnButton @click="darkBottomDrawer = true" dark>底部抽屉</ShadcnButton>
+            </div>
+
+            <ShadcnDrawer v-model="darkRightDrawer" glass dark title="右侧液态玻璃抽屉" position="right" width="400px">
+              <div class="space-y-4">
+                <p class="text-sm text-gray-300">
+                  这是一个带有液态玻璃效果的右侧抽屉组件（暗黑模式）。
+                </p>
+                <p class="text-sm text-gray-300">
+                  背景具有模糊和半透明特性，同时保持良好的可读性。
+                </p>
+                <div class="space-y-2">
+                  <ShadcnProgress :model-value="75" glass dark status="success" show-label />
+                  <ShadcnProgress :model-value="45" glass dark status="warning" show-label />
+                </div>
+              </div>
+              <template #footer>
+                <div class="flex gap-2 justify-end">
+                  <ShadcnButton @click="darkRightDrawer = false" dark>关闭</ShadcnButton>
+                  <ShadcnButton type="primary" @click="darkRightDrawer = false" dark>确定</ShadcnButton>
+                </div>
+              </template>
+            </ShadcnDrawer>
+
+            <ShadcnDrawer v-model="darkLeftDrawer" glass dark title="左侧液态玻璃抽屉" position="left" width="400px">
+              <div class="space-y-4">
+                <p class="text-sm text-gray-300">左侧抽屉内容</p>
+              </div>
+              <template #footer>
+                <div class="flex gap-2 justify-end">
+                  <ShadcnButton @click="darkLeftDrawer = false" dark>关闭</ShadcnButton>
+                </div>
+              </template>
+            </ShadcnDrawer>
+
+            <ShadcnDrawer v-model="darkTopDrawer" glass dark title="顶部液态玻璃抽屉" position="top" height="300px">
+              <div class="space-y-4">
+                <p class="text-sm text-gray-300">顶部抽屉内容</p>
+              </div>
+            </ShadcnDrawer>
+
+            <ShadcnDrawer v-model="darkBottomDrawer" glass dark title="底部液态玻璃抽屉" position="bottom" height="300px">
+              <div class="space-y-4">
+                <p class="text-sm text-gray-300">底部抽屉内容</p>
+              </div>
+            </ShadcnDrawer>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ShadcnDrawer } from '@/ui/drawer'
+import { ShadcnButton } from '@/ui/button'
+import { ShadcnProgress } from '@/ui/progress'
+
+const rightDrawer = ref(false)
+const leftDrawer = ref(false)
+const topDrawer = ref(false)
+const bottomDrawer = ref(false)
+
+const darkRightDrawer = ref(false)
+const darkLeftDrawer = ref(false)
+const darkTopDrawer = ref(false)
+const darkBottomDrawer = ref(false)
+</script>
diff --git a/src/App.vue b/src/App.vue
index 0d076d27..40b67570 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,63 +1,31 @@
 <template>
-  <div :class="['min-h-screen p-6', isDark ? 'bg-gray-900' : 'bg-white']">
+  <div :class="['min-h-screen px-6 pb-6', isDark ? 'bg-gray-900' : 'bg-white']">
     <ShadcnButton @click="isDark = !isDark" :dark="isDark">
       切换暗黑模式
     </ShadcnButton>
 
-    <div class="space-y-6 my-6">
+    <div class="space-y-6 mt-6">
       <div>
-        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnProgress - 液态玻璃效果</h3>
-        <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-purple-900 to-pink-900' : 'bg-gradient-to-r from-purple-400 to-pink-400']">
-          <div :class="['p-8 rounded-lg space-y-6', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
-            <div class="space-y-4">
-              <div>
-                <p :class="['text-sm mb-2', isDark ? 'text-gray-300' : 'text-gray-700']">基础液态玻璃进度条</p>
-                <ShadcnProgress v-model="progress" glass :dark="isDark" />
-              </div>
-              <div>
-                <p :class="['text-sm mb-2', isDark ? 'text-gray-300' : 'text-gray-700']">带标签</p>
-                <ShadcnProgress v-model="progress" glass :dark="isDark" show-label />
-              </div>
-              <div>
-                <p :class="['text-sm mb-2', isDark ? 'text-gray-300' : 'text-gray-700']">大尺寸</p>
-                <ShadcnProgress v-model="progress" glass :dark="isDark" size="large" show-label />
-              </div>
-              <div>
-                <p :class="['text-sm mb-2', isDark ? 'text-gray-300' : 'text-gray-700']">不同状态</p>
-                <div class="space-y-3">
-                  <ShadcnProgress :model-value="75" glass :dark="isDark" status="success" show-label />
-                  <ShadcnProgress :model-value="45" glass :dark="isDark" status="warning" show-label />
-                  <ShadcnProgress :model-value="30" glass :dark="isDark" status="error" show-label />
+        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnDrawer - 液态玻璃效果</h3>
+        <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-green-900 to-teal-900' : 'bg-gradient-to-r from-green-400 to-teal-400']">
+          <div :class="['p-8 rounded-lg space-y-4', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
+            <ShadcnButton @click="showDrawer = true" :dark="isDark">打开液态玻璃抽屉</ShadcnButton>
+            <ShadcnDrawer v-model="showDrawer" glass :dark="isDark" title="液态玻璃效果抽屉" width="400px">
+              <div class="space-y-4">
+                <p>这是一个带有液态玻璃效果的抽屉组件。</p>
+                <p>背景具有模糊和半透明特性，同时保持良好的可读性。</p>
+                <div class="space-y-2">
+                  <ShadcnProgress :model-value="75" glass :dark="isDark" status="success" show-label/>
+                  <ShadcnProgress :model-value="45" glass :dark="isDark" status="warning" show-label/>
                 </div>
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnTooltip - 液态玻璃效果</h3>
-        <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-cyan-900 to-blue-900' : 'bg-gradient-to-r from-cyan-400 to-blue-400']">
-          <div :class="['p-8 rounded-lg space-y-6', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
-            <div class="flex gap-4 items-center flex-wrap">
-              <ShadcnTooltip glass :dark="isDark" content="这是液态玻璃效果的提示框" position="top">
-                <ShadcnButton :dark="isDark">上方提示</ShadcnButton>
-              </ShadcnTooltip>
-              <ShadcnTooltip glass :dark="isDark" content="这是液态玻璃效果的提示框" position="bottom">
-                <ShadcnButton :dark="isDark">下方提示</ShadcnButton>
-              </ShadcnTooltip>
-              <ShadcnTooltip glass :dark="isDark" content="这是液态玻璃效果的提示框" position="left">
-                <ShadcnButton :dark="isDark">左侧提示</ShadcnButton>
-              </ShadcnTooltip>
-              <ShadcnTooltip glass :dark="isDark" content="这是液态玻璃效果的提示框" position="right">
-                <ShadcnButton :dark="isDark">右侧提示</ShadcnButton>
-              </ShadcnTooltip>
-            </div>
-            <div class="flex gap-4 items-center">
-              <ShadcnTooltip glass :dark="isDark" content="带箭头的液态玻璃效果提示框" arrow>
-                <ShadcnButton :dark="isDark">带箭头提示</ShadcnButton>
-              </ShadcnTooltip>
-            </div>
+              <template #footer>
+                <div class="flex gap-2 justify-end">
+                  <ShadcnButton @click="showDrawer = false" :dark="isDark">关闭</ShadcnButton>
+                  <ShadcnButton type="primary" @click="showDrawer = false" :dark="isDark">确定</ShadcnButton>
+                </div>
+              </template>
+            </ShadcnDrawer>
           </div>
         </div>
       </div>
@@ -68,9 +36,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnTooltip } from "@/ui/tooltip";
 import { ShadcnProgress } from "@/ui/progress";
+import { ShadcnDrawer } from "@/ui/drawer";
 
 const isDark = ref(false)
-const progress = ref(60)
+const showDrawer = ref(false)
 </script>
\ No newline at end of file
diff --git a/src/ui/drawer/ShadcnDrawer.vue b/src/ui/drawer/ShadcnDrawer.vue
index b49e5adc..fb1592cc 100644
--- a/src/ui/drawer/ShadcnDrawer.vue
+++ b/src/ui/drawer/ShadcnDrawer.vue
@@ -18,7 +18,10 @@
       <!-- Drawer body -->
       <div :class="[
                   'shadow-lg flex flex-col transform transition-transform duration-300',
-                  dark ? 'bg-gray-800' : 'bg-white',
+                  glass && 'backdrop-blur-xl backdrop-saturate-150',
+                  glass && 'shadow-lg shadow-black/5',
+                  glass && (dark ? 'bg-white/10 border-l border-r border-b border-white/20' : 'bg-white/30 border-l border-r border-b border-gray-400/40'),
+                  !glass && (dark ? 'bg-gray-800' : 'bg-white'),
                   {
                     'h-full': position === 'left' || position === 'right',
                     'w-full': position === 'top' || position === 'bottom',
@@ -36,9 +39,9 @@
             }">
 
         <!-- Drawer header -->
-        <div :class="['p-2 border-b flex justify-between', dark ? 'border-gray-600' : '']">
+        <div :class="['p-2 border-b flex justify-between', glass ? (dark ? 'border-white/20' : 'border-gray-400/40') : (dark ? 'border-gray-600' : '')]">
           <slot name="header">
-            <div :class="['text-lg font-bold', dark ? 'text-gray-200' : '']">{{ title }}</div>
+            <div :class="['text-lg font-bold', glass ? (dark ? 'text-gray-200' : 'text-gray-800') : (dark ? 'text-gray-200' : '')]">{{ title }}</div>
           </slot>
 
           <div v-if="closable" class="flex items-center cursor-pointer" @click="onClose">
@@ -56,12 +59,12 @@
         </div>
 
         <!-- Drawer body -->
-        <div :class="['flex-grow p-4 overflow-y-auto', dark ? 'text-gray-200' : '']">
+        <div :class="['flex-grow p-4 overflow-y-auto', glass ? (dark ? 'text-gray-200' : 'text-gray-800') : (dark ? 'text-gray-200' : '')]">
           <slot/>
         </div>
 
         <!-- Drawer footer -->
-        <footer v-if="$slots.footer" :class="['p-2 border-t', dark ? 'border-gray-600' : '']">
+        <footer v-if="$slots.footer" :class="['p-2 border-t', glass ? (dark ? 'border-white/20' : 'border-gray-400/40') : (dark ? 'border-gray-600' : '')]">
           <slot name="footer"/>
         </footer>
       </div>
@@ -84,13 +87,15 @@ const props = withDefaults(defineProps<{
   width?: string | number
   height?: string | number
   dark?: boolean
+  glass?: boolean
 }>(), {
   closable: true,
   maskClosable: false,
   position: 'right',
   width: 300,
   height: 300,
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const isVisible = ref(props.modelValue)

From 7fde614bbca9bfb2700920e8ba39eed00c784c1a Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 28 Dec 2025 21:03:45 +0800
Subject: [PATCH 08/10] =?UTF-8?q?fix(=E6=8A=BD=E5=B1=89):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E9=A1=B6=E9=83=A8=E7=A9=BA=E7=99=BD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/drawer/ShadcnDrawer.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/ui/drawer/ShadcnDrawer.vue b/src/ui/drawer/ShadcnDrawer.vue
index fb1592cc..6463dd27 100644
--- a/src/ui/drawer/ShadcnDrawer.vue
+++ b/src/ui/drawer/ShadcnDrawer.vue
@@ -4,7 +4,7 @@
               leave-active-class="transition-opacity duration-300 ease-in-out"
               leave-to-class="opacity-0">
     <div v-if="isVisible"
-         :class="['fixed inset-0 z-50 flex',
+         :class="['fixed inset-0 z-50 flex !mt-0',
                  {
                    'justify-start': position === 'left',
                    'justify-end': position === 'right',
@@ -20,7 +20,10 @@
                   'shadow-lg flex flex-col transform transition-transform duration-300',
                   glass && 'backdrop-blur-xl backdrop-saturate-150',
                   glass && 'shadow-lg shadow-black/5',
-                  glass && (dark ? 'bg-white/10 border-l border-r border-b border-white/20' : 'bg-white/30 border-l border-r border-b border-gray-400/40'),
+                  glass && position === 'top' && (dark ? 'bg-white/10 border-l border-r border-b border-white/20' : 'bg-white/30 border-l border-r border-b border-gray-400/40'),
+                  glass && position === 'bottom' && (dark ? 'bg-white/10 border-l border-r border-t border-white/20' : 'bg-white/30 border-l border-r border-t border-gray-400/40'),
+                  glass && position === 'left' && (dark ? 'bg-white/10 border-r border-t border-b border-white/20' : 'bg-white/30 border-r border-t border-b border-gray-400/40'),
+                  glass && position === 'right' && (dark ? 'bg-white/10 border-l border-t border-b border-white/20' : 'bg-white/30 border-l border-t border-b border-gray-400/40'),
                   !glass && (dark ? 'bg-gray-800' : 'bg-white'),
                   {
                     'h-full': position === 'left' || position === 'right',
@@ -39,7 +42,11 @@
             }">
 
         <!-- Drawer header -->
-        <div :class="['p-2 border-b flex justify-between', glass ? (dark ? 'border-white/20' : 'border-gray-400/40') : (dark ? 'border-gray-600' : '')]">
+        <div :class="[
+          'border-b flex justify-between !mt-0',
+          position === 'top' ? 'px-2 pb-2' : (position === 'bottom' ? 'px-2 pt-2' : 'p-2'),
+          glass ? (dark ? 'border-white/20' : 'border-gray-400/40') : (dark ? 'border-gray-600' : '')
+        ]">
           <slot name="header">
             <div :class="['text-lg font-bold', glass ? (dark ? 'text-gray-200' : 'text-gray-800') : (dark ? 'text-gray-200' : '')]">{{ title }}</div>
           </slot>

From 3ce9e11076555b09ec4430ba2e59948e875daf4b Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 28 Dec 2025 21:08:26 +0800
Subject: [PATCH 09/10] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Message=20=E6=B6=B2=E6=80=81=E7=8E=BB=E7=92=83?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/view/message.md  | 53 +++++++++++++++++++++++++++++++-
 src/App.vue                      | 22 +++++++++++--
 src/ui/message/ShadcnMessage.vue | 14 ++++++++-
 3 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/docs/components/view/message.md b/docs/components/view/message.md
index 495f29ce..a19952e9 100644
--- a/docs/components/view/message.md
+++ b/docs/components/view/message.md
@@ -256,6 +256,46 @@ export default {
 
 :::
 
+## 液态玻璃效果 (glass)
+
+<CodeRunner title="液态玻璃效果 (glass)">
+  <div class="p-6 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400">
+    <div class="p-8 rounded-lg bg-white/50">
+      <ShadcnButton @click="glassMessage" :dark="darkMode">显示液态玻璃消息</ShadcnButton>
+    </div>
+  </div>
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+  <div class="p-6 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400">
+    <div class="p-8 rounded-lg bg-white/50">
+      <ShadcnButton @click="glassMessage">显示液态玻璃消息</ShadcnButton>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    glassMessage() {
+      this.$Message.info({
+        content: '这是一个液态玻璃效果的消息',
+        type: 'success',
+        showIcon: true,
+        glass: true,
+        duration: 3
+      })
+    }
+  }
+}
+</script>
+```
+
+:::
+
 ## 消息 (Message) 属性
 
 <ApiTable title="消息 (Message) 属性"
@@ -267,6 +307,8 @@ export default {
             ['type', '组件的类型', 'string', 'info', 'info | success | warning | error | loading'],
             ['background', '是否显示背景，仅在设置类型时有效', 'boolean', 'false', '-'],
             ['closeable', '是否显示关闭按钮', 'boolean', 'false', '-'],
+            ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'],
+            ['dark', '是否启用暗黑模式', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
@@ -348,7 +390,16 @@ return {darkMode}
             duration: 0,
             closable: true
         });
-      }
+      },
+    glassMessage() {
+      this.$Message.info({
+        content: '这是一个液态玻璃效果的消息',
+        type: 'success',
+        showIcon: true,
+        glass: true,
+        duration: 3
+      })
+    }
   }
 }
 </script>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 40b67570..ace15569 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,20 @@
 <template>
   <div :class="['min-h-screen px-6 pb-6', isDark ? 'bg-gray-900' : 'bg-white']">
-    <ShadcnButton @click="isDark = !isDark" :dark="isDark">
+    <ShadcnButton @click="isDark = !isDark" :dark="isDark" class="mt-2">
       切换暗黑模式
     </ShadcnButton>
 
     <div class="space-y-6 mt-6">
+      <div>
+        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnMessage - 液态玻璃效果</h3>
+        <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-blue-900 to-purple-900' : 'bg-gradient-to-r from-blue-400 to-purple-400']">
+          <div :class="['p-8 rounded-lg space-y-4', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
+            <ShadcnButton @click="showMessage" :dark="isDark">显示液态玻璃消息</ShadcnButton>
+            <ShadcnMessage v-if="messageVisible" glass :dark="isDark" type="success" content="液态玻璃效果消息" show-icon :duration="0" closable />
+          </div>
+        </div>
+      </div>
+
       <div>
         <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnDrawer - 液态玻璃效果</h3>
         <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-green-900 to-teal-900' : 'bg-gradient-to-r from-green-400 to-teal-400']">
@@ -21,8 +31,8 @@
               </div>
               <template #footer>
                 <div class="flex gap-2 justify-end">
-                  <ShadcnButton @click="showDrawer = false" :dark="isDark">关闭</ShadcnButton>
-                  <ShadcnButton type="primary" @click="showDrawer = false" :dark="isDark">确定</ShadcnButton>
+                  <ShadcnButton @click="showDrawer = false" glass :dark="isDark">关闭</ShadcnButton>
+                  <ShadcnButton type="primary" @click="showDrawer = false" glass :dark="isDark">确定</ShadcnButton>
                 </div>
               </template>
             </ShadcnDrawer>
@@ -38,7 +48,13 @@ import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
 import { ShadcnProgress } from "@/ui/progress";
 import { ShadcnDrawer } from "@/ui/drawer";
+import { ShadcnMessage } from "@/ui/message";
 
 const isDark = ref(false)
 const showDrawer = ref(false)
+const messageVisible = ref(false)
+
+const showMessage = () => {
+  messageVisible.value = true
+}
 </script>
\ No newline at end of file
diff --git a/src/ui/message/ShadcnMessage.vue b/src/ui/message/ShadcnMessage.vue
index 8709e0ad..1b1eea36 100644
--- a/src/ui/message/ShadcnMessage.vue
+++ b/src/ui/message/ShadcnMessage.vue
@@ -2,6 +2,8 @@
   <div v-if="visible"
        :class="['fixed flex space-x-2 items-center top-5 left-1/2 border px-4 py-2 rounded-md shadow-md text-sm z-50',
                 isLeaving ? 'animate-slide-up' : 'animate-slide-down',
+                glass && 'backdrop-blur-xl backdrop-saturate-150',
+                glass && 'shadow-lg shadow-black/5',
                 [findBackgroundClass()],
                 [findBorderAndTextClass()]
         ]">
@@ -44,13 +46,15 @@ const props = withDefaults(defineProps<{
   closable?: boolean
   onClose?: () => void
   dark?: boolean
+  glass?: boolean
 }>(), {
   duration: 1.5,
   showIcon: false,
   type: 'info',
   background: false,
   closable: false,
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const visible = ref(true)
@@ -101,6 +105,10 @@ const findClass = () => {
 
 // Set background color, which depends on type
 const findBackgroundClass = () => {
+  if (props.glass) {
+    return props.dark ? 'bg-white/10' : 'bg-white/30'
+  }
+
   if (props.background) {
     if (props.dark) {
       switch (props.type) {
@@ -135,6 +143,10 @@ const findBackgroundClass = () => {
 
 // Set border and text color, which depends on type
 const findBorderAndTextClass = () => {
+  if (props.glass) {
+    return props.dark ? 'border-white/20 text-gray-200' : 'border-gray-400/40 text-gray-800'
+  }
+
   if (props.background) {
     if (props.dark) {
       switch (props.type) {

From 2b157a8b484eddbe16cfcce81928f90fa535a9f5 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 28 Dec 2025 21:13:27 +0800
Subject: [PATCH 10/10] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Table=20=E6=B6=B2=E6=80=81=E7=8E=BB=E7=92=83?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/view/table.md | 50 +++++++++++++++++++++++++
 src/App.vue                   | 70 ++++++++++++++++-------------------
 src/ui/table/ShadcnTable.vue  | 13 +++++--
 src/ui/table/types.ts         |  1 +
 4 files changed, 93 insertions(+), 41 deletions(-)

diff --git a/docs/components/view/table.md b/docs/components/view/table.md
index cc532438..1f04d2fd 100644
--- a/docs/components/view/table.md
+++ b/docs/components/view/table.md
@@ -433,6 +433,54 @@ const rowClick = (row: any, index: number) => {
 
 :::
 
+## 液态玻璃效果 (glass)
+
+::: raw
+
+<CodeRunner title="液态玻璃效果 (glass)">
+  <div class="p-6 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400">
+    <div class="p-8 rounded-lg bg-white/50">
+      <ShadcnTable :columns="columns" :data="data" glass :dark="darkMode" border stripe />
+    </div>
+  </div>
+</CodeRunner>
+
+:::
+
+::: details 查看代码
+
+```vue
+<template>
+  <div class="p-6 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400">
+    <div class="p-8 rounded-lg bg-white/50">
+      <ShadcnTable :columns="columns" :data="data" glass :dark="darkMode" border stripe />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+
+const columns = [
+  { label: 'Name', key: 'name' },
+  { label: 'Address', key: 'address' },
+  { label: 'Age', key: 'age' }
+]
+const data = [
+  { name: 'John Doe', address: 'New York No. 1 Lake Park', age: 32 },
+  { name: 'Joe Black', address: 'Sidney No. 1 Lake Park', age: 42 },
+  { name: 'Jim Green', address: 'London No. 1 Lake Park', age: 32 },
+  { name: 'Jim Red', address: 'London No. 2 Lake Park', age: 32 }
+]
+</script>
+```
+
+:::
+
 ## 表格 (Table) 属性
 
 <ApiTable title="表格 (Table) 属性"
@@ -446,6 +494,8 @@ const rowClick = (row: any, index: number) => {
         ['height', '组件的高度', 'string | number', 'auto', '-'],
         ['maxHeight', '组件的最大高度', 'string | number', '300', '-'],
         ['size', '组件的尺寸', 'enum', 'default', 'small | default | large'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'],
+        ['dark', '是否启用暗黑模式', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
diff --git a/src/App.vue b/src/App.vue
index ace15569..699dc126 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,36 +6,19 @@
 
     <div class="space-y-6 mt-6">
       <div>
-        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnMessage - 液态玻璃效果</h3>
+        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnTable - 液态玻璃效果</h3>
         <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-blue-900 to-purple-900' : 'bg-gradient-to-r from-blue-400 to-purple-400']">
-          <div :class="['p-8 rounded-lg space-y-4', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
-            <ShadcnButton @click="showMessage" :dark="isDark">显示液态玻璃消息</ShadcnButton>
-            <ShadcnMessage v-if="messageVisible" glass :dark="isDark" type="success" content="液态玻璃效果消息" show-icon :duration="0" closable />
-          </div>
-        </div>
-      </div>
-
-      <div>
-        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnDrawer - 液态玻璃效果</h3>
-        <div :class="['p-6 rounded-lg', isDark ? 'bg-gradient-to-r from-green-900 to-teal-900' : 'bg-gradient-to-r from-green-400 to-teal-400']">
-          <div :class="['p-8 rounded-lg space-y-4', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
-            <ShadcnButton @click="showDrawer = true" :dark="isDark">打开液态玻璃抽屉</ShadcnButton>
-            <ShadcnDrawer v-model="showDrawer" glass :dark="isDark" title="液态玻璃效果抽屉" width="400px">
-              <div class="space-y-4">
-                <p>这是一个带有液态玻璃效果的抽屉组件。</p>
-                <p>背景具有模糊和半透明特性，同时保持良好的可读性。</p>
-                <div class="space-y-2">
-                  <ShadcnProgress :model-value="75" glass :dark="isDark" status="success" show-label/>
-                  <ShadcnProgress :model-value="45" glass :dark="isDark" status="warning" show-label/>
-                </div>
-              </div>
-              <template #footer>
-                <div class="flex gap-2 justify-end">
-                  <ShadcnButton @click="showDrawer = false" glass :dark="isDark">关闭</ShadcnButton>
-                  <ShadcnButton type="primary" @click="showDrawer = false" glass :dark="isDark">确定</ShadcnButton>
-                </div>
-              </template>
-            </ShadcnDrawer>
+          <div :class="['p-8 rounded-lg', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
+            <ShadcnTable
+              :columns="columns"
+              :data="tableData"
+              glass
+              :dark="isDark"
+              border
+              stripe
+              width="100%"
+              min-height="400"
+            />
           </div>
         </div>
       </div>
@@ -46,15 +29,26 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnProgress } from "@/ui/progress";
-import { ShadcnDrawer } from "@/ui/drawer";
-import { ShadcnMessage } from "@/ui/message";
+import { ShadcnTable } from "@/ui/table";
 
 const isDark = ref(false)
-const showDrawer = ref(false)
-const messageVisible = ref(false)
 
-const showMessage = () => {
-  messageVisible.value = true
-}
-</script>
\ No newline at end of file
+const columns = [
+  { label: 'Name', key: 'name', width: 150 },
+  { label: 'Email', key: 'email', width: 200 },
+  { label: 'Role', key: 'role', width: 120 },
+  { label: 'Status', key: 'status', width: 100 },
+  { label: 'Action', key: 'action', width: 150 }
+]
+
+const tableData = [
+  { name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active', action: 'Edit' },
+  { name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active', action: 'Edit' },
+  { name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'Inactive', action: 'Edit' },
+  { name: 'Alice Williams', email: 'alice@example.com', role: 'Manager', status: 'Active', action: 'Edit' },
+  { name: 'Charlie Brown', email: 'charlie@example.com', role: 'User', status: 'Active', action: 'Edit' },
+  { name: 'David Lee', email: 'david@example.com', role: 'Admin', status: 'Inactive', action: 'Edit' },
+  { name: 'Emma Davis', email: 'emma@example.com', role: 'User', status: 'Active', action: 'Edit' },
+  { name: 'Frank Miller', email: 'frank@example.com', role: 'Manager', status: 'Active', action: 'Edit' }
+]
+</script>
diff --git a/src/ui/table/ShadcnTable.vue b/src/ui/table/ShadcnTable.vue
index 86e23bcd..f7e0ea84 100644
--- a/src/ui/table/ShadcnTable.vue
+++ b/src/ui/table/ShadcnTable.vue
@@ -1,9 +1,15 @@
 <template>
-  <div :class="['w-full relative', dark ? 'border-gray-600' : 'border-gray-200', border && 'border']"
+  <div :class="['w-full relative',
+                glass && 'backdrop-blur-xl backdrop-saturate-150',
+                glass && 'shadow-lg shadow-black/5',
+                glass && (dark ? 'bg-white/10 border-white/20' : 'bg-white/30 border-gray-400/40'),
+                !glass && (dark ? 'border-gray-600' : 'border-gray-200'),
+                border && 'border']"
        :style="{ width: calcSize(width), height: calcSize(height), minHeight: calcSize(minHeight) }">
     <div class="overflow-auto relative h-full">
       <div class="min-w-full inline-block align-middle">
-        <table :class="['min-w-full divide-y', dark ? 'divide-gray-600' : 'divide-gray-200']">
+        <table :class="['min-w-full divide-y',
+                        glass ? (dark ? 'divide-white/20' : 'divide-gray-400/40') : (dark ? 'divide-gray-600' : 'divide-gray-200')]">
           <slot>
             <ShadcnTableHeader :dark="dark">
               <ShadcnTableRow :dark="dark">
@@ -85,7 +91,8 @@ const props = withDefaults(defineProps<TableProps>(), {
   height: 'auto',
   minHeight: 300,
   size: 'default',
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const slots = useSlots()
diff --git a/src/ui/table/types.ts b/src/ui/table/types.ts
index a42eea5f..5c7bbd09 100644
--- a/src/ui/table/types.ts
+++ b/src/ui/table/types.ts
@@ -26,6 +26,7 @@ export interface TableProps
     minHeight?: string | number
     size?: keyof typeof TableCellSize
     dark?: boolean
+    glass?: boolean
 }
 
 export enum TableCellSize