| | |
| | | <template> |
| | | <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> |
| | | <div :class="classObj" class="app-wrapper"> |
| | | <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> |
| | | <sidebar class="sidebar-container"/> |
| | | <div :class="{hasTagsView:needTagsView}" class="main-container"> |
| | |
| | | import ResizeMixin from './mixin/ResizeHandler' |
| | | import { mapState } from 'vuex' |
| | | import variables from '@/assets/styles/variables.scss' |
| | | import { applyTheme, setStoredTheme } from '@/utils/theme' |
| | | |
| | | export default { |
| | | name: 'Layout', |
| | |
| | | return variables; |
| | | } |
| | | }, |
| | | created() { |
| | | // 进入 Layout 时应用当前主题色(并记住选择) |
| | | this.applyCurrentTheme() |
| | | }, |
| | | watch: { |
| | | theme(val) { |
| | | this.applyCurrentTheme() |
| | | setStoredTheme(val) |
| | | } |
| | | }, |
| | | methods: { |
| | | applyCurrentTheme() { |
| | | applyTheme(this.theme) |
| | | }, |
| | | handleClickOutside() { |
| | | this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) |
| | | } |