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

package/src/concepts/ViewElement__.ts

@@ -1,2441 +1,2627 @@
-import { TranslatorState, shiftState, withSourceMap, indent } from '../translator';
-import { CallLogic, stdlibNamespace } from '../concepts';
-
 import * as babelParser from '@babel/parser';
 import * as json5 from 'json5';
 import * as compiler from 'vue-template-compiler';
+import { v4 as uuidv4 } from 'uuid';
+import { TranslatorState, shiftState, withSourceMap, indent } from '../translator';
+import { stdlibNamespace } from '../concepts';
 
-import LogicItem from './LogicItem__';
-import { traverse } from '../utils';
-
-import { config, Logic } from '..';
+import { LogicItem } from './LogicItem__';
+import { Logic } from './Logic__';
+import { config } from '../config';
 import MemberExpression from './MemberExpression__';
 import Identifier from './Identifier__';
+import { kebab2Camel } from '../utils';
+//= ===============================================================================
+// 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
+// ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
+//= ===============================================================================
+import { EventPayload, Params } from '../common/EventEmitter';
+import { concept, excludedInJSON, property } from '../decorators';
+
+import * as utils from '../utils';
+import BaseNode from '../common/BaseNode';
+import classMap from '../common/classMap';
+import BindAttribute from './BindAttribute__';
+import BindEvent from './BindEvent__';
+import BindDirective from './BindDirective__';
+import BindStyle from './BindStyle__';
+import View from './View__';
+import Module from './Module__';
+import App from './App__';
+import Frontend from './Frontend__';
 
-import {
-    NaslUITypeAnnotation, NaslLogicItem, NaslNode, genLogicParam
-} from '../templator/utils';
 export interface ParseContext {
-    [key: string]: any;
+  [key: string]: any;
 }
 
 /**
  * 自闭合标签
  */
-const selfClosingTag = [
-    'base',
-    'meta',
-    'area',
-    'embed',
-    'link',
-    'img',
-    'input',
-    'param',
-    'hr',
-    'br',
-    'source',
-    'track',
-    'wbr',
-    'col',
-];
+const selfClosingTag = ['base', 'meta', 'area', 'embed', 'link', 'img', 'input', 'param', 'hr', 'br', 'source', 'track', 'wbr', 'col'];
 
 function genArgumentMemberExpression(arr: string[]) {
-    let expressionNode: any;
-    const propertyName = arr.pop();
-    if (arr.length >= 1) {
-        expressionNode = {
-            concept: 'MemberExpression',
-            name: '',
-            kind: 'Expression',
-            object: genArgumentMemberExpression(arr),
-            property: {
-                concept: 'Identifier',
-                kind: 'Expression',
-                name: propertyName,
-            },
-        };
-    } else {
-        return {
-            concept: 'Identifier',
-            kind: 'Expression',
-            name: propertyName,
-        };
-    }
-    return expressionNode;
+  let expressionNode: any;
+  const propertyName = arr.pop();
+  if (arr.length >= 1) {
+    expressionNode = {
+      concept: 'MemberExpression',
+      name: '',
+      kind: 'Expression',
+      object: genArgumentMemberExpression(arr),
+      property: {
+        concept: 'Identifier',
+        kind: 'Expression',
+        name: propertyName,
+      },
+    };
+  } else {
+    return {
+      concept: 'Identifier',
+      kind: 'Expression',
+      name: propertyName,
+    };
+  }
+  return expressionNode;
 }
 export interface ElementToVueOptions {
-    indentStyle?: 'space' | 'tab';
-    tabSize?: number;
-    indentLevel?: number;
-    aslIdAttr?: string | boolean;
-    nodePathAttr?: string | boolean;
-    getExtraParts?: (element?: ViewElement) => Array<string>;
-    attrFormat?: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => string | false;
-    bindStylesFormat?: (bindStyles: BindStyle[], element?: ViewElement, defaultResult?: string) => string | false;
-    finalCode?: boolean;
-    currentList?: string[];
+  indentStyle?: 'space' | 'tab';
+  tabSize?: number;
+  indentLevel?: number;
+  aslIdAttr?: string | boolean;
+  nodePathAttr?: string | boolean;
+  getExtraParts?: (element?: ViewElement) => Array<string>;
+  attrFormat?: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => string | false;
+  bindStylesFormat?: (bindStyles: BindStyle[], element?: ViewElement, defaultResult?: string) => string | false;
+  finalCode?: boolean;
+  currentList?: string[];
 }
 
 function transAstNodeToNaslNode(astNode: any, namespace?: string): any {
-    let node = null;
-    if (astNode.type === 'CallExpression' && astNode.callee.object.name === '$utils') {
-        const calleeName = astNode.callee.property.name || astNode.callee.property.value;
-        node = {
-            concept: 'CallFunction',
-            name: '',
-            label: '调用内置函数',
-            kind: 'Expression',
-            calleeNamespace: 'nasl.util',
-            calleeName,
-            arguments: astNode.arguments.map((argument: any) => ({
-                concept: 'Argument',
-                name: '',
-                kind: 'Statement',
-                keyword: '',
-                expression: transAstNodeToNaslNode(Object.assign({}, argument)),
-            })).filter((item: any) => item.expression),
-            typeArguments: astNode.arguments.map((argument: any) => (transAstNodeToNaslTypeNode(Object.assign({}, argument)))).filter((item: any) => item),
-        };
-    } 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' || astNode.type === 'ObjectExpression') {
-        node = {
-            concept: 'Unparsed',
-            label: '原子项',
-            code: astNode.value,
-        };
-    } 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;
+  let node = null;
+  if (astNode.type === 'CallExpression' && astNode.callee.object.name === '$utils') {
+    const calleeName = astNode.callee.property.name || astNode.callee.property.value;
+    node = {
+      concept: 'CallFunction',
+      name: '',
+      label: '调用内置函数',
+      kind: 'Expression',
+      calleeNamespace: 'nasl.util',
+      calleeName,
+      arguments: astNode.arguments
+        .map((argument: any) => ({
+          concept: 'Argument',
+          name: '',
+          kind: 'Statement',
+          keyword: '',
+          expression: transAstNodeToNaslNode({ ...argument }),
+        }))
+        .filter((item: any) => item.expression),
+      typeArguments: astNode.arguments.map((argument: any) => transAstNodeToNaslTypeNode({ ...argument })).filter((item: any) => item),
+    };
+  } 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: '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: any) => ({
-                concept: 'Argument',
-                name: '',
-                kind: 'Statement',
-                keyword: '',
-                expression: transAstNodeToNaslNode(Object.assign({}, argument)),
-            })).filter((item: any) => item.expression),
-            typeArguments: astNode?.body?.arguments?.map((argument: any) => (transAstNodeToNaslTypeNode(Object.assign({}, argument)))).filter((item: any) => item)
+          concept: 'MemberExpression',
+          name: '',
+          kind: 'Expression',
+          object,
+          property,
         };
-        node = Logic.from({
-            ...tempNode,
-        }, undefined, 'logics');
+      }
+    }
+  } else if (astNode.type === 'Identifier') {
+    node = {
+      concept: 'Identifier',
+      namespace: namespace || '',
+      name: astNode.name,
+      kind: 'Expression',
+    };
+  } else if (astNode.type === 'ArrayExpression' || astNode.type === 'ObjectExpression') {
+    node = {
+      concept: 'Unparsed',
+      label: '原子项',
+      code: astNode.value,
+    };
+  } else if (astNode.type === 'StringLiteral') {
+    // 单独特殊处理枚举因为他不是MemberExpression，而是Identifier_
+    if (astNode?.value?.startsWith('__enumTypeAnnotation_')) {
+      return null;
+    }
+    node = {
+      concept: 'StringLiteral',
+      kind: 'Expression',
+      name: '',
+      value: astNode.value,
+    };
+  } else if (astNode.type === 'UnaryExpression') {
+    const { argument } = astNode;
+    if (argument.type === 'NumericLiteral') {
+      node = {
+        concept: 'NumericLiteral',
+        value: astNode.operator + argument.value,
+      };
     } else {
-        node = astNode;
-        node.concept = astNode.type;
-    }
-    return node;
+      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 {
+    node = astNode;
+    node.concept = astNode.type;
+  }
+  return node;
 }
 
 function transAstNodeToNaslTypeNode(astNode: any, namespace?: string): any {
-    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;
+  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;
 }
