feat: 更新 VSCode 设置，更新 package.json 脚本，添加新功能页面和重构组件

src/pages/vue-macros/ReusableTemplate.page.vue

@@ -0,0 +1,38 @@
+<template>
+  <h1>Use Reusable Template</h1>
+
+  <TemplateFoo.define v-slot="{ $slots, msg }">
+    <div>Hello {{ msg.toUpperCase() }}</div>
+    <component :is="$slots.slotNameee" slotPropName="valueee" />
+    <component :is="$slots.default" />
+  </TemplateFoo.define>
+
+  <h2>TemplateFoo.reuse</h2>
+  <TemplateFoo.reuse msg="World" />
+
+  <h2>TemplateFoo.reuse with slotNameee(with props)</h2>
+  <TemplateFoo.reuse msg="Reusable">
+    <template #slotNameee="{ slotPropName }">
+      <div>Passing Slots,{{ { slotPropName } }}</div>
+    </template>
+  </TemplateFoo.reuse>
+
+  <h2>TemplateFoo.reuse with slot.default</h2>
+  <TemplateFoo.reuse msg="Reusable">
+    <div>Passing Slots.Default</div>
+  </TemplateFoo.reuse>
+</template>
+
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core';
+
+const TemplateFoo = createReusableTemplate<
+  { msg: string },
+  {
+    slotNameee: {
+      slotPropName: string;
+    };
+    default: object;
+  }
+>();
+</script>