From 80bf8b038e30f2069379fb785c34c3f0e9735e84 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 29 Dec 2025 18:11:49 +0800
Subject: [PATCH 01/14] =?UTF-8?q?fix(=E8=8F=9C=E5=8D=95):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E8=8F=9C=E5=8D=95=E5=AE=BD=E5=BA=A6=E4=B8=8D=E4=B8=80?=
 =?UTF-8?q?=E8=87=B4=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        | 61 +++++++++++++-------------
 src/ui/markdown/ShadcnMarkdown.vue | 64 +++++++++++++++++++++++++--
 src/ui/menu/ShadcnMenuItem.vue     | 10 ++---
 src/ui/menu/ShadcnMenuSub.vue      | 69 +++++++++++++++++++++++++-----
 4 files changed, 155 insertions(+), 49 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 699dc126..ceeca004 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,49 +6,52 @@
 
     <div class="space-y-6 mt-6">
       <div>
-        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnTable - 液态玻璃效果</h3>
+        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnMarkdown - 液态玻璃效果</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', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
-            <ShadcnTable
-              :columns="columns"
-              :data="tableData"
-              glass
-              :dark="isDark"
-              border
-              stripe
-              width="100%"
-              min-height="400"
-            />
+            <ShadcnMarkdown v-model="content" mode="split" glass/>
           </div>
         </div>
       </div>
     </div>
+
+    <ShadcnMenu :dark="isDark" direction="horizontal">
+      <ShadcnMenuItem name="home">
+        <template #icon>
+          <ShadcnIcon icon="Home"/>
+        </template>
+        Home
+      </ShadcnMenuItem>
+      <ShadcnMenuSub name="profileSub">
+        <template #title>Profile</template>
+        <template #icon>
+          <ShadcnIcon icon="User"/>
+        </template>
+        <ShadcnMenuGroup name="settingGroup" >
+          <template #title>Settings</template>
+          <ShadcnMenuItem name="username">Change</ShadcnMenuItem>
+          <ShadcnMenuItem name="password">Change Password</ShadcnMenuItem>
+        </ShadcnMenuGroup>
+      </ShadcnMenuSub>
+      <ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
+      <ShadcnMenuItem name="logout">
+        <template #icon>
+          <ShadcnIcon icon="LogOut"/>
+        </template>
+        Logout
+      </ShadcnMenuItem>
+    </ShadcnMenu>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnTable } from "@/ui/table";
+import { ShadcnMarkdown } from "@/ui/markdown";
 
 const isDark = ref(false)
 
-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 content = ref(`# 液态玻璃效果
 
-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' }
-]
+支持液态玻璃效果的 Markdown 编辑器。`)
 </script>
diff --git a/src/ui/markdown/ShadcnMarkdown.vue b/src/ui/markdown/ShadcnMarkdown.vue
index 2feb76b0..7c28d526 100644
--- a/src/ui/markdown/ShadcnMarkdown.vue
+++ b/src/ui/markdown/ShadcnMarkdown.vue
@@ -6,8 +6,8 @@
     props.glass && 'shadow-lg shadow-black/5',
     !props.glass && (props.dark ? 'bg-gray-800 border border-gray-700' : 'bg-white border border-gray-200')
   ]">
-    <div v-if="props.mode === 'split'" class="grid grid-cols-2 divide-x" :class="props.dark ? 'divide-gray-700' : 'divide-gray-200'">
-      <div class="flex flex-col">
+    <div v-if="props.mode === 'split'" class="flex relative" :class="props.dark ? 'divide-gray-700' : 'divide-gray-200'">
+      <div class="flex flex-col" :style="{ width: `${leftWidth}%` }">
         <div :class="['px-3 py-2 text-sm font-medium border-b', props.dark ? 'border-gray-700 text-gray-300' : 'border-gray-200 text-gray-700']">
           编辑
         </div>
@@ -21,7 +21,26 @@
                   ]"
                   @input="handleInput"/>
       </div>
-      <div class="flex flex-col">
+
+      <!-- 可拖拽分隔条 -->
+      <div
+        ref="dividerRef"
+        :class="[
+          'relative w-1 cursor-col-resize group',
+          props.dark ? 'bg-gray-700 hover:bg-blue-500' : 'bg-gray-200 hover:bg-blue-500',
+          'transition-colors'
+        ]"
+        @mousedown="startDrag"
+      >
+        <div :class="[
+          'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+          'w-1 h-12 rounded-full',
+          props.dark ? 'bg-gray-600 group-hover:bg-blue-400' : 'bg-gray-300 group-hover:bg-blue-400',
+          'transition-colors'
+        ]"/>
+      </div>
+
+      <div class="flex flex-col flex-1">
         <div :class="['px-3 py-2 text-sm font-medium border-b', props.dark ? 'border-gray-700 text-gray-300' : 'border-gray-200 text-gray-700']">
           预览
         </div>
@@ -53,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { marked } from 'marked'
 import { MarkdownProps, MarkdownEmits } from '@/ui/markdown/types.ts'
 
@@ -69,6 +88,9 @@ const props = withDefaults(defineProps<MarkdownProps>(), {
 })
 
 const internalValue = ref(props.modelValue)
+const leftWidth = ref(50)
+const dividerRef = ref<HTMLElement | null>(null)
+const isDragging = ref(false)
 
 watch(() => props.modelValue, (newValue) => {
   internalValue.value = newValue
@@ -135,4 +157,38 @@ const renderedContent = computed(() => {
     return `<p class="text-red-500">Markdown 解析错误</p>`
   }
 })
+
+const startDrag = (e: MouseEvent) => {
+  isDragging.value = true
+  e.preventDefault()
+}
+
+const onDrag = (e: MouseEvent) => {
+  if (!isDragging.value || !dividerRef.value) return
+
+  const container = dividerRef.value.parentElement
+  if (!container) return
+
+  const containerRect = container.getBoundingClientRect()
+  const newWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100
+
+  // 限制拖拽范围在 20%-80% 之间
+  if (newWidth >= 20 && newWidth <= 80) {
+    leftWidth.value = newWidth
+  }
+}
+
+const stopDrag = () => {
+  isDragging.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('mousemove', onDrag)
+  document.addEventListener('mouseup', stopDrag)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousemove', onDrag)
+  document.removeEventListener('mouseup', stopDrag)
+})
 </script>
diff --git a/src/ui/menu/ShadcnMenuItem.vue b/src/ui/menu/ShadcnMenuItem.vue
index 07f88d99..a2f3c049 100644
--- a/src/ui/menu/ShadcnMenuItem.vue
+++ b/src/ui/menu/ShadcnMenuItem.vue
@@ -1,11 +1,10 @@
 <template>
   <ShadcnLink v-if="to"
               :class="[
-                   'px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer',
+                   'flex items-center justify-between px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer',
                    dark ? 'hover:bg-gray-700 focus:bg-gray-700' : 'hover:bg-gray-100 focus:bg-gray-100',
                    isActive ? (dark ? 'bg-gray-700' : 'bg-gray-100') : '',
-                   dark ? 'text-gray-200' : '',
-                   isHorizontal ? 'inline-flex' : 'flex'
+                   dark ? 'text-gray-200' : ''
               ]"
               :dark="dark"
               :data-name="name"
@@ -22,11 +21,10 @@
   </ShadcnLink>
   <div v-else
        :class="[
-             'px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer',
+             'flex items-center justify-between px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer',
              dark ? 'hover:bg-gray-700 focus:bg-gray-700' : 'hover:bg-gray-100 focus:bg-gray-100',
              isActive ? (dark ? 'bg-gray-700' : 'bg-gray-100') : '',
-             dark ? 'text-gray-200' : '',
-             isHorizontal ? 'inline-flex' : 'flex'
+             dark ? 'text-gray-200' : ''
        ]"
        :data-name="name"
        :data-parent="parentName"
diff --git a/src/ui/menu/ShadcnMenuSub.vue b/src/ui/menu/ShadcnMenuSub.vue
index 8232cb95..38032036 100644
--- a/src/ui/menu/ShadcnMenuSub.vue
+++ b/src/ui/menu/ShadcnMenuSub.vue
@@ -25,16 +25,17 @@
               fill-rule="evenodd"/>
       </svg>
     </div>
-    <Transition enter-active-class="transition duration-100 ease-out"
-                enter-from-class="transform scale-95 opacity-0"
-                enter-to-class="transform scale-100 opacity-100"
-                leave-active-class="transition duration-75 ease-in"
-                leave-from-class="transform scale-100 opacity-100"
-                leave-to-class="transform scale-95 opacity-0">
+    <Transition
+      :name="isHorizontal ? 'menu-fade' : 'menu-slide'"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @leave="onLeave"
+      @after-leave="onAfterLeave">
       <div v-show="isExpanded"
+           ref="menuContent"
            :class="[
-            'space-y-1',
-            isHorizontal ? (dark ? 'absolute left-0 mt-2.5 bg-gray-800 w-fit shadow-lg px-2 py-2 z-20' : 'absolute left-0 mt-2.5 bg-white w-fit shadow-lg px-2 py-2 z-20') : 'pl-4 mt-1'
+            'space-y-1 overflow-hidden',
+            isHorizontal ? (dark ? 'absolute left-0 mt-2.5 bg-gray-800 w-fit shadow-lg px-2 py-2 z-20 rounded-md' : 'absolute left-0 mt-2.5 bg-white w-fit shadow-lg px-2 py-2 z-20 rounded-md') : 'pl-4 mt-1'
           ]">
         <slot/>
       </div>
@@ -67,6 +68,7 @@ const isExpanded = computed(() => menuContext.expandedKey.value === props.name)
 const dark = computed(() => menuContext.dark || false)
 
 const hasActiveChild = ref(false)
+const menuContent = ref<HTMLElement | null>(null)
 
 const checkActiveChild = () => {
   const slotElements = document.querySelectorAll(`[data-parent="${ props.name }"]`)
@@ -88,14 +90,61 @@ onMounted(() => {
 })
 
 const toggleExpand = () => {
-  // If the current expanded item is this component, collapse it; otherwise expand it
   if (menuContext.expandedKey.value === props.name) {
     menuContext.setExpandedKey(null)
-    // Keep the selected state when manually folding, if there is still a selected item in the subitem
     checkActiveChild()
   }
   else {
     menuContext.setExpandedKey(props.name)
   }
 }
+
+const onEnter = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = '0'
+  element.style.opacity = '0'
+}
+
+const onAfterEnter = (el: Element) => {
+  const element = el as HTMLElement
+  const height = element.scrollHeight
+  element.style.transition = 'height 0.3s ease, opacity 0.2s ease'
+  element.style.height = `${height}px`
+  element.style.opacity = '1'
+
+  setTimeout(() => {
+    element.style.height = 'auto'
+  }, 300)
+}
+
+const onLeave = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = `${element.scrollHeight}px`
+  element.style.transition = 'height 0.3s ease, opacity 0.2s ease'
+
+  requestAnimationFrame(() => {
+    element.style.height = '0'
+    element.style.opacity = '0'
+  })
+}
+
+const onAfterLeave = (el: Element) => {
+  const element = el as HTMLElement
+  element.style.height = ''
+  element.style.opacity = ''
+  element.style.transition = ''
+}
 </script>
+
+<style scoped>
+.menu-fade-enter-active,
+.menu-fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.menu-fade-enter-from,
+.menu-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>

From 4832b74847fbdfb14d27148874775afff59ab78e Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 30 Dec 2025 15:01:25 +0800
Subject: [PATCH 02/14] =?UTF-8?q?feat(=E8=8F=9C=E5=8D=95):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=B5=8C=E5=A5=97=E8=8F=9C=E5=8D=95=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/navigation/menu.md | 133 ++++++++++++++++++++++--
 src/App.vue                        |  39 +++----
 src/ui/menu/ShadcnMenu.vue         |  61 +++++++++--
 src/ui/menu/ShadcnMenuGroup.vue    |   2 +-
 src/ui/menu/ShadcnMenuItem.vue     |  18 ++--
 src/ui/menu/ShadcnMenuSub.vue      | 157 ++++++++++++++++++-----------
 6 files changed, 308 insertions(+), 102 deletions(-)

diff --git a/docs/components/navigation/menu.md b/docs/components/navigation/menu.md
index 213bda0e..b934731b 100644
--- a/docs/components/navigation/menu.md
+++ b/docs/components/navigation/menu.md
@@ -159,6 +159,14 @@ title: 菜单 (Menu)
             <template #title>Settings</template>
             <ShadcnMenuItem name="username">Change Username</ShadcnMenuItem>
             <ShadcnMenuItem name="password">Change Password</ShadcnMenuItem>
+            <ShadcnMenuSub name="securitySub">
+              <template #title>Security</template>
+              <template #icon>
+                <ShadcnIcon icon="Shield"/>
+              </template>
+              <ShadcnMenuItem name="2fa">Two-Factor Auth</ShadcnMenuItem>
+              <ShadcnMenuItem name="sessions">Active Sessions</ShadcnMenuItem>
+            </ShadcnMenuSub>
           </ShadcnMenuGroup>
         </ShadcnMenuSub>
         <ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
@@ -206,14 +214,126 @@ title: 菜单 (Menu)
 
 :::
 
+## 触发方式 (trigger)
+
+支持点击和悬停两种触发方式。
+
+<CodeRunner title="触发方式 - 悬停">
+    <ShadcnMenu direction="horizontal" trigger="hover" :dark="darkMode">
+        <ShadcnMenuItem name="home">
+          <template #icon>
+            <ShadcnIcon icon="Home"/>
+          </template>
+          Home
+        </ShadcnMenuItem>
+        <ShadcnMenuSub name="profileSub">
+          <template #title>Profile</template>
+          <template #icon>
+            <ShadcnIcon icon="User"/>
+          </template>
+          <ShadcnMenuGroup name="settingGroup">
+            <template #title>Settings</template>
+            <ShadcnMenuItem name="username">Change Username</ShadcnMenuItem>
+            <ShadcnMenuItem name="password">Change Password</ShadcnMenuItem>
+          </ShadcnMenuGroup>
+        </ShadcnMenuSub>
+        <ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
+      </ShadcnMenu>
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+  <ShadcnMenu direction="horizontal" trigger="hover">
+    <ShadcnMenuItem name="home">
+      <template #icon>
+        <ShadcnIcon icon="Home"/>
+      </template>
+      Home
+    </ShadcnMenuItem>
+    <ShadcnMenuSub name="profileSub">
+      <template #title>Profile</template>
+      <template #icon>
+        <ShadcnIcon icon="User"/>
+      </template>
+      <ShadcnMenuGroup name="settingGroup">
+        <template #title>Settings</template>
+        <ShadcnMenuItem name="username">Change Username</ShadcnMenuItem>
+        <ShadcnMenuItem name="password">Change Password</ShadcnMenuItem>
+      </ShadcnMenuGroup>
+    </ShadcnMenuSub>
+    <ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
+  </ShadcnMenu>
+</template>
+```
+
+:::
+
+## 自定义插槽
+
+ShadcnMenuSub 支持 `header` 插槽，可以完全自定义子菜单的标题部分。
+
+<CodeRunner title="自定义插槽">
+    <ShadcnMenu direction="horizontal" :dark="darkMode">
+        <ShadcnMenuItem name="home">
+          <template #icon>
+            <ShadcnIcon icon="Home"/>
+          </template>
+          Home
+        </ShadcnMenuItem>
+        <ShadcnMenuSub name="profileSub">
+          <template #header="{ expanded, hasActiveChild }">
+            <div class="flex items-center gap-2">
+              <ShadcnIcon icon="User"/>
+              <span :class="{ 'font-bold': hasActiveChild }">Custom Profile</span>
+              <span v-if="expanded" class="text-xs">▼</span>
+            </div>
+          </template>
+          <ShadcnMenuItem name="username">Change Username</ShadcnMenuItem>
+          <ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
+        </ShadcnMenuSub>
+      </ShadcnMenu>
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+  <ShadcnMenu direction="horizontal">
+    <ShadcnMenuItem name="home">
+      <template #icon>
+        <ShadcnIcon icon="Home"/>
+      </template>
+      Home
+    </ShadcnMenuItem>
+    <ShadcnMenuSub name="profileSub">
+      <template #header="{ expanded, hasActiveChild }">
+        <div class="flex items-center gap-2">
+          <ShadcnIcon icon="User"/>
+          <span :class="{ 'font-bold': hasActiveChild }">Custom Profile</span>
+          <span v-if="expanded" class="text-xs">▼</span>
+        </div>
+      </template>
+      <ShadcnMenuItem name="username">Change Username</ShadcnMenuItem>
+      <ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
+    </ShadcnMenuSub>
+  </ShadcnMenu>
+</template>
+```
+
+:::
+
 ## 菜单 (Menu) 属性
 
 <ApiTable title="菜单 (Menu) 属性"
     :headers="['属性', '描述', '类型', '默认值', '支持列表']"
     :columns="[
         ['modelValue', '当前选中的菜单值', 'string', '-', '-'],
-        ['width', '菜单的宽度', 'string | number', '300', '-'],
-        ['direction', '菜单的方向', 'string', 'horizontal', 'horizontal | vertical'],
+        ['width', '菜单的宽度', 'string | number', '200', '-'],
+        ['direction', '菜单的方向', 'string', 'vertical', 'horizontal | vertical'],
+        ['dark', '暗黑模式', 'boolean', 'false', '-'],
+        ['trigger', '子菜单触发方式', 'string', 'click', 'click | hover'],
     ]">
 </ApiTable>
 
@@ -271,11 +391,12 @@ title: 菜单 (Menu)
 ## 菜单子项 (Menu Sub) 插槽
 
 <ApiTable title="菜单子项 (Menu Sub) 插槽"
-    :headers="['插槽', '描述']"
+    :headers="['插槽', '描述', '参数']"
     :columns="[
-        ['default', '默认插槽'],
-        ['icon', '图标插槽'],
-        ['title', '标题插槽'],
+        ['default', '默认插槽', '-'],
+        ['icon', '图标插槽', '-'],
+        ['title', '标题插槽', '-'],
+        ['header', '完全自定义标题部分', '{ expanded: boolean, hasActiveChild: boolean }'],
     ]">
 </ApiTable>
 
diff --git a/src/App.vue b/src/App.vue
index ceeca004..181a2325 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,18 +4,7 @@
       切换暗黑模式
     </ShadcnButton>
 
-    <div class="space-y-6 mt-6">
-      <div>
-        <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-gray-200' : '']">ShadcnMarkdown - 液态玻璃效果</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', isDark ? 'bg-gray-800/50' : 'bg-white/50']">
-            <ShadcnMarkdown v-model="content" mode="split" glass/>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <ShadcnMenu :dark="isDark" direction="horizontal">
+    <ShadcnMenu direction="horizontal" :dark="isDark">
       <ShadcnMenuItem name="home">
         <template #icon>
           <ShadcnIcon icon="Home"/>
@@ -27,11 +16,30 @@
         <template #icon>
           <ShadcnIcon icon="User"/>
         </template>
-        <ShadcnMenuGroup name="settingGroup" >
+        <ShadcnMenuGroup name="settingGroup">
           <template #title>Settings</template>
           <ShadcnMenuItem name="username">Change</ShadcnMenuItem>
           <ShadcnMenuItem name="password">Change Password</ShadcnMenuItem>
+          <ShadcnMenuSub name="securitySub">
+            <template #title>Security</template>
+            <template #icon>
+              <ShadcnIcon icon="Shield"/>
+            </template>
+            <ShadcnMenuItem name="2fa">Two-Factor Auth</ShadcnMenuItem>
+            <ShadcnMenuItem name="sessions">Active Sessions</ShadcnMenuItem>
+            <ShadcnMenuItem name="devices">Trusted Devices</ShadcnMenuItem>
+            <ShadcnMenuSub name="securitySub1">
+              <template #title>Security</template>
+              <template #icon>
+                <ShadcnIcon icon="Shield"/>
+              </template>
+              <ShadcnMenuItem name="2fa">Two-Factor Auth</ShadcnMenuItem>
+              <ShadcnMenuItem name="sessions">Active Sessions</ShadcnMenuItem>
+              <ShadcnMenuItem name="devices">Trusted Devices</ShadcnMenuItem>
+            </ShadcnMenuSub>
+          </ShadcnMenuSub>
         </ShadcnMenuGroup>
+        <ShadcnMenuItem name="preferences">Preferences</ShadcnMenuItem>
       </ShadcnMenuSub>
       <ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
       <ShadcnMenuItem name="logout">
@@ -47,11 +55,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnMarkdown } from "@/ui/markdown";
 
 const isDark = ref(false)
-
-const content = ref(`# 液态玻璃效果
-
-支持液态玻璃效果的 Markdown 编辑器。`)
 </script>
diff --git a/src/ui/menu/ShadcnMenu.vue b/src/ui/menu/ShadcnMenu.vue
index f7247da2..8fff897e 100644
--- a/src/ui/menu/ShadcnMenu.vue
+++ b/src/ui/menu/ShadcnMenu.vue
@@ -1,5 +1,6 @@
 <template>
-  <div :class="dark ? 'bg-gray-800' : 'bg-white'"
+  <div ref="menuRef"
+       :class="dark ? 'bg-gray-800' : 'bg-white'"
        class="p-2"
        :style="{ width: direction === 'vertical' ? calcSize(props.width) : '100%' }">
     <div :class="['flex', directionClass]">