-//================================================================================
-// 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
-// ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
-//================================================================================
-import { EventPayload, Params } from '../common/EventEmitter';
-import { concept, excludedInJSON, property } from '../decorators';
-
-import * as utils from '../utils';
-import { v4 as uuidv4 } from 'uuid';
-import BaseNode from '../common/BaseNode';
-import classMap from '../common/classMap';
-import BindAttribute from './BindAttribute__';
-import BindEvent from './BindEvent__';
-import BindDirective from './BindDirective__';
-import BindStyle from './BindStyle__';
-import View from './View__';
-import Module from './Module__';
-import App from './App__';
-import Frontend from './Frontend__';
 
 /**
  * 页面元素
  */
 @concept('页面元素')
 export class ViewElement extends BaseNode {
-    /**
-     * 产品概念
-     */
-    @property()
-    concept: 'ViewElement' = 'ViewElement';
-
-    /**
-     * 类型
-     */
-    @property()
-    type: 0 = undefined;
-
-    /**
-     * 元素标签
-     */
-    @property()
-    tag: string = undefined;
-
-    /**
-     * 页面元素名称
-     */
-    @property()
-    name: string = undefined;
-
-    /**
-     * 静态 class 名
-     */
-    @property()
-    staticClass: string = undefined;
-
-    /**
-     * 静态 style
-     */
-    @property()
-    staticStyle: string = undefined;
-
-    /**
-     * 权限资源描述
-     */
-    @property()
-    authDescription: string = undefined;
-
-    /**
-     * 插槽目标
-     */
-    @property()
-    slotTarget: string = undefined;
-
-    /**
-     * 插槽 scope 表达式
-     */
-    @property()
-    slotScope: string = undefined;
-
-    /**
-     * 元素绑定属性列表
-     */
-    @property('BindAttribute')
-    bindAttrs: Array<BindAttribute> = [];
-
-    /**
-     * 元素绑定事件列表
-     */
-    @property('BindEvent')
-    bindEvents: Array<BindEvent> = [];
-
-    /**
-     * 元素指令列表
-     */
-    @property('BindDirective')
-    bindDirectives: Array<BindDirective> = [];
-
-    /**
-     * 绑定的角色
-     */
-    @property()
-    bindRoles: Array<string> = [];
-
-    /**
-     * 元素绑定样式列表
-     */
-    @property('BindStyle')
-    bindStyles: Array<BindStyle> = [];
-
-    /**
-     * 子元素列表
-     */
-    @property('ViewElement')
-    children: Array<ViewElement> = [];
-
-    /**
-     * 祖先 View
-     */
-    get view() {
-        return this.getAncestor('View') as View;
-    }
-    /**
-     * 祖先 Module
-     */
-    get module() {
-        return this.getAncestor('Module') as Module;
-    }
-    /**
-     * 祖先 App
-     */
-    get app() {
-        return this.getAncestor('App') as App;
-    }
-    /**
-     * 祖先 Frontend
-     */
-    get frontend() {
-        return this.getAncestor('Frontend') as Frontend;
-    }
-
-    /**
-     * @param source 需要合并的部分参数
-     */
-    constructor(source?: Partial<ViewElement>) {
-        source = Object.assign({}, ViewElement.getDefaultOptions(), source);
-        super(source);
-        super.subConstructor(source);
-    }
-    getClassName() {
-        return 'ViewElement';
-    }
-
-    /**
-     * 从父级删除该节点
-     * @internal
-     */
-    _delete() {
-        let params: Params = null;
-        if (this.parentNode) {
-            params = (this.parentNode as any)?.__removeViewElement?.(this);
-        }
-        return params;
-    }
-    /**
-     * 设置页面元素名称
-     */
-    setName(name: string) {
-        const object = {
-            name,
-        };
-        this.update({
-            ...object,
-            field: 'name',
-        });
-    }
-
-    /**
-     * 设置静态 style
-     */
-    setStaticStyle(staticStyle: string) {
-        const object = {
-            staticStyle,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    /**
-     * 设置权限资源描述
-     */
-    setAuthDescription(authDescription: string) {
-        const object = {
-            authDescription,
-        };
-        this.update({
-            ...object,
-        });
-    }
-
-    getBindAttributeExistingNames(excludedList: Array<BindAttribute> = []) {
-        const excludedSet = new Set(excludedList);
-        return ((this.bindAttrs as BindAttribute[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
-    }
-    getBindAttributeUniqueName(name = 'bindAttribute1') {
-        return utils.unique(name, this.getBindAttributeExistingNames(), undefined, false);
+  /**
+   * 产品概念
+   */
+  @property()
+  concept: 'ViewElement' = 'ViewElement';
+
+  /**
+   * 类型
+   */
+  @property()
+  type: 0 = undefined;
+
+  /**
+   * 元素标签
+   */
+  @property()
+  tag: string = undefined;
+
+  /**
+   * 页面元素名称
+   */
+  @property()
+  name: string = undefined;
+
+  /**
+   * 静态 class 名
+   */
+  @property()
+  staticClass: string = undefined;
+
+  /**
+   * 静态 style
+   */
+  @property()
+  staticStyle: string = undefined;
+
+  /**
+   * 权限资源描述
+   */
+  @property()
+  authDescription: string = undefined;
+
+  /**
+   * 插槽目标
+   */
+  @property()
+  slotTarget: string = undefined;
+
+  /**
+   * 插槽 scope 表达式
+   */
+  @property()
+  slotScope: string = undefined;
+
+  /**
+   * 元素绑定属性列表
+   */
+  @property('BindAttribute')
+  bindAttrs: Array<BindAttribute> = [];
+
+  /**
+   * 元素绑定事件列表
+   */
+  @property('BindEvent')
+  bindEvents: Array<BindEvent> = [];
+
+  /**
+   * 元素指令列表
+   */
+  @property('BindDirective')
+  bindDirectives: Array<BindDirective> = [];
+
+  /**
+   * 绑定的角色
+   */
+  @property()
+  bindRoles: Array<string> = [];
+
+  /**
+   * 元素绑定样式列表
+   */
+  @property('BindStyle')
+  bindStyles: Array<BindStyle> = [];
+
+  /**
+   * 子元素列表
+   */
+  @property('ViewElement')
+  children: Array<ViewElement> = [];
+
+  /**
+   * 祖先 View
+   */
+  get view() {
+    return this.getAncestor('View') as View;
+  }
+
+  /**
+   * 祖先 Module
+   */
+  get module() {
+    return this.getAncestor('Module') as Module;
+  }
+
+  /**
+   * 祖先 App
+   */
+  get app() {
+    return this.getAncestor('App') as App;
+  }
+
+  /**
+   * 祖先 Frontend
+   */
+  get frontend() {
+    return this.getAncestor('Frontend') as Frontend;
+  }
+
+  /**
+   * @param source 需要合并的部分参数
+   */
+  constructor(source?: Partial<ViewElement>) {
+    // @ts-ignore
+    source = { ...ViewElement.getDefaultOptions(), ...source };
+    super(source);
+    super.subConstructor(source);
+  }
+
+  getClassName() {
+    return 'ViewElement';
+  }
+
+  /**
+   * 从父级删除该节点
+   * @internal
+   */
+  _delete() {
+    let params: Params = null;
+    if (this.parentNode) {
+      params = (this.parentNode as any)?.__removeViewElement?.(this);
+    }
+    return params;
+  }
+
+  /**
+   * 设置页面元素名称
+   */
+  setName(name: string) {
+    const object = {
+      name,
+    };
+    this.update({
+      ...object,
+      field: 'name',
+    });
+  }
+
+  /**
+   * 设置静态 style
+   */
+  setStaticStyle(staticStyle: string) {
+    const object = {
+      staticStyle,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置权限资源描述
+   */
+  setAuthDescription(authDescription: string) {
+    const object = {
+      authDescription,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  getBindAttributeExistingNames(excludedList: Array<BindAttribute> = []) {
+    const excludedSet = new Set(excludedList);
+    return ((this.bindAttrs as BindAttribute[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+  }
+
+  getBindAttributeUniqueName(name = 'bindAttribute1') {
+    return utils.unique(name, this.getBindAttributeExistingNames(), undefined, false);
+  }
+
+  /**
+   * 插入元素绑定属性
+   * @internal
+   * @param name 元素绑定属性名称，如果不填会自动生成一个唯一名称
+   */
+  _insertBindAttributeAt(name: string, index: number): BindAttribute;
+
+  /**
+   * 插入元素绑定属性
+   * @internal
+   * @param bindAttributeOptions 元素绑定属性参数
+   */
+  _insertBindAttributeAt(bindAttributeOptions: Partial<BindAttribute>, index: number): BindAttribute;
+
+  /**
+   * 插入元素绑定属性
+   * @internal
+   * @param bindAttribute 已有的元素绑定属性实例
+   */
+  _insertBindAttributeAt(bindAttribute: BindAttribute, index: number): BindAttribute;
+
+  _insertBindAttributeAt(options: string | Partial<BindAttribute> | BindAttribute, index: number) {
+    const bindAttributeOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'bindAttrs' };
+    let bindAttribute: BindAttribute;
+    if (!options) {
+      bindAttribute = BindAttribute.from(
+        {
+          ...bindAttributeOptions,
+          name: this.getBindAttributeUniqueName(),
+        },
+        this,
+        'bindAttrs'
+      );
+    } else if (typeof options === 'string') {
+      bindAttribute = BindAttribute.from(
+        {
+          ...bindAttributeOptions,
+          name: options,
+        },
+        this,
+        'bindAttrs'
+      );
+    } else if (options instanceof BindAttribute) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      bindAttribute = options;
+      Object.assign(bindAttribute, relationOptions);
+    } else {
+      bindAttribute = BindAttribute.from(
+        {
+          ...bindAttributeOptions,
+          ...options,
+        },
+        this,
+        'bindAttrs'
+      );
+    }
+    this.bindAttrs.splice(index, 0, bindAttribute);
+    return bindAttribute;
+  }
+
+  /**
+   * 插入元素绑定属性
+   * @param name 元素绑定属性名称，如果不填会自动生成一个唯一名称
+   */
+  insertBindAttributeAt(name: string, index: number): BindAttribute;
+
+  /**
+   * 插入元素绑定属性
+   * @param bindAttributeOptions 元素绑定属性参数
+   */
+  insertBindAttributeAt(bindAttributeOptions: Partial<BindAttribute>, index: number): BindAttribute;
+
+  /**
+   * 插入元素绑定属性
+   * @param bindAttribute 已有的元素绑定属性实例
+   */
+  insertBindAttributeAt(bindAttribute: BindAttribute, index: number): BindAttribute;
+
+  insertBindAttributeAt(options: string | Partial<BindAttribute> | BindAttribute, index: number) {
+    const node = this._insertBindAttributeAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'bindAttrs',
+    });
+    return node;
+  }
+
+  /**
+   * 添加元素绑定属性
+   * @internal
+   * @param name 元素绑定属性名称，如果不填会自动生成一个唯一名称
+   */
+  _addBindAttribute(name?: string): BindAttribute;
+
+  /**
+   * 添加元素绑定属性
+   * @internal
+   * @param bindAttributeOptions 元素绑定属性参数
+   */
+  _addBindAttribute(bindAttributeOptions: Partial<BindAttribute>): BindAttribute;
+
+  /**
+   * 添加元素绑定属性
+   * @internal
+   * @param bindAttribute 已有的元素绑定属性实例
+   */
+  _addBindAttribute(bindAttribute: BindAttribute): BindAttribute;
+
+  _addBindAttribute(options?: string | Partial<BindAttribute> | BindAttribute) {
+    const index = this.bindAttrs.length;
+    return this._insertBindAttributeAt(options as any, index);
+  }
+
+  /**
+   * 添加元素绑定属性
+   * @internal
+   * @param name 元素绑定属性名称，如果不填会自动生成一个唯一名称
+   */
+  addBindAttribute(name?: string): BindAttribute;
+
+  /**
+   * 添加元素绑定属性
+   * @param bindAttributeOptions 元素绑定属性参数
+   */
+  addBindAttribute(bindAttributeOptions: Partial<BindAttribute>): BindAttribute;
+
+  /**
+   * 添加元素绑定属性
+   * @param bindAttribute 已有的元素绑定属性实例
+   */
+  addBindAttribute(bindAttribute: BindAttribute): BindAttribute;
+
+  addBindAttribute(options?: string | Partial<BindAttribute> | BindAttribute) {
+    const node = this._addBindAttribute(options as any);
+    const index = this.bindAttrs.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'bindAttrs',
+    });
+    return node;
+  }
+
+  getBindEventExistingNames(excludedList: Array<BindEvent> = []) {
+    const excludedSet = new Set(excludedList);
+    return ((this.bindEvents as BindEvent[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+  }
+
+  getBindEventUniqueName(name = 'bindEvent1') {
+    return utils.unique(name, this.getBindEventExistingNames(), undefined, false);
+  }
+
+  /**
+   * 插入元素绑定事件
+   * @internal
+   * @param name 元素绑定事件名称，如果不填会自动生成一个唯一名称
+   */
+  _insertBindEventAt(name: string, index: number): BindEvent;
+
+  /**
+   * 插入元素绑定事件
+   * @internal
+   * @param bindEventOptions 元素绑定事件参数
+   */
+  _insertBindEventAt(bindEventOptions: Partial<BindEvent>, index: number): BindEvent;
+
+  /**
+   * 插入元素绑定事件
+   * @internal
+   * @param bindEvent 已有的元素绑定事件实例
+   */
+  _insertBindEventAt(bindEvent: BindEvent, index: number): BindEvent;
+
+  _insertBindEventAt(options: string | Partial<BindEvent> | BindEvent, index: number) {
+    const bindEventOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'bindEvents' };
+    let bindEvent: BindEvent;
+    if (!options) {
+      bindEvent = BindEvent.from(
+        {
+          ...bindEventOptions,
+          name: this.getBindEventUniqueName(),
+        },
+        this,
+        'bindEvents'
+      );
+    } else if (typeof options === 'string') {
+      bindEvent = BindEvent.from(
+        {
+          ...bindEventOptions,
+          name: options,
+        },
+        this,
+        'bindEvents'
+      );
+    } else if (options instanceof BindEvent) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      bindEvent = options;
+      Object.assign(bindEvent, relationOptions);
+    } else {
+      bindEvent = BindEvent.from(
+        {
+          ...bindEventOptions,
+          ...options,
+        },
+        this,
+        'bindEvents'
+      );
+    }
+    this.bindEvents.splice(index, 0, bindEvent);
+    return bindEvent;
+  }
+
+  /**
+   * 插入元素绑定事件
+   * @param name 元素绑定事件名称，如果不填会自动生成一个唯一名称
+   */
+  insertBindEventAt(name: string, index: number): BindEvent;
+
+  /**
+   * 插入元素绑定事件
+   * @param bindEventOptions 元素绑定事件参数
+   */
+  insertBindEventAt(bindEventOptions: Partial<BindEvent>, index: number): BindEvent;
+
+  /**
+   * 插入元素绑定事件
+   * @param bindEvent 已有的元素绑定事件实例
+   */
+  insertBindEventAt(bindEvent: BindEvent, index: number): BindEvent;
+
+  insertBindEventAt(options: string | Partial<BindEvent> | BindEvent, index: number) {
+    const node = this._insertBindEventAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'bindEvents',
+    });
+    return node;
+  }
+
+  /**
+   * 添加元素绑定事件
+   * @internal
+   * @param name 元素绑定事件名称，如果不填会自动生成一个唯一名称
+   */
+  _addBindEvent(name?: string): BindEvent;
+
+  /**
+   * 添加元素绑定事件
+   * @internal
+   * @param bindEventOptions 元素绑定事件参数
+   */
+  _addBindEvent(bindEventOptions: Partial<BindEvent>): BindEvent;
+
+  /**
+   * 添加元素绑定事件
+   * @internal
+   * @param bindEvent 已有的元素绑定事件实例
+   */
+  _addBindEvent(bindEvent: BindEvent): BindEvent;
+
+  _addBindEvent(options?: string | Partial<BindEvent> | BindEvent) {
+    const index = this.bindEvents.length;
+    return this._insertBindEventAt(options as any, index);
+  }
+
+  /**
+   * 添加元素绑定事件
+   * @internal
+   * @param name 元素绑定事件名称，如果不填会自动生成一个唯一名称
+   */
+  addBindEvent(name?: string): BindEvent;
+
+  /**
+   * 添加元素绑定事件
+   * @param bindEventOptions 元素绑定事件参数
+   */
+  addBindEvent(bindEventOptions: Partial<BindEvent>): BindEvent;
+
+  /**
+   * 添加元素绑定事件
+   * @param bindEvent 已有的元素绑定事件实例
+   */
+  addBindEvent(bindEvent: BindEvent): BindEvent;
+
+  addBindEvent(options?: string | Partial<BindEvent> | BindEvent) {
+    const node = this._addBindEvent(options as any);
+    const index = this.bindEvents.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'bindEvents',
+    });
+    return node;
+  }
+
+  getBindDirectiveExistingNames(excludedList: Array<BindDirective> = []) {
+    const excludedSet = new Set(excludedList);
+    return ((this.bindDirectives as BindDirective[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+  }
+
+  getBindDirectiveUniqueName(name = 'bindDirective1') {
+    return utils.unique(name, this.getBindDirectiveExistingNames(), undefined, false);
+  }
+
+  /**
+   * 插入元素指令
+   * @internal
+   * @param name 元素指令名称，如果不填会自动生成一个唯一名称
+   */
+  _insertBindDirectiveAt(name: string, index: number): BindDirective;
+
+  /**
+   * 插入元素指令
+   * @internal
+   * @param bindDirectiveOptions 元素指令参数
+   */
+  _insertBindDirectiveAt(bindDirectiveOptions: Partial<BindDirective>, index: number): BindDirective;
+
+  /**
+   * 插入元素指令
+   * @internal
+   * @param bindDirective 已有的元素指令实例
+   */
+  _insertBindDirectiveAt(bindDirective: BindDirective, index: number): BindDirective;
+
+  _insertBindDirectiveAt(options: string | Partial<BindDirective> | BindDirective, index: number) {
+    const bindDirectiveOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'bindDirectives' };
+    let bindDirective: BindDirective;
+    if (!options) {
+      bindDirective = BindDirective.from(
+        {
+          ...bindDirectiveOptions,
+          name: this.getBindDirectiveUniqueName(),
+        },
+        this,
+        'bindDirectives'
+      );
+    } else if (typeof options === 'string') {
+      bindDirective = BindDirective.from(
+        {
+          ...bindDirectiveOptions,
+          name: options,
+        },
+        this,
+        'bindDirectives'
+      );
+    } else if (options instanceof BindDirective) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      bindDirective = options;
+      Object.assign(bindDirective, relationOptions);
+    } else {
+      bindDirective = BindDirective.from(
+        {
+          ...bindDirectiveOptions,
+          ...options,
+        },
+        this,
+        'bindDirectives'
+      );
+    }
+    this.bindDirectives.splice(index, 0, bindDirective);
+    return bindDirective;
+  }
+
+  /**
+   * 插入元素指令
+   * @param name 元素指令名称，如果不填会自动生成一个唯一名称
+   */
+  insertBindDirectiveAt(name: string, index: number): BindDirective;
+
+  /**
+   * 插入元素指令
+   * @param bindDirectiveOptions 元素指令参数
+   */
+  insertBindDirectiveAt(bindDirectiveOptions: Partial<BindDirective>, index: number): BindDirective;
+
+  /**
+   * 插入元素指令
+   * @param bindDirective 已有的元素指令实例
+   */
+  insertBindDirectiveAt(bindDirective: BindDirective, index: number): BindDirective;
+
+  insertBindDirectiveAt(options: string | Partial<BindDirective> | BindDirective, index: number) {
+    const node = this._insertBindDirectiveAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'bindDirectives',
+    });
+    return node;
+  }
+
+  /**
+   * 添加元素指令
+   * @internal
+   * @param name 元素指令名称，如果不填会自动生成一个唯一名称
+   */
+  _addBindDirective(name?: string): BindDirective;
+
+  /**
+   * 添加元素指令
+   * @internal
+   * @param bindDirectiveOptions 元素指令参数
+   */
+  _addBindDirective(bindDirectiveOptions: Partial<BindDirective>): BindDirective;
+
+  /**
+   * 添加元素指令
+   * @internal
+   * @param bindDirective 已有的元素指令实例
+   */
+  _addBindDirective(bindDirective: BindDirective): BindDirective;
+
+  _addBindDirective(options?: string | Partial<BindDirective> | BindDirective) {
+    const index = this.bindDirectives.length;
+    return this._insertBindDirectiveAt(options as any, index);
+  }
+
+  /**
+   * 添加元素指令
+   * @internal
+   * @param name 元素指令名称，如果不填会自动生成一个唯一名称
+   */
+  addBindDirective(name?: string): BindDirective;
+
+  /**
+   * 添加元素指令
+   * @param bindDirectiveOptions 元素指令参数
+   */
+  addBindDirective(bindDirectiveOptions: Partial<BindDirective>): BindDirective;
+
+  /**
+   * 添加元素指令
+   * @param bindDirective 已有的元素指令实例
+   */
+  addBindDirective(bindDirective: BindDirective): BindDirective;
+
+  addBindDirective(options?: string | Partial<BindDirective> | BindDirective) {
+    const node = this._addBindDirective(options as any);
+    const index = this.bindDirectives.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'bindDirectives',
+    });
+    return node;
+  }
+
+  getBindStyleExistingNames(excludedList: Array<BindStyle> = []) {
+    const excludedSet = new Set(excludedList);
+    return ((this.bindStyles as BindStyle[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+  }
+
+  getBindStyleUniqueName(name = 'bindStyle1') {
+    return utils.unique(name, this.getBindStyleExistingNames(), undefined, false);
+  }
+
+  /**
+   * 插入元素绑定样式
+   * @internal
+   * @param name 元素绑定样式名称，如果不填会自动生成一个唯一名称
+   */
+  _insertBindStyleAt(name: string, index: number): BindStyle;
+
+  /**
+   * 插入元素绑定样式
+   * @internal
+   * @param bindStyleOptions 元素绑定样式参数
+   */
+  _insertBindStyleAt(bindStyleOptions: Partial<BindStyle>, index: number): BindStyle;
+
+  /**
+   * 插入元素绑定样式
+   * @internal
+   * @param bindStyle 已有的元素绑定样式实例
+   */
+  _insertBindStyleAt(bindStyle: BindStyle, index: number): BindStyle;
+
+  _insertBindStyleAt(options: string | Partial<BindStyle> | BindStyle, index: number) {
+    const bindStyleOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'bindStyles' };
+    let bindStyle: 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 (options instanceof BindStyle) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      bindStyle = options;
+      Object.assign(bindStyle, relationOptions);
+    } else {
+      bindStyle = BindStyle.from(
+        {
+          ...bindStyleOptions,
+          ...options,
+        },
+        this,
+        'bindStyles'
+      );
+    }
+    this.bindStyles.splice(index, 0, bindStyle);
+    return bindStyle;
+  }
+
+  /**
+   * 插入元素绑定样式
+   * @param name 元素绑定样式名称，如果不填会自动生成一个唯一名称
+   */
+  insertBindStyleAt(name: string, index: number): BindStyle;
+
+  /**
+   * 插入元素绑定样式
+   * @param bindStyleOptions 元素绑定样式参数
+   */
+  insertBindStyleAt(bindStyleOptions: Partial<BindStyle>, index: number): BindStyle;
+
+  /**
+   * 插入元素绑定样式
+   * @param bindStyle 已有的元素绑定样式实例
+   */
+  insertBindStyleAt(bindStyle: BindStyle, index: number): BindStyle;
+
+  insertBindStyleAt(options: string | Partial<BindStyle> | BindStyle, index: number) {
+    const node = this._insertBindStyleAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'bindStyles',
+    });
+    return node;
+  }
+
+  /**
+   * 添加元素绑定样式
+   * @internal
+   * @param name 元素绑定样式名称，如果不填会自动生成一个唯一名称
+   */
+  _addBindStyle(name?: string): BindStyle;
+
+  /**
+   * 添加元素绑定样式
+   * @internal
+   * @param bindStyleOptions 元素绑定样式参数
+   */
+  _addBindStyle(bindStyleOptions: Partial<BindStyle>): BindStyle;
+
+  /**
+   * 添加元素绑定样式
+   * @internal
+   * @param bindStyle 已有的元素绑定样式实例
+   */
+  _addBindStyle(bindStyle: BindStyle): BindStyle;
+
+  _addBindStyle(options?: string | Partial<BindStyle> | BindStyle) {
+    const index = this.bindStyles.length;
+    return this._insertBindStyleAt(options as any, index);
+  }
+
+  /**
+   * 添加元素绑定样式
+   * @internal
+   * @param name 元素绑定样式名称，如果不填会自动生成一个唯一名称
+   */
+  addBindStyle(name?: string): BindStyle;
+
+  /**
+   * 添加元素绑定样式
+   * @param bindStyleOptions 元素绑定样式参数
+   */
+  addBindStyle(bindStyleOptions: Partial<BindStyle>): BindStyle;
+
+  /**
+   * 添加元素绑定样式
+   * @param bindStyle 已有的元素绑定样式实例
+   */
+  addBindStyle(bindStyle: BindStyle): BindStyle;
+
+  addBindStyle(options?: string | Partial<BindStyle> | BindStyle) {
+    const node = this._addBindStyle(options as any);
+    const index = this.bindStyles.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'bindStyles',
+    });
+    return node;
+  }
+
+  /**
+   * 插入页面元素
+   * @internal
+   * @param name 页面元素名称，如果不填会自动生成一个唯一名称
+   */
+  _insertViewElementAt(name: string, index: number): ViewElement;
+
+  /**
+   * 插入页面元素
+   * @internal
+   * @param viewElementOptions 页面元素参数
+   */
+  _insertViewElementAt(viewElementOptions: Partial<ViewElement>, index: number): ViewElement;
+
+  /**
+   * 插入页面元素
+   * @internal
+   * @param viewElement 已有的页面元素实例
+   */
+  _insertViewElementAt(viewElement: ViewElement, index: number): ViewElement;
+
+  _insertViewElementAt(options: string | Partial<ViewElement> | ViewElement, index: number) {
+    const viewElementOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'children' };
+    let viewElement: ViewElement;
+    if (!options) {
+      viewElement = ViewElement.from(
+        {
+          ...viewElementOptions,
+          name: this.getViewElementUniqueName(),
+        },
+        this,
+        'children'
+      );
+    } else if (typeof options === 'string') {
+      viewElement = ViewElement.from(
+        {
+          ...viewElementOptions,
+          name: options,
+        },
+        this,
+        'children'
+      );
+    } else if (options instanceof ViewElement) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      viewElement = options;
+      Object.assign(viewElement, relationOptions);
+    } else {
+      viewElement = ViewElement.from(
+        {
+          ...viewElementOptions,
+          ...options,
+        },
+        this,
+        'children'
+      );
+    }
+    this.children.splice(index, 0, viewElement);
+    return viewElement;
+  }
+
+  /**
+   * 插入页面元素
+   * @param name 页面元素名称，如果不填会自动生成一个唯一名称
+   */
+  insertViewElementAt(name: string, index: number): ViewElement;
+
+  /**
+   * 插入页面元素
+   * @param viewElementOptions 页面元素参数
+   */
+  insertViewElementAt(viewElementOptions: Partial<ViewElement>, index: number): ViewElement;
+
+  /**
+   * 插入页面元素
+   * @param viewElement 已有的页面元素实例
+   */
+  insertViewElementAt(viewElement: ViewElement, index: number): ViewElement;
+
+  insertViewElementAt(options: string | Partial<ViewElement> | ViewElement, index: number) {
+    const node = this._insertViewElementAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'children',
+    });
+    return node;
+  }
+
+  /**
+   * 添加页面元素
+   * @internal
+   * @param name 页面元素名称，如果不填会自动生成一个唯一名称
+   */
+  _addViewElement(name?: string): ViewElement;
+
+  /**
+   * 添加页面元素
+   * @internal
+   * @param viewElementOptions 页面元素参数
+   */
+  _addViewElement(viewElementOptions: Partial<ViewElement>): ViewElement;
+
+  /**
+   * 添加页面元素
+   * @internal
+   * @param viewElement 已有的页面元素实例
+   */
+  _addViewElement(viewElement: ViewElement): ViewElement;
+
+  _addViewElement(options?: string | Partial<ViewElement> | ViewElement) {
+    const index = this.children.length;
+    return this._insertViewElementAt(options as any, index);
+  }
+
+  /**
+   * 添加页面元素
+   * @internal
+   * @param name 页面元素名称，如果不填会自动生成一个唯一名称
+   */
+  addViewElement(name?: string): ViewElement;
+
+  /**
+   * 添加页面元素
+   * @param viewElementOptions 页面元素参数
+   */
+  addViewElement(viewElementOptions: Partial<ViewElement>): ViewElement;
+
+  /**
+   * 添加页面元素
+   * @param viewElement 已有的页面元素实例
+   */
+  addViewElement(viewElement: ViewElement): ViewElement;
+
+  addViewElement(options?: string | Partial<ViewElement> | ViewElement) {
+    const node = this._addViewElement(options as any);
+    const index = this.children.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'children',
+    });
+    return node;
+  }
+
+  /**
+   * 删除元素绑定属性
+   * @param name 元素绑定属性名称
+   */
+  removeBindAttribute(name: string): void;
+
+  /**
+   * 删除元素绑定属性
+   * @param bindAttribute 已有的元素绑定属性实例
+   */
+  removeBindAttribute(bindAttribute: BindAttribute): void;
+
+  removeBindAttribute(options: string | BindAttribute) {
+    let bindAttribute: BindAttribute;
+    if (typeof options === 'string') {
+      bindAttribute = (this.bindAttrs as BindAttribute[]).find((item) => item.name === options);
+      if (!bindAttribute) {
+        throw new Error(`找不到元素绑定属性 ${options}`);
+      }
+    } else {
+      bindAttribute = options;
+    }
+    return bindAttribute.delete();
+  }
+
+  __removeBindAttribute(bindAttribute: BindAttribute) {
+    const { parentKey } = bindAttribute;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: bindAttribute,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(bindAttribute);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === bindAttribute) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
+    }
+    return params;
+  }
+
+  /**
+   * 删除元素绑定事件
+   * @param name 元素绑定事件名称
+   */
+  removeBindEvent(name: string): void;
+
+  /**
+   * 删除元素绑定事件
+   * @param bindEvent 已有的元素绑定事件实例
+   */
+  removeBindEvent(bindEvent: BindEvent): void;
+
+  removeBindEvent(options: string | BindEvent) {
+    let bindEvent: BindEvent;
+    if (typeof options === 'string') {
+      bindEvent = (this.bindEvents as BindEvent[]).find((item) => item.name === options);
+      if (!bindEvent) {
+        throw new Error(`找不到元素绑定事件 ${options}`);
+      }
+    } else {
+      bindEvent = options;
+    }
+    return bindEvent.delete();
+  }
+
+  __removeBindEvent(bindEvent: BindEvent) {
+    const { parentKey } = bindEvent;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: bindEvent,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(bindEvent);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === bindEvent) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
+    }
+    return params;
+  }
+
+  /**
+   * 删除元素指令
+   * @param name 元素指令名称
+   */
+  removeBindDirective(name: string): void;
+
+  /**
+   * 删除元素指令
+   * @param bindDirective 已有的元素指令实例
+   */
+  removeBindDirective(bindDirective: BindDirective): void;
+
+  removeBindDirective(options: string | BindDirective) {
+    let bindDirective: BindDirective;
+    if (typeof options === 'string') {
+      bindDirective = (this.bindDirectives as BindDirective[]).find((item) => item.name === options);
+      if (!bindDirective) {
+        throw new Error(`找不到元素指令 ${options}`);
+      }
+    } else {
+      bindDirective = options;
+    }
+    return bindDirective.delete();
+  }
+
+  __removeBindDirective(bindDirective: BindDirective) {
+    const { parentKey } = bindDirective;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: bindDirective,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(bindDirective);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === bindDirective) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
+    }
+    return params;
+  }
+
+  /**
+   * 删除元素绑定样式
+   * @param name 元素绑定样式名称
+   */
+  removeBindStyle(name: string): void;
+
+  /**
+   * 删除元素绑定样式
+   * @param bindStyle 已有的元素绑定样式实例
+   */
+  removeBindStyle(bindStyle: BindStyle): void;
+
+  removeBindStyle(options: string | BindStyle) {
+    let bindStyle: BindStyle;
+    if (typeof options === 'string') {
+      bindStyle = (this.bindStyles as BindStyle[]).find((item) => item.name === options);
+      if (!bindStyle) {
+        throw new Error(`找不到元素绑定样式 ${options}`);
+      }
+    } else {
+      bindStyle = options;
+    }
+    return bindStyle.delete();
+  }
+
+  __removeBindStyle(bindStyle: BindStyle) {
+    const { parentKey } = bindStyle;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: bindStyle,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(bindStyle);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === bindStyle) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
+    }
+    return params;
+  }
+
+  /**
+   * 删除页面元素
+   * @param name 页面元素名称
+   */
+  removeViewElement(name: string): void;
+
+  /**
+   * 删除页面元素
+   * @param viewElement 已有的页面元素实例
+   */
+  removeViewElement(viewElement: ViewElement): void;
+
+  removeViewElement(options: string | ViewElement) {
+    let viewElement: ViewElement;
+    if (typeof options === 'string') {
+      viewElement = (this.children as ViewElement[]).find((item) => item.name === options);
+      if (!viewElement) {
+        throw new Error(`找不到页面元素 ${options}`);
+      }
+    } else {
+      viewElement = options;
+    }
+    return viewElement.delete();
+  }
+
+  __removeViewElement(viewElement: ViewElement) {
+    const { parentKey } = viewElement;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: viewElement,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(viewElement);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === viewElement) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
+    }
+    return params;
+  }
+
+  //= ===============================================================================
+  // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+  // 自动生成的代码已结束。下面可以手动编写。
+  //= ===============================================================================
+
+  /* 主页面有没有权限 */
+  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.view?.getViewElementUniqueName(name);
+  }
+
+  public static readonly TAG_NAME_PREFIX_REG?: RegExp = /^([lieu]|van)[-_]/;
+
+  static from(source: any, parentNode?: any, parentKey?: string): ViewElement {
+    const node = super.from(source, parentNode, parentKey) as ViewElement;
+    if (!node.name) {
+      const tagName = node.tag.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+      node.name = node.getViewElementUniqueName(`${tagName}1`);
     }
-
-    /**
-    * 插入元素绑定属性
-    * @internal
-    * @param name 元素绑定属性名称，如果不填会自动生成一个唯一名称
-    */
-    _insertBindAttributeAt(name: string, index: number): BindAttribute;
-
-    /**
-    * 插入元素绑定属性
-    * @internal
-    * @param bindAttributeOptions 元素绑定属性参数
-    */
-    _insertBindAttributeAt(bindAttributeOptions: Partial<BindAttribute>, index: number): BindAttribute;
-
-    /**
-    * 插入元素绑定属性
-    * @internal
-    * @param bindAttribute 已有的元素绑定属性实例
-    */
-    _insertBindAttributeAt(bindAttribute: BindAttribute, index: number): BindAttribute;
-
-    _insertBindAttributeAt(options: string | Partial<BindAttribute> | BindAttribute, index: number) {
-        const bindAttributeOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'bindAttrs' };
-        let bindAttribute: BindAttribute;
-        if (!options) {
-            bindAttribute = BindAttribute.from({
-                ...bindAttributeOptions,
-                name: this.getBindAttributeUniqueName(),
-            }, this, 'bindAttrs');
-        } else if (typeof options === 'string') {
-            bindAttribute = BindAttribute.from({
-                ...bindAttributeOptions,
-                name: options,
-            }, this, 'bindAttrs');
-        } else if (options instanceof BindAttribute) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            bindAttribute = options;
-            Object.assign(bindAttribute, relationOptions);
+    return node;
+  }
+
+  /**
+   * 设置组件权限
+   */
+  setBindRoles(bindRoles: string[]) {
+    const object = {
+      bindRoles,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  getBindAttribute(name: string) {
+    return this.bindAttrs.find((bindAttr) => bindAttr.name === name);
+  }
+
+  toHump(name: string): string {
+    return name.replace(/-(\w)/g, (all, letter) => letter.toUpperCase());
+  }
+
+  toFirstUpper(name: string): string {
+    return name.replace(/^\S/, (s) => s.toUpperCase());
+  }
+
+  haveScope(): boolean {
+    return Boolean(this.slotScope);
+  }
+
+  toEmbeddedTSDefinition(state?: TranslatorState): string {
+    let code = '';
+    code += indent((state?.tabSize || 0) + 1);
+    // 登录组件不翻译
+    if (this.toHump(this.tag) === 'lcapLogin' || this.staticClass === 'login-form') {
+      code += `${this.name}: nasl.ui.div<any>;\n`;
+    } else if (this.tag === 'u-table-view-column-dynamic') {
+      code += `${this.name}: nasl.ui.${this.toHump(this.tag)}<any, any>;\n`;
+    } else {
+      code += `${this.name}: nasl.ui.${this.toHump(this.tag)}<any>;\n`;
+    }
+    if (Array.isArray(this.children)) {
+      this.children.forEach((element) => {
+        code += element.toEmbeddedTSDefinition(shiftState(state, code));
+      });
+    }
+    return code;
+  }
+
+  getTypeArgmentsStr(state?: TranslatorState): string {
+    // 登录组件不翻译
+    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];
+        if (tag === 'u-input') {
+          code += '<nasl.core.String>';
+        } else if (tag === 'u-input-number') {
+          code += '<nasl.core.Long>';
         } else {
-            bindAttribute = BindAttribute.from({
-                ...bindAttributeOptions,
-                ...options,
-            }, this, 'bindAttrs');
+          code += '<any>';
         }
-        this.bindAttrs.splice(index, 0, bindAttribute);
-        return bindAttribute;
-    }
-
-    /**
-     * 插入元素绑定属性
-     * @param name 元素绑定属性名称，如果不填会自动生成一个唯一名称
-     */
-    insertBindAttributeAt(name: string, index: number): BindAttribute;
-
-    /**
-     * 插入元素绑定属性
-     * @param bindAttributeOptions 元素绑定属性参数
-     */
-    insertBindAttributeAt(bindAttributeOptions: Partial<BindAttribute>, index: number): BindAttribute;
-
-    /**
-     * 插入元素绑定属性
-     * @param bindAttribute 已有的元素绑定属性实例
-     */
-    insertBindAttributeAt(bindAttribute: BindAttribute, index: number): BindAttribute;
-
-    insertBindAttributeAt(options: string | Partial<BindAttribute> | BindAttribute, index: number) {
-        const node = this._insertBindAttributeAt(options as any, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'bindAttrs',
-        });
-        return node;
-    }
-
-    /**
-     * 添加元素绑定属性
-     * @internal
-     * @param name 元素绑定属性名称，如果不填会自动生成一个唯一名称
-     */
-    _addBindAttribute(name?: string): BindAttribute;
-
-    /**
-     * 添加元素绑定属性
-     * @internal
-     * @param bindAttributeOptions 元素绑定属性参数
-     */
-    _addBindAttribute(bindAttributeOptions: Partial<BindAttribute>): BindAttribute;
-
-    /**
-     * 添加元素绑定属性
-     * @internal
-     * @param bindAttribute 已有的元素绑定属性实例
-     */
-    _addBindAttribute(bindAttribute: BindAttribute): BindAttribute;
-
-    _addBindAttribute(options?: string | Partial<BindAttribute> | BindAttribute) {
-        const index = this.bindAttrs.length;
-        return this._insertBindAttributeAt(options as any, index);
-    }
-
-    /**
-     * 添加元素绑定属性
-     * @internal
-     * @param name 元素绑定属性名称，如果不填会自动生成一个唯一名称
-     */
-    addBindAttribute(name?: string): BindAttribute;
-
-    /**
-     * 添加元素绑定属性
-     * @param bindAttributeOptions 元素绑定属性参数
-     */
-    addBindAttribute(bindAttributeOptions: Partial<BindAttribute>): BindAttribute;
-
-    /**
-     * 添加元素绑定属性
-     * @param bindAttribute 已有的元素绑定属性实例
-     */
-    addBindAttribute(bindAttribute: BindAttribute): BindAttribute;
-
-    addBindAttribute(options?: string | Partial<BindAttribute> | BindAttribute) {
-        const node = this._addBindAttribute(options as any);
-        const index = this.bindAttrs.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'bindAttrs',
-        });
-        return node;
-    }
-
-    getBindEventExistingNames(excludedList: Array<BindEvent> = []) {
-        const excludedSet = new Set(excludedList);
-        return ((this.bindEvents as BindEvent[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
-    }
-    getBindEventUniqueName(name = 'bindEvent1') {
-        return utils.unique(name, this.getBindEventExistingNames(), undefined, false);
-    }
-
-    /**
-    * 插入元素绑定事件
-    * @internal
-    * @param name 元素绑定事件名称，如果不填会自动生成一个唯一名称
-    */
-    _insertBindEventAt(name: string, index: number): BindEvent;
-
-    /**
-    * 插入元素绑定事件
-    * @internal
-    * @param bindEventOptions 元素绑定事件参数
-    */
-    _insertBindEventAt(bindEventOptions: Partial<BindEvent>, index: number): BindEvent;
-
-    /**
-    * 插入元素绑定事件
-    * @internal
-    * @param bindEvent 已有的元素绑定事件实例
-    */
-    _insertBindEventAt(bindEvent: BindEvent, index: number): BindEvent;
-
-    _insertBindEventAt(options: string | Partial<BindEvent> | BindEvent, index: number) {
-        const bindEventOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'bindEvents' };
-        let bindEvent: BindEvent;
-        if (!options) {
-            bindEvent = BindEvent.from({
-                ...bindEventOptions,
-                name: this.getBindEventUniqueName(),
-            }, this, 'bindEvents');
-        } else if (typeof options === 'string') {
-            bindEvent = BindEvent.from({
-                ...bindEventOptions,
-                name: options,
-            }, this, 'bindEvents');
-        } else if (options instanceof BindEvent) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            bindEvent = options;
-            Object.assign(bindEvent, relationOptions);
+      }
+      return code;
+    }
+    const { bindAttrs } = this;
+    if (bindAttrs && bindAttrs.length) {
+      const attr = bindAttrs.find((item) => item.name === 'data-source');
+      if (attr && attr.expression) {
+        if (this.tag === 'u-table-view-column-dynamic') {
+          code += `<${(this.parentNode as any).__tsDataSourceTypeName}, ${(this as any).__tsDataSourceTypeName}>`;
         } else {
-            bindEvent = BindEvent.from({
-                ...bindEventOptions,
-                ...options,
-            }, this, 'bindEvents');
+          code += `<${(this as any).__tsDataSourceTypeName}>`;
         }
-        this.bindEvents.splice(index, 0, bindEvent);
-        return bindEvent;
-    }
-
-    /**
-     * 插入元素绑定事件
-     * @param name 元素绑定事件名称，如果不填会自动生成一个唯一名称
-     */
-    insertBindEventAt(name: string, index: number): BindEvent;
-
-    /**
-     * 插入元素绑定事件
-     * @param bindEventOptions 元素绑定事件参数
-     */
-    insertBindEventAt(bindEventOptions: Partial<BindEvent>, index: number): BindEvent;
-
-    /**
-     * 插入元素绑定事件
-     * @param bindEvent 已有的元素绑定事件实例
-     */
-    insertBindEventAt(bindEvent: BindEvent, index: number): BindEvent;
-
-    insertBindEventAt(options: string | Partial<BindEvent> | BindEvent, index: number) {
-        const node = this._insertBindEventAt(options as any, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'bindEvents',
-        });
-        return node;
-    }
-
-    /**
-     * 添加元素绑定事件
-     * @internal
-     * @param name 元素绑定事件名称，如果不填会自动生成一个唯一名称
-     */
-    _addBindEvent(name?: string): BindEvent;
-
-    /**
-     * 添加元素绑定事件
-     * @internal
-     * @param bindEventOptions 元素绑定事件参数
-     */
-    _addBindEvent(bindEventOptions: Partial<BindEvent>): BindEvent;
-
-    /**
-     * 添加元素绑定事件
-     * @internal
-     * @param bindEvent 已有的元素绑定事件实例
-     */
-    _addBindEvent(bindEvent: BindEvent): BindEvent;
-
-    _addBindEvent(options?: string | Partial<BindEvent> | BindEvent) {
-        const index = this.bindEvents.length;
-        return this._insertBindEventAt(options as any, index);
-    }
-
-    /**
-     * 添加元素绑定事件
-     * @internal
-     * @param name 元素绑定事件名称，如果不填会自动生成一个唯一名称
-     */
-    addBindEvent(name?: string): BindEvent;
-
-    /**
-     * 添加元素绑定事件
-     * @param bindEventOptions 元素绑定事件参数
-     */
-    addBindEvent(bindEventOptions: Partial<BindEvent>): BindEvent;
-
-    /**
-     * 添加元素绑定事件
-     * @param bindEvent 已有的元素绑定事件实例
-     */
-    addBindEvent(bindEvent: BindEvent): BindEvent;
-
-    addBindEvent(options?: string | Partial<BindEvent> | BindEvent) {
-        const node = this._addBindEvent(options as any);
-        const index = this.bindEvents.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'bindEvents',
-        });
-        return node;
-    }
-
-    getBindDirectiveExistingNames(excludedList: Array<BindDirective> = []) {
-        const excludedSet = new Set(excludedList);
-        return ((this.bindDirectives as BindDirective[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
-    }
-    getBindDirectiveUniqueName(name = 'bindDirective1') {
-        return utils.unique(name, this.getBindDirectiveExistingNames(), undefined, false);
-    }
-
-    /**
-    * 插入元素指令
-    * @internal
-    * @param name 元素指令名称，如果不填会自动生成一个唯一名称
-    */
-    _insertBindDirectiveAt(name: string, index: number): BindDirective;
-
-    /**
-    * 插入元素指令
-    * @internal
-    * @param bindDirectiveOptions 元素指令参数
-    */
-    _insertBindDirectiveAt(bindDirectiveOptions: Partial<BindDirective>, index: number): BindDirective;
-
-    /**
-    * 插入元素指令
-    * @internal
-    * @param bindDirective 已有的元素指令实例
-    */
-    _insertBindDirectiveAt(bindDirective: BindDirective, index: number): BindDirective;
-
-    _insertBindDirectiveAt(options: string | Partial<BindDirective> | BindDirective, index: number) {
-        const bindDirectiveOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'bindDirectives' };
-        let bindDirective: BindDirective;
-        if (!options) {
-            bindDirective = BindDirective.from({
-                ...bindDirectiveOptions,
-                name: this.getBindDirectiveUniqueName(),
-            }, this, 'bindDirectives');
-        } else if (typeof options === 'string') {
-            bindDirective = BindDirective.from({
-                ...bindDirectiveOptions,
-                name: options,
-            }, this, 'bindDirectives');
-        } else if (options instanceof BindDirective) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            bindDirective = options;
-            Object.assign(bindDirective, relationOptions);
-        } else {
-            bindDirective = BindDirective.from({
-                ...bindDirectiveOptions,
-                ...options,
-            }, this, 'bindDirectives');
+      }
+    }
+    return code;
+  }
+
+  getDatasourceTypeCodeStr(state?: TranslatorState, eleArr?: Array<ViewElement>): string {
+    let code = '';
+    (eleArr || []).forEach((element, index) => {
+      const { bindAttrs } = element;
+      if (bindAttrs && bindAttrs.length) {
+        const attr = bindAttrs.find((item) => item.name === 'data-source');
+        if (attr && attr.expression) {
+          const datasourceName = `datasourceName${index}`;
+          (element as any).__tsDataSourceTypeName = datasourceName;
+          if (attr.expression instanceof MemberExpression || attr.expression instanceof Identifier) {
+            const value = attr.expression.toEmbeddedTS(shiftState(state, code));
+            code += `type ${datasourceName} = `;
+            code += `nasl.ui.GetItemTypeFromDataSource<typeof ${value}>;\n`;
+          } else {
+            code += `const __funcName${index} = () => { return`;
+            code += attr.expression.toEmbeddedTS(shiftState(state, code));
+            code += '};\n';
+            code += `type ${datasourceName} = `;
+            code += `nasl.ui.GetItemTypeFromDataSource<ReturnType<typeof __funcName${index}>>;\n`;
+          }
         }
-        this.bindDirectives.splice(index, 0, bindDirective);
-        return bindDirective;
-    }
-
-    /**
-     * 插入元素指令
-     * @param name 元素指令名称，如果不填会自动生成一个唯一名称
-     */
-    insertBindDirectiveAt(name: string, index: number): BindDirective;
-
-    /**
-     * 插入元素指令
-     * @param bindDirectiveOptions 元素指令参数
-     */
-    insertBindDirectiveAt(bindDirectiveOptions: Partial<BindDirective>, index: number): BindDirective;
-
-    /**
-     * 插入元素指令
-     * @param bindDirective 已有的元素指令实例
-     */
-    insertBindDirectiveAt(bindDirective: BindDirective, index: number): BindDirective;
-
-    insertBindDirectiveAt(options: string | Partial<BindDirective> | BindDirective, index: number) {
-        const node = this._insertBindDirectiveAt(options as any, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'bindDirectives',
-        });
-        return node;
-    }
-
-    /**
-     * 添加元素指令
-     * @internal
-     * @param name 元素指令名称，如果不填会自动生成一个唯一名称
-     */
-    _addBindDirective(name?: string): BindDirective;
-
-    /**
-     * 添加元素指令
-     * @internal
-     * @param bindDirectiveOptions 元素指令参数
-     */
-    _addBindDirective(bindDirectiveOptions: Partial<BindDirective>): BindDirective;
-
-    /**
-     * 添加元素指令
-     * @internal
-     * @param bindDirective 已有的元素指令实例
-     */
-    _addBindDirective(bindDirective: BindDirective): BindDirective;
-
-    _addBindDirective(options?: string | Partial<BindDirective> | BindDirective) {
-        const index = this.bindDirectives.length;
-        return this._insertBindDirectiveAt(options as any, index);
-    }
-
-    /**
-     * 添加元素指令
-     * @internal
-     * @param name 元素指令名称，如果不填会自动生成一个唯一名称
-     */
-    addBindDirective(name?: string): BindDirective;
-
-    /**
-     * 添加元素指令
-     * @param bindDirectiveOptions 元素指令参数
-     */
-    addBindDirective(bindDirectiveOptions: Partial<BindDirective>): BindDirective;
-
-    /**
-     * 添加元素指令
-     * @param bindDirective 已有的元素指令实例
-     */
-    addBindDirective(bindDirective: BindDirective): BindDirective;
-
-    addBindDirective(options?: string | Partial<BindDirective> | BindDirective) {
-        const node = this._addBindDirective(options as any);
-        const index = this.bindDirectives.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'bindDirectives',
+      }
+    });
+    code += '\n';
+    code += indent((state?.tabSize || 0) + 2);
+    return code;
+  }
+
+  @withSourceMap()
+  toEmbeddedTS(state?: TranslatorState, parentLevel?: number): string {
+    const { parentNode, app, tag, staticClass, name, bindDirectives, bindRoles, bindEvents, children } = this;
+
+    const chineseTsName = (name: string) => {
+      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 (this.toHump(tag) === 'lcapLogin') {
+      let code = `new nasl.ui.div({name: __elements.${this.name},\n`;
+      // 事件
+      if (Array.isArray(this.bindEvents)) {
+        this.bindEvents.forEach((event) => {
+          code += event.toEmbeddedTS(
+            shiftState(state, code, {
+              tabSize: (state?.tabSize || 0) + 2,
+            })
+          );
+          code += '\n';
         });
-        return node;
-    }
-
-    getBindStyleExistingNames(excludedList: Array<BindStyle> = []) {
-        const excludedSet = new Set(excludedList);
-        return ((this.bindStyles as BindStyle[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
-    }
-    getBindStyleUniqueName(name = 'bindStyle1') {
-        return utils.unique(name, this.getBindStyleExistingNames(), undefined, false);
-    }
-
-    /**
-    * 插入元素绑定样式
-    * @internal
-    * @param name 元素绑定样式名称，如果不填会自动生成一个唯一名称
-    */
-    _insertBindStyleAt(name: string, index: number): BindStyle;
-
-    /**
-    * 插入元素绑定样式
-    * @internal
-    * @param bindStyleOptions 元素绑定样式参数
-    */
-    _insertBindStyleAt(bindStyleOptions: Partial<BindStyle>, index: number): BindStyle;
-
-    /**
-    * 插入元素绑定样式
-    * @internal
-    * @param bindStyle 已有的元素绑定样式实例
-    */
-    _insertBindStyleAt(bindStyle: BindStyle, index: number): BindStyle;
-
-    _insertBindStyleAt(options: string | Partial<BindStyle> | BindStyle, index: number) {
-        const bindStyleOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'bindStyles' };
-        let bindStyle: 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 (options instanceof BindStyle) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            bindStyle = options;
-            Object.assign(bindStyle, relationOptions);
-        } else {
-            bindStyle = BindStyle.from({
-                ...bindStyleOptions,
-                ...options,
-            }, this, 'bindStyles');
-        }
-        this.bindStyles.splice(index, 0, bindStyle);
-        return bindStyle;
+      }
+
+      code += `}),\n`;
+      return code;
+    }
+    let levelIndex = parentLevel || 0;
+    if (tag === 'template' && this.haveScope()) {
+      const slotTarget = !this.slotTarget ? 'slotDefault' : `slot${this.toFirstUpper(this.toHump(this.slotTarget))}`;
+      let code = '';
+      code += `${slotTarget}: (current${levelIndex === 0 ? '' : levelIndex})=> {\n`;
+      code += this.getDatasourceTypeCodeStr(state, this.children);
+      levelIndex++;
+      code += 'return [';
+      this.children.forEach((element) => {
+        code += element.toEmbeddedTS(
+          shiftState(state, code, {
+            tabSize: state?.tabSize || 0,
+          }),
+          levelIndex
+        );
+      });
+      code += ']';
+      code += '\n';
+      code += '},\n';
+      return code;
+    }
+    if (tag === 'template') {
+      const slotTarget = !this.slotTarget ? 'slotDefault' : `slot${this.toFirstUpper(this.toHump(this.slotTarget))}`;
+      let code = '';
+      code += `${slotTarget}: ()=> {\n`;
+      code += this.getDatasourceTypeCodeStr(state, this.children);
+      code += 'return [';
+      this.children.forEach((element) => {
+        code += element.toEmbeddedTS(
+          shiftState(state, code, {
+            tabSize: state?.tabSize || 0,
+          }),
+          levelIndex
+        );
+      });
+      code += indent((state?.tabSize || 0) + 2);
+      code += ']';
+      code += '\n';
+      code += '},\n';
+      return code;
+    }
+
+    // 后面那个name是为了查找引用的时候用的
+    let code = `new nasl.ui.${this.toHump(tag)}${this.getTypeArgmentsStr(state)}({name: __elements.${name},\n`;
+    // 是否开启权限
+    // const hasAuth = Array.isArray(bindDirectives)
+    //     ? !!bindDirectives.filter((directive) => directive.name === 'auth').length
+    //     : false;
+    // 角色
+    if (Array.isArray(bindRoles) && bindRoles.length) {
+      code += indent((state?.tabSize || 0) + 2);
+      code += 'roles = [\n';
+      bindRoles.forEach((role) => {
+        code += indent((state?.tabSize || 0) + 3);
+        code += `${app.getNamespace()}.roles.${chineseTsName(role)}.${chineseTsName(role)},`;
+        code += '\n';
+      });
+      code += indent((state?.tabSize || 0) + 2);
+      code += '],\n';
+    }
+
+    // 事件
+    if (Array.isArray(bindEvents)) {
+      bindEvents.forEach((event) => {
+        code += event.toEmbeddedTS(
+          shiftState(state, code, {
+            tabSize: (state?.tabSize || 0) + 2,
+          })
+        );
+        code += '\n';
+      });
     }
 
-    /**
-     * 插入元素绑定样式
-     * @param name 元素绑定样式名称，如果不填会自动生成一个唯一名称
-     */
-    insertBindStyleAt(name: string, index: number): BindStyle;
-
-    /**
-     * 插入元素绑定样式
-     * @param bindStyleOptions 元素绑定样式参数
-     */
-    insertBindStyleAt(bindStyleOptions: Partial<BindStyle>, index: number): BindStyle;
-
-    /**
-     * 插入元素绑定样式
-     * @param bindStyle 已有的元素绑定样式实例
-     */
-    insertBindStyleAt(bindStyle: BindStyle, index: number): BindStyle;
-
-    insertBindStyleAt(options: string | Partial<BindStyle> | BindStyle, index: number) {
-        const node = this._insertBindStyleAt(options as any, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'bindStyles',
-        });
-        return node;
-    }
+    // 子元素
+    if (Array.isArray(children)) {
+      code += indent((state?.tabSize || 0) + 1);
 
-    /**
-     * 添加元素绑定样式
-     * @internal
-     * @param name 元素绑定样式名称，如果不填会自动生成一个唯一名称
-     */
-    _addBindStyle(name?: string): BindStyle;
-
-    /**
-     * 添加元素绑定样式
-     * @internal
-     * @param bindStyleOptions 元素绑定样式参数
-     */
-    _addBindStyle(bindStyleOptions: Partial<BindStyle>): BindStyle;
-
-    /**
-     * 添加元素绑定样式
-     * @internal
-     * @param bindStyle 已有的元素绑定样式实例
-     */
-    _addBindStyle(bindStyle: BindStyle): BindStyle;
-
-    _addBindStyle(options?: string | Partial<BindStyle> | BindStyle) {
-        const index = this.bindStyles.length;
-        return this._insertBindStyleAt(options as any, index);
-    }
+      if (Array.isArray(this.bindAttrs)) {
+        code += `bindAttr: () => [\n`;
+        this.bindAttrs.forEach((attr) => (code += `${attr.toEmbeddedTS(shiftState(state, code, { tabSize: 1 }))},\n`));
+        this.bindDirectives.forEach((directive) => (code += `${directive.toEmbeddedTS(shiftState(state, code, { tabSize: 1 }))},\n`));
+        this.bindStyles.forEach((bindStyle) => (code += `${bindStyle.toEmbeddedTS(shiftState(state, code, { tabSize: 1 }))},\n`));
+        code += `${indent((state?.tabSize || 0) + 2)}],\n`;
+      }
 
-    /**
-     * 添加元素绑定样式
-     * @internal
-     * @param name 元素绑定样式名称，如果不填会自动生成一个唯一名称
-     */
-    addBindStyle(name?: string): BindStyle;
-
-    /**
-     * 添加元素绑定样式
-     * @param bindStyleOptions 元素绑定样式参数
-     */
-    addBindStyle(bindStyleOptions: Partial<BindStyle>): BindStyle;
-
-    /**
-     * 添加元素绑定样式
-     * @param bindStyle 已有的元素绑定样式实例
-     */
-    addBindStyle(bindStyle: BindStyle): BindStyle;
-
-    addBindStyle(options?: string | Partial<BindStyle> | BindStyle) {
-        const node = this._addBindStyle(options as any);
-        const index = this.bindStyles.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'bindStyles',
+      // 如果子集中有插槽的就
+      if (children.find((item) => item.tag === 'template' && item.slotTarget)) {
+        code += indent((state?.tabSize || 0) + 2);
+        const defaultArr: ViewElement[] = [];
+        // 先把插槽翻译了
+        children.forEach((element) => {
+          if (element.tag === 'template') {
+            code += element.toEmbeddedTS(
+              shiftState(state, code, {
+                tabSize: state?.tabSize || 0,
+              }),
+              levelIndex
+            );
+          } else {
+            defaultArr.push(element);
+          }
         });
-        return node;
-    }
-
-    /**
-    * 插入页面元素
-    * @internal
-    * @param name 页面元素名称，如果不填会自动生成一个唯一名称
-    */
-    _insertViewElementAt(name: string, index: number): ViewElement;
-
-    /**
-    * 插入页面元素
-    * @internal
-    * @param viewElementOptions 页面元素参数
-    */
-    _insertViewElementAt(viewElementOptions: Partial<ViewElement>, index: number): ViewElement;
-
-    /**
-    * 插入页面元素
-    * @internal
-    * @param viewElement 已有的页面元素实例
-    */
-    _insertViewElementAt(viewElement: ViewElement, index: number): ViewElement;
-
-    _insertViewElementAt(options: string | Partial<ViewElement> | ViewElement, index: number) {
-        const viewElementOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'children' };
-        let viewElement: ViewElement;
-        if (!options) {
-            viewElement = ViewElement.from({
-                ...viewElementOptions,
-                name: this.getViewElementUniqueName(),
-            }, this, 'children');
-        } else if (typeof options === 'string') {
-            viewElement = ViewElement.from({
-                ...viewElementOptions,
-                name: options,
-            }, this, 'children');
-        } else if (options instanceof ViewElement) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            viewElement = options;
-            Object.assign(viewElement, relationOptions);
-        } else {
-            viewElement = ViewElement.from({
-                ...viewElementOptions,
-                ...options,
-            }, this, 'children');
+        // 翻译其余的子集
+        if (defaultArr.length) {
+          code += indent((state?.tabSize || 0) + 2);
+          code += `slotDefault: ()=> {\n`;
+          code += this.getDatasourceTypeCodeStr(state, defaultArr);
+          code += 'return [';
+          defaultArr.forEach((element) => {
+            code += element.toEmbeddedTS(
+              shiftState(state, code, {
+                tabSize: (state?.tabSize || 0) + 2,
+              }),
+              levelIndex
+            );
+            code += '\n';
+          });
+          code += indent((state?.tabSize || 0) + 2);
+          code += ']\n';
+          code += indent((state?.tabSize || 0) + 1);
+          code += '}\n';
         }
-        this.children.splice(index, 0, viewElement);
-        return viewElement;
-    }
-
-    /**
-     * 插入页面元素
-     * @param name 页面元素名称，如果不填会自动生成一个唯一名称
-     */
-    insertViewElementAt(name: string, index: number): ViewElement;
-
-    /**
-     * 插入页面元素
-     * @param viewElementOptions 页面元素参数
-     */
-    insertViewElementAt(viewElementOptions: Partial<ViewElement>, index: number): ViewElement;
-
-    /**
-     * 插入页面元素
-     * @param viewElement 已有的页面元素实例
-     */
-    insertViewElementAt(viewElement: ViewElement, index: number): ViewElement;
-
-    insertViewElementAt(options: string | Partial<ViewElement> | ViewElement, index: number) {
-        const node = this._insertViewElementAt(options as any, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'children',
-        });
-        return node;
-    }
-
-    /**
-     * 添加页面元素
-     * @internal
-     * @param name 页面元素名称，如果不填会自动生成一个唯一名称
-     */
-    _addViewElement(name?: string): ViewElement;
-
-    /**
-     * 添加页面元素
-     * @internal
-     * @param viewElementOptions 页面元素参数
-     */
-    _addViewElement(viewElementOptions: Partial<ViewElement>): ViewElement;
-
-    /**
-     * 添加页面元素
-     * @internal
-     * @param viewElement 已有的页面元素实例
-     */
-    _addViewElement(viewElement: ViewElement): ViewElement;
-
-    _addViewElement(options?: string | Partial<ViewElement> | ViewElement) {
-        const index = this.children.length;
-        return this._insertViewElementAt(options as any, index);
-    }
-
-    /**
-     * 添加页面元素
-     * @internal
-     * @param name 页面元素名称，如果不填会自动生成一个唯一名称
-     */
-    addViewElement(name?: string): ViewElement;
-
-    /**
-     * 添加页面元素
-     * @param viewElementOptions 页面元素参数
-     */
-    addViewElement(viewElementOptions: Partial<ViewElement>): ViewElement;
-
-    /**
-     * 添加页面元素
-     * @param viewElement 已有的页面元素实例
-     */
-    addViewElement(viewElement: ViewElement): ViewElement;
-
-    addViewElement(options?: string | Partial<ViewElement> | ViewElement) {
-        const node = this._addViewElement(options as any);
-        const index = this.children.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'children',
+      } else {
+        code += indent((state?.tabSize || 0) + 2);
+        code += `slotDefault: ()=> {\n`;
+        code += this.getDatasourceTypeCodeStr(state, children);
+        code += 'return [';
+        children.forEach((element) => {
+          code += element.toEmbeddedTS(
+            shiftState(state, code, {
+              tabSize: (state?.tabSize || 0) + 2,
+            }),
+            levelIndex
+          );
+          code += '\n';
         });
-        return node;
-    }
-
-    /**
-    * 删除元素绑定属性
-    * @param name 元素绑定属性名称
-    */
-    removeBindAttribute(name: string): void;
-
-    /**
-     * 删除元素绑定属性
-     * @param bindAttribute 已有的元素绑定属性实例
-     */
-    removeBindAttribute(bindAttribute: BindAttribute): void;
-
-    removeBindAttribute(options: string | BindAttribute) {
-        let bindAttribute: BindAttribute;
-        if (typeof options === 'string') {
-            bindAttribute = (this.bindAttrs as BindAttribute[]).find((item) => item.name === options);
-            if (!bindAttribute) {
-                throw new Error('找不到元素绑定属性 ' + options);
-            }
-        } else {
-            bindAttribute = options;
-        }
-        return bindAttribute.delete();
-    }
-
-    __removeBindAttribute(bindAttribute: BindAttribute) {
-        const parentKey = bindAttribute.parentKey;
-        const params: Params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: bindAttribute,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(bindAttribute);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === bindAttribute) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
-        }
-        return params;
+        code += indent((state?.tabSize || 0) + 2);
+        code += ']\n';
+        code += indent((state?.tabSize || 0) + 1);
+        code += '}\n';
+      }
     }
 
