66 lines
1.7 KiB
Vue
66 lines
1.7 KiB
Vue
<!-- 主布局 -->
|
|
<script setup lang="ts">
|
|
import type { LayoutType } from '@/config/design';
|
|
import { useRoute } from 'vue-router';
|
|
import { useResponsive } from '@/hooks/useResponsive';
|
|
import LayoutBlankPage from '@/layouts/LayoutBlankPage/index.vue';
|
|
import LayoutDefault from '@/layouts/LayoutDefault/index.vue';
|
|
import LayoutMobile from '@/layouts/LayoutMobile/index.vue';
|
|
import LayoutVertical from '@/layouts/LayoutVertical/index.vue';
|
|
import { useDesignStore } from '@/stores';
|
|
|
|
// 这里添加布局类型
|
|
const LayoutComponent: Record<LayoutType | 'mobile', Component> = {
|
|
default: LayoutDefault,
|
|
vertical: LayoutVertical,
|
|
blankPage: LayoutBlankPage,
|
|
mobile: LayoutMobile,
|
|
|
|
};
|
|
|
|
const designStore = useDesignStore();
|
|
const { isMobile } = useResponsive();
|
|
const route = useRoute();
|
|
|
|
/** 获取布局格式 */
|
|
const layout = computed((): LayoutType | 'mobile' => {
|
|
// 移动端强制使用移动布局
|
|
// if (isMobile.value) {
|
|
// return 'mobile';
|
|
// }
|
|
// 优先使用路由 meta 中定义的 layout
|
|
if (route.meta?.layout) {
|
|
return route.meta.layout as LayoutType;
|
|
}
|
|
// 否则使用全局设置的 layout
|
|
return designStore.layout;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<component :is="LayoutComponent[layout]" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
:deep(.aside-content .conversations-container){
|
|
width: 100%;
|
|
}
|
|
|
|
:deep(.aside-content .conversations-list){
|
|
padding: 0 !important;
|
|
}
|
|
|
|
:deep(.aside-content .conversations-wrap){
|
|
padding: 0 !important;
|
|
}
|
|
:deep(.aside-content .el-scrollbar__thumb){
|
|
width: 0 !important;
|
|
}
|
|
:deep(.nav-menu)
|
|
{
|
|
border-right: 0.5px solid var(--s-color-border-tertiary, rgba(0, 0, 0, 0.08));
|
|
}
|
|
</style>
|