index.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <div class="_layout">
  3. <div class="layout-left">
  4. <Menus />
  5. </div>
  6. <div class="layout-right">
  7. <div class="layout-header">
  8. <Header />
  9. <TagList />
  10. </div>
  11. <div class="layout-content" v-show="isFrameView">
  12. <iframe
  13. v-show="currentIframeId === item['query']['iFrameId']"
  14. v-for="(item, index) in iframeViews"
  15. :key="index"
  16. :src="item['query']['url']"
  17. ></iframe>
  18. </div>
  19. <div class="layout-content" v-show="!isFrameView">
  20. <router-view>
  21. <template #default="{ Component, route }">
  22. <keep-alive :include="getCaches">
  23. <component :is="Component" :key="route.fullPath" />
  24. </keep-alive>
  25. </template>
  26. </router-view>
  27. </div>
  28. </div>
  29. </div>
  30. </template>
  31. <script setup lang="ts">
  32. import { useTagsViewStore } from '@/store/modules/tagsView'
  33. import Header from './header.vue'
  34. import TagList from './tagList.vue'
  35. import Menus from './menus.vue'
  36. import subscribe from '@/utils/Subscribe'
  37. defineOptions({ name: 'Layout' })
  38. const tagsViewStore = useTagsViewStore()
  39. const route = useRoute()
  40. const isFrameView = ref<boolean>(false)
  41. const iframeViews = ref<any[]>([])
  42. const currentIframeId = ref<string>('')
  43. const getCaches = computed((): string[] => {
  44. return tagsViewStore.getCachedViews
  45. })
  46. const filterIframe = (arr): any[] => {
  47. return arr.filter((item) => {
  48. if (item && item.query && item.query.iframe == '1') {
  49. return item.query.iframe == '1'
  50. }
  51. })
  52. }
  53. subscribe.on('update:tagsView', () => {
  54. isFrameView.value = route.query.iframe === '1' ? true : false
  55. nextTick(() => {
  56. iframeViews.value = filterIframe(tagsViewStore.visitedViews)
  57. if (!route.query.iframe) {
  58. currentIframeId.value = ''
  59. } else {
  60. currentIframeId.value = route.query.iFrameId as string
  61. }
  62. })
  63. })
  64. watch(
  65. () => route.query,
  66. () => {
  67. isFrameView.value = route.query.iframe === '1' ? true : false
  68. nextTick(() => {
  69. iframeViews.value = filterIframe(tagsViewStore.visitedViews)
  70. if (!route.query.iframe) {
  71. currentIframeId.value = ''
  72. } else {
  73. currentIframeId.value = route.query.iFrameId as string
  74. }
  75. })
  76. },
  77. {
  78. immediate: true
  79. }
  80. )
  81. </script>
  82. <style>
  83. @import url('./content.scss');
  84. </style>
  85. <style lang="scss" scoped>
  86. ._layout {
  87. display: flex;
  88. width: 100%;
  89. height: 100%;
  90. box-sizing: border-box;
  91. align-items: center;
  92. justify-content: space-between;
  93. .layout-left {
  94. width: 184px;
  95. height: 100%;
  96. background: linear-gradient(180deg, #336fb6 0%, #0c4689 100%);
  97. }
  98. .layout-right {
  99. width: calc(100% - 184px);
  100. height: 100%;
  101. padding: 15px;
  102. background: #eaf1f9;
  103. .layout-header {
  104. width: 100%;
  105. height: 100px;
  106. }
  107. .layout-content {
  108. width: 100%;
  109. height: calc(100% - 140px);
  110. margin-top: 40px;
  111. }
  112. }
  113. }
  114. div,
  115. h1,
  116. h2,
  117. h3,
  118. h4,
  119. h5,
  120. h6,
  121. p,
  122. ul,
  123. li {
  124. box-sizing: border-box;
  125. }
  126. iframe {
  127. width: 100%;
  128. height: 100%;
  129. border: 0px;
  130. }
  131. </style>