feat: done env

src/workbench/browser/src/app/pages/api/api.component.html

@@ -32,9 +32,15 @@
       <div class="inner-content">
         <div class="tabs-bar f_row">
           <eo-api-tab class="fg1"></eo-api-tab>
-          <!-- <div class="env">
-            <eo-env></eo-env>
-          </div> -->
+          <nz-select
+            [(ngModel)]="envUuid"
+            [(nzOpen)]="isOpen"
+            (nzOpenChange)="handleEnvSelectStatus($event)"
+            nzAllowClear
+            nzPlaceHolder="Environment"
+          >
+            <nz-option *ngFor="let item of envList" [nzValue]="item.uuid" [nzLabel]="item.name"></nz-option>
+          </nz-select>
         </div>
         <div class="content_container {{ this.id ? 'has_tab_page' : '' }}">
           <nz-tabset class="inside_page_tab" [nzAnimated]="false" *ngIf="this.id" nzLinkRouter>

src/workbench/browser/src/app/pages/api/api.component.scss

@@ -2,6 +2,10 @@ nz-content {
   background-color: var(--MAIN_BG);
 }
 
+nz-select {
+  width: 120px;
+}
+
 nz-sider {
   width: 250px;
   background-color: #fff;

src/workbench/browser/src/app/pages/api/api.component.ts

@@ -1,9 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { StorageRes, StorageResStatus } from '../../shared/services/storage/index.model';
 import { Subject, takeUntil } from 'rxjs';
+import { Store } from '@ngxs/store';
 import { Message, MessageService } from '../../shared/services/message';
 import { ApiService } from './api.service';
 import { StorageService } from '../../shared/services/storage';
+import { Change } from '../../shared/store/env.state';
 import { RemoteService } from 'eo/workbench/browser/src/app/shared/services/remote/remote.service';
 
 @Component({
@@ -31,16 +34,34 @@ export class ApiComponent implements OnInit, OnDestroy {
       title: '测试',
     },
   ];
+  isOpen = false;
+  envInfo: any = {};
+  envList: Array<any> = [];
+  activeUuid: number | string = 0;
   private destroy$: Subject<void> = new Subject<void>();
 
   constructor(
     private route: ActivatedRoute,
     private apiService: ApiService,
     private messageService: MessageService,
     private storage: StorageService,
-    private remoteService: RemoteService
+    private remoteService: RemoteService,
+    private store: Store
   ) {}
 
+  get envUuid(): number {
+    return Number(localStorage.getItem('env:selected')) || 0;
+  }
+  set envUuid(value) {
+    this.activeUuid = value;
+    if (value !== null) {
+      localStorage.setItem('env:selected', value == null ? '' : value.toString());
+    } else {
+      localStorage.removeItem('env:selected');
+    }
+    this.changeStoreEnv(value);
+  }
+
   ngOnInit(): void {
     this.watchChangeRouter();
     this.watchApiAction();
@@ -51,6 +72,11 @@ export class ApiComponent implements OnInit, OnDestroy {
         title: 'Mock',
       });
     }
+    this.envUuid = Number(localStorage.getItem('env:selected'));
+    // * load All env
+    this.getAllEnv().then((result: any[]) => {
+      this.envList = result || [];
+    });
   }
   ngOnDestroy() {
     this.destroy$.next();
@@ -98,6 +124,33 @@ export class ApiComponent implements OnInit, OnDestroy {
     });
   }
   clickContentMenu(data) {
-    this.messageService.send({ type: 'beforeChangeRouter', data: data });
+    this.messageService.send({ type: 'beforeChangeRouter', data });
   }
+
+  getAllEnv(uuid?: number) {
+    const projectID = 1;
+    return new Promise((resolve) => {
+      this.storage.run('environmentLoadAllByProjectID', [projectID], async (result: StorageRes) => {
+        if (result.status === StorageResStatus.success) {
+          return resolve(result.data || []);
+        }
+        return resolve([]);
+      });
+    });
+  }
+
+  private changeStoreEnv(uuid) {
+    if (uuid == null) {
+      this.store.dispatch(new Change(null));
+      return;
+    }
+    this.storage.run('environmentLoadAllByProjectID', [1], (result: StorageRes) => {
+      if (result.status === StorageResStatus.success) {
+        const data = result.data.find((val) => val.uuid === Number(uuid));
+        this.store.dispatch(new Change(data));
+      }
+    });
+  }
+
+  handleEnvSelectStatus(event: boolean) {}
 }

src/workbench/browser/src/app/pages/api/api.module.ts

@@ -30,6 +30,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzDividerModule } from 'ng-zorro-antd/divider';
 import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
 
@@ -81,6 +82,7 @@ const COMPONENTS = [
     EnvModule,
     NzCardModule,
     NzModalModule,
+    NzSelectModule,
     NzPopconfirmModule,
   ],
   declarations: [...COMPONENTS],

src/workbench/browser/src/app/pages/api/tab/api-tab.component.html

@@ -1,5 +1,11 @@
-<nz-tabset [(nzSelectedIndex)]="selectedIndex" nzType="editable-card" nzHideAdd="true" (nzClose)="closeTab($event)"
-  (nzSelectChange)="pickTab()" [nzTabBarExtraContent]="extraTemplate">
+<nz-tabset
+  [(nzSelectedIndex)]="selectedIndex"
+  nzType="editable-card"
+  nzHideAdd="true"
+  (nzClose)="closeTab($event)"
+  (nzSelectChange)="pickTab()"
+  [nzTabBarExtraContent]="extraTemplate"
+>
   <nz-tab *ngFor="let tab of tabSerive.tabs; let i = index" nzClosable [nzTitle]="titleTemplate">
     <ng-template #titleTemplate>
       <span class="mr5 method_text_{{ tab.method }}" *ngIf="tab.method">{{ tab.method }}</span>