U 修改完成

he wei

2025-01-15 20cfb19d192127e304a081ceb60ca9052f813bf7

 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,57 +13,120 @@
      </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>
import RightPanel from '@/components/RightPanel';
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components';
import ResizeMixin from './mixin/ResizeHandler';
import { mapState } from 'pinia';
import store from '@/store';
import { defineComponent } from 'vue';
   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,
    Sidebar,
    TagsView
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState(store.app, ['sidebar', 'device']),
    ...mapState(store.settings, {
      showSettings: 'showSettings',
      needTagsView: 'tagsView',
      fixedHeader: 'fixedHeader'
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      };
    }
  },
  methods: {
    handleClickOutside() {
      store.app().closeSidebar({ withoutAnimation: false });
    }
  }
});
   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
      }
      },
      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";
// @import "@/styles/variables.module.scss";
@use "@/styles/mixin.scss";

.app-wrapper {
  @include clearfix;
  // @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
@@ -89,12 +152,12 @@
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - var(--side-bar-width));
  width: calc(100%);
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px)
  width: calc(100%);
}

.mobile .fixed-header {