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

package/src/concepts/BindEvent__.ts

@@ -1,27 +1,25 @@
-import * as babel from '@babel/core';
+import { v4 as uuidv4 } from 'uuid';
 import LogicItem from './LogicItem__';
 import Namespace from './Namespace__';
 import { TranslatorState, shiftState, withSourceMap, indent, createCompilerState } from '../translator';
-import { ElementToVueOptions } from './ViewElement__';
+import ViewElement, { ElementToVueOptions } from './ViewElement__';
 import { elementsEventsMap } from '../server/createUiTs';
 import Param from './Param__';
 import TypeAnnotation from './TypeAnnotation__';
 import Process from './Process__';
 
-//================================================================================
+//= ===============================================================================
 // 从这里开始到结尾注释之间的代码由 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 Logic from './Logic__';
 import Argument from './Argument__';
-import ViewElement from './ViewElement__';
 import View from './View__';
 import Module from './Module__';
 import App from './App__';
@@ -32,921 +30,1049 @@ import Frontend from './Frontend__';
  */
 @concept('元素绑定事件')
 export class BindEvent extends BaseNode {
-    /**
-     * 产品概念
-     */
-    @property()
-    concept: 'BindEvent' = 'BindEvent';
-
-    /**
-     * 元素绑定事件名称
-     */
-    @property()
-    name: string = undefined;
-
-    /**
-     * 逻辑列表
-     */
-    @property('Logic')
-    logics: Array<Logic> = [];
-
-    /**
-     * calleeNamespace
-     */
-    @property()
-    calleeNamespace: string = undefined;
-
-    /**
-     * calleeName
-     */
-    @property()
-    calleeName: string = undefined;
-
-    /**
-     * 实际参数
-     */
-    @property('Argument')
-    arguments: Array<Argument> = [];
-
-    /**
-     * 祖先 ViewElement
-     */
-    get element() {
-        return this.getAncestor('ViewElement') as ViewElement;
-    }
-    /**
-     * 祖先 View
-     */
-    get view() {
-        return this.getAncestor('View') as View;
-    }
-    /**
-     * 祖先 Module
-     */
-    get module() {
-        return this.getAncestor('Module') as Module;
+  /**
+   * 产品概念
+   */
+  @property()
+  concept: 'BindEvent' = 'BindEvent';
+
+  /**
+   * 元素绑定事件名称
+   */
+  @property()
+  name: string = undefined;
+
+  /**
+   * 逻辑列表
+   */
+  @property('Logic')
+  logics: Array<Logic> = [];
+
+  /**
+   * calleeNamespace
+   */
+  @property()
+  calleeNamespace: string = undefined;
+
+  /**
+   * calleeName
+   */
+  @property()
+  calleeName: string = undefined;
+
+  /**
+   * 实际参数
+   */
+  @property('Argument')
+  arguments: Array<Argument> = [];
+
+  /**
+   * 祖先 ViewElement
+   */
+  get element() {
+    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<BindEvent>) {
+    // @ts-ignore
+    source = { ...BindEvent.getDefaultOptions(), ...source };
+    super(source);
+    super.subConstructor(source);
+  }
+
+  getClassName() {
+    return 'BindEvent';
+  }
+
+  static from(source: any, parentNode?: any, parentKey?: string): BindEvent {
+    return super.from(source, parentNode, parentKey) as BindEvent;
+  }
+
+  /**
+   * 从父级删除该节点
+   * @internal
+   */
+  _delete() {
+    let params: Params = null;
+    if (this.parentNode) {
+      params = (this.parentNode as any)?.__removeBindEvent?.(this);
     }
-    /**
-     * 祖先 App
-     */
-    get app() {
-        return this.getAncestor('App') as App;
+    return params;
+  }
+
+  /**
+   * 设置元素绑定事件名称
+   */
+  setName(name: string) {
+    const object = {
+      name,
+    };
+    this.update({
+      ...object,
+      field: 'name',
+    });
+  }
+
+  /**
+   * 设置calleeNamespace
+   */
+  setCalleeNamespace(calleeNamespace: string) {
+    const object = {
+      calleeNamespace,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置calleeName
+   */
+  setCalleeName(calleeName: string) {
+    const object = {
+      calleeName,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  getLogicExistingNames(excludedList: Array<Logic> = []) {
+    const excludedSet = new Set(excludedList);
+    return ((this.logics as Logic[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+  }
+
+  getLogicUniqueName(name = 'logic1') {
+    return utils.unique(name, this.getLogicExistingNames(), undefined, true);
+  }
+
+  /**
+   * 插入逻辑
+   * @internal
+   * @param name 逻辑名称，如果不填会自动生成一个唯一名称
+   */
+  _insertLogicAt(name: string, index: number): Logic;
+
+  /**
+   * 插入逻辑
+   * @internal
+   * @param logicOptions 逻辑参数
+   */
+  _insertLogicAt(logicOptions: Partial<Logic>, index: number): Logic;
+
+  /**
+   * 插入逻辑
+   * @internal
+   * @param logic 已有的逻辑实例
+   */
+  _insertLogicAt(logic: Logic, index: number): Logic;
+
+  _insertLogicAt(options: string | Partial<Logic> | Logic, index: number) {
+    const logicOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'logics' };
+    let logic: Logic;
+    if (!options) {
+      logic = Logic.from(
+        {
+          ...logicOptions,
+          name: this.getLogicUniqueName(),
+        },
+        this,
+        'logics'
+      );
+    } else if (typeof options === 'string') {
+      logic = Logic.from(
+        {
+          ...logicOptions,
+          name: options,
+        },
+        this,
+        'logics'
+      );
+    } else if (options instanceof Logic) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      logic = options;
+      Object.assign(logic, relationOptions);
+    } else {
+      logic = Logic.from(
+        {
+          ...logicOptions,
+          ...options,
+        },
+        this,
+        'logics'
+      );
     }
-    /**
-     * 祖先 Frontend
-     */
-    get frontend() {
-        return this.getAncestor('Frontend') as Frontend;
+    this.logics.splice(index, 0, logic);
+    return logic;
+  }
+
+  /**
+   * 插入逻辑
+   * @param name 逻辑名称，如果不填会自动生成一个唯一名称
+   */
+  insertLogicAt(name: string, index: number): Logic;
+
+  /**
+   * 插入逻辑
+   * @param logicOptions 逻辑参数
+   */
+  insertLogicAt(logicOptions: Partial<Logic>, index: number): Logic;
+
+  /**
+   * 插入逻辑
+   * @param logic 已有的逻辑实例
+   */
+  insertLogicAt(logic: Logic, index: number): Logic;
+
+  insertLogicAt(options: string | Partial<Logic> | Logic, index: number) {
+    const node = this._insertLogicAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'logics',
+    });
+    return node;
+  }
+
+  /**
+   * 添加逻辑
+   * @internal
+   * @param name 逻辑名称，如果不填会自动生成一个唯一名称
+   */
+  _addLogic(name?: string): Logic;
+
+  /**
+   * 添加逻辑
+   * @internal
+   * @param logicOptions 逻辑参数
+   */
+  _addLogic(logicOptions: Partial<Logic>): Logic;
+
+  /**
+   * 添加逻辑
+   * @internal
+   * @param logic 已有的逻辑实例
+   */
+  _addLogic(logic: Logic): Logic;
+
+  _addLogic(options?: string | Partial<Logic> | Logic) {
+    const index = 0;
+    return this._insertLogicAt(options as any, index);
+  }
+
+  /**
+   * 添加逻辑
+   * @internal
+   * @param name 逻辑名称，如果不填会自动生成一个唯一名称
+   */
+  addLogic(name?: string): Logic;
+
+  /**
+   * 添加逻辑
+   * @param logicOptions 逻辑参数
+   */
+  addLogic(logicOptions: Partial<Logic>): Logic;
+
+  /**
+   * 添加逻辑
+   * @param logic 已有的逻辑实例
+   */
+  addLogic(logic: Logic): Logic;
+
+  addLogic(options?: string | Partial<Logic> | Logic) {
+    const node = this._addLogic(options as any);
+    const index = this.logics.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'logics',
+    });
+    return node;
+  }
+
+  /**
+   * 插入实际参数
+   * @internal
+   * @param argumentOptions 实际参数参数
+   */
+  _insertArgumentAt(argumentOptions: Partial<Argument>, index: number): Argument;
+
+  /**
+   * 插入实际参数
+   * @internal
+   * @param argument 已有的实际参数实例
+   */
+  _insertArgumentAt(argument: Argument, index: number): Argument;
+
+  _insertArgumentAt(options: Partial<Argument> | Argument, index: number) {
+    const argumentOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'arguments' };
+    let argument: Argument;
+    if (options instanceof Argument) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      argument = options;
+      Object.assign(argument, relationOptions);
+    } else {
+      argument = Argument.from(
+        {
+          ...argumentOptions,
+          ...options,
+        },
+        this,
+        'arguments'
+      );
     }
-
-    /**
-     * @param source 需要合并的部分参数
-     */
-    constructor(source?: Partial<BindEvent>) {
-        source = Object.assign({}, BindEvent.getDefaultOptions(), source);
-        super(source);
-        super.subConstructor(source);
-    }
-    getClassName() {
-        return 'BindEvent';
-    }
-
-    static from(source: any, parentNode?: any, parentKey?: string): BindEvent {
-        return super.from(source, parentNode, parentKey) as BindEvent;
+    this.arguments.splice(index, 0, argument);
+    return argument;
+  }
+
+  /**
+   * 插入实际参数
+   * @param argumentOptions 实际参数参数
+   */
+  insertArgumentAt(argumentOptions: Partial<Argument>, index: number): Argument;
+
+  /**
+   * 插入实际参数
+   * @param argument 已有的实际参数实例
+   */
+  insertArgumentAt(argument: Argument, index: number): Argument;
+
+  insertArgumentAt(options: Partial<Argument> | Argument, index: number) {
+    const node = this._insertArgumentAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'arguments',
+    });
+    return node;
+  }
+
+  /**
+   * 添加实际参数
+   * @internal
+   * @param argumentOptions 实际参数参数
+   */
+  _addArgument(argumentOptions: Partial<Argument>): Argument;
+
+  /**
+   * 添加实际参数
+   * @internal
+   * @param argument 已有的实际参数实例
+   */
+  _addArgument(argument: Argument): Argument;
+
+  _addArgument(options?: Partial<Argument> | Argument) {
+    const index = this.arguments.length;
+    return this._insertArgumentAt(options as any, index);
+  }
+
+  /**
+   * 添加实际参数
+   * @param argumentOptions 实际参数参数
+   */
+  addArgument(argumentOptions: Partial<Argument>): Argument;
+
+  /**
+   * 添加实际参数
+   * @param argument 已有的实际参数实例
+   */
+  addArgument(argument: Argument): Argument;
+
+  addArgument(options?: Partial<Argument> | Argument) {
+    const node = this._addArgument(options as any);
+    const index = this.arguments.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'arguments',
+    });
+    return node;
+  }
+
+  /**
+   * 删除逻辑
+   * @param name 逻辑名称
+   */
+  removeLogic(name: string): void;
+
+  /**
+   * 删除逻辑
+   * @param logic 已有的逻辑实例
+   */
+  removeLogic(logic: Logic): void;
+
+  removeLogic(options: string | Logic) {
+    let logic: Logic;
+    if (typeof options === 'string') {
+      logic = (this.logics as Logic[]).find((item) => item.name === options);
+      if (!logic) {
+        throw new Error(`找不到逻辑 ${options}`);
+      }
+    } else {
+      logic = options;
     }
-
-    /**
-     * 从父级删除该节点
-     * @internal
-     */
-    _delete() {
-        let params: Params = null;
-        if (this.parentNode) {
-            params = (this.parentNode as any)?.__removeBindEvent?.(this);
-        }
-        return params;
+    return logic.delete();
+  }
+
+  __removeLogic(logic: Logic) {
+    const { parentKey } = logic;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: logic,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(logic);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === logic) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
     }
