@lcap/nasl 3.2.0-beta.4 → 3.3.0-alpha

package/src/index.ts

@@ -2,7 +2,6 @@ export { EventEmitter, EventPayload, BaseNode } from './common';
 export * from './concepts';
 export { genBundleFiles, genFrontendBundleFiles, genMetaData, genReleaseBody, genPermissionData, genLogicAuthFlag } from './generator';
 export * from './translator';
-// export { default as diagnosticManager } from './manager/diagnostic';
 export { default as server, NaslServer } from './server';
 export * as genBlock from './templator';
 export * as utils from './utils';
@@ -11,5 +10,3 @@ export * from './eventBus';
 export * as breakpoint from './breakpoint';
 export { loadApp, loadAppSync, handleApp, batchAction, batchQuery, mountDatabaseTypes } from './service/storage/init';
 export { createService } from './service/creator';
-export * from './manager/stepRecorder';
-import './automate/engine';

package/src/manager/diagnostic.ts

@@ -1,5 +1,5 @@
-import { LogicItem, BaseNode } from '../concepts';
 import * as tsProtocol from 'typescript/lib/protocol';
+import { LogicItem, BaseNode } from '../concepts';
 
 // export interface TypeCheckNote {
 //     status: string,
@@ -8,22 +8,22 @@ import * as tsProtocol from 'typescript/lib/protocol';
 // }
 
 export interface Diagnostic {
-    // 唯一标识
-    id?: string;
-    // 严重等级
-    severity: string;
-    // 原来的诊断信息
-    originalDiagnostic?: tsProtocol.DiagnosticWithFileName;
-    // 底部展示的名称
-    message?: string;
-    // code的长度
-    code?: number;
-    // 节点本身
-    node?: BaseNode;
-    // 原始报错的text
-    text?: string;
-    // 用来展示一些问题对应的展示
-    titleTip?: string;
+  // 唯一标识
+  id?: string;
+  // 严重等级
+  severity: string;
+  // 原来的诊断信息
+  originalDiagnostic?: tsProtocol.DiagnosticWithFileName;
+  // 底部展示的名称
+  message?: string;
+  // code的长度
+  code?: number;
+  // 节点本身
+  node?: BaseNode;
+  // 原始报错的text
+  text?: string;
+  // 用来展示一些问题对应的展示
+  titleTip?: string;
 }
 
 // export interface TypeCheckAttribute {
