Newer
Older
urbanLifeline_YanAn / src / layout / index.vue
@zhangqy zhangqy on 3 Oct 3 KB first commit
  1. <template>
  2. <!-- 部分全屏页面 -->
  3. <app-main v-if="FullScreen" />
  4. <div
  5. v-else
  6. :class="classObj"
  7. class="app-wrapper"
  8. :style="{ '--current-color': theme }"
  9. >
  10. <div
  11. v-if="device === 'mobile' && sidebar.opened"
  12. class="drawer-bg"
  13. @click="handleClickOutside"
  14. />
  15. <sidebar v-if="!sidebar.hide" class="sidebar-container" />
  16. <div
  17. :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
  18. class="main-container"
  19. >
  20. <div :class="{ 'fixed-header': fixedHeader }">
  21. <navbar @setLayout="setLayout" />
  22. <tags-view v-if="needTagsView" />
  23. </div>
  24. <app-main />
  25. <settings ref="settingRef" />
  26. </div>
  27. </div>
  28. </template>
  29.  
  30. <script setup>
  31. import { useWindowSize } from "@vueuse/core";
  32. import Sidebar from "./components/Sidebar/index.vue";
  33. import { AppMain, Navbar, Settings, TagsView } from "./components";
  34. import defaultSettings from "@/settings";
  35.  
  36. import useAppStore from "@/store/modules/app";
  37. import useSettingsStore from "@/store/modules/settings";
  38. import { useRouter } from "vue-router";
  39. import { ref } from "vue";
  40. const router = useRouter();
  41. const settingsStore = useSettingsStore();
  42. const theme = computed(() => settingsStore.theme);
  43. const sideTheme = computed(() => settingsStore.sideTheme);
  44. const sidebar = computed(() => useAppStore().sidebar);
  45. const device = computed(() => useAppStore().device);
  46. const needTagsView = computed(() => settingsStore.tagsView);
  47. const fixedHeader = computed(() => settingsStore.fixedHeader);
  48.  
  49. const classObj = computed(() => ({
  50. hideSidebar: !sidebar.value.opened,
  51. openSidebar: sidebar.value.opened,
  52. withoutAnimation: sidebar.value.withoutAnimation,
  53. mobile: device.value === "mobile",
  54. }));
  55.  
  56. const { width, height } = useWindowSize();
  57. const WIDTH = 992; // refer to Bootstrap's responsive design
  58.  
  59. watchEffect(() => {
  60. if (device.value === "mobile" && sidebar.value.opened) {
  61. useAppStore().closeSideBar({ withoutAnimation: false });
  62. }
  63. if (width.value - 1 < WIDTH) {
  64. useAppStore().toggleDevice("mobile");
  65. useAppStore().closeSideBar({ withoutAnimation: true });
  66. } else {
  67. useAppStore().toggleDevice("desktop");
  68. }
  69. });
  70.  
  71. function handleClickOutside() {
  72. useAppStore().closeSideBar({ withoutAnimation: false });
  73. }
  74.  
  75. const settingRef = ref(null);
  76. function setLayout() {
  77. settingRef.value.openSetting();
  78. }
  79. const FullScreen = ref(false);
  80. watch(
  81. () => router.currentRoute.value.path,
  82. (newValue, oldValue) => {
  83. console.log(
  84. "watch路由变化",
  85. newValue,
  86. router.currentRoute.value.query.type
  87. );
  88. if (router.currentRoute.value.query.type == "FullScreen") {
  89. // 全屏页面
  90. FullScreen.value = true;
  91. } else {
  92. // 非全屏页面
  93. FullScreen.value = false;
  94. }
  95. },
  96. { immediate: true }
  97. );
  98. </script>
  99.  
  100. <style lang="scss" scoped>
  101. @import "@/assets/styles/mixin.scss";
  102. @import "@/assets/styles/variables.module.scss";
  103.  
  104. .app-wrapper {
  105. @include clearfix;
  106. position: relative;
  107. height: 100%;
  108. width: 100%;
  109.  
  110. &.mobile.openSidebar {
  111. position: fixed;
  112. top: 0;
  113. }
  114. }
  115.  
  116. .drawer-bg {
  117. background: #000;
  118. opacity: 0.3;
  119. width: 100%;
  120. top: 0;
  121. height: 100%;
  122. position: absolute;
  123. z-index: 999;
  124. }
  125.  
  126. .fixed-header {
  127. position: fixed;
  128. top: 0;
  129. right: 0;
  130. z-index: 9;
  131. width: calc(100% - #{$base-sidebar-width});
  132. transition: width 0.28s;
  133. }
  134.  
  135. .hideSidebar .fixed-header {
  136. width: calc(100% - 54px);
  137. }
  138.  
  139. .sidebarHide .fixed-header {
  140. width: 100%;
  141. }
  142.  
  143. .mobile .fixed-header {
  144. width: 100%;
  145. }
  146. </style>