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

feat: add extension-select component for render

Browse Source
This commit is contained in:
夜鹰 2022-05-31 19:45:12 +08:00
parent 4bc79deb47
commit a4e97ecaf8
19 changed files with 159 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/workbench/browser/.eslintrc.json
View File

@ -34,7 +34,6 @@
"error",
{
"type": "element",
"prefix": "eo",
"style": "kebab-case"
}
]

25
src/workbench/browser/angular.json
View File

@ -109,7 +109,11 @@
"path": "./angular.webpack.js",
"replaceDuplicatePlugins": true
},
"allowedCommonJsDependencies": ["brace", "qs", "rxjs"]
"allowedCommonJsDependencies": [
"brace",
"qs",
"rxjs"
]
},
"configurations": {
"dev": {
@ -212,8 +216,12 @@
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"scripts": [],
"styles": ["src/styles.scss"],
"assets": ["src/assets"],
"styles": [
"src/styles.scss"
],
"assets": [
"src/assets"
],
"customWebpackConfig": {
"path": "./angular.webpack.js",
"replaceDuplicatePlugins": true
@ -223,7 +231,10 @@
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
}
}
@ -235,7 +246,9 @@
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["e2e/**/*.ts"]
"lintFilePatterns": [
"e2e/**/*.ts"
]
}
}
}
@ -251,4 +264,4 @@
"prefix": "eo"
}
}
}
}

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

