fix: some css style issue

Postcatlab · Aug 15, 2022 · 12ed915 · 12ed915
1 parent 931f8a7
commit 12ed915
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 63 deletions.
diff --git a/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.ts b/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.ts
@@ -97,10 +97,14 @@ export class EoEditorComponent implements AfterViewInit, OnInit, OnChanges {
   ngOnChanges() {
     // * update root type
     if (this.eventList.includes('type') && !this.hiddenList.includes('type')) {
-      const type = whatTextType(this.code || '');
-      this.editorType = type;
-      if (this.autoFormat) {
-        this.code = this.formatCode(this.code, type);
+      try {
+        const type = whatTextType(this.code || '');
+        this.editorType = type;
+        if (this.autoFormat) {
+          this.code = this.formatCode(this.code, type);
+        }
+      } catch (error) {
+        console.log(error);
       }
     }
   }

diff --git a/src/workbench/browser/src/app/pages/api/edit/api-edit.component.html b/src/workbench/browser/src/app/pages/api/edit/api-edit.component.html
@@ -23,21 +23,14 @@
     <nz-input-group nzCompact>
       <nz-form-item nz-col>
         <nz-form-control class="w_250" i18n-nzErrorTip nzErrorTip="Please select an API group">
-          <nz-tree-select
-            nzAllowClear="false"
-            [nzExpandedKeys]="expandKeys"
-            [nzDropdownMatchSelectWidth]="false"
-            [nzNodes]="groups"
-            [(ngModel)]="model.groupID"
-            [nzShowSearch]="true"
-            #apiGroup
-            formControlName="groupID"
-          >
+          <nz-tree-select nzAllowClear="false" [nzExpandedKeys]="expandKeys" [nzDropdownMatchSelectWidth]="false"
+            [nzNodes]="groups" [(ngModel)]="model.groupID" [nzShowSearch]="true" #apiGroup formControlName="groupID">
           </nz-tree-select>
         </nz-form-control>
       </nz-form-item>
-      <nz-form-item nz-col class="fg1" >
-        <nz-form-control i18n-nzErrorTip nzErrorTip="Please enter API name" [nzValidateStatus]="this.validateForm.controls.name">
+      <nz-form-item nz-col class="fg1">
+        <nz-form-control i18n-nzErrorTip nzErrorTip="Please enter API name"
+          [nzValidateStatus]="this.validateForm.controls.name">
           <input type="text" [(ngModel)]="model.name" name="name" id="name" nz-input formControlName="name" />
         </nz-form-control>
       </nz-form-item>
@@ -53,53 +46,45 @@
             <span i18n>Request Headers</span>
             <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(model.requestHeaders)">{{
               model.requestHeaders | apiParamsNum
-            }}</span>
+              }}</span>
           </ng-template>
-          <eo-api-edit-header
-            class="eo_theme_iblock bbd bld brd"
-            (modelChange)="emitChangeFun()"
-            [model]="model.requestHeaders"
-          ></eo-api-edit-header>
+          <eo-api-edit-header class="eo_theme_iblock bbd bld brd" (modelChange)="emitChangeFun()"
+            [model]="model.requestHeaders"></eo-api-edit-header>
         </nz-tab>
         <!-- 请求体 -->
         <nz-tab [nzTitle]="bodyTitleTmp" [nzForceRender]="true">
           <ng-template #bodyTitleTmp>
             <span i18n>Body</span>
-            <span
-              class="eo-tab-theme-icon"
-              *ngIf="
+            <span class="eo-tab-theme-icon" *ngIf="
                 ['formData', 'json', 'xml'].includes(model.requestBodyType)
                   ? bindGetApiParamNum(model.requestBody)
                   : model.requestBody?.length
-              "
-            ></span>
+              "></span>
           </ng-template>
-          <eo-api-edit-body
-            class="eo_theme_iblock bbd bld brd"
-            [(bodyType)]="model.requestBodyType"
-            [(model)]="model.requestBody"
-            (modelChange)="emitChangeFun()"
-            [supportType]="['formData', 'json', 'xml', 'raw', 'binary']"
-            [(jsonRootType)]="model.requestBodyJsonType"
-          ></eo-api-edit-body>
+          <eo-api-edit-body class="eo_theme_iblock bbd bld brd" [(bodyType)]="model.requestBodyType"
+            [(model)]="model.requestBody" (modelChange)="emitChangeFun()"
+            [supportType]="['formData', 'json', 'xml', 'raw', 'binary']" [(jsonRootType)]="model.requestBodyJsonType">
+          </eo-api-edit-body>
         </nz-tab>
         <nz-tab [nzTitle]="queryTitleTmp" [nzForceRender]="true">
           <ng-template #queryTitleTmp>
             <span i18n>Query</span>
             <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(model.queryParams)">{{
               model.queryParams | apiParamsNum
-            }}</span>
+              }}</span>
           </ng-template>
