From 9196d622212eda260ed73f5fd732d85a08135ff7 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Mon, 21 Apr 2025 00:56:04 +0800
Subject: [PATCH] docs: update layout slots doc

---
 docs/notes/theme/guide/custom/slots.md        |  4 +++
 .../layout-slots/docs/.vuepress/config.ts     |  2 +-
 .../.vuepress/theme/components/SlotDemo.vue   | 26 +++++++++++++++++++
 .../.vuepress/theme/composables/message.ts    |  7 +++++
 4 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 examples/layout-slots/docs/.vuepress/theme/composables/message.ts

diff --git a/docs/notes/theme/guide/custom/slots.md b/docs/notes/theme/guide/custom/slots.md
index 0ea30d98..9e1c108a 100644
--- a/docs/notes/theme/guide/custom/slots.md
+++ b/docs/notes/theme/guide/custom/slots.md
@@ -90,6 +90,10 @@ export default defineClientConfig({
 
 ## 插槽
 
+::: info
+您可以预览 <https://plume-layout-slots.netlify.app> 以查看所有可用的插槽在站点中的位置。
+:::
+
 ### `<Layout />` 插槽
 
 - 当 `pageLayout: doc` 时：
diff --git a/examples/layout-slots/docs/.vuepress/config.ts b/examples/layout-slots/docs/.vuepress/config.ts
index f6ea78bd..4bd3f514 100644
--- a/examples/layout-slots/docs/.vuepress/config.ts
+++ b/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',
diff --git a/examples/layout-slots/docs/.vuepress/theme/components/SlotDemo.vue b/examples/layout-slots/docs/.vuepress/theme/components/SlotDemo.vue
index 04c49732..2060d92b 100644
--- a/examples/layout-slots/docs/.vuepress/theme/components/SlotDemo.vue
+++ b/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>
diff --git a/examples/layout-slots/docs/.vuepress/theme/composables/message.ts b/examples/layout-slots/docs/.vuepress/theme/composables/message.ts
new file mode 100644
index 00000000..82e0175c
--- /dev/null
+++ b/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
+}