@ -13,9 +13,11 @@ 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 { ImportApiComponent } from '../../shared/components/import-api/import-api.component';
import { ExtensionSelectComponent } from '../../shared/components/extension-select/extension-select.component';
import { NzRadioModule } from 'ng-zorro-antd/radio';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { NzTabsModule } from 'ng-zorro-antd/tabs';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzTreeModule } from 'ng-zorro-antd/tree';
@ -41,6 +43,7 @@ const COMPONENTS = [
ExportApiComponent,
SyncApiComponent,
ImportApiComponent,
ExtensionSelectComponent,
];
@NgModule({
imports: [
@ -61,6 +64,7 @@ const COMPONENTS = [
NzRadioModule,
NzDropDownModule,
NzDividerModule,
NzToolTipModule,
EouiModule,
EnvModule,
NzCardModule,

30
src/workbench/browser/src/app/pages/api/overview/api-overview.component.html
View File

@ -4,34 +4,14 @@
<nz-divider></nz-divider>
<div class="r_row f_js">
<div class="card_container">
<!-- <div class="card_item">
<nz-card [nzActions]="[importButton]">
<nz-card-meta nzTitle="导入" nzDescription="导入 API 数据"></nz-card-meta>
<div class="card_item" *ngFor="let item of overviewList">
<nz-card [nzActions]="[card]">
<nz-card-meta [nzTitle]="item.title" [nzDescription]="item.desc"></nz-card-meta>
</nz-card>
<ng-template #importButton>
<i (click)="import()" nz-icon nzType="import"></i>
</ng-template>
</div> -->
<div class="card_item">
<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="card_item">
<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 #card>
<i (click)="clickCard(item)" nz-icon [nzType]="item.icon"></i>
</ng-template>
</div>
</div>
<!-- <div>
<h2>统计</h2>
</div> -->
</div>
</div>

83
src/workbench/browser/src/app/pages/api/overview/api-overview.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { EoMessageService } from '../../../eoui/message/eo-message.service';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { ExportApiComponent } from '../../../shared/components/export-api/export-api.component';
@ -6,65 +6,52 @@ import { SyncApiComponent } from '../../../shared/components/sync-api/sync-api.c
import { ImportApiComponent } from '../../../shared/components/import-api/import-api.component';
import { ModalService } from '../../../shared/services/modal.service';
const actionComponent = {
push: SyncApiComponent,
import: ImportApiComponent,
export: ExportApiComponent,
};
@Component({
selector: 'eo-api-overview',
templateUrl: './api-overview.component.html',
styleUrls: ['./api-overview.component.scss'],
})
export class ApiOverviewComponent implements OnInit {
export class ApiOverviewComponent {
constructor(private modalService: ModalService, private message: EoMessageService) {}
overviewList = [
// {
// title: '导入',
// icon: 'import',
// desc: '导入 API 数据',
// type: 'import',
// },
{
title: '导出',
icon: 'export',
desc: '导出 API 数据',
type: 'export',
},
{
title: '推送',
icon: 'sync',
desc: '将 API 推送/同步到其他平台',
type: 'push',
},
];
ngOnInit(): void {}
export() {
let that = this;
clickCard({ title, desc, type }) {
const modal: NzModalRef = this.modalService.create({
nzTitle: '导出 API',
nzContent: ExportApiComponent,
nzTitle: desc,
nzContent: actionComponent[type],
nzClosable: false,
nzComponentParams: {},
nzOnOk() {
modal.componentInstance.submit((isSuccess) => {
if (isSuccess) {
that.message.success('导出成功');
nzOnOk: () => {
modal.componentInstance.submit((status) => {
if (status) {
this.message.success(`${title}成功`);
modal.destroy();
} else {
that.message.error('导出失败');
}
});
},
});
}
import() {
const modal: NzModalRef = this.modalService.create({
nzTitle: '导入 API',
nzContent: ImportApiComponent,
nzClosable: false,
nzComponentParams: {},
nzOnOk() {
modal.componentInstance.submit((isSuccess) => {
if (isSuccess) {
this.message.success('导入成功');
modal.destroy();
} else {
this.message.error('导入失败');
}
});
},
});
}
sync() {
const modal: NzModalRef = this.modalService.create({
nzTitle: '推送 API',
nzContent: SyncApiComponent,
nzClosable: false,
nzComponentParams: {},
nzOnOk() {
modal.componentInstance.submit((isSuccess) => {
if (isSuccess) {
this.message.success('同步成功');
modal.destroy();
} else {
this.message.error('同步失败');
this.message.error(`${title}失败`);
}
});
},

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

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

0
src/workbench/browser/src/app/shared/components/export-api/export-api.component.scss
View File

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

@ -2,37 +2,32 @@ import { Component, OnInit } from '@angular/core';
import { StorageService } from '../../../shared/services/storage';
import { StorageHandleResult, StorageHandleStatus } from 'eo/platform/browser/IndexedDB';
import packageJson from '../../../../../../../../package.json';
import { FeatureType } from '../../types';
@Component({
selector: 'eo-export-api',
templateUrl: './export-api.component.html',
styleUrls: ['./export-api.component.scss'],
template: ` <extension-select [(extension)]="exportType" [extensionList]="supportList"></extension-select> `,
})
export class ExportApiComponent implements OnInit {
exportType: string = 'eoapi';
supportList: Array<{
key: string;
image: string;
title: string;
}> = [
exportType = 'eoapi';
supportList: Array<FeatureType> = [
{
key: 'eoapi',
image: '',
title: 'Eoapi(.json)',
icon: '',
label: 'Eoapi',
description: '',
},
];
featureList = window.eo.getFeature('apimanage.export');
featureMap = window.eo.getFeature('apimanage.export');
constructor(private storage: StorageService) {}
ngOnInit(): void {
this.featureList?.forEach((feature: object, key: string) => {
this.featureMap?.forEach((data: FeatureType, key: string) => {
this.supportList.push({
key,
image: feature['icon'],
title: feature['label'],
...data,
});
});
}
submit(callback: () => boolean) {
console.log(this.exportType);
if ('eoapi' === this.exportType) {
this.exportEoapi(callback);
} else {
@ -75,7 +70,7 @@ export class ExportApiComponent implements OnInit {
* @param callback
*/
private export(callback) {
const feature = this.featureList.get(this.exportType);
const feature = this.featureMap.get(this.exportType);
const action = feature.action || null;
const filename = feature.filename || null;
const module = window.eo.loadFeatureModule(this.exportType);
@ -84,7 +79,6 @@ export class ExportApiComponent implements OnInit {
if (result.status === StorageHandleStatus.success) {
result.data.version = packageJson.version;
try {
console.log(JSON.stringify(result, null, 2));
const output = module[action](result || {});
this.transferTextToFile(filename, output);
callback(true);

19
src/workbench/browser/src/app/shared/components/extension-select/extension-select.component.html Normal file
View File

@ -0,0 +1,19 @@
<ng-container *ngIf="extensionList.length; else empty">
<div class="flex">
<div *ngFor="let item of extensionList" class="px-2 w-1/4 h-14" (click)="selectExtension(item)" >
<div
[class.active]="extension === item.key"
class="extension relative h-full w-full border rounded-md flex items-center justify-center"
[ngStyle]="{'background-image': 'url(' + item.icon + ')'}"
nzTooltipPlacement="bottom"
[nzTooltipTitle]="item.description"
nz-tooltip>
<span *ngIf="!item.icon">{{ item.label }}</span>
<i class="absolute right-0 bottom-0" nz-icon nzType="check" nzTheme="outline"></i>
</div>
</div>
</div>
</ng-container>
<ng-template #empty>
<span class="text">该功能需要插件支持，请移步至插件广场下载</span>
</ng-template>

24
src/workbench/browser/src/app/shared/components/extension-select/extension-select.component.scss Normal file
View File

@ -0,0 +1,24 @@
.text {
color: var(--TEXT_TITLE_SEC)
}
.extension {
background-repeat: no-repeat;
background-size: auto 90%;
background-position: center center;
cursor: pointer;
color: rgba(0,0,0,0.5);
border-color: rgba(0,0,0,0.1);
box-shadow: 0 0 5px rgba(0,0,0,.05);
&.active {
box-shadow: 0 0 10px rgba(0,0,0,.1);
background-color: #f8f8f8;
i {
color: #158565;
display: block;
}
}
i {
display: none;
}
}

16
src/workbench/browser/src/app/shared/components/extension-select/extension-select.component.ts Normal file
View File

@ -0,0 +1,16 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'extension-select',
templateUrl: './extension-select.component.html',
styleUrls: ['./extension-select.component.scss'],
})
export class ExtensionSelectComponent {
@Input() extensionList: any = [];
@Input() extension = '';
@Output() extensionChange = new EventEmitter<string>();
selectExtension({ key }) {
this.extensionChange.emit(key);
}
}

8
src/workbench/browser/src/app/shared/components/import-api/import-api.component.html
View File

@ -1,8 +0,0 @@
<ng-container *ngIf="supportList.length; else empty">
<nz-radio-group [(ngModel)]="importType">
<label *ngFor="let item of supportList" nz-radio [nzValue]="item.key">{{ item.title }}</label>
</nz-radio-group>
</ng-container>
<ng-template #empty>
<span class="text">该功能需要插件支持，请移步至插件广场下载</span>
</ng-template>

3
src/workbench/browser/src/app/shared/components/import-api/import-api.component.scss
View File

@ -1,3 +0,0 @@
.text {
color: var(--TEXT_TITLE_SEC)
}

34
src/workbench/browser/src/app/shared/components/import-api/import-api.component.ts
View File

@ -1,46 +1,28 @@
import { Component, OnInit } from '@angular/core';
import { StorageService } from '../../../shared/services/storage';
type FeatureType = {
icon: string;
label: string;
description: string;
};
import { FeatureType } from '../../types';
@Component({
selector: 'eo-import-api',
templateUrl: './import-api.component.html',
styleUrls: ['./import-api.component.scss'],
template: `<extension-select [(extension)]="importType" [extensionList]="supportList"></extension-select>`,
})
export class ImportApiComponent implements OnInit {
supportList: Array<{
key: string;
image: string;
title: string;
}> = [];
supportList: Array<FeatureType> = [];
importType = 'postman';
featureList = window.eo.getFeature('apimanage.import');
featureMap = window.eo.getFeature('apimanage.import');
constructor(private storage: StorageService) {}
ngOnInit(): void {
// this.supportList = this.supportList.concat(
// this.featureList.map(({ icon, label }: FeatureType, key: string) => ({
// key,
// image: icon,
// title: label,
// }))
// );
this.featureList?.forEach((feature: FeatureType, key: string) => {
this.featureMap?.forEach((data: FeatureType, key: string) => {
this.supportList.push({
key,
image: feature.icon,
title: feature.label,
...data,
});
});
}
submit() {
// console.log('import');
// console.log(this.featureList);
const feature = this.featureList.get('eoapi-import-openapi');
// console.log(this.featureMap);
const feature = this.featureMap.get('eoapi-import-openapi');
const action = feature.action || null;
// const filename = feature.filename || null;
const module = window.eo.loadFeatureModule('eoapi-import-openapi');

8
src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.html
View File

@ -1,8 +0,0 @@
<ng-container *ngIf="supportList.length; else empty">
<nz-radio-group [(ngModel)]="pushType">
<label *ngFor="let item of supportList" nz-radio [nzValue]="item.key">{{ item.title }}</label>
</nz-radio-group>
</ng-container>
<ng-template #empty>
<span class="text">该功能需要插件支持，请移步至插件广场下载</span>
</ng-template>

3
src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.scss
View File

@ -1,3 +0,0 @@
.text {
color: var(--TEXT_TITLE_SEC)
}

19
src/workbench/browser/src/app/shared/components/sync-api/sync-api.component.ts
View File

@ -1,32 +1,29 @@
import { Component, OnInit } from '@angular/core';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { StorageHandleResult, StorageHandleStatus } from 'eo/platform/browser/IndexedDB';
import { StorageService } from '../../services/storage';
import packageJson from '../../../../../../../../package.json';
import { FeatureType } from '../../types';
@Component({
selector: 'eo-sync-api',
templateUrl: './sync-api.component.html',
styleUrls: ['./sync-api.component.scss'],
template: `<extension-select [(extension)]="pushType" [extensionList]="supportList"></extension-select>`,
})
export class SyncApiComponent implements OnInit {
pushType: '';
pushType = '';
supportList: any[] = [];
featureList = window.eo.getFeature('apimanage.sync');
constructor(private modalRef: NzModalRef, private storage: StorageService) {}
featureMap = window.eo.getFeature('apimanage.sync');
constructor(private storage: StorageService) {}
ngOnInit(): void {
console.log('featureList', this.featureList);
this.featureList?.forEach((feature: object, key: string) => {
this.featureMap?.forEach((data: FeatureType, key: string) => {
this.supportList.push({
key,
image: feature['icon'],
title: feature['label'],
...data,
});
});
}
async submit() {
const feature = this.featureList.get(this.pushType);
const feature = this.featureMap.get(this.pushType);
const action = feature.action || null;
const module = window.eo.loadFeatureModule(this.pushType);
// TODO 临时取值方式需要修改

6
src/workbench/browser/src/app/shared/shared.module.ts
View File

@ -11,6 +11,7 @@ import { WebviewDirective } from './directives';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NzDrawerModule } from 'ng-zorro-antd/drawer';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzRadioModule } from 'ng-zorro-antd/radio';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon';
@ -39,9 +40,10 @@ const COMPONENTS = [ToolbarComponent, SelectThemeComponent, SidebarComponent, Na
NzResultModule,
NzDropDownModule,
NzSpinModule,
NzModalModule,
],
declarations: [WebviewDirective, ...COMPONENTS,ApiParamsNumPipe, PageBlankComponent, PageFeaturePreviewComponent],
declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent, PageFeaturePreviewComponent],
providers: [ModalService],
exports: [WebviewDirective, ...COMPONENTS,ApiParamsNumPipe],
exports: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe],
})
export class SharedModule {}

6
src/workbench/browser/src/app/shared/types.ts Normal file
View File

@ -0,0 +1,6 @@
export type FeatureType = {
icon: string;
label: string;
description: string;
key?: string;
};