@lcap/nasl-concepts 3.9.0-beta.1

package/out/concepts/ViewElement__.js

@@ -0,0 +1,2929 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var ViewElement_1;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewElement = void 0;
+const utils_1 = require("../utils");
+const nasl_translator_1 = require("@lcap/nasl-translator");
+const concepts_1 = require("../concepts");
+const store_1 = require("../store");
+const json5 = __importStar(require("json5"));
+const BooleanLiteral__1 = require("./BooleanLiteral__");
+const StringLiteral__1 = require("./StringLiteral__");
+const LogicItem__1 = require("./LogicItem__");
+const Logic__1 = require("./Logic__");
+const store_2 = require("../store");
+const utils_2 = require("../utils");
+/**
+ * 自闭合标签
+ */
+const selfClosingTag = [
+    'base',
+    'meta',
+    'area',
+    'embed',
+    'link',
+    'img',
+    'input',
+    'param',
+    'hr',
+    'br',
+    'source',
+    'track',
+    'wbr',
+    'col',
+];
+function genArgumentMemberExpression(arr) {
+    let expressionNode;
+    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;
+}
+function transAstNodeToNaslNode(astNode, namespace) {
+    let node = null;
+    if (astNode.type === 'CallExpression' && astNode.callee.object.name === '$utils') {
+        const calleeName = astNode.callee.property.name || astNode.callee.property.value;
+        const _arguments = astNode.arguments
+            .map((argument) => ({
+            concept: 'Argument',
+            name: '',
+            kind: 'Statement',
+            keyword: '',
+            expression: transAstNodeToNaslNode(Object.assign({}, argument)),
+        }))
+            .filter((item) => item.expression), _typeArguments = astNode.arguments
+            .map((argument) => transAstNodeToNaslTypeNode(Object.assign({}, argument)))
+            .filter((item) => item);
+        node = {
+            concept: 'CallFunction',
+            name: '',
+            label: '调用内置函数',
+            kind: 'Expression',
+            calleeNamespace: 'nasl.util',
+            calleeName,
+            arguments: _arguments,
+            typeArguments: _typeArguments,
+        };
+        if (calleeName === 'Convert') {
+            node.arguments = [_arguments[0]];
+            if (_typeArguments.length === 0 && _arguments?.length === 2) {
+                node.typeArguments = [_arguments?.[1].expression];
+            }
+        }
+    }
+    else if (astNode.type === 'MemberExpression') {
+        if (astNode.object?.name === '$global') {
+            if (astNode.property?.name === 'userInfo') {
+                // 目前只有权限相关的
+                node = transAstNodeToNaslNode(astNode.property, 'nasl.auth');
+            }
+            else if (astNode.property?.name === 'frontendVariables') {
+                node = 'app.frontendVariables';
+            }
+        }
+        else if (astNode.object?.name === 'frontendVariables') {
+            node = transAstNodeToNaslNode(astNode.property, 'app.frontendVariables');
+        }
+        else {
+            const object = transAstNodeToNaslNode(astNode.object);
+            // object如果返回字符串，则将它当成namespace处理
+            if (Object.prototype.toString.call(object) === '[object String]') {
+                node = transAstNodeToNaslNode(astNode.property, object);
+            }
+            else {
+                const property = transAstNodeToNaslNode(astNode.property);
+                node = {
+                    concept: 'MemberExpression',
+                    name: '',
+                    kind: 'Expression',
+                    object,
+                    property,
+                };
+            }
+        }
+    }
+    else if (astNode.type === 'Identifier') {
+        node = {
+            concept: 'Identifier',
+            namespace: namespace || '',
+            name: astNode.name,
+            kind: 'Expression',
+        };
+    }
+    else if (astNode.type === 'ArrayExpression') {
+        node = {
+            concept: 'Unparsed',
+            label: '原子项',
+            code: astNode.value,
+        };
+    }
+    else if (astNode.type === 'ObjectExpression') {
+        const properties = astNode.properties.map((property) => ({
+            key: property.key.value,
+            value: property.value.value,
+        }));
+        node = {};
+        properties.forEach((property) => {
+            node[property.key] = property.value;
+        });
+    }
+    else if (astNode.type === 'TemplateLiteral') {
+        // 模板字符串翻译成字符串插值
+        const { expressions, quasis } = astNode;
+        node = {
+            concept: 'StringInterpolation',
+            kind: 'Expression',
+            name: '',
+            expressions: [...(quasis || []), ...(expressions || [])]
+                .sort((node1, node2) => {
+                return node1.start - node2.start;
+            })
+                .map((node) => {
+                return transAstNodeToNaslNode(node);
+            }),
+        };
+    }
+    else if (astNode.type === 'TemplateElement') {
+        node = {
+            concept: 'StringLiteral',
+            kind: 'Expression',
+            name: '',
+            value: astNode.value?.raw,
+        };
+    }
+    else if (astNode.type === 'StringLiteral') {
+        // 单独特殊处理枚举因为他不是MemberExpression，而是Identifier_
+        if (astNode?.value?.startsWith('__enumTypeAnnotation_')) {
+            return null;
+        }
+        else {
+            node = {
+                concept: 'StringLiteral',
+                kind: 'Expression',
+                name: '',
+                value: astNode.value,
+            };
+        }
+    }
+    else if (astNode.type === 'UnaryExpression') {
+        const argument = astNode.argument;
+        if (argument.type === 'NumericLiteral') {
+            node = {
+                concept: 'NumericLiteral',
+                value: astNode.operator + argument.value,
+            };
+        }
+        else {
+            node = {
+                concept: 'UnaryExpression',
+                kind: 'Expression',
+                name: '',
+                operator: astNode.operator,
+                argument: transAstNodeToNaslNode(astNode.argument),
+            };
+        }
+    }
+    else if (astNode.type === 'NumericLiteral') {
+        const numberString = typeof astNode.value === 'number' ? astNode.value.toString() : astNode.value;
+        node = {
+            concept: 'NumericLiteral',
+            value: numberString,
+        };
+    }
+    else if (astNode.type === 'ArrowFunctionExpression') {
+        if (astNode.body?.callee?.name) {
+            astNode.name = astNode.body.callee.name;
+        }
+        let tempNode = {
+            calleeNamespace: 'app.logics',
+            concept: 'CallLogic',
+            namespace: namespace || '',
+            name: astNode.name,
+            calleeName: astNode.name,
+            kind: 'Expression',
+            parentNode: astNode.parentNode,
+            parentKey: astNode.parentKey,
+            arguments: astNode?.body?.arguments
+                ?.map((argument) => ({
+                concept: 'Argument',
+                name: '',
+                kind: 'Statement',
+                keyword: '',
+                expression: transAstNodeToNaslNode(Object.assign({}, argument)),
+            }))
+                .filter((item) => item.expression),
+            typeArguments: astNode?.body?.arguments
+                ?.map((argument) => transAstNodeToNaslTypeNode(Object.assign({}, argument)))
+                .filter((item) => item),
+        };
+        node = Logic__1.Logic.from({
+            ...tempNode,
+        }, undefined, 'logics');
+    }
+    else if (astNode.type === 'LogicalExpression' || astNode.type === 'BinaryExpression') {
+        node = {
+            concept: 'BinaryExpression',
+            operator: astNode.operator,
+            left: transAstNodeToNaslNode(astNode.left),
+            right: transAstNodeToNaslNode(astNode.right),
+        };
+    }
+    else {
+        node = astNode;
+        node.concept = astNode.type;
+    }
+    return node;
+}
+function transAstNodeToNaslTypeNode(astNode, namespace) {
+    let node = null;
+    // 单独特殊处理枚举因为他不是MemberExpression，而是Identifier_
+    if (astNode?.value?.startsWith?.('__enumTypeAnnotation_')) {
+        const valueArr = astNode.value.replace('__enumTypeAnnotation_', '')?.split('.');
+        const name = valueArr.pop();
+        const namespace = valueArr.join('.');
+        node = {
+            concept: 'TypeAnnotation',
+            typeNamespace: namespace || '',
+            typeName: name || '',
+            typeKind: 'reference',
+        };
+    }
+    return node;
+}
+function isLockField(node) {
+    if (!node || node.concept !== 'ViewElement')
+        return false;
+    const attr = node?.bindAttrs?.find((attr) => ['FormDesignerLocked', 'TableDesignerLocked'].includes(attr.name))?.value;
+    if (attr === undefined)
+        return !!isLockField(node?.parentNode);
+    else
+        return !!attr;
+}
+const decorators_1 = require("../decorators");
+const utils_3 = require("../utils");
+const utils = __importStar(require("../utils"));
+const asserts = __importStar(require("./utils/asserts"));
+const Annotatable__1 = __importDefault(require("./Annotatable__"));
+/**
+ * 页面元素
+ */
+let ViewElement = class ViewElement extends Annotatable__1.default {
+    static { ViewElement_1 = this; }
+    /** 类名 */
+    static { this.ConceptName = 'ViewElement'; }
+    /**
+     * 是否为抽象类
+     * 抽象类不能产生 concept: string
+     */
+    static { this.isAbstract = false; }
+    /** 继承链 */
+    static { this.inheritanceChain = ['Annotatable', 'BaseNode']; }
+    /**
+     * @param source 需要合并的部分参数
+     */
+    constructor(source) {
+        source = Object.assign({}, ViewElement_1.getDefaultOptions(), source);
+        super(source);
+        /**
+         * 页面元素名称
+         */
+        this.name = '';
+        /**
+         * 元素绑定属性列表
+         */
+        this.bindAttrs = [];
+        /**
+         * 元素绑定事件列表
+         */
+        this.bindEvents = [];
+        /**
+         * 元素指令列表
+         */
+        this.bindDirectives = [];
+        /**
+         * 绑定的角色
+         */
+        this.bindRoles = [];
+        /**
+         * 元素绑定样式列表
+         */
+        this.bindStyles = [];
+        /**
+         * 子元素列表
+         */
+        this.children = [];
+        this.computedStyle = {};
+        super.subConstructor(source);
+    }
+    /**
+     * 设置页面元素名称
+     */
+    setName(name) {
+        const object = {
+            name,
+        };
+        this.update({
+            ...object,
+            field: 'name',
+        });
+    }
+    /**
+     * 设置静态 style
+     */
+    setStaticStyle(staticStyle) {
+        const object = {
+            staticStyle,
+        };
+        this.update({
+            ...object,
+        });
+    }
+    /**
+     * 设置权限资源描述
+     */
+    setAuthDescription(authDescription) {
+        const object = {
+            authDescription,
+        };
+        this.update({
+            ...object,
+        });
+    }
+    getBindAttributeExistingNames(excludedList = []) {
+        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(), undefined, false);
+    }
+    _insertBindAttributeAt(options, index) {
+        const bindAttributeOptions = {};
+        const relationOptions = { parentNode: this, parentKey: 'bindAttrs' };
+        const BindAttribute = (0, decorators_1.getConceptConstructor)('BindAttribute');
+        let 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 (asserts.isBindAttribute(options)) {
+            options.ensureDelete(); // 同一实例不支持多处存在
+            bindAttribute = options;
+            Object.assign(bindAttribute, relationOptions);
+        }
+        else {
+            bindAttribute = BindAttribute.from({
+                ...bindAttributeOptions,
+                ...options,
+            }, this, 'bindAttrs');
+        }
+        this.bindAttrs.splice(index, 0, bindAttribute);
+        return bindAttribute;
+    }
+    insertBindAttributeAt(options, index) {
+        const node = this._insertBindAttributeAt(options, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindAttrs',
+        });
+        return node;
+    }
+    _addBindAttribute(options) {
+        const index = this.bindAttrs.length;
+        return this._insertBindAttributeAt(options, index);
+    }
+    addBindAttribute(options) {
+        const node = this._addBindAttribute(options);
+        const index = this.bindAttrs.indexOf(node);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindAttrs',
+        });
+        return node;
+    }
+    getBindEventExistingNames(excludedList = []) {
+        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(), undefined, false);
+    }
+    _insertBindEventAt(options, index) {
+        const bindEventOptions = {};
+        const relationOptions = { parentNode: this, parentKey: 'bindEvents' };
+        const BindEvent = (0, decorators_1.getConceptConstructor)('BindEvent');
+        let bindEvent;
+        if (!options) {
+            bindEvent = BindEvent.from({
+                ...bindEventOptions,
+                name: this.getBindEventUniqueName(),
+            }, this, 'bindEvents');
+        }
+        else if (typeof options === 'string') {
+            bindEvent = BindEvent.from({
+                ...bindEventOptions,
+                name: options,
+            }, this, 'bindEvents');
+        }
+        else if (asserts.isBindEvent(options)) {
+            options.ensureDelete(); // 同一实例不支持多处存在
+            bindEvent = options;
+            Object.assign(bindEvent, relationOptions);
+        }
+        else {
+            bindEvent = BindEvent.from({
+                ...bindEventOptions,
+                ...options,
+            }, this, 'bindEvents');
+        }
+        this.bindEvents.splice(index, 0, bindEvent);
+        return bindEvent;
+    }
+    insertBindEventAt(options, index) {
+        const node = this._insertBindEventAt(options, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindEvents',
+        });
+        return node;
+    }
+    _addBindEvent(options) {
+        const index = this.bindEvents.length;
+        return this._insertBindEventAt(options, index);
+    }
+    addBindEvent(options) {
+        const node = this._addBindEvent(options);
+        const index = this.bindEvents.indexOf(node);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindEvents',
+        });
+        return node;
+    }
+    getBindDirectiveExistingNames(excludedList = []) {
+        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(), undefined, false);
+    }
+    _insertBindDirectiveAt(options, index) {
+        const bindDirectiveOptions = {};
+        const relationOptions = { parentNode: this, parentKey: 'bindDirectives' };
+        const BindDirective = (0, decorators_1.getConceptConstructor)('BindDirective');
+        let 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 (asserts.isBindDirective(options)) {
+            options.ensureDelete(); // 同一实例不支持多处存在
+            bindDirective = options;
+            Object.assign(bindDirective, relationOptions);
+        }
+        else {
+            bindDirective = BindDirective.from({
+                ...bindDirectiveOptions,
+                ...options,
+            }, this, 'bindDirectives');
+        }
+        this.bindDirectives.splice(index, 0, bindDirective);
+        return bindDirective;
+    }
+    insertBindDirectiveAt(options, index) {
+        const node = this._insertBindDirectiveAt(options, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindDirectives',
+        });
+        return node;
+    }
+    _addBindDirective(options) {
+        const index = this.bindDirectives.length;
+        return this._insertBindDirectiveAt(options, index);
+    }
+    addBindDirective(options) {
+        const node = this._addBindDirective(options);
+        const index = this.bindDirectives.indexOf(node);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindDirectives',
+        });
+        return node;
+    }
+    getBindStyleExistingNames(excludedList = []) {
+        const excludedSet = new Set(excludedList);
+        return (this.bindStyles || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    }
+    getBindStyleUniqueName(name = 'bindStyle1') {
+        return utils.unique(name, this.getBindStyleExistingNames(), undefined, false);
+    }
+    _insertBindStyleAt(options, index) {
+        const bindStyleOptions = {};
+        const relationOptions = { parentNode: this, parentKey: 'bindStyles' };
+        const BindStyle = (0, decorators_1.getConceptConstructor)('BindStyle');
+        let bindStyle;
+        if (!options) {
+            bindStyle = BindStyle.from({
+                ...bindStyleOptions,
+                name: this.getBindStyleUniqueName(),
+            }, this, 'bindStyles');
+        }
+        else if (typeof options === 'string') {
+            bindStyle = BindStyle.from({
+                ...bindStyleOptions,
+                name: options,
+            }, this, 'bindStyles');
+        }
+        else if (asserts.isBindStyle(options)) {
+            options.ensureDelete(); // 同一实例不支持多处存在
+            bindStyle = options;
+            Object.assign(bindStyle, relationOptions);
+        }
+        else {
+            bindStyle = BindStyle.from({
+                ...bindStyleOptions,
+                ...options,
+            }, this, 'bindStyles');
+        }
+        this.bindStyles.splice(index, 0, bindStyle);
+        return bindStyle;
+    }
+    insertBindStyleAt(options, index) {
+        const node = this._insertBindStyleAt(options, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindStyles',
+        });
+        return node;
+    }
+    _addBindStyle(options) {
+        const index = this.bindStyles.length;
+        return this._insertBindStyleAt(options, index);
+    }
+    addBindStyle(options) {
+        const node = this._addBindStyle(options);
+        const index = this.bindStyles.indexOf(node);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindStyles',
+        });
+        return node;
+    }
+    _insertViewElementAt(options, index) {
+        const viewElementOptions = {};
+        const relationOptions = { parentNode: this, parentKey: 'children' };
+        const ViewElement = (0, decorators_1.getConceptConstructor)('ViewElement');
+        let 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 (asserts.isViewElement(options)) {
+            options.ensureDelete(); // 同一实例不支持多处存在
+            viewElement = options;
+            Object.assign(viewElement, relationOptions);
+        }
+        else {
+            viewElement = ViewElement.from({
+                ...viewElementOptions,
+                ...options,
+            }, this, 'children');
+        }
+        this.children.splice(index, 0, viewElement);
+        return viewElement;
+    }
+    insertViewElementAt(options, index) {
+        const node = this._insertViewElementAt(options, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'children',
+        });
+        return node;
+    }
+    _addViewElement(options) {
+        const index = this.children.length;
+        return this._insertViewElementAt(options, index);
+    }
+    addViewElement(options) {
+        const node = this._addViewElement(options);
+        const index = this.children.indexOf(node);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'children',
+        });
+        return node;
+    }
+    removeBindAttribute(options) {
+        let 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();
+    }
+    removeBindEvent(options) {
+        let 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();
+    }
+    removeBindDirective(options) {
+        let 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();
+    }
+    removeBindStyle(options) {
+        let bindStyle;
+        if (typeof options === 'string') {
+            bindStyle = this.bindStyles.find((item) => item.name === options);
+            if (!bindStyle) {
+                throw new Error('找不到元素绑定样式 ' + options);
+            }
+        }
+        else {
+            bindStyle = options;
+        }
+        return bindStyle.delete();
+    }
+    removeViewElement(options) {
+        let 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();
+    }
+    //================================================================================
+    // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+    // 自动生成的代码已结束。下面可以手动编写。
+    //================================================================================
+    /**
+     * 祖先 View
+     */
+    get view() {
+        return this.getAncestor('View');
+    }
+    /**
+     * 祖先 Module
+     */
+    get module() {
+        return this.getAncestor('Module');
+    }
+    /**
+     * 祖先 Frontend
+     */
+    get frontend() {
+        return this.getAncestor('Frontend');
+    }
+    get likeComponent() {
+        return this.view || this?.getAncestor('BusinessComponent');
+    }
+    /* 主页面有没有权限 */
+    get parentAuth() {
+        const _nameSpace = this.view.getNamespace();
+        const mainViewName = _nameSpace.split('.')[2];
+        return this.view.parentNode.concept === 'App'
+            ? this.view.auth
+            : this.frontend.views.find((item) => item.name === mainViewName)?.auth;
+    }
+    // IDE内展示需要屏蔽掉“系统统一路径前缀”
+    get uiPath() {
+        return `${this.view.uiPath}/${this.name}`;
+    }
+    /**
+     * 权限领域的资源路径
+     */
+    get authPath() {
+        return `${this.view.path}/${this.name}`;
+    }
+    get auth() {
+        return this.bindDirectives.find((directive) => directive.name === 'auth');
+    }
+    getViewElementUniqueName(name = 'viewElement1') {
+        return this.likeComponent?.getViewElementUniqueName(name);
+    }
+    getViewElementUniqueNameOld(name = 'viewElement1') {
+        return this.likeComponent?.getViewElementUniqueNameOld(name);
+    }
+    static { this.TAG_NAME_PREFIX_REG = /^([lieu]|van)[-_]/; }
+    static from(source, parentNode, parentKey) {
+        const node = super.from(source, parentNode, parentKey);
+        if (!node.name) {
+            const tagName = node.tag.replace(ViewElement_1.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            node.name = node.getViewElementUniqueName(`${tagName}1`);
+        }
+        return node;
+    }
+    /**
+     * 设置组件权限
+     */
+    setBindRoles(bindRoles) {
+        const object = {
+            bindRoles,
+        };
+        this.update({
+            ...object,
+        });
+    }
+    getBindAttribute(name) {
+        return this.bindAttrs.find((bindAttr) => bindAttr.name === name);
+    }
+    getBindDirective(name) {
+        return this.bindDirectives.find((bindDirective) => bindDirective.name === name);
+    }
+    getBindStyle(name) {
+        return this.bindStyles.find((bindStyle) => bindStyle.name === name);
+    }
+    toHump(name) {
+        return name.replace(/-(\w)/g, (all, letter) => letter.toUpperCase());
+    }
+    toFirstUpper(name) {
+        return name.replace(/^\S/, (s) => s.toUpperCase());
+    }
+    haveScope() {
+        return Boolean(this.slotScope);
+    }
+    getGenericTypes(tag) {
+        let T;
+        let V;
+        let P;
+        let M;
+        let T1;
+        let C;
+        const genericTypes = [];
+        const config = (0, store_2.getConfig)();
+        if (config?.allNodesAPI[tag]) {
+            const { tsTypeParams = '', props } = config?.allNodesAPI[tag];
+            const hasDataSource = props?.findIndex((prop) => ['dataSource', 'data-source'].includes(prop.name)) > -1;
+            let tsTypes = [];
+            if (tsTypeParams) {
+                tsTypes = tsTypeParams?.split(',');
+            }
+            else if (hasDataSource) {
+                tsTypes = ['T'];
+            }
+            tsTypes.forEach((item) => {
+                const reg = /^(\w+)\s?/;
+                const result = reg.exec(item.trim());
+                const t = result?.[1];
+                if (t === 'T') {
+                    T = true;
+                    genericTypes.push('__item');
+                }
+                if (t === 'V') {
+                    V = true;
+                    genericTypes.push('__V');
+                }
+                if (t === 'P') {
+                    P = true;
+                    genericTypes.push('__pageable');
+                }
+                if (t === 'M') {
+                    M = true;
+                    genericTypes.push('__multiple');
+                }
+                if (t === 'C') {
+                    C = true;
+                    genericTypes.push('__converter');
+                }
+                if (t === 'T1') {
+                    T1 = true;
+                    genericTypes.push('__columnItem');
+                }
+            });
+        }
+        return {
+            T,
+            V,
+            P,
+            M,
+            T1,
+            C,
+            genericTypes,
+        };
+    }
+    *toEmbeddedTSDefinition(state = (0, nasl_translator_1.createCompilerState)()) {
+        const self = this;
+        const config = (0, store_2.getConfig)();
+        let code = '';
+        code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 1);
+        if (self.isCorrespondingBusinessComponent) {
+            code += `${self.name}: ${self.correspondingBusinessComponentNamespace}.${self.tag.replace('bs-', '')};\n`;
+        }
+        else if (self.toHump(self.tag) === 'lcapLogin' || self.staticClass === 'login-form') {
+            // 登录组件不翻译
+            code += `${self.name}: nasl.ui.Div;\n`;
+        }
+        else if (config?.allNodesAPI[self.tag]) {
+            const { T, V, P, M, T1, C, genericTypes } = this.getGenericTypes(self.tag);
+            code += `${self.name}: nasl.ui.${utils.kebab2Pascal(self.tag)}`;
+            if (genericTypes.length > 0) {
+                code += `<`;
+                code += genericTypes.map((i) => `typeof __elementsRef.${self.name}.${i}`).join(', ');
+                code += `>`;
+            }
+            code += ';\n';
+        }
+        else {
+            code += `${self.name}: nasl.ui.${utils.kebab2Pascal(self.tag)};\n`;
+        }
+        if (Array.isArray(self.children)) {
+            yield* (0, utils_1.wrapForEachToGenerator)(self.children, function* warpForEachGenerator(element) {
+                code += yield* element.toEmbeddedTSDefinition((0, nasl_translator_1.shiftState)(state, code));
+            });
+        }
+        return code;
+    }
+    toEmbeddedTSRefPath(elementsPathMap) {
+        const self = this;
+        if (asserts.isViewElement(self.parentNode)) {
+            elementsPathMap[self.name] = `${elementsPathMap[self.parentNode.name]}.${self.name}`;
+        }
+        else {
+            elementsPathMap[self.name] = `${self.name}`;
+        }
+        if (Array.isArray(self.children)) {
+            self.children.forEach((element) => {
+                element.toEmbeddedTSRefPath(elementsPathMap);
+            });
+        }
+    }
+    *toEmbeddedTSRefTree(state = (0, nasl_translator_1.createCompilerState)(), options, parentLevel) {
+        const self = this;
+        const { elementsPathMap } = options;
+        const { T, V, P, M, T1, C } = this.getGenericTypes(self.tag);
+        let code = '';
+        code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 2);
+        let levelIndex = parentLevel || 0;
+        code += `${self.name}: () => {\n`;
+        const getPropInitialValue = (name) => {
+            let v = 'new nasl.core.BooleanFalse()';
+            const attr = self.bindAttrs?.find((attr) => attr.name === name);
+            if (['static', 'string'].includes(attr?.type)) {
+                v = attr.value ? 'new nasl.core.BooleanTrue()' : 'new nasl.core.BooleanFalse()';
+            }
+            return v;
+        };
+        const getConverterDefaultValue = (name) => {
+            let v = 'new nasl.core.StringLiteral<``>()';
+            const attr = self.bindAttrs?.find((attr) => attr.name === name);
+            if (['static', 'string'].includes(attr?.type)) {
+                if ([true, 'true'].includes(attr.value)) {
+                    v = 'new nasl.core.BooleanTrue()';
+                }
+                else if ([false, 'false'].includes(attr.value)) {
+                    v = 'new nasl.core.BooleanFalse()';
+                }
+                else {
+                    v = `new nasl.core.StringLiteral<\`${attr.value}\`>()`;
+                }
+            }
+            return v;
+        };
+        const config = (0, store_2.getConfig)();
+        const hasDataSource = config?.allNodesAPI?.[self.tag]?.props?.findIndex((prop) => ['dataSource', 'data-source'].includes(prop.name)) >
+            -1;
+        let dataSourceSetted = false;
+        let staticItem = '';
+        // 有数据源属性的组件 才需要生成 item
+        if (hasDataSource && T) {
+            const key = T1 ? '__columnItem' : '__item';
+            const dataSourceAttr = self.bindAttrs?.find((attr) => attr.name === 'dataSource');
+            if (dataSourceAttr?.expression) {
+                dataSourceSetted = true;
+                if (asserts.isMemberExpression(dataSourceAttr.expression) ||
+                    asserts.isIdentifier(dataSourceAttr.expression) ||
+                    (asserts.isCallLogic(dataSourceAttr.expression) &&
+                        !dataSourceAttr.expression?.calleeNamespace?.startsWith('extensions'))) {
+                    const value = yield* dataSourceAttr.expression.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, dataSourceAttr.expression.concept === 'CallLogic'
+                        ? {
+                            tabSize: 4,
+                            inline: true,
+                            noNeedParams: true,
+                            // 业务组件需要特殊处理
+                            inElementsRefTree: true,
+                            isVariableHost: true,
+                            isDataSource: true,
+                        }
+                        : {
+                            // 业务组件需要特殊处理
+                            inElementsRefTree: true,
+                            isVariableHost: true,
+                            isDataSource: true,
+                        }));
+                    // 用别的组件的data当数据源
+                    if (dataSourceAttr.expression?.property?.name === 'data' &&
+                        dataSourceAttr.expression?.object?.namespace?.startsWith('elements.')) {
+                        const componentName = (dataSourceAttr.expression?.object).name;
+                        const componentPath = elementsPathMap[componentName]?.split('.');
+                        const component = componentPath?.reduce((prev, cur) => {
+                            return `${prev}.children.${cur}()`;
+                        }, 'elementsRefTree()');
+                        if (component) {
+                            code += `let t = ${component}.__item;\n`;
+                            code += `let ${key}: typeof t;\n`;
+                        }
+                        else {
+                            code += `let ${key}: any;\n`;
+                        }
+                    }
+                    else {
+                        // 业务组件需要特殊处理
+                        if (self.businessComponent) {
+                            code += `let __${this.businessComponent.name}: ${this.businessComponent.name};\n`;
+                        }
+                        code += `let ${key}: nasl.ui.GetItemTypeFromDataSource<typeof ${value}>;\n`;
+                    }
+                }
+                else {
+                    const returnCode = yield* dataSourceAttr.expression.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code));
+                    code += `const _load = () => { return `;
+                    code += returnCode;
+                    code += '};\n';
+                    code += `let ${key}: nasl.ui.GetItemTypeFromDataSource<ReturnType<typeof _load>>;\n`;
+                }
+            }
+            else {
+                // 根据静态子节点生成类型
+                const attrs = {
+                    'u-checkbox': 'label',
+                    'u-radio': 'label',
+                    'van-radio': 'name',
+                    'van-checkbox': 'label',
+                };
+                const child = self.children?.filter((item) => item.tag !== 'template')[0];
+                if (child) {
+                    const valueAttr = child.bindAttrs?.find((attr) => attr.name === (attrs[child.tag] || 'value'));
+                    if (valueAttr) {
+                        // 开启了绑定
+                        if (valueAttr.expression) {
+                            const attrCode = yield* valueAttr.expression.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, '', { tabSize: 0 }));
+                            staticItem = `${attrCode}`;
+                        }
+                        else {
+                            try {
+                                if (valueAttr.type === 'static') {
+                                    const value = json5.parse(String(valueAttr.value));
+                                    const map = {
+                                        string: 'new nasl.core.String("")',
+                                        number: 'new nasl.core.Long(1)',
+                                        boolean: 'new nasl.core.Boolean(false)',
+                                    };
+                                    staticItem = map[typeof value] || 'new nasl.core.String("")';
+                                }
+                                else {
+                                    staticItem = 'new nasl.core.String("")';
+                                }
+                            }
+                            catch (error) {
+                                // @ts-ignore
+                            }
+                        }
+                    }
+                    else {
+                        staticItem = 'new nasl.core.String("")';
+                    }
+                }
+                code += `let __staticItem = ${staticItem};\n`;
+                code += `let ${key}: typeof __staticItem;\n`;
+            }
+        }
+        // 值
+        let valueType;
+        if (hasDataSource && V && !T1) {
+            const valueFieldAttr = self.bindAttrs?.find((attr) => attr.name === 'valueField');
+            if (dataSourceSetted && ['static', 'string'].includes(valueFieldAttr?.type)) {
+                valueType = `nasl.util._formatEnum<typeof __item.${valueFieldAttr.value}>`;
+            }
+            else {
+                valueType = `nasl.util._formatEnum<typeof __staticItem>`;
+            }
+        }
+        // 分页
+        let pageableDefaultValue;
+        if (hasDataSource && P && !T1) {
+            pageableDefaultValue = getPropInitialValue('pageable');
+            code += `let __pageable = ${pageableDefaultValue};\n`;
+        }
+        // 多选
+        let multipleDefaultValue;
+        if (hasDataSource && M && !T1) {
+            const name = config?.allNodesAPI?.[self.tag]?.props?.find((prop) => ['M'].includes(prop.tsType))?.name;
+            multipleDefaultValue = getPropInitialValue(name || 'multiple');
+            code += `let __multiple = ${multipleDefaultValue};\n`;
+        }
+        if (hasDataSource && V && !T1) {
+            code += `// @ts-ignore
+      let __value: typeof __multiple extends nasl.core.BooleanTrue ? nasl.collection.List<${valueType}> : ${valueType};\n`;
+            code += `// @ts-ignore
+      let __V: ${valueType};\n`;
+        }
+        let converterDefaultValue;
+        if (C) {
+            converterDefaultValue = getConverterDefaultValue('converter');
+            code += `let __converter = ${converterDefaultValue};\n`;
+        }
+        if (self.tag === 'template' && self.haveScope() && asserts.isViewElement(self.parentNode)) {
+            const currentType = self.parentNode.tag === 'u-table-view-column-dynamic' ? 'CurrentDynamic' : 'Current';
+            code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 3);
+            code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}<typeof __item${currentType === 'CurrentDynamic' ? ', typeof __columnItem' : ''}>;\n`;
+            levelIndex++;
+        }
+        code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 3);
+        code += `return {\n`;
+        if (T) {
+            code += `__item,\n`;
+        }
+        if (V) {
+            code += `__value, __V,\n`;
+        }
+        if (P) {
+            code += `__pageable,\n`;
+        }
+        if (M) {
+            code += `__multiple,\n`;
+        }
+        if (T1) {
+            code += `__columnItem,\n`;
+        }
+        if (C) {
+            code += `__converter,\n`;
+        }
+        if (Array.isArray(self.children)) {
+            code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 4);
+            code += `children: {\n`;
+            yield* (0, utils_1.wrapForEachToGenerator)(self.children, function* warpForEachGenerator(element) {
+                code += yield* element.toEmbeddedTSRefTree((0, nasl_translator_1.shiftState)({ ...state, tabSize: state.tabSize + 2 }, code), { elementsPathMap }, levelIndex);
+            });
+            code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 4);
+            code += `},\n`;
+        }
+        code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 3);
+        code += `};\n`;
+        code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 2);
+        code += `},\n`;
+        return code;
+    }
+    getTypeArgmentsStr(state, currentNode) {
+        // 登录组件不翻译
+        if (this.toHump(this.tag) === 'lcapLogin' || this.staticClass === 'login-form')
+            return '<any>';
+        let code = '';
+        // formItem的单独处理
+        if (this.tag === 'u-form-item') {
+            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.Long>';
+                }
+                else {
+                    code += '<any>';
+                }
+            }
+            return code;
+        }
+        if (this.tag === 'u-table-view-column-group') {
+            code += `<${this.parentNode.__tsDataSourceTypeName}>`;
+            return code;
+        }
+        const bindAttrs = this.bindAttrs;
+        if (bindAttrs && bindAttrs.length) {
+            const attr = bindAttrs.find((item) => item.name === 'dataSource');
+            if (attr && attr.expression) {
+                if (this.tag === 'u-table-view-column-dynamic') {
+                    code += `<${this.parentNode.__tsDataSourceTypeName}, ${this.__tsDataSourceTypeName}>`;
+                }
+                else {
+                    code += `<${this.__tsDataSourceTypeName}>`;
+                }
+            }
+        }
+        return code;
+    }
+    // 应该没有再使用了
+    *getDatasourceTypeCodeStr(state, eleArr) {
+        let code = '';
+        yield* (0, utils_1.wrapForEachToGenerator)(eleArr ?? [], function* wrapForEach(element, index) {
+            const bindAttrs = element.bindAttrs;
+            if (bindAttrs && bindAttrs.length) {
+                const attr = bindAttrs.find((item) => item.name === 'dataSource');
+                if (attr && attr.expression) {
+                    const datasourceName = `datasourceName${element.name}`;
+                    element.__tsDataSourceTypeName = datasourceName;
+                    if (asserts.isMemberExpression(attr.expression) ||
+                        asserts.isIdentifier(attr.expression) ||
+                        asserts.isCallLogic(attr.expression)) {
+                        const extraParams = {
+                            tabSize: 4,
+                            inline: true,
+                            noNeedParams: true,
+                            callLogicNoIife: true,
+                        };
+                        debugger;
+                        const value = yield* attr.expression.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, attr.expression.concept === 'CallLogic' ? extraParams : {}));
+                        code += `type ${datasourceName} = `;
+                        code += `nasl.ui.GetItemTypeFromDataSource<typeof ${value}>;\n`;
+                    }
+                    else {
+                        code += `const __funcName${index} = () => { return`;
+                        code += yield* attr.expression.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code));
+                        code += '};\n';
+                        code += `type ${datasourceName} = `;
+                        code += `nasl.ui.GetItemTypeFromDataSource<ReturnType<typeof __funcName${index}>>;\n`;
+                    }
+                }
+            }
+        });
+        code += '\n';
+        code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 2);
+        return code;
+    }
+    // 获取端类型
+    get frontendType() {
+        return this.getAncestor('FrontendType');
+    }
+    // 对应业务组件
+    get isCorrespondingBusinessComponent() {
+        return this.tag.startsWith('bs-');
+    }
+    // 对应的业务组件的Namespace
+    get correspondingBusinessComponentNamespace() {
+        return `${this.frontendType?.getNamespace()}.${this.frontendType?.name}.businessComponents`;
+    }
+    // 获取对应的业务组件
+    get correspondingBusinessComponent() {
+        if (this.isCorrespondingBusinessComponent) {
+            // 端下的业务组件
+            const businessComponents = this.frontendType?.businessComponents;
+            const businessComponent = businessComponents.find((businessComponent) => {
+                return `bs-${businessComponent?.name}` === this.tag;
+            });
+            return businessComponent;
+        }
+    }
+    // 收集页面元素中的业务组件
+    collectExistingBusinessComponent() {
+        const excludedSet = new Set();
+        utils.traverse(({ node }) => {
+            const correspondingBusinessComponent = node.correspondingBusinessComponent;
+            if (correspondingBusinessComponent && !excludedSet.has(correspondingBusinessComponent)) {
+                const set = correspondingBusinessComponent.collectExistingBusinessComponent();
+                if (set.size) {
+                    set.forEach((value) => {
+                        if (!excludedSet.has(value)) {
+                            excludedSet.add(value);
+                        }
+                    });
+                }
+            }
+        }, {
+            node: this,
+        });
+        return excludedSet;
+    }
+    *toEmbeddedTS(state = (0, nasl_translator_1.createCompilerState)(), parentLevel) {
+        const self = this;
+        const { parentNode, app, tag, staticClass, name, bindRoles, bindEvents, children } = self;
+        const chineseTsName = (name) => {
+            let tsName = name;
+            // 匹配所有特殊字符都转为_
+            tsName = tsName.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '_');
+            if (/^\d/.test(tsName)) {
+                tsName = '$' + tsName;
+            }
+            return tsName;
+        };
+        // 过滤模板的登录中的一些翻译，这里只过滤h5表格中的两个列
+        if ((parentNode.concept === 'ViewElement' &&
+            parentNode.tag &&
+            this.toHump(parentNode.tag) === 'lcapLogin') ||
+            staticClass === 'login-cell') {
+            return '';
+        }
+        // pc事件翻译
+        if (self.toHump(tag) === 'lcapLogin') {
+            let code = `new nasl.ui.Div({_name: __elements.${self.name},\n`;
+            // 事件
+            if (Array.isArray(self.bindEvents)) {
+                yield* (0, utils_1.wrapForEachToGenerator)(self.bindEvents, function* warpForEachGenerator(event) {
+                    code += yield* event.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, {
+                        tabSize: (state?.tabSize || 0) + 2,
+                    }));
+                    code += '\n';
+                });
+            }
+            code += `}),\n`;
+            return code;
+        }
+        const levelIndex = parentLevel || 0;
+        if (tag === 'template') {
+            // 若是template，应当在父节点的slot数组中，因此无需输出形如slotDefault: ()=>[ 的代码，直接输出子元素即可
+            let code = '';
+            yield* (0, utils_1.wrapForEachToGenerator)(self.children, function* warpForEachGenerator(element) {
+                code += yield* element.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, {
+                    tabSize: state?.tabSize || 0,
+                }), levelIndex);
+            });
+            return code;
+        }
+        let namespace = `nasl.ui.${utils.kebab2Pascal(tag)}`;
+        if (self.isCorrespondingBusinessComponent) {
+            namespace = `${self.correspondingBusinessComponentNamespace}.${self.tag.replace('bs-', '')}`;
+        }
+        const { T, V, P, M, T1, C, genericTypes } = this.getGenericTypes(self.tag);
+        let code = `new ${namespace}`;
+        if (genericTypes.length > 0) {
+            code += `<`;
+            code += genericTypes.map((i) => `typeof __elementsRef.${self.name}.${i}`).join(', ');
+            code += `>`;
+        }
+        // 增加唯一name 后面那个name是为了查找引用的时候用的
+        code += `({_name: __elements.${self.name},\n`;
+        // 是否开启权限
+        // const hasAuth = Array.isArray(bindDirectives)
+        //     ? !!bindDirectives.filter((directive) => directive.name === 'auth').length
+        //     : false;
+        // 角色
+        if (Array.isArray(bindRoles) && bindRoles.length) {
+            code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 2);
+            code += 'roles: [\n';
+            yield* (0, utils_1.wrapForEachToGenerator)(bindRoles, function* warpForEachGenerator(role) {
+                code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 3);
+                code += `${app.getNamespace()}.roles.${chineseTsName(role)}.${chineseTsName(role)},`;
+                code += '\n';
+            });
+            code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 2);
+            code += '],\n';
+        }
+        // 事件
+        if (Array.isArray(bindEvents)) {
+            yield* (0, utils_1.wrapForEachToGenerator)(bindEvents, function* warpForEachGenerator(event) {
+                code += yield* event.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, {
+                    tabSize: (state?.tabSize || 0) + 2,
+                }));
+                code += '\n';
+            });
+        }
+        // 属性
+        const validAttrs = (self.bindAttrs || []).filter((attr) => {
+            // 特殊的一些属性不过滤
+            if (['destination', 'externalDestination', 'download', 'rules', 'url'].includes(attr.name)) {
+                return true;
+            }
+            const config = (0, store_2.getConfig)();
+            const com = config.allNodesAPI[self.tag];
+            if (com) {
+                const { props } = com;
+                const prop = props?.find((item) => item.name === attr.name);
+                if (prop) {
+                    return true;
+                }
+                return false;
+            }
+            return true;
+        });
+        yield* (0, utils_1.wrapForEachToGenerator)(validAttrs, function* warpForEachGenerator(attr) {
+            // 过滤业务组件的非表达式模式的翻译
+            const shouldFilter = self.isCorrespondingBusinessComponent && attr.type !== 'dynamic';
+            if (shouldFilter) {
+                return;
+            }
+            let attrCode = yield* attr.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { tabSize: 1 }), { carryName: true });
+            if (attrCode.trim()) {
+                attrCode = yield* attr.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { tabSize: 1 }), { carryName: true });
+                code += attrCode;
+                code += `,\n`;
+            }
+        });
+        // 指令v-if等
+        yield* (0, utils_1.wrapForEachToGenerator)(self.bindDirectives || [], function* warpForEachGenerator(directive) {
+            let directiveCode = yield* directive.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { tabSize: 1 }));
+            if (directiveCode.trim()) {
+                code += `_${directive.name}: `;
+                directiveCode = yield* directive.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { tabSize: 1 }));
+                code += directiveCode;
+                code += `,\n`;
+            }
+        });
+        // 样式绑定
+        yield* (0, utils_1.wrapForEachToGenerator)(self.bindStyles || [], function* warpForEachGenerator(bindStyle) {
+            let styleCode = yield* bindStyle.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { tabSize: 1 }));
+            if (styleCode.trim()) {
+                const humpName = self.toHump(bindStyle.name).replace(/^-+/, '');
+                code += `_${humpName}: `;
+                styleCode = yield* bindStyle.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { tabSize: 1 }));
+                code += styleCode;
+                code += `,\n`;
+            }
+        });
+        // 子元素
+        if (Array.isArray(children)) {
+            code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 1);
+            // 如果子元素中有插槽
+            if (children.find((item) => item.tag === 'template' && item.slotTarget)) {
+                code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 2);
+                const defaultArr = [];
+                // 先把插槽翻译了
+                yield* (0, utils_1.wrapForEachToGenerator)(children, function* warpForEachGenerator(element) {
+                    if (element.tag === 'template' && element.slotTarget && element.slotTarget !== 'default') {
+                        const hasScope = element.haveScope();
+                        const slotTarget = `slot${element.toFirstUpper(element.toHump(element.slotTarget))}`;
+                        if (hasScope) {
+                            code += `${slotTarget}: (current${levelIndex === 0 ? '' : levelIndex}) => [\n`;
+                        }
+                        else {
+                            code += `${slotTarget}: () => [\n`;
+                        }
+                        const levelIndexDelta = Number(hasScope);
+                        yield* (0, utils_1.wrapForEachToGenerator)(element.children, function* warpForEachGenerator(e) {
+                            code += yield* e.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, {
+                                tabSize: state?.tabSize || 0,
+                            }), levelIndex + levelIndexDelta);
+                        });
+                        code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 2);
+                        code += '\n],\n';
+                    }
+                    else {
+                        defaultArr.push(element);
+                    }
+                });
+                // 翻译其余的子元素
+                if (defaultArr.length) {
+                    code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 2);
+                    const hasScope = defaultArr.some((x) => x.haveScope());
+                    const param = hasScope ? `current${levelIndex === 0 ? '' : levelIndex}` : '';
+                    const levelIndexDelta = Number(hasScope);
+                    code += `slotDefault: (${param}) => [\n`;
+                    yield* (0, utils_1.wrapForEachToGenerator)(defaultArr, function* warpForEachGenerator(element) {
+                        code += yield* element.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, {
+                            tabSize: (state?.tabSize || 0) + 2,
+                        }), levelIndex + levelIndexDelta);
+                        code += '\n';
+                    });
+                    code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 2);
+                    code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 1);
+                    code += ']\n';
+                }
+            }
+            else if (children?.length) {
+                code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 2);
+                const hasScope = children.some((x) => x.haveScope());
+                const param = hasScope ? `current${levelIndex === 0 ? '' : levelIndex}` : '';
+                const levelIndexDelta = Number(hasScope);
+                code += `slotDefault: (${param}) => [\n`;
+                const defaultArr = self.shouldHandleChildren(self) ? children : [];
+                yield* (0, utils_1.wrapForEachToGenerator)(defaultArr, function* warpForEachGenerator(element) {
+                    code += yield* element.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, {
+                        tabSize: (state?.tabSize || 0) + 2,
+                    }), levelIndex + levelIndexDelta);
+                    code += '\n';
+                });
+                code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 2);
+                code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 1);
+                code += ']\n';
+            }
+        }
+        code += (0, nasl_translator_1.indent)(state?.tabSize || 0) + '})';
+        // 顶层元素是单独的表达式
+        if (parentNode.concept === 'View' || asserts.isBusinessComponent(parentNode)) {
+            code += ';\n';
+        }
+        else {
+            code += ',\n';
+        }
+        return code;
+    }
+    shouldHandleChildren(element) {
+        // 数据源与静态子节点不共存的组件
+        const tags = ['u-tabs', 'u-selectable-steps', 'van-swipe', 'van-steps']; // 数据源与静态子节点不共存的组件
+        // 判断当前是否配置了数据源
+        const isDataSourceConfigured = () => element.bindAttrs.some((attr) => {
+            if (['data-source', 'dataSource'].includes(attr.name)) {
+                if (attr.type === 'dynamic' && attr.expression) {
+                    return true;
+                }
+            }
+            return false;
+        });
+        return !tags.includes(element.tag) || !isDataSourceConfigured();
+    }
+    toNaturalTS(state = (0, nasl_translator_1.createCompilerState)(), parentLevel) {
+        let code = '';
+        code += `$refs.${this.name} = new ${(0, utils_2.kebab2Camel)(this.tag)}({\n`;
+        this.bindAttrs.forEach((attr) => {
+            code += attr.toNaturalTS((0, nasl_translator_1.shiftState)(state, code, {
+                tabSize: state.tabSize + 1,
+            }));
+            code += ',\n';
+        });
+        this.bindEvents.forEach((event) => {
+            code += event.toNaturalTS((0, nasl_translator_1.shiftState)(state, code, {
+                tabSize: state.tabSize + 1,
+            }));
+            code += ',\n';
+        });
+        if (this.children.find((item) => item.tag === 'template' && item.slotTarget)) {
+            const defaultArr = [];
+            // 先把插槽翻译了
+            this.children.forEach((element) => {
+                if (element.tag === 'template') {
+                    if (element.children.length) {
+                        code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}slot${utils.firstUpperCase((0, utils_2.kebab2Camel)(element.slotTarget || ''))}: (${element.slotScope || ''}) => [\n`;
+                        element.children.forEach((element) => {
+                            code += element.toNaturalTS((0, nasl_translator_1.shiftState)(state, code, {
+                                tabSize: state.tabSize + 2,
+                            }));
+                            code += ',\n';
+                        });
+                        code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}],\n`;
+                    }
+                }
+                else {
+                    defaultArr.push(element);
+                }
+            });
+            // 翻译其余的子集
+            if (defaultArr.length) {
+                // throw new Error('多个插槽必须都在 template 内');
+                code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}slotDefault: () => [\n`;
+                defaultArr.forEach((element) => {
+                    code += element.toNaturalTS((0, nasl_translator_1.shiftState)(state, code, {
+                        tabSize: state.tabSize + 2,
+                    }));
+                    code += ',\n';
+                });
+                code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}],\n`;
+            }
+        }
+        else {
+            if (this.children.length) {
+                code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}slotDefault: () => [\n`;
+                this.children.forEach((element) => {
+                    code += element.toNaturalTS((0, nasl_translator_1.shiftState)(state, code, {
+                        tabSize: state.tabSize + 2,
+                    }));
+                    code += ',\n';
+                });
+                code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}],\n`;
+            }
+        }
+        code += `${(0, nasl_translator_1.indent)(state.tabSize)}})`;
+        return code;
+    }
+    toTextualNASL(state = (0, nasl_translator_1.createCompilerState)(), parentLevel) {
+        let code = '';
+        code += (0, nasl_translator_1.createDecoratorCode)(state, this, ['name']);
+        code += `${(0, utils_2.kebab2Camel)(this.tag)} {\n`;
+        this.bindAttrs.forEach((attr) => {
+            code += attr.toTextualNASL((0, nasl_translator_1.shiftState)(state, code, {
+                tabSize: state.tabSize + 1,
+            }));
+            code += ',\n';
+        });
+        this.bindEvents.forEach((event) => {
+            code += event.toTextualNASL((0, nasl_translator_1.shiftState)(state, code, {
+                tabSize: state.tabSize + 1,
+            }));
+            code += ',\n';
+        });
+        if (this.children.find((item) => item.tag === 'template' && item.slotTarget)) {
+            const defaultArr = [];
+            // 先把插槽翻译了
+            this.children.forEach((element) => {
+                if (element.tag === 'template' && element.children.length) {
+                    code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}slot${utils.firstUpperCase((0, utils_2.kebab2Camel)(element.slotTarget || ''))} = { (${element.slotScope || ''}) => [\n`;
+                    // code += element.toTextualNASL(
+                    //   shiftState(state, code, {
+                    //     tabSize: state.tabSize + 2,
+                    //   }),
+                    // );
+                    element.children.forEach((element) => {
+                        code += element.toTextualNASL((0, nasl_translator_1.shiftState)(state, code, {
+                            tabSize: state.tabSize + 2,
+                        }));
+                        code += ',\n';
+                    });
+                    code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}] },\n`;
+                }
+                else {
+                    defaultArr.push(element);
+                }
+            });
+            // 翻译其余的子集
+            if (defaultArr.length) {
+                // throw new Error('多个插槽必须都在 template 内');
+                defaultArr.forEach((element) => {
+                    code += element.toTextualNASL((0, nasl_translator_1.shiftState)(state, code, {
+                        tabSize: state.tabSize,
+                    }));
+                    code += ',\n';
+                });
+            }
+        }
+        else {
+            if (this.children.length) {
+                code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}slotDefault = { () => [\n`;
+                this.children.forEach((element) => {
+                    code += element.toTextualNASL((0, nasl_translator_1.shiftState)(state, code, {
+                        tabSize: state.tabSize + 2,
+                    }));
+                    code += ',\n';
+                });
+                code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}] },\n`;
+            }
+        }
+        code += `${(0, nasl_translator_1.indent)(state.tabSize)}}`;
+        return code;
+    }
+    toNaturalTSDefinition(state) {
+        let code = '';
+        if (['u-button', 'u-form', 'u-modal', 'u-table-view', 'u-select', 'u-input', 'u-number-input'].includes(this.tag)) {
+            code += (0, nasl_translator_1.indent)(state.tabSize + 1);
+            // 登录组件不翻译
+            // if (this.toHump(this.tag) === 'lcapLogin' || this.staticClass === 'login-form') {
+            //     code += `${this.name}: nasl.ui.div;\n`;
+            // } else {
+            code += `${this.name}: nasl.ui.${(0, utils_2.kebab2Camel)(this.tag.replace(/^\w-/, ''))},\n`;
+            // }
+        }
+        if (Array.isArray(this.children)) {
+            this.children.forEach((element) => {
+                code += element.toNaturalTSDefinition((0, nasl_translator_1.shiftState)(state, code));
+            });
+        }
+        return code;
+    }
+    _duplicate() {
+        const element = ViewElement_1.from(this.toTemplateJSON());
+        const nameMap = element.deepRenameElements(this);
+        utils.traverse((current) => {
+            const node = current.node;
+            if (node.concept === 'CallLogic') {
+                node.uuid = (0, utils_3.createUUID)();
+                if (/elements.(.+).logics/.test(node.calleeNamespace)) {
+                    const oldName = node.calleeNamespace.split('.')[1];
+                    if (nameMap.has(oldName)) {
+                        const newName = nameMap.get(oldName);
+                        node.calleeNamespace = `elements.${newName}.logics`;
+                    }
+                }
+            }
+            // 如果创建副本，内部的国际化标识都要去掉
+            if (node.i18nKey) {
+                delete node.i18nKey;
+            }
+        }, { node: element }, { mode: 'anyObject', excludedKeySet: element.JSON_EXCLUDED_KEYS });
+        this.likeComponent?.existingViewElement.clear();
+        return element;
+    }
+    setTag(tag) {
+        const object = {
+            tag,
+        };
+        this.update({
+            ...object,
+        });
+    }
+    // 递归遍历组件
+    traverseChildren(cb) {
+        utils.traverse((current) => {
+            cb(current.node);
+        }, { node: this });
+    }
+    // 递归生成组件名
+    deepRenameElements(node) {
+        const map = new Map();
+        this.traverseChildren((ele) => {
+            const oldName = ele.name;
+            const tagName = ele.tag.replace(ViewElement_1.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            ele.name = node.getViewElementUniqueName(`${tagName}1`);
+            map.set(oldName, ele.name);
+        });
+        return map;
+    }
+    /**
+     * 解析属性中的表达式
+     * @param value
+     * @param $def 目前 $def 只用来查找 $def.variables 和 $def.structures
+     * @param dataSchema
+     */
+    static _parseExpression(value) {
+        try {
+            const ast = (0, store_1.getBabelParser)().parseExpression(value);
+            const node = transAstNodeToNaslNode(ast);
+            return LogicItem__1.LogicItem.from(node, null, null);
+        }
+        catch (e) {
+            return null;
+        }
+    }
+    static _parseValidationRule(value) {
+        let calleeName = value;
+        let args = [];
+        try {
+            const ast = (0, store_1.getBabelParser)().parseExpression(value);
+            const validationNamespace = (0, concepts_1.getStdlibNamespace)().findChild('validation');
+            if (ast.type === 'CallExpression') {
+                calleeName = (ast.callee?.property?.name ?? ast.callee?.property?.value ?? ast.callee?.name).replace(/\(.*/, '');
+                const func = validationNamespace.functions.find((item) => item.name === calleeName);
+                args = ast.arguments.map((argument, index) => ({
+                    concept: 'Argument',
+                    name: '',
+                    kind: 'Statement',
+                    keyword: func?.params?.[index]?.name ?? '',
+                    expression: transAstNodeToNaslNode(Object.assign({}, argument)),
+                }));
+            }
+        }
+        catch (error) { }
+        return {
+            concept: 'ValidationRule',
+            name: '',
+            label: '验证规则',
+            kind: 'Expression',
+            calleeNamespace: 'nasl.validation',
+            arguments: args,
+            calleeName,
+        };
+    }
+    /**
+     * 从 Vue 的 ASTNode 转换成 ASL 元素
+     * @param astNode Vue 的 ASTNode
+     */
+    static _fromASTNode(astNode, context) {
+        const 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.slotTarget)) {
+                    astNode.children.unshift(astNode.scopedSlots[key]);
+                }
+            });
+            delete astNode.scopedSlots;
+        }
+        // 提示不支持的属性
+        [
+            'component',
+            'inlineTemplate',
+            'pre',
+            'ns',
+            'transition',
+            'transitionOnAppear',
+            'transitionMode',
+            'slotName',
+            'classBinding',
+            'styleBinding',
+        ].forEach((key) => {
+            if (astNode[key])
+                console.warn(`[warn] ViewElement NASL unsupports '${key}' field in node `, astNode);
+        });
+        const BindAttribute = (0, decorators_1.getConceptConstructor)('BindAttribute');
+        const BindDirective = (0, decorators_1.getConceptConstructor)('BindDirective');
+        const BindEvent = (0, decorators_1.getConceptConstructor)('BindEvent');
+        let element;
+        if (astNode.type === 1) {
+            if (astNode.tag === 'router-view') {
+                if (view.frontend.type === 'h5') {
+                    astNode.tag = 'van-router-view';
+                }
+                else {
+                    astNode.tag = 'u-router-view';
+                }
+            }
+            const tagName = astNode.tag.replace(ViewElement_1.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            let newContext = {};
+            if (context) {
+                newContext = {
+                    ...context,
+                };
+            }
+            element = new ViewElement_1({
+                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, newContext)),
+            });
+            const attrName2Camel = (name) => {
+                if (name.startsWith('vusion-'))
+                    return name;
+                return name.replace(/(?:-)([a-zA-Z0-9])/g, (m, $1) => $1.toUpperCase());
+            };
+            astNode?.attrs?.forEach((oldAttr) => {
+                let attr;
+                // 获取原始属性
+                const orginAttrCode = (context?.code || '').substr(oldAttr.start, oldAttr.end - oldAttr.start);
+                if (oldAttr.value === '""' && orginAttrCode.trim() === oldAttr.name) {
+                    attr = new BindAttribute({
+                        type: 'static',
+                        name: attrName2Camel(oldAttr.name),
+                        value: 'true',
+                    });
+                }
+                else {
+                    try {
+                        const tmp = json5.parse(oldAttr.value);
+                        const source = {
+                            type: typeof tmp === 'string' ? 'string' : 'static',
+                            name: attrName2Camel(oldAttr.name),
+                            value: typeof tmp === 'string' ? tmp : oldAttr.value,
+                        };
+                        if (oldAttr.name === 'rules') {
+                            if (Array.isArray(tmp)) {
+                                source.rules = tmp.map((rule) => ({
+                                    concept: 'ValidationRule',
+                                    name: '',
+                                    label: '验证规则',
+                                    calleeNamespace: 'nasl.validation',
+                                    arguments: [],
+                                    calleeName: rule?.validate,
+                                }));
+                            }
+                            else {
+                                source.rules = tmp?.split('|').map((ruleStr) => this._parseValidationRule(ruleStr.trim()));
+                            }
+                        }
+                        else if (['page-number', 'page-size', 'pageNumber', 'pageSize'].includes(oldAttr.name)) {
+                            source.value = Number(source.value);
+                        }
+                        attr = new BindAttribute(source);
+                    }
+                    catch (e) {
+                        const expression = this._parseExpression(oldAttr.value);
+                        attr = new BindAttribute({
+                            type: 'dynamic',
+                            name: attrName2Camel(oldAttr.name),
+                            value: expression ? '' : oldAttr.value,
+                            expression,
+                        });
+                        if (astNode.attrsMap[`:${attr.name}.sync`]) {
+                            attr.sync = true;
+                        }
+                    }
+                }
+                element.addBindAttribute(attr);
+            });
+            // compiler 处理:value.sync 时会加上update:value事件，需要过滤
+            astNode.events &&
+                Object.keys(astNode.events)
+                    .filter((name) => !name.startsWith('update:'))
+                    .forEach((name) => {
+                    const oldEvent = astNode.events[name];
+                    const str = oldEvent.value;
+                    const calleeName = str.split('(')[0];
+                    const matchArr = str.match(/\(([^)]*)\)/) || [];
+                    let argsStr = '';
+                    if (matchArr?.length >= 2) {
+                        argsStr = matchArr[1];
+                    }
+                    let args = [];
+                    const argStrs = argsStr.split(',');
+                    args = argStrs
+                        .filter((argStr) => !!argStr)
+                        .map((argStr) => {
+                        const keyword = argStr.trim().split('.');
+                        return {
+                            concept: 'Argument',
+                            expression: genArgumentMemberExpression(keyword),
+                        };
+                    });
+                    const viewLogics = context?.definition?.viewLogics || [];
+                    const currentLogic = viewLogics.find((item) => item.name === calleeName);
+                    if (currentLogic) {
+                        element.addBindEvent(new BindEvent({
+                            name,
+                            calleeNamespace: '',
+                            calleeName: '',
+                            arguments: args,
+                            logics: [currentLogic],
+                        }));
+                    }
+                });
+            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 = this._parseExpression(directive.value);
+                            element.addBindAttribute(new BindAttribute({
+                                type: 'dynamic',
+                                name: 'value',
+                                value: expression ? '' : directive.value,
+                                expression,
+                                sync: true,
+                            }));
+                        }
+                    }
+                    else {
+                        const expression = this._parseExpression(directive.value);
+                        element.addBindDirective(new BindDirective({
+                            type: expression ? 'string' : 'dynamic',
+                            name: directive.name,
+                            rawName: directive.rawName,
+                            value: expression ? '' : directive.value,
+                            expression,
+                            arg: directive.arg,
+                            // modifiers: directive.modifiers,
+                        }));
+                    }
+                });
+            if (astNode.if) {
+                element.addBindDirective(new BindDirective({
+                    type: 'dynamic',
+                    name: 'if',
+                    rawName: 'v-if',
+                    value: '',
+                    expression: this._parseExpression(astNode.if),
+                }));
+            }
+        }
+        else if (astNode.type === 2) {
+            const config = (0, store_2.getConfig)();
+            const tagName = config.scope === 'h5' ? 'van-text' : 'u-text';
+            const baseName = tagName.replace(ViewElement_1.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            element = new ViewElement_1({
+                tag: tagName,
+                name: view.getViewElementUniqueName(`${baseName}1`),
+            });
+            const value = astNode.text?.match(/{{(.*?)}}/)[1].trim();
+            const expression = this._parseExpression(value);
+            element.addBindAttribute(new BindAttribute({
+                type: 'dynamic',
+                name: 'text',
+                value: expression ? '' : value,
+                expression,
+            }));
+        }
+        else if (astNode.type === 3) {
+            const config = (0, store_2.getConfig)();
+            const tagName = config.scope === 'h5' ? 'van-text' : 'u-text';
+            const baseName = tagName.replace(ViewElement_1.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            element = new ViewElement_1({
+                tag: tagName,
+                name: view.getViewElementUniqueName(`${baseName}1`),
+            });
+            element.addBindAttribute(new BindAttribute({
+                name: 'text',
+                type: 'string',
+                value: astNode.text?.trim(),
+            }));
+        }
+        return element;
+    }
+    /**
+     * 解析 Vue 模板
+     * 该方法不会绑定 view 和 parent，如果是添加元素优先使用 fromHTML
+     * @param html Vue 的模板
+     * @TODO 处理多个元素的问题
+     */
+    static parse(code, context) {
+        code = code || '<div></div>';
+        const compilerOptions = {
+            preserveWhitespace: false,
+            outputSourceRange: true,
+        };
+        let ast = (0, store_1.getVueCompiler)().compile(code, compilerOptions).ast;
+        if (ast.tag === 'template' && !ast.slotTarget)
+            ast = ast.children[0];
+        return this._fromASTNode(ast, {
+            ...context,
+            code,
+        });
+    }
+    /**
+     * 从模板生成规范的 ViewElement 对象
+     */
+    static fromHTML(html, context) {
+        return this.parse(html, context);
+    }
+    /**
+     * 转换成设计器中使用的 Vue 文件
+     * @param options
+     */
+    toDesignerVue(options) {
+        return this.toVue({
+            isRoot: options?.isRoot,
+            asCompontent: options?.asCompontent,
+            finalCode: false,
+            nodePathAttr: true,
+            attrFormat: (attr, element, defaultResult) => {
+                if (attr.concept === 'BindAttribute' &&
+                    !['href', 'destination', 'externalDestination', 'download'].includes(attr.name)) {
+                    const config = (0, store_2.getConfig)();
+                    const api = config?.allNodesAPI?.[element.tag];
+                    const apiOfAttr = api && api.props && api.props.find((_attr) => _attr.name === attr.name);
+                    if (['u-form-item', 'u-validator', 'van-field'].includes(element.tag) && attr.name === 'rules') {
+                        return `${attr.name}=""`;
+                    }
+                    if (apiOfAttr && apiOfAttr['designerValue'] !== undefined) {
+                        let designerValue = apiOfAttr['designerValue'];
+                        //对流程模板拖拽进行特判
+                        element.bindAttrs.forEach((property) => {
+                            if (property.name === 'repeat' && property.value === '1')
+                                designerValue = '[{}, {}]';
+                        });
+                        if (typeof designerValue === 'string') {
+                            designerValue = designerValue.replace(/"/g, "'");
+                        }
+                        try {
+                            if (Array.isArray(designerValue)) {
+                                return `:${attr.name}="${JSON.stringify(designerValue)}"`;
+                            }
+                            json5.parse(designerValue);
+                            return `:${attr.name}="${designerValue}"`;
+                        }
+                        catch (e) {
+                            return `${attr.name}="${designerValue}"`;
+                        }
+                    }
+                    if (attr.name === 'text' &&
+                        asserts.isMemberExpression(attr?.expression) &&
+                        attr?.expression?.object?.namespace?.startsWith('elements.') &&
+                        attr?.expression?.object?.namespace?.endsWith('.property')) {
+                        return `${attr.name}="{{ ${attr.expression.toUI()} }}"`;
+                    }
+                    if (attr.type === 'dynamic' &&
+                        !(element.tag === 'u-cascade-select' && attr.name === 'categories'))
+                        return defaultResult.replace(/:?([\w-]+)(?:.*?)="([\s\S]*)"/, (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 && !apiOfAttr.type.includes('string'))
+                                    return '';
+                                if (apiOfAttr && apiOfAttr.tsType && !apiOfAttr.tsType.includes('nasl.core.String'))
+                                    return '';
+                            }
+                            value = value
+                                .replace(/"/g, "'")
+                                .replace(/\$utils\['(.+?)'\]/g, '$1')
+                                .replace(/\$refs./g, 'elements.')
+                                .replace(/\$global.userInfo/g, 'nasl.auth.userInfo')
+                                .replace(/\$global./g, 'nasl.')
+                                .replace(/\bscope\.item\.\b/g, '')
+                                .replace(/\bcurrent\.item\.\b/g, '');
+                            if (isLockField(element)) {
+                                return element.tag === 'u-text' ? `${name}="--"` : `${name}=""`;
+                            }
+                            return `${name}="{{ ${value} }}"`;
+                        });
+                    else
+                        return defaultResult;
+                }
+                return false;
+            },
+            bindStylesFormat: (bindStyles, element) => false,
+            getExtraParts: (el) => {
+                const parts = [];
+                const config = (0, store_2.getConfig)();
+                const api = config?.allNodesAPI?.[el?.tag];
+                const emptySlot = api && api.slots && api.slots.find((slot) => slot.name === 'default' && slot['emptyBackground']);
+                const hasSupport = api && api.slots && api.slots.some((slot) => slot.support);
+                if (emptySlot || hasSupport) {
+                    // 有些限制的组件如侧边栏分组有title插槽但要限制子元素放入
+                    const validChildren = el.children.filter((elem) => !(elem.tag === 'template' && elem.slotTarget !== 'default'));
+                    let childEmpty = !validChildren.length;
+                    const defaultSlot = el.children.find((elem) => elem.tag === 'template' && elem.slotTarget === 'default');
+                    if (defaultSlot) {
+                        childEmpty = !defaultSlot.children.length;
+                    }
+                    if (childEmpty) {
+                        let addEmpty = true;
+                        if (['u-grid-view', 'u-list-view', 'van-list-view', 'van-grid-view', 'u-carousel'].includes(el.tag)) {
+                            const hasDataSource = el.bindAttrs.find((attr) => attr.name === 'dataSource');
+                            addEmpty = !hasDataSource;
+                        }
+                        if (el.tag === 'u-crumb') {
+                            const attrList = el.bindAttrs;
+                            const hasAuto = attrList.some((attr) => attr.name === 'auto' && String(attr.value) === 'true');
+                            if (hasAuto)
+                                addEmpty = false;
+                        }
+                        if ([
+                            'u-select',
+                            'u-dropdown',
+                            'u-panel',
+                            'u-toc',
+                            'u-toc-item',
+                            'u-tree-view-new',
+                            'u-tree-view-node-new',
+                            'u-tree-select',
+                            'u-tree-select-new',
+                            'u-anchor',
+                            'u-drawer',
+                            'u-timeline',
+                            'u-tabs',
+                        ].includes(el.tag)) {
+                            addEmpty = false;
+                        }
+                        const background = (emptySlot && emptySlot['emptyBackground']) || (hasSupport ? 'add-sub' : '');
+                        addEmpty && parts.push(`vusion-empty-background="${background}"`);
+                    }
+                }
+                if (['u-router-view', 'van-router-view'].includes(el.tag)) {
+                    const excludes = ['background-color:', 'background:', 'background-image:'];
+                    if (excludes.some((key) => el.staticStyle && el.staticStyle.includes(key))) {
+                        parts.push(':designer="false"');
+                    }
+                }
+                return parts;
+            },
+            isDev: true,
+        });
+    }
+    isLikeComponent(node) {
+        return ['View', 'BusinessComponent'].includes(node?.concept);
+    }
+    // 获取currentList
+    getCurrentList() {
+        const argsList = [];
+        let parent = this.parentNode;
+        let index = 0;
+        while (parent && !this.isLikeComponent(parent)) {
+            if (parent.slotScope) {
+                argsList.push(index === 0 ? 'current' : 'current' + index);
+                index++;
+            }
+            parent = parent.parentNode;
+        }
+        return argsList;
+    }
+    get refName() {
+        let refName = this.name;
+        const list = this.getCurrentList();
+        if (Array.isArray(list) && list.length) {
+            list.forEach((item) => {
+                refName += `_\${(${item} || {}).__nodeKey || (${item} || {}).index}`;
+            });
+        }
+        return refName;
+    }
+    get keyName() {
+        // 是否配置了v-if
+        const isDefineIf = this.bindDirectives.some((directive) => directive.name === 'if' && directive.expression);
+        if (isDefineIf) {
+            let key = this.name;
+            const list = this.getCurrentList();
+            // v-for中需要加上nodeKey
+            if (Array.isArray(list) && list.length) {
+                list.forEach((item) => {
+                    key += `_\${(${item} || {}).__nodeKey || (${item} || {}).index}`;
+                });
+            }
+            return key;
+        }
+        return null;
+    }
+    get businessComponent() {
+        return this.getAncestor('BusinessComponent');
+    }
+    /**
+     * 转换成 Vue 的模板格式
+     */
+    toVue(options) {
+        // lockField 不翻译modal
+        if (options?.isDev && this?.tag === 'u-modal' && isLockField(this)) {
+            return ``;
+        }
+        const { finalCode, asCompontent } = options || {};
+        const parts = [];
+        if (finalCode === false) {
+            const isRoot = options.isRoot;
+            if (isRoot && !options?.asCompontent) {
+                parts.push('type="root"');
+                if (this.frontendType?.kind === 'h5') {
+                    parts.push('class="l-root-h5"');
+                }
+                else {
+                    parts.push('style="height:100%; --custom-start: auto; min-height: 200px;"');
+                }
+            }
+        }
+        if (options) {
+            options.isRoot = false;
+        }
+        let currentList = [];
+        if (Array.isArray(options?.currentList)) {
+            currentList = [...options?.currentList];
+        }
+        if (this.slotScope) {
+            currentList.unshift(this.slotScope);
+        }
+        const newOptions = Object.assign({
+            indentStyle: 'space',
+            tabSize: 4,
+            indentLevel: 0,
+            aslIdAttr: false,
+            nodePathAttr: false,
+            getExtraParts: () => [],
+            attrFormat: (attr, element, defaultResult) => defaultResult,
+            bindStylesFormat: (bindStyles, element) => {
+                if (bindStyles.length === 0)
+                    return false;
+                return `:style="{${bindStyles
+                    .map((item) => item.toVue())
+                    .filter((item) => item !== undefined)
+                    .join(', ')}}"`;
+            },
+        }, options, {
+            currentList,
+        });
+        const tabString = ' '.repeat(newOptions.tabSize * newOptions.indentLevel);
+        const insideTabString = ' '.repeat(newOptions.tabSize * (newOptions.indentLevel + 1));
+        let shouldIndent = true;
+        let content = !this.children
+            ? ''
+            : this.children
+                .map((element) => {
+                const childOptions = Object.assign({}, newOptions);
+                childOptions.indentLevel++;
+                return (shouldIndent ? '\n' + insideTabString : '') + element?.toVue(childOptions);
+            })
+                .join('');
+        if (newOptions.aslIdAttr) {
+            if (newOptions.aslIdAttr === true) {
+                newOptions.aslIdAttr = 'asl-id';
+            }
+            parts.push(`${newOptions.aslIdAttr}="${this.id}"`);
+        }
+        if (newOptions.nodePathAttr) {
+            // 注入 asl 的 node-path
+            parts.push(`vusion-node-path="${this.nodePath}"`);
+        }
+        // 模板里解析时候，可能会有多级嵌套的 current，所以当前有多少的长度，当前就是多大的下标
+        this.slotTarget &&
+            parts.push(`#${this.slotTarget}` +
+                (this.slotScope
+                    ? `="${currentList.length > 1 ? this.slotScope + (currentList.length - 1) : this.slotScope}"`
+                    : ''));
+        this.refName && parts.push(`:ref="\`${this.refName}\`"`);
+        this.keyName && parts.push(`:key="\`${this.keyName}\`"`);
+        this.staticClass && parts.push(`class="${this.staticClass}"`);
+        let dataRefList = [];
+        const vIfs = [];
+        []
+            .concat(this.bindAttrs, this.bindDirectives, this.bindEvents)
+            .forEach((attr) => {
+            let result = newOptions.attrFormat(attr, this, attr?.toVue(newOptions));
+            // 属性翻译为指令 ：仅封闭态流程表单内使用
+            if (options?.filterAttr &&
+                options?.filterAttr?.length > 0 &&
+                attr.concept === 'BindAttribute' &&
+                attr.name === 'processHidden') {
+                options?.filterAttr.map((filterAttrName) => {
+                    if (attr.name === filterAttrName) {
+                        result = null;
+                    }
+                });
+            }
+            if ((options?.isExport || options?.isRelease) &&
+                attr?.concept === 'BindAttribute' &&
+                attr?.name === 'src' &&
+                /^\/assets\/(.*?)$/.test(String(attr?.value ?? '')) &&
+                // && attr.value.includes('/assets/')
+                this.app?.sysPrefixPath?.length > 0) {
+                result = result?.replace('/assets/', `${this.app?.sysPrefixPath}/assets/`);
+            }
+            // v-auth v-if 都翻译成 v-if
+            if (asserts.isBindDirective(attr) && ['if', 'auth'].includes(attr.name) && result !== false) {
+                const expr = result.replace(/v-(if|auth)="(.*)"/, (match, p1, p2) => p2);
+                if (expr)
+                    vIfs.push(attr.name === 'if' ? expr : `$auth.has(${expr})`);
+                return;
+            }
+            result && parts.push(result);
+        });
+        const genDirectiveByAnno = (viewElement) => {
+            if (viewElement?.applyAnnotations?.length > 0) {
+                // todo: 根据注解生成自定义指令 v-annoName="context"
+                // 血缘算法要生成一个所有的 Entity-ViewElement 的映射map
+                // context 从 血缘算法映射获取 getRelataionByElement()
+                return viewElement.applyAnnotations.map((aa) => {
+                    const getExpressionValue = (expression) => {
+                        if (expression?.concept === 'BooleanLiteral') {
+                            return BooleanLiteral__1.BooleanLiteral.from(expression)?.toBoolean();
+                        }
+                        if (expression?.concept === 'NewList') {
+                            return eval(expression.toUI().replace('新建：', ''));
+                        }
+                        return expression?.value;
+                    };
+                    let argsList = aa.arguments.map((arg) => getExpressionValue(arg.expression));
+                    let annoArgs = {
+                        argsList,
+                        dataRefList,
+                    };
+                    // 所有参数序列化之后当字符串传进指令参数 （目前不支持<div v-demo="{ color: 'white', text: 'hello!' }"></div>
+                    let expression = StringLiteral__1.StringLiteral.from({
+                        concept: 'StringLiteral',
+                        kind: 'Expression',
+                        name: '',
+                        value: JSON.stringify(annoArgs),
+                    });
+                    const BindDirective = (0, decorators_1.getConceptConstructor)('BindDirective');
+                    let annoDirective = BindDirective.from({
+                        name: aa.annotationName,
+                        // arg:'arg',
+                        expression,
+                    });
+                    return annoDirective;
+                });
+            }
+        };
+        let isH5ListViewLayout = this?.tag === 'van-cell' && this.getAncestorByTag('ViewElement', 'van-list-view');
+        let isListViewLayout = this?.tag === 'u-linear-layout' && this.getAncestorByTag('ViewElement', 'u-list-view');
+        let isGridViewLayout = this?.tag === 'u-linear-layout' && this.getAncestorByTag('ViewElement', 'u-grid-view');
+        const getLogicDataRef = (viewElement) => {
+            //  自上向下查找,  指令需要翻译到绑定值元素的上级父元素
+            // 这个元素需要满足 1 向下能找到 绑定了值的表单子元素
+            // 2 向上能找到 固定的几种表单元素 且带有dataSource 并找到对应的calllogic name
+            let targetTag = ['u-table-view-column']; //'u-form-item' 逻辑无法感知到表单绑定值的变更
+            let logicName;
+            const addDataRefDriective = (ve) => {
+                const addDataRefDriectiveInner = (attr, type) => {
+                    let { typeKind, typeName, typeNamespace } = type || {};
+                    if (['anonymousStructure', 'reference'].includes(typeKind)) {
+                        let parent = this.getAncestorByTag('ViewElement', 'u-table-view') ||
+                            this.getAncestorByTag('ViewElement', 'u-list-view') ||
+                            this.getAncestorByTag('ViewElement', 'u-grid-view') ||
+                            this.getAncestorByTag('ViewElement', 'van-grid-view') ||
+                            this.getAncestorByTag('ViewElement', 'van-list-view');
+                        let canAdd = parent?.tag;
+                        if (isGridViewLayout || isListViewLayout) {
+                            let nestLinearLayout = this.children.find((c) => c.tag === 'u-linear-layout');
+                            canAdd = canAdd && !nestLinearLayout;
+                        }
+                        if (canAdd) {
+                            let dataSourceAttr = parent?.bindAttrs?.find((it) => it?.name === 'dataSource');
+                            if (dataSourceAttr?.expression?.concept === 'CallLogic') {
+                                if (dataSourceAttr?.expression?.calleeNamespace === 'app.logics') {
+                                    logicName = dataSourceAttr?.expression?.calleeName;
+                                    let ref = {
+                                        typeNamespace: 'app.logics',
+                                        typeName: logicName,
+                                        propName: attr?.expression.toUI()?.replace('current.item.', ''),
+                                    };
+                                    dataRefList.push(ref);
+                                    // 要考虑 多个元素 每个元素有多个注解的情况
+                                    let result = genDirectiveByAnno(viewElement)?.map((d) => d?.toVue());
+                                    result && result?.length > 0 && parts.push(...result);
+                                }
+                            }
+                        }
+                    }
+                };
+                // 特殊的表格列 实体属性boolean 会转为 带if(实体属性) {展示 '是' text}
+                ve?.bindDirectives?.find((direct) => {
+                    let type = direct?.expression?.object?.__TypeAnnotation;
+                    type && addDataRefDriectiveInner(direct, type);
+                });
+                ve?.bindAttrs?.find((attr) => {
+                    let type = attr?.expression?.object?.__TypeAnnotation;
+                    type && addDataRefDriectiveInner(attr, type);
+                });
+            };
+            // 特殊的 'van-text' 'van-grid-view' 默认没有线性布局包裹 文本
+            if (viewElement?.tag === 'van-text') {
+                addDataRefDriective(viewElement);
+            }
+            if (targetTag.includes(viewElement?.tag) || isH5ListViewLayout || isGridViewLayout || isListViewLayout) {
+                this.traverseChildren((ve) => {
+                    addDataRefDriective(ve);
+                });
+            }
+        };
+        // 已知问题: 逻辑的表格可以推导 表单无法推导(如果是实体拖过来的 还是指向实体)
+        // 已知问题: 目前采用隐藏父元素的方式; 后续有任何 tag 或者结构更改都不生效
+        getLogicDataRef(this);
+        const getEntityDataRef = (viewElement) => {
+            // 这个类型都是 默认找到子元素的数据引用  然后加到自己的指令上
+            let targetTag = ['u-table-view-column', 'u-form-item'];
+            const addDataRefDriective = (ve) => {
+                const getEntityDataRefInner = (attr, type) => {
+                    let canAdd = type;
+                    if (isGridViewLayout || isListViewLayout) {
+                        let nestLinearLayout = this.children.find((c) => c.tag === 'u-linear-layout');
+                        canAdd = canAdd && !nestLinearLayout;
+                    }
+                    if (canAdd) {
+                        let { typeKind, typeName, typeNamespace } = type || {};
+                        if (typeKind === 'reference' && typeNamespace) {
+                            let entityPropName = attr?.expression?.property?.name;
+                            let ref = {
+                                typeNamespace,
+                                typeName,
+                                propName: entityPropName,
+                            };
+                            dataRefList.push(ref);
+                            let result = genDirectiveByAnno(viewElement)?.map((d) => d?.toVue());
+                            result && result?.length > 0 && parts.push(...result);
+                        }
+                        // typeName "Entity1"
+                        // typeNamespace "app.dataSources.defaultDS.entities"
+                    }
+                };
+                ve?.bindDirectives?.find((direct) => {
+                    let type = direct?.expression?.object?.__TypeAnnotation;
+                    type && getEntityDataRefInner(direct, type);
+                });
+                ve?.bindAttrs?.find((attr) => {
+                    let type = attr?.expression?.object?.__TypeAnnotation;
+                    type && getEntityDataRefInner(attr, type);
+                });
+            };
+            // 特殊的 'van-text' 'van-grid-view' 默认没有线性布局包裹 文本
+            if (viewElement?.tag === 'van-text') {
+                addDataRefDriective(viewElement);
+            }
+            if (targetTag.includes(viewElement?.tag) || isH5ListViewLayout || isGridViewLayout || isListViewLayout) {
+                this.traverseChildren((ve) => addDataRefDriective(ve));
+            }
+            // 数据网格: 指令单元是线性布局 (数据列表结构也一样)
+            // 1 向下能找到 一个绑定了数据源的元素
+            // 2 向上是线性布局 卡片 template gridView
+        };
+        getEntityDataRef(this);
+        if (vIfs.length === 2)
+            parts.push(`v-if="(${vIfs[0]}) && (${vIfs[1]})"`);
+        else if (vIfs.length === 1)
+            parts.push(`v-if="${vIfs[0]}"`);
+        const bindStyles = newOptions.bindStylesFormat(this.bindStyles, this);
+        if (bindStyles)
+            parts.push(bindStyles);
+        newOptions.getExtraParts(this).forEach((part) => parts.push(part));
+        if (['u-modal', 'u-drawer'].includes(this.tag)) {
+            this.children.forEach((citem) => {
+                if (citem.tag === 'template' && !citem.children.length) {
+                    parts.push(`:is-${citem.slotTarget}-slot-empty=true`);
+                }
+            });
+        }
+        // 部分组件增加 key 唯一标识，防止 vue 判断重复节点，导致渲染异常
+        if (this.name &&
+            ['u-table-view', 'u-list-view', 'u-grid-view', 'u-list-components', 'u-form', 'u-select'].includes(this.tag)) {
+            this.name && parts.push(`key="${this.name}"`);
+        }
+        let tag = this.tag;
+        let staticStyle = this.staticStyle ?? '';
+        if (this.tag === 'slot') {
+            this.name && parts.push(`name="${this.name}"`);
+            if (finalCode === false) {
+                tag = 'div';
+                if (asCompontent) {
+                    parts.push(`vusion-slot-name="${this.name}"`);
+                    content = `<slot name="${this.name}">
+          <div s-empty="true" bs-empty="true" style="background: #f7f8fa;
+            border: 1px dashed #c3c3c3;
+            text-align: center;
+            color: #999;
+            min-height: 32px;
+            min-width: 32px;
+            width: 100%;
+            align-items: center;
+            display: inline-flex;
+            justify-content: center;">
+            +
+          </div>
+        </slot>`;
+                }
+                else {
+                    parts.push(`vusion-node-path="${this.nodePath}"`);
+                    content = `组件占位，可在使用业务组件时插入任意组件`;
+                    staticStyle += `background: linear-gradient(-45deg,#fff 25%,#f3f5fa 0,#f3f5fa 50%,#fff 0,#fff 75%,#f3f5fa 0);
+              background-size: 45px 45px;
+              background-repeat: repeat;
+              line-height: 32px;
+              min-height: 32px;
+              color: var(--font-second-color);
+              text-align: center;`;
+                }
+            }
+        }
+        else if (finalCode === false && this.isCorrespondingBusinessComponent && !this.correspondingBusinessComponent) {
+            content = `未找到组件定义，请手动移除`;
+            staticStyle += `display: block;
+              background: linear-gradient(-45deg,#fff 25%,#f3f5fa 0,#f3f5fa 50%,#fff 0,#fff 75%,#f3f5fa 0);
+              background-size: 45px 45px;
+              background-repeat: repeat;
+              line-height: 32px;
+              min-height: 32px;
+              color: var(--font-second-color);
+              text-align: center;`;
+        }
+        if ((options?.isExport || options?.isRelease) &&
+            staticStyle?.includes(`url('/assets/`) &&
+            this.app.sysPrefixPath?.length > 0) {
+            staticStyle = staticStyle.replace(/url\('\/assets\/(.*?)'\)/, `url('${this.app.sysPrefixPath}/assets/$1')`);
+        }
+        staticStyle && parts.push(`style="${staticStyle}"`);
+        // input hidden属性 要翻译到上级元素的 栅格列的if指令
+        // 从父查子 若有hidden 直接输出null
+        if (this?.name?.includes('grid_layout_column') && !(options?.filterAttr && options?.filterAttr?.length > 0)) {
+            let checkHiddenAttr = (it) => it?.bindAttrs?.find((attr) => attr?.name === 'processHidden');
+            let getHiddenChild = (el) => {
+                return el.children?.find((it) => {
+                    return it.children?.find((item) => checkHiddenAttr(item));
+                    //return checkHiddenAttr(it)
+                });
+            };
+            if (getHiddenChild(this)) {
+                parts.push(`v-show="window.Vue.prototype.$env.VUE_APP_DESIGNER"`);
+            }
+        }
+        if (!content.length) {
+            shouldIndent = false;
+        }
+        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;
+        });
+        let htmlContent = `<${tag}${partsString.length ? partsString : ''}>` +
+            content +
+            (shouldIndent ? '\n' + tabString : '') +
+            `</${tag}>`;
+        if (!content.trim() && selfClosingTag.includes(tag)) {
+            htmlContent = `<${tag}${partsString.length ? partsString : ''} />`;
+        }
+        return htmlContent;
+    }
+    /**
+     * 从父级删除该节点
+     * @internal
+     */
+    delete() {
+        super.delete();
+        if (this.parentNode) {
+            this.traverseChildren((ele) => {
+                this.likeComponent?.removeExistingViewElement(ele);
+            });
+        }
+    }
+    findElementByName(name) {
+        return utils.traverse((current) => {
+            if (current.node.name === name)
+                return current.node;
+        }, { node: this });
+    }
+    findElementByTag(tag) {
+        return utils.traverse((current) => {
+            if (current.node.tag === tag)
+                return current.node;
+        }, { node: this });
+    }
+    findElementByAttr(name, value) {
+        return utils.traverse((current) => {
+            if (current.node.bindAttrs.some((attr) => attr.name === name && attr.value === value))
+                return current.node;
+        }, { node: this });
+    }
+    // 查找element下有没有某个类型的元素，有就返回
+    findElementItem(conceptName) {
+        return utils.traverse((current) => {
+            if (current.node.concept === conceptName)
+                return current.node;
+        }, { node: this }, { mode: 'anyObject', excludedKeySet: this.JSON_EXCLUDED_KEYS });
+    }
+    getCurrentName() {
+        let current = 'current';
+        let parent = this.parentNode;
+        let index = 0;
+        while (parent && !this.isLikeComponent(parent)) {
+            if (parent.slotScope) {
+                index++;
+            }
+            parent = parent.parentNode;
+        }
+        current = index === 0 ? 'current' : 'current' + index;
+        return current;
+    }
+    /**
+     * 计算约束样式
+     * @param positionData 位置数据
+     * @param ops 配置项
+     * @param ops.beforeSetStyleCb 设置样式前的回调
+     * @param ops.isUpdateConstraintRule 是否修改约束规则
+     */
+    computeConstraintStyle(positionData, ops = {}) {
+        if (!positionData) {
+            return;
+        }
+        const { nodeRect, parentRect, parentBorder } = positionData;
+        const staticWidth = Math.round(nodeRect.width);
+        const staticHeight = Math.round(nodeRect.height);
+        const staticLeft = Math.round(nodeRect.left - parentRect.left - parentBorder.left);
+        const staticTop = Math.round(nodeRect.top - parentRect.top - parentBorder.top);
+        const staticRight = Math.round(parentRect.width - nodeRect.width - staticLeft - parentBorder.right - parentBorder.left);
+        const staticBottom = Math.round(parentRect.height - nodeRect.height - staticTop - parentBorder.bottom - parentBorder.top);
+        const styleObj = this.parseStyleToObject(this.staticStyle);
+        let constraintX = styleObj['--constraint-x'] || 'left';
+        let constraintY = styleObj['--constraint-y'] || 'top';
+        const rawWidth = styleObj.width || '';
+        const rawHeight = styleObj.height || '';
+        let left = '';
+        let right = '';
+        let top = '';
+        let bottom = '';
+        let transform = '';
+        let width = ops.isUpdateConstraintRule ? `${staticWidth}px` : rawWidth;
+        let height = ops.isUpdateConstraintRule ? `${staticHeight}px` : rawHeight;
+        const parentWidth = staticLeft + staticWidth + staticRight;
+        const parentHeight = staticTop + staticHeight + staticBottom;
+        // 如果没有修改过约束规则，且非正在修改规则，则根据元素在父容器的位置自动判断约束规则
+        // 中心固定判定阈值
+        const threshold = 3;
+        if (!styleObj['--constraint-modified'] && !ops.isUpdateConstraintRule) {
+            if (Math.abs(staticLeft - staticRight) < threshold) {
+                constraintX = 'center';
+            }
+            else if (staticLeft > parentWidth / 2) {
+                constraintX = 'right';
+            }
+            else if (staticRight > parentWidth / 2) {
+                constraintX = 'left';
+            }
+            if (Math.abs(staticTop - staticBottom) < threshold) {
+                constraintY = 'center';
+            }
+            else if (staticTop > parentHeight / 2) {
+                constraintY = 'bottom';
+            }
+            else if (staticBottom > parentHeight / 2) {
+                constraintY = 'top';
+            }
+        }
+        if (constraintX === 'left') {
+            left = staticLeft + 'px';
+            right = '';
+        }
+        else if (constraintX === 'right') {
+            left = '';
+            right = staticRight + 'px';
+        }
+        else if (constraintX === 'center') {
+            const offset = staticLeft + staticWidth / 2 - parentWidth / 2;
+            left = `calc(50% ${offset > 0 ? '+' : '-'} ${Math.abs(offset)}px)`;
+            right = '';
+            transform = 'translateX(-50%)';
+        }
+        else if (constraintX === 'scale') {
+            left = (staticLeft * 100) / parentWidth + '%';
+            right = '';
+            width = (staticWidth * 100) / parentWidth + '%';
+        }
+        else if (constraintX === 'left-right') {
+            left = staticLeft + 'px';
+            right = staticRight + 'px';
+            width = 'auto';
+        }
+        if (constraintY === 'top') {
+            top = staticTop + 'px';
+            bottom = '';
+        }
+        else if (constraintY === 'bottom') {
+            top = '';
+            bottom = staticBottom + 'px';
+        }
+        else if (constraintY === 'center') {
+            const offset = staticTop + staticHeight / 2 - parentHeight / 2;
+            top = `calc(50% ${offset > 0 ? '+' : '-'} ${Math.abs(offset)}px)`;
+            bottom = '';
+            transform = transform ? 'translate(-50%, -50%)' : 'translateY(-50%)';
+        }
+        else if (constraintY === 'scale') {
+            top = (staticTop * 100) / parentHeight + '%';
+            bottom = '';
+            height = (staticHeight * 100) / parentHeight + '%';
+        }
+        else if (constraintY === 'top-bottom') {
+            top = staticTop + 'px';
+            bottom = staticBottom + 'px';
+            height = 'auto';
+        }
+        const newStyleObj = {
+            ...styleObj,
+            left,
+            right,
+            top,
+            bottom,
+            transform,
+            width,
+            height,
+            '--constraint-x': constraintX,
+            '--constraint-y': constraintY,
+        };
+        if (ops.isUpdateConstraintRule) {
+            newStyleObj['--constraint-modified'] = 1;
+        }
+        ops.beforeSetStyleCb?.(newStyleObj);
+        const newStaticStyle = this.stringifyStyleAttr(newStyleObj);
+        this.setStaticStyle(newStaticStyle);
+    }
+    updateStyleObj(styleObj) {
+        this.setStaticStyle(this.stringifyStyleAttr({
+            ...this.parseStyleToObject(this.staticStyle),
+            ...styleObj,
+        }));
+    }
+    parseStyleToObject(styleStr = '') {
+        const [styleStr1, styleStr2] = (styleStr || '').split('--custom-start: auto;');
+        const styleObj = styleStr1.split(/;/gim).reduce((obj, item) => {
+            // background-image:url(http://www...)
+            item = item.trim();
+            const pos = item.indexOf(':');
+            if (pos >= 0) {
+                const key = item.slice(0, pos).trim();
+                const value = item.slice(pos + 1).trim();
+                obj[key] = value;
+            }
+            return obj;
+        }, {});
+        styleObj['customStyle'] = styleStr2;
+        return styleObj;
+    }
+    stringifyStyleAttr(styleObj) {
+        const customStyle = styleObj['customStyle'] || '';
+        delete styleObj['customStyle'];
+        const styleStr = Object.keys(styleObj)
+            // 空字符串是允许的，因为有时候想要覆盖之前的样式。undefined 则不允许
+            .filter((key) => styleObj[key] !== undefined)
+            .map((key) => `${key}:${String(styleObj[key]).trim()};`)
+            .join('');
+        if (!customStyle) {
+            return styleStr;
+        }
+        return styleStr + '--custom-start: auto;' + customStyle;
+    }
+    // 批量更新绑定属性
+    batchUpdateBindAttrs(attrOptions) {
+        const BindAttribute = (0, decorators_1.getConceptConstructor)('BindAttribute');
+        const oldBindAttrs = this.bindAttrs.filter((it) => !attrOptions.some((item) => item.name === it.name));
+        const newBindAttrs = attrOptions.map((it) => BindAttribute.from(it, this, 'bindAttrs'));
+        this.update({
+            bindAttrs: [...oldBindAttrs, ...newBindAttrs],
+        });
+    }
+    /**
+     * 是否是流程表单
+     */
+    isProcessForm() {
+        return (this.tag.endsWith('-form') &&
+            this.getBindAttribute('id')?.value === 'dynamicRenderContainer' &&
+            this.getBindAttribute('processPrefix'));
+    }
+    getAncestorByTag(concept, tag) {
+        let parentNode = this?.parentNode;
+        while (parentNode && parentNode.concept && !(parentNode.concept === concept && parentNode?.tag === tag)) {
+            parentNode = parentNode.parentNode;
+        }
+        return parentNode;
+    }
+};
+exports.ViewElement = ViewElement;
+__decorate([
+    (0, decorators_1.property)()
+    // @ts-ignore
+], ViewElement.prototype, "concept", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], ViewElement.prototype, "tag", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], ViewElement.prototype, "refNamespace", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], ViewElement.prototype, "name", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], ViewElement.prototype, "staticClass", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], ViewElement.prototype, "staticStyle", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], ViewElement.prototype, "authDescription", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], ViewElement.prototype, "slotTarget", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], ViewElement.prototype, "slotScope", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'BindAttribute',
+        isArray: true,
+        defaultValue: [],
+    })
+], ViewElement.prototype, "bindAttrs", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'BindEvent',
+        isArray: true,
+        defaultValue: [],
+    })
+], ViewElement.prototype, "bindEvents", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'BindDirective',
+        isArray: true,
+        defaultValue: [],
+    })
+], ViewElement.prototype, "bindDirectives", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        isArray: true,
+        defaultValue: [],
+    })
+], ViewElement.prototype, "bindRoles", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'BindStyle',
+        isArray: true,
+        defaultValue: [],
+    })
+], ViewElement.prototype, "bindStyles", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'ViewElement',
+        isArray: true,
+        defaultValue: [],
+    })
+], ViewElement.prototype, "children", void 0);
+__decorate([
+    nasl_translator_1.withGenerator
+], ViewElement.prototype, "toEmbeddedTSDefinition", null);
+__decorate([
+    nasl_translator_1.withGenerator
+], ViewElement.prototype, "toEmbeddedTSRefTree", null);
+__decorate([
+    nasl_translator_1.withSourceMapGenerator
+], ViewElement.prototype, "toEmbeddedTS", null);
+__decorate([
+    (0, nasl_translator_1.withSourceMap)()
+], ViewElement.prototype, "toNaturalTS", null);
+__decorate([
+    (0, nasl_translator_1.withSourceMap)()
+], ViewElement.prototype, "toTextualNASL", null);
+__decorate([
+    (0, decorators_1.excludedInJSON)()
+], ViewElement.prototype, "computedStyle", void 0);
+exports.ViewElement = ViewElement = ViewElement_1 = __decorate([
+    (0, decorators_1.concept)('页面元素')
+], ViewElement);
+exports.default = ViewElement;
+//================================================================================
+// ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+// 自动生成的代码已结束。下面可以手动编写。
+//================================================================================
+//# sourceMappingURL=ViewElement__.js.map