eiacloud-mcp-ui/src/layouts/MainLayout.vue

<template>
  <div class="main-layout">
    <AppHeader />
    <div class="main-layout-body">
      <AppSidebar />
      <main class="main-layout-content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup>
import AppHeader from "@/components/layout/AppHeader.vue";
import AppSidebar from "@/components/layout/AppSidebar.vue";

defineOptions({
  name: "MainLayout",
});
</script>

<style scoped lang="scss">
.main-layout {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-layout-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.main-layout-content {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  background: #f4f7fa;
}
</style>