docs: update layout slots doc

docs/notes/theme/guide/custom/slots.md

@@ -90,6 +90,10 @@ export default defineClientConfig({
 
 ## 插槽
 
+::: info
+您可以预览 <https://plume-layout-slots.netlify.app> 以查看所有可用的插槽在站点中的位置。
+:::
+
 ### `<Layout />` 插槽
 
 - 当 `pageLayout: doc` 时：

examples/layout-slots/docs/.vuepress/config.ts

@@ -18,7 +18,7 @@ export default defineUserConfig({
 
   theme: plumeTheme({
     /* 添加您的部署域名, 有助于 SEO, 生成 sitemap */
-    // hostname: 'https://your_site_url',
+    hostname: 'https://plume-layout-slots.netlify.app/',
 
     /* 文档仓库配置，用于 editLink */
     docsRepo: 'pengzhanbo/vuepress-theme-plume',

examples/layout-slots/docs/.vuepress/theme/components/SlotDemo.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import { useMessage } from '../composables/message.js'
+import '@vuepress/helper/message.css'
+
 withDefaults(defineProps<{
   name: string
   w?: number
@@ -8,6 +12,15 @@ withDefaults(defineProps<{
 }>(), {
   h: 60,
 })
+
+const message = useMessage()
+
+const { copy } = useClipboard()
+
+function onCopy(name: string) {
+  copy(name)
+  message.pop(`<span>复制成功: ${name}</span>`, 3000, true)
+}
 </script>
 
 <template>
@@ -16,6 +29,7 @@ withDefaults(defineProps<{
     :class="{ [name]: true, small }"
     :style="{ width: `${w}px`, height: `${h}px`, marginTop: `${mt}px` }"
     :title="name"
+    @click="() => onCopy(name)"
   >
     <span>{{ name }}</span>
   </div>
@@ -65,4 +79,16 @@ withDefaults(defineProps<{
   z-index: 100;
   width: 100%;
 }
+
+:global(#message-container) {
+  inset: unset !important;
+  top: calc(var(--vp-nav-height) + var(--vp-layout-top-height) + 24px) !important;
+  left: 50% !important;
+  width: fit-content !important;
+  transform: translateX(-50%) !important;
+}
+
+:global(.message-item) {
+  box-shadow: var(--vp-shadow-3);
+}
 </style>

examples/layout-slots/docs/.vuepress/theme/composables/message.ts

@@ -0,0 +1,7 @@
+import { Message } from '@vuepress/helper/client'
+
+const message = new Message()
+
+export function useMessage() {
+  return message
+}