83 lines
1.9 KiB
Vue
83 lines
1.9 KiB
Vue
<template>
|
|
<div class="page-wrapper">
|
|
<IxSpace align="center" class="fun-bar">
|
|
<IxSpace align="center" class="fun-bar-left">
|
|
<IxIcon name="double-right"/>
|
|
<template v-for="(item, index) in left">
|
|
<template v-if="item.permission==null||hasPermission(item.permission)">
|
|
<IxButton v-bind="item">{{ item.title }}</IxButton>
|
|
<IxDivider v-if="index < left.length-1" class="item-divider" vertical/>
|
|
</template>
|
|
</template>
|
|
</IxSpace>
|
|
<IxSpace align="center" class="fun-bar-right">
|
|
<template v-for="(item, index) in right">
|
|
<template v-if="item.permission==null||hasPermission(item.permission)">
|
|
<IxButton v-bind="item">{{ item.title }}</IxButton>
|
|
<IxDivider v-if="index < left.length-1" class="item-divider" vertical/>
|
|
</template>
|
|
</template>
|
|
<IxIcon name="double-left"/>
|
|
</IxSpace>
|
|
</IxSpace>
|
|
<div class="page-content">
|
|
<slot/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { hasPermission } from '@/common/app'
|
|
|
|
defineOptions({name: 'Page'})
|
|
|
|
defineEmits([ 'onClick' ])
|
|
|
|
withDefaults(defineProps<{
|
|
left?: PageTypes.Fun[]
|
|
right?: PageTypes.Fun[]
|
|
}>(), {
|
|
left: () => [] as PageTypes.Fun[],
|
|
right: () => [] as PageTypes.Fun[],
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.page-wrapper {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.page-content {
|
|
height calc(100% - 3rem)
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
display flex
|
|
flex-direction column
|
|
padding 1rem
|
|
}
|
|
}
|
|
|
|
.fun-bar {
|
|
justify-content space-between;
|
|
width: 100%;
|
|
height 3rem
|
|
border-bottom 1px solid var(--ix-color-border-secondary);
|
|
}
|
|
|
|
.fun-bar-left i,
|
|
.fun-bar-right i {
|
|
font-size: 2rem;
|
|
margin 0 1rem
|
|
color: var(--ix-reset-scrollbar-thumb-bg-hover);
|
|
}
|
|
|
|
.item-divider {
|
|
height 100%
|
|
}
|
|
|
|
</style>
|