<script setup>
|
import { ref, onMounted, onUnmounted } from "vue";
|
import { Navbar, Sidebar, AppMain, TagsView } from "./components";
|
import useElement from "@/hooks/useElement.js";
|
import { useTagsViewStore } from "@/stores/tagsView";
|
import { useRouter } from "vue-router";
|
import { throttle } from "@/assets/js/tools/throttle.js";
|
import { pingpong } from "@/views/login/api.js";
|
const $router = useRouter();
|
const { $alert } = useElement();
|
const { delAllViews, delCachedView, delView, delOthersViews } =
|
useTagsViewStore();
|
|
let timer;
|
|
const timeoutId = ref(0);
|
|
function handleClickOutside() {}
|
// function resetTimeout() {
|
// clearTimeout(timeoutId.value); // 清除之前的定时器
|
// timeoutId.value = window.setTimeout(() => {
|
// // 超时后的操作
|
// $alert("超过30分钟未操作，系统自动退出！");
|
|
// // 退出登录
|
// outSystem();
|
// }, 30 * 60 * 1000); // 重置为30分钟
|
// }
|
// function outSystem() {
|
// sessionStorage.removeItem("username");
|
// sessionStorage.removeItem("userId");
|
// sessionStorage.removeItem("userPower");
|
// delAllViews().then(() => {
|
// $router.push("/login");
|
// });
|
// }
|
|
const throttleConect = throttle(pingpong, 1000);
|
// function conect() {
|
// pingpong();
|
// }
|
|
onMounted(() => {
|
document.addEventListener("click", throttleConect);
|
document.addEventListener("mousemove", throttleConect);
|
document.addEventListener("keydown", throttleConect);
|
// 开启超时30分钟未操作，退出登录
|
// resetTimeout();
|
// // 绑定用户交互事件以重置定时器
|
// document.addEventListener("click", resetTimeout);
|
// document.addEventListener("mousemove", resetTimeout);
|
// document.addEventListener("keydown", resetTimeout);
|
});
|
onUnmounted(() => {
|
document.removeEventListener("click", throttleConect);
|
document.removeEventListener("mousemove", throttleConect);
|
document.removeEventListener("keydown", throttleConect);
|
});
|
</script>
|
|
<template>
|
<div class="main-warp">
|
<div v-if="false" class="drawer-bg" @click="handleClickOutside" />
|
<sidebar />
|
<div class="hasTagsView main-container">
|
<div class="page-contain">
|
<div class="header">
|
<navbar />
|
<tags-view />
|
</div>
|
<div class="content">
|
<app-main />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style lang="less" scoped>
|
.main-warp {
|
height: 100%;
|
}
|
.main-container {
|
height: 100%;
|
}
|
.page-contain {
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
.header {
|
}
|
.content {
|
flex: 1;
|
// background: #000;
|
}
|
}
|
.drawer-bg {
|
background: #000;
|
opacity: 0.3;
|
width: 100%;
|
top: 0;
|
left: 0;
|
bottom: 0;
|
right: 0;
|
height: 100%;
|
position: absolute;
|
z-index: 999;
|
}
|
</style>
|
