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

package/src/concepts/View__.ts

@@ -1,7 +1,8 @@
+import { v4 as uuidv4 } from 'uuid';
 import Namespace from './Namespace__';
 import { TranslatorState, shiftState, withSourceMap, indent, createCompilerState } from '../translator';
 import translator from '../bak/translator';
-import { ElementToVueOptions } from './ViewElement__';
+import ViewElement, { ElementToVueOptions } from './ViewElement__';
 import { Structure } from './Structure__';
 import MemberExpression from './MemberExpression__';
 import Identifier from './Identifier__';
@@ -11,18 +12,16 @@ import BatchAssignment from './BatchAssignment__';
 import CallInterface from './CallInterface__';
 import CallLogic from './CallLogic__';
 
-//================================================================================
+//= ===============================================================================
 // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
 // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
-//================================================================================
+//= ===============================================================================
 import { EventPayload, Params } from '../common/EventEmitter';
 import { concept, excludedInJSON, property } from '../decorators';
 
 import * as utils from '../utils';
-import { v4 as uuidv4 } from 'uuid';
 import BaseNode from '../common/BaseNode';
 import classMap from '../common/classMap';
-import ViewElement from './ViewElement__';
 import Param from './Param__';
 import Variable from './Variable__';
 import Logic from './Logic__';
