<template>
|
<div :class="classObj" class="app-wrapper">
|
<div
|
v-if="device === 'mobile' && sidebar.opened"
|
class="drawer-bg"
|
@click="handleClickOutside"
|
/>
|
<!-- <sidebar class="sidebar-container" />-->
|
<div :class="{ hasTagsView: needTagsView }" class="main-container">
|
<div :class="{ 'fixed-header': fixedHeader }">
|
<navbar />
|
<tags-view v-if="needTagsView" />
|
<!-- <TestTagsView /> -->
|
</div>
|
<app-main />
|
<!-- <right-panel v-if="showSettings">
|
<settings />
|
</right-panel> -->
|
</div>
|
</div>
|
<el-drawer
|
v-model="isCollapseM"
|
title="I am the title"
|
direction="ltr"
|
size="300px"
|
:with-header="false"
|
:before-close="handleClose"
|
>
|
<Sidebar class="sidebar-container" />
|
</el-drawer>
|
</template>
|
|
<script setup name="LayoutIndex">
|
// import RightPanel from "@/components/RightPanel";
|
import { AppMain, Navbar, Sidebar, TagsView } from "./components/index.js";
|
// import TestTagsView from "./components/TagsView/test.vue";
|
import { useAppStore } from "@/store/app";
|
import { useSettingsStore } from "@/store/settings";
|
import { useUserStore } from "@/store/user";
|
import { useUKeyStore } from "@/store/ukey";
|
import { defineComponent } from "vue";
|
import changeTheme from "@/utils/changeTheme.js";
|
import { throttle } from "@/utils/throttle.js";
|
import { pingpong } from "@/api/user";
|
import config from '@/utils/config.js';
|
import { ref, computed, onMounted, onBeforeUnmount, watch, watchEffect } from "vue";
|
import { storeToRefs } from "pinia";
|
import { useRoute, useRouter } from "vue-router";
|
const route = useRoute();
|
const router = useRouter();
|
|
console.log('TagsView', TagsView, '=============');
|
|
|
const appStore = useAppStore();
|
const settingsStore = useSettingsStore();
|
const userStore = useUserStore();
|
const ukeyStore = useUKeyStore();
|
|
const { isIn } = storeToRefs(ukeyStore);
|
const { sidebar, device } = storeToRefs(appStore);
|
const { showSettings, theme, tagsView: needTagsView, fixedHeader, secondMenuPopup } = storeToRefs(settingsStore);
|
const { uname, sessionid } = storeToRefs(userStore);
|
const { logout } = userStore;
|
const { closeSidebar, toggleSidebar } = appStore;
|
|
const { ukey, face } = config;
|
|
|
|
const throttleConect = throttle(pingpong, 1000);
|
const isCollapseM = ref(false);
|
const classObj = computed(() => {
|
return {
|
hideSidebar: !sidebar.value.opened,
|
openSidebar: sidebar.value.opened,
|
withoutAnimation: sidebar.value.withoutAnimation,
|
mobile: device.value === "mobile",
|
};
|
});
|
|
const isCollapse = computed(() => {
|
if (secondMenuPopup.value) {
|
return true;
|
}
|
return !sidebar.value.opened;
|
});
|
|
watch(() => theme.value, () => {
|
changeTheme(theme.value);
|
}, { immediate: true });
|
|
watch(() => isCollapse.value, () => {
|
isCollapseM.value = isCollapse.value;
|
}, { immediate: true });
|
|
watch(() => isIn.value, async () => {
|
if (ukey && !isIn.value) {
|
await logout();
|
router.push(`/login?redirect=${route.fullPath}`);
|
}
|
}, { immediate: true });
|
|
function handleClickOutside() {
|
closeSidebar({ withoutAnimation: false });
|
}
|
|
function handleClose() {
|
toggleSidebar();
|
}
|
|
onMounted(() => {
|
document.addEventListener("click", () => throttleConect(sessionid.value, uname.value));
|
document.addEventListener("mousemove", () => throttleConect(sessionid.value, uname.value));
|
document.addEventListener("keydown", () => throttleConect(sessionid.value, uname.value));
|
});
|
onBeforeUnmount(() => {
|
document.removeEventListener("click", () => throttleConect(sessionid.value, uname.value));
|
document.removeEventListener("mousemove", () => throttleConect(sessionid.value, uname.value));
|
document.removeEventListener("keydown", () => throttleConect(sessionid.value, uname.value));
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
@use "@/styles/mixin.scss";
|
|
.app-wrapper {
|
// @include clearfix;
|
position: relative;
|
height: 100%;
|
width: 100%;
|
|
&.mobile.openSidebar {
|
position: fixed;
|
top: 0;
|
}
|
}
|
|
.drawer-bg {
|
background: #000;
|
opacity: 0.3;
|
width: 100%;
|
top: 0;
|
height: 100%;
|
position: absolute;
|
z-index: 999;
|
}
|
|
.fixed-header {
|
position: fixed;
|
top: 0;
|
right: 0;
|
z-index: 9;
|
width: calc(100%);
|
transition: width 0.28s;
|
}
|
|
.hideSidebar .fixed-header {
|
width: calc(100%);
|
}
|
|
.mobile .fixed-header {
|
width: 100%;
|
}
|
</style>
|
