@lcap/nasl 3.3.0-beta.0 → 3.4.0-alpha.1

package/src/concepts/View__.ts

@@ -1,7 +1,8 @@
+import { v4 as uuidv4 } from 'uuid';
 import Namespace from './Namespace__';
 import { TranslatorState, shiftState, withSourceMap, indent, createCompilerState } from '../translator';
 import translator from '../bak/translator';
-import { ElementToVueOptions } from './ViewElement__';
+import ViewElement, { ElementToVueOptions } from './ViewElement__';
 import { Structure } from './Structure__';
 import MemberExpression from './MemberExpression__';
 import Identifier from './Identifier__';
@@ -11,17 +12,16 @@ import BatchAssignment from './BatchAssignment__';
 import CallInterface from './CallInterface__';
 import CallLogic from './CallLogic__';
 
-//================================================================================
+//= ===============================================================================
 // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
 // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
-//================================================================================
+//= ===============================================================================
 import { EventPayload, Params } from '../common/EventEmitter';
-import { concept, excludedInJSON, property, className } from '../decorators';
+import { concept, excludedInJSON, property } from '../decorators';
 
 import * as utils from '../utils';
-import { v4 as uuidv4 } from 'uuid';
 import BaseNode from '../common/BaseNode';
-import ViewElement from './ViewElement__';
+import classMap from '../common/classMap';
 import Param from './Param__';
 import Variable from './Variable__';
 import Logic from './Logic__';
@@ -29,99 +29,84 @@ import BindEvent from './BindEvent__';
 import Module from './Module__';
 import Frontend from './Frontend__';
 import App from './App__';
+import TypeAnnotation from './TypeAnnotation__';
 
 /**
  * 页面
  */
-@className
 @concept('页面')
-// @ts-ignore
 export class View extends BaseNode {
-  /** 类名 */
-  static readonly ConceptName = 'View';
-
   /**
    * 产品概念
    */
-  // @ts-ignore
-  readonly concept!: 'View';
+  @property()
+  concept: 'View' = 'View';
 
   /**
    * 页面模板 Id
    */
   @property()
-  // @ts-ignore
-  pageTemplateId!: string;
+  pageTemplateId: string = undefined;
 
   /**
    * 页面名称
    */
   @property()
-  // @ts-ignore
-  name!: string;
+  name: string = undefined;
 
   /**
    * 唯一标识
    */
   @property()
-  // @ts-ignore
-  uuid!: string;
+  uuid: string = undefined;
 
   /**
    * 页面标题
    */
   @property()
-  // @ts-ignore
-  title!: string;
+  title: string = undefined;
 
   /**
    * 面包屑
    */
   @property()
-  // @ts-ignore
-  crumb!: string;
+  crumb: string = undefined;
 
   /**
    * 权限控制
    */
   @property()
-  // @ts-ignore
-  auth!: boolean;
+  auth: boolean = undefined;
 
   /**
    * 权限资源描述
    */
   @property()
-  // @ts-ignore
-  authDescription!: string;
+  authDescription: string = undefined;
 
   /**
    * 是否是默认跳转的页面
    */
   @property()
-  // @ts-ignore
-  isIndex!: boolean;
+  isIndex: boolean = undefined;
 
   /**
    * 未解析的模板代码
    */
   @property()
-  // @ts-ignore
-  template!: string;
+  template: string = undefined;
 
   /**
    * 未解析的逻辑代码
    */
   @property()
-  // @ts-ignore
-  script!: string;
+  script: string = undefined;
 
   /**
    * 未解析的样式代码
    */
   @property()
-  // @ts-ignore
-  style!: string;
+  style: string = undefined;
 
   /**
    * 页面元素列表
@@ -171,12 +156,14 @@ export class View extends BaseNode {
   get module() {
     return this.getAncestor('Module') as Module;
   }
+
   /**
    * 祖先 App
    */
   get app() {
     return this.getAncestor('App') as App;
   }
+
   /**
    * 祖先 Frontend
    */
@@ -188,11 +175,16 @@ export class View extends BaseNode {
    * @param source 需要合并的部分参数
    */
   constructor(source?: Partial<View>) {
-    source = Object.assign({}, View.getDefaultOptions(), source);
+    // @ts-ignore
+    source = { ...View.getDefaultOptions(), ...source };
     super(source);
     super.subConstructor(source);
   }
 
+  getClassName() {
+    return 'View';
+  }
+
   static from(source: any, parentNode?: any, parentKey?: string): View {
     return super.from(source, parentNode, parentKey) as View;
   }
@@ -208,6 +200,7 @@ export class View extends BaseNode {
     }
     return params;
   }
+
   /**
    * 设置页面名称
    */
@@ -313,7 +306,7 @@ export class View extends BaseNode {
           name: this.getViewElementUniqueName(),
         },
         this,
-        'elements',
+        'elements'
       );
     } else if (typeof options === 'string') {
       viewElement = ViewElement.from(
@@ -322,7 +315,7 @@ export class View extends BaseNode {
           name: options,
         },
         this,
-        'elements',
+        'elements'
       );
     } else if (options instanceof ViewElement) {
       options.ensureDelete(); // 同一实例不支持多处存在
@@ -335,7 +328,7 @@ export class View extends BaseNode {
           ...options,
         },
         this,
-        'elements',
+        'elements'
       );
     }
     this.elements.splice(index, 0, viewElement);
