Merge branch 'feat/preview' of https://github.com/eolinker/eoapi into feat/preview

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

@@ -1,11 +1,13 @@
 <nz-layout class="layout">
   <nz-sider nzTheme="light" nzWidth="250">
     <!-- <div class="side-container"> -->
-    <nz-content class="api-tabs">
-      <nz-tabset nzCentered [nzAnimated]="false">
+    <nz-content>
+      <nz-tabset nzCentered [nzAnimated]="false" [(nzSelectedIndex)]="tabsIndex">
         <nz-tab [nzTitle]="apiTitle">
           <ng-template #apiTitle>
-            <iconpark-icon name="folder-open"></iconpark-icon>
+            <span nzTooltipTitle="Collections" nz-tooltip>
+              <iconpark-icon name="folder-open"></iconpark-icon>
+            </span>
           </ng-template>
           <div class="inner-content">
             <eo-api-group-tree></eo-api-group-tree>
@@ -13,13 +15,17 @@
         </nz-tab>
         <nz-tab [nzTitle]="historyTitle">
           <ng-template #historyTitle>
-            <iconpark-icon name="history"></iconpark-icon>
+            <span nzTooltipTitle="History" nz-tooltip>
+              <iconpark-icon name="history"></iconpark-icon>
+            </span>
           </ng-template>
           <eo-history></eo-history>
         </nz-tab>
         <nz-tab [nzTitle]="envTitle">
           <ng-template #envTitle>
-            <iconpark-icon name="instruction"></iconpark-icon>
+            <span nzTooltipTitle="Environment" nz-tooltip>
+              <iconpark-icon name="instruction"></iconpark-icon>
+            </span>
           </ng-template>
           <eo-env></eo-env>
         </nz-tab>
@@ -32,16 +38,34 @@
       <div class="inner-content">
         <div class="tabs-bar f_row">
           <eo-api-tab class="fg1"></eo-api-tab>
-          <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 class="flex items-center">
+            <nz-select
+              [(ngModel)]="envUuid"
+              [(nzOpen)]="isOpen"
+              (nzOpenChange)="handleEnvSelectStatus($event)"
+              [nzDropdownRender]="renderTemplate"
+              nzAllowClear
+              nzPlaceHolder="Environment"
+            >
+              <nz-option *ngFor="let item of envList" [nzValue]="item.uuid" [nzLabel]="item.name"></nz-option>
+            </nz-select>
+            <ng-template #renderTemplate>
+              <nz-divider></nz-divider>
+              <a class="manager-env" nz-button nzType="link" (click)="gotoEnvManager()">管理环境</a>
+            </ng-template>
+          </div>
         </div>
         <div class="content_container {{ this.id ? 'has_tab_page' : '' }}">
           <nz-tabset class="inside_page_tab" [nzAnimated]="false" *ngIf="this.id" nzLinkRouter>
             <nz-tab *ngFor="let tab of TABS">
-              <a *nzTabLink nz-tab-link (click)="clickContentMenu(tab)" [routerLink]="[tab.routerLink]"
-                queryParamsHandling="merge">{{ tab.title }}</a>
+              <a
+                *nzTabLink
+                nz-tab-link
+                (click)="clickContentMenu(tab)"
+                [routerLink]="[tab.routerLink]"
+                queryParamsHandling="merge"
+                >{{ tab.title }}</a
+              >
             </nz-tab>
           </nz-tabset>
           <router-outlet></router-outlet>

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

@@ -76,3 +76,12 @@ nz-sider {
   }
 }
 
+nz-divider {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.manager-env {
+  color: #00785a;
+}
+

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

@@ -38,6 +38,7 @@ export class ApiComponent implements OnInit, OnDestroy {
   envInfo: any = {};
   envList: Array<any> = [];
   activeUuid: number | string = 0;
+  tabsIndex = 0;
   private destroy$: Subject<void> = new Subject<void>();
 
   constructor(
@@ -127,6 +128,11 @@ export class ApiComponent implements OnInit, OnDestroy {
     this.messageService.send({ type: 'beforeChangeRouter', data });
   }
 
+  gotoEnvManager() {
+    // * switch to env
+    this.tabsIndex = 2;
+  }
+
   getAllEnv(uuid?: number) {
     const projectID = 1;
     return new Promise((resolve) => {

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

@@ -11,10 +11,10 @@
   <a class="btn" (click)="handleShowModal()">管理环境</a>
 </ng-template> -->
 <div class="flex flex-col">
-  <div class="header flex items-center justify-between h-10 px-2">
+  <div class="flex items-center justify-between h-10 px-2 header">
     <span class="font-bold">Environment</span>
     <div
-      class="btn flex shrink-0 items-center justify-center h-7 text-base"
+      class="flex items-center justify-center text-base btn shrink-0 h-7"
       (click)="handleShowModal()"
       nz-tooltip
       nzTooltipTitle="New Environment"
@@ -24,7 +24,7 @@
   </div>
   <div
     *ngFor="let item of envList"
-    class="env-item flex items-center justify-between p-2"
+    class="flex items-center justify-between p-2 env-item"
     (click)="handleSwitchEnv(item.uuid)"
   >
     <span class="name">{{ item.name }}</span>