<template>
  <div class="default-layout">
    <header class="layout-header" v-if="showHeader">
      <!-- 可以在这里添加头部内容 -->
    </header>
    
    <main class="layout-content">
      <router-view />
    </main>
    
    <footer class="layout-footer" v-if="showFooter">
      <!-- 可以在这里添加底部内容 -->
    </footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'DefaultLayout',
  setup() {
    const showHeader = ref(true);
    const showFooter = ref(true);
    
    return {
      showHeader,
      showFooter
    };
  }
});
</script>

<style lang="scss" scoped>
.default-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  
  .layout-header {
    /* 头部样式 */
  }
  
  .layout-content {
    flex: 1;
    padding: 20px;
  }
  
  .layout-footer {
    /* 底部样式 */
  }
}
</style> 