App.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <el-config-provider :locale="zhCn">
  3. <!-- 登录/注册页面不显示布局 -->
  4. <template v-if="hideLayout">
  5. <router-view />
  6. </template>
  7. <!-- 正常布局:无侧边栏,编辑器全宽 -->
  8. <div v-else class="app-container">
  9. <!-- 主体区域:全宽编辑器 -->
  10. <div class="app-body">
  11. <main class="app-main">
  12. <router-view />
  13. </main>
  14. </div>
  15. <!-- 任务中心面板 -->
  16. <TaskCenterPanel />
  17. </div>
  18. </el-config-provider>
  19. </template>
  20. <script setup>
  21. import { computed } from 'vue'
  22. import { useRouter, useRoute } from 'vue-router'
  23. import { ElMessage, ElMessageBox } from 'element-plus'
  24. import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
  25. import TaskCenterPanel from '@/components/TaskCenter/TaskCenterPanel.vue'
  26. const router = useRouter()
  27. const route = useRoute()
  28. const hideLayout = computed(() => route.meta.hideLayout === true)
  29. </script>
  30. <style lang="scss">
  31. .app-container {
  32. height: 100vh;
  33. display: flex;
  34. flex-direction: column;
  35. }
  36. // ==========================================
  37. // 主体区域:全宽
  38. // ==========================================
  39. .app-body {
  40. flex: 1;
  41. display: flex;
  42. overflow: hidden;
  43. }
  44. .app-main {
  45. flex: 1;
  46. overflow: hidden;
  47. background: var(--bg);
  48. }
  49. </style>