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

feat: 前置脚本UI

Browse Source
This commit is contained in:
buqiyuan 2022-07-11 19:09:33 +08:00
parent a1786e4945
commit 035de1b499
10 changed files with 198 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/workbench/browser/package.json
View File

@ -20,7 +20,7 @@
"dependencies": {
"@angular-cli/base-href-webpack": "1.0.16",
"@angular/animations": "14.0.3",
"@angular/cdk": "14.0.3",
"@angular/cdk": "13.3.9",
"@angular/common": "14.0.3",
"@angular/compiler": "14.0.3",
"@angular/core": "14.0.3",

34
src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.ts
View File

@ -5,12 +5,14 @@ import { whatTextType } from '../../../utils';
import { ElectronService } from 'eo/workbench/browser/src/app/core/services/electron/electron.service';
import beautifier from 'js-beautify';
import 'brace';
import 'brace/ext/language_tools';
import 'brace/theme/tomorrow_night_eighties';
import 'brace/mode/json';
import 'brace/mode/text';
import 'brace/mode/html';
import 'brace/mode/xml';
import 'brace/ext/searchbox';
import ace from 'brace';
type EventType = 'format' | 'copy' | 'search' | 'replace' | 'type' | 'download' | 'newTab';
@ -113,6 +115,8 @@ export class EoEditorComponent implements AfterViewInit, OnInit, OnChanges {
event: it,
...eventHash.get(it),
}));
this.setCompleteData([]);
}
log(event, txt) {
console.log('ace event', event, txt);
@ -194,8 +198,34 @@ export class EoEditorComponent implements AfterViewInit, OnInit, OnChanges {
document.body.removeChild(a);
}
break;
default:
break;
}
}
setCompleteData = (data) => {
// const meta = [{meta: "abcdefg", caption: "sonic", value: "sonic", score:1}]
console.log('ace', ace);
const langTools = ace.acequire('ace/ext/language_tools');
console.log('langTools', langTools);
langTools.addCompleter({
// this.aceEditorServiceService.getAutocomplete(this.autocompleteData),
getCompletions: (editor, session, pos, prefix, callback) =>
callback(null, [{ meta: 'abcdefg', caption: 'sonic', value: 'sonic', score: 1 }]),
// langTools.addCompleter({
// getCompletions: function (editor, session, pos, prefix, callback) {
// if (prefix.length === 0) {
// return callback(null, []);
// } else {
// return callback(null, data);
// }
// },
// });
});
};
handleInsert(code) {
const ace = this.aceRef.directiveRef.ace();
const cursorPos = ace.getCursorPosition();
ace.session.insert(cursorPos, code);
}
}

18
src/workbench/browser/src/app/pages/api/test/api-test.component.html
View File

@ -74,6 +74,24 @@
</ng-template>
<eo-api-test-rest class="eo_theme_iblock bbd" [model]="apiData.restParams"></eo-api-test-rest>
</nz-tab>
<nz-tab [nzTitle]="preScriptTitleTmp" [nzForceRender]="true">
<ng-template #preScriptTitleTmp>
前置脚本
<span class="eo-tab-icon" *ngIf="bindGetApiParamNum(apiData.restParams)">{{
apiData.restParams | apiParamsNum
}}</span>
</ng-template>
<eo-api-script class="eo_theme_iblock bbd"></eo-api-script>
</nz-tab>
<nz-tab [nzTitle]="suffixScriptTitleTmp" [nzForceRender]="true">
<ng-template #suffixScriptTitleTmp>
后置脚本
<span class="eo-tab-icon" *ngIf="bindGetApiParamNum(apiData.restParams)">{{
apiData.restParams | apiParamsNum
}}</span>
</ng-template>
<eo-api-test-rest class="eo_theme_iblock bbd" [model]="apiData.restParams"></eo-api-test-rest>
</nz-tab>
</nz-tabset>
<!-- Response -->
<nz-tabset [nzTabBarStyle]="{ 'padding-left': '10px' }" [(nzSelectedIndex)]="tabIndexRes" [nzAnimated]="false"

6
src/workbench/browser/src/app/pages/api/test/api-test.module.ts
View File

@ -56,7 +56,7 @@ const NZ_COMPONETS = [
NzEmptyModule,
NzPopconfirmModule,
NzToolTipModule,
NzTypographyModule
NzTypographyModule,
];
const COMPONENTS = [
ApiTestComponent,
@ -79,8 +79,8 @@ const COMPONENTS = [
...NZ_COMPONETS,
EouiModule,
SharedModule,
ParamsImportModule
ParamsImportModule,
],
providers: [ApiTestService, TestServerService, TestServerLocalNodeService,TestServerServerlessService],
providers: [ApiTestService, TestServerService, TestServerLocalNodeService, TestServerServerlessService],
})
export class ApiTestModule {}

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

@ -0,0 +1,25 @@
<div class="flex eo-api-script">
<div class="w-[240px] h-[300px]">
<nz-tree-view [nzTreeControl]="treeControl" [nzDataSource]="dataSource" [nzBlockNode]="true">
<nz-tree-node *nzTreeNodeDef="let node" nzTreeNodePadding>
<nz-tree-node-toggle nzTreeNodeNoopToggle></nz-tree-node-toggle>
<nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="false" (nzClick)="insertCode(node)">
{{ node.name }}
</nz-tree-node-option>
</nz-tree-node>
<nz-tree-node *nzTreeNodeDef="let node; when: hasChild" nzTreeNodePadding>
<nz-tree-node-toggle>
<i nz-icon nzType="caret-down" nzTreeNodeToggleRotateIcon></i>
</nz-tree-node-toggle>
<nz-tree-node-option [nzDisabled]="node.disabled" [nzSelected]="false">
{{ node.name }}
</nz-tree-node-option>
</nz-tree-node>
</nz-tree-view>
</div>
<div class="flex-1 h-[300px]">
<eo-editor [(code)]="model" editorType="javascript" [eventList]="[ 'format', 'copy', 'search', 'replace']">
</eo-editor>
</div>
</div>

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

