RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Rhen Cloud
2026-01-03 21:21:53 +08:00
parent 9aace76a1a
commit 77e1d5ed9e
6 changed files with 273 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
app/components/blog/Toc.vue
View File

@@ -7,8 +7,11 @@ interface TocLink {
const props = defineProps<{
links: TocLink[];
isMobile?: boolean;
}>();
const emit = defineEmits(["close"]);
const activeId = ref("");
const flattenLinks = (links: TocLink[]) => {
@@ -44,9 +47,9 @@ onMounted(() => {
</script>
<template>
<div class="w-full lg:w-1/3 hidden lg:block sticky top-28">
<div v-if="!isMobile" class="w-full lg:w-1/3 hidden lg:block sticky top-28">
<div
class="h-fit max-h-[calc(100vh-8rem)] overflow-y-auto bg-white/40 dark:bg-slate-900/40 backdrop-blur-md border border-white/20 dark:border-white/5 p-6 rounded-3xl shadow-sm">
class="h-fit max-h-[calc(100vh-8rem)] overflow-y-auto bg-white/40 dark:bg-slate-800/40 backdrop-blur-md border border-white/20 dark:border-white/5 p-6 rounded-3xl shadow-sm">
<h3
class="text-xs font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mb-4 flex items-center gap-2">
<Icon name="heroicons:list-bullet" class="w-4 h-4" />
@@ -98,4 +101,70 @@ onMounted(() => {
</nav>
</div>
</div>
<div v-else class="w-full">
<div class="p-6">
<div class="flex items-center justify-between mb-4">
<h3
class="text-xs font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500 flex items-center gap-2">
<Icon name="heroicons:list-bullet" class="w-4 h-4" />
Table Of Content
</h3>
<button
class="p-2 hover:bg-zinc-100 dark:hover:bg-white/5 rounded-full transition-colors"
@click="emit('close')">
<Icon name="heroicons:x-mark" class="w-5 h-5 text-zinc-500" />
</button>
</div>
<div class="max-h-[60vh] overflow-y-auto pr-2">
<nav class="space-y-1">
<template v-for="link in props.links" :key="link.id">
<NuxtLink
:to="`#${link.id}`"
class="block text-sm py-1.5 px-3 rounded-xl transition-all duration-200"
:class="[
activeId === link.id
? 'text-violet-600 dark:text-violet-400 bg-violet-500/10 font-bold translate-x-1'
: 'text-zinc-600 dark:text-zinc-400 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-500/5',
]"
@click="emit('close')">
{{ link.text }}
</NuxtLink>
<div v-if="link.children" class="ml-3 space-y-1">
<template v-for="child in link.children" :key="child.id">
<NuxtLink
:to="`#${child.id}`"
class="block text-xs py-1.5 px-3 rounded-xl transition-all duration-200"
:class="[
activeId === child.id
? 'text-violet-600 dark:text-violet-400 bg-violet-500/10 font-bold translate-x-1'
: 'text-zinc-500 dark:text-zinc-500 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-500/5',
]"
@click="emit('close')">
{{ child.text }}
</NuxtLink>
<div v-if="child.children" class="ml-3 space-y-1">
<NuxtLink
v-for="grandchild in child.children"
:key="grandchild.id"
:to="`#${grandchild.id}`"
class="block text-xs py-1.5 px-3 rounded-xl transition-all duration-200"
:class="[
activeId === grandchild.id
? 'text-violet-600 dark:text-violet-400 bg-violet-500/10 font-bold translate-x-1'
: 'text-zinc-400 dark:text-zinc-600 hover:text-violet-600 dark:hover:text-violet-400 hover:bg-violet-500/5',
]"
@click="emit('close')">
{{ grandchild.text }}
</NuxtLink>
</div>
</template>
</div>
</template>
</nav>
</div>
</div>
</div>
</template>