123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <template>
- <div class="_layout">
- <div class="layout-left">
- <Menus />
- </div>
- <div class="layout-right">
- <div class="layout-header">
- <Header />
- <TagList />
- </div>
- <div class="layout-content" v-show="isFrameView">
- <iframe
- v-show="currentIframeId === item['query']['iFrameId']"
- v-for="(item, index) in iframeViews"
- :key="index"
- :src="item['query']['url']"
- ></iframe>
- </div>
- <div class="layout-content" v-show="!isFrameView">
- <router-view>
- <template #default="{ Component, route }">
- <keep-alive :include="getCaches">
- <component :is="Component" :key="route.fullPath" />
- </keep-alive>
- </template>
- </router-view>
- </div>
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { useTagsViewStore } from '@/store/modules/tagsView'
- import Header from './header.vue'
- import TagList from './tagList.vue'
- import Menus from './menus.vue'
- import subscribe from '@/utils/Subscribe'
- defineOptions({ name: 'Layout' })
- const tagsViewStore = useTagsViewStore()
- const route = useRoute()
- const isFrameView = ref<boolean>(false)
- const iframeViews = ref<any[]>([])
- const currentIframeId = ref<string>('')
- const getCaches = computed((): string[] => {
- return tagsViewStore.getCachedViews
- })
- const filterIframe = (arr): any[] => {
- return arr.filter((item) => {
- if (item && item.query && item.query.iframe == '1') {
- return item.query.iframe == '1'
- }
- })
- }
- subscribe.on('update:tagsView', () => {
- isFrameView.value = route.query.iframe === '1' ? true : false
- nextTick(() => {
- iframeViews.value = filterIframe(tagsViewStore.visitedViews)
- if (!route.query.iframe) {
- currentIframeId.value = ''
- } else {
- currentIframeId.value = route.query.iFrameId as string
- }
- })
- })
- watch(
- () => route.query,
- () => {
- isFrameView.value = route.query.iframe === '1' ? true : false
- nextTick(() => {
- iframeViews.value = filterIframe(tagsViewStore.visitedViews)
- if (!route.query.iframe) {
- currentIframeId.value = ''
- } else {
- currentIframeId.value = route.query.iFrameId as string
- }
- })
- },
- {
- immediate: true
- }
- )
- </script>
- <style>
- @import url('./content.scss');
- </style>
- <style lang="scss" scoped>
- ._layout {
- display: flex;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- align-items: center;
- justify-content: space-between;
- .layout-left {
- width: 184px;
- height: 100%;
- background: linear-gradient(180deg, #336fb6 0%, #0c4689 100%);
- }
- .layout-right {
- width: calc(100% - 184px);
- height: 100%;
- padding: 15px;
- background: #eaf1f9;
- .layout-header {
- width: 100%;
- height: 100px;
- }
- .layout-content {
- width: 100%;
- height: calc(100% - 140px);
- margin-top: 40px;
- }
- }
- }
- div,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- p,
- ul,
- li {
- box-sizing: border-box;
- }
- iframe {
- width: 100%;
- height: 100%;
- border: 0px;
- }
- </style>
|