Skip to content

Commit

Permalink
feat: 支持iframe加载模式 (#7976)
Browse files Browse the repository at this point in the history
* feat: 支持iframe加载模式
# Reviewed, transaction id: 7794

* feat: iframe加载时不展示footer
# Reviewed, transaction id: 8539
  • Loading branch information
yangyy committed May 29, 2024
1 parent 035315e commit e716c1e
Show file tree
Hide file tree
Showing 6 changed files with 191 additions and 24 deletions.
1 change: 1 addition & 0 deletions src/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"dependencies": {
"@blueking/login-modal": "^1.0.0",
"@blueking/notice-component-vue2": "^2.0.1-beta.2",
"@blueking/sub-saas": "^0.0.0-beta.7",
"@blueking/user-selector": "^1.0.6",
"@icon-cool/bk-icon-cmdb-colorful": "0.0.1",
"await-to-js": "^3.0.0",
Expand Down
148 changes: 148 additions & 0 deletions src/ui/src/IframeEntry.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
<!--
* Tencent is pleased to support the open source community by making 蓝鲸 available.
* Copyright (C) 2017-2022 THL A29 Limited, a Tencent company. All rights reserved.
* Licensed under the MIT License (the "License"); you may not use this file except
* in compliance with the License. You may obtain a copy of the License at
* http://opensource.org/licenses/MIT
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the License for the specific language governing permissions and
* limitations under the License.
-->

<template>
<div id="app" v-bkloading="{ isLoading: globalLoading }" :bk-language="$i18n.locale"
:class="{
'no-breadcrumb': hideBreadcrumbs,
'main-full-screen': mainFullScreen,
'has-notice': showNotice
}"
:style="{ '--notice-height': `${noticeHeight}px` }">
<div class="browser-tips" v-if="showBrowserTips">
<span class="tips-text">{{$t('您的浏览器非Chrome,建议您使用最新版本的Chrome浏览,以保证最好的体验效果')}}</span>
<i class="tips-icon bk-icon icon-close-circle-shape" @click="showBrowserTips = false"></i>
</div>
<the-notice @show-change="noticeShowChange" @size-change="noticeSizeChange" v-if="enableNotice"></the-notice>
<router-view class="views-layout" :name="topView" ref="topView"></router-view>
<the-permission-modal ref="permissionModal"></the-permission-modal>
</div>
</template>

<script>
import thePermissionModal from '@/components/modal/permission'
import theNotice from '@/components/notice'
import { addResizeListener, removeResizeListener } from '@/utils/resize-events'
import { MENU_INDEX } from '@/dictionary/menu-symbol'
import { mapGetters } from 'vuex'
export default {
name: 'iframe-entry',
components: {
theNotice,
thePermissionModal
},
data() {
const showBrowserTips = window.navigator.userAgent.toLowerCase().indexOf('chrome') === -1
return {
showBrowserTips,
showNotice: false,
noticeHeight: 0
}
},
computed: {
...mapGetters(['globalLoading', 'mainFullScreen']),
...mapGetters('userCustom', ['usercustom', 'firstEntryKey', 'classifyNavigationKey']),
isIndex() {
return this.$route.name === MENU_INDEX
},
hideBreadcrumbs() {
return !(this.$route.meta.layout || {}).breadcrumbs
},
topView() {
const [topRoute] = this.$route.matched
return (topRoute && topRoute.meta.view) || 'default'
},
enableNotice() {
if (window.Site.enableNotification === false) {
return false
}
return true
}
},
watch: {
noticeHeight(height) {
this.$store.commit('setNoticeHeight', height)
}
},
mounted() {
addResizeListener(this.$el, this.calculateAppHeight)
window.permissionModal = this.$refs.permissionModal
// 在body标签添加语言标识属性,用于插入到body下的内容进行国际化处理
document.body.setAttribute('lang', this.$i18n.locale)
},
beforeDestroy() {
removeResizeListener(this.$el, this.calculateAppHeight)
},
methods: {
calculateAppHeight() {
this.$store.commit('setAppHeight', this.$el.offsetHeight)
},
noticeShowChange(isShow) {
if (!isShow) {
this.noticeHeight = 0
}
this.showNotice = isShow
},
noticeSizeChange(size) {
const [, height] = size
this.noticeHeight = height
}
}
}
</script>
<style lang="scss" scoped>
#app {
height: 100%;
}
.browser-tips {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
color: #ff5656;
background-color: #f8f6db;
z-index: 99999;
.tips-text{
margin: 0 20px 0 0 ;
}
.tips-icon{
cursor: pointer;
}
}
.views-layout {
height: calc(100% - 58px - var(--notice-height, 0px));
}
// 主内容区全屏
.main-full-screen {
/deep/ {
.header-layout,
.nav-layout,
.breadcrumbs-layout {
display: none;
}
}
.views-layout {
height: 100%;
}
}
.no-breadcrumb {
/deep/ {
.main-layout {
height: 100%;
}
}
}
</style>
8 changes: 6 additions & 2 deletions src/ui/src/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@
*/

