From 035de1b4991c98fb917236cb2727dad7e639f6a4 Mon Sep 17 00:00:00 2001 From: buqiyuan <1743369777@qq.com> Date: Mon, 11 Jul 2022 19:09:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=89=8D=E7=BD=AE=E8=84=9A=E6=9C=ACUI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/workbench/browser/package.json | 2 +- .../editor/eo-editor/eo-editor.component.ts | 34 +++++++- .../pages/api/test/api-test.component.html | 18 ++++ .../src/app/pages/api/test/api-test.module.ts | 6 +- .../api-script/api-script.component.html | 25 ++++++ .../api-script/api-script.component.scss | 0 .../api-script/api-script.component.spec.ts | 23 +++++ .../api-script/api-script.component.ts | 83 +++++++++++++++++++ .../browser/src/app/shared/shared.module.ts | 13 ++- yarn.lock | 11 +-- 10 files changed, 198 insertions(+), 17 deletions(-) create mode 100644 src/workbench/browser/src/app/shared/components/api-script/api-script.component.html create mode 100644 src/workbench/browser/src/app/shared/components/api-script/api-script.component.scss create mode 100644 src/workbench/browser/src/app/shared/components/api-script/api-script.component.spec.ts create mode 100644 src/workbench/browser/src/app/shared/components/api-script/api-script.component.ts diff --git a/src/workbench/browser/package.json b/src/workbench/browser/package.json index 0be6de13..693ed487 100644 --- a/src/workbench/browser/package.json +++ b/src/workbench/browser/package.json @@ -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", diff --git a/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.ts b/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.ts index 78fe7d35..0c46425b 100644 --- a/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.ts +++ b/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.ts @@ -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); + } } diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.component.html b/src/workbench/browser/src/app/pages/api/test/api-test.component.html index eecc7bd9..09d0410e 100644 --- a/src/workbench/browser/src/app/pages/api/test/api-test.component.html +++ b/src/workbench/browser/src/app/pages/api/test/api-test.component.html @@ -74,6 +74,24 @@ + + + 前置脚本 + {{ + apiData.restParams | apiParamsNum + }} + + + + + + 后置脚本 + {{ + apiData.restParams | apiParamsNum + }} + + + +
+ + + + + {{ node.name }} + + + + + + + + + {{ node.name }} + + + +
+
+ + +
+ diff --git a/src/workbench/browser/src/app/shared/components/api-script/api-script.component.scss b/src/workbench/browser/src/app/shared/components/api-script/api-script.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/workbench/browser/src/app/shared/components/api-script/api-script.component.spec.ts b/src/workbench/browser/src/app/shared/components/api-script/api-script.component.spec.ts new file mode 100644 index 00000000..47238854 --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/api-script/api-script.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ApiScriptComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ApiScriptComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/workbench/browser/src/app/shared/components/api-script/api-script.component.ts b/src/workbench/browser/src/app/shared/components/api-script/api-script.component.ts new file mode 100644 index 00000000..2d7e41a3 --- /dev/null +++ b/src/workbench/browser/src/app/shared/components/api-script/api-script.component.ts @@ -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(true); + + treeControl = new FlatTreeControl( + (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); + }; +} diff --git a/src/workbench/browser/src/app/shared/shared.module.ts b/src/workbench/browser/src/app/shared/shared.module.ts index dd610291..49c4e267 100644 --- a/src/workbench/browser/src/app/shared/shared.module.ts +++ b/src/workbench/browser/src/app/shared/shared.module.ts @@ -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], diff --git a/yarn.lock b/yarn.lock index e19f28c3..478498b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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==