feat: 添加 StyleLayer 组件，展示 @layer 优先级规则及样式示例；新增 style.page.vue 页面

src/pages/Tool/fonts.page.vue

@@ -13,16 +13,14 @@
       ><br />https://unocss-preset-chinese-playground.vercel.app/
     </p>
 
-    <div :class="$style.hero" mt-2>
+    <div mt-2 b="1px solid pink">
       <h1><i>🔌</i> Vite Plugin Webfont DL <i>⚡</i></h1>
       <h2>Fonts are downloaded directly from Google Fonts</h2>
-      <pre>{{ JSON.stringify({ $style }, null, 2) }}</pre>
     </div>
   </div>
 </template>
 
-<style module>
-/* https://cn.vuejs.org/api/sfc-css-features#css-modules */
+<style scoped>
 h1 {
   font-family: 'Press Start 2P', cursive;
   color: #646cff;
@@ -32,8 +30,4 @@ h2 {
   font-family: 'Fira Code', monospace;
   background-color: #42b983;
 }
-
-.hero {
-  border: 1px solid #42b983;
-}
 </style>

src/pages/Tool/style.page.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div :class="$style.hero" mt-2>
+    <pre>{{ JSON.stringify({ $style }, null, 2) }}</pre>
+  </div>
+  <StyleLayer />
+</template>
+
+<style module>
+/* https://cn.vuejs.org/api/sfc-css-features#css-modules */
+
+.hero {
+  border: 1px solid #42b983;
+}
+</style>