feat: base env

Postcatlab · Jun 27, 2022 · f27deb9 · f27deb9
1 parent 6078116
commit f27deb9
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 36 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
@@ -1,25 +1,52 @@
 <nz-layout class="layout">
   <nz-sider nzTheme="light" nzWidth="250">
+    <!-- <div class="side-container"> -->
     <nz-content>
-      <div class="inner-content">
-        <eo-api-group-tree></eo-api-group-tree>
-      </div>
+      <nz-tabset nzCentered>
+        <nz-tab [nzTitle]="apiTitle">
+          <ng-template #apiTitle>
+            <iconpark-icon name="folder-open"></iconpark-icon>
+          </ng-template>
+          <div class="inner-content">
+            <eo-api-group-tree></eo-api-group-tree>
+          </div>
+        </nz-tab>
+        <nz-tab [nzTitle]="historyTitle">
+          <ng-template #historyTitle>
+            <iconpark-icon name="history"></iconpark-icon>
+          </ng-template>
+          <div>kkkk</div>
+        </nz-tab>
+        <nz-tab [nzTitle]="envTitle">
+          <ng-template #envTitle>
+            <iconpark-icon name="instruction"></iconpark-icon>
+          </ng-template>
+          <eo-env></eo-env>
+        </nz-tab>
+      </nz-tabset>
     </nz-content>
+    <!-- </div> -->
   </nz-sider>
   <nz-layout class="right-layout">
     <nz-content>
       <div class="inner-content">
         <div class="tabs-bar f_row">
           <eo-api-tab class="fg1"></eo-api-tab>
-          <div class="env">
+          <!-- <div class="env">
             <eo-env></eo-env>
-          </div>
+          </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>

diff --git a/src/workbench/browser/src/app/pages/api/api.component.scss b/src/workbench/browser/src/app/pages/api/api.component.scss
@@ -56,3 +56,11 @@ nz-sider {
     color: var(--BLACK_TAG_BG);
   }
 }
+
+.side-container {
+  ::ng-deep .ant-tabs-nav-list {
+    width: 100%;
+    border: 1px solid red;
+  }
+}
+
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
@@ -1,17 +1,48 @@
-<nz-select [(ngModel)]="envUuid" [(nzOpen)]="isOpen" [nzDropdownRender]="renderTemplate"
-  (nzOpenChange)="handleEnvSelectStatus($event)" nzAllowClear nzPlaceHolder="选择环境">
-  <nz-option *ngFor="let item of envList" [nzValue]="item.uuid" [nzLabel]="item.name"></nz-option>
-</nz-select>
-<ng-template #renderTemplate>
+<!-- <nz-select
+  [(ngModel)]="envUuid"
+  [(nzOpen)]="isOpen"
+  (nzOpenChange)="handleEnvSelectStatus($event)"
+  nzAllowClear
+  nzPlaceHolder="选择环境"
+>
+</nz-select> -->
+<!-- <ng-template #renderTemplate>
   <nz-divider></nz-divider>
   <a class="btn" (click)="handleShowModal()">管理环境</a>
-</ng-template>
+</ng-template> -->
+<div class="flex flex-col">
+  <div class="header flex items-center justify-between h-10 px-2">
+    <span class="font-bold">Environment</span>
+    <div
+      class="btn flex shrink-0 items-center justify-center h-7 text-base"
+      (click)="handleShowModal()"
+      nz-tooltip
+      nzTooltipTitle="New Environment"
+    >
+      <iconpark-icon name="plus"></iconpark-icon>
+    </div>
+  </div>
+  <div
+    *ngFor="let item of envList"
+    class="env-item flex items-center justify-between p-2"
+    (click)="handleSwitchEnv(item.uuid)"
+  >
+    <span class="name">{{ item.name }}</span>
+    <a nz-popconfirm nzPopconfirmTitle="是否确定删除?" (nzOnConfirm)="handleDeleteEnv(item.uuid)">
+      <iconpark-icon name="delete"></iconpark-icon>
+    </a>
+  </div>
+</div>
 <nz-modal [(nzVisible)]="isVisible" nzWidth="70%" nzTitle="环境详情" (nzOnCancel)="handleCancel()">
   <section *nzModalContent class="flex">
-    <div class="side_bar">
+    <!-- <div class="side_bar">
       <nz-list nzSize="small" class="list">
-        <nz-list-item *ngFor="let item of envList" class="list_item" [ngClass]="{ active: activeUuid === item.uuid }"
-          (click)="handleSwitchEnv(item.uuid)">
+        <nz-list-item
+          *ngFor="let item of envList"
+          class="list_item"
+          [ngClass]="{ active: activeUuid === item.uuid }"
+          (click)="handleSwitchEnv(item.uuid)"
+        >
           <span nz-typography>{{ item.name }}</span>
           <a nz-popconfirm nzPopconfirmTitle="是否确定删除?" (nzOnConfirm)="handleDeleteEnv(item.uuid)">
             <i nz-icon nzType="delete" nzTheme="fill"></i>
@@ -21,7 +52,7 @@
           <i nz-icon nzType="plus" nzTheme="outline"></i> 新建环境
         </nz-list-footer>
       </nz-list>
