fix: add a VueUse demo

Author: zenHeart

playground/scenarios/vueUse/App.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="app-container">
+    <Coordinate label="X" :value="x" />
+    <Coordinate label="Y" :value="y" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMouse } from '@vueuse/core'
+import Coordinate from './Coordinate.vue'
+
+const { x, y } = useMouse()
+</script>
+
+<style scoped>
+.app-container {
+  display: grid;
+  grid-auto-flow: column;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  font-family: monospace;
+}
+</style>

playground/scenarios/vueUse/Coordinate.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="coordinate">
+    <span class="coordinate-value">{{ value }}</span>
+    <span class="coordinate-label"> Mouse {{ label }} </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  label: string
+  value: number
+}>()
+</script>
+
+<style scoped>
+.coordinate {
+  font-family: monospace;
+  background-color: #f3f4f6; /* light-500 */
+  color: #111827; /* dark-900 */
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+}
+.coordinate-value {
+  font-size: 2.25rem; /* text-4xl */
+}
+.coordinate-label {
+  font-size: 0.875rem; /* text-sm */
+  margin-top: 0.5rem;
+  color: #2563eb; /* blue-600, 更明显 */
+  opacity: 0.8;
+}
+</style>

playground/scenarios/vueUse/_meta.js

@@ -0,0 +1,3 @@
+export default {
+  mainFile: 'App.vue',
+}

playground/scenarios/vueUse/import-map.json

@@ -0,0 +1,8 @@
+{
+  "imports": {
+    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
+    "@vueuse/core": "https://unpkg.com/@vueuse/[email protected]/index.mjs",
+    "@vueuse/shared": "https://unpkg.com/@vueuse/[email protected]/index.mjs",
+    "vue-demi": "https://cdn.jsdelivr.net/npm/[email protected]/lib/v3/index.mjs"
+  }
+}