You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import LayoutMenu from './components/menu/index.vue'
|
|
import LayoutHeader from './components/header.vue'
|
|
import LayoutFooter from './components/footer.vue'
|
|
import LayoutMain from './components/main.vue'
|
|
import SiderDragBar from './components/sider/sider-dragbar.vue'
|
|
|
|
// import { useDragLine } from './components/sider/drag'
|
|
|
|
defineOptions({
|
|
name: 'LeftMenuLayout',
|
|
})
|
|
const {
|
|
getShowMenu,
|
|
getCollapsed,
|
|
getShowCenterTrigger,
|
|
setSiderWidth,
|
|
getCanDrag,
|
|
} = useMenuSetting()
|
|
|
|
const {
|
|
headerRef,
|
|
footerRef,
|
|
contentRef,
|
|
contentStyle,
|
|
mainStyle,
|
|
} = useLayout()
|
|
|
|
const {
|
|
toggleCollapse,
|
|
sidebar,
|
|
} = useAppConfig()
|
|
|
|
const { getShowFooter } = useRootSetting()
|
|
|
|
const { isSidebarDark } = useAppTheme()
|
|
// useDragLine(siderRef, dragBarRef)
|
|
</script>
|
|
|
|
<template>
|
|
<NLayout has-sider class="h-full">
|
|
<NLayoutSider
|
|
v-if="getShowMenu"
|
|
:show-trigger="getShowCenterTrigger"
|
|
bordered
|
|
:collapsed-width="sidebar.collapsedWidth"
|
|
:width="sidebar.width"
|
|
collapse-mode="width"
|
|
:collapsed="getCollapsed"
|
|
:inverted="!!isSidebarDark"
|
|
@update:collapsed="toggleCollapse"
|
|
>
|
|
<slot name="sider">
|
|
<div class="static h-full">
|
|
<SiderDragBar
|
|
v-if="getCanDrag"
|
|
:mix="sidebar.mixSidebarWidth"
|
|
:width="sidebar.width"
|
|
:fn="setSiderWidth"
|
|
/>
|
|
<LayoutMenu />
|
|
</div>
|
|
</slot>
|
|
</NLayoutSider>
|
|
<NLayout>
|
|
<NLayout ref="headerRef">
|
|
<slot name="header">
|
|
<LayoutHeader />
|
|
</slot>
|
|
</NLayout>
|
|
<NLayout :content-style="contentStyle">
|
|
<NLayoutContent ref="contentRef" :content-style="mainStyle">
|
|
<LayoutMain>
|
|
<slot name="main" />
|
|
</LayoutMain>
|
|
</NLayoutContent>
|
|
<NLayoutFooter v-if="getShowFooter" ref="footerRef">
|
|
<slot name="footer">
|
|
<LayoutFooter />
|
|
</slot>
|
|
</NLayoutFooter>
|
|
</NLayout>
|
|
</NLayout>
|
|
</NLayout>
|
|
</template>
|