From f16031ffba397857349cccee01085e4ad504791b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A7=A6=E5=9C=86=E5=9C=86?= Date: Fri, 29 Apr 2022 18:26:10 +0800 Subject: [PATCH] feat: market feature preview --- .../browser/src/app/pages/api/api.module.ts | 3 +- .../pages/api/detail/api-detail.component.ts | 1 - .../group/tree/api-group-tree.component.html | 4 +- .../group/tree/api-group-tree.component.ts | 17 ++--- .../app/pages/api/tab/api-tab.component.ts | 3 +- .../src/app/pages/api/tab/api-tab.service.ts | 13 ++++ .../src/app/pages/pages-routing.module.ts | 5 ++ .../page-feature-preview.component.html | 1 + .../page-feature-preview.component.scss | 0 .../page-feature-preview.component.spec.ts | 25 +++++++ .../page-feature-preview.component.ts | 15 ++++ .../components/sidebar/sidebar.component.html | 18 +++-- .../components/sidebar/sidebar.component.ts | 69 ++++++++++++------- .../browser/src/app/shared/shared.module.ts | 5 +- 14 files changed, 134 insertions(+), 45 deletions(-) create mode 100644 src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.html create mode 100644 src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.scss create mode 100644 src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.spec.ts create mode 100644 src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.ts diff --git a/src/workbench/browser/src/app/pages/api/api.module.ts b/src/workbench/browser/src/app/pages/api/api.module.ts index 0d732935b..0e33b5e79 100644 --- a/src/workbench/browser/src/app/pages/api/api.module.ts +++ b/src/workbench/browser/src/app/pages/api/api.module.ts @@ -25,7 +25,6 @@ import { NzDividerModule } from 'ng-zorro-antd/divider'; import { NzCardModule } from 'ng-zorro-antd/card'; -import { ApiTabService } from './tab/api-tab.service'; import { MessageService } from '../../shared/services/message'; import { ApiGroupTreeComponent } from './group/tree/api-group-tree.component'; import { ApiTabComponent } from './tab/api-tab.component'; @@ -60,6 +59,6 @@ const COMPONENTS = [ApiComponent, ApiGroupEditComponent, ApiGroupTreeComponent, ], declarations: [...COMPONENTS, ApiTabComponent, ApiOverviewComponent], exports: [], - providers: [ElectronService, MessageService, ApiTabService, ApiService, StorageService], + providers: [ElectronService, MessageService, ApiService, StorageService], }) export class ApiModule {} diff --git a/src/workbench/browser/src/app/pages/api/detail/api-detail.component.ts b/src/workbench/browser/src/app/pages/api/detail/api-detail.component.ts index 09ed291c1..4b41ef22c 100644 --- a/src/workbench/browser/src/app/pages/api/detail/api-detail.component.ts +++ b/src/workbench/browser/src/app/pages/api/detail/api-detail.component.ts @@ -39,7 +39,6 @@ export class ApiDetailComponent implements OnInit { } getApiByUuid(id: number) { this.storage.run('apiDataLoad', [id], (result: StorageHandleResult) => { - console.log(result,id) if (result.status === StorageHandleStatus.success) { ['requestBody', 'responseBody'].forEach((tableName) => { if (['xml', 'json'].includes(result.data[`${tableName}Type`])) { diff --git a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html index f137f2774..2cd8dbbd8 100644 --- a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html +++ b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html @@ -30,7 +30,7 @@ -
+
-
+
= new Subject(); constructor( private router: Router, private route: ActivatedRoute, private modalService: ModalService, private messageService: MessageService, - private storage: StorageService + private storage: StorageService, + private electron: ElectronService ) {} ngOnInit(): void { this.buildGroupTreeData(); @@ -112,7 +114,6 @@ export class ApiGroupTreeComponent implements OnInit, OnDestroy { parentID: item.parentID ? `group-${item.parentID}` : '0', isLeaf: false, }); - console.log(this.treeItems); }); } this.getApis(); @@ -194,19 +195,19 @@ export class ApiGroupTreeComponent implements OnInit, OnDestroy { * @param event */ clickTreeItem(event: NzFormatEmitEvent): void { - let eventName=!event.node.isLeaf?'clickFolder':event.node?.origin.isFixed?'clickFixedItem':'clickItem'; - switch(eventName){ - case 'clickFolder':{ + let eventName = !event.node.isLeaf ? 'clickFolder' : event.node?.origin.isFixed ? 'clickFixedItem' : 'clickItem'; + switch (eventName) { + case 'clickFolder': { event.node.isExpanded = !event.node.isExpanded; this.toggleExpand(); break; } - case 'clickFixedItem':{ + case 'clickFixedItem': { event.eventName = 'detailOverview'; this.operateApiEvent(event); break; } - case 'clickItem':{ + case 'clickItem': { event.eventName = 'detailApi'; this.operateApiEvent(event); break; diff --git a/src/workbench/browser/src/app/pages/api/tab/api-tab.component.ts b/src/workbench/browser/src/app/pages/api/tab/api-tab.component.ts index 8af156745..f0ba16071 100644 --- a/src/workbench/browser/src/app/pages/api/tab/api-tab.component.ts +++ b/src/workbench/browser/src/app/pages/api/tab/api-tab.component.ts @@ -8,7 +8,7 @@ import { Message, MessageService } from '../../../shared/services/message'; @Component({ selector: 'eo-api-tab', templateUrl: './api-tab.component.html', - styleUrls: ['./api-tab.component.scss'], + styleUrls: ['./api-tab.component.scss'] }) export class ApiTabComponent implements OnInit, OnDestroy { apiDataItems: { [key: number | string]: ApiData }; @@ -39,6 +39,7 @@ export class ApiTabComponent implements OnInit, OnDestroy { this.watchApiAction(); } ngOnDestroy() { + this.tabSerive.destroy(); this.destroy$.next(); this.destroy$.complete(); } diff --git a/src/workbench/browser/src/app/pages/api/tab/api-tab.service.ts b/src/workbench/browser/src/app/pages/api/tab/api-tab.service.ts index 5069138e3..83cdc70fe 100644 --- a/src/workbench/browser/src/app/pages/api/tab/api-tab.service.ts +++ b/src/workbench/browser/src/app/pages/api/tab/api-tab.service.ts @@ -1,6 +1,11 @@ +import { Injectable } from '@angular/core'; import { ReplaySubject, Subject } from 'rxjs'; +import { AppModule } from '../../../app.module'; import { TabItem } from './tab.model'; +@Injectable({ + providedIn:AppModule +}) export class ApiTabService { tabs: Array = []; currentTab: TabItem; @@ -11,9 +16,11 @@ export class ApiTabService { tabChange$: ReplaySubject = new ReplaySubject(1); saveTabData$: Subject<{ tab: TabItem; data: any }> = new Subject(); get tabID(): number { + console.log('tab change', this); return this.currentTab.uuid; } constructor() { + console.log('init api tab service'); this.saveTabData$.subscribe((inData) => { this.addData(inData); }); @@ -28,4 +35,10 @@ export class ApiTabService { if (!this.tabCache.hasOwnProperty(tabID)) return; delete this.tabCache[tabID]; } + destroy(){ + this.saveTabData$.complete(); + this.tabChange$.complete(); + this.tabs=[]; + this.tabCache={}; + } } diff --git a/src/workbench/browser/src/app/pages/pages-routing.module.ts b/src/workbench/browser/src/app/pages/pages-routing.module.ts index 521c044e3..628ccbb68 100644 --- a/src/workbench/browser/src/app/pages/pages-routing.module.ts +++ b/src/workbench/browser/src/app/pages/pages-routing.module.ts @@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'; import { PagesComponent } from './pages.component'; import { PageBlankComponent } from '../shared/components/page-blank/page-blank.component'; +import { PageFeaturePreviewComponent } from '../shared/components/page-feature-preview/page-feature-preview.component'; const routes: Routes = [ { path: '', @@ -17,6 +18,10 @@ const routes: Routes = [ path: 'blank', component:PageBlankComponent }, + { + path: 'preview', + component:PageFeaturePreviewComponent + }, { path: 'api', loadChildren: () => import('./api/api.module').then((m) => m.ApiModule), diff --git a/src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.html b/src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.html new file mode 100644 index 000000000..e00b5f312 --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.scss b/src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.spec.ts b/src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.spec.ts new file mode 100644 index 000000000..362fe4510 --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PageFeaturePreviewComponent } from './page-feature-preview.component'; + +describe('PageFeaturePreviewComponent', () => { + let component: PageFeaturePreviewComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PageFeaturePreviewComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PageFeaturePreviewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.ts b/src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.ts new file mode 100644 index 000000000..fade9c000 --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'eo-page-feature-preview', + templateUrl: './page-feature-preview.component.html', + styleUrls: ['./page-feature-preview.component.scss'] +}) +export class PageFeaturePreviewComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} 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 a6a636d2a..c0a2327ca 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,9 +1,15 @@
- -
- - - -
+ + +
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 581359604..a11dedcaa 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'; + @Component({ selector: 'eo-sidebar', templateUrl: './sidebar.component.html', @@ -12,18 +13,16 @@ import { Router } from '@angular/router'; export class SidebarComponent implements OnInit, OnDestroy { isCollapsed: boolean; destroy = false; - isElectron: boolean = false; moduleID: string = '@eo-core-apimanger'; modules: Array; - constructor(private electron: ElectronService,private router: Router, private sidebar: SidebarService) { - this.isElectron = this.electron.isElectron; + constructor(private electron: ElectronService, private router: Router, private sidebar: SidebarService) { this.isCollapsed = this.sidebar.getCollapsed(); this.sidebar .onCollapsedChange() .pipe(takeWhile(() => !this.destroy)) .subscribe((isCollapsed) => { this.isCollapsed = isCollapsed; - if (this.isElectron) { + if (this.electron.isElectron) { const sideWidth: number = isCollapsed ? 50 : 90; window.eo.autoResize(sideWidth); } @@ -31,7 +30,7 @@ export class SidebarComponent implements OnInit, OnDestroy { } tooltipVisibleChange(visible) { - if (this.isCollapsed) { + if (this.electron.isElectron && this.isCollapsed) { window.eo.toogleViewZIndex(visible); } } @@ -41,33 +40,55 @@ export class SidebarComponent implements OnInit, OnDestroy { } ngOnInit(): void { - let defaultModule = { moduleName: 'API', moduleID: '@eo-core-apimanger', logo: 'icon-api', route: 'home/api/test' }; - if (this.isElectron) { - // TODO change app to blank page - this.modules = [defaultModule, ...Array.from(window.eo.getSideModuleList())]; - this.electron.ipcRenderer.on('moduleUpdate', (event, args) => { - console.log('get moduleUpdate'); - this.modules = window.eo.getSideModuleList(); - }); - } else { - this.modules = [defaultModule]; - } + this.getApps(); + this.getModuleIDFromRoute(); } openApp(moduleID: string) { - let currentApp=this.modules.find(val=>val.moduleID===this.moduleID),nextApp=this.modules.find(val=>val.moduleID===moduleID); - if(currentApp.route){ - //core app - this.router.navigate(['home/blank']); - } this.moduleID = moduleID; - if(nextApp.route){ + let nextApp = this.modules.find((val) => val.moduleID === moduleID); + if (nextApp.route) { this.router.navigate([nextApp.route]); } - window.eo.openApp({ moduleID: moduleID }); + if (this.electron.isElectron) { + window.eo.openApp({ moduleID: moduleID }); + } } - ngOnDestroy(): void { this.destroy = true; } + private getApps() { + let defaultModule = [ + { + moduleName: 'API', + moduleID: '@eo-core-apimanger', + logo: 'icon-api', + activeRoute: 'home/api', + route: 'home/api/test', + }, + ]; + if (!this.electron.isElectron) { + defaultModule.push({ + moduleName: '插件广场', + moduleID: '@eo-core-extension', + logo: 'icon-apps', + activeRoute: 'home/preview', + route: 'home/preview', + }); + } + if (this.electron.isElectron) { + this.modules = [...defaultModule, ...Array.from(window.eo.getSideModuleList())]; + this.electron.ipcRenderer.on('moduleUpdate', (event, args) => { + console.log('get moduleUpdate'); + this.modules = window.eo.getSideModuleList(); + }); + } else { + this.modules = [...defaultModule]; + } + } + 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); + } } diff --git a/src/workbench/browser/src/app/shared/shared.module.ts b/src/workbench/browser/src/app/shared/shared.module.ts index 172105e0e..615658f05 100644 --- a/src/workbench/browser/src/app/shared/shared.module.ts +++ b/src/workbench/browser/src/app/shared/shared.module.ts @@ -22,12 +22,15 @@ import { NzSpinModule } from 'ng-zorro-antd/spin'; import { ApiParamsNumPipe } from './pipes/api-param-num.pipe'; import { ModalService } from './services/modal.service'; import { PageBlankComponent } from './components/page-blank/page-blank.component'; +import { PageFeaturePreviewComponent } from './components/page-feature-preview/page-feature-preview.component'; +import { RouterModule } from '@angular/router'; const COMPONENTS = [ToolbarComponent, SelectThemeComponent, SidebarComponent, NavbarComponent,PageNotFoundComponent]; @NgModule({ imports: [ CommonModule, FormsModule, + RouterModule, ReactiveFormsModule, NzDrawerModule, NzRadioModule, @@ -38,7 +41,7 @@ const COMPONENTS = [ToolbarComponent, SelectThemeComponent, SidebarComponent, Na NzDropDownModule, NzSpinModule ], - declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent], + declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent, PageFeaturePreviewComponent], providers: [ModalService], exports: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe], })