@lcap/nasl 3.3.0-alpha.3 → 3.3.0-beta.0

package/src/concepts/View__.ts

@@ -1,8 +1,7 @@
-import { v4 as uuidv4 } from 'uuid';
 import Namespace from './Namespace__';
 import { TranslatorState, shiftState, withSourceMap, indent, createCompilerState } from '../translator';
 import translator from '../bak/translator';
-import ViewElement, { ElementToVueOptions } from './ViewElement__';
+import { ElementToVueOptions } from './ViewElement__';
 import { Structure } from './Structure__';
 import MemberExpression from './MemberExpression__';
 import Identifier from './Identifier__';
@@ -12,16 +11,17 @@ import BatchAssignment from './BatchAssignment__';
 import CallInterface from './CallInterface__';
 import CallLogic from './CallLogic__';
 
-//= ===============================================================================
+//================================================================================
 // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
 // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
-//= ===============================================================================
+//================================================================================
 import { EventPayload, Params } from '../common/EventEmitter';
-import { concept, excludedInJSON, property } from '../decorators';
+import { concept, excludedInJSON, property, className } from '../decorators';
 
 import * as utils from '../utils';
+import { v4 as uuidv4 } from 'uuid';
 import BaseNode from '../common/BaseNode';
-import classMap from '../common/classMap';
+import ViewElement from './ViewElement__';
 import Param from './Param__';
 import Variable from './Variable__';
 import Logic from './Logic__';
@@ -29,84 +29,99 @@ 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';
+
   /**
    * 产品概念
    */
-  @property()
-  concept: 'View' = 'View';
+  // @ts-ignore
+  readonly concept!: 'View';
 
   /**
    * 页面模板 Id
    */
   @property()
-  pageTemplateId: string = undefined;
+  // @ts-ignore
+  pageTemplateId!: string;
 
   /**
    * 页面名称
    */
   @property()
-  name: string = undefined;
+  // @ts-ignore
+  name!: string;
 
   /**
    * 唯一标识
    */
   @property()
-  uuid: string = undefined;
+  // @ts-ignore
+  uuid!: string;
 
   /**
    * 页面标题
    */
   @property()
-  title: string = undefined;
+  // @ts-ignore
+  title!: string;
 
   /**
    * 面包屑
    */
   @property()
-  crumb: string = undefined;
+  // @ts-ignore
+  crumb!: string;
 
   /**
    * 权限控制
    */
   @property()
-  auth: boolean = undefined;
+  // @ts-ignore
+  auth!: boolean;
 
   /**
    * 权限资源描述
    */
   @property()
-  authDescription: string = undefined;
+  // @ts-ignore
+  authDescription!: string;
 
   /**
    * 是否是默认跳转的页面
    */
   @property()
-  isIndex: boolean = undefined;
+  // @ts-ignore
+  isIndex!: boolean;
 
   /**
    * 未解析的模板代码
    */
   @property()
-  template: string = undefined;
+  // @ts-ignore
+  template!: string;
 
   /**
    * 未解析的逻辑代码
    */
   @property()
-  script: string = undefined;
+  // @ts-ignore
+  script!: string;
 
   /**
    * 未解析的样式代码
    */
   @property()
-  style: string = undefined;
+  // @ts-ignore
+  style!: string;
 
   /**
    * 页面元素列表
@@ -156,14 +171,12 @@ export class View extends BaseNode {
   get module() {
     return this.getAncestor('Module') as Module;
   }
-
   /**
    * 祖先 App
    */
   get app() {
     return this.getAncestor('App') as App;
   }
-
   /**
    * 祖先 Frontend
    */
@@ -175,16 +188,11 @@ export class View extends BaseNode {
    * @param source 需要合并的部分参数
    */
   constructor(source?: Partial<View>) {
-    // @ts-ignore
-    source = { ...View.getDefaultOptions(), ...source };
+    source = Object.assign({}, 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;
   }
@@ -200,7 +208,6 @@ export class View extends BaseNode {
     }
     return params;
   }
-
   /**
    * 设置页面名称
    */
@@ -306,7 +313,7 @@ export class View extends BaseNode {
           name: this.getViewElementUniqueName(),
         },
         this,
-        'elements'
+        'elements',
       );
     } else if (typeof options === 'string') {
       viewElement = ViewElement.from(
@@ -315,7 +322,7 @@ export class View extends BaseNode {
           name: options,
         },
         this,
-        'elements'
+        'elements',
       );
     } else if (options instanceof ViewElement) {
       options.ensureDelete(); // 同一实例不支持多处存在
@@ -328,7 +335,7 @@ export class View extends BaseNode {
           ...options,
         },
         this,
-        'elements'
+        'elements',
       );
     }
     this.elements.splice(index, 0, viewElement);
