feat: 支持iframe加载模式

src/ui/package.json

@@ -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",

src/ui/src/IframeEntry.vue

@@ -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>

src/ui/src/main.js

@@ -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'
@@ -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(() => {

src/ui/src/router/business-interceptor.js

@@ -18,6 +18,7 @@ import {
  setBizSetRecentlyUsed
 } from '@/utils/business-set-helper.js'
 import store from '@/store'
+import { getRoutePath } from '@/router'
 
 const requestId = Symbol('getAuthorizedBusiness')
 
@@ -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
@@ -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
@@ -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

src/ui/src/router/index.js

@@ -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'
@@ -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 {
@@ -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')
  }
 ]
@@ -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,
@@ -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: '业务集'
@@ -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: '业务'
@@ -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: '模型'
@@ -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: '资源'
@@ -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: '运营分析'
@@ -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 }]
@@ -381,6 +390,8 @@ router.onError((error) => {
  }
 })
 
+connectToMain(router)
+
 export const useRouter = () => router
 
 export const useRoute = () => router.app.$route

src/ui/src/views/index/index.vue

@@ -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'
@@ -70,7 +71,8 @@
  showResultList: false,
  fullTextSearchProps: {},
  searchResult: {},
- loading: false
+ loading: false,
+ subEnv
  }
  },
  computed: {