| | |
| | | <template>
|
| | | <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
|
| | | <el-scrollbar>
|
| | | <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
| | | <sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
| | | <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
|
| | | <div :class="{ 'fixed-header': fixedHeader }">
|
| | | <navbar @setLayout="setLayout" />
|
| | | <tags-view v-if="needTagsView" />
|
| | | </div>
|
| | | <app-main />
|
| | | <settings ref="settingRef" />
|
| | | <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
| | | <sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
| | | <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
|
| | | <div :class="{ 'fixed-header': fixedHeader }">
|
| | | <navbar @setLayout="setLayout" />
|
| | | <tags-view v-if="needTagsView" />
|
| | | </div>
|
| | | </el-scrollbar>
|
| | | <app-main />
|
| | | <settings ref="settingRef" />
|
| | | </div>
|
| | | </div>
|
| | | </template>
|
| | |
|
| | |
| | | import useSettingsStore from '@/store/modules/settings'
|
| | |
|
| | | const settingsStore = useSettingsStore()
|
| | | const theme = computed(() => settingsStore.theme);
|
| | | const sideTheme = computed(() => settingsStore.sideTheme);
|
| | | const sidebar = computed(() => useAppStore().sidebar);
|
| | | const device = computed(() => useAppStore().device);
|
| | | const needTagsView = computed(() => settingsStore.tagsView);
|
| | | const fixedHeader = computed(() => settingsStore.fixedHeader);
|
| | | const theme = computed(() => settingsStore.theme)
|
| | | const sideTheme = computed(() => settingsStore.sideTheme)
|
| | | const sidebar = computed(() => useAppStore().sidebar)
|
| | | const device = computed(() => useAppStore().device)
|
| | | const needTagsView = computed(() => settingsStore.tagsView)
|
| | | const fixedHeader = computed(() => settingsStore.fixedHeader)
|
| | |
|
| | | const classObj = computed(() => ({
|
| | | hideSidebar: !sidebar.value.opened,
|
| | |
| | | mobile: device.value === 'mobile'
|
| | | }))
|
| | |
|
| | | const { width, height } = useWindowSize();
|
| | | const WIDTH = 992; // refer to Bootstrap's responsive design
|
| | | const { width, height } = useWindowSize()
|
| | | const WIDTH = 992 // refer to Bootstrap's responsive design
|
| | |
|
| | | watchEffect(() => {
|
| | | watch(() => device.value, () => {
|
| | | if (device.value === 'mobile' && sidebar.value.opened) {
|
| | | useAppStore().closeSideBar({ withoutAnimation: false })
|
| | | }
|
| | | })
|
| | |
|
| | | watchEffect(() => {
|
| | | if (width.value - 1 < WIDTH) {
|
| | | useAppStore().toggleDevice('mobile')
|
| | | useAppStore().closeSideBar({ withoutAnimation: true })
|
| | |
| | | useAppStore().closeSideBar({ withoutAnimation: false })
|
| | | }
|
| | |
|
| | | const settingRef = ref(null);
|
| | | const settingRef = ref(null)
|
| | | function setLayout() {
|
| | | settingRef.value.openSetting();
|
| | | settingRef.value.openSetting()
|
| | | }
|
| | | </script>
|
| | |
|
| | |
| | | position: relative;
|
| | | height: 100%;
|
| | | width: 100%;
|
| | |
|
| | | .el-scrollbar {
|
| | | height: 100%;
|
| | | }
|
| | |
|
| | | :deep(.el-scrollbar__bar).is-vertical {
|
| | | z-index: 10;
|
| | | }
|
| | |
|
| | | :deep(.el-scrollbar__wrap) {
|
| | | overflow-x: hidden;
|
| | | }
|
| | |
|
| | | &.mobile.openSidebar {
|
| | | position: fixed;
|