@lcap/nasl 0.3.14-beta.0 → 1.0.0-alpha

package/src/types/page/Element.ts

@@ -1,1444 +0,0 @@
-import { action, circular, excludedInJSON, immutable } from '../decorators';
-import { config, utils, LEVEL_ENUM, Vertex, View, Attr, Directive, Event, ExpressionNode, dataTypesMap, LogicItem, ActionOptions, ACTION_MODE, Nuims, Structure } from '..';
-import * as compiler from 'vue-template-compiler';
-import * as json5 from 'json5';
-import { elementService } from '../../service/page';
-import { vertexsMap } from '../cacheData';
-import Variable from '../logic/Variable';
-import * as babelParser from '@babel/parser';
-import { isPlainObject, cloneDeep, mapValues } from 'lodash';
-import { refreshHtml } from '../cache';
-import { BusinessCode } from '../enum';
-
-export interface ElementToVueOptions {
-    indentStyle?: 'space' | 'tab';
-    tabSize?: number;
-    indentLevel?: number;
-    aslIdAttr?: string | boolean;
-    nodePathAttr?: string | boolean;
-    getExtraParts?: (element?: Element) => Array<string>;
-    attrFormat?: (attr: Attr | Event | Directive, element?: Element, defaultResult?: string) => string;
-    finalCode?: boolean,
-}
-
-export interface ParseContext {
-    variables?: Array<Variable>;
-    structures?: Array<Structure>;
-    dataSchema?: string;
-    [key: string]: any;
-}
-
-export function catchFn(view: View) {
-    return async (err: any) => {
-        if (err.code !== BusinessCode.HasReferenced) // 节点被引用，不用刷新数据
-            await refreshHtml(view);
-        else
-            config.defaultApp?.emit('saved', err);
-
-        config.defaultApp?.history.load();
-        throw err;
-    };
-}
-
-/**
- * 前端页面元素
- * @example
- * <u-input size="small" v-model="value" @change="onChange"></u-input>
- */
-export class Element extends Vertex {
-    /**
-     * 概念类型
-     */
-    @immutable()
-    public readonly level: LEVEL_ENUM = LEVEL_ENUM.element;
-    /**
-     * 元素类型
-     * 去除了 expression 和 text，目前只有一种节点类型
-     */
-    @immutable()
-    // public readonly type: 'element' = 'element';
-    public readonly type: number = 0;
-    /**
-     * 元素 Id
-     */
-    @immutable()
-    public readonly id: string = undefined;
-    /**
-     * 元素标签
-     */
-    @immutable()
-    public readonly tag: string = undefined;
-    /**
-     * 元素名称
-     * 用户可以自定义
-     * Vue 中的 ref
-     */
-    @immutable()
-    public readonly name: string = undefined;
-
-    /*
-    * 描述信息
-    */
-    @immutable()
-    public readonly description: string = undefined;
-    /**
-     * 属性列表
-     * 和原来的 attrsList 不同，注意区分
-     */
-    @immutable()
-    public readonly attrList?: Array<Attr> = [];
-    /**
-     * 事件列表
-     */
-    @immutable()
-    public readonly eventList?: Array<Event> = [];
-    /**
-     * 指令列表
-     */
-    @immutable()
-    public readonly directiveList?: Array<Directive> = [];
-    /**
-     * 插槽目标
-     * @example
-     * 'cell'
-     */
-    @immutable()
-    public readonly slotTarget?: string = undefined;
-    /**
-     * 插槽 scope 表达式
-     * @example
-     * 'scope'
-     */
-    @immutable()
-    public readonly slotScope?: string = undefined;
-    /**
-     * 静态 class 名
-     * 不计划支持动态 class
-     */
-    @immutable()
-    public readonly staticClass?: string = undefined;
-    /**
-     * 静态 style
-     * 不计划支持动态样式
-     */
-    @immutable()
-    public readonly staticStyle?: string = undefined;
-    /**
-     * 当前节点路径，只在前端动态计算后使用
-     */
-    @excludedInJSON()
-    public nodePath: string = undefined;
-    /**
-     * 所在父元素 Id
-     */
-    @immutable()
-    public readonly parentId: string = undefined;
-    /**
-     * 所在位置
-     */
-    @immutable()
-    public _posIndex: number = undefined;
-    /**
-     * 所在父元素
-     */
-    @circular()
-    @immutable()
-    public readonly parent?: Element = undefined;
-    /**
-     * 所在父元素 Id
-     */
-    @immutable()
-    public readonly viewId: string = undefined;
-    /**
-     * 所在子页面
-     */
-    @circular()
-    @immutable()
-    public readonly view?: View = undefined;
-    /**
-     * 子元素
-     */
-    @immutable()
-    public readonly children?: Array<Element> = [];
-    /**
-     * 标签名前缀
-     */
-    @immutable()
-    public static readonly TAG_NAME_PREFIX_REG?: RegExp = /^([lieu]|van)[-_]/;
-    /**
-     * 忽略命名的标签
-     */
-    @immutable()
-    public static readonly ignoreTag?: Array<string> = ['div', 'span'];
-
-    /**
-     * @param source 需要合并的部分参数
-     */
-    constructor(source?: Partial<Element>) {
-        super();
-        source && this.assign(source);
-    }
-    assign(source?: any) {
-        ['attrList', 'eventList', 'directiveList', 'children'].forEach((key) => {
-            if (source[key] === null)
-                delete source[key];
-        });
-        super.assign(source);
-    }
-    /**
-     * 添加元素
-     */
-    @action('添加元素')
-    async create(none?: void, actionOptions?: ActionOptions) {
-        if (actionOptions?.actionMode === ACTION_MODE.local) {
-            this.view && this.view.emit('local-change');
-            return this;
-        }
-
-        config.defaultApp?.emit('saving');
-        if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
-            const body = this.toJSON();
-            body.parentId = this.parent && this.parent.id;
-            body._posIndex = this.parent && this.parent.children.indexOf(this);
-            utils.logger.debug('添加元素', body);
-            const result = await elementService.create({
-                headers: {
-                    appId: config.defaultApp?.id,
-                    operationAction: 'Element.create',
-                    operationDesc: `添加组件"${this.getElementTitle()}"`,
-                },
-                body,
-            }).catch(catchFn(this.view));
-
-            this.deepPick(result, ['id', 'parentId', 'elementId']);
-            // attr,directive,event的id,expression需要合并
-            this.attrList.forEach((attr, index) => {
-                attr.deepPick(result.attrList[index], ['id', 'expression']);
-            });
-            this.directiveList.forEach((directive, index) => {
-                directive.deepPick(result.directiveList[index], ['id', 'expression']);
-            });
-            this.eventList.forEach((event, index) => {
-                event.deepPick(result.eventList[index], ['id']);
-            });
-        }
-
-        this.view && this.view.emit('change');
-
-        if (actionOptions?.loadHistory !== false) {
-            await config.defaultApp?.history.load(actionOptions?.actionMode !== ACTION_MODE.undoRedo && {
-                operationAction: 'Element.create',
-                operationBeforeImage: null,
-                operationAfterImage: JSON.parse(JSON.stringify(this)),
-                operationDesc: `添加组件"${this.getElementTitle()}"`,
-            });
-            config.defaultApp?.emit('saved');
-        }
-        return this;
-    }
-    /**
-     * 删除元素
-     */
-    @action('删除元素')
-    async delete(none?: void, actionOptions?: ActionOptions) {
-        if (actionOptions?.actionMode === ACTION_MODE.local) {
-            const index = this.parent.children.indexOf(this);
-            ~index && this.parent.children.splice(index, 1);
-            this.deepRemoveElementsName();
-            this.view && this.view.emit('local-change');
-            return this;
-        }
-
-        config.defaultApp?.emit('saving');
-
-        if (!this.parent)
-            throw Error('该元素为根节点！');
-
-        if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
-            if (this.id) {
-                await elementService.delete({
-                    headers: {
-                        appId: config.defaultApp?.id,
-                        operationAction: 'Element.delete',
-                        operationDesc: `删除组件"${this.getElementTitle()}"`,
-                    },
-                    query: {
-                        id: this.id,
-                    },
-                }).catch(catchFn(this.view));
-            }
-        }
-
-        const index = this.parent.children.indexOf(this);
-        ~index && this.parent.children.splice(index, 1);
-
-        // 递归删除组件名的缓存
-        this.deepRemoveElementsName();
-        this.destroy();
-        this.view && this.view.emit('change');
-        if (actionOptions?.loadHistory !== false) {
-            await config.defaultApp?.history.load(actionOptions?.actionMode !== ACTION_MODE.undoRedo && {
-                operationAction: 'Element.delete',
-                operationBeforeImage: JSON.parse(JSON.stringify(this)),
-                operationAfterImage: null,
-                operationDesc: `删除组件"${this.getElementTitle()}"`,
-            });
-            config.defaultApp?.emit('saved');
-        }
-    }
-    /**
-      * 修改元素
-      */
-    async update(source?: Element, actionOptions?: ActionOptions) {
-            config.defaultApp?.emit('saving');
-
-            source && this.assign(source);
-            if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
-                const body = this.toPlainJSON();
-                utils.logger.debug('修改组件', body);
-                await elementService.update({
-                    headers: {
-                        appId: config.defaultApp?.id,
-                        operationAction: actionOptions?.actionName || 'Element.update',
-                        operationDesc: actionOptions?.actionDesc || `修改组件"${this.getElementTitle()}"`,
-                    },
-                    body,
-                }).catch(catchFn(this.view));
-            }
-
-            this.view && this.view.emit('change');
-            await config.defaultApp?.history.load(actionOptions?.actionMode !== ACTION_MODE.undoRedo && {
-                operationAction: 'Element.update',
-                operationBeforeImage: null,
-                operationAfterImage: null,
-                operationDesc: `修改组件"${this.getElementTitle()}"`,
-            });
-
-                config.defaultApp?.emit('saved');
-                return this;
-    }
-
-    /**
-     * 按当前 id 加载逻辑数据
-     */
-    async load() {
-        if (!this.id)
-            return;
-
-        const result = await elementService.load({
-            headers: {
-                appId: config.defaultApp?.id,
-            },
-            query: {
-                id: this.id,
-            },
-            config: { noErrorTip: true },
-        });
-        const newElement = Element.from(result, this.parent, this.view);
-        this.assign(newElement);
-    }
-
-    async move(options: {
-        parentId?: string,
-        _posIndex?: number,
-        nodePath?: string,
-        position?: 'append' | 'insertBefore' | 'insertAfter',
-    }, actionOptions?: ActionOptions) {
-        try {
-            if (!options.parentId)
-                return;
-
-            config.defaultApp?.emit('element.moving');
-
-            const index = this.parent.children.indexOf(this);
-            ~index && this.parent.children.splice(index, 1);
-
-            const parent = vertexsMap.get(options.parentId) as Element;
-            parent.children.splice(options._posIndex, 0, this);
-
-            this.assign({
-                parent,
-                parentId: options.parentId,
-                _posIndex: options._posIndex,
-            });
-
-            if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
-                await this.update(undefined, {
-                    actionName: 'Element.move',
-                    actionDesc: `移动组件"${this.getElementTitle()}"`,
-                });
-                this.view.attachNodePath();
-            } else {
-                this.view.attachNodePath();
-                this.view && this.view.emit('change');
-                await config.defaultApp?.history.load();
-            }
-
-            config.defaultApp?.emit('element.moved');
-            config.defaultApp?.emit('saved');
-        } catch (err) {
-            if (this.view) {
-                await this.view.load();
-                this.view.emit('change');
-            }
-            config.defaultApp?.emit('saved', {
-                action: 'move',
-                err,
-            });
-            throw err;
-        }
-    }
-    /**
-     * 添加元素副本
-     * 在所在父节点的后面添加一个相同的元素
-     */
-    @action('添加元素副本')
-    async duplicate() {
-        const code = this.toVue();
-
-        const index = this.parent.children.indexOf(this);
-        const newNode = Element.fromHTML(code, this.parent, this.view);
-        // 复制的元素需重新命名
-        newNode.deepRenameElements();
-
-        const mergeExpression = (originList: Array<Attr|Directive>, newList: Array<Attr|Directive>) => {
-            newList.forEach((item) => {
-                const originItem = originList.find((originItem) => originItem.name === item.name);
-                if (originItem && originItem.expression) {
-                    // item.expression可能为空
-                    const expression = cloneDeep(originItem.expression);
-                    Object.assign(item, { expression, value: '' });
-                    Object.assign(item.expression, { id: '' });
-                    utils.traverse((current) => {
-                        delete current.node.editable;
-                        delete current.node.index;
-                        delete current.node.parentAttr;
-                        delete current.node.parentId;
-                        delete current.node.id;
-                    }, { node: item.expression as any }, { mode: 'anyObject' });
-                }
-            });
-        };
-
-        // 遍历合并
-        const traverseMergeNode = (origiNode:Element, newNode:Element) => {
-            const originalStack: Array<Element> = [];
-            const newStack: Array<Element> = [];
-            originalStack.push(origiNode);
-            newStack.push(newNode);
-            let originalTempNode: Element;
-            let newTempNode: Element;
-            while (originalStack.length) {
-                originalTempNode = originalStack.pop();
-                newTempNode = newStack.pop();
-                if (newTempNode) {
-                    mergeExpression(originalTempNode.attrList, newTempNode.attrList);
-                    mergeExpression(originalTempNode.directiveList, newTempNode.directiveList);
-                    newTempNode.eventList.forEach((event) => {
-                        const originEvent = originalTempNode.eventList.find((eventTemp:Event) => eventTemp.name === event.name);
-                        if (originEvent) {
-                            Object.assign(event, {
-                                logicId: originEvent.logicId,
-                            });
-                        }
-                    });
-                    if (originalTempNode.children.length) {
-                        for (let i = originalTempNode.children.length - 1; i >= 0; i--) {
-                            originalStack.push(originalTempNode.children[i]);
-                            newStack.push(newTempNode.children[i]);
-                        }
-                    }
-                }
-            }
-        };
-
-        const arrayComp = this.findElementsByTag('u-modal');
-        const existingNames = Object.values(mapValues(arrayComp, (o) => o.name));
-        // 处理弹窗组件的命名问题
-        if (newNode.tag === 'u-modal') {
-            Object.assign(newNode, {
-                name: utils.unique('saveModal1', existingNames as any),
-            });
-        }
-
-        traverseMergeNode(this, newNode);
-        ~index && this.parent.children.splice(index + 1, 0, newNode);
-        this.parent.children.forEach((item, index) => {
-            item._posIndex = index;
-        });
-
-        try {
-            await newNode.create();
-        } catch {
-            ~index && this.parent.children.splice(index + 1, 1);
-            this.parent.children.forEach((item, index) => {
-                item._posIndex = index;
-            });
-        }
-    }
-    /**
-     * 添加子元素
-     * @param child
-     */
-    addChild(child: string | Element, actionOptions?: ActionOptions) {
-        if (typeof child === 'string') {
-            child = Element.fromHTML(child, this, this.view);
-        }
-        if (isPlainObject(child)) {
-            child = Element.from(child, this, this.view);
-        }
-        if (!this.children.includes(child)) {
-            const index = child._posIndex === undefined ? this.children.length : child._posIndex;
-            this.children.splice(index, 0, child);
-        }
-        return child.create(undefined, actionOptions);
-    }
-    /**
-     * 删除子元素
-     * @param child
-     */
-    removeChild(child: Element, actionOptions?: ActionOptions) {
-        if (isPlainObject(child)) {
-            child = this.children.find((item) => item.id === child.id);
-        }
-        return child.delete(undefined, actionOptions);
-    }
-    getElementTitle() {
-        const currentNode = config.allNodesAPI?.[this.tag];
-        return currentNode?.title || this.tag;
-    }
-    /**
-     * 设置组件名称
-     */
-    @action('设置组件名称')
-    async setName(name: string) {
-        const oldName = this.name;
-        this.assign({ name });
-        await this.update(undefined, {
-            actionDesc: `设置组件"${this.getElementTitle()}"的名称为"${name}"`,
-        });
-
-        if (!(window as any).globalData.hasUserCenter) {
-            // 同步权限
-            new Nuims({
-                domainName: this.view.page.service.app.name,
-                element: this,
-            }).editResourceFromResourceValue(oldName ? `${this.view.tempPath}/${oldName}` : null);
-        }
-
-        this.view && this.view.emit('change');
-        if (this.view && this.view.page && this.view.page.service) {
-            this.view.page.service.emit('vertexIdToNameChange', this.id, this.name);
-        }
-    }
-
-    /**
-     * 更新描述信息
-     * @param description
-     */
-    async setDescription(description: string) {
-        this.assign({ description });
-        await this.update(undefined, {
-            actionDesc: `设置组件"${this.getElementTitle()}"的描述为"${description}"`,
-        });
-
-        this.view && this.view.emit('change');
-        if (this.view && this.view.page && this.view.page.service) {
-            this.view.page.service.emit('vertexIdToNameChange', this.id, this.name);
-        }
-    }
-    /**
-     * 添加组件属性
-     */
-    @action('添加组件属性')
-    async addAttr(attr: Attr, actionOptions?: ActionOptions) {
-        if (isPlainObject(attr)) {
-            attr = Attr.from(attr, this);
-        }
-        if (!this.attrList.includes(attr))
-            this.attrList.push(attr);
-
-        await attr.create(undefined, Object.assign({
-            actionDesc: `添加组件"${this.getElementTitle()}"属性"${attr.name}"`,
-        }, actionOptions));
-    }
-    /**
-     * 删除组件属性
-     */
-    @action('删除组件属性')
-    async deleteAttr(attr: Attr, actionOptions?: ActionOptions) {
-        if (!attr)
-            throw Error(`该组件"${this.getElementTitle()}"没有属性"${attr.name}"`);
-        if (isPlainObject(attr))
-            attr = this.attrList.find((item) => item.id === attr.id);
-
-        await attr.delete(undefined, Object.assign({
-            actionDesc: `删除组件"${this.getElementTitle()}"属性"${attr.name}"`,
-        }, actionOptions));
-    }
-    /**
-     * 获取组件属性
-     */
-    getAttr(name: string) {
-        return this.attrList.find((attr) => attr.name === name);
-    }
-    /**
-     * 设置组件属性
-     */
-    @action('设置组件属性')
-    async setAttr(name: string, type: 'string' | 'static' | 'dynamic', value?: any) {
-        let attr = this.getAttr(name);
-        //
-        if (value !== undefined) {
-            if (typeof value !== 'string')
-                value = JSON.stringify(value);
-
-            if (attr) {
-                attr.assign({
-                    type,
-                    value,
-                });
-                await attr.update(undefined, {
-                    actionDesc: `设置组件"${this.getElementTitle()}"属性"${attr.name}"的值为"${attr.value}"`,
-                }).catch(catchFn(this.view));
-            } else {
-                attr = Attr.from({
-                    name,
-                    type,
-                    value,
-                    elementId: this.id,
-                }, this);
-                await attr.create(undefined, {
-                    actionDesc: `设置组件"${this.getElementTitle()}"属性"${attr.name}"的值为"${attr.value}"`,
-                }).catch(catchFn(this.view));
-                this.attrList.push(attr);
-            }
-        }
-
-        this.view && this.view.emit('change');
-    }
-    /**
-     * 添加组件事件
-     */
-    @action('添加组件事件')
-    async addEvent(data: Event, actionOptions?: ActionOptions) {
-        // (data as any).element = this;
-        let event = new Event(data);
-
-        await event.create(undefined, Object.assign({
-            actionDesc: `添加组件"${this.getElementTitle()}"事件"${event.name}"`,
-        }, actionOptions)).catch(catchFn(this.view));
-        event = Event.from(event, this);
-        this.eventList.push(event);
-
-        this.view && this.view.emit('change');
-
-        await config.defaultApp?.history.load();
-        config.defaultApp?.emit('saved');
-
-        return event;
-    }
-    /**
-     * 删除组件属性
-     */
-    @action('删除组件事件')
-    async deleteEvent(event: Event, actionOptions?: ActionOptions) {
-        if (!event)
-            throw Error(`该组件"${this.getElementTitle()}"没有事件"${event.name}"`);
-        if (isPlainObject(event))
-            event = this.eventList.find((item) => item.id === event.id);
-
-        await event.delete(undefined, Object.assign({
-            actionDesc: `删除组件"${this.getElementTitle()}"事件"${event.name}"`,
-        }, actionOptions)).catch(catchFn(this.view));
-        const index = this.eventList.indexOf(event);
-        ~index && this.eventList.splice(index, 1);
-
-        this.view && this.view.emit('change');
-
-        await config.defaultApp?.history.load();
-        config.defaultApp?.emit('saved');
-    }
-    /**
-     * 添加组件指令
-     */
-    @action('添加组件指令')
-    async addDirective(data: Directive, actionOptions?: ActionOptions) {
-        // (data as any).element = this;
-        const directive = new Directive(data);
-        await directive.create(undefined, Object.assign({
-            actionDesc: `添加组件"${this.getElementTitle()}"指令"${directive.name}"`,
-        }, actionOptions)).catch(catchFn(this.view));
-        this.directiveList.push(Directive.from(directive, this));
-
-        this.view && this.view.emit('change');
-    }
-    /**
-     * 删除组件属性
-     */
-    @action('删除组件指令')
-    async deleteDirective(directive: Directive, actionOptions?: ActionOptions) {
-        if (!directive)
-            throw Error(`该组件"${this.getElementTitle()}"没有指令"${directive.name}"`);
-        if (isPlainObject(directive))
-            directive = this.directiveList.find((item) => item.id === directive.id);
-
-        await directive.delete(undefined, Object.assign({
-            actionDesc: `删除组件"${this.getElementTitle()}"属性"${directive.name}"`,
-        }, actionOptions)).catch(catchFn(this.view));
-        const index = this.directiveList.indexOf(directive);
-        ~index && this.directiveList.splice(index, 1);
-
-        this.view && this.view.emit('change');
-    }
-    /**
-     * 转换成 Vue 的模板格式
-     */
-    toVue(options?: ElementToVueOptions) {
-        options = Object.assign({
-            indentStyle: 'space',
-            tabSize: 4,
-            indentLevel: 0,
-            aslIdAttr: false,
-            nodePathAttr: false,
-            getExtraParts: () => [],
-            attrFormat: (attr: Attr | Event | Directive, element?: Element, 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}"`);
-
-        const { finalCode } = options;
-        [].concat(this.attrList, this.directiveList, this.eventList)
-            .forEach((attr: Attr | Directive | Event) => {
-                const result = options.attrFormat(attr, this, attr.toVue(this, finalCode));
-                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}>`;
-    }
-    /**
-     * 转换成设计器中使用的 Vue 文件
-     * @param options
-     */
-    toDesignerVue(options?: ElementToVueOptions) {
-        options = Object.assign({
-            nodePathAttr: true,
-            attrFormat: (attr: Attr | Directive | Event, el: Element, defaultResult?: string) => {
-                if (attr.level === LEVEL_ENUM.event || attr.level === LEVEL_ENUM.directive)
-                    return false;
-                if (attr.level === LEVEL_ENUM.attr) {
-                    const api = config.allNodesAPI[el.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 Attr).type === 'dynamic'
-                    && !(el.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, '\'')} }}"`;
-                        });
-                    else
-                        return defaultResult;
-                }
-                return false;
-            },
-            getExtraParts: (el: Element) => {
-                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.attrList.find((attr) => attr.name === 'data-source');
-                        addEmpty = !hasDataSource;
-                    }
-                    addEmpty && parts.push(`vusion-empty-background="${emptySlot['empty-background']}"`);
-                }
-
-                return parts;
-            },
-        }, options);
-        return this.toVue(options);
-    }
-    /**
-     * 同 toVue 方法
-     * @param options 缩进等选项
-     */
-    toHTML(options?: ElementToVueOptions) {
-        return this.toVue(options);
-    }
-    /**
-     * 根据标签查找元素
-     * @param tag
-     */
-    findElementByTag(tag: string): Element {
-        if (this.tag === tag)
-            return this;
-        else {
-            for (const child of this.children) {
-                const result = child.findElementByTag(tag);
-                if (result)
-                    return result;
-            }
-        }
-    }
-    /**
-     * 根据属性查找元素
-     * @param name
-     * @param value
-     */
-    findElementByAttr(name: string, value: string): Element {
-        if (this.attrList.find((attr) => attr.name === name && attr.value === value))
-            return this;
-        else {
-            for (const child of this.children) {
-                const result = child.findElementByAttr(name, value);
-                if (result)
-                    return result;
-            }
-        }
-    }
-
-    findElementsByTag(tag: string): Array<any> {
-        let existingNames: Array<any> = [];
-        existingNames = this.findElementsByTagCurrent(tag, existingNames);
-        this.findElementsByTagInChildren(this.view.$html.children, tag, existingNames);
-        return existingNames;
-    }
-
-    findElementsByTagCurrent(tag: string, existingNames: Array<any>) {
-        if (this.tag === tag) {
-            existingNames.push(this);
-        }
-        return existingNames;
-    }
-
-    findElementsByTagInChildren(children: Array<any>, tag: string, existingNames: Array<any>) {
-        for (const child of children) {
-            const result = child.findElementByTag(tag);
-
-            if (child.children) {
-                this.findElementsByTagInChildren(child.children, tag, existingNames);
-            }
-            if (result) {
-                existingNames.push(result);
-            }
-        }
-    }
-
-    // 初始化组件名
-    public initElementName() {
-        if (Element.ignoreTag.includes(this.tag)) {
-            return;
-        }
-        const name = this.genElementName();
-        this.assign({ name });
-        this.view.addElementName(name);
-    }
-
-    // 生成新的组件名
-    public genElementName(): string {
-        const compNameSet = this.view.elementNameSet;
-        const tagName = this.tag.replace(Element.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
-        const componentName = utils.unique(tagName + '1', compNameSet);
-        return componentName;
-    }
-
-    // 递归生成组件名
-    public deepRenameElements(): void {
-        return this.traverseChildren((ele: Element) => {
-            ele.initElementName();
-        });
-    }
-
-    // 递归删除组件名的缓存
-    public deepRemoveElementsName(): void {
-        return this.traverseChildren((ele: Element) => {
-            this.view.removeElementName(ele.name);
-        });
-    }
-
-    // 递归遍历组件
-    public traverseChildren(cb: (ele: Element) => void): void {
-        utils.traverse((current) => {
-            cb(current.node);
-        }, { node: this });
-    }
-
-    /**
-     * 从 Vue 的 ASTNode 转换成 ASL 元素
-     * @param astNode Vue 的 ASTNode
-     */
-    private static _fromASTNode(astNode: compiler.ASTElement, context?: ParseContext): Element {
-        // 临时处理组件的 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] Element NASL unsupports '${key}' field in node `, astNode);
-        });
-
-        let element: Element;
-        if (astNode.type === 1) {
-            if (astNode.tag === 'router-view') {
-                if (config.scope === 'h5') {
-                    astNode.tag = 'van-router-view';
-                } else {
-                    astNode.tag = 'u-router-view';
-                }
-            }
-
-            element = new Element({
-                tag: astNode.tag,
-                name: astNode.attrsMap.ref,
-                staticClass: astNode.attrsMap.class,
-                staticStyle: astNode.attrsMap.style,
-                slotTarget: astNode.slotTarget && json5.parse(astNode.slotTarget),
-                slotScope: astNode.slotScope === '_empty_' ? '' : astNode.slotScope,
-                children: astNode.children as unknown as Array<Element>,
-            });
-
-            astNode.attrs && astNode.attrs.forEach((oldAttr) => {
-                let attr: Attr;
-                if (oldAttr.value === '""' && (oldAttr as any).end - (oldAttr as any).start === oldAttr.name.length) {
-                    attr = Attr.from({
-                        type: 'static',
-                        name: oldAttr.name,
-                        value: 'true',
-                    }, element);
-                } else {
-                    try {
-                        const tmp = json5.parse(oldAttr.value);
-                        attr = Attr.from({
-                            type: typeof tmp === 'string' ? 'string' : 'static',
-                            name: oldAttr.name,
-                            value: typeof tmp === 'string' ? tmp : oldAttr.value,
-                        }, element);
-                    } catch (e) {
-                        const expression = <ExpressionNode> this._parseExpression(oldAttr.value, context);
-                        attr = Attr.from({
-                            type: 'dynamic',
-                            name: oldAttr.name,
-                            value: expression ? '' : oldAttr.value,
-                            expression,
-                        }, element);
-                        if (astNode.attrsMap[`:${attr.name}.sync`]) {
-                            attr.assign({ sync: true });
-                        }
-                    }
-                }
-                element.attrList.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 value = oldEvent.value.split('(')[0];
-                element.eventList.push(Event.from({
-                    name,
-                    value,
-                    logicId: value[0] === '$' ? undefined : value,
-                }, 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 = <ExpressionNode> this._parseExpression(directive.value, context);
-                        element.attrList.push(Attr.from({
-                            type: 'dynamic',
-                            name: 'value',
-                            value: expression ? '' : directive.value,
-                            expression,
-                            sync: true,
-                        }, element));
-                    }
-                } else {
-                    const expression = <ExpressionNode> this._parseExpression(directive.value, context);
-                    if(!expression || expression.type === 'StringLiteral') { // 处理类似情况：v-auth="''",v-tooltip="''"
-                        element.directiveList.push(Directive.from({
-                            type: 'string',
-                            name: directive.name,
-                            rawName: directive.rawName,
-                            value:  directive.value && directive.value.replace(/'/g, ''),
-                            arg: directive.arg,
-                            modifiers: directive.modifiers,
-                        }, element));
-                    } else {
-                        element.directiveList.push(Directive.from({
-                            type: 'dynamic',
-                            name: directive.name,
-                            rawName: directive.rawName,
-                            value: '',
-                            expression,
-                            arg: directive.arg,
-                            modifiers: directive.modifiers,
-                        }, element));
-                    }
-                }
-            });
-
-            if (astNode.if) {
-                element.directiveList.push(Directive.from({
-                    type: 'dynamic',
-                    name: 'if',
-                    rawName: 'v-if',
-                    value: '',
-                    expression: <ExpressionNode> this._parseExpression(astNode.if, context),
-                }, element));
-            }
-
-            // Removed
-            // hasBindings:
-            // static:
-            // staticRoot:
-
-            // refInFor?: boolean;
-
-            // if?: string;
-            // ifProcessed?: boolean;
-            // elseif?: string;
-            // else?: true;
-            // ifConditions?: ASTIfCondition[];
-
-            // for?: string;
-            // forProcessed?: boolean;
-            // key?: string;
-            // alias?: string;
-            // iterator1?: string;
-            // iterator2?: string;
-
-            // events?: ASTElementHandlers;
-            // nativeEvents?: ASTElementHandlers;
-
-            // model?: {
-            //     value: string;
-            //     callback: string;
-            //     expression: string;
-            // };
-
-            // directives?: ASTDirective[];
-        } else if (astNode.type === 2) {
-            if (config.scope === 'h5') {
-                element = new Element({
-                    tag: 'van-text',
-                });
-            } else {
-                element = new Element({
-                    tag: 'u-text',
-                });
-            }
-            const value = astNode.text.match(/{{(.*?)}}/)[1].trim();
-            const expression = <ExpressionNode> this._parseExpression(value, context);
-            element.attrList.push(new Attr({
-                type: 'dynamic',
-                name: 'text',
-                value: expression ? '' : value,
-                expression,
-                element,
-            }));
-        } else if (astNode.type === 3) {
-            if (config.scope === 'h5') {
-                element = new Element({
-                    tag: 'van-text',
-                });
-            } else {
-                element = new Element({
-                    tag: 'u-text',
-                });
-            }
-
-            element.attrList.push(new Attr({
-                name: 'text',
-                value: astNode.text,
-                element,
-            }));
-        }
-
-        return element;
-    }
-
-    /**
-     * 解析属性中的表达式
-     * @param value
-     * @param $def 目前 $def 只用来查找 $def.variables 和 $def.structures
-     * @param dataSchema
-     */
-    private static _parseExpression(value: string, context: ParseContext = {}) {
-        try {
-            let ast = babelParser.parseExpression(value) as any;
-
-            utils.traverse((current) => {
-                if (!current.node)
-                    return;
-                current.node.level = 'expressionNode';
-                delete current.node.loc;
-                delete current.node.start;
-                delete current.node.end;
-                delete current.node.errors;
-                delete current.node.comments;
-                delete current.node.innerComments;
-                delete current.node.leadingComments;
-                delete current.node.trailingComments;
-                if (current.node.type === 'CallExpression' && current.node.callee.object.name === '$utils') {
-                    const calleeCode = current.node.callee.property.name || current.node.callee.property.value;
-                    if (calleeCode === 'Enum') {
-                        const enumName = current.node.arguments[0] && current.node.arguments[0].value;
-                        if (enumName) {
-                            let enumNode: any;
-                            Object.keys(dataTypesMap).forEach((dataTypeKey) => {
-                                if (dataTypesMap[dataTypeKey].type === 'enum') {
-                                    if (dataTypesMap[dataTypeKey].name === enumName) {
-                                        enumNode = dataTypesMap[dataTypeKey];
-                                    }
-                                }
-                            });
-                            if (enumNode) {
-                                const code = 'ID_' + enumNode.id;
-                                current.node.arguments[0].value = code;
-                                current.node.arguments[0].code = code;
-                            }
-                        }
-                    }
-                    Object.assign(current.node, {
-                        type: 'BuiltInFunction',
-                        value: calleeCode,
-                        calleeCode,
-                        label: '内置函数',
-                        level: 'expressionNode',
-                        builtInFuncParams: current.node.arguments.map((argument: any) => ({
-                            level: 'expressionNode',
-                            type: 'BuiltInFuncParam',
-                            name: '',
-                            builtInFuncParamValue: Object.assign({
-                                level: 'expressionNode',
-                            }, argument),
-                        })),
-                    });
-                    delete current.node.arguments;
-                    delete current.node.callee;
-                } else if (current.node.type === 'MemberExpression') {
-                    let object = current.node.object;
-                    const properties = [current.node.property];
-                    while (object.type === 'MemberExpression') {
-                        properties.push(object.property);
-                        object = object.object;
-                    }
-                    if (object.name === 'scope') {
-                        let schema: any = {
-                            $ref: '',
-                        };
-                        if (context.dataSchema) { // 可以直接用 dataSchema，处理 mergeBlock 的情况
-                            const typeKey = '#/genericTypes/ScopeOf';
-                            schema = {
-                                type: 'genericType',
-                                typeKey,
-                                typeInstantiation: {
-                                    typeName: 'ScopeOf',
-                                    typeParams: [
-                                        {
-                                            typeParamName: 'T',
-                                            typeParamValue:
-                                            {
-                                                $ref: context.dataSchema,
-                                                typeKey: context.dataSchema,
-                                            },
-
-                                        },
-                                    ],
-                                },
-                            };
-                        }
-                        Object.assign(object, { schema, code: object.name });
-                    }
-                    if (context && object.name) {
-                        let variable = (context.variables || []).find((variable:Variable) => variable.name === object.name);
-                        variable = variable || object;
-                        if (variable) {
-                            let schemaData = dataTypesMap[variable.schema && variable.schema.$ref];
-                            if (variable.schema && variable.schema.type === 'genericType') {
-                                const genericClass = dataTypesMap[variable.schema.typeKey];
-                                let propertyList: any = [];
-                                if (genericClass) {
-                                    propertyList = cloneDeep(genericClass.propertyList);
-                                    propertyList = propertyList.map((property: any) => {
-                                        if (property.type === 'genericParam' && variable.schema.typeInstantiation) {
-                                            const param = variable.schema.typeInstantiation.typeParams.find((typeParam: any) => typeParam.typeParamName === property.typeParamName);
-                                            if (param) {
-                                                property = Object.assign({ name: property.name }, param.typeParamValue);
-                                            }
-                                        }
-                                        return property;
-                                    });
-                                }
-                                schemaData = { propertyList };
-                            }
-
-                            // 这部分功能还不稳定，先单独处理一下
-                            if (object.name === 'scope' && properties.length >= 3) {
-                                const tempStructure = context.structures.find((structure: any) => context.dataSchema === structure.schemaRef || context.dataSchema === structure.name);
-                                if (tempStructure && !tempStructure.id) {
-                                    properties.pop(); // scope.item 那一项
-                                    let property = properties.pop();
-                                    property.schemaRef = tempStructure.name + '.' + property.name;
-
-                                    const originProp = tempStructure.propertyList.find((tempProp) => tempProp.name === property.name);
-                                    schemaData = originProp && dataTypesMap[originProp.$ref];
-                                    property = properties.pop();
-                                    while (property && schemaData) {
-                                        if (schemaData.propertyList) {
-                                            const originProp = schemaData.propertyList.find((tempProp) => tempProp.name === property.name);
-                                            if (originProp) {
-                                                if (originProp.id) {
-                                                    Object.assign(property, {
-                                                        schemaRef: '#/' + originProp.id,
-                                                        code: `ID_${originProp.id}`,
-                                                    });
-                                                }
-                                                schemaData = dataTypesMap[originProp.$ref];
-                                            }
-                                        }
-                                        property = properties.pop();
-                                    }
-                                } else if (tempStructure && tempStructure.id && context.recordProperty) {
-                                    properties.pop(); // scope.item 那一项
-                                    let property = properties.pop();
-                                    property.schemaRef = context.recordProperty.$ref;
-                                    property.code = `ID_${context.recordProperty.id}`;
-
-                                    const originProp = context.recordProperty;
-                                    schemaData = originProp && dataTypesMap[originProp.$ref];
-                                    property = properties.pop();
-                                    while (property && schemaData) {
-                                        if (schemaData.propertyList) {
-                                            const originProp = schemaData.propertyList.find((tempProp) => tempProp.name === property.name);
-                                            if (originProp) {
-                                                if (originProp.id) {
-                                                    Object.assign(property, {
-                                                        schemaRef: `#/${originProp.id}`,
-                                                        code: `ID_${originProp.id}`,
-                                                    });
-                                                }
-                                                schemaData = dataTypesMap[originProp.$ref];
-                                            }
-                                        }
-                                        property = properties.pop();
-                                    }
-                                }
-                            } else {
-                                let property = properties.pop();
-                                while (property && schemaData) {
-                                    if (schemaData.propertyList) {
-                                        const originProp = schemaData.propertyList.find((tempProp) => tempProp.name === property.name);
-                                        if (originProp) {
-                                            if (originProp.id) {
-                                                Object.assign(property, {
-                                                    schemaRef: '#/' + originProp.id,
-                                                });
-                                            }
-                                            schemaData = dataTypesMap[originProp.$ref];
-                                        }
-                                    }
-                                    property = properties.pop();
-                                }
-                            }
-                        }
-                    }
-
-                    const property = current.node.property;
-                    if (property.type === 'StringLiteral') {
-                        // 区分单引号的变量和纯文字
-                        // $utils['FormatDate']()
-                        // 把 'FormatDate' 变成 Identifier, 因为内置函数名是通过选择出来的；如果不改，会展示成输入框
-                        if (property.extra.raw.includes("'")) {
-                            property.type = 'Identifier';
-                            property.name = ast.value;
-                            property.level = 'expressionNode';
-                        }
-                    }
-                } else if (current.node.type === 'Identifier') {
-                    if (current.node.name && current.node.name.startsWith('ID_ENUM_LIST_')) {
-                        current.node.schemaRef = current.node.name.replace('ID_ENUM_LIST_', '');
-                        current.node.code = current.node.name;
-                    }
-                }
-                delete current.node.extra;
-            }, { node: ast }, { mode: 'anyObject' });
-
-            if (ast) {
-                let hasSchema = !!context.dataSchema;
-                let object = ast;
-                while (!hasSchema && object) {
-                    if (object.schema || object.schemaRef || (object.property && (object.property.schema || object.property.schemaRef)))
-                        hasSchema = true;
-                    object = object.object;
-                }
-
-                if (ast.type === 'ArrayExpression' || ast.type === 'ObjectExpression'
-                    || ast.type === 'MemberExpression' && !hasSchema) {
-                    ast = {
-                        label: '原子项',
-                        level: 'expressionNode',
-                        type: 'Unparsed',
-                        editable: true,
-                        code: value,
-                    };
-                }
-            }
-
-            return LogicItem.from(ast, null, null);
-        } catch (e) {
-            return null;
-        }
-    }
-
-    /**
-     * 解析 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;
-
-        if (context && !context.dataSchema) {
-            const cap = html.match(/data-schema="(.*?)"/);
-            context.dataSchema = cap ? cap[1] : '';
-        }
-        let root: Element;
-        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;
-    }
-    /**
-     * 从模板生成规范的 Element 对象
-     */
-    public static fromHTML(html: string, parent: Element, view: View, context?: ParseContext) {
-        const element = this.parse(html, context);
-        utils.traverse((current) => {
-            current.node.assign({ view, parent: current.parent });
-            // 生成唯一组件名 依赖element.view
-
-            if (!current.node.name) {
-                current.node.initElementName();
-            }
-        }, { node: element, parent });
-        return element;
-    }
-    /**
-     * 从后端 JSON 生成规范的 Element 对象
-     */
-    public static from(source: any, parent: Element, view: View, currentElement?: Element) {
-        const element = new Element(source);
-        currentElement = currentElement || element;
-
-        element.assign({
-            attrList: element.attrList.map((attr) => Attr.from(attr, currentElement)),
-            eventList: element.eventList.map((ret) => Event.from(ret, currentElement)),
-            directiveList: element.directiveList.map((directive) => Directive.from(directive, currentElement)),
-            children: element.children.map((child) => Element.from(child, currentElement, view)),
-            view,
-            parent,
-        });
-
-        return element;
-    }
-}
-
-export default Element;