@@ -462,7 +455,7 @@ export class View extends BaseNode {
           name: this.getParamUniqueName(),
         },
         this,
-        'params',
+        'params'
       );
     } else if (typeof options === 'string') {
       param = Param.from(
@@ -471,7 +464,7 @@ export class View extends BaseNode {
           name: options,
         },
         this,
-        'params',
+        'params'
       );
     } else if (options instanceof Param) {
       options.ensureDelete(); // 同一实例不支持多处存在
@@ -484,7 +477,7 @@ export class View extends BaseNode {
           ...options,
         },
         this,
-        'params',
+        'params'
       );
     }
     this.params.splice(index, 0, param);
@@ -611,7 +604,7 @@ export class View extends BaseNode {
           name: this.getVariableUniqueName(),
         },
         this,
-        'variables',
+        'variables'
       );
     } else if (typeof options === 'string') {
       variable = Variable.from(
@@ -620,7 +613,7 @@ export class View extends BaseNode {
           name: options,
         },
         this,
-        'variables',
+        'variables'
       );
     } else if (options instanceof Variable) {
       options.ensureDelete(); // 同一实例不支持多处存在
@@ -633,7 +626,7 @@ export class View extends BaseNode {
           ...options,
         },
         this,
-        'variables',
+        'variables'
       );
     }
     this.variables.splice(index, 0, variable);
@@ -760,7 +753,7 @@ export class View extends BaseNode {
           name: this.getLogicUniqueName(),
         },
         this,
-        'logics',
+        'logics'
       );
     } else if (typeof options === 'string') {
       logic = Logic.from(
@@ -769,7 +762,7 @@ export class View extends BaseNode {
           name: options,
         },
         this,
-        'logics',
+        'logics'
       );
     } else if (options instanceof Logic) {
       options.ensureDelete(); // 同一实例不支持多处存在
@@ -782,7 +775,7 @@ export class View extends BaseNode {
           ...options,
         },
         this,
-        'logics',
+        'logics'
       );
     }
     this.logics.splice(index, 0, logic);
@@ -877,6 +870,7 @@ export class View extends BaseNode {
     const excludedSet = new Set(excludedList);
     return ((this.bindEvents as BindEvent[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
   }
+
   getBindEventUniqueName(name = 'bindEvent1') {
     return utils.unique(name, this.getBindEventExistingNames(), undefined, false);
   }
@@ -913,7 +907,7 @@ export class View extends BaseNode {
           name: this.getBindEventUniqueName(),
         },
         this,
-        'bindEvents',
+        'bindEvents'
       );
     } else if (typeof options === 'string') {
       bindEvent = BindEvent.from(
@@ -922,7 +916,7 @@ export class View extends BaseNode {
           name: options,
         },
         this,
-        'bindEvents',
+        'bindEvents'
       );
     } else if (options instanceof BindEvent) {
       options.ensureDelete(); // 同一实例不支持多处存在
@@ -935,7 +929,7 @@ export class View extends BaseNode {
           ...options,
         },
         this,
-        'bindEvents',
+        'bindEvents'
       );
     }
     this.bindEvents.splice(index, 0, bindEvent);