@@ -37,1630 +36,1716 @@ import TypeAnnotation from './TypeAnnotation__';
  */
 @concept('页面')
 export class View extends BaseNode {
-    /**
-     * 产品概念
-     */
-    @property()
-    concept: 'View' = 'View';
-
-    /**
-     * 页面模板 Id
-     */
-    @property()
-    pageTemplateId: string = undefined;
-
-    /**
-     * 页面名称
-     */
-    @property()
-    name: string = undefined;
-
-    /**
-     * 唯一标识
-     */
-    @property()
-    uuid: string = undefined;
-
-    /**
-     * 页面标题
-     */
-    @property()
-    title: string = undefined;
-
-    /**
-     * 面包屑
-     */
-    @property()
-    crumb: string = undefined;
-
-    /**
-     * 权限控制
-     */
-    @property()
-    auth: boolean = undefined;
-
-    /**
-     * 权限资源描述
-     */
-    @property()
-    authDescription: string = undefined;
-
-    /**
-     * 是否是默认跳转的页面
-     */
-    @property()
-    isIndex: boolean = undefined;
-
-    /**
-     * 未解析的模板代码
-     */
-    @property()
-    template: string = undefined;
-
-    /**
-     * 未解析的逻辑代码
-     */
-    @property()
-    script: string = undefined;
-
-    /**
-     * 未解析的样式代码
-     */
-    @property()
-    style: string = undefined;
-
-    /**
-     * 页面元素列表
-     */
-    @property('ViewElement')
-    elements: Array<ViewElement> = [];
-
-    /**
-     * 输入参数列表
-     */
-    @property('Param')
-    params: Array<Param> = [];
-
-    /**
-     * 变量列表
-     */
-    @property('Variable')
-    variables: Array<Variable> = [];
-
-    /**
-     * 逻辑列表
-     */
-    @property('Logic')
-    logics: Array<Logic> = [];
-
-    /**
-     * 元素绑定事件列表
-     */
-    @property('BindEvent')
-    bindEvents: Array<BindEvent> = [];
-
-    /**
-     * 绑定的角色
-     */
-    @property()
-    bindRoles: Array<string> = [];
-
-    /**
-     * 页面列表
-     */
-    @property('View')
-    children: Array<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<View>) {
-        source = Object.assign({}, View.getDefaultOptions(), source);
-        super(source);
-        super.subConstructor(source);
-    }
-    getClassName() {
-        return 'View';
-    }
-
-    static from(source: any, parentNode?: any, parentKey?: string): View {
-        return super.from(source, parentNode, parentKey) as View;
-    }
-
-    /**
-     * 从父级删除该节点
-     * @internal
-     */
-    _delete() {
-        let params: Params = null;
-        if (this.parentNode) {
-            params = (this.parentNode as any)?.__removeView?.(this);
-        }
-        return params;
-    }
-    /**
-     * 设置页面名称
-     */
-    setName(name: string) {
-        const object = {
-            name,
-        };
-        this.update({
-            ...object,
-            field: 'name',
-        });
-    }
-
-    /**
-     * 设置页面标题
-     */
-    setTitle(title: string) {
-        const object = {
-            title,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    /**
-     * 设置面包屑
-     */
-    setCrumb(crumb: string) {
-        const object = {
-            crumb,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    /**
-     * 设置权限控制
-     */
-    setAuth(auth: boolean) {
-        const object = {
-            auth,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    /**
-     * 设置权限资源描述
-     */
-    setAuthDescription(authDescription: string) {
-        const object = {
-            authDescription,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    /**
-     * 设置是否是默认跳转的页面
-     */
-    setIsIndex(isIndex: boolean) {
-        const object = {
-            isIndex,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-
-
-    /**
-    * 插入页面元素
-    * @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' };
-        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 (options instanceof ViewElement) {
-            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;
-    }
-
-
-    getParamUniqueName(name = 'param1') {
-        return utils.unique(name, this.getVarExistingNames(), undefined, false);
-    }
-
-    /**
-    * 插入输入参数
-    * @internal
-    * @param name 输入参数名称，如果不填会自动生成一个唯一名称
-    */
-    _insertParamAt(name: string, index: number): Param;
-
-    /**
-    * 插入输入参数
-    * @internal
-    * @param paramOptions 输入参数参数
-    */
-    _insertParamAt(paramOptions: Partial<Param>, index: number): Param;
-
-    /**
-    * 插入输入参数
-    * @internal
-    * @param param 已有的输入参数实例
-    */
-    _insertParamAt(param: Param, index: number): Param;
-
-    _insertParamAt(options: string | Partial<Param> | Param, index: number) {
-        const paramOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'params' };
-        let param: Param;
-        if (!options) {
-            param = Param.from({
-                ...paramOptions,
-                name: this.getParamUniqueName(),
-            }, this, 'params');
-        } else if (typeof options === 'string') {
-            param = Param.from({
-                ...paramOptions,
-                name: options,
-            }, this, 'params');
-        } else if (options instanceof Param) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            param = options;
-            Object.assign(param, relationOptions);
-        } else {
-            param = Param.from({
-                ...paramOptions,
-                ...options,
-            }, this, 'params');
-        }
-        this.params.splice(index, 0, param);
-        return param;
-    }
-
-    /**
-     * 插入输入参数
-     * @param name 输入参数名称，如果不填会自动生成一个唯一名称
-     */
-    insertParamAt(name: string, index: number): Param;
-
-    /**
-     * 插入输入参数
-     * @param paramOptions 输入参数参数
-     */
-    insertParamAt(paramOptions: Partial<Param>, index: number): Param;
-
-    /**
-     * 插入输入参数
-     * @param param 已有的输入参数实例
-     */
-    insertParamAt(param: Param, index: number): Param;
-
-    insertParamAt(options: string | Partial<Param> | Param, 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): Param;
-
-    /**
-     * 添加输入参数
-     * @internal
-     * @param paramOptions 输入参数参数
-     */
-    _addParam(paramOptions: Partial<Param>): Param;
-
-    /**
-     * 添加输入参数
-     * @internal
-     * @param param 已有的输入参数实例
-     */
-    _addParam(param: Param): Param;
-
-    _addParam(options?: string | Partial<Param> | Param) {
-        const index = this.params.length;
-        return this._insertParamAt(options as any, index);
-    }
-
-    /**
-     * 添加输入参数
-     * @internal
-     * @param name 输入参数名称，如果不填会自动生成一个唯一名称
-     */
-    addParam(name?: string): Param;
-
-    /**
-     * 添加输入参数
-     * @param paramOptions 输入参数参数
-     */
-    addParam(paramOptions: Partial<Param>): Param;
-
-    /**
-     * 添加输入参数
-     * @param param 已有的输入参数实例
-     */
-    addParam(param: Param): Param;
-
-    addParam(options?: string | Partial<Param> | Param) {
-        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' };
-        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 (options instanceof Variable) {
-            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;
-    }
-
-
-    getLogicUniqueName(name = 'logic1') {
-        return utils.unique(name, this.getLogicExistingNames(), undefined, false);
-    }
-
-    /**
-    * 插入逻辑
-    * @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;
-    }
-
-    /**
-     * 插入逻辑
-     * @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 = this.logics.length;
-        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;
-    }
-
-
-    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' };
-        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 (options instanceof BindEvent) {
-            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;
-    }
-
-
-
-
-    getViewExistingNames(excludedList: Array<View> = []) {
-        const excludedSet = new Set(excludedList);
-        return ((this.children as View[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
-    }
-    getViewUniqueName(name = 'view1') {
-        return utils.unique(name, this.getViewExistingNames(), undefined, false);
-    }
-
-    /**
-    * 插入页面
-    * @internal
-    * @param name 页面名称，如果不填会自动生成一个唯一名称
-    */
-    _insertViewAt(name: string, index: number): View;
-
-    /**
-    * 插入页面
-    * @internal
-    * @param viewOptions 页面参数
-    */
-    _insertViewAt(viewOptions: Partial<View>, index: number): View;
-
-    /**
-    * 插入页面
-    * @internal
-    * @param view 已有的页面实例
-    */
-    _insertViewAt(view: View, index: number): View;
-
-    _insertViewAt(options: string | Partial<View> | View, index: number) {
-        const viewOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'children' };
-        let view: View;
-        if (!options) {
-            view = View.from({
-                ...viewOptions,
-                name: this.getViewUniqueName(),
-            }, this, 'children');
-        } else if (typeof options === 'string') {
-            view = View.from({
-                ...viewOptions,
-                name: options,
-            }, this, 'children');
-        } else if (options instanceof View) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            view = options;
-            Object.assign(view, relationOptions);
-        } else {
-            view = View.from({
-                ...viewOptions,
-                ...options,
-            }, this, 'children');
-        }
-        this.children.splice(index, 0, view);
-        return view;
-    }
-
-    /**
-     * 插入页面
-     * @param name 页面名称，如果不填会自动生成一个唯一名称
-     */
-    insertViewAt(name: string, index: number): View;
-
-    /**
-     * 插入页面
-     * @param viewOptions 页面参数
-     */
-    insertViewAt(viewOptions: Partial<View>, index: number): View;
-
-    /**
-     * 插入页面
-     * @param view 已有的页面实例
-     */
-    insertViewAt(view: View, index: number): View;
-
-    insertViewAt(options: string | Partial<View> | View, index: number) {
-        const node = this._insertViewAt(options as any, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'children',
-        });
-        return node;
-    }
-
-    /**
-     * 添加页面
-     * @internal
-     * @param name 页面名称，如果不填会自动生成一个唯一名称
-     */
-    _addView(name?: string): View;
-
-    /**
-     * 添加页面
-     * @internal
-     * @param viewOptions 页面参数
-     */
-    _addView(viewOptions: Partial<View>): View;
-
-    /**
-     * 添加页面
-     * @internal
-     * @param view 已有的页面实例
-     */
-    _addView(view: View): View;
-
-    _addView(options?: string | Partial<View> | View) {
-        const index = this.children.length;
-        return this._insertViewAt(options as any, index);
-    }
-
-    /**
-     * 添加页面
-     * @internal
-     * @param name 页面名称，如果不填会自动生成一个唯一名称
-     */
-    addView(name?: string): View;
-
-    /**
-     * 添加页面
-     * @param viewOptions 页面参数
-     */
-    addView(viewOptions: Partial<View>): View;
-
-    /**
-     * 添加页面
-     * @param view 已有的页面实例
-     */
-    addView(view: View): View;
-
-    addView(options?: string | Partial<View> | View) {
-        const node = this._addView(options as any);
-        const index = this.children.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'children',
-        });
-        return node;
-    }
-
-
-
-
-    /**
-    * 删除页面元素
-    * @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;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(viewElement);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === viewElement) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
-        }
-        return params;
-    }
-
-
-
-    /**
-    * 删除输入参数
-    * @param name 输入参数名称
-    */
-    removeParam(name: string): void;
-
-    /**
-     * 删除输入参数
-     * @param param 已有的输入参数实例
-     */
-    removeParam(param: Param): void;
-
-    removeParam(options: string | Param) {
-        let param: Param;
-        if (typeof options === 'string') {
-            param = (this.params as Param[]).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;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(param);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === param) {
-                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;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(variable);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === variable) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
-        }
-        return params;
-    }
-
-
-
-    /**
-    * 删除逻辑
-    * @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;
-        }
-        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;
-            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;
-            }
-        }
-        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;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(bindEvent);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === bindEvent) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
-        }
-        return params;
-    }
-
-
-
-    /**
-    * 删除页面
-    * @param name 页面名称
-    */
-    removeView(name: string): void;
-
-    /**
-     * 删除页面
-     * @param view 已有的页面实例
-     */
-    removeView(view: View): void;
-
-    removeView(options: string | View) {
-        let view: View;
-        if (typeof options === 'string') {
-            view = (this.children as View[]).find((item) => item.name === options);
-            if (!view) {
-                throw new Error('找不到页面 ' + options);
-            }
+  /**
+   * 产品概念
+   */
+  @property()
+  concept: 'View' = 'View';
+
+  /**
+   * 页面模板 Id
+   */
+  @property()
+  pageTemplateId: string = undefined;
+
+  /**
+   * 页面名称
+   */
+  @property()
+  name: string = undefined;
+
+  /**
+   * 唯一标识
+   */
+  @property()
+  uuid: string = undefined;
+
+  /**
+   * 页面标题
+   */
+  @property()
+  title: string = undefined;
+
+  /**
+   * 面包屑
+   */
+  @property()
+  crumb: string = undefined;
+
+  /**
+   * 权限控制
+   */
+  @property()
+  auth: boolean = undefined;
+
+  /**
+   * 权限资源描述
+   */
+  @property()
+  authDescription: string = undefined;
+
+  /**
+   * 是否是默认跳转的页面
+   */
+  @property()
+  isIndex: boolean = undefined;
+
+  /**
+   * 未解析的模板代码
+   */
+  @property()
+  template: string = undefined;
+
+  /**
+   * 未解析的逻辑代码
+   */
+  @property()
+  script: string = undefined;
+
+  /**
+   * 未解析的样式代码
+   */
+  @property()
+  style: string = undefined;
+
+  /**
+   * 页面元素列表
+   */
+  @property('ViewElement')
+  elements: Array<ViewElement> = [];
+
+  /**
+   * 输入参数列表
+   */
+  @property('Param')
+  params: Array<Param> = [];
+
+  /**
+   * 变量列表
+   */
+  @property('Variable')
+  variables: Array<Variable> = [];
+
+  /**
+   * 逻辑列表
+   */
+  @property('Logic')
+  logics: Array<Logic> = [];
+
+  /**
+   * 元素绑定事件列表
+   */
+  @property('BindEvent')
+  bindEvents: Array<BindEvent> = [];
+
+  /**
+   * 绑定的角色
+   */
+  @property()
+  bindRoles: Array<string> = [];
+
+  /**
+   * 页面列表
+   */
+  @property('View')
+  children: Array<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<View>) {
+    // @ts-ignore
+    source = { ...View.getDefaultOptions(), ...source };
+    super(source);
+    super.subConstructor(source);
+  }
+
+  getClassName() {
+    return 'View';
+  }
+
+  static from(source: any, parentNode?: any, parentKey?: string): View {
+    return super.from(source, parentNode, parentKey) as View;
+  }
+
+  /**
+   * 从父级删除该节点
+   * @internal
+   */
+  _delete() {
+    let params: Params = null;
+    if (this.parentNode) {
+      params = (this.parentNode as any)?.__removeView?.(this);
+    }
+    return params;
+  }
+
+  /**
+   * 设置页面名称
+   */
+  setName(name: string) {
+    const object = {
+      name,
+    };
+    this.update({
+      ...object,
+      field: 'name',
+    });
+  }
+
+  /**
+   * 设置页面标题
+   */
+  setTitle(title: string) {
+    const object = {
+      title,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置面包屑
+   */
+  setCrumb(crumb: string) {
+    const object = {
+      crumb,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置权限控制
+   */
+  setAuth(auth: boolean) {
+    const object = {
+      auth,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置权限资源描述
+   */
+  setAuthDescription(authDescription: string) {
+    const object = {
+      authDescription,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置是否是默认跳转的页面
+   */
+  setIsIndex(isIndex: boolean) {
+    const object = {
+      isIndex,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 插入页面元素
+   * @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' };
+    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 (options instanceof ViewElement) {
+      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;
+  }
+
+  getParamUniqueName(name = 'param1') {
+    return utils.unique(name, this.getVarExistingNames(), undefined, false);
+  }
+
+  /**
+   * 插入输入参数
+   * @internal
+   * @param name 输入参数名称，如果不填会自动生成一个唯一名称
+   */
+  _insertParamAt(name: string, index: number): Param;
+
+  /**
+   * 插入输入参数
+   * @internal
+   * @param paramOptions 输入参数参数
+   */
+  _insertParamAt(paramOptions: Partial<Param>, index: number): Param;
+
+  /**
+   * 插入输入参数
+   * @internal
+   * @param param 已有的输入参数实例
+   */
+  _insertParamAt(param: Param, index: number): Param;
+
+  _insertParamAt(options: string | Partial<Param> | Param, index: number) {
+    const paramOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'params' };
+    let param: Param;
+    if (!options) {
+      param = Param.from(
+        {
+          ...paramOptions,
+          name: this.getParamUniqueName(),
+        },
+        this,
+        'params'
+      );
+    } else if (typeof options === 'string') {
+      param = Param.from(
+        {
+          ...paramOptions,
+          name: options,
+        },
+        this,
+        'params'
+      );
+    } else if (options instanceof Param) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      param = options;
+      Object.assign(param, relationOptions);
+    } else {
+      param = Param.from(
+        {
+          ...paramOptions,
+          ...options,
+        },
+        this,
+        'params'
+      );
+    }
+    this.params.splice(index, 0, param);
+    return param;
+  }
+
+  /**
+   * 插入输入参数
+   * @param name 输入参数名称，如果不填会自动生成一个唯一名称
+   */
+  insertParamAt(name: string, index: number): Param;
+
+  /**
+   * 插入输入参数
+   * @param paramOptions 输入参数参数
+   */
+  insertParamAt(paramOptions: Partial<Param>, index: number): Param;
+
+  /**
+   * 插入输入参数
+   * @param param 已有的输入参数实例
+   */
+  insertParamAt(param: Param, index: number): Param;
+
+  insertParamAt(options: string | Partial<Param> | Param, 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): Param;
+
+  /**
+   * 添加输入参数
+   * @internal
+   * @param paramOptions 输入参数参数
+   */
+  _addParam(paramOptions: Partial<Param>): Param;
+
+  /**
+   * 添加输入参数
+   * @internal
+   * @param param 已有的输入参数实例
+   */
+  _addParam(param: Param): Param;
+
+  _addParam(options?: string | Partial<Param> | Param) {
+    const index = this.params.length;
+    return this._insertParamAt(options as any, index);
+  }
+
+  /**
+   * 添加输入参数
+   * @internal
+   * @param name 输入参数名称，如果不填会自动生成一个唯一名称
+   */
+  addParam(name?: string): Param;
+
+  /**
+   * 添加输入参数
+   * @param paramOptions 输入参数参数
+   */
+  addParam(paramOptions: Partial<Param>): Param;
+
+  /**
+   * 添加输入参数
+   * @param param 已有的输入参数实例
+   */
+  addParam(param: Param): Param;
+
+  addParam(options?: string | Partial<Param> | Param) {
+    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' };
+    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 (options instanceof Variable) {
+      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;
+  }
+
+  getLogicUniqueName(name = 'logic1') {
+    return utils.unique(name, this.getLogicExistingNames(), undefined, false);
+  }
+
+  /**
+   * 插入逻辑
+   * @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;
+  }
+
+  /**
+   * 插入逻辑
+   * @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 = this.logics.length;
+    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;
+  }
+
+  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' };
+    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 (options instanceof BindEvent) {
+      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;
+  }
+
+  getViewExistingNames(excludedList: Array<View> = []) {
+    const excludedSet = new Set(excludedList);
+    return ((this.children as View[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+  }
+
+  getViewUniqueName(name = 'view1') {
+    return utils.unique(name, this.getViewExistingNames(), undefined, false);
+  }
+
+  /**
+   * 插入页面
+   * @internal
+   * @param name 页面名称，如果不填会自动生成一个唯一名称
+   */
+  _insertViewAt(name: string, index: number): View;
+
+  /**
+   * 插入页面
+   * @internal
+   * @param viewOptions 页面参数
+   */
+  _insertViewAt(viewOptions: Partial<View>, index: number): View;
+
+  /**
+   * 插入页面
+   * @internal
+   * @param view 已有的页面实例
+   */
+  _insertViewAt(view: View, index: number): View;
+
+  _insertViewAt(options: string | Partial<View> | View, index: number) {
+    const viewOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'children' };
+    let view: View;
+    if (!options) {
+      view = View.from(
+        {
+          ...viewOptions,
+          name: this.getViewUniqueName(),
+        },
+        this,
+        'children'
+      );
+    } else if (typeof options === 'string') {
+      view = View.from(
+        {
+          ...viewOptions,
+          name: options,
+        },
+        this,
+        'children'
+      );
+    } else if (options instanceof View) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      view = options;
+      Object.assign(view, relationOptions);
+    } else {
+      view = View.from(
+        {
+          ...viewOptions,
+          ...options,
+        },
+        this,
+        'children'
+      );
+    }
+    this.children.splice(index, 0, view);
+    return view;
+  }
+
+  /**
+   * 插入页面
+   * @param name 页面名称，如果不填会自动生成一个唯一名称
+   */
+  insertViewAt(name: string, index: number): View;
+
+  /**
+   * 插入页面
+   * @param viewOptions 页面参数
+   */
+  insertViewAt(viewOptions: Partial<View>, index: number): View;
+
+  /**
+   * 插入页面
+   * @param view 已有的页面实例
+   */
+  insertViewAt(view: View, index: number): View;
+
+  insertViewAt(options: string | Partial<View> | View, index: number) {
+    const node = this._insertViewAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'children',
+    });
+    return node;
+  }
+
+  /**
+   * 添加页面
+   * @internal
+   * @param name 页面名称，如果不填会自动生成一个唯一名称
+   */
+  _addView(name?: string): View;
+
+  /**
+   * 添加页面
+   * @internal
+   * @param viewOptions 页面参数
+   */
+  _addView(viewOptions: Partial<View>): View;
+
+  /**
+   * 添加页面
+   * @internal
+   * @param view 已有的页面实例
+   */
+  _addView(view: View): View;
+
+  _addView(options?: string | Partial<View> | View) {
+    const index = this.children.length;
+    return this._insertViewAt(options as any, index);
+  }
+
+  /**
+   * 添加页面
+   * @internal
+   * @param name 页面名称，如果不填会自动生成一个唯一名称
+   */
+  addView(name?: string): View;
+
+  /**
+   * 添加页面
+   * @param viewOptions 页面参数
+   */
+  addView(viewOptions: Partial<View>): View;
+
+  /**
+   * 添加页面
+   * @param view 已有的页面实例
+   */
+  addView(view: View): View;
+
+  addView(options?: string | Partial<View> | View) {
+    const node = this._addView(options as any);
+    const index = this.children.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'children',
+    });
+    return node;
+  }
+
+  /**
+   * 删除页面元素
+   * @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;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: viewElement,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(viewElement);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === viewElement) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
+    }
+    return params;
+  }
+
+  /**
+   * 删除输入参数
+   * @param name 输入参数名称
+   */
+  removeParam(name: string): void;
+
+  /**
+   * 删除输入参数
+   * @param param 已有的输入参数实例
+   */
+  removeParam(param: Param): void;
+
+  removeParam(options: string | Param) {
+    let param: Param;
+    if (typeof options === 'string') {
+      param = (this.params as Param[]).find((item) => item.name === options);
+      if (!param) {
+        throw new Error(`找不到输入参数 ${options}`);
+      }
+    } else {
+      param = options;
+    }
+    return param.delete();
+  }
+
+  __removeParam(param: Param) {
+    const { parentKey } = param;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: param,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(param);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === param) {
+        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;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: variable,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(variable);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === variable) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
+    }
+    return params;
+  }
+
+  /**
+   * 删除逻辑
+   * @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;
+    }
+    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;
+      }
+    }
+    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;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: bindEvent,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(bindEvent);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === bindEvent) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
+    }
+    return params;
+  }
+
+  /**
+   * 删除页面
+   * @param name 页面名称
+   */
+  removeView(name: string): void;
+
+  /**
+   * 删除页面
+   * @param view 已有的页面实例
+   */
+  removeView(view: View): void;
+
+  removeView(options: string | View) {
+    let view: View;
+    if (typeof options === 'string') {
+      view = (this.children as View[]).find((item) => item.name === options);
+      if (!view) {
+        throw new Error(`找不到页面 ${options}`);
+      }
+    } else {
+      view = options;
+    }
+    return view.delete();
+  }
+
+  __removeView(view: View) {
+    const { parentKey } = view;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: view,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(view);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === view) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
+    }
+    return params;
+  }
+
+  //= ===============================================================================
+  // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+  // 自动生成的代码已结束。下面可以手动编写。
+  //= ===============================================================================
+
+  /* 主页面有没有权限 */
+  get parentAuth() {
+    const _nameSpace = this.getTsNamespace();
+    const _nameSpaceArr = _nameSpace.split('.');
+    const viewsIndex = _nameSpaceArr.findIndex((item) => item === 'views');
+    const mainViewName = _nameSpaceArr[viewsIndex + 1];
+    return mainViewName ? this.frontend.views.find((item) => item.name === mainViewName)?.auth : this.auth;
+  }
+
+  /**
+   * 设置页面权限
+   */
+  setBindRoles(bindRoles: string[]) {
+    const object = {
+      bindRoles,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  findLogicByName(name: string) {
+    return this.logics.find((logic) => logic.name === 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);
+  }
+
+  getViewElementUniqueName(name = 'viewElement1') {
+    this.collectExistingViewElementName();
+    const viewElementUniqueName = utils.unique(name, this.existingViewElement);
+    this.existingViewElement.add(viewElementUniqueName);
+    return viewElementUniqueName;
+  }
+
+  // 组件名是否有效
+  isValidElementName(name: string): boolean {
+    if (name) {
+      return !this.getViewElementExistingNames().find((existingName) => existingName === name);
+    }
+    return false;
+  }
+
+  public static readonly TAG_NAME_PREFIX_REG?: RegExp = /^([lieu]|van)[-_]/;
+
+  mergeBlock({ code, nodePath, position, cb }: { code: string; nodePath: string; position: string; cb?: Function }) {
+    const template = utils.sliceTagContent(code, 'template');
+    let targetNode = this.app.findNodeByPath(nodePath);
+    let parentNode = position === 'append' ? targetNode : targetNode.parentNode;
+    if (parentNode.concept === 'View') {
+      parentNode = targetNode;
+      if (position === 'insertBefore') {
+        targetNode = parentNode.children[0];
+      } else if (position === 'insertAfter') {
+        const len = parentNode.children.length;
+        targetNode = parentNode.children[len - 1];
+      }
+    }
+    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 = Param.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.viewLogics)) {
+      definition.viewLogics.forEach((logicOption: any) => {
+        // 页面逻辑只有load函数的走之前的逻辑其余不用创建
+        if (logicOption.name.startsWith('load')) {
+          const logic = Logic.from(
+            {
+              ...logicOption,
+            },
+            this,
+            'logics'
+          );
+          this.addLogic(logic);
+        }
+      });
+    }
+    // 页面事件
+    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 {
-            view = options;
-        }
-        return view.delete();
-    }
-
-    __removeView(view: View) {
-        const parentKey = view.parentKey;
-        const params: Params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: view,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(view);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === view) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
-        }
-        return params;
-    }
-
-    //================================================================================
-    // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
-    // 自动生成的代码已结束。下面可以手动编写。
-    //================================================================================
-
-    /* 主页面有没有权限 */
-    get parentAuth() {
-        const _nameSpace = this.getTsNamespace();
-        const _nameSpaceArr = _nameSpace.split('.');
-        const viewsIndex = _nameSpaceArr.findIndex((item) => item === 'views');
-        const mainViewName = _nameSpaceArr[viewsIndex + 1];
-        return mainViewName ? this.frontend.views.find((item) => item.name === mainViewName)?.auth : this.auth;
-    }
-    /**
-     * 设置页面权限
-     */
-    setBindRoles(bindRoles: string[]) {
-        const object = {
-            bindRoles,
-        };
-        this.update({
-            ...object,
-        });
-    }
-    findLogicByName(name: string) {
-        return this.logics.find((logic) => logic.name === 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);
-    }
-
-    getViewElementUniqueName(name = 'viewElement1') {
-        this.collectExistingViewElementName();
-        const viewElementUniqueName = utils.unique(name, this.existingViewElement);
-        this.existingViewElement.add(viewElementUniqueName);
-        return viewElementUniqueName;
-    }
-
-    // 组件名是否有效
-    isValidElementName(name: string): boolean {
-        if (name) {
-            return !this.getViewElementExistingNames().find((existingName) => existingName === name);
-        }
-        return false;
-    }
-
-    public static readonly TAG_NAME_PREFIX_REG?: RegExp = /^([lieu]|van)[-_]/;
-
-    mergeBlock({ code, nodePath, position, cb }: { code: string; nodePath: string; position: string; cb?: Function }) {
-        const template = utils.sliceTagContent(code, 'template');
-        let targetNode = this.app.findNodeByPath(nodePath);
-        let parentNode = position === 'append' ? targetNode : targetNode.parentNode;
-        if (parentNode.concept === 'View') {
-            parentNode = targetNode;
-            if (position === 'insertBefore') {
-                targetNode = parentNode.children[0];
-            } else if (position === 'insertAfter') {
-                const len = parentNode.children.length;
-                targetNode = parentNode.children[len - 1];
-            }
-        }
-        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 = Param.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.viewLogics)) {
-            definition.viewLogics.forEach((logicOption: any) => {
-                // 页面逻辑只有load函数的走之前的逻辑其余不用创建
-                if (logicOption.name.startsWith('load')) {
-                    const logic = Logic.from({
-                        ...logicOption,
-                    }, this, 'logics');
-                    this.addLogic(logic);
-                }
-            });
-        }
-        // 页面事件
-        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 {
-                    const index = bindEvent.logics.length;
-                    newLogic.name = newLogic.name + index;
-                    bindEvent.addLogic(newLogic);
-                }
-            });
-        }
-        return node;
-    }
-
-    onChange($event?: EventPayload): void {
-        this.emit('change', $event);
-    }
-
-    getLogicExistingNames(excludedList: Array<Logic> = []) {
-        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)) {
-            varList.push(...this.logics);
-        }
-        return varList.filter((item) => !excludedSet.has(item)).map((item) => item.name);
-    }
-
-    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);
-    }
-
-    /**
-     * 生成 Vue 中需要的 JS 代码
-     * @TODO 这一版先做成 componentOptions 式的，后面再美化
-     */
-    genScript() {
-        const definition = {
-            params: this.params,
-            variables: this.variables,
-            logics: this.logics,
-            events: this.bindEvents,
-            title: this.title,
-            crumb: this.crumb,
-            first: this.children.find((child) => child.isIndex)?.name,
-            auth: this.auth ? 'loginAuth' : undefined,
-            viewBindEvents: this.getViewBindEvents(),
-            viewExpressions: this.getViewExpressions(),
-        };
-        let code = '';
-        let mixin = '';
-        const keyboardEventMixinCode = `const keyboardEventMixin = {
+          const index = bindEvent.logics.length;
+          newLogic.name += index;
+          bindEvent.addLogic(newLogic);
+        }
+      });
+    }
+    return node;
+  }
+
+  onChange($event?: EventPayload): void {
+    this.emit('change', $event);
+  }
+
+  getLogicExistingNames(excludedList: Array<Logic> = []) {
+    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)) {
+      varList.push(...this.logics);
+    }
+    return varList.filter((item) => !excludedSet.has(item)).map((item) => item.name);
+  }
+
+  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);
+  }
+
+  /**
+   * 生成 Vue 中需要的 JS 代码
+   * @TODO 这一版先做成 componentOptions 式的，后面再美化
+   */
+  genScript() {
+    const definition = {
+      params: this.params,
+      variables: this.variables,
+      logics: this.logics,
+      events: this.bindEvents,
+      title: this.title,
+      crumb: this.crumb,
+      first: this.children.find((child) => child.isIndex)?.name,
+      auth: this.auth ? 'loginAuth' : undefined,
+      viewBindEvents: this.getViewBindEvents(),
+      viewExpressions: this.getViewExpressions(),
+    };
+    let code = '';
+    let mixin = '';
+    const keyboardEventMixinCode = `const keyboardEventMixin = {
             mounted() {
                 document.addEventListener('keydown', this.onKeyDown);
                 document.addEventListener('keyup', this.onKeyUp);
@@ -1671,661 +1756,755 @@ export class View extends BaseNode {
             },
             methods: {
                 async onKeyDown(e) {
-                    ${this.bindEvents.filter(event => ['keydown'].includes(event.name)).map((event) => `await this.${event.view.name}_${event.name}(e);`).join('\n')}
+                    ${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')}
+                    ${this.bindEvents
+        .filter((event) => ['keyup'].includes(event.name))
+        .map((event) => `await this.${event.view.name}_${event.name}(e);`)
+        .join('\n')}
                 }
             }
         };`;
-        code += keyboardEventMixinCode;
-        if (this.script) {
-            mixin = this.script.trim().replace(/export default |module\.exports +=/, 'const mixin = ');
-        }
-        if (mixin) {
-            code += mixin;
-        }
-        code += 'export default {\n';
-        code += 'mixins: [';
-        const mixins = [];
-        // mixin
-        if (mixin) {
-            mixins.push('mixin')
-        }
-        // 键盘事件mixin
-        mixins.push('keyboardEventMixin')
-        code += mixins.join(',')
-        code += '],';
-
-        code += translator(definition);
-        code += '};\n';
-        return code;
-    }
-
-    genVueTemplate(options?: ElementToVueOptions) {
-        return this.elements?.map((element) => element?.toVue(options) + '\n').join('');
-    }
-    /**
-     * 转换成 Vue 文件
-     */
-    toVue(options?: ElementToVueOptions) {
-        let result = '';
-        result += `<template>\n${this.genVueTemplate(options)}\n</template>\n`;
-        result += `<script>\n${this.genScript()}\n</script>\n`;
-        return result;
-    }
-    /**
-     * 转换成设计器中使用的 Vue template 内容
-     * @param options
-     */
-    genDesignerVueTemplate() {
-        return this.elements.map((element) => element.toDesignerVue() + '\n').join('');
-    }
-    /**
-     * 转换成设计器中使用的 Vue 文件
-     * 目前不需要 script 和 style
-     * @param options
-     */
-    toDesignerVue() {
-        return `<template>\n${this.genDesignerVueTemplate()}</template>`;
-    }
-    /**
-     * 转换成 VueOptions
-     * @TODO 后面 template 可以优化成 render 函数
-     */
-    toVueOptions(options?: ElementToVueOptions) {
-        return {
-            template: this.genVueTemplate(options),
-            script: this.genScript(),
-        };
-    }
-    /**
-     * 生成宿主语言的文件路径
-     * @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}/views/${pathName}.ts`;
-    }
-
-    getNamespace(): string {
-        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('.')}.views`;
-        } else
-            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;
-    }
-
-    // 获取当前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);
-                    }
-                }
-            });
-        }
-    }
-
-    @withSourceMap()
-    toEmbeddedTS(state?: TranslatorState): string {
-        function chineseTsName(name: string) {
-            let tsName = name;
-            // 匹配所有特殊字符都转为_
-            tsName = tsName.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '_');
-            return tsName;
-        }
-        // 获取虚拟logic的参数和内容
-        // 用作展示和tots查找引用
-        this.getElementLogicRoot();
-
-        let code = `export namespace ${this.tsName} {\n`;
-        // 角色
-        if (Array.isArray(this.bindRoles) && this.bindRoles.length) {
-            code += indent((state?.tabSize || 0) + 1);
-            code += 'export let __bindRoles = [\n';
-            this.bindRoles.forEach((role) => {
-                code += indent((state?.tabSize || 0) + 1);
-                code += `${this.app.getNamespace()}.roles.${chineseTsName(role)}.${chineseTsName(role)},`;
-                code += '\n';
-            });
-            code += '\n';
-            code += indent((state?.tabSize || 0) + 1);
-            code += '];\n';
-        }
-        // 需要类型推导的局部变量/返回值需要调整申明顺序
-        const advanceMap: Map<Variable, Assignment | BatchAssignment> = new Map();
-        this.traverseChildren((el) => {
-            if (el && (el instanceof BatchAssignment || (el instanceof Assignment && el.left?.name))) {
-                // 子页面内部逻辑过滤
-                if (el.view !== this)
-                    return;
-                if (el instanceof Assignment) {
-                    const advanceVar = this.variables?.find((variable) =>
-                        !variable.typeAnnotation && el.left?.name === variable.name);
-                    if (advanceVar && !advanceMap.get(advanceVar)) {
-                        advanceMap.set(advanceVar, el);
-                    }
-                } else if (el instanceof BatchAssignment) {
-                    el.assignmentLines.forEach(({ leftIndex }) => {
-                        const leftCode
-                            = leftIndex.length === 1 ? el.left?.expression?.toEmbeddedTS(shiftState(state, code, { inline: true })) : el.left?.members[leftIndex[1]]?.toEmbeddedTS(shiftState(state, code, { inline: true }));
-                        const advanceVar = this.variables?.find((variable) =>
-                            !variable.typeAnnotation && leftCode === variable.name);
-                        if (advanceVar && !advanceMap.get(advanceVar)) {
-                            advanceMap.set(advanceVar, el);
-                        }
-                    });
-                }
+    code += keyboardEventMixinCode;
+    if (this.script) {
+      mixin = this.script.trim().replace(/export default |module\.exports +=/, 'const mixin = ');
+    }
+    if (mixin) {
+      code += mixin;
+    }
+    code += 'export default {\n';
+    code += 'mixins: [';
+    const mixins = [];
+    // mixin
+    if (mixin) {
+      mixins.push('mixin');
+    }
+    // 键盘事件mixin
+    mixins.push('keyboardEventMixin');
+    code += mixins.join(',');
+    code += '],';
+
+    code += translator(definition);
+    code += '};\n';
+    return code;
+  }
+
+  genVueTemplate(options?: ElementToVueOptions) {
+    return this.elements?.map((element) => `${element?.toVue(options)}\n`).join('');
+  }
+
+  /**
+   * 转换成 Vue 文件
+   */
+  toVue(options?: ElementToVueOptions) {
+    let result = '';
+    result += `<template>\n${this.genVueTemplate(options)}\n</template>\n`;
+    result += `<script>\n${this.genScript()}\n</script>\n`;
+    return result;
+  }
+
+  /**
+   * 转换成设计器中使用的 Vue template 内容
+   * @param options
+   */
+  genDesignerVueTemplate() {
+    return this.elements.map((element) => `${element.toDesignerVue()}\n`).join('');
+  }
+
+  /**
+   * 转换成设计器中使用的 Vue 文件
+   * 目前不需要 script 和 style
+   * @param options
+   */
+  toDesignerVue() {
+    return `<template>\n${this.genDesignerVueTemplate()}</template>`;
+  }
+
+  /**
+   * 转换成 VueOptions
+   * @TODO 后面 template 可以优化成 render 函数
+   */
+  toVueOptions(options?: ElementToVueOptions) {
+    return {
+      template: this.genVueTemplate(options),
+      script: this.genScript(),
+    };
+  }
+
+  /**
+   * 生成宿主语言的文件路径
+   * @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}/views/${pathName}.ts`;
+  }
+
+  getNamespace(): string {
+    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('.')}.views`;
+    }
+    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;
+  }
+
+  // 获取当前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);
             }
-        });
-        if (Array.isArray(this.params)) {
-            this.params.forEach((param) => {
-                code += indent((state?.tabSize || 0) + 1) + 'let ';
-                code += param.toEmbeddedTS(shiftState(state, code, { inline: true }));
-                code += ';\n';
-            });
-        }
-        if (Array.isArray(this.variables)) {
-            this.variables.forEach((variable) => {
-                if (!advanceMap.get(variable)) {
-                    code += indent((state?.tabSize || 0) + 1) + 'let ';
-                    code += variable.toEmbeddedTS(shiftState(state, code, { inline: true }));
-                    code += ';\n';
-                }
-            });
-        }
-        advanceMap.forEach((assignment, variable) => {
-            code += indent((state?.tabSize || 0) + 1) + '// @ts-ignore\n';
-            code += indent((state?.tabSize || 0) + 1) + 'let ';
-            code += variable.toEmbeddedTS(shiftState(state, code, { inline: true }));
-            code += ' = ';
-            if (assignment instanceof BatchAssignment) {
-                assignment.assignmentLines.forEach(({ leftIndex, rightIndex }) => {
-                    const leftCode = leftIndex.length === 1 ? assignment.left.expression.toEmbeddedTS(shiftState(state, code, { inline: true })) : assignment.left.members[leftIndex[1]]?.toEmbeddedTS(shiftState(state, code, { inline: true }));
-                    if (leftCode === variable.name) {
-                        const rightNode = rightIndex.length === 1 ? assignment.rights[rightIndex[0]]?.expression : assignment.rights[rightIndex[0]]?.members[rightIndex[1]];
-                        const rightCode = rightNode?.toEmbeddedTS(shiftState(state, code, { inline: true }));
-                        code += this.getRightCode(rightCode, assignment, rightNode);
-                    }
-                });
-            } else {
-                let rightCode = '';
-                // 因为右侧枚举要赋值就得new 一下；
-                if (assignment.right && assignment.right instanceof Identifier && assignment.right.namespace && assignment.right.namespace.endsWith('enums')) {
-                    rightCode += 'new ';
-                }
-                rightCode += (assignment.right && assignment.right.toEmbeddedTS) ? assignment.right.toEmbeddedTS(shiftState(state, code, { inline: true })) : '__RIGHT__';
-                code += this.getRightCode(rightCode, assignment, assignment.right);
+          } else {
+            this.elementsMethods(item.children, allMethods, parentNodeNames);
+          }
+        }
+      });
+    }
+  }
+
+  @withSourceMap()
+  toEmbeddedTS(state?: TranslatorState): string {
+    function chineseTsName(name: string) {
+      let tsName = name;
+      // 匹配所有特殊字符都转为_
+      tsName = tsName.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '_');
+      return tsName;
+    }
+    // 获取虚拟logic的参数和内容
+    // 用作展示和tots查找引用
+    this.getElementLogicRoot();
+
+    let code = `export namespace ${this.tsName} {\n`;
+    // 角色
+    if (Array.isArray(this.bindRoles) && this.bindRoles.length) {
+      code += indent((state?.tabSize || 0) + 1);
+      code += 'export let __bindRoles = [\n';
+      this.bindRoles.forEach((role) => {
+        code += indent((state?.tabSize || 0) + 1);
+        code += `${this.app.getNamespace()}.roles.${chineseTsName(role)}.${chineseTsName(role)},`;
+        code += '\n';
+      });
+      code += '\n';
+      code += indent((state?.tabSize || 0) + 1);
+      code += '];\n';
+    }
+    // 需要类型推导的局部变量/返回值需要调整申明顺序
+    const advanceMap: Map<Variable, Assignment | BatchAssignment> = new Map();
+    this.traverseChildren((el) => {
+      if (el && (el instanceof BatchAssignment || (el instanceof Assignment && el.left?.name))) {
+        // 子页面内部逻辑过滤
+        if (el.view !== this) return;
+        if (el instanceof Assignment) {
+          const advanceVar = this.variables?.find((variable) => !variable.typeAnnotation && el.left?.name === variable.name);
+          if (advanceVar && !advanceMap.get(advanceVar)) {
+            advanceMap.set(advanceVar, el);
+          }
+        } else if (el instanceof BatchAssignment) {
+          el.assignmentLines.forEach(({ leftIndex }) => {
+            const leftCode =
+              leftIndex.length === 1
+                ? el.left?.expression?.toEmbeddedTS(shiftState(state, code, { inline: true }))
+                : el.left?.members[leftIndex[1]]?.toEmbeddedTS(shiftState(state, code, { inline: true }));
+            const advanceVar = this.variables?.find((variable) => !variable.typeAnnotation && leftCode === variable.name);
+            if (advanceVar && !advanceMap.get(advanceVar)) {
+              advanceMap.set(advanceVar, el);
             }
-            code += ';\n';
+          });
+        }
+      }
+    });
+    if (Array.isArray(this.params)) {
+      this.params.forEach((param) => {
+        code += `${indent((state?.tabSize || 0) + 1)}let `;
+        code += param.toEmbeddedTS(shiftState(state, code, { inline: true }));
+        code += ';\n';
+      });
+    }
+    if (Array.isArray(this.variables)) {
+      this.variables.forEach((variable) => {
+        if (!advanceMap.get(variable)) {
+          code += `${indent((state?.tabSize || 0) + 1)}let `;
+          code += variable.toEmbeddedTS(shiftState(state, code, { inline: true }));
+          code += ';\n';
+        }
+      });
+    }
+    advanceMap.forEach((assignment, variable) => {
+      code += `${indent((state?.tabSize || 0) + 1)}// @ts-ignore\n`;
+      code += `${indent((state?.tabSize || 0) + 1)}let `;
+      code += variable.toEmbeddedTS(shiftState(state, code, { inline: true }));
+      code += ' = ';
+      if (assignment instanceof BatchAssignment) {
+        assignment.assignmentLines.forEach(({ leftIndex, rightIndex }) => {
+          const leftCode =
+            leftIndex.length === 1
+              ? assignment.left.expression.toEmbeddedTS(shiftState(state, code, { inline: true }))
+              : assignment.left.members[leftIndex[1]]?.toEmbeddedTS(shiftState(state, code, { inline: true }));
+          if (leftCode === variable.name) {
+            const rightNode =
+              rightIndex.length === 1 ? assignment.rights[rightIndex[0]]?.expression : assignment.rights[rightIndex[0]]?.members[rightIndex[1]];
+            const rightCode = rightNode?.toEmbeddedTS(shiftState(state, code, { inline: true }));
+            code += this.getRightCode(rightCode, assignment, rightNode);
+          }
         });
-
-        // elements类型声明定义
-        code += `interface __elements {\n`;
-        // 生成所有的name和类型定义
-        this.elements.forEach((element) => {
-            code += element.toEmbeddedTSDefinition(shiftState(state, code, {
-                tabSize: (state?.tabSize || 0) + 1,
-            }));
-        });
-        code += indent((state?.tabSize || 0) + 1) + '}\n';
-        code += `let __elements: __elements;\n`;
-        // 逻辑
-        if (Array.isArray(this.logics) && this.logics.length) {
-            code += indent((state?.tabSize || 0) + 1);
-            this.logics.forEach((logic) => {
-                code += logic.toEmbeddedTS(shiftState(state, code, {
-                    tabSize: (state?.tabSize || 0) + 2,
-                }), 'noExport');
-                code += '\n';
-            });
-            code += indent((state?.tabSize || 0) + 1);
-        }
-        // 事件
-        if (Array.isArray(this.bindEvents)) {
-            this.bindEvents.forEach((event) => {
-                code += event.toEmbeddedTS(shiftState(state, code, {
-                    tabSize: (state?.tabSize || 0),
-                }), true);
-                code += '\n';
-            });
-        }
-
-        // render函数
-        code += '\n' + indent((state?.tabSize || 0) + 1);
-        code += `export function __render(`;
-        code += `){\n`;
-        code += indent((state?.tabSize || 0));
-
-        // elements 元素
-        if (Array.isArray(this.elements)) {
-            // 生成嵌套式的内容
-            this.elements.forEach((element) => {
-                code += element.toEmbeddedTS(shiftState(state, code, {
-                    tabSize: (state?.tabSize || 0) + 3,
-                }));
-                code += '\n';
-            });
-        }
-
-        code += '\n' + indent((state?.tabSize || 0) + 1) + '}\n';
-
-        if (Array.isArray(this.params)) {
-            code += indent((state?.tabSize || 0) + 1) + `export function $destination(options: {`;
-            this.params.forEach((param, index) => {
-                code += param.name + '?: ';
-                code += param.typeAnnotation.toEmbeddedTS(shiftState(state, code));
-                code += ', ';
-            });
-
-            // 锚点
-            code += `_anchor?: nasl.core.String`;
-
-            code += '}){}\n';
-        }
-        code += indent((state?.tabSize || 0)) + '}\n';
-        return code;
-    }
-
-    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,
-        };
-    }
-
-    // IDE内展示需要屏蔽掉“系统统一路径前缀”
-    get uiPath() {
-        const basePath = this.frontend.basePath;
-        const _path = [];
-        let view: View = this;
-        while (view.concept === 'View') {
-            _path.push(view.name);
-            view = view.parentNode as View;
-        }
-        let path = '/';
-        if (_path.length) {
-            path += `${_path.reverse().join('/')}`;
-        }
-        return `${basePath}${path}`;
-    }
-
-    get path() {
-        const prefixPath = this.frontend.prefixPath;
-        const _path = [];
-        let view: View = this;
-        while (view.concept === 'View') {
-            _path.push(view.name);
-            view = view.parentNode as View;
-        }
-        let path = '/';
-        if (_path.length) {
-            path += `${_path.reverse().join('/')}`;
-        }
-        return `${prefixPath}${path}`;
-    }
-
-    /**
-     * 权限领域的资源路径
-     */
-    get authPath() {
-        return this.path;
-    }
-    /**
-     * 获取当前页面下所有elements上bindEvents下的logic
-     */
-    elementLogicRoot: any[] = [];
-
-    getElementLogicRoot() {
-        const logics: Array<Logic> = [];
-        // 页面上的绑定的事件
-        this.bindEvents.forEach((bindEvent) => {
+      } else {
+        let rightCode = '';
+        // 因为右侧枚举要赋值就得new 一下；
+        if (
+          assignment.right &&
+          assignment.right instanceof Identifier &&
+          assignment.right.namespace &&
+          assignment.right.namespace.endsWith('enums')
+        ) {
+          rightCode += 'new ';
+        }
+        rightCode +=
+          assignment.right && assignment.right.toEmbeddedTS ? assignment.right.toEmbeddedTS(shiftState(state, code, { inline: true })) : '__RIGHT__';
+        code += this.getRightCode(rightCode, assignment, assignment.right);
+      }
+      code += ';\n';
+    });
+
+    // elements类型声明定义
+    code += `interface __elements {\n`;
+    // 生成所有的name和类型定义
+    this.elements.forEach((element) => {
+      code += element.toEmbeddedTSDefinition(
+        shiftState(state, code, {
+          tabSize: (state?.tabSize || 0) + 1,
+        })
+      );
+    });
+    code += `${indent((state?.tabSize || 0) + 1)}}\n`;
+    code += `let __elements: __elements;\n`;
+    // 逻辑
+    if (Array.isArray(this.logics) && this.logics.length) {
+      code += indent((state?.tabSize || 0) + 1);
+      this.logics.forEach((logic) => {
+        code += logic.toEmbeddedTS(
+          shiftState(state, code, {
+            tabSize: (state?.tabSize || 0) + 2,
+          }),
+          'noExport'
+        );
+        code += '\n';
+      });
+      code += indent((state?.tabSize || 0) + 1);
+    }
+    // 事件
+    if (Array.isArray(this.bindEvents)) {
+      this.bindEvents.forEach((event) => {
+        code += event.toEmbeddedTS(
+          shiftState(state, code, {
+            tabSize: state?.tabSize || 0,
+          }),
+          true
+        );
+        code += '\n';
+      });
+    }
+
+    // render函数
+    code += `\n${indent((state?.tabSize || 0) + 1)}`;
+    code += `export function __render(`;
+    code += `){\n`;
+    code += indent(state?.tabSize || 0);
+
+    // elements 元素
+    if (Array.isArray(this.elements)) {
+      // 生成嵌套式的内容
+      this.elements.forEach((element) => {
+        code += element.toEmbeddedTS(
+          shiftState(state, code, {
+            tabSize: (state?.tabSize || 0) + 3,
+          })
+        );
+        code += '\n';
+      });
+    }
+
+    code += `\n${indent((state?.tabSize || 0) + 1)}}\n`;
+
+    if (Array.isArray(this.params)) {
+      code += `${indent((state?.tabSize || 0) + 1)}export function $destination(options: {`;
+      this.params.forEach((param, index) => {
+        code += `${param.name}?: `;
+        code += param.typeAnnotation.toEmbeddedTS(shiftState(state, code));
+        code += ', ';
+      });
+
+      // 锚点
+      code += `_anchor?: nasl.core.String`;
+
+      code += '}){}\n';
+    }
+    code += `${indent(state?.tabSize || 0)}}\n`;
+    return code;
+  }
+
+  @withSourceMap()
+  toNaturalTS(state?: TranslatorState, currentNode?: BaseNode): string {
+    let code = `export function ${this.tsName}_view`;
+    const advanceMap: Map<Variable, Assignment | BatchAssignment> = new Map();
+    this.traverseChildren((el) => {
+      if (el && (el instanceof BatchAssignment || (el instanceof Assignment && el.left?.name))) {
+        // 子页面内部逻辑过滤
+        if (el.view !== this)
+          return;
+        const jsCode = el.toJS();
+        const advanceVar = this.variables?.find((variable) =>
+          !variable.typeAnnotation && jsCode.includes(`this.${variable.name} = `));
+        if (advanceVar && !advanceMap.get(advanceVar)) {
+          advanceMap.set(advanceVar, el);
+        }
+      }
+    });
+
+    // 有参数长度
+    code += '(';
+    this.params.forEach((param, index) => {
+      code += param.toNaturalTS(shiftState(state, code, { inline: true }));
+      if (index !== this.params.length - 1)
+        code += ', ';
+    });
+    code += ')';
+    code += ' {\n';
+
+    this.variables.forEach((variable) => {
+      if (!advanceMap.get(variable)) {
+        code += `${indent(state.tabSize + 1)}let `;
+        code += variable.toNaturalTS(shiftState(state, code, { inline: true }));
+        code += ';\n';
+      }
+    });
+    code += `\n${indent(state.tabSize + 1)}const $refs = {\n`;
+    // 生成所有的name和类型定义
+    this.elements.forEach((element) => {
+      code += element.toNaturalTSDefinition(shiftState(state, code, {
+        tabSize: state.tabSize + 1,
+      }));
+    });
+    code += `${indent(state.tabSize + 1)}}\n`;
+    // 逻辑
+    if (currentNode?.concept === 'Logic') {
+      code += '\n';
+      code += (currentNode as Logic).toNaturalTS(shiftState(state, code, {
+        tabSize: state.tabSize + 1,
+      }), 'noExport');
+      code += '\n';
+    } else if (this.logics.length) {
+      code += '\n';
+      this.logics.forEach((logic) => {
+        code += logic.toNaturalTS(shiftState(state, code, {
+          tabSize: state.tabSize + 1,
+        }), 'noExport');
+        code += '\n';
+      });
+    }
+    code += `${indent(state.tabSize)}}\n`;
+    return code;
+  }
+
+  toEmbeddedTSFile() {
+    let code = `namespace ${this.getTsNamespace()} {\n`;
+    const state = createCompilerState(code, {
+      tabSize: 1,
+    });
+
+    try {
+      code += this.toEmbeddedTS(state);
+    } catch (err) {
+      code += '';
+      console.log(err);
+    }
+
+    code += '}\n';
+
+    return {
+      code,
+      filePath: this.getEmbeddedFilePath(),
+      sourceMap: state.sourceMap,
+    };
+  }
+
+  // IDE内展示需要屏蔽掉“系统统一路径前缀”
+  get uiPath() {
+    const { basePath } = this.frontend;
+    const _path = [];
+    let view: View = this;
+    while (view.concept === 'View') {
+      _path.push(view.name);
+      view = view.parentNode as View;
+    }
+    let path = '/';
+    if (_path.length) {
+      path += `${_path.reverse().join('/')}`;
+    }
+    return `${basePath}${path}`;
+  }
+
+  get path() {
+    const { prefixPath } = this.frontend;
+    const _path = [];
+    let view: View = this;
+    while (view.concept === 'View') {
+      _path.push(view.name);
+      view = view.parentNode as View;
+    }
+    let path = '/';
+    if (_path.length) {
+      path += `${_path.reverse().join('/')}`;
+    }
+    return `${prefixPath}${path}`;
+  }
+
+  /**
+   * 权限领域的资源路径
+   */
+  get authPath() {
+    return this.path;
+  }
+
+  /**
+   * 获取当前页面下所有elements上bindEvents下的logic
+   */
+  elementLogicRoot: any[] = [];
+
+  getElementLogicRoot() {
+    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 (['keydown', 'keyup'].includes(bindEvent.name)) {
-                    logic.virtualParams = [
-                        Param.from({
-                            name: 'event',
-                            typeAnnotation: null,
-                        }, logic, 'virtualParams')
-                    ]
-                }
-                // 生命周期没有event
-                logics.push(logic);
+              if (logic.name.startsWith('__')) {
+                return;
+              }
+              // 绑定参数才有 event 的 current
+              logic.virtualParams = bindEvent.getContextRenderLogicParams(logic);
+              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 = [];
-        }
-    }
-
-    getViewBindEvents() {
-        const bindEvents: Array<BindEvent> = [];
-        // 页面上的绑定的事件
-        this.bindEvents.forEach((bindEvent) => {
+          });
+        },
+        { 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 = [];
+    }
+  }
+
+  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;
+          /// / 处理三种情况
+          // 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;
+  }
+
+  /**
+   * @param path 子路径
+   * 比如当前页面路径为：/dashboard
+   * path 为要查找子路径：如 /student/list、student/list
+   */
+  findViewByPath(path: string): View {
+    const arr = path.split('/');
+    if (arr[0] === '') arr.shift();
+
+    if (!arr.length) return this;
+    const childName = arr.shift();
+    const subView = this.children.find((child) => child.name === childName);
+    return arr.length ? subView.findViewByPath(arr.join('/')) : subView;
+  }
+
+  findViewByName(name: string): View {
+    return utils.traverse(
+      (current) => {
+        if (current.node.name === name) return current.node;
+      },
+      { node: this }
+    );
+  }
+
+  findElementByName(name: string): ViewElement {
+    return this.elements[0]?.findElementByName(name);
+  }
+
+  findElementByTag(tag: string): ViewElement {
+    return this.elements[0]?.findElementByName(tag);
+  }
+
+  findElementByAttr(name: string, value: string): ViewElement {
+    return this.elements[0]?.findElementByAttr(name, value);
+  }
+
+  _setAsIndexView(isIndex: boolean) {
+    let views: View[] = [];
+    if (this.parentNode.concept !== 'View') {
+      views = (this.parentNode as Frontend).views;
+    } else if (this.parentNode.concept === 'View') {
+      views = (this.parentNode as View).children;
+    }
+    if (views.length) {
+      if (this.isIndex !== isIndex) {
+        this.setIsIndex(isIndex);
+      }
+      // 设为默认跳转页时，将之前的默认跳转页取消设置
+      if (isIndex) {
+        views.forEach((view) => {
+          if (view !== this && view.id !== this.id && view.isIndex) {
+            view.setIsIndex(false);
+          }
         });
-        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;
-                //// 处理三种情况
-                //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;
-    }
-
-    /**
-     * @param path 子路径
-     * 比如当前页面路径为：/dashboard
-     * path 为要查找子路径：如 /student/list、student/list
-     */
-    findViewByPath(path: string): View {
-        const arr = path.split('/');
-        if (arr[0] === '')
-            arr.shift();
-
-        if (!arr.length)
-            return this;
-        const childName = arr.shift();
-        const subView = this.children.find((child) => child.name === childName);
-        return arr.length ? subView.findViewByPath(arr.join('/')) : subView;
-    }
-
-    findViewByName(name: string): View {
-        return utils.traverse((current) => {
-            if (current.node.name === name)
-                return current.node;
-        }, { node: this });
-    }
-
-    findElementByName(name: string): ViewElement {
-        return this.elements[0]?.findElementByName(name);
-    }
-
-    findElementByTag(tag: string): ViewElement {
-        return this.elements[0]?.findElementByName(tag);
-    }
-
-    findElementByAttr(name: string, value: string): ViewElement {
-        return this.elements[0]?.findElementByAttr(name, value);
-    }
-
-    _setAsIndexView(isIndex: boolean) {
-        let views: View[] = [];
-        if (this.parentNode.concept !== 'View') {
-            views = (this.parentNode as Frontend).views;
-        } else if (this.parentNode.concept === 'View') {
-            views = (this.parentNode as View).children;
-        }
-        if (views.length) {
-            if (this.isIndex !== isIndex) {
-                this.setIsIndex(isIndex);
-            }
-            // 设为默认跳转页时，将之前的默认跳转页取消设置
-            if (isIndex) {
-                views.forEach((view) => {
-                    if (view !== this && view.isIndex) {
-                        view.setIsIndex(false);
-                    }
-                });
-            }
-        }
-    }
-
-    setAsIndexView(isIndex: boolean) {
-        let actionMsg = `设置页面“${this.name}”为默认跳转页`;
-        if (this.parentNode.concept !== 'View') {
-            actionMsg = `设置页面“${this.name}”为首页`;
-        }
-        this.rootNode.emit('collect:start', {
-            actionMsg,
-        });
-        this._setAsIndexView(isIndex);
-        this.rootNode.emit('collect:end');
-    }
-
-    removeExistingViewElement(viewElement: ViewElement) {
-        if (this.existingViewElement.has(viewElement.name)) {
-            this.existingViewElement.delete(viewElement.name);
-        }
-    }
-
-    getRightCode(code: string, assignment: Assignment | BatchAssignment, rightNode: any): string {
-        code = code.replaceAll('\n', ' ');
-        const logic = assignment.logic;
-        const logicRtn = logic?.returns[0];
-        // 调用接口，参数替换成 null
-        if (rightNode instanceof CallInterface) {
-            const { _interface } = rightNode.getModuleInterface();
-            return _interface ? `${rightNode.tsCalleeKey}(${_interface.params.map(() => 'null').join(',')})` : null;
-        }
-
-        // 调用服务端逻辑，参数替换成 null
-        if (rightNode instanceof CallLogic && rightNode.calleeNamespace === 'app.logics') {
-            const calleeName = rightNode?.calleeName;
-            const calleeLogic = this.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 = 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;
-        });
-    }
-
-    getAncestorViewElementsWithDataSource(logic: Logic): ViewElement[] {
-        let element: BaseNode = logic;
-        const viewElements: ViewElement[] = [];
-        while (element) {
-            if (element.concept
-                && element.concept === 'ViewElement'
-                && (element as ViewElement).bindAttrs.find((bAttr) => bAttr.name === 'data-source')) {
-                viewElements.push(element as ViewElement);
-            }
-            element = element.parentNode;
-        }
-        return viewElements;
-    }
-
-    handleCurrentItemCode(code: string, logic: Logic): string {
-        const viewElementsWithDataSource: ViewElement[] = this.getAncestorViewElementsWithDataSource(logic);
-        viewElementsWithDataSource.forEach((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 view = viewElement.getAncestor('View') as View;
-                    const dataSourceTS = dataSource.expression.toEmbeddedTS();
-                    const logic = view.logics.find((logic) => logic.name === dataSourceTS);
-                    if (logic) {
-                        code = code.replaceAll(currentItemCode, `nasl.ui.getCurrentItemType(${dataSourceTS}(${logic.params.map(() => 'null').join(',')}))`);
-                    } else {
-                        const variable = view.variables.find((variable) => variable.name === dataSourceTS);
-                        code = code.replaceAll(currentItemCode, `nasl.ui.getCurrentItemType(${variable ? variable.name : dataSourceTS})`);
-                    }
-                }
-            }
-        });
-        return code;
-    }
-
-    getViewCallLogics(): string[] {
-        const callbackLogics: string[] = [];
-        this.traverseChildren((el) => {
-            if (el instanceof Identifier && el.namespace?.endsWith('logics')) {
-                callbackLogics.push(el.namespace + '.' + el.name);
-            }
-        });
-        return callbackLogics;
-    }
-
-    //================================================================================
-    // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
-    // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
-    //================================================================================
+      }
+    }
+  }
+
+  setAsIndexView(isIndex: boolean) {
+    let actionMsg = `设置页面“${this.name}”为默认跳转页`;
+    if (this.parentNode.concept !== 'View') {
+      actionMsg = `设置页面“${this.name}”为首页`;
+    }
+    this.rootNode.emit('collect:start', {
+      actionMsg,
+    });
+    this._setAsIndexView(isIndex);
+    this.rootNode.emit('collect:end');
+  }
+
+  removeExistingViewElement(viewElement: ViewElement) {
+    if (this.existingViewElement.has(viewElement.name)) {
+      this.existingViewElement.delete(viewElement.name);
+    }
+  }
+
+  getRightCode(code: string, assignment: Assignment | BatchAssignment, rightNode: any): string {
+    code = code.replaceAll('\n', ' ');
+    const { logic } = assignment;
+    const logicRtn = logic?.returns[0];
+    // 调用接口，参数替换成 null
+    if (rightNode instanceof CallInterface) {
+      const { _interface } = rightNode.getModuleInterface();
+      return _interface ? `${rightNode.tsCalleeKey}(${_interface.params.map(() => 'null').join(',')})` : null;
+    }
+
+    // 调用服务端逻辑，参数替换成 null
+    if (rightNode instanceof CallLogic && rightNode.calleeNamespace === 'app.logics') {
+      const calleeName = rightNode?.calleeName;
+      const calleeLogic = this.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 = 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;
+    });
+  }
+
+  getAncestorViewElementsWithDataSource(logic: Logic): ViewElement[] {
+    let element: BaseNode = logic;
+    const viewElements: ViewElement[] = [];
+    while (element) {
+      if (element.concept && element.concept === 'ViewElement' && (element as ViewElement).bindAttrs.find((bAttr) => bAttr.name === 'data-source')) {
+        viewElements.push(element as ViewElement);
+      }
+      element = element.parentNode;
+    }
+    return viewElements;
+  }
+
+  handleCurrentItemCode(code: string, logic: Logic): string {
+    const viewElementsWithDataSource: ViewElement[] = this.getAncestorViewElementsWithDataSource(logic);
+    viewElementsWithDataSource.forEach((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 view = viewElement.getAncestor('View') as View;
+          const dataSourceTS = dataSource.expression.toEmbeddedTS();
+          const logic = view.logics.find((logic) => logic.name === dataSourceTS);
+          if (logic) {
+            code = code.replaceAll(currentItemCode, `nasl.ui.getCurrentItemType(${dataSourceTS}(${logic.params.map(() => 'null').join(',')}))`);
+          } else {
+            const variable = view.variables.find((variable) => variable.name === dataSourceTS);
+            code = code.replaceAll(currentItemCode, `nasl.ui.getCurrentItemType(${variable ? variable.name : dataSourceTS})`);
+          }
+        }
+      }
+    });
+    return code;
+  }
+
+  getViewCallLogics(): string[] {
+    const callbackLogics: string[] = [];
+    this.traverseChildren((el) => {
+      if (el instanceof Identifier && el.namespace?.endsWith('logics')) {
+        callbackLogics.push(`${el.namespace}.${el.name}`);
+      }
+    });
+    return callbackLogics;
+  }
+
+  //= ===============================================================================
+  // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
+  // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
+  //= ===============================================================================
 }
 
 classMap.View = View;
 export default View;
-//================================================================================
+//= ===============================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
 // 自动生成的代码已结束。下面可以手动编写。
-//================================================================================
+//= ===============================================================================