estel/estel_docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改分享到微信按钮至HeaderLinks

Browse Source 
组件.  并修改博客文章头样式,加入日期显示
This commit is contained in:
estel
2025-08-10 16:01:03 +08:00
parent 85863cb249
commit c557e6980c
5 changed files with 117 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/components/docs/DocsPageHeaderLinks.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useClipboard } from '@vueuse/core' import { useClipboard } from '@vueuse/core'
import WxShare from '~/components/shared/wxShare.vue'
const route = useRoute() const route = useRoute()
const toast = useToast() const toast = useToast()
@@ -12,6 +13,11 @@ const origin = computed(() => requestURL.origin)
const mdcLink = computed(() => `${origin.value}${decodeURIComponent(route.path)}`) const mdcLink = computed(() => `${origin.value}${decodeURIComponent(route.path)}`)
const markdownLink = computed(() => `${origin.value}/raw${decodeURIComponent(route.path)}.md`) const markdownLink = computed(() => `${origin.value}/raw${decodeURIComponent(route.path)}.md`)
const enableWxShare = ref(false)
const shareTitle = computed(() => (import.meta.client ? (document.title || 'Estel Docs') : ''))
const shareDesc = computed(() => (import.meta.client ? (document.title || 'Estel Docs') : ''))
const items = [ const items = [
{ {
label: '复制链接', label: '复制链接',
@@ -26,6 +32,19 @@ const items = [
}) })
} }
}, },
{
label: '分享到微信',
icon: 'simple-icons:wechat',
onSelect() {
enableWxShare.value = true
toast.add({
title: '已为本页配置微信分享，请在微信内点击右上角分享',
icon: 'lucide-check-circle',
color: 'success'
})
}
},
{ {
label: '查看 Markdown', label: '查看 Markdown',
icon: 'simple-icons:markdown', icon: 'simple-icons:markdown',
@@ -79,4 +98,14 @@ const items = [
/> />
</UDropdownMenu> </UDropdownMenu>
</UButtonGroup> </UButtonGroup>
<!-- 懒加载式挂载微信分享逻辑，避免在非微信环境造成无谓请求 -->
<ClientOnly>
<WxShare
v-if="enableWxShare"
:url="mdcLink"
:title="shareTitle"
:desc="shareDesc"
/>
</ClientOnly>
</template> </template>

46
app/layouts/default.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
<!-- 移动端遮罩层 -->
<div
v-if="isSidebarOpen"
class="fixed inset-0 bg-gray-900/50 z-40 lg:hidden"
@click="isSidebarOpen = false"
/>
<!-- 侧边栏 -->
<DocsSidebar
class="fixed top-0 bottom-0 z-50 transition-transform duration-300 ease-in-out"
:class="isSidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
/>
<!-- Right Content Area -->
<div class="flex-1 lg:ml-64 flex flex-col min-w-0">
<!-- Fixed Header -->
<DocsHeader
:is-sidebar-open="isSidebarOpen"
:toggle-sidebar="toggleSidebar"
/>
<!-- Main Content -->
<UMain class="flex-1 overflow-y-auto">
<div class="">
<slot />
</div>
</UMain>
<!-- Footer -->
<AppFooter />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isSidebarOpen = ref(false)
// 切换侧边栏
const toggleSidebar = () => {
isSidebarOpen.value = !isSidebarOpen.value
}
</script>

2
app/layouts/docs.vue
View File

@@ -23,7 +23,7 @@
<!-- Main Content --> <!-- Main Content -->
<UMain class="flex-1 overflow-y-auto"> <UMain class="flex-1 overflow-y-auto">
<div class="mx-auto px-4 sm:px-6 lg:px-8 py-6"> <div class="mx-auto px-4 sm:px-6 lg:px-8">
<slot /> <slot />
</div> </div>
</UMain> </UMain>

50
app/pages/blog/[...slug].vue
View File

@@ -70,6 +70,7 @@ defineOgImageComponent('Docs', {
headline: headline.value headline: headline.value
}) })
const editLink = computed(() => { const editLink = computed(() => {
if (!appConfig.github) { if (!appConfig.github) {
return return
@@ -99,14 +100,14 @@ const links = computed(() => {
return [...links, ...(appConfig.toc?.bottom?.links || [])].filter(Boolean) return [...links, ...(appConfig.toc?.bottom?.links || [])].filter(Boolean)
}) })
// ===== 微信分享（测试按钮用）===== // // ===== 微信分享（测试按钮用）=====
const wxShareActive = ref(false) // const wxShareActive = ref(false)
// const contentRoot = ref<HTMLElement | null>(null) // // const contentRoot = ref<HTMLElement | null>(null)
const shareLink = computed(() => 'https://lijue.me' + decodeURIComponent(path.value)) // const shareLink = computed(() => 'https://lijue.me' + decodeURIComponent(path.value))
const shareTitle = computed(() => title) // const shareTitle = computed(() => title)
const shareDesc = computed(() => description || title) // const shareDesc = computed(() => description || title)
const shareImg = page?.value?.img // const shareImg = page?.value?.img
// const shareImg = ref<string>('/images/default-blog.jpg') // const shareImg = ref<string>('/images/default-blog.jpg')
// onMounted(() => { // onMounted(() => {
@@ -118,17 +119,17 @@ const shareImg = page?.value?.img
// } // }
// }) // })
// Toast：点击测试分享后给出指引 // // Toast：点击测试分享后给出指引
const toast = useToast() // const toast = useToast()
function handleShareClick() { // function handleShareClick() {
wxShareActive.value = true // wxShareActive.value = true
toast.add({ // toast.add({
title: '已获取分享接口', // title: '已获取分享接口',
description: '点击右上角分享吧', // description: '点击右上角分享吧',
duration: 3000, // duration: 3000,
icon: 'i-lucide-share-2' // icon: 'i-lucide-share-2'
}) // })
} // }
</script> </script>
<template> <template>
@@ -144,6 +145,7 @@ function handleShareClick() {
wrapper: 'flex-row items-center flex-wrap justify-between ' wrapper: 'flex-row items-center flex-wrap justify-between '
}" }"
> >
<span v-if="page" class="text-sm text-pretty text-muted mt-4"> {{ page.date }} </span>
<template #links> <template #links>
<UButton <UButton
v-for="(link, index) in page.links" v-for="(link, index) in page.links"
@@ -178,7 +180,7 @@ function handleShareClick() {
编辑页面 编辑页面
</UButton> </UButton>
or or
<!-- <UButton <UButton
variant="link" variant="link"
color="neutral" color="neutral"
:to="`${appConfig.github.url}/issues/new/choose`" :to="`${appConfig.github.url}/issues/new/choose`"
@@ -187,9 +189,9 @@ function handleShareClick() {
:ui="{ leadingIcon: 'size-4' }" :ui="{ leadingIcon: 'size-4' }"
> >
提交问题 提交问题
</UButton> --> </UButton>
<UButton <!-- <UButton
variant="link" variant="link"
color="neutral" color="neutral"
icon="lucide-share-2" icon="lucide-share-2"
@@ -197,19 +199,19 @@ function handleShareClick() {
@click="handleShareClick()" @click="handleShareClick()"
> >
微信分享 微信分享
</UButton> </UButton> -->
</div> </div>
</USeparator> </USeparator>
<UContentSurround :surround="surround" /> <UContentSurround :surround="surround" />
<!-- 激活后挂载分享组件（无可视内容） --> <!-- 激活后挂载分享组件（无可视内容）
<SharedWxShare <SharedWxShare
v-if="wxShareActive" v-if="wxShareActive"
:url="shareLink" :url="shareLink"
:title="shareTitle" :title="shareTitle"
:desc="shareDesc" :desc="shareDesc"
:img-url="shareImg" :img-url="shareImg"
/> /> -->
</UPageBody> </UPageBody>
<template <template

30
app/pages/index.vue
View File

@@ -2,7 +2,7 @@
import { useSeoMeta } from '#imports' import { useSeoMeta } from '#imports'
definePageMeta({ definePageMeta({
layout: 'docs' layout: 'default'
}) })
useSeoMeta({ useSeoMeta({
@@ -14,18 +14,18 @@ useSeoMeta({
</script> </script>
<template> <template>
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900"> <div class="px-4 py-3 md:py-6 bg-gradient-to-b from-blue-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
<!-- Hero 区域 --> <!-- Hero 区域 -->
<div class="max-w-6xl mx-auto px-4 py-20"> <div class="max-w-6xl mx-auto py-1">
<!-- 主要内容 --> <!-- 主要内容 -->
<div class="text-center mb-16"> <div class="text-center mb-8 md:mb-16">
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6"> <h1 class="text-4xl md:text-7xl font-bold text-gray-900 dark:text-white mb-3 md:mb-6">
Estel Hub Estel Hub
</h1> </h1>
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto"> <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-4 md:mb-8 max-w-3xl mx-auto">
简约而强大的文档系统,衍生而出Blog系统,为技术分享而生 简约而强大的文档系统,衍生而出Blog系统,为技术分享而生
</p> </p>
<p class="text-lg text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto"> <p class="md:text-lg text-sm text-gray-500 dark:text-gray-400 max-w-2xl mx-auto">
基于 Nuxt 4 构建，支持 Markdown 文档管理和博客发布，提供完整的现代化内容管理解决方案 基于 Nuxt 4 构建，支持 Markdown 文档管理和博客发布，提供完整的现代化内容管理解决方案
</p> </p>
</div> </div>
@@ -35,10 +35,10 @@ useSeoMeta({
<!-- 文档系统 --> <!-- 文档系统 -->
<NuxtLink <NuxtLink
to="/docs" to="/docs"
class="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700" class="group bg-white dark:bg-gray-800 rounded-2xl p-3 md:p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
> >
<div class="text-center"> <div class="text-center">
<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300"> <div class="w-12 h-12 md:w-16 md:h-16 bg-blue-100 dark:bg-blue-900 rounded-xl flex items-center justify-center mx-auto mb-3 md:mb-6 group-hover:scale-110 transition-transform duration-300">
<UIcon <UIcon
name="lucide-book-open" name="lucide-book-open"
class="text-3xl text-blue-600 dark:text-blue-400" class="text-3xl text-blue-600 dark:text-blue-400"
@@ -47,8 +47,8 @@ useSeoMeta({
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4"> <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
文档系统 文档系统
</h2> </h2>
<p class="text-gray-600 dark:text-gray-300 mb-6"> <p class="text-gray-600 dark:text-gray-300 mb-3 md:mb-6">
技术文档、API 文档、使用指南，一切尽在掌握 技术文档、API 文档、使用指南
</p> </p>
<div class="flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors"> <div class="flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors">
<span class="mr-2">开始阅读</span> <span class="mr-2">开始阅读</span>
@@ -63,10 +63,10 @@ useSeoMeta({
<!-- 博客系统 --> <!-- 博客系统 -->
<NuxtLink <NuxtLink
to="/blog" to="/blog"
class="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700" class="group bg-white dark:bg-gray-800 rounded-2xl p-3 md:p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
> >
<div class="text-center"> <div class="text-center">
<div class="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300"> <div class="w-12 md:w-16 h-12 md:h-16 bg-green-100 dark:bg-green-900 rounded-xl flex items-center justify-center mx-auto mb-3 md:mb-6 group-hover:scale-110 transition-transform duration-300">
<UIcon <UIcon
name="lucide-pen-tool" name="lucide-pen-tool"
class="text-3xl text-green-600 dark:text-green-400" class="text-3xl text-green-600 dark:text-green-400"
@@ -75,8 +75,8 @@ useSeoMeta({
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4"> <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
博客系统 博客系统
</h2> </h2>
<p class="text-gray-600 dark:text-gray-300 mb-6"> <p class="text-gray-600 dark:text-gray-300 mb-3 md:mb-6">
技术分享、心得体会、生活感悟，记录每一个精彩瞬间 技术分享、心得体会、生活感悟
</p> </p>
<div class="flex items-center justify-center text-green-600 dark:text-green-400 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors"> <div class="flex items-center justify-center text-green-600 dark:text-green-400 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors">
<span class="mr-2">开始阅读</span> <span class="mr-2">开始阅读</span>