149 lines
3.2 KiB
Vue
149 lines
3.2 KiB
Vue
<template>
|
|
<IxProLayout
|
|
v-model:activeKey="activeKey"
|
|
v-model:collapsed="collapsed"
|
|
:logo="logo"
|
|
:menus="menuTree"
|
|
:on-menu-click="openPageHandler"
|
|
:theme="mergedTheme"
|
|
:type="type"
|
|
class="zsy-frame"
|
|
>
|
|
<template #headerExtra>
|
|
<UserPanel/>
|
|
</template>
|
|
<IxCard class="zsy-frame-content">
|
|
<RouterView #="{ Component }">
|
|
<Transition name="page-change">
|
|
<component :is="Component"/>
|
|
</Transition>
|
|
</RouterView>
|
|
</IxCard>
|
|
</IxProLayout>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import defaultLogo from '@/assets/images/循环.svg'
|
|
import UserPanel from '@/pages/main-zone/header-bar/UserPanel.vue'
|
|
import {
|
|
MenuClickOptions,
|
|
type MenuData
|
|
} from '@idux/components/menu'
|
|
import {
|
|
ProLayoutTheme,
|
|
type ProLayoutType
|
|
} from '@idux/pro/layout'
|
|
import Strings from '@/common/utils/strings.ts'
|
|
import {
|
|
appName,
|
|
downloadBaseUrl
|
|
} from '@/common'
|
|
import { useAppSettingStore } from '@/common/app/app-setting-store.ts'
|
|
import colls from '@/common/utils/colls.ts'
|
|
import {
|
|
HomeMenu,
|
|
MenuCategory
|
|
} from '@/common/app/contants.ts'
|
|
import Nav from '@/common/router/nav.ts'
|
|
|
|
const appSettingStore = useAppSettingStore()
|
|
const logoImage = computed(() => {
|
|
return Strings.isBlank(appSettingStore.logo) ? defaultLogo : downloadBaseUrl + appSettingStore.logo!
|
|
})
|
|
const logo = {
|
|
image: logoImage.value,
|
|
title: appName,
|
|
link: '/home',
|
|
}
|
|
|
|
const type = ref<ProLayoutType>('mixin')
|
|
|
|
const activeKey = ref()
|
|
const collapsed = ref(false)
|
|
|
|
const menuTree = computed(() => {
|
|
return colls.toTree(appSettingStore.menus
|
|
.filter(it => it.id !== HomeMenu.id && (it.menuCategory === MenuCategory.Page || it.menuCategory === MenuCategory.Group || it.menuCategory === MenuCategory.Catalog))
|
|
.sort((a, b) => (a.sort ?? 0) - (b.sort ?? 0))
|
|
.map(it => ({
|
|
id: it.id,
|
|
pid: it.pid,
|
|
key: it.routeName,
|
|
label: it.title,
|
|
type: it.menuCategory === MenuCategory.Page ? 'item' : 'sub',
|
|
}))) as MenuData[]
|
|
})
|
|
const wholeTheme = ref('light')
|
|
const mix = reactive({header: 'light', sider: 'light'})
|
|
const mergedTheme = computed(() => {
|
|
if (wholeTheme.value === 'mix') {
|
|
return {header: mix.header, sider: mix.sider} as ProLayoutTheme
|
|
}
|
|
return wholeTheme.value as ProLayoutTheme
|
|
})
|
|
|
|
function openPageHandler(options: MenuClickOptions) {
|
|
Nav.open({
|
|
insId: options.key as string,
|
|
routeName: options.key as string
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.zsy-frame {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow hidden
|
|
|
|
:deep(.ix-layout-content) {
|
|
padding .5rem
|
|
}
|
|
|
|
:deep(.ix-pro-layout-logo) {
|
|
img {
|
|
width 2rem
|
|
}
|
|
|
|
h1 {
|
|
color: rgb(22 93 255);
|
|
font-weight: bold;
|
|
font-size: 1.5rem
|
|
}
|
|
}
|
|
}
|
|
|
|
.page-change-enter-active,
|
|
.page-change-leave-active {
|
|
transition: all .3s ease-in;
|
|
}
|
|
|
|
.page-change-enter-from {
|
|
transform: translateX(-50px);
|
|
opacity: 0;
|
|
}
|
|
|
|
.page-change-enter-to,
|
|
.page-change-leave-from {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.page-change-leave-to {
|
|
transform: translateX(50px);
|
|
opacity: 0;
|
|
}
|
|
|
|
.zsy-frame-content {
|
|
width 100%
|
|
height 100%
|
|
|
|
:deep(.ix-card-body) {
|
|
height 100%
|
|
width 100%
|
|
overflow auto
|
|
}
|
|
}
|
|
</style>
|