287 lines
7.3 KiB
Vue
287 lines
7.3 KiB
Vue
<template>
|
|
<a-layout class="layout" :class="{ mobile: appStore.hideMenu }">
|
|
<div v-if="navbar && !route?.meta?.isNewTab && !route?.meta?.is_full" class="layout-navbar">
|
|
<NavBar />
|
|
</div>
|
|
<a-layout>
|
|
<a-layout>
|
|
<a-layout-sider
|
|
v-if="renderMenu"
|
|
v-show="!route?.meta?.is_full"
|
|
class="layout-sider"
|
|
:breakpoint="'xl'"
|
|
:collapsible="true"
|
|
:width="menuWidth"
|
|
:style="{ paddingTop: navbar ? '60px' : '' }"
|
|
:hide-trigger="true"
|
|
@collapse="setCollapsed"
|
|
>
|
|
<div class="menu-wrapper">
|
|
<div class="left-side">
|
|
<a-space>
|
|
<img
|
|
alt="logo"
|
|
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image"
|
|
/>
|
|
<a-typography-title>智能运维管理系统</a-typography-title>
|
|
</a-space>
|
|
</div>
|
|
<Menu />
|
|
</div>
|
|
</a-layout-sider>
|
|
<a-drawer
|
|
v-if="hideMenu"
|
|
:visible="drawerVisible"
|
|
placement="left"
|
|
:footer="false"
|
|
mask-closable
|
|
:closable="false"
|
|
@cancel="drawerCancel"
|
|
>
|
|
<Menu />
|
|
</a-drawer>
|
|
<a-layout class="layout-content" :style="paddingStyle">
|
|
<!-- <TabBar v-if="appStore.tabBar" /> -->
|
|
<a-layout-content>
|
|
<div v-if="showIframe" class="iframe-container">
|
|
<iframe
|
|
:src="iframeUrl"
|
|
frameborder="0"
|
|
class="web-iframe"
|
|
></iframe>
|
|
</div>
|
|
<PageLayout v-else />
|
|
</a-layout-content>
|
|
<Footer v-if="footer" />
|
|
</a-layout>
|
|
</a-layout>
|
|
</a-layout>
|
|
</a-layout>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import Footer from '@/components/footer/index.vue'
|
|
import Menu from '@/components/menu/index.vue'
|
|
import NavBar from '@/components/navbar/index.vue'
|
|
import TabBar from '@/components/tab-bar/index.vue'
|
|
import usePermission from '@/hooks/permission'
|
|
import useResponsive from '@/hooks/responsive'
|
|
import { useAppStore, useUserStore } from '@/store'
|
|
import { computed, onMounted, provide, ref, watch } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import PageLayout from './page-layout.vue'
|
|
import { getToken } from '@/utils/auth'
|
|
|
|
const isInit = ref(false)
|
|
const appStore = useAppStore()
|
|
const userStore = useUserStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const permission = usePermission()
|
|
useResponsive(true)
|
|
const navbarHeight = route?.meta?.isNewTab ? '0' : `60px`
|
|
const navbar = computed(() => appStore.navbar)
|
|
const renderMenu = computed(() => appStore.menu && !appStore.topMenu)
|
|
const hideMenu = computed(() => appStore.hideMenu)
|
|
const footer = computed(() => appStore.footer)
|
|
const menuWidth = computed(() => {
|
|
if (route?.meta?.isNewTab) return 0
|
|
return appStore.menuCollapse ? 48 : appStore.menuWidth
|
|
})
|
|
|
|
console.log('route', route)
|
|
const showIframe = ref(false)
|
|
const iframeUrl = ref('')
|
|
|
|
const updateShowIframe = () => {
|
|
const isWebPage = route?.meta?.is_web_page === true
|
|
const webUrl = route?.meta?.web_url
|
|
|
|
if (isWebPage && webUrl && typeof webUrl === 'string') {
|
|
showIframe.value = true
|
|
// Add token as query parameter to the URL
|
|
const token = getToken()
|
|
if (token && typeof token === 'string') {
|
|
// Parse the URL and add token parameter
|
|
try {
|
|
const url = new URL(webUrl)
|
|
url.searchParams.set('token', token)
|
|
iframeUrl.value = url.toString()
|
|
} catch (error) {
|
|
// If URL is invalid, use it as is
|
|
console.warn('Invalid URL provided for iframe:', webUrl)
|
|
iframeUrl.value = webUrl
|
|
}
|
|
} else {
|
|
// No token available, use URL as is
|
|
iframeUrl.value = webUrl
|
|
}
|
|
} else {
|
|
showIframe.value = false
|
|
iframeUrl.value = ''
|
|
}
|
|
}
|
|
|
|
// Watch for route changes to update iframe display
|
|
watch(
|
|
() => [route.fullPath, route.meta],
|
|
() => {
|
|
updateShowIframe()
|
|
},
|
|
{ immediate: true, deep: true }
|
|
)
|
|
|
|
const paddingStyle = computed(() => {
|
|
const paddingLeft = renderMenu.value && !hideMenu.value && !route?.meta?.is_full ? { paddingLeft: `${menuWidth.value}px` } : {}
|
|
const paddingTop = navbar.value && !route?.meta?.is_full ? { paddingTop: navbarHeight } : {}
|
|
return { ...paddingLeft, ...paddingTop }
|
|
})
|
|
const setCollapsed = (val: boolean) => {
|
|
if (!isInit.value) return // for page initialization menu state problem
|
|
appStore.updateSettings({ menuCollapse: val })
|
|
}
|
|
watch(
|
|
() => userStore.role,
|
|
(roleValue) => {
|
|
if (roleValue && !permission.accessRouter(route)) router.push({ name: 'notFound' })
|
|
}
|
|
)
|
|
const drawerVisible = ref(false)
|
|
const drawerCancel = () => {
|
|
drawerVisible.value = false
|
|
}
|
|
provide('toggleDrawerMenu', () => {
|
|
drawerVisible.value = !drawerVisible.value
|
|
})
|
|
onMounted(() => {
|
|
isInit.value = true
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@nav-size-height: 60px;
|
|
@layout-max-width: 1100px;
|
|
|
|
.layout {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.layout-sider {
|
|
background: var(--color-menu-dark-bg);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
height: 100%;
|
|
padding-top: 0 !important;
|
|
|
|
.left-side {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 8px;
|
|
background: var(--color-menu-dark-bg);
|
|
height: 60px;
|
|
|
|
.arco-typography {
|
|
color: #fff;
|
|
font-size: 18px;
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -1px;
|
|
display: block;
|
|
width: 1px;
|
|
height: 100%;
|
|
background-color: var(--color-border);
|
|
content: '';
|
|
}
|
|
|
|
> :deep(.arco-layout-sider-children) {
|
|
overflow-y: hidden;
|
|
top: 0;
|
|
}
|
|
|
|
.menu-wrapper {
|
|
height: 100%;
|
|
overflow: auto;
|
|
overflow-x: hidden;
|
|
|
|
:deep(.arco-menu) {
|
|
height: calc(100% - 60px) !important;
|
|
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border: 4px solid transparent;
|
|
background-clip: padding-box;
|
|
border-radius: 7px;
|
|
background-color: var(--color-text-4);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--color-text-3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.layout-content {
|
|
min-width: @layout-max-width;
|
|
min-height: 100vh;
|
|
overflow-y: hidden;
|
|
background-color: var(--color-fill-2);
|
|
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
|
|
.layout-navbar {
|
|
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 250px;
|
|
z-index: 100;
|
|
width: 100%;
|
|
min-width: @layout-max-width;
|
|
height: @nav-size-height;
|
|
}
|
|
}
|
|
|
|
.arco-layout-sider-collapsed {
|
|
.left-side {
|
|
width: 50px;
|
|
|
|
.arco-typography {
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
+ .layout-content {
|
|
.layout-navbar {
|
|
left: 50px !important;
|
|
|
|
.navbar {
|
|
width: calc(100% - 50px) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.iframe-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: calc(100vh - @nav-size-height);
|
|
|
|
.web-iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|