From 4b12fe4f281944a7df310db8e59d48533055009f Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Fri, 27 May 2022 18:59:43 +0800
Subject: [PATCH] fix: some bug & adjust some css style (#52)

* fix: some bug

* update code
---
 .gitignore                                    |  3 +-
 src/workbench/browser/package.json            |  3 +
 .../pages/api/edit/api-edit.component.html    | 65 ++++++-------------
 .../app/pages/api/edit/api-edit.component.ts  | 20 +++++-
 .../edit/body/api-edit-body.component.html    | 36 +++-------
 .../api/edit/body/api-edit-body.component.ts  |  4 ++
 .../group/tree/api-group-tree.component.html  | 52 ++++-----------
 .../group/tree/api-group-tree.component.scss  |  8 ++-
 .../app/pages/api/tab/api-tab.component.ts    |  3 +-
 .../params-import/params-import.component.ts  |  8 ++-
 src/workbench/browser/src/styles.scss         |  5 ++
 src/workbench/browser/tailwind.config.js      |  7 ++
 12 files changed, 99 insertions(+), 115 deletions(-)
 create mode 100644 src/workbench/browser/tailwind.config.js

diff --git a/.gitignore b/.gitignore
index 80a344836..7e3ac95aa 100644
--- 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
\ No newline at end of file
+# *-lock.json
diff --git a/src/workbench/browser/package.json b/src/workbench/browser/package.json
index d7e7d8017..933ecd1ad 100644
--- 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
index 08917b016..d775f2204 100644
--- 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,7 +46,7 @@
             请求头部
             <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>
@@ -61,29 +54,22 @@
         <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
index 3356014b3..56118c45e 100644
--- 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
index 91f4eb708..79a27ec6d 100644
--- 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
index 06989d0b2..0859ca405 100644
--- 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
index 8284f5b91..c7beb271a 100644
--- 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
index 592289bd5..2e08d1718 100644
--- 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
index 7ade39ec6..b18b82992 100644
--- 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':
diff --git a/src/workbench/browser/src/app/shared/components/params-import/params-import.component.ts b/src/workbench/browser/src/app/shared/components/params-import/params-import.component.ts
index f444265e8..4ab505a91 100644
--- a/src/workbench/browser/src/app/shared/components/params-import/params-import.component.ts
+++ b/src/workbench/browser/src/app/shared/components/params-import/params-import.component.ts
@@ -15,6 +15,7 @@ export class ParamsImportComponent {
   @Input() baseData: object[] = [];
   @Input() modalTitle: string = '';
   @Output() baseDataChange = new EventEmitter<any>();
+  @Output() beforeHandleImport = new EventEmitter<any>();
   isVisible = false;
   paramCode = '';
   constructor(private message: NzMessageService) {}
@@ -51,10 +52,13 @@ export class ParamsImportComponent {
       this.handleCancel();
       return;
     }
+    let rootType = this.rootType;
     let paramCode = null;
     if (this.contentType === 'json') {
       try {
         paramCode = JSON.parse(this.paramCode);
+        this.beforeHandleImport.emit(paramCode);
+        rootType = Array.isArray(paramCode) ? 'array' : 'object';
       } catch (error) {
         this.message.error('JSON格式不合法');
         return;
@@ -87,14 +91,14 @@ export class ParamsImportComponent {
 
     const tailData = this.baseData.slice(-1);
     let resultData = JSON.parse(JSON.stringify(this.baseData.reverse().slice(1).reverse()));
-    if (this.rootType !== whatType(paramCode)) {
+    if (rootType !== whatType(paramCode)) {
       // TODO Perhaps should be handled about format compatibility later.
       console.warn('The code that you input is no-equal to the root type.');
     }
     // if (whatType(paramCode) === 'object') {
     // * transform to array of table format.
     // }
-    if (this.rootType === 'array' && whatType(paramCode) === 'array') {
+    if (rootType === 'array' && whatType(paramCode) === 'array') {
       // * only select first data
       const [data] = paramCode;
       paramCode = data || {};
diff --git a/src/workbench/browser/src/styles.scss b/src/workbench/browser/src/styles.scss
index bc8079c77..2a43295cf 100644
--- a/src/workbench/browser/src/styles.scss
+++ b/src/workbench/browser/src/styles.scss
@@ -1,3 +1,8 @@
+
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
 html,
 body {
   margin: 0;
diff --git a/src/workbench/browser/tailwind.config.js b/src/workbench/browser/tailwind.config.js
new file mode 100644
index 000000000..abb98c548
--- /dev/null
+++ b/src/workbench/browser/tailwind.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  content: ['./src/**/*.{html,ts,scss}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};