From 92760c6a3778c7cf4f74a610127edff8e48b0f22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E9=B9=B0?= <17kungfuboy@gmail.com>
Date: Tue, 28 Jun 2022 11:45:32 +0800
Subject: [PATCH] feat: update env

---
 .../src/app/pages/api/api.component.html      | 39 ++++++++++++-------
 .../src/app/pages/api/api.component.scss      |  9 +++++
 .../src/app/pages/api/api.component.ts        |  6 +++
 .../shared/components/env/env.component.html  |  6 +--
 4 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/src/workbench/browser/src/app/pages/api/api.component.html b/src/workbench/browser/src/app/pages/api/api.component.html
index 969aa3b86..87397dc00 100644
--- a/src/workbench/browser/src/app/pages/api/api.component.html
+++ b/src/workbench/browser/src/app/pages/api/api.component.html
@@ -2,10 +2,12 @@
   <nz-sider nzTheme="light" nzWidth="250">
     <!-- <div class="side-container"> -->
     <nz-content>
-      <nz-tabset nzCentered [nzAnimated]="false">
+      <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,15 +38,22 @@
       <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 h-full">
+            <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">管理环境</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>
diff --git a/src/workbench/browser/src/app/pages/api/api.component.scss b/src/workbench/browser/src/app/pages/api/api.component.scss
index 08aa888f0..7b175e4f4 100644
--- a/src/workbench/browser/src/app/pages/api/api.component.scss
+++ b/src/workbench/browser/src/app/pages/api/api.component.scss
@@ -68,3 +68,12 @@ nz-sider {
   }
 }
 
+nz-divider {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.manager-env {
+  color: #00785a;
+}
+
diff --git a/src/workbench/browser/src/app/pages/api/api.component.ts b/src/workbench/browser/src/app/pages/api/api.component.ts
index 2ed041eb6..21f8561b2 100644
--- a/src/workbench/browser/src/app/pages/api/api.component.ts
+++ b/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) => {
diff --git a/src/workbench/browser/src/app/shared/components/env/env.component.html b/src/workbench/browser/src/app/shared/components/env/env.component.html
index 8a45ca78e..1d6d1ef48 100644
--- a/src/workbench/browser/src/app/shared/components/env/env.component.html
+++ b/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>