deotalandAi/apps/frontend/src/App.vue

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import MainLayout from '@/components/layout/MainLayout.vue'
import AppHeader from '@/components/layout/AppHeader.vue'
import AppSidebar from '@/components/layout/AppSidebar.vue'
import { useAuthStore } from '@/stores/auth';
const authStore = useAuthStore();
authStore.updateUserInfo()
const route = useRoute()
// 判断当前是否为登录页面
const isLoginPage = computed(() => route.path === '/login')
// 判断当前是否为全屏页面
const isFullScreenPage = computed(() => route.meta.fullScreen)
// 判断当前是否为首页
const isHomePage = computed(() => route.path === '/')
// Reactive theme state
const themeState = ref(false)
// Initialize theme state from localStorage and DOM
function initializeTheme() {
  if (typeof window !== 'undefined') {
    const savedTheme = localStorage.getItem('theme')
    const hasDarkClass = document.documentElement.classList.contains('dark')
    if (savedTheme === 'dark') {
      document.documentElement.classList.add('dark')
      themeState.value = true
    } else if (savedTheme === 'light') {
      document.documentElement.classList.remove('dark')
      themeState.value = false
    } else {
      // No saved preference, use current state
      themeState.value = hasDarkClass
    }
  }
}
const loading = ref(false);
const qmLoading = ref(false);
const closeMethods = {
  close: ()=>{
   loading.value = false
   qmLoading.value = false;
  }
}
window.setElLoading = (qp=false)=>{
  if(qp){
    qmLoading.value = true
  }else{
    loading.value = true
  }
  window.closeMethods = closeMethods;
  return closeMethods
}
window.closeMethods = closeMethods;
// Initialize on component mount
onMounted(() => {
  initializeTheme()
})
</script>

<template>
  <div v-if="!isHomePage" id="app-container" :class="{ 
    'login-mode': isLoginPage, 
    'fullscreen-mode': isFullScreenPage,
    'homepage-mode': isHomePage
  }">
    <!-- <div v-if="qmLoading" class="sidebar-overlay" :class="{ 'sidebar-overlay-active': qmLoading }"></div> -->
    <DtLoadingCom v-if="qmLoading" />
    <!-- 登录页面全屏显示 -->
    <main style="position: relative;height: 100%;width: 100%;" v-if="isLoginPage">
    <!-- <div v-if="loading" class="sidebar-overlay" :class="{ 'sidebar-overlay-active': loading }"></div> -->
     <DtLoadingCom v-if="loading" />
      <router-view />
    </main>
    <!-- 全屏页面（如创建项目） -->
    <main v-else-if="isFullScreenPage" class="fullscreen-content">
      <DtLoadingCom v-if="loading" />
    <!-- <div class="sidebar-overlay" :class="{ 'sidebar-overlay-active': loading }"></div> -->
      <router-view />
    </main>
    <!-- 应用内页面使用布局组件 -->
     <div v-else style="position: relative;height: 100%;">
      <MainLayout :loading="loading" >
      <template #header>
        <AppHeader />
      </template>
      <template #sidebar>
        <AppSidebar />
      </template>
      <template #default>
        <router-view />
      </template>
    </MainLayout>
     </div>
  </div>
  <div  v-else>
    <router-view />
  </div>
</template>
<style>
*{
box-sizing: border-box;
outline:0;
/* margin: 0;
padding: 0; */
}
body,html{
  width: 100%;
  height: 100%;
}
#app,#app-container{
  width: 100%;
  height: 100%;
}
#nprogress .bar {
  /* 自定义加载条颜色 */
  background: #9c7eef !important; /* Element Plus 主色 */
  height: 2px !important;          /* 高度 */
  border-radius: 0 !important;
}
.el-button--primary,
.el-tour-indicator.is-active
 {
  border:#9c7eef !important;
  background-color: #9c7eef !important;
}
.el-tour__content{
   background: linear-gradient(135deg, #ffffff 0%, #f8f7ff 100%) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  max-width: 480px !important;
  box-shadow: 0 4px 20px rgba(107, 70, 193, 0.15) !important;
  animation: fadeInUp 0.6s ease-out !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.el-tour__content:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 30px rgba(107, 70, 193, 0.25) !important;
}
/* 暗色主题适配 */
html.dark .el-tour__content {
  background: linear-gradient(135deg, #1e1e1e 0%, #2d2a40 100%) !important;
  box-shadow: 0 4px 20px rgba(156, 126, 239, 0.25) !important;
}
html.dark .el-tour__content:hover {
  box-shadow: 0 8px 30px rgba(156, 126, 239, 0.35) !important;
}
</style>
<style scoped>
header strong { font-size: 1.25rem; }
#app-container.login-mode main {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.fullscreen-content {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

.homepage-content {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: visible; /* 使用浏览器原生滚动 */
  position: relative;
}

/* 修复暗色主题下按钮偏移问题 */
.navigation-buttons {
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
}

html.dark .navigation-buttons .el-button {
  border-color: #8B5CF6 !important;
}

html.dark .navigation-buttons .el-button--primary {
  background-color: #8B5CF6 !important;
  border-color: #8B5CF6 !important;
}

html.dark .navigation-buttons .el-button--primary:hover {
  background-color: #7C3AED !important;
  border-color: #7C3AED !important;
}
</style>