-    /**
-    * 删除元素绑定事件
-    * @param name 元素绑定事件名称
-    */
-    removeBindEvent(name: string): void;
-
-    /**
-     * 删除元素绑定事件
-     * @param bindEvent 已有的元素绑定事件实例
-     */
-    removeBindEvent(bindEvent: BindEvent): void;
-
-    removeBindEvent(options: string | BindEvent) {
-        let bindEvent: BindEvent;
-        if (typeof options === 'string') {
-            bindEvent = (this.bindEvents as BindEvent[]).find((item) => item.name === options);
-            if (!bindEvent) {
-                throw new Error('找不到元素绑定事件 ' + options);
-            }
-        } else {
-            bindEvent = options;
-        }
-        return bindEvent.delete();
-    }
+    code += `${indent(state?.tabSize || 0)}})`;
 
-    __removeBindEvent(bindEvent: BindEvent) {
-        const parentKey = bindEvent.parentKey;
-        const params: Params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: bindEvent,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(bindEvent);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === bindEvent) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
-        }
-        return params;
+    // 顶层元素是单独的表达式
+    if (parentNode.concept === 'View') {
+      code += ';\n';
+    } else {
+      code += ',\n';
     }
 
-    /**
-    * 删除元素指令
-    * @param name 元素指令名称
-    */
-    removeBindDirective(name: string): void;
-
-    /**
-     * 删除元素指令
-     * @param bindDirective 已有的元素指令实例
-     */
-    removeBindDirective(bindDirective: BindDirective): void;
-
-    removeBindDirective(options: string | BindDirective) {
-        let bindDirective: BindDirective;
-        if (typeof options === 'string') {
-            bindDirective = (this.bindDirectives as BindDirective[]).find((item) => item.name === options);
-            if (!bindDirective) {
-                throw new Error('找不到元素指令 ' + options);
-            }
-        } else {
-            bindDirective = options;
-        }
-        return bindDirective.delete();
-    }
+    return code;
+  }
 
