添加微信分享功能

app/pages/blog/[...slug].vue

@@ -98,6 +98,37 @@ const links = computed(() => {
 
   return [...links, ...(appConfig.toc?.bottom?.links || [])].filter(Boolean)
 })
+
+// ===== 微信分享（测试按钮用）=====
+const wxShareActive = ref(false)
+// const contentRoot = ref<HTMLElement | null>(null)
+
+const shareLink = 'https://lijue.me' + decodeURIComponent(path.value)
+const shareTitle = computed(() => title)
+const shareDesc = computed(() => description || title)
+const shareImg = page?.value?.img
+// const shareImg = ref<string>('/images/default-blog.jpg')
+
+// onMounted(() => {
+//   // 从正文中抓取第一张图片作为分享图
+//   const el = contentRoot.value
+//   const firstImg = el?.querySelector('img') as HTMLImageElement | null
+//   if (firstImg?.src) {
+//     shareImg.value = firstImg.src
+//   }
+// })
+
+// Toast：点击测试分享后给出指引
+const toast = useToast()
+function handleShareClick() {
+  wxShareActive.value = true
+  toast.add({
+    title: '已获取分享接口',
+    description: '点击右上角分享吧',
+    duration: 3000,
+    icon: 'i-lucide-share-2'
+  })
+}
 </script>
 
 <template>
@@ -147,7 +178,7 @@ const links = computed(() => {
             编辑页面
           </UButton>
           or
-          <UButton
+          <!-- <UButton
             variant="link"
             color="neutral"
             :to="`${appConfig.github.url}/issues/new/choose`"
@@ -156,10 +187,29 @@ const links = computed(() => {
             :ui="{ leadingIcon: 'size-4' }"
           >
             提交问题
+          </UButton> -->
+
+          <UButton
+            variant="link"
+            color="neutral"
+            icon="lucide-share-2"
+            :ui="{ leadingIcon: 'size-4' }"
+            @click="handleShareClick()"
+          >
+            微信分享
           </UButton>
         </div>
       </USeparator>
       <UContentSurround :surround="surround" />
+
+      <!-- 激活后挂载分享组件（无可视内容） -->
+      <SharedWxShare
+        v-if="wxShareActive"
+        :url="shareLink"
+        :title="shareTitle"
+        :desc="shareDesc"
+        :img-url="shareImg"
+      />
     </UPageBody>
 
     <template