fix: some css style issues

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-  "typescript.tsdk": "./node_modules/typescript/lib",
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "eslint.workingDirectories": [
     {

src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.html

@@ -24,7 +24,7 @@
 <!-- Raw -->
 <!-- <eo-editor [(code)]="model" *ngIf="bodyType === 'raw'" (codeChange)="rawDataChange()" [config]="{ maxLines: 10 }"
   [eventList]="['type', 'format', 'copy', 'search', 'replace']"></eo-editor> -->
-<eo-monaco-editor *ngIf="bodyType === 'raw'" [(code)]="model"
+<eo-monaco-editor *ngIf="bodyType === 'raw'" [(code)]="model" [maxLine]="20"
   [eventList]="['type', 'format', 'copy', 'search', 'replace']" (codeChange)="rawDataChange()">
 </eo-monaco-editor>
 <!-- Binary -->

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

@@ -17,6 +17,8 @@ eo-api-test-body,
 eo-api-test-query,
 eo-api-test-rest {
   display: block;
+  height: 100%;
+  overflow: auto;
 }
 .test_wrap {
   height: 100%;
@@ -33,14 +35,18 @@ eo-api-test-rest {
     }
     .ant-tabs {
       height: calc(100% - 52px);
+      .ant-tabs-tabpane {
+        height: 100%;
+        overflow: hidden;
+      }
       .ant-tabs-nav,.param_header {
-        position: sticky;
-        top: 0;
-        z-index: 10;
-        background-color: white;
+        // position: sticky;
+        // top: 0;
+        // z-index: 10;
+        // background-color: white;
       }
       .ant-tabs-content {
-        overflow: auto;
+        overflow: hidden;
         height: 100%;
       }
       eo-api-test-body[ng-reflect-body-type=formData] {

src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: flex !important;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}

src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.ts

@@ -1,4 +1,16 @@
-import { Component, OnInit, Input, Output, EventEmitter, OnChanges, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  OnDestroy,
+  ChangeDetectorRef,
+  ViewChild,
+  AfterViewInit,
+  ElementRef,
+} from '@angular/core';
 
 import { Observable, Observer, Subject } from 'rxjs';
 import { pairwise, takeUntil, debounceTime } from 'rxjs/operators';
@@ -13,20 +25,22 @@ import { ApiTestService } from '../api-test.service';
 import { EoMessageService } from 'eo/workbench/browser/src/app/eoui/message/eo-message.service';
 import { transferFileToDataUrl } from 'eo/workbench/browser/src/app/utils';
 import { NzUploadFile } from 'ng-zorro-antd/upload';
+import { EoMonacoEditorComponent } from 'eo/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component';
 
 @Component({
   selector: 'eo-api-test-body',
   templateUrl: './api-test-body.component.html',
   styleUrls: ['./api-test-body.component.scss'],
 })
-export class ApiTestBodyComponent implements OnInit, OnChanges, OnDestroy {
+export class ApiTestBodyComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
   @Input() model: string | object[] | any;
   @Input() supportType: string[];
   @Input() contentType: ContentTypeByAbridge;
   @Input() bodyType: ApiTestBodyType | string;
   @Output() bodyTypeChange: EventEmitter<any> = new EventEmitter();
   @Output() modelChange: EventEmitter<any> = new EventEmitter();
   @Output() contentTypeChange: EventEmitter<ContentTypeByAbridge> = new EventEmitter();
+  @ViewChild(EoMonacoEditorComponent, { static: false }) eoMonacoEditor?: EoMonacoEditorComponent;
   isReload = true;
   listConf: any = {};
   binaryFiles: NzUploadFile[] = [];
@@ -38,10 +52,13 @@ export class ApiTestBodyComponent implements OnInit, OnChanges, OnDestroy {
     type: 'string',
     value: '',
   };
+  private resizeObserver: ResizeObserver;
+  private readonly el: HTMLElement;
   private bodyType$: Subject<string> = new Subject<string>();
   private destroy$: Subject<void> = new Subject<void>();
   private rawChange$: Subject<string> = new Subject<string>();
-  constructor(private apiTest: ApiTestService, private cdRef: ChangeDetectorRef, private message: EoMessageService) {
+  constructor(private apiTest: ApiTestService, elementRef: ElementRef, private message: EoMessageService) {
+    this.el = elementRef.nativeElement;
     this.bodyType$.pipe(pairwise(), takeUntil(this.destroy$)).subscribe((val) => {
       this.beforeChangeBodyByType(val[0]);
     });
@@ -50,6 +67,13 @@ export class ApiTestBodyComponent implements OnInit, OnChanges, OnDestroy {
       this.modelChange.emit(this.model);
     });
   }
+
+  ngAfterViewInit(): void {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.eoMonacoEditor?.rerenderEditor();
+    });
+    this.resizeObserver.observe(this.el);
+  }
   beforeChangeBodyByType(type) {
     switch (type) {
       case ApiTestBodyType.Binary:
@@ -63,7 +87,7 @@ export class ApiTestBodyComponent implements OnInit, OnChanges, OnDestroy {
       }
     }
   }
-  changeContentType(contentType){
+  changeContentType(contentType) {
     this.contentTypeChange.emit(contentType);
   }
   changeBodyType(type?) {
@@ -89,6 +113,7 @@ export class ApiTestBodyComponent implements OnInit, OnChanges, OnDestroy {
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();
+    this.resizeObserver.disconnect();
   }
   ngOnChanges(changes) {
     if (

src/workbench/browser/src/app/shared/components/api-script/api-script.component.html

@@ -1,5 +1,5 @@
-<div class="flex eo-api-script">
-  <div class="w-[300px] h-[322px] overflow-auto">
+<div class="flex w-full eo-api-script">
+  <div class="w-[300px] overflow-auto border-0 border-r-[1px] border-solid border-[#f0f0f0]">
     <div class="flex justify-between p-3">
       <div i18n>Snippets</div>
       <div>
@@ -42,10 +42,10 @@
       </ng-template>
     </ng-template>
   </div>
-  <div class="flex-1 h-[322px]">
+  <div class="flex-1 overflow-hidden">
     <eo-monaco-editor [(code)]="code" [config]="{language: 'javascript'}"
       [eventList]="['format', 'copy', 'search', 'replace']" (codeChange)="handleChange($event)"
-      [completions]="completions" minHeight="270">
+      [completions]="completions">
     </eo-monaco-editor>
   </div>
 </div>

src/workbench/browser/src/app/shared/components/api-script/api-script.component.scss

@@ -1,3 +1,9 @@
+:host {
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+}
+
 .eo-api-script {
   ::ng-deep .ant-tree-indent {
     width: 20px;

src/workbench/browser/src/app/shared/components/api-script/api-script.component.ts

@@ -1,5 +1,15 @@
 import { SelectionModel } from '@angular/cdk/collections';
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  OnDestroy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core';
 import { EoMonacoEditorComponent } from 'eo/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component';
 
 import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
@@ -11,7 +21,7 @@ import type { TreeNode, FlatNode } from './constant';
   templateUrl: './api-script.component.html',
   styleUrls: ['./api-script.component.scss'],
 })
-export class ApiScriptComponent implements OnInit {
+export class ApiScriptComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() code = '';
   @Input() treeData = [];
   @Input() completions = [];
@@ -24,7 +34,22 @@ export class ApiScriptComponent implements OnInit {
   dataSource: NzTreeNodeOptions[] = [];
   expandedKeys = [0];
 
-  constructor() {}
+  private resizeObserver: ResizeObserver;
+  private readonly el: HTMLElement;
+
+  constructor(elementRef: ElementRef) {
+    this.el = elementRef.nativeElement;
+  }
+  ngOnDestroy(): void {
+    this.resizeObserver.disconnect();
+  }
+
+  ngAfterViewInit(): void {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.eoEditor?.rerenderEditor();
+    });
+    this.resizeObserver.observe(this.el);
+  }
 
   nzClick($event) {
     const { node } = $event;

src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.scss

@@ -1,7 +1,11 @@
 .eo-editor {
   min-height: var(--eo-editor-height, 70px);
 }
-
+:host {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 .button_list {
   border: 1px solid var(--BORDER);
   border-top-left-radius: 3px;

src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.ts

@@ -36,7 +36,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
   @Input() hiddenList: string[] = [];
   @Input() code: string;
   /** Scroll bars appear over 20 lines */
-  @Input() maxLine = 20;
+  @Input() maxLine = 200;
   @Input() config: JoinedEditorOptions = {};
   @Input() editorType = 'json';
   @Input() autoFormat = false;
@@ -67,7 +67,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
   ];
   defaultConfig: JoinedEditorOptions = {
     language: this.editorType || 'json',
-    automaticLayout: true,
+    // automaticLayout: true,
     scrollBeyondLastLine: false,
     wordWrap: 'on',
     wrappingStrategy: 'advanced',
@@ -172,7 +172,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
         return;
       }
 
-      const lineHeight = this.codeEdtor.getOption(59);
+      const lineHeight = this.codeEdtor.getOption(editor.EditorOption.lineHeight);
       const lineCount = this.codeEdtor.getModel()?.getLineCount() || 1;
       const height = this.codeEdtor.getTopForLineNumber(Math.min(lineCount, this.maxLine)) + lineHeight;