AIGC/demo/frontend/src/App.vue

<template>
  <div id="app" :data-route="route.name">
    <!-- 导航栏 - 根据路由条件显示 -->
    <NavBar v-if="shouldShowNavBar" />
    
    <!-- 主要内容区域 -->
    <main :class="{ 'with-navbar': shouldShowNavBar }">
      <router-view />
    </main>
    
    <!-- 页脚 - 根据路由条件显示 -->
    <Footer v-if="shouldShowFooter" />
  </div>
</template>

<script setup>
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import NavBar from '@/components/NavBar.vue'
import Footer from '@/components/Footer.vue'

const route = useRoute()

// 计算是否显示导航栏和页脚
const shouldShowNavBar = computed(() => {
  // 登录和注册页面不显示导航栏
  return !['login', 'register'].includes(route.name)
})

const shouldShowFooter = computed(() => {
  // 登录和注册页面不显示页脚
  return !['login', 'register'].includes(route.name)
})

// 监听路由变化，动态设置页面样式
watch(route, (newRoute) => {
  console.log('路由变化:', newRoute.name)
}, { immediate: true })

console.log('App.vue 加载成功')
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f5f5f5;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

main {
  flex: 1;
  padding: 0;
  position: relative;
}

main.with-navbar {
  padding-top: 0; /* NavBar 是 fixed 定位，不需要 padding-top */
}

/* 确保登录页面全屏显示 */
#app .login-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
}

/* ========== 页面特殊样式 ========== */

/* 欢迎页面 - 彩虹渐变背景 */
#app[data-route="Welcome"] {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3);
  background-size: 400% 400%;
  animation: rainbowShift 8s ease-in-out infinite;
}

@keyframes rainbowShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 首页 - 科技感蓝色渐变 */
#app[data-route="Home"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
}

#app[data-route="Home"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
  animation: homeGlow 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes homeGlow {
  0% { opacity: 0.3; }
  100% { opacity: 0.7; }
}

/* 个人主页 - 深色科技风 */
#app[data-route="Profile"] {
  background: #0a0a0a;
  color: white;
}

#app[data-route="Profile"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 10% 20%, rgba(64, 158, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(103, 194, 58, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(230, 162, 60, 0.05) 0%, transparent 50%);
  animation: profileGlow 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes profileGlow {
  0% { opacity: 0.3; }
  100% { opacity: 0.6; }
}

/* 订单管理 - 商务紫色渐变 */
#app[data-route="Orders"] {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

#app[data-route="Orders"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  animation: ordersPulse 5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes ordersPulse {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0.6; transform: scale(1.02); }
}

/* 支付记录 - 金色渐变 */
#app[data-route="Payments"] {
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

#app[data-route="Payments"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 215, 0, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 165, 0, 0.1) 0%, transparent 50%);
  animation: paymentShine 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes paymentShine {
  0% { opacity: 0.4; }
  100% { opacity: 0.8; }
}

/* 我的作品 - 创意绿色渐变 */
#app[data-route="MyWorks"] {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

#app[data-route="MyWorks"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 40% 60%, rgba(168, 237, 234, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 60% 40%, rgba(254, 214, 227, 0.3) 0%, transparent 50%);
  animation: worksFloat 7s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes worksFloat {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-15px) rotate(2deg); }
}

/* 文生视频 - 蓝色科技风 */
#app[data-route="TextToVideo"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#app[data-route="TextToVideo"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.3) 0%, transparent 50%);
  animation: textVideoFlow 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes textVideoFlow {
  0% { opacity: 0.3; }
  100% { opacity: 0.7; }
}

/* 图生视频 - 紫色梦幻风 */
#app[data-route="ImageToVideo"] {
  background: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%);
}

#app[data-route="ImageToVideo"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(168, 192, 255, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(63, 43, 150, 0.3) 0%, transparent 50%);
  animation: imageVideoDream 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes imageVideoDream {
  0% { opacity: 0.2; transform: scale(1); }
  100% { opacity: 0.6; transform: scale(1.05); }
}

/* 分镜视频 - 橙色活力风 */
#app[data-route="StoryboardVideo"] {
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

#app[data-route="StoryboardVideo"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 25% 75%, rgba(255, 154, 158, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 75% 25%, rgba(254, 207, 239, 0.3) 0%, transparent 50%);
  animation: storyboardBounce 5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes storyboardBounce {
  0% { opacity: 0.3; transform: translateY(0px); }
  100% { opacity: 0.7; transform: translateY(-10px); }
}

/* 会员订阅 - 奢华金色 */
#app[data-route="Subscription"] {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

#app[data-route="Subscription"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(252, 182, 159, 0.3) 0%, transparent 50%);
  animation: subscriptionLuxury 6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes subscriptionLuxury {
  0% { opacity: 0.4; }
  100% { opacity: 0.8; }
}

/* 管理员页面 - 深色专业风 */
#app[data-route="AdminDashboard"],
#app[data-route="AdminOrders"],
#app[data-route="AdminUsers"] {
  background: #1a1a1a;
  color: white;
}

#app[data-route="AdminDashboard"]::before,
#app[data-route="AdminOrders"]::before,
#app[data-route="AdminUsers"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 10% 10%, rgba(0, 150, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(255, 0, 150, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 255, 150, 0.05) 0%, transparent 50%);
  animation: adminTech 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes adminTech {
  0% { opacity: 0.2; }
  100% { opacity: 0.5; }
}

/* 注册页面 - 清新绿色渐变 */
#app[data-route="Register"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#app[data-route="Register"]::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
  animation: registerFloat 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes registerFloat {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-10px) rotate(1deg); }
}

/* 内容层级确保在所有背景效果之上 */
#app main > * {
  position: relative;
  z-index: 2;
}

/* 响应式设计 */
@media (max-width: 768px) {
  main {
    padding: 0;
  }
  
  body {
    font-size: 14px;
  }
  
  /* 移动端减少动画效果 */
  #app[data-route]::before {
    animation-duration: 10s;
  }
}

/* Element Plus 样式覆盖 */
.el-button {
  font-family: inherit;
}

.el-input {
  font-family: inherit;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>