feat: 前端支持 iframe 嵌入 TencentBlueKing#2895

hLinx · Apr 12, 2024 · e559df5 · e559df5
1 parent c151c17
commit e559df5
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 28 deletions.
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -17,6 +17,7 @@
     "@blueking/ip-selector": "0.3.0-beta.17",
     "@blueking/notice-component-vue2": "2.0.0-beta.2",
     "@blueking/paas-login": "0.0.11",
+    "@blueking/sub-saas": "0.0.0-beta.6",
     "@blueking/user-selector": "1.0.12",
     "@vue/babel-preset-jsx": "1.4.0",
     "@vue/composition-api": "1.7.2",

diff --git a/src/frontend/src/iframe-app.vue b/src/frontend/src/iframe-app.vue
@@ -38,9 +38,14 @@
         <div id="siteHeaderStatusBar" />
       </div>
     </div>
-    <div class="container-content">
-      <router-view />
+    <div class="jb-navigation-main">
+      <scroll-faker>
+        <div class="container-content">
+          <router-view />
+        </div>
+      </scroll-faker>
     </div>
+
   </div>
 </template>
 <script>

diff --git a/src/frontend/src/main.js b/src/frontend/src/main.js
@@ -36,6 +36,7 @@ import TaskPlanService from '@service/task-plan';
 import { getURLSearchParams } from '@utils/assist';
 import { scopeCache } from '@utils/cache-helper';
 import EntryTask from '@utils/entry-task';
+import { subEnv } from '@blueking/sub-saas'
 
 import App from '@/App';
 import i18n from '@/i18n';
@@ -110,7 +111,7 @@ const entryTask = new EntryTask();
  * 通过浏览器直接访问：App
  * 通过 iframe 访问任务详情：IframeApp
  */
-let EntryApp = App;
+let EntryApp = subEnv ? IframeApp : App;
 
 /**
  * @desc 解析路由 scopeType、scopeId

diff --git a/src/frontend/src/router/index.js b/src/frontend/src/router/index.js
@@ -28,6 +28,7 @@ import Vue, {
   customRef,
 } from 'vue';
 import VueRouter from 'vue-router';
+import { rootPath, connectToMain } from '@blueking/sub-saas'
 
 import {
   leaveConfirm,
@@ -103,15 +104,15 @@ export default ({ appList, isAdmin, scopeType, scopeId }) => {
   // 生成路由配置
   const routes = [
     {
-      path: '/',
+      path: rootPath,
       component: Entry,
       redirect: {
         name: 'home',
       },
       children: systemManageRoute,
     },
     {
-      path: noScope ? '/' : `/${scopeType}/${scopeId}`,
+      path: noScope ? rootPath : `${rootPath}${scopeType}/${scopeId}`,
       component: Entry,
       redirect: {
         name: 'home',
@@ -236,30 +237,32 @@ export default ({ appList, isAdmin, scopeType, scopeId }) => {
     }
   });
 
-  router.afterEach(() => {
-    history.pushState(null, null, document.URL);
-    const callback = () => {
-      leaveConfirm()
-        .then(() => {
-          window.removeEventListener('popstate', callback);
-          window.history.go(-2);
-        })
-        .catch(() => {
-          history.pushState(null, null, document.URL);
-        });
-    };
-    window.addEventListener('popstate', callback);
+  connectToMain(router)
 
-    const currentRoute = _.last(router.currentRoute.matched);
-    if (currentRoute && currentRoute.instances.default) {
-      const routerDefault = currentRoute.instances.default;
-      setTimeout(() => {
-        routerDefault.$once('hook:beforeDestroy', () => {
-          window.removeEventListener('popstate', callback);
-        });
-      });
-    }
-  });
+  // router.afterEach(() => {
+  //   history.pushState(null, null, document.URL);
+  //   const callback = () => {
+  //     leaveConfirm()
+  //       .then(() => {
+  //         window.removeEventListener('popstate', callback);
+  //         window.history.go(-2);
+  //       })
+  //       .catch(() => {
+  //         history.pushState(null, null, document.URL);
+  //       });
+  //   };
+  //   window.addEventListener('popstate', callback);
+
+  //   const currentRoute = _.last(router.currentRoute.matched);
+  //   if (currentRoute && currentRoute.instances.default) {
+  //     const routerDefault = currentRoute.instances.default;
+  //     setTimeout(() => {
+  //       routerDefault.$once('hook:beforeDestroy', () => {
+  //         window.removeEventListener('popstate', callback);
+  //       });
+  //     });
+  //   }
+  // });
   return router;
 };