45 lines
1.5 KiB
Vue
45 lines
1.5 KiB
Vue
<template>
|
||
<h1
|
||
:id
|
||
:class="['scroll-m-20 font-extrabold tracking-tight', themeSizeClass]"
|
||
:style="themeTextShadowStyle"
|
||
>
|
||
<NuxtLink
|
||
v-if="generate"
|
||
:to="`#${id}`"
|
||
>
|
||
<slot />
|
||
</NuxtLink>
|
||
<slot v-else />
|
||
</h1>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const { id } = defineProps<{ id?: string }>()
|
||
|
||
const { headings } = useRuntimeConfig().public.mdc
|
||
const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h1)))
|
||
|
||
// 读取主题，按主题做轻量风格差异：
|
||
// - classic: 无阴影，正常字号
|
||
// - elegant: 有文字阴影，正常字号
|
||
// - minimal: 无阴影，较小字号
|
||
const { selectedTheme } = useTheme()
|
||
|
||
// 这个计算属性 themeSizeClass 用于根据当前主题（selectedTheme）动态设置 h1 标题的字号样式：
|
||
// - 如果主题是 minimal，则使用较小字号 'text-2xl lg:text-3xl'
|
||
// - 否则（classic 或 elegant），使用较大字号 'text-3xl lg:text-4xl'
|
||
const themeSizeClass = computed(() => {
|
||
return selectedTheme.value === 'classic'
|
||
? 'text-2xl lg:text-3xl underline decoration-3 decoration-primary dark:decoration-gray-700 underline-offset-8 mb-3'
|
||
: 'text-3xl lg:text-4xl'
|
||
})
|
||
|
||
const themeTextShadowStyle = computed(() => {
|
||
if (selectedTheme.value === 'elegant') {
|
||
return { textShadow: '0 2px 8px rgba(0,0,0,0.15)' }
|
||
}
|
||
return { textShadow: 'none' }
|
||
})
|
||
</script>
|