import { computed, defineComponent, ref } from 'vue'; import { IndexViewModel } from '@ibiz-template/model'; import { useNamespace } from '@ibiz-template/vue-util'; import { Namespace } from '@ibiz-template/core'; import '@ibiz-template/theme/style/components/layout/app-layout/app-layout.scss'; function renderLogo(ns: Namespace, model: IndexViewModel) { return ( <div class={[ns.e('logo'), model.source?.mainMenuAlign?.toLowerCase()]}> {model.appIconPath ? ( <img class={ns.e('logo-img')} src={model.appIconPath}></img> ) : null} <div class={[ ns.e('logo-caption'), model.source?.mainMenuAlign?.toLowerCase(), ]} > {model.caption} </div> </div> ); } export const AppLayout = defineComponent({ name: 'AppLayout', props: { model: { type: IndexViewModel, required: true, }, // 视图是否完成加载 isComplete: { type: Boolean, default: false, }, // 是否显示分页导航 isShowTabPageExp: { type: Boolean, default: false, }, }, setup(props, { emit }) { const ns = useNamespace('layout'); // 菜单收缩变化 const collapseChange = ref(false); const collapseMenus = () => { collapseChange.value = !collapseChange.value; emit('onCollapseChange', collapseChange.value); }; const isBlank = computed(() => props.model.source.blankMode === true); return { ns, collapseChange, isBlank, collapseMenus }; }, render() { if (this.isComplete) { let content = null; if (this.model.source.mainMenuAlign === 'CENTER') { content = this.$slots.menu; } else { content = [ <i-sider hide-trigger class={[ this.ns.b('nav'), this.ns.is('collapse', this.collapseChange), ]} value={this.collapseChange} key='1' > {renderLogo(this.ns, this.model)} {this.$slots.menu} </i-sider>, <i-layout class={[this.ns.b('content')]} key='2'> <i-header class={this.ns.b('header')} key='3'> <div class={this.ns.be('header', 'left')}> {renderLogo(this.ns, this.model)} <div class={this.ns.be('header', 'collapse-icon')}> {!this.collapseChange ? ( <ion-icon src={'./assets/img/menu-fold.svg'} on-click={() => this.collapseMenus()} /> ) : ( <ion-icon src={'./assets/img/menu-unfold.svg'} on-click={() => this.collapseMenus()} /> )} </div> {this.model.source.mainMenuAlign === 'TOP' ? ( <i-menu class={this.ns.be('header', 'menu')} mode='horizontal' active-name='1' ></i-menu> ) : null} </div> <div class={this.ns.be('header', 'right')}> <app-user /> </div> </i-header> <i-content class={this.ns.be('content', 'main')} key='4'> {this.$slots.tabPageExp} {this.$slots.default} </i-content> {/* <i-footer class={this.ns.b('footer')}>Footer</i-footer> */} </i-layout>, ]; } return ( <i-layout class={[ this.ns.b(), this.isBlank ? this.ns.m('blank') : '', this.ns.is('collapse', this.collapseChange), this.ns.is('tab', this.isShowTabPageExp), ]} > {content} </i-layout> ); } return null; }, });