@lcap/nasl 0.3.15 → 1.0.0-alpha.10

package/src/concepts/ViewElement__.ts

@@ -0,0 +1,1686 @@
+import { TranslatorState, shiftState, withSourceMap, indent } from '../translator';
+import Role from './Role__';
+
+import * as babelParser from '@babel/parser';
+import * as json5 from 'json5';
+import * as compiler from 'vue-template-compiler';
+
+import LogicItem from './LogicItem__';
+
+import { config } from '..';
+
+export interface ParseContext {
+    [key: string]: any;
+}
+
+function genArgumentMemberExpression(arr: string[]) {
+    let expressionNode: any;
+    const propertyName = arr.pop();
+    if (arr.length >= 1) {
+        expressionNode = {
+            concept: 'MemberExpression',
+            name: '',
+            kind: 'Expression',
+            object: genArgumentMemberExpression(arr),
+            property: {
+                concept: 'Identifier',
+                kind: 'Expression',
+                name: propertyName,
+            },
+        };
+    } else {
+        return {
+            concept: 'Identifier',
+            kind: 'Expression',
+            name: propertyName,
+        };
+    }
+    return expressionNode;
+}
+export interface ElementToVueOptions {
+    indentStyle?: 'space' | 'tab';
+    tabSize?: number;
+    indentLevel?: number;
+    aslIdAttr?: string | boolean;
+    nodePathAttr?: string | boolean;
+    getExtraParts?: (element?: ViewElement) => Array<string>;
+    attrFormat?: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => string | false;
+    finalCode?: boolean;
+}
+
+function transAstNodeToNaslNode(astNode: any): any {
+    let node = null;
+    if (astNode.type === 'CallExpression' && astNode.callee.object.name === '$utils') {
+        const calleeName = astNode.callee.property.name || astNode.callee.property.value;
+        node = {
+            concept: 'CallFunction',
+            name: '',
+            label: '调用逻辑',
+            kind: 'Expression',
+            calleeNamespace: 'nasl.util',
+            calleeName,
+            arguments: astNode.arguments.map((argument: any) => ({
+                concept: 'Argument',
+                name: '',
+                kind: 'Statement',
+                keyword: '',
+                expression: transAstNodeToNaslNode(Object.assign({}, argument)),
+            })),
+        };
+    } else if (astNode.type === 'MemberExpression') {
+        node = {
+            concept: 'MemberExpression',
+            name: '',
+            kind: 'Expression',
+            object: transAstNodeToNaslNode(astNode.object),
+            property: transAstNodeToNaslNode(astNode.property),
+        };
+    } else if (astNode.type === 'Identifier') {
+        node = {
+            concept: 'Identifier',
+            name: astNode.name,
+            kind: 'Expression',
+        };
+    } else if (astNode.type === 'ArrayExpression' || astNode.type === 'ObjectExpression') {
+        node = {
+            concept: 'Unparsed',
+            label: '原子项',
+            code: astNode.value,
+        };
+    } else if (astNode.type === 'StringLiteral') {
+        node = {
+            concept: 'StringLiteral',
+            kind: 'Expression',
+            name: '',
+            value: astNode.value,
+        };
+    }
+    return node;
+}
+
+//================================================================================
+// 从这里开始到结尾注释之间的代码由 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 BindAttribute from './BindAttribute__';
+import BindEvent from './BindEvent__';
+import BindDirective from './BindDirective__';
+import View from './View__';
+import Module from './Module__';
+import App from './App__';
+
+/**
+ * 页面元素
+ */
+@concept('页面元素')
+export class ViewElement extends BaseNode {
+    /**
+     * 产品概念
+     */
+    @property()
+    concept: 'ViewElement' = 'ViewElement';
+
+    /**
+     * 类型
+     */
+    @property()
+    type: 0 = undefined;
+
+    /**
+     * 元素标签
+     */
+    @property()
+    tag: string = undefined;
+
+    /**
+     * 页面元素名称
+     */
+    @property()
+    name: string = undefined;
+
+    /**
+     * 静态 class 名
+     */
+    @property()
+    staticClass: string = undefined;
+
+    /**
+     * 静态 style
+     */
+    @property()
+    staticStyle: string = undefined;
+
+    /**
+     * 插槽目标
+     */
+    @property()
+    slotTarget: string = undefined;
+
+    /**
+     * 插槽 scope 表达式
+     */
+    @property()
+    slotScope: string = undefined;
+
+    /**
+     * 元素绑定属性列表
+     */
+    @property('BindAttribute')
+    bindAttrs: Array<BindAttribute> = [];
+
+    /**
+     * 元素绑定事件列表
+     */
+    @property('BindEvent')
+    bindEvents: Array<BindEvent> = [];
+
+    /**
+     * 元素指令列表
+     */
+    @property('BindDirective')
+    bindDirectives: Array<BindDirective> = [];
+
+    /**
+     * 绑定的角色
+     */
+    @property()
+    bindRoles: Array<string> = [];
+
+    /**
+     * 子元素列表
+     */
+    @property('ViewElement')
+    children: Array<ViewElement> = [];
+
+    /**
+     * 祖先 View
+     */
+    get view() {
+        return this.getAncestor('View') as View;
+    }
+    /**
+     * 祖先 Module
+     */
+    get module() {
+        return this.getAncestor('Module') as Module;
+    }
+    /**
+     * 祖先 App
+     */
+    get app() {
+        return this.getAncestor('App') as App;
+    }
+
+    /**
+     * @param source 需要合并的部分参数
+     */
+    constructor(source?: Partial<ViewElement>) {
+        source = Object.assign({}, ViewElement.getDefaultOptions(), source);
+        super(source);
+        super.subConstructor(source);
+    }
+
+
+
+    /**
+     * 从父级删除该节点
+     * @internal
+     */
+    _delete() {
+        let params: Params = null;
+        if (this.parentNode) {
+            params = (this.parentNode as any)?.__removeViewElement?.(this);
+        }
+        return params;
+    }
+    /**
+     * 设置页面元素名称
+     */
+    setName(name: string) {
+        const object = {
+            name,
+        };
+        this.update({
+            ...object,
+            field: 'name',
+        });
+    }
+
+    /**
+     * 设置静态 style
+     */
+    setStaticStyle(staticStyle: string) {
+        const object = {
+            staticStyle,
+        };
+        this.update({
+            ...object,
+        });
+    }
+
+        getBindAttributeExistingNames(excludedList: Array<BindAttribute> = []) {
+        const excludedSet = new Set(excludedList);
+        return (this.bindAttrs || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    }
+    getBindAttributeUniqueName(name = 'bindAttribute1') {
+        return utils.unique(name, this.getBindAttributeExistingNames());
+    }
+
+    /**
+    * 插入元素绑定属性
+    * @internal
+    * @param name 元素绑定属性名称，如果不填会自动生成一个唯一名称
+    */
+    _insertBindAttributeAt(name: string, index: number): BindAttribute;
+
+    /**
+    * 插入元素绑定属性
+    * @internal
+    * @param bindAttributeOptions 元素绑定属性参数
+    */
+    _insertBindAttributeAt(bindAttributeOptions: Partial<BindAttribute>, index: number): BindAttribute;
+
+    /**
+    * 插入元素绑定属性
+    * @internal
+    * @param bindAttribute 已有的元素绑定属性实例
+    */
+    _insertBindAttributeAt(bindAttribute: BindAttribute, index: number): BindAttribute;
+
+    _insertBindAttributeAt(options: string | Partial<BindAttribute> | BindAttribute, index: number) {
+        const bindAttributeOptions: any = {};
+        const relationOptions = { parentNode: this, parentKey: 'bindAttrs' };
+        let bindAttribute: BindAttribute;
+        if (!options) {
+            bindAttribute = BindAttribute.from({
+                ...bindAttributeOptions,
+                name: this.getBindAttributeUniqueName(),
+            }, this, 'bindAttrs');
+        } else if (typeof options === 'string') {
+            bindAttribute = BindAttribute.from({
+                ...bindAttributeOptions,
+                name: options,
+            }, this, 'bindAttrs');
+        } else if (options instanceof BindAttribute) {
+            options.delete(); // 同一实例不支持多处存在
+            bindAttribute = options;
+            Object.assign(bindAttribute, relationOptions);
+        } else {
+            bindAttribute = BindAttribute.from({
+                ...bindAttributeOptions,
+                ...options,
+            }, this, 'bindAttrs');
+        }
+        this.bindAttrs.splice(index, 0, bindAttribute);
+        return bindAttribute;
+    }
+
+    /**
+     * 插入元素绑定属性
+     * @param name 元素绑定属性名称，如果不填会自动生成一个唯一名称
+     */
+    insertBindAttributeAt(name: string, index: number): BindAttribute;
+
+    /**
+     * 插入元素绑定属性
+     * @param bindAttributeOptions 元素绑定属性参数
+     */
+    insertBindAttributeAt(bindAttributeOptions: Partial<BindAttribute>, index: number): BindAttribute;
+
+    /**
+     * 插入元素绑定属性
+     * @param bindAttribute 已有的元素绑定属性实例
+     */
+    insertBindAttributeAt(bindAttribute: BindAttribute, index: number): BindAttribute;
+
+    insertBindAttributeAt(options: string | Partial<BindAttribute> | BindAttribute, index: number) {
+        const node = this._insertBindAttributeAt(options as any, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindAttrs',
+        });
+        return node;
+    }
+
+    /**
+     * 添加元素绑定属性
+     * @internal
+     * @param name 元素绑定属性名称，如果不填会自动生成一个唯一名称
+     */
+    _addBindAttribute(name?: string): BindAttribute;
+
+    /**
+     * 添加元素绑定属性
+     * @internal
+     * @param bindAttributeOptions 元素绑定属性参数
+     */
+    _addBindAttribute(bindAttributeOptions: Partial<BindAttribute>): BindAttribute;
+
+    /**
+     * 添加元素绑定属性
+     * @internal
+     * @param bindAttribute 已有的元素绑定属性实例
+     */
+    _addBindAttribute(bindAttribute: BindAttribute): BindAttribute;
+
+    _addBindAttribute(options?: string | Partial<BindAttribute> | BindAttribute) {
+        const index = this.bindAttrs.length;
+        return this._insertBindAttributeAt(options as any, index);
+    }
+
+    /**
+     * 添加元素绑定属性
+     * @internal
+     * @param name 元素绑定属性名称，如果不填会自动生成一个唯一名称
+     */
+    addBindAttribute(name?: string): BindAttribute;
+
+    /**
+     * 添加元素绑定属性
+     * @param bindAttributeOptions 元素绑定属性参数
+     */
+    addBindAttribute(bindAttributeOptions: Partial<BindAttribute>): BindAttribute;
+
+    /**
+     * 添加元素绑定属性
+     * @param bindAttribute 已有的元素绑定属性实例
+     */
+    addBindAttribute(bindAttribute: BindAttribute): BindAttribute;
+
+    addBindAttribute(options?: string | Partial<BindAttribute> | BindAttribute) {
+        const node = this._addBindAttribute(options as any);
+        const index = this.bindAttrs.length;
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindAttrs',
+        });
+        return node;
+    }
+
+
+    getBindEventExistingNames(excludedList: Array<BindEvent> = []) {
+        const excludedSet = new Set(excludedList);
+        return (this.bindEvents || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    }
+    getBindEventUniqueName(name = 'bindEvent1') {
+        return utils.unique(name, this.getBindEventExistingNames());
+    }
+
+    /**
+    * 插入元素绑定事件
+    * @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.delete(); // 同一实例不支持多处存在
+            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.length;
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindEvents',
+        });
+        return node;
+    }
+
+
+    getBindDirectiveExistingNames(excludedList: Array<BindDirective> = []) {
+        const excludedSet = new Set(excludedList);
+        return (this.bindDirectives || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    }
+    getBindDirectiveUniqueName(name = 'bindDirective1') {
+        return utils.unique(name, this.getBindDirectiveExistingNames());
+    }
+
+    /**
+    * 插入元素指令
+    * @internal
+    * @param name 元素指令名称，如果不填会自动生成一个唯一名称
+    */
+    _insertBindDirectiveAt(name: string, index: number): BindDirective;
+
+    /**
+    * 插入元素指令
+    * @internal
+    * @param bindDirectiveOptions 元素指令参数
+    */
+    _insertBindDirectiveAt(bindDirectiveOptions: Partial<BindDirective>, index: number): BindDirective;
+
+    /**
+    * 插入元素指令
+    * @internal
+    * @param bindDirective 已有的元素指令实例
+    */
+    _insertBindDirectiveAt(bindDirective: BindDirective, index: number): BindDirective;
+
+    _insertBindDirectiveAt(options: string | Partial<BindDirective> | BindDirective, index: number) {
+        const bindDirectiveOptions: any = {};
+        const relationOptions = { parentNode: this, parentKey: 'bindDirectives' };
+        let bindDirective: BindDirective;
+        if (!options) {
+            bindDirective = BindDirective.from({
+                ...bindDirectiveOptions,
+                name: this.getBindDirectiveUniqueName(),
+            }, this, 'bindDirectives');
+        } else if (typeof options === 'string') {
+            bindDirective = BindDirective.from({
+                ...bindDirectiveOptions,
+                name: options,
+            }, this, 'bindDirectives');
+        } else if (options instanceof BindDirective) {
+            options.delete(); // 同一实例不支持多处存在
+            bindDirective = options;
+            Object.assign(bindDirective, relationOptions);
+        } else {
+            bindDirective = BindDirective.from({
+                ...bindDirectiveOptions,
+                ...options,
+            }, this, 'bindDirectives');
+        }
+        this.bindDirectives.splice(index, 0, bindDirective);
+        return bindDirective;
+    }
+
+    /**
+     * 插入元素指令
+     * @param name 元素指令名称，如果不填会自动生成一个唯一名称
+     */
+    insertBindDirectiveAt(name: string, index: number): BindDirective;
+
+    /**
+     * 插入元素指令
+     * @param bindDirectiveOptions 元素指令参数
+     */
+    insertBindDirectiveAt(bindDirectiveOptions: Partial<BindDirective>, index: number): BindDirective;
+
+    /**
+     * 插入元素指令
+     * @param bindDirective 已有的元素指令实例
+     */
+    insertBindDirectiveAt(bindDirective: BindDirective, index: number): BindDirective;
+
+    insertBindDirectiveAt(options: string | Partial<BindDirective> | BindDirective, index: number) {
+        const node = this._insertBindDirectiveAt(options as any, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindDirectives',
+        });
+        return node;
+    }
+
+    /**
+     * 添加元素指令
+     * @internal
+     * @param name 元素指令名称，如果不填会自动生成一个唯一名称
+     */
+    _addBindDirective(name?: string): BindDirective;
+
+    /**
+     * 添加元素指令
+     * @internal
+     * @param bindDirectiveOptions 元素指令参数
+     */
+    _addBindDirective(bindDirectiveOptions: Partial<BindDirective>): BindDirective;
+
+    /**
+     * 添加元素指令
+     * @internal
+     * @param bindDirective 已有的元素指令实例
+     */
+    _addBindDirective(bindDirective: BindDirective): BindDirective;
+
+    _addBindDirective(options?: string | Partial<BindDirective> | BindDirective) {
+        const index = this.bindDirectives.length;
+        return this._insertBindDirectiveAt(options as any, index);
+    }
+
+    /**
+     * 添加元素指令
+     * @internal
+     * @param name 元素指令名称，如果不填会自动生成一个唯一名称
+     */
+    addBindDirective(name?: string): BindDirective;
+
+    /**
+     * 添加元素指令
+     * @param bindDirectiveOptions 元素指令参数
+     */
+    addBindDirective(bindDirectiveOptions: Partial<BindDirective>): BindDirective;
+
+    /**
+     * 添加元素指令
+     * @param bindDirective 已有的元素指令实例
+     */
+    addBindDirective(bindDirective: BindDirective): BindDirective;
+
+    addBindDirective(options?: string | Partial<BindDirective> | BindDirective) {
+        const node = this._addBindDirective(options as any);
+        const index = this.bindDirectives.length;
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindDirectives',
+        });
+        return node;
+    }
+
+
+
+
+
+
+    /**
+    * 插入页面元素
+    * @internal
+    * @param name 页面元素名称，如果不填会自动生成一个唯一名称
+    */
+    _insertViewElementAt(name: string, index: number): ViewElement;
+
+    /**
+    * 插入页面元素
+    * @internal
+    * @param viewElementOptions 页面元素参数
+    */
+    _insertViewElementAt(viewElementOptions: Partial<ViewElement>, index: number): ViewElement;
+
+    /**
+    * 插入页面元素
+    * @internal
+    * @param viewElement 已有的页面元素实例
+    */
+    _insertViewElementAt(viewElement: ViewElement, index: number): ViewElement;
+
+    _insertViewElementAt(options: string | Partial<ViewElement> | ViewElement, index: number) {
+        const viewElementOptions: any = {};
+        const relationOptions = { parentNode: this, parentKey: 'children' };
+        let viewElement: ViewElement;
+        if (!options) {
+            viewElement = ViewElement.from({
+                ...viewElementOptions,
+                name: this.getViewElementUniqueName(),
+            }, this, 'children');
+        } else if (typeof options === 'string') {
+            viewElement = ViewElement.from({
+                ...viewElementOptions,
+                name: options,
+            }, this, 'children');
+        } else if (options instanceof ViewElement) {
+            options.delete(); // 同一实例不支持多处存在
+            viewElement = options;
+            Object.assign(viewElement, relationOptions);
+        } else {
+            viewElement = ViewElement.from({
+                ...viewElementOptions,
+                ...options,
+            }, this, 'children');
+        }
+        this.children.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: 'children',
+        });
+        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.children.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.children.length;
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'children',
+        });
+        return node;
+    }
+
+
+    
+
+    /**
+    * 删除元素绑定属性
+    * @param name 元素绑定属性名称
+    */
+    removeBindAttribute(name: string): void;
+
+    /**
+     * 删除元素绑定属性
+     * @param bindAttribute 已有的元素绑定属性实例
+     */
+    removeBindAttribute(bindAttribute: BindAttribute): void;
+
+    removeBindAttribute(options: string | BindAttribute) {
+        let bindAttribute: BindAttribute;
+        if (typeof options === 'string') {
+            bindAttribute = this.bindAttrs.find((item) => item.name === options);
+            if (!bindAttribute) {
+                throw new Error('找不到元素绑定属性 ' + options);
+            }
+        } else {
+            bindAttribute = options;
+        }
+        return bindAttribute.delete();
+    }
+
+    __removeBindAttribute(bindAttribute: BindAttribute) {
+        const parentKey = bindAttribute.parentKey;
+        const params: Params = {
+            parentNode: this,
+            parentKey,
+            index: -1,
+            object: null,
+            oldObject: bindAttribute,
+        };
+        if (parentKey) {
+            params.parentKey = parentKey;
+            if (Array.isArray((this as any)[parentKey])) {
+                const index = (this as any)[parentKey].indexOf(bindAttribute);
+                ~index && (this as any)[parentKey].splice(index, 1);
+                params.index = index;
+            } else if ((this as any)[parentKey] === bindAttribute) {
+                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.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 元素指令名称
+    */
+    removeBindDirective(name: string): void;
+
+    /**
+     * 删除元素指令
+     * @param bindDirective 已有的元素指令实例
+     */
+    removeBindDirective(bindDirective: BindDirective): void;
+
+    removeBindDirective(options: string | BindDirective) {
+        let bindDirective: BindDirective;
+        if (typeof options === 'string') {
+            bindDirective = this.bindDirectives.find((item) => item.name === options);
+            if (!bindDirective) {
+                throw new Error('找不到元素指令 ' + options);
+            }
+        } else {
+            bindDirective = options;
+        }
+        return bindDirective.delete();
+    }
+
+    __removeBindDirective(bindDirective: BindDirective) {
+        const parentKey = bindDirective.parentKey;
+        const params: Params = {
+            parentNode: this,
+            parentKey,
+            index: -1,
+            object: null,
+            oldObject: bindDirective,
+        };
+        if (parentKey) {
+            params.parentKey = parentKey;
+            if (Array.isArray((this as any)[parentKey])) {
+                const index = (this as any)[parentKey].indexOf(bindDirective);
+                ~index && (this as any)[parentKey].splice(index, 1);
+                params.index = index;
+            } else if ((this as any)[parentKey] === bindDirective) {
+                params.index = 0;
+                (this as any)[parentKey] = undefined;
+            }
+        }
+        return params;
+    }
+
+
+
+    /**
+    * 删除页面元素
+    * @param name 页面元素名称
+    */
+    removeViewElement(name: string): void;
+
+    /**
+     * 删除页面元素
+     * @param viewElement 已有的页面元素实例
+     */
+    removeViewElement(viewElement: ViewElement): void;
+
+    removeViewElement(options: string | ViewElement) {
+        let viewElement: ViewElement;
+        if (typeof options === 'string') {
+            viewElement = this.children.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;
+    }
+
+    //================================================================================
+    // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+    // 自动生成的代码已结束。下面可以手动编写。
+    //================================================================================
+    getViewElementUniqueName(name = 'viewElement1') {
+        return this.view?.getViewElementUniqueName(name);
+    }
+
+    public static readonly TAG_NAME_PREFIX_REG?: RegExp = /^([lieu]|van)[-_]/;
+
+    static from(source: any, parentNode?: any, parentKey?: string): ViewElement {
+        const node = super.from(source, parentNode, parentKey) as ViewElement;
+        if (!node.name) {
+            const tagName = node.tag.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            node.name = node.getViewElementUniqueName(`${tagName}1`);
+        }
+        return node;
+    }
+
+    /**
+     * 设置组件权限
+     */
+    setBindRoles(bindRoles: string[]) {
+        const object = {
+            bindRoles,
+        };
+        this.update({
+            ...object,
+        });
+    }
+
+    getBindAttribute(name: string) {
+        return this.bindAttrs.find((bindAttr) => bindAttr.name === name);
+    }
+
+    toHump(name: string): string {
+        return name.replace(/\-(\w)/g, (all, letter) => letter.toUpperCase());
+    }
+
+    haveScope(node: ViewElement): boolean {
+        const dataSourcePcList = ['uGallery', 'uTableView', 'uListView', 'uGridView', 'uCalendarView', 'uListComponents', 'uSelect'];
+        const dataSourceH5List = ['vanListView', 'vanForComponents', 'lcapEchartsLine', 'lcapEchartsBar', 'lcapEchartsPie'];
+        const dataSourceList = [...dataSourcePcList, ...dataSourceH5List];
+        return dataSourceList.includes(node.toHump(node.tag));
+    }
+    toEmbeddedTSDefinition(state?: TranslatorState): string {
+        let code = '';
+        // formItem的单独处理
+        if (this.tag === 'u-form-item') {
+            code = indent(state.tabSize) + `${this.name}: <nasl.ui.${this.toHump(this.tag)}`;
+            if (Array.isArray(this.children) && this.children.length) {
+                const tag = this.children[0].tag;
+                if (tag === 'u-input') {
+                    code += '<nasl.core.String>';
+                } else if (tag === 'u-input-number') {
+                    code += '<nasl.core.Integer>';
+                } else {
+                    code += '<nasl.core.Any>';
+                }
+            }
+            code += '> null,\n';
+        }
+        if (this.haveScope(this)) {
+            let genericType = 'any';
+            const bindAttrs = this.bindAttrs;
+            if (bindAttrs && bindAttrs.length) {
+                const attr = bindAttrs.find((item) => item.name === 'data-source');
+                if (attr && attr.expression) {
+                    let expressionTs = attr.expression.toEmbeddedTS(shiftState(state, code));
+                    expressionTs = expressionTs.replaceAll(' ', '');
+                    // 如果是逻辑就推导出逻辑类型
+                    genericType = `nasl.ui.GetItemTypeFromDataSource<typeof ${expressionTs}>`;
+
+                    // 如果是scope的类型，需要单独处理
+                    if (expressionTs.startsWith('scope') && expressionTs.includes('.item.')) {
+                        let parentNode = this.parentNode;
+                        let haveScopeFlag = false;
+                        while (!haveScopeFlag && parentNode.concept !== 'View') {
+                            if (this.haveScope(parentNode as ViewElement)) {
+                                // type d = nasl.ui.GetItemTypeFromDataSource<typeof listStructure>['tableRelation']
+                                const tsArr = expressionTs.split('.');
+                                const parentbindAttrs = (parentNode as ViewElement).bindAttrs;
+                                if (parentbindAttrs && parentbindAttrs.length) {
+                                    const parentAttr = parentbindAttrs.find((item) => item.name === 'data-source');
+                                    if (parentAttr && parentAttr.expression) {
+                                        let parentExpressionTs = parentAttr.expression.toEmbeddedTS(shiftState(state, code));
+                                        parentExpressionTs = parentExpressionTs.replaceAll(' ', '');
+                                        // 如果是逻辑就推导出逻辑类型
+                                        genericType = `nasl.ui.GetItemTypeFromDataSource<nasl.ui.GetItemTypeFromDataSource<typeof ${parentExpressionTs}>['${tsArr[tsArr.length - 1]}']>`;
+                                    }
+                                }
+                                haveScopeFlag = true;
+                            }
+                            parentNode = parentNode.parentNode;
+                        }
+                    }
+                }
+            }
+            code += indent(state.tabSize) + `${this.name}: <nasl.ui.${this.toHump(this.tag)}<${genericType}>> null,\n`;
+        } else {
+            code = indent(state.tabSize) + `${this.name}: <nasl.ui.${this.toHump(this.tag)}<any>> null,\n`;
+        }
+        if (Array.isArray(this.children)) {
+            this.children.forEach((element) => {
+                code += element.toEmbeddedTSDefinition(shiftState(state, code));
+            });
+        }
+        return code;
+    }
+    @withSourceMap()
+    toEmbeddedTS(state?: TranslatorState, parentLevel?: number): string {
+        function chineseTsName(name: string) {
+            let tsName = name;
+            if (/^\d/.test(tsName)) {
+                tsName = '$' + tsName;
+            }
+            // 匹配所有特殊字符都转为_
+            tsName = tsName.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '_');
+            return tsName;
+        }
+        let code = `__elements.${this.name} = new nasl.ui.${this.toHump(this.tag)}({\n`;
+        // 是否开启权限
+        let hasAuth = false;
+        if (Array.isArray(this.bindDirectives)) {
+            hasAuth = !!this.bindDirectives.filter((directive) => directive.name === 'auth').length;
+        }
+        // 角色
+        if (hasAuth && Array.isArray(this.bindRoles)) {
+            code += indent(state.tabSize + 2);
+            code += 'roles = [\n';
+            this.bindRoles.forEach((role) => {
+                code += indent(state.tabSize + 3);
+                code += `${this.app.getNamespace()}.roles.${chineseTsName(role)}.${chineseTsName(role)},`;
+                code += '\n';
+            });
+            code += indent(state.tabSize + 2);
+            code += '],\n';
+        }
+        // 绑定属性
+        if (Array.isArray(this.bindAttrs)) {
+            this.bindAttrs.forEach((attr) => {
+                // 跳转页面
+                if (attr.destination) {
+                    code += attr.destination.toEmbeddedTS(shiftState(state, code, {
+                        tabSize: state.tabSize,
+                    }));
+                }
+            });
+            code += '\n';
+        }
+
+        // 事件
+        if (Array.isArray(this.bindEvents)) {
+            this.bindEvents.forEach((event) => {
+                code += event.toEmbeddedTS(shiftState(state, code, {
+                    tabSize: state.tabSize + 2,
+                }));
+                code += '\n';
+            });
+        }
+
+        // 子元素
+        if (Array.isArray(this.children)) {
+            code += indent(state.tabSize + 1);
+
+            if (Array.isArray(this.bindAttrs)) {
+                code += `bindAttr: () => [\n`;
+                this.bindAttrs.forEach((attr) => {
+                    if (attr.expression) {
+                        code
+                            += attr.expression.toEmbeddedTS(shiftState(state, code, {
+                                tabSize: state.tabSize + 2,
+                            })) + ',\n';
+                    }
+                });
+                code += indent(state.tabSize + 2) + '],\n';
+            }
+
+            let levelIndex = parentLevel || 0;
+            if (this.haveScope(this)) {
+                code += `slotDefault: (scope)=> [\n`;
+                levelIndex++;
+            } else {
+                code += `slotDefault: ()=> [\n`;
+            }
+
+            this.children.forEach((element) => {
+                code += element.toEmbeddedTS(shiftState(state, code, {
+                    tabSize: state.tabSize + 2,
+                }), levelIndex);
+                code += '\n';
+            });
+            code += indent(state.tabSize + 1);
+            code += ']\n';
+        }
+
+        code += indent(state.tabSize) + '}),\n';
+
+        return code;
+    }
+
+    _duplicate(options?: ElementToVueOptions) {
+        const code = this.toVue(options);
+        const element = ViewElement.fromHTML(code, {
+            view: this.view,
+        });
+        element.deepRenameElements();
+        return element;
+    }
+
+    // 递归遍历组件
+    public traverseChildren(cb: (ele: ViewElement) => void): void {
+        utils.traverse((current) => {
+            cb(current.node);
+        }, { node: this });
+    }
+
+    // 递归生成组件名
+    public deepRenameElements(): void {
+        return this.traverseChildren((ele: ViewElement) => {
+            const tagName = ele.tag.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            ele.name = this.getViewElementUniqueName(`${tagName}1`);
+        });
+    }
+
+    /**
+     * 解析属性中的表达式
+     * @param value
+     * @param $def 目前 $def 只用来查找 $def.variables 和 $def.structures
+     * @param dataSchema
+     */
+    private static _parseExpression(value: string) {
+        try {
+            const ast = babelParser.parseExpression(value) as any;
+            const node = transAstNodeToNaslNode(ast);
+            return LogicItem.from(node, null, null);
+        } catch (e) {
+            return null;
+        }
+    }
+
+    private static _parseValidationRule(value: string) {
+        let calleeName = value;
+        let args: any[] = [];
+        try {
+            const ast = babelParser.parseExpression(value) as any;
+            if (ast.type === 'CallExpression') {
+                calleeName = ast.callee.property.name || ast.callee.property.value;
+                args = ast.arguments.map((argument: any) => ({
+                    concept: 'Argument',
+                    name: '',
+                    kind: 'Statement',
+                    keyword: '',
+                    expression: transAstNodeToNaslNode(Object.assign({}, argument)),
+                }));
+            }
+        } catch (error) {}
+        return {
+            concept: 'ValidationRule',
+            name: '',
+            label: '验证规则',
+            folded: true,
+            kind: 'Expression',
+            calleeNamespace: 'nasl.validation',
+            arguments: args,
+            calleeName,
+        };
+    }
+
+    /**
+     * 从 Vue 的 ASTNode 转换成 ASL 元素
+     * @param astNode Vue 的 ASTNode
+     */
+    private static _fromASTNode(astNode: compiler.ASTElement, context?: ParseContext): ViewElement {
+        const view: View = context?.view;
+        // 临时处理组件的 text
+        //h5-mock
+        if (
+            ['u-text', 'van-text', 'u-link', 'u-button', 'u-label', 'u-radio', 'u-checkbox', 'u-navbar-item', 'u-sidebar-item', 'u-menu-item'].includes(astNode.tag)
+            && astNode.children.length === 1
+            && astNode.children[0].type === 3
+        ) {
+            astNode.attrs = astNode.attrs || [];
+            astNode.attrs.push({
+                name: 'text',
+                value: JSON.stringify(astNode.children[0].text),
+            });
+            astNode.children = [];
+        }
+
+        // 将 scopedSlots 合并到 children 中
+        if (astNode.scopedSlots) {
+            astNode.children = astNode.children || [];
+            Object.keys(astNode.scopedSlots).forEach((key) => {
+                if (!astNode.children.find((child) => key === (child as compiler.ASTElement).slotTarget))
+                    astNode.children.unshift(astNode.scopedSlots[key]);
+            });
+            delete astNode.scopedSlots;
+        }
+
+        // 提示不支持的字段
+        ['component', 'inlineTemplate', 'pre', 'ns', 'transition', 'transitionOnAppear', 'transitionMode', 'slotName', 'classBinding', 'styleBinding'].forEach((key) => {
+            if ((astNode as any)[key])
+                console.warn(`[warn] ViewElement NASL unsupports '${key}' field in node `, astNode);
+        });
+
+        let element: ViewElement;
+        if (astNode.type === 1) {
+            if (astNode.tag === 'router-view') {
+                if (config.scope === 'h5') {
+                    astNode.tag = 'van-router-view';
+                } else {
+                    astNode.tag = 'u-router-view';
+                }
+            }
+            const tagName = astNode.tag.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            element = new ViewElement({
+                tag: astNode.tag,
+                name: astNode.attrsMap.ref || view.getViewElementUniqueName(`${tagName}1`),
+                staticClass: astNode.attrsMap.class,
+                staticStyle: astNode.attrsMap.style,
+                slotTarget: astNode.slotTarget && json5.parse(astNode.slotTarget),
+                slotScope: astNode.slotScope === '_empty_' ? '' : astNode.slotScope,
+                children: astNode.children.map((item) => this._fromASTNode(item as compiler.ASTElement, context)) as unknown as Array<ViewElement>,
+            });
+
+            astNode.attrs
+                && astNode.attrs.forEach((oldAttr) => {
+                    let attr: BindAttribute;
+                    if (oldAttr.value === '""' && (oldAttr as any).end - (oldAttr as any).start === oldAttr.name.length) {
+                        attr = BindAttribute.from({
+                            type: 'static',
+                            name: oldAttr.name,
+                            value: 'true',
+                        }, element);
+                    } else {
+                        try {
+                            const tmp = json5.parse(oldAttr.value);
+                            const source: any = {
+                                type: typeof tmp === 'string' ? 'string' : 'static',
+                                name: oldAttr.name,
+                                value: typeof tmp === 'string' ? tmp : oldAttr.value,
+                            };
+                            if (oldAttr.name === 'rules') {
+                                source.rules = tmp?.split('|').map((ruleStr: string) => this._parseValidationRule(ruleStr.trim()));
+                            }
+                            attr = BindAttribute.from(source, element);
+                        } catch (e) {
+                            const expression = <any> this._parseExpression(oldAttr.value);
+                            attr = BindAttribute.from({
+                                type: 'dynamic',
+                                name: oldAttr.name,
+                                value: expression ? '' : oldAttr.value,
+                                expression,
+                            }, element);
+                            if (astNode.attrsMap[`:${attr.name}.sync`]) {
+                                attr.sync = true;
+                            }
+                        }
+                    }
+                    element.bindAttrs.push(attr);
+                });
+
+            // compiler 处理:value.sync 时会加上update:value事件，需要过滤
+            astNode.events
+                && Object.keys(astNode.events)
+                    .filter((name) => !name.startsWith('update:'))
+                    .forEach((name) => {
+                        const oldEvent = astNode.events[name] as compiler.ASTElementHandler;
+                        const str = oldEvent.value;
+                        let calleeName = str.split('(')[0];
+                        const matchArr = str.match(/\(([^)]*)\)/);
+                        let argsStr = '';
+                        if (matchArr.length >= 2) {
+                            argsStr = matchArr[1];
+                        }
+                        let args: any[] = [];
+                        if (argsStr) {
+                            args = argsStr.split(',').map((argStr) => {
+                                const keyword = argStr.trim().split('.');
+                                return {
+                                    concept: 'Argument',
+                                    expression: genArgumentMemberExpression(keyword),
+                                };
+                            });
+                        }
+                        const viewNamespace = view?.getNamespace();
+                        const viewName = `${view?.name}`;
+                        let calleeNamespace = `${viewNamespace}.${viewName}.logics`;
+                        if (calleeName) {
+                            const namespaceArr = calleeName.split('.');
+                            const start = namespaceArr.shift();
+                            if (start === '$refs' && namespaceArr.length === 2) {
+                                calleeNamespace = `elements.${namespaceArr[0]}.logics`;
+                                calleeName = namespaceArr[1];
+                            }
+                        }
+                        element.bindEvents.push(BindEvent.from({
+                            name,
+                            calleeNamespace,
+                            calleeName,
+                            arguments: args,
+                        }, element));
+                    });
+
+            astNode.directives
+                && astNode.directives.forEach((directive) => {
+                    if (directive.name === 'model') {
+                        const valueAttr = astNode.attrs && astNode.attrs.find((attr) => attr.name === 'value');
+                        if (!valueAttr) {
+                            const expression = <any> this._parseExpression(directive.value);
+                            element.bindAttrs.push(BindAttribute.from({
+                                type: 'dynamic',
+                                name: 'value',
+                                value: expression ? '' : directive.value,
+                                expression,
+                                sync: true,
+                            }, element));
+                        }
+                    } else {
+                        const expression = <any> this._parseExpression(directive.value);
+                        element.bindDirectives.push(BindDirective.from({
+                            type: expression ? 'string' : 'dynamic',
+                            name: directive.name,
+                            rawName: directive.rawName,
+                            value: expression ? '' : directive.value,
+                            expression,
+                            arg: directive.arg,
+                            modifiers: directive.modifiers,
+                        }, element));
+                    }
+                });
+
+            if (astNode.if) {
+                element.bindDirectives.push(BindDirective.from({
+                    type: 'dynamic',
+                    name: 'if',
+                    rawName: 'v-if',
+                    value: '',
+                    expression: <any> this._parseExpression(astNode.if),
+                }, element));
+            }
+        } else if (astNode.type === 2) {
+            if (config.scope === 'h5') {
+                element = new ViewElement({
+                    tag: 'van-text',
+                });
+            } else {
+                element = new ViewElement({
+                    tag: 'u-text',
+                });
+            }
+            const value = astNode.text.match(/{{(.*?)}}/)[1].trim();
+            const expression = <any> this._parseExpression(value);
+            element.bindAttrs.push(new BindAttribute({
+                type: 'dynamic',
+                name: 'text',
+                value: expression ? '' : value,
+                expression,
+            }));
+        } else if (astNode.type === 3) {
+            if (config.scope === 'h5') {
+                element = new ViewElement({
+                    tag: 'van-text',
+                });
+            } else {
+                element = new ViewElement({
+                    tag: 'u-text',
+                });
+            }
+
+            element.bindAttrs.push(new BindAttribute({
+                name: 'text',
+                type: 'string',
+                value: astNode.text,
+            }));
+        }
+
+        return element;
+    }
+
+    /**
+     * 解析 Vue 模板
+     * 该方法不会绑定 view 和 parent，如果是添加元素优先使用 fromHTML
+     * @param html Vue 的模板
+     * @TODO 处理多个元素的问题
+     */
+    public static parse(html: string, context?: ParseContext) {
+        html = html || '<div></div>';
+
+        const compilerOptions: compiler.CompilerOptions = {
+            preserveWhitespace: false,
+            outputSourceRange: true,
+        };
+
+        let ast = compiler.compile(html, compilerOptions).ast;
+        if (ast.tag === 'template' && !ast.slotTarget)
+            ast = ast.children[0] as compiler.ASTElement;
+
+        let root: ViewElement;
+        utils.traverse((current) => {
+            // 处理 scopedSlots;
+            if (!current.parent)
+                root = this._fromASTNode(current.node, context);
+            else
+                (current.parent.children as any)[current.index] = this._fromASTNode(current.node, context);
+        }, { node: ast });
+        return root;
+    }
+
+    /**
+     * 从模板生成规范的 ViewElement 对象
+     */
+    public static fromHTML(html: string, context?: ParseContext) {
+        const element = this.parse(html, context);
+        return element;
+    }
+
+    /**
+     * 转换成设计器中使用的 Vue 文件
+     * @param options
+     */
+    toDesignerVue() {
+        return this.toVue({
+            finalCode: false,
+            nodePathAttr: true,
+            attrFormat: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => {
+                if (attr.concept === 'BindAttribute') {
+                    const api = config.allNodesAPI[element.tag];
+                    const apiOfAttr = api && api.attrs && api.attrs.find((_attr) => _attr.name === attr.name);
+                    if (apiOfAttr && apiOfAttr['designer-value'] !== undefined) {
+                        let designerValue = apiOfAttr['designer-value'];
+                        if (typeof designerValue === 'string') {
+                            designerValue = designerValue.replace(/"/g, "'");
+                        }
+                        try {
+                            json5.parse(designerValue);
+                            return `:${attr.name}="${designerValue}"`;
+                        } catch (e) {
+                            return `${attr.name}="${designerValue}"`;
+                        }
+                    }
+                    if ((attr as BindAttribute).type === 'dynamic' && !(element.tag === 'u-cascade-select' && attr.name === 'categories'))
+                        return defaultResult.replace(/:?(\w+)(?:.*?)="(.*)"/, (m, name, value) => {
+                            try {
+                                const tempValue = json5.parse(value);
+                                if (typeof tempValue === 'boolean' || typeof tempValue === 'number') {
+                                    // 简单类型走属性
+                                    return `:${name}="${value.replace(/"/g, "'")}"`;
+                                }
+                            } catch (e) {
+                                if (apiOfAttr && !apiOfAttr.type.includes('string'))
+                                    return '';
+                            }
+                            return `${name}="{{ ${value.replace(/"/g, "'").replace(/\$utils\['(.+?)'\]/g, '$1')} }}"`;
+                        });
+                    else
+                        return defaultResult;
+                }
+                return false;
+            },
+            getExtraParts: (el: ViewElement) => {
+                const parts = [];
+
+                const api = config.allNodesAPI[el.tag];
+                const emptySlot = api && api.slots && api.slots.find((slot) => slot.name === 'default' && slot['empty-background']);
+                if (!el.children.length && emptySlot) {
+                    let addEmpty = true;
+                    if (el.tag === 'u-grid-view' || el.tag === 'u-list-view' || el.tag === 'van-list-view') {
+                        const hasDataSource = el.bindAttrs.find((attr) => attr.name === 'data-source');
+                        addEmpty = !hasDataSource;
+                    }
+                    addEmpty && parts.push(`vusion-empty-background="${emptySlot['empty-background']}"`);
+                }
+
+                return parts;
+            },
+        });
+    }
+
+    /**
+     * 转换成 Vue 的模板格式
+     */
+    toVue(options?: ElementToVueOptions) {
+        options = Object.assign({
+            indentStyle: 'space',
+            tabSize: 4,
+            indentLevel: 0,
+            aslIdAttr: false,
+            nodePathAttr: false,
+            getExtraParts: () => [],
+            attrFormat: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => defaultResult,
+        }, options);
+        const tabString = ' '.repeat(options.tabSize * options.indentLevel);
+        const insideTabString = ' '.repeat(options.tabSize * (options.indentLevel + 1));
+        let shouldIndent = true;
+        const content: string = !this.children ? '' : this.children
+            .map((element) => {
+                const childOptions = Object.assign({}, options);
+                childOptions.indentLevel++;
+                return (shouldIndent ? '\n' + insideTabString : '') + element.toVue(childOptions);
+            })
+            .join('');
+        if (!content.length)
+            shouldIndent = false;
+
+        const parts = [];
+        if (options.aslIdAttr) {
+            if (options.aslIdAttr === true)
+                options.aslIdAttr = 'asl-id';
+            parts.push(`${options.aslIdAttr}="${this.id}"`);
+        }
+        if (options.nodePathAttr) {
+            // 注入 asl 的 node-path
+            parts.push(`vusion-node-path="${this.nodePath}"`);
+        }
+
+        this.slotTarget && parts.push(`#${this.slotTarget}` + (this.slotScope ? `="${this.slotScope}"` : ''));
+        this.name && parts.push(`ref="${this.name}"`);
+        this.staticClass && parts.push(`class="${this.staticClass}"`);
+        this.staticStyle && parts.push(`style="${this.staticStyle}"`);
+
+        [].concat(this.bindAttrs, this.bindDirectives, this.bindEvents).forEach((attr: BindAttribute | BindDirective | BindEvent) => {
+            const result = options.attrFormat(attr, this, attr.toVue(options));
+            result && parts.push(result);
+        });
+
+        options.getExtraParts(this).forEach((part) => parts.push(part));
+
+        let partsLength = 0;
+        let partsString = '';
+        parts.forEach((part) => {
+            if (partsLength >= 120 || part.length >= 120) {
+                partsString += '\n' + tabString + ' '.repeat(3); // ' '.repeat(el.tag.length + 1);
+                partsLength = 0;
+            }
+            partsString += ' ' + part;
+            partsLength += part.length;
+        });
+
+        return `<${this.tag}${partsString.length ? partsString : ''}>` + content + (shouldIndent ? '\n' + tabString : '') + `</${this.tag}>`;
+    }
+
+    //================================================================================
+    // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
+    // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
+    //================================================================================
+}
+
+classMap['ViewElement'] = ViewElement;
+export default ViewElement;
+//================================================================================
+// ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+// 自动生成的代码已结束。下面可以手动编写。
+//================================================================================