55 lines
1.9 KiB
Vue
55 lines
1.9 KiB
Vue
<template>
|
||
<h2
|
||
:id
|
||
:class="['scroll-m-20 inline-block text-white font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10 mb-2', themeSizeClass, themePaddingClass]"
|
||
:style="h2Style"
|
||
>
|
||
<NuxtLink
|
||
v-if="id && generate"
|
||
:to="`#${id}`"
|
||
class="no-underline"
|
||
>
|
||
<slot />
|
||
</NuxtLink>
|
||
<slot v-else />
|
||
</h2>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const { id } = defineProps<{ id?: string }>()
|
||
|
||
// 读取主题，用主题主色 + 圆角变量渲染带底色的 H2
|
||
const { selectedTheme, selectedThemeColor, customColor, themeColors } = 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-xl lg:text-1xl '
|
||
: 'text-1xl lg:text-2xl'
|
||
})
|
||
|
||
// 经典：更贴合文字（小内边距）；优雅/简洁：略大（更舒展）
|
||
const themePaddingClass = computed(() => {
|
||
return selectedTheme.value === 'classic'
|
||
? 'px-1 py-0.5'
|
||
: 'px-5 py-2'
|
||
})
|
||
|
||
const { headings } = useRuntimeConfig().public.mdc
|
||
const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
|
||
|
||
// 背景颜色取主题主色；若为自定义颜色，则取 customColor
|
||
const primaryHex = computed(() => {
|
||
if (selectedThemeColor.value === 'custom') return customColor.value
|
||
const found = themeColors.find(c => c.value === selectedThemeColor.value)
|
||
return found?.color || '#3B82F6' // fallback 经典蓝
|
||
})
|
||
|
||
const h2Style = computed(() => ({
|
||
backgroundColor: primaryHex.value,
|
||
borderRadius: 'var(--ui-card-radius)'
|
||
}))
|
||
</script>
|