test/postcat
1
0
Fork 0
mirror of https://gitee.com/eolink_admin/postcat.git synced 2024-12-03 12:18:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: overview

Browse Source
This commit is contained in:
秦圆圆 2022-04-24 18:44:17 +08:00
parent 9983ad5df9
commit 00830d837c
22 changed files with 297 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/workbench/browser/src/app/pages/api/api-routing.module.ts
View File

@ -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,

19
src/workbench/browser/src/app/pages/api/api.component.scss
View File

@ -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);

13
src/workbench/browser/src/app/pages/api/api.module.ts
View File

@ -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],
})

14
src/workbench/browser/src/app/pages/api/api.service.ts
View File

@ -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) {}
}

1
src/workbench/browser/src/app/pages/api/edit/api-edit.component.ts
View File

@ -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();
});
}

2
src/workbench/browser/src/app/pages/api/edit/api-edit.module.ts
View File

@ -43,7 +43,7 @@ const NZ_COMPONETS = [
NzTabsModule,
NzRadioModule,
NzDividerModule,
NzAffixModule
NzAffixModule,
];
const COMPONENTS = [
ApiEditComponent,

40
src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.html
View File

@ -22,7 +22,6 @@
<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>
@ -30,7 +29,27 @@
</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>

29
src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.scss
View File

@ -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 {

37
src/workbench/browser/src/app/pages/api/group/tree/api-group-tree.component.ts
View File

@ -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;
}
}
}

27
src/workbench/browser/src/app/pages/api/overview/api-overview.component.html Normal file
View File

@ -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>

8
src/workbench/browser/src/app/pages/api/overview/api-overview.component.scss Normal file
View File

@ -0,0 +1,8 @@
.overview_container{
width: 50%;
margin: 0 auto;
padding: 20px 0;
}
nz-card{
min-width: 220px;
}

25
src/workbench/browser/src/app/pages/api/overview/api-overview.component.spec.ts Normal file
View File

@ -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();
});
});

38
src/workbench/browser/src/app/pages/api/overview/api-overview.component.ts Normal file
View File

@ -0,0 +1,38 @@
import { Component, OnInit } from '@angular/core';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { ExportApiComponent } from '../../../shared/components/export-api/export-api.component';
import { SyncApiComponent } from '../../../shared/components/sync-api/sync-api.component';
import { ModalService } from '../../../shared/services/modal.service';
@Component({
selector: 'eo-api-overview',
templateUrl: './api-overview.component.html',
styleUrls: ['./api-overview.component.scss'],
})
export class ApiOverviewComponent implements OnInit {
constructor(private modalService: ModalService) {}
ngOnInit(): void {}
export() {
const modal: NzModalRef = this.modalService.create({
nzTitle: '导出 API',
nzContent: ExportApiComponent,
nzClosable: false,
nzComponentParams: {},
nzOnOk() {
modal.componentInstance.submit();
},
});
}
sync() {
const modal: NzModalRef = this.modalService.create({
nzTitle: '推送 API',
nzContent: SyncApiComponent,
nzClosable: false,
nzComponentParams: {},
nzOnOk() {
modal.componentInstance.submit();
},
});
}
}

46
src/workbench/browser/src/app/pages/api/tab/api-tab.component.ts
View File

