更新前台UI设计

src/layouts/MainLayout.vue

@@ -1,14 +1,31 @@
 <template>
-  <div class="min-h-screen bg-gray-50">
+  <div :class="['min-h-screen transition-colors duration-300', themeClasses]">
+    <!-- 头部导航 -->
     <Header />
-    <main>
+    
+    <!-- 主要内容区域 -->
+    <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>