feat:增加撒花动画

docs/.vitepress/theme/components/Confetti.vue

@@ -0,0 +1,14 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+import confetti from "canvas-confetti";
+
+/* 纸屑 */
+confetti({
+  particleCount: 100,
+  spread: 170,
+  origin: { y: 0.6 },
+});
+</script>

docs/.vitepress/theme/components/CustomComponent.vue

@@ -1,27 +0,0 @@
-<template>
-  <div class="custom-component">
-    <h3>{{ title }}</h3>
-    <p>{{ description }}</p>
-    <button @click="count++">点击次数: {{ count }}</button>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const props = defineProps({
-  title: String,
-  description: String
-})
-
-const count = ref(0)
-</script>
-
-<style scoped>
-.custom-component {
-  border: 1px solid #e2e2e2;
-  padding: 1rem;
-  border-radius: 8px;
-  margin: 1rem 0;
-}
-</style>

docs/.vitepress/theme/index.ts

@@ -1,13 +1,13 @@
 import DefaultTheme from 'vitepress/theme'
+import Confetti from "./components/Confetti.vue";
+import type { EnhanceAppContext } from 'vitepress'
 
 import '../theme/style.css'
 import './style/var.css'
 
-// 定义组件导入的类型
-interface ComponentModule {
-  default: any
-}
-
 export default {
-  extends: DefaultTheme
-}
+  extends: DefaultTheme,
+  enhanceApp({ app }: EnhanceAppContext) {
+    app.component("Confetti", Confetti);
+  },
+};

docs/.vitepress/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["ES2017", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "allowJs": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["**/*.ts", "**/*.vue"],
+  "exclude": ["node_modules"]
+}

docs/index.md

@@ -27,3 +27,4 @@ features:
   - title: 🔍 快速检索
     details: 清晰的分类导航和搜索功能，方便快速定位所需的技术知识点
 ---
+<Confetti />