@lcap/nasl 3.5.0-beta.1 → 3.5.0-beta.2

package/src/concepts/BusinessComponent__.ts

@@ -0,0 +1,2659 @@
+import {
+  wrapForEachToGenerator as wrapForEach,
+  wrapIteratorToGenerator as wrapIterator,
+  returnOrigin,
+} from '../utils/time-slicing';
+import type { EmbeddedTSFileGenerator } from '../utils';
+import { shiftState, indent, createCompilerState, withSourceMapGenerator, TranslatorGenerator } from '../translator';
+import type Assignment from './Assignment__';
+import type BatchAssignment from './BatchAssignment__';
+import type Interface from './Interface__';
+import type App from './App__';
+import type FrontendType from './FrontendType__';
+import type Match from './Match__';
+import { ElementToVueOptions } from './ViewElement__';
+import translator from '../bak/translator';
+
+type AttrObject = {
+  value: string;
+  label: string;
+};
+
+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: '数据',
+    },
+  },
+  'u-grid-view': {
+    'page-size': {
+      value: 'size',
+      label: '分页大小',
+    },
+    'page-number': {
+      value: 'page',
+      label: '当前页数',
+    },
+    'data-source': {
+      value: 'data',
+      label: '数据',
+    },
+  },
+  'u-list-components': {
+    '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: '数据',
+    },
+  },
+  'u-radios': {
+    value: {
+      value: 'value',
+      label: '选中值',
+    },
+    'data-source': {
+      value: 'data',
+      label: '数据',
+    },
+  },
+  'u-checkboxes': {
+    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: '当前页数',
+    },
+  },
+  'u-cascader': {
+    value: {
+      value: 'value',
+      label: '选中值',
+    },
+    'data-source': {
+      value: 'data',
+      label: '数据',
+    },
+  },
+  'u-tree-select-new': {
+    value: {
+      value: 'value',
+      label: '选中值',
+    },
+    'data-source': {
+      value: 'data',
+      label: '数据',
+    },
+  },
+  'van-radio-group': {
+    value: {
+      value: 'value',
+      label: '选中值',
+    },
+    'data-source': {
+      value: 'data',
+      label: '数据',
+    },
+  },
+  'van-checkbox-group': {
+    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: '当前页数',
+    },
+  },
+  'van-cascader': {
+    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: '数据',
+    },
+  },
+  'van-grid-view': {
+    'page-size': {
+      value: 'size',
+      label: '分页大小',
+    },
+    'page-number': {
+      value: 'page',
+      label: '当前页数',
+    },
+    'data-source': {
+      value: 'data',
+      label: '数据',
+    },
+  },
+  'van-for-components': {
+    'data-source': {
+      value: 'data',
+      label: '数据',
+    },
+  },
+};
+
+const getBranchCopyUniCode = () => (window as any)?.BranchCopyUniCode;
+const removedViewElementCache: {
+  [key: string]: number | bigint;
+} = {}; // 临时记录删除的页面元素计数的最大值
+
+//================================================================================
+// 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
+// ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
+//================================================================================
+import { EventPayload, Params } from '../common/EventEmitter';
+import { concept, excludedInJSON, property, getConceptConstructor, getBaseNode } from '../decorators';
+
+import * as utils from '../utils';
+import * as types from './utils/types';
+import * as asserts from './utils/asserts';
+import { v4 as uuidv4 } from 'uuid';
+import BaseNode from '../common/BaseNode';
+import type Event from './Event__';
+import type ParamWithGroup from './ParamWithGroup__';
+import type Variable from './Variable__';
+import type BindEvent from './BindEvent__';
+import type BusinessLogic from './BusinessLogic__';
+import type ViewElement from './ViewElement__';
+import type Param from './Param__';
+import type Logic from './Logic__';
+
+/**
+ * 业务组件
+ */
+@concept('业务组件')
+export class BusinessComponent extends BaseNode {
+  /** 类名 */
+  static readonly ConceptName: string = 'BusinessComponent';
+
+  /** 继承链 */
+  static readonly inheritanceChain: string[] = ['BaseNode'];
+
+  /**
+   * 产品概念
+   */
+  @property('concept')
+  // @ts-ignore
+  readonly concept!: 'BusinessComponent';
+
+  /**
+   * 业务组件名称
+   */
+  @property()
+  name!: string;
+
+  /**
+   * 业务组件标题
+   */
+  @property()
+  title!: string;
+
+  /**
+   * 业务组件描述
+   */
+  @property()
+  description!: string;
+
+  /**
+   * 组件事件列表
+   */
+  @property({
+    objectRef: 'Event',
+    isArray: true,
+    defaultValue: [],
+  })
+  events: Array<Event> = [];
+
+  /**
+   * 参数分组列表
+   */
+  @property({
+    objectRef: 'ParamWithGroup',
+    isArray: true,
+    defaultValue: [],
+  })
+  params: Array<ParamWithGroup> = [];
+
+  /**
+   * 变量列表
+   */
+  @property({
+    objectRef: 'Variable',
+    isArray: true,
+    defaultValue: [],
+  })
+  variables: Array<Variable> = [];
+
+  /**
+   * 元素绑定事件列表
+   */
+  @property({
+    objectRef: 'BindEvent',
+    isArray: true,
+    defaultValue: [],
+  })
+  bindEvents: Array<BindEvent> = [];
+
+  /**
+   * 业务组件逻辑列表
+   */
+  @property({
+    objectRef: 'BusinessLogic',
+    isArray: true,
+    defaultValue: [],
+  })
+  logics: Array<BusinessLogic> = [];
+
+  /**
+   * 页面元素列表
+   */
+  @property({
+    objectRef: 'ViewElement',
+    isArray: true,
+    defaultValue: [],
+  })
+  elements: Array<ViewElement> = [];
+
+  /**
+   * icon
+   */
+  @property()
+  icon!: string;
+
+  /**
+   * @param source 需要合并的部分参数
+   */
+  constructor(source?: Partial<BusinessComponent>) {
+    source = Object.assign({}, BusinessComponent.getDefaultOptions(), source);
+    super(source);
+    super.subConstructor(source);
+  }
+
+  static from(source: any, parentNode?: any, parentKey?: string): BusinessComponent {
+    return super.from(source, parentNode, parentKey) as BusinessComponent;
+  }
+
+  /**
+   * 从父级删除该节点
+   * @internal
+   */
+  _delete() {
+    let params: Params = null;
+    if (this.parentNode) {
+      params = (this.parentNode as any)?.__removeBusinessComponent?.(this);
+    }
+    return params;
+  }
+  /**
+   * 设置业务组件名称
+   */
+  setName(name: string) {
+    const object = {
+      name,
+    };
+    this.update({
+      ...object,
+      field: 'name',
+    });
+  }
+
+  /**
+   * 设置业务组件标题
+   */
+  setTitle(title: string) {
+    const object = {
+      title,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置业务组件描述
+   */
+  setDescription(description: string) {
+    const object = {
+      description,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置icon
+   */
+  setIcon(icon: string) {
+    const object = {
+      icon,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  getEventExistingNames(excludedList: Array<Event> = []) {
+    const excludedSet = new Set(excludedList);
+    return ((this.events as Event[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item?.name);
+  }
+  getEventUniqueName(name = 'event1') {
+    return utils.unique(name, this.getEventExistingNames(), undefined, false);
+  }
+
+  /**
+   * 插入组件事件
+   * @internal
+   * @param name 组件事件名称，如果不填会自动生成一个唯一名称
+   */
+  _insertEventAt(name: string, index: number): Event;
+
+  /**
+   * 插入组件事件
+   * @internal
+   * @param eventOptions 组件事件参数
+   */
+  _insertEventAt(eventOptions: Partial<Event>, index: number): Event;
+
+  /**
+   * 插入组件事件
+   * @internal
+   * @param event 已有的组件事件实例
+   */
+  _insertEventAt(event: Event, index: number): Event;
+
+  _insertEventAt(options: string | Partial<Event> | Event, index: number) {
+    const eventOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'events' };
+    const Event = getConceptConstructor('Event');
+    let event: Event;
+    if (!options) {
+      event = Event.from(
+        {
+          ...eventOptions,
+          name: this.getEventUniqueName(),
+        },
+        this,
+        'events',
+      );
+    } else if (typeof options === 'string') {
+      event = Event.from(
+        {
+          ...eventOptions,
+          name: options,
+        },
+        this,
+        'events',
+      );
+    } else if (asserts.isEvent(options)) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      event = options;
+      Object.assign(event, relationOptions);
+    } else {
+      event = Event.from(
+        {
+          ...eventOptions,
+          ...options,
+        },
+        this,
+        'events',
+      );
+    }
+    this.events.splice(index, 0, event);
+    return event;
+  }
+
+  /**
+   * 插入组件事件
+   * @param name 组件事件名称，如果不填会自动生成一个唯一名称
+   */
+  insertEventAt(name: string, index: number): Event;
+
+  /**
+   * 插入组件事件
+   * @param eventOptions 组件事件参数
+   */
+  insertEventAt(eventOptions: Partial<Event>, index: number): Event;
+
+  /**
+   * 插入组件事件
+   * @param event 已有的组件事件实例
+   */
+  insertEventAt(event: Event, index: number): Event;
+
+  insertEventAt(options: string | Partial<Event> | Event, index: number) {
+    const node = this._insertEventAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'events',
+    });
+    return node;
+  }
+
+  /**
+   * 添加组件事件
+   * @internal
+   * @param name 组件事件名称，如果不填会自动生成一个唯一名称
+   */
+  _addEvent(name?: string): Event;
+
+  /**
+   * 添加组件事件
+   * @internal
+   * @param eventOptions 组件事件参数
+   */
+  _addEvent(eventOptions: Partial<Event>): Event;
+
+  /**
+   * 添加组件事件
+   * @internal
+   * @param event 已有的组件事件实例
+   */
+  _addEvent(event: Event): Event;
+
+  _addEvent(options?: string | Partial<Event> | Event) {
+    const index = this.events.length;
+    return this._insertEventAt(options as any, index);
+  }
+
+  /**
+   * 添加组件事件
+   * @internal
+   * @param name 组件事件名称，如果不填会自动生成一个唯一名称
+   */
+  addEvent(name?: string): Event;
+
+  /**
+   * 添加组件事件
+   * @param eventOptions 组件事件参数
+   */
+  addEvent(eventOptions: Partial<Event>): Event;
+
+  /**
+   * 添加组件事件
+   * @param event 已有的组件事件实例
+   */
+  addEvent(event: Event): Event;
+
+  addEvent(options?: string | Partial<Event> | Event) {
+    const node = this._addEvent(options as any);
+    const index = this.events.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'events',
+    });
+    return node;
+  }
+
+  getParamUniqueName(name = 'param1') {
+    return utils.unique(name, this.getVarExistingNames(), undefined, false);
+  }
+
+  /**
+   * 插入参数分组
+   * @internal
+   * @param name 参数分组名称，如果不填会自动生成一个唯一名称
+   */
+  _insertParamAt(name: string, index: number): ParamWithGroup;
+
+  /**
+   * 插入参数分组
+   * @internal
+   * @param paramOptions 参数分组参数
+   */
+  _insertParamAt(paramOptions: Partial<ParamWithGroup>, index: number): ParamWithGroup;
+
+  /**
+   * 插入参数分组
+   * @internal
+   * @param param 已有的参数分组实例
+   */
+  _insertParamAt(param: ParamWithGroup, index: number): ParamWithGroup;
+
+  _insertParamAt(options: string | Partial<ParamWithGroup> | ParamWithGroup, index: number) {
+    const paramOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'params' };
+    const ParamWithGroup = getConceptConstructor('ParamWithGroup');
+    let param: ParamWithGroup;
+    if (!options) {
+      param = ParamWithGroup.from(
+        {
+          ...paramOptions,
+          name: this.getParamUniqueName(),
+        },
+        this,
+        'params',
+      );
+    } else if (typeof options === 'string') {
+      param = ParamWithGroup.from(
+        {
+          ...paramOptions,
+          name: options,
+        },
+        this,
+        'params',
+      );
+    } else if (asserts.isParamWithGroup(options)) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      param = options;
+      Object.assign(param, relationOptions);
+    } else {
+      param = ParamWithGroup.from(
+        {
+          ...paramOptions,
+          ...options,
+        },
+        this,
+        'params',
+      );
+    }
+    this.params.splice(index, 0, param);
+    return param;
+  }
+
+  /**
+   * 插入参数分组
+   * @param name 参数分组名称，如果不填会自动生成一个唯一名称
+   */
+  insertParamAt(name: string, index: number): ParamWithGroup;
+
+  /**
+   * 插入参数分组
+   * @param paramOptions 参数分组参数
+   */
+  insertParamAt(paramOptions: Partial<ParamWithGroup>, index: number): ParamWithGroup;
+
+  /**
+   * 插入参数分组
+   * @param param 已有的参数分组实例
+   */
+  insertParamAt(param: ParamWithGroup, index: number): ParamWithGroup;
+
+  insertParamAt(options: string | Partial<ParamWithGroup> | ParamWithGroup, index: number) {
+    const node = this._insertParamAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'params',
+    });
+    return node;
+  }
+
+  /**
+   * 添加参数分组
+   * @internal
+   * @param name 参数分组名称，如果不填会自动生成一个唯一名称
+   */
+  _addParam(name?: string): ParamWithGroup;
+
+  /**
+   * 添加参数分组
+   * @internal
+   * @param paramOptions 参数分组参数
+   */
+  _addParam(paramOptions: Partial<ParamWithGroup>): ParamWithGroup;
+
+  /**
+   * 添加参数分组
+   * @internal
+   * @param param 已有的参数分组实例
+   */
+  _addParam(param: ParamWithGroup): ParamWithGroup;
+
+  _addParam(options?: string | Partial<ParamWithGroup> | ParamWithGroup) {
+    const index = this.params.length;
+    return this._insertParamAt(options as any, index);
+  }
+
+  /**
+   * 添加参数分组
+   * @internal
+   * @param name 参数分组名称，如果不填会自动生成一个唯一名称
+   */
+  addParam(name?: string): ParamWithGroup;
+
+  /**
+   * 添加参数分组
+   * @param paramOptions 参数分组参数
+   */
+  addParam(paramOptions: Partial<ParamWithGroup>): ParamWithGroup;
+
+  /**
+   * 添加参数分组
+   * @param param 已有的参数分组实例
+   */
+  addParam(param: ParamWithGroup): ParamWithGroup;
+
+  addParam(options?: string | Partial<ParamWithGroup> | ParamWithGroup) {
+    const node = this._addParam(options as any);
+    const index = this.params.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'params',
+    });
+    return node;
+  }
+
+  getVariableUniqueName(name = 'variable1') {
+    return utils.unique(name, this.getVarExistingNames(), undefined, false);
+  }
+
+  /**
+   * 插入变量
+   * @internal
+   * @param name 变量名称，如果不填会自动生成一个唯一名称
+   */
+  _insertVariableAt(name: string, index: number): Variable;
+
+  /**
+   * 插入变量
+   * @internal
+   * @param variableOptions 变量参数
+   */
+  _insertVariableAt(variableOptions: Partial<Variable>, index: number): Variable;
+
+  /**
+   * 插入变量
+   * @internal
+   * @param variable 已有的变量实例
+   */
+  _insertVariableAt(variable: Variable, index: number): Variable;
+
+  _insertVariableAt(options: string | Partial<Variable> | Variable, index: number) {
+    const variableOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'variables' };
+    const Variable = getConceptConstructor('Variable');
+    let variable: Variable;
+    if (!options) {
+      variable = Variable.from(
+        {
+          ...variableOptions,
+          name: this.getVariableUniqueName(),
+        },
+        this,
+        'variables',
+      );
+    } else if (typeof options === 'string') {
+      variable = Variable.from(
+        {
+          ...variableOptions,
+          name: options,
+        },
+        this,
+        'variables',
+      );
+    } else if (asserts.isVariable(options)) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      variable = options;
+      Object.assign(variable, relationOptions);
+    } else {
+      variable = Variable.from(
+        {
+          ...variableOptions,
+          ...options,
+        },
+        this,
+        'variables',
+      );
+    }
+    this.variables.splice(index, 0, variable);
+    return variable;
+  }
+
+  /**
+   * 插入变量
+   * @param name 变量名称，如果不填会自动生成一个唯一名称
+   */
+  insertVariableAt(name: string, index: number): Variable;
+
+  /**
+   * 插入变量
+   * @param variableOptions 变量参数
+   */
+  insertVariableAt(variableOptions: Partial<Variable>, index: number): Variable;
+
+  /**
+   * 插入变量
+   * @param variable 已有的变量实例
+   */
+  insertVariableAt(variable: Variable, index: number): Variable;
+
+  insertVariableAt(options: string | Partial<Variable> | Variable, index: number) {
+    const node = this._insertVariableAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'variables',
+    });
+    return node;
+  }
+
+  /**
+   * 添加变量
+   * @internal
+   * @param name 变量名称，如果不填会自动生成一个唯一名称
+   */
+  _addVariable(name?: string): Variable;
+
+  /**
+   * 添加变量
+   * @internal
+   * @param variableOptions 变量参数
+   */
+  _addVariable(variableOptions: Partial<Variable>): Variable;
+
+  /**
+   * 添加变量
+   * @internal
+   * @param variable 已有的变量实例
+   */
+  _addVariable(variable: Variable): Variable;
+
+  _addVariable(options?: string | Partial<Variable> | Variable) {
+    const index = this.variables.length;
+    return this._insertVariableAt(options as any, index);
+  }
+
+  /**
+   * 添加变量
+   * @internal
+   * @param name 变量名称，如果不填会自动生成一个唯一名称
+   */
+  addVariable(name?: string): Variable;
+
+  /**
+   * 添加变量
+   * @param variableOptions 变量参数
+   */
+  addVariable(variableOptions: Partial<Variable>): Variable;
+
+  /**
+   * 添加变量
+   * @param variable 已有的变量实例
+   */
+  addVariable(variable: Variable): Variable;
+
+  addVariable(options?: string | Partial<Variable> | Variable) {
+    const node = this._addVariable(options as any);
+    const index = this.variables.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'variables',
+    });
+    return node;
+  }
+
+  getBindEventExistingNames(excludedList: Array<BindEvent> = []) {
+    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);
+  }
+
+  /**
+   * 插入元素绑定事件
+   * @internal
+   * @param name 元素绑定事件名称，如果不填会自动生成一个唯一名称
+   */
+  _insertBindEventAt(name: string, index: number): BindEvent;
+
+  /**
+   * 插入元素绑定事件
+   * @internal
+   * @param bindEventOptions 元素绑定事件参数
+   */
+  _insertBindEventAt(bindEventOptions: Partial<BindEvent>, index: number): BindEvent;
+
+  /**
+   * 插入元素绑定事件
+   * @internal
+   * @param bindEvent 已有的元素绑定事件实例
+   */
+  _insertBindEventAt(bindEvent: BindEvent, index: number): BindEvent;
+
+  _insertBindEventAt(options: string | Partial<BindEvent> | BindEvent, index: number) {
+    const bindEventOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'bindEvents' };
+    const BindEvent = getConceptConstructor('BindEvent');
+    let bindEvent: BindEvent;
+    if (!options) {
+      bindEvent = BindEvent.from(
+        {
+          ...bindEventOptions,
+          name: this.getBindEventUniqueName(),
+        },
+        this,
+        'bindEvents',
+      );
+    } else if (typeof options === 'string') {
+      bindEvent = BindEvent.from(
+        {
+          ...bindEventOptions,
+          name: options,
+        },
+        this,
+        'bindEvents',
+      );
+    } else if (asserts.isBindEvent(options)) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      bindEvent = options;
+      Object.assign(bindEvent, relationOptions);
+    } else {
+      bindEvent = BindEvent.from(
+        {
+          ...bindEventOptions,
+          ...options,
+        },
+        this,
+        'bindEvents',
+      );
+    }
+    this.bindEvents.splice(index, 0, bindEvent);
+    return bindEvent;
+  }
+
+  /**
+   * 插入元素绑定事件
+   * @param name 元素绑定事件名称，如果不填会自动生成一个唯一名称
+   */
+  insertBindEventAt(name: string, index: number): BindEvent;
+
+  /**
+   * 插入元素绑定事件
+   * @param bindEventOptions 元素绑定事件参数
+   */
+  insertBindEventAt(bindEventOptions: Partial<BindEvent>, index: number): BindEvent;
+
+  /**
+   * 插入元素绑定事件
+   * @param bindEvent 已有的元素绑定事件实例
+   */
+  insertBindEventAt(bindEvent: BindEvent, index: number): BindEvent;
+
+  insertBindEventAt(options: string | Partial<BindEvent> | BindEvent, index: number) {
+    const node = this._insertBindEventAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'bindEvents',
+    });
+    return node;
+  }
+
+  /**
+   * 添加元素绑定事件
+   * @internal
+   * @param name 元素绑定事件名称，如果不填会自动生成一个唯一名称
+   */
+  _addBindEvent(name?: string): BindEvent;
+
+  /**
+   * 添加元素绑定事件
+   * @internal
+   * @param bindEventOptions 元素绑定事件参数
+   */
+  _addBindEvent(bindEventOptions: Partial<BindEvent>): BindEvent;
+
+  /**
+   * 添加元素绑定事件
+   * @internal
+   * @param bindEvent 已有的元素绑定事件实例
+   */
+  _addBindEvent(bindEvent: BindEvent): BindEvent;
+
+  _addBindEvent(options?: string | Partial<BindEvent> | BindEvent) {
+    const index = this.bindEvents.length;
+    return this._insertBindEventAt(options as any, index);
+  }
+
+  /**
+   * 添加元素绑定事件
+   * @internal
+   * @param name 元素绑定事件名称，如果不填会自动生成一个唯一名称
+   */
+  addBindEvent(name?: string): BindEvent;
+
+  /**
+   * 添加元素绑定事件
+   * @param bindEventOptions 元素绑定事件参数
+   */
+  addBindEvent(bindEventOptions: Partial<BindEvent>): BindEvent;
+
+  /**
+   * 添加元素绑定事件
+   * @param bindEvent 已有的元素绑定事件实例
+   */
+  addBindEvent(bindEvent: BindEvent): BindEvent;
+
+  addBindEvent(options?: string | Partial<BindEvent> | BindEvent) {
+    const node = this._addBindEvent(options as any);
+    const index = this.bindEvents.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'bindEvents',
+    });
+    return node;
+  }
+
+  getLogicExistingNames(excludedList: Array<BusinessLogic> = []) {
+    const excludedSet = new Set(excludedList);
+    return ((this.logics as BusinessLogic[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item?.name);
+  }
+  getLogicUniqueName(name = 'logic1') {
+    return utils.unique(name, this.getLogicExistingNames(), undefined, false);
+  }
+
+  /**
+   * 插入业务组件逻辑
+   * @internal
+   * @param name 业务组件逻辑名称，如果不填会自动生成一个唯一名称
+   */
+  _insertLogicAt(name: string, index: number): BusinessLogic;
+
+  /**
+   * 插入业务组件逻辑
+   * @internal
+   * @param logicOptions 业务组件逻辑参数
+   */
+  _insertLogicAt(logicOptions: Partial<BusinessLogic>, index: number): BusinessLogic;
+
+  /**
+   * 插入业务组件逻辑
+   * @internal
+   * @param logic 已有的业务组件逻辑实例
+   */
+  _insertLogicAt(logic: BusinessLogic, index: number): BusinessLogic;
+
+  _insertLogicAt(options: string | Partial<BusinessLogic> | BusinessLogic, index: number) {
+    const logicOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'logics' };
+    const BusinessLogic = getConceptConstructor('BusinessLogic');
+    let logic: BusinessLogic;
+    if (!options) {
+      logic = BusinessLogic.from(
+        {
+          ...logicOptions,
+          name: this.getLogicUniqueName(),
+        },
+        this,
+        'logics',
+      );
+    } else if (typeof options === 'string') {
+      logic = BusinessLogic.from(
+        {
+          ...logicOptions,
+          name: options,
+        },
+        this,
+        'logics',
+      );
+    } else if (asserts.isBusinessLogic(options)) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      logic = options;
+      Object.assign(logic, relationOptions);
+    } else {
+      logic = BusinessLogic.from(
+        {
+          ...logicOptions,
+          ...options,
+        },
+        this,
+        'logics',
+      );
+    }
+    this.logics.splice(index, 0, logic);
+    return logic;
+  }
+
+  /**
+   * 插入业务组件逻辑
+   * @param name 业务组件逻辑名称，如果不填会自动生成一个唯一名称
+   */
+  insertLogicAt(name: string, index: number): BusinessLogic;
+
+  /**
+   * 插入业务组件逻辑
+   * @param logicOptions 业务组件逻辑参数
+   */
+  insertLogicAt(logicOptions: Partial<BusinessLogic>, index: number): BusinessLogic;
+
+  /**
+   * 插入业务组件逻辑
+   * @param logic 已有的业务组件逻辑实例
+   */
+  insertLogicAt(logic: BusinessLogic, index: number): BusinessLogic;
+
+  insertLogicAt(options: string | Partial<BusinessLogic> | BusinessLogic, 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): BusinessLogic;
+
+  /**
+   * 添加业务组件逻辑
+   * @internal
+   * @param logicOptions 业务组件逻辑参数
+   */
+  _addLogic(logicOptions: Partial<BusinessLogic>): BusinessLogic;
+
+  /**
+   * 添加业务组件逻辑
+   * @internal
+   * @param logic 已有的业务组件逻辑实例
+   */
+  _addLogic(logic: BusinessLogic): BusinessLogic;
+
+  _addLogic(options?: string | Partial<BusinessLogic> | BusinessLogic) {
+    const index = this.logics.length;
+    return this._insertLogicAt(options as any, index);
+  }
+
+  /**
+   * 添加业务组件逻辑
+   * @internal
+   * @param name 业务组件逻辑名称，如果不填会自动生成一个唯一名称
+   */
+  addLogic(name?: string): BusinessLogic;
+
+  /**
+   * 添加业务组件逻辑
+   * @param logicOptions 业务组件逻辑参数
+   */
+  addLogic(logicOptions: Partial<BusinessLogic>): BusinessLogic;
+
+  /**
+   * 添加业务组件逻辑
+   * @param logic 已有的业务组件逻辑实例
+   */
+  addLogic(logic: BusinessLogic): BusinessLogic;
+
+  addLogic(options?: string | Partial<BusinessLogic> | BusinessLogic) {
+    const node = this._addLogic(options as any);
+    const index = this.logics.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'logics',
+    });
+    return node;
+  }
+
+  /**
+   * 插入页面元素
+   * @internal
+   * @param name 页面元素名称，如果不填会自动生成一个唯一名称
+   */
+  _insertViewElementAt(name: string, index: number): ViewElement;
+
+  /**
+   * 插入页面元素
+   * @internal
+   * @param viewElementOptions 页面元素参数
+   */
+  _insertViewElementAt(viewElementOptions: Partial<ViewElement>, index: number): ViewElement;
+
+  /**
+   * 插入页面元素
+   * @internal
+   * @param viewElement 已有的页面元素实例
+   */
+  _insertViewElementAt(viewElement: ViewElement, index: number): ViewElement;
+
+  _insertViewElementAt(options: string | Partial<ViewElement> | ViewElement, index: number) {
+    const viewElementOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'elements' };
+    const ViewElement = getConceptConstructor('ViewElement');
+    let viewElement: ViewElement;
+    if (!options) {
+      viewElement = ViewElement.from(
+        {
+          ...viewElementOptions,
+          name: this.getViewElementUniqueName(),
+        },
+        this,
+        'elements',
+      );
+    } else if (typeof options === 'string') {
+      viewElement = ViewElement.from(
+        {
+          ...viewElementOptions,
+          name: options,
+        },
+        this,
+        'elements',
+      );
+    } else if (asserts.isViewElement(options)) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      viewElement = options;
+      Object.assign(viewElement, relationOptions);
+    } else {
+      viewElement = ViewElement.from(
+        {
+          ...viewElementOptions,
+          ...options,
+        },
+        this,
+        'elements',
+      );
+    }
+    this.elements.splice(index, 0, viewElement);
+    return viewElement;
+  }
+
+  /**
+   * 插入页面元素
+   * @param name 页面元素名称，如果不填会自动生成一个唯一名称
+   */
+  insertViewElementAt(name: string, index: number): ViewElement;
+
+  /**
+   * 插入页面元素
+   * @param viewElementOptions 页面元素参数
+   */
+  insertViewElementAt(viewElementOptions: Partial<ViewElement>, index: number): ViewElement;
+
+  /**
+   * 插入页面元素
+   * @param viewElement 已有的页面元素实例
+   */
+  insertViewElementAt(viewElement: ViewElement, index: number): ViewElement;
+
+  insertViewElementAt(options: string | Partial<ViewElement> | ViewElement, index: number) {
+    const node = this._insertViewElementAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'elements',
+    });
+    return node;
+  }
+
+  /**
+   * 添加页面元素
+   * @internal
+   * @param name 页面元素名称，如果不填会自动生成一个唯一名称
+   */
+  _addViewElement(name?: string): ViewElement;
+
+  /**
+   * 添加页面元素
+   * @internal
+   * @param viewElementOptions 页面元素参数
+   */
+  _addViewElement(viewElementOptions: Partial<ViewElement>): ViewElement;
+
+  /**
+   * 添加页面元素
+   * @internal
+   * @param viewElement 已有的页面元素实例
+   */
+  _addViewElement(viewElement: ViewElement): ViewElement;
+
+  _addViewElement(options?: string | Partial<ViewElement> | ViewElement) {
+    const index = this.elements.length;
+    return this._insertViewElementAt(options as any, index);
+  }
+
+  /**
+   * 添加页面元素
+   * @internal
+   * @param name 页面元素名称，如果不填会自动生成一个唯一名称
+   */
+  addViewElement(name?: string): ViewElement;
+
+  /**
+   * 添加页面元素
+   * @param viewElementOptions 页面元素参数
+   */
+  addViewElement(viewElementOptions: Partial<ViewElement>): ViewElement;
+
+  /**
+   * 添加页面元素
+   * @param viewElement 已有的页面元素实例
+   */
+  addViewElement(viewElement: ViewElement): ViewElement;
+
+  addViewElement(options?: string | Partial<ViewElement> | ViewElement) {
+    const node = this._addViewElement(options as any);
+    const index = this.elements.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'elements',
+    });
+    return node;
+  }
+
+  /**
+   * 删除组件事件
+   * @param name 组件事件名称
+   */
+  removeEvent(name: string): void;
+
+  /**
+   * 删除组件事件
+   * @param event 已有的组件事件实例
+   */
+  removeEvent(event: Event): void;
+
+  removeEvent(options: string | Event) {
+    let event: Event;
+    if (typeof options === 'string') {
+      event = (this.events as Event[]).find((item) => item.name === options);
+      if (!event) {
+        throw new Error('找不到组件事件 ' + options);
+      }
+    } else {
+      event = options;
+    }
+    return event.delete();
+  }
+
+  __removeEvent(event: Event) {
+    const parentKey = event.parentKey;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: event,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      // @ts-ignore
+      const t = this.__v_raw || this;
+      // @ts-ignore
+      const n = event.__v_raw || event;
+      if (Array.isArray((t as any)[parentKey])) {
+        // @ts-ignore
+        const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else {
+        const q = (t as any)[parentKey];
+        if ((q.__v_raw || q) === n) {
+          params.index = 0;
+          (this as any)[parentKey] = undefined;
+        }
+      }
+    }
+    return params;
+  }
+
+  /**
+   * 删除参数分组
+   * @param name 参数分组名称
+   */
+  removeParam(name: string): void;
+
+  /**
+   * 删除参数分组
+   * @param param 已有的参数分组实例
+   */
+  removeParam(param: ParamWithGroup): void;
+
+  removeParam(options: string | ParamWithGroup) {
+    let param: ParamWithGroup;
+    if (typeof options === 'string') {
+      param = (this.params as ParamWithGroup[]).find((item) => item.name === options);
+      if (!param) {
+        throw new Error('找不到参数分组 ' + options);
+      }
+    } else {
+      param = options;
+    }
+    return param.delete();
+  }
+
+  __removeParam(param: Param) {
+    const parentKey = param.parentKey;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: param,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      // @ts-ignore
+      const t = this.__v_raw || this;
+      // @ts-ignore
+      const n = param.__v_raw || param;
+      if (Array.isArray((t as any)[parentKey])) {
+        // @ts-ignore
+        const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else {
+        const q = (t as any)[parentKey];
+        if ((q.__v_raw || q) === n) {
+          params.index = 0;
+          (this as any)[parentKey] = undefined;
+        }
+      }
+    }
+    return params;
+  }
+
+  /**
+   * 删除变量
+   * @param name 变量名称
+   */
+  removeVariable(name: string): void;
+
+  /**
+   * 删除变量
+   * @param variable 已有的变量实例
+   */
+  removeVariable(variable: Variable): void;
+
+  removeVariable(options: string | Variable) {
+    let variable: Variable;
+    if (typeof options === 'string') {
+      variable = (this.variables as Variable[]).find((item) => item.name === options);
+      if (!variable) {
+        throw new Error('找不到变量 ' + options);
+      }
+    } else {
+      variable = options;
+    }
+    return variable.delete();
+  }
+
+  __removeVariable(variable: Variable) {
+    const parentKey = variable.parentKey;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: variable,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      // @ts-ignore
+      const t = this.__v_raw || this;
+      // @ts-ignore
+      const n = variable.__v_raw || variable;
+      if (Array.isArray((t as any)[parentKey])) {
+        // @ts-ignore
+        const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else {
+        const q = (t as any)[parentKey];
+        if ((q.__v_raw || q) === n) {
+          params.index = 0;
+          (this as any)[parentKey] = undefined;
+        }
+      }
+    }
+    return params;
+  }
+
+  /**
+   * 删除元素绑定事件
+   * @param name 元素绑定事件名称
+   */
+  removeBindEvent(name: string): void;
+
+  /**
+   * 删除元素绑定事件
+   * @param bindEvent 已有的元素绑定事件实例
+   */
+  removeBindEvent(bindEvent: BindEvent): void;
+
+  removeBindEvent(options: string | BindEvent) {
+    let bindEvent: BindEvent;
+    if (typeof options === 'string') {
+      bindEvent = (this.bindEvents as BindEvent[]).find((item) => item.name === options);
+      if (!bindEvent) {
+        throw new Error('找不到元素绑定事件 ' + options);
+      }
+    } else {
+      bindEvent = options;
+    }
+    return bindEvent.delete();
+  }
+
+  __removeBindEvent(bindEvent: BindEvent) {
+    const parentKey = bindEvent.parentKey;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: bindEvent,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      // @ts-ignore
+      const t = this.__v_raw || this;
+      // @ts-ignore
+      const n = bindEvent.__v_raw || bindEvent;
+      if (Array.isArray((t as any)[parentKey])) {
+        // @ts-ignore
+        const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else {
+        const q = (t as any)[parentKey];
+        if ((q.__v_raw || q) === n) {
+          params.index = 0;
+          (this as any)[parentKey] = undefined;
+        }
+      }
+    }
+    return params;
+  }
+
+  /**
+   * 删除业务组件逻辑
+   * @param name 业务组件逻辑名称
+   */
+  removeLogic(name: string): void;
+
+  /**
+   * 删除业务组件逻辑
+   * @param logic 已有的业务组件逻辑实例
+   */
+  removeLogic(logic: BusinessLogic): void;
+
+  removeLogic(options: string | BusinessLogic) {
+    let logic: BusinessLogic;
+    if (typeof options === 'string') {
+      logic = (this.logics as BusinessLogic[]).find((item) => item.name === options);
+      if (!logic) {
+        throw new Error('找不到业务组件逻辑 ' + options);
+      }
+    } else {
+      logic = options;
+    }
+    return logic.delete();
+  }
+
+  __removeLogic(logic: Logic) {
+    const parentKey = logic.parentKey;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: logic,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      // @ts-ignore
+      const t = this.__v_raw || this;
+      // @ts-ignore
+      const n = logic.__v_raw || logic;
+      if (Array.isArray((t as any)[parentKey])) {
+        // @ts-ignore
+        const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else {
+        const q = (t as any)[parentKey];
+        if ((q.__v_raw || q) === n) {
+          params.index = 0;
+          (this as any)[parentKey] = undefined;
+        }
+      }
+    }
+    return params;
+  }
+
+  /**
+   * 删除页面元素
+   * @param name 页面元素名称
+   */
+  removeViewElement(name: string): void;
+
+  /**
+   * 删除页面元素
+   * @param viewElement 已有的页面元素实例
+   */
+  removeViewElement(viewElement: ViewElement): void;
+
+  removeViewElement(options: string | ViewElement) {
+    let viewElement: ViewElement;
+    if (typeof options === 'string') {
+      viewElement = (this.elements as ViewElement[]).find((item) => item.name === options);
+      if (!viewElement) {
+        throw new Error('找不到页面元素 ' + options);
+      }
+    } else {
+      viewElement = options;
+    }
+    return viewElement.delete();
+  }
+
+  __removeViewElement(viewElement: ViewElement) {
+    const parentKey = viewElement.parentKey;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: viewElement,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      // @ts-ignore
+      const t = this.__v_raw || this;
+      // @ts-ignore
+      const n = viewElement.__v_raw || viewElement;
+      if (Array.isArray((t as any)[parentKey])) {
+        // @ts-ignore
+        const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else {
+        const q = (t as any)[parentKey];
+        if ((q.__v_raw || q) === n) {
+          params.index = 0;
+          (this as any)[parentKey] = undefined;
+        }
+      }
+    }
+    return params;
+  }
+
+  //================================================================================
+  // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+  // 自动生成的代码已结束。下面可以手动编写。
+  //================================================================================
+  static getDefaultOptions() {
+    return {
+      title: '业务组件',
+    };
+  }
+
+  getNamespace(): string {
+    if (this.parentNode && (this.parentNode as FrontendType).getNamespace) {
+      const parentNamespace = (this.parentNode as FrontendType).getNamespace();
+      const parentName = this.parentNode.name;
+      const arr = [parentNamespace];
+      if (this.parentNode.concept !== 'App' && parentName) {
+        arr.push(parentName);
+      }
+      return `${arr.join('.')}.businessComponents`;
+    }
+    throw new Error('无法获取命名空间，请设置 parentNode！');
+  }
+
+  getTsNamespace() {
+    const parentNodeNamespace = this.getNamespace();
+    let tsCalleeNamespace = parentNodeNamespace.replace(/\.[0-9]/g, (m) => m.replace('.', '.$'));
+    tsCalleeNamespace = tsCalleeNamespace.replace(/-/g, '_');
+    return tsCalleeNamespace;
+  }
+
+  /**
+   * 获取当前业务组件下所有elements上bindEvents下的logic
+   */
+  elementLogicRoot: any[] = [];
+
+  getElementLogicRoot() {
+    const Param = getConceptConstructor('Param');
+    const logics: Array<Logic> = [];
+    // 页面上的绑定的事件
+    this.bindEvents.forEach((bindEvent) => {
+      bindEvent.logics.forEach((logic) => {
+        // 键盘事件
+        if (['keydown', 'keyup'].includes(bindEvent.name)) {
+          logic.virtualParams = [
+            Param.from(
+              {
+                name: 'event',
+                typeAnnotation: null,
+              },
+              logic,
+              'virtualParams',
+            ),
+          ];
+        }
+        // 生命周期没有event
+        logics.push(logic);
+      });
+    });
+    this.elements.forEach((item) => {
+      utils.traverse(
+        (current) => {
+          current.node.bindEvents.forEach((bindEvent) => {
+            bindEvent.logics.forEach((logic) => {
+              if (logic.name.startsWith('__')) {
+                return;
+              }
+              // 绑定参数才有 event 的 current
+              logic.virtualParams = bindEvent.getContextRenderLogicParams(logic);
+              logics.push(logic);
+            });
+          });
+        },
+        { node: item },
+      );
+    });
+    if (logics.length) {
+      const expanded = (this.elementLogicRoot.length && this.elementLogicRoot[0].expanded) || false;
+      this.elementLogicRoot = [
+        {
+          concept: 'elementLogicRoot',
+          expanded,
+          children: logics,
+        },
+      ];
+    } else {
+      this.elementLogicRoot = [];
+    }
+  }
+
+  getVarExistingNames(excludedList: Array<Param | Variable> = []) {
+    const excludedSet = new Set(excludedList);
+    const varList: any[] = [];
+    if (Array.isArray(this.params)) {
+      varList.push(...this.params);
+    }
+    if (Array.isArray(this.variables)) {
+      varList.push(...this.variables);
+    }
+    if (Array.isArray(this.logics)) {
+      this.logics.forEach((logic) => {
+        varList.push(logic);
+        if (Array.isArray(logic.params)) {
+          varList.push(...logic.params);
+        }
+        if (Array.isArray(logic.returns)) {
+          varList.push(...logic.returns);
+        }
+        if (Array.isArray(logic.variables)) {
+          varList.push(...logic.variables);
+        }
+      });
+    }
+    // 事件逻辑的变量不允许和页面逻辑下的重复
+    if (Array.isArray(this.elementLogicRoot) && this.elementLogicRoot.length) {
+      this.elementLogicRoot[0]?.children.forEach((logic: Logic) => {
+        if (Array.isArray(logic.variables)) {
+          varList.push(...logic.variables);
+        }
+      });
+    }
+    return varList.filter((item) => !excludedSet.has(item)).map((item) => item.name);
+  }
+
+  existingViewElement: Set<string> = new Set<string>();
+
+  // 收集已经存在的ViewElement
+  collectExistingViewElementName(excludedList: Array<ViewElement> = []) {
+    const excludedSet = new Set(excludedList);
+    this.elements.forEach((element) => {
+      utils.traverse(
+        ({ node }) => {
+          if (!excludedSet.has(node)) {
+            this.existingViewElement.add(node.name);
+          }
+        },
+        {
+          node: element,
+        },
+      );
+    });
+  }
+
+  // 获取当前业务组件的所有组件的名字
+  getViewElementExistingNames(excludedList: Array<ViewElement> = []) {
+    if (!this.existingViewElement.size) {
+      this.collectExistingViewElementName();
+    }
+    return Array.from(this.existingViewElement);
+  }
+
+  getViewElementUniqueNameOld(name = 'viewElement1') {
+    this.collectExistingViewElementName();
+    const viewElementUniqueName = utils.unique(name, this.existingViewElement);
+    this.existingViewElement.add(viewElementUniqueName);
+    return viewElementUniqueName;
+  }
+
+  getViewElementUniqueName(name = 'viewElement_1') {
+    this.collectExistingViewElementName();
+    const BranchCopyUniCode = getBranchCopyUniCode();
+    let newName = name;
+    const prefix = name.replace(/\d*$/, '');
+    if (BranchCopyUniCode && prefix.indexOf(`_${BranchCopyUniCode}_`) === -1) {
+      newName = name.replace(/\d*$/, (m) => `_${BranchCopyUniCode}_${m}`);
+    }
+    // 主分支无 BranchCopyUniCode
+    if (!BranchCopyUniCode && prefix.at(-1) !== '_') {
+      newName = name.replace(/\d*$/, (m) => `_${m}`);
+    }
+    const newPrefix = newName.replace(/\d*$/, '');
+    const newPrefixNum = removedViewElementCache?.[newPrefix] ? removedViewElementCache[newPrefix] : 1;
+    const startNum =
+      newPrefixNum < Number.MAX_SAFE_INTEGER ? (newPrefixNum as number) + 1 : BigInt(newPrefixNum) + BigInt(1);
+    const viewElementUniqueName = utils.uniqueMax(
+      newName,
+      this.existingViewElement,
+      removedViewElementCache?.[newPrefix] ? startNum : newPrefixNum,
+    );
+    this.existingViewElement.add(viewElementUniqueName);
+    return viewElementUniqueName;
+  }
+
+  // 获取当前element，铺平
+  elementsMethods(elements: Array<ViewElement>, allMethods: Array<ViewElement>, parentNodeNames: Array<string>) {
+    if (elements) {
+      elements.forEach((item: ViewElement) => {
+        const { bindAttrs = [], name } = item;
+        const isDataSource = bindAttrs.some((attr) => attr.name === 'data-source');
+        const isInclude = parentNodeNames.includes(name);
+
+        allMethods.push(item);
+        if (item.children) {
+          if (isDataSource) {
+            if (isInclude) {
+              this.elementsMethods(item.children, allMethods, parentNodeNames);
+            }
+          } else {
+            this.elementsMethods(item.children, allMethods, parentNodeNames);
+          }
+        }
+      });
+    }
+  }
+
+  mergeBlock({ code, nodePath, position, cb }: { code: string; nodePath: string; position: string; cb?: Function }) {
+    const ViewElement = getConceptConstructor('ViewElement');
+    const Logic = getConceptConstructor('Logic');
+    const ParamWithGroup = getConceptConstructor('ParamWithGroup');
+    const Variable = getConceptConstructor('Variable');
+    const BindEvent = getConceptConstructor('BindEvent');
+    const Structure = getConceptConstructor('Structure');
+    const template = utils.sliceTagContent(code, 'template');
+    let targetNode = (this.getAncestor('App') as App)?.findNodeByPath(nodePath);
+    let parentNode = position === 'append' ? targetNode : targetNode.parentNode;
+    const definitionStr = utils.sliceTagContent(code, 'definition') || '{}';
+    const definition: any = JSON.parse(definitionStr);
+    let node = null;
+    if (template) {
+      node = ViewElement.fromHTML(template, {
+        view: this,
+        definition,
+      });
+      if (!parentNode) {
+        return;
+      }
+      if (position === 'append') {
+        parentNode.addViewElement(node);
+        cb && cb(parentNode, node);
+      } else {
+        const index = targetNode.getIndexOfParent();
+        if (position === 'insertBefore') {
+          parentNode.insertViewElementAt(node, index);
+        } else if (position === 'insertAfter') {
+          parentNode.insertViewElementAt(node, index + 1);
+        }
+      }
+    }
+
+    // 服务端逻辑
+    if (Array.isArray(definition.logics)) {
+      definition.logics.forEach((logicOption: any) => {
+        const logic = Logic.from(
+          {
+            ...logicOption,
+          },
+          this.rootNode,
+          'logics',
+        );
+        (this.rootNode as App).addLogic(logic);
+      });
+    }
+
+    // 全局结构体
+    if (Array.isArray(definition.structures)) {
+      definition.structures.forEach((structureOption: any) => {
+        const structure = Structure.from(
+          {
+            ...structureOption,
+          },
+          this.rootNode,
+          'structures',
+        );
+        (this.rootNode as App).addStructure(structure);
+      });
+    }
+
+    // 页面入参
+    if (Array.isArray(definition.viewParams)) {
+      definition.viewParams.forEach((paramsOption: any) => {
+        const param = ParamWithGroup.from(
+          {
+            ...paramsOption,
+          },
+          this,
+          'params',
+        );
+        this._addParam(param);
+        param.addParamsPrepare();
+      });
+    }
+    // 页面变量
+    if (Array.isArray(definition.viewVariables)) {
+      definition.viewVariables.forEach((variableOption: any) => {
+        const variable = Variable.from(
+          {
+            ...variableOption,
+          },
+          this,
+          'variables',
+        );
+        this.addVariable(variable);
+      });
+    }
+
+    // 页面事件
+    if (Array.isArray(definition.viewBindEvents)) {
+      definition.viewBindEvents.forEach((eventOption: any) => {
+        const newLogic = definition.viewLogics.find((logic: Logic) => eventOption.calleeName === logic.name);
+        const bindEvent = this.bindEvents.find((currentEventItem) => currentEventItem.name === eventOption.name);
+
+        // 如果没有event对象就先新增一个，如果已经有了就在内部添加logic
+        if (!bindEvent) {
+          const event = BindEvent.from(
+            {
+              ...eventOption,
+              calleeName: '',
+              logics: [newLogic],
+            },
+            this,
+            'events',
+          );
+          this.addBindEvent(event);
+        } else {
+          bindEvent.addLogic(newLogic);
+        }
+      });
+    }
+    return node;
+  }
+
+  onChange($event?: EventPayload): void {
+    this.emit('change', $event);
+  }
+
+  /**
+   * 转换成设计器中使用的 Vue template 内容
+   * @param options
+   */
+  genDesignerVueTemplate(options?: { asCompontent?: boolean }) {
+    return this.elements
+      .map(
+        (element) =>
+          `${element.toDesignerVue({
+            isRoot: true,
+            asCompontent: options?.asCompontent,
+          })}\n`,
+      )
+      .join('');
+  }
+
+  get frontendType() {
+    return this.getAncestor('FrontendType') as FrontendType;
+  }
+
+  get path() {
+    return `/${this.frontendType?.kind}/${this.name}`;
+  }
+
+  get slotElems() {
+    const slotElems: ViewElement[] = [];
+    this.elements.forEach((element) => {
+      utils.traverse(
+        ({ node }) => {
+          if (node.tag === 'slot') {
+            slotElems.push(node);
+          }
+        },
+        {
+          node: element,
+        },
+      );
+    });
+    return slotElems;
+  }
+
+  /**
+   * 生成宿主语言的文件路径
+   * @param name 一般不用传，用于 rename
+   */
+  getEmbeddedFilePath(name = this.name) {
+    return `/embedded/${this.rootNode?.name || this.parentNode.name}/frontendTypes/${this.getAncestor('FrontendType')?.name
+      }/${name}.ts`;
+  }
+
+  *toEmbeddedTSFile(): EmbeddedTSFileGenerator {
+    let code = `namespace ${this.getTsNamespace()} {\n`;
+    const state = createCompilerState(code, {
+      tabSize: 1,
+    });
+
+    try {
+      code += yield* this.toEmbeddedTS(state);
+    } catch (err) {
+      code += '';
+      console.log(err);
+    }
+
+    code += '}\n';
+
+    return {
+      code,
+      filePath: this.getEmbeddedFilePath(),
+      sourceMap: state.sourceMap,
+    };
+  }
+
+  getAncestorViewElementsWithDataSource(logic: Logic): ViewElement[] {
+    let element: types.SyntaxNode = logic;
+    const viewElements: ViewElement[] = [];
+    while (element) {
+      if (
+        element.concept &&
+        element.concept === 'ViewElement' &&
+        (element as ViewElement).bindAttrs.find((bAttr) => bAttr.name === 'data-source')
+      ) {
+        viewElements.push(element as ViewElement);
+      }
+      element = element.parentNode;
+    }
+    return viewElements;
+  }
+
+  *handleCurrentItemCode(code: string, logic: Logic) {
+    const viewElementsWithDataSource: ViewElement[] = this.getAncestorViewElementsWithDataSource(logic);
+    yield* wrapForEach(viewElementsWithDataSource, function* wrapForEach(viewElement, index) {
+      const currentIndex = viewElementsWithDataSource.length - 1 - index;
+      const currentItemCode = `current${currentIndex === 0 ? '' : currentIndex}.item`;
+      if (code.includes(currentItemCode)) {
+        const dataSource = viewElement.bindAttrs.find((bAttr) => bAttr.name === 'data-source');
+        if (dataSource) {
+          const businessComponent = viewElement.getAncestor('BusinessComponent') as BusinessComponent;
+          const dataSourceTS = yield* dataSource.expression.toEmbeddedTS();
+          const logic = businessComponent.logics.find((logic) => logic.name === dataSourceTS);
+          if (logic) {
+            code = code.replaceAll(
+              currentItemCode,
+              `nasl.ui.getCurrentItemType(${dataSourceTS}(${logic.params.map(() => 'null').join(',')}))`,
+            );
+          } else {
+            const variable = businessComponent.variables.find((variable) => variable.name === dataSourceTS);
+            code = code.replaceAll(
+              currentItemCode,
+              `nasl.ui.getCurrentItemType(${variable ? variable.name : dataSourceTS})`,
+            );
+          }
+        }
+      }
+    });
+    return code;
+  }
+
+  removeExistingViewElement(viewElement: ViewElement) {
+    if (this.existingViewElement.has(viewElement.name)) {
+      this.existingViewElement.delete(viewElement.name);
+    }
+
+    const prefix = viewElement?.name.replace(/\d*$/, '');
+    let lastDigit = viewElement?.name.match(/\d+$/)?.[0];
+    if (lastDigit === undefined) return;
+
+    //@ts-ignore
+    lastDigit = lastDigit < Number.MAX_SAFE_INTEGER ? parseInt(lastDigit) : BigInt(lastDigit);
+
+    if (removedViewElementCache?.[prefix]) {
+      //@ts-ignore
+      if (lastDigit > removedViewElementCache[prefix])
+        //@ts-ignore
+        removedViewElementCache[prefix] = lastDigit;
+    } else {
+      //@ts-ignore
+      removedViewElementCache[prefix] = lastDigit;
+    }
+  }
+
+  *getRightCode(code: string, assignment: Assignment | BatchAssignment, rightNode: any) {
+    code = code.replaceAll('\n', ' ');
+    const logic = assignment.logic;
+    const logicRtn = logic?.returns[0];
+    // 调用接口，参数替换成 null
+    if (asserts.isCallInterface(rightNode)) {
+      const { _interface } = rightNode.getModuleInterface();
+      return _interface
+        ? `${rightNode.tsCalleeKey}(${(_interface as Interface).params.map(() => 'null').join(',')})`
+        : null;
+    }
+
+    // 调用服务端逻辑，参数替换成 null
+    if (asserts.isCallLogic(rightNode) && rightNode.calleeNamespace === 'app.logics') {
+      const calleeName = rightNode?.calleeName;
+      const calleeLogic = (this.getAncestor('App') as App).logics.find((l) => l.name === calleeName);
+      return calleeLogic ? `app.logics.${calleeName}(${calleeLogic.params.map(() => 'null').join(',')})` : null;
+    }
+
+    // view 局部变量，申明提升前增加判断，使用 logic 内的 result 直接替换成对应 logic，logic 内部变量替换成 null
+    if (logicRtn && code.includes(logicRtn.name)) {
+      if (code === logicRtn.name) return `${logic.name}(${logic.params.map(() => 'null').join(',')})`;
+
+      code = this.handleReplaceCode(code, logicRtn.name, `${logic.name}(${logic.params.map(() => 'null').join(',')})`);
+      logic.params.forEach((param) => {
+        if (code.includes(param.name)) code = this.handleReplaceCode(code, param.name, 'null');
+      });
+      logic.variables.forEach((variable) => {
+        if (code.includes(variable.name)) code = this.handleReplaceCode(code, variable.name, 'null');
+      });
+      return code;
+    }
+
+    // 处理 current.item、current1.item 等数据
+    if (/current(\d)*\.item/.test(code)) {
+      code = yield* this.handleCurrentItemCode(code, logic);
+      return code;
+    }
+
+    // 直接赋值 logic 内局部变量、输入参数直接提示系统无法推断类型
+    const useLogicVar =
+      logic.params.find((param) => code.includes(param.name)) ||
+      logic.variables.find((variable) => code.includes(variable.name));
+    return useLogicVar ? 'null' : code;
+  }
+
+  handleReplaceCode(code: string, variable: string, replaceCode: string) {
+    return code.replace(/\S+/g, ($1) => {
+      if ($1 === `${variable},`) return `${replaceCode},`;
+      if ($1 === variable) return replaceCode;
+
+      let fnCode = $1;
+      if ($1.startsWith(`${variable}.`)) fnCode = $1.replaceAll(`${variable}.`, `${replaceCode}.`);
+      if ($1.startsWith(`${variable},`)) fnCode = $1.replaceAll(`${variable},`, `${replaceCode},`);
+      if ($1.includes(`(${variable},`)) fnCode = $1.replaceAll(`(${variable},`, `(${replaceCode},`);
+      if ($1.includes(`(${variable}.`)) fnCode = $1.replaceAll(`(${variable}.`, `(${replaceCode}.`);
+      if ($1.includes(`(${variable})`)) fnCode = $1.replaceAll(`(${variable})`, `(${replaceCode})`);
+      if ($1.includes(`,${variable},`)) fnCode = $1.replaceAll(`,${variable},`, `,${replaceCode},`);
+      if ($1.includes(`,${variable}.`)) fnCode = $1.replaceAll(`,${variable}.`, `,${replaceCode}.`);
+      if ($1.includes(`,${variable})`)) fnCode = $1.replaceAll(`,${variable})`, `,${replaceCode})`);
+      return fnCode;
+    });
+  }
+
+  // 获取当前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);
+        }
+      });
+    }
+  }
+
+  elementsAttrsAll(elements: Array<ViewElement>, componentListExtra: Array<ViewElement>) {
+    if (elements) {
+      elements.forEach((item: ViewElement) => {
+        if (!PAGE_COMPONENT_INCLUDE_TAG_MAP?.[item.tag]) {
+          componentListExtra.push(item);
+        }
+        if (item.children.length > 0) {
+          this.elementsAttrsAll(item.children, componentListExtra);
+        }
+      });
+    }
+  }
+
+  @withSourceMapGenerator
+  *toEmbeddedTS(state = createCompilerState()): TranslatorGenerator {
+    const self = this;
+    // 获取虚拟logic的参数和内容
+    // 用作展示和tots查找引用
+    self.getElementLogicRoot();
+    let code = `export class ${self.tsName} extends nasl.ui.VueComponent {\n`;
+    // 需要类型推导的局部变量/返回值需要调整申明顺序
+    code += `constructor(
+      options?: {
+        [propname: string]: any,
+        bindAttr?: {
+          __NASLIF?: nasl.core.Boolean,
+    `;
+    if (Array.isArray(self.params)) {
+      yield* wrapForEach(self.params, function* warpForEachGenerator(param, index) {
+        code += `${param.name}?: `;
+        code += yield* param.typeAnnotation.toEmbeddedTS(shiftState(state, code));
+        code += ',\n';
+      });
+    }
+    code += `
+        },
+        slotDefault?: () => Array<any>,
+      }) {
+        super();\n`;
+
+    // 绑定事件
+    if (Array.isArray(self.bindEvents)) {
+      yield* wrapForEach(self.bindEvents, function* warpForEachGenerator(event) {
+        code += yield* event.toEmbeddedTS(
+          shiftState(state, code, {
+            tabSize: state?.tabSize || 0,
+          }),
+          true,
+        );
+        code += '\n';
+      });
+    }
+    code += `\n}`;
+    // 自定义事件的定义
+    if (Array.isArray(self.events) && self.events.length) {
+      code += indent((state?.tabSize || 0) + 1);
+      yield* wrapForEach(self.events, function* warpForEachGenerator(event) {
+        code += yield* event.toEmbeddedTS(
+          shiftState(state, code, {
+            tabSize: (state?.tabSize || 0) + 2,
+          }),
+        );
+        code += '\n';
+      });
+      code += indent((state?.tabSize || 0) + 1);
+    }
+    // 逻辑
+    if (Array.isArray(self.logics) && self.logics.length) {
+      code += indent((state?.tabSize || 0) + 1);
+      yield* wrapForEach(self.logics, function* warpForEachGenerator(logic) {
+        code += yield* logic.toEmbeddedTS(
+          shiftState(state, code, {
+            tabSize: (state?.tabSize || 0) + 2,
+          }),
+          'noExport',
+        );
+        code += '\n';
+      });
+      code += indent((state?.tabSize || 0) + 1);
+    }
+    // render函数
+    code += `\n${indent((state?.tabSize || 0) + 1)}`;
+    code += `__render(`;
+    code += `){\n`;
+    code += indent(state?.tabSize || 0);
+    // elements 元素
+    if (Array.isArray(self.elements)) {
+      // 生成嵌套式的内容
+      yield* wrapForEach(self.elements, function* warpForEachGenerator(element) {
+        code += yield* element.toEmbeddedTS(
+          shiftState(state, code, {
+            tabSize: (state?.tabSize || 0) + 3,
+          }),
+        );
+        code += '\n';
+      });
+    }
+    code += `\n${indent((state?.tabSize || 0) + 1)}}\n`;
+    if (Array.isArray(self.params)) {
+      code += `${indent((state?.tabSize || 0) + 1)}$destination(options: {`;
+      yield* wrapForEach(self.params, function* warpForEachGenerator(param, index) {
+        code += `${param.name}?: `;
+        code += yield* param.typeAnnotation.toEmbeddedTS(shiftState(state, code));
+        code += ', ';
+      });
+      // 锚点
+      code += `_anchor?: nasl.core.String`;
+      code += '}){}\n';
+    }
+    code += `${indent(state?.tabSize || 0)}}\n`;
+
+    // elements类型声明定义
+    code += `interface __elements {\n`;
+    // 生成所有的name和类型定义
+    yield* wrapForEach(self.elements, function* warpForEachGenerator(element) {
+      code += yield* element.toEmbeddedTSDefinition(
+        shiftState(state, code, {
+          tabSize: (state?.tabSize || 0) + 1,
+        }),
+      );
+    });
+    code += `${indent((state?.tabSize || 0) + 1)}}\n`;
+    code += `let __elements: __elements;\n`;
+
+    if (Array.isArray(self.elements)) {
+      code += `${indent((state?.tabSize || 0) + 1)}interface `;
+      code += `__elements_completionProperty {\n`;
+      const componentList: Array<ViewElement> = [];
+      self.elementsAttrs(self.elements, componentList);
+      const variableList: string[] = [];
+      yield* wrapForEach(self.elements, function* warpForEachGenerator(item) {
+        code += yield* item.toEmbeddedTSVariableDefinition(shiftState(state, code, { inline: true }), variableList);
+      });
+      code += indent((state?.tabSize || 0) + 1) + `}\n`;
+      code += indent((state?.tabSize || 0) + 1);
+      code += `let __elements_completionProperty: __elements_completionProperty;\n`;
+      code += indent((state?.tabSize || 0) + 1);
+      code += `let __elements_variable_function = {\n`;
+      yield* wrapForEach(self.elements, function* warpForEachGenerator(item) {
+        code += yield* 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`;
+      yield* wrapForEach(variableList, function* warpForEachGenerator(item) {
+        code += indent((state?.tabSize || 0) + 2);
+        code += `${item}`;
+      });
+      code += indent((state?.tabSize || 0) + 1) + `}\n`;
+    }
+
+    const advanceMap: Map<Variable, Assignment | BatchAssignment> = new Map();
+    yield* self.traverseChildrenGenerator(function* traverseChildrenGenerator(el) {
+      if (el && (asserts.isBatchAssignment(el) || (asserts.isAssignment(el) && el.left?.name))) {
+        if (asserts.isAssignment(el)) {
+          const advanceVar = self.variables?.find(
+            (variable) => !variable.typeAnnotation && el.left?.name === variable.name,
+          );
+          if (advanceVar && !advanceMap.get(advanceVar)) {
+            advanceMap.set(advanceVar, el);
+          }
+        } else if (asserts.isBatchAssignment(el)) {
+          yield* wrapForEach(el.assignmentLines, function* warpForEachGenerator({ leftIndex }) {
+            const leftCode =
+              leftIndex.length === 1
+                ? yield* el.left?.expression?.toEmbeddedTS(shiftState(state, code, { inline: true })) ??
+                returnOrigin('')
+                : yield* el.left?.members[leftIndex[1]]?.toEmbeddedTS(shiftState(state, code, { inline: true })) ??
+                returnOrigin('');
+            const advanceVar = self.variables?.find(
+              (variable) => !variable.typeAnnotation && leftCode === variable.name,
+            );
+            if (advanceVar && !advanceMap.get(advanceVar)) {
+              advanceMap.set(advanceVar, el);
+            }
+          });
+        }
+      }
+    });
+
+    // 用来储存默认值翻译结构是__IDENTIFIER__或者__IDENTIFIER__()的节点
+    const IDENTIFIERMAP = new Set<Variable>();
+    if (Array.isArray(self.params)) {
+      yield* wrapForEach(self.params, function* warpForEachGenerator(param) {
+        code += `let ${indent((state?.tabSize || 0) + 1)}`;
+        code += yield* param.toEmbeddedTS(shiftState(state, code, { inline: true }));
+        code += ';\n';
+      });
+    }
+    if (Array.isArray(self.variables)) {
+      yield* wrapForEach(self.variables, function* warpForEachGenerator(variable) {
+        const ts = yield* variable.defaultValue?.toEmbeddedTS?.() ?? returnOrigin('');
+        if (['__IDENTIFIER__', '__IDENTIFIER__()'].includes(ts)) {
+          IDENTIFIERMAP.add(variable);
+        }
+        if (!advanceMap.get(variable)) {
+          code += `let ${indent((state?.tabSize || 0) + 1)}`;
+          code += yield* variable.toEmbeddedTS(shiftState(state, code, { inline: true }));
+          code += ';\n';
+        }
+      });
+    }
+    yield* wrapIterator(advanceMap.entries(), function* warpForEachGenerator([variable, assignment]) {
+      // 有默认值的用默认值来推导类型, 但是如果是__IDENTIFIER__或者__IDENTIFIER__()，就不需要默认值来推导了
+      if (variable.defaultValue?.expression && !IDENTIFIERMAP.has(variable)) {
+        code += `let ${indent((state?.tabSize || 0) + 1)}`;
+        code += yield* variable.toEmbeddedTS(shiftState(state, code, { inline: true }));
+        return;
+      }
+      code += `${indent((state?.tabSize || 0) + 1)}// @ts-ignore\n`;
+      code += `let ${indent((state?.tabSize || 0) + 1)}`;
+      code += yield* variable.toEmbeddedTS(shiftState(state, code, { inline: true }));
+      code += ' = ';
+      if (asserts.isBatchAssignment(assignment)) {
+        yield* wrapForEach(assignment.assignmentLines, function* warpForEachGenerator({ leftIndex, rightIndex }) {
+          const leftCode =
+            leftIndex.length === 1
+              ? yield* assignment.left.expression.toEmbeddedTS(shiftState(state, code, { inline: true }))
+              : yield* assignment.left.members[leftIndex[1]]?.toEmbeddedTS(shiftState(state, code, { inline: true })) ??
+              returnOrigin('');
+          if (leftCode === variable.name) {
+            const rightNode =
+              rightIndex.length === 1
+                ? assignment.rights[rightIndex[0]]?.expression
+                : assignment.rights[rightIndex[0]]?.members[rightIndex[1]];
+            const rightCode = yield* rightNode?.toEmbeddedTS(shiftState(state, code, { inline: true })) ??
+              returnOrigin('');
+            code += yield* self.getRightCode(rightCode, assignment, rightNode);
+          }
+        });
+      } else {
+        let rightCode = '';
+        // 因为右侧枚举要赋值就得new 一下；
+        if (
+          assignment.right &&
+          asserts.isIdentifier(assignment.right) &&
+          assignment.right.namespace &&
+          assignment.right.namespace.endsWith('enums')
+        ) {
+          rightCode += 'new ';
+        }
+        rightCode +=
+          assignment.right && assignment.right.toEmbeddedTS
+            ? yield* assignment.right.toEmbeddedTS(shiftState(state, code, { inline: true }))
+            : '__RIGHT__';
+        code += yield* self.getRightCode(rightCode, assignment, assignment.right);
+      }
+      code += ';\n';
+    });
+
+    /* 默认值草稿区 ---------------------------*/
+    code += `${indent((state?.tabSize || 0) + 1)}function __playground(){\n`;
+
+    /* 参数的默认值是__IDENTIFIER__或者__IDENTIFIER__()时不赋默认值，但是需要ts翻译出来进行报错校验 */
+    for (const node of IDENTIFIERMAP.values()) {
+      code += `${indent((state?.tabSize || 0) + 2)}`;
+      code += yield* node.defaultValue.toEmbeddedTS(shiftState(state, code, { inline: true }));
+      code += '; ';
+    }
+
+    code += '\n';
+    code += `${indent((state?.tabSize || 0) + 2)}return\n`;
+
+    function* setPlaygroundCode(arr: Variable[] | ParamWithGroup[], name: string) {
+      if (arr.length) {
+        code += `${indent((state?.tabSize || 0) + 1)}/* -----以下是 ${name} 的默认值草稿------ */\n`;
+      }
+
+      for (const item1 of arr) {
+        for (const item of item1.defaultValue?.playground ?? []) {
+          code += yield* item.toEmbeddedTS(shiftState(state, code, { tabSize: (state?.tabSize || 0) + 1 }));
+          code += ';\n';
+        }
+      }
+    }
+    yield* setPlaygroundCode(self.variables, 'variables');
+    yield* setPlaygroundCode(self.params, 'params');
+
+    code += `${indent((state?.tabSize || 0) + 1)}}\n`;
+    return code;
+  }
+
+  /**
+   * 转换成 VueOptions
+   * @TODO 后面 template 可以优化成 render 函数
+   */
+  toVueOptions(options?: ElementToVueOptions) {
+    return {
+      template: this.genVueTemplate(options),
+      script: this.genScript(),
+    };
+  }
+
+  genVueTemplate(options?: ElementToVueOptions) {
+    return this.elements?.map((element) => `${element?.toVue(options)}\n`).join('');
+  }
+
+  getViewBindEvents() {
+    const bindEvents: Array<BindEvent> = [];
+    // 页面上的绑定的事件
+    this.bindEvents.forEach((bindEvent) => {
+      bindEvents.push(bindEvent);
+    });
+    this.elements.forEach((item) => {
+      utils.traverse(
+        (current) => {
+          current.node.bindEvents.forEach((bindEvent) => {
+            bindEvents.push(bindEvent);
+          });
+        },
+        { node: item },
+      );
+    });
+    return bindEvents;
+  }
+
+  // 获取页面上需要替换的表达式
+  getViewExpressions() {
+    const bindExpressions: any[] = [];
+    this.elements.forEach((item) => {
+      utils.traverse(
+        (current) => {
+          const { node } = current as any;
+          const playgroundNodePath = (node?.nodePath || '').split('.').find((nodePathNode: string) => {
+            return nodePathNode.match(/(.+)\[.+\]/)?.[1] === 'playground';
+          });
+          if (!playgroundNodePath) {
+            //// 处理三种情况
+            //if (
+            //    ['BindAttribute', 'BindDirective', 'BindStyle'].includes(node.concept)
+            //    && node.needReplaceWithIdentifier
+            //) {
+            //    bindExpressions.push(node);
+            //}
+            if (node?.concept === 'Match') {
+              bindExpressions.push(node as Match);
+            }
+          }
+        },
+        {
+          node: item,
+        },
+        {
+          mode: 'anyObject',
+          depthFirst: true,
+          excludedKeySet: new Set([
+            'bindEvents',
+            'parentNode',
+            'sourceMap',
+            'storageJSON',
+            'tsErrorDetail',
+            'NaslAnnotatedJSON',
+            'calledFrom',
+            '_events',
+            '_collectingList',
+            '_historyList',
+          ]),
+        },
+      );
+    });
+    return bindExpressions;
+  }
+
+  /**
+   * 生成 Vue 中需要的 JS 代码
+   * @TODO 这一版先做成 componentOptions 式的，后面再美化
+   */
+  genScript() {
+    const componentList: Array<ViewElement> = [];
+    const componentListExtra: Array<ViewElement> = [];
+    this.elementsAttrs(this.elements, componentList);
+    this.elementsAttrsAll(this.elements, componentListExtra);
+    const definition = {
+      params: this.params,
+      variables: this.variables,
+      logics: this.logics,
+      events: this.bindEvents,
+      title: this.title,
+      viewBindEvents: this.getViewBindEvents(),
+      viewExpressions: this.getViewExpressions(),
+      elements: componentList,
+      elementsAll: componentListExtra,
+    };
+    let code = '';
+    const keyboardEventMixinCode = `const keyboardEventMixin = {
+            mounted() {
+                document.addEventListener('keydown', this.onKeyDown);
+                document.addEventListener('keyup', this.onKeyUp);
+            },
+            beforeDestory() {
+                document.removeEventListener('keydown', this.onKeyDown);
+                document.removeEventListener('keyup', this.onKeyUp);
+            },
+            methods: {
+                async onKeyDown(e) {
+                    ${this.bindEvents
+        .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')}
+                }
+            }
+        };\n`;
+    code += keyboardEventMixinCode;
+    code += 'export default {\n';
+    code += 'mixins: [';
+    const mixins = [];
+    // 键盘事件mixin
+    mixins.push('keyboardEventMixin');
+    code += mixins.join(',');
+    code += '],';
+    code += translator(definition, this);
+    code += '};\n';
+    return code;
+  }
+
+  // 生成预览的模板
+  genPreviewTemplate() {
+    return `<template>
+              <bs-${this.name}>
+                ${this.slotElems.map((slotElem) => {
+      const slotName = slotElem.name;
+      return `<template #${slotName}></template>`;
+    }).join('')}
+              </bs-${this.name}>
+            </template>`;
+  }
+
+  //================================================================================
+  // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
+  // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
+  //================================================================================
+}
+
+export default BusinessComponent;
+//================================================================================
+// ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+// 自动生成的代码已结束。下面可以手动编写。
+//================================================================================