github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/layout/components/AppView.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 tagsView = computed(() => appStore.getTagsView)
    18  
    19  const tagsViewStore = useTagsViewStore()
    20  
    21  const getCaches = computed((): string[] => {
    22    return tagsViewStore.getCachedViews
    23  })
    24  
    25  const onKeydown = (event) => {
    26    // console.log(event.code, event.keyCode);
    27    eventBus.emit('keydown', event)
    28    if (event.key === "Escape") {
    29      appStore.setTerminal(false)
    30    }
    31    // if (event.key === "`") {
    32    //   appStore.setTerminal(!appStore.getTerminal)
    33    // }
    34  }
    35  
    36  onMounted(() => {
    37    document.addEventListener("keydown", onKeydown, {passive: true})
    38  })
    39  
    40  onUnmounted(() => {
    41    document.removeEventListener("keydown", onKeydown)
    42  })
    43  
    44  </script>
    45  
    46  <template>
    47    <section
    48      :class="[
    49        'p-[var(--app-content-padding)] w-[100%] bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
    50        {
    51          '!min-h-[calc(100%-var(--top-tool-height))]': !tagsView,
    52          'h-[calc(100%-var(--top-tool-height))]': !tagsView,
    53  
    54          '!min-h-[calc(100%-var(--top-tool-height)-var(--tags-view-full-height))]': tagsView,
    55          'h-[calc(100%-var(--top-tool-height)-var(--tags-view-full-height))]': tagsView,
    56        },
    57        {
    58          '!min-h-[calc(100%-var(--app-footer-height))]':
    59            ((fixedHeader && (layout === 'classic' || layout === 'topLeft')) || layout === 'top') &&
    60            footer,
    61  
    62          '!min-h-[calc(100%-var(--tags-view-height)-var(--top-tool-height)-var(--app-footer-height))]':
    63            !fixedHeader && layout === 'classic' && footer,
    64  
    65          '!min-h-[calc(100%-var(--tags-view-height)-var(--app-footer-height))]':
    66            !fixedHeader && (layout === 'topLeft' || layout === 'top') && footer,
    67  
    68          '!min-h-[calc(100%-var(--top-tool-height))]': fixedHeader && layout === 'cutMenu' && footer,
    69  
    70          '!min-h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))]':
    71            !fixedHeader && layout === 'cutMenu' && footer
    72        }
    73      ]"
    74    >
    75      <router-view>
    76        <template #default="{ Component, route }">
    77          <keep-alive :include="getCaches">
    78            <component :is="Component" :key="route.fullPath"/>
    79          </keep-alive>
    80        </template>
    81      </router-view>
    82    </section>
    83    <Footer v-if="footer"/>
    84    <Terminal/>
    85  </template>