@@ -9,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide, ref } from 'vue'
+import { computed, onMounted, onUnmounted, provide, ref } from 'vue'
 import { calcSize } from '@/utils/common.ts'
 
 const props = withDefaults(defineProps<{
@@ -17,16 +18,19 @@ const props = withDefaults(defineProps<{
   width?: number | string
   direction?: 'horizontal' | 'vertical'
   dark?: boolean
+  trigger?: 'click' | 'hover'
 }>(), {
   width: 200,
   direction: 'vertical',
-  dark: false
+  dark: false,
+  trigger: 'click'
 })
 
 const emit = defineEmits(['update:modelValue'])
 
 const activeKey = ref<string>(String(props.modelValue))
-const expandedKey = ref<string | null>(null)
+const expandedKeys = ref<Set<string>>(new Set())
+const menuRef = ref<HTMLElement | null>(null)
 
 const directionClass = computed(() => {
   return props.direction === 'horizontal' ? 'flex-row items-center space-x-4' : 'flex-col space-y-2'
@@ -37,14 +41,51 @@ const updateActiveKey = (key: string) => {
   emit('update:modelValue', key)
 }
 
+const toggleExpandedKey = (key: string) => {
+  if (expandedKeys.value.has(key)) {
+    expandedKeys.value.delete(key)
+  } else {
+    expandedKeys.value.add(key)
+  }
+  expandedKeys.value = new Set(expandedKeys.value)
+}
+
+const isExpanded = (key: string) => {
+  return expandedKeys.value.has(key)
+}
+
+const closeAllMenus = () => {
+  expandedKeys.value.clear()
+  expandedKeys.value = new Set(expandedKeys.value)
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (props.direction === 'horizontal' && menuRef.value && !menuRef.value.contains(event.target as Node)) {
+    closeAllMenus()
+  }
+}
+
+onMounted(() => {
+  if (props.direction === 'horizontal') {
+    document.addEventListener('click', handleClickOutside)
+  }
+})
+
+onUnmounted(() => {
+  if (props.direction === 'horizontal') {
+    document.removeEventListener('click', handleClickOutside)
+  }
+})
+
 provide('menuContext', {
   activeKey,
   setActiveKey: updateActiveKey,
   direction: props.direction,
-  expandedKey,
-  setExpandedKey: (key: string | null) => {
-    expandedKey.value = key
-  },
-  dark: computed(() => props.dark)
+  expandedKeys,
+  toggleExpandedKey,
+  isExpanded,
+  closeAllMenus,
+  dark: computed(() => props.dark),
+  trigger: props.trigger
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/ui/menu/ShadcnMenuGroup.vue b/src/ui/menu/ShadcnMenuGroup.vue
index 6452e517..5742e7f0 100644
--- a/src/ui/menu/ShadcnMenuGroup.vue
+++ b/src/ui/menu/ShadcnMenuGroup.vue
@@ -17,5 +17,5 @@ const menuContext = inject('menuContext') as {
 }
 
 const isHorizontal = computed(() => menuContext.direction === 'horizontal')
-const dark = computed(() => menuContext.dark || false)
+const dark = computed(() => menuContext.dark?.value || false)
 </script>
diff --git a/src/ui/menu/ShadcnMenuItem.vue b/src/ui/menu/ShadcnMenuItem.vue
index a2f3c049..bd41b697 100644
--- a/src/ui/menu/ShadcnMenuItem.vue
+++ b/src/ui/menu/ShadcnMenuItem.vue
@@ -2,9 +2,8 @@
   <ShadcnLink v-if="to"
               :class="[
                    'flex items-center justify-between px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer',
-                   dark ? 'hover:bg-gray-700 focus:bg-gray-700' : 'hover:bg-gray-100 focus:bg-gray-100',
-                   isActive ? (dark ? 'bg-gray-700' : 'bg-gray-100') : '',
-                   dark ? 'text-gray-200' : ''
+                   dark ? 'text-gray-200 hover:bg-gray-700 focus:bg-gray-700' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900',
+                   isActive ? (dark ? 'bg-gray-700' : 'bg-gray-100 text-gray-900') : ''
               ]"
               :dark="dark"
               :data-name="name"
@@ -22,9 +21,8 @@
   <div v-else
        :class="[
              'flex items-center justify-between px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer',
-             dark ? 'hover:bg-gray-700 focus:bg-gray-700' : 'hover:bg-gray-100 focus:bg-gray-100',
-             isActive ? (dark ? 'bg-gray-700' : 'bg-gray-100') : '',
-             dark ? 'text-gray-200' : ''
+             dark ? 'text-gray-200 hover:bg-gray-700 focus:bg-gray-700' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900',
+             isActive ? (dark ? 'bg-gray-700' : 'bg-gray-100 text-gray-900') : ''
        ]"
        :data-name="name"
        :data-parent="parentName"
@@ -58,21 +56,21 @@ const menuContext = inject('menuContext') as {
   activeKey: { value: string | null }
   setActiveKey: (key: string) => void
   direction: 'horizontal' | 'vertical'
-  setExpandedKey: (key: string | null) => void
   parentName?: string
   dark?: boolean
+  closeAllMenus?: () => void
 }
 
 const isActive = computed(() => props.active || menuContext.activeKey.value === props.name)
 const isHorizontal = computed(() => menuContext.direction === 'horizontal')
 const parentName = menuContext.parentName || null
-const dark = computed(() => menuContext.dark || false)
+const dark = computed(() => menuContext.dark?.value || false)
 
 const onClick = (event: MouseEvent) => {
   menuContext.setActiveKey(props.name)
 
-  if (menuContext.direction === 'horizontal') {
-    menuContext.setExpandedKey(null)
+  if (isHorizontal.value && menuContext.closeAllMenus) {
+    menuContext.closeAllMenus()
   }
 
   emit('on-active', !props.active)
diff --git a/src/ui/menu/ShadcnMenuSub.vue b/src/ui/menu/ShadcnMenuSub.vue
index 38032036..1111a674 100644
--- a/src/ui/menu/ShadcnMenuSub.vue
+++ b/src/ui/menu/ShadcnMenuSub.vue
@@ -1,21 +1,25 @@
 <template>
-  <div :class="[isHorizontal ? 'inline-block relative' : 'block']">
+  <div :class="[isNested ? 'block relative' : (isHorizontal ? 'inline-block relative' : 'block')]"
+       @mouseenter="trigger === 'hover' && handleMouseEnter()"
+       @mouseleave="trigger === 'hover' && handleMouseLeave()">
     <div :class="[
           'px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer',
           'flex items-center justify-between gap-2',
-          dark ? 'hover:bg-gray-700 focus:bg-gray-700' : 'hover:bg-gray-100 focus:bg-gray-100',
-          (isExpanded || hasActiveChild) ? (dark ? 'bg-gray-700' : 'bg-gray-100') : '',
-          dark ? 'text-gray-200' : ''
+          dark ? 'text-gray-200 hover:bg-gray-700 focus:bg-gray-700' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900',
+          (isExpanded || hasActiveChild) ? (dark ? 'bg-gray-700' : 'bg-gray-100 text-gray-900') : ''
         ]"
-         @click="toggleExpand">
-      <div class="flex items-center gap-2">
-        <slot name="icon"/>
-        <span>
-          <slot name="title"/>
-        </span>
-      </div>
+         @click="trigger === 'click' && toggleExpand()">
+      <slot name="header" :expanded="isExpanded" :hasActiveChild="hasActiveChild">
+        <div class="flex items-center gap-2">
+          <slot name="icon"/>
+          <span>
+            <slot name="title"/>
+          </span>
+        </div>
+      </slot>
       <svg :class="['w-4 h-4 transition-transform duration-200',
-                    { 'rotate-180': isExpanded }
+                    isNested ? '-rotate-90' : '',
+                    isExpanded && !isNested ? 'rotate-180' : ''
             ]"
            fill="currentColor"
            viewBox="0 0 20 20"
@@ -26,16 +30,17 @@
       </svg>
     </div>
     <Transition
-      :name="isHorizontal ? 'menu-fade' : 'menu-slide'"
-      @enter="onEnter"
-      @after-enter="onAfterEnter"
-      @leave="onLeave"
-      @after-leave="onAfterLeave">
+        @enter="onEnter"
+        @leave="onLeave"
+        @after-enter="onAfterEnter"
+        @after-leave="onAfterLeave">
       <div v-show="isExpanded"
            ref="menuContent"
            :class="[
-            'space-y-1 overflow-hidden',
-            isHorizontal ? (dark ? 'absolute left-0 mt-2.5 bg-gray-800 w-fit shadow-lg px-2 py-2 z-20 rounded-md' : 'absolute left-0 mt-2.5 bg-white w-fit shadow-lg px-2 py-2 z-20 rounded-md') : 'pl-4 mt-1'
+            'space-y-1',
+            isNested ? (dark ? 'absolute left-full top-0 ml-1 bg-gray-800 w-fit shadow-lg px-2 py-2 z-30 rounded-md' : 'absolute left-full top-0 ml-1 bg-white w-fit shadow-lg px-2 py-2 z-30 rounded-md border border-gray-200') :
+            isHorizontal ? (dark ? 'absolute left-0 mt-2.5 bg-gray-800 w-fit shadow-lg px-2 py-2 z-20 rounded-md' : 'absolute left-0 mt-2.5 bg-white w-fit shadow-lg px-2 py-2 z-20 rounded-md border border-gray-200') :
+            'pl-4 mt-1'
           ]">
         <slot/>
       </div>
@@ -52,10 +57,12 @@ const props = defineProps<{
 
 const menuContext = inject('menuContext') as {
   direction: 'horizontal' | 'vertical'
-  expandedKey: { value: string | null }
   activeKey: { value: string | null }
-  setExpandedKey: (key: string | null) => void
+  toggleExpandedKey: (key: string) => void
+  isExpanded: (key: string) => boolean
   dark?: boolean
+  parentName?: string
+  trigger?: 'click' | 'hover'
 }
 
 provide('menuContext', {
@@ -64,14 +71,17 @@ provide('menuContext', {
 })
 
 const isHorizontal = computed(() => menuContext.direction === 'horizontal')
-const isExpanded = computed(() => menuContext.expandedKey.value === props.name)
-const dark = computed(() => menuContext.dark || false)
+const isNested = computed(() => !!menuContext.parentName && isHorizontal.value)
+const isExpanded = computed(() => menuContext.isExpanded(props.name))
+const dark = computed(() => menuContext.dark?.value || false)
+const trigger = computed(() => menuContext.trigger || 'click')
 
 const hasActiveChild = ref(false)
 const menuContent = ref<HTMLElement | null>(null)
+let hoverTimer: NodeJS.Timeout | null = null
 
 const checkActiveChild = () => {
-  const slotElements = document.querySelectorAll(`[data-parent="${ props.name }"]`)
+  const slotElements = document.querySelectorAll(`[data-parent="${props.name}"]`)
   hasActiveChild.value = Array.from(slotElements).some(
       (element) => (element as HTMLElement).dataset.name === menuContext.activeKey.value
   )
@@ -90,42 +100,87 @@ onMounted(() => {
 })
 
 const toggleExpand = () => {
-  if (menuContext.expandedKey.value === props.name) {
-    menuContext.setExpandedKey(null)
+  menuContext.toggleExpandedKey(props.name)
+  if (!isExpanded.value) {
     checkActiveChild()
   }
-  else {
-    menuContext.setExpandedKey(props.name)
+}
+
+const handleMouseEnter = () => {
+  if (hoverTimer) {
+    clearTimeout(hoverTimer)
+    hoverTimer = null
   }
+  if (!isExpanded.value) {
+    menuContext.toggleExpandedKey(props.name)
+  }
+}
+
+const handleMouseLeave = () => {
+  hoverTimer = setTimeout(() => {
+    if (isExpanded.value) {
+      menuContext.toggleExpandedKey(props.name)
+    }
+  }, 200)
 }
 
 const onEnter = (el: Element) => {
   const element = el as HTMLElement
-  element.style.height = '0'
-  element.style.opacity = '0'
+  if (isHorizontal.value || isNested.value) {
+    element.style.opacity = '0'
+    if (isNested.value) {
+      element.style.transform = 'translateX(-8px)'
+    } else {
+      element.style.transform = 'translateY(-8px)'
+    }
+  }
+  else {
+    element.style.height = '0'
+    element.style.opacity = '0'
+  }
 }
 
 const onAfterEnter = (el: Element) => {
   const element = el as HTMLElement
-  const height = element.scrollHeight
-  element.style.transition = 'height 0.3s ease, opacity 0.2s ease'
-  element.style.height = `${height}px`
-  element.style.opacity = '1'
-
-  setTimeout(() => {
-    element.style.height = 'auto'
-  }, 300)
+  if (isHorizontal.value || isNested.value) {
+    element.style.transition = 'opacity 0.2s ease, transform 0.2s ease'
+    element.style.opacity = '1'
+    element.style.transform = isNested.value ? 'translateX(0)' : 'translateY(0)'
+  }
+  else {
+    const height = element.scrollHeight
+    element.style.transition = 'height 0.3s ease, opacity 0.2s ease'
+    element.style.height = `${height}px`
+    element.style.opacity = '1'
+
+    setTimeout(() => {
+      element.style.height = 'auto'
+    }, 300)
+  }
 }
 
 const onLeave = (el: Element) => {
   const element = el as HTMLElement
-  element.style.height = `${element.scrollHeight}px`
-  element.style.transition = 'height 0.3s ease, opacity 0.2s ease'
+  if (isHorizontal.value || isNested.value) {
+    element.style.transition = 'opacity 0.2s ease, transform 0.2s ease'
+    requestAnimationFrame(() => {
+      element.style.opacity = '0'
+      if (isNested.value) {
+        element.style.transform = 'translateX(-8px)'
+      } else {
+        element.style.transform = 'translateY(-8px)'
+      }
+    })
+  }
+  else {
+    element.style.height = `${element.scrollHeight}px`
+    element.style.transition = 'height 0.3s ease, opacity 0.2s ease'
 
-  requestAnimationFrame(() => {
-    element.style.height = '0'
-    element.style.opacity = '0'
-  })
+    requestAnimationFrame(() => {
+      element.style.height = '0'
+      element.style.opacity = '0'
+    })
+  }
 }
 
 const onAfterLeave = (el: Element) => {
@@ -133,18 +188,6 @@ const onAfterLeave = (el: Element) => {
   element.style.height = ''
   element.style.opacity = ''
   element.style.transition = ''
+  element.style.transform = ''
 }
 </script>
-
-<style scoped>
-.menu-fade-enter-active,
-.menu-fade-leave-active {
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-
-.menu-fade-enter-from,
-.menu-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-8px);
-}
-</style>

From 8860561234f61df4b3a190b4cef753e998690e9d Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 30 Dec 2025 15:42:29 +0800
Subject: [PATCH 03/14] =?UTF-8?q?fix(=E4=B8=8B=E6=8B=89=E8=8F=9C=E5=8D=95)?=
 =?UTF-8?q?:=20=E4=BF=AE=E5=A4=8D=E4=BD=8D=E7=BD=AE=E5=9C=A8=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E5=88=97=E8=A1=A8=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                        | 51 ++++--------------------------
 src/ui/copy/ShadcnCopy.vue         |  2 +-
 src/ui/dropdown/ShadcnDropdown.vue | 28 ++++++++++------
 src/ui/menu/ShadcnMenuGroup.vue    |  2 +-
 src/ui/menu/ShadcnMenuItem.vue     |  2 +-
 src/ui/menu/ShadcnMenuSub.vue      |  2 +-
 src/ui/tooltip/ShadcnTooltip.vue   | 48 ++++++++++++++++------------
 7 files changed, 57 insertions(+), 78 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 181a2325..029c489d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,51 +4,12 @@
       切换暗黑模式
     </ShadcnButton>
 
-    <ShadcnMenu direction="horizontal" :dark="isDark">
-      <ShadcnMenuItem name="home">
-        <template #icon>
-          <ShadcnIcon icon="Home"/>
-        </template>
-        Home
-      </ShadcnMenuItem>
-      <ShadcnMenuSub name="profileSub">
-        <template #title>Profile</template>
-        <template #icon>
-          <ShadcnIcon icon="User"/>
-        </template>
-        <ShadcnMenuGroup name="settingGroup">
-          <template #title>Settings</template>
-          <ShadcnMenuItem name="username">Change</ShadcnMenuItem>
-          <ShadcnMenuItem name="password">Change Password</ShadcnMenuItem>
-          <ShadcnMenuSub name="securitySub">
-            <template #title>Security</template>
-            <template #icon>
-              <ShadcnIcon icon="Shield"/>
-            </template>
-            <ShadcnMenuItem name="2fa">Two-Factor Auth</ShadcnMenuItem>
-            <ShadcnMenuItem name="sessions">Active Sessions</ShadcnMenuItem>
-            <ShadcnMenuItem name="devices">Trusted Devices</ShadcnMenuItem>
-            <ShadcnMenuSub name="securitySub1">
-              <template #title>Security</template>
-              <template #icon>
-                <ShadcnIcon icon="Shield"/>
-              </template>
-              <ShadcnMenuItem name="2fa">Two-Factor Auth</ShadcnMenuItem>
-              <ShadcnMenuItem name="sessions">Active Sessions</ShadcnMenuItem>
-              <ShadcnMenuItem name="devices">Trusted Devices</ShadcnMenuItem>
-            </ShadcnMenuSub>
-          </ShadcnMenuSub>
-        </ShadcnMenuGroup>
-        <ShadcnMenuItem name="preferences">Preferences</ShadcnMenuItem>
-      </ShadcnMenuSub>
-      <ShadcnMenuItem name="email">Change Email</ShadcnMenuItem>
-      <ShadcnMenuItem name="logout">
-        <template #icon>
-          <ShadcnIcon icon="LogOut"/>
-        </template>
-        Logout
-      </ShadcnMenuItem>
-    </ShadcnMenu>
+    <div class="mt-3">
+      <ShadcnTooltip content="This is a tooltip" :dark="isDark">
+        <ShadcnButton :dark="isDark">Hover</ShadcnButton>
+      </ShadcnTooltip>
+    </div>
+
   </div>
 </template>
 
diff --git a/src/ui/copy/ShadcnCopy.vue b/src/ui/copy/ShadcnCopy.vue
index f7d6bb99..14798525 100644
--- a/src/ui/copy/ShadcnCopy.vue
+++ b/src/ui/copy/ShadcnCopy.vue
@@ -7,7 +7,7 @@
 
     <transition v-if="tooltip" name="fade">
       <div v-if="showTooltip"
-           :class="cn('absolute transform text-xs rounded p-1.5 transition-all',
+           :class="cn('absolute transform text-xs rounded p-1.5 transition-all z-50',
                     glass && 'backdrop-blur-xl backdrop-saturate-150',
                     glass && 'border border-white/20',
                     glass && 'shadow-lg shadow-black/5',
diff --git a/src/ui/dropdown/ShadcnDropdown.vue b/src/ui/dropdown/ShadcnDropdown.vue
index 36f396f7..d0806233 100644
--- a/src/ui/dropdown/ShadcnDropdown.vue
+++ b/src/ui/dropdown/ShadcnDropdown.vue
@@ -2,7 +2,8 @@
   <div ref="dropdownRef"
        class="relative inline-block">
     <!-- Trigger button -->
-    <div @click="trigger === 'click' && onOpen()"
+    <div ref="triggerRef"
+         @click="trigger === 'click' && onOpen()"
          @mouseenter="trigger === 'hover' && onHover()"
          @mouseleave="trigger === 'hover' && handleTriggerMouseLeave()"
          class="inline-flex items-center justify-center cursor-pointer">
@@ -53,40 +54,50 @@ const props = withDefaults(defineProps<DropdownProps>(), {
 
 const isOpen = ref(false)
 const dropdownRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
 const menuRef = ref<HTMLElement | null>(null)
 let closeTimer: NodeJS.Timeout | null = null
 
 const updateDropdownPosition = async () => {
-  if (!dropdownRef.value || !isOpen.value) {
+  if (!triggerRef.value || !isOpen.value) {
     return
   }
 
+  await nextTick()
   await nextTick()
 
-  const trigger = dropdownRef.value
-  const rect = trigger.getBoundingClientRect()
-  const dropdownMenu = document.querySelector('.fixed') as HTMLElement
-
-  if (!dropdownMenu) {
+  if (!menuRef.value) {
     return
   }
 
+  const trigger = triggerRef.value
+  const rect = trigger.getBoundingClientRect()
+  const dropdownMenu = menuRef.value
+
   switch (props.position) {
     case ArrangePosition.left:
       dropdownMenu.style.left = `${ rect.left }px`
       dropdownMenu.style.top = `${ rect.bottom + 4 }px`
+      dropdownMenu.style.right = 'auto'
+      dropdownMenu.style.bottom = 'auto'
       break
     case ArrangePosition.right:
+      dropdownMenu.style.left = 'auto'
       dropdownMenu.style.right = `${ window.innerWidth - rect.right }px`
       dropdownMenu.style.top = `${ rect.bottom + 4 }px`
+      dropdownMenu.style.bottom = 'auto'
       break
     case ArrangePosition.top:
       dropdownMenu.style.left = `${ rect.left }px`
       dropdownMenu.style.bottom = `${ window.innerHeight - rect.top + 4 }px`
+      dropdownMenu.style.right = 'auto'
+      dropdownMenu.style.top = 'auto'
       break
     case ArrangePosition.bottom:
       dropdownMenu.style.left = `${ rect.left }px`
       dropdownMenu.style.top = `${ rect.bottom + 4 }px`
+      dropdownMenu.style.right = 'auto'
+      dropdownMenu.style.bottom = 'auto'
       break
   }
 }
@@ -144,8 +155,7 @@ const onMenuMouseLeave = () => {
 
 const onClickOutside = (event: MouseEvent) => {
   if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
-    const dropdownMenu = document.querySelector('.fixed')
-    if (dropdownMenu && !dropdownMenu.contains(event.target as Node)) {
+    if (menuRef.value && !menuRef.value.contains(event.target as Node)) {
       if (isOpen.value) {
         onClose()
         emit('on-click-outside', true)
diff --git a/src/ui/menu/ShadcnMenuGroup.vue b/src/ui/menu/ShadcnMenuGroup.vue
index 5742e7f0..85447cd5 100644
--- a/src/ui/menu/ShadcnMenuGroup.vue
+++ b/src/ui/menu/ShadcnMenuGroup.vue
@@ -13,7 +13,7 @@ import { computed, inject } from 'vue'
 
 const menuContext = inject('menuContext') as {
   direction: 'horizontal' | 'vertical'
-  dark?: boolean
+  dark?: { value: boolean }
 }
 
 const isHorizontal = computed(() => menuContext.direction === 'horizontal')
diff --git a/src/ui/menu/ShadcnMenuItem.vue b/src/ui/menu/ShadcnMenuItem.vue
index bd41b697..c24b4f62 100644
--- a/src/ui/menu/ShadcnMenuItem.vue
+++ b/src/ui/menu/ShadcnMenuItem.vue
@@ -57,7 +57,7 @@ const menuContext = inject('menuContext') as {
   setActiveKey: (key: string) => void
   direction: 'horizontal' | 'vertical'
   parentName?: string
-  dark?: boolean
+  dark?: { value: boolean }
   closeAllMenus?: () => void
 }
 
diff --git a/src/ui/menu/ShadcnMenuSub.vue b/src/ui/menu/ShadcnMenuSub.vue
index 1111a674..24623b87 100644
--- a/src/ui/menu/ShadcnMenuSub.vue
+++ b/src/ui/menu/ShadcnMenuSub.vue
@@ -60,7 +60,7 @@ const menuContext = inject('menuContext') as {
   activeKey: { value: string | null }
   toggleExpandedKey: (key: string) => void
   isExpanded: (key: string) => boolean
-  dark?: boolean
+  dark?: { value: boolean }
   parentName?: string
   trigger?: 'click' | 'hover'
 }
diff --git a/src/ui/tooltip/ShadcnTooltip.vue b/src/ui/tooltip/ShadcnTooltip.vue
index d1732c9d..b61d9d74 100644
--- a/src/ui/tooltip/ShadcnTooltip.vue
+++ b/src/ui/tooltip/ShadcnTooltip.vue
@@ -5,27 +5,35 @@
     </div>
 
     <Teleport to="body">
-      <div v-if="isVisible"
-           ref="tooltipContent"
-           :class="['fixed z-[100] px-3 py-2 text-sm rounded shadow-lg',
-                    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">
-          <slot v-if="$slots.content" name="content"/>
-          <div v-else v-html="content"/>
-        </div>
-
-        <div v-if="arrow"
-             :class="['absolute w-2.5 h-2.5 rotate-45',
-                      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
+      <Transition
+          enter-active-class="transition duration-200 ease-out"
+          enter-from-class="transform scale-95 opacity-0"
+          enter-to-class="transform scale-100 opacity-100"
+          leave-active-class="transition duration-150 ease-in"
+          leave-from-class="transform scale-100 opacity-100"
+          leave-to-class="transform scale-95 opacity-0">
+        <div v-if="isVisible"
+             ref="tooltipContent"
+             :class="['fixed z-[100] px-3 py-2 text-sm rounded shadow-lg',
+                      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="arrowStyle"/>
-      </div>
+             :style="[tooltipStyle, { maxWidth: computedMaxWidth }]">
+          <div class="text-center break-words">
+            <slot v-if="$slots.content" name="content"/>
+            <div v-else v-html="content"/>
+          </div>
+
+          <div v-if="arrow"
+               :class="['absolute w-2.5 h-2.5 rotate-45',
+                        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"/>
+        </div>
+      </Transition>
     </Teleport>
   </div>
 </template>

From c789adaf01bcf5e831597f99e89a6ea1ad43d9ab Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 30 Dec 2025 15:47:07 +0800
Subject: [PATCH 04/14] =?UTF-8?q?fix(=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95)?=
 =?UTF-8?q?:=20=E4=BF=AE=E5=A4=8D=E5=A4=9A=E7=BA=A7=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E4=B8=8B=E7=88=B6=E7=BA=A7=E9=9A=90=E8=97=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/contextmenu/ShadcnContextMenuSub.vue | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/ui/contextmenu/ShadcnContextMenuSub.vue b/src/ui/contextmenu/ShadcnContextMenuSub.vue
index f66e0b78..f968011f 100644
--- a/src/ui/contextmenu/ShadcnContextMenuSub.vue
+++ b/src/ui/contextmenu/ShadcnContextMenuSub.vue
@@ -37,7 +37,7 @@
              ref="subMenuRef"
              @mouseenter="onSubMenuMouseEnter"
              @mouseleave="onSubMenuMouseLeave"
-             :class="['fixed min-w-[8rem] z-50 rounded-md border p-1',
+             :class="['fixed min-w-[8rem] z-[60] rounded-md border p-1',
                       glass ? 'backdrop-blur-xl backdrop-saturate-150' : '',
                       glass ? 'border-white/20' : (dark ? 'border-gray-700' : 'border-gray-200'),
                       glass ? (dark ? 'bg-white/10' : 'bg-white/60') : (dark ? 'bg-gray-800' : 'bg-white'),
@@ -52,7 +52,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, inject, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, CSSProperties, inject, nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { ContextMenuItemProps } from './types'
 import { calcSize } from '@/utils/common.ts'
 
@@ -67,12 +67,23 @@ const dark = computed(() => props.dark || injectedDark.value)
 const injectedGlass = inject('contextMenuGlass', computed(() => false))
 const glass = computed(() => injectedGlass.value)
 
+const parentKeepOpen = inject<(() => void) | null>('keepParentOpen', null)
+
 const isHovered = ref(false)
 const subMenuRef = ref<HTMLElement | null>(null)
 const triggerRef = ref<HTMLElement | null>(null)
 const position = ref({ x: 0, y: 0 })
 const hideTimeout = ref<number | null>(null)
 
+const keepOpen = () => {
+  clearHideTimeout()
+  if (parentKeepOpen) {
+    parentKeepOpen()
+  }
+}
+
+provide('keepParentOpen', keepOpen)
+
 // Calculates submenu styles
 const subMenuStyle = computed<CSSProperties>(() => {
   return {
@@ -143,6 +154,9 @@ const onSubMenuMouseEnter = () => {
   if (!props.disabled) {
     clearHideTimeout()
     isHovered.value = true
+    if (parentKeepOpen) {
+      parentKeepOpen()
+    }
   }
 }
 

From 25689c6bf5c4f5d5ee6b2bc1316a1bb6e5602493 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 30 Dec 2025 15:54:26 +0800
Subject: [PATCH 05/14] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Spin=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/spin.md          | 38 ++++++++++++++++++++++++
 playground/src/example/spin/glass.vue | 42 +++++++++++++++++++++++++++
 playground/src/example/spin/usage.vue |  8 +++++
 src/App.vue                           | 16 +++++++---
 src/ui/spin/ShadcnSpin.vue            | 13 +++++++--
 5 files changed, 110 insertions(+), 7 deletions(-)
 create mode 100644 playground/src/example/spin/glass.vue
 create mode 100644 playground/src/example/spin/usage.vue

diff --git a/docs/components/view/spin.md b/docs/components/view/spin.md
index d5bc0a2f..6b9b8917 100644
--- a/docs/components/view/spin.md
+++ b/docs/components/view/spin.md
@@ -145,6 +145,42 @@ const darkMode = computed(() => isDark.value)
 
 :::
 
+## 液态玻璃效果 (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 relative" style="height: 200px;">
+      <ShadcnSpin :model-value="true" glass :dark="darkMode" fixed />
+    </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 relative" style="height: 200px;">
+      <ShadcnSpin :model-value="true" glass :dark="darkMode" fixed />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+</script>
+```
+
+:::
+
 ## 服务 ($Spin)
 
 ::: raw
@@ -188,6 +224,8 @@ export default {
         ['type', '组件的类型', 'enum', 'primary', 'primary | success | warning | error'],
         ['size', '组件的尺寸', 'enum', 'default', 'default | small | large'],
         ['fixed', '是否固定在父组件上，父组件必须使用 <code>position: relative</code>', 'boolean', 'false', '-'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'],
+        ['dark', '是否启用暗黑模式', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
diff --git a/playground/src/example/spin/glass.vue b/playground/src/example/spin/glass.vue
new file mode 100644
index 00000000..a9a6f8a3
--- /dev/null
+++ b/playground/src/example/spin/glass.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="space-y-4">
+    <div class="relative">
+      <div class="h-64 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400"></div>
+      <div class="absolute inset-0 flex items-center justify-center p-4">
+        <div class="w-full h-full relative">
+          <ShadcnSpin :model-value="true" glass fixed />
+        </div>
+      </div>
+    </div>
+
+    <div class="relative">
+      <div class="h-64 rounded-lg bg-gradient-to-r from-green-400 to-teal-400"></div>
+      <div class="absolute inset-0 flex items-center justify-center p-4">
+        <div class="w-full h-full relative">
+          <ShadcnSpin :model-value="true" glass fixed type="success" />
+        </div>
+      </div>
+    </div>
+
+    <div class="relative">
+      <div class="h-64 rounded-lg bg-gradient-to-r from-yellow-400 to-orange-400"></div>
+      <div class="absolute inset-0 flex items-center justify-center p-4">
+        <div class="w-full h-full relative">
+          <ShadcnSpin :model-value="true" glass fixed type="warning" size="large" />
+        </div>
+      </div>
+    </div>
+
+    <div class="relative">
+      <div class="h-64 rounded-lg bg-gradient-to-r from-red-400 to-pink-400"></div>
+      <div class="absolute inset-0 flex items-center justify-center p-4">
+        <div class="w-full h-full relative">
+          <ShadcnSpin :model-value="true" glass fixed type="error" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/playground/src/example/spin/usage.vue b/playground/src/example/spin/usage.vue
new file mode 100644
index 00000000..88d2df7c
--- /dev/null
+++ b/playground/src/example/spin/usage.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="space-y-4">
+    <ShadcnSpin />
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/src/App.vue b/src/App.vue
index 029c489d..8b896c9d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,10 +4,16 @@
       切换暗黑模式
     </ShadcnButton>
 
-    <div class="mt-3">
-      <ShadcnTooltip content="This is a tooltip" :dark="isDark">
-        <ShadcnButton :dark="isDark">Hover</ShadcnButton>
-      </ShadcnTooltip>
+    <div class="mt-6">
+      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Spin 液态玻璃效果</h3>
+      <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 relative" style="height: 200px;">
+          <ShadcnSpin :model-value="loading" glass :dark="isDark" fixed/>
+          <ShadcnButton @click="loading = !loading" :dark="isDark">
+            {{ loading ? '停止加载' : '开始加载' }}
+          </ShadcnButton>
+        </div>
+      </div>
     </div>
 
   </div>
@@ -16,6 +22,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
+import { ShadcnSpin } from "@/ui/spin";
 
 const isDark = ref(false)
+const loading = ref(false)
 </script>
diff --git a/src/ui/spin/ShadcnSpin.vue b/src/ui/spin/ShadcnSpin.vue
index af1eacf4..71618cb8 100644
--- a/src/ui/spin/ShadcnSpin.vue
+++ b/src/ui/spin/ShadcnSpin.vue
@@ -6,7 +6,11 @@
                 fixed ? 'absolute inset-0' : 'relative'
        ]">
     <!-- Translucent background layer -->
-    <div v-if="fixed" :class="['absolute inset-0 opacity-65 z-10', dark ? 'bg-gray-900' : 'bg-gray-50']"/>
+    <div v-if="fixed"
+         :class="['absolute inset-0 z-10',
+                  glass ? 'backdrop-blur-xl backdrop-saturate-150' : 'opacity-65',
+                  glass ? (dark ? 'bg-white/10' : 'bg-white/30') : (dark ? 'bg-gray-900' : 'bg-gray-50')
+         ]"/>
 
     <!-- Loading layer -->
     <div class="z-20">
@@ -15,7 +19,8 @@
       </template>
       <div v-else :class="['inline-block animate-spin rounded-full border-2',
                            'shadow-lg p-2',
-                           fixed ? 'bg-transparent' : (dark ? 'bg-gray-800' : 'bg-white'),
+                           glass ? 'bg-transparent backdrop-blur-sm' : (fixed ? 'bg-transparent' : (dark ? 'bg-gray-800' : 'bg-white')),
+                           glass && 'shadow-black/5 border-opacity-60',
                            WrapperSize[size],
                            BorderRightType[type]
                    ]"/>
@@ -36,12 +41,14 @@ const props = withDefaults(defineProps<{
   size?: keyof typeof WrapperSize
   fixed?: boolean
   dark?: boolean
+  glass?: boolean
 }>(), {
   modelValue: true,
   type: 'primary',
   size: 'default',
   fixed: false,
-  dark: false
+  dark: false,
+  glass: false
 })
 
 watch(() => props.modelValue, (newValue) => {

From fb656e72840d0c762ca91583e9be0752b01ba678 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 30 Dec 2025 15:59:31 +0800
Subject: [PATCH 06/14] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Dropdown=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/navigation/dropdown.md    | 74 +++++++++++++++++++++++
 playground/src/example/dropdown/glass.vue | 60 ++++++++++++++++++
 playground/src/example/dropdown/usage.vue | 25 ++++++++
 src/App.vue                               | 20 +++---
 src/ui/dropdown/ShadcnDropdown.vue        |  8 ++-
 src/ui/dropdown/ShadcnDropdownItem.vue    | 17 ++++--
 src/ui/dropdown/types.ts                  |  1 +
 7 files changed, 191 insertions(+), 14 deletions(-)
 create mode 100644 playground/src/example/dropdown/glass.vue
 create mode 100644 playground/src/example/dropdown/usage.vue

diff --git a/docs/components/navigation/dropdown.md b/docs/components/navigation/dropdown.md
index 4ec99eb2..e28c9838 100644
--- a/docs/components/navigation/dropdown.md
+++ b/docs/components/navigation/dropdown.md
@@ -186,6 +186,78 @@ title: 下拉菜单 (Dropdown)
 
 :::
 
+## 液态玻璃效果 (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 flex gap-4">
+      <ShadcnDropdown glass :dark="darkMode" trigger="click">
+        <template #trigger>
+          <ShadcnButton :dark="darkMode">点击打开</ShadcnButton>
+        </template>
+        <ShadcnDropdownItem>操作 1</ShadcnDropdownItem>
+        <ShadcnDropdownItem active>操作 2</ShadcnDropdownItem>
+        <ShadcnDropdownItem divided>操作 3</ShadcnDropdownItem>
+        <ShadcnDropdownItem>操作 4</ShadcnDropdownItem>
+      </ShadcnDropdown>
+
+      <ShadcnDropdown glass :dark="darkMode" trigger="hover">
+        <template #trigger>
+          <ShadcnButton :dark="darkMode">悬停打开</ShadcnButton>
+        </template>
+        <ShadcnDropdownItem>操作 1</ShadcnDropdownItem>
+        <ShadcnDropdownItem>操作 2</ShadcnDropdownItem>
+        <ShadcnDropdownItem divided>操作 3</ShadcnDropdownItem>
+        <ShadcnDropdownItem disabled>操作 4 (禁用)</ShadcnDropdownItem>
+      </ShadcnDropdown>
+    </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 flex gap-4">
+      <ShadcnDropdown glass :dark="darkMode" trigger="click">
+        <template #trigger>
+          <ShadcnButton :dark="darkMode">点击打开</ShadcnButton>
+        </template>
+        <ShadcnDropdownItem>操作 1</ShadcnDropdownItem>
+        <ShadcnDropdownItem active>操作 2</ShadcnDropdownItem>
+        <ShadcnDropdownItem divided>操作 3</ShadcnDropdownItem>
+        <ShadcnDropdownItem>操作 4</ShadcnDropdownItem>
+      </ShadcnDropdown>
+
+      <ShadcnDropdown glass :dark="darkMode" trigger="hover">
+        <template #trigger>
+          <ShadcnButton :dark="darkMode">悬停打开</ShadcnButton>
+        </template>
+        <ShadcnDropdownItem>操作 1</ShadcnDropdownItem>
+        <ShadcnDropdownItem>操作 2</ShadcnDropdownItem>
+        <ShadcnDropdownItem divided>操作 3</ShadcnDropdownItem>
+        <ShadcnDropdownItem disabled>操作 4 (禁用)</ShadcnDropdownItem>
+      </ShadcnDropdown>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+</script>
+```
+
+:::
+
 ## 下拉菜单 (Dropdown) 属性
 
 <ApiTable title="下拉菜单 (Dropdown) 属性"
@@ -193,6 +265,8 @@ title: 下拉菜单 (Dropdown)
     :columns="[
         ['trigger', '下拉菜单触发方式', 'enum', 'click', 'click | hover'],
         ['position', '下拉菜单位置', 'enum', 'left', 'left | right | top | bottom'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'],
+        ['dark', '是否启用暗黑模式', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
diff --git a/playground/src/example/dropdown/glass.vue b/playground/src/example/dropdown/glass.vue
new file mode 100644
index 00000000..80d437ba
--- /dev/null
+++ b/playground/src/example/dropdown/glass.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="space-y-4">
+    <div class="relative">
+      <div class="h-64 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400"></div>
+      <div class="absolute inset-0 flex items-center justify-center p-4">
+        <div class="flex gap-4">
+          <ShadcnDropdown glass trigger="click">
+            <template #trigger>
+              <ShadcnButton>点击打开</ShadcnButton>
+            </template>
+            <ShadcnDropdownItem>新建文件</ShadcnDropdownItem>
+            <ShadcnDropdownItem>打开文件</ShadcnDropdownItem>
+            <ShadcnDropdownItem divided>保存</ShadcnDropdownItem>
+            <ShadcnDropdownItem active>另存为</ShadcnDropdownItem>
+            <ShadcnDropdownItem divided>退出</ShadcnDropdownItem>
+          </ShadcnDropdown>
+
+          <ShadcnDropdown glass trigger="hover" position="right">
+            <template #trigger>
+              <ShadcnButton>悬停打开</ShadcnButton>
+            </template>
+            <ShadcnDropdownItem>编辑</ShadcnDropdownItem>
+            <ShadcnDropdownItem>复制</ShadcnDropdownItem>
+            <ShadcnDropdownItem>粘贴</ShadcnDropdownItem>
+            <ShadcnDropdownItem divided>删除</ShadcnDropdownItem>
+            <ShadcnDropdownItem disabled>禁用项</ShadcnDropdownItem>
+          </ShadcnDropdown>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative">
+      <div class="h-64 rounded-lg bg-gradient-to-r from-green-400 to-teal-400"></div>
+      <div class="absolute inset-0 flex items-center justify-center p-4">
+        <div class="flex gap-4">
+          <ShadcnDropdown glass trigger="click" position="top">
+            <template #trigger>
+              <ShadcnButton type="success">上方菜单</ShadcnButton>
+            </template>
+            <ShadcnDropdownItem>选项 1</ShadcnDropdownItem>
+            <ShadcnDropdownItem active>选项 2</ShadcnDropdownItem>
+            <ShadcnDropdownItem>选项 3</ShadcnDropdownItem>
+          </ShadcnDropdown>
+
+          <ShadcnDropdown glass trigger="hover" position="bottom">
+            <template #trigger>
+              <ShadcnButton type="success">下方菜单</ShadcnButton>
+            </template>
+            <ShadcnDropdownItem>更多操作</ShadcnDropdownItem>
+            <ShadcnDropdownItem divided>设置</ShadcnDropdownItem>
+            <ShadcnDropdownItem>帮助</ShadcnDropdownItem>
+          </ShadcnDropdown>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/playground/src/example/dropdown/usage.vue b/playground/src/example/dropdown/usage.vue
new file mode 100644
index 00000000..106ad28c
--- /dev/null
+++ b/playground/src/example/dropdown/usage.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="space-y-4 flex gap-4">
+    <ShadcnDropdown trigger="click">
+      <template #trigger>
+        <ShadcnButton>点击打开</ShadcnButton>
+      </template>
+      <ShadcnDropdownItem>操作 1</ShadcnDropdownItem>
+      <ShadcnDropdownItem active>操作 2</ShadcnDropdownItem>
+      <ShadcnDropdownItem disabled>操作 3</ShadcnDropdownItem>
+    </ShadcnDropdown>
+
+    <ShadcnDropdown trigger="hover">
+      <template #trigger>
+        <ShadcnButton>悬停打开</ShadcnButton>
+      </template>
+      <ShadcnDropdownItem>操作 1</ShadcnDropdownItem>
+      <ShadcnDropdownItem>操作 2</ShadcnDropdownItem>
+      <ShadcnDropdownItem divided>操作 3</ShadcnDropdownItem>
+      <ShadcnDropdownItem>操作 4</ShadcnDropdownItem>
+    </ShadcnDropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/src/App.vue b/src/App.vue
index 8b896c9d..9b3f8f59 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,13 +5,18 @@
     </ShadcnButton>
 
     <div class="mt-6">
-      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Spin 液态玻璃效果</h3>
+      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Dropdown 液态玻璃效果</h3>
       <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 relative" style="height: 200px;">
-          <ShadcnSpin :model-value="loading" glass :dark="isDark" fixed/>
-          <ShadcnButton @click="loading = !loading" :dark="isDark">
-            {{ loading ? '停止加载' : '开始加载' }}
-          </ShadcnButton>
+        <div class="p-8 rounded-lg bg-white/50">
+          <ShadcnDropdown glass :dark="isDark">
+            <template #trigger>
+              <ShadcnButton :dark="isDark">打开菜单</ShadcnButton>
+            </template>
+            <ShadcnDropdownItem>操作 1</ShadcnDropdownItem>
+            <ShadcnDropdownItem>操作 2</ShadcnDropdownItem>
+            <ShadcnDropdownItem divided>操作 3</ShadcnDropdownItem>
+            <ShadcnDropdownItem>操作 4</ShadcnDropdownItem>
+          </ShadcnDropdown>
         </div>
       </div>
     </div>
@@ -22,8 +27,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnSpin } from "@/ui/spin";
+import { ShadcnDropdown, ShadcnDropdownItem } from "@/ui/dropdown";
 
 const isDark = ref(false)
-const loading = ref(false)
 </script>
diff --git a/src/ui/dropdown/ShadcnDropdown.vue b/src/ui/dropdown/ShadcnDropdown.vue
index d0806233..953f4412 100644
--- a/src/ui/dropdown/ShadcnDropdown.vue
+++ b/src/ui/dropdown/ShadcnDropdown.vue
@@ -23,7 +23,9 @@
              @mouseenter="trigger === 'hover' && onMenuMouseEnter()"
              @mouseleave="trigger === 'hover' && onMenuMouseLeave()"
              :class="['fixed z-50 min-w-[8rem] rounded-md shadow-lg ring-1 focus:outline-none',
-                 dark ? 'bg-gray-700 ring-gray-600' : 'bg-white ring-black ring-opacity-5',
+                 glass && 'backdrop-blur-xl backdrop-saturate-150',
+                 glass && (dark ? 'bg-white/10 ring-white/20' : 'bg-white/30 ring-gray-400/40'),
+                 !glass && (dark ? 'bg-gray-700 ring-gray-600' : 'bg-white ring-black ring-opacity-5'),
                  positionClasses
             ]"
              :style="dropdownStyle">
@@ -49,7 +51,8 @@ const emit = defineEmits<DropdownEmits>()
 const props = withDefaults(defineProps<DropdownProps>(), {
   trigger: 'click',
   position: ArrangePosition.left,
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const isOpen = ref(false)
@@ -166,6 +169,7 @@ const onClickOutside = (event: MouseEvent) => {
 
 provide('closeDropdown', onClose)
 provide('dropdownDark', toRef(props, 'dark'))
+provide('dropdownGlass', toRef(props, 'glass'))
 
 onMounted(() => {
   document.addEventListener('click', onClickOutside)
diff --git a/src/ui/dropdown/ShadcnDropdownItem.vue b/src/ui/dropdown/ShadcnDropdownItem.vue
index d9a68034..eaef9c40 100644
--- a/src/ui/dropdown/ShadcnDropdownItem.vue
+++ b/src/ui/dropdown/ShadcnDropdownItem.vue
@@ -1,12 +1,19 @@
 <template>
-  <div v-if="divided" :class="['h-px my-1', isDark ? 'bg-gray-600' : 'bg-gray-100']"/>
+  <div v-if="divided" :class="['h-px my-1',
+                                     isGlass ? (isDark ? 'bg-white/20' : 'bg-gray-400/40') : (isDark ? 'bg-gray-600' : 'bg-gray-100')
+  ]"/>
   <div @click="handleClick"
        :id="name"
        :class="[ 'block px-4 py-2 text-sm',
                 disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
-                !isDark ? 'text-gray-700 hover:bg-gray-100 hover:text-gray-900' : 'text-gray-200 hover:bg-gray-600 hover:text-white',
-                active && !isDark ? 'bg-gray-100 text-gray-900' : '',
-                active && isDark ? 'bg-gray-600 text-white' : ''
+                isGlass && !isDark ? 'text-gray-800 hover:bg-white/50 hover:text-gray-900' : '',
+                isGlass && isDark ? 'text-gray-100 hover:bg-white/20 hover:text-white' : '',
+                !isGlass && !isDark ? 'text-gray-700 hover:bg-gray-100 hover:text-gray-900' : '',
+                !isGlass && isDark ? 'text-gray-200 hover:bg-gray-600 hover:text-white' : '',
+                active && !isDark && !isGlass ? 'bg-gray-100 text-gray-900' : '',
+                active && isDark && !isGlass ? 'bg-gray-600 text-white' : '',
+                active && !isDark && isGlass ? 'bg-white/50 text-gray-900' : '',
+                active && isDark && isGlass ? 'bg-white/20 text-white' : ''
       ]">
     <slot/>
   </div>
@@ -21,6 +28,7 @@ const emit = defineEmits<DropdownItemEmits>()
 
 const closeDropdown = inject('closeDropdown') as () => void
 const dropdownDark = inject('dropdownDark', ref(false))
+const dropdownGlass = inject('dropdownGlass', ref(false))
 
 const props = withDefaults(defineProps<DropdownItemProps>(), {
   name: generateRandomId(),
@@ -30,6 +38,7 @@ const props = withDefaults(defineProps<DropdownItemProps>(), {
 })
 
 const isDark = computed(() => props.dark || dropdownDark.value)
+const isGlass = computed(() => dropdownGlass.value)
 
 const handleClick = (event: MouseEvent) => {
   if (!props.disabled) {
diff --git a/src/ui/dropdown/types.ts b/src/ui/dropdown/types.ts
index d520c5e9..b5500674 100644
--- a/src/ui/dropdown/types.ts
+++ b/src/ui/dropdown/types.ts
@@ -7,6 +7,7 @@ export interface DropdownProps
     trigger?: DropdownTrigger
     position?: ArrangePosition
     dark?: boolean
+    glass?: boolean
 }
 
 export interface DropdownItemProps

From 64924ab57e359d4e240401f00db69524e0906609 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 30 Dec 2025 16:07:14 +0800
Subject: [PATCH 07/14] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Badge=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/navigation/dropdown.md | 23 ++---------------
 src/App.vue                            | 35 +++++++++++++++++---------
 2 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/docs/components/navigation/dropdown.md b/docs/components/navigation/dropdown.md
index e28c9838..b318658d 100644
--- a/docs/components/navigation/dropdown.md
+++ b/docs/components/navigation/dropdown.md
@@ -202,7 +202,6 @@ title: 下拉菜单 (Dropdown)
         <ShadcnDropdownItem divided>操作 3</ShadcnDropdownItem>
         <ShadcnDropdownItem>操作 4</ShadcnDropdownItem>
       </ShadcnDropdown>
-
       <ShadcnDropdown glass :dark="darkMode" trigger="hover">
         <template #trigger>
           <ShadcnButton :dark="darkMode">悬停打开</ShadcnButton>
@@ -224,36 +223,18 @@ title: 下拉菜单 (Dropdown)
 <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 flex gap-4">
-      <ShadcnDropdown glass :dark="darkMode" trigger="click">
+      <ShadcnDropdown glass trigger="click">
         <template #trigger>
-          <ShadcnButton :dark="darkMode">点击打开</ShadcnButton>
+          <ShadcnButton>点击打开</ShadcnButton>
         </template>
         <ShadcnDropdownItem>操作 1</ShadcnDropdownItem>
         <ShadcnDropdownItem active>操作 2</ShadcnDropdownItem>
         <ShadcnDropdownItem divided>操作 3</ShadcnDropdownItem>
         <ShadcnDropdownItem>操作 4</ShadcnDropdownItem>
       </ShadcnDropdown>
-
-      <ShadcnDropdown glass :dark="darkMode" trigger="hover">
-        <template #trigger>
-          <ShadcnButton :dark="darkMode">悬停打开</ShadcnButton>
-        </template>
-        <ShadcnDropdownItem>操作 1</ShadcnDropdownItem>
-        <ShadcnDropdownItem>操作 2</ShadcnDropdownItem>
-        <ShadcnDropdownItem divided>操作 3</ShadcnDropdownItem>
-        <ShadcnDropdownItem disabled>操作 4 (禁用)</ShadcnDropdownItem>
-      </ShadcnDropdown>
     </div>
   </div>
 </template>
-
-<script setup lang="ts">
-import { useData } from 'vitepress'
-import { computed } from 'vue'
-
-const { isDark } = useData()
-const darkMode = computed(() => isDark.value)
-</script>
 ```
 
 :::
diff --git a/src/App.vue b/src/App.vue
index 9b3f8f59..162cfeee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,18 +5,29 @@
     </ShadcnButton>
 
     <div class="mt-6">
-      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Dropdown 液态玻璃效果</h3>
+      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Badge 液态玻璃效果</h3>
       <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">
-          <ShadcnDropdown glass :dark="isDark">
-            <template #trigger>
-              <ShadcnButton :dark="isDark">打开菜单</ShadcnButton>
-            </template>
-            <ShadcnDropdownItem>操作 1</ShadcnDropdownItem>
-            <ShadcnDropdownItem>操作 2</ShadcnDropdownItem>
-            <ShadcnDropdownItem divided>操作 3</ShadcnDropdownItem>
-            <ShadcnDropdownItem>操作 4</ShadcnDropdownItem>
-          </ShadcnDropdown>
+        <div class="p-8 rounded-lg bg-white/50 flex gap-6 items-center justify-center">
+          <ShadcnBadge glass :dark="isDark" type="primary" text="5">
+            <div :class="['px-6 py-3 rounded-lg', isDark ? 'bg-gray-800/50 text-gray-100' : 'bg-white/50 text-gray-900']">
+              Primary
+            </div>
+          </ShadcnBadge>
+          <ShadcnBadge glass :dark="isDark" type="success" text="10">
+            <div :class="['px-6 py-3 rounded-lg', isDark ? 'bg-gray-800/50 text-gray-100' : 'bg-white/50 text-gray-900']">
+              Success
+            </div>
+          </ShadcnBadge>
+          <ShadcnBadge glass :dark="isDark" type="warning" text="99+">
+            <div :class="['px-6 py-3 rounded-lg', isDark ? 'bg-gray-800/50 text-gray-100' : 'bg-white/50 text-gray-900']">
+              Warning
+            </div>
+          </ShadcnBadge>
+          <ShadcnBadge glass :dark="isDark" type="danger" text="New">
+            <div :class="['px-6 py-3 rounded-lg', isDark ? 'bg-gray-800/50 text-gray-100' : 'bg-white/50 text-gray-900']">
+              Danger
+            </div>
+          </ShadcnBadge>
         </div>
       </div>
     </div>
@@ -27,7 +38,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnDropdown, ShadcnDropdownItem } from "@/ui/dropdown";
+import { ShadcnBadge } from "@/ui/badge";
 
 const isDark = ref(false)
 </script>

From 6aa5c829254ccc0c7a995e707013b61cfa9a501d Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 30 Dec 2025 16:14:17 +0800
Subject: [PATCH 08/14] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Menu=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/navigation/menu.md    | 92 +++++++++++++++++++++++++++
 playground/src/example/menu/glass.vue | 52 +++++++++++++++
 playground/src/example/menu/usage.vue | 22 +++++++
 src/App.vue                           | 43 ++++++-------
 src/ui/menu/ShadcnMenu.vue            | 16 +++--
 src/ui/menu/ShadcnMenuItem.vue        | 22 +++++--
 src/ui/menu/ShadcnMenuSub.vue         | 22 +++++--
 7 files changed, 230 insertions(+), 39 deletions(-)
 create mode 100644 playground/src/example/menu/glass.vue
 create mode 100644 playground/src/example/menu/usage.vue

diff --git a/docs/components/navigation/menu.md b/docs/components/navigation/menu.md
index b934731b..c46d648b 100644
--- a/docs/components/navigation/menu.md
+++ b/docs/components/navigation/menu.md
@@ -270,6 +270,97 @@ title: 菜单 (Menu)
 
 :::
 
+## 液态玻璃效果 (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">
+      <ShadcnMenu glass :dark="darkMode">
+        <ShadcnMenuItem name="home">
+          <template #icon>
+            <ShadcnIcon icon="Home"/>
+          </template>
+          首页
+        </ShadcnMenuItem>
+        <ShadcnMenuSub name="products">
+          <template #title>产品</template>
+          <template #icon>
+            <ShadcnIcon icon="Package"/>
+          </template>
+          <ShadcnMenuItem name="product-1">产品 1</ShadcnMenuItem>
+          <ShadcnMenuItem name="product-2">产品 2</ShadcnMenuItem>
+          <ShadcnMenuItem name="product-3">产品 3</ShadcnMenuItem>
+        </ShadcnMenuSub>
+        <ShadcnMenuSub name="services">
+          <template #title>服务</template>
+          <template #icon>
+            <ShadcnIcon icon="Settings"/>
+          </template>
+          <ShadcnMenuItem name="service-1">服务 1</ShadcnMenuItem>
+          <ShadcnMenuItem name="service-2">服务 2</ShadcnMenuItem>
+        </ShadcnMenuSub>
+        <ShadcnMenuItem name="about">
+          <template #icon>
+            <ShadcnIcon icon="Info"/>
+          </template>
+          关于
+        </ShadcnMenuItem>
+      </ShadcnMenu>
+    </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">
+      <ShadcnMenu glass>
+        <ShadcnMenuItem name="home">
+          <template #icon>
+            <ShadcnIcon icon="Home"/>
+          </template>
+          首页
+        </ShadcnMenuItem>
+        <ShadcnMenuSub name="products">
+          <template #title>产品</template>
+          <template #icon>
+            <ShadcnIcon icon="Package"/>
+          </template>
+          <ShadcnMenuItem name="product-1">产品 1</ShadcnMenuItem>
+          <ShadcnMenuItem name="product-2">产品 2</ShadcnMenuItem>
+          <ShadcnMenuItem name="product-3">产品 3</ShadcnMenuItem>
+        </ShadcnMenuSub>
+        <ShadcnMenuSub name="services">
+          <template #title>服务</template>
+          <template #icon>
+            <ShadcnIcon icon="Settings"/>
+          </template>
+          <ShadcnMenuItem name="service-1">服务 1</ShadcnMenuItem>
+          <ShadcnMenuItem name="service-2">服务 2</ShadcnMenuItem>
+        </ShadcnMenuSub>
+        <ShadcnMenuItem name="about">
+          <template #icon>
+            <ShadcnIcon icon="Info"/>
+          </template>
+          关于
+        </ShadcnMenuItem>
+      </ShadcnMenu>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+</script>
+```
+:::
+
 ## 自定义插槽
 
 ShadcnMenuSub 支持 `header` 插槽，可以完全自定义子菜单的标题部分。
@@ -334,6 +425,7 @@ ShadcnMenuSub 支持 `header` 插槽，可以完全自定义子菜单的标题
         ['direction', '菜单的方向', 'string', 'vertical', 'horizontal | vertical'],
         ['dark', '暗黑模式', 'boolean', 'false', '-'],
         ['trigger', '子菜单触发方式', 'string', 'click', 'click | hover'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
diff --git a/playground/src/example/menu/glass.vue b/playground/src/example/menu/glass.vue
new file mode 100644
index 00000000..00cbd9ae
--- /dev/null
+++ b/playground/src/example/menu/glass.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="space-y-4">
+    <div class="relative">
+      <div class="h-96 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400"></div>
+      <div class="absolute inset-0 flex items-center justify-center p-4">
+        <ShadcnMenu glass>
+          <ShadcnMenuItem name="home">首页</ShadcnMenuItem>
+          <ShadcnMenuSub name="products">
+            <template #title>产品</template>
+            <ShadcnMenuItem name="product-1">产品 1</ShadcnMenuItem>
+            <ShadcnMenuItem name="product-2">产品 2</ShadcnMenuItem>
+            <ShadcnMenuItem name="product-3">产品 3</ShadcnMenuItem>
+          </ShadcnMenuSub>
+          <ShadcnMenuSub name="services">
+            <template #title>服务</template>
+            <ShadcnMenuItem name="service-1">服务 1</ShadcnMenuItem>
+            <ShadcnMenuItem name="service-2">服务 2</ShadcnMenuItem>
+          </ShadcnMenuSub>
+          <ShadcnMenuItem name="about">关于</ShadcnMenuItem>
+          <ShadcnMenuItem name="contact">联系</ShadcnMenuItem>
+        </ShadcnMenu>
+      </div>
+    </div>
+    <div class="relative">
+      <div class="h-96 rounded-lg bg-gradient-to-r from-green-400 to-teal-400"></div>
+      <div class="absolute inset-0 flex items-center justify-center p-4">
+        <ShadcnMenu glass direction="horizontal">
+          <ShadcnMenuItem name="home">首页</ShadcnMenuItem>
+          <ShadcnMenuSub name="products">
+            <template #title>产品</template>
+            <ShadcnMenuItem name="product-1">产品 1</ShadcnMenuItem>
+            <ShadcnMenuItem name="product-2">产品 2</ShadcnMenuItem>
+            <ShadcnMenuSub name="more">
+              <template #title>更多产品</template>
+              <ShadcnMenuItem name="product-3">产品 3</ShadcnMenuItem>
+              <ShadcnMenuItem name="product-4">产品 4</ShadcnMenuItem>
+            </ShadcnMenuSub>
+          </ShadcnMenuSub>
+          <ShadcnMenuSub name="services">
+            <template #title>服务</template>
+            <ShadcnMenuItem name="service-1">服务 1</ShadcnMenuItem>
+            <ShadcnMenuItem name="service-2">服务 2</ShadcnMenuItem>
+          </ShadcnMenuSub>
+          <ShadcnMenuItem name="about">关于</ShadcnMenuItem>
+        </ShadcnMenu>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/playground/src/example/menu/usage.vue b/playground/src/example/menu/usage.vue
new file mode 100644
index 00000000..cd565e81
--- /dev/null
+++ b/playground/src/example/menu/usage.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="space-y-4">
+    <ShadcnMenu>
+      <ShadcnMenuItem name="home">首页</ShadcnMenuItem>
+      <ShadcnMenuSub name="products">
+        <template #title>产品</template>
+        <ShadcnMenuItem name="product-1">产品 1</ShadcnMenuItem>
+        <ShadcnMenuItem name="product-2">产品 2</ShadcnMenuItem>
+        <ShadcnMenuItem name="product-3">产品 3</ShadcnMenuItem>
+      </ShadcnMenuSub>
+      <ShadcnMenuSub name="services">
+        <template #title>服务</template>
+        <ShadcnMenuItem name="service-1">服务 1</ShadcnMenuItem>
+        <ShadcnMenuItem name="service-2">服务 2</ShadcnMenuItem>
+      </ShadcnMenuSub>
+      <ShadcnMenuItem name="about">关于</ShadcnMenuItem>
+    </ShadcnMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/src/App.vue b/src/App.vue
index 162cfeee..4a52b2bb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,29 +5,25 @@
     </ShadcnButton>
 
     <div class="mt-6">
-      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Badge 液态玻璃效果</h3>
+      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Menu 液态玻璃效果</h3>
       <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 flex gap-6 items-center justify-center">
-          <ShadcnBadge glass :dark="isDark" type="primary" text="5">
-            <div :class="['px-6 py-3 rounded-lg', isDark ? 'bg-gray-800/50 text-gray-100' : 'bg-white/50 text-gray-900']">
-              Primary
-            </div>
-          </ShadcnBadge>
-          <ShadcnBadge glass :dark="isDark" type="success" text="10">
-            <div :class="['px-6 py-3 rounded-lg', isDark ? 'bg-gray-800/50 text-gray-100' : 'bg-white/50 text-gray-900']">
-              Success
-            </div>
-          </ShadcnBadge>
-          <ShadcnBadge glass :dark="isDark" type="warning" text="99+">
-            <div :class="['px-6 py-3 rounded-lg', isDark ? 'bg-gray-800/50 text-gray-100' : 'bg-white/50 text-gray-900']">
-              Warning
-            </div>
-          </ShadcnBadge>
-          <ShadcnBadge glass :dark="isDark" type="danger" text="New">
-            <div :class="['px-6 py-3 rounded-lg', isDark ? 'bg-gray-800/50 text-gray-100' : 'bg-white/50 text-gray-900']">
-              Danger
-            </div>
-          </ShadcnBadge>
+        <div class="p-8 rounded-lg bg-white/50">
+          <ShadcnMenu glass :dark="isDark" v-model="activeKey">
+            <ShadcnMenuItem name="home">首页</ShadcnMenuItem>
+            <ShadcnMenuSub name="products">
+              <template #title>产品</template>
+              <ShadcnMenuItem name="product-1">产品 1</ShadcnMenuItem>
+              <ShadcnMenuItem name="product-2">产品 2</ShadcnMenuItem>
+              <ShadcnMenuItem name="product-3">产品 3</ShadcnMenuItem>
+            </ShadcnMenuSub>
+            <ShadcnMenuSub name="services">
+              <template #title>服务</template>
+              <ShadcnMenuItem name="service-1">服务 1</ShadcnMenuItem>
+              <ShadcnMenuItem name="service-2">服务 2</ShadcnMenuItem>
+            </ShadcnMenuSub>
+            <ShadcnMenuItem name="about">关于</ShadcnMenuItem>
+            <ShadcnMenuItem name="contact">联系</ShadcnMenuItem>
+          </ShadcnMenu>
         </div>
       </div>
     </div>
@@ -38,7 +34,8 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnBadge } from "@/ui/badge";
+import { ShadcnMenu, ShadcnMenuItem, ShadcnMenuSub } from "@/ui/menu";
 
 const isDark = ref(false)
+const activeKey = ref('home')
 </script>
diff --git a/src/ui/menu/ShadcnMenu.vue b/src/ui/menu/ShadcnMenu.vue
index 8fff897e..11244c09 100644
--- a/src/ui/menu/ShadcnMenu.vue
+++ b/src/ui/menu/ShadcnMenu.vue
@@ -1,7 +1,12 @@
 <template>
   <div ref="menuRef"
-       :class="dark ? 'bg-gray-800' : 'bg-white'"
-       class="p-2"
+       :class="[
+         'p-2',
+         glass && 'backdrop-blur-xl backdrop-saturate-150',
+         glass && (dark ? 'bg-gray-800/30' : 'bg-white/30'),
+         glass && (dark ? 'border border-white/20' : 'border border-gray-400/40'),
+         !glass && (dark ? 'bg-gray-800' : 'bg-white')
+       ]"
        :style="{ width: direction === 'vertical' ? calcSize(props.width) : '100%' }">
     <div :class="['flex', directionClass]">
       <slot/>
@@ -19,11 +24,13 @@ const props = withDefaults(defineProps<{
   direction?: 'horizontal' | 'vertical'
   dark?: boolean
   trigger?: 'click' | 'hover'
+  glass?: boolean
 }>(), {
   width: 200,
   direction: 'vertical',
   dark: false,
-  trigger: 'click'
+  trigger: 'click',
+  glass: false
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -86,6 +93,7 @@ provide('menuContext', {
   isExpanded,
   closeAllMenus,
   dark: computed(() => props.dark),
-  trigger: props.trigger
+  trigger: props.trigger,
+  glass: computed(() => props.glass)
 })
 </script>
\ No newline at end of file
diff --git a/src/ui/menu/ShadcnMenuItem.vue b/src/ui/menu/ShadcnMenuItem.vue
index c24b4f62..d3f85843 100644
--- a/src/ui/menu/ShadcnMenuItem.vue
+++ b/src/ui/menu/ShadcnMenuItem.vue
@@ -1,9 +1,13 @@
 <template>
   <ShadcnLink v-if="to"
               :class="[
-                   'flex items-center justify-between px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer',
-                   dark ? 'text-gray-200 hover:bg-gray-700 focus:bg-gray-700' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900',
-                   isActive ? (dark ? 'bg-gray-700' : 'bg-gray-100 text-gray-900') : ''
+                   'flex items-center justify-between px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer select-none',
+                   glass && !dark ? 'text-gray-800 hover:bg-white/50 focus:bg-white/50' : '',
+                   glass && dark ? 'text-gray-100 hover:bg-white/20 focus:bg-white/20' : '',
+                   !glass && dark ? 'text-gray-200 hover:bg-gray-700 focus:bg-gray-700' : '',
+                   !glass && !dark ? 'text-gray-700 hover:bg-gray-100 hover:text-gray-900' : '',
+                   isActive && !glass ? (dark ? 'bg-gray-700' : 'bg-gray-100 text-gray-900') : '',
+                   isActive && glass ? (dark ? 'bg-white/20' : 'bg-white/50 text-gray-900') : ''
               ]"
               :dark="dark"
               :data-name="name"
@@ -20,9 +24,13 @@
   </ShadcnLink>
   <div v-else
        :class="[
-             'flex items-center justify-between px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer',
-             dark ? 'text-gray-200 hover:bg-gray-700 focus:bg-gray-700' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900',
-             isActive ? (dark ? 'bg-gray-700' : 'bg-gray-100 text-gray-900') : ''
+             'flex items-center justify-between px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer select-none',
+             glass && !dark ? 'text-gray-800 hover:bg-white/50 focus:bg-white/50' : '',
+             glass && dark ? 'text-gray-100 hover:bg-white/20 focus:bg-white/20' : '',
+             !glass && dark ? 'text-gray-200 hover:bg-gray-700 focus:bg-gray-700' : '',
+             !glass && !dark ? 'text-gray-700 hover:bg-gray-100 hover:text-gray-900' : '',
+             isActive && !glass ? (dark ? 'bg-gray-700' : 'bg-gray-100 text-gray-900') : '',
+             isActive && glass ? (dark ? 'bg-white/20' : 'bg-white/50 text-gray-900') : ''
        ]"
        :data-name="name"
        :data-parent="parentName"
@@ -58,6 +66,7 @@ const menuContext = inject('menuContext') as {
   direction: 'horizontal' | 'vertical'
   parentName?: string
   dark?: { value: boolean }
+  glass?: { value: boolean }
   closeAllMenus?: () => void
 }
 
@@ -65,6 +74,7 @@ const isActive = computed(() => props.active || menuContext.activeKey.value ===
 const isHorizontal = computed(() => menuContext.direction === 'horizontal')
 const parentName = menuContext.parentName || null
 const dark = computed(() => menuContext.dark?.value || false)
+const glass = computed(() => menuContext.glass?.value || false)
 
 const onClick = (event: MouseEvent) => {
   menuContext.setActiveKey(props.name)
diff --git a/src/ui/menu/ShadcnMenuSub.vue b/src/ui/menu/ShadcnMenuSub.vue
index 24623b87..f6ae9a27 100644
--- a/src/ui/menu/ShadcnMenuSub.vue
+++ b/src/ui/menu/ShadcnMenuSub.vue
@@ -3,10 +3,14 @@
        @mouseenter="trigger === 'hover' && handleMouseEnter()"
        @mouseleave="trigger === 'hover' && handleMouseLeave()">
     <div :class="[
-          'px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer',
+          'px-3 py-2 text-sm rounded-md focus:outline-none cursor-pointer select-none',
           'flex items-center justify-between gap-2',
-          dark ? 'text-gray-200 hover:bg-gray-700 focus:bg-gray-700' : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900',
-          (isExpanded || hasActiveChild) ? (dark ? 'bg-gray-700' : 'bg-gray-100 text-gray-900') : ''
+          glass && !dark ? 'text-gray-800 hover:bg-white/50 focus:bg-white/50' : '',
+          glass && dark ? 'text-gray-100 hover:bg-white/20 focus:bg-white/20' : '',
+          !glass && dark ? 'text-gray-200 hover:bg-gray-700 focus:bg-gray-700' : '',
+          !glass && !dark ? 'text-gray-700 hover:bg-gray-100 hover:text-gray-900' : '',
+          (isExpanded || hasActiveChild) && !glass ? (dark ? 'bg-gray-700' : 'bg-gray-100 text-gray-900') : '',
+          (isExpanded || hasActiveChild) && glass ? (dark ? 'bg-white/20' : 'bg-white/50 text-gray-900') : ''
         ]"
          @click="trigger === 'click' && toggleExpand()">
       <slot name="header" :expanded="isExpanded" :hasActiveChild="hasActiveChild">
@@ -38,9 +42,13 @@
            ref="menuContent"
            :class="[
             'space-y-1',
-            isNested ? (dark ? 'absolute left-full top-0 ml-1 bg-gray-800 w-fit shadow-lg px-2 py-2 z-30 rounded-md' : 'absolute left-full top-0 ml-1 bg-white w-fit shadow-lg px-2 py-2 z-30 rounded-md border border-gray-200') :
-            isHorizontal ? (dark ? 'absolute left-0 mt-2.5 bg-gray-800 w-fit shadow-lg px-2 py-2 z-20 rounded-md' : 'absolute left-0 mt-2.5 bg-white w-fit shadow-lg px-2 py-2 z-20 rounded-md border border-gray-200') :
-            'pl-4 mt-1'
+            isNested && glass && 'absolute left-full top-0 ml-1 w-fit shadow-lg px-2 py-2 z-30 rounded-md backdrop-blur-xl backdrop-saturate-150',
+            isNested && glass && (dark ? 'bg-gray-800/30 border border-white/20' : 'bg-white/30 border border-gray-400/40'),
+            isNested && !glass && (dark ? 'absolute left-full top-0 ml-1 bg-gray-800 w-fit shadow-lg px-2 py-2 z-30 rounded-md' : 'absolute left-full top-0 ml-1 bg-white w-fit shadow-lg px-2 py-2 z-30 rounded-md border border-gray-200'),
+            isHorizontal && !isNested && glass && 'absolute left-0 mt-2.5 w-fit shadow-lg px-2 py-2 z-20 rounded-md backdrop-blur-xl backdrop-saturate-150',
+            isHorizontal && !isNested && glass && (dark ? 'bg-gray-800/30 border border-white/20' : 'bg-white/30 border border-gray-400/40'),
+            isHorizontal && !isNested && !glass && (dark ? 'absolute left-0 mt-2.5 bg-gray-800 w-fit shadow-lg px-2 py-2 z-20 rounded-md' : 'absolute left-0 mt-2.5 bg-white w-fit shadow-lg px-2 py-2 z-20 rounded-md border border-gray-200'),
+            !isHorizontal && !isNested && 'pl-4 mt-1'
           ]">
         <slot/>
       </div>
@@ -61,6 +69,7 @@ const menuContext = inject('menuContext') as {
   toggleExpandedKey: (key: string) => void
   isExpanded: (key: string) => boolean
   dark?: { value: boolean }
+  glass?: { value: boolean }
   parentName?: string
   trigger?: 'click' | 'hover'
 }
@@ -74,6 +83,7 @@ const isHorizontal = computed(() => menuContext.direction === 'horizontal')
 const isNested = computed(() => !!menuContext.parentName && isHorizontal.value)
 const isExpanded = computed(() => menuContext.isExpanded(props.name))
 const dark = computed(() => menuContext.dark?.value || false)
+const glass = computed(() => menuContext.glass?.value || false)
 const trigger = computed(() => menuContext.trigger || 'click')
 
 const hasActiveChild = ref(false)

From 103456e50814ff40d00008e5c9d3a91573c8454b Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 30 Dec 2025 16:21:46 +0800
Subject: [PATCH 09/14] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Pagination=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/navigation/pagination.md    | 41 +++++++++++++++++++++
 playground/src/example/pagination/glass.vue | 33 +++++++++++++++++
 playground/src/example/pagination/usage.vue | 11 ++++++
 src/App.vue                                 | 29 +++++----------
 src/ui/pagination/ShadcnPagination.vue      | 40 ++++++++++++++------
 src/ui/select/ShadcnSelect.vue              |  2 +-
 6 files changed, 123 insertions(+), 33 deletions(-)
 create mode 100644 playground/src/example/pagination/glass.vue
 create mode 100644 playground/src/example/pagination/usage.vue

diff --git a/docs/components/navigation/pagination.md b/docs/components/navigation/pagination.md
index 9f558dcf..a942dcd2 100644
--- a/docs/components/navigation/pagination.md
+++ b/docs/components/navigation/pagination.md
@@ -149,6 +149,42 @@ const defaultValue = ref(1)
 
 :::
 
+## 液态玻璃效果 (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 flex flex-col items-center gap-6">
+      数据值: {{glassValue1}}
+      <ShadcnPagination glass :dark="darkMode" v-model="glassValue1" :total="100" />
+      数据值: {{glassValue2}}
+      <ShadcnPagination glass :dark="darkMode" v-model="glassValue2" :total="200" show-total />
+      数据值: {{glassValue3}}
+      <ShadcnPagination glass :dark="darkMode" v-model="glassValue3" :total="300" show-total show-sizer />
+    </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 flex flex-col items-center gap-6">
+      <ShadcnPagination glass v-model="currentPage1" :total="100" />
+      <ShadcnPagination glass v-model="currentPage2" :total="200" show-total />
+      <ShadcnPagination glass v-model="currentPage3" :total="300" show-total show-sizer />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const currentPage1 = ref(1)
+const currentPage2 = ref(1)
+const currentPage3 = ref(1)
+</script>
+```
+:::
+
 ## 分页 (Pagination) 属性
 
 <ApiTable title="分页 (Pagination) 属性"
@@ -163,6 +199,8 @@ const defaultValue = ref(1)
         ['showTotal', '是否显示项总数', 'boolean', 'false'],
         ['showSizer', '是否显示页数选择器', 'boolean', 'false'],
         ['sizerOptions', '页数选择器选项', 'array', '\[10, 20, 50, 100\]'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false'],
+        ['dark', '是否启用暗黑模式', 'boolean', 'false'],
     ]">
 </ApiTable>
 
@@ -196,4 +234,7 @@ const { isDark } = useData()
 const darkMode = computed(() => isDark.value)
 
 const defaultValue = ref(1)
+const glassValue1 = ref(1)
+const glassValue2 = ref(1)
+const glassValue3 = ref(1)
 </script>
\ No newline at end of file
diff --git a/playground/src/example/pagination/glass.vue b/playground/src/example/pagination/glass.vue
new file mode 100644
index 00000000..505ac0c7
--- /dev/null
+++ b/playground/src/example/pagination/glass.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="space-y-4">
+    <div class="relative">
+      <div class="h-64 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400"></div>
+      <div class="absolute inset-0 flex items-center justify-center p-4">
+        <div class="flex flex-col gap-6">
+          <ShadcnPagination glass v-model="currentPage1" :total="100" />
+          <ShadcnPagination glass v-model="currentPage2" :total="200" show-total />
+          <ShadcnPagination glass v-model="currentPage3" :total="300" show-total show-sizer />
+        </div>
+      </div>
+    </div>
+    <div class="relative">
+      <div class="h-64 rounded-lg bg-gradient-to-r from-green-400 to-teal-400"></div>
+      <div class="absolute inset-0 flex items-center justify-center p-4">
+        <div class="flex flex-col gap-6">
+          <ShadcnPagination glass v-model="currentPage4" :total="500" show-total />
+          <ShadcnPagination glass v-model="currentPage5" :total="1000" show-total show-sizer :sizer-options="[10, 20, 50, 100]" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const currentPage1 = ref(1)
+const currentPage2 = ref(1)
+const currentPage3 = ref(1)
+const currentPage4 = ref(1)
+const currentPage5 = ref(1)
+</script>
diff --git a/playground/src/example/pagination/usage.vue b/playground/src/example/pagination/usage.vue
new file mode 100644
index 00000000..d0729e04
--- /dev/null
+++ b/playground/src/example/pagination/usage.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="space-y-4 flex flex-col items-center">
+    <ShadcnPagination v-model="currentPage" :total="100" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+</script>
diff --git a/src/App.vue b/src/App.vue
index 4a52b2bb..d4038e71 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,25 +5,12 @@
     </ShadcnButton>
 
     <div class="mt-6">
-      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Menu 液态玻璃效果</h3>
+      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Pagination 液态玻璃效果</h3>
       <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">
-          <ShadcnMenu glass :dark="isDark" v-model="activeKey">
-            <ShadcnMenuItem name="home">首页</ShadcnMenuItem>
-            <ShadcnMenuSub name="products">
-              <template #title>产品</template>
-              <ShadcnMenuItem name="product-1">产品 1</ShadcnMenuItem>
-              <ShadcnMenuItem name="product-2">产品 2</ShadcnMenuItem>
-              <ShadcnMenuItem name="product-3">产品 3</ShadcnMenuItem>
-            </ShadcnMenuSub>
-            <ShadcnMenuSub name="services">
-              <template #title>服务</template>
-              <ShadcnMenuItem name="service-1">服务 1</ShadcnMenuItem>
-              <ShadcnMenuItem name="service-2">服务 2</ShadcnMenuItem>
-            </ShadcnMenuSub>
-            <ShadcnMenuItem name="about">关于</ShadcnMenuItem>
-            <ShadcnMenuItem name="contact">联系</ShadcnMenuItem>
-          </ShadcnMenu>
+        <div class="p-8 rounded-lg bg-white/50 flex flex-col items-center gap-6">
+          <ShadcnPagination glass :dark="isDark" v-model="currentPage" :total="100" />
+          <ShadcnPagination glass :dark="isDark" v-model="currentPage2" :total="200" show-total />
+          <ShadcnPagination glass :dark="isDark" v-model="currentPage3" :total="300" show-total show-sizer />
         </div>
       </div>
     </div>
@@ -34,8 +21,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnMenu, ShadcnMenuItem, ShadcnMenuSub } from "@/ui/menu";
+import { ShadcnPagination } from "@/ui/pagination";
 
 const isDark = ref(false)
-const activeKey = ref('home')
+const currentPage = ref(1)
+const currentPage2 = ref(1)
+const currentPage3 = ref(1)
 </script>
diff --git a/src/ui/pagination/ShadcnPagination.vue b/src/ui/pagination/ShadcnPagination.vue
index f671dbdf..881f1a46 100644
--- a/src/ui/pagination/ShadcnPagination.vue
+++ b/src/ui/pagination/ShadcnPagination.vue
@@ -1,6 +1,10 @@
 <template>
-  <div class="flex items-center justify-center space-x-2">
-    <div v-if="showTotal || $slots.showTotal" :class="['text-sm', dark ? 'text-gray-400' : 'text-gray-600']">
+  <div :class="[
+    'flex items-center justify-center space-x-2',
+    glass && 'backdrop-blur-xl backdrop-saturate-150 rounded-lg p-3',
+    glass && (dark ? 'bg-gray-800/30 border border-white/20' : 'bg-white/30 border border-gray-400/40')
+  ]">
+    <div v-if="showTotal || $slots.showTotal" :class="['text-sm', glass ? (dark ? 'text-gray-100' : 'text-gray-800') : (dark ? 'text-gray-400' : 'text-gray-600')]">
       <slot name="showTotal">
         {{ t('pagination.text.total', { total }) }}
       </slot>
@@ -8,8 +12,11 @@
 
     <button @click="onPrevPage"
             :class="[
-              'px-2 py-1 text-xs h-8 rounded transition-colors',
-              dark ? 'bg-gray-700 text-gray-200 hover:bg-gray-600' : 'bg-gray-100 hover:bg-gray-200',
+              'px-2 py-1 text-xs h-8 rounded transition-colors select-none',
+              glass && !dark ? 'bg-white/50 text-gray-800 hover:bg-white/70' : '',
+              glass && dark ? 'bg-white/20 text-gray-100 hover:bg-white/30' : '',
+              !glass && dark ? 'bg-gray-700 text-gray-200 hover:bg-gray-600' : '',
+              !glass && !dark ? 'bg-gray-100 hover:bg-gray-200' : '',
               currentPage === 1 ? 'opacity-50 cursor-not-allowed' : ''
             ]"
             :disabled="currentPage === 1">
@@ -17,14 +24,17 @@
     </button>
 
     <template v-for="item in displayPages" :key="item">
-      <span v-if="item === '...'" :class="['px-2 py-1', dark ? 'text-gray-400' : 'text-gray-600']">...</span>
+      <span v-if="item === '...'" :class="['px-2 py-1', glass ? (dark ? 'text-gray-100' : 'text-gray-800') : (dark ? 'text-gray-400' : 'text-gray-600')]">...</span>
       <button v-else
               @click="goToPage(Number(item))"
               :class="[
-                'px-2 py-1 text-xs rounded w-8 h-8 flex items-center justify-center transition-colors',
-                item === currentPage
-                  ? 'bg-blue-500 text-white cursor-not-allowed'
-                  : (dark ? 'bg-gray-700 text-gray-200 hover:bg-gray-600' : 'bg-gray-100 hover:bg-gray-200')
+                'px-2 py-1 text-xs rounded w-8 h-8 flex items-center justify-center transition-colors select-none',
+                item === currentPage && !glass ? 'bg-blue-500 text-white cursor-not-allowed' : '',
+                item === currentPage && glass ? (dark ? 'bg-blue-600/60 text-white cursor-not-allowed' : 'bg-blue-500/60 text-white cursor-not-allowed') : '',
+                item !== currentPage && glass && !dark ? 'bg-white/50 text-gray-800 hover:bg-white/70' : '',
+                item !== currentPage && glass && dark ? 'bg-white/20 text-gray-100 hover:bg-white/30' : '',
+                item !== currentPage && !glass && dark ? 'bg-gray-700 text-gray-200 hover:bg-gray-600' : '',
+                item !== currentPage && !glass && !dark ? 'bg-gray-100 hover:bg-gray-200' : ''
               ]"
               :disabled="item === currentPage">
         {{ item }}
@@ -33,8 +43,11 @@
 
     <button @click="onNextPage"
             :class="[
-              'px-2 py-1 text-xs h-8 rounded transition-colors',
-              dark ? 'bg-gray-700 text-gray-200 hover:bg-gray-600' : 'bg-gray-100 hover:bg-gray-200',
+              'px-2 py-1 text-xs h-8 rounded transition-colors select-none',
+              glass && !dark ? 'bg-white/50 text-gray-800 hover:bg-white/70' : '',
+              glass && dark ? 'bg-white/20 text-gray-100 hover:bg-white/30' : '',
+              !glass && dark ? 'bg-gray-700 text-gray-200 hover:bg-gray-600' : '',
+              !glass && !dark ? 'bg-gray-100 hover:bg-gray-200' : '',
               currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : ''
             ]"
             :disabled="currentPage === totalPages">
@@ -46,6 +59,7 @@
         <ShadcnSelect v-model="pageSize"
                       class="w-auto"
                       :dark="dark"
+                      :glass="glass"
                       :options="sizerOptions"/>
       </slot>
     </template>
@@ -76,6 +90,7 @@ const props = withDefaults(defineProps<{
   showSizer?: boolean
   sizerOptions?: (number | string)[]
   dark?: boolean
+  glass?: boolean
 }>(), {
   total: 100,
   pageSize: 10,
@@ -85,7 +100,8 @@ const props = withDefaults(defineProps<{
   showTotal: false,
   showSizer: false,
   sizerOptions: () => [10, 20, 50, 100],
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const currentPage = ref(Number(props.modelValue))
diff --git a/src/ui/select/ShadcnSelect.vue b/src/ui/select/ShadcnSelect.vue
index 04840fd0..703f489d 100644
--- a/src/ui/select/ShadcnSelect.vue
+++ b/src/ui/select/ShadcnSelect.vue
@@ -74,7 +74,7 @@
                     glass && 'backdrop-blur-xl backdrop-saturate-150',
                     glass && 'border-white/20',
                     glass && 'shadow-xl shadow-black/10',
-                    glass ? (dark ? 'bg-gray-800/90' : 'bg-white/90') : (dark ? 'border-gray-600 bg-gray-800' : 'border-gray-200 bg-white')]"
+                    glass ? (dark ? 'bg-white/10' : 'bg-white/30') : (dark ? 'border-gray-600 bg-gray-800' : 'border-gray-200 bg-white')]"
            @scroll="handleScroll">
         <slot name="options">
           <ShadcnSelectOption v-for="(option, index) in internalOptions"

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

---
 docs/components/navigation/tabs.md   | 52 ++++++++++++++++++++++++++++
 playground/src/example/tab/glass.vue | 40 +++++++++++++++++++++
 playground/src/example/tab/usage.vue | 18 ++++++++++
 src/App.vue                          | 25 ++++++++-----
 src/ui/tab/ShadcnTab.vue             | 25 ++++++++-----
 src/ui/tab/types.ts                  |  1 +
 6 files changed, 144 insertions(+), 17 deletions(-)
 create mode 100644 playground/src/example/tab/glass.vue
 create mode 100644 playground/src/example/tab/usage.vue

diff --git a/docs/components/navigation/tabs.md b/docs/components/navigation/tabs.md
index 55790a40..be423a76 100644
--- a/docs/components/navigation/tabs.md
+++ b/docs/components/navigation/tabs.md
@@ -348,8 +348,58 @@ title: 选项卡 (Tabs)
 </script>
 ```
 
+:::
+## 液态玻璃效果 (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 flex flex-col items-center gap-6">
+      <ShadcnTab glass :dark="darkMode">
+        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
+        <ShadcnTabItem label="Tab 2" value="Tab 2">Tab 2 content</ShadcnTabItem>
+        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
+      </ShadcnTab>
+      <ShadcnTab glass :dark="darkMode" type="success">
+        <ShadcnTabItem label="Success 1" value="Success 1">Success content</ShadcnTabItem>
+        <ShadcnTabItem label="Success 2" value="Success 2">Success content</ShadcnTabItem>
+        <ShadcnTabItem label="Success 3" value="Success 3">Success content</ShadcnTabItem>
+      </ShadcnTab>
+      <ShadcnTab glass :dark="darkMode" type="warning" closable>
+        <ShadcnTabItem label="Warning 1" value="Warning 1">Warning content</ShadcnTabItem>
+        <ShadcnTabItem label="Warning 2" value="Warning 2">Warning content</ShadcnTabItem>
+        <ShadcnTabItem label="Warning 3" value="Warning 3">Warning content</ShadcnTabItem>
+      </ShadcnTab>
+    </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 flex flex-col items-center gap-6">
+      <ShadcnTab glass>
+        <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
+        <ShadcnTabItem label="Tab 2" value="Tab 2">Tab 2 content</ShadcnTabItem>
+        <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
+      </ShadcnTab>
+      <ShadcnTab glass type="success">
+        <ShadcnTabItem label="Success 1" value="Success 1">Success content</ShadcnTabItem>
+        <ShadcnTabItem label="Success 2" value="Success 2">Success content</ShadcnTabItem>
+        <ShadcnTabItem label="Success 3" value="Success 3">Success content</ShadcnTabItem>
+      </ShadcnTab>
+      <ShadcnTab glass type="warning" closable>
+        <ShadcnTabItem label="Warning 1" value="Warning 1">Warning content</ShadcnTabItem>
+        <ShadcnTabItem label="Warning 2" value="Warning 2">Warning content</ShadcnTabItem>
+        <ShadcnTabItem label="Warning 3" value="Warning 3">Warning content</ShadcnTabItem>
+      </ShadcnTab>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+</script>
+```
+:::
 ## 动态选项卡
 
 <CodeRunner title="动态选项卡">
@@ -414,6 +464,8 @@ const addTab = () => {
         ['direction', '选项卡的方向', 'string', 'horizontal', 'horizontal | vertical'],
         ['position', '选项卡的位置', 'string', 'top', 'left | right'],
         ['showScrollButtons', '是否显示滚动按钮', 'boolean', 'true', '-'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'],
+        ['dark', '是否启用暗黑模式', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
diff --git a/playground/src/example/tab/glass.vue b/playground/src/example/tab/glass.vue
new file mode 100644
index 00000000..3b7bf00d
--- /dev/null
+++ b/playground/src/example/tab/glass.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="space-y-4">
+    <div class="relative">
+      <div class="h-64 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400"></div>
+      <div class="absolute inset-0 flex items-center justify-center p-4">
+        <div class="flex flex-col gap-6 w-full max-w-2xl">
+          <ShadcnTab glass>
+            <ShadcnTabItem label="Tab 1" value="Tab 1">Tab 1 content</ShadcnTabItem>
+            <ShadcnTabItem label="Tab 2" value="Tab 2">Tab 2 content</ShadcnTabItem>
+            <ShadcnTabItem label="Tab 3" value="Tab 3">Tab 3 content</ShadcnTabItem>
+          </ShadcnTab>
+          <ShadcnTab glass type="success">
+            <ShadcnTabItem label="Success 1" value="Success 1">Success content</ShadcnTabItem>
+            <ShadcnTabItem label="Success 2" value="Success 2">Success content</ShadcnTabItem>
+            <ShadcnTabItem label="Success 3" value="Success 3">Success content</ShadcnTabItem>
+          </ShadcnTab>
+        </div>
+      </div>
+    </div>
+    <div class="relative">
+      <div class="h-64 rounded-lg bg-gradient-to-r from-green-400 to-teal-400"></div>
+      <div class="absolute inset-0 flex items-center justify-center p-4">
+        <div class="flex flex-col gap-6 w-full max-w-2xl">
+          <ShadcnTab glass type="warning" closable>
+            <ShadcnTabItem label="Warning 1" value="Warning 1">Warning content</ShadcnTabItem>
+            <ShadcnTabItem label="Warning 2" value="Warning 2">Warning content</ShadcnTabItem>
+            <ShadcnTabItem label="Warning 3" value="Warning 3">Warning content</ShadcnTabItem>
+          </ShadcnTab>
+          <ShadcnTab glass type="error">
+            <ShadcnTabItem label="Error 1" value="Error 1">Error content</ShadcnTabItem>
+            <ShadcnTabItem label="Error 2" value="Error 2">Error content</ShadcnTabItem>
+          </ShadcnTab>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/playground/src/example/tab/usage.vue b/playground/src/example/tab/usage.vue
new file mode 100644
index 00000000..0f178978
--- /dev/null
+++ b/playground/src/example/tab/usage.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="space-y-4">
+    <ShadcnTab>
+      <ShadcnTabItem label="Tab 1" value="Tab 1">
+        <p>Tab 1 content</p>
+      </ShadcnTabItem>
+      <ShadcnTabItem label="Tab 2" value="Tab 2">
+        <p>Tab 2 content</p>
+      </ShadcnTabItem>
+      <ShadcnTabItem label="Tab 3" value="Tab 3">
+        <p>Tab 3 content</p>
+      </ShadcnTabItem>
+    </ShadcnTab>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/src/App.vue b/src/App.vue
index d4038e71..3fe60c92 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,12 +5,24 @@
     </ShadcnButton>
 
     <div class="mt-6">
-      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Pagination 液态玻璃效果</h3>
+      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Tab 液态玻璃效果</h3>
       <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 flex flex-col items-center gap-6">
-          <ShadcnPagination glass :dark="isDark" v-model="currentPage" :total="100" />
-          <ShadcnPagination glass :dark="isDark" v-model="currentPage2" :total="200" show-total />
-          <ShadcnPagination glass :dark="isDark" v-model="currentPage3" :total="300" show-total show-sizer />
+          <ShadcnTab glass :dark="isDark">
+            <ShadcnTabItem label="Tab 1" value="Tab 1">
+              <p :class="[isDark ? 'text-white' : 'text-gray-900']">Tab 1 content</p>
+            </ShadcnTabItem>
+            <ShadcnTabItem label="Tab 2" value="Tab 2">
+              <p :class="[isDark ? 'text-white' : 'text-gray-900']">Tab 2 content</p>
+            </ShadcnTabItem>
+            <ShadcnTabItem label="Tab 3" value="Tab 3">
+              <p :class="[isDark ? 'text-white' : 'text-gray-900']">Tab 3 content</p>
+            </ShadcnTabItem>
+          </ShadcnTab>
+          <ShadcnTab glass :dark="isDark" type="success">
+            <ShadcnTabItem label="Success 1" value="Success 1">Success content</ShadcnTabItem>
+            <ShadcnTabItem label="Success 2" value="Success 2">Success content</ShadcnTabItem>
+          </ShadcnTab>
         </div>
       </div>
     </div>
@@ -21,10 +33,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnPagination } from "@/ui/pagination";
+import { ShadcnTab, ShadcnTabItem } from "@/ui/tab";
 
 const isDark = ref(false)
-const currentPage = ref(1)
-const currentPage2 = ref(1)
-const currentPage3 = ref(1)
 </script>
diff --git a/src/ui/tab/ShadcnTab.vue b/src/ui/tab/ShadcnTab.vue
index bf8de475..b1bd4cf8 100644
--- a/src/ui/tab/ShadcnTab.vue
+++ b/src/ui/tab/ShadcnTab.vue
@@ -27,27 +27,33 @@
              class="overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
           <div ref="tabsWrapper"
                :class="[
-                 direction === 'vertical' ? 'flex flex-col' : line ? 'flex inline-flex' : (dark ? 'flex bg-gray-700 p-1 rounded-lg inline-flex' : 'flex bg-slate-100 p-1 rounded-lg inline-flex'),
+                 direction === 'vertical' ? 'flex flex-col' : line ? 'flex inline-flex' : (glass ? 'flex p-1 rounded-lg inline-flex backdrop-blur-xl backdrop-saturate-150' : (dark ? 'flex bg-gray-700 p-1 rounded-lg inline-flex' : 'flex bg-slate-100 p-1 rounded-lg inline-flex')),
+                 glass && !line && (dark ? 'bg-gray-800/30 border border-white/20' : 'bg-white/30 border border-gray-400/40'),
                  'transition-transform duration-300 ease-in-out'
                ]"
                :style="scrollStyle">
             <div v-for="tab in tabs"
                  :key="tab.value"
                  :class="[
-                    'inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-all cursor-pointer',
+                    'inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-all cursor-pointer select-none',
                     direction === 'vertical' ? 'py-2 px-2' : line ? 'px-3 py-1.5' : 'px-3 py-1.5 rounded-md',
                     direction === 'horizontal' ? [TabSize[size]] : '',
-                    dark && activeTab !== tab.value && !tab.disabled ? 'text-gray-300' : '',
+                    dark && activeTab !== tab.value && !tab.disabled && !glass ? 'text-gray-300' : '',
+                    glass && activeTab !== tab.value && !tab.disabled ? (dark ? 'text-gray-100' : 'text-gray-800') : '',
                     {
-                      'cursor-pointer shadow-sm': activeTab === tab.value && !tab.disabled && direction !== 'vertical' && !line,
-                      'bg-white': activeTab === tab.value && !tab.disabled && direction !== 'vertical' && !line && !dark,
-                      'bg-gray-800': activeTab === tab.value && !tab.disabled && direction !== 'vertical' && !line && dark,
+                      'cursor-pointer shadow-sm': activeTab === tab.value && !tab.disabled && direction !== 'vertical' && !line && !glass,
+                      'bg-white': activeTab === tab.value && !tab.disabled && direction !== 'vertical' && !line && !dark && !glass,
+                      'bg-gray-800': activeTab === tab.value && !tab.disabled && direction !== 'vertical' && !line && dark && !glass,
+                      'bg-white/50': activeTab === tab.value && !tab.disabled && direction !== 'vertical' && !line && glass && !dark,
+                      'bg-white/20': activeTab === tab.value && !tab.disabled && direction !== 'vertical' && !line && glass && dark,
                       'border-b-2 cursor-pointer -mb-px': activeTab === tab.value && !tab.disabled && direction !== 'vertical' && line,
                       [BorderType[type]]: activeTab === tab.value && !tab.disabled && (direction === 'vertical' || line),
                       'border-r-2 cursor-pointer': activeTab === tab.value && !tab.disabled && direction === 'vertical',
                       [TextType[type]]: activeTab === tab.value && !tab.disabled,
-                      'hover:text-slate-900': activeTab !== tab.value && !tab.disabled && direction !== 'vertical' && !dark,
-                      'hover:text-gray-200': activeTab !== tab.value && !tab.disabled && direction !== 'vertical' && dark,
+                      'hover:text-slate-900': activeTab !== tab.value && !tab.disabled && direction !== 'vertical' && !dark && !glass,
+                      'hover:text-gray-200': activeTab !== tab.value && !tab.disabled && direction !== 'vertical' && dark && !glass,
+                      'hover:bg-white/30': activeTab !== tab.value && !tab.disabled && direction !== 'vertical' && !line && glass && !dark,
+                      'hover:bg-white/10': activeTab !== tab.value && !tab.disabled && direction !== 'vertical' && !line && glass && dark,
                       'text-gray-600 hover:border-r-2 hover:cursor-pointer': activeTab !== tab.value && !tab.disabled && direction === 'vertical' && !dark,
                       'text-gray-300 hover:border-r-2 hover:cursor-pointer': activeTab !== tab.value && !tab.disabled && direction === 'vertical' && dark,
                       [HoverTextType[type]]: activeTab !== tab.value && !tab.disabled,
@@ -137,7 +143,8 @@ const props = withDefaults(defineProps<TabProps>(), {
   position: 'left',
   direction: 'horizontal',
   showScrollButtons: true,
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const activeTab = ref('')
diff --git a/src/ui/tab/types.ts b/src/ui/tab/types.ts
index 058f04fd..a149a5d9 100644
--- a/src/ui/tab/types.ts
+++ b/src/ui/tab/types.ts
@@ -13,6 +13,7 @@ export interface TabProps
     direction?: keyof typeof ArrangeDirection
     showScrollButtons?: boolean
     dark?: boolean
+    glass?: boolean
 }
 
 export interface TabItemProps

From a0b3aaa024ef64dc7be4e19623ca16795ffbee29 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 30 Dec 2025 16:42:54 +0800
Subject: [PATCH 11/14] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Upload=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/form/mention.md              | 35 +++++++++++
 docs/components/form/time-picker.md          | 38 +++++++++++-
 docs/components/form/upload.md               | 41 +++++++++++++
 playground/src/example/mention/glass.vue     | 64 ++++++++++++++++++++
 playground/src/example/time-picker/glass.vue | 57 +++++++++++++++++
 playground/src/example/time-picker/usage.vue | 41 +++++++++++++
 playground/src/example/upload/glass.vue      | 52 ++++++++++++++++
 playground/src/example/upload/usage.vue      | 32 ++++++++++
 src/App.vue                                  | 24 ++------
 src/ui/mention/ShadcnMention.vue             | 36 ++++++++---
 src/ui/mention/types.ts                      |  1 +
 src/ui/time-picker/ShadcnTimePicker.vue      | 25 +++++---
 src/ui/time-picker/types.ts                  |  1 +
 src/ui/upload/ShadcnUpload.vue               | 59 ++++++++++++++----
 src/ui/upload/types.ts                       |  1 +
 15 files changed, 457 insertions(+), 50 deletions(-)
 create mode 100644 playground/src/example/mention/glass.vue
 create mode 100644 playground/src/example/time-picker/glass.vue
 create mode 100644 playground/src/example/time-picker/usage.vue
 create mode 100644 playground/src/example/upload/glass.vue
 create mode 100644 playground/src/example/upload/usage.vue

diff --git a/docs/components/form/mention.md b/docs/components/form/mention.md
index 56768532..f5f6066d 100644
--- a/docs/components/form/mention.md
+++ b/docs/components/form/mention.md
@@ -202,6 +202,39 @@ title: 提及 (Mention)
 
 :::
 
+## 液态玻璃效果 (glass)
+::: raw
+<div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-blue-900 to-purple-900' : 'bg-gradient-to-r from-blue-400 to-purple-400']">
+<CodeRunner title="液态玻璃效果" class="bg-transparent">
+  <div class="space-y-4">
+    <ShadcnMention glass :dark="darkMode" :items="items" placeholder="输入 @ 提及..." />
+    <ShadcnMention glass :dark="darkMode" :items="items" trigger="#" placeholder="输入 # 提及..." />
+    <ShadcnMention glass :dark="darkMode" :items="items" type="success" />
+  </div>
+</CodeRunner>
+</div>
+:::
+::: details 查看代码
+```vue
+<template>
+  <div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-blue-900 to-purple-900' : 'bg-gradient-to-r from-blue-400 to-purple-400']">
+    <div class="space-y-4">
+      <ShadcnMention glass :dark="darkMode" :items="items" placeholder="输入 @ 提及..." />
+      <ShadcnMention glass :dark="darkMode" :items="items" trigger="#" placeholder="输入 # 提及..." />
+      <ShadcnMention glass :dark="darkMode" :items="items" type="success" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const items = ref([
+  { id: 1, name: 'Alice' },
+  { id: 2, name: 'Bob' },
+  { id: 3, name: 'Charlie' }
+])
+</script>
+```
+:::
 ## 表单 (form)
 
 ::: raw
@@ -244,6 +277,8 @@ title: 提及 (Mention)
         ['trigger', '触发字符', 'string', '@', '-'],
         ['max', '最大项目数', 'number', 'Infinity', '-'],
         ['loadData', '异步加载数据', 'function', '-', '-'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'],
+        ['dark', '是否启用暗黑模式', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
diff --git a/docs/components/form/time-picker.md b/docs/components/form/time-picker.md
index 64cd80ed..79358569 100644
--- a/docs/components/form/time-picker.md
+++ b/docs/components/form/time-picker.md
@@ -138,6 +138,37 @@ title: 时间选择器 (Time Picker)
 
 :::
 
+## 液态玻璃效果 (glass)
+::: raw
+<div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-indigo-900 to-purple-900' : 'bg-gradient-to-r from-indigo-400 to-purple-400']">
+<CodeRunner title="液态玻璃效果" class="bg-transparent">
+  <div class="space-y-4">
+    <ShadcnTimePicker v-model="glassValue1" glass :dark="darkMode" />
+    <ShadcnTimePicker v-model="glassValue2" glass :dark="darkMode" format="HH:mm:ss" />
+    <ShadcnTimePicker v-model="glassValue3" glass :dark="darkMode" :quickTimes="['09:00', '12:00', '18:00']" />
+  </div>
+</CodeRunner>
+</div>
+:::
+::: details 查看代码
+```vue
+<template>
+  <div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-indigo-900 to-purple-900' : 'bg-gradient-to-r from-indigo-400 to-purple-400']">
+    <div class="space-y-4">
+      <ShadcnTimePicker v-model="glassValue1" glass :dark="darkMode" />
+      <ShadcnTimePicker v-model="glassValue2" glass :dark="darkMode" format="HH:mm:ss" />
+      <ShadcnTimePicker v-model="glassValue3" glass :dark="darkMode" :quickTimes="['09:00', '12:00', '18:00']" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+const glassValue1 = ref('09:00')
+const glassValue2 = ref('12:30:45')
+const glassValue3 = ref('14:00')
+</script>
+```
+:::
 ## 时间选择器 (Time Picker) 属性
 
 <ApiTable title="时间选择器 (Time Picker) 属性"
@@ -148,7 +179,9 @@ title: 时间选择器 (Time Picker)
         ['disabled', '是否为禁用', 'boolean', 'false', '-'],
         ['clearable', '是否显示清空按钮', 'boolean', 'true', '-'],
         ['quickTimes', '快捷时间', 'string\[\]', '-', '-'],
-        ['format', '格式', 'HH:mm | HH:mm:ss | hh:mm A | hh:mm:ss A', 'HH:mm', 'HH:mm | HH:mm:ss | hh:mm A | hh:mm:ss A']
+        ['format', '格式', 'HH:mm | HH:mm:ss | hh:mm A | hh:mm:ss A', 'HH:mm', 'HH:mm | HH:mm:ss | hh:mm A | hh:mm:ss A'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-'],
+        ['dark', '是否启用暗黑模式', 'boolean', 'false', '-']
     ]">
 </ApiTable>
 
@@ -183,4 +216,7 @@ const darkMode = computed(() => isDark.value)
 import { ref , computed } from 'vue';
 
 const value = ref('')
+const glassValue1 = ref('09:00')
+const glassValue2 = ref('12:30:45')
+const glassValue3 = ref('14:00')
 </script>
\ No newline at end of file
diff --git a/docs/components/form/upload.md b/docs/components/form/upload.md
index 5d2f25bf..de35e859 100644
--- a/docs/components/form/upload.md
+++ b/docs/components/form/upload.md
@@ -68,6 +68,45 @@ title: 上传 (Upload)
 
 :::
 
+## 液态玻璃 (glass)
+
+::: raw
+
+<div class="p-6 rounded-lg bg-gradient-to-r from-indigo-400 to-purple-400">
+<CodeRunner title="液态玻璃 (glass)">
+    <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" glass :dark="darkMode" />
+</CodeRunner>
+</div>
+
+:::
+::: details 查看代码
+
+```vue
+<template>
+    <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" glass :dark="darkMode" />
+</template>
+```
+
+:::
+::: raw
+
+<div class="p-6 rounded-lg bg-gradient-to-r from-pink-400 to-rose-400">
+<CodeRunner title="多选 - 液态玻璃">
+    <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" glass multiple :dark="darkMode" />
+</CodeRunner>
+</div>
+
+:::
+::: details 查看代码
+
+```vue
+<template>
+    <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" glass multiple :dark="darkMode" />
+</template>
+```
+
+:::
+
 ## 上传 (Upload) 属性
 
 <ApiTable title="上传 (Upload) 属性"
@@ -83,6 +122,8 @@ title: 上传 (Upload)
         ['name', '上传的文件名', 'string', 'file'],
         ['withCredentials', '是否随请求一起发送 Cookie 或授权信息', 'boolean', 'false'],
         ['beforeUpload', '上传之前的钩子', 'function', '-'],
+        ['dark', '深色模式', 'boolean', 'false'],
+        ['glass', '液态玻璃效果', 'boolean', 'false'],
     ]">
 </ApiTable>
 
diff --git a/playground/src/example/mention/glass.vue b/playground/src/example/mention/glass.vue
new file mode 100644
index 00000000..43fc1ac8
--- /dev/null
+++ b/playground/src/example/mention/glass.vue
@@ -0,0 +1,64 @@
+<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-purple-400">
+        <div class="space-y-4">
+          <ShadcnMention glass :items="items" placeholder="输入 @ 提及..." />
+          <ShadcnMention glass :items="items" trigger="#" placeholder="输入 # 提及..." />
+          <ShadcnMention glass :items="items" type="success" />
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">液态玻璃效果 - 暗黑模式</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-blue-900 to-purple-900">
+        <div class="space-y-4">
+          <ShadcnMention glass dark :items="items" placeholder="输入 @ 提及..." />
+          <ShadcnMention glass dark :items="items" trigger="#" placeholder="输入 # 提及..." />
+          <ShadcnMention glass dark :items="items" type="warning" />
+        </div>
+      </div>
+    </div>
+
+    <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="space-y-4">
+          <ShadcnMention glass :items="items" type="primary" />
+          <ShadcnMention glass :items="items" type="success" />
+          <ShadcnMention glass :items="items" type="warning" />
+          <ShadcnMention glass :items="items" type="error" />
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">不同尺寸 - 液态玻璃</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-pink-400 to-rose-400">
+        <div class="space-y-4">
+          <ShadcnMention glass :items="items" size="small" />
+          <ShadcnMention glass :items="items" size="default" />
+          <ShadcnMention glass :items="items" size="large" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ShadcnMention } from '@/ui/mention'
+
+const items = ref([
+  { id: 1, name: 'Alice' },
+  { id: 2, name: 'Bob' },
+  { id: 3, name: 'Charlie' },
+  { id: 4, name: 'David' },
+  { id: 5, name: 'Eve' },
+  { id: 6, name: 'Frank' },
+  { id: 7, name: 'Grace' },
+  { id: 8, name: 'Henry' }
+])
+</script>
diff --git a/playground/src/example/time-picker/glass.vue b/playground/src/example/time-picker/glass.vue
new file mode 100644
index 00000000..1abd237e
--- /dev/null
+++ b/playground/src/example/time-picker/glass.vue
@@ -0,0 +1,57 @@
+<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-indigo-400 to-purple-400">
+        <div class="space-y-4">
+          <ShadcnTimePicker v-model="time1" glass />
+          <ShadcnTimePicker v-model="time2" glass format="HH:mm:ss" />
+          <ShadcnTimePicker v-model="time3" glass :quickTimes="['09:00', '12:00', '18:00']" />
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">液态玻璃效果 - 暗黑模式</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-indigo-900 to-purple-900">
+        <div class="space-y-4">
+          <ShadcnTimePicker v-model="time4" glass dark />
+          <ShadcnTimePicker v-model="time5" glass dark format="HH:mm:ss" />
+          <ShadcnTimePicker v-model="time6" glass dark :quickTimes="['09:00', '12:00', '18:00']" />
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">12小时格式 - 液态玻璃</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-pink-400 to-rose-400">
+        <div class="space-y-4">
+          <ShadcnTimePicker v-model="time7" glass format="hh:mm A" />
+          <ShadcnTimePicker v-model="time8" glass format="hh:mm:ss A" />
+        </div>
+      </div>
+    </div>
+
+    <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">
+        <ShadcnTimePicker v-model="time9" glass :quickTimes="['08:00', '10:00', '12:00', '14:00', '16:00', '18:00']" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ShadcnTimePicker } from '@/ui/time-picker'
+
+const time1 = ref('09:00')
+const time2 = ref('12:30:45')
+const time3 = ref('14:00')
+const time4 = ref('10:30')
+const time5 = ref('15:45:30')
+const time6 = ref('18:00')
+const time7 = ref('02:30 PM')
+const time8 = ref('03:45:30 PM')
+const time9 = ref('10:00')
+</script>
diff --git a/playground/src/example/time-picker/usage.vue b/playground/src/example/time-picker/usage.vue
new file mode 100644
index 00000000..49c439bd
--- /dev/null
+++ b/playground/src/example/time-picker/usage.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="space-y-6 p-6">
+    <div>
+      <h3 class="text-lg font-semibold mb-4">基础用法</h3>
+      <ShadcnTimePicker v-model="time1" />
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">不同格式</h3>
+      <div class="space-y-4">
+        <ShadcnTimePicker v-model="time2" format="HH:mm" />
+        <ShadcnTimePicker v-model="time3" format="HH:mm:ss" />
+        <ShadcnTimePicker v-model="time4" format="hh:mm A" />
+        <ShadcnTimePicker v-model="time5" format="hh:mm:ss A" />
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">快捷时间</h3>
+      <ShadcnTimePicker v-model="time6" :quickTimes="['09:00', '12:00', '18:00']" />
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">禁用状态</h3>
+      <ShadcnTimePicker v-model="time7" disabled />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ShadcnTimePicker } from '@/ui/time-picker'
+
+const time1 = ref('09:00')
+const time2 = ref('10:30')
+const time3 = ref('12:30:45')
+const time4 = ref('02:30 PM')
+const time5 = ref('03:45:30 PM')
+const time6 = ref('14:00')
+const time7 = ref('15:00')
+</script>
diff --git a/playground/src/example/upload/glass.vue b/playground/src/example/upload/glass.vue
new file mode 100644
index 00000000..ebad56c6
--- /dev/null
+++ b/playground/src/example/upload/glass.vue
@@ -0,0 +1,52 @@
+<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-purple-400">
+        <div class="space-y-4">
+          <ShadcnUpload glass action="//jsonplaceholder.typicode.com/posts/" />
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">液态玻璃效果 - 暗黑模式</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-blue-900 to-purple-900">
+        <div class="space-y-4">
+          <ShadcnUpload glass dark action="//jsonplaceholder.typicode.com/posts/" />
+        </div>
+      </div>
+    </div>
+
+    <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="space-y-4">
+          <ShadcnUpload glass multiple action="//jsonplaceholder.typicode.com/posts/" />
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">暗黑多选 - 液态玻璃</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-pink-900 to-rose-900">
+        <div class="space-y-4">
+          <ShadcnUpload glass dark multiple action="//jsonplaceholder.typicode.com/posts/" />
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">自定义描述 - 液态玻璃</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-indigo-400 to-purple-400">
+        <div class="space-y-4">
+          <ShadcnUpload glass action="//jsonplaceholder.typicode.com/posts/" description="支持 .jpg, .png, .pdf 格式文件" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ShadcnUpload } from '@/ui/upload'
+</script>
diff --git a/playground/src/example/upload/usage.vue b/playground/src/example/upload/usage.vue
new file mode 100644
index 00000000..80578be2
--- /dev/null
+++ b/playground/src/example/upload/usage.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="space-y-6 p-6">
+    <div>
+      <h3 class="text-lg font-semibold mb-4">基础用法</h3>
+      <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" />
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">多选</h3>
+      <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" multiple />
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">禁用状态</h3>
+      <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" disabled />
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">自定义描述</h3>
+      <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" description="支持 .jpg, .png, .pdf 格式文件，最大 10MB" />
+    </div>
+
+    <div>
+      <h3 class="text-lg font-semibold mb-4">限制文件类型</h3>
+      <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" accept="image/*" description="仅支持图片格式" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ShadcnUpload } from '@/ui/upload'
+</script>
diff --git a/src/App.vue b/src/App.vue
index 3fe60c92..b980dd8a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,24 +5,10 @@
     </ShadcnButton>
 
     <div class="mt-6">
-      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Tab 液态玻璃效果</h3>
-      <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 flex flex-col items-center gap-6">
-          <ShadcnTab glass :dark="isDark">
-            <ShadcnTabItem label="Tab 1" value="Tab 1">
-              <p :class="[isDark ? 'text-white' : 'text-gray-900']">Tab 1 content</p>
-            </ShadcnTabItem>
-            <ShadcnTabItem label="Tab 2" value="Tab 2">
-              <p :class="[isDark ? 'text-white' : 'text-gray-900']">Tab 2 content</p>
-            </ShadcnTabItem>
-            <ShadcnTabItem label="Tab 3" value="Tab 3">
-              <p :class="[isDark ? 'text-white' : 'text-gray-900']">Tab 3 content</p>
-            </ShadcnTabItem>
-          </ShadcnTab>
-          <ShadcnTab glass :dark="isDark" type="success">
-            <ShadcnTabItem label="Success 1" value="Success 1">Success content</ShadcnTabItem>
-            <ShadcnTabItem label="Success 2" value="Success 2">Success content</ShadcnTabItem>
-          </ShadcnTab>
+      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Upload 液态玻璃效果</h3>
+      <div class="p-6 rounded-lg bg-gradient-to-r from-indigo-400 to-purple-400">
+        <div class="p-8 rounded-lg bg-white/50">
+          <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" glass :dark="isDark" multiple />
         </div>
       </div>
     </div>
@@ -33,7 +19,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button";
-import { ShadcnTab, ShadcnTabItem } from "@/ui/tab";
+import { ShadcnUpload } from "@/ui/upload";
 
 const isDark = ref(false)
 </script>
diff --git a/src/ui/mention/ShadcnMention.vue b/src/ui/mention/ShadcnMention.vue
index dbbd5bfd..c82679e9 100644
--- a/src/ui/mention/ShadcnMention.vue
+++ b/src/ui/mention/ShadcnMention.vue
@@ -3,10 +3,13 @@
     <div class="relative w-full border rounded-md overflow-hidden flex items-center"
          :class="[
              Size[finalSize],
-             [HoverType[type]],
+             glass && 'backdrop-blur-xl backdrop-saturate-150',
+             glass && (dark ? 'bg-white/10 border-white/20' : 'bg-white/30 border-gray-400/40'),
+             !glass && [HoverType[type]],
              { 'cursor-not-allowed opacity-50': disabled },
              disabled ? (dark ? 'bg-gray-800' : 'bg-gray-100') : '',
-             dark ? 'border-gray-600 bg-gray-800 text-gray-200' : 'bg-white'
+             !glass && (dark ? 'border-gray-600 bg-gray-800 text-gray-200' : 'bg-white'),
+             glass && (dark ? 'text-gray-100' : 'text-gray-800')
          ]">
       <div class="w-full px-1 flex flex-nowrap gap-1 overflow-x-auto items-center min-h-full"
            style="scrollbar-width: none;">
@@ -27,7 +30,8 @@
                :class="[
                    { 'cursor-not-allowed opacity-50': disabled },
                    disabled ? (dark ? 'bg-gray-800' : 'bg-gray-100') : '',
-                   dark ? 'text-gray-200 placeholder:text-gray-500' : ''
+                   glass && (dark ? 'text-gray-100 placeholder:text-gray-300' : 'text-gray-800 placeholder:text-gray-500'),
+                   !glass && (dark ? 'text-gray-200 placeholder:text-gray-500' : '')
                ]"
                :disabled="disabled"
                :placeholder="selectedTags.length ? '' : placeholder"
@@ -52,19 +56,30 @@
         leave-to-class="opacity-0 translate-y-1">
       <div v-if="showItems && filteredItems.length > 0"
            ref="dropdownRef"
-           :class="dark ? 'bg-gray-800 border-gray-600' : 'bg-white'"
+           :class="[
+               glass && 'backdrop-blur-xl backdrop-saturate-150',
+               glass && (dark ? 'bg-white/10 border-white/20' : 'bg-white/30 border-gray-400/40'),
+               !glass && (dark ? 'bg-gray-800 border-gray-600' : 'bg-white')
+           ]"
            class="absolute z-50 w-full max-h-[200px] mt-1 overflow-auto border rounded-md shadow-lg space-y-1 px-2 py-2"
            @scroll="handleScroll">
         <div v-for="(item, index) in filteredItems"
              :key="item.id"
-             class="p-2 justify-between items-center flex rounded-md"
+             class="p-2 justify-between items-center flex rounded-md select-none"
              :class="[
-                 selectedIndex === index ? (dark ? 'bg-gray-700' : 'bg-gray-100') : '',
-                 (isItemSelected(item) || item.disabled) ? (dark ? 'cursor-not-allowed opacity-50 bg-gray-700' : 'cursor-not-allowed opacity-50 bg-gray-100') : '',
+                 selectedIndex === index && glass && !dark ? 'bg-white/50' : '',
+                 selectedIndex === index && glass && dark ? 'bg-white/20' : '',
+                 selectedIndex === index && !glass ? (dark ? 'bg-gray-700' : 'bg-gray-100') : '',
+                 (isItemSelected(item) || item.disabled) && glass && !dark ? 'cursor-not-allowed opacity-50 bg-white/50' : '',
+                 (isItemSelected(item) || item.disabled) && glass && dark ? 'cursor-not-allowed opacity-50 bg-white/20' : '',
+                 (isItemSelected(item) || item.disabled) && !glass ? (dark ? 'cursor-not-allowed opacity-50 bg-gray-700' : 'cursor-not-allowed opacity-50 bg-gray-100') : '',
                  !isItemSelected(item) && !item.disabled ? 'cursor-pointer' : '',
                  isItemSelected(item) ? [BaseTextType[type]] : '',
-                 !item.disabled && !isItemSelected(item) ? [HoverType[type]] : '',
-                 dark ? 'text-gray-200' : ''
+                 !item.disabled && !isItemSelected(item) && !glass ? [HoverType[type]] : '',
+                 !item.disabled && !isItemSelected(item) && glass && !dark ? 'hover:bg-white/50' : '',
+                 !item.disabled && !isItemSelected(item) && glass && dark ? 'hover:bg-white/20' : '',
+                 glass && (dark ? 'text-gray-100' : 'text-gray-800'),
+                 !glass && (dark ? 'text-gray-200' : '')
              ]"
              @click.stop="(event) => handleItemClick(item, event)"
              @mouseenter="() => handleItemHover(index, item)">
@@ -100,7 +115,8 @@ const props = withDefaults(defineProps<MentionProps>(), {
   trigger: '@',
   loadData: undefined,
   max: Infinity,
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const emit = defineEmits<MentionEmits>()
diff --git a/src/ui/mention/types.ts b/src/ui/mention/types.ts
index d9ec1bf6..fc9b16bb 100644
--- a/src/ui/mention/types.ts
+++ b/src/ui/mention/types.ts
@@ -21,6 +21,7 @@ export interface MentionProps
     max?: number
     name?: string
     dark?: boolean
+    glass?: boolean
 }
 
 export type MentionEmits = {
diff --git a/src/ui/time-picker/ShadcnTimePicker.vue b/src/ui/time-picker/ShadcnTimePicker.vue
index 9083847a..ad1b7bd4 100644
--- a/src/ui/time-picker/ShadcnTimePicker.vue
+++ b/src/ui/time-picker/ShadcnTimePicker.vue
@@ -5,6 +5,7 @@
                  :placeholder="placeholder"
                  :disabled="disabled"
                  :dark="dark"
+                 :glass="glass"
                  @click="togglePopover"/>
 
     <div class="absolute right-2 top-0 h-full flex items-center gap-2 text-gray-400">
@@ -12,19 +13,21 @@
            class="flex items-center cursor-pointer hover:text-muted-foreground"
            @click="onClear">
         <slot name="clear">
-          <ShadcnIcon :dark="dark" icon="CircleX" size="18"/>
+          <ShadcnIcon :dark="dark" :glass="glass" icon="CircleX" size="18"/>
         </slot>
       </div>
 
       <slot name="icon">
-        <ShadcnIcon :dark="dark" icon="Clock" size="18"/>
+        <ShadcnIcon :dark="dark" :glass="glass" icon="Clock" size="18"/>
       </slot>
     </div>
 
     <div v-if="isOpen"
          :class="[
            'absolute mt-1 rounded-md shadow-lg ring-1 p-2 z-10 space-y-2 w-fit',
-           dark ? 'bg-gray-800 ring-gray-700' : 'bg-white ring-black ring-opacity-5'
+           glass && 'backdrop-blur-xl backdrop-saturate-150',
+           glass && (dark ? 'bg-white/10 ring-white/20' : 'bg-white/30 ring-gray-400/40'),
+           !glass && (dark ? 'bg-gray-800 ring-gray-700' : 'bg-white ring-black ring-opacity-5')
          ]">
       <div class="flex justify-between items-center gap-3">
         <div class="flex space-x-2">
@@ -35,9 +38,10 @@
                         :formatter="zeroPadFormatter"
                         :parser="parseNumber"
                         :dark="dark"
+                        :glass="glass"
                         @focus="isOpen = true"
                         @on-change="onTimeChange"/>
-          <span :class="['text-xl select-none', dark ? 'text-gray-300' : '']">:</span>
+          <span :class="['text-xl select-none', glass ? (dark ? 'text-gray-100' : 'text-gray-800') : (dark ? 'text-gray-300' : '')]">:</span>
           <ShadcnNumber v-model="minutesNumber"
                         class="w-14"
                         :min="0"
@@ -45,10 +49,11 @@
                         :formatter="zeroPadFormatter"
                         :parser="parseNumber"
                         :dark="dark"
+                        :glass="glass"
                         @focus="isOpen = true"
                         @on-change="onTimeChange"/>
           <template v-if="hasSeconds">
-            <span :class="['text-xl select-none', dark ? 'text-gray-300' : '']">:</span>
+            <span :class="['text-xl select-none', glass ? (dark ? 'text-gray-100' : 'text-gray-800') : (dark ? 'text-gray-300' : '')]">:</span>
             <ShadcnNumber v-model="secondsNumber"
                           class="w-14"
                           :max="59"
@@ -56,6 +61,7 @@
                           :formatter="zeroPadFormatter"
                           :parser="parseNumber"
                           :dark="dark"
+                          :glass="glass"
                           @focus="isOpen = true"
                           @on-change="onTimeChange"/>
           </template>
@@ -66,6 +72,7 @@
                              class="space-x-1"
                              type="single"
                              :dark="dark"
+                             :glass="glass"
                              @on-change="handlePeriodChange as any">
             <ShadcnToggle value="AM">
               {{ t('timePicker.text.am') }}
@@ -82,7 +89,10 @@
                 :key="time"
                 :class="[
                   'px-2 py-1 text-sm rounded-md select-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',
-                  dark ? 'hover:bg-gray-700 active:bg-gray-600' : 'hover:bg-gray-100 active:bg-gray-200'
+                  glass && !dark ? 'hover:bg-white/50 active:bg-white/70 text-gray-800' : '',
+                  glass && dark ? 'hover:bg-white/20 active:bg-white/30 text-gray-100' : '',
+                  !glass && dark ? 'hover:bg-gray-700 active:bg-gray-600' : '',
+                  !glass && !dark ? 'hover:bg-gray-100 active:bg-gray-200' : ''
                 ]"
                 @click="selectQuickTime(time)">
           {{ time }}
@@ -109,7 +119,8 @@ const props = withDefaults(defineProps<TimePickerProps>(), {
   disabled: false,
   clearable: true,
   format: 'HH:mm',
-  dark: false
+  dark: false,
+  glass: false
 })
 
 const emit = defineEmits<TimePickerEmits>()
diff --git a/src/ui/time-picker/types.ts b/src/ui/time-picker/types.ts
index b96708ff..7c234f28 100644
--- a/src/ui/time-picker/types.ts
+++ b/src/ui/time-picker/types.ts
@@ -9,6 +9,7 @@ export interface TimePickerProps
     quickTimes?: string[] // see format
     format?: 'HH:mm' | 'HH:mm:ss' | 'hh:mm A' | 'hh:mm:ss A'
     dark?: boolean
+    glass?: boolean
 }
 
 export type TimePickerEmits = {
diff --git a/src/ui/upload/ShadcnUpload.vue b/src/ui/upload/ShadcnUpload.vue
index 9401fb22..5b96a85f 100644
--- a/src/ui/upload/ShadcnUpload.vue
+++ b/src/ui/upload/ShadcnUpload.vue
@@ -3,9 +3,10 @@
     <!-- Upload Container -->
     <!-- 上传容器 -->
     <div :class="[
-            'w-full rounded-lg border border-dashed p-4',
+            'w-full rounded-lg border border-dashed p-4 select-none',
             'flex flex-col items-center justify-center gap-4',
-            isDragging ? (dark ? 'border-blue-400 bg-blue-950' : 'border-blue-500 bg-blue-50') : (dark ? 'border-gray-600' : 'border-gray-200'),
+            glass && 'backdrop-blur-xl backdrop-saturate-150',
+            isDragging ? (glass ? (dark ? 'border-blue-400 bg-blue-500/20' : 'border-blue-500 bg-blue-500/30') : (dark ? 'border-blue-400 bg-blue-950' : 'border-blue-500 bg-blue-50')) : (glass ? (dark ? 'border-white/20 bg-white/10' : 'border-gray-400/40 bg-white/30') : (dark ? 'border-gray-600' : 'border-gray-200')),
             disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
         ]"
          @dragover.prevent="handleDragOver"
@@ -25,8 +26,14 @@
 
       <!-- Upload Icon -->
       <!-- 上传图标 -->
-      <div :class="['rounded-full p-3', dark ? 'bg-gray-700' : 'bg-gray-100']">
-        <svg :class="['h-6 w-6', dark ? 'text-gray-300' : 'text-gray-600']"
+      <div :class="[
+        'rounded-full p-3',
+        glass ? (dark ? 'bg-white/20' : 'bg-white/50') : (dark ? 'bg-gray-700' : 'bg-gray-100')
+      ]">
+        <svg :class="[
+          'h-6 w-6',
+          glass ? (dark ? 'text-gray-100' : 'text-gray-800') : (dark ? 'text-gray-300' : 'text-gray-600')
+        ]"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
@@ -41,8 +48,14 @@
       <!-- Upload Text -->
       <!-- 上传文本 -->
       <div class="text-center">
-        <p :class="['text-sm font-medium', dark ? 'text-gray-300' : 'text-gray-600']" v-html="t('upload.text.placeholder')"/>
-        <p :class="['mt-1 text-xs', dark ? 'text-gray-400' : 'text-gray-500']">
+        <p :class="[
+          'text-sm font-medium',
+          glass ? (dark ? 'text-gray-100' : 'text-gray-800') : (dark ? 'text-gray-300' : 'text-gray-600')
+        ]" v-html="t('upload.text.placeholder')"/>
+        <p :class="[
+          'mt-1 text-xs',
+          glass ? (dark ? 'text-gray-200' : 'text-gray-700') : (dark ? 'text-gray-400' : 'text-gray-500')
+        ]">
           {{ description || t('upload.text.description') }}
         </p>
       </div>
@@ -52,7 +65,11 @@
     <!-- 文件列表 -->
     <div v-if="fileList.length > 0" class="mt-4 space-y-2">
       <div v-for="file in fileList"
-           :class="['flex items-center justify-between rounded-md border p-3', dark ? 'border-gray-600 bg-gray-800' : 'border-gray-200 bg-white']"
+           :class="[
+             'flex items-center justify-between rounded-md border p-3 select-none',
+             glass && 'backdrop-blur-xl backdrop-saturate-150',
+             glass ? (dark ? 'border-white/20 bg-white/10' : 'border-gray-400/40 bg-white/30') : (dark ? 'border-gray-600 bg-gray-800' : 'border-gray-200 bg-white')
+           ]"
            :key="file.uid">
         <div class="flex items-center gap-2 flex-1">
           <svg v-if="file.status === 'uploading'" class="h-5 w-5 text-blue-500 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -75,18 +92,30 @@
 
           <div class="flex-1">
             <div class="flex items-center justify-between">
-              <p :class="['text-sm font-medium', dark ? 'text-gray-200' : 'text-gray-700']">{{ file.name }}</p>
-              <p :class="['text-xs', dark ? 'text-gray-400' : 'text-gray-500']">{{ formatFileSize(file.size) }}</p>
+              <p :class="[
+                'text-sm font-medium',
+                glass ? (dark ? 'text-gray-100' : 'text-gray-800') : (dark ? 'text-gray-200' : 'text-gray-700')
+              ]">{{ file.name }}</p>
+              <p :class="[
+                'text-xs',
+                glass ? (dark ? 'text-gray-200' : 'text-gray-700') : (dark ? 'text-gray-400' : 'text-gray-500')
+              ]">{{ formatFileSize(file.size) }}</p>
             </div>
 
             <!-- Progress Bar -->
             <div v-if="file.status === 'uploading'" class="w-full mt-2">
-              <div :class="['w-full rounded-full h-1.5', dark ? 'bg-gray-700' : 'bg-gray-200']">
+              <div :class="[
+                'w-full rounded-full h-1.5',
+                glass ? (dark ? 'bg-white/20' : 'bg-white/50') : (dark ? 'bg-gray-700' : 'bg-gray-200')
+              ]">
                 <div class="bg-blue-600 h-1.5 rounded-full transition-all duration-300"
                      :style="{ width: `${file.percent}%` }">
                 </div>
               </div>
-              <span :class="['text-xs', dark ? 'text-gray-400' : 'text-gray-500']">{{ file.percent }}%</span>
+              <span :class="[
+                'text-xs',
+                glass ? (dark ? 'text-gray-200' : 'text-gray-700') : (dark ? 'text-gray-400' : 'text-gray-500')
+              ]">{{ file.percent }}%</span>
             </div>
 
             <!-- Status Messages -->
@@ -99,7 +128,10 @@
           </div>
         </div>
 
-        <button :class="['ml-3', dark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700']"
+        <button :class="[
+          'ml-3',
+          glass ? (dark ? 'text-gray-200 hover:text-gray-100' : 'text-gray-700 hover:text-gray-900') : (dark ? 'text-gray-400 hover:text-gray-200' : 'text-gray-500 hover:text-gray-700')
+        ]"
                 :disabled="disabled"
                 @click.stop="removeFile(file)">
           <svg class="h-5 w-5"
@@ -131,7 +163,8 @@ const props = withDefaults(defineProps<UploadProps>(), {
   disabled: false,
   name: 'file',
   withCredentials: false,
-  dark: false
+  dark: false,
+  glass: false
 })
 
 // Emits
diff --git a/src/ui/upload/types.ts b/src/ui/upload/types.ts
index fd9d8d2e..ce1484c3 100644
--- a/src/ui/upload/types.ts
+++ b/src/ui/upload/types.ts
@@ -11,6 +11,7 @@ export interface UploadProps
     withCredentials?: boolean
     beforeUpload?: (file: File) => boolean | Promise<boolean>
     dark?: boolean
+    glass?: boolean
 }
 
 export interface UploadFile

From 6db4fe7b1e8fa4ab4be11c789e9ea932e410f2c2 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 30 Dec 2025 16:52:19 +0800
Subject: [PATCH 12/14] =?UTF-8?q?feat(=E7=BB=84=E4=BB=B6):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20Form=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/form/form.md          | 80 +++++++++++++++++++++++++++
 playground/src/example/form/glass.vue | 64 +++++++++++++++++++++
 playground/src/example/form/usage.vue | 67 ++++++++++++++++++++++
 src/App.vue                           | 29 ++++++++--
 src/ui/form/ShadcnForm.vue            | 12 +++-
 5 files changed, 247 insertions(+), 5 deletions(-)
 create mode 100644 playground/src/example/form/glass.vue
 create mode 100644 playground/src/example/form/usage.vue

diff --git a/docs/components/form/form.md b/docs/components/form/form.md
index b86c5f3a..6e63ffa6 100644
--- a/docs/components/form/form.md
+++ b/docs/components/form/form.md
@@ -254,6 +254,74 @@ const resetForm = () => {
 
 :::
 
+## 液态玻璃效果 (Glass)
+
+::: raw
+
+<CodeRunner title="液态玻璃效果 (Glass)">
+    <div class="p-6 rounded-lg bg-gradient-to-r from-indigo-400 to-purple-400">
+      <div class="p-8 rounded-lg bg-white/50">
+        <ShadcnForm v-model="glassFormData" glass :dark="darkMode" @on-submit="onGlassSubmit">
+          <ShadcnFormItem label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]" :dark="darkMode">
+            <ShadcnInput v-model="glassFormData.username" placeholder="请输入用户名" glass :dark="darkMode" />
+          </ShadcnFormItem>
+          <ShadcnFormItem label="邮箱" name="email" :rules="[{ required: true, message: '请输入邮箱' }, { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '请输入正确的邮箱格式' }]" :dark="darkMode">
+            <ShadcnInput v-model="glassFormData.email" placeholder="请输入邮箱" glass :dark="darkMode" />
+          </ShadcnFormItem>
+          <ShadcnFormItem label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }, { min: 6, message: '密码长度至少6位' }]" :dark="darkMode">
+            <ShadcnInput v-model="glassFormData.password" type="password" placeholder="请输入密码" glass :dark="darkMode" />
+          </ShadcnFormItem>
+          <ShadcnButton type="submit" glass :dark="darkMode">提交</ShadcnButton>
+        </ShadcnForm>
+      </div>
+    </div>
+</CodeRunner>
+
+:::
+
+::: details 查看代码
+
+```vue
+<template>
+  <div class="p-6 rounded-lg bg-gradient-to-r from-indigo-400 to-purple-400">
+    <div class="p-8 rounded-lg bg-white/50">
+      <ShadcnForm v-model="glassFormData" glass :dark="darkMode" @on-submit="onGlassSubmit">
+        <ShadcnFormItem label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]" :dark="darkMode">
+          <ShadcnInput v-model="glassFormData.username" placeholder="请输入用户名" glass :dark="darkMode" />
+        </ShadcnFormItem>
+        <ShadcnFormItem label="邮箱" name="email" :rules="[{ required: true, message: '请输入邮箱' }, { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '请输入正确的邮箱格式' }]" :dark="darkMode">
+          <ShadcnInput v-model="glassFormData.email" placeholder="请输入邮箱" glass :dark="darkMode" />
+        </ShadcnFormItem>
+        <ShadcnFormItem label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }, { min: 6, message: '密码长度至少6位' }]" :dark="darkMode">
+          <ShadcnInput v-model="glassFormData.password" type="password" placeholder="请输入密码" glass :dark="darkMode" />
+        </ShadcnFormItem>
+        <ShadcnButton type="submit" glass :dark="darkMode">提交</ShadcnButton>
+      </ShadcnForm>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed, ref } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+
+const glassFormData = ref({
+  username: '',
+  email: '',
+  password: ''
+})
+
+const onGlassSubmit = (data: any) => {
+  console.log('提交数据:', data)
+}
+</script>
+```
+
+:::
+
 ## 动态表单 (dynamic)
 
 ::: raw
@@ -333,6 +401,8 @@ onMounted(() => onAdd())
     :headers="['属性', '描述', '类型', '默认值', '依赖', '支持列表']"
     :columns="[
         ['modelValue', '当前组件的值', 'any', '-', '-', '-'],
+        ['dark', '是否为暗黑模式', 'boolean', 'false', '-', '-'],
+        ['glass', '是否启用液态玻璃效果', 'boolean', 'false', '-', '-'],
     ]">
 </ApiTable>
 
@@ -441,4 +511,14 @@ const onSubmit2 = () => proxy?.$Message.success({
 })
 
 onMounted(() => onAdd())
+
+const glassFormData = ref({
+  username: '',
+  email: '',
+  password: ''
+})
+
+const onGlassSubmit = (data: any) => {
+  console.log('提交数据:', data)
+}
 </script>
\ No newline at end of file
diff --git a/playground/src/example/form/glass.vue b/playground/src/example/form/glass.vue
new file mode 100644
index 00000000..c203bf77
--- /dev/null
+++ b/playground/src/example/form/glass.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="space-y-6">
+    <div class="relative">
+      <div class="p-6 rounded-lg bg-gradient-to-r from-indigo-400 to-purple-400">
+        <div class="p-8 rounded-lg bg-white/50">
+          <ShadcnForm v-model="formData" glass @on-submit="handleSubmit">
+            <ShadcnFormItem label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
+              <ShadcnInput v-model="formData.username" placeholder="请输入用户名" glass />
+            </ShadcnFormItem>
+            <ShadcnFormItem label="邮箱" name="email" :rules="[{ required: true, message: '请输入邮箱' }, { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '请输入正确的邮箱格式' }]">
+              <ShadcnInput v-model="formData.email" placeholder="请输入邮箱" glass />
+            </ShadcnFormItem>
+            <ShadcnFormItem label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }, { min: 6, message: '密码长度至少6位' }]">
+              <ShadcnInput v-model="formData.password" type="password" placeholder="请输入密码" glass />
+            </ShadcnFormItem>
+            <ShadcnButton type="submit" glass>提交</ShadcnButton>
+          </ShadcnForm>
+        </div>
+      </div>
+    </div>
+    <div class="relative">
+      <div class="p-6 rounded-lg bg-gradient-to-r from-pink-400 to-rose-400">
+        <div class="p-8 rounded-lg bg-white/50">
+          <ShadcnForm v-model="formData2" glass @on-submit="handleSubmit2">
+            <ShadcnFormItem label="姓名" name="name" :rules="[{ required: true, message: '请输入姓名' }]">
+              <ShadcnInput v-model="formData2.name" placeholder="请输入姓名" glass />
+            </ShadcnFormItem>
+            <ShadcnFormItem label="电话" name="phone" :rules="[{ required: true, message: '请输入电话' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]">
+              <ShadcnInput v-model="formData2.phone" placeholder="请输入电话" glass />
+            </ShadcnFormItem>
+            <ShadcnFormItem label="地址" name="address" :rules="[{ required: true, message: '请输入地址' }]">
+              <ShadcnInput v-model="formData2.address" placeholder="请输入地址" glass />
+            </ShadcnFormItem>
+            <ShadcnButton type="submit" glass>提交</ShadcnButton>
+          </ShadcnForm>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const formData = ref({
+  username: '',
+  email: '',
+  password: ''
+})
+
+const formData2 = ref({
+  name: '',
+  phone: '',
+  address: ''
+})
+
+const handleSubmit = (data: any) => {
+  console.log('提交数据1:', data)
+}
+
+const handleSubmit2 = (data: any) => {
+  console.log('提交数据2:', data)
+}
+</script>
diff --git a/playground/src/example/form/usage.vue b/playground/src/example/form/usage.vue
new file mode 100644
index 00000000..6669951b
--- /dev/null
+++ b/playground/src/example/form/usage.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="p-6 max-w-2xl mx-auto">
+    <ShadcnForm ref="formRef"
+                v-model="formData"
+                @on-submit="onSubmit"
+                @on-error="onError">
+      <ShadcnFormItem name="username"
+                      label="Username"
+                      description="Username must be at least 3 characters and cannot exceed 20 characters."
+                      :rules="[
+                        { required: true, message: 'Please input username!' },
+                        { min: 3, message: 'Username must be at least 3 characters' },
+                        { max: 20, message: 'Username cannot exceed 20 characters' }
+                      ]">
+        <ShadcnInput v-model="formData.username" />
+      </ShadcnFormItem>
+      <ShadcnFormItem name="email"
+                      label="Email"
+                      :rules="[
+                        { required: true, message: 'Please input email!' },
+                        { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: 'Please enter a valid email!' }
+                      ]">
+        <ShadcnInput v-model="formData.email" />
+      </ShadcnFormItem>
+      <ShadcnFormItem name="password"
+                      label="Password"
+                      :rules="[
+                        { required: true, message: 'Please input password!' },
+                        { min: 6, message: 'Password must be at least 6 characters' }
+                      ]">
+        <ShadcnInput type="password" v-model="formData.password" />
+      </ShadcnFormItem>
+      <div class="flex justify-end space-x-2 mt-6">
+        <ShadcnButton reset @click="resetForm">
+          Reset
+        </ShadcnButton>
+        <ShadcnButton submit>
+          Submit
+        </ShadcnButton>
+      </div>
+    </ShadcnForm>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const formRef = ref()
+
+const formData = ref({
+  username: '',
+  email: '',
+  password: ''
+})
+
+const onSubmit = async (data: any) => {
+  console.log('Form submitted successfully:', data)
+}
+
+const onError = (errors: any) => {
+  console.log('Form validation failed:', errors)
+}
+
+const resetForm = () => {
+  formRef.value.reset()
+}
+</script>
diff --git a/src/App.vue b/src/App.vue
index b980dd8a..779e2747 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,10 +5,21 @@
     </ShadcnButton>
 
     <div class="mt-6">
-      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Upload 液态玻璃效果</h3>
+      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Form 液态玻璃效果</h3>
       <div class="p-6 rounded-lg bg-gradient-to-r from-indigo-400 to-purple-400">
         <div class="p-8 rounded-lg bg-white/50">
-          <ShadcnUpload action="//jsonplaceholder.typicode.com/posts/" glass :dark="isDark" multiple />
+          <ShadcnForm v-model="formData" glass :dark="isDark" @on-submit="handleSubmit">
+            <ShadcnFormItem label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
+              <ShadcnInput v-model="formData.username" placeholder="请输入用户名" glass :dark="isDark" />
+            </ShadcnFormItem>
+            <ShadcnFormItem label="邮箱" name="email" :rules="[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '请输入正确的邮箱格式' }]">
+              <ShadcnInput v-model="formData.email" placeholder="请输入邮箱" glass :dark="isDark" />
+            </ShadcnFormItem>
+            <ShadcnFormItem label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }, { min: 6, message: '密码长度至少6位' }]">
+              <ShadcnInput v-model="formData.password" type="password" placeholder="请输入密码" glass :dark="isDark" />
+            </ShadcnFormItem>
+            <ShadcnButton type="submit" glass :dark="isDark">提交</ShadcnButton>
+          </ShadcnForm>
         </div>
       </div>
     </div>
@@ -18,8 +29,18 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-import { ShadcnButton } from "@/ui/button";
-import { ShadcnUpload } from "@/ui/upload";
+import { ShadcnButton } from "@/ui/button"
+import { ShadcnForm, ShadcnFormItem } from "@/ui/form"
+import { ShadcnInput } from "@/ui/input"
 
 const isDark = ref(false)
+const formData = ref({
+  username: '',
+  email: '',
+  password: ''
+})
+
+const handleSubmit = (data: any) => {
+  console.log('提交数据:', data)
+}
 </script>
diff --git a/src/ui/form/ShadcnForm.vue b/src/ui/form/ShadcnForm.vue
index b8dd6536..c35b57c0 100644
--- a/src/ui/form/ShadcnForm.vue
+++ b/src/ui/form/ShadcnForm.vue
@@ -1,5 +1,13 @@
 <template>
-  <form @submit.prevent="handleSubmit" class="space-y-4">
+  <form @submit.prevent="handleSubmit"
+        :class="[
+          'space-y-4 rounded-lg',
+          glass && 'p-6',
+          glass && 'backdrop-blur-xl backdrop-saturate-150',
+          glass && (dark ? 'bg-gray-800/30' : 'bg-white/30'),
+          glass && (dark ? 'border border-white/20' : 'border border-gray-400/40'),
+          glass && 'shadow-lg shadow-black/5'
+        ]">
     <slot/>
   </form>
 </template>
@@ -26,6 +34,7 @@ interface FormItemInstance
 const props = defineProps<{
   modelValue: Record<string, any>
   dark?: boolean
+  glass?: boolean
 }>()
 const emit = defineEmits<{
   'update:modelValue': [value: Record<string, any>]
@@ -95,6 +104,7 @@ provide('formContext', {
   model: formState.model,
   errors: formState.errors,
   dark: props.dark,
+  glass: props.glass,
   updateModel: (name: string, value: any) => {
     formState.model[name] = value
     emit('update:modelValue', { ...formState.model })

From 454ccbb1e63327d2ffc8dc8d222401b9646ed904 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 30 Dec 2025 17:09:20 +0800
Subject: [PATCH 13/14] =?UTF-8?q?feat(=E9=80=89=E6=8B=A9=E5=99=A8):=20?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/form/select.md           | 94 ++++++++++++++++++++++++
 playground/src/example/select/search.vue | 59 +++++++++++++++
 src/App.vue                              | 68 +++++++++++------
 src/ui/input/ShadcnInput.vue             |  2 +-
 src/ui/select/ShadcnSelect.vue           | 91 +++++++++++++++++------
 src/ui/select/ShadcnSelectOption.vue     | 12 ++-
 src/ui/select/types.ts                   |  2 +
 7 files changed, 280 insertions(+), 48 deletions(-)
 create mode 100644 playground/src/example/select/search.vue

diff --git a/docs/components/form/select.md b/docs/components/form/select.md
index 7571d71e..740cd7b9 100644
--- a/docs/components/form/select.md
+++ b/docs/components/form/select.md
@@ -267,6 +267,81 @@ const defaultSelectOptions = [
 
 :::
 
+## 搜索 (search)
+
+::: raw
+
+<CodeRunner title="搜索 (search)">
+  <div class="space-y-4">
+    <div>
+      <p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">普通搜索</p>
+      <ShadcnSelect v-model="searchSelectValue" :options="citiesOptions" search placeholder="请搜索城市" :dark="darkMode" />
+    </div>
+    <div>
+      <p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">多选搜索</p>
+      <ShadcnSelect v-model="searchMultiValue" :options="citiesOptions" search multiple placeholder="请搜索并选择多个城市" :dark="darkMode" />
+    </div>
+    <div>
+      <p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">液态玻璃搜索</p>
+      <div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
+        <ShadcnSelect v-model="searchGlassValue" :options="citiesOptions" search glass placeholder="请搜索城市" :dark="darkMode" />
+      </div>
+    </div>
+  </div>
+</CodeRunner>
+
+:::
+
+::: details 查看代码
+
+```vue
+<template>
+  <div class="space-y-4">
+    <div>
+      <p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">普通搜索</p>
+      <ShadcnSelect v-model="searchSelectValue" :options="citiesOptions" search placeholder="请搜索城市" :dark="darkMode" />
+    </div>
+    <div>
+      <p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">多选搜索</p>
+      <ShadcnSelect v-model="searchMultiValue" :options="citiesOptions" search multiple placeholder="请搜索并选择多个城市" :dark="darkMode" />
+    </div>
+    <div>
+      <p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">液态玻璃搜索</p>
+      <div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
+        <ShadcnSelect v-model="searchGlassValue" :options="citiesOptions" search glass placeholder="请搜索城市" :dark="darkMode" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { computed, ref } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+
+const searchSelectValue = ref('')
+const searchMultiValue = ref([])
+const searchGlassValue = ref('')
+
+const citiesOptions = [
+  { value: 'beijing', label: '北京' },
+  { value: 'shanghai', label: '上海' },
+  { value: 'guangzhou', label: '广州' },
+  { value: 'shenzhen', label: '深圳' },
+  { value: 'hangzhou', label: '杭州' },
+  { value: 'nanjing', label: '南京' },
+  { value: 'chengdu', label: '成都' },
+  { value: 'chongqing', label: '重庆' },
+  { value: 'wuhan', label: '武汉' },
+  { value: 'xian', label: '西安' }
+]
+</script>
+```
+
+:::
+
 ## 液态玻璃效果 (glass)
 
 ::: raw
@@ -468,6 +543,8 @@ loadMoreData((children) => {
         ['loadData', '懒加载数据函数', 'function', '-', '-'],
         ['dark', '暗黑模式', 'boolean', 'false', '-'],
         ['glass', '液态玻璃效果', 'boolean', 'false', '-'],
+        ['search', '是否启用搜索功能', 'boolean', 'false', 'true | false'],
+        ['searchPlaceholder', '搜索框占位符', 'string', '搜索...', '-'],
     ]">
 </ApiTable>
 
@@ -562,4 +639,21 @@ const onClick = () => {
 
 const glassSelectValue = ref(null)
 const glassMultiValue = ref([])
+
+const searchSelectValue = ref('')
+const searchMultiValue = ref([])
+const searchGlassValue = ref('')
+
+const citiesOptions = [
+  { value: 'beijing', label: '北京' },
+  { value: 'shanghai', label: '上海' },
+  { value: 'guangzhou', label: '广州' },
+  { value: 'shenzhen', label: '深圳' },
+  { value: 'hangzhou', label: '杭州' },
+  { value: 'nanjing', label: '南京' },
+  { value: 'chengdu', label: '成都' },
+  { value: 'chongqing', label: '重庆' },
+  { value: 'wuhan', label: '武汉' },
+  { value: 'xian', label: '西安' }
+]
 </script>
\ No newline at end of file
diff --git a/playground/src/example/select/search.vue b/playground/src/example/select/search.vue
new file mode 100644
index 00000000..477c171f
--- /dev/null
+++ b/playground/src/example/select/search.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="space-y-6">
+    <div class="relative">
+      <div class="space-y-4">
+        <div>
+          <p class="text-sm mb-2 text-gray-700">普通搜索选择器</p>
+          <ShadcnSelect v-model="searchSelectValue" :options="citiesOptions" search placeholder="请搜索城市" />
+        </div>
+        <div>
+          <p class="text-sm mb-2 text-gray-700">多选搜索选择器</p>
+          <ShadcnSelect v-model="searchMultiValue" :options="citiesOptions" search multiple placeholder="请搜索并选择多个城市" />
+        </div>
+      </div>
+    </div>
+    <div class="relative">
+      <div class="p-6 rounded-lg bg-gradient-to-r from-blue-400 to-indigo-400">
+        <div class="p-8 rounded-lg bg-white/50">
+          <div class="space-y-4">
+            <div>
+              <p class="text-sm mb-2 text-gray-700">液态玻璃搜索选择器</p>
+              <ShadcnSelect v-model="searchGlassValue" :options="citiesOptions" search glass placeholder="请搜索城市" />
+            </div>
+            <div>
+              <p class="text-sm mb-2 text-gray-700">液态玻璃多选搜索选择器</p>
+              <ShadcnSelect v-model="searchGlassMultiValue" :options="citiesOptions" search multiple glass placeholder="请搜索并选择多个城市" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const searchSelectValue = ref('')
+const searchMultiValue = ref([])
+const searchGlassValue = ref('')
+const searchGlassMultiValue = ref([])
+
+const citiesOptions = [
+  { value: 'beijing', label: '北京' },
+  { value: 'shanghai', label: '上海' },
+  { value: 'guangzhou', label: '广州' },
+  { value: 'shenzhen', label: '深圳' },
+  { value: 'hangzhou', label: '杭州' },
+  { value: 'nanjing', label: '南京' },
+  { value: 'chengdu', label: '成都' },
+  { value: 'chongqing', label: '重庆' },
+  { value: 'wuhan', label: '武汉' },
+  { value: 'xian', label: '西安' },
+  { value: 'tianjin', label: '天津' },
+  { value: 'suzhou', label: '苏州' },
+  { value: 'dalian', label: '大连' },
+  { value: 'qingdao', label: '青岛' },
+  { value: 'jinan', label: '济南' }
+]
+</script>
diff --git a/src/App.vue b/src/App.vue
index 779e2747..2868f484 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,21 +5,35 @@
     </ShadcnButton>
 
     <div class="mt-6">
-      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Form 液态玻璃效果</h3>
+      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Select 搜索功能</h3>
       <div class="p-6 rounded-lg bg-gradient-to-r from-indigo-400 to-purple-400">
         <div class="p-8 rounded-lg bg-white/50">
-          <ShadcnForm v-model="formData" glass :dark="isDark" @on-submit="handleSubmit">
-            <ShadcnFormItem label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
-              <ShadcnInput v-model="formData.username" placeholder="请输入用户名" glass :dark="isDark" />
-            </ShadcnFormItem>
-            <ShadcnFormItem label="邮箱" name="email" :rules="[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '请输入正确的邮箱格式' }]">
-              <ShadcnInput v-model="formData.email" placeholder="请输入邮箱" glass :dark="isDark" />
-            </ShadcnFormItem>
-            <ShadcnFormItem label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }, { min: 6, message: '密码长度至少6位' }]">
-              <ShadcnInput v-model="formData.password" type="password" placeholder="请输入密码" glass :dark="isDark" />
-            </ShadcnFormItem>
-            <ShadcnButton type="submit" glass :dark="isDark">提交</ShadcnButton>
-          </ShadcnForm>
+          <div class="space-y-4">
+            <div>
+              <label :class="['block text-sm font-medium mb-2', isDark ? 'text-gray-200' : 'text-gray-700']">普通搜索选择器</label>
+              <ShadcnSelect v-model="selectedValue1" search placeholder="请选择" :dark="isDark">
+                <template #options>
+                  <ShadcnSelectOption v-for="city in cities" :key="city.value" :value="city.value" :label="city.label" :dark="isDark" />
+                </template>
+              </ShadcnSelect>
+            </div>
+            <div>
+              <label :class="['block text-sm font-medium mb-2', isDark ? 'text-gray-200' : 'text-gray-700']">液态玻璃搜索选择器</label>
+              <ShadcnSelect v-model="selectedValue2" search glass placeholder="请选择" :dark="isDark">
+                <template #options>
+                  <ShadcnSelectOption v-for="city in cities" :key="city.value" :value="city.value" :label="city.label" :dark="isDark" glass />
+                </template>
+              </ShadcnSelect>
+            </div>
+            <div>
+              <label :class="['block text-sm font-medium mb-2', isDark ? 'text-gray-200' : 'text-gray-700']">多选搜索选择器</label>
+              <ShadcnSelect v-model="selectedValue3" search multiple glass placeholder="请选择多个城市" :dark="isDark">
+                <template #options>
+                  <ShadcnSelectOption v-for="city in cities" :key="city.value" :value="city.value" :label="city.label" :dark="isDark" glass />
+                </template>
+              </ShadcnSelect>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -30,17 +44,25 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ShadcnButton } from "@/ui/button"
-import { ShadcnForm, ShadcnFormItem } from "@/ui/form"
-import { ShadcnInput } from "@/ui/input"
+import { ShadcnSelect, ShadcnSelectOption } from "@/ui/select"
 
 const isDark = ref(false)
-const formData = ref({
-  username: '',
-  email: '',
-  password: ''
-})
+const selectedValue1 = ref('')
+const selectedValue2 = ref('')
+const selectedValue3 = ref([])
 
-const handleSubmit = (data: any) => {
-  console.log('提交数据:', data)
-}
+const cities = ref([
+  { value: 'beijing', label: '北京' },
+  { value: 'shanghai', label: '上海' },
+  { value: 'guangzhou', label: '广州' },
+  { value: 'shenzhen', label: '深圳' },
+  { value: 'hangzhou', label: '杭州' },
+  { value: 'nanjing', label: '南京' },
+  { value: 'chengdu', label: '成都' },
+  { value: 'chongqing', label: '重庆' },
+  { value: 'wuhan', label: '武汉' },
+  { value: 'xian', label: '西安' },
+  { value: 'tianjin', label: '天津' },
+  { value: 'suzhou', label: '苏州' }
+])
 </script>
diff --git a/src/ui/input/ShadcnInput.vue b/src/ui/input/ShadcnInput.vue
index 82630673..cf576cc8 100644
--- a/src/ui/input/ShadcnInput.vue
+++ b/src/ui/input/ShadcnInput.vue
@@ -3,7 +3,7 @@
                 glass && 'backdrop-blur-xl backdrop-saturate-150',
                 glass && 'border-white/20',
                 glass && 'shadow-lg shadow-black/5',
-                glass ? (dark ? 'bg-white/10' : 'bg-white/80') : (dark ? 'border-gray-600 active:border-gray-500 hover:border-gray-500 bg-gray-800' : 'border-gray-300 active:border-blue-400 hover:border-blue-400')
+                glass ? (dark ? 'bg-white/10' : 'bg-white/30') : (dark ? 'border-gray-600 active:border-gray-500 hover:border-gray-500 bg-gray-800' : 'border-gray-300 active:border-blue-400 hover:border-blue-400')
        ]"
        @mouseenter="hovered = true"
        @mouseleave="hovered = false">
diff --git a/src/ui/select/ShadcnSelect.vue b/src/ui/select/ShadcnSelect.vue
index 703f489d..bf1f7a90 100644
--- a/src/ui/select/ShadcnSelect.vue
+++ b/src/ui/select/ShadcnSelect.vue
@@ -4,7 +4,7 @@
                   border && (dark ? 'border border-gray-600' : 'border border-gray-200'),
                   MinSize[size]
          ]">
-      <ShadcnSkeleton animation :dark="dark" :rows="1" :size="size" class="w-full"/>
+      <ShadcnSkeleton animation :glass="glass" :dark="dark" :rows="1" :size="size" class="w-full"/>
     </div>
     <div v-else :class="['flex rounded-md px-2 relative transition-all duration-300 ease-in-out',
                   border && (glass ? 'border border-white/20' : (dark ? 'border border-gray-600 hover:border-gray-500' : 'border border-gray-200 hover:border-gray-300')),
@@ -69,27 +69,46 @@
         leave-from-class="transform translate-y-0 scale-100 opacity-100"
         leave-to-class="transform -translate-y-2 scale-95 opacity-0">
       <div v-show="isExpanded"
-           ref="dropdownRef"
-           :class="['absolute z-20 w-full px-2 rounded-md border shadow-lg mt-1 py-1 overflow-y-auto max-h-60 transition-all duration-300 ease-in-out',
+           :class="['absolute z-20 w-full rounded-md border shadow-lg mt-1 transition-all duration-300 ease-in-out',
                     glass && 'backdrop-blur-xl backdrop-saturate-150',
                     glass && 'border-white/20',
                     glass && 'shadow-xl shadow-black/10',
-                    glass ? (dark ? 'bg-white/10' : 'bg-white/30') : (dark ? 'border-gray-600 bg-gray-800' : 'border-gray-200 bg-white')]"
-           @scroll="handleScroll">
-        <slot name="options">
-          <ShadcnSelectOption v-for="(option, index) in internalOptions"
-                              :key="index"
-                              :value="option.value"
-                              :label="option.label"
-                              :selected="isOptionSelected(option.value)"
-                              :disabled="option.disabled"
-                              :dark="dark"
-                              :glass="glass"
-                              :type="type"/>
-        </slot>
-        <div v-if="isLoading" class="flex justify-center items-center py-2">
-          <div :class="['animate-spin rounded-full h-4 w-4 border-2 border-t-transparent',
-                        glass ? (dark ? 'border-blue-400/50' : 'border-blue-500/60') : 'border-primary-500']"></div>
+                    glass ? (dark ? 'bg-white/10' : 'bg-white/30') : (dark ? 'border-gray-600 bg-gray-800' : 'border-gray-200 bg-white')]">
+        <div v-if="search" :class="['p-2 border-b', glass ? 'border-white/20' : (dark ? 'border-gray-700' : 'border-gray-200')]">
+          <ShadcnInput v-model="searchQuery"
+                       :placeholder="searchPlaceholder"
+                       :glass="glass"
+                       :dark="dark"
+                       size="small"
+                       @click.stop/>
+        </div>
+        <div ref="dropdownRef"
+             :class="['px-2 py-1 overflow-y-auto max-h-60']"
+             @scroll="handleScroll">
+          <template v-if="props.options">
+            <ShadcnSelectOption v-for="(option, index) in internalOptions"
+                                :key="index"
+                                :value="option.value"
+                                :label="option.label"
+                                :selected="isOptionSelected(option.value)"
+                                :disabled="option.disabled"
+                                :dark="dark"
+                                :glass="glass"
+                                :type="type"/>
+            <div v-if="internalOptions.length === 0 && search && searchQuery" :class="['text-center py-4 text-sm', dark ? 'text-gray-400' : 'text-gray-500']">
+              无匹配结果
+            </div>
+          </template>
+          <template v-else>
+            <slot name="options"/>
+            <div v-if="visibleOptionsCount === 0 && search && searchQuery" :class="['text-center py-4 text-sm', dark ? 'text-gray-400' : 'text-gray-500']">
+              无匹配结果
+            </div>
+          </template>
+          <div v-if="isLoading" class="flex justify-center items-center py-2">
+            <div :class="['animate-spin rounded-full h-4 w-4 border-2 border-t-transparent',
+                          glass ? (dark ? 'border-blue-400/50' : 'border-blue-500/60') : 'border-primary-500']"></div>
+          </div>
         </div>
       </div>
     </Transition>
@@ -105,6 +124,7 @@ import { HoverType } from '@/ui/common/type.ts'
 import { SelectEmits, SelectOptionProps, SelectProps } from '@/ui/select/types.ts'
 import { generateRandomId } from '@/utils/common.ts'
 import { ShadcnSkeleton } from '@/ui/skeleton'
+import { ShadcnInput } from '@/ui/input'
 
 const emit = defineEmits<SelectEmits>()
 
@@ -118,7 +138,9 @@ const props = withDefaults(defineProps<SelectProps>(), {
   lazy: false,
   loading: false,
   dark: false,
-  glass: false
+  glass: false,
+  search: false,
+  searchPlaceholder: '搜索...'
 })
 
 const isExpanded = ref(false)
@@ -128,6 +150,7 @@ const selectRef = ref<HTMLElement | null>(null)
 const dropdownRef = ref<HTMLElement | null>(null)
 const parentName = `shadcn-select-${generateRandomId()}`
 const isLoading = ref(false)
+const searchQuery = ref('')
 
 // Handle scroll loading
 const handleScroll = () => {
@@ -217,14 +240,34 @@ const removeSelection = (index: number) => {
 }
 
 const internalOptions = computed(() => {
-  return props.options || slotOptions.value
+  const options = props.options || slotOptions.value
+  if (props.search && searchQuery.value) {
+    return options.filter(option =>
+        option.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+    )
+  }
+  return options
+})
+
+const visibleOptionsCount = computed(() => {
+  if (!props.search || !searchQuery.value) {
+    return slotOptions.value.length
+  }
+  return slotOptions.value.filter(option =>
+    option.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+  ).length
 })
 
 const toggleDropdown = () => {
   if (!props.disabled) {
     isExpanded.value = !isExpanded.value
     if (isExpanded.value) {
-      nextTick(updateSelectedLabels)
+      nextTick(() => {
+        updateSelectedLabels()
+      })
+    }
+    else {
+      searchQuery.value = ''
     }
   }
 }
@@ -281,7 +324,9 @@ provide('selectContext', {
   multiple: props.multiple,
   parentName,
   dark: computed(() => props.dark),
-  glass: computed(() => props.glass)
+  glass: computed(() => props.glass),
+  searchQuery: computed(() => searchQuery.value),
+  search: computed(() => props.search)
 })
 
 onMounted(() => {
diff --git a/src/ui/select/ShadcnSelectOption.vue b/src/ui/select/ShadcnSelectOption.vue
index fd0de98d..3c4482e6 100644
--- a/src/ui/select/ShadcnSelectOption.vue
+++ b/src/ui/select/ShadcnSelectOption.vue
@@ -1,5 +1,6 @@
 <template>
-  <div :class="['flex items-center text-sm px-2 py-1.5 my-1 rounded-sm transition-all duration-300 ease-in-out',
+  <div v-show="isVisible"
+       :class="['flex items-center text-sm px-2 py-1.5 my-1 rounded-sm transition-all duration-300 ease-in-out',
                   {
                     'cursor-not-allowed opacity-50': disabled,
                     'cursor-pointer': !disabled,
@@ -55,6 +56,8 @@ const context = inject('selectContext') as {
   parentName: string
   dark: any
   glass: any
+  searchQuery: any
+  search: any
 }
 
 const inGroup = inject('inGroup', false)
@@ -62,6 +65,13 @@ const parentName = context.parentName
 const dark = computed(() => props.dark ?? (context.dark?.value || false))
 const glass = computed(() => props.glass ?? (context.glass?.value || false))
 
+const isVisible = computed(() => {
+  if (!context.search?.value || !context.searchQuery?.value) {
+    return true
+  }
+  return props.label.toLowerCase().includes(context.searchQuery.value.toLowerCase())
+})
+
 const isSelected = computed(() => {
   if (context.multiple) {
     return Array.isArray(context.modelValue.value) &&
diff --git a/src/ui/select/types.ts b/src/ui/select/types.ts
index cee7a832..67ba3b34 100644
--- a/src/ui/select/types.ts
+++ b/src/ui/select/types.ts
@@ -16,6 +16,8 @@ export interface SelectProps
     loadData?: (callback: (children: SelectOptionProps[]) => void) => void
     dark?: boolean
     glass?: boolean
+    search?: boolean
+    searchPlaceholder?: string
 }
 
 export interface SelectOptionProps

From 885b277d81e8543d358d3b949b5743bf2c614925 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 30 Dec 2025 17:20:01 +0800
Subject: [PATCH 14/14] =?UTF-8?q?=E6=96=B0=E7=89=88=E6=9C=AC(=E5=8F=91?=
 =?UTF-8?q?=E5=B8=83):=202025.1.5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.js  |   7 +--
 docs/changelog/2025.1.4.md |  43 ++++++++++++++++
 docs/changelog/latest.md   | 103 ++++++++++++++++++++++++-------------
 3 files changed, 115 insertions(+), 38 deletions(-)
 create mode 100644 docs/changelog/2025.1.4.md

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index c34e50cc..2c85b44b 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -76,7 +76,7 @@ export default {
                 link: 'https://playground.view-shadcn-ui.devlive.org'
             },
             {
-                text: '2025.1.4 <span class="VPBadge danger" style="margin-left: -18px; position: absolute; bottom: 38px;">最新</span>',
+                text: '2025.1.5 <span class="VPBadge danger" style="margin-left: -18px; position: absolute; bottom: 38px;">最新</span>',
                 items: [
                     {
                         text: '贡献指南',
@@ -120,8 +120,9 @@ export default {
             '/changelog/': [
                 (() => {
                     const items = [
-                        {text: '2025.1.4 <span class="VPBadge danger" style="left: 65px; margin-top: 6px; width: 45px;">最新</span>', link: 'latest', version: '2025-12-07'},
-                        {text: '2025.1.3', link: '2025-05-27', version: '2025-05-27'},
+                        {text: '2025.1.5 <span class="VPBadge danger" style="left: 65px; margin-top: 6px; width: 45px;">最新</span>', link: 'latest', version: '2025-12-30'},
+                        {text: '2025.1.4', link: '2025.1.4', version: '2025-12-07'},
+                        {text: '2025.1.3', link: '2025.1.3', version: '2025-05-27'},
                         {text: '2025.1.2', link: '2025.1.2', version: '2025-01-21'},
                         {text: '2025.1.1', link: '2025.1.1', version: '2025-01-15'},
                         {text: '2025.1.0', link: '2025.1.0', version: '2025-01-11'},
diff --git a/docs/changelog/2025.1.4.md b/docs/changelog/2025.1.4.md
new file mode 100644
index 00000000..6c215fbc
--- /dev/null
+++ b/docs/changelog/2025.1.4.md
@@ -0,0 +1,43 @@
+---
+title: 2025.1.3
+---
+
+# 📢 View Shadcn UI v2025.1.4 发布 - 全面拥抱暗黑模式
+
+我们很高兴地宣布，View Shadcn UI v2025.1.4 版本已于 2025 年 12 月 7 日正式发布！这是一个重要的里程碑版本，为整个组件库带来了全面的暗黑模式支持。
+
+## 📋 版本信息
+- **版本号**: 2025.1.4
+- **发布日期**: 2025 年 12 月 7 日
+- **项目地址**: https://github.com/devlive-community/view-shadcn-ui
+- **官方网站**: https://view-shadcn-ui.devlive.org/
+- **演练场**: https://playground.view-shadcn-ui.devlive.org/
+
+## 🌟 主要更新
+
+#### 🌙 全面暗黑模式支持
+本次更新的核心是为所有组件添加了完整的暗黑模式支持，让您的应用可以轻松切换明暗主题，提供更好的用户体验。
+
+**已支持暗黑模式的组件**：
+- **布局组件**：布局（Layout）
+- **表单组件**：输入标签（Input Tags）、切换（Switch）、复选框（Checkbox）、颜色选择器（Color Picker）
+- **反馈组件**：警告提示（Alert）、徽章（Badge）、提示（Tooltip）
+- **导航组件**：面包屑（Breadcrumb）、返回顶部（Back to Top）
+- **展示组件**：头像（Avatar）、卡片（Card）、折叠面板（Collapse）、轮播（Carousel）、抽屉（Drawer）
+- **操作组件**：按钮（Button）、右键菜单（Context Menu）
+- **高级组件**：数据表格（Data Table）、代码编辑器（Code Editor）、计划任务（Cron）
+
+#### 🔧 数据表格增强
+除了暗黑模式支持外，我们还对数据表格组件进行了多项功能增强：
+- ✅ 修复了悬停固定列的显示问题
+- ✅ 支持自定义表格样式
+- ✅ 支持表头自定义插槽
+- ✅ 支持数据列自定义插槽
+- ✅ 支持表格边框配置
+- ✅ 支持固定列功能
+
+## 💡 关于 View Shadcn UI
+View Shadcn UI 是一个基于 Tailwind CSS 构建的现代化 Vue3 组件库，致力于提供优雅、高效且易于使用的 UI 组件，帮助开发者快速构建美观的用户界面。
+
+## 🙏 致谢
+感谢社区所有贡献者和用户的支持与反馈，让 View Shadcn UI 变得更加完善！
\ No newline at end of file
diff --git a/docs/changelog/latest.md b/docs/changelog/latest.md
index 924c94d0..54bc30bd 100644
--- a/docs/changelog/latest.md
+++ b/docs/changelog/latest.md
@@ -1,43 +1,76 @@
 ---
-title: 2025.1.3
+title: 2025.1.5
 ---
 
-# 📢 View Shadcn UI v2025.1.4 发布 - 全面拥抱暗黑模式
+我们怀着激动的心情宣布，View Shadcn UI v2025.1.5 版本已于 2025 年 12 月 30 日正式发布！这是一个革命性的版本更新，为组件库带来了令人惊艳的液态玻璃（Glassmorphism）设计美学，让您的应用界面焕然一新。
 
-我们很高兴地宣布，View Shadcn UI v2025.1.4 版本已于 2025 年 12 月 7 日正式发布！这是一个重要的里程碑版本，为整个组件库带来了全面的暗黑模式支持。
-
-### 📋 版本信息
-- **版本号**: 2025.1.4
-- **发布日期**: 2025 年 12 月 7 日
+## 📋 版本信息
+- **版本号**: 2025.1.5
+- **发布日期**: 2025 年 12 月 30 日
 - **项目地址**: https://github.com/devlive-community/view-shadcn-ui
 - **官方网站**: https://view-shadcn-ui.devlive.org/
 - **演练场**: https://playground.view-shadcn-ui.devlive.org/
 
-### 🌟 主要更新
-
-#### 🌙 全面暗黑模式支持
-本次更新的核心是为所有组件添加了完整的暗黑模式支持，让您的应用可以轻松切换明暗主题，提供更好的用户体验。
-
-**已支持暗黑模式的组件**：
-- **布局组件**：布局（Layout）
-- **表单组件**：输入标签（Input Tags）、切换（Switch）、复选框（Checkbox）、颜色选择器（Color Picker）
-- **反馈组件**：警告提示（Alert）、徽章（Badge）、提示（Tooltip）
-- **导航组件**：面包屑（Breadcrumb）、返回顶部（Back to Top）
-- **展示组件**：头像（Avatar）、卡片（Card）、折叠面板（Collapse）、轮播（Carousel）、抽屉（Drawer）
-- **操作组件**：按钮（Button）、右键菜单（Context Menu）
-- **高级组件**：数据表格（Data Table）、代码编辑器（Code Editor）、计划任务（Cron）
-
-#### 🔧 数据表格增强
-除了暗黑模式支持外，我们还对数据表格组件进行了多项功能增强：
-- ✅ 修复了悬停固定列的显示问题
-- ✅ 支持自定义表格样式
-- ✅ 支持表头自定义插槽
-- ✅ 支持数据列自定义插槽
-- ✅ 支持表格边框配置
-- ✅ 支持固定列功能
-
-### 💡 关于 View Shadcn UI
-View Shadcn UI 是一个基于 Tailwind CSS 构建的现代化 Vue3 组件库，致力于提供优雅、高效且易于使用的 UI 组件，帮助开发者快速构建美观的用户界面。
-
-### 🙏 致谢
-感谢社区所有贡献者和用户的支持与反馈，让 View Shadcn UI 变得更加完善！
\ No newline at end of file
+## ✨ 核心特性
+
+#### 🌊 液态玻璃效果全面覆盖
+本次更新的最大亮点是为 40+ 组件添加了精心设计的液态玻璃效果，带来通透、层次分明的现代化视觉体验。
+
+**已支持液态玻璃效果的组件**：
+
+**基础组件**
+- Alert（警告提示）、Avatar（头像）、Badge（徽章）、Button（按钮）
+- Text（文本）、Skeleton（骨架屏）
+
+**表单组件**
+- Form（表单）、Select（选择器）、Slider（滑块）、Switch（开关）
+- Toggle（切换）、DatePicker（日期选择器）、ColorPicker（颜色选择器）
+- Upload（上传）
+
+**导航组件**
+- Menu（菜单）、Breadcrumb（面包屑）、Pagination（分页）
+- Tab（标签页）、BackTop（返回顶部）
+
+**反馈组件**
+- Message（消息）、Modal（模态框）、Drawer（抽屉）
+- Tooltip（提示）、Progress（进度条）、Spin（加载）
+
+**数据展示**
+- Table（表格）、Collapse（折叠面板）、Carousel（轮播）
+
+**高级组件**
+- ContextMenu（右键菜单）、Dropdown（下拉菜单）
+- CountDown（倒计时）、Contribution（贡献图）
+
+**布局组件**
+- Global Footer（全局页脚）、Toolbar Footer（工具栏页脚）
+
+#### 🎯 功能增强
+
+**选择器组件优化**
+- ✨ 新增搜索功能，支持快速筛选选项
+
+**Markdown 组件**
+- 🆕 全新支持 Markdown 渲染组件
+
+#### 🐛 问题修复
+
+- ✅ 修复右键菜单多级菜单下父级隐藏问题
+- ✅ 修复下拉菜单位置在右侧时列表显示异常
+- ✅ 修复嵌套菜单异常问题
+- ✅ 修复菜单宽度不一致问题
+- ✅ 修复抽屉组件顶部空白问题
+
+#### 🛠️ 工程优化
+
+- 📦 优化 CI/CD 流程，拆分构建脚本
+- 📚 文档全面适配暗黑模式
+- 🔧 修复 VitePress 部署配置问题
+
+## 💡 关于 View Shadcn UI
+
+View Shadcn UI 是一个基于 Tailwind CSS 构建的现代化 Vue3 组件库，专注于提供优雅、高性能且易于使用的 UI 组件。我们致力于将最新的设计趋势与最佳的开发实践相结合，帮助开发者构建出色的用户界面。
+
+## 🙏 致谢
+
+感谢社区的每一位贡献者和用户！你们的支持和反馈是我们不断前进的动力。
\ No newline at end of file