refactor(layout): 左右布局v1

- 移除头部组件(UserHeader和SystemHeader)并调整布局结构
- 添加LayoutContainer组件用于布局容器管理
- 集成Sidebar组件到左侧区域
- 更新样式文件移除顶部内边距设置
- 简化computed属性减少不必要的主题判断逻辑
- 调整过期用户的样式处理方式
v3.2
tanlianwang 2026-03-04 09:29:54 +08:00
parent 8263ab2009
commit b70a4c5825
2 changed files with 11 additions and 21 deletions

View File

@ -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 }, // idknowledgeID
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>

View File

@ -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;
}
}