You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.5 KiB
104 lines
2.5 KiB
<script lang="ts" setup>
|
|
import { computed, onBeforeMount, onMounted, unref } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { Logo } from './components/Logo'
|
|
import { MainView } from './components/Main'
|
|
import { AsideMenu } from './components/Menu'
|
|
import { PageHeader } from './components/Header'
|
|
import { useProjectSetting } from '@/hooks/setting/useProjectSetting'
|
|
import { storage } from '@/utils/Storage'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
onMounted(() => {
|
|
/**
|
|
* 如果刷新则去掉筛选条件
|
|
* 1. 如果当前页面路由与上一个页面路由相同时则为刷新
|
|
* 2. 防止一直刷新 另外一个判断条件为当前当前路由query不为{}
|
|
* 3. 当前页面下执行当前页面的搜索 1条件一定成立
|
|
*
|
|
* 4. 搜索点击->存storage->跳转页面->onMounted
|
|
* ->如果storage为true则不replace 并将storage置false
|
|
*/
|
|
if (storage.get('isSearch')) {
|
|
storage.remove('isSearch')
|
|
router.replace(route.path)
|
|
return
|
|
}
|
|
if (history.state.back == route.path && JSON.stringify(route.query).trim() != '{}')
|
|
router.replace(route.path)
|
|
})
|
|
const { menuSetting } = useProjectSetting()
|
|
|
|
const leftMenuWidth = computed(() => {
|
|
const { minMenuWidth } = unref(menuSetting)
|
|
return minMenuWidth
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="layout">
|
|
<!-- 左侧sider -->
|
|
<div class="layout-sider" :style="{ width: `${leftMenuWidth}px` }">
|
|
<Logo />
|
|
<AsideMenu />
|
|
</div>
|
|
|
|
<!-- 右侧内容区域 -->
|
|
<div class="layout-main">
|
|
<div class="layout-main-header">
|
|
<PageHeader />
|
|
</div>
|
|
|
|
<div class="layout-main-content">
|
|
<MainView />
|
|
</div>
|
|
</div>
|
|
<div />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.layout {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex: auto;
|
|
background-image: url("../assets/images/bg.png");
|
|
background-size: cover;
|
|
// height: 1100px;
|
|
// width: 1440px;
|
|
height: 100%;
|
|
max-height: 1100px;
|
|
overflow: hidden;
|
|
.layout-sider {
|
|
min-height: 100vh;
|
|
border-right: 1px solid #dae4f3;
|
|
}
|
|
|
|
.layout-main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
box-sizing: border-box;
|
|
border-left: 1px solid #ffffff;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
|
|
&-header {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
z-index: 11;
|
|
}
|
|
|
|
&-content {
|
|
display: flex;
|
|
flex: auto;
|
|
height: 100%;
|
|
// padding: 0px 16px 24px 16px;
|
|
overflow-x: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
}
|
|
</style>
|