<template>
  <div id="manage">
    <a-layout has-sider>
      <a-layout-sider :style="{ width: '200px' }">
        <ManageSidebar/>
      </a-layout-sider>
      <a-layout>
        <a-layout-header :style="{ background: '#fff', padding: 0}">
          <ManageHeader/>
        </a-layout-header>
        <a-layout-content class="main">
          <router-view :key="key" class="main-card"/>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import ManageHeader from "./manage/ManageHeader.vue";
import ManageSidebar from "./manage/ManageSidebar.vue";
import {useRoute} from "vue-router";

const route = useRoute();

const key = () => {
  return route.path + Math.random();
}
</script>

<style scoped>

#manage {
  height: 100%;
  width: 100%;
  position: fixed;
}

.main {
  padding: 5px;
  box-sizing: border-box;
  display: block;
  flex: 1;
  flex-basis: 0;
  overflow: auto;
}

</style>