@@ -36,82 +36,84 @@ export interface Diagnostic {
  * 文件粒度的 Diagnostic
  */
 export interface DiagnosticRecord {
-    id: string;
-    logicId?: string;
-    // typeCheckNote: TypeCheckNote,
-    filePath?: string;
-    node: BaseNode;
-    message: string;
-    syntaxDiagnostics: Array<Diagnostic>;
-    semanticDiagnostics: Array<Diagnostic>;
-    suggestionDiagnostics: Array<Diagnostic>;
-    // processComponentId?: string,
-    // attributes?: TypeCheckAttribute[],
+  id: string;
+  logicId?: string;
+  // typeCheckNote: TypeCheckNote,
+  filePath?: string;
+  node: BaseNode;
+  message: string;
+  syntaxDiagnostics: Array<Diagnostic>;
+  semanticDiagnostics: Array<Diagnostic>;
+  suggestionDiagnostics: Array<Diagnostic>;
+  // processComponentId?: string,
+  // attributes?: TypeCheckAttribute[],
 }
 
 export class DiagnosticManager {
-    records:Array<DiagnosticRecord> = [];
+  records: Array<DiagnosticRecord> = [];
 
-    push(record: DiagnosticRecord) {
-        const index = this.records.findIndex((item) => item.id === record.id);
-        if (index === -1) {
-            this.records.unshift(record);
-        } else {
-            this.records.splice(index, 1, record);
-        }
+  push(record: DiagnosticRecord) {
+    const index = this.records.findIndex((item) => item.id === record.id);
+    if (index === -1) {
+      this.records.unshift(record);
+    } else {
+      this.records.splice(index, 1, record);
+    }
 
-        // if(record.typeCheckNote?.message?.filter)
-        //     record.typeCheckNote.message = record.typeCheckNote.message.filter((item) => !!item);
+    // if(record.typeCheckNote?.message?.filter)
+    //     record.typeCheckNote.message = record.typeCheckNote.message.filter((item) => !!item);
 
-        // if(!record.typeCheckNote || record.typeCheckNote.status === 'success'
-        //     || (record.typeCheckNote && record.typeCheckNote.message && record.typeCheckNote.message.length === 0))
-        //     return;
-    }
+    // if(!record.typeCheckNote || record.typeCheckNote.status === 'success'
+    //     || (record.typeCheckNote && record.typeCheckNote.message && record.typeCheckNote.message.length === 0))
+    //     return;
+  }
 
-    getRecord(id: string) {
-        const index = this.records.findIndex((item) => item.id === id);
-        return this.records[index];
-    }
+  getRecord(id: string) {
+    const index = this.records.findIndex((item) => item.id === id);
+    return this.records[index];
+  }
 
-    deleteOwn(id: string) {
-        const index = this.records.findIndex((item) => item.id === id);
-        ~index && this.records.splice(index, 1);
-    }
+  deleteOwn(id: string) {
+    const index = this.records.findIndex((item) => item.id === id);
+    ~index && this.records.splice(index, 1);
+  }
 
-    delete(id: string) {
-        // const node = vertexsMap.get(id);
-        // this.deleteOwn(id);
-        // if (node) {
-        //     const children: LogicItem[] = [];
-        //     // [...logicItemKeyOfLogicItem, ...logicItemArrayKeyOfLogicItem].forEach((key) => {
-        //     //     const item = (node as LogicItem)[key as keyof LogicItem];
-        //     //     if (item)
-        //     //         children = children.concat(item);
-        //     // });
-        //     children.forEach((item) => {
-        //         this.delete(item.id);
-        //     });
-        // }
-    }
+  delete(id: string) {
+    // const node = vertexsMap.get(id);
+    // this.deleteOwn(id);
+    // if (node) {
+    //     const children: LogicItem[] = [];
+    //     // [...logicItemKeyOfLogicItem, ...logicItemArrayKeyOfLogicItem].forEach((key) => {
+    //     //     const item = (node as LogicItem)[key as keyof LogicItem];
+    //     //     if (item)
+    //     //         children = children.concat(item);
+    //     // });
+    //     children.forEach((item) => {
+    //         this.delete(item.id);
+    //     });
+    // }
+  }
 
-    clear() {
-        this.records.splice(0, this.records.length);
-    }
+  clear() {
+    this.records.splice(0, this.records.length);
+  }
 
-    pushAll(records: DiagnosticRecord[]) {
-        for (const record of records) {
-            this.push(record);
-        }
+  pushAll(records: DiagnosticRecord[]) {
+    for (const record of records) {
+      this.push(record);
     }
+  }
 
-    filterDiagnostics(showTSError?: boolean) {
-        const chineseRE = /[\u2E80-\uFE4F]/;
-        return [].concat(...this.records.map((record) => {
-            const diagnostics: Diagnostic[] = [].concat(record.semanticDiagnostics, record.suggestionDiagnostics);
-            // if (!showTSError) {
-            //     diagnostics = diagnostics.filter((diagnostic) => chineseRE.test(diagnostic.message));
-            // }
-            return diagnostics;
-        }));
-    }
+  filterDiagnostics(showTSError?: boolean) {
+    const chineseRE = /[\u2E80-\uFE4F]/;
+    return [].concat(
+      ...this.records.map((record) => {
+        const diagnostics: Diagnostic[] = [].concat(record.semanticDiagnostics, record.suggestionDiagnostics);
+        // if (!showTSError) {
+        //     diagnostics = diagnostics.filter((diagnostic) => chineseRE.test(diagnostic.message));
+        // }
+        return diagnostics;
+      })
+    );
+  }
 }

package/src/manager/stepRecorder.ts

@@ -1,112 +1,124 @@
 import format from 'date-fns/format';
 
 export const stepRecorder = {
-    count: 0,
-    initialized: false,
-    init() {
-        this.count = this.getKeys().length;
+  count: 0,
+  initialized: false,
+  init() {
+    this.count = this.getKeys().length;
 
-        const div = document.createElement('div');
-        div.id = 'recorder';
-        (div as any).style = 'position: fixed; top: -12px; right: 300px; z-index: 9999; background: #fffbd0; padding: 10px; border: 1px solid #ccc; border-radius: 5px;';
+    const div = document.createElement('div');
+    div.id = 'recorder';
+    (div as any).style =
+      'position: fixed; top: -12px; right: 300px; z-index: 9999; background: #fffbd0; padding: 10px; border: 1px solid #ccc; border-radius: 5px;';
 
-        div.innerHTML = `<div><span style="color: red; font-size: 17px; vertical-align: -2px;">◉</span> 正在录制中…</div>
+    div.innerHTML = `<div><span style="color: red; font-size: 17px; vertical-align: -2px;">◉</span> 正在录制中…</div>
 <div style="margin-top: -2px;">当前应用的操作步骤数：<span id="recorder-count">${this.count}</span></div>
 <div style="margin-top: 4px;">
     <button onclick="$data.nasl.stepRecorder.exportExcel()">下载数据</button>
 </div>
 `;
-        //     <button onclick="$data.nasl.stepRecorder.clear()">清除数据</button>
-        document.body.appendChild(div);
+    //     <button onclick="$data.nasl.stepRecorder.clear()">清除数据</button>
+    document.body.appendChild(div);
 
-        const script = document.createElement('script');
-        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/xlsx-populate/1.21.0/xlsx-populate.min.js';
-        document.body.appendChild(script);
+    const script = document.createElement('script');
+    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/xlsx-populate/1.21.0/xlsx-populate.min.js';
+    document.body.appendChild(script);
 
-        this.initialized = true;
+    this.initialized = true;
+  },
+  clear() {
+    // eslint-disable-next-line no-alert
+    const result = confirm('确定要清空所有当前应用的操作记录吗？');
+    if (result) {
+      this.getKeys().forEach((key) => localStorage.removeItem(key));
+      this.count = 0;
+      document.getElementById('recorder-count').innerText = String(this.count);
+    }
+  },
+  getAppName() {
+    return location.search.match(/appId=([^-]+)/)[1];
+  },
+  getKeys() {
+    return Object.keys(localStorage).filter((key) => key.startsWith(`录-${this.getAppName()}-`));
+  },
+  record(
+    actionMsg: string,
+    actionItem: {
+      action: 'undo' | 'redo';
     },
-    clear() {
-        // eslint-disable-next-line no-alert
-        const result = confirm('确定要清空所有当前应用的操作记录吗？');
-        if (result) {
-            this.getKeys().forEach((key) => localStorage.removeItem(key));
-            this.count = 0;
-            document.getElementById('recorder-count').innerText = String(this.count);
-        }
-    },
-    getAppName() {
-        return location.search.match(/appId=([^-]+)/)[1];
-    },
-    getKeys() {
-        return Object.keys(localStorage).filter((key) => key.startsWith(`录-${this.getAppName()}-`));
-    },
-    record(actionMsg: string, actionItem: {
-        action: 'undo' | 'redo',
-    }, actionList: Array<{ action: string, path: string, object: { concept: string, name: string } }>) {
-        try {
-            const actionItemDetail = actionList?.[0];
-            const timestamp = new Date().toJSON();
-            // eslint-disable-next-line function-paren-newline
-            localStorage.setItem(`录-${this.getAppName()}-${this.count + 1}`, JSON.stringify(
-                // {
-                //     timestamp,
-                //     message: actionMsg + (actionItem?.action ? ' ' + actionItem.action : ''),
-                //     detail: {
-                //         action: actionItemDetail?.action,
-                //         path: actionItemDetail?.path,
-                //         object: {
-                //             concept: actionItemDetail?.object?.concept,
-                //             name: actionItemDetail?.object?.name,
-                //         }
-                //     },
-                // }
-                [
-                    timestamp,
-                    actionMsg,
-                    ({ undo: '撤销', redo: '重做' })[actionItem?.action],
-                    actionItemDetail?.action,
-                    actionItemDetail?.path,
-                    actionItemDetail?.object?.concept,
-                    actionItemDetail?.object?.name,
-                ]));
-            this.count++;
-            document.getElementById('recorder-count').innerText = String(this.count);
-        } catch (e) {
-            console.log(e);
-        }
-    },
-    exportExcel() {
-        (window as any).XlsxPopulate.fromBlankAsync()
-            .then((workbook: any) => {
-                const sheet = workbook.sheet(0);
-                const firstRowData = ['操作时间', '操作信息', '是否为撤销重做', '（详情）action', '（详情）path', '（详情）concept', '（详情）name'];
-                sheet.range(1, 1, 1, firstRowData.length).value([firstRowData]);
-                sheet.row(1).style({
-                    bold: true,
-                    fill: 'E1EAFF',
-                }).height(22);
-                [30, 30, 30, 14, 30, 18, 18].forEach((width, index) => sheet.column(index + 1).width(width));
+    actionList: Array<{ action: string; path: string; object: { concept: string; name: string } }>
+  ) {
+    try {
+      const actionItemDetail = actionList?.[0];
+      const timestamp = new Date().toJSON();
+      // eslint-disable-next-line function-paren-newline
+      localStorage.setItem(
+        `录-${this.getAppName()}-${this.count + 1}`,
+        JSON.stringify(
+          // {
+          //     timestamp,
+          //     message: actionMsg + (actionItem?.action ? ' ' + actionItem.action : ''),
+          //     detail: {
+          //         action: actionItemDetail?.action,
+          //         path: actionItemDetail?.path,
+          //         object: {
+          //             concept: actionItemDetail?.object?.concept,
+          //             name: actionItemDetail?.object?.name,
+          //         }
+          //     },
+          // }
+          [
+            timestamp,
+            actionMsg,
+            { undo: '撤销', redo: '重做' }[actionItem?.action],
+            actionItemDetail?.action,
+            actionItemDetail?.path,
+            actionItemDetail?.object?.concept,
+            actionItemDetail?.object?.name,
+          ]
+        )
+      );
+      this.count++;
+      document.getElementById('recorder-count').innerText = String(this.count);
+    } catch (e) {
+      console.log(e);
+    }
+  },
+  exportExcel() {
+    (window as any).XlsxPopulate.fromBlankAsync().then((workbook: any) => {
+      const sheet = workbook.sheet(0);
+      const firstRowData = ['操作时间', '操作信息', '是否为撤销重做', '（详情）action', '（详情）path', '（详情）concept', '（详情）name'];
+      sheet.range(1, 1, 1, firstRowData.length).value([firstRowData]);
+      sheet
+        .row(1)
+        .style({
+          bold: true,
+          fill: 'E1EAFF',
+        })
+        .height(22);
+      [30, 30, 30, 14, 30, 18, 18].forEach((width, index) => sheet.column(index + 1).width(width));
 
-                this.getKeys().sort().forEach((key, index) => {
-                    const item = JSON.parse(localStorage[key]);
-                    item[0] = format(new Date(item[0]), 'yyyy-MM-dd HH:mm:ss');
-                    sheet.range(index + 2, 1, index + 2, firstRowData.length).value([item]);
-                });
+      this.getKeys()
+        .sort()
+        .forEach((key, index) => {
+          const item = JSON.parse(localStorage[key]);
+          item[0] = format(new Date(item[0]), 'yyyy-MM-dd HH:mm:ss');
+          sheet.range(index + 2, 1, index + 2, firstRowData.length).value([item]);
+        });
 
-                // Write to file.
-                return workbook.outputAsync()
-                    .then((blob: Blob) => {
-                        const url = window.URL.createObjectURL(blob);
-                        const a = document.createElement('a');
-                        document.body.appendChild(a);
-                        a.href = url;
-                        a.download = `操作步骤统计-${this.getAppName()}-${format(new Date(), 'yyyyMMddHHmmss')}.xlsx`;
-                        a.click();
-                        window.URL.revokeObjectURL(url);
-                        document.body.removeChild(a);
-                    });
-            });
-    },
+      // Write to file.
+      return workbook.outputAsync().then((blob: Blob) => {
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        document.body.appendChild(a);
+        a.href = url;
+        a.download = `操作步骤统计-${this.getAppName()}-${format(new Date(), 'yyyyMMddHHmmss')}.xlsx`;
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      });
+    });
+  },
 };
 
 export default stepRecorder;

package/src/natural/RequirementAnalyzer.ts

@@ -0,0 +1,208 @@
+import axios from '../service/storage';
+import knowledgeMap from './knowledgeMap';
+
+interface GPTAnalyzerReply {
+    thoughts: {
+        text: string,
+        reasoning: string,
+        plan: string,
+        criticism: string
+    },
+    executable: boolean,
+}
+
+export class RequirementAnalyzer {
+    messages: Array<{ role: 'system' | 'user' | 'assistant', content: string }> = [];
+    requirement: string;
+    context: any;
+
+    genPrompt() {
+        return `
+你是一个专业的低代码平台助手和需求分析师。
+
+现在用户的需求是：
+${this.requirement}
+
+## 示例
+你需要尽可能的帮助用户梳理成可执行的计划，汇总到"thoughts.plan"字段中。计划包含多个任务，每个任务下可能包含多个子任务（会缩进4个空格）。
+如果你认为需求比较明确并且该计划可执行，那么将 executable 设置为 true。
+如果你认为该计划还不完善，将 executable 设置为 false，继续询问用户的问题放入"thoughts.text"字段中。
+
+### 示例1
+当用户的需求非常明确时，你可以直接用 confirm 命令问用户是否确认执行；
+
+比如用户的需求是：“删除一个 Student 实体”，那么你可以生成执行计划：
+- 在默认数据源中，删除一个 Student 实体
+
+### 示例2
+当用户的需求非常明确时，你可以直接用 confirm 命令问用户是否确认执行；
+
+比如用户的需求是：“添加一个任务面板”，你可以分析：
+  面板为一个页面组件，这个组件下没有东西
+那么你可以生成执行计划：
+- 在当前选中节点中，添加一个任务面板组件
+
+### 示例3
+当用户的需求比较明确时，你可以列出你的计划，然后用 confirm 命令问用户是否确认执行；
+
+比如用户的需求是：“添加一个学生实体”，那么你可以生成执行计划：
+
+- 添加一个 Student 实体
+    - 添加一个 name 实体属性
+    - 添加一个 gender 实体属性
+    - 添加一个 age 实体属性
+
+### 示例4
+当用户的需求比较明确时，你可以列出你的计划，然后用 confirm 命令问用户是否确认执行；
+
+比如用户的需求是：“添加一个学生实体，以及添加一组管理页面”，那么你可以生成执行计划：
+
+- 添加一个 Student 实体
+    - 添加一个 name 实体属性
+    - 添加一个 gender 实体属性
+    - 添加一个 age 实体属性
+- 根据 Student 实体，在 dashboard 页面下，添加一组增删改查的管理页面
+
+### 示例5
+如果用户的需求是搭建xxx系统，一般是分解成两个任务：添加相关实体，然后再添加各实体的管理页面。
+
+比如用户的需求是：“我要搭建一个学生管理系统”，那么你可以生成执行计划：
+
+- 添加一个 Student 实体
+    - （你可以补充）
+- 添加一个 Teacher 实体
+    - （你可以补充）
+- 根据 Student 实体，在 dashboard 页面下，添加一组增删改查的管理页面
+- 根据 Teacher 实体，在 dashboard 页面下，添加一组增删改查的管理页面
+
+### 示例6
+
+当用户想要替换组件时，对应两步操作：替换组件+绑定变量到新组件；参考以下两个例子：
+
+- 比如用户的需求是 '将组件替换为五星评分组件'，那么你可以生成计划
+  - 将选中的组件替换为五星评分组件
+  - 将评分值绑定当前项的等级变量
+- 比如用户的需求是 '当前选中替换为标签，...'，那么你可以生成计划
+  - 将选中的组件替换为标签组件
+    - 设置文本值为变量 supplier.status 转换的 text
+    - 设置背景颜色为启用时绿色、禁用时灰色
+    - 设置字体颜色为启用时白色、禁用时黑色
+
+### 示例7
+
+当用户想要新增按钮组件时，按钮组件分为主要按钮和图标按钮，明确用户想要添加的是哪一种：
+- 主要按钮只设置文本
+- 图标按钮可设置图标+文本，也可仅设置图标
+  - 导出图标名称为 upload
+
+例如：
+- 用户需求为'添加一个按钮，图标为刷新，点击后刷新表格', 那么你可以生成计划
+  - 在当前选中组件中，添加一个纯图标按钮组件
+    - 设置图标为刷新
+  - 为按钮添加点击事件
+    - 在点击事件中，执行刷新表格 tabView 的操作
+- 用户需求为'添加一个按钮，按钮文本为“导出 excel”，并加一个图标。点击后能将表格导出 excel'，那么你可以生成计划
+  - 在选中的组件中添加一个按钮组件
+    - 设置按钮图标为 upload
+    - 设置按钮文本为 '导出 excel'
+  - 为按钮添加点击事件
+    - 调用 tabView 的导出 excel 方法
+
+${knowledgeMap.index}
+
+- 当前低代码平台暂时不支持实体之间的关联关系，不需要询问或处理关联关系的事情。
+- 添加一组增删改查的管理页面作为一个任务，不需要展开子任务。
+- 你需要将plan尽可能的概括，使用'总分'的格式，不要破坏任务的连贯性
+- 替换组件和绑定变量的操作需要分步执行
+- 涉及到组件替换、属性、逻辑的操作，直接执行即可
+
+## 用户上下文
+
+${this.context.selectedNode ? '用户选中了一个 name 为' + this.context.selectedNode.name + '的 ' + this.context.selectedNode.concept : '用户未选择任何节点'}
+
+## 注意
+
+1. 尽量帮用户想象一些细节，再问用户是否确认执行
+1. 在后续的所有回答中，你必须按照 以下指定的JSON 格式回复！格式如下：
+
+{
+    "thoughts": {
+        "text": "thought",
+        "reasoning": "reasoning",
+        "plan": "- 任务1\\n- 任务2\\n    - 子任务1\\n    - 子任务2\\n    - 子任务3\\n- 任务3",
+        "criticism": "constructive self-criticism"
+    },
+    "executable": true
+}
+
+## 要求
+1. 按照上述格式，内容用中文作答，把你想问用户的内容以问题的形式放在"thoughts.text"字段中
+2. 当用户已经选中了一个 View 时，默认用户决定在选中的 View 操作，不要再询问用户要在哪个页面操作！
+3. 确保你回复的整体内容可以被 JavaScript 的 JSON.parse 解析！
+`;
+    }
+
+    async chatWithGPT() {
+        const res = await axios.post('/api/gpt/chatGPT', {
+            messages: this.messages,
+        });
+        const result = res.data.result;
+        if (result) {
+            const answer = result.choices[0]?.message.content.trim() + '\n';
+            this.messages.push({
+                role: 'assistant',
+                content: answer,
+            });
+            console.log(result.usage);
+            return answer;
+        } else {
+            return JSON.stringify({ status: 'error' });
+        }
+    }
+
+    async chatWithGPTAndParseJSON() {
+        const answer = await this.chatWithGPT();
+        const json: GPTAnalyzerReply = JSON.parse(answer);
+        console.log('需求分析器-回复：' + JSON.stringify(json, null, 4));
+        return json;
+    }
+
+    async next(input: string | boolean) {
+        if (!this.messages.length) {
+            const prompt = this.genPrompt();
+            console.log(prompt);
+            this.messages = [{
+                role: 'system',
+                content: prompt,
+            }];
+        } else if (typeof input === 'string') {
+            this.messages.push({
+                role: 'user',
+                content: input,
+            });
+        } else {
+            throw new Error();
+        }
+
+        return this.chatWithGPTAndParseJSON();
+    }
+}
+
+export default RequirementAnalyzer;
+
+// 你可以使用的命令，无需参数
+// 1. 询问：'ask'
+// 2. 确认是否要执行：'confirm'，
+
+// ### 示例四
+
+// 当用户的需求不明确时，你可以大致列出你不完善的计划，将 executable 设置为 false。
+
+// 比如用户的需求是：“我要一个实体”，那么你可以生成执行计划：
+
+// - 添加一个客户实体
+// - 添加一组客户的增删改查的管理页面
+
+// 以及如下问题
+// - 只需要添加一个客户实体吗？
+// - 客户管理页面需要添加在哪个页面下？