feat: code tips

Postcatlab · Jul 12, 2022 · 5b92b20 · 5b92b20
1 parent 6ee40e2
commit 5b92b20
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 41 deletions.
diff --git a/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.scss b/src/workbench/browser/src/app/eoui/editor/eo-editor/eo-editor.component.scss
@@ -5,7 +5,6 @@
   width: 100%;
   display: flex;
   align-items: center;
-  padding: 0 15px;
   nz-select {
     width: 90px;
   }

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
@@ -13,6 +13,7 @@ import 'brace/mode/html';
 import 'brace/mode/xml';
 import 'brace/ext/searchbox';
 import ace from 'brace';
+import { completions } from 'eo/workbench/browser/src/app/shared/components/api-script/constant';
 
 type EventType = 'format' | 'copy' | 'search' | 'replace' | 'type' | 'download' | 'newTab';
 
@@ -204,16 +205,12 @@ export class EoEditorComponent implements AfterViewInit, OnInit, OnChanges {
   }
 
   setCompleteData = (data) => {
-    const meta = [
-      { caption: 'eo.http.response.get', value: 'eo.http.response.get()' },
-      { caption: 'eo.http.response.set', value: 'eo.http.response.set("response_value")' },
-    ];
     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),
+      getCompletions: (editor, session, pos, prefix, callback) => callback(null, completions),
 
       // langTools.addCompleter({
       //   getCompletions: function (editor, session, pos, prefix, callback) {

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
@@ -90,7 +90,7 @@
             apiData.restParams | apiParamsNum
             }}</span>
         </ng-template>
-        <eo-api-test-rest class="eo_theme_iblock bbd" [model]="apiData.restParams"></eo-api-test-rest>
+        <eo-api-script class="eo_theme_iblock bbd"></eo-api-script>
       </nz-tab>
     </nz-tabset>
     <!-- Response -->

diff --git a/src/workbench/browser/src/app/shared/components/api-script/api-script.component.html b/src/workbench/browser/src/app/shared/components/api-script/api-script.component.html
@@ -1,10 +1,39 @@
 <div class="flex eo-api-script">
-  <div class="w-[240px]  h-[300px]">
+  <div class="w-[240px] h-[400px] overflow-auto">
+    <div class="flex justify-between p-3">
+      <div>快捷方式</div>
+      <div>
+        <a href="https://help.eolink.com/#/tutorial/?groupID=c-709&productID=13" class="text-blue-400" target="_blank"
+          rel="noopener noreferrer">内置函数手册</a>
+      </div>
+    </div>
     <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 }}
