feat: market feature preview

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 {}

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`])) {

src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html

@@ -30,7 +30,7 @@
   </nz-input-group>
 </header>
 <!-- Fixed Group -->
-<div class="group_container fixed_group_tree pt10">
+<div class="group_container fixed_group_tree pt10" *ngIf="this.electron.isElectron">
   <nz-tree
     [nzData]="fixedTreeNode"
     [nzSelectedKeys]="nzSelectedKeys"
@@ -47,7 +47,7 @@
     </div>
   </ng-template>
 </div>
-<div class="bbd"></div>
+<div class="bbd" *ngIf="this.electron.isElectron"></div>
 <!-- Custom Group -->
 <div class="group_container group_tree pt10">
   <nz-tree

src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.ts

@@ -17,6 +17,7 @@ import { getExpandGroupByKey, listToTree } from '../../../../utils/tree/tree.uti
 import { NzTreeComponent } from 'ng-zorro-antd/tree';
 import { ModalService } from '../../../../shared/services/modal.service';
 import { StorageService } from '../../../../shared/services/storage';
+import { ElectronService } from '../../../../core/services';
 @Component({
   selector: 'eo-api-group-tree',
   templateUrl: './api-group-tree.component.html',
@@ -61,14 +62,15 @@ export class ApiGroupTreeComponent implements OnInit, OnDestroy {
       isFixed: true,
     },
   ];
-  nzSelectedKeys: number[]=[];
+  nzSelectedKeys: number[] = [];
   private destroy$: Subject<void> = new Subject<void>();
   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;

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();
   }

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<TabItem> = [];
   currentTab: TabItem;
@@ -11,9 +16,11 @@ export class ApiTabService {
   tabChange$: ReplaySubject<TabItem> = 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={};
+  }
 }

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),

src/workbench/browser/src/app/shared/components/page-feature-preview/page-feature-preview.component.html

@@ -0,0 +1 @@
+<nz-result [nzIcon]="'smile-twotone'" [nzTitle]="'即将发布，敬请期待'"> <div nz-result-extra></div> </nz-result>

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<PageFeaturePreviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageFeaturePreviewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageFeaturePreviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+  }
+
+}

src/workbench/browser/src/app/shared/components/sidebar/sidebar.component.html

@@ -1,9 +1,15 @@
 <div class="eo_sidebar" [ngClass]="{ eo_sidebar_shrink: isCollapsed }">
-  <a (click)="openApp(item.moduleID)" *ngFor="let item of this.modules">
-    <div nz-tooltip (nzTooltipVisibleChange)="tooltipVisibleChange($event)" [nzTooltipTitle]="item.moduleName" class="sidebar_item" [ngClass]="{sidebar_item_active:item.moduleID===this.moduleID}">
-      <span *ngIf="item.logo.includes('icon-')" class="iconfont fs28" [ngClass]="item.logo" ></span> 
-      <img *ngIf="!item.logo.includes('icon-')"[src]="item.logo" /> 
-      <!-- <span *ngIf="!isCollapsed">{{ item.moduleName }}</span>-->
-     </div>
+  <a
+    (click)="openApp(item.moduleID)"
+    *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 }"
+  >
+    <span *ngIf="item.logo.includes('icon-')" class="iconfont fs28" [ngClass]="item.logo"></span>
+    <img *ngIf="!item.logo.includes('icon-')" [src]="item.logo" />
   </a>
 </div>

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,26 +13,24 @@ 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<ModuleInfo | any>;
-  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);
         }
       });
   }
 
   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);
+  }
 }

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],
 })