@ -24,6 +24,7 @@ export class ApiTabComponent implements OnInit, OnDestroy {
edit: { path: '/home/api/edit', title: '新 API' },
test: { path: '/home/api/test', title: '新 API' },
detail: { path: '/home/api/detail', title: 'API 详情' },
overview: { path: '/home/api/overview', title: '概况', key: 'overview' },
};
MAX_TAB_LIMIT = 15;
@ -52,22 +53,22 @@ export class ApiTabComponent implements OnInit, OnDestroy {
*/
private initTab() {
let apiID = Number(this.route.snapshot.queryParams.uuid);
let hasApiExist = this.apiDataItems[apiID];
//delete api
if (!hasApiExist) {
this.closeTab({ index: this.selectedIndex });
return;
}
if (apiID) {
const tab = this.getTabInfo({
tabData: this.apiDataItems[apiID],
});
this.appendOrSwitchTab('unset', tab);
} else {
if (!apiID) {
let module = Object.keys(this.defaultTabs).find((keyName) =>
this.router.url.split('?')[0].includes(this.defaultTabs[keyName].path)
);
this.appendOrSwitchTab(module, this.route.snapshot.queryParams);
} else {
let isApiExist = this.apiDataItems[apiID];
//not exist api or delete api
if (!isApiExist) {
this.closeTab({ index: this.selectedIndex });
return;
}
const tab = this.getTabInfo({
tabData: this.apiDataItems[apiID],
});
this.appendOrSwitchTab('unset', tab);
}
}
/**
@ -83,18 +84,22 @@ export class ApiTabComponent implements OnInit, OnDestroy {
which === 'unset' ? {} : this.defaultTabs[which],
tabContent
);
let existApiIndex = this.tabSerive.tabs.findIndex((val) => val.key === tab.key);
if (tab.key && existApiIndex !== -1) {
let existTabIndex = this.tabSerive.tabs.findIndex((val) => val.key === tab.key);
if (tab.key && existTabIndex !== -1) {
let switchTab = {};
if (this.tabSerive.tabs[existApiIndex].path !== tab.path) {
if (this.tabSerive.tabs[existTabIndex].path !== tab.path) {
//* exist api in same tab change route,such as edit page to detail
switchTab['path'] = tab.path;
}
this.switchTab(existApiIndex, switchTab);
this.switchTab(existTabIndex, switchTab);
return;
}
// avoid open too much tab,if detail or no change,open page in current tab
if(this.tabSerive.tabs.length&&this.tabSerive.currentTab?.path.includes('detail')&&tab.path.includes('detail')){
if (
this.tabSerive.tabs.length &&
this.tabSerive.currentTab?.path.includes('detail') &&
tab.path.includes('detail')
) {
this.switchTab(this.selectedIndex, tab);
return;
}
@ -222,12 +227,17 @@ export class ApiTabComponent implements OnInit, OnDestroy {
case 'detailApi':
this.appendOrSwitchTab('detail', inArg.data.origin);
break;
case 'detailOverview': {
console.log(inArg.data.origin);
this.appendOrSwitchTab('overview', inArg.data.origin);
break;
}
case 'gotoEditApi':
this.appendOrSwitchTab('edit', inArg.data.origin);
break;
case 'copyApi':
case 'gotoAddApi':
this.appendOrSwitchTab('edit', inArg.data ? { groupID: inArg.data.key.replace('group-','') } : {});
this.appendOrSwitchTab('edit', inArg.data ? { groupID: inArg.data.key.replace('group-', '') } : {});
break;
case 'addApiSuccess':
case 'editApiSuccess':

3
src/workbench/browser/src/app/shared/components/export-api/export-api.component.html
View File

@ -1,4 +1,3 @@
<nz-radio-group [(ngModel)]="exportType">
<label nz-radio nzValue="eoapi">Eoapi(.json)</label>
<label nz-radio nzValue="openapi3">Swagger V3.0</label>
<label *ngFor="let item of supportList" nz-radio [nzValue]="item.key">{{item.title}}</label>
</nz-radio-group>

35
src/workbench/browser/src/app/shared/components/export-api/export-api.component.ts
View File

@ -1,6 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { MessageService } from '../../../shared/services/message';
import { StorageService } from '../../../shared/services/storage';
@Component({
@ -9,15 +8,29 @@ import { StorageService } from '../../../shared/services/storage';
styleUrls: ['./export-api.component.scss'],
})
export class ExportApiComponent implements OnInit {
exportType:'eoapi'
constructor(
private modalRef: NzModalRef,
private storage: StorageService
) { }
ngOnInit(): void {
}
submit(){
console.log('export')
exportType: string = 'eoapi';
supportList: any[] = [
{
key: 'eoapi',
image:'',
title: 'Eoapi(.json)',
},
{
key: 'openapi3',
image:'',
title: 'Swagger V3.0',
},
];
constructor(private modalRef: NzModalRef, private storage: StorageService) {}
ngOnInit(): void {}
exportEoapi() {}
submit() {
switch (this.exportType) {
case 'eoapi': {
this.exportEoapi();
break;
}
}
console.log('export');
}
}

2
src/workbench/browser/src/app/shared/components/navbar/navbar.component.html
View File

@ -15,7 +15,7 @@
</nz-dropdown-menu>
</div>
<!-- <span (click)="openApp(item.moduleID)" *ngFor="let item of getModules()" >&nbsp;{{ item.moduleName }}&nbsp;</span> -->
<span class="mr10" nz-dropdown (nzVisibleChange)="changeHelpVisible($event)" [nzDropdownMenu]="menu">
<span class="mr15" nz-dropdown (nzVisibleChange)="changeHelpVisible($event)" [nzDropdownMenu]="menu">
<i nz-icon nzType="question-circle" class="fs24" nzTheme="outline"></i>
</span>
<nz-dropdown-menu #menu="nzDropdownMenu">

1
src/workbench/browser/src/app/shared/components/navbar/navbar.component.ts
View File

@ -31,6 +31,7 @@ export class NavbarComponent implements OnInit {
constructor(private electron: ElectronService) {
this.isElectron = this.electron.isElectron;
this.getInstaller();
}
getInstaller() {
fetch('https://api.github.com/repos/eolinker/eoapi/releases')

5
src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.html Normal file
View File

@ -0,0 +1,5 @@
<nz-radio-group [(ngModel)]="exportType">
<label nz-radio-button nzValue="eolink">Eolink</label>
<label nz-radio-button nzValue="zion">Zion</label>
<label nz-radio-button nzValue="apisix">APISix</label>
</nz-radio-group>

0
src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.scss Normal file
View File

22
src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.ts Normal file
View File

@ -0,0 +1,22 @@
import { Component, Input, OnInit } from '@angular/core';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { StorageService } from '../../services/storage';
@Component({
selector: 'eo-sync-api',
templateUrl: './sync-api.component.html',
styleUrls: ['./sync-api.component.scss'],
})
export class SyncApiComponent implements OnInit {
exportType: string = 'eolink';
constructor(
private modalRef: NzModalRef,
private storage: StorageService
) { }
ngOnInit(): void {
}
submit(){
console.log('export')
}
}

8
src/workbench/browser/src/app/shared/models/tree.model.ts
View File

@ -38,6 +38,14 @@ export interface GroupTreeItem {
*/
isLeaf: boolean;
/**
* Item or folder
* If true, it means fixed group
*
* @type {boolean}
*/
isFixed?: boolean;
/**
* Api data request method. only for display.
*