+          <span class="text-blue-400"> {{ node.name }}</span>
+          <ng-container *ngIf="node.note">
+            <span [nzTooltipTitle]="titleTemplate" [nzTooltipPlacement]="['topLeft', 'leftTop']" class="text-blue-400"
+              nz-tooltip>
+              [?]
+            </span>
+            <ng-template #titleTemplate let-thing>
+              <p style="color:#99c6da" *ngIf="node.note.code">{{ node.note.code }}</p>
+              <p *ngIf="node.note.desc">{{node.note.desc}}</p>
+              <ng-container *ngIf="node.note.input">
+                <br />
+                <p style="color:#999">---入参---</p>
+                <p *ngFor="let item of node.note.input">
+                  <span style="color:#ff9800">{{item.key}}：</span>{{item.value}}
+                </p>
+              </ng-container>
+              <ng-container *ngIf="node.note.output">
+                <br />
+                <p style="color:#999">---返回---</p>
+                <p>全局变量值</p>`
+              </ng-container>
+            </ng-template>
+          </ng-container>
         </nz-tree-node-option>
       </nz-tree-node>
 
@@ -18,8 +47,9 @@
       </nz-tree-node>
     </nz-tree-view>
   </div>
-  <div class="flex-1  h-[300px]">
-    <eo-editor [(code)]="model" editorType="javascript" [eventList]="[ 'format', 'copy',  'search', 'replace']">
+  <div class="flex-1 ">
+    <eo-editor [(code)]="model" editorType="javascript" [eventList]="[ 'format', 'copy',  'search', 'replace']"
+      class="h-[500px]">
     </eo-editor>
   </div>
 </div>
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
@@ -6,35 +6,8 @@ import { EoEditorComponent } from 'eo/workbench/browser/src/app/eoui/editor/eo-e
 
 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;
-}
-
+import type { TreeNode, FlatNode } from './constant';
+import { TREE_DATA } from './constant';
 @Component({
   selector: 'eo-api-script',
   templateUrl: './api-script.component.html',
@@ -78,6 +51,6 @@ export class ApiScriptComponent implements OnInit {
   hasChild = (_: number, node: FlatNode): boolean => node.expandable;
 
   insertCode = (node: FlatNode) => {
-    this.eoEditor.handleInsert(node.code);
+    this.eoEditor.handleInsert(node.value);
   };
 }
diff --git a/src/workbench/browser/src/app/shared/components/api-script/constant.ts b/src/workbench/browser/src/app/shared/components/api-script/constant.ts
@@ -0,0 +1,109 @@
+export type Note = {
+  code?: string;
+  desc?: string;
+  input?: { key: string; value: string }[];
+  output?: string;
+};
+
+export interface TreeNode {
+  name: string;
+  caption?: string;
+  note?: Note;
+  value?: string;
+  children?: TreeNode[];
+}
+
+export interface FlatNode extends TreeNode {
+  expandable: boolean;
+  name: string;
+  level: number;
+  disabled: boolean;
+}
+
+export type Completion = { caption: string; value: string };
+
+export const TREE_DATA: TreeNode[] = [
+  {
+    name: 'HTTP API 请求',
+    children: [
+      {
+        name: '获取响应结果',
+        caption: 'eo.http.response.get',
+        value: 'eo.http.response.get();',
+        note: {
+          code: 'eo.http.response.get()',
+          desc: '获取 HTTP API 的响应结果',
+        },
+      },
+      {
+        name: '设置响应结果',
+        caption: 'eo.http.response.set',
+        value: 'eo.http.response.set("response_value");',
+        note: {
+          code: 'eo.http.response.set("response_value")',
+          desc: '设置 HTTP API 的响应结果',
+          input: [{ key: 'response_value：', value: '响应结果' }],
+        },
+      },
+    ],
+  },
+  {
+    name: '自定义全局变量',
+    children: [
+      {
+        name: '设置全局变量',
+        caption: 'eo.globals.set',
+        value: 'eo.globals.set("param_key","param_value")',
+        note: {
+          code: 'eo.globals.set("param_key","param_value")',
+          desc: '设置全局变量',
+          input: [
+            { key: 'param_key', value: '参数名' },
+            { key: 'param_value', value: '参数值' },
+          ],
+        },
+      },
+      {
+        name: '获取全局变量值',
+        caption: 'eo.globals.get',
+        value: 'eo.globals.get("param_key")',
+        note: {
+          code: 'eo.globals.set("param_key","param_value")',
+          desc: '设置全局变量',
+          input: [
+            { key: 'param_key', value: '参数名' },
+            { key: 'param_value', value: '参数值' },
+          ],
+          output: '全局变量值',
+        },
+      },
+      {
+        name: '删除全局变量',
+        caption: 'eo.globals.unset',
+        value: 'eo.globals.unset("param_key")',
+        note: {
+          code: 'eo.globals.unset("param_key")',
+          desc: '删除全局变量',
+          input: [{ key: 'param_key', value: '参数名' }],
+        },
+      },
+      {
+        name: '清空所有全局变量',
+        caption: 'eo.globals.clear',
+        value: 'eo.globals.clear()',
+        note: {
+          code: 'eo.globals.clear()',
+          desc: '清空所有全局变量',
+        },
+      },
+    ],
+  },
+];
+
+export const completions: Completion[] = TREE_DATA.flatMap((n) => n.children).reduce((prev, curr) => {
+  const { caption, value } = curr;
+  if (caption) {
+    prev.push({ caption, value });
+  }
+  return prev;
+}, []);