<template>
  <div :class="'w-full h-screen flex flex-col transition-spacing duration-300 ease-linear overflow-hidden ' + mlClass">
    <!-- Header -->
    <Header />
    <!-- Tag view -->
    <!--<div class=""></div>-->
    <!-- Container -->
    <div class="h-screen max-w-full p-1 overflow-auto sm:p-2 sm:overflow-x-hidden" id="content">
      <router-view />

      <!--<div class="w-full h-10 mt-2 leading-10 text-center text-gray-400">内容中台管理系统 @copyright 2018 ~ {{ year }}</div>-->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { useAppStore } from '@/stores/modules/app'

const appStore = useAppStore()

const mlClass = computed(() => {
  return appStore.isExpand ? 'ml-0 sm:ml-56' : 'ml-0 sm:ml-16'
})

const year = computed(() => {
  const date = new Date()

  return date.getFullYear()
})
</script>
