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

package/src/concepts/Frontend__.ts

@@ -1,16 +1,16 @@
+import { v4 as uuidv4 } from 'uuid';
 import { TranslatorState, shiftState, withSourceMap, indent, createCompilerState } from '../translator';
-import { AssetsInfo } from './App__';
+import App, { AssetsInfo } from './App__';
 import Namespace from './Namespace__';
 import Variable from './Variable__';
-//================================================================================
+//= ===============================================================================
 // 从这里开始到结尾注释之间的代码由 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 BindEvent from './BindEvent__';
@@ -18,1219 +18,1271 @@ import View from './View__';
 import FrontendVariable from './FrontendVariable__';
 import Theme from './Theme__';
 import Module from './Module__';
-import App from './App__';
 
 /**
  * 端
  */
 @concept('端')
 export class Frontend extends BaseNode {
-    /**
-     * 产品概念
-     */
-    @property()
-    concept: 'Frontend' = 'Frontend';
-
-    /**
-     * 端标识
-     */
-    @property()
-    name: string = undefined;
-
-    /**
-     * pc端
-     */
-    @property()
-    title: string = undefined;
-
-    /**
-     * PC/H5 端
-     */
-    @property()
-    type: 'pc' | 'h5' = undefined;
-
-    /**
-     * 基础路径
-     */
-    @property()
-    path: string = undefined;
-
-    /**
-     * 制品应用标题
-     */
-    @property()
-    documentTitle: string = undefined;
-
-    /**
-     * 制品应用图标
-     */
-    @property()
-    documentIcon: string = undefined;
-
-    /**
-     * 元素绑定事件列表
-     */
-    @property('BindEvent')
-    bindEvents: Array<BindEvent> = [];
-
-    /**
-     * 页面列表
-     */
-    @property('View')
-    views: Array<View> = [];
-
-    /**
-     * 前端全局变量列表
-     */
-    @property('FrontendVariable')
-    variables: Array<FrontendVariable> = [];
-
-    /**
-     * 主题配置
-     */
-    @property('Theme')
-    theme: Theme = new Theme();
-
-    /**
-     * 扩展组件列表（兼容老版）
-     */
-    @property('Module')
-    componentDependencies: Array<Module> = [];
-
-    /**
-     * 全局缩放开关
-     */
-    @property()
-    globalScaleEnabled: boolean = false;
-
-    /**
-     * 画布宽度
-     */
-    @property()
-    canvasWidth: number = 0;
-
-    /**
-     * 祖先 App
-     */
-    get app() {
-        return this.getAncestor('App') as App;
-    }
-
-    /**
-     * @param source 需要合并的部分参数
-     */
-    constructor(source?: Partial<Frontend>) {
-        source = Object.assign({}, Frontend.getDefaultOptions(), source);
-        super(source);
-        super.subConstructor(source);
-    }
-    getClassName() {
-        return 'Frontend';
-    }
-
-    static from(source: any, parentNode?: any, parentKey?: string): Frontend {
-        return super.from(source, parentNode, parentKey) as Frontend;
-    }
-
-    /**
-     * 从父级删除该节点
-     * @internal
-     */
-    _delete() {
-        let params: Params = null;
-        if (this.parentNode) {
-            params = (this.parentNode as any)?.__removeFrontend?.(this);
-        }
-        return params;
-    }
-    /**
-     * 设置端标识
-     */
-    setName(name: string) {
-        const object = {
-            name,
-        };
-        this.update({
-            ...object,
-            field: 'name',
-        });
-    }
-
-    /**
-     * 设置pc端
-     */
-    setTitle(title: string) {
-        const object = {
-            title,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    /**
-     * 设置基础路径
-     */
-    setPath(path: string) {
-        const object = {
-            path,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    /**
-     * 设置制品应用标题
-     */
-    setDocumentTitle(documentTitle: string) {
-        const object = {
-            documentTitle,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    /**
-     * 设置制品应用图标
-     */
-    setDocumentIcon(documentIcon: string) {
-        const object = {
-            documentIcon,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    /**
-     * 设置全局缩放开关
-     */
-    setGlobalScaleEnabled(globalScaleEnabled: boolean) {
-        const object = {
-            globalScaleEnabled,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    /**
-     * 设置画布宽度
-     */
-    setCanvasWidth(canvasWidth: number) {
-        const object = {
-            canvasWidth,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    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;
+  /**
+   * 产品概念
+   */
+  @property()
+  concept: 'Frontend' = 'Frontend';
+
+  /**
+   * 端标识
+   */
+  @property()
+  name: string = undefined;
+
+  /**
+   * pc端
+   */
+  @property()
+  title: string = undefined;
+
+  /**
+   * PC/H5 端
+   */
+  @property()
+  type: 'pc' | 'h5' = undefined;
+
+  /**
+   * 基础路径
+   */
+  @property()
+  path: string = undefined;
+
+  /**
+   * 制品应用标题
+   */
+  @property()
+  documentTitle: string = undefined;
+
+  /**
+   * 制品应用图标
+   */
+  @property()
+  documentIcon: string = undefined;
+
+  /**
+   * 元素绑定事件列表
+   */
+  @property('BindEvent')
+  bindEvents: Array<BindEvent> = [];
+
+  /**
+   * 页面列表
+   */
+  @property('View')
+  views: Array<View> = [];
+
+  /**
+   * 前端全局变量列表
+   */
+  @property('FrontendVariable')
+  variables: Array<FrontendVariable> = [];
+
+  /**
+   * 主题配置
+   */
+  @property('Theme')
+  theme: Theme = new Theme();
+
+  /**
+   * 扩展组件列表（兼容老版）
+   */
+  @property('Module')
+  componentDependencies: Array<Module> = [];
+
+  /**
+   * 全局缩放开关
+   */
+  @property()
+  globalScaleEnabled: boolean = false;
+
+  /**
+   * 画布宽度
+   */
+  @property()
+  canvasWidth: number = 0;
+
+  /**
+   * 祖先 App
+   */
+  get app() {
+    return this.getAncestor('App') as App;
+  }
+
+  /**
+   * @param source 需要合并的部分参数
+   */
+  constructor(source?: Partial<Frontend>) {
+    // @ts-ignore
+    source = { ...Frontend.getDefaultOptions(), ...source };
+    super(source);
+    super.subConstructor(source);
+  }
+
+  getClassName() {
+    return 'Frontend';
+  }
+
+  static from(source: any, parentNode?: any, parentKey?: string): Frontend {
+    return super.from(source, parentNode, parentKey) as Frontend;
+  }
+
+  /**
+   * 从父级删除该节点
+   * @internal
+   */
+  _delete() {
+    let params: Params = null;
+    if (this.parentNode) {
+      params = (this.parentNode as any)?.__removeFrontend?.(this);
     }
-
-    /**
-     * 插入元素绑定事件
-     * @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;
+    return params;
+  }
+
+  /**
+   * 设置端标识
+   */
+  setName(name: string) {
+    const object = {
+      name,
+    };
+    this.update({
+      ...object,
+      field: 'name',
+    });
+  }
+
+  /**
+   * 设置pc端
+   */
+  setTitle(title: string) {
+    const object = {
+      title,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置基础路径
+   */
+  setPath(path: string) {
+    const object = {
+      path,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置制品应用标题
+   */
+  setDocumentTitle(documentTitle: string) {
+    const object = {
+      documentTitle,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置制品应用图标
+   */
+  setDocumentIcon(documentIcon: string) {
+    const object = {
+      documentIcon,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置全局缩放开关
+   */
+  setGlobalScaleEnabled(globalScaleEnabled: boolean) {
+    const object = {
+      globalScaleEnabled,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置画布宽度
+   */
+  setCanvasWidth(canvasWidth: number) {
+    const object = {
+      canvasWidth,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  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'
+      );
     }
-
-    /**
-     * 添加元素绑定事件
-     * @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);
+    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.views as View[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+  }
+
+  getViewUniqueName(name = 'view1') {
+    return utils.unique(name, this.getViewExistingNames(), undefined, true);
+  }
+
+  /**
+   * 插入页面
+   * @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: 'views' };
+    let view: View;
+    if (!options) {
+      view = View.from(
+        {
+          ...viewOptions,
+          name: this.getViewUniqueName(),
+        },
+        this,
+        'views'
+      );
+    } else if (typeof options === 'string') {
+      view = View.from(
+        {
+          ...viewOptions,
+          name: options,
+        },
+        this,
+        'views'
+      );
+    } else if (options instanceof View) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      view = options;
+      Object.assign(view, relationOptions);
+    } else {
+      view = View.from(
+        {
+          ...viewOptions,
+          ...options,
+        },
+        this,
+        'views'
+      );
     }
-
-    /**
-     * 添加元素绑定事件
-     * @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;
+    this.views.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: 'views',
+    });
+    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.views.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.views.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'views',
+    });
+    return node;
+  }
+
+  getVarExistingNames(excludedList: Array<FrontendVariable> = []) {
+    const excludedSet = new Set(excludedList);
+    return ((this.variables as FrontendVariable[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+  }
+
+  getFrontendVariableUniqueName(name = 'frontendVariable1') {
+    return utils.unique(name, this.getVarExistingNames(), undefined, true);
+  }
+
+  /**
+   * 插入前端全局变量
+   * @internal
+   * @param name 前端全局变量名称，如果不填会自动生成一个唯一名称
+   */
+  _insertFrontendVariableAt(name: string, index: number): FrontendVariable;
+
+  /**
+   * 插入前端全局变量
+   * @internal
+   * @param frontendVariableOptions 前端全局变量参数
+   */
+  _insertFrontendVariableAt(frontendVariableOptions: Partial<FrontendVariable>, index: number): FrontendVariable;
+
+  /**
+   * 插入前端全局变量
+   * @internal
+   * @param frontendVariable 已有的前端全局变量实例
+   */
+  _insertFrontendVariableAt(frontendVariable: FrontendVariable, index: number): FrontendVariable;
+
+  _insertFrontendVariableAt(options: string | Partial<FrontendVariable> | FrontendVariable, index: number) {
+    const frontendVariableOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'variables' };
+    let frontendVariable: FrontendVariable;
+    if (!options) {
+      frontendVariable = FrontendVariable.from(
+        {
+          ...frontendVariableOptions,
+          name: this.getFrontendVariableUniqueName(),
+        },
+        this,
+        'variables'
+      );
+    } else if (typeof options === 'string') {
+      frontendVariable = FrontendVariable.from(
+        {
+          ...frontendVariableOptions,
+          name: options,
+        },
+        this,
+        'variables'
+      );
+    } else if (options instanceof FrontendVariable) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      frontendVariable = options;
+      Object.assign(frontendVariable, relationOptions);
+    } else {
+      frontendVariable = FrontendVariable.from(
+        {
+          ...frontendVariableOptions,
+          ...options,
+        },
+        this,
+        'variables'
+      );
     }
-
-    getViewExistingNames(excludedList: Array<View> = []) {
-        const excludedSet = new Set(excludedList);
-        return ((this.views as View[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    this.variables.splice(index, 0, frontendVariable);
+    return frontendVariable;
+  }
+
+  /**
+   * 插入前端全局变量
+   * @param name 前端全局变量名称，如果不填会自动生成一个唯一名称
+   */
+  insertFrontendVariableAt(name: string, index: number): FrontendVariable;
+
+  /**
+   * 插入前端全局变量
+   * @param frontendVariableOptions 前端全局变量参数
+   */
+  insertFrontendVariableAt(frontendVariableOptions: Partial<FrontendVariable>, index: number): FrontendVariable;
+
+  /**
+   * 插入前端全局变量
+   * @param frontendVariable 已有的前端全局变量实例
+   */
+  insertFrontendVariableAt(frontendVariable: FrontendVariable, index: number): FrontendVariable;
+
+  insertFrontendVariableAt(options: string | Partial<FrontendVariable> | FrontendVariable, index: number) {
+    const node = this._insertFrontendVariableAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'variables',
+    });
+    return node;
+  }
+
+  /**
+   * 添加前端全局变量
+   * @internal
+   * @param name 前端全局变量名称，如果不填会自动生成一个唯一名称
+   */
+  _addFrontendVariable(name?: string): FrontendVariable;
+
+  /**
+   * 添加前端全局变量
+   * @internal
+   * @param frontendVariableOptions 前端全局变量参数
+   */
+  _addFrontendVariable(frontendVariableOptions: Partial<FrontendVariable>): FrontendVariable;
+
+  /**
+   * 添加前端全局变量
+   * @internal
+   * @param frontendVariable 已有的前端全局变量实例
+   */
+  _addFrontendVariable(frontendVariable: FrontendVariable): FrontendVariable;
+
+  _addFrontendVariable(options?: string | Partial<FrontendVariable> | FrontendVariable) {
+    const index = this.variables.length;
+    return this._insertFrontendVariableAt(options as any, index);
+  }
+
+  /**
+   * 添加前端全局变量
+   * @internal
+   * @param name 前端全局变量名称，如果不填会自动生成一个唯一名称
+   */
+  addFrontendVariable(name?: string): FrontendVariable;
+
+  /**
+   * 添加前端全局变量
+   * @param frontendVariableOptions 前端全局变量参数
+   */
+  addFrontendVariable(frontendVariableOptions: Partial<FrontendVariable>): FrontendVariable;
+
+  /**
+   * 添加前端全局变量
+   * @param frontendVariable 已有的前端全局变量实例
+   */
+  addFrontendVariable(frontendVariable: FrontendVariable): FrontendVariable;
+
+  addFrontendVariable(options?: string | Partial<FrontendVariable> | FrontendVariable) {
+    const node = this._addFrontendVariable(options as any);
+    const index = this.variables.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'variables',
+    });
+    return node;
+  }
+
+  getModuleExistingNames(excludedList: Array<Module> = []) {
+    const excludedSet = new Set(excludedList);
+    return ((this.componentDependencies as Module[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+  }
+
+  getModuleUniqueName(name = 'module1') {
+    return utils.unique(name, this.getModuleExistingNames(), undefined, false);
+  }
+
+  /**
+   * 插入模块
+   * @internal
+   * @param name 模块名称，如果不填会自动生成一个唯一名称
+   */
+  _insertModuleAt(name: string, index: number): Module;
+
+  /**
+   * 插入模块
+   * @internal
+   * @param moduleOptions 模块参数
+   */
+  _insertModuleAt(moduleOptions: Partial<Module>, index: number): Module;
+
+  /**
+   * 插入模块
+   * @internal
+   * @param module 已有的模块实例
+   */
+  _insertModuleAt(module: Module, index: number): Module;
+
+  _insertModuleAt(options: string | Partial<Module> | Module, index: number) {
+    const moduleOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'componentDependencies' };
+    let module: Module;
+    if (!options) {
+      module = Module.from(
+        {
+          ...moduleOptions,
+          name: this.getModuleUniqueName(),
+        },
+        this,
+        'componentDependencies'
+      );
+    } else if (typeof options === 'string') {
+      module = Module.from(
+        {
+          ...moduleOptions,
+          name: options,
+        },
+        this,
+        'componentDependencies'
+      );
+    } else if (options instanceof Module) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      module = options;
+      Object.assign(module, relationOptions);
+    } else {
+      module = Module.from(
+        {
+          ...moduleOptions,
+          ...options,
+        },
+        this,
+        'componentDependencies'
+      );
     }
-    getViewUniqueName(name = 'view1') {
-        return utils.unique(name, this.getViewExistingNames(), undefined, true);
+    this.componentDependencies.splice(index, 0, module);
+    return module;
+  }
+
+  /**
+   * 插入模块
+   * @param name 模块名称，如果不填会自动生成一个唯一名称
+   */
+  insertModuleAt(name: string, index: number): Module;
+
+  /**
+   * 插入模块
+   * @param moduleOptions 模块参数
+   */
+  insertModuleAt(moduleOptions: Partial<Module>, index: number): Module;
+
+  /**
+   * 插入模块
+   * @param module 已有的模块实例
+   */
+  insertModuleAt(module: Module, index: number): Module;
+
+  insertModuleAt(options: string | Partial<Module> | Module, index: number) {
+    const node = this._insertModuleAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'componentDependencies',
+    });
+    return node;
+  }
+
+  /**
+   * 添加模块
+   * @internal
+   * @param name 模块名称，如果不填会自动生成一个唯一名称
+   */
+  _addModule(name?: string): Module;
+
+  /**
+   * 添加模块
+   * @internal
+   * @param moduleOptions 模块参数
+   */
+  _addModule(moduleOptions: Partial<Module>): Module;
+
+  /**
+   * 添加模块
+   * @internal
+   * @param module 已有的模块实例
+   */
+  _addModule(module: Module): Module;
+
+  _addModule(options?: string | Partial<Module> | Module) {
+    const index = this.componentDependencies.length;
+    return this._insertModuleAt(options as any, index);
+  }
+
+  /**
+   * 添加模块
+   * @internal
+   * @param name 模块名称，如果不填会自动生成一个唯一名称
+   */
+  addModule(name?: string): Module;
+
+  /**
+   * 添加模块
+   * @param moduleOptions 模块参数
+   */
+  addModule(moduleOptions: Partial<Module>): Module;
+
+  /**
+   * 添加模块
+   * @param module 已有的模块实例
+   */
+  addModule(module: Module): Module;
+
+  addModule(options?: string | Partial<Module> | Module) {
+    const node = this._addModule(options as any);
+    const index = this.componentDependencies.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'componentDependencies',
+    });
+    return node;
+  }
+
+  /**
+   * 删除元素绑定事件
+   * @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;
     }
-
-    /**
-    * 插入页面
-    * @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: 'views' };
-        let view: View;
-        if (!options) {
-            view = View.from({
-                ...viewOptions,
-                name: this.getViewUniqueName(),
-            }, this, 'views');
-        } else if (typeof options === 'string') {
-            view = View.from({
-                ...viewOptions,
-                name: options,
-            }, this, 'views');
-        } else if (options instanceof View) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            view = options;
-            Object.assign(view, relationOptions);
-        } else {
-            view = View.from({
-                ...viewOptions,
-                ...options,
-            }, this, 'views');
-        }
-        this.views.splice(index, 0, view);
-        return view;
+    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;
+      }
     }
-
-    /**
-     * 插入页面
-     * @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: 'views',
-        });
-        return node;
+    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.views as View[]).find((item) => item.name === options);
+      if (!view) {
+        throw new Error(`找不到页面 ${options}`);
+      }
+    } else {
+      view = options;
     }
-
-    /**
-     * 添加页面
-     * @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.views.length;
-        return this._insertViewAt(options as any, index);
+    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;
+      }
     }
-
-    /**
-     * 添加页面
-     * @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.views.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'views',
-        });
-        return node;
+    return params;
+  }
+
+  /**
+   * 删除前端全局变量
+   * @param name 前端全局变量名称
+   */
+  removeFrontendVariable(name: string): void;
+
+  /**
+   * 删除前端全局变量
+   * @param frontendVariable 已有的前端全局变量实例
+   */
+  removeFrontendVariable(frontendVariable: FrontendVariable): void;
+
+  removeFrontendVariable(options: string | FrontendVariable) {
+    let frontendVariable: FrontendVariable;
+    if (typeof options === 'string') {
+      frontendVariable = (this.variables as FrontendVariable[]).find((item) => item.name === options);
+      if (!frontendVariable) {
+        throw new Error(`找不到前端全局变量 ${options}`);
+      }
+    } else {
+      frontendVariable = options;
     }
-
-    getVarExistingNames(excludedList: Array<FrontendVariable> = []) {
-        const excludedSet = new Set(excludedList);
-        return ((this.variables as FrontendVariable[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    return frontendVariable.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;
+      }
     }
-    getFrontendVariableUniqueName(name = 'frontendVariable1') {
-        return utils.unique(name, this.getVarExistingNames(), undefined, true);
+    return params;
+  }
+
+  /**
+   * 删除主题
+   * @param name 主题名称
+   */
+  removeTheme(name: string): void;
+
+  /**
+   * 删除主题
+   * @param theme 已有的主题实例
+   */
+  removeTheme(theme: Theme): void;
+
+  removeTheme(options: string | Theme) {
+    let theme: Theme;
+    if (typeof options === 'string') {
+      theme = this.theme;
+      if (!theme) {
+        throw new Error(`找不到主题 ${options}`);
+      }
+    } else {
+      theme = options;
     }
-
-    /**
-    * 插入前端全局变量
-    * @internal
-    * @param name 前端全局变量名称，如果不填会自动生成一个唯一名称
-    */
-    _insertFrontendVariableAt(name: string, index: number): FrontendVariable;
-
-    /**
-    * 插入前端全局变量
-    * @internal
-    * @param frontendVariableOptions 前端全局变量参数
-    */
-    _insertFrontendVariableAt(frontendVariableOptions: Partial<FrontendVariable>, index: number): FrontendVariable;
-
-    /**
-    * 插入前端全局变量
-    * @internal
-    * @param frontendVariable 已有的前端全局变量实例
-    */
-    _insertFrontendVariableAt(frontendVariable: FrontendVariable, index: number): FrontendVariable;
-
-    _insertFrontendVariableAt(options: string | Partial<FrontendVariable> | FrontendVariable, index: number) {
-        const frontendVariableOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'variables' };
-        let frontendVariable: FrontendVariable;
-        if (!options) {
-            frontendVariable = FrontendVariable.from({
-                ...frontendVariableOptions,
-                name: this.getFrontendVariableUniqueName(),
-            }, this, 'variables');
-        } else if (typeof options === 'string') {
-            frontendVariable = FrontendVariable.from({
-                ...frontendVariableOptions,
-                name: options,
-            }, this, 'variables');
-        } else if (options instanceof FrontendVariable) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            frontendVariable = options;
-            Object.assign(frontendVariable, relationOptions);
-        } else {
-            frontendVariable = FrontendVariable.from({
-                ...frontendVariableOptions,
-                ...options,
-            }, this, 'variables');
-        }
-        this.variables.splice(index, 0, frontendVariable);
-        return frontendVariable;
+    return theme.delete();
+  }
+
+  __removeTheme(theme: Theme) {
+    const { parentKey } = theme;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: theme,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(theme);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === theme) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
     }
-
-    /**
-     * 插入前端全局变量
-     * @param name 前端全局变量名称，如果不填会自动生成一个唯一名称
-     */
-    insertFrontendVariableAt(name: string, index: number): FrontendVariable;
-
-    /**
-     * 插入前端全局变量
-     * @param frontendVariableOptions 前端全局变量参数
-     */
-    insertFrontendVariableAt(frontendVariableOptions: Partial<FrontendVariable>, index: number): FrontendVariable;
-
-    /**
-     * 插入前端全局变量
-     * @param frontendVariable 已有的前端全局变量实例
-     */
-    insertFrontendVariableAt(frontendVariable: FrontendVariable, index: number): FrontendVariable;
-
-    insertFrontendVariableAt(options: string | Partial<FrontendVariable> | FrontendVariable, index: number) {
-        const node = this._insertFrontendVariableAt(options as any, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'variables',
-        });
-        return node;
+    return params;
+  }
+
+  /**
+   * 删除模块
+   * @param name 模块名称
+   */
+  removeModule(name: string): void;
+
+  /**
+   * 删除模块
+   * @param module 已有的模块实例
+   */
+  removeModule(module: Module): void;
+
+  removeModule(options: string | Module) {
+    let module: Module;
+    if (typeof options === 'string') {
+      module = (this.componentDependencies as Module[]).find((item) => item.name === options);
+      if (!module) {
+        throw new Error(`找不到模块 ${options}`);
+      }
+    } else {
+      module = options;
     }
-
-    /**
-     * 添加前端全局变量
-     * @internal
-     * @param name 前端全局变量名称，如果不填会自动生成一个唯一名称
-     */
-    _addFrontendVariable(name?: string): FrontendVariable;
-
-    /**
-     * 添加前端全局变量
-     * @internal
-     * @param frontendVariableOptions 前端全局变量参数
-     */
-    _addFrontendVariable(frontendVariableOptions: Partial<FrontendVariable>): FrontendVariable;
-
-    /**
-     * 添加前端全局变量
-     * @internal
-     * @param frontendVariable 已有的前端全局变量实例
-     */
-    _addFrontendVariable(frontendVariable: FrontendVariable): FrontendVariable;
-
-    _addFrontendVariable(options?: string | Partial<FrontendVariable> | FrontendVariable) {
-        const index = this.variables.length;
-        return this._insertFrontendVariableAt(options as any, index);
+    return module.delete();
+  }
+
+  __removeModule(module: Module) {
+    const { parentKey } = module;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: module,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(module);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === module) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
     }
-
-    /**
-     * 添加前端全局变量
-     * @internal
-     * @param name 前端全局变量名称，如果不填会自动生成一个唯一名称
-     */
-    addFrontendVariable(name?: string): FrontendVariable;
-
-    /**
-     * 添加前端全局变量
-     * @param frontendVariableOptions 前端全局变量参数
-     */
-    addFrontendVariable(frontendVariableOptions: Partial<FrontendVariable>): FrontendVariable;
-
-    /**
-     * 添加前端全局变量
-     * @param frontendVariable 已有的前端全局变量实例
-     */
-    addFrontendVariable(frontendVariable: FrontendVariable): FrontendVariable;
-
-    addFrontendVariable(options?: string | Partial<FrontendVariable> | FrontendVariable) {
-        const node = this._addFrontendVariable(options as any);
-        const index = this.variables.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'variables',
-        });
-        return node;
-    }
-
-    getModuleExistingNames(excludedList: Array<Module> = []) {
-        const excludedSet = new Set(excludedList);
-        return ((this.componentDependencies as Module[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
-    }
-    getModuleUniqueName(name = 'module1') {
-        return utils.unique(name, this.getModuleExistingNames(), undefined, false);
-    }
-
-    /**
-    * 插入模块
-    * @internal
-    * @param name 模块名称，如果不填会自动生成一个唯一名称
-    */
-    _insertModuleAt(name: string, index: number): Module;
-
-    /**
-    * 插入模块
-    * @internal
-    * @param moduleOptions 模块参数
-    */
-    _insertModuleAt(moduleOptions: Partial<Module>, index: number): Module;
-
-    /**
-    * 插入模块
-    * @internal
-    * @param module 已有的模块实例
-    */
-    _insertModuleAt(module: Module, index: number): Module;
-
-    _insertModuleAt(options: string | Partial<Module> | Module, index: number) {
-        const moduleOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'componentDependencies' };
-        let module: Module;
-        if (!options) {
-            module = Module.from({
-                ...moduleOptions,
-                name: this.getModuleUniqueName(),
-            }, this, 'componentDependencies');
-        } else if (typeof options === 'string') {
-            module = Module.from({
-                ...moduleOptions,
-                name: options,
-            }, this, 'componentDependencies');
-        } else if (options instanceof Module) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            module = options;
-            Object.assign(module, relationOptions);
-        } else {
-            module = Module.from({
-                ...moduleOptions,
-                ...options,
-            }, this, 'componentDependencies');
-        }
-        this.componentDependencies.splice(index, 0, module);
-        return module;
-    }
-
-    /**
-     * 插入模块
-     * @param name 模块名称，如果不填会自动生成一个唯一名称
-     */
-    insertModuleAt(name: string, index: number): Module;
-
-    /**
-     * 插入模块
-     * @param moduleOptions 模块参数
-     */
-    insertModuleAt(moduleOptions: Partial<Module>, index: number): Module;
-
-    /**
-     * 插入模块
-     * @param module 已有的模块实例
-     */
-    insertModuleAt(module: Module, index: number): Module;
-
-    insertModuleAt(options: string | Partial<Module> | Module, index: number) {
-        const node = this._insertModuleAt(options as any, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'componentDependencies',
-        });
-        return node;
-    }
-
-    /**
-     * 添加模块
-     * @internal
-     * @param name 模块名称，如果不填会自动生成一个唯一名称
-     */
-    _addModule(name?: string): Module;
-
-    /**
-     * 添加模块
-     * @internal
-     * @param moduleOptions 模块参数
-     */
-    _addModule(moduleOptions: Partial<Module>): Module;
-
-    /**
-     * 添加模块
-     * @internal
-     * @param module 已有的模块实例
-     */
-    _addModule(module: Module): Module;
-
-    _addModule(options?: string | Partial<Module> | Module) {
-        const index = this.componentDependencies.length;
-        return this._insertModuleAt(options as any, index);
-    }
-
-    /**
-     * 添加模块
-     * @internal
-     * @param name 模块名称，如果不填会自动生成一个唯一名称
-     */
-    addModule(name?: string): Module;
-
-    /**
-     * 添加模块
-     * @param moduleOptions 模块参数
-     */
-    addModule(moduleOptions: Partial<Module>): Module;
-
-    /**
-     * 添加模块
-     * @param module 已有的模块实例
-     */
-    addModule(module: Module): Module;
-
-    addModule(options?: string | Partial<Module> | Module) {
-        const node = this._addModule(options as any);
-        const index = this.componentDependencies.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'componentDependencies',
-        });
-        return node;
-    }
-
-    /**
-    * 删除元素绑定事件
-    * @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.views 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.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;
-    }
-
-    /**
-    * 删除前端全局变量
-    * @param name 前端全局变量名称
-    */
-    removeFrontendVariable(name: string): void;
-
-    /**
-     * 删除前端全局变量
-     * @param frontendVariable 已有的前端全局变量实例
-     */
-    removeFrontendVariable(frontendVariable: FrontendVariable): void;
-
-    removeFrontendVariable(options: string | FrontendVariable) {
-        let frontendVariable: FrontendVariable;
-        if (typeof options === 'string') {
-            frontendVariable = (this.variables as FrontendVariable[]).find((item) => item.name === options);
-            if (!frontendVariable) {
-                throw new Error('找不到前端全局变量 ' + options);
-            }
-        } else {
-            frontendVariable = options;
-        }
-        return frontendVariable.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 主题名称
-    */
-    removeTheme(name: string): void;
-
-    /**
-     * 删除主题
-     * @param theme 已有的主题实例
-     */
-    removeTheme(theme: Theme): void;
-
-    removeTheme(options: string | Theme) {
-        let theme: Theme;
-        if (typeof options === 'string') {
-            theme = this.theme;
-            if (!theme) {
-                throw new Error('找不到主题 ' + options);
-            }
-        } else {
-            theme = options;
-        }
-        return theme.delete();
-    }
-
-    __removeTheme(theme: Theme) {
-        const parentKey = theme.parentKey;
-        const params: Params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: theme,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(theme);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === theme) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
-        }
-        return params;
-    }
-
-    /**
-    * 删除模块
-    * @param name 模块名称
-    */
-    removeModule(name: string): void;
-
-    /**
-     * 删除模块
-     * @param module 已有的模块实例
-     */
-    removeModule(module: Module): void;
-
-    removeModule(options: string | Module) {
-        let module: Module;
-        if (typeof options === 'string') {
-            module = (this.componentDependencies as Module[]).find((item) => item.name === options);
-            if (!module) {
-                throw new Error('找不到模块 ' + options);
-            }
-        } else {
-            module = options;
-        }
-        return module.delete();
-    }
-
-    __removeModule(module: Module) {
-        const parentKey = module.parentKey;
-        const params: Params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: module,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(module);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === module) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
-        }
-        return params;
-    }
-
-    //================================================================================
-    // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
-    // 自动生成的代码已结束。下面可以手动编写。
-    //================================================================================
-
-    findComponentDependencyByName(name: string) {
-        return this.componentDependencies.find((componentDependency) => componentDependency.name === name);
-    }
-
-    /**
-     * @param path 路径
-     * path 为要查找路径：如 /dashboard/student/list、/dashboard/student/list
-     */
-    findViewByPath(path: string) {
-        const arr = path.split('/');
-        if (arr[0] === '')
-            arr.shift();
-
-        if (!arr.length)
-            throw Error('Cannot find View ' + path);
-        const childName = arr.shift();
-        const subView = this.views.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: { name: '', children: this.views } });
-    }
-
-    genThemeCSS() {
-        const keys = Object.keys(this.theme?.variableMap || {});
-        if (!keys.length)
-            return;
-
-        return `:root {
+    return params;
+  }
+
+  //= ===============================================================================
+  // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+  // 自动生成的代码已结束。下面可以手动编写。
+  //= ===============================================================================
+
+  findComponentDependencyByName(name: string) {
+    return this.componentDependencies.find((componentDependency) => componentDependency.name === name);
+  }
+
+  /**
+   * @param path 路径
+   * path 为要查找路径：如 /dashboard/student/list、/dashboard/student/list
+   */
+  findViewByPath(path: string) {
+    const arr = path.split('/');
+    if (arr[0] === '') arr.shift();
+
+    if (!arr.length) throw Error(`Cannot find View ${path}`);
+    const childName = arr.shift();
+    const subView = this.views.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: { name: '', children: this.views } }
+    );
+  }
+
+  genThemeCSS() {
+    const keys = Object.keys(this.theme?.variableMap || {});
+    if (!keys.length) return;
+
+    return `:root {
             ${keys.map((key) => `    ${key}: ${this.theme?.variableMap[key]};`).join('\n')}
         }`;
+  }
+
+  getTsNamespace() {
+    if (this.parentNode && (this.parentNode as Namespace).getNamespace) {
+      const parentNamespace = (this.parentNode as Namespace).getNamespace();
+      const parentName = this.parentNode.name;
+      const arr = [parentNamespace];
+      if (this.parentNode.concept !== 'App' && parentName) {
+        arr.push(parentName);
+      }
+      return `${arr.join('.')}.frontends`;
     }
-    getTsNamespace() {
-        if (this.parentNode && (this.parentNode as Namespace).getNamespace) {
-            const parentNamespace = (this.parentNode as Namespace).getNamespace();
-            const parentName = this.parentNode.name;
-            const arr = [parentNamespace];
-            if (this.parentNode.concept !== 'App' && parentName) {
-                arr.push(parentName);
-            }
-            return `${arr.join('.')}.frontends`;
-        } else
-            throw new Error('无法获取命名空间，请设置 parentNode！');
-    }
-
-    getNamespace() {
-        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('.')}.frontends`;
-        } else
-            throw new Error('无法获取命名空间，请设置 parentNode！');
+    throw new Error('无法获取命名空间，请设置 parentNode！');
+  }
+
+  getNamespace() {
+    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('.')}.frontends`;
     }
-
-    /**
-     * 生成宿主语言的文件路径
-     * @param name 一般不用传，用于 rename
-     */
-    getEmbeddedFilePath(name = this.name) {
-        return `/embedded/${this.rootNode?.name || this.parentNode.name}/frontends/${name}.ts`;
-    }
-
-    @withSourceMap()
-    toEmbeddedTS(state?: TranslatorState): string {
-        let code = `export namespace ${this.name} {\n`;
-        code += 'const name = ';
-        code += '"' + this.name + '";\n';
-        code += '}\n';
-        return code;
+    throw new Error('无法获取命名空间，请设置 parentNode！');
+  }
+
+  /**
+   * 生成宿主语言的文件路径
+   * @param name 一般不用传，用于 rename
+   */
+  getEmbeddedFilePath(name = this.name) {
+    return `/embedded/${this.rootNode?.name || this.parentNode.name}/frontends/${name}.ts`;
+  }
+
+  @withSourceMap()
+  toEmbeddedTS(state?: TranslatorState): string {
+    let code = `export namespace ${this.name} {\n`;
+    code += 'const name = ';
+    code += `"${this.name}";\n`;
+    code += '}\n';
+    return code;
+  }
+
+  toEmbeddedTSFile() {
+    let code = `namespace ${this.getNamespace()} {\n`;
+
+    const state = createCompilerState(code, { tabSize: 1 });
+    try {
+      code += this.toEmbeddedTS(state);
+    } catch (err) {
+      code += '';
+      console.log(err);
     }
-    toEmbeddedTSFile() {
-        let code = `namespace ${this.getNamespace()} {\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,
+    };
+  }
+
+  getPath() {
+    const { path } = this;
+    const finalPath = path && path !== '/' ? path : '';
+    return finalPath;
+  }
+
+  // 前缀
+  get prefixPath() {
+    const prefixArr: string[] = [];
+    [this.app.sysPrefixPath, this.basePath].forEach((prefix) => {
+      if (prefix) {
+        prefixArr.push(prefix);
+      }
+    });
+    return prefixArr.join('');
+  }
+
+  /**
+   * 为/的转成''，便于url拼接
+   */
+  get basePath() {
+    const { path } = this;
+    const basePath = path && path !== '/' ? path : '';
+    return basePath;
+  }
+
+  genCustomAssetsInfo(prefix: string) {
+    const custom: AssetsInfo = {
+      js: [],
+      css: [],
+      names: [],
+    };
+    const existingSet = new Set();
+    this.componentDependencies.forEach((dep) => {
+      const { name, version } = dep;
+      const jsName = `${prefix}/packages/${name}@${version}/dist-theme/index.js`;
+      if (!existingSet.has(jsName)) {
+        existingSet.add(jsName);
+        custom.js.push(jsName);
+        if (utils.shouldLoadCss(name, version)) {
+          custom.css.push(`${prefix}/packages/${name}@${version}/dist-theme/index.css`);
         }
-        code += '}\n';
-
-        return {
-            code,
-            filePath: this.getEmbeddedFilePath(),
-            sourceMap: state.sourceMap,
-        };
-    }
-
-    getPath() {
-        const path = this.path;
-        const finalPath = path && path !== '/' ? path : '';
-        return finalPath;
-    }
-
-    // 前缀
-    get prefixPath() {
-        const prefixArr: string[] = [];
-        [
-            this.app.sysPrefixPath,
-            this.basePath,
-        ].forEach((prefix) => {
-            if (prefix) {
-                prefixArr.push(prefix);
-            }
-        });
-        return prefixArr.join('');
-    }
-
-    /**
-     * 为/的转成''，便于url拼接
-     */
-    get basePath() {
-        const path = this.path;
-        const basePath = path && path !== '/' ? path : '';
-        return basePath;
-    }
-
-    genCustomAssetsInfo(prefix: string) {
-        const custom: AssetsInfo = {
-            js: [],
-            css: [],
-            names: [],
-        };
-        const existingSet = new Set();
-        this.componentDependencies.forEach((dep) => {
-            const { name, version } = dep;
-            const jsName = `${prefix}/packages/${name}@${version}/dist-theme/index.js`;
-            if (!existingSet.has(jsName)) {
-                existingSet.add(jsName);
-                custom.js.push(jsName);
-                if (utils.shouldLoadCss(name, version)) {
-                    custom.css.push(`${prefix}/packages/${name}@${version}/dist-theme/index.css`);
-                }
-                custom.names.push(name);
-            }
-        });
-        return custom;
-    }
-
-    getExtensionsCallbackLogics() {
-        let resultLogics: string[] = [];
-        this.views.forEach((item: View) => {
-            resultLogics = [...resultLogics, ...item.getViewCallLogics()];
-        });
-        return Array.from(new Set(resultLogics));
-    }
-
-    get defaultCanvasWidth() {
-        return this.type === 'pc' ? 1440 : 375;
-    }
-    /**
-    * 获取当前页面下所有elements上bindEvents下的logic
-    */
-    // elementLogicRoot: any[] = [];
-
-    // getElementLogicRoot() {
-    //     const logics: Array<Logic> = [];
-    //     // 页面上的绑定的事件
-    //     this.bindEvents.forEach((bindEvent) => {
-    //         bindEvent.logics.forEach((logic) => {
-    //             // 声明周期没有event
-    //             logics.push(logic);
-    //         });
-    //     });
-    //     if (logics.length) {
-    //         const expanded = (this.elementLogicRoot.length && this.elementLogicRoot[0].expanded) || false;
-    //         this.elementLogicRoot = [{
-    //             concept: 'elementLogicRoot',
-    //             expanded,
-    //             children: logics,
-    //         }];
-    //     } else {
-    //         this.elementLogicRoot = [];
-    //     }
-    // }
-
-    //================================================================================
-    // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
-    // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
-    //================================================================================
+        custom.names.push(name);
+      }
+    });
+    return custom;
+  }
+
+  getExtensionsCallbackLogics() {
+    let resultLogics: string[] = [];
+    this.views.forEach((item: View) => {
+      resultLogics = [...resultLogics, ...item.getViewCallLogics()];
+    });
+    return Array.from(new Set(resultLogics));
+  }
+
+  get defaultCanvasWidth() {
+    return this.type === 'pc' ? 1440 : 375;
+  }
+  /**
+   * 获取当前页面下所有elements上bindEvents下的logic
+   */
+  // elementLogicRoot: any[] = [];
+
+  // getElementLogicRoot() {
+  //     const logics: Array<Logic> = [];
+  //     // 页面上的绑定的事件
+  //     this.bindEvents.forEach((bindEvent) => {
+  //         bindEvent.logics.forEach((logic) => {
+  //             // 声明周期没有event
+  //             logics.push(logic);
+  //         });
+  //     });
+  //     if (logics.length) {
+  //         const expanded = (this.elementLogicRoot.length && this.elementLogicRoot[0].expanded) || false;
+  //         this.elementLogicRoot = [{
+  //             concept: 'elementLogicRoot',
+  //             expanded,
+  //             children: logics,
+  //         }];
+  //     } else {
+  //         this.elementLogicRoot = [];
+  //     }
+  // }
+
+  //= ===============================================================================
+  // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
+  // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
+  //= ===============================================================================
 }
 
 classMap.Frontend = Frontend;
 export default Frontend;
-//================================================================================
+//= ===============================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
 // 自动生成的代码已结束。下面可以手动编写。
-//================================================================================
+//= ===============================================================================