API test support send file and response preview file/image (#74)

* fix: extension overflow page not show * feat: api test support send file * feat: response support file Co-authored-by: 夜鹰 <[email protected]>
Postcatlab · Jun 17, 2022 · f83a674 · f83a674
1 parent 69753f1
commit f83a674
Show file tree

Hide file tree

Showing 22 changed files with 172 additions and 241 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eoapi",
-  "version": "1.1.1",
+  "version": "1.2.0-beta",
   "main": "out/app/electron-main/main.js",
   "description": "A lightweight, extensible API tool",
   "homepage": "https://github.com/eolinker/eoapi.git",
@@ -68,4 +68,4 @@
   "node-module-alias": {
     "eo": "./out"
   }
-}
+}
diff --git a/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.html b/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.html
@@ -12,7 +12,6 @@
     </span>
   </div>
   <ace
-    style="height: 7em; width: 100%"
     [config]="config"
     [disabled]="false"
     [(value)]="code"

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
@@ -79,6 +79,9 @@ export class EoEditorComponent implements AfterViewInit, OnInit, OnChanges {
     theme: 'tomorrow_night_eighties',
     readOnly: false,
     tabSize: 4,
+    minLines:5,
+    maxLines: 20
+
   };
 
   constructor(private message: EoMessageService, private electron: ElectronService) {}

diff --git a/src/workbench/browser/src/app/pages/api/api.component.scss b/src/workbench/browser/src/app/pages/api/api.component.scss
@@ -36,18 +36,6 @@ nz-sider {
     }
   }
 
-  eo-api {
-    router-outlet + * {
-      display: block;
-      height: calc(100vh - var(--NAVBAR_HEIGHT) - var(--FOOTER_HEIGHT) - var(--remote-notification-height) - 46px);
-      overflow: auto;
-    }
-    .has_tab_page router-outlet + * {
-      height: calc(
-        100vh - var(--NAVBAR_HEIGHT) - var(--FOOTER_HEIGHT) - var(--remote-notification-height) - 45px - 47px
-      );
-    }
-  }
   .method_text_GET {
     color: var(--BLUE_TAG_BG);
   }

