Merge branch 'main' of github.com:eolinker/eoapi

Postcatlab · May 11, 2022 · 0892e8d · 0892e8d
2 parents 047a5fd + 6826516
commit 0892e8d
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 30 deletions.
diff --git a/src/workbench/browser/src/app/pages/env/env.component.html b/src/workbench/browser/src/app/pages/env/env.component.html
@@ -1,10 +1,5 @@
-<nz-select
-  [(ngModel)]="envUuid"
-  [nzDropdownRender]="renderTemplate"
-  (nzOpenChange)="handleEnvSelectStatus($event)"
-  nzAllowClear
-  nzPlaceHolder="选择环境"
->
+<nz-select [(ngModel)]="envUuid" [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>
@@ -16,15 +11,16 @@
   <section *nzModalContent class="flex">
     <div class="side_bar">
       <nz-list nzSize="small" class="list">
-        <nz-list-item *ngFor="let item of envList" class="list_item" (click)="handleSwitchEnv(item.uuid)">
-          <span nz-typography [ngClass]="{ active: activeUuid === item.uuid }">{{ item.name }}</span>
+        <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>
           </a>
         </nz-list-item>
-        <nz-list-footer class="footer" (click)="handleAddEnv(null)">
-          <i nz-icon nzType="plus" nzTheme="outline"></i> 新建环境</nz-list-footer
-        >
+        <nz-list-footer class="footer" [ngClass]="{ active: activeUuid === null }" (click)="handleAddEnv(null)">
+          <i nz-icon nzType="plus" nzTheme="outline"></i> 新建环境
+        </nz-list-footer>
       </nz-list>
     </div>
     <div class="main-content">
@@ -42,19 +38,11 @@
           </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>
+            <i (click)="handleDeleteParams(index)" nz-icon nzType="delete"
+              *ngIf="scope.name || scope.value || scope.description" nzTheme="fill"></i>
           </ng-template>
         </eo-table>
       </form>

diff --git a/src/workbench/browser/src/app/pages/env/env.component.scss b/src/workbench/browser/src/app/pages/env/env.component.scss
@@ -1,7 +1,15 @@
+$boxHeight: 60vh;
+@mixin item-active {
+  color: var(--MAIN_THEME_COLOR);
+  background-color: #f4f4f4;
+  border-color: transparent;
+  border-radius: 5px;
+}
+
 .flex {
   display: flex;
   width: 100%;
-  height: 60vh;
+  height: $boxHeight;
 }
 
 .b-2 {
@@ -11,16 +19,34 @@
 .side_bar {
   display: flex;
   width: 240px;
-  overflow-y: auto;
   .list {
     width: 100%;
+    ::ng-deep .ant-list-items {
+      overflow-y: auto;
+      max-height: calc($boxHeight - 42px);
+    }
     .list_item {
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      .active {
-        color: var(--MAIN_THEME_COLOR);
+      transition: background-color 0.15s;
+
+      &:hover {
+        background-color: #f4f4f4;
+        border-radius: 5px;
+      }
+      &:not(:first-of-type) {
+        border-top: 1px solid #f0f0f0;
+      }
+      &:not(:last-of-type) {
+        border-bottom-color: transparent;
+      }
+      &.active {
+        @include item-active;
+        &:not(:last-of-type) + .list_item {
+          border-top-color: transparent;
+        }
       }
     }
     .footer {
@@ -31,8 +57,8 @@
       i {
         color: var(--MAIN_THEME_COLOR);
       }
-      &:hover {
-        background-color: #f4f4f4;
+      &.active {
+        @include item-active;
       }
     }
   }