-    __removeBindDirective(bindDirective: BindDirective) {
-        const parentKey = bindDirective.parentKey;
-        const params: Params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: bindDirective,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(bindDirective);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === bindDirective) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
+  @withSourceMap()
+  toNaturalTS(state?: TranslatorState, parentLevel?: number): string {
+    let code = '';
+    const levelIndex = parentLevel || 0;
+    if (Array.isArray(this.bindEvents)) {
+      this.bindEvents.forEach((event) => {
+        code += event.toNaturalTS(shiftState(state, code, {
+          tabSize: state.tabSize,
+        }));
+        // code += '\n';
+      });
+    }
+
+    if (Array.isArray(this.children)) {
+      if (this.children.find((item) => item.tag === 'template' && item.slotTarget)) {
+        // code += indent(state.tabSize + 2);
+        const defaultArr: ViewElement[] = [];
+        // 先把插槽翻译了
+        this.children.forEach((element) => {
+          if (element.tag === 'template') {
+            code += element.toNaturalTS(shiftState(state, code, {
+              tabSize: state.tabSize,
+            }), levelIndex);
+          } else {
+            defaultArr.push(element);
+          }
+        });
+        // 翻译其余的子集
+        if (defaultArr.length) {
+          defaultArr.forEach((element) => {
+            code += element.toNaturalTS(shiftState(state, code, {
+              tabSize: state.tabSize,
+            }), levelIndex);
+          });
         }
-        return params;
-    }
-
-    /**
-    * 删除元素绑定样式
-    * @param name 元素绑定样式名称
-    */
-    removeBindStyle(name: string): void;
-
-    /**
-     * 删除元素绑定样式
-     * @param bindStyle 已有的元素绑定样式实例
-     */
-    removeBindStyle(bindStyle: BindStyle): void;
-
-    removeBindStyle(options: string | BindStyle) {
-        let bindStyle: BindStyle;
-        if (typeof options === 'string') {
-            bindStyle = (this.bindStyles as BindStyle[]).find((item) => item.name === options);
-            if (!bindStyle) {
-                throw new Error('找不到元素绑定样式 ' + options);
-            }
-        } else {
-            bindStyle = options;
+      } else {
+        this.children.forEach((element) => {
+          code += element.toNaturalTS(shiftState(state, code, {
+            tabSize: state.tabSize,
+          }), levelIndex);
+        });
+      }
+    }
+
+    return code;
+  }
+
+  toNaturalTSDefinition(state?: TranslatorState): string {
+    let code = '';
+
+    if (['u-button', 'u-form', 'u-modal', 'u-table-view', 'u-select', 'u-input', 'u-number-input'].includes(this.tag)) {
+      code += 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.${kebab2Camel(this.tag.replace(/^\w-/, ''))},\n`;
+      // }
+    }
+
+    if (Array.isArray(this.children)) {
+      this.children.forEach((element) => {
+        code += element.toNaturalTSDefinition(shiftState(state, code));
+      });
+    }
+    return code;
+  }
+
+  _duplicate() {
+    const element = ViewElement.from(this.toTemplateJSON());
+    const nameMap = element.deepRenameElements(this);
+
+    utils.traverse(
+      (current) => {
+        const node = current.node as any;
+        if (node.concept === 'CallLogic' && /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`;
+          }
         }
-        return bindStyle.delete();
-    }
-
-    __removeBindStyle(bindStyle: BindStyle) {
-        const parentKey = bindStyle.parentKey;
-        const params: Params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: bindStyle,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(bindStyle);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === bindStyle) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
+      },
+      { node: element },
+      { mode: 'anyObject', excludedKeySet: element.JSON_EXCLUDED_KEYS }
+    );
+
+    this.view.existingViewElement.clear();
+    return element;
+  }
+
+  // 递归遍历组件
+  public traverseChildren(cb: (ele: ViewElement) => void): void {
+    utils.traverse(
+      (current) => {
+        cb(current.node);
+      },
+      { node: this }
+    );
+  }
+
+  // 递归生成组件名
+  public deepRenameElements(node: ViewElement) {
+    const map = new Map<string, string>();
+    this.traverseChildren((ele: ViewElement) => {
+      const oldName = ele.name;
+      const tagName = ele.tag.replace(ViewElement.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
+   */
+  private static _parseExpression(value: string) {
+    try {
+      const ast = babelParser.parseExpression(value) as any;
+      const node = transAstNodeToNaslNode(ast);
+      return LogicItem.from(node, null, null);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  private static _parseValidationRule(value: string) {
+    let calleeName = value;
+    let args: any[] = [];
+    try {
+      const ast = babelParser.parseExpression(value) as any;
+      const validationNamespace = stdlibNamespace.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: any, index: number) => ({
+          concept: 'Argument',
+          name: '',
+          kind: 'Statement',
+          keyword: func?.params?.[index]?.name ?? '',
+          expression: transAstNodeToNaslNode({ ...argument }),
+        }));
+      }
+    } catch (error) { }
+
+    return {
+      concept: 'ValidationRule',
+      name: '',
+      label: '验证规则',
+      kind: 'Expression',
+      calleeNamespace: 'nasl.validation',
+      arguments: args,
+      calleeName,
+    };
+  }
+
+  /**
+   * 从 Vue 的 ASTNode 转换成 ASL 元素
+   * @param astNode Vue 的 ASTNode
+   */
+  private static _fromASTNode(astNode: compiler.ASTElement, context?: ParseContext): ViewElement {
+    const view: View = context?.view;
+    // 临时处理组件的 text
+    // h5-mock
+    if (
+      ['u-text', 'van-text', 'u-link', 'u-button', 'u-label', 'u-radio', 'u-checkbox', 'u-navbar-item', 'u-sidebar-item', 'u-menu-item'].includes(
+        astNode.tag
+      ) &&
+      astNode.children.length === 1 &&
+      astNode.children[0].type === 3
+    ) {
+      astNode.attrs = astNode.attrs || [];
+      astNode.attrs.push({
+        name: 'text',
+        value: JSON.stringify(astNode.children[0].text),
+      });
+      astNode.children = [];
+    }
+    // 将 scopedSlots 合并到 children 中
+    if (astNode.scopedSlots) {
+      astNode.children = astNode.children || [];
+      Object.keys(astNode.scopedSlots).forEach((key) => {
+        if (!astNode.children.find((child) => key === (child as compiler.ASTElement).slotTarget)) {
+          astNode.children.unshift(astNode.scopedSlots[key]);
         }
-        return params;
-    }
-
-    /**
-    * 删除页面元素
-    * @param name 页面元素名称
-    */
-    removeViewElement(name: string): void;
-
-    /**
-     * 删除页面元素
-     * @param viewElement 已有的页面元素实例
-     */
-    removeViewElement(viewElement: ViewElement): void;
-
-    removeViewElement(options: string | ViewElement) {
-        let viewElement: ViewElement;
-        if (typeof options === 'string') {
-            viewElement = (this.children as ViewElement[]).find((item) => item.name === options);
-            if (!viewElement) {
-                throw new Error('找不到页面元素 ' + options);
-            }
+      });
+      delete astNode.scopedSlots;
+    }
+
+    // 提示不支持的属性
+    [
+      'component',
+      'inlineTemplate',
+      'pre',
+      'ns',
+      'transition',
+      'transitionOnAppear',
+      'transitionMode',
+      'slotName',
+      'classBinding',
+      'styleBinding',
+    ].forEach((key) => {
+      if ((astNode as any)[key]) console.warn(`[warn] ViewElement NASL unsupports '${key}' field in node `, astNode);
+    });
+
+    let element: ViewElement;
+    if (astNode.type === 1) {
+      if (astNode.tag === 'router-view') {
+        if (view.frontend.type === 'h5') {
+          astNode.tag = 'van-router-view';
         } else {
-            viewElement = options;
+          astNode.tag = 'u-router-view';
         }
-        return viewElement.delete();
-    }
-
-    __removeViewElement(viewElement: ViewElement) {
-        const parentKey = viewElement.parentKey;
-        const params: Params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: viewElement,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(viewElement);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === viewElement) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
-        }
-        return params;
-    }
-
-    //================================================================================
-    // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
-    // 自动生成的代码已结束。下面可以手动编写。
-    //================================================================================
-
-    /* 主页面有没有权限 */
-    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.view?.getViewElementUniqueName(name);
-    }
-
-    public static readonly TAG_NAME_PREFIX_REG?: RegExp = /^([lieu]|van)[-_]/;
-
-    static from(source: any, parentNode?: any, parentKey?: string): ViewElement {
-        const node = super.from(source, parentNode, parentKey) as ViewElement;
-        if (!node.name) {
-            const tagName = node.tag.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
-            node.name = node.getViewElementUniqueName(`${tagName}1`);
-        }
-        return node;
-    }
-
-    /**
-     * 设置组件权限
-     */
-    setBindRoles(bindRoles: string[]) {
-        const object = {
-            bindRoles,
+      }
+      const tagName = astNode.tag.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+      let newContext: any = {};
+      if (context) {
+        newContext = {
+          ...context,
         };
-        this.update({
-            ...object,
-        });
-    }
-
-    getBindAttribute(name: string) {
-        return this.bindAttrs.find((bindAttr) => bindAttr.name === name);
-    }
-
-    toHump(name: string): string {
-        return name.replace(/-(\w)/g, (all, letter) => letter.toUpperCase());
-    }
-    toFirstUpper(name: string): string {
-        return name.replace(/^\S/, (s) => s.toUpperCase());
-    }
-
-    haveScope(): boolean {
-        return Boolean(this.slotScope);
-    }
-
-    toEmbeddedTSDefinition(state?: TranslatorState): string {
-        let code = '';
-        code += indent((state?.tabSize || 0) + 1);
-        // 登录组件不翻译
-        if (this.toHump(this.tag) === 'lcapLogin' || this.staticClass === 'login-form') {
-            code += `${this.name}: nasl.ui.div<any>;\n`;
-        } else if (this.tag === 'u-table-view-column-dynamic') {
-            code += `${this.name}: nasl.ui.${this.toHump(this.tag)}<any, any>;\n`;
+      }
+      element = new ViewElement({
+        tag: astNode.tag,
+        name: astNode.attrsMap.ref || view.getViewElementUniqueName(`${tagName}1`),
+        staticClass: astNode.attrsMap.class,
+        staticStyle: astNode.attrsMap.style,
+        slotTarget: astNode.slotTarget && json5.parse(astNode.slotTarget),
+        slotScope: astNode.slotScope === '_empty_' ? '' : astNode.slotScope,
+        children: astNode.children.map((item) => this._fromASTNode(item as compiler.ASTElement, newContext)) as unknown as Array<ViewElement>,
+      });
+      astNode?.attrs?.forEach((oldAttr) => {
+        let attr: BindAttribute;
+        // 获取原始属性
+        const orginAttrCode = (context?.code || '').substr((oldAttr as any).start, (oldAttr as any).end - (oldAttr as any).start);
+        if (oldAttr.value === '""' && orginAttrCode.trim() === oldAttr.name) {
+          attr = new BindAttribute({
+            type: 'static',
+            name: oldAttr.name,
+            value: 'true',
+          });
         } else {
-            code += `${this.name}: nasl.ui.${this.toHump(this.tag)}<any>;\n`;
-        }
-        if (Array.isArray(this.children)) {
-            this.children.forEach((element) => {
-                code += element.toEmbeddedTSDefinition(shiftState(state, code));
-            });
-        }
-        return code;
-    }
-
-    getTypeArgmentsStr(state?: TranslatorState): string {
-        // 登录组件不翻译
-        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;
-        }
-        const bindAttrs = this.bindAttrs;
-        if (bindAttrs && bindAttrs.length) {
-            const attr = bindAttrs.find((item) => item.name === 'data-source');
-            if (attr && attr.expression) {
-                if (this.tag === 'u-table-view-column-dynamic') {
-                    code += `<${(this.parentNode as any).__tsDataSourceTypeName}, ${(this as any).__tsDataSourceTypeName}>`;
-                } else {
-                    code += `<${(this as any).__tsDataSourceTypeName}>`;
-                }
-            }
-        }
-        return code;
-    }
-    getDatasourceTypeCodeStr(state?: TranslatorState, eleArr?: Array<ViewElement>): string {
-        let code = '';
-        (eleArr || []).forEach((element, index) => {
-            const bindAttrs = element.bindAttrs;
-            if (bindAttrs && bindAttrs.length) {
-                const attr = bindAttrs.find((item) => item.name === 'data-source');
-                if (attr && attr.expression) {
-                    const datasourceName = `datasourceName${index}`;
-                    (element as any).__tsDataSourceTypeName = datasourceName;
-                    if (attr.expression instanceof MemberExpression || attr.expression instanceof Identifier || attr.expression instanceof CallLogic) {
-                        const extraParams = {
-                            tabSize: 4,
-                            inline: true,
-                            noNeedParams: true
-                        };
-                        let value = attr.expression.toEmbeddedTS(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 += attr.expression.toEmbeddedTS(shiftState(state, code));
-                        code += '};\n';
-                        code += `type ${datasourceName} = `;
-                        code += `nasl.ui.GetItemTypeFromDataSource<ReturnType<typeof __funcName${index}>>;\n`;
-                    }
-                }
-            }
-        });
-        code += '\n';
-        code += indent((state?.tabSize || 0) + 2);
-        return code;
-    }
-    @withSourceMap()
-    toEmbeddedTS(state?: TranslatorState, parentLevel?: number): string {        
-        // 过滤模板的登录中的一些翻译，这里只过滤h5表格中的两个列
-        if ((this.parentNode as ViewElement).tag && this.toHump((this.parentNode as ViewElement).tag) === 'lcapLogin' || this.staticClass === 'login-cell')
-            return '';
-        // pc事件翻译
-        if (this.toHump(this.tag) === 'lcapLogin') {
-            let code = `new nasl.ui.div({name: __elements.${this.name},\n`;
-            // 事件
-            if (Array.isArray(this.bindEvents)) {
-                this.bindEvents.forEach((event) => {
-                    code += event.toEmbeddedTS(shiftState(state, code, {
-                        tabSize: (state?.tabSize || 0) + 2,
-                    }));
-                    code += '\n';
-                });
-            }
-
-            code += `}),\n`;
-            return code;
-        }
-        let levelIndex = parentLevel || 0;
-        if (this.tag === 'template' && this.haveScope()) {
-            const slotTarget = !this.slotTarget ? 'slotDefault' : 'slot' + this.toFirstUpper(this.toHump(this.slotTarget));
-            let code = '';
-            code += `${slotTarget}: (current${levelIndex === 0 ? '' : levelIndex})=> {\n`;
-            code += this.getDatasourceTypeCodeStr(state, this.children);
-            levelIndex++;
-            code += 'return [';
-            this.children.forEach((element) => {
-                code += element.toEmbeddedTS(shiftState(state, code, {
-                    tabSize: (state?.tabSize || 0),
-                }), levelIndex);
-            });
-            code += ']';
-            code += '\n';
-            code += '},\n';
-            return code;
-        } else if (this.tag === 'template') {
-            const slotTarget = !this.slotTarget ? 'slotDefault' : 'slot' + this.toFirstUpper(this.toHump(this.slotTarget));
-            let code = '';
-            code += `${slotTarget}: ()=> {\n`;
-            code += this.getDatasourceTypeCodeStr(state, this.children);
-            code += 'return [';
-            this.children.forEach((element) => {
-                code += element.toEmbeddedTS(shiftState(state, code, {
-                    tabSize: (state?.tabSize || 0),
-                }), levelIndex);
-            });
-            code += indent((state?.tabSize || 0) + 2);
-            code += ']';
-            code += '\n';
-            code += '},\n';
-            return code;
-        }
-        function chineseTsName(name: string) {
-            let tsName = name;
-            // 匹配所有特殊字符都转为_
-            tsName = tsName.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '_');
-            if (/^\d/.test(tsName)) {
-                tsName = '$' + tsName;
+          try {
+            const tmp = json5.parse(oldAttr.value);
+            const source: any = {
+              type: typeof tmp === 'string' ? 'string' : 'static',
+              name: oldAttr.name,
+              value: typeof tmp === 'string' ? tmp : oldAttr.value,
+            };
+            if (oldAttr.name === 'rules') {
+              source.rules = tmp?.split('|').map((ruleStr: string) => this._parseValidationRule(ruleStr.trim()));
             }
-            return tsName;
-        }
-        // 后面那个name是为了查找引用的时候用的
-        let code = `new nasl.ui.${this.toHump(this.tag)}${this.getTypeArgmentsStr(state)}({name: __elements.${this.name},\n`;
-        // 是否开启权限
-        let hasAuth = false;
-        if (Array.isArray(this.bindDirectives)) {
-            hasAuth = !!this.bindDirectives.filter((directive) => directive.name === 'auth').length;
-        }
-        // 角色
-        if (Array.isArray(this.bindRoles) && this.bindRoles.length) {
-            code += indent((state?.tabSize || 0) + 2);
-            code += 'roles = [\n';
-            this.bindRoles.forEach((role) => {
-                code += indent((state?.tabSize || 0) + 3);
-                code += `${this.app.getNamespace()}.roles.${chineseTsName(role)}.${chineseTsName(role)},`;
-                code += '\n';
+            attr = new BindAttribute(source);
+          } catch (e) {
+            const expression = <any>this._parseExpression(oldAttr.value);
+            attr = new BindAttribute({
+              type: 'dynamic',
+              name: oldAttr.name,
+              value: expression ? '' : oldAttr.value,
+              expression,
             });
-            code += indent((state?.tabSize || 0) + 2);
-            code += '],\n';
-        }
-
-        // 事件
-        if (Array.isArray(this.bindEvents)) {
-            this.bindEvents.forEach((event) => {
-                code += event.toEmbeddedTS(shiftState(state, code, {
-                    tabSize: (state?.tabSize || 0) + 2,
-                }));
-                code += '\n';
-            });
-        }
-
-        // 子元素
-        if (Array.isArray(this.children)) {
-            code += indent((state?.tabSize || 0) + 1);
-
-            if (Array.isArray(this.bindAttrs)) {
-                code += `bindAttr: () => [\n`;
-                this.bindAttrs.forEach((attr) => code += attr.toEmbeddedTS(shiftState(state, code, { tabSize: 1 })) + ',\n');
-                this.bindDirectives.forEach((directive) => code += directive.toEmbeddedTS(shiftState(state, code, { tabSize: 1 })) + ',\n');
-                this.bindStyles.forEach((bindStyle) => code += bindStyle.toEmbeddedTS(shiftState(state, code, { tabSize: 1 })) + ',\n');
-                code += indent((state?.tabSize || 0) + 2) + '],\n';
-            }
-
-            // 如果子集中有插槽的就
-            if (this.children.find((item) => item.tag === 'template' && item.slotTarget)) {
-                code += indent((state?.tabSize || 0) + 2);
-                const defaultArr: ViewElement[] = [];
-                // 先把插槽翻译了
-                this.children.forEach((element) => {
-                    if (element.tag === 'template') {
-                        code += element.toEmbeddedTS(shiftState(state, code, {
-                            tabSize: (state?.tabSize || 0),
-                        }), levelIndex);
-                    } else {
-                        defaultArr.push(element);
-                    }
-                });
-                // 翻译其余的子集
-                if (defaultArr.length) {
-                    code += indent((state?.tabSize || 0) + 2);
-                    code += `slotDefault: ()=> {\n`;
-                    code += this.getDatasourceTypeCodeStr(state, defaultArr);
-                    code += 'return [';
-                    defaultArr.forEach((element) => {
-                        code += element.toEmbeddedTS(shiftState(state, code, {
-                            tabSize: (state?.tabSize || 0) + 2,
-                        }), levelIndex);
-                        code += '\n';
-                    });
-                    code += indent((state?.tabSize || 0) + 2);
-                    code += ']\n';
-                    code += indent((state?.tabSize || 0) + 1);
-                    code += '}\n';
-                }
-            } else {
-                code += indent((state?.tabSize || 0) + 2);
-
-                code += `slotDefault: ()=> {\n`;
-                code += this.getDatasourceTypeCodeStr(state, this.children);
-                code += 'return [';
-                this.children.forEach((element) => {
-                    code += element.toEmbeddedTS(shiftState(state, code, {
-                        tabSize: (state?.tabSize || 0) + 2,
-                    }), levelIndex);
-                    code += '\n';
-                });
-                code += indent((state?.tabSize || 0) + 2);
-                code += ']\n';
-                code += indent((state?.tabSize || 0) + 1);
-                code += '}\n';
-            }
-        }
-
-        code += indent((state?.tabSize || 0)) + '}),\n';
-        
-        return code;
-    }
-
-    _duplicate() {
-        const element = ViewElement.from(this.toTemplateJSON());
-        const nameMap = element.deepRenameElements(this);
-
-        utils.traverse((current) => {
-            const node = current.node as any;
-            if (node.concept === 'CallLogic' && /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 (astNode.attrsMap[`:${attr.name}.sync`]) {
+              attr.sync = true;
             }
-        }, { node: element }, { mode: 'anyObject', excludedKeySet: element.JSON_EXCLUDED_KEYS });
-
-        this.view.existingViewElement.clear();
-        return element;
-    }
-
-    // 递归遍历组件
-    public traverseChildren(cb: (ele: ViewElement) => void): void {
-        utils.traverse((current) => {
-            cb(current.node);
-        }, { node: this });
-    }
-
-    // 递归生成组件名
-    public deepRenameElements(node: ViewElement) {
-        const map = new Map<string, string>();
-        this.traverseChildren((ele: ViewElement) => {
-            const oldName = ele.name;
-            const tagName = ele.tag.replace(ViewElement.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
-     */
-    private static _parseExpression(value: string) {
-        try {
-            const ast = babelParser.parseExpression(value) as any;
-            const node = transAstNodeToNaslNode(ast);
-            return LogicItem.from(node, null, null);
-        } catch (e) {
-            console.error(e)
-            return null;
+          }
         }
-    }
-
-    private static _parseValidationRule(value: string) {
-        let calleeName = value;
-        let args: any[] = [];
-        try {
-            const ast = babelParser.parseExpression(value) as any;
-            const validationNamespace = stdlibNamespace.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: any, index: number) => ({
-                    concept: 'Argument',
-                    name: '',
-                    kind: 'Statement',
-                    keyword: func?.params?.[index]?.name ?? '',
-                    expression: transAstNodeToNaslNode(Object.assign({}, argument)),
-                }));
+        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] as compiler.ASTElementHandler;
+            const str = oldEvent.value;
+            const calleeName = str.split('(')[0];
+            const matchArr = str.match(/\(([^)]*)\)/) || [];
+            let argsStr = '';
+            if (matchArr?.length >= 2) {
+              argsStr = matchArr[1];
             }
-        } catch (error) { }
-
-        return {
-            concept: 'ValidationRule',
-            name: '',
-            label: '验证规则',
-            kind: 'Expression',
-            calleeNamespace: 'nasl.validation',
-            arguments: args,
-            calleeName,
-        };
-    }
-
-    /**
-     * 从 Vue 的 ASTNode 转换成 ASL 元素
-     * @param astNode Vue 的 ASTNode
-     */
-    private static _fromASTNode(astNode: compiler.ASTElement, context?: ParseContext): ViewElement {
-        const view: View = context?.view;
-        // 临时处理组件的 text
-        //h5-mock
-        if (
-            ['u-text', 'van-text', 'u-link', 'u-button', 'u-label', 'u-radio', 'u-checkbox', 'u-navbar-item', 'u-sidebar-item', 'u-menu-item'].includes(astNode.tag)
-            && astNode.children.length === 1
-            && astNode.children[0].type === 3
-        ) {
-            astNode.attrs = astNode.attrs || [];
-            astNode.attrs.push({
-                name: 'text',
-                value: JSON.stringify(astNode.children[0].text),
-            });
-            astNode.children = [];
-        }
-        // 将 scopedSlots 合并到 children 中
-        if (astNode.scopedSlots) {
-            astNode.children = astNode.children || [];
-            Object.keys(astNode.scopedSlots).forEach((key) => {
-                if (!astNode.children.find((child) => key === (child as compiler.ASTElement).slotTarget)) {
-                    astNode.children.unshift(astNode.scopedSlots[key]);
-                }
-            });
-            delete astNode.scopedSlots;
-        }
-
-        // 提示不支持的属性
-        ['component', 'inlineTemplate', 'pre', 'ns', 'transition', 'transitionOnAppear', 'transitionMode', 'slotName', 'classBinding', 'styleBinding'].forEach((key) => {
-            if ((astNode as any)[key])
-                console.warn(`[warn] ViewElement NASL unsupports '${key}' field in node `, astNode);
-        });
-
-        let element: ViewElement;
-        if (astNode.type === 1) {
-            if (astNode.tag === 'router-view') {
-                if (view.frontend.type === 'h5') {
-                    astNode.tag = 'van-router-view';
-                } else {
-                    astNode.tag = 'u-router-view';
-                }
-            }
-            const tagName = astNode.tag.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
-            let newContext: any = {};
-            if (context) {
-                newContext = {
-                    ...context,
+            let args: any[] = [];
+            const argStrs: string[] = 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: Logic) => item.name === calleeName);
+            if (currentLogic) {
+              element.addBindEvent(
+                new BindEvent({
+                  name,
+                  calleeNamespace: '',
+                  calleeName: '',
+                  arguments: args,
+                  logics: [currentLogic],
+                })
+              );
             }
-            element = new ViewElement({
-                tag: astNode.tag,
-                name: astNode.attrsMap.ref || view.getViewElementUniqueName(`${tagName}1`),
-                staticClass: astNode.attrsMap.class,
-                staticStyle: astNode.attrsMap.style,
-                slotTarget: astNode.slotTarget && json5.parse(astNode.slotTarget),
-                slotScope: astNode.slotScope === '_empty_' ? '' : astNode.slotScope,
-                children: astNode.children.map((item) => this._fromASTNode(item as compiler.ASTElement, newContext)) as unknown as Array<ViewElement>,
-            });
-            astNode?.attrs?.forEach((oldAttr) => {
-                let attr: BindAttribute;
-                // 获取原始属性
-                const orginAttrCode = (context?.code || '').substr((oldAttr as any).start, (oldAttr as any).end - (oldAttr as any).start);
-                if (oldAttr.value === '""' && orginAttrCode.trim() === oldAttr.name) {
-                    attr = new BindAttribute({
-                        type: 'static',
-                        name: oldAttr.name,
-                        value: 'true',
-                    });
-                } else {
-                    try {
-                        const tmp = json5.parse(oldAttr.value);
-                        const source: any = {
-                            type: typeof tmp === 'string' ? 'string' : 'static',
-                            name: oldAttr.name,
-                            value: typeof tmp === 'string' ? tmp : oldAttr.value,
-                        };
-                        if (oldAttr.name === 'rules') {
-                            source.rules = tmp?.split('|').map((ruleStr: string) => this._parseValidationRule(ruleStr.trim()));
-                        }
-                        attr = new BindAttribute(source);
-                    } catch (e) {
-                        const expression = <any> this._parseExpression(oldAttr.value);
-                        attr = new BindAttribute({
-                            type: 'dynamic',
-                            name: 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] as compiler.ASTElementHandler;
-                        const str = oldEvent.value;
-                        const calleeName = str.split('(')[0];
-                        const matchArr = str.match(/\(([^)]*)\)/) || [];
-                        let argsStr = '';
-                        if (matchArr?.length >= 2) {
-                            argsStr = matchArr[1];
-                        }
-                        let args: any[] = [];
-                        const argStrs: string[] = 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: Logic) => 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 = <any> this._parseExpression(directive.value);
-                            element.addBindAttribute(new BindAttribute({
-                                type: 'dynamic',
-                                name: 'value',
-                                value: expression ? '' : directive.value,
-                                expression,
-                                sync: true,
-                            }));
-                        }
-                    } else {
-                        const expression = <any> 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: <any> this._parseExpression(astNode.if),
-                }));
+          });
+
+      astNode.directives &&
+        astNode.directives.forEach((directive) => {
+          if (directive.name === 'model') {
+            const valueAttr = astNode.attrs && astNode.attrs.find((attr) => attr.name === 'value');
+            if (!valueAttr) {
+              const expression = <any>this._parseExpression(directive.value);
+              element.addBindAttribute(
+                new BindAttribute({
+                  type: 'dynamic',
+                  name: 'value',
+                  value: expression ? '' : directive.value,
+                  expression,
+                  sync: true,
+                })
+              );
             }
-        } else if (astNode.type === 2) {
-            const tagName = config.scope === 'h5' ? 'van-text' : 'u-text';
-            const baseName = tagName.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
-            element = new ViewElement({
-                tag: tagName,
-                name: view.getViewElementUniqueName(`${baseName}1`),
-            });
-            const value = astNode.text?.match(/{{(.*?)}}/)[1].trim();
-            const expression = <any> this._parseExpression(value);
-            element.addBindAttribute(new BindAttribute({
-                type: 'dynamic',
-                name: 'text',
-                value: expression ? '' : value,
+          } else {
+            const expression = <any>this._parseExpression(directive.value);
+            element.addBindDirective(
+              new BindDirective({
+                type: expression ? 'string' : 'dynamic',
+                name: directive.name,
+                rawName: directive.rawName,
+                value: expression ? '' : directive.value,
                 expression,
-            }));
-        } else if (astNode.type === 3) {
-            const tagName = config.scope === 'h5' ? 'van-text' : 'u-text';
-            const baseName = tagName.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
-            element = new ViewElement({
-                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 处理多个元素的问题
-     */
-    public static parse(code: string, context?: ParseContext) {
-        code = code || '<div></div>';
-
-        const compilerOptions: compiler.CompilerOptions = {
-            preserveWhitespace: false,
-            outputSourceRange: true,
-        };
-
-        let ast = compiler.compile(code, compilerOptions).ast;
-        if (ast.tag === 'template' && !ast.slotTarget)
-            ast = ast.children[0] as compiler.ASTElement;
-        return this._fromASTNode(ast, {
-            ...context,
-            code,
+                arg: directive.arg,
+                // modifiers: directive.modifiers,
+              })
+            );
+          }
         });
-    }
-
-    /**
-     * 从模板生成规范的 ViewElement 对象
-     */
-    public static fromHTML(html: string, context?: ParseContext) {
-        return this.parse(html, context);
-    }
-
-    /**
-     * 转换成设计器中使用的 Vue 文件
-     * @param options
-     */
-    toDesignerVue() {
-        return this.toVue({
-            finalCode: false,
-            nodePathAttr: true,
-            attrFormat: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => {
-                if (attr.concept === 'BindAttribute' && !['href', 'destination', 'externalDestination', 'download'].includes(attr.name)) {
-                    const api = config?.allNodesAPI?.[element.tag];
-                    const apiOfAttr = api && api.attrs && api.attrs.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['designer-value'] !== undefined) {
-                        let designerValue = apiOfAttr['designer-value'];
-                        //对流程模板拖拽进行特判
-                        element.bindAttrs.forEach((property) => {
-                            if (property.name === 'repeat' && property.value === '1')
-                                designerValue = '[{}, {}]';
-                        });
-                        if (typeof designerValue === 'string') {
-                            designerValue = designerValue.replace(/"/g, "'");
-                        }
-                        try {
-                            json5.parse(designerValue);
-                            return `:${attr.name}="${designerValue}"`;
-                        } catch (e) {
-                            return `${attr.name}="${designerValue}"`;
-                        }
-                    }
-                    if ((attr as BindAttribute).type === 'dynamic' && !(element.tag === 'u-cascade-select' && attr.name === 'categories'))
-                        return defaultResult.replace(/:?([\w-]+)(?:.*?)="(.*)"/, (m, name, value) => {
-                            try {
-                                const tempValue = json5.parse(value);
-                                if (typeof tempValue === 'boolean' || typeof tempValue === 'number') {
-                                    // 简单类型走属性
-                                    return `:${name}="${value.replace(/"/g, "'")}"`;
-                                }
-                            } catch (e) {
-                                if (apiOfAttr && !apiOfAttr.type.includes('string'))
-                                    return '';
-                            }
-                            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, '');
-                            return `${name}="{{ ${value} }}"`;
-                        });
-                    else
-                        return defaultResult;
-                }
-                return false;
-            },
-            bindStylesFormat: (bindStyles: BindStyle[], element?: ViewElement) => false,
-            getExtraParts: (el: ViewElement) => {
-                const parts = [];
-                const api = config.allNodesAPI[el.tag];
-                const emptySlot = api && api.slots && api.slots.find((slot) => slot.name === 'default' && slot['empty-background']);
-                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 === 'data-source');
-                            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['empty-background']) || (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;
-            },
-        });
-    }
-
-    // 获取currentList
-    getCurrentList() {
-        const argsList: string[] = [];
-        let parent = this.parentNode;
-        let index = 0;
-        while (parent && parent.concept !== 'View') {
-            if ((parent as ViewElement).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}`;
+      if (astNode.if) {
+        element.addBindDirective(
+          new BindDirective({
+            type: 'dynamic',
+            name: 'if',
+            rawName: 'v-if',
+            value: '',
+            expression: <any>this._parseExpression(astNode.if),
+          })
+        );
+      }
+    } else if (astNode.type === 2) {
+      const tagName = config.scope === 'h5' ? 'van-text' : 'u-text';
+      const baseName = tagName.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+      element = new ViewElement({
+        tag: tagName,
+        name: view.getViewElementUniqueName(`${baseName}1`),
+      });
+      const value = astNode.text?.match(/{{(.*?)}}/)[1].trim();
+      const expression = <any>this._parseExpression(value);
+      element.addBindAttribute(
+        new BindAttribute({
+          type: 'dynamic',
+          name: 'text',
+          value: expression ? '' : value,
+          expression,
+        })
+      );
+    } else if (astNode.type === 3) {
+      const tagName = config.scope === 'h5' ? 'van-text' : 'u-text';
+      const baseName = tagName.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+      element = new ViewElement({
+        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 处理多个元素的问题
+   */
+  public static parse(code: string, context?: ParseContext) {
+    code = code || '<div></div>';
+
+    const compilerOptions: compiler.CompilerOptions = {
+      preserveWhitespace: false,
+      outputSourceRange: true,
+    };
+
+    let { ast } = compiler.compile(code, compilerOptions);
+    if (ast.tag === 'template' && !ast.slotTarget) ast = ast.children[0] as compiler.ASTElement;
+    return this._fromASTNode(ast, {
+      ...context,
+      code,
+    });
+  }
+
+  /**
+   * 从模板生成规范的 ViewElement 对象
+   */
+  public static fromHTML(html: string, context?: ParseContext) {
+    return this.parse(html, context);
+  }
+
+  /**
+   * 转换成设计器中使用的 Vue 文件
+   * @param options
+   */
+  toDesignerVue() {
+    return this.toVue({
+      finalCode: false,
+      nodePathAttr: true,
+      attrFormat: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => {
+        if (attr.concept === 'BindAttribute' && !['href', 'destination', 'externalDestination', 'download'].includes(attr.name)) {
+          const api = config?.allNodesAPI?.[element.tag];
+          const apiOfAttr = api && api.attrs && api.attrs.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['designer-value'] !== undefined) {
+            let designerValue = apiOfAttr['designer-value'];
+            // 对流程模板拖拽进行特判
+            element.bindAttrs.forEach((property) => {
+              if (property.name === 'repeat' && property.value === '1') designerValue = '[{}, {}]';
             });
-        }
-        return refName;
-    }
-
-    /**
-     * 转换成 Vue 的模板格式
-     */
-    toVue(options?: ElementToVueOptions) {
-        let currentList: string[] = [];
-        if (Array.isArray(options?.currentList)) {
-            currentList = [...options?.currentList];
-        }
-        if (this.slotScope) {
-            currentList.unshift(this.slotScope);
-        }
-
-        const newOptions: ElementToVueOptions = Object.assign({
-            indentStyle: 'space',
-            tabSize: 4,
-            indentLevel: 0,
-            aslIdAttr: false,
-            nodePathAttr: false,
-            getExtraParts: () => [],
-            attrFormat: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => defaultResult,
-            bindStylesFormat: (bindStyles: BindStyle[], element?: ViewElement) => {
-                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;
-        const content: string = !this.children ? '' : this.children
-            .map((element) => {
-                const childOptions = Object.assign({}, newOptions);
-                childOptions.indentLevel++;
-                return (shouldIndent ? '\n' + insideTabString : '') + element?.toVue(childOptions);
-            })
-            .join('');
-        if (!content.length) {
-            shouldIndent = false;
-        }
-        const parts: string[] = [];
-        if (newOptions.aslIdAttr) {
-            if (newOptions.aslIdAttr === true) {
-                newOptions.aslIdAttr = 'asl-id';
+            if (typeof designerValue === 'string') {
+              designerValue = designerValue.replace(/"/g, "'");
             }
-            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.staticClass && parts.push(`class="${this.staticClass}"`);
-        this.staticStyle && parts.push(`style="${this.staticStyle}"`);
-
-        const vIfs: string[] = [];
-        [].concat(this.bindAttrs, this.bindDirectives, this.bindEvents).forEach((attr: BindAttribute | BindDirective | BindEvent) => {
-            const result = newOptions.attrFormat(attr, this, attr?.toVue(newOptions));
-
-            // v-auth v-if 都翻译成 v-if
-            if (attr instanceof BindDirective && ['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;
+            try {
+              json5.parse(designerValue);
+              return `:${attr.name}="${designerValue}"`;
+            } catch (e) {
+              return `${attr.name}="${designerValue}"`;
             }
-
-            result && parts.push(result);
-        });
-
-        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`);
+          }
+          if ((attr as BindAttribute).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.includes('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, '');
+              return `${name}="{{ ${value} }}"`;
             });
+          return defaultResult;
         }
-        // 部分组件增加 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 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;
+        return false;
+      },
+      bindStylesFormat: (bindStyles: BindStyle[], element?: ViewElement) => false,
+      getExtraParts: (el: ViewElement) => {
+        const parts = [];
+
+        const api = config.allNodesAPI[el.tag];
+        const emptySlot = api && api.slots && api.slots.find((slot) => slot.name === 'default' && slot['empty-background']);
+        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 === 'data-source');
+              addEmpty = !hasDataSource;
             }
-            partsString += ' ' + part;
-            partsLength += part.length;
-        });
-        let htmlContent = `<${this.tag}${partsString.length ? partsString : ''}>` + content + (shouldIndent ? '\n' + tabString : '') + `</${this.tag}>`;
-        if (!content.trim() && selfClosingTag.includes(this.tag)) {
-            htmlContent = `<${this.tag}${partsString.length ? partsString : ''} />`;
-        }
-        return htmlContent;
-    }
-
-    /**
-     * 从父级删除该节点
-     * @internal
-     */
-    delete() {
-        super.delete();
-        if (this.parentNode) {
-            this.traverseChildren((ele: ViewElement) => {
-                (this.view as any)?.removeExistingViewElement(ele);
-            });
-        }
-    }
-
-    findElementByName(name: string): ViewElement {
-        return utils.traverse((current) => {
-            if (current.node.name === name)
-                return current.node;
-        }, { node: this });
-    }
-
-    findElementByTag(tag: string): ViewElement {
-        return utils.traverse((current) => {
-            if (current.node.tag === tag)
-                return current.node;
-        }, { node: this });
-    }
-
-    findElementByAttr(name: string, value: string): ViewElement {
-        return utils.traverse((current) => {
-            if (current.node.bindAttrs.some((attr) => attr.name === name && attr.value === value))
-                return current.node;
-        }, { node: this });
-    }
-
-    @excludedInJSON()
-    computedStyle: object = {};
-    getCurrentName() {
-        let current = 'current';
-        let parent = this.parentNode;
-        let index = 0;
-        while (parent && parent.concept !== 'View') {
-            if ((parent as ViewElement).slotScope) {
-                index++;
+            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;
             }
-            parent = parent.parentNode;
+            const background = (emptySlot && emptySlot['empty-background']) || (hasSupport ? 'add-sub' : '');
+            addEmpty && parts.push(`vusion-empty-background="${background}"`);
+          }
         }
-        current = (index === 0 ? 'current' : 'current' + index);
-        return current;
-    }
 
-    /**
-     * 计算约束样式
-     * @param positionData 位置数据
-     * @param doNotRecordLastWidthHeight 是否不记录上一次的宽高
-     */
-    computeConstraintStyle(positionData: { 
-            nodeRect: DOMRect, 
-            parentRect: DOMRect, 
-            parentBorder: { top: number, right: number, bottom: number, left: number }
-        }, 
-        doNotRecordLastWidthHeight = false) {
-        const {nodeRect, parentRect, parentBorder} = positionData;
-        const staticWidth = nodeRect.width;
-        const staticHeight = nodeRect.height;
-        const staticLeft = nodeRect.x - parentRect.x - parentBorder.left;
-        const staticTop = nodeRect.y - parentRect.y - parentBorder.top;
-        const staticRight = (parentRect.width - nodeRect.width - staticLeft - parentBorder.right - parentBorder.left);
-        const staticBottom = (parentRect.height - nodeRect.height - staticTop - parentBorder.bottom - parentBorder.top);
-        const styleObj = this.parseStyleToObject(this.staticStyle);
-        const constraintX = styleObj['--constraint-x'] || 'left';
-        const constraintY = styleObj['--constraint-y'] || 'top';
-        const rawWidth = styleObj.width || '';
-        const rawHeight = styleObj.height || '';
-        let left = '';
-        let right = '';
-        let top = '';
-        let bottom = '';
-        let transform = '';
-        // 如果宽高被约束规则改成 auto 了，就还原为上次的宽高，防止用户设置的宽高信息在切换约束时候丢失
-        let width = Number(styleObj['--constraint-width-auto']) ? styleObj['--last-width'] : rawWidth;
-        let height = Number(styleObj['--constraint-height-auto']) ? styleObj['--last-height'] : rawHeight;
-        // 用于记录宽高是否被约束规则改成 auto 了
-        let constraintWidthAuto = 0;
-        let constraintHeightAuto = 0;
-
-        const parentWidth = staticLeft + staticWidth + staticRight;
-        const parentHeight = staticTop + staticHeight + staticBottom;
-
-        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 + '%';
-            constraintWidthAuto = 1;
-        } else if (constraintX === 'left-right') {
-            left = staticLeft + 'px';
-            right = staticRight + 'px';
-            width = 'auto';
-            constraintWidthAuto = 1;
+        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"');
+          }
         }
 
-        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 + '%';
-            constraintHeightAuto = 1;
-        } else if (constraintY === 'top-bottom') {
-            top = staticTop + 'px';
-            bottom = staticBottom + 'px';
-            height = 'auto';
-            constraintHeightAuto = 1;
-        }
-        const newStyleObj: Record<string, any> = {
-            ...styleObj,
-            left,
-            right,
-            top,
-            bottom,
-            transform,
-            width,
-            height,
-            '--constraint-width-auto': constraintWidthAuto,
-            '--constraint-height-auto': constraintHeightAuto,
-            // 如果上次已经是 auto 了，就用上上次的宽高
-            '--last-width': rawWidth === 'auto' ? styleObj['--last-width'] : rawWidth,
-            '--last-height': rawHeight === 'auto' ? styleObj['--last-height'] : rawHeight,
-        };
-        if(!doNotRecordLastWidthHeight){
-            if(rawWidth !== 'auto'){
-                newStyleObj['--last-width'] = rawWidth;
-            }
-            if(rawHeight !== 'auto'){
-                newStyleObj['--last-height'] = rawHeight;
-            }
+        return parts;
+      },
+    });
+  }
+
+  // 获取currentList
+  getCurrentList() {
+    const argsList: string[] = [];
+    let parent = this.parentNode;
+    let index = 0;
+    while (parent && parent.concept !== 'View') {
+      if ((parent as ViewElement).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;
+  }
+
+  /**
+   * 转换成 Vue 的模板格式
+   */
+  toVue(options?: ElementToVueOptions) {
+    let currentList: string[] = [];
+    if (Array.isArray(options?.currentList)) {
+      currentList = [...options?.currentList];
+    }
+    if (this.slotScope) {
+      currentList.unshift(this.slotScope);
+    }
+
+    const newOptions: ElementToVueOptions = {
+      indentStyle: 'space',
+      tabSize: 4,
+      indentLevel: 0,
+      aslIdAttr: false,
+      nodePathAttr: false,
+      getExtraParts: () => [],
+      attrFormat: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => defaultResult,
+      bindStylesFormat: (bindStyles: BindStyle[], element?: ViewElement) => {
+        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;
+    const content: string = !this.children
+      ? ''
+      : this.children
+        .map((element) => {
+          const childOptions = { ...newOptions };
+          childOptions.indentLevel++;
+          return (shouldIndent ? `\n${insideTabString}` : '') + element?.toVue(childOptions);
+        })
+        .join('');
+    if (!content.length) {
+      shouldIndent = false;
+    }
+    const parts: string[] = [];
+    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.staticClass && parts.push(`class="${this.staticClass}"`);
+    this.staticStyle && parts.push(`style="${this.staticStyle}"`);
+
+    const vIfs: string[] = [];
+    [].concat(this.bindAttrs, this.bindDirectives, this.bindEvents).forEach((attr: BindAttribute | BindDirective | BindEvent) => {
+      const result = newOptions.attrFormat(attr, this, attr?.toVue(newOptions));
+
+      // v-auth v-if 都翻译成 v-if
+      if (attr instanceof BindDirective && ['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);
+    });
+
+    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`);
         }
-        const newStaticStyle = this.stringifyStyleAttr(newStyleObj);
-        this.update({
-            staticStyle: newStaticStyle,
-        });
-    }
-    updateStyleObj(styleObj: Record<string, string | number>) {
-        this.setStaticStyle(this.stringifyStyleAttr({
-            ...this.parseStyleToObject(this.staticStyle),
-            ...styleObj,
-        }));
-    }
-    parseStyleToObject(styleStr: string = '') {
-        const styleObj = styleStr.split(/;/gim).reduce((obj:Record<string, string | number>, 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;
-        }, {});
-        return styleObj;
-    }
-    stringifyStyleAttr(styleObj: Record<string, string | number>) {
-        return Object.keys(styleObj)
-            .map((key) => `${key}:${String(styleObj[key]).trim()};`)
-            .join('');
-    }
-    //================================================================================
-    // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
-    // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
-    //================================================================================
+      });
+    }
+    // 部分组件增加 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 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 = `<${this.tag}${partsString.length ? partsString : ''}>${content}${shouldIndent ? `\n${tabString}` : ''}</${this.tag}>`;
+    if (!content.trim() && selfClosingTag.includes(this.tag)) {
+      htmlContent = `<${this.tag}${partsString.length ? partsString : ''} />`;
+    }
+    return htmlContent;
+  }
+
+  /**
+   * 从父级删除该节点
+   * @internal
+   */
+  delete() {
+    super.delete();
+    if (this.parentNode) {
+      this.traverseChildren((ele: ViewElement) => {
+        (this.view as any)?.removeExistingViewElement(ele);
+      });
+    }
+  }
+
+  findElementByName(name: string): ViewElement {
+    return utils.traverse(
+      (current) => {
+        if (current.node.name === name) return current.node;
+      },
+      { node: this }
+    );
+  }
+
+  findElementByTag(tag: string): ViewElement {
+    return utils.traverse(
+      (current) => {
+        if (current.node.tag === tag) return current.node;
+      },
+      { node: this }
+    );
+  }
+
+  findElementByAttr(name: string, value: string): ViewElement {
+    return utils.traverse(
+      (current) => {
+        if (current.node.bindAttrs.some((attr) => attr.name === name && attr.value === value)) return current.node;
+      },
+      { node: this }
+    );
+  }
+
+  @excludedInJSON()
+  computedStyle: object = {};
+
+  getCurrentName() {
+    let current = 'current';
+    let parent = this.parentNode;
+    let index = 0;
+    while (parent && parent.concept !== 'View') {
+      if ((parent as ViewElement).slotScope) {
+        index++;
+      }
+      parent = parent.parentNode;
+    }
+    current = index === 0 ? 'current' : `current${index}`;
+    return current;
+  }
+
+  /**
+   * 计算约束样式
+   * @param positionData 位置数据
+   * @param doNotRecordLastWidthHeight 是否不记录上一次的宽高
+   */
+  computeConstraintStyle(
+    positionData: {
+      nodeRect: DOMRect;
+      parentRect: DOMRect;
+      parentBorder: { top: number; right: number; bottom: number; left: number };
+    },
+    ops: {
+      doNotRecordLastWidthHeight?: boolean;
+      beforeSetStyleCb?: (newStyleObj: Record<string, any>) => void;
+    } = {}
+  ) {
+    const { nodeRect, parentRect, parentBorder } = positionData;
+    const staticWidth = nodeRect.width;
+    const staticHeight = nodeRect.height;
+    const staticLeft = nodeRect.left - parentRect.left - parentBorder.left;
+    const staticTop = nodeRect.top - parentRect.top - parentBorder.top;
+    const staticRight = parentRect.width - nodeRect.width - staticLeft - parentBorder.right - parentBorder.left;
+    const staticBottom = parentRect.height - nodeRect.height - staticTop - parentBorder.bottom - parentBorder.top;
+    const styleObj = this.parseStyleToObject(this.staticStyle);
+    const constraintX = styleObj['--constraint-x'] || 'left';
+    const constraintY = styleObj['--constraint-y'] || 'top';
+    const rawWidth = styleObj.width || '';
+    const rawHeight = styleObj.height || '';
+    let left = '';
+    let right = '';
+    let top = '';
+    let bottom = '';
+    let transform = '';
+    // 如果宽高被约束规则改成 auto 了，就还原为上次的宽高，防止用户设置的宽高信息在切换约束时候丢失
+    let width = Number(styleObj['--constraint-width-auto']) ? styleObj['--last-width'] : rawWidth;
+    let height = Number(styleObj['--constraint-height-auto']) ? styleObj['--last-height'] : rawHeight;
+    // 用于记录宽高是否被约束规则改成 auto 了
+    let constraintWidthAuto = 0;
+    let constraintHeightAuto = 0;
+
+    const parentWidth = staticLeft + staticWidth + staticRight;
+    const parentHeight = staticTop + staticHeight + staticBottom;
+
+    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}%`;
+      constraintWidthAuto = 1;
+    } else if (constraintX === 'left-right') {
+      left = `${staticLeft}px`;
+      right = `${staticRight}px`;
+      width = 'auto';
+      constraintWidthAuto = 1;
+    }
+
+    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}%`;
+      constraintHeightAuto = 1;
+    } else if (constraintY === 'top-bottom') {
+      top = `${staticTop}px`;
+      bottom = `${staticBottom}px`;
+      height = 'auto';
+      constraintHeightAuto = 1;
+    }
+    const newStyleObj: Record<string, any> = {
+      ...styleObj,
+      left,
+      right,
+      top,
+      bottom,
+      transform,
+      width,
+      height,
+      '--constraint-width-auto': constraintWidthAuto,
+      '--constraint-height-auto': constraintHeightAuto,
+    };
+    if (!ops.doNotRecordLastWidthHeight) {
+      if (rawWidth !== 'auto') {
+        newStyleObj['--last-width'] = rawWidth;
+      }
+      if (rawHeight !== 'auto') {
+        newStyleObj['--last-height'] = rawHeight;
+      }
+    }
+    ops.beforeSetStyleCb?.(newStyleObj);
+    const newStaticStyle = this.stringifyStyleAttr(newStyleObj);
+    this.setStaticStyle(newStaticStyle);
+  }
+
+  updateStyleObj(styleObj: Record<string, string | number>) {
+    this.setStaticStyle(
+      this.stringifyStyleAttr({
+        ...this.parseStyleToObject(this.staticStyle),
+        ...styleObj,
+      })
+    );
+  }
+
+  parseStyleToObject(styleStr: string = '') {
+    const styleObj = styleStr.split(/;/gim).reduce((obj: Record<string, string | number>, 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;
+    }, {});
+    return styleObj;
+  }
+
+  stringifyStyleAttr(styleObj: Record<string, string | number>) {
+    return (
+      Object.keys(styleObj)
+        // 空字符串是允许的，因为有时候想要覆盖之前的样式。undefined 则不允许
+        .filter((key) => styleObj[key] !== undefined)
+        .map((key) => `${key}:${String(styleObj[key]).trim()};`)
+        .join('')
+    );
+  }
+
+  // 批量更新绑定属性
+  batchUpdateBindAttrs(attrOptions: Record<string, any>[]) {
+    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],
+    });
+  }
+  //= ===============================================================================
+  // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
+  // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
+  //= ===============================================================================
 }
 
 classMap.ViewElement = ViewElement;
 export default ViewElement;
-//================================================================================
+//= ===============================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
 // 自动生成的代码已结束。下面可以手动编写。
-//================================================================================
+//= ===============================================================================