23
src/workbench/browser/src/app/shared/components/api-script/api-script.component.spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ApiScriptComponent } from './api-script.component';
describe('ApiScriptComponent', () => {
let component: ApiScriptComponent;
let fixture: ComponentFixture<ApiScriptComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ApiScriptComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ApiScriptComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

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

@ -0,0 +1,83 @@
import { SelectionModel } from '@angular/cdk/collections';
import { FlatTreeControl } from '@angular/cdk/tree';
// import { FlatTreeControl } from 'ng-zorro-antd/node_modules/@angular/cdk/tree';
import { Component, OnInit, ViewChild } from '@angular/core';
import { EoEditorComponent } from 'eo/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component';
import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view';
interface TreeNode {
name: string;
code?: string;
children?: TreeNode[];
}
const TREE_DATA: TreeNode[] = [
{
name: 'HTTP API 请求',
children: [
{
name: '获取响应结果',
code: 'eo.http.response.get();',
},
{
name: '设置响应结果',
code: 'eo.http.response.set("response_value");',
},
],
},
];
interface FlatNode extends TreeNode {
expandable: boolean;
name: string;
level: number;
disabled: boolean;
}
@Component({
selector: 'eo-api-script',
templateUrl: './api-script.component.html',
styleUrls: ['./api-script.component.scss'],
})
export class ApiScriptComponent implements OnInit {
@ViewChild(EoEditorComponent, { static: false }) eoEditor?: EoEditorComponent;
private transformer = (node: TreeNode, level: number): FlatNode => ({
...node,
expandable: !!node.children && node.children.length > 0,
name: node.name,
level,
disabled: false,
});
selectListSelection = new SelectionModel<FlatNode>(true);
treeControl = new FlatTreeControl<FlatNode, any>(
(node) => node.level,
(node) => node.expandable
);
treeFlattener = new NzTreeFlattener(
this.transformer,
(node) => node.level,
(node) => node.expandable,
(node) => node.children
);
// @ts-ignore
dataSource = new NzTreeFlatDataSource(this.treeControl, this.treeFlattener);
model = '';
constructor() {
this.dataSource.setData(TREE_DATA);
this.treeControl.expandAll();
}
ngOnInit(): void {}
hasChild = (_: number, node: FlatNode): boolean => node.expandable;
insertCode = (node: FlatNode) => {
this.eoEditor.handleInsert(node.code);
};
}

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

@ -22,8 +22,17 @@ import { PageBlankComponent } from './components/page-blank/page-blank.component
import { RouterModule } from '@angular/router';
import { ShadowDomEncapsulationComponent } from 'eo/workbench/browser/src/app/shared/components/shadow/shadow-dom-encapsulation.component';
import { EoIconparkIconModule } from 'eo/workbench/browser/src/app/eoui/iconpark-icon/eo-iconpark-icon.module';
import { ApiScriptComponent } from './components/api-script/api-script.component';
import { EouiModule } from 'eo/workbench/browser/src/app/eoui/eoui.module';
import { NzTreeViewModule } from 'ng-zorro-antd/tree-view';
const COMPONENTS = [ToolbarComponent, ShadowDomEncapsulationComponent, SidebarComponent, PageNotFoundComponent];
const COMPONENTS = [
ToolbarComponent,
ShadowDomEncapsulationComponent,
SidebarComponent,
PageNotFoundComponent,
ApiScriptComponent,
];
@NgModule({
imports: [
CommonModule,
@ -42,6 +51,8 @@ const COMPONENTS = [ToolbarComponent, ShadowDomEncapsulationComponent, SidebarCo
NzMessageModule,
NzDescriptionsModule,
EoIconparkIconModule,
EouiModule,
NzTreeViewModule,
],
declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent],
providers: [ModalService],

11
yarn.lock
View File

@ -205,16 +205,7 @@
dependencies:
tslib "^2.3.0"
"@angular/cdk@14.0.3":
version "14.0.3"
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-14.0.3.tgz#eaa0b0736481bc9c1d24ad88e19dd20874506032"
integrity sha512-XN5+WVUFx13lW2x9gnzJprHGqcvSpKQaoXxFvlcn16i0P6Iy1jldVZm6q6chEhgX9rEi7P31nfE88OJzHmkEyw==
dependencies:
tslib "^2.3.0"
optionalDependencies:
parse5 "^5.0.0"
"@angular/cdk@^13.0.1":
"@angular/cdk@13.3.9", "@angular/cdk@^13.0.1":
version "13.3.9"
resolved "https://registry.npmmirror.com/@angular/cdk/-/cdk-13.3.9.tgz#a177196e872e29be3f84d3a50f778d361c689ff7"
integrity sha512-XCuCbeuxWFyo3EYrgEYx7eHzwl76vaWcxtWXl00ka8d+WAOtMQ6Tf1D98ybYT5uwF9889fFpXAPw98mVnlo3MA==