refactor(layout): 左右布局v1
- 移除头部组件(UserHeader和SystemHeader)并调整布局结构 - 添加LayoutContainer组件用于布局容器管理 - 集成Sidebar组件到左侧区域 - 更新样式文件移除顶部内边距设置 - 简化computed属性减少不必要的主题判断逻辑 - 调整过期用户的样式处理方式v3.2
parent
8263ab2009
commit
b70a4c5825
|
|
@ -1,15 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import UserHeader from '@/layout/layout-header/UserHeader.vue'
|
||||
import SystemHeader from '@/layout/layout-header/SystemHeader.vue'
|
||||
import Sidebar from '@/layout/components/sidebar/index.vue'
|
||||
import AppMain from '@/layout/app-main/index.vue'
|
||||
import LayoutContainer from '@/components/layout-container/index.vue'
|
||||
import useStore from '@/stores'
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
const { theme, user } = useStore()
|
||||
const isDefaultTheme = computed(() => {
|
||||
return theme.isDefaultTheme()
|
||||
})
|
||||
const { user } = useStore()
|
||||
const {
|
||||
params: { folderId }, // id为knowledgeID
|
||||
query: { from },
|
||||
|
|
@ -26,20 +23,13 @@ const isShared = computed(() => {
|
|||
|
||||
<template>
|
||||
<div class="app-layout">
|
||||
<div class="app-header" :class="!isDefaultTheme ? 'custom-header' : ''">
|
||||
<el-alert
|
||||
v-if="user.isExpire()"
|
||||
:title="$t('layout.isExpire')"
|
||||
type="warning"
|
||||
class="border-b"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
<SystemHeader v-if="isShared"></SystemHeader>
|
||||
<UserHeader v-else />
|
||||
</div>
|
||||
<div class="app-main" :class="user.isExpire() ? 'isExpire' : ''">
|
||||
<AppMain />
|
||||
<LayoutContainer>
|
||||
<template #left>
|
||||
<Sidebar />
|
||||
</template>
|
||||
<AppMain />
|
||||
</LayoutContainer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -15,10 +15,10 @@
|
|||
.app-main {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: var(--app-header-height) 0 0 !important;
|
||||
padding: 0 !important;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
&.isExpire {
|
||||
padding-top: calc(var(--app-header-height) + 40px) !important;
|
||||
padding-top: 40px !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue