feat: 前置脚本UI

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

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);
+  }
 }

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

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

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

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

src/workbench/browser/src/app/shared/components/api-script/api-script.component.html

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

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<ApiScriptComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ApiScriptComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ApiScriptComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<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);
+  };
+}

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

yarn.lock

@@ -205,16 +205,7 @@
   dependencies:
     tslib "^2.3.0"
 
-"@angular/[email protected]":
-  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/[email protected]", "@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==