sionrui/frontend/app/web-gold/src/layouts/components/FullWidthLayout.vue

<script setup>
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import LayoutHeader from './LayoutHeader.vue'

defineOptions({ name: 'FullWidthLayout' })

// Props
const props = defineProps({
  showBack: {
    type: Boolean,
    default: false
  },
  showPadding: {
    type: Boolean,
    default: true
  },
  headerGhost: {
    type: Boolean,
    default: false
  },
  headerPadding: {
    type: String,
    default: undefined
  }
})

// Emits
const emit = defineEmits(['back'])

// Methods
const handleBack = () => {
  emit('back')
}
</script>

<template>
  <div class="full-width-layout">
    <div v-if="$slots.header || showBack" class="full-width-layout__header-wrapper">
       <LayoutHeader 
        :show-back="showBack" 
        :ghost="headerGhost"
        :padding="headerPadding"
        @back="handleBack"
      >
        <template #header v-if="$slots.header">
           <slot name="header"></slot>
        </template>
        <template #extra>
          <slot name="extra"></slot>
        </template>
      </LayoutHeader>
    </div>
   
    <!-- 全宽内容 -->
    <div
      class="full-width-layout__content"
      :class="{ 'no-padding': !showPadding }"
    >
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="less">
.full-width-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg-card);
}

.full-width-layout__header-wrapper {
  flex-shrink: 0;
}

.full-width-layout__content {
  flex: 1;
  overflow: auto;
  background: var(--color-bg);

  &.no-padding {
    padding: 0;
  }
}
</style>