内容提交

whychdw

2024-12-18 45b4ff5c0b824d2e5b51a6af3c44076d05f0214d

 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,11 +13,20 @@
      </right-panel>
    </div>
  </div>
  <el-drawer
      v-model="isCollapse"
      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 { AppMain, Navbar, Settings, TagsView, Sidebar } from './components';
import ResizeMixin from './mixin/ResizeHandler';
import { mapState } from 'pinia';
import store from '@/store';
@@ -31,8 +40,8 @@
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    TagsView
    TagsView,
    Sidebar
  },
  watch: {
    theme() {
@@ -41,12 +50,14 @@
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState(store.app, ['sidebar']),
    ...mapState(store.app, ['sidebar', 'device']),
    ...mapState(store.settings, {
      theme: 'theme',
      showSettings: 'showSettings',
      needTagsView: 'tagsView',
      fixedHeader: 'fixedHeader'
      fixedHeader: 'fixedHeader',
      secondMenuPopup: 'secondMenuPopup'
    }),
    classObj() {
      return {
@@ -55,11 +66,20 @@
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      };
    },
    isCollapse() {
      if (this.secondMenuPopup) {
        return true;
      }
      return !this.sidebar.opened;
    }
  },
  methods: {
    handleClickOutside() {
      store.app().closeSidebar({ withoutAnimation: false });
    },
    handleClose() {
      store.app().toggleSidebar();
    }
  },
  beforeMount() {
@@ -73,7 +93,6 @@

<style lang="scss" scoped>
@import "@/styles/mixin.scss";
@import "@/styles/element/index.scss";

.app-wrapper {
  @include clearfix;
@@ -102,12 +121,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 {