AppView.vue 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <script lang="ts" setup>
  2. import { useTagsViewStore } from '@/store/modules/tagsView'
  3. import { useAppStore } from '@/store/modules/app'
  4. import { Footer } from '@/layout/components/Footer'
  5. defineOptions({ name: 'AppView' })
  6. const appStore = useAppStore()
  7. const layout = computed(() => appStore.getLayout)
  8. const fixedHeader = computed(() => appStore.getFixedHeader)
  9. const footer = computed(() => appStore.getFooter)
  10. const tagsViewStore = useTagsViewStore()
  11. const getCaches = computed((): string[] => {
  12. return tagsViewStore.getCachedViews
  13. })
  14. const tagsView = computed(() => appStore.getTagsView)
  15. </script>
  16. <template>
  17. <section
  18. :class="[
  19. 'p-[var(--app-content-padding)] w-[calc(100%-var(--app-content-padding)-var(--app-content-padding))] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
  20. {
  21. '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
  22. (fixedHeader &&
  23. (layout === 'classic' || layout === 'topLeft' || layout === 'top') &&
  24. footer) ||
  25. (!tagsView && layout === 'top' && footer),
  26. '!min-h-[calc(100%-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height)-var(--tags-view-height))]':
  27. tagsView && layout === 'top' && footer,
  28. '!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--top-tool-height)-var(--app-footer-height))]':
  29. !fixedHeader && layout === 'classic' && footer,
  30. '!min-h-[calc(100%-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-var(--app-footer-height))]':
  31. !fixedHeader && layout === 'topLeft' && footer,
  32. '!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding))]':
  33. fixedHeader && layout === 'cutMenu' && footer,
  34. '!min-h-[calc(100%-var(--top-tool-height)-var(--app-content-padding)-var(--app-content-padding)-var(--tags-view-height))]':
  35. !fixedHeader && layout === 'cutMenu' && footer
  36. }
  37. ]"
  38. >
  39. <router-view>
  40. <template #default="{ Component, route }">
  41. <keep-alive :include="getCaches">
  42. <component :is="Component" :key="route.fullPath" />
  43. </keep-alive>
  44. </template>
  45. </router-view>
  46. </section>
  47. <Footer v-if="footer" />
  48. </template>