ddac-front/src/layout/index.vue

<script setup lang="ts">
  import SiderBar from './components/Sidebar/index.vue'
  import Header from './components/Header.vue'
  import AppMain from './components/AppMain.vue'
  import { useAppStore } from '@/store/modules/app'

  const appStore = useAppStore()
</script>

<template>
  <div class="app-wrapper" :class="{ 'is-collapsed': appStore.sidebarCollapsed }">
    <SiderBar class="sidebar-container" />
    <div class="main-wrapper">
      <Header class="header-container" />
      <AppMain class="main-container" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .app-wrapper {
    --sidebar-width: 300px;
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: 88px 1fr;
    grid-template-areas:
      'sidebar header'
      'sidebar main';
    overflow: hidden;
    transition: grid-template-columns 0.3s ease;

    &.is-collapsed {
      --sidebar-width: 64px;
    }
  }

  .sidebar-container {
    grid-area: sidebar;
    border-right: 1px solid var(--admin-border-color);
  }

  .main-wrapper {
    display: contents; // 让子元素直接参与 grid 布局
  }

  .header-container {
    grid-area: header;
    background-color: var(--admin-header-bg);
    border-bottom: 1px solid var(--admin-border-color);
  }

  .main-container {
    grid-area: main;
    background-color: var(--admin-bg);
    overflow: auto;
  }
</style>