Vue.js 3 组合式API入门指南
前端框架
深入了解Vue.js 3的组合式API，包括响应式数据、生命周期钩子和组件通信等核心概念。
🏷️ 标签系统展示
这个页面展示了新增的标签系统功能。
标签云组件
标签云
文章卡片展示
CSS Grid 布局完全指南
前端样式
全面掌握CSS Grid布局系统，从基础概念到高级应用，打造灵活的网页布局。
Node.js 性能优化最佳实践
后端开发
学习Node.js应用的性能优化技巧，包括内存管理、异步编程和数据库优化等。
Vite 构建工具深度解析
构建工具
Vite作为下一代前端构建工具，具有极快的冷启动和热更新能力，了解其工作原理。
样式修复说明
如果您发现文章卡片样式显示异常，这通常是由于VitePress全局样式冲突导致的。我们已经添加了专门的样式修复文件 article-card-fix.css 来解决这个问题。
✨ 功能特性
🏷️ 优雅标签云
- 🎨 智能排序：按使用频率自动排序，热门标签更显眼
- 📏 动态大小：根据标签热度智能调整尺寸（XL/LG/MD/SM/XS）
- 🔍 交互筛选：点击标签快速筛选相关内容
- 🧹 一键清除：优雅的清除按钮，快速重置筛选
- ✨ 视觉效果：悬停动画、渐变背景、光晕效果
- 📱 响应式：完美适配移动端和桌面端
📄 现代文章卡片
- 💎 优雅设计：毛玻璃效果、渐变边框、光晕装饰
- 📊 丰富信息：标题、摘要、标签、分类、阅读时间
- 🎯 智能交互：收藏、分享、标签点击、阅读跳转
- 🏷️ 标签管理：支持标签折叠展开，避免界面混乱
- 📈 统计展示：模拟浏览量、阅读时间等数据
- 🎭 动画反馈：悬停效果、点击波纹、状态切换
📊 智能阅读进度
- 🌈 渐变进度条：颜色随进度动态变化（蓝→绿）
- 📍 浮动面板：可展开的详细信息面板
- ⏱️ 时间预估：基于文章字数智能计算剩余阅读时间
- 📊 阅读统计：进度百分比、阅读速度显示
- 🎉 完成庆祝：阅读完成时的庆祝动画
- 🔄 自适应：自动检测文章字数，智能调整预估时间
使用方法
在Markdown中使用标签云
vue
<TagCloud :tags="['Vue.js', 'React', 'Angular']" @tag-selected="handleTag" />在Markdown中使用文章卡片
vue
<ArticleCard
title="文章标题"
link="/path/to/article"
excerpt="文章摘要..."
:tags="['Vue.js', 'JavaScript']"
date="2024-01-01"
category="前端开发"
:read-time="5"
/>📊 智能阅读进度
阅读进度条已经全局启用，现在滚动页面即可看到：
顶部进度条：
- 🌈 动态渐变颜色（蓝色→绿色）
- 📈 实时滚动进度显示
- ✨ 位于页面顶部，层级最高
浮动信息面板（右上角）：
- 📊 圆形进度指示器（紧凑模式）
- 🔍 悬停展开详细信息
- ⏱️ 智能阅读时间预估
- 📖 基于文章字数的精准计算
完成庆祝：
- 🎉 阅读完成时的庆祝动画
- 💫 优雅的提示和反馈
使用提示
开始滚动页面，您就能看到顶部的进度条和右上角的进度面板了！进度条会根据您的滚动位置动态更新颜色和进度。
这些组件让您的知识库更加现代化和用户友好！🎉