mengstack-website/.vitepress/theme/Layout.vue
MengStack Dev a09d805bd9 feat: 三层明暗模式 + 移动端代码块适配
- 新增 useTheme.js 单例主题管理器:用户手动选择 > 系统偏好 > 时间自动切换(8AM/6PM)
- config.ts 添加 head 内联脚本防止主题闪烁
- 移动端导航按钮右对齐(margin-left:auto)
- 首页和文档页代码块移动端溢出修复
2026-10-03 01:42:24 +08:00

34 lines
833 B
Vue

<script setup>
import DefaultTheme from 'vitepress/theme'
import { useRoute } from 'vitepress'
import { computed, watch, onMounted, onUnmounted } from 'vue'
import Home from './Home.vue'
import { initThemeManager } from './useTheme'
initThemeManager()
const route = useRoute()
const isHome = computed(() => route.path === '/' || route.path === '/index.html')
function toggleHomeLayout(val) {
if (typeof document !== 'undefined') {
document.documentElement.classList.toggle('home-layout', val)
}
}
watch(isHome, toggleHomeLayout, { immediate: true })
onMounted(() => toggleHomeLayout(isHome.value))
onUnmounted(() => {
if (typeof document !== 'undefined') {
document.documentElement.classList.remove('home-layout')
}
})
</script>
<template>
<Home v-if="isHome" />
<DefaultTheme.Layout v-else />
</template>