-    </div>
+    </div> -->
     <div class="main-content">
       <form nz-form nzLayout="vertical">
         <nz-form-item>
@@ -37,11 +68,13 @@
           </nz-form-control>
         </nz-form-item>
         <p class="b-2">环境变量：在接口文档或测试的过程中，使用{{ varName }}即可引用该环境变量</p>
-        <eo-table [(model)]="envInfo.parameters" [columns]="envListColumns"
-          [dataModel]="{ name: '', value: '', description: '' }">
+        <eo-table
+          [(model)]="envInfo.parameters"
+          [columns]="envListColumns"
+          [dataModel]="{ name: '', value: '', description: '' }"
+        >
           <ng-template cell="action" let-scope="scope" let-index="index">
-            <i (click)="handleDeleteParams(index)" nz-icon nzType="delete"
-              *ngIf="scope.name || scope.value || scope.description" nzTheme="fill"></i>
+            <iconpark-icon name="delete"></iconpark-icon>
           </ng-template>
         </eo-table>
       </form>

diff --git a/src/workbench/browser/src/app/shared/components/env/env.component.scss b/src/workbench/browser/src/app/shared/components/env/env.component.scss
@@ -6,14 +6,29 @@ $boxHeight: 60vh;
   border-radius: 5px;
 }
 
-.flex {
-  display: flex;
-  width: 100%;
-  height: $boxHeight;
+.header {
+  border-bottom: 1px solid #eee;
 }
 
-.b-2 {
-  margin-bottom: 1em;
+.env-item {
+  cursor: pointer;
+  background-color: #fff;
+  transition: all 0.3s ease;
+  a {
+    transition: all 0.3s ease;
+    opacity: 0;
+  }
+  &:hover {
+    background-color: #f4f4f4;
+    a {
+      opacity: 1;
+    }
+  }
+  &.active {
+    .name {
+      color: var(--BTN_PRIMARY_BG);
+    }
+  }
 }
 
 .side_bar {
@@ -89,14 +104,15 @@ $boxHeight: 60vh;
   padding: 4px 11px;
 }
 
-nz-divider {
-  margin: 5px 0;
-}
 .btn {
-  color: #1890ff;
-  padding: 10px 10px;
+  width: 32px;
+  background-color: var(--BTN_PRIMARY_BG);
+  color: #fff;
+  border-radius: 3px;
+  cursor: pointer;
 }
 
+
 ::ng-deep {
   eo-env {
     .ant-select:not(.ant-select-customize-input) .ant-select-selector {

diff --git a/src/workbench/browser/src/app/shared/components/env/env.component.ts b/src/workbench/browser/src/app/shared/components/env/env.component.ts
@@ -65,7 +65,7 @@ export class EnvComponent implements OnInit, OnDestroy {
             resolve(true);
             return;
           }
-          await this.handleSwitchEnv(uuid ?? result.data[0].uuid);
+          // await this.handleSwitchEnv(uuid ?? result.data[0].uuid);
           resolve(true);
         }
       });
@@ -89,6 +89,7 @@ export class EnvComponent implements OnInit, OnDestroy {
     this.envInfo.parameters = data.filter((it, i) => i !== index);
   }
   handleSwitchEnv(uuid) {
+    this.handleShowModal();
     // * switch env in menu on left sidebar
     return new Promise((resolve) => {
       this.storage.run('environmentLoad', [uuid], (result: StorageRes) => {
@@ -112,6 +113,7 @@ export class EnvComponent implements OnInit, OnDestroy {
       parameters: [],
     };
     this.activeUuid = null;
+    this.handleShowModal();
   }
 
   handleSaveEnv(uuid: string | number | undefined = undefined) {
@@ -154,14 +156,15 @@ export class EnvComponent implements OnInit, OnDestroy {
 
   handleCancel(): void {
     this.isVisible = false;
-    this.envList = [];
+    // this.envList = [];
     this.envInfo = {};
   }
 
   handleShowModal() {
+    // this.handleAddEnv(null);
     this.isVisible = true;
     this.isOpen = false;
-    this.getAllEnv(this.envUuid);
+    // this.getAllEnv(this.envUuid);
   }
 
   handleEnvSelectStatus(event: boolean) {

diff --git a/src/workbench/browser/src/app/shared/components/env/env.module.ts b/src/workbench/browser/src/app/shared/components/env/env.module.ts
@@ -8,6 +8,7 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzListModule } from 'ng-zorro-antd/list';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
@@ -26,6 +27,7 @@ const ANTDMODULES = [
   NzSelectModule,
   NzDividerModule,
   NzPopconfirmModule,
+  NzToolTipModule,
 ];
 @NgModule({
   declarations: [EnvComponent],

diff --git a/src/workbench/browser/src/index.html b/src/workbench/browser/src/index.html
@@ -5,7 +5,7 @@
     <title>Eoapi</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_12799_10.8180f6537ea9ce6b2c1d9bc81c623a5f.js"></script>
+    <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_12799_15.bc53b477353281e2de90cc1387bdd532.js"></script>
     <link rel="icon" type="image/x-icon" href="assets/icons/icon.ico" />
   </head>
   <!-- Angular Cli need for node modules -->