-    /**
-     * 设置元素绑定事件名称
-     */
-    setName(name: string) {
-        const object = {
-            name,
-        };
-        this.update({
-            ...object,
-            field: 'name',
-        });
+    return params;
+  }
+
+  /**
+   * 删除实际参数
+   * @param argument 已有的实际参数实例
+   */
+  removeArgument(argument: Argument): void;
+
+  removeArgument(options: Argument) {
+    const argument: Argument = options;
+    return argument.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;
+      }
     }
-
-    /**
-     * 设置calleeNamespace
-     */
-    setCalleeNamespace(calleeNamespace: string) {
-        const object = {
-            calleeNamespace,
-        };
-        this.update({
-            ...object,
-        });
+    return params;
+  }
+
+  //= ===============================================================================
+  // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+  // 自动生成的代码已结束。下面可以手动编写。
+  //= ===============================================================================
+  get process() {
+    return this.getAncestor('Process') as Process;
+  }
+
+  get tsCalleeNamespace() {
+    if (this.calleeNamespace) {
+      let tsCalleeNamespace = this.calleeNamespace;
+      tsCalleeNamespace = tsCalleeNamespace.replace(/\.[0-9]/g, (m) => m.replace('.', '.$'));
+      tsCalleeNamespace = tsCalleeNamespace.replace(/-/g, '_');
+      return tsCalleeNamespace;
     }
+    return '';
+  }
 