-          <eo-api-edit-query (modelChange)="emitChangeFun()" class="eo_theme_iblock bbd bld brd" [model]="model.queryParams"></eo-api-edit-query>
+          <eo-api-edit-query (modelChange)="emitChangeFun()" class="eo_theme_iblock bbd bld brd"
+            [model]="model.queryParams"></eo-api-edit-query>
         </nz-tab>
         <nz-tab [nzTitle]="restTitleTmp" [nzForceRender]="true">
           <ng-template #restTitleTmp>
             <span i18n>REST</span>
             <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(model.restParams)">{{
               model.restParams | apiParamsNum
-            }}</span>
+              }}</span>
           </ng-template>
-          <eo-api-edit-rest class="eo_theme_iblock bbd bld brd" [model]="model.restParams" (modelChange)="emitChangeFun()"></eo-api-edit-rest>
+          <eo-api-edit-rest class="eo_theme_iblock bbd bld brd" [model]="model.restParams"
+            (modelChange)="emitChangeFun()"></eo-api-edit-rest>
         </nz-tab>
       </nz-tabset>
     </nz-collapse-panel>
@@ -113,35 +98,25 @@
             <span i18n>Response Headers</span>
             <span class="eo-tab-icon ml-[4px]" *ngIf="bindGetApiParamNum(model.responseHeaders)">{{
               model.responseHeaders | apiParamsNum
-            }}</span>
+              }}</span>
           </ng-template>
-          <eo-api-edit-header
-            class="eo_theme_iblock bbd bld brd"
-            [model]="model.responseHeaders"
-            (modelChange)="emitChangeFun()"
-          >
+          <eo-api-edit-header class="eo_theme_iblock bbd bld brd" [model]="model.responseHeaders"
+            (modelChange)="emitChangeFun()">
           </eo-api-edit-header>
         </nz-tab>
         <nz-tab [nzTitle]="responseTitleTmp" [nzForceRender]="true">
           <ng-template #responseTitleTmp>
             <span i18n>Response</span>
-            <span
-              class="eo-tab-theme-icon"
-              *ngIf="
+            <span class="eo-tab-theme-icon" *ngIf="
                 ['formData', 'json', 'xml'].includes(model.responseBodyType)
                   ? bindGetApiParamNum(model.responseBody)
                   : model.responseBody?.length
-              "
-            ></span>
+              "></span>
           </ng-template>
-          <eo-api-edit-body
-            class="eo_theme_iblock bbd bld brd"
-            [(bodyType)]="model.responseBodyType"
-            [(model)]="model.responseBody"
-            (modelChange)="emitChangeFun()"
-            [supportType]="['json', 'xml', 'raw', 'binary']"
-            [(jsonRootType)]="model.responseBodyJsonType"
-          ></eo-api-edit-body>
+          <eo-api-edit-body class="eo_theme_iblock bbd bld brd" [(bodyType)]="model.responseBodyType"
+            [(model)]="model.responseBody" (modelChange)="emitChangeFun()"
+            [supportType]="['json', 'xml', 'raw', 'binary']" [(jsonRootType)]="model.responseBodyJsonType">
+          </eo-api-edit-body>
         </nz-tab>
       </nz-tabset>
     </nz-collapse-panel>

diff --git a/src/workbench/browser/src/app/pages/pages.component.scss b/src/workbench/browser/src/app/pages/pages.component.scss
@@ -29,19 +29,23 @@
 }
 ::ng-deep {
   eo-api {
+    height: 100%;
+
     router-outlet + * {
       display: block;
-      height: calc(100vh - var(--NAVBAR_HEIGHT) - var(--FOOTER_HEIGHT) - var(--remote-notification-height) - 74px);
+      height: calc(100vh - var(--NAVBAR_HEIGHT) - var(--FOOTER_HEIGHT) - var(--remote-notification-height) - var(--API_TABS_HEIGHT));
       overflow: auto;
     }
     router-outlet + eo-api-test {
       overflow: unset;
     }
 
-    .has_tab_page router-outlet + * {
-      height: calc(
-        100vh - var(--NAVBAR_HEIGHT) - var(--FOOTER_HEIGHT) - var(--remote-notification-height) - 45px - 47px
-      );
+    .has_tab_page + * {
+      router-outlet + * {
+        height: calc(
+          100vh - var(--NAVBAR_HEIGHT) - var(--FOOTER_HEIGHT) - var(--remote-notification-height) - 74px
+        );
+      }
     }
   }
   eo-extension {

diff --git a/src/workbench/browser/src/styles.scss b/src/workbench/browser/src/styles.scss
@@ -15,6 +15,7 @@ body {
   --NAVBAR_HEIGHT: 50px;
   // --FOOTER_HEIGHT: 0px;
   --FOOTER_HEIGHT: 30px;
+  --API_TABS_HEIGHT: 36px;
 }
 
 img, svg, video, canvas, audio, iframe, embed, object {