Merge pull request #228 from qianmoQ/dev-2025.1.5

新版本(发布): 2025.1.5

Author: qianmoQ

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'},

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 变得更加完善！

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 变得更加完善！
+## ✨ 核心特性
+
+#### 🌊 液态玻璃效果全面覆盖
+本次更新的最大亮点是为 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 组件。我们致力于将最新的设计趋势与最佳的开发实践相结合，帮助开发者构建出色的用户界面。
+
+## 🙏 致谢
+
+感谢社区的每一位贡献者和用户！你们的支持和反馈是我们不断前进的动力。

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>

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>