github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/layout/components/AppViewLanding.vue (about)

     1  <script setup lang="ts">
     2  import {useTagsViewStore} from '@/store/modules/tagsView'
     3  import {useAppStore} from '@/store/modules/app'
     4  import {Footer} from '@/components/Footer'
     5  import {computed, onMounted, onUnmounted} from 'vue'
     6  import {Terminal} from "@/components/Terminal";
     7  import {eventBus} from "@/components/EventBus";
     8  
     9  const appStore = useAppStore()
    10  
    11  const layout = computed(() => appStore.getLayout)
    12  
    13  const fixedHeader = computed(() => appStore.getFixedHeader)
    14  
    15  const footer = computed(() => appStore.getFooter)
    16  
    17  const tagsViewStore = useTagsViewStore()
    18  
    19  const getCaches = computed((): string[] => {
    20    return tagsViewStore.getCachedViews
    21  })
    22  
    23  const onKeydown = (event) => {
    24    // console.log(event.code, event.keyCode);
    25    eventBus.emit('keydown', event)
    26    if (event.key === "Escape") {
    27      appStore.setTerminal(false)
    28    }
    29  }
    30  
    31  onMounted(() => {
    32    document.addEventListener("keydown", onKeydown, {passive: true})
    33  })
    34  
    35  onUnmounted(() => {
    36    document.removeEventListener("keydown", onKeydown)
    37  })
    38  
    39  </script>
    40  
    41  <template>
    42    <section
    43      :class="[
    44        'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
    45        '!min-h-[calc(100%)]',
    46        'h-[calc(100%)]',
    47        {
    48          '!min-h-[calc(100%-var(--app-footer-height))]':
    49            ((fixedHeader && (layout === 'classic' || layout === 'topLeft')) || layout === 'top') &&
    50            footer,
    51  
    52          '!min-h-[calc(100%-var(--tags-view-height)-var(--top-tool-height)-var(--app-footer-height))]':
    53            !fixedHeader && layout === 'classic' && footer,
    54  
    55          '!min-h-[calc(100%-var(--tags-view-height)-var(--app-footer-height))]':
    56            !fixedHeader && (layout === 'topLeft' || layout === 'top') && footer,
    57  
    58          '!min-h-[calc(100%-var(--top-tool-height))]': fixedHeader && layout === 'cutMenu' && footer,
    59  
    60          '!min-h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))]':
    61            !fixedHeader && layout === 'cutMenu' && footer
    62        }
    63      ]"
    64    >
    65      <router-view>
    66        <template #default="{ Component, route }">
    67          <keep-alive :include="getCaches">
    68            <component :is="Component" :key="route.fullPath"/>
    69          </keep-alive>
    70        </template>
    71      </router-view>
    72    </section>
    73    <Footer v-if="footer"/>
    74    <Terminal/>
    75  </template>