52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
|
import { RouterView, useRoute } from 'vue-router'
|
||
|
|
import {
|
||
|
|
NLayout,
|
||
|
|
NLayoutHeader,
|
||
|
|
NLayoutContent,
|
||
|
|
NLayoutSider,
|
||
|
|
NLayoutFooter,
|
||
|
|
NScrollbar,
|
||
|
|
} from 'naive-ui'
|
||
|
|
import MenuCom from './components/Menu'
|
||
|
|
|
||
|
|
const border = 'border border-[var(--border-color)] rounded-lg shadow-sm'
|
||
|
|
export default defineComponent({
|
||
|
|
setup() {
|
||
|
|
const route = useRoute()
|
||
|
|
|
||
|
|
return () =>
|
||
|
|
route.meta.new ? (
|
||
|
|
<RouterView></RouterView>
|
||
|
|
) : (
|
||
|
|
<div class="w-h-full">
|
||
|
|
<NLayout class="w-h-full" content-class="flex flex-col w-h-full">
|
||
|
|
<NLayoutHeader class="h-12">
|
||
|
|
<div class={`h-full ${border}`}>title</div>
|
||
|
|
</NLayoutHeader>
|
||
|
|
<div class="h-5"></div>
|
||
|
|
<NLayout has-sider class="flex-1" content-class="w-h-full">
|
||
|
|
<NLayoutSider
|
||
|
|
class={`${border}`}
|
||
|
|
show-trigger
|
||
|
|
collapse-mode="width"
|
||
|
|
collapsed-width={64}
|
||
|
|
width={240}
|
||
|
|
content-class="w-h-full"
|
||
|
|
native-scrollbar={false}
|
||
|
|
>
|
||
|
|
<MenuCom />
|
||
|
|
</NLayoutSider>
|
||
|
|
<div class="p-3"></div>
|
||
|
|
<NLayoutContent class={`h-full ${border}`} content-style="padding: 24px">
|
||
|
|
<NScrollbar>
|
||
|
|
<RouterView class="w-h-full" />
|
||
|
|
</NScrollbar>
|
||
|
|
</NLayoutContent>
|
||
|
|
</NLayout>
|
||
|
|
{/* <NLayoutFooter class="bg-slate-400 h-[40px]">成府路</NLayoutFooter> */}
|
||
|
|
</NLayout>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
})
|