feat: overview

Postcatlab · Apr 24, 2022 · 00830d8 · 00830d8
1 parent 9983ad5
commit 00830d8
Show file tree

Hide file tree

Showing 22 changed files with 297 additions and 83 deletions.
diff --git a/src/workbench/browser/src/app/pages/api/api-routing.module.ts b/src/workbench/browser/src/app/pages/api/api-routing.module.ts
@@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { ApiComponent } from './api.component';
 import { ApiDetailComponent } from './detail/api-detail.component';
 import { ApiEditComponent } from './edit/api-edit.component';
+import { ApiOverviewComponent } from './overview/api-overview.component';
 import { ApiTestComponent } from './test/api-test.component';
 
 const routes: Routes = [
@@ -16,6 +17,10 @@ const routes: Routes = [
         redirectTo: 'test',
         pathMatch: 'full',
       },
+      {
+        path: 'overview',
+        component: ApiOverviewComponent,
+      },
       {
         path: 'detail',
         component: ApiDetailComponent,

diff --git a/src/workbench/browser/src/app/pages/api/api.component.scss b/src/workbench/browser/src/app/pages/api/api.component.scss
@@ -16,29 +16,12 @@ nz-sider {
 
 ::ng-deep {
   .ant-layout-sider-children {
+    border-right: 1px solid #f0f0f0;
     padding: 5px;
     .group-btn-add,
     .group-search {
       margin-bottom: 12px;
     }
-    .group-tree {
-      overflow: auto;
-      height: calc(100vh - 129px);
-      .ant-tree-switcher {
-        width: 12px;
-      }
-      .ant-tree-indent-unit {
-        width: 8px;
-      }
-      .ant-tree {
-        .ant-tree-node-content-wrapper {
-          padding: 0 2px;
-        }
-      }
-    }
-  }
-  .ant-layout-sider-children {
-    border-right: 1px solid #f0f0f0;
   }
   .tabs-bar {
     background-color: var(--SEC_BG);

diff --git a/src/workbench/browser/src/app/pages/api/api.module.ts b/src/workbench/browser/src/app/pages/api/api.module.ts
@@ -7,11 +7,11 @@ import { ApiDetailModule } from './detail/api-detail.module';
 import { ApiTestModule } from './test/api-test.module';
 import { EnvModule } from '../env/env.module';
 import { EouiModule } from '../../eoui/eoui.module';
-import { ParamsImportModule } from '../../shared/components/params-import/params-import.module';
 
 import { ApiComponent } from './api.component';
 import { ApiGroupEditComponent } from './group/edit/api-group-edit.component';
 import { ExportApiComponent } from '../../shared/components/export-api/export-api.component';
+import { SyncApiComponent } from '../../shared/components/sync-api/sync-api.component';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -21,6 +21,9 @@ import { NzTreeModule } from 'ng-zorro-antd/tree';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzCardModule } from 'ng-zorro-antd/card';
+
 
 import { ApiTabService } from './tab/api-tab.service';
 import { MessageService } from '../../shared/services/message';
@@ -29,8 +32,9 @@ import { ApiTabComponent } from './tab/api-tab.component';
 import { ApiService } from './api.service';
 import { ElectronService } from '../../core/services';
 import { StorageService } from '../../shared/services/storage';
+import { ApiOverviewComponent } from './overview/api-overview.component';
 
-const COMPONENTS = [ApiComponent, ApiGroupEditComponent, ApiGroupTreeComponent, ExportApiComponent];
+const COMPONENTS = [ApiComponent, ApiGroupEditComponent, ApiGroupTreeComponent, ExportApiComponent,SyncApiComponent];
 @NgModule({
   imports: [
     FormsModule,
@@ -49,11 +53,12 @@ const COMPONENTS = [ApiComponent, ApiGroupEditComponent, ApiGroupTreeComponent,
     NzInputModule,
     NzRadioModule,
     NzDropDownModule,
-    ParamsImportModule,
+    NzDividerModule,
     EouiModule,
     EnvModule,
+    NzCardModule
   ],
-  declarations: [...COMPONENTS, ApiTabComponent],
+  declarations: [...COMPONENTS, ApiTabComponent, ApiOverviewComponent],
   exports: [],
   providers: [ElectronService, MessageService, ApiTabService, ApiService, StorageService],
 })

diff --git a/src/workbench/browser/src/app/pages/api/api.service.ts b/src/workbench/browser/src/app/pages/api/api.service.ts
@@ -31,7 +31,7 @@ export class ApiService {
       nzOnOk: () => {
         this.storage.run('apiDataRemove', [apiData.uuid], (result: StorageHandleResult) => {
           if (result.status === StorageHandleStatus.success) {
-            this.messageService.send({ type: 'deleteApi', data: { uuid: apiData.uuid } });
+            this.messageService.send({ type: 'deleteApiSuccess', data: { uuid: apiData.uuid } });
           }
         });
       },
@@ -40,20 +40,12 @@ export class ApiService {
   bulkDelete(apis) {
     this.storage.run('apiDataBulkRemove', [apis], (result: StorageHandleResult) => {
       if (result.status === StorageHandleStatus.success) {
-        this.messageService.send({ type: 'bulkDeleteApi', data: { uuids: apis } });
+        this.messageService.send({ type: 'bulkDeleteApiSuccess', data: { uuids: apis } });
       }
     });
   }
   export(apiData: ApiData) {
-    const modal: NzModalRef = this.modalService.create({
-      nzTitle: "导出 API",
-      nzContent: ExportApiComponent,
-      nzClosable: false,
-      nzComponentParams:{},
-      nzOnOk() {
-        modal.componentInstance.submit();
-      },
-    });
+
   }
   bulkExport(groups) {}
 }
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
@@ -82,7 +82,6 @@ export class ApiEditComponent implements OnInit, OnDestroy {
         treeItems.sort((a, b) => a.weight - b.weight);
       }
       listToTree(treeItems, this.groups, '0');
-      console.log(treeItems, this.groups);
       this.afterInitGroup();
     });
   }

diff --git a/src/workbench/browser/src/app/pages/api/edit/api-edit.module.ts b/src/workbench/browser/src/app/pages/api/edit/api-edit.module.ts
@@ -43,7 +43,7 @@ const NZ_COMPONETS = [
   NzTabsModule,
   NzRadioModule,
   NzDividerModule,
-  NzAffixModule
+  NzAffixModule,
 ];
 const COMPONENTS = [
   ApiEditComponent,

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
@@ -22,15 +22,34 @@
         <nz-dropdown-menu #menu="nzDropdownMenu">
           <ul nz-menu>
             <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'gotoAddApi' })"><a>新建API</a></li>
-            <!-- <li nz-menu-item (click)="operateApiEvent({ event: $event, eventName: 'testApi' })"><a>新建测试</a></li> -->
             <li nz-menu-item (click)="addGroup()"><a>新建分组</a></li>
           </ul>
         </nz-dropdown-menu>
       </div>
     </div>
   </nz-input-group>
 </header>
-<div class="group_container group-tree pt10">
+<!-- Fixed Group -->
+<div class="group_container fixed_group_tree pt10">
+  <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">
+        <i class="mr10" nz-icon nzType="home" nzTheme="outline"></i>
+        <span class="text_omit node_title">{{ node.title }}</span>
+      </div>
+    </div>
+  </ng-template>
+</div>
+<div class="bbd"></div>
+<!-- Custom Group -->
+<div class="group_container group_tree pt10">
   <nz-tree
     [nzData]="treeNodes"
     [nzSelectedKeys]="nzSelectedKeys"
@@ -79,7 +98,7 @@
         </span>
       </div>
       <!-- Leaf -->
-      <div class="tree_node f_row f_js_ac" *ngIf="node.isLeaf">
+      <div class="tree_node f_row f_js_ac" *ngIf="!node.origin?.isFixed && node.isLeaf">
         <div class="f_row_ac">
           <b class="method_text method_text_{{ node.origin.method }} mr5" *ngIf="node.origin.method">{{
             node.origin.method.slice(0, 4)
@@ -104,13 +123,22 @@
               <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: 'exportApi', node: apiDataItems[node.key] })">
+              <li
+                nz-menu-item
+                (click)="operateApiEvent({ event: $event, eventName: 'exportApi', node: apiDataItems[node.key] })"
+              >
                 <a>导出 API</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
@@ -2,14 +2,39 @@
   .ant-tree-node-selected * {
     color: var(--TEXT_ACTIVE);
   }
+  .ant-tree-list-holder-inner {
+    .nz-tree-node:first {
+      border-bottom: 1px solid var(--BORDER);
+    }
+  }
+  .fixed_group_tree {
+    nz-tree-node-switcher {
+      display: none;
+    }
+  }
+}
+.group_tree {
+  overflow: auto;
+  height: calc(100vh - 129px);
+  .ant-tree-switcher {
+    width: 12px;
+  }
+  .ant-tree-indent-unit {
+    width: 8px;
+  }
+  .ant-tree {
+    .ant-tree-node-content-wrapper {
+      padding: 0 2px;
+    }
+  }
 }
 .ant-dropdown-menu {
   min-width: 100px;
 }
-.method_text{
+.method_text {
   width: 32px;
 }
-.node_title{
+.node_title {
   max-width: 145px;
 }
 .tree_node {

diff --git a/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.ts b/src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.ts
@@ -51,7 +51,17 @@ export class ApiGroupTreeComponent implements OnInit, OnDestroy {
    * Level Tree nodes.
    */
   treeNodes: GroupTreeItem[] | NzTreeNode[] | any;
-  nzSelectedKeys: number[];
+  fixedTreeNode: GroupTreeItem[] | NzTreeNode[] = [
+    {
+      title: '概况',
+      key: 'overview',
+      weight: 0,
+      parentID: '0',
+      isLeaf: true,
+      isFixed: true,
+    },
+  ];
+  nzSelectedKeys: number[]=[];
   private destroy$: Subject<void> = new Subject<void>();
   constructor(
     private router: Router,
@@ -91,7 +101,6 @@ export class ApiGroupTreeComponent implements OnInit, OnDestroy {
   }
   getGroups() {
     this.storage.run('groupLoadAllByProjectID', [this.projectID], (result: StorageHandleResult) => {
-      console.log('groupLoadAllByProjectID');
       if (result.status === StorageHandleStatus.success) {
         result.data.forEach((item) => {
           delete item.updatedAt;
@@ -103,6 +112,7 @@ export class ApiGroupTreeComponent implements OnInit, OnDestroy {
             parentID: item.parentID ? `group-${item.parentID}` : '0',
             isLeaf: false,
           });
+          console.log(this.treeItems);
         });
       }
       this.getApis();
@@ -184,12 +194,23 @@ export class ApiGroupTreeComponent implements OnInit, OnDestroy {
    * @param event
    */
   clickTreeItem(event: NzFormatEmitEvent): void {
-    if (!event.node.isLeaf) {
-      event.node.isExpanded = !event.node.isExpanded;
-      this.toggleExpand();
-    } else {
-      event.eventName = 'detailApi';
-      this.operateApiEvent(event);
+    let eventName=!event.node.isLeaf?'clickFolder':event.node?.origin.isFixed?'clickFixedItem':'clickItem';
+    switch(eventName){
+      case 'clickFolder':{
+        event.node.isExpanded = !event.node.isExpanded;
+        this.toggleExpand();
+        break;
+      }
+      case 'clickFixedItem':{
+        event.eventName = 'detailOverview';
+        this.operateApiEvent(event);
+        break;
+      }
+      case 'clickItem':{
+        event.eventName = 'detailApi';
+        this.operateApiEvent(event);
+        break;
+      }
     }
   }
 

diff --git a/src/workbench/browser/src/app/pages/api/overview/api-overview.component.html b/src/workbench/browser/src/app/pages/api/overview/api-overview.component.html
@@ -0,0 +1,27 @@
+<div class="overview_container">
+  <h1 class="fs20 fwb">概况</h1>
+  <nz-divider></nz-divider>
+  <div class="r_row f_js">
+    <div class="f_row_ac">
+      <div>
+        <nz-card [nzActions]="[exportButton]">
+          <nz-card-meta nzTitle="导出" nzDescription="导出 API 数据"></nz-card-meta>
+        </nz-card>
+        <ng-template #exportButton>
+          <i (click)="export()" nz-icon nzType="export"></i>
+        </ng-template>
+      </div>
+      <div class="ml15">
+        <nz-card [nzActions]="[syncButton]">
+          <nz-card-meta nzTitle="推送" nzDescription="将 API 推送/同步到其他平台"></nz-card-meta>
+        </nz-card>
+        <ng-template #syncButton>
+          <i (click)="sync()" nz-icon nzType="sync"></i>
+        </ng-template>
+      </div>
+    </div>
+    <!-- <div>
+            <h2>统计</h2>
+        </div> -->
+  </div>
+</div>
diff --git a/src/workbench/browser/src/app/pages/api/overview/api-overview.component.scss b/src/workbench/browser/src/app/pages/api/overview/api-overview.component.scss
@@ -0,0 +1,8 @@
+.overview_container{
+    width: 50%;
+    margin: 0 auto;
+    padding: 20px 0;
+}
+nz-card{
+    min-width: 220px;
+}
diff --git a/src/workbench/browser/src/app/pages/api/overview/api-overview.component.spec.ts b/src/workbench/browser/src/app/pages/api/overview/api-overview.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ApiOverviewComponent } from './api-overview.component';
+
+describe('ApiOverviewComponent', () => {
+  let component: ApiOverviewComponent;
+  let fixture: ComponentFixture<ApiOverviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ApiOverviewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ApiOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});