yyt
2024-06-26 572f63fab7f868f3fc5037c4dc7c46e397511597
提交 | 用户 | 时间
0cceb6 1 <template>
Y 2   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
3     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
4     <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
5     <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
6       <div :class="{'fixed-header':fixedHeader}">
7         <navbar/>
8         <tags-view v-if="needTagsView"/>
9       </div>
10       <app-main/>
11       <right-panel>
12         <settings/>
13       </right-panel>
14     </div>
15   </div>
16 </template>
17
18 <script>
19 import RightPanel from '@/components/RightPanel'
20 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
21 import ResizeMixin from './mixin/ResizeHandler'
22 import { mapState } from 'vuex'
23 import variables from '@/assets/styles/variables.scss'
24
25 export default {
26   name: 'Layout',
27   components: {
28     AppMain,
29     Navbar,
30     RightPanel,
31     Settings,
32     Sidebar,
33     TagsView
34   },
35   mixins: [ResizeMixin],
36   computed: {
37     ...mapState({
38       theme: state => state.settings.theme,
39       sideTheme: state => state.settings.sideTheme,
40       sidebar: state => state.app.sidebar,
41       device: state => state.app.device,
42       needTagsView: state => state.settings.tagsView,
43       fixedHeader: state => state.settings.fixedHeader
44     }),
45     classObj() {
46       return {
47         hideSidebar: !this.sidebar.opened,
48         openSidebar: this.sidebar.opened,
49         withoutAnimation: this.sidebar.withoutAnimation,
50         mobile: this.device === 'mobile'
51       }
52     },
53     variables() {
54       return variables;
55     }
56   },
57   methods: {
58     handleClickOutside() {
59       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
60     }
61   }
62 }
63 </script>
64
65 <style lang="scss" scoped>
66   @import "~@/assets/styles/mixin.scss";
67   @import "~@/assets/styles/variables.scss";
68
69   .app-wrapper {
70     @include clearfix;
71     position: relative;
72     height: 100%;
73     width: 100%;
74
75     &.mobile.openSidebar {
76       position: fixed;
77       top: 0;
78     }
79   }
80
81   .drawer-bg {
82     background: #000;
83     opacity: 0.3;
84     width: 100%;
85     top: 0;
86     height: 100%;
87     position: absolute;
88     z-index: 999;
89   }
90
91   .fixed-header {
92     position: fixed;
93     top: 0;
94     right: 0;
95     z-index: 9;
96     width: calc(100% - #{$base-sidebar-width});
97     transition: width 0.28s;
98   }
99
100   .hideSidebar .fixed-header {
101     width: calc(100% - 54px);
102   }
103
104   .sidebarHide .fixed-header {
105     width: 100%;
106   }
107
108   .mobile .fixed-header {
109     width: 100%;
110   }
111 </style>