import Vue from 'vue'
import { subEnv } from '@blueking/sub-saas'

import App from './App.vue'
import IframeEntry from './IframeEntry.vue'
import router from './router/index.js'
import store from './store'
import i18n from './i18n'
Expand Down Expand Up @@ -54,8 +57,9 @@ api.get(`${window.API_HOST}is_login`).then(() => {
router,
store,
i18n,
components: { App },
template: '<App/>'
render() {
return !subEnv ? <App /> : <IframeEntry />
}
})
})
.catch(() => {
Expand Down
7 changes: 4 additions & 3 deletions src/ui/src/router/business-interceptor.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
setBizSetRecentlyUsed
} from '@/utils/business-set-helper.js'
import store from '@/store'
import { getRoutePath } from '@/router'

const requestId = Symbol('getAuthorizedBusiness')

Expand Down Expand Up @@ -105,7 +106,7 @@ export const before = async function (to, from, next) {
// 无任何有权限的业务
if (!firstAuthedBiz) {
next({
path: '/no-business',
path: getRoutePath('/no-business'),
replace: true
})
return false
Expand All @@ -117,7 +118,7 @@ export const before = async function (to, from, next) {
window.localStorage.setItem('selectedBusiness', defaultId)
store.commit('objectBiz/setBizId', defaultId)
next({
path: `/business/${defaultId}/index`,
path: getRoutePath(`/business/${defaultId}/index`),
replace: true
})
return false
Expand All @@ -133,7 +134,7 @@ export const before = async function (to, from, next) {
if (!isSubRoute) {
// next执行完之后,会再次进入route.beforeEach即会再次进入到此拦截器中,此时的route为next中指定的
next({
path: `/business/${id}/index`,
path: getRoutePath(`/business/${id}/index`),
replace: true
})
return false
Expand Down
45 changes: 28 additions & 17 deletions src/ui/src/router/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import Router from 'vue-router'
import has from 'has'

import StatusError from './StatusError.js'
import { rootPath, connectToMain } from '@blueking/sub-saas'

import preload from '@/setup/preload'
import afterload from '@/setup/afterload'
Expand All @@ -31,12 +32,17 @@ import {

import {
MENU_ENTRY,
MENU_INDEX,
MENU_BUSINESS_SET,
MENU_BUSINESS,
MENU_RESOURCE,
MENU_MODEL,
MENU_MODEL_MANAGEMENT,
MENU_RESOURCE_MANAGEMENT,
MENU_ANALYSIS,
MENU_PLATFORM_MANAGEMENT
MENU_ANALYSIS_AUDIT,
MENU_PLATFORM_MANAGEMENT,
MENU_PLATFORM_MANAGEMENT_GLOBAL_CONFIG
} from '@/dictionary/menu-symbol'

import {
Expand All @@ -54,22 +60,25 @@ import dynamicRouterView from '@/components/layout/dynamic-router-view'

Vue.use(Router)

export const viewRouters = []
export const getRoutePath = (subPath) => {
const path = subPath.startsWith('/') ? subPath.slice(1) : subPath
return `${rootPath}${path}`
}

const statusRouters = [
{
name: 'no-business',
path: '/no-business',
path: getRoutePath('/no-business'),
components: require('@/views/status/non-exist-business')
},
{
name: '404',
path: '/404',
path: getRoutePath('/404'),
components: require('@/views/status/404')
},
{
name: 'error',
path: '/error',
path: getRoutePath('/error'),
components: require('@/views/status/error')
}
]
Expand All @@ -91,8 +100,8 @@ const router = new Router({
name: MENU_ENTRY,
component: dynamicRouterView,
children: indexViews,
path: '/',
redirect: '/index'
path: rootPath,
redirect: { name: MENU_INDEX }
},
{
name: MENU_BUSINESS_SET,
Expand All @@ -102,7 +111,7 @@ const router = new Router({
permission: require('@/views/status/non-exist-business-set').default
},
children: businessSetViews,
path: '/business-set/:bizSetId',
path: getRoutePath('/business-set/:bizSetId'),
meta: {
menu: {
i18n: '业务集'
Expand All @@ -117,7 +126,7 @@ const router = new Router({
permission: require('@/views/status/non-exist-business').default
},
children: businessViews,
path: '/business/:bizId?',
path: getRoutePath('/business/:bizId?'),
meta: {
menu: {
i18n: '业务'
Expand All @@ -128,8 +137,8 @@ const router = new Router({
name: MENU_MODEL,
component: dynamicRouterView,
children: modelViews,
path: '/model',
redirect: '/model/index',
path: getRoutePath('/model'),
redirect: { name: MENU_MODEL_MANAGEMENT },
meta: {
menu: {
i18n: '模型'
Expand All @@ -140,8 +149,8 @@ const router = new Router({
name: MENU_RESOURCE,
component: dynamicRouterView,
children: resourceViews,
path: '/resource',
redirect: '/resource/index',
path: getRoutePath('/resource'),
redirect: { name: MENU_RESOURCE_MANAGEMENT },
meta: {
menu: {
i18n: '资源'
Expand All @@ -152,8 +161,8 @@ const router = new Router({
name: MENU_ANALYSIS,
component: dynamicRouterView,
children: analysisViews,
path: '/analysis',
redirect: '/analysis/audit',
path: getRoutePath('/analysis'),
redirect: { name: MENU_ANALYSIS_AUDIT },
meta: {
menu: {
i18n: '运营分析'
Expand All @@ -164,8 +173,8 @@ const router = new Router({
name: MENU_PLATFORM_MANAGEMENT,
component: dynamicRouterView,
children: platformManagementViews,
path: '/platform-management',
redirect: '/platform-management/global-config',
path: getRoutePath('/platform-management'),
redirect: { name: MENU_PLATFORM_MANAGEMENT_GLOBAL_CONFIG },
meta: {
auth: {
view: [{ type: OPERATION.R_CONFIG_ADMIN }, { type: OPERATION.U_CONFIG_ADMIN }]
Expand Down Expand Up @@ -381,6 +390,8 @@ router.onError((error) => {
}
})

connectToMain(router)

export const useRouter = () => router

export const useRoute = () => router.app.$route
Expand Down
6 changes: 4 additions & 2 deletions src/ui/src/views/index/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,13 @@
</div>
</div>
<the-map style="user-select: none;"></the-map>
<the-footer></the-footer>
<the-footer v-if="!subEnv"></the-footer>
</div>
</template>

<script>
import has from 'has'
import { subEnv } from '@blueking/sub-saas'
import { MENU_RESOURCE_HOST } from '@/dictionary/menu-symbol'
import { HOME_HOST_SEARCH_CONTENT_STORE_KEY } from '@/dictionary/storage-keys.js'
import hostSearch from './children/host-search'
Expand All @@ -70,7 +71,8 @@
showResultList: false,
fullTextSearchProps: {},
searchResult: {},
loading: false
loading: false,
subEnv
}
},
computed: {
Expand Down

0 comments on commit e716c1e

Please sign in to comment.