66 lines
1.3 KiB
Vue
66 lines
1.3 KiB
Vue
<script setup>
|
|
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="flex flex-col h-full overflow-hidden bg-card">
|
|
<div v-if="$slots.header || showBack" class="shrink-0">
|
|
<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="flex-1 overflow-auto bg-background"
|
|
:class="{ 'p-0': !showPadding, 'p-4': showPadding }"
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
/* 使用 Tailwind 类，已移除旧样式 */
|
|
</style>
|