| | |
| | | <template> |
| | | <section class="app-main"> |
| | | <router-view v-slot="{ Component, route }"> |
| | | <transition name="fade-transform" mode="out-in"> |
| | | <keep-alive :include="tagsViewStore.cachedViews"> |
| | | <component v-if="!route.meta.link" :is="Component" :key="route.path"/> |
| | | <transition v-if="!route.meta.noCache" :enter-active-class="animante" mode="out-in"> |
| | | <keep-alive v-if="!route.meta.noCache" :include="tagsViewStore.cachedViews"> |
| | | <component :is="Component" v-if="!route.meta.link" :key="route.path" /> |
| | | </keep-alive> |
| | | </transition> |
| | | <transition v-if="route.meta.noCache" :enter-active-class="animante" mode="out-in"> |
| | | <component :is="Component" v-if="!route.meta.link && route.meta.noCache" :key="route.path" /> |
| | | </transition> |
| | | </router-view> |
| | | <iframe-toggle /> |
| | | </section> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import iframeToggle from "./IframeToggle/index" |
| | | import useTagsViewStore from '@/store/modules/tagsView' |
| | | <script setup name="AppMain" lang="ts"> |
| | | import useSettingsStore from '@/store/modules/settings'; |
| | | import useTagsViewStore from '@/store/modules/tagsView'; |
| | | |
| | | const tagsViewStore = useTagsViewStore() |
| | | import IframeToggle from './IframeToggle/index.vue'; |
| | | const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
| | | const route = useRoute(); |
| | | const tagsViewStore = useTagsViewStore(); |
| | | |
| | | // 随机动画集合 |
| | | const animante = ref<string>(''); |
| | | const animationEnable = ref(useSettingsStore().animationEnable); |
| | | watch( |
| | | () => useSettingsStore().animationEnable, |
| | | (val: boolean) => { |
| | | animationEnable.value = val; |
| | | if (val) { |
| | | animante.value = proxy?.animate.animateList[Math.round(Math.random() * proxy?.animate.animateList.length)] as string; |
| | | } else { |
| | | animante.value = proxy?.animate.defaultAnimate as string; |
| | | } |
| | | }, |
| | | { immediate: true } |
| | | ); |
| | | |
| | | onMounted(() => { |
| | | addIframe() |
| | | }) |
| | | |
| | | watchEffect((route) => { |
| | | addIframe() |
| | | }) |
| | | |
| | | function addIframe() { |
| | | if (route.meta.link) { |
| | | useTagsViewStore().addIframeView(route) |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | <style lang="scss"> |
| | | // fix css style bug in open el-dialog |
| | | .el-popup-parent--hidden { |
| | | .fixed-header { |
| | | padding-right: 17px; |
| | | padding-right: 6px; |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | ::-webkit-scrollbar { |
| | | width: 6px; |
| | | height: 6px; |
| | | } |
| | | |
| | | ::-webkit-scrollbar-track { |
| | | background-color: #f1f1f1; |
| | | } |
| | | |
| | | ::-webkit-scrollbar-thumb { |
| | | background-color: #c0c0c0; |
| | | border-radius: 3px; |
| | | } |
| | | </style> |