@@ -1030,6 +1024,7 @@ export class View extends BaseNode {
     const excludedSet = new Set(excludedList);
     return ((this.children as View[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
   }
+
   getViewUniqueName(name = 'view1') {
     return utils.unique(name, this.getViewExistingNames(), undefined, false);
   }
@@ -1066,7 +1061,7 @@ export class View extends BaseNode {
           name: this.getViewUniqueName(),
         },
         this,
-        'children',
+        'children'
       );
     } else if (typeof options === 'string') {
       view = View.from(
@@ -1075,7 +1070,7 @@ export class View extends BaseNode {
           name: options,
         },
         this,
-        'children',
+        'children'
       );
     } else if (options instanceof View) {
       options.ensureDelete(); // 同一实例不支持多处存在
@@ -1088,7 +1083,7 @@ export class View extends BaseNode {
           ...options,
         },
         this,
-        'children',
+        'children'
       );
     }
     this.children.splice(index, 0, view);
@@ -1196,7 +1191,7 @@ export class View extends BaseNode {
     if (typeof options === 'string') {
       viewElement = (this.elements as ViewElement[]).find((item) => item.name === options);
       if (!viewElement) {
-        throw new Error('找不到页面元素 ' + options);
+        throw new Error(`找不到页面元素 ${options}`);
       }
     } else {
       viewElement = options;
@@ -1205,7 +1200,7 @@ export class View extends BaseNode {
   }
 
   __removeViewElement(viewElement: ViewElement) {
-    const parentKey = viewElement.parentKey;
+    const { parentKey } = viewElement;
     const params: Params = {
       parentNode: this,
       parentKey,
@@ -1244,7 +1239,7 @@ export class View extends BaseNode {
     if (typeof options === 'string') {
       param = (this.params as Param[]).find((item) => item.name === options);
       if (!param) {
-        throw new Error('找不到输入参数 ' + options);
+        throw new Error(`找不到输入参数 ${options}`);
       }
     } else {
       param = options;
@@ -1253,7 +1248,7 @@ export class View extends BaseNode {
   }
 
   __removeParam(param: Param) {
-    const parentKey = param.parentKey;
+    const { parentKey } = param;
     const params: Params = {
       parentNode: this,
       parentKey,
@@ -1292,7 +1287,7 @@ export class View extends BaseNode {
     if (typeof options === 'string') {
       variable = (this.variables as Variable[]).find((item) => item.name === options);
       if (!variable) {
-        throw new Error('找不到变量 ' + options);
+        throw new Error(`找不到变量 ${options}`);
       }
     } else {
       variable = options;
@@ -1301,7 +1296,7 @@ export class View extends BaseNode {
   }
 
   __removeVariable(variable: Variable) {
-    const parentKey = variable.parentKey;
+    const { parentKey } = variable;
     const params: Params = {
       parentNode: this,
       parentKey,
@@ -1340,7 +1335,7 @@ export class View extends BaseNode {
     if (typeof options === 'string') {
       logic = (this.logics as Logic[]).find((item) => item.name === options);
       if (!logic) {
-        throw new Error('找不到逻辑 ' + options);
+        throw new Error(`找不到逻辑 ${options}`);
       }
     } else {
       logic = options;
@@ -1349,7 +1344,7 @@ export class View extends BaseNode {
   }
 
   __removeLogic(logic: Logic) {
-    const parentKey = logic.parentKey;
+    const { parentKey } = logic;
     const params: Params = {
       parentNode: this,
       parentKey,
@@ -1388,7 +1383,7 @@ export class View extends BaseNode {
     if (typeof options === 'string') {
       bindEvent = (this.bindEvents as BindEvent[]).find((item) => item.name === options);
       if (!bindEvent) {
-        throw new Error('找不到元素绑定事件 ' + options);
+        throw new Error(`找不到元素绑定事件 ${options}`);
       }
     } else {
       bindEvent = options;
@@ -1397,7 +1392,7 @@ export class View extends BaseNode {
   }
 
   __removeBindEvent(bindEvent: BindEvent) {
-    const parentKey = bindEvent.parentKey;
+    const { parentKey } = bindEvent;
     const params: Params = {
       parentNode: this,
       parentKey,
@@ -1436,7 +1431,7 @@ export class View extends BaseNode {
     if (typeof options === 'string') {
       view = (this.children as View[]).find((item) => item.name === options);
       if (!view) {
-        throw new Error('找不到页面 ' + options);
+        throw new Error(`找不到页面 ${options}`);
       }
     } else {
       view = options;
@@ -1445,7 +1440,7 @@ export class View extends BaseNode {
   }
 
   __removeView(view: View) {
-    const parentKey = view.parentKey;
+    const { parentKey } = view;
     const params: Params = {
       parentNode: this,
       parentKey,
@@ -1467,10 +1462,10 @@ export class View extends BaseNode {
     return params;
   }
 
-  //================================================================================
+  //= ===============================================================================
   // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
   // 自动生成的代码已结束。下面可以手动编写。
-  //================================================================================
+  //= ===============================================================================
 
   /* 主页面有没有权限 */
   get parentAuth() {
@@ -1511,7 +1506,7 @@ export class View extends BaseNode {
         },
         {
           node: element,
-        },
+        }
       );
     });
   }
@@ -1586,7 +1581,7 @@ export class View extends BaseNode {
             ...logicOption,
           },
           this.rootNode,
-          'logics',
+          'logics'
         );
         (this.rootNode as App).addLogic(logic);
       });
@@ -1600,7 +1595,7 @@ export class View extends BaseNode {
             ...structureOption,
           },
           this.rootNode,
-          'structures',
+          'structures'
         );
         (this.rootNode as App).addStructure(structure);
       });
@@ -1614,7 +1609,7 @@ export class View extends BaseNode {
             ...paramsOption,
           },
           this,
-          'params',
+          'params'
         );
         this._addParam(param);
         param.addParamsPrepare();
@@ -1628,7 +1623,7 @@ export class View extends BaseNode {
             ...variableOption,
           },
           this,
-          'variables',
+          'variables'
         );
         this.addVariable(variable);
       });
@@ -1665,7 +1660,7 @@ export class View extends BaseNode {
               logics: [newLogic],
             },
             this,
-            'events',
+            'events'
           );
           this.addBindEvent(event);
         } else {
@@ -1736,8 +1731,8 @@ export class View extends BaseNode {
    * @TODO 这一版先做成 componentOptions 式的，后面再美化
    */
   genScript() {
-    const componentList: Array<ViewElement> = [];
-    this.elementsAttrs(this.elements, componentList);
+    const componentList: Array<ViewElement> = []
+    this.elementsAttrs(this.elements, componentList)
     const definition = {
       params: this.params,
       variables: this.variables,
@@ -1765,15 +1760,15 @@ export class View extends BaseNode {
             methods: {
                 async onKeyDown(e) {
                     ${this.bindEvents
-                      .filter((event) => ['keydown'].includes(event.name))
-                      .map((event) => `await this.${event.view.name}_${event.name}(e);`)
-                      .join('\n')}
+        .filter((event) => ['keydown'].includes(event.name))
+        .map((event) => `await this.${event.view.name}_${event.name}(e);`)
+        .join('\n')}
                 },
                 async onKeyUp(e) {
                     ${this.bindEvents
-                      .filter((event) => ['keyup'].includes(event.name))
-                      .map((event) => `await this.${event.view.name}_${event.name}(e);`)
-                      .join('\n')}
+        .filter((event) => ['keyup'].includes(event.name))
+        .map((event) => `await this.${event.view.name}_${event.name}(e);`)
+        .join('\n')}
                 }
             }
         };`;
@@ -1900,22 +1895,23 @@ export class View extends BaseNode {
       });
     }
   }
+
   // 获取当前element，铺平
   elementsAttrs(elements: Array<ViewElement>, componentList: Array<ViewElement>) {
-    if (elements) {
-      elements.forEach((item: ViewElement) => {
-        if (PAGE_COMPONENT_INCLUDE_TAG_MAP?.[item.tag]) {
-          componentList.push(item);
-        }
-        if (item.children.length > 0) {
-          this.elementsAttrs(item.children, componentList);
-        }
-      });
-    }
+      if (elements) {
+          elements.forEach((item: ViewElement) => {
+              if (PAGE_COMPONENT_INCLUDE_TAG_MAP?.[item.tag]) {
+                  componentList.push(item)
+              }
+              if (item.children.length > 0) {
+                  this.elementsAttrs(item.children, componentList)
+              }
+          });
+      }
   }
 
   @withSourceMap()
-  toEmbeddedTS(state?: TranslatorState): string {
+  toEmbeddedTS(state = createCompilerState()): string {
     function chineseTsName(name: string) {
       let tsName = name;
       // 匹配所有特殊字符都转为_
@@ -1947,9 +1943,7 @@ export class View extends BaseNode {
         // 子页面内部逻辑过滤
         if (el.view !== this) return;
         if (el instanceof Assignment) {
-          const advanceVar = this.variables?.find(
-            (variable) => !variable.typeAnnotation && el.left?.name === variable.name,
-          );
+          const advanceVar = this.variables?.find((variable) => !variable.typeAnnotation && el.left?.name === variable.name);
           if (advanceVar && !advanceMap.get(advanceVar)) {
             advanceMap.set(advanceVar, el);
           }
@@ -1959,9 +1953,7 @@ export class View extends BaseNode {
               leftIndex.length === 1
                 ? el.left?.expression?.toEmbeddedTS(shiftState(state, code, { inline: true }))
                 : el.left?.members[leftIndex[1]]?.toEmbeddedTS(shiftState(state, code, { inline: true }));
-            const advanceVar = this.variables?.find(
-              (variable) => !variable.typeAnnotation && leftCode === variable.name,
-            );
+            const advanceVar = this.variables?.find((variable) => !variable.typeAnnotation && leftCode === variable.name);
             if (advanceVar && !advanceMap.get(advanceVar)) {
               advanceMap.set(advanceVar, el);
             }
@@ -1998,9 +1990,7 @@ export class View extends BaseNode {
               : assignment.left.members[leftIndex[1]]?.toEmbeddedTS(shiftState(state, code, { inline: true }));
           if (leftCode === variable.name) {
             const rightNode =
-              rightIndex.length === 1
-                ? assignment.rights[rightIndex[0]]?.expression
-                : assignment.rights[rightIndex[0]]?.members[rightIndex[1]];
+              rightIndex.length === 1 ? assignment.rights[rightIndex[0]]?.expression : assignment.rights[rightIndex[0]]?.members[rightIndex[1]];
             const rightCode = rightNode?.toEmbeddedTS(shiftState(state, code, { inline: true }));
             code += this.getRightCode(rightCode, assignment, rightNode);
           }
@@ -2017,9 +2007,7 @@ export class View extends BaseNode {
           rightCode += 'new ';
         }
         rightCode +=
-          assignment.right && assignment.right.toEmbeddedTS
-            ? assignment.right.toEmbeddedTS(shiftState(state, code, { inline: true }))
-            : '__RIGHT__';
+          assignment.right && assignment.right.toEmbeddedTS ? assignment.right.toEmbeddedTS(shiftState(state, code, { inline: true })) : '__RIGHT__';
         code += this.getRightCode(rightCode, assignment, assignment.right);
       }
       code += ';\n';
@@ -2032,39 +2020,32 @@ export class View extends BaseNode {
       code += element.toEmbeddedTSDefinition(
         shiftState(state, code, {
           tabSize: (state?.tabSize || 0) + 1,
-        }),
+        })
       );
     });
     code += `${indent((state?.tabSize || 0) + 1)}}\n`;
     code += `let __elements: __elements;\n`;
 
     if (Array.isArray(this.elements)) {
-      code += indent((state?.tabSize || 0) + 1) + 'interface ';
+      code += `${indent((state?.tabSize || 0) + 1)  }interface `;
       code += `__elements_completionProperty {\n`;
-      const componentList: Array<ViewElement> = [];
-      this.elementsAttrs(this.elements, componentList);
-      const variableList: string[] = [];
-      this.elements.forEach((item) => {
+      const componentList: Array<ViewElement> = []
+      this.elementsAttrs(this.elements, componentList)
+      const variableList: string[] = []
+      componentList.forEach((item) => {
         code += item.toEmbeddedTSVariableDefinition(shiftState(state, code, { inline: true }), variableList);
-      });
-      code += indent((state?.tabSize || 0) + 1) + `}\n`;
-      code += indent((state?.tabSize || 0) + 1);
-      code += `let __elements_completionProperty: __elements_completionProperty;\n`;
-
+        code += ';\n';
+      })
+      code += `${indent((state?.tabSize || 0) + 1)  }}\n`;
       code += indent((state?.tabSize || 0) + 1);
-      code += `let __elements_variable_function = {\n`;
-      this.elements.forEach((item) => {
-        code += item.toEmbeddedTSVariableFunctionDefinition(shiftState(state, code, { inline: true }));
-      });
-      code += indent((state?.tabSize || 0) + 1) + `}\n`;
-
+      code += `let __elements_completionProperty: __elements_completionProperty;\n`
       code += indent((state?.tabSize || 0) + 1);
       code += `let __elements_stashFunctionVariable = {\n`;
       variableList.forEach((item) => {
         code += indent((state?.tabSize || 0) + 2);
-        code += `${item}`;
-      });
-      code += indent((state?.tabSize || 0) + 1) + `}\n`;
+        code += `${item}`
+      })
+      code += `${indent((state?.tabSize || 0) + 1)  }}\n`;
     }
     // 逻辑
     if (Array.isArray(this.logics) && this.logics.length) {
@@ -2074,7 +2055,7 @@ export class View extends BaseNode {
           shiftState(state, code, {
             tabSize: (state?.tabSize || 0) + 2,
           }),
-          'noExport',
+          'noExport'
         );
         code += '\n';
       });
@@ -2087,7 +2068,7 @@ export class View extends BaseNode {
           shiftState(state, code, {
             tabSize: state?.tabSize || 0,
           }),
-          true,
+          true
         );
         code += '\n';
       });
@@ -2106,7 +2087,7 @@ export class View extends BaseNode {
         code += element.toEmbeddedTS(
           shiftState(state, code, {
             tabSize: (state?.tabSize || 0) + 3,
-          }),
+          })
         );
         code += '\n';
       });
@@ -2131,6 +2112,103 @@ export class View extends BaseNode {
     return code;
   }
 
+  @withSourceMap()
+  toNaturalTS(state = createCompilerState(), currentNode?: BaseNode, declaration?: boolean): string {
+    // const isCurrentInThisView = currentNode?.getAncestor('View') === this;
+
+    if (declaration) {
+      let code = `
+${indent(state.tabSize)}export function ${this.tsName}_view`;
+      // 有参数长度
+      code += '(';
+      this.params.forEach((param, index) => {
+        code += param.toNaturalTS(shiftState(state, code, { inline: true }));
+        if (index !== this.params.length - 1)
+          code += ', ';
+      });
+      code += ') {';
+        this.children.forEach((child, index) => {
+          code += child.toNaturalTS(shiftState(state, code, { tabSize: state.tabSize + 1 }), currentNode, declaration);
+        });
+      code += `${indent(state.tabSize)}}`;
+      return code;
+    }
+
+    let code = `${indent(state.tabSize)}/**
+${indent(state.tabSize)} * 当前页面
+${indent(state.tabSize)} */
+${indent(state.tabSize)}export function ${this.tsName}_view`;
+    const advanceMap: Map<Variable, Assignment | BatchAssignment> = new Map();
+    this.traverseChildren((el) => {
+      if (el && (el instanceof BatchAssignment || (el instanceof Assignment && el.left?.name))) {
+        // 子页面内部逻辑过滤
+        if (el.view !== this)
+          return;
+        const jsCode = el.toJS();
+        const advanceVar = this.variables?.find((variable) =>
+          !variable.typeAnnotation && jsCode.includes(`this.${variable.name} = `));
+        if (advanceVar && !advanceMap.get(advanceVar)) {
+          advanceMap.set(advanceVar, el);
+        }
+      }
+    });
+
+    // 有参数长度
+    code += '(';
+    this.params.forEach((param, index) => {
+      code += param.toNaturalTS(shiftState(state, code, { inline: true }));
+      if (index !== this.params.length - 1)
+        code += ', ';
+    });
+    code += ')';
+
+    code += ' {\n';
+
+    this.variables.forEach((variable) => {
+      if (!advanceMap.get(variable)) {
+        code += `${indent(state.tabSize + 1)}let `;
+        code += variable.toNaturalTS(shiftState(state, code, { inline: true }));
+        code += ';\n';
+      }
+    });
+    code += `\n${indent(state.tabSize + 1)}const $refs = {\n`;
+    // 生成所有的name和类型定义
+    this.elements.forEach((element) => {
+      code += element.toNaturalTSDefinition(shiftState(state, code, {
+        tabSize: state.tabSize + 1,
+      }));
+    });
+    code += `${indent(state.tabSize + 1)}}\n`;
+    // 逻辑
+    if (currentNode?.concept === 'Logic') {
+      code += '\n';
+      this.logics.forEach((logic) => {
+        if (logic === currentNode)
+          return;
+        code += logic.toNaturalTS(shiftState(state, code, {
+          tabSize: state.tabSize + 1,
+        }), 'noExport', undefined, currentNode);
+        code += '\n';
+      });
+      // 包含了事件逻辑的处理
+      code += (currentNode as Logic).toNaturalTS(shiftState(state, code, {
+        tabSize: state.tabSize + 1,
+      }), 'noExport', undefined, currentNode);
+      code += '\n';
+    } else if (this.logics.length) {
+      code += '\n';
+      this.logics.forEach((logic) => {
+        code += logic.toNaturalTS(shiftState(state, code, {
+          tabSize: state.tabSize + 1,
+        }), 'noExport', undefined, currentNode);
+        code += '\n';
+      });
+    }
+    code += `${indent(state.tabSize)}}\n`;
+
+    return code;
+  }
+
   toEmbeddedTSFile() {
     let code = `namespace ${this.getTsNamespace()} {\n`;
     const state = createCompilerState(code, {
@@ -2210,7 +2288,7 @@ export class View extends BaseNode {
                 typeAnnotation: null,
               },
               logic,
-              'virtualParams',
+              'virtualParams'
             ),
           ];
         }
@@ -2232,7 +2310,7 @@ export class View extends BaseNode {
             });
           });
         },
-        { node: item },
+        { node: item }
       );
     });
     if (logics.length) {
@@ -2262,7 +2340,7 @@ export class View extends BaseNode {
             bindEvents.push(bindEvent);
           });
         },
-        { node: item },
+        { node: item }
       );
     });
     return bindEvents;
@@ -2275,20 +2353,15 @@ export class View extends BaseNode {
       utils.traverse(
         (current) => {
           const { node } = current as any;
-          const playgroundNodePath = (node?.nodePath || '').split('.').find((nodePathNode: string) => {
-            return nodePathNode.match(/(.+)\[.+\]/)?.[1] === 'playground';
-          });
-          if (!playgroundNodePath) {
-            //// 处理三种情况
-            //if (
-            //    ['BindAttribute', 'BindDirective', 'BindStyle'].includes(node.concept)
-            //    && node.needReplaceWithIdentifier
-            //) {
-            //    bindExpressions.push(node);
-            //}
-            if (node?.concept === 'Match') {
-              bindExpressions.push(node as Match);
-            }
+          /// / 处理三种情况
+          // if (
+          //    ['BindAttribute', 'BindDirective', 'BindStyle'].includes(node.concept)
+          //    && node.needReplaceWithIdentifier
+          // ) {
+          //    bindExpressions.push(node);
+          // }
+          if (node.concept === 'Match') {
+            bindExpressions.push(node as Match);
           }
         },
         {
@@ -2309,7 +2382,7 @@ export class View extends BaseNode {
             '_collectingList',
             '_historyList',
           ]),
-        },
+        }
       );
     });
     return bindExpressions;
@@ -2335,7 +2408,7 @@ export class View extends BaseNode {
       (current) => {
         if (current.node.name === name) return current.node;
       },
-      { node: this },
+      { node: this }
     );
   }
 
@@ -2393,7 +2466,7 @@ export class View extends BaseNode {
 
   getRightCode(code: string, assignment: Assignment | BatchAssignment, rightNode: any): string {
     code = code.replaceAll('\n', ' ');
-    const logic = assignment.logic;
+    const { logic } = assignment;
     const logicRtn = logic?.returns[0];
     // 调用接口，参数替换成 null
     if (rightNode instanceof CallInterface) {
@@ -2429,9 +2502,7 @@ export class View extends BaseNode {
     }
 
     // 直接赋值 logic 内局部变量、输入参数直接提示系统无法推断类型
-    const useLogicVar =
-      logic.params.find((param) => code.includes(param.name)) ||
-      logic.variables.find((variable) => code.includes(variable.name));
+    const useLogicVar = logic.params.find((param) => code.includes(param.name)) || logic.variables.find((variable) => code.includes(variable.name));
     return useLogicVar ? 'null' : code;
   }
 
@@ -2457,11 +2528,7 @@ export class View extends BaseNode {
     let element: BaseNode = logic;
     const viewElements: ViewElement[] = [];
     while (element) {
-      if (
-        element.concept &&
-        element.concept === 'ViewElement' &&
-        (element as ViewElement).bindAttrs.find((bAttr) => bAttr.name === 'data-source')
-      ) {
+      if (element.concept && element.concept === 'ViewElement' && (element as ViewElement).bindAttrs.find((bAttr) => bAttr.name === 'data-source')) {
         viewElements.push(element as ViewElement);
       }
       element = element.parentNode;
@@ -2481,16 +2548,10 @@ export class View extends BaseNode {
           const dataSourceTS = dataSource.expression.toEmbeddedTS();
           const logic = view.logics.find((logic) => logic.name === dataSourceTS);
           if (logic) {
-            code = code.replaceAll(
-              currentItemCode,
-              `nasl.ui.getCurrentItemType(${dataSourceTS}(${logic.params.map(() => 'null').join(',')}))`,
-            );
+            code = code.replaceAll(currentItemCode, `nasl.ui.getCurrentItemType(${dataSourceTS}(${logic.params.map(() => 'null').join(',')}))`);
           } else {
             const variable = view.variables.find((variable) => variable.name === dataSourceTS);
-            code = code.replaceAll(
-              currentItemCode,
-              `nasl.ui.getCurrentItemType(${variable ? variable.name : dataSourceTS})`,
-            );
+            code = code.replaceAll(currentItemCode, `nasl.ui.getCurrentItemType(${variable ? variable.name : dataSourceTS})`);
           }
         }
       }
@@ -2502,230 +2563,231 @@ export class View extends BaseNode {
     const callbackLogics: string[] = [];
     this.traverseChildren((el) => {
       if (el instanceof Identifier && el.namespace?.endsWith('logics')) {
-        callbackLogics.push(el.namespace + '.' + el.name);
+        callbackLogics.push(`${el.namespace}.${el.name}`);
       }
     });
     return callbackLogics;
   }
 
-  //================================================================================
+  //= ===============================================================================
   // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
   // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
-  //================================================================================
+  //= ===============================================================================
 }
 
+classMap.View = View;
 export default View;
-//================================================================================
+//= ===============================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
 // 自动生成的代码已结束。下面可以手动编写。
-//================================================================================
+//= ===============================================================================
 type AttrObject = {
-  value: string;
-  label: string;
-};
+  value: string,
+  label: string
+}
 export const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrObject>> = {
   'u-list-view': {
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'page-size': {
+          value: 'size',
+          label: '分页大小'
+      },
+      'page-number': {
+          value: 'page',
+          label: '当前页数'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'u-grid-view': {
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'page-size': {
+          value: 'size',
+          label: '分页大小'
+      },
+      'page-number': {
+          value: 'page',
+          label: '当前页数'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'u-list-components': {
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'u-table-view': {
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
-    sorting: {
-      value: 'sort',
-      label: '排序属性',
-    },
-    value: {
-      value: 'value',
-      label: '单选选中值',
-    },
-    values: {
-      value: 'values',
-      label: '多选选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'page-size': {
+          value: 'size',
+          label: '分页大小'
+      },
+      'page-number': {
+          value: 'page',
+          label: '当前页数'
+      },
+      'sorting': {
+          value: 'sort',
+          label: '排序属性'
+      },
+      'value': {
+          value: 'value',
+          label: '单选选中值'
+      },
+      'values': {
+          value: 'values',
+          label: '多选选中值'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'u-radios': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'value': {
+          value: 'value',
+          label: '选中值'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'u-checkboxes': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'value': {
+          value: 'value',
+          label: '选中值'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'u-select': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-    opened: {
-      value: 'opened',
-      label: '弹出状态',
-    },
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
+      'value': {
+          value: 'value',
+          label: '选中值'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
+      'opened': {
+          value: 'opened',
+          label: '弹出状态'
+      },
+      'page-size': {
+          value: 'size',
+          label: '分页大小'
+      },
+      'page-number': {
+          value: 'page',
+          label: '当前页数'
+      },
   },
   'u-cascader': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'value': {
+          value: 'value',
+          label: '选中值'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'u-tree-select-new': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'value': {
+          value: 'value',
+          label: '选中值'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'van-radio-group': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'value': {
+          value: 'value',
+          label: '选中值'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'van-checkbox-group': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'value': {
+          value: 'value',
+          label: '选中值'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'van-pickerson': {
-    pvalue: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
+      'pvalue': {
+          value: 'value',
+          label: '选中值'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
+      'page-size': {
+          value: 'size',
+          label: '分页大小'
+      },
+      'page-number': {
+          value: 'page',
+          label: '当前页数'
+      },
   },
   'van-cascader': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'value': {
+          value: 'value',
+          label: '选中值'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'van-list-view': {
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'page-size': {
+          value: 'size',
+          label: '分页大小'
+      },
+      'page-number': {
+          value: 'page',
+          label: '当前页数'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'van-grid-view': {
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'page-size': {
+          value: 'size',
+          label: '分页大小'
+      },
+      'page-number': {
+          value: 'page',
+          label: '当前页数'
+      },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
   'van-for-components': {
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
+      'data-source': {
+          value: 'data',
+          label: '数据'
+      },
   },
-};
+}