|
@ -33,14 +33,12 @@ import { |
|
|
computed, |
|
|
computed, |
|
|
onMounted, |
|
|
onMounted, |
|
|
watchEffect, |
|
|
watchEffect, |
|
|
useCssModule, |
|
|
|
|
|
onBeforeMount, |
|
|
onBeforeMount, |
|
|
getCurrentInstance |
|
|
getCurrentInstance |
|
|
} from "vue"; |
|
|
} from "vue"; |
|
|
import { setType } from "./types"; |
|
|
import { setType } from "./types"; |
|
|
import { useI18n } from "vue-i18n"; |
|
|
import { useI18n } from "vue-i18n"; |
|
|
import { emitter } from "/@/utils/mitt"; |
|
|
import { emitter } from "/@/utils/mitt"; |
|
|
import { toggleClass } from "/@/utils/operate"; |
|
|
|
|
|
import { useEventListener } from "@vueuse/core"; |
|
|
import { useEventListener } from "@vueuse/core"; |
|
|
import { storageLocal } from "/@/utils/storage"; |
|
|
import { storageLocal } from "/@/utils/storage"; |
|
|
import { useAppStoreHook } from "/@/store/modules/app"; |
|
|
import { useAppStoreHook } from "/@/store/modules/app"; |
|
@ -56,7 +54,6 @@ import Vertical from "./components/sidebar/vertical.vue"; |
|
|
import Horizontal from "./components/sidebar/horizontal.vue"; |
|
|
import Horizontal from "./components/sidebar/horizontal.vue"; |
|
|
|
|
|
|
|
|
const pureSetting = useSettingStoreHook(); |
|
|
const pureSetting = useSettingStoreHook(); |
|
|
const { hiddenMainContainer } = useCssModule(); |
|
|
|
|
|
|
|
|
|
|
|
const instance = |
|
|
const instance = |
|
|
getCurrentInstance().appContext.app.config.globalProperties.$storage; |
|
|
getCurrentInstance().appContext.app.config.globalProperties.$storage; |
|
@ -128,21 +125,9 @@ const $_resizeHandler = () => { |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
function onFullScreen() { |
|
|
function onFullScreen() { |
|
|
if (unref(hiddenSideBar)) { |
|
|
|
|
|
hiddenSideBar.value = false; |
|
|
|
|
|
toggleClass( |
|
|
|
|
|
false, |
|
|
|
|
|
hiddenMainContainer, |
|
|
|
|
|
document.querySelector(".main-container") |
|
|
|
|
|
); |
|
|
|
|
|
} else { |
|
|
|
|
|
hiddenSideBar.value = true; |
|
|
|
|
|
toggleClass( |
|
|
|
|
|
true, |
|
|
|
|
|
hiddenMainContainer, |
|
|
|
|
|
document.querySelector(".main-container") |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
unref(hiddenSideBar) |
|
|
|
|
|
? (hiddenSideBar.value = false) |
|
|
|
|
|
: (hiddenSideBar.value = true); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
onMounted(() => { |
|
@ -151,11 +136,6 @@ onMounted(() => { |
|
|
useAppStoreHook().toggleDevice("mobile"); |
|
|
useAppStoreHook().toggleDevice("mobile"); |
|
|
handleClickOutside(true); |
|
|
handleClickOutside(true); |
|
|
} |
|
|
} |
|
|
toggleClass( |
|
|
|
|
|
unref(hiddenSideBar), |
|
|
|
|
|
hiddenMainContainer, |
|
|
|
|
|
document.querySelector(".main-container") |
|
|
|
|
|
); |
|
|
|
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
onBeforeMount(() => { |
|
|
onBeforeMount(() => { |
|
@ -175,7 +155,7 @@ onBeforeMount(() => { |
|
|
@click="handleClickOutside(false)" |
|
|
@click="handleClickOutside(false)" |
|
|
/> |
|
|
/> |
|
|
<Vertical v-show="!hiddenSideBar && layout.includes('vertical')" /> |
|
|
<Vertical v-show="!hiddenSideBar && layout.includes('vertical')" /> |
|
|
<div class="main-container"> |
|
|
|
|
|
|
|
|
<div :class="['main-container', hiddenSideBar ? 'main-hidden' : '']"> |
|
|
<div :class="{ 'fixed-header': set.fixedHeader }"> |
|
|
<div :class="{ 'fixed-header': set.fixedHeader }"> |
|
|
<!-- 顶部导航栏 --> |
|
|
<!-- 顶部导航栏 --> |
|
|
<navbar v-show="!hiddenSideBar && layout.includes('vertical')" /> |
|
|
<navbar v-show="!hiddenSideBar && layout.includes('vertical')" /> |
|
@ -196,12 +176,6 @@ onBeforeMount(() => { |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<style scoped module> |
|
|
|
|
|
.hiddenMainContainer { |
|
|
|
|
|
margin-left: 0 !important; |
|
|
|
|
|
} |
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
@mixin clearfix { |
|
|
@mixin clearfix { |
|
|
&::after { |
|
|
&::after { |
|
@ -224,6 +198,10 @@ onBeforeMount(() => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.main-hidden { |
|
|
|
|
|
margin-left: 0 !important; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.drawer-bg { |
|
|
.drawer-bg { |
|
|
background: #000; |
|
|
background: #000; |
|
|
opacity: 0.3; |
|
|
opacity: 0.3; |
|
|