From 9fb9883562503faa82a142ade8efaa7e535ea970 Mon Sep 17 00:00:00 2001 From: scarqin <1054139596@qq.com> Date: Mon, 9 May 2022 18:57:22 +0800 Subject: [PATCH 1/4] stash iframe --- src/app/electron-main/main.ts | 1 + src/core/market/browser/package.json | 4 ++-- src/core/market/browser/src/main.js | 2 +- src/workbench/browser/src/app/pages/pages.component.html | 1 + .../src/app/shared/components/sidebar/sidebar.component.ts | 2 +- 5 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/electron-main/main.ts b/src/app/electron-main/main.ts index d8d2bccbb..a81575328 100644 --- a/src/app/electron-main/main.ts +++ b/src/app/electron-main/main.ts @@ -43,6 +43,7 @@ function createWindow(): BrowserWindow { contextIsolation: false, // false if you want to run e2e test with Spectron }, }); + // main if (['serve'].includes(processEnv)) { require('electron-reload')(__dirname, { electron: require(path.join(__dirname, '../node_modules/electron')), diff --git a/src/core/market/browser/package.json b/src/core/market/browser/package.json index a4874ae30..73454d528 100644 --- a/src/core/market/browser/package.json +++ b/src/core/market/browser/package.json @@ -10,7 +10,7 @@ "logo": "icon-apps", "main_debug": "http://localhost:8080", "moduleID": "default", - "moduleName": "插件广场", + "moduleName": "拓展广场", "moduleType": "app", "features": { "export": { @@ -21,7 +21,7 @@ "extension": "json" }, "configuration": { - "title": "插件广场配置", + "title": "拓展广场配置", "properties": { "core.market.url": { "type": "string", diff --git a/src/core/market/browser/src/main.js b/src/core/market/browser/src/main.js index ac1417c4f..19ec93cc7 100644 --- a/src/core/market/browser/src/main.js +++ b/src/core/market/browser/src/main.js @@ -5,5 +5,5 @@ import App from './App.vue'; import router from './router.js'; import 'windi.css'; import { createPinia } from 'pinia'; - +window.eo=window.parent.eo; createApp(App).use(router).use(Antd).use(createPinia()).mount('#app'); diff --git a/src/workbench/browser/src/app/pages/pages.component.html b/src/workbench/browser/src/app/pages/pages.component.html index 6e45ffde8..4950febfc 100644 --- a/src/workbench/browser/src/app/pages/pages.component.html +++ b/src/workbench/browser/src/app/pages/pages.component.html @@ -1,6 +1,7 @@
+
diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts index a11dedcaa..479235f65 100644 --- a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts +++ b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts @@ -69,7 +69,7 @@ export class SidebarComponent implements OnInit, OnDestroy { ]; if (!this.electron.isElectron) { defaultModule.push({ - moduleName: '插件广场', + moduleName: '拓展广场', moduleID: '@eo-core-extension', logo: 'icon-apps', activeRoute: 'home/preview', From 55d78cae5cf074d212a87262da3c256809fcfed6 Mon Sep 17 00:00:00 2001 From: scarqin <1054139596@qq.com> Date: Tue, 10 May 2022 15:25:40 +0800 Subject: [PATCH 2/4] feat: iframe load module extension --- src/app/electron-main/coreView.ts | 6 +-- src/app/electron-main/main.ts | 48 +++++++------------ src/platform/electron-browser/preload.ts | 15 ------ .../api/overview/api-overview.component.html | 6 +-- .../api/overview/api-overview.component.scss | 9 ++-- .../src/app/pages/pages.component.html | 13 +++-- .../browser/src/app/pages/pages.component.ts | 14 ++++-- .../browser/src/app/pages/pages.module.ts | 7 ++- .../components/navbar/navbar.component.html | 3 +- .../components/navbar/navbar.component.ts | 9 ---- .../components/sidebar/sidebar.component.html | 5 +- .../components/sidebar/sidebar.component.ts | 48 ++++++++++--------- .../components/sidebar/sidebar.model.ts | 19 ++++++++ .../components/sidebar/sidebar.service.ts | 12 +++-- .../components/toolbar/toolbar.component.ts | 2 +- src/workbench/browser/src/styles.scss | 3 +- 16 files changed, 105 insertions(+), 114 deletions(-) create mode 100644 src/workbench/browser/src/app/shared/components/sidebar/sidebar.model.ts diff --git a/src/app/electron-main/coreView.ts b/src/app/electron-main/coreView.ts index e0c9d20d6..5964dbfdb 100644 --- a/src/app/electron-main/coreView.ts +++ b/src/app/electron-main/coreView.ts @@ -43,16 +43,12 @@ export class CoreViews { this.watch(); } watch() { - ipcMain.on('message', this.triggleEvent); + // ipcMain.on('message', this.triggleEvent); } triggleEvent(event, arg) { console.log(`core view ${event.frameId}: recieve render msg=>`, arg, arg.action); if (event.frameId !== 1) return; switch (arg.action) { - case 'connect-dropdown': { - this.win.setTopBrowserView((arg.data.action === 'show' ? subView.mainView : subView.appView).view); - break; - } case 'setBounds': { //sidebar shrink or expand break; diff --git a/src/app/electron-main/main.ts b/src/app/electron-main/main.ts index a81575328..58222dbaa 100644 --- a/src/app/electron-main/main.ts +++ b/src/app/electron-main/main.ts @@ -221,40 +221,24 @@ try { } else if (arg.action === 'hook') { returnValue = 'hook返回'; } else if (arg.action === 'openApp') { - if (arg.data.moduleID && !arg.data.moduleID.includes('@eo-core')) { - // 如果要打开是同一app，忽略 - if (subView.appView?.mainModuleID === arg.data.moduleID) { - return; - } - const module: ModuleInfo = moduleManager.getModule(arg.data.moduleID); - if (module) { - if (!subView.appView) subView.appView = new AppViews(win); - subView.appView.create(module); - } - } else { - if (subView.appView) { - subView.appView.remove(); - } - } - returnValue = 'view id'; + // if (arg.data.moduleID && !arg.data.moduleID.includes('@eo-core')) { + // // 如果要打开是同一app，忽略 + // if (subView.appView?.mainModuleID === arg.data.moduleID) { + // return; + // } + // const module: ModuleInfo = moduleManager.getModule(arg.data.moduleID); + // if (module) { + // if (!subView.appView) subView.appView = new AppViews(win); + // subView.appView.create(module); + // } + // } else { + // if (subView.appView) { + // subView.appView.remove(); + // } + // } + // returnValue = 'view id'; } else if (arg.action === 'autoResize') { resize(arg.data.sideWidth); - } else if (arg.action === 'openModal') { - const background = arg.data.background || '#00000073'; - subView.mainView.view.webContents.executeJavaScript(` - var mask = document.querySelector('#mask'); - if (mask) { - mask.style.background = '${background}'; - mask.style.display = 'block'; - } - `); - } else if (arg.action === 'closeModal') { - subView.mainView.view.webContents.executeJavaScript(` - var mask = document.querySelector('#mask'); - if (mask) { - mask.style.display = 'none'; - } - `); } else { returnValue = 'Invalid data'; } diff --git a/src/platform/electron-browser/preload.ts b/src/platform/electron-browser/preload.ts index b0587441b..0baa95c99 100644 --- a/src/platform/electron-browser/preload.ts +++ b/src/platform/electron-browser/preload.ts @@ -75,21 +75,6 @@ if (apiAccessRules.includes('hook')) { window.eo.tempApi = (params) => { return ipcRenderer.sendSync('eo-sync', params); }; -window.eo.openModal = (background) => { - background = background || '#00000073'; - return ipcRenderer.sendSync('eo-sync', { action: 'openModal', data: { background: background } }); -}; -window.eo.closeModal = () => { - return ipcRenderer.sendSync('eo-sync', { action: 'closeModal' }); -}; -window.eo.toogleViewZIndex = (visible) => { - ipcRenderer.send('message', { - action: 'connect-dropdown', - data: { - action: visible ? 'show' : 'hide', - }, - }); -}; window.eo.autoResize = (sideWidth) => { ipcRenderer.send('eo-sync', { action: 'autoResize', data: { sideWidth: sideWidth } }); }; diff --git a/src/workbench/browser/src/app/pages/api/overview/api-overview.component.html b/src/workbench/browser/src/app/pages/api/overview/api-overview.component.html index 7d85f48fa..7c720fcd3 100644 --- a/src/workbench/browser/src/app/pages/api/overview/api-overview.component.html +++ b/src/workbench/browser/src/app/pages/api/overview/api-overview.component.html @@ -2,8 +2,8 @@

概况

-
-
+
+
@@ -11,7 +11,7 @@

概况

-
+
diff --git a/src/workbench/browser/src/app/pages/api/overview/api-overview.component.scss b/src/workbench/browser/src/app/pages/api/overview/api-overview.component.scss index 0ee23055d..83c43e3e1 100644 --- a/src/workbench/browser/src/app/pages/api/overview/api-overview.component.scss +++ b/src/workbench/browser/src/app/pages/api/overview/api-overview.component.scss @@ -1,8 +1,11 @@ .overview_container{ - width: 50%; + width: 70%; margin: 0 auto; padding: 20px 0; } -nz-card{ - min-width: 220px; +.card_container{ + display: grid; + grid-template-columns: repeat(auto-fill, 250px); + grid-column-gap: 20px; + grid-row-gap: 20px; } \ No newline at end of file diff --git a/src/workbench/browser/src/app/pages/pages.component.html b/src/workbench/browser/src/app/pages/pages.component.html index 4950febfc..c326dec96 100644 --- a/src/workbench/browser/src/app/pages/pages.component.html +++ b/src/workbench/browser/src/app/pages/pages.component.html @@ -1,9 +1,16 @@
-
- + +
- + diff --git a/src/workbench/browser/src/app/pages/pages.component.ts b/src/workbench/browser/src/app/pages/pages.component.ts index e1deb0ab4..8cd3518ff 100644 --- a/src/workbench/browser/src/app/pages/pages.component.ts +++ b/src/workbench/browser/src/app/pages/pages.component.ts @@ -1,15 +1,19 @@ import { Component, OnInit } from '@angular/core'; +import { SidebarService } from '../shared/components/sidebar/sidebar.service'; @Component({ selector: 'eo-pages', templateUrl: './pages.component.html', - styleUrls: ['./pages.component.scss'] + styleUrls: ['./pages.component.scss'], }) export class PagesComponent implements OnInit { - - constructor() { } - + constructor(private sidebar: SidebarService) {} ngOnInit(): void { + this.watchSidebarItemChange(); + } + private watchSidebarItemChange() { + this.sidebar.appChanged$.pipe().subscribe(() => { + console.log(this.sidebar.currentModule); + }); } - } diff --git a/src/workbench/browser/src/app/pages/pages.module.ts b/src/workbench/browser/src/app/pages/pages.module.ts index 9c18c5a91..60860fd92 100644 --- a/src/workbench/browser/src/app/pages/pages.module.ts +++ b/src/workbench/browser/src/app/pages/pages.module.ts @@ -1,6 +1,5 @@ import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; - +import { CommonModule } from '@angular/common'; import { PagesRoutingModule } from './pages-routing.module'; import { PagesComponent } from './pages.component'; @@ -8,7 +7,7 @@ import { SharedModule } from '../shared/shared.module'; @NgModule({ declarations: [PagesComponent], - imports: [PagesRoutingModule, FormsModule, SharedModule], - exports: [] + imports: [PagesRoutingModule, CommonModule, SharedModule], + exports: [], }) export class PagesModule {} diff --git a/src/workbench/browser/src/app/shared/components/navbar/navbar.component.html b/src/workbench/browser/src/app/shared/components/navbar/navbar.component.html index 8bc643243..1c832a689 100644 --- a/src/workbench/browser/src/app/shared/components/navbar/navbar.component.html +++ b/src/workbench/browser/src/app/shared/components/navbar/navbar.component.html @@ -14,8 +14,7 @@
- - + diff --git a/src/workbench/browser/src/app/shared/components/navbar/navbar.component.ts b/src/workbench/browser/src/app/shared/components/navbar/navbar.component.ts index c01676214..3f5fcf76f 100644 --- a/src/workbench/browser/src/app/shared/components/navbar/navbar.component.ts +++ b/src/workbench/browser/src/app/shared/components/navbar/navbar.component.ts @@ -47,11 +47,6 @@ export class NavbarComponent implements OnInit { }); }); } - changeHelpVisible(visible) { - if(this.isElectron){ - window.eo.toogleViewZIndex(visible); - } - } minimize() { this.electron.ipcRenderer.send('message', { action: 'minimize', @@ -79,8 +74,4 @@ export class NavbarComponent implements OnInit { getModules(): Array { return Array.from(this.modules.values()); } - - openApp(moduleID: string) { - window.eo.openApp({ moduleID: moduleID }); - } } diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html index c0a2327ca..07244edcc 100644 --- a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html +++ b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html @@ -1,13 +1,12 @@
diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts index 479235f65..8b5cf0a6b 100644 --- a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts +++ b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts @@ -4,6 +4,7 @@ import { ElectronService } from '../../../core/services'; import { ModuleInfo } from '../../../../../../../platform/node/extension-manager'; import { SidebarService } from './sidebar.service'; import { Router } from '@angular/router'; +import { SidebarModuleInfo } from './sidebar.model'; @Component({ selector: 'eo-sidebar', @@ -13,12 +14,11 @@ import { Router } from '@angular/router'; export class SidebarComponent implements OnInit, OnDestroy { isCollapsed: boolean; destroy = false; - moduleID: string = '@eo-core-apimanger'; - modules: Array; - constructor(private electron: ElectronService, private router: Router, private sidebar: SidebarService) { + modules: Array; + constructor(private electron: ElectronService, private router: Router, public sidebar: SidebarService) { this.isCollapsed = this.sidebar.getCollapsed(); this.sidebar - .onCollapsedChange() + .onCollapsedChanged() .pipe(takeWhile(() => !this.destroy)) .subscribe((isCollapsed) => { this.isCollapsed = isCollapsed; @@ -28,40 +28,36 @@ export class SidebarComponent implements OnInit, OnDestroy { } }); } - - tooltipVisibleChange(visible) { - if (this.electron.isElectron && this.isCollapsed) { - window.eo.toogleViewZIndex(visible); - } - } - toggleCollapsed(): void { this.sidebar.toggleCollapsed(); } ngOnInit(): void { - this.getApps(); + this.getModules(); this.getModuleIDFromRoute(); } - openApp(moduleID: string) { - this.moduleID = moduleID; - let nextApp = this.modules.find((val) => val.moduleID === moduleID); - if (nextApp.route) { - this.router.navigate([nextApp.route]); - } - if (this.electron.isElectron) { - window.eo.openApp({ moduleID: moduleID }); + clickModule(module) { + this.sidebar.currentModule = module; + this.sidebar.appChanged$.next(); + let nextApp = this.modules.find((val) => val.moduleID === module.moduleID); + let route = (nextApp as SidebarModuleInfo).route; + if (route) { + this.router.navigate([route]); } + // if (this.electron.isElectron) { + // window.eo.openApp({ moduleID: module.moduleID }); + // } } ngOnDestroy(): void { this.destroy = true; } - private getApps() { + private getModules() { let defaultModule = [ { moduleName: 'API', moduleID: '@eo-core-apimanger', + isOffical: true, logo: 'icon-api', activeRoute: 'home/api', route: 'home/api/test', @@ -71,6 +67,7 @@ export class SidebarComponent implements OnInit, OnDestroy { defaultModule.push({ moduleName: '拓展广场', moduleID: '@eo-core-extension', + isOffical: true, logo: 'icon-apps', activeRoute: 'home/preview', route: 'home/preview', @@ -88,7 +85,12 @@ export class SidebarComponent implements OnInit, OnDestroy { } private getModuleIDFromRoute() { let currentModule = this.modules.find((val) => this.router.url.includes(val.activeRoute)); - this.moduleID = currentModule?.moduleID || '@eo-core-apimanger'; - if (!currentModule) this.openApp(this.moduleID); + if (!currentModule) { + //route error + this.clickModule(this.modules[0]); + return; + } + this.sidebar.currentModule = currentModule; + this.sidebar.appChanged$.next(); } } diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.model.ts b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.model.ts new file mode 100644 index 000000000..8e3e2711b --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.model.ts @@ -0,0 +1,19 @@ +/** + * Sidebar offical module + */ +export interface SidebarModuleInfo { + // app + name: string; + //icon or logo image + logo:string; + // 模块ID，用于关联 + moduleID: string; + // 模块名称，用于显示 + moduleName: string; + //is offcial app + isOffical: boolean; + // module route + route: string; + // route active when match string + activeRoute: string; +} diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.service.ts b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.service.ts index f88bbee4f..10b6f1699 100644 --- a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.service.ts +++ b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.service.ts @@ -1,21 +1,25 @@ import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; +import { ModuleInfo } from '../../../utils/module-loader'; +import { SidebarModuleInfo } from './sidebar.model'; @Injectable({ providedIn: 'root', }) export class SidebarService { collapsed = true; - private collapsedChange$ = new Subject(); + currentModule: ModuleInfo | SidebarModuleInfo | any; + private collapsedChanged$: Subject = new Subject(); + public appChanged$: Subject = new Subject(); constructor() {} getCollapsed() { return this.collapsed; } toggleCollapsed() { this.collapsed = !this.collapsed; - this.collapsedChange$.next(this.collapsed); + this.collapsedChanged$.next(this.collapsed); } - onCollapsedChange = function() { - return this.collapsedChange$.pipe(); + onCollapsedChanged = function () { + return this.collapsedChanged$.pipe(); }; } diff --git a/src/workbench/browser/src/app/shared/components/toolbar/toolbar.component.ts b/src/workbench/browser/src/app/shared/components/toolbar/toolbar.component.ts index 46e23ac79..ea1efc750 100644 --- a/src/workbench/browser/src/app/shared/components/toolbar/toolbar.component.ts +++ b/src/workbench/browser/src/app/shared/components/toolbar/toolbar.component.ts @@ -16,7 +16,7 @@ export class ToolbarComponent implements OnInit, OnDestroy { constructor(private sidebar: SidebarService) { this.sideBarCollapsed = this.sidebar.getCollapsed(); this.sidebar - .onCollapsedChange() + .onCollapsedChanged() .pipe(takeUntil(this.destroy$)) .subscribe((isCollapsed) => { this.sideBarCollapsed = isCollapsed; diff --git a/src/workbench/browser/src/styles.scss b/src/workbench/browser/src/styles.scss index 5168c77a5..bc8079c77 100644 --- a/src/workbench/browser/src/styles.scss +++ b/src/workbench/browser/src/styles.scss @@ -8,7 +8,7 @@ body { } :root { --NAVBAR_HEIGHT: 50px; - --FOOTER_HEIGHT: 0px; + --FOOTER_HEIGHT: 0px; // --FOOTER_HEIGHT: 30px; } .api_test_history_list { @@ -23,4 +23,3 @@ body { overflow-y: scroll; } } - From 95fe50025d58fa891a27d01aad11d8b1a086efe2 Mon Sep 17 00:00:00 2001 From: scarqin <1054139596@qq.com> Date: Tue, 10 May 2022 16:47:18 +0800 Subject: [PATCH 3/4] feat: inject script to iframe --- src/core/market/browser/src/main.js | 1 - .../group/edit/api-group-edit.component.ts | 4 ++-- .../history/api-test-history.component.ts | 1 - .../src/app/pages/pages.component.html | 16 ++++++------- .../browser/src/app/pages/pages.component.ts | 23 ++++++++++++++++--- .../components/sidebar/sidebar.component.html | 1 - .../components/sidebar/sidebar.component.ts | 14 +++++------ 7 files changed, 37 insertions(+), 23 deletions(-) diff --git a/src/core/market/browser/src/main.js b/src/core/market/browser/src/main.js index 19ec93cc7..6f60cb74f 100644 --- a/src/core/market/browser/src/main.js +++ b/src/core/market/browser/src/main.js @@ -5,5 +5,4 @@ import App from './App.vue'; import router from './router.js'; import 'windi.css'; import { createPinia } from 'pinia'; -window.eo=window.parent.eo; createApp(App).use(router).use(Antd).use(createPinia()).mount('#app'); diff --git a/src/workbench/browser/src/app/pages/api/group/edit/api-group-edit.component.ts b/src/workbench/browser/src/app/pages/api/group/edit/api-group-edit.component.ts index 74e62576c..d743e43e6 100644 --- a/src/workbench/browser/src/app/pages/api/group/edit/api-group-edit.component.ts +++ b/src/workbench/browser/src/app/pages/api/group/edit/api-group-edit.component.ts @@ -67,7 +67,7 @@ export class ApiGroupEditComponent implements OnInit { this.modalRef.destroy(); this.messageService.send({ type: 'updateGroupSuccess', data: { group: result.data } }); } else { - console.log(result.data); + console.error(result.data); } }); } @@ -78,7 +78,7 @@ export class ApiGroupEditComponent implements OnInit { this.modalRef.destroy(); this.messageService.send({ type: 'updateGroupSuccess', data: { group: result.data } }); } else { - console.log(result.data); + console.error(result.data); } }); } diff --git a/src/workbench/browser/src/app/pages/api/test/history/api-test-history.component.ts b/src/workbench/browser/src/app/pages/api/test/history/api-test-history.component.ts index f6fb5f39f..ef755c27a 100644 --- a/src/workbench/browser/src/app/pages/api/test/history/api-test-history.component.ts +++ b/src/workbench/browser/src/app/pages/api/test/history/api-test-history.component.ts @@ -136,7 +136,6 @@ export class ApiTestHistoryComponent implements OnInit { private getList() { this.storage.run('apiTestHistoryLoadAllByApiDataID', [this.apiID], (result: StorageHandleResult) => { if (result.status === StorageHandleStatus.success) { - console.log(result.data) result.data.forEach((val: any) => { this.parseItem(val); }); diff --git a/src/workbench/browser/src/app/pages/pages.component.html b/src/workbench/browser/src/app/pages/pages.component.html index c326dec96..590261814 100644 --- a/src/workbench/browser/src/app/pages/pages.component.html +++ b/src/workbench/browser/src/app/pages/pages.component.html @@ -2,15 +2,15 @@
+ - + *ngIf="!this.sidebar.currentModule.isOffical" + src="http://localhost:8080" + id="app_iframe" + frameborder="no" + border="0" + style="width: calc(100vw - 90px);height: calc(100vh - var(--NAVBAR_HEIGHT) - 4px);" + >
diff --git a/src/workbench/browser/src/app/pages/pages.component.ts b/src/workbench/browser/src/app/pages/pages.component.ts index 8cd3518ff..e620719b4 100644 --- a/src/workbench/browser/src/app/pages/pages.component.ts +++ b/src/workbench/browser/src/app/pages/pages.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { SidebarService } from '../shared/components/sidebar/sidebar.service'; @Component({ @@ -7,13 +7,30 @@ import { SidebarService } from '../shared/components/sidebar/sidebar.service'; styleUrls: ['./pages.component.scss'], }) export class PagesComponent implements OnInit { - constructor(private sidebar: SidebarService) {} + loadedIframe = false; + constructor(private cdRef: ChangeDetectorRef, private sidebar: SidebarService) {} ngOnInit(): void { this.watchSidebarItemChange(); } private watchSidebarItemChange() { this.sidebar.appChanged$.pipe().subscribe(() => { - console.log(this.sidebar.currentModule); + this.loadedIframe = false; + if (!this.sidebar.currentModule.isOffical) { + //add loading + setTimeout(() => { + let iframe = document.getElementById('app_iframe') as HTMLIFrameElement; + //add auto script + let iframeDocument = iframe.contentWindow.document; + var el = iframeDocument.createElement('script'); + el.text = `window.eo=window.parent.eo;\n`; + iframeDocument.body.appendChild(el); + //loading finish + iframe.onload = () => { + this.loadedIframe = true; + this.cdRef.detectChanges(); // solution + }; + }, 0); + } }); } } diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html index 07244edcc..04555bd89 100644 --- a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html +++ b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html @@ -5,7 +5,6 @@ class="sidebar_item" nz-tooltip [nzTooltipTitle]="item.moduleName" - [routerLink]="item.route ? item.route : '/home/blank'" [ngClass]="{ sidebar_item_active: item.moduleID === this.sidebar.currentModule.moduleID }" > diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts index 8b5cf0a6b..2270ac2fe 100644 --- a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts +++ b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.ts @@ -41,13 +41,8 @@ export class SidebarComponent implements OnInit, OnDestroy { this.sidebar.currentModule = module; this.sidebar.appChanged$.next(); let nextApp = this.modules.find((val) => val.moduleID === module.moduleID); - let route = (nextApp as SidebarModuleInfo).route; - if (route) { - this.router.navigate([route]); - } - // if (this.electron.isElectron) { - // window.eo.openApp({ moduleID: module.moduleID }); - // } + let route = (nextApp as SidebarModuleInfo).route || '/home/blank'; + this.router.navigate([route]); } ngOnDestroy(): void { this.destroy = true; @@ -88,6 +83,11 @@ export class SidebarComponent implements OnInit, OnDestroy { if (!currentModule) { //route error this.clickModule(this.modules[0]); + // let route = (nextApp as SidebarModuleInfo).route; + // console.log(route) + // if (route) { + // this.router.navigate([route]); + // } return; } this.sidebar.currentModule = currentModule; From a453ed7a0f4fc132a61611ad5386e709f3a3b33f Mon Sep 17 00:00:00 2001 From: scarqin <1054139596@qq.com> Date: Tue, 10 May 2022 17:11:49 +0800 Subject: [PATCH 4/4] fix: build error and refactor comments --- .../browser/src/app/pages/pages.component.ts | 2 +- .../components/sidebar/sidebar.model.ts | 28 +++++++++++++------ 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/workbench/browser/src/app/pages/pages.component.ts b/src/workbench/browser/src/app/pages/pages.component.ts index e620719b4..353794cb0 100644 --- a/src/workbench/browser/src/app/pages/pages.component.ts +++ b/src/workbench/browser/src/app/pages/pages.component.ts @@ -8,7 +8,7 @@ import { SidebarService } from '../shared/components/sidebar/sidebar.service'; }) export class PagesComponent implements OnInit { loadedIframe = false; - constructor(private cdRef: ChangeDetectorRef, private sidebar: SidebarService) {} + constructor(private cdRef: ChangeDetectorRef, public sidebar: SidebarService) {} ngOnInit(): void { this.watchSidebarItemChange(); } diff --git a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.model.ts b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.model.ts index 8e3e2711b..05a684448 100644 --- a/src/workbench/browser/src/app/shared/components/sidebar/sidebar.model.ts +++ b/src/workbench/browser/src/app/shared/components/sidebar/sidebar.model.ts @@ -2,18 +2,28 @@ * Sidebar offical module */ export interface SidebarModuleInfo { - // app - name: string; - //icon or logo image - logo:string; - // 模块ID，用于关联 + /** + * icon or logo image + **/ + logo: string; + /** + * unique extension id + **/ moduleID: string; - // 模块名称，用于显示 + /** + * showname + **/ moduleName: string; - //is offcial app + /** + * is offcial app + **/ isOffical: boolean; - // module route + /** + * module route,click sidebar will navigate this route + **/ route: string; - // route active when match string + /** + * sidebar active when match activeRoute + **/ activeRoute: string; }