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

package/src/concepts/BindStyle__.ts

@@ -1,19 +1,18 @@
+import { v4 as uuidv4 } from 'uuid';
 import { TranslatorState, shiftState, withSourceMap } from '../translator';
-import { ElementToVueOptions } from './ViewElement__';
+import ViewElement, { ElementToVueOptions } from './ViewElement__';
 import MemberExpression from './MemberExpression__';
-//================================================================================
+//= ===============================================================================
 // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
 // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
-//================================================================================
+//= ===============================================================================
 import { EventPayload, Params } from '../common/EventEmitter';
 import { concept, excludedInJSON, property } from '../decorators';
 
 import * as utils from '../utils';
-import { v4 as uuidv4 } from 'uuid';
 import BaseNode from '../common/BaseNode';
 import classMap from '../common/classMap';
 import LogicItem from './LogicItem__';
-import ViewElement from './ViewElement__';
 import View from './View__';
 import Module from './Module__';
 import App from './App__';
@@ -24,432 +23,426 @@ import Frontend from './Frontend__';
  */
 @concept('元素绑定样式')
 export class BindStyle extends BaseNode {
-    /**
-     * 产品概念
-     */
-    @property()
-    concept: 'BindStyle' = 'BindStyle';
-
-    /**
-     * 元素绑定样式名称
-     */
-    @property()
-    name: string = undefined;
-
-    /**
-     * 属性表达式
-     */
-    @property('LogicItem')
-    expression: LogicItem = undefined;
-
-    /**
-     * 草稿态
-     */
-    @property('LogicItem')
-    playground: Array<LogicItem> = [];
-
-    /**
-     * 祖先 ViewElement
-     */
-    get viewElement() {
-        return this.getAncestor('ViewElement') as ViewElement;
-    }
-    /**
-     * 祖先 View
-     */
-    get view() {
-        return this.getAncestor('View') as View;
-    }
-    /**
-     * 祖先 Module
-     */
-    get module() {
-        return this.getAncestor('Module') as Module;
-    }
-    /**
-     * 祖先 App
-     */
-    get app() {
-        return this.getAncestor('App') as App;
-    }
-    /**
-     * 祖先 Frontend
-     */
-    get frontend() {
-        return this.getAncestor('Frontend') as Frontend;
-    }
-
-    /**
-     * @param source 需要合并的部分参数
-     */
-    constructor(source?: Partial<BindStyle>) {
-        source = Object.assign({}, BindStyle.getDefaultOptions(), source);
-        super(source);
-        super.subConstructor(source);
-    }
-    getClassName() {
-        return 'BindStyle';
-    }
-
-    static from(source: any, parentNode?: any, parentKey?: string): BindStyle {
-        return super.from(source, parentNode, parentKey) as BindStyle;
-    }
-
-    /**
-     * 从父级删除该节点
-     * @internal
-     */
-    _delete() {
-        let params: Params = null;
-        if (this.parentNode) {
-            params = (this.parentNode as any)?.__removeBindStyle?.(this);
-        }
-        return params;
-    }
-    /**
-     * 设置属性表达式
-     */
-    setExpression(expression: LogicItem) {
-        expression._delete();
-        const relationOptions = { parentNode: this, parentKey: 'expression' };
-        Object.assign(expression, relationOptions);
-        const object = {
-            expression,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    
-
-    
-
-    /**
-    * 插入逻辑项
-    * @internal
-    * @param logicItemOptions 逻辑项参数
-    */
-    _insertItemInPlaygroundAt(logicItemOptions: Partial<LogicItem>, index: number): LogicItem;
-
-    /**
-    * 插入逻辑项
-    * @internal
-    * @param logicItem 已有的逻辑项实例
-    */
-    _insertItemInPlaygroundAt(logicItem: LogicItem, index: number): LogicItem;
-
-    _insertItemInPlaygroundAt(options: Partial<LogicItem> | LogicItem, index: number) {
-        const logicItemOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'playground' };
-        let logicItem: LogicItem;
-        if (options instanceof LogicItem) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            logicItem = options;
-            Object.assign(logicItem, relationOptions);
-        } else {
-            logicItem = LogicItem.from({
-                ...logicItemOptions,
-                ...options,
-            }, this, 'playground');
-        }
-        this.playground.splice(index, 0, logicItem);
-        return logicItem;
+  /**
+   * 产品概念
+   */
+  @property()
+  concept: 'BindStyle' = 'BindStyle';
+
+  /**
+   * 元素绑定样式名称
+   */
+  @property()
+  name: string = undefined;
+
+  /**
+   * 属性表达式
+   */
+  @property('LogicItem')
+  expression: LogicItem = undefined;
+
+  /**
+   * 草稿态
+   */
+  @property('LogicItem')
+  playground: Array<LogicItem> = [];
+
+  /**
+   * 祖先 ViewElement
+   */
+  get viewElement() {
+    return this.getAncestor('ViewElement') as ViewElement;
+  }
+
+  /**
+   * 祖先 View
+   */
+  get view() {
+    return this.getAncestor('View') as View;
+  }
+
+  /**
+   * 祖先 Module
+   */
+  get module() {
+    return this.getAncestor('Module') as Module;
+  }
+
+  /**
+   * 祖先 App
+   */
+  get app() {
+    return this.getAncestor('App') as App;
+  }
+
+  /**
+   * 祖先 Frontend
+   */
+  get frontend() {
+    return this.getAncestor('Frontend') as Frontend;
+  }
+
+  /**
+   * @param source 需要合并的部分参数
+   */
+  constructor(source?: Partial<BindStyle>) {
+    // @ts-ignore
+    source = { ...BindStyle.getDefaultOptions(), ...source };
+    super(source);
+    super.subConstructor(source);
+  }
+
+  getClassName() {
+    return 'BindStyle';
+  }
+
+  static from(source: any, parentNode?: any, parentKey?: string): BindStyle {
+    return super.from(source, parentNode, parentKey) as BindStyle;
+  }
+
+  /**
+   * 从父级删除该节点
+   * @internal
+   */
+  _delete() {
+    let params: Params = null;
+    if (this.parentNode) {
+      params = (this.parentNode as any)?.__removeBindStyle?.(this);
     }
-
-    
-
-    /**
-     * 插入逻辑项
-     * @param logicItemOptions 逻辑项参数
-     */
-    insertItemInPlaygroundAt(logicItemOptions: Partial<LogicItem>, index: number): LogicItem;
-
-    /**
-     * 插入逻辑项
-     * @param logicItem 已有的逻辑项实例
-     */
-    insertItemInPlaygroundAt(logicItem: LogicItem, index: number): LogicItem;
-
-    insertItemInPlaygroundAt(options: Partial<LogicItem> | LogicItem, index: number) {
-        const node = this._insertItemInPlaygroundAt(options as any, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'playground',
-        });
-        return node;
+    return params;
+  }
+
+  /**
+   * 设置属性表达式
+   */
+  setExpression(expression: LogicItem) {
+    expression._delete();
+    const relationOptions = { parentNode: this, parentKey: 'expression' };
+    Object.assign(expression, relationOptions);
+    const object = {
+      expression,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 插入逻辑项
+   * @internal
+   * @param logicItemOptions 逻辑项参数
+   */
+  _insertItemInPlaygroundAt(logicItemOptions: Partial<LogicItem>, index: number): LogicItem;
+
+  /**
+   * 插入逻辑项
+   * @internal
+   * @param logicItem 已有的逻辑项实例
+   */
+  _insertItemInPlaygroundAt(logicItem: LogicItem, index: number): LogicItem;
+
+  _insertItemInPlaygroundAt(options: Partial<LogicItem> | LogicItem, index: number) {
+    const logicItemOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'playground' };
+    let logicItem: LogicItem;
+    if (options instanceof LogicItem) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      logicItem = options;
+      Object.assign(logicItem, relationOptions);
+    } else {
+      logicItem = LogicItem.from(
+        {
+          ...logicItemOptions,
+          ...options,
+        },
+        this,
+        'playground'
+      );
     }
-
-    
-
-    /**
-     * 添加逻辑项
-     * @internal
-     * @param logicItemOptions 逻辑项参数
-     */
-    _addItemInPlayground(logicItemOptions: Partial<LogicItem>): LogicItem;
-
-    /**
-     * 添加逻辑项
-     * @internal
-     * @param logicItem 已有的逻辑项实例
-     */
-    _addItemInPlayground(logicItem: LogicItem): LogicItem;
-
-    _addItemInPlayground(options?: Partial<LogicItem> | LogicItem) {
-        const index = this.playground.length;
-        return this._insertItemInPlaygroundAt(options as any, index);
+    this.playground.splice(index, 0, logicItem);
+    return logicItem;
+  }
+
+  /**
+   * 插入逻辑项
+   * @param logicItemOptions 逻辑项参数
+   */
+  insertItemInPlaygroundAt(logicItemOptions: Partial<LogicItem>, index: number): LogicItem;
+
+  /**
+   * 插入逻辑项
+   * @param logicItem 已有的逻辑项实例
+   */
+  insertItemInPlaygroundAt(logicItem: LogicItem, index: number): LogicItem;
+
+  insertItemInPlaygroundAt(options: Partial<LogicItem> | LogicItem, index: number) {
+    const node = this._insertItemInPlaygroundAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'playground',
+    });
+    return node;
+  }
+
+  /**
+   * 添加逻辑项
+   * @internal
+   * @param logicItemOptions 逻辑项参数
+   */
+  _addItemInPlayground(logicItemOptions: Partial<LogicItem>): LogicItem;
+
+  /**
+   * 添加逻辑项
+   * @internal
+   * @param logicItem 已有的逻辑项实例
+   */
+  _addItemInPlayground(logicItem: LogicItem): LogicItem;
+
+  _addItemInPlayground(options?: Partial<LogicItem> | LogicItem) {
+    const index = this.playground.length;
+    return this._insertItemInPlaygroundAt(options as any, index);
+  }
+
+  /**
+   * 添加逻辑项
+   * @param logicItemOptions 逻辑项参数
+   */
+  addItemInPlayground(logicItemOptions: Partial<LogicItem>): LogicItem;
+
+  /**
+   * 添加逻辑项
+   * @param logicItem 已有的逻辑项实例
+   */
+  addItemInPlayground(logicItem: LogicItem): LogicItem;
+
+  addItemInPlayground(options?: Partial<LogicItem> | LogicItem) {
+    const node = this._addItemInPlayground(options as any);
+    const index = this.playground.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'playground',
+    });
+    return node;
+  }
+
+  /**
+   * 删除逻辑项
+   * @param name 逻辑项名称
+   */
+  removeExpression(name: string): void;
+
+  /**
+   * 删除逻辑项
+   * @param expression 已有的逻辑项实例
+   */
+  removeExpression(expression: LogicItem): void;
+
+  removeExpression(options: string | LogicItem) {
+    let expression: LogicItem;
+    if (typeof options === 'string') {
+      expression = this.expression;
+      if (!expression) {
+        throw new Error(`找不到逻辑项 ${options}`);
+      }
+    } else {
+      expression = options;
     }
-
-    
-
-    /**
-     * 添加逻辑项
-     * @param logicItemOptions 逻辑项参数
-     */
-    addItemInPlayground(logicItemOptions: Partial<LogicItem>): LogicItem;
-
-    /**
-     * 添加逻辑项
-     * @param logicItem 已有的逻辑项实例
-     */
-    addItemInPlayground(logicItem: LogicItem): LogicItem;
-
-    addItemInPlayground(options?: Partial<LogicItem> | LogicItem) {
-        const node = this._addItemInPlayground(options as any);
-        const index = this.playground.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'playground',
-        });
-        return node;
+    return expression.delete();
+  }
+
+  /**
+   * 删除逻辑项
+   * @param logicItem 已有的逻辑项实例
+   */
+  removeItemInPlayground(logicItem: LogicItem): void;
+
+  removeItemInPlayground(options: LogicItem) {
+    const logicItem: LogicItem = options;
+    return logicItem.delete();
+  }
+
+  __removeLogicItem(logicItem: LogicItem) {
+    const { parentKey } = logicItem;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: logicItem,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(logicItem);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === logicItem) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
     }