@@ -455,7 +462,7 @@ export class View extends BaseNode {
           name: this.getParamUniqueName(),
         },
         this,
-        'params'
+        'params',
       );
     } else if (typeof options === 'string') {
       param = Param.from(
@@ -464,7 +471,7 @@ export class View extends BaseNode {
           name: options,
         },
         this,
-        'params'
+        'params',
       );
     } else if (options instanceof Param) {
       options.ensureDelete(); // 同一实例不支持多处存在
@@ -477,7 +484,7 @@ export class View extends BaseNode {
           ...options,
         },
         this,
-        'params'
+        'params',
       );
     }
     this.params.splice(index, 0, param);
@@ -604,7 +611,7 @@ export class View extends BaseNode {
           name: this.getVariableUniqueName(),
         },
         this,
-        'variables'
+        'variables',
       );
     } else if (typeof options === 'string') {
       variable = Variable.from(
@@ -613,7 +620,7 @@ export class View extends BaseNode {
           name: options,
         },
         this,
-        'variables'
+        'variables',
       );
     } else if (options instanceof Variable) {
       options.ensureDelete(); // 同一实例不支持多处存在
@@ -626,7 +633,7 @@ export class View extends BaseNode {
           ...options,
         },
         this,
-        'variables'
+        'variables',
       );
     }
     this.variables.splice(index, 0, variable);
@@ -753,7 +760,7 @@ export class View extends BaseNode {
           name: this.getLogicUniqueName(),
         },
         this,
-        'logics'
+        'logics',
       );
     } else if (typeof options === 'string') {
       logic = Logic.from(
@@ -762,7 +769,7 @@ export class View extends BaseNode {
           name: options,
         },
         this,
-        'logics'
+        'logics',
       );
     } else if (options instanceof Logic) {
       options.ensureDelete(); // 同一实例不支持多处存在
@@ -775,7 +782,7 @@ export class View extends BaseNode {
           ...options,
         },
         this,
-        'logics'
+        'logics',
       );
     }
     this.logics.splice(index, 0, logic);
@@ -870,7 +877,6 @@ 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);
   }
@@ -907,7 +913,7 @@ export class View extends BaseNode {
           name: this.getBindEventUniqueName(),
         },
         this,
-        'bindEvents'
+        'bindEvents',
       );
     } else if (typeof options === 'string') {
       bindEvent = BindEvent.from(
@@ -916,7 +922,7 @@ export class View extends BaseNode {
           name: options,
         },
         this,
-        'bindEvents'
+        'bindEvents',
       );
     } else if (options instanceof BindEvent) {
       options.ensureDelete(); // 同一实例不支持多处存在
@@ -929,7 +935,7 @@ export class View extends BaseNode {
           ...options,
         },
         this,
-        'bindEvents'
+        'bindEvents',
       );
     }
     this.bindEvents.splice(index, 0, bindEvent);
@@ -1024,7 +1030,6 @@ 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);
   }
@@ -1061,7 +1066,7 @@ export class View extends BaseNode {
           name: this.getViewUniqueName(),
         },
         this,
-        'children'
+        'children',
       );
     } else if (typeof options === 'string') {
       view = View.from(
@@ -1070,7 +1075,7 @@ export class View extends BaseNode {
           name: options,
         },
         this,
-        'children'
+        'children',
       );
     } else if (options instanceof View) {
       options.ensureDelete(); // 同一实例不支持多处存在
@@ -1083,7 +1088,7 @@ export class View extends BaseNode {
           ...options,
         },
         this,
-        'children'
+        'children',
       );
     }
     this.children.splice(index, 0, view);
