nl_cms-view/src/layouts/MainLayout.vue

<template>
  <div :class="['min-h-screen transition-colors duration-300', themeClasses]">
    <!-- 头部导航 -->
    <Header />
    
    <!-- 主要内容区域 -->
    <main class="pt-16">
      <router-view />
    </main>
    
    <!-- 底部 -->
    <Footer />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useThemeStore } from '@/stores/theme'
import Header from './Header.vue'
import Footer from './Footer.vue'

const themeStore = useThemeStore()

const themeClasses = computed(() => {
  if (themeStore.isDark) {
    return 'bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white'
  } else {
    return 'bg-gradient-to-br from-gray-50 via-blue-50 to-purple-50 text-gray-900'
  }
})
</script>