vuepress-plugin-cat-tooltip

一个 VuePress Plume 主题插件，提供一个可复用的猫猫控件组件，点击后会在右侧显示气泡提示框"好天气+1"。

功能特性

• 🐱 独立的 Vue 组件，可在任何地方使用
• 💬 点击触发，显示优雅的气泡提示框
• 🎨 自动适配系统主题（亮色/暗色）
• 📱 响应式设计，小屏幕时自动调整位置
• ✨ 流畅的动画效果
• 🎭 支持 emoji 或图片显示
• 📚 支持多个气泡竖向排列（最多5个）
• 🔄 自动管理气泡队列（FIFO）

安装

npm install vuepress-plugin-cat-tooltip

使用方法

1. 配置插件

在 VuePress 的配置文件中添加插件：

import { defineUserConfig } from 'vuepress'
import { plumeTheme } from 'vuepress-theme-plume'
import catTooltip from 'vuepress-plugin-cat-tooltip'

export default defineUserConfig({
  theme: plumeTheme(),
  plugins: [
    catTooltip(),
  ],
})

2. 在 Markdown 中使用

在 Markdown 文件中直接使用 <CatTooltip /> 组件：

## 个人介绍

<CatTooltip />

或者自定义提示文本：

<CatTooltip text="今天心情不错！" />

使用图片替代 emoji：

<CatTooltip display-type="image" image-src="/path/to/cat.png" />

自定义 emoji：

<CatTooltip emoji="😸" text="喵~" />

3. 在 Vue 组件中使用

如果你有自定义的 Vue 组件，也可以直接使用：

<template>
  <div class="profile">
    <CatTooltip text="好天气+1" />
  </div>
</template>

组件属性

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | text | string | '好天气+1' | 气泡提示框显示的文本（支持 {min,max} 或 {randomNum(min,max)} 占位符） | | texts | string[] | null | 文本数组，如果提供则随机选择其中一个（支持随机数字占位符） | | emoji | string | '🐱' | 显示的 emoji（当 display-type 为 'emoji' 时） | | imageSrc | string | null | 图片路径（当 display-type 为 'image' 时） | | displayType | 'emoji' \| 'image' | 'emoji' | 显示类型：'emoji' 或 'image' | | maxBubbles | number | 5 | 最多显示的气泡数量 | | size | string \| number \| object | '28px' | emoji 或图片的大小，可以是字符串（如 '28px', '2rem'）、数字（自动添加 px）或对象 { mobile: '24px', tablet: '32px', desktop: '40px' } |

使用示例

在个人介绍栏中使用

---
layout: HomeLayout
---

<div class="profile-section">
  <h1>欢迎来到我的博客</h1>
  <p>我是一名开发者 <CatTooltip /></p>
</div>

自定义提示文本

点击猫猫：<CatTooltip text="今天是个好天气！" />

使用图片

<!-- 使用图片替代 emoji -->
<CatTooltip 
  display-type="image" 
  image-src="/assets/cat.png" 
  text="好天气+1" 
/>

自定义 emoji

<CatTooltip emoji="😸" text="喵喵~" />

自定义大小

<!-- 使用数字（自动添加 px） -->
<CatTooltip size="40" />

<!-- 使用字符串 -->
<CatTooltip size="2rem" />
<CatTooltip size="32px" />

<!-- 自定义大小 + emoji -->
<CatTooltip emoji="😸" size="48px" text="大猫猫！" />

<!-- 自定义大小 + 图片 -->
<CatTooltip 
  display-type="image" 
  image-src="/assets/cat.png" 
  size="36px"
/>

自动响应式大小（根据屏幕尺寸自动调整）

组件会自动根据屏幕宽度调整大小，无需手动配置：

<!-- 默认会自动缩放 -->
<CatTooltip />

<!-- 设置基础大小，会自动根据屏幕缩放 -->
<CatTooltip size="40px" />

<!-- 移动端会自动缩小到 75%，平板端缩小到 90%，桌面端保持原大小 -->
<CatTooltip size="32px" />

自动缩放比例：

• 移动端（宽度 < 640px）：自动缩小到 75%
• 平板端（宽度 640px - 1023px）：自动缩小到 90%
• 桌面端（宽度 ≥ 1024px）：保持 100% 原大小

组件会自动监听窗口大小变化，实时调整显示大小。

高级用法（手动配置）：

如果你需要自定义不同屏幕尺寸的大小，也可以使用对象配置：

<!-- 在 Vue 组件中手动配置 -->
<template>
  <CatTooltip 
    :size="{
      mobile: '24px',
      tablet: '32px',
      desktop: '40px'
    }"
  />
</template>

多次点击效果

组件支持多次点击，每次点击会在右侧添加新的气泡提示框。最多显示 5 个气泡，如果超过 5 个，最早的气泡会自动消失。每个气泡会在 3 秒后自动消失。

随机文本功能

可以使用 texts 属性提供多个文本选项，每次点击会随机选择一个：

<!-- 在 Vue 组件中 -->
<template>
  <CatTooltip 
    :texts="[
      '今天心情不错！',
      '好运连连~',
      '开心每一天！'
    ]"
  />
</template>

<!-- 在 Markdown 中需要使用 Vue 组件方式 -->
<script setup>
import { ref } from 'vue'
const texts = ref([
  '今天心情不错！',
  '好运连连~',
  '开心每一天！'
])
</script>

<template>
  <CatTooltip :texts="texts" />
</template>

随机数字功能

在文本中使用随机数字占位符可以生成随机数字。支持两种格式：

• 简化格式：{min,max} （例如：{50,100}）
• 完整格式：{randomNum(min,max)} （例如：{randomNum(50,100)}）

<!-- 单文本带随机数字（简化格式） -->
<CatTooltip text="今天好运概率加{50,100}%" />

<!-- 单文本带随机数字（完整格式） -->
<CatTooltip text="今天好运概率加{randomNum(50,100)}%" />

<!-- 随机文本 + 随机数字 -->
<CatTooltip 
  :texts="[
    '今天好运概率加{50,100}%',
    '心情值提升了{1,10}点',
    '幸运值 {80,99}'
  ]"
/>

特性说明

• 系统主题适配：自动检测用户的系统主题偏好（亮色/暗色模式），气泡框颜色会自动调整
• 点击交互：点击按钮会添加新的气泡提示框
• 多气泡支持：支持最多显示 5 个气泡，竖向排列，超出后自动移除最早的气泡（FIFO）
• 随机文本：可以通过 texts 数组提供多个文本选项，每次点击随机选择
• 随机数字：支持 {randomNum(min,max)} 占位符，自动替换为指定范围内的随机整数
• 自动消失：每个气泡会在 3 秒后自动消失
• 动画效果：气泡出现和消失都有流畅的动画效果，包括弹性动画
• 支持 emoji 和图片：可以选择使用 emoji 或自定义图片
• 响应式设计：在小屏幕设备上，气泡框会显示在按钮上方，避免超出屏幕

浏览器支持

支持所有现代浏览器（Chrome, Firefox, Safari, Edge 等）。

License

MIT