@@ -1191,7 +1196,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;
@@ -1200,7 +1205,7 @@ export class View extends BaseNode {
   }
 
   __removeViewElement(viewElement: ViewElement) {
-    const { parentKey } = viewElement;
+    const parentKey = viewElement.parentKey;
     const params: Params = {
       parentNode: this,
       parentKey,
@@ -1239,7 +1244,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;
@@ -1248,7 +1253,7 @@ export class View extends BaseNode {
   }
 
   __removeParam(param: Param) {
-    const { parentKey } = param;
+    const parentKey = param.parentKey;
     const params: Params = {
       parentNode: this,
       parentKey,
@@ -1287,7 +1292,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;
@@ -1296,7 +1301,7 @@ export class View extends BaseNode {
   }
 
   __removeVariable(variable: Variable) {
-    const { parentKey } = variable;
+    const parentKey = variable.parentKey;
     const params: Params = {
       parentNode: this,
       parentKey,
@@ -1335,7 +1340,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;
@@ -1344,7 +1349,7 @@ export class View extends BaseNode {
   }
 
   __removeLogic(logic: Logic) {
-    const { parentKey } = logic;
+    const parentKey = logic.parentKey;
     const params: Params = {
       parentNode: this,
       parentKey,
@@ -1383,7 +1388,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;
@@ -1392,7 +1397,7 @@ export class View extends BaseNode {
   }
 
   __removeBindEvent(bindEvent: BindEvent) {
-    const { parentKey } = bindEvent;
+    const parentKey = bindEvent.parentKey;
     const params: Params = {
       parentNode: this,
       parentKey,
@@ -1431,7 +1436,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;
@@ -1440,7 +1445,7 @@ export class View extends BaseNode {
   }
 
   __removeView(view: View) {
-    const { parentKey } = view;
+    const parentKey = view.parentKey;
     const params: Params = {
       parentNode: this,
       parentKey,
@@ -1462,10 +1467,10 @@ export class View extends BaseNode {
     return params;
   }
 
-  //= ===============================================================================
+  //================================================================================
   // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
   // 自动生成的代码已结束。下面可以手动编写。
-  //= ===============================================================================
+  //================================================================================
 
   /* 主页面有没有权限 */
   get parentAuth() {
@@ -1506,7 +1511,7 @@ export class View extends BaseNode {
         },
         {
           node: element,
-        }
+        },
       );
     });
   }
@@ -1581,7 +1586,7 @@ export class View extends BaseNode {
             ...logicOption,
           },
           this.rootNode,
-          'logics'
+          'logics',
         );
         (this.rootNode as App).addLogic(logic);
       });
@@ -1595,7 +1600,7 @@ export class View extends BaseNode {
             ...structureOption,
           },
           this.rootNode,
-          'structures'
+          'structures',
         );
         (this.rootNode as App).addStructure(structure);
       });
@@ -1609,7 +1614,7 @@ export class View extends BaseNode {
             ...paramsOption,
           },
           this,
-          'params'
+          'params',
         );
         this._addParam(param);
         param.addParamsPrepare();
@@ -1623,7 +1628,7 @@ export class View extends BaseNode {
             ...variableOption,
           },
           this,
-          'variables'
+          'variables',
         );
         this.addVariable(variable);
       });
@@ -1660,7 +1665,7 @@ export class View extends BaseNode {
               logics: [newLogic],
             },
             this,
-            'events'
+            'events',
           );
           this.addBindEvent(event);
         } else {
@@ -1731,8 +1736,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,
@@ -1760,15 +1765,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')}
                 }
             }
         };`;
@@ -1897,20 +1902,20 @@ 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 = createCompilerState()): string {
+  toEmbeddedTS(state?: TranslatorState): string {
     function chineseTsName(name: string) {
       let tsName = name;
       // 匹配所有特殊字符都转为_
@@ -1942,7 +1947,9 @@ 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);
           }
@@ -1952,7 +1959,9 @@ 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);
             }
@@ -1989,7 +1998,9 @@ 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);
           }
@@ -2006,7 +2017,9 @@ 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';
@@ -2019,7 +2032,7 @@ export class View extends BaseNode {
       code += element.toEmbeddedTSDefinition(
         shiftState(state, code, {
           tabSize: (state?.tabSize || 0) + 1,
-        })
+        }),
       );
     });
     code += `${indent((state?.tabSize || 0) + 1)}}\n`;
@@ -2028,22 +2041,29 @@ export class View extends BaseNode {
     if (Array.isArray(this.elements)) {
       code += indent((state?.tabSize || 0) + 1) + 'interface ';
       code += `__elements_completionProperty {\n`;
-      const componentList: Array<ViewElement> = []
-      this.elementsAttrs(this.elements, componentList)
-      const variableList: string[] = []
-      componentList.forEach((item) => {
+      const componentList: Array<ViewElement> = [];
+      this.elementsAttrs(this.elements, componentList);
+      const variableList: string[] = [];
+      this.elements.forEach((item) => {
         code += item.toEmbeddedTSVariableDefinition(shiftState(state, code, { inline: true }), variableList);
-        code += ';\n';
-      })
+      });
       code += indent((state?.tabSize || 0) + 1) + `}\n`;
       code += indent((state?.tabSize || 0) + 1);
-      code += `let __elements_completionProperty: __elements_completionProperty;\n`
+      code += `let __elements_completionProperty: __elements_completionProperty;\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 += indent((state?.tabSize || 0) + 1);
       code += `let __elements_stashFunctionVariable = {\n`;
       variableList.forEach((item) => {
         code += indent((state?.tabSize || 0) + 2);
-        code += `${item}`
-      })
+        code += `${item}`;
+      });
       code += indent((state?.tabSize || 0) + 1) + `}\n`;
     }
     // 逻辑