diff --git a/src/workbench/browser/src/app/pages/api/group/edit/api-group-edit.component.ts b/src/workbench/browser/src/app/pages/api/group/edit/api-group-edit.component.ts
@@ -111,7 +111,6 @@ export class ApiGroupEditComponent implements OnInit {
     this.modalRef.destroy();
     this.storage.run('groupBulkRemove', [data.group], (result: StorageRes) => {
       if (result.status === StorageResStatus.success) {
-        this.messageService.send({ type: 'updateGroupSuccess', data: {} });
         //delete group api
         if (data.api.length > 0) {
           this.messageService.send({ type: 'gotoBulkDeleteApi', data: { uuids: data.api } });

diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.component.ts b/src/workbench/browser/src/app/pages/api/test/api-test.component.ts
@@ -4,7 +4,6 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Select } from '@ngxs/store';
 
 import {
-  ApiData,
   RequestMethod,
   RequestProtocol,
   StorageRes,

diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.service.ts b/src/workbench/browser/src/app/pages/api/test/api-test.service.ts
@@ -81,6 +81,7 @@ export class ApiTestService {
       baseFun: {
         reduceItemWhenAddChildItem: reduceItemWhenIsOprDepth,
         watchCheckboxChange: opts.watchFormLastChange,
+        importFile: opts.importFile
       },
       itemStructure: Object.assign({}, opts.itemStructure),
       tdList: [
@@ -114,8 +115,10 @@ export class ApiTestService {
 
         {
           thKey: '参数值',
-          type: 'input',
+          type: 'autoCompleteAndFile',
           modelKey: 'value',
+          switchVar: 'type',
+          swicthFile: 'file',
           placeholder: '参数值',
           width: 300,
           mark: 'value',
@@ -273,7 +276,6 @@ export class ApiTestService {
     });
     if (inData.history.response.responseType === 'text') {
       let bodyInfo = text2UiData(inData.history.response.body);
-      console.log(bodyInfo);
       result.responseBody = bodyInfo.data;
       result.responseBodyType = bodyInfo.textType;
       result.responseBodyJsonType = bodyInfo.rootType;
@@ -282,7 +284,7 @@ export class ApiTestService {
   }
   getTestDataFromApi(inData) {
     let editToTestParams = (arr) => {
-      arr=arr||[];
+      arr = arr || [];
       arr.forEach((val) => {
         val.value = val.example;
         delete val.example;
@@ -334,7 +336,7 @@ export class ApiTestService {
       case 'formData': {
         inData.requestBody.forEach((val) => {
           val.value = val.example;
-          val.type = 'string';
+          val.type = val.type === 'file' ? 'file' : 'string';
           delete val.example;
         });
         break;

diff --git a/src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.ts b/src/workbench/browser/src/app/pages/api/test/body/api-test-body.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges, OnDestroy, ChangeDetectorRef } from '@angular/core';
 
 import { Subject } from 'rxjs';
 import { pairwise, takeUntil, debounceTime } from 'rxjs/operators';
@@ -10,7 +10,7 @@ import {
 } from '../../../../shared/services/api-test/api-test-params.model';
 import { ApiBodyType, JsonRootType } from '../../../../shared/services/storage/index.model';
 import { ApiTestService } from '../api-test.service';
-import { Message, MessageService } from '../../../../shared/services/message';
+import { EoMessageService } from 'eo/workbench/browser/src/app/eoui/message/eo-message.service';
 
 @Component({
   selector: 'eo-api-test-body',
@@ -40,7 +40,11 @@ export class ApiTestBodyComponent implements OnInit, OnChanges, OnDestroy {
   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 messageService: MessageService) {
+  constructor(
+    private apiTest: ApiTestService,
+    private cdRef: ChangeDetectorRef,
+    private message: EoMessageService
+  ) {
     this.bodyType$.pipe(pairwise(), takeUntil(this.destroy$)).subscribe((val) => {
       this.beforeChangeBodyByType(val[0]);
     });
@@ -168,6 +172,33 @@ export class ApiTestBodyComponent implements OnInit, OnChanges, OnDestroy {
       watchFormLastChange: () => {
         this.modelChange.emit(this.model);
       },
+      importFile: (inputArg) => {
+        if (inputArg.file.length === 0) return;
+        inputArg.item.value = '';
+        inputArg.item.files = [];
+        for (var i = 0; i < inputArg.file.length; i++) {
+          var val = inputArg.file[i];
+          if (val.size > 2 * 1024 * 1024) {
+            inputArg.item.value = '';
+            this.message.error('文件大小均需小于2M');
+            return;
+          }
+        }
+        for (var i = 0; i < inputArg.file.length; i++) {
+          var val = inputArg.file[i];
+          inputArg.item.value = val.name + ',' + inputArg.item.value;
+          let tmpReader = new FileReader();
+          tmpReader.readAsDataURL(val);
+          tmpReader.onload = function (_default) {
+            inputArg.item.files.splice(0, 0, {
+              name: val.name,
+              dataUrl: this.result,
+            });
+          };
+        }
+        inputArg.item.value = inputArg.item.value.slice(0, inputArg.item.value.length - 1);
+        this.modelChange.emit(this.model);
+      },
     });
     this.cache['listConfSetting'] = Object.assign({}, this.listConf.setting);
   }

diff --git a/...ch/browser/src/app/pages/api/test/result-response/api-test-result-response.component.html b/...ch/browser/src/app/pages/api/test/result-response/api-test-result-response.component.html
@@ -5,15 +5,33 @@
     </ng-template>
   </nz-empty>
 </div>
-<div class="p15" *ngIf="model.responseType">
+<div class="p15" *ngIf="model.responseType" [ngSwitch]="model.responseType">
   <div class="mb15 basic_info_bar cw f_row f_js {{ model.statusCode ? codeStatus.class : 'code_red' }}">
     <div class="fs16" id="statusCode">{{ model.statusCode || 'No Response' }}</div>
     <div class="f_row_ac fs12">
       <span class="mr15" id="size">Size: {{ model.responseLength | byteToString }}</span>
       <span id="time">Time: {{ model.testDeny }}ms</span>
     </div>
   </div>
+  <div class="text-center" *ngSwitchCase="'stream'">
+    <div *ngIf="!responseIsImg">
+      无法预览非文本类型的数据，您可以
+      <button class="eo_theme_btn_default mlr5" type="button" (click)="downloadResponseText()">下载返回结果</button>
+      ，并用其他程序打开。
+    </div>
+    <!-- <div class="mt20" *ngIf="responseIsImg">
+      <img class="maw_100percent" [src]="model.blobUrl" />
+    </div> -->
+  </div>
+  <div class="text-center" *ngSwitchCase="'longText'">
+    响应结果超出可预览的大小，您可以
+    <button class="eo_theme_btn_default mlr5" type="button" (click)="downloadResponseText()">下载返回结果</button>
+    <!-- 或者
+    <button class="eo_theme_btn_default" type="button" (click)="newTabResponseText()">在新标签页中显示返回结果</button>
+    并用其他程序打开。 -->
+  </div>
   <eo-editor
+    *ngSwitchDefault
     class="mt20"
     [autoFormat]="true"
     [(code)]="model.body"

diff --git a/...ench/browser/src/app/pages/api/test/result-response/api-test-result-response.component.ts b/...ench/browser/src/app/pages/api/test/result-response/api-test-result-response.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { getBlobUrl } from 'eo/workbench/browser/src/app/utils';
 import { ApiTestHistoryResponse } from '../../../../shared/services/storage/index.model';
 import { ApiTestService } from '../api-test.service';
 @Component({
@@ -10,12 +11,33 @@ export class ApiTestResultResponseComponent implements OnInit, OnChanges {
   @Input() model: any | ApiTestHistoryResponse;
   codeStatus: { status: string; cap: number; class: string };
   size: string;
-
+  blobUrl:string='';
+  responseIsImg = false;
   constructor(private apiTest: ApiTestService) {}
   ngOnChanges(changes) {
     if (changes.model) {
       this.codeStatus = this.apiTest.getHTTPStatus(this.model.statusCode);
+      //show response
+      // this.responseIsImg =/\.((jpg)|(jpeg)|(png)|(gif)|(bmg))/i.test(this.model.blobFileName) || /image/.test(this.model.contentType);
     }
   }
   ngOnInit(): void {}
+  downloadResponseText() {
+    this.blobUrl=getBlobUrl(this.model.body, this.model.contentType);
+    const blobFileName = decodeURI(this.model.blobFileName);
+    const tmpAElem = document.createElement('a');
+    if ('download' in tmpAElem) {
+      tmpAElem.style.visibility = 'hidden';
+      tmpAElem.href = this.blobUrl;
+      tmpAElem.download = blobFileName;
+      document.body.appendChild(tmpAElem);
+      const evt = document.createEvent('MouseEvents');
+      evt.initEvent('click', true, true);
+      tmpAElem.dispatchEvent(evt);
+      document.body.removeChild(tmpAElem);
+    } else {
+      location.href = this.blobUrl;
+    }
+  }
+  newTabResponseText() {}
 }
diff --git a/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.scss b/src/workbench/browser/src/app/pages/extension/detail/extension-detail.component.scss
@@ -1,66 +1,3 @@
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-.w-40 {
-  width: 10rem;
-}
-.mr-8 {
-  margin-right: 2rem;
-}
-.h-40 {
-  height: 10rem;
-}
-.block {
-  display: block;
-}
-.border {
-  border-width: 1px;
-}
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-.bg-cover {
-  background-size: cover;
-}
-.bg-no-repeat {
-  background-repeat: no-repeat;
-}
-.bg-center {
-  background-position: center;
-}
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-.font-bold {
-  font-weight: 700;
-}
-.flex-1 {
-  flex: 1 1 0%;
-}
-.flex-col {
-  flex-direction: column;
-}
-.flex {
-  display: flex;
-}
-.w-full {
-  width: 100%;
-}
-.h-20 {
-  height: 5rem;
-}
-.p-8 {
-  padding: 2rem;
-}
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
 ::ng-deep {
   eo-extension-detail .ant-tabs-content-holder {
     padding-top: 20px;

diff --git a/src/workbench/browser/src/app/pages/extension/extension.component.html b/src/workbench/browser/src/app/pages/extension/extension.component.html
@@ -10,7 +10,7 @@
       {{ item.title }}<span *ngIf="item.showNum"> （{{ extensionService.extensionIDs.length }}）</span>
     </div>
   </section>
-  <section class="right fg1 px-4">
+  <section class="right fg1 pl-4">
     <router-outlet></router-outlet>
   </section>
 </section>
diff --git a/src/workbench/browser/src/app/pages/extension/extension.component.scss b/src/workbench/browser/src/app/pages/extension/extension.component.scss
@@ -39,7 +39,6 @@
     margin-right: 0.5rem;
 }
 }
-.px-4 {
+.pl-4 {
   padding-left: 1rem;
-  padding-right: 1rem;
 }