From 20cfb19d192127e304a081ceb60ca9052f813bf7 Mon Sep 17 00:00:00 2001
From: he wei <858544502@qq.com>
Date: 星期三, 15 一月 2025 13:32:43 +0800
Subject: [PATCH] U 修改完成
---
src/layout/index.vue | 177 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 104 insertions(+), 73 deletions(-)
diff --git a/src/layout/index.vue b/src/layout/index.vue
index ffda442..2de5a66 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,7 +1,7 @@
<template>
<div :class="classObj" class="app-wrapper">
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-<!-- <sidebar class="sidebar-container" />-->
+ <!-- <sidebar class="sidebar-container" />-->
<div :class="{ hasTagsView: needTagsView }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }">
<navbar />
@@ -13,89 +13,120 @@
</right-panel>
</div>
</div>
- <el-drawer
- v-model="isCollapse"
- title="I am the title"
- direction="ltr"
- size="300px"
- :with-header="false"
- :before-close="handleClose">
+ <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>
-import RightPanel from '@/components/RightPanel';
-import { AppMain, Navbar, Settings, TagsView, Sidebar } from './components';
-import ResizeMixin from './mixin/ResizeHandler';
-import { mapState } from 'pinia';
-import store from '@/store';
-import { defineComponent } from 'vue';
-import changeTheme from '@/utils/changeTheme.js';
+ import RightPanel from "@/components/RightPanel";
+ import { AppMain, Navbar, Settings, TagsView, Sidebar } from "./components";
+ import ResizeMixin from "./mixin/ResizeHandler";
+ import { mapState } from "pinia";
+ import store from "@/store";
+ 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';
+ const { ukey, face } = config;
-export default defineComponent({
- name: 'LayoutIndex',
- components: {
- AppMain,
- Navbar,
- RightPanel,
- Settings,
- TagsView,
- Sidebar
- },
- watch: {
- theme() {
- changeTheme(this.theme);
- }
- },
- mixins: [ResizeMixin],
- computed: {
- ...mapState(store.app, ['sidebar']),
- ...mapState(store.app, ['sidebar', 'device']),
- ...mapState(store.settings, {
- theme: 'theme',
- showSettings: 'showSettings',
- needTagsView: 'tagsView',
- fixedHeader: 'fixedHeader',
- secondMenuPopup: 'secondMenuPopup'
- }),
- classObj() {
- return {
- hideSidebar: !this.sidebar.opened,
- openSidebar: this.sidebar.opened,
- withoutAnimation: this.sidebar.withoutAnimation,
- mobile: this.device === 'mobile'
- };
- },
- isCollapse() {
- if (this.secondMenuPopup) {
- return true;
+ const throttleConect = throttle(pingpong, 1000);
+
+ export default defineComponent({
+ name: "LayoutIndex",
+ components: {
+ AppMain,
+ Navbar,
+ RightPanel,
+ Settings,
+ TagsView,
+ Sidebar,
+ },
+ watch: {
+ theme() {
+ changeTheme(this.theme);
+ },
+ isCollapse: {
+ handler(val) {
+ this.isCollapseM = val;
+ },
+ immediate: true,
+ },
+ isIn: {
+ async handler(val) {
+ if (ukey && !val) {
+ await store.user().logout();
+ // console.log('logout', '=============');
+
+ router.push(`/login?redirect=${route.fullPath}`);
+ }
+ },
+ immediate: true
}
- return !this.sidebar.opened;
- }
- },
- methods: {
- handleClickOutside() {
- store.app().closeSidebar({ withoutAnimation: false });
- },
- handleClose() {
- store.app().toggleSidebar();
- }
- },
- beforeMount() {
- changeTheme(this.theme);
- },
- mounted() {
-
- }
-});
+ },
+ mixins: [ResizeMixin],
+ computed: {
+ ...mapState(store.app, ["sidebar"]),
+ ...mapState(store.app, ["sidebar", "device"]),
+ ...mapState(store.ukey, ["isIn"]),
+ ...mapState(store.settings, {
+ theme: "theme",
+ showSettings: "showSettings",
+ needTagsView: "tagsView",
+ fixedHeader: "fixedHeader",
+ secondMenuPopup: "secondMenuPopup",
+ }),
+ classObj() {
+ return {
+ hideSidebar: !this.sidebar.opened,
+ openSidebar: this.sidebar.opened,
+ withoutAnimation: this.sidebar.withoutAnimation,
+ mobile: this.device === "mobile",
+ };
+ },
+ isCollapse() {
+ if (this.secondMenuPopup) {
+ return true;
+ }
+ return !this.sidebar.opened;
+ },
+ },
+ data() {
+ return {
+ isCollapseM: false,
+ };
+ },
+ methods: {
+ handleClickOutside() {
+ store.app().closeSidebar({ withoutAnimation: false });
+ },
+ handleClose() {
+ store.app().toggleSidebar();
+ },
+ },
+ beforeMount() {
+ changeTheme(this.theme);
+ },
+ mounted() {
+ document.addEventListener("click", throttleConect);
+ document.addEventListener("mousemove", throttleConect);
+ document.addEventListener("keydown", throttleConect);
+ },
+ unMounted() {
+ document.removeEventListener("click", throttleConect);
+ document.removeEventListener("mousemove", throttleConect);
+ document.removeEventListener("keydown", throttleConect);
+ },
+ });
</script>
<style lang="scss" scoped>
-@import "@/styles/mixin.scss";
+@use "@/styles/mixin.scss";
.app-wrapper {
- @include clearfix;
+ // @include clearfix;
position: relative;
height: 100%;
width: 100%;
@@ -126,7 +157,7 @@
}
.hideSidebar .fixed-header {
- width: calc(100%)
+ width: calc(100%);
}
.mobile .fixed-header {
--
Gitblit v1.9.1