@@ -2054,7 +2074,7 @@ export class View extends BaseNode {
           shiftState(state, code, {
             tabSize: (state?.tabSize || 0) + 2,
           }),
-          'noExport'
+          'noExport',
         );
         code += '\n';
       });
@@ -2067,7 +2087,7 @@ export class View extends BaseNode {
           shiftState(state, code, {
             tabSize: state?.tabSize || 0,
           }),
-          true
+          true,
         );
         code += '\n';
       });
@@ -2086,7 +2106,7 @@ export class View extends BaseNode {
         code += element.toEmbeddedTS(
           shiftState(state, code, {
             tabSize: (state?.tabSize || 0) + 3,
-          })
+          }),
         );
         code += '\n';
       });
@@ -2111,69 +2131,6 @@ export class View extends BaseNode {
     return code;
   }
 
-  @withSourceMap()
-  toNaturalTS(state = createCompilerState(), currentNode?: BaseNode): string {
-    let code = `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';
-      code += (currentNode as Logic).toNaturalTS(shiftState(state, code, {
-        tabSize: state.tabSize + 1,
-      }), 'noExport');
-      code += '\n';
-    } else if (this.logics.length) {
-      code += '\n';
-      this.logics.forEach((logic) => {
-        code += logic.toNaturalTS(shiftState(state, code, {
-          tabSize: state.tabSize + 1,
-        }), 'noExport');
-        code += '\n';
-      });
-    }
-    code += `${indent(state.tabSize)}}\n`;
-    return code;
-  }
-
   toEmbeddedTSFile() {
     let code = `namespace ${this.getTsNamespace()} {\n`;
     const state = createCompilerState(code, {
@@ -2253,7 +2210,7 @@ export class View extends BaseNode {
                 typeAnnotation: null,
               },
               logic,
-              'virtualParams'
+              'virtualParams',
             ),
           ];
         }
@@ -2275,7 +2232,7 @@ export class View extends BaseNode {
             });
           });
         },
-        { node: item }
+        { node: item },
       );
     });
     if (logics.length) {
@@ -2305,7 +2262,7 @@ export class View extends BaseNode {
             bindEvents.push(bindEvent);
           });
         },
-        { node: item }
+        { node: item },
       );
     });
     return bindEvents;
@@ -2318,15 +2275,20 @@ export class View extends BaseNode {
       utils.traverse(
         (current) => {
           const { node } = current as any;
-          /// / 处理三种情况
-          // if (
-          //    ['BindAttribute', 'BindDirective', 'BindStyle'].includes(node.concept)
-          //    && node.needReplaceWithIdentifier
-          // ) {
-          //    bindExpressions.push(node);
-          // }
-          if (node.concept === 'Match') {
-            bindExpressions.push(node as Match);
+          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);
+            }
           }
         },
         {
@@ -2347,7 +2309,7 @@ export class View extends BaseNode {
             '_collectingList',
             '_historyList',
           ]),
-        }
+        },
       );
     });
     return bindExpressions;
@@ -2373,7 +2335,7 @@ export class View extends BaseNode {
       (current) => {
         if (current.node.name === name) return current.node;
       },
-      { node: this }
+      { node: this },
     );
   }
 
@@ -2431,7 +2393,7 @@ export class View extends BaseNode {
 
   getRightCode(code: string, assignment: Assignment | BatchAssignment, rightNode: any): string {
     code = code.replaceAll('\n', ' ');
-    const { logic } = assignment;
+    const logic = assignment.logic;
     const logicRtn = logic?.returns[0];
     // 调用接口，参数替换成 null
     if (rightNode instanceof CallInterface) {
@@ -2467,7 +2429,9 @@ 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;
   }
 
@@ -2493,7 +2457,11 @@ 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;
@@ -2513,10 +2481,16 @@ 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})`,
+            );
           }
         }
       }
@@ -2528,231 +2502,230 @@ 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: '数据',
+    },
   },
-}
+};