Skip to content

Commit

Permalink
feat: iframe load module extension
Browse files Browse the repository at this point in the history
  • Loading branch information
scarqin committed May 10, 2022
1 parent 9fb9883 commit 55d78ca
Show file tree
Hide file tree
Showing 16 changed files with 105 additions and 114 deletions.
6 changes: 1 addition & 5 deletions src/app/electron-main/coreView.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
48 changes: 16 additions & 32 deletions src/app/electron-main/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
}
Expand Down
15 changes: 0 additions & 15 deletions src/platform/electron-browser/preload.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 } });
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
<h1 class="fs20 fwb">概况</h1>
<nz-divider></nz-divider>
<div class="r_row f_js">
<div class="f_row_ac">
<div>
<div class="card_container">
<div class="card_item">
<nz-card [nzActions]="[exportButton]">
<nz-card-meta nzTitle="导出" nzDescription="导出 API 数据"></nz-card-meta>
</nz-card>
<ng-template #exportButton>
<i (click)="export()" nz-icon nzType="export"></i>
</ng-template>
</div>
<div class="ml15">
<div class="card_item">
<nz-card [nzActions]="[syncButton]">
<nz-card-meta nzTitle="推送" nzDescription="将 API 推送/同步到其他平台"></nz-card-meta>
</nz-card>
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
13 changes: 10 additions & 3 deletions src/workbench/browser/src/app/pages/pages.component.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
<eo-navbar></eo-navbar>
<div class="home_container f_row">
<eo-sidebar></eo-sidebar>
<iframe src="http://localhost:8080" style="width: 100vw;"></iframe>
<div class="home fg1">
<router-outlet></router-outlet>
<iframe
*ngIf="!this.sidebar.currentModule.isOffical"
src="http://localhost:8080"
id="app"
frameborder="no"
border="0"
style="width: calc(100vw - 90px);height: calc(100vh - var(--NAVBAR_HEIGHT) - 4px);"
></iframe>
<router-outlet *ngIf="this.sidebar.currentModule.isOffical"></router-outlet>
</div>
</div>
<!-- <eo-toolbar></eo-toolbar> -->
<eo-toolbar></eo-toolbar>
14 changes: 9 additions & 5 deletions src/workbench/browser/src/app/pages/pages.component.ts
Original file line number Diff line number Diff line change
@@ -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);
});
}

}
7 changes: 3 additions & 4 deletions src/workbench/browser/src/app/pages/pages.module.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
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';
import { SharedModule } from '../shared/shared.module';

@NgModule({
declarations: [PagesComponent],
imports: [PagesRoutingModule, FormsModule, SharedModule],
exports: []
imports: [PagesRoutingModule, CommonModule, SharedModule],
exports: [],
})
export class PagesModule {}
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@
</ul>
</nz-dropdown-menu>
</div>
<!-- <span (click)="openApp(item.moduleID)" *ngFor="let item of getModules()" >&nbsp;{{ item.moduleName }}&nbsp;</span> -->
<span class="mr15" nz-dropdown (nzVisibleChange)="changeHelpVisible($event)" [nzDropdownMenu]="menu">
<span class="mr15" nz-dropdown [nzDropdownMenu]="menu">
<i nz-icon nzType="question-circle" class="fs24" nzTheme="outline"></i>
</span>
<nz-dropdown-menu #menu="nzDropdownMenu">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -79,8 +74,4 @@ export class NavbarComponent implements OnInit {
getModules(): Array<ModuleInfo> {
return Array.from(this.modules.values());
}

openApp(moduleID: string) {
window.eo.openApp({ moduleID: moduleID });
}
}
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
<div class="eo_sidebar" [ngClass]="{ eo_sidebar_shrink: isCollapsed }">
<a
(click)="openApp(item.moduleID)"
(click)="clickModule(item)"
*ngFor="let item of this.modules"
class="sidebar_item"
nz-tooltip
(nzTooltipVisibleChange)="tooltipVisibleChange($event)"
[nzTooltipTitle]="item.moduleName"
[routerLink]="item.route ? item.route : '/home/blank'"
[ngClass]="{ sidebar_item_active: item.moduleID === this.moduleID }"
[ngClass]="{ sidebar_item_active: item.moduleID === this.sidebar.currentModule.moduleID }"
>
<span *ngIf="item.logo.includes('icon-')" class="iconfont fs28" [ngClass]="item.logo"></span>
<img *ngIf="!item.logo.includes('icon-')" [src]="item.logo" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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<ModuleInfo | any>;
constructor(private electron: ElectronService, private router: Router, private sidebar: SidebarService) {
modules: Array<ModuleInfo | SidebarModuleInfo | any>;
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;
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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();
}
}
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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<boolean> = new Subject();
public appChanged$: Subject<void> = 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();
};
}
Loading

0 comments on commit 55d78ca

Please sign in to comment.