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>

11
app/components/main/footer.vue
View File

@@ -15,8 +15,8 @@
<!-- 备案信息 -->
<p v-if="contact?.beian" class="text-text-muted text-xs m-0">
<NuxtLink
:to="contact.beianLink || '/'"
class="opacity-85 transition-all duration-200 hover:text-primary hover:opacity-100">
:to="contact.beianLink || 'https://beian.miit.gov.cn/'"
class="opacity-85 transition-all duration-200 hover:text-accent hover:opacity-100">
{{ contact.beian }}
</NuxtLink>
</p>
@@ -49,6 +49,13 @@
>
</p>
<p>
© {{ new Date(siteConfig.siteMeta.startTime).getFullYear() }}-{{ new Date().getFullYear() }}
{{ siteConfig.siteMeta.author }} |
<NuxtLink to="/rss.xml" class="text-primary">RSS</NuxtLink> |
<NuxtLink to="/sitemap.xml" class="text-primary">Sitemap</NuxtLink>.
</p>
<!-- eslint-disable-next-line vue/no-v-html -->
<div v-if="contact?.customHtml" v-html="contact.customHtml" />
</footer>

95
app/components/main/header.vue
View File

@@ -173,7 +173,7 @@ watch(
<li v-for="link in siteConfig.navbar.links" :key="link.path">
<NuxtLink
:to="link.path"
class="relative h-12 px-6 rounded-full transition-all duration-200 flex items-center text-zinc-700 dark:text-zinc-200"
class="relative h-12 px-3 rounded-full transition-all duration-200 flex items-center text-zinc-700 dark:text-zinc-200"
:class="{
'bg-white dark:bg-slate-800 shadow-sm font-bold': isActive(link.path),
'hover:bg-zinc-100 dark:hover:bg-white/10': !isActive(link.path),
@@ -344,4 +344,97 @@ watch(
.icon-svg.opacity-0 {
pointer-events: none;
}
/* 调整顶栏logo和主题切换键距离屏幕两端的距离 */
header .absolute.left-0 {
margin-left: -15px; /* 减小左侧距离 */
}
header .absolute.right-0 {
margin-right: -15px; /* 减小右侧距离 */
}
/* 强制显示桌面端navbar，隐藏移动端 */
@media (min-width: 769px) and (max-width: 1023px) {
/* 显示桌面端navbar，隐藏移动端 */
.hidden.lg\:flex.items-center.justify-center.w-full.relative.h-14 {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.lg\:hidden {
display: none !important;
}
/* logo和右侧按钮绝对定位，navbar居中 */
header .absolute.left-0 {
position: absolute !important;
left: 0.5rem !important;
margin-left: 0 !important;
z-index: 10;
height: 2.5rem !important;
display: flex !important;
align-items: center !important;
}
header .absolute.left-0 .h-14 {
height: 2.5rem !important;
min-width: 2.5rem !important;
width: auto !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
display: flex !important;
align-items: center !important;
}
header .absolute.left-0 .h-12 {
height: 2.5rem !important;
font-size: 1rem !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
display: flex !important;
align-items: center !important;
}
header .absolute.right-0 {
position: absolute !important;
right: 0.5rem !important;
margin-right: 0 !important;
z-index: 10;
}
/* 缩小主题切换和线路按钮尺寸 */
header .absolute.right-0 .h-14,
header .absolute.right-0 .w-14 {
height: 2.5rem !important;
width: 2.5rem !important;
}
header .absolute.right-0 .gap-3 {
gap: 0.5rem !important;
}
/* navbar最大宽度，居中显示 */
.inline-flex.items-center.h-14 {
margin-left: auto !important;
margin-right: auto !important;
height: 2.5rem !important;
border-radius: 1.5rem !important;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
min-width: 0;
max-width: 700px !important;
justify-content: center !important;
}
/* 缩小ul间距和字体 */
.inline-flex.items-center.h-14 ul.flex.items-center.space-x-1\.5.text-lg {
gap: 0.25rem !important;
font-size: 1rem !important;
}
/* 缩小每个链接的padding和高度 */
.inline-flex.items-center.h-14 ul.flex.items-center li .h-12 {
height: 2rem !important;
}
.inline-flex.items-center.h-14 ul.flex.items-center li .px-3 {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
/* 缩小图标和文字间距 */
.inline-flex.items-center.h-14 ul.flex.items-center li .mr-2 {
margin-right: 0.25rem !important;
}
}
</style>