-
-
-    
-
-    /**
-    * 删除逻辑项
-    * @param name 逻辑项名称
-    */
-    removeExpression(name: string): void;
-
-    /**
-     * 删除逻辑项
-     * @param expression 已有的逻辑项实例
-     */
-    removeExpression(expression: LogicItem): void;
-
-    removeExpression(options: string | LogicItem) {
-        let expression: LogicItem;
-        if (typeof options === 'string') {
-            expression = this.expression;
-            if (!expression) {
-                throw new Error('找不到逻辑项 ' + options);
-            }
-        } else {
-            expression = options;
-        }
-        return expression.delete();
+    return params;
+  }
+
+  //= ===============================================================================
+  // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+  // 自动生成的代码已结束。下面可以手动编写。
+  //= ===============================================================================
+
+  // 属性上绑定的表达式
+  get bindExpressions() {
+    return [this.expression];
+  }
+
+  // 是否需要用标识符替换
+  get needReplaceWithIdentifier() {
+    let bindExpression = false;
+    if (this.expression) {
+      let rootMemberExpression: any;
+      let tempNode = this.expression;
+      while (tempNode?.concept === 'MemberExpression') {
+        rootMemberExpression = tempNode;
+        tempNode = (tempNode as MemberExpression)?.object;
+      }
+      // 变量和变量的成员表达式不进行替换
+      if (!(this.expression?.concept === 'Identifier' || (rootMemberExpression && rootMemberExpression.object?.concept === 'Identifier'))) {
+        bindExpression = true;
+      }
     }
-
-    
-
-    /**
-     * 删除逻辑项
-     * @param logicItem 已有的逻辑项实例
-     */
-    removeItemInPlayground(logicItem: LogicItem): void;
-
-    removeItemInPlayground(options: LogicItem) {
-        let logicItem: LogicItem = options;
-        return logicItem.delete();
+    return bindExpression;
+  }
+
+  // 获取表达式在页面中的名字
+  get expressionNameInView() {
+    const nameList: string[] = [];
+    let node: BaseNode = this;
+    while (node) {
+      nameList.unshift(node.name);
+      if (node.concept === 'ViewElement') {
+        node = null;
+      } else {
+        nameList.unshift(node.parentKey);
+        node = node.parentNode;
+      }
     }
-
-    __removeLogicItem(logicItem: LogicItem) {
-        const parentKey = logicItem.parentKey;
-        const params: Params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: logicItem,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(logicItem);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === logicItem) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
-        }
-        return params;
+    return nameList.join('_').replace(/-/g, '_');
+  }
+
+  // 获取表达式生成器名称
+  get expressionBuilderName() {
+    let expressionInViewName = this.expressionNameInView;
+    expressionInViewName = expressionInViewName.charAt(0).toUpperCase() + expressionInViewName.slice(1);
+    return `gen${expressionInViewName}`;
+  }
+
+  // 获取参数列表
+  getArgsList() {
+    const viewElement = this?.getAncestor('ViewElement');
+    const argsList = [];
+    let parent = viewElement?.parentNode;
+    let index = 0;
+    while (parent && parent.concept !== 'View') {
+      if ((parent as ViewElement).slotScope) {
+        argsList.unshift(index === 0 ? 'current' : `current${index}`);
+        index++;
+      }
+      parent = parent.parentNode;
     }
-
-    //================================================================================
-    // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
-    // 自动生成的代码已结束。下面可以手动编写。
-    //================================================================================
-
-    // 属性上绑定的表达式
-    get bindExpressions() {
-        return [this.expression];
-    }
-
-    // 是否需要用标识符替换
-    get needReplaceWithIdentifier() {
-        let bindExpression = false;
-        if (this.expression) {
-            let rootMemberExpression: any;
-            let tempNode = this.expression;
-            while (tempNode?.concept === 'MemberExpression') {
-                rootMemberExpression = tempNode;
-                tempNode = (tempNode as MemberExpression)?.object;
-            }
-            // 变量和变量的成员表达式不进行替换
-            if (
-                !(
-                    this.expression?.concept === 'Identifier'
-                    || (rootMemberExpression && rootMemberExpression.object?.concept === 'Identifier')
-                )
-            ) {
-                bindExpression = true;
-            }
-        }
-        return bindExpression;
-    }
-
-    // 获取表达式在页面中的名字
-    get expressionNameInView() {
-        const nameList: string[] = [];
-        let node: BaseNode = this;
-        while (node) {
-            nameList.unshift(node.name);
-            if (node.concept === 'ViewElement') {
-                node = null;
+    return argsList;
+  }
+
+  // 表达式中需要被监听的变量
+  get watchedVariableMap() {
+    const map: any = {};
+    // 页面中表达式用到的变量需要监听，从而重新执行match表达式
+    utils.traverse(
+      (current: any) => {
+        const { node } = current || {};
+        const { concept } = node || {};
+        if (['Identifier'].includes(concept)) {
+          let expressionNode = node;
+          let memberExpressionNode = node?.parentNode;
+          while (memberExpressionNode?.concept === 'MemberExpression') {
+            expressionNode = memberExpressionNode;
+            // 为了处理MemberExpression里面存在CallLogic、CallFunction等的情况
+            const { concept: objConcept } = memberExpressionNode.object || {};
+            if (!['MemberExpression', 'Identifier'].includes(objConcept)) {
+              memberExpressionNode = null;
+              expressionNode = null;
             } else {
-                nameList.unshift(node.parentKey);
-                node = node.parentNode;
-            }
-        }
-        return nameList.join('_').replace(/-/g, '_');
-    }
-
-    // 获取表达式生成器名称
-    get expressionBuilderName() {
-        let expressionInViewName = this.expressionNameInView;
-        expressionInViewName = expressionInViewName.charAt(0).toUpperCase() + expressionInViewName.slice(1);
-        return `gen${expressionInViewName}`;
-    }
-
-    // 获取参数列表
-    getArgsList() {
-        const viewElement = this?.getAncestor('ViewElement');
-        const argsList = [];
-        let parent = viewElement?.parentNode;
-        let index = 0;
-        while (parent && parent.concept !== 'View') {
-            if ((parent as ViewElement).slotScope) {
-                argsList.unshift(index === 0 ? 'current' : 'current' + index);
-                index++;
+              memberExpressionNode = memberExpressionNode.parentNode;
             }
-            parent = parent.parentNode;
+          }
+          if (expressionNode) {
+            map[expressionNode.toJS()] = true;
+          }
         }
-        return argsList;
-    }
-
-    // 表达式中需要被监听的变量
-    get watchedVariableMap() {
-        const map: any = {};
-        // 页面中表达式用到的变量需要监听，从而重新执行match表达式
-        utils.traverse((current: any) => {
-            const { node } = current || {};
-            const { concept } = node || {};
-            if (['Identifier'].includes(concept)) {
-                let expressionNode = node;
-                let memberExpressionNode = node?.parentNode;
-                while (memberExpressionNode?.concept === 'MemberExpression') {
-                    expressionNode = memberExpressionNode;
-                    // 为了处理MemberExpression里面存在CallLogic、CallFunction等的情况
-                    const { concept: objConcept } = memberExpressionNode.object || {};
-                    if (!['MemberExpression', 'Identifier'].includes(objConcept)) {
-                        memberExpressionNode = null;
-                        expressionNode = null;
-                    } else {
-                        memberExpressionNode = memberExpressionNode.parentNode;
-                    }
-                }
-                if (expressionNode) {
-                    map[expressionNode.toJS()] = true;
-                }
-            }
-        }, {
-            node: this,
-        }, {
-            mode: 'anyObject',
-            excludedKeySet: new Set([
-                'parentNode',
-                'sourceMap',
-                'storageJSON',
-                'tsErrorDetail',
-                'NaslAnnotatedJSON',
-                'calledFrom',
-                '_events',
-                '_collectingList',
-                '_historyList',
-            ]),
-        });
-        return map;
-    }
-
-    getInViewMethod(state?: TranslatorState) {
-        const argsList = this.getArgsList() || [];
-        const hasArgs = !!argsList.length;
-        let argStr = '';
-
-        // 容错代码
-        let ftCode = '';
-        if (hasArgs) {
-            argsList.forEach((arg) => {
-                ftCode += `if (!this.${this.expressionNameInView}${argStr}) {
+      },
+      {
+        node: this,
+      },
+      {
+        mode: 'anyObject',
+        excludedKeySet: new Set([
+          'parentNode',
+          'sourceMap',
+          'storageJSON',
+          'tsErrorDetail',
+          'NaslAnnotatedJSON',
+          'calledFrom',
+          '_events',
+          '_collectingList',
+          '_historyList',
+        ]),
+      }
+    );
+    return map;
+  }
+
+  getInViewMethod(state?: TranslatorState) {
+    const argsList = this.getArgsList() || [];
+    const hasArgs = !!argsList.length;
+    let argStr = '';
+
+    // 容错代码
+    let ftCode = '';
+    if (hasArgs) {
+      argsList.forEach((arg) => {
+        ftCode += `if (!this.${this.expressionNameInView}${argStr}) {
                     this.${this.expressionNameInView}${argStr} = {};
                 }\n`;
-                argStr += `[${arg}.hasOwnProperty('__nodeKey') ? ${arg}.__nodeKey : ${arg}.index]`;
-            });
-        }
-        ftCode += `if (!this.${this.expressionNameInView}${argStr}) {
+        argStr += `[${arg}.hasOwnProperty('__nodeKey') ? ${arg}.__nodeKey : ${arg}.index]`;
+      });
+    }
+    ftCode += `if (!this.${this.expressionNameInView}${argStr}) {
             this.${this.expressionNameInView}${argStr} = {};
         }`;
 
-        // 新的参数
-        const paramList = Object.keys(this.watchedVariableMap);
-        let newParams = `const newParams = [];`;
-        if (Array.isArray(paramList) && paramList.length) {
-            paramList.forEach((param) => {
-                newParams += `newParams.push(${param});\n`;
-            });
-        }
+    // 新的参数
+    const paramList = Object.keys(this.watchedVariableMap);
+    let newParams = `const newParams = [];`;
+    if (Array.isArray(paramList) && paramList.length) {
+      paramList.forEach((param) => {
+        newParams += `newParams.push(${param});\n`;
+      });
+    }
 
-        // 表达式主体
-        let expressionStr = this.expression?.toJS() || '';
-        if (this.name?.endsWith('background-image') && expressionStr)
-            expressionStr = `\`url(\${${expressionStr}})\``;
+    // 表达式主体
+    let expressionStr = this.expression?.toJS() || '';
+    if (this.name?.endsWith('background-image') && expressionStr) expressionStr = `\`url(\${${expressionStr}})\``;
 
-        // 变量重新设置，为了触发重新调用
-        let setVarStr = `this.${this.expressionNameInView}${argStr} = {
+    // 变量重新设置，为了触发重新调用
+    let setVarStr = `this.${this.expressionNameInView}${argStr} = {
             ...(this.${this.expressionNameInView}${argStr} || {}),
             value: value,
         };`;
-        if (Array.isArray(argsList) && argsList.length) {
-            setVarStr += `this.${this.expressionNameInView} = {...this.${this.expressionNameInView}};\n`;
-        }
+    if (Array.isArray(argsList) && argsList.length) {
+      setVarStr += `this.${this.expressionNameInView} = {...this.${this.expressionNameInView}};\n`;
+    }
 
-        const code = `${this.expressionBuilderName} (${argsList.join(', ')}) {
+    const code = `${this.expressionBuilderName} (${argsList.join(', ')}) {
         // 容错代码
         ${ftCode}
         (async () => {
@@ -467,51 +460,49 @@ export class BindStyle extends BaseNode {
         return this.${this.expressionNameInView}${argStr}.value;
     }`;
 
-        return code;
-    }
-
-    /**
- * 转换成 Vue 的模板格式
- */
-    toVue(options?: ElementToVueOptions) {
-        let value: string;
-        // 需要用标识符替换
-        //if (options?.finalCode !== false && this.needReplaceWithIdentifier) {
-        //    const argsList = this.getArgsList();
-        //    value = `${this.expressionBuilderName} (${argsList.join(', ')})`;
-        //} else {
-            value = this.expression?.toVue(options);
-            if (this.name?.endsWith('background-image') && value)
-                value = `\`url(\${${value}})\``;
-        //}
-        return value && `'${this.name}': ${value}`;
-    }
-
-    @withSourceMap()
-    toEmbeddedTS(state?: TranslatorState): string {
-        let code = '()=>{';
-        if (this.expression) {
-            code += this.expression.toEmbeddedTS(shiftState(state, code, { tabSize: (state?.tabSize || 0) + 1 }));
-            code += ';\n';
-        }
-        this.playground?.forEach((item, index) => {
-            code += item.toEmbeddedTS(shiftState(state, code, { tabSize: (state?.tabSize || 0) + 1 }));
-            if (index !== this.playground.length - 1)
-                code += ';\n';
-        });
-        code += '}';
-        return code;
+    return code;
+  }
+
+  /**
+   * 转换成 Vue 的模板格式
+   */
+  toVue(options?: ElementToVueOptions) {
+    let value: string;
+    // 需要用标识符替换
+    // if (options?.finalCode !== false && this.needReplaceWithIdentifier) {
+    //    const argsList = this.getArgsList();
+    //    value = `${this.expressionBuilderName} (${argsList.join(', ')})`;
+    // } else {
+    value = this.expression?.toVue(options);
+    if (this.name?.endsWith('background-image') && value) value = `\`url(\${${value}})\``;
+    // }
+    return value && `'${this.name}': ${value}`;
+  }
+
+  @withSourceMap()
+  toEmbeddedTS(state?: TranslatorState): string {
+    let code = '()=>{';
+    if (this.expression) {
+      code += this.expression.toEmbeddedTS(shiftState(state, code, { tabSize: (state?.tabSize || 0) + 1 }));
+      code += ';\n';
     }
-
-    //================================================================================
-    // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
-    // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
-    //================================================================================
+    this.playground?.forEach((item, index) => {
+      code += item.toEmbeddedTS(shiftState(state, code, { tabSize: (state?.tabSize || 0) + 1 }));
+      if (index !== this.playground.length - 1) code += ';\n';
+    });
+    code += '}';
+    return code;
+  }
+
+  //= ===============================================================================
+  // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
+  // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
+  //= ===============================================================================
 }
 
 classMap.BindStyle = BindStyle;
 export default BindStyle;
-//================================================================================
+//= ===============================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
 // 自动生成的代码已结束。下面可以手动编写。
-//================================================================================
+//= ===============================================================================