-    /**
-     * 设置calleeName
-     */
-    setCalleeName(calleeName: string) {
-        const object = {
-            calleeName,
-        };
-        this.update({
-            ...object,
-        });
+  get calleeKey(): string {
+    const { tsCalleeNamespace } = this;
+    if (!tsCalleeNamespace) {
+      return `${this.calleeName}`;
     }
-
-        getLogicExistingNames(excludedList: Array<Logic> = []) {
-        const excludedSet = new Set(excludedList);
-        return ((this.logics as Logic[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    // elements单独处理相对路径，和后缀的问题
+    if (tsCalleeNamespace.startsWith('elements') && tsCalleeNamespace.endsWith('logics')) {
+      const methodName = tsCalleeNamespace.substring(0, tsCalleeNamespace.length - '.logics'.length);
+      return `__${methodName}.${this.calleeName}`;
     }
-    getLogicUniqueName(name = 'logic1') {
-        return utils.unique(name, this.getLogicExistingNames(), undefined, true);
+    return `${tsCalleeNamespace}.${this.calleeName}`;
+  }
+
+  // 用于展示的value
+  get randerValue() {
+    const randerNameSpace = this.tsCalleeNamespace;
+    if (!randerNameSpace) {
+      return `${this.calleeName}`;
     }
-
-    /**
-    * 插入逻辑
-    * @internal
-    * @param name 逻辑名称，如果不填会自动生成一个唯一名称
-    */
-    _insertLogicAt(name: string, index: number): Logic;
-
-    /**
-    * 插入逻辑
-    * @internal
-    * @param logicOptions 逻辑参数
-    */
-    _insertLogicAt(logicOptions: Partial<Logic>, index: number): Logic;
-
-    /**
-    * 插入逻辑
-    * @internal
-    * @param logic 已有的逻辑实例
-    */
-    _insertLogicAt(logic: Logic, index: number): Logic;
-
-    _insertLogicAt(options: string | Partial<Logic> | Logic, index: number) {
-        const logicOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'logics' };
-        let logic: Logic;
-        if (!options) {
-            logic = Logic.from({
-                ...logicOptions,
-                name: this.getLogicUniqueName(),
-            }, this, 'logics');
-        } else if (typeof options === 'string') {
-            logic = Logic.from({
-                ...logicOptions,
-                name: options,
-            }, this, 'logics');
-        } else if (options instanceof Logic) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            logic = options;
-            Object.assign(logic, relationOptions);
-        } else {
-            logic = Logic.from({
-                ...logicOptions,
-                ...options,
-            }, this, 'logics');
-        }
-        this.logics.splice(index, 0, logic);
-        return logic;
+    // elements单独处理相对路径，和后缀的问题
+    if (randerNameSpace.startsWith('elements') && randerNameSpace.endsWith('logics')) {
+      const methodName = randerNameSpace.substring('elements.'.length, randerNameSpace.length);
+      return `$refs.${methodName}.${this.calleeName}`;
     }
+    return `${randerNameSpace}.${this.calleeName}`;
+  }
+
+  // 绑定事件转驼峰
+  toHump = (name: string) => (name ? name.replace(/\-(\w)/g, (all, letter) => letter.toUpperCase()) : '');
+
+  toJS(state?: TranslatorState): string {
+    // shiftState(state, code)
+    let code = `async ${this.getViewEventName()} (`;
+    const params = this.getContextLogicParams();
+    code += params.map((item: Param) => item.name).toString();
+    code += ') { \n';
+    this.logics.forEach((logic) => {
+      code += logic.toJS(shiftState(state, code), 'IIFE');
+    });
+    code += '}\n';
+    return code;
+  }
+
+  @withSourceMap()
+  toEmbeddedTS(state?: TranslatorState, isPageCycle?: Boolean): string {
+    // 如果有绑定的事件名
+    let code = ``;
+    if (isPageCycle) {
+      if (['keydown', 'keyup'].includes(this.name)) {
+        code = `const ${this.toHump(this.name) || '__IDENTIFIER__'} = (event: `;
+        code += this.getEventTypeString();
+        code += ') => [\n';
+        this.logics.forEach((logic) => {
+          // 一些默认的逻辑不翻译 排除掉
+          if (logic.name.startsWith('__')) {
+            return;
+          }
+          if (logic.view) {
+            const logicName = logic.name;
+            if ((logic.parentNode as BindEvent)?.element) {
+              logic.name = `__${logic.view.name}${(logic.parentNode as BindEvent).element.name}${logic.name}`;
+            }
 
-    /**
-     * 插入逻辑
-     * @param name 逻辑名称，如果不填会自动生成一个唯一名称
-     */
-    insertLogicAt(name: string, index: number): Logic;
-
-    /**
-     * 插入逻辑
-     * @param logicOptions 逻辑参数
-     */
-    insertLogicAt(logicOptions: Partial<Logic>, index: number): Logic;
-
-    /**
-     * 插入逻辑
-     * @param logic 已有的逻辑实例
-     */
-    insertLogicAt(logic: Logic, index: number): Logic;
-
-    insertLogicAt(options: string | Partial<Logic> | Logic, index: number) {
-        const node = this._insertLogicAt(options as any, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'logics',
+            logic.name = logic.name.replace(/-/g, '');
+            try {
+              code += logic.toEmbeddedTS(
+                shiftState(state, code, {
+                  tabSize: (state?.tabSize || 0) + 2,
+                }),
+                'noExport'
+              );
+            } finally {
+              // 翻译logic可能出错
+              logic.name = logicName;
+            }
+          } else {
+            code += logic.toEmbeddedTS(
+              shiftState(state, code, {
+                tabSize: (state?.tabSize || 0) + 2,
+              }),
+              'noExport'
+            );
+          }
+
+          code += indent(state?.tabSize || 0);
+          code += ',\n';
         });
-        return node;
-    }
-
-    /**
-     * 添加逻辑
-     * @internal
-     * @param name 逻辑名称，如果不填会自动生成一个唯一名称
-     */
-    _addLogic(name?: string): Logic;
-
-    /**
-     * 添加逻辑
-     * @internal
-     * @param logicOptions 逻辑参数
-     */
-    _addLogic(logicOptions: Partial<Logic>): Logic;
-
-    /**
-     * 添加逻辑
-     * @internal
-     * @param logic 已有的逻辑实例
-     */
-    _addLogic(logic: Logic): Logic;
-
-    _addLogic(options?: string | Partial<Logic> | Logic) {
-        const index = 0;
-        return this._insertLogicAt(options as any, index);
-    }
-
-    /**
-     * 添加逻辑
-     * @internal
-     * @param name 逻辑名称，如果不填会自动生成一个唯一名称
-     */
-    addLogic(name?: string): Logic;
-
-    /**
-     * 添加逻辑
-     * @param logicOptions 逻辑参数
-     */
-    addLogic(logicOptions: Partial<Logic>): Logic;
-
-    /**
-     * 添加逻辑
-     * @param logic 已有的逻辑实例
-     */
-    addLogic(logic: Logic): Logic;
-
-    addLogic(options?: string | Partial<Logic> | Logic) {
-        const node = this._addLogic(options as any);
-        const index = this.logics.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'logics',
+        code += '];\n';
+      } else {
+        this.logics.forEach((logic, index) => {
+          const logicName = logic.name;
+          logic.name = logic.view.name + logic.name + index;
+          code += logic.toEmbeddedTS(
+            shiftState(state, code, {
+              tabSize: (state?.tabSize || 0) + 2,
+            }),
+            'noExport'
+          );
+          code += indent(state?.tabSize || 0);
+          code += `${logic.name}();\n`;
+          logic.name = logicName;
         });
-        return node;
+      }
+      return code;
     }
 
-
-
-
-    
-
-    /**
-    * 插入实际参数
-    * @internal
-    * @param argumentOptions 实际参数参数
-    */
-    _insertArgumentAt(argumentOptions: Partial<Argument>, index: number): Argument;
-
-    /**
-    * 插入实际参数
-    * @internal
-    * @param argument 已有的实际参数实例
-    */
-    _insertArgumentAt(argument: Argument, index: number): Argument;
-
-    _insertArgumentAt(options: Partial<Argument> | Argument, index: number) {
-        const argumentOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'arguments' };
-        let argument: Argument;
-        if (options instanceof Argument) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            argument = options;
-            Object.assign(argument, relationOptions);
-        } else {
-            argument = Argument.from({
-                ...argumentOptions,
-                ...options,
-            }, this, 'arguments');
+    code = `${this.toHump(this.name) || '__IDENTIFIER__'}: (event: `;
+
+    // event的类型
+    code += this.getEventTypeString();
+
+    code += ') => [\n';
+    this.logics.forEach((logic) => {
+      // 一些默认的逻辑不翻译 排除掉
+      if (logic.name.startsWith('__')) {
+        return;
+      }
+      if (logic.view) {
+        const logicName = logic.name;
+        if ((logic.parentNode as BindEvent)?.element) {
+          logic.name = `__${logic.view.name}${(logic.parentNode as BindEvent).element.name}${logic.name}`;
         }
-        this.arguments.splice(index, 0, argument);
-        return argument;
-    }
-
-    
-
-    /**
-     * 插入实际参数
-     * @param argumentOptions 实际参数参数
-     */
-    insertArgumentAt(argumentOptions: Partial<Argument>, index: number): Argument;
-
-    /**
-     * 插入实际参数
-     * @param argument 已有的实际参数实例
-     */
-    insertArgumentAt(argument: Argument, index: number): Argument;
-
-    insertArgumentAt(options: Partial<Argument> | Argument, index: number) {
-        const node = this._insertArgumentAt(options as any, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'arguments',
-        });
-        return node;
-    }
-
-    
-
-    /**
-     * 添加实际参数
-     * @internal
-     * @param argumentOptions 实际参数参数
-     */
-    _addArgument(argumentOptions: Partial<Argument>): Argument;
-
-    /**
-     * 添加实际参数
-     * @internal
-     * @param argument 已有的实际参数实例
-     */
-    _addArgument(argument: Argument): Argument;
-
-    _addArgument(options?: Partial<Argument> | Argument) {
-        const index = this.arguments.length;
-        return this._insertArgumentAt(options as any, index);
-    }
-
-    
-
-    /**
-     * 添加实际参数
-     * @param argumentOptions 实际参数参数
-     */
-    addArgument(argumentOptions: Partial<Argument>): Argument;
-
-    /**
-     * 添加实际参数
-     * @param argument 已有的实际参数实例
-     */
-    addArgument(argument: Argument): Argument;
-
-    addArgument(options?: Partial<Argument> | Argument) {
-        const node = this._addArgument(options as any);
-        const index = this.arguments.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'arguments',
-        });
-        return node;
-    }
-
-
-    
-
-    /**
-    * 删除逻辑
-    * @param name 逻辑名称
-    */
-    removeLogic(name: string): void;
-
-    /**
-     * 删除逻辑
-     * @param logic 已有的逻辑实例
-     */
-    removeLogic(logic: Logic): void;
 
-    removeLogic(options: string | Logic) {
-        let logic: Logic;
-        if (typeof options === 'string') {
-            logic = (this.logics as Logic[]).find((item) => item.name === options);
-            if (!logic) {
-                throw new Error('找不到逻辑 ' + options);
-            }
-        } else {
-            logic = options;
+        logic.name = logic.name.replace(/-/g, '');
+        try {
+          code += logic.toEmbeddedTS(
+            shiftState(state, code, {
+              tabSize: (state?.tabSize || 0) + 2,
+            }),
+            'noExport'
+          );
+        } finally {
+          // 翻译logic可能出错
+          logic.name = logicName;
         }
-        return logic.delete();
+      } else {
+        code += logic.toEmbeddedTS(
+          shiftState(state, code, {
+            tabSize: (state?.tabSize || 0) + 2,
+          }),
+          'noExport'
+        );
+      }
+
+      code += indent(state?.tabSize || 0);
+      code += ',\n';
+    });
+    if (this.view) code += '],\n';
+    else code += ']\n';
+    return code;
+  }
+
+  @withSourceMap()
+  toNaturalTS(state?: TranslatorState, isPageCycle?: Boolean): string {
+    // 如果有绑定的事件名
+    let code = ``;
+    if (isPageCycle) {
+      this.logics.forEach((logic, index) => {
+        const logicName = `on_view_${logic.name}${index}`;
+        // logic.name = logic.view.name + logic.name + index;
+        code += logic.toNaturalTS(shiftState(state, code, {
+          tabSize: state.tabSize,
+        }), 'noExport', logicName);
+
+        // logic.name = logicName;
+        // code += indent(state.tabSize);
+        // code += `${logicName}();\n`;
+      });
+      return code;
     }
-
-    __removeLogic(logic: Logic) {
-        const parentKey = logic.parentKey;
-        const params: Params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: logic,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(logic);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === logic) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
+    // code = `${this.toHump(this.name) || '__IDENTIFIER__'}: (event: `;
+
+    // event的类型
+    // code += this.getEventTypeString();
+
+    // code += ') => [\n';
+    this.logics.forEach((logic) => {
+      // 一些默认的逻辑不翻译 排除掉
+      if (logic.name.startsWith('__')) {
+        return;
+      }
+      if (logic.view) {
+        const logicName = logic.name;
+        logic.name = `on_${(logic.parentNode as BindEvent).element.name}_${logic.name}`;
+        // logic.name = '__' + logic.view.name + (logic.parentNode as BindEvent).element.name + logic.name;
+        logic.name = logic.name.replace(/-/g, '');
+        try {
+          code += logic.toNaturalTS(shiftState(state, code, {
+            tabSize: state.tabSize,
+          }), 'noExport');
+        } finally {
+          // 翻译logic可能出错
+          logic.name = logicName;
         }
-        return params;
+      } else {
+        code += logic.toNaturalTS(shiftState(state, code, {
+          tabSize: state.tabSize,
+        }), 'noExport');
+      }
+
+      code += indent(state.tabSize);
+      // code += ',\n';
+    });
+    // if (this.view)
+    //     code += '],\n';
+    // else
+    //     code += ']\n';
+    return code;
+  }
+
+  getEventTypeString() {
+    let code = '';
+    if (!Object.keys(elementsEventsMap).length) return;
+    // 已有的点击事件，已知类型的，就直接取值
+    if (
+      ['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseleave', 'focus', 'blur', 'keydown', 'keyup'].includes(
+        this.name
+      )
+    ) {
+      const eventInfo = elementsEventsMap[this.name];
+      const ref = eventInfo.params[0].schema.$ref;
+      const type = ref.replace('#/systemTypes/', 'nasl.ui.');
+      code = `${type}`;
+    } else {
+      code = 'nasl.ui.BaseEvent';
     }
 
-
-
-    /**
-     * 删除实际参数
-     * @param argument 已有的实际参数实例
-     */
-    removeArgument(argument: Argument): void;
-
-    removeArgument(options: Argument) {
-        let argument: Argument = options;
-        return argument.delete();
-    }
-
-    __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;
-            }
+    // 组件上自己有类型的就覆盖掉，没有就用上面的类型
+    if (this.element && elementsEventsMap[`${this.element.tag}-${this.name}`]) {
+      const pageInfo = elementsEventsMap[`${this.element.tag}-${this.name}`];
+      const refParam = pageInfo.params && pageInfo.params.find((item: any) => item.schema);
+      if (refParam) {
+        const ref = refParam.schema.$ref;
+        let type = '';
+        if (ref.includes('systemTypes')) {
+          // 不要删除，用于转换类型
+          type = ref.replace('#/systemTypes/', 'nasl.ui.');
+        } else if (ref.includes('basicTypes')) {
+          // 不要删除，用于转换类型
+          type = ref.replace('#/basicTypes/', 'nasl.core.');
         }
-        return params;
+        code = `${type}`;
+      }
     }
-
-    //================================================================================
-    // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
-    // 自动生成的代码已结束。下面可以手动编写。
-    //================================================================================
-    get process() {
-        return this.getAncestor('Process') as Process;
-    }
-
-    get tsCalleeNamespace() {
-        if (this.calleeNamespace) {
-            let tsCalleeNamespace = this.calleeNamespace;
-            tsCalleeNamespace = tsCalleeNamespace.replace(/\.[0-9]/g, (m) => m.replace('.', '.$'));
-            tsCalleeNamespace = tsCalleeNamespace.replace(/-/g, '_');
-            return tsCalleeNamespace;
-        }
-        return '';
+    return code;
+  }
+
+  // @withSourceMap()
+  // toObjectTS(state?: TranslatorState): string {
+  //     let code = '';
+  //     if (this.name) {
+  //         code = `function ${this.name || '__IDENTIFIER__'} () {\n`;
+  //         code += indent((state?.tabSize || 0) + 1);
+  //         code += `${this.calleeKey}()`;
+  //         code += '\n';
+  //         code += indent((state?.tabSize || 0));
+  //         code += '};\n';
+  //     }
+  //     return code;
+  // }
+
+  /**
+   * 设置callee
+   */
+  setCallee(logic: Logic) {
+    let calleeNamespace = logic.getNamespace();
+    if (logic.parentNode instanceof View) {
+      calleeNamespace = '';
     }
-
-    get calleeKey(): string {
-        const tsCalleeNamespace = this.tsCalleeNamespace;
-        if (!tsCalleeNamespace) {
-            return `${this.calleeName}`;
-        }
-        // elements单独处理相对路径，和后缀的问题
-        if (tsCalleeNamespace.startsWith('elements') && tsCalleeNamespace.endsWith('logics')) {
-            const methodName = tsCalleeNamespace.substring(0, tsCalleeNamespace.length - '.logics'.length);
-            return '__' + methodName + `.${this.calleeName}`;
-        }
-        return `${tsCalleeNamespace}.${this.calleeName}`;
+    const object = {
+      calleeNamespace,
+      calleeName: logic.name,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  getNamespace(ns: string) {
+    if (this.view) return `${this.view.getNamespace()}.${this.view.name}.bindEvents.${this.name}.logics`;
+    if (this.parentNode && (this.parentNode as Namespace).getNamespace) {
+      const parentNamespace = (this.parentNode as Namespace).getNamespace();
+      const parentName = this.parentNode.name;
+      const arr = [parentNamespace];
+      if (this.parentNode.concept !== 'App' && parentName) {
+        arr.push(parentName);
+      }
+      return `${arr.join('.')}.${ns || 'bindEvent'}`;
     }
-    // 用于展示的value
-    get randerValue() {
-        const randerNameSpace = this.tsCalleeNamespace;
-        if (!randerNameSpace) {
-            return '' + this.calleeName;
-        }
-        // elements单独处理相对路径，和后缀的问题
-        if (randerNameSpace.startsWith('elements') && randerNameSpace.endsWith('logics')) {
-            const methodName = randerNameSpace.substring('elements.'.length, randerNameSpace.length);
-            return '$refs.' + methodName + `.${this.calleeName}`;
+    throw new Error('无法获取命名空间，请设置 parentNode！');
+  }
+
+  /**
+   * 转换成 Vue 的模板格式
+   */
+  toVue(options?: ElementToVueOptions) {
+    let code = '';
+    if (this.logics?.length) {
+      code += `@${this.name}="`;
+      const argsList: string[] = [];
+      if (this.logics?.length) {
+        let parent = this.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;
         }
-        return `${randerNameSpace}.${this.calleeName}`;
-    }
-    // 绑定事件转驼峰
-    toHump = (name: string) => (name ? name.replace(/\-(\w)/g, (all, letter) => letter.toUpperCase()) : '');
-
-    toJS(state?: TranslatorState): string {
-        // shiftState(state, code)
-        let code = `async ${this.getViewEventName()} (`;
-        const params = this.getContextLogicParams();
-        code += params.map((item: Param) => item.name).toString();
-        code += ') { \n';
-        this.logics.forEach((logic) => {
-            code += logic.toJS(shiftState(state, code), 'IIFE');
-        });
-        code += '}\n';
-        return code;
+        argsList.unshift('$event');
+      }
+      code += this.getViewEventName();
+
+      code += '(';
+      argsList.forEach((arg, index) => {
+        code += arg;
+        if (index !== argsList.length - 1) code += ', ';
+      });
+      code += ')';
+
+      code += `"`;
     }
 
-    @withSourceMap()
-    toEmbeddedTS(state?: TranslatorState, isPageCycle?: Boolean): string {
-        // 如果有绑定的事件名
-        let code = ``;
-        if (isPageCycle) {
-            this.logics.forEach((logic, index) => {
-                const logicName = logic.name;
-                logic.name = logic.view.name + logic.name + index;
-                code += logic.toEmbeddedTS(shiftState(state, code, {
-                    tabSize: (state?.tabSize || 0) + 2,
-                }), 'noExport');
-                code += indent((state?.tabSize || 0));
-                code += `${logic.name}();\n`;
-                logic.name = logicName;
-            });
-            return code;
+    return code;
+  }
+
+  // 获取bindEvent上的logic的参数从上文获取
+  getContextLogicParams() {
+    const argsList: string[] = [];
+    if (this.logics?.length) {
+      let parent = this.parentNode;
+      let index = 0;
+      while (parent && parent.concept !== 'View') {
+        if ((parent as ViewElement).slotScope) {
+          argsList.unshift(index === 0 ? 'current' : `current${index}`);
+          index++;
         }
-        code = `${this.toHump(this.name) || '__IDENTIFIER__'}: (event: `;
-
-        // event的类型
-        code += this.getEventTypeString();
-
-        code += ') => [\n';
-        this.logics.forEach((logic) => {
-            // 一些默认的逻辑不翻译 排除掉
-            if (logic.name.startsWith('__')) {
-                return;
-            }
-            if (logic.view) {
-                const logicName = logic.name;
-                logic.name = '__' + logic.view.name + (logic.parentNode as BindEvent).element.name + logic.name;
-                logic.name = logic.name.replace(/-/g, '');
-                try {
-                    code += logic.toEmbeddedTS(shiftState(state, code, {
-                        tabSize: (state?.tabSize || 0) + 2,
-                    }), 'noExport');
-                } finally {
-                    // 翻译logic可能出错
-                    logic.name = logicName;
-                }
-            } else {
-                code += logic.toEmbeddedTS(shiftState(state, code, {
-                    tabSize: (state?.tabSize || 0) + 2,
-                }), 'noExport');
-            }
-
-            code += indent((state?.tabSize || 0));
-            code += ',\n';
-        });
-        if (this.view)
-            code += '],\n';
-        else
-            code += ']\n';
-        return code;
+        parent = parent.parentNode;
+      }
+      argsList.unshift('event');
     }
-
-    getEventTypeString() {
-        let code = '';
-        if (!Object.keys(elementsEventsMap).length)
-            return;
-        // 已有的点击事件，已知类型的，就直接取值
-        if (['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseleave', 'focus', 'blur'].includes(this.name)) {
-            const eventInfo = elementsEventsMap[this.name];
-            const ref = eventInfo.params[0].schema.$ref;
-            const type = ref.replace('#/systemTypes/', 'nasl.ui.');
-            code = `${type}`;
-        } else {
-            code = 'nasl.ui.BaseEvent';
-        }
-
-        // 组件上自己有类型的就覆盖掉，没有就用上面的类型
-        if (this.element && elementsEventsMap[`${this.element.tag}-${this.name}`]) {
-            const pageInfo = elementsEventsMap[`${this.element.tag}-${this.name}`];
-            const refParam = pageInfo.params && pageInfo.params.find((item: any) => item.schema);
-            if (refParam) {
-                const ref = refParam.schema.$ref;
-                let type = '';
-                if (ref.includes('systemTypes')) {
-                    // 不要删除，用于转换类型
-                    type = ref.replace('#/systemTypes/', 'nasl.ui.');
-                } else if (ref.includes('basicTypes')) {
-                    // 不要删除，用于转换类型
-                    type = ref.replace('#/basicTypes/', 'nasl.core.');
-                }
-                code = `${type}`;
-            }
+    return argsList.map((name: string) => new Param({ name }));
+  }
+
+  // 获取bindEvent上的logic的参数从上文获取
+  getContextRenderLogicParams(logic: Logic) {
+    const argsList: Param[] = [];
+    const { virtualParams } = logic;
+    if (this.logics?.length) {
+      let parent = this.parentNode;
+      let index = 0;
+      const event = Param.from({ name: 'event', typeAnnotation: null }, logic, 'virtualParams');
+      argsList.push(event);
+      while (parent && parent.concept !== 'View') {
+        if ((parent as ViewElement).slotScope) {
+          const param = Param.from({ name: index === 0 ? 'current' : `current${index}`, typeAnnotation: null }, logic, 'virtualParams');
+          argsList.push(param);
+          index++;
         }
-        return code;
+        parent = parent.parentNode;
+      }
     }
-
-    // @withSourceMap()
-    // toObjectTS(state?: TranslatorState): string {
-    //     let code = '';
-    //     if (this.name) {
-    //         code = `function ${this.name || '__IDENTIFIER__'} () {\n`;
-    //         code += indent((state?.tabSize || 0) + 1);
-    //         code += `${this.calleeKey}()`;
-    //         code += '\n';
-    //         code += indent((state?.tabSize || 0));
-    //         code += '};\n';
-    //     }
-    //     return code;
-    // }
-
-    /**
-     * 设置callee
-     */
-    setCallee(logic: Logic) {
-        let calleeNamespace = logic.getNamespace();
-        if (logic.parentNode instanceof View) {
-            calleeNamespace = '';
+    let haveDifference = false;
+    // 如果长度一样
+    if (virtualParams.length === argsList.length) {
+      // 那就看一下每一项的名字是不是变了
+      for (let i = 0; i < virtualParams.length; i++) {
+        if (virtualParams[i].name !== argsList[i].name) {
+          haveDifference = true;
+          break;
         }
-        const object = {
-            calleeNamespace,
-            calleeName: logic.name,
-        };
-        this.update({
-            ...object,
-        });
+      }
+      // 如果变了， 输出新的
+      if (haveDifference) {
+        return argsList;
+      }
+      // 如果没变,输出旧的不让树组件刷新
+      return virtualParams;
     }
-
-    getNamespace(ns: string) {
-        if (this.view)
-            return `${this.view.getNamespace()}.${this.view.name}.bindEvents.${this.name}.logics`;
-        if (this.parentNode && (this.parentNode as Namespace).getNamespace) {
-            const parentNamespace = (this.parentNode as Namespace).getNamespace();
-            const parentName = this.parentNode.name;
-            const arr = [parentNamespace];
-            if (this.parentNode.concept !== 'App' && parentName) {
-                arr.push(parentName);
-            }
-            return `${arr.join('.')}.${ns || 'bindEvent'}`;
-        } else
-            throw new Error('无法获取命名空间，请设置 parentNode！');
+    // 长度啥的都不一样，就输出新的
+    return argsList;
+  }
+
+  getPageViewEventChineseName() {
+    const parent = this.parentNode;
+    const suffixRE = /时|前|后$/;
+    if (parent instanceof View) {
+      const event = elementsEventsMap[this.name];
+
+      if (['keydown', 'keyup'].includes(event.name)) {
+        return `“${parent.title || parent.name}”页面${event.title}`;
+      }
+
+      const cap = suffixRE.exec(event?.title);
+      if (cap) return `${event.title.replace(suffixRE, '')}“${parent.title || parent.name}”页面${cap[0]}`;
+      return `${event.title}“${parent.title || parent.name}”页面`;
     }
-    /**
-     * 转换成 Vue 的模板格式
-     */
-    toVue(options?: ElementToVueOptions) {
-        let code = '';
-        if (this.logics?.length) {
-            code += `@${this.name}="`;
-            const argsList: string[] = [];
-            if (this.logics?.length) {
-                let parent = this.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;
-                }
-                argsList.unshift('$event');
-            }
-            code += this.getViewEventName();
-
-            code += '(';
-            argsList.forEach((arg, index) => {
-                code += arg;
-                if (index !== argsList.length - 1)
-                    code += ', ';
-            });
-            code += ')';
-
-            code += `"`;
+    if (parent instanceof ViewElement) {
+      const eventName = `${parent.tag}-${this.name}`;
+      if (elementsEventsMap[eventName]) {
+        const event = elementsEventsMap[eventName];
+
+        let title = '';
+        const textChild = parent.children.find((item) => item.tag === 'u-text');
+        if (textChild) {
+          const bindAttr = textChild.bindAttrs.find((bindAttr) => bindAttr.name === 'text' || bindAttr.name === 'title' || bindAttr.name === 'label');
+          if (bindAttr && bindAttr.type === 'string') title = bindAttr.value;
+        } else {
+          const bindAttr = parent.bindAttrs.find((bindAttr) => bindAttr.name === 'text' || bindAttr.name === 'title' || bindAttr.name === 'label');
+          if (bindAttr && bindAttr.type === 'string') title = bindAttr.value;
         }
-        return code;
-    }
 
-    // 获取bindEvent上的logic的参数从上文获取
-    getContextLogicParams() {
-        const argsList: string[] = [];
-        if (this.logics?.length) {
-            let parent = this.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;
-            }
-            argsList.unshift('event');
+        const cap = suffixRE.exec(event?.title);
+        if (cap) return `${event.title.replace(suffixRE, '')}${title ? `“${title}”` : ''}${parent.name}${cap[0]}`;
+        return `${event.title}${title ? `“${title}”` : ''}${parent.name}`;
+      }
+      if (['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseleave', 'focus', 'blur'].includes(this.name)) {
+        const event = elementsEventsMap[this.name];
+
+        let title = '';
+        const textChild = parent.children.find((item) => item.tag === 'u-text');
+        if (textChild) {
+          const bindAttr = textChild.bindAttrs.find((bindAttr) => bindAttr.name === 'text' || bindAttr.name === 'title' || bindAttr.name === 'label');
+          if (bindAttr && bindAttr.type === 'string') title = bindAttr.value;
+        } else {
+          const bindAttr = parent.bindAttrs.find((bindAttr) => bindAttr.name === 'text' || bindAttr.name === 'title' || bindAttr.name === 'label');
+          if (bindAttr && bindAttr.type === 'string') title = bindAttr.value;
         }
-        return argsList.map((name: string) => new Param({ name }));
-    }
 
-    // 获取bindEvent上的logic的参数从上文获取
-    getContextRenderLogicParams(logic: Logic) {
-        const argsList: Param[] = [];
-        const virtualParams = logic.virtualParams;
-        if (this.logics?.length) {
-            let parent = this.parentNode;
-            let index = 0;
-            const event = Param.from({ name: 'event', typeAnnotation: null }, logic, 'virtualParams');
-            argsList.push(event);
-            while (parent && parent.concept !== 'View') {
-                if ((parent as ViewElement).slotScope) {
-                    const param = Param.from({ name: index === 0 ? 'current' : 'current' + index, typeAnnotation: null }, logic, 'virtualParams');
-                    argsList.push(param);
-                    index++;
-                }
-                parent = parent.parentNode;
-            }
-        }
-        let haveDifference = false;
-        // 如果长度一样
-        if (virtualParams.length === argsList.length) {
-            // 那就看一下每一项的名字是不是变了
-            for (let i = 0; i < virtualParams.length; i++) {
-                if (virtualParams[i].name !== argsList[i].name) {
-                    haveDifference = true;
-                    break;
-                }
-            }
-            // 如果变了， 输出新的
-            if (haveDifference) {
-                return argsList;
-            }
-            // 如果没变,输出旧的不让树组件刷新
-            return virtualParams;
-        }
-        // 长度啥的都不一样，就输出新的
-        return argsList;
+        const cap = suffixRE.exec(event?.title);
+        if (cap) return `${event.title.replace(suffixRE, '')}${title ? `“${title}”` : ''}${parent.name}${cap[0]}`;
+        return `${event.title}${title ? `“${title}”` : ''}${parent.name}`;
+      }
+      return `${parent.name}-${this.name}`;
     }
+  }
 
-    getPageViewEventChineseName() {
-        const parent = this.parentNode;
-        const suffixRE = /时|前|后$/;
-        if (parent instanceof View) {
-            const event = elementsEventsMap[this.name];
-            const cap = suffixRE.exec(event?.title);
-            if (cap)
-                return `${event.title.replace(suffixRE, '')}“${parent.title || parent.name}”页面${cap[0]}`;
-            else
-                return `${event.title}“${parent.title || parent.name}”页面`;
-        } else if (parent instanceof ViewElement) {
-            const eventName = `${parent.tag}-${this.name}`;
-            if (elementsEventsMap[eventName]) {
-                const event = elementsEventsMap[eventName];
-
-                let title = '';
-                const textChild = parent.children.find((item) => item.tag === 'u-text');
-                if (textChild) {
-                    const bindAttr = textChild.bindAttrs.find((bindAttr) => bindAttr.name === 'text' || bindAttr.name === 'title' || bindAttr.name === 'label');
-                    if (bindAttr && bindAttr.type === 'string')
-                        title = bindAttr.value;
-                } else {
-                    const bindAttr = parent.bindAttrs.find((bindAttr) => bindAttr.name === 'text' || bindAttr.name === 'title' || bindAttr.name === 'label');
-                    if (bindAttr && bindAttr.type === 'string')
-                        title = bindAttr.value;
-                }
-
-                const cap = suffixRE.exec(event?.title);
-                if (cap)
-                    return `${event.title.replace(suffixRE, '')}${title ? `“${title}”` : ''}${parent.name}${cap[0]}`;
-                else
-                    return `${event.title}${title ? `“${title}”` : ''}${parent.name}`;
-            } else if (['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseleave', 'focus', 'blur'].includes(this.name)) {
-                const event = elementsEventsMap[this.name];
-
-                let title = '';
-                const textChild = parent.children.find((item) => item.tag === 'u-text');
-                if (textChild) {
-                    const bindAttr = textChild.bindAttrs.find((bindAttr) => bindAttr.name === 'text' || bindAttr.name === 'title' || bindAttr.name === 'label');
-                    if (bindAttr && bindAttr.type === 'string')
-                        title = bindAttr.value;
-                } else {
-                    const bindAttr = parent.bindAttrs.find((bindAttr) => bindAttr.name === 'text' || bindAttr.name === 'title' || bindAttr.name === 'label');
-                    if (bindAttr && bindAttr.type === 'string')
-                        title = bindAttr.value;
-                }
-
-                const cap = suffixRE.exec(event?.title);
-                if (cap)
-                    return `${event.title.replace(suffixRE, '')}${title ? `“${title}”` : ''}${parent.name}${cap[0]}`;
-                else
-                    return `${event.title}${title ? `“${title}”` : ''}${parent.name}`;
-            }
-            return `${parent.name}-${this.name}`;
-        }
+  getViewEventChineseName() {
+    const parent = this.parentNode;
+    if (parent instanceof View) {
+      const event = elementsEventsMap[this.name];
+      return `${event.title}`;
     }
-
-    getViewEventChineseName() {
-        const parent = this.parentNode;
-        if (parent instanceof View) {
-            const event = elementsEventsMap[this.name];
-            return `${event.title}`;
-        } else if (parent instanceof ViewElement) {
-            const eventName = `${parent.tag}-${this.name}`;
-            if (elementsEventsMap[eventName]) {
-                const event = elementsEventsMap[eventName];
-                return `${event.title}`;
-            } else if (['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseleave', 'focus', 'blur'].includes(this.name)) {
-                const event = elementsEventsMap[this.name];
-                return `${event.title}`;
-            }
-            return `${this.name}`;
-        }
+    if (parent instanceof ViewElement) {
+      const eventName = `${parent.tag}-${this.name}`;
+      if (elementsEventsMap[eventName]) {
+        const event = elementsEventsMap[eventName];
+        return `${event.title}`;
+      }
+      if (['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseleave', 'focus', 'blur'].includes(this.name)) {
+        const event = elementsEventsMap[this.name];
+        return `${event.title}`;
+      }
+      return `${this.name}`;
     }
-    getViewEventName() {
-        // 名称规则：组件的名称 + 组件的事件 + 逻辑本身的事件 用下划线链接
-        const parentNode = this.parentNode;
-        const newName = this.name.replace(/-/g, '');
-        if (parentNode instanceof ViewElement) {
-            return `${parentNode.name}_${newName}`;
-        } else if (parentNode instanceof View) {
-            return `${this.view.name}_${newName}`;
-        } else {
-            // 这里编译成这个名字了 后续pctemplate 里也得按这个调用？
-            // 或者说因为会编译在不同的端里  直接 name好了
-            // return `${this.parentNode.name}_${newName}`;
-            return newName;
-        }
+  }
+
+  getViewEventName() {
+    // 名称规则：组件的名称 + 组件的事件 + 逻辑本身的事件 用下划线链接
+    const { parentNode } = this;
+    const newName = this.name.replace(/-/g, '');
+    if (parentNode instanceof ViewElement) {
+      return `${parentNode.name}_${newName}`;
     }
-    toFunction(state?: TranslatorState): string {
-        // shiftState(state, code)
-        // 和 toJS一样的 只是下一行增加了 function 关键字
-        // let code = `async function ${this.getViewEventName()} (`;
-        let code = `window.${this.getViewEventName()} = async (`;
-        const params = this.getContextLogicParams();
-        code += params.map((item: Param) => item.name).toString();
-        // code += ')  { \n';
-        code += ') => { \n';
-        this.logics.forEach((logic) => {
-            code += logic.toJS(shiftState(state, code), 'IIFE');
-        });
-        code += '}\n';
-        return code;
+    if (parentNode instanceof View) {
+      return `${this.view.name}_${newName}`;
     }
-    getTsNamespace() {
-        if (this.parentNode && (this.parentNode as Namespace).getNamespace) {
-            const parentNamespace = (this.parentNode as Namespace).getNamespace();
-            const parentName = this.parentNode.name;
-            const arr = [parentNamespace];
-
-            if (this.parentNode.concept !== 'App' && parentName) {
-                arr.push(parentName);
-            }
-            return `${arr.join('.')}.bindEvents`;
-        } else
-            throw new Error('无法获取命名空间，请设置 parentNode！');
+    // 这里编译成这个名字了 后续pctemplate 里也得按这个调用？
+    // 或者说因为会编译在不同的端里  直接 name好了
+    // return `${this.parentNode.name}_${newName}`;
+    return newName;
+  }
+
+  toFunction(state?: TranslatorState): string {
+    // shiftState(state, code)
+    // 和 toJS一样的 只是下一行增加了 function 关键字
+    // let code = `async function ${this.getViewEventName()} (`;
+    let code = `window.${this.getViewEventName()} = async (`;
+    const params = this.getContextLogicParams();
+    code += params.map((item: Param) => item.name).toString();
+    // code += ')  { \n';
+    code += ') => { \n';
+    this.logics.forEach((logic) => {
+      code += logic.toJS(shiftState(state, code), 'IIFE');
+    });
+    code += '}\n';
+    return code;
+  }
+
+  getTsNamespace() {
+    if (this.parentNode && (this.parentNode as Namespace).getNamespace) {
+      const parentNamespace = (this.parentNode as Namespace).getNamespace();
+      const parentName = this.parentNode.name;
+      const arr = [parentNamespace];
+
+      if (this.parentNode.concept !== 'App' && parentName) {
+        arr.push(parentName);
+      }
+      return `${arr.join('.')}.bindEvents`;
     }
-    toEmbeddedTSFile() {
-        let code = `namespace ${this.getTsNamespace()} {\n`;
-        const state = createCompilerState(code, {
-            tabSize: 1,
-        });
-
-        try {
-            code += this.toEmbeddedTS(state);
-        } catch (err) {
-            code += '';
-            console.log(err);
-        }
-
-        code += '}\n';
-
-        return {
-            code,
-            filePath: this.getEmbeddedFilePath(),
-            sourceMap: state.sourceMap,
-        };
+    throw new Error('无法获取命名空间，请设置 parentNode！');
+  }
+
+  toEmbeddedTSFile() {
+    let code = `namespace ${this.getTsNamespace()} {\n`;
+    const state = createCompilerState(code, {
+      tabSize: 1,
+    });
+
+    try {
+      code += this.toEmbeddedTS(state);
+    } catch (err) {
+      code += '';
+      console.log(err);
     }
-    /**
-       * 生成宿主语言的文件路径
-       * @param name 一般不用传，用于 rename
-       */
-    getEmbeddedFilePath(name = this.name) {
-        let pathName = name;
-        let parent = this.parentNode;
-        if (parent) {
-            while (parent && parent instanceof View) {
-                pathName = parent.name + '/' + pathName;
-                parent = parent.parentNode;
-            }
-        }
-        return `/embedded/${this.app.name}/frontends/${this.frontend.name}/bindEvents/${pathName}.ts`;
+
+    code += '}\n';
+
+    return {
+      code,
+      filePath: this.getEmbeddedFilePath(),
+      sourceMap: state.sourceMap,
+    };
+  }
+
+  /**
+   * 生成宿主语言的文件路径
+   * @param name 一般不用传，用于 rename
+   */
+  getEmbeddedFilePath(name = this.name) {
+    let pathName = name;
+    let parent = this.parentNode;
+    if (parent) {
+      while (parent && parent instanceof View) {
+        pathName = `${parent.name}/${pathName}`;
+        parent = parent.parentNode;
+      }
     }
+    return `/embedded/${this.app.name}/frontends/${this.frontend.name}/bindEvents/${pathName}.ts`;
+  }
 
-    //================================================================================
-    // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
-    // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
-    //================================================================================
+  //= ===============================================================================
+  // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
+  // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
+  //= ===============================================================================
 }
 
 classMap.BindEvent = BindEvent;
 export default BindEvent;
-//================================================================================
+//= ===============================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
 // 自动生成的代码已结束。下面可以手动编写。
-//================================================================================
+//= ===============================================================================