fix: some bug & adjust some css style (#52)

* fix: some bug * update code
Postcatlab · May 27, 2022 · 4b12fe4 · 4b12fe4
1 parent 9c23e9e
commit 4b12fe4
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 115 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@ dist/
 !src/core/market/browser/dist/icon.png
 !src/workbench/node/request/**/*.js
 !/api/*.js
+!*.config.js
 
 scripts/notarize.js
 # dependencies
@@ -46,4 +47,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
-# *-lock.json
+# *-lock.json
diff --git a/src/workbench/browser/package.json b/src/workbench/browser/package.json
@@ -59,6 +59,7 @@
     "@types/node": "17.0.32",
     "@typescript-eslint/eslint-plugin": "5.23.0",
     "@typescript-eslint/parser": "5.23.0",
+    "autoprefixer": "10.4.7",
     "conventional-changelog-cli": "2.2.2",
     "eslint": "8.15.0",
     "eslint-plugin-import": "2.26.0",
@@ -72,6 +73,8 @@
     "karma-jasmine-html-reporter": "1.7.0",
     "lodash": "4.17.21",
     "node-polyfill-webpack-plugin": "1.1.4",
+    "postcss": "8.4.14",
+    "tailwindcss": "3.0.24",
     "ts-node": "10.7.0",
     "typescript": "~4.6.4",
     "webpack": "5.72.1"

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
@@ -4,10 +4,10 @@
     <nz-divider></nz-divider>
     <nz-form-label nzFor="uri">API Path</nz-form-label>
     <nz-input-group nzCompact>
-      <nz-select class="w_100" [(ngModel)]="apiData.protocol" formControlName="protocol">
+      <nz-select class="w-24" [(ngModel)]="apiData.protocol" formControlName="protocol">
         <nz-option *ngFor="let item of REQUEST_PROTOCOL" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
       </nz-select>
-      <nz-select class="w_100" [(ngModel)]="apiData.method" formControlName="method">
+      <nz-select class="w-28" [(ngModel)]="apiData.method" formControlName="method">
         <nz-option *ngFor="let item of REQUEST_METHOD" [nzLabel]="item.key" [nzValue]="item.value"></nz-option>
       </nz-select>
       <nz-form-item nz-col class="fg1">
@@ -20,16 +20,9 @@
     <nz-input-group nzCompact>
       <nz-form-item nz-col>
         <nz-form-control class="w_250" nzErrorTip="请选择 API 分组">
-          <nz-tree-select
-            nzAllowClear="false"
-            [nzExpandedKeys]="expandKeys"
-            [nzDropdownMatchSelectWidth]="false"
-            [nzNodes]="groups"
-            [(ngModel)]="apiData.groupID"
-            [nzShowSearch]="true"
-            #apiGroup
-            formControlName="groupID"
-          ></nz-tree-select>
+          <nz-tree-select nzAllowClear="false" [nzExpandedKeys]="expandKeys" [nzDropdownMatchSelectWidth]="false"
+            [nzNodes]="groups" [(ngModel)]="apiData.groupID" [nzShowSearch]="true" #apiGroup formControlName="groupID">
+          </nz-tree-select>
         </nz-form-control>
       </nz-form-item>
       <nz-form-item nz-col class="fg1">
@@ -53,37 +46,30 @@
             请求头部
             <span class="eo-tab-icon" *ngIf="bindGetApiParamNum(apiData.requestHeaders)">{{
               apiData.requestHeaders | apiParamsNum
-            }}</span>
+              }}</span>
           </ng-template>
           <eo-api-edit-header class="eo_theme_iblock bbd bld brd" [model]="apiData.requestHeaders"></eo-api-edit-header>
         </nz-tab>
         <!-- 请求体 -->
         <nz-tab [nzTitle]="bodyTitleTmp" [nzForceRender]="true">
           <ng-template #bodyTitleTmp>
             请求体
-            <span
-              class="iconfont icon-circle eo-tab-theme-icon"
-              *ngIf="
+            <span class="iconfont icon-circle eo-tab-theme-icon" *ngIf="
                 ['formData', 'json', 'xml'].includes(apiData.requestBodyType)
                   ? bindGetApiParamNum(apiData.requestBody)
                   : apiData.requestBody?.length
-              "
-            ></span>
+              "></span>
           </ng-template>
-          <eo-api-edit-body
-            class="eo_theme_iblock bbd bld brd"
-            [(bodyType)]="apiData.requestBodyType"
-            [(model)]="apiData.requestBody"
-            [supportType]="['formData', 'json', 'xml', 'raw', 'binary']"
-            [(jsonRootType)]="apiData.requestBodyJsonType"
-          ></eo-api-edit-body>
+          <eo-api-edit-body class="eo_theme_iblock bbd bld brd" [(bodyType)]="apiData.requestBodyType"
+            [(model)]="apiData.requestBody" [supportType]="['formData', 'json', 'xml', 'raw', 'binary']"
+            [(jsonRootType)]="apiData.requestBodyJsonType"></eo-api-edit-body>
         </nz-tab>
         <nz-tab [nzTitle]="queryTitleTmp" [nzForceRender]="true">
           <ng-template #queryTitleTmp>
             Query 参数
             <span class="eo-tab-icon" *ngIf="bindGetApiParamNum(apiData.queryParams)">{{
               apiData.queryParams | apiParamsNum
-            }}</span>
+              }}</span>
           </ng-template>
           <eo-api-edit-query class="eo_theme_iblock bbd bld brd" [model]="apiData.queryParams"></eo-api-edit-query>
         </nz-tab>
@@ -92,7 +78,7 @@
             REST 参数
             <span class="eo-tab-icon" *ngIf="bindGetApiParamNum(apiData.restParams)">{{
               apiData.restParams | apiParamsNum
-            }}</span>
+              }}</span>
           </ng-template>
           <eo-api-edit-rest class="eo_theme_iblock bbd bld brd" [model]="apiData.restParams"></eo-api-edit-rest>
         </nz-tab>
@@ -112,32 +98,23 @@
             返回头部
             <span class="eo-tab-icon" *ngIf="bindGetApiParamNum(apiData.responseHeaders)">{{
               apiData.responseHeaders | apiParamsNum
-            }}</span>
+              }}</span>
           </ng-template>
-          <eo-api-edit-header
-            class="eo_theme_iblock bbd bld brd"
-            [model]="apiData.responseHeaders"
-          ></eo-api-edit-header>
+          <eo-api-edit-header class="eo_theme_iblock bbd bld brd" [model]="apiData.responseHeaders">
+          </eo-api-edit-header>
         </nz-tab>
         <nz-tab [nzTitle]="responseTitleTmp" [nzForceRender]="true">
           <ng-template #responseTitleTmp>
             返回结果
-            <span
-              class="iconfont icon-circle eo-tab-theme-icon"
-              *ngIf="
+            <span class="iconfont icon-circle eo-tab-theme-icon" *ngIf="
                 ['formData', 'json', 'xml'].includes(apiData.responseBodyType)
                   ? bindGetApiParamNum(apiData.responseBody)
                   : apiData.responseBody?.length
-              "
-            ></span>
+              "></span>
           </ng-template>
-          <eo-api-edit-body
-            class="eo_theme_iblock bbd bld brd"
-            [(bodyType)]="apiData.responseBodyType"
-            [(model)]="apiData.responseBody"
-            [supportType]="['json', 'xml', 'raw', 'binary']"
-            [(jsonRootType)]="apiData.responseBodyJsonType"
-          ></eo-api-edit-body>
+          <eo-api-edit-body class="eo_theme_iblock bbd bld brd" [(bodyType)]="apiData.responseBodyType"
+            [(model)]="apiData.responseBody" [supportType]="['json', 'xml', 'raw', 'binary']"
+            [(jsonRootType)]="apiData.responseBodyJsonType"></eo-api-edit-body>
         </nz-tab>
       </nz-tabset>
     </nz-collapse-panel>

diff --git a/src/workbench/browser/src/app/pages/api/edit/api-edit.component.ts b/src/workbench/browser/src/app/pages/api/edit/api-edit.component.ts
@@ -7,7 +7,7 @@ import { NzTreeSelectComponent } from 'ng-zorro-antd/tree-select';
 
 import { Subject } from 'rxjs';
 import { debounceTime, take, takeUntil, pairwise, filter } from 'rxjs/operators';
-import { MessageService } from '../../../shared/services/message';
+import { Message, MessageService } from '../../../shared/services/message';
 import { StorageService } from '../../../shared/services/storage';
 
 import {
@@ -137,6 +137,7 @@ export class ApiEditComponent implements OnInit, OnDestroy {
     this.watchTabChange();
     this.watchGroupIDChange();
     this.watchUri();
+    this.watchApiAction();
   }
 
   ngOnDestroy() {
@@ -178,6 +179,23 @@ export class ApiEditComponent implements OnInit, OnDestroy {
       this.getApi(id);
     }
   }
+
+  /**
+   * Api Operation triggle tab change
+   */
+  private watchApiAction() {
+    this.messageService
+      .get()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((inArg: Message) => {
+        switch (inArg.type) {
+          case 'saveApi':
+            // this.saveApi();
+            break;
+        }
+      });
+  }
+
   private watchTabChange() {
     this.apiTab.tabChange$
       .pipe(

diff --git a/src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.html b/src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.html
@@ -4,13 +4,9 @@
       <label *ngFor="let item of CONST.API_BODY_TYPE" nz-radio [nzValue]="item.value">{{ item.key }}</label>
     </nz-radio-group>
     <nz-divider nzType="vertical"></nz-divider>
-    <params-import
-      *ngIf="['formData', 'json', 'xml'].includes(bodyType)"
-      [baseData]="model"
-      [contentType]="bodyType"
-      (baseDataChange)="handleParamsImport($event)"
-      [rootType]="jsonRootType"
-    ></params-import>
+    <params-import *ngIf="['formData', 'json', 'xml'].includes(bodyType)" [baseData]="model" [contentType]="bodyType"
+      (baseDataChange)="handleParamsImport($event)" (beforeHandleImport)="beforeHandleImport($event)"
+      [rootType]="jsonRootType"></params-import>
   </div>
   <div *ngIf="bodyType === 'json'">
     <p class="fs12 c999 mb5">JSON 根类型：</p>
@@ -22,25 +18,11 @@
 <!-- FormData -->
 <!-- JSON -->
 <!-- XML -->
-<list-block-common-component
-  *ngIf="['formData', 'json', 'xml'].includes(bodyType)"
-  [mainObject]="listConf"
-  [(list)]="model"
-></list-block-common-component>
+<list-block-common-component *ngIf="['formData', 'json', 'xml'].includes(bodyType)" [mainObject]="listConf"
+  [(list)]="model"></list-block-common-component>
 <!-- Raw -->
-<eo-editor
-  [(code)]="model"
-  *ngIf="bodyType === 'raw'"
-  (codeChange)="rawDataChange()"
-  [eventList]="['type', 'format', 'copy', 'download', 'newTab', 'search', 'replace']"
-></eo-editor>
+<eo-editor [(code)]="model" *ngIf="bodyType === 'raw'" (codeChange)="rawDataChange()"
+  [eventList]="['type', 'format', 'copy', 'download', 'newTab', 'search', 'replace']"></eo-editor>
 <!-- Binary -->
-<textarea
-  class="btd"
-  rows="4"
-  *ngIf="bodyType === 'binary'"
-  nzBorderless
-  placeholder="参数描述"
-  nz-input
-  [(ngModel)]="model"
-></textarea>
+<textarea class="btd" rows="4" *ngIf="bodyType === 'binary'" nzBorderless placeholder="参数描述" nz-input
+  [(ngModel)]="model"></textarea>
diff --git a/src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.ts b/src/workbench/browser/src/app/pages/api/edit/body/api-edit-body.component.ts
@@ -92,6 +92,10 @@ export class ApiEditBodyComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  beforeHandleImport(result) {
+    this.jsonRootType = Array.isArray(result) ? 'array' : 'object';
+  }
+
   handleParamsImport(data) {
     this.model = data;
     this.modelChange.emit(data);

diff --git a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html
@@ -31,13 +31,8 @@
 </header>
 <!-- Fixed Group -->
 <div class="group_container fixed_group_tree pt10" *ngIf="electron.isElectron">
-  <nz-tree
-    [nzData]="fixedTreeNode"
-    [nzSelectedKeys]="nzSelectedKeys"
-    nzBlockNode
-    (nzClick)="clickTreeItem($event)"
-    [nzTreeTemplate]="nzFixedTreeTemplate"
-  ></nz-tree>
+  <nz-tree [nzData]="fixedTreeNode" [nzSelectedKeys]="nzSelectedKeys" nzBlockNode (nzClick)="clickTreeItem($event)"
+    [nzTreeTemplate]="nzFixedTreeTemplate"></nz-tree>
   <ng-template #nzFixedTreeTemplate let-node let-origin="origin">
     <div class="pl5 tree_node" *ngIf="node.origin?.isFixed">
       <div class="f_row_ac">
@@ -50,20 +45,10 @@
 <div class="bbd" *ngIf="electron.isElectron"></div>
 <!-- Custom Group -->
 <div class="group_container group_tree pt10">
-  <nz-tree
-    [nzData]="treeNodes"
-    [nzSelectedKeys]="nzSelectedKeys"
-    #apiGroup
-    [nzSearchValue]="searchValue"
-    [nzHideUnMatched]="true"
-    [nzExpandedKeys]="expandKeys"
-    (nzClick)="clickTreeItem($event)"
-    (nzExpandChange)="toggleExpand()"
-    nzDraggable
-    nzBlockNode
-    (nzOnDrop)="treeItemDrop($event)"
-    [nzTreeTemplate]="nzTreeTemplate"
-  ></nz-tree>
+  <nz-tree [nzData]="treeNodes" [nzSelectedKeys]="nzSelectedKeys" #apiGroup [nzSearchValue]="searchValue"
+    [nzHideUnMatched]="true" [nzExpandedKeys]="expandKeys" (nzClick)="clickTreeItem($event)"
+    (nzExpandChange)="toggleExpand()" nzDraggable nzBlockNode (nzOnDrop)="treeItemDrop($event)"
+    [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
   <ng-template #nzTreeTemplate let-node let-origin="origin">
     <div class="pl5">
       <!-- Folder -->
@@ -96,21 +81,16 @@
       </div>
       <!-- Leaf -->
       <div class="tree_node f_row f_js_ac" *ngIf="!node.origin?.isFixed && node.isLeaf">
-        <div class="f_row_ac">
+        <div class="f_row_ac text-ellipsis overflow-hidden">
           <b class="method_text method_text_{{ node.origin.method }} mr5" *ngIf="node.origin.method">{{
             node.origin.method.slice(0, 4)
-          }}</b>
+            }}</b>
           <span class="text_omit node_title">{{ node.title }}</span>
         </div>
         <span class="tree_node_operate">
           <button>
-            <i
-              class="mr5"
-              nz-icon
-              nzType="thunderbolt"
-              nzTheme="outline"
-              (click)="operateApiEvent({ event: $event, eventName: 'testApi', node: node })"
-            ></i>
+            <i class="mr5" nz-icon nzType="thunderbolt" nzTheme="outline"
+              (click)="operateApiEvent({ event: $event, eventName: 'testApi', node: node })"></i>
           </button>
           <button nz-dropdown [nzDropdownMenu]="apiDataMenu">
             <i nz-icon nzType="ellipsis" nzTheme="outline"></i>
@@ -120,16 +100,12 @@
               <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'gotoEditApi', node: node })">
                 <a>编辑</a>
               </li>
-              <li
-                nz-menu-item
-                (click)="operateApiEvent({ event: $event, eventName: 'gotoCopyApi', node: apiDataItems[node.key] })"
-              >
+              <li nz-menu-item
+                (click)="operateApiEvent({ event: $event, eventName: 'gotoCopyApi', node: apiDataItems[node.key] })">
                 <a>复制</a>
               </li>
-              <li
-                nz-menu-item
-                (click)="operateApiEvent({ event: $event, eventName: 'gotoDeleteApi', node: apiDataItems[node.key] })"
-              >
+              <li nz-menu-item
+                (click)="operateApiEvent({ event: $event, eventName: 'gotoDeleteApi', node: apiDataItems[node.key] })">
                 <a>删除</a>
               </li>
             </ul>

diff --git a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.scss b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.scss
@@ -13,11 +13,12 @@
     }
   }
 }
-.group_tree {
+::ng-deep .group_tree {
   overflow: auto;
   height: calc(100vh - var(--NAVBAR_HEIGHT) - 88px);
   .ant-tree-switcher {
     width: 12px;
+    line-height: 24px;
   }
   .ant-tree-indent-unit {
     width: 8px;
@@ -27,6 +28,9 @@
       padding: 0 2px;
     }
   }
+  .ng-star-inserted {
+    padding-left: 0;
+  }
 }
 .ant-dropdown-menu {
   min-width: 100px;
@@ -39,6 +43,8 @@
 }
 .tree_node {
   font-size: 12px;
+  white-space: nowrap;
+
   .tree_node_operate {
     font-size: 14px;
     font-weight: bold;

diff --git a/src/workbench/browser/src/app/pages/api/tab/api-tab.component.ts b/src/workbench/browser/src/app/pages/api/tab/api-tab.component.ts
@@ -238,7 +238,8 @@ export class ApiTabComponent implements OnInit, OnDestroy {
             break;
           case 'copyApi':
           case 'gotoAddApi':
-            this.appendOrSwitchTab('edit', inArg.data ? { groupID: inArg.data.key.replace('group-', '') } : {});
+            this.appendOrSwitchTab('edit', inArg.data ?? {});
+            this.messageService.send({ type: 'saveApi', data: {} });
             break;
           case 'addApiSuccess':
           case 'editApiSuccess':