@lcap/nasl 3.7.0-alpha.1 → 3.7.0-beta.1

package/src/concepts/ViewElement__.ts

@@ -23,6 +23,7 @@ import type Identifier from './Identifier__';
 import { PAGE_COMPONENT_INCLUDE_TAG_MAP } from './View__';
 import type BusinessComponent from './BusinessComponent__';
 import type FrontendType from './FrontendType__';
+import { ComponentCompletionPropertyMap } from './View__';
 
 import { kebab2Camel } from '../utils';
 export interface ParseContext {
@@ -245,6 +246,13 @@ function transAstNodeToNaslNode(astNode: any, namespace?: string): any {
       undefined,
       'logics',
     );
+  } else if (astNode.type === 'LogicalExpression' || astNode.type === 'BinaryExpression') {
+    node = {
+      concept: 'BinaryExpression',
+      operator: astNode.operator,
+      left: transAstNodeToNaslNode(astNode.left),
+      right: transAstNodeToNaslNode(astNode.right),
+    };
   } else {
     node = astNode;
     node.concept = astNode.type;
@@ -269,33 +277,34 @@ function transAstNodeToNaslTypeNode(astNode: any, namespace?: string): any {
   return node;
 }
 
-function isLockField(node?:any):boolean {
-    if (!node || node.concept !== 'ViewElement') return false;
-    const attr = node?.bindAttrs?.find((attr: any) => ['FormDesignerLocked','TableDesignerLocked'].includes(attr.name))?.value
-    if (attr === undefined) return !!isLockField(node?.parentNode);
-    else return !!attr
+function isLockField(node?: any): boolean {
+  if (!node || node.concept !== 'ViewElement') return false;
+  const attr = node?.bindAttrs?.find((attr: any) =>
+    ['FormDesignerLocked', 'TableDesignerLocked'].includes(attr.name),
+  )?.value;
+  if (attr === undefined) return !!isLockField(node?.parentNode);
+  else return !!attr;
 }
 
+import View from './View__';
+import Module from './Module__';
+import Frontend from './Frontend__';
 //================================================================================
 // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
 // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
 //================================================================================
 import { EventPayload, Params } from '../common/EventEmitter';
-import { concept, excludedInJSON, property, getConceptConstructor, getBaseNode } from '../decorators';
+import { concept, excludedInJSON, property, getConceptConstructor } from '../decorators';
 
 import * as utils from '../utils';
 import * as types from './utils/types';
 import * as asserts from './utils/asserts';
 import { v4 as uuidv4 } from 'uuid';
 import BaseNode from '../common/BaseNode';
-import type BindAttribute from './BindAttribute__';
-import type BindEvent from './BindEvent__';
-import type BindDirective from './BindDirective__';
-import type BindStyle from './BindStyle__';
-import type View from './View__';
-import type Module from './Module__';
-import type App from './App__';
-import type Frontend from './Frontend__';
+import BindAttribute from './BindAttribute__';
+import BindEvent from './BindEvent__';
+import BindDirective from './BindDirective__';
+import BindStyle from './BindStyle__';
 
 /**
  * 页面元素
@@ -304,7 +313,11 @@ import type Frontend from './Frontend__';
 export class ViewElement extends BaseNode {
   /** 类名 */
   static readonly ConceptName: string = 'ViewElement';
-
+  /**
+   * 是否为抽象类
+   * 抽象类不能产生 concept: string
+   */
+  static isAbstract: boolean = false;
   /** 继承链 */
   static readonly inheritanceChain: string[] = ['BaseNode'];
 
@@ -314,54 +327,69 @@ export class ViewElement extends BaseNode {
   @property('concept')
   // @ts-ignore
   readonly concept!: 'ViewElement';
-
   /**
    * 类型
    */
-  @property()
-  type!: 0;
+  @property({
+    objectRef: '',
+  })
+  type: 0;
 
   /**
    * 元素标签
    */
-  @property()
-  tag!: string;
+  @property({
+    objectRef: '',
+  })
+  tag: string;
 
   /**
    * 页面元素名称
    */
-  @property()
-  name!: string;
+  @property({
+    objectRef: '',
+  })
+  name: string = '';
 
   /**
    * 静态 class 名
    */
-  @property()
-  staticClass!: string;
+  @property({
+    objectRef: '',
+  })
+  staticClass: string;
 
   /**
    * 静态 style
    */
-  @property()
-  staticStyle!: string;
+  @property({
+    objectRef: '',
+  })
+  staticStyle: string;
 
   /**
    * 权限资源描述
    */
-  @property()
-  authDescription!: string;
+  @property({
+    objectRef: '',
+  })
+  authDescription: string;
 
   /**
    * 插槽目标
    */
-  @property()
-  slotTarget!: string;
+  @property({
+    objectRef: '',
+  })
+  slotTarget: string;
 
   /**
    * 插槽 scope 表达式
    */
-  @property()
-  slotScope!: string;
+  @property({
+    objectRef: '',
+  })
+  slotScope: string;
 
   /**
    * 元素绑定属性列表
@@ -397,6 +425,7 @@ export class ViewElement extends BaseNode {
    * 绑定的角色
    */
   @property({
+    objectRef: '',
     isArray: true,
     defaultValue: [],
   })
@@ -422,31 +451,6 @@ export class ViewElement extends BaseNode {
   })
   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 需要合并的部分参数
    */
@@ -456,17 +460,6 @@ export class ViewElement extends BaseNode {
     super.subConstructor(source);
   }
 
-  /**
-   * 从父级删除该节点
-   * @internal
-   */
-  _delete() {
-    let params: Params = null;
-    if (this.parentNode) {
-      params = (this.parentNode as any)?.__removeViewElement?.(this);
-    }
-    return params;
-  }
   /**
    * 设置页面元素名称
    */
@@ -508,7 +501,7 @@ export class ViewElement extends BaseNode {
     const excludedSet = new Set(excludedList);
     return ((this.bindAttrs as BindAttribute[]) || [])
       .filter((item) => !excludedSet.has(item))
-      .map((item) => item?.name);
+      .map((item) => item.name);
   }
   getBindAttributeUniqueName(name = 'bindAttribute1') {
     return utils.unique(name, this.getBindAttributeExistingNames(), undefined, false);
@@ -662,7 +655,7 @@ export class ViewElement extends BaseNode {
 
   getBindEventExistingNames(excludedList: Array<BindEvent> = []) {
     const excludedSet = new Set(excludedList);
-    return ((this.bindEvents as BindEvent[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item?.name);
+    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);
@@ -818,7 +811,7 @@ export class ViewElement extends BaseNode {
     const excludedSet = new Set(excludedList);
     return ((this.bindDirectives as BindDirective[]) || [])
       .filter((item) => !excludedSet.has(item))
-      .map((item) => item?.name);
+      .map((item) => item.name);
   }
   getBindDirectiveUniqueName(name = 'bindDirective1') {
     return utils.unique(name, this.getBindDirectiveExistingNames(), undefined, false);
@@ -972,7 +965,7 @@ export class ViewElement extends BaseNode {
 
   getBindStyleExistingNames(excludedList: Array<BindStyle> = []) {
     const excludedSet = new Set(excludedList);
-    return ((this.bindStyles as BindStyle[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item?.name);
+    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);
@@ -1295,37 +1288,6 @@ export class ViewElement extends BaseNode {
     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;
-      // @ts-ignore
-      const t = this.__v_raw || this;
-      // @ts-ignore
-      const n = bindAttribute.__v_raw || bindAttribute;
-      if (Array.isArray((t as any)[parentKey])) {
-        // @ts-ignore
-        const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
-        ~index && (this as any)[parentKey].splice(index, 1);
-        params.index = index;
-      } else {
-        const q = (t as any)[parentKey];
-        if ((q.__v_raw || q) === n) {
-          params.index = 0;
-          (this as any)[parentKey] = undefined;
-        }
-      }
-    }
-    return params;
-  }
-
   /**
    * 删除元素绑定事件
    * @param name 元素绑定事件名称
@@ -1351,37 +1313,6 @@ export class ViewElement extends BaseNode {
     return bindEvent.delete();
   }
 
-  __removeBindEvent(bindEvent: BindEvent) {
-    const parentKey = bindEvent.parentKey;
-    const params: Params = {
-      parentNode: this,
-      parentKey,
-      index: -1,
-      object: null,
-      oldObject: bindEvent,
-    };
-    if (parentKey) {
-      params.parentKey = parentKey;
-      // @ts-ignore
-      const t = this.__v_raw || this;
-      // @ts-ignore
-      const n = bindEvent.__v_raw || bindEvent;
-      if (Array.isArray((t as any)[parentKey])) {
-        // @ts-ignore
-        const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
-        ~index && (this as any)[parentKey].splice(index, 1);
-        params.index = index;
-      } else {
-        const q = (t as any)[parentKey];
-        if ((q.__v_raw || q) === n) {
-          params.index = 0;
-          (this as any)[parentKey] = undefined;
-        }
-      }
-    }
-    return params;
-  }
-
   /**
    * 删除元素指令
    * @param name 元素指令名称
@@ -1407,37 +1338,6 @@ export class ViewElement extends BaseNode {
     return bindDirective.delete();
   }
 
-  __removeBindDirective(bindDirective: BindDirective) {
-    const parentKey = bindDirective.parentKey;
-    const params: Params = {
-      parentNode: this,
-      parentKey,
-      index: -1,
-      object: null,
-      oldObject: bindDirective,
-    };
-    if (parentKey) {
-      params.parentKey = parentKey;
-      // @ts-ignore
-      const t = this.__v_raw || this;
-      // @ts-ignore
-      const n = bindDirective.__v_raw || bindDirective;
-      if (Array.isArray((t as any)[parentKey])) {
-        // @ts-ignore
-        const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
-        ~index && (this as any)[parentKey].splice(index, 1);
-        params.index = index;
-      } else {
-        const q = (t as any)[parentKey];
-        if ((q.__v_raw || q) === n) {
-          params.index = 0;
-          (this as any)[parentKey] = undefined;
-        }
-      }
-    }
-    return params;
-  }
-
   /**
    * 删除元素绑定样式
    * @param name 元素绑定样式名称
@@ -1463,37 +1363,6 @@ export class ViewElement extends BaseNode {
     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;
-      // @ts-ignore
-      const t = this.__v_raw || this;
-      // @ts-ignore
-      const n = bindStyle.__v_raw || bindStyle;
-      if (Array.isArray((t as any)[parentKey])) {
-        // @ts-ignore
-        const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
-        ~index && (this as any)[parentKey].splice(index, 1);
-        params.index = index;
-      } else {
-        const q = (t as any)[parentKey];
-        if ((q.__v_raw || q) === n) {
-          params.index = 0;
-          (this as any)[parentKey] = undefined;
-        }
-      }
-    }
-    return params;
-  }
-
   /**
    * 删除页面元素
    * @param name 页面元素名称
@@ -1519,41 +1388,28 @@ export class ViewElement extends BaseNode {
     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;
-      // @ts-ignore
-      const t = this.__v_raw || this;
-      // @ts-ignore
-      const n = viewElement.__v_raw || viewElement;
-      if (Array.isArray((t as any)[parentKey])) {
-        // @ts-ignore
-        const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
-        ~index && (this as any)[parentKey].splice(index, 1);
-        params.index = index;
-      } else {
-        const q = (t as any)[parentKey];
-        if ((q.__v_raw || q) === n) {
-          params.index = 0;
-          (this as any)[parentKey] = undefined;
-        }
-      }
-    }
-    return params;
-  }
-
   //================================================================================
   // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
   // 自动生成的代码已结束。下面可以手动编写。
   //================================================================================
+  /**
+   * 祖先 View
+   */
+  get view() {
+    return this.getAncestor('View') as View;
+  }
+  /**
+   * 祖先 Module
+   */
+  get module() {
+    return this.getAncestor('Module') as Module;
+  }
+  /**
+   * 祖先 Frontend
+   */
+  get frontend() {
+    return this.getAncestor('Frontend') as Frontend;
+  }
 
   get likeComponent(): View | BusinessComponent {
     return this.view || (this?.getAncestor('BusinessComponent') as BusinessComponent);
@@ -1622,6 +1478,7 @@ export class ViewElement extends BaseNode {
   toHump(name: string): string {
     return name.replace(/-(\w)/g, (all, letter) => letter.toUpperCase());
   }
+
   toFirstUpper(name: string): string {
     return name.replace(/^\S/, (s) => s.toUpperCase());
   }
@@ -1630,6 +1487,62 @@ export class ViewElement extends BaseNode {
     return Boolean(this.slotScope);
   }
 
+  getGenericTypes(tag: string) {
+    let T;
+    let V;
+    let P;
+    let M;
+    let T1;
+    let C;
+
+    const genericTypes: string[] = [];
+
+    if (config?.allNodesAPI[tag]) {
+      const { tsTypeParams = '' } = config?.allNodesAPI[tag];
+      const tsTypes = tsTypeParams?.split(',');
+
+      tsTypes.forEach((item) => {
+        const reg = /^(\w+)\s?/;
+        const result = reg.exec(item.trim());
+        const t = result?.[1];
+        if (t === 'T') {
+          T = true;
+          genericTypes.push('__item');
+        }
+        if (t === 'V') {
+          V = true;
+          genericTypes.push('__V');
+        }
+        if (t === 'P') {
+          P = true;
+          genericTypes.push('__pageable');
+        }
+        if (t === 'M') {
+          M = true;
+          genericTypes.push('__multiple');
+        }
+        if (t === 'C') {
+          C = true;
+          genericTypes.push('__converter');
+        }
+        if (t === 'T1') {
+          T1 = true;
+          genericTypes.push('__columnItem');
+        }
+      });
+    }
+
+    return {
+      T,
+      V,
+      P,
+      M,
+      T1,
+      C,
+      genericTypes,
+    };
+  }
+
   @withGenerator
   *toEmbeddedTSDefinition(state = createCompilerState()): TranslatorGenerator {
     const self = this;
@@ -1637,164 +1550,218 @@ export class ViewElement extends BaseNode {
     code += indent((state?.tabSize || 0) + 1);
     if (self.isCorrespondingBusinessComponent) {
       code += `${self.name}: ${self.correspondingBusinessComponentNamespace}.${self.tag.replace('bs-', '')};\n`;
-    } else if (self.toHump(self.tag) === 'lcapLogin' || self.staticClass === 'login-form') {  // 登录组件不翻译
-      code += `${self.name}: nasl.ui.div<any>;\n`;
-    } else if (self.tag === 'u-table-view-column-dynamic') {
-      code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<any, any>;\n`;
-    } else if (Object.keys(PAGE_COMPONENT_INCLUDE_TAG_MAP).includes(self.tag)) {
-      if (self.bindAttrs?.findIndex((attr) => attr.name === 'data-source') > -1) {
-        code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<__elements_completionProperty['${self.name
-          }']['dataSource']>;\n`;
-      } else {
-        code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<any>;\n`;
+    } else if (self.toHump(self.tag) === 'lcapLogin' || self.staticClass === 'login-form') {
+      // 登录组件不翻译
+      code += `${self.name}: nasl.ui.Div;\n`;
+    } else if (config?.allNodesAPI[self.tag]) {
+      const { T, V, P, M, T1, C, genericTypes } = this.getGenericTypes(self.tag);
+
+      code += `${self.name}: nasl.ui.${utils.kebab2Pascal(self.tag)}`;
+
+      if (genericTypes.length > 0) {
+        code += `<`;
+        code += genericTypes.map((i) => `typeof __elementsRef.${self.name}.${i}`).join(', ');
+        code += `>`;
       }
+
+      code += ';\n';
     } else {
-      code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<any>;\n`;
+      code += `${self.name}: nasl.ui.${utils.kebab2Pascal(self.tag)};\n`;
     }
+
     if (Array.isArray(self.children)) {
       yield* wrapForEach(self.children, function* warpForEachGenerator(element) {
         code += yield* element.toEmbeddedTSDefinition(shiftState(state, code));
       });
     }
+
     return code;
   }
 
-  @withGenerator
-  *toEmbeddedTSVariableDefinition(
-    state = createCompilerState(),
-    variableList?: string[],
-    nameLevel?: string,
-  ): TranslatorGenerator {
+  toEmbeddedTSRefPath(elementsPathMap: Record<string, any>) {
     const self = this;
-    let code = '';
-    let currentLevel = nameLevel ? `${nameLevel}?.` : '';
-    currentLevel += `${self.name}?.()`;
-    if (PAGE_COMPONENT_INCLUDE_TAG_MAP?.[self.tag]) {
-      code += indent((state?.tabSize || 0) + 2);
-      code += `${self.name}: {\n`;
-      if (Array.isArray(self.bindAttrs)) {
-        yield* wrapForEach(
-          self.bindAttrs.filter((attr) => PAGE_COMPONENT_INCLUDE_TAG_MAP[self.tag]?.[attr.name]),
-          function* warpForEachGenerator(attr) {
-            code += yield* attr.toEmbeddedTSVariableDefinition(
-              shiftState(state, code, { inline: true }),
-              variableList,
-              self.name,
-              currentLevel,
-            );
-          },
-        );
-        if (['u-select', 'van-pickerson'].includes(self.tag)) {
-          code += indent((state?.tabSize || 0) + 3);
-          code += `pageNumber: nasl.core.Long\n`;
-          code += indent((state?.tabSize || 0) + 3);
-          code += `filterText: nasl.core.String\n`;
-        } else if (
-          ['u-list-view', 'u-grid-view', 'u-table-view', 'van-list-view', 'van-grid-view'].includes(self.tag) &&
-          self.bindAttrs?.findIndex((attr) => attr.name === 'sorting') === -1
-        ) {
-          if (['u-list-view', 'van-grid-view', 'van-list-view'].includes(self.tag)) {
-            code += indent((state?.tabSize || 0) + 3);
-            code += `filterText: nasl.core.String\n`;
-          }
-          code += indent((state?.tabSize || 0) + 3);
-          code += `sorting: {
-                      field: nasl.core.String
-                      order: nasl.core.String
-                  }\n`;
-        } else if (['u-cascader', 'van-cascader'].includes(self.tag)) {
-          code += indent((state?.tabSize || 0) + 3);
-          code += `filterText: nasl.core.String\n`;
-        }
-      }
-      code += indent((state?.tabSize || 0) + 2);
-      code += `};\n`;
+
+    if (asserts.isViewElement(self.parentNode)) {
+      elementsPathMap[self.name] = `${elementsPathMap[self.parentNode.name]}.${self.name}`;
+    } else {
+      elementsPathMap[self.name] = `${self.name}`;
     }
+
     if (Array.isArray(self.children)) {
-      yield* wrapForEach(self.children, function* warpForEachGenerator(element) {
-        code += yield* element.toEmbeddedTSVariableDefinition(shiftState(state, code), variableList, currentLevel);
+      self.children.forEach((element) => {
+        element.toEmbeddedTSRefPath(elementsPathMap);
       });
     }
-    return code;
   }
 
   @withGenerator
-  *toEmbeddedTSVariableFunctionDefinition(state = createCompilerState(), parentLevel?: number): TranslatorGenerator {
+  *toEmbeddedTSRefTree(
+    state = createCompilerState(),
+    options: { elementsPathMap: Record<string, any> },
+    parentLevel?: number,
+  ): TranslatorGenerator {
     const self = this;
+
+    const { elementsPathMap } = options;
+
+    const { T, V, P, M, T1, C } = this.getGenericTypes(self.tag);
+
     let code = '';
     code += indent((state?.tabSize || 0) + 2);
     let levelIndex = parentLevel || 0;
     code += `${self.name}: () => {\n`;
-    if (self.tag === 'template' && self.haveScope() && asserts.isViewElement(self.parentNode)) {
-      const currentType = self.parentNode.tag === 'u-table-view-column-dynamic' ? 'CurrentDynamic' : 'Current';
-      const _this = self.parentNode;
-      let genericity = '';
-      if (_this.tag === 'u-table-view-column-dynamic') {
-        genericity += `<${(_this.parentNode as any).__tsVariableDataSourceTypeName}, ${(_this as any).__tsVariableDataSourceTypeName
-          }>`;
+
+    const getType = (name: string) => {
+      let t;
+      const attr = self.bindAttrs?.find((attr) => attr.name === name);
+      if (['static', 'string'].includes(attr?.type)) {
+        t = attr.value ? 'true' : 'false';
+      } else if (['dynamic'].includes(attr?.type)) {
+        t = 'nasl.core.Boolean';
       } else {
-        let targetNode: any = _this;
-        while ((!targetNode.__tsVariableDataSourceTypeName || targetNode.__tsVariableDataSourceTypeName === 'any') && asserts.isViewElement(targetNode?.parentNode)) {
-          targetNode = targetNode.parentNode;
+        t = false;
+      }
+
+      return t;
+    };
+    const hasDataSource =
+      config?.allNodesAPI?.[self.tag]?.props?.findIndex((prop) => ['dataSource', 'data-source'].includes(prop.name)) >
+      -1;
+    // 有数据源属性的组件 才需要生成 item
+    if (hasDataSource && T) {
+      const key = T1 ? '__columnItem' : '__item';
+      const dataSourceAttr = self.bindAttrs?.find((attr) => attr.name === 'dataSource');
+      if (dataSourceAttr?.expression) {
+        if (
+          asserts.isMemberExpression(dataSourceAttr.expression) ||
+          asserts.isIdentifier(dataSourceAttr.expression) ||
+          asserts.isCallLogic(dataSourceAttr.expression)
+        ) {
+          const value = yield* dataSourceAttr.expression.toEmbeddedTS(
+            shiftState(
+              state,
+              code,
+              dataSourceAttr.expression.concept === 'CallLogic'
+                ? {
+                    tabSize: 4,
+                    inline: true,
+                    noNeedParams: true,
+                  }
+                : {},
+            ),
+          );
+
+          // 用别的组件的data当数据源
+          if (
+            (dataSourceAttr.expression as MemberExpression)?.property?.name === 'data' &&
+            ((dataSourceAttr.expression as MemberExpression)?.object as Identifier)?.namespace?.startsWith('elements.')
+          ) {
+            const componentName = ((dataSourceAttr.expression as MemberExpression)?.object as Identifier).name;
+            const componentPath = elementsPathMap[componentName]?.split('.');
+            const component = componentPath?.reduce((prev: string, cur: string) => {
+              return `${prev}.children.${cur}()`;
+            }, 'elementsRefTree()');
+
+            if (component) {
+              code += `let t = ${component}.__item;\n`;
+              code += `let ${key}: typeof t;\n`;
+            } else {
+              code += `let ${key}: any;\n`;
+            }
+          } else {
+            code += `let ${key}: nasl.ui.GetItemTypeFromDataSource<typeof ${value}>;\n`;
+          }
+        } else {
+          const returnCode = yield* dataSourceAttr.expression.toEmbeddedTS(shiftState(state, code));
+
+          code += `const _load = () => { return `;
+          code += returnCode;
+          code += '};\n';
+          code += `let ${key}: nasl.ui.GetItemTypeFromDataSource<ReturnType<typeof _load>>;\n`;
         }
-        genericity += `<${(targetNode as any).__tsVariableDataSourceTypeName ?? 'any'}>`;
+      } else {
+        code += `let ${key}: any;\n`;
       }
-      code += indent((state?.tabSize || 0) + 3);
-      code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}${genericity}\n`;
-      levelIndex++;
     }
-    const attr = self.bindAttrs?.find((item) => item.name === 'data-source');
-    if (attr && attr.expression) {
-      const datasourceName = `datasourceName${self.name}`;
-      (self as any).__tsVariableDataSourceTypeName = datasourceName;
-      if (
-        asserts.isMemberExpression(attr.expression) ||
-        asserts.isIdentifier(attr.expression) ||
-        asserts.isCallLogic(attr.expression)
-      ) {
-        const extraParams = {
-          tabSize: 4,
-          inline: true,
-          noNeedParams: true,
-        };
-        let value = yield* attr.expression.toEmbeddedTS(
-          shiftState(state, code, attr.expression.concept === 'CallLogic' ? extraParams : {}),
-        );
-        code += indent((state?.tabSize || 0) + 3);
-        code += `type ${datasourceName} = nasl.ui.GetItemTypeFromDataSource<typeof ${value}>;\n`;
-        // code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}<nasl.ui.GetItemTypeFromDataSource<typeof ${value}>>;\n`;
+    // 值
+    let valueType: string;
+    if (hasDataSource && V && !T1) {
+      const valueFieldAttr = self.bindAttrs?.find((attr) => attr.name === 'valueField');
+      if (['static', 'string'].includes(valueFieldAttr?.type)) {
+        valueType = `typeof __item.${valueFieldAttr.value}`;
       } else {
-        code += indent((state?.tabSize || 0) + 3);
-        code += `const __funcName = () => { return `;
-        code += yield* attr.expression.toEmbeddedTS(shiftState(state, code));
-        code += '};\n';
-        code += indent((state?.tabSize || 0) + 3);
-        code += `type ${datasourceName} = nasl.ui.GetItemTypeFromDataSource<ReturnType<typeof __funcName>>;\n`;
-        // code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}<nasl.ui.GetItemTypeFromDataSource<ReturnType<typeof __funcName>>>;\n`;
+        valueType = 'any';
       }
-    } else {
-      (self as any).__tsVariableDataSourceTypeName = 'any';
     }
+    // 分页
+    let pageableType: string | boolean;
+    if (hasDataSource && P && !T1) {
+      pageableType = getType('pageable');
+      code += `let __pageable: ${pageableType};\n`;
+    }
+    // 多选
+    let multipleType: string | boolean;
+    if (hasDataSource && M && !T1) {
+      multipleType = getType('multiple');
+      code += `let __multiple: ${multipleType};\n`;
+    }
+    if (hasDataSource && V && !T1) {
+      code += `// @ts-ignore
+      let __value: ${valueType}${[true, 'true'].includes(multipleType) ? '[]' : ''};\n`;
+      code += `// @ts-ignore
+      let __V: ${valueType};\n`;
+    }
+    if (C) {
+      // code += `let converter: ${getType('converter')};\n`;
+      code += `let __converter: any;\n`;
+    }
+
+    if (self.tag === 'template' && self.haveScope() && asserts.isViewElement(self.parentNode)) {
+      const currentType = self.parentNode.tag === 'u-table-view-column-dynamic' ? 'CurrentDynamic' : 'Current';
+      code += indent((state?.tabSize || 0) + 3);
+      code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}<typeof __item${
+        currentType === 'CurrentDynamic' ? ', typeof __columnItem' : ''
+      }>;\n`;
+      levelIndex++;
+    }
+
     code += indent((state?.tabSize || 0) + 3);
     code += `return {\n`;
-    if (Array.isArray(self.bindAttrs)) {
-      yield* wrapForEach(
-        self.bindAttrs.filter((attr) => PAGE_COMPONENT_INCLUDE_TAG_MAP[self.tag]?.[attr.name]),
-        function* warpForEachGenerator(attr) {
-          code += yield* attr.toEmbeddedTSVariableFunctionDefinition(shiftState(state, code, { inline: true }));
-        },
-      );
+
+    if (T) {
+      code += `__item,\n`;
+    }
+    if (V) {
+      code += `__value, __V,\n`;
     }
+    if (P) {
+      code += `__pageable,\n`;
+    }
+    if (M) {
+      code += `__multiple,\n`;
+    }
+    if (T1) {
+      code += `__columnItem,\n`;
+    }
+    if (C) {
+      code += `__converter,\n`;
+    }
+
     if (Array.isArray(self.children)) {
+      code += indent((state?.tabSize || 0) + 4);
+      code += `children: {\n`;
       yield* wrapForEach(self.children, function* warpForEachGenerator(element) {
-        code += yield* element.toEmbeddedTSVariableFunctionDefinition(
+        code += yield* element.toEmbeddedTSRefTree(
           shiftState({ ...state, tabSize: state.tabSize + 2 }, code),
+          { elementsPathMap },
           levelIndex,
         );
       });
+      code += indent((state?.tabSize || 0) + 4);
+      code += `},\n`;
     }
     code += indent((state?.tabSize || 0) + 3);
-    code += `}\n`;
+    code += `};\n`;
     code += indent((state?.tabSize || 0) + 2);
     code += `},\n`;
     return code;
@@ -1824,7 +1791,7 @@ export class ViewElement extends BaseNode {
     }
     const bindAttrs = this.bindAttrs;
     if (bindAttrs && bindAttrs.length) {
-      const attr = bindAttrs.find((item) => item.name === 'data-source');
+      const attr = bindAttrs.find((item) => item.name === 'dataSource');
       if (attr && attr.expression) {
         if (this.tag === 'u-table-view-column-dynamic') {
           code += `<${(this.parentNode as any).__tsDataSourceTypeName}, ${(this as any).__tsDataSourceTypeName}>`;
@@ -1835,12 +1802,13 @@ export class ViewElement extends BaseNode {
     }
     return code;
   }
+  // 应该没有再使用了
   *getDatasourceTypeCodeStr(state?: TranslatorState, eleArr?: Array<ViewElement>) {
     let code = '';
     yield* wrapForEach(eleArr ?? [], function* wrapForEach(element, index) {
       const bindAttrs = element.bindAttrs;
       if (bindAttrs && bindAttrs.length) {
-        const attr = bindAttrs.find((item) => item.name === 'data-source');
+        const attr = bindAttrs.find((item) => item.name === 'dataSource');
         if (attr && attr.expression) {
           const datasourceName = `datasourceName${element.name}`;
           (element as any).__tsDataSourceTypeName = datasourceName;
@@ -1853,8 +1821,9 @@ export class ViewElement extends BaseNode {
               tabSize: 4,
               inline: true,
               noNeedParams: true,
+              callLogicNoIife: true,
             };
-            let value = yield* attr.expression.toEmbeddedTS(
+            const value = yield* attr.expression.toEmbeddedTS(
               shiftState(state, code, attr.expression.concept === 'CallLogic' ? extraParams : {}),
             );
             code += `type ${datasourceName} = `;
@@ -1901,6 +1870,29 @@ export class ViewElement extends BaseNode {
     }
   }
 
+  // 收集页面元素中的业务组件
+  collectExistingBusinessComponent() {
+    const excludedSet = new Set();
+    utils.traverse(
+      ({ node }) => {
+        const correspondingBusinessComponent = node.correspondingBusinessComponent;
+        if (correspondingBusinessComponent && !excludedSet.has(correspondingBusinessComponent)) {
+          const set = correspondingBusinessComponent.collectExistingBusinessComponent();
+          if (set.size) {
+            set.forEach((value) => {
+              if (!excludedSet.has(value)) {
+                excludedSet.add(value);
+              }
+            });
+          }
+        }
+      },
+      {
+        node: this,
+      },
+    );
+    return excludedSet;
+  }
 
   @withSourceMapGenerator
   *toEmbeddedTS(state = createCompilerState(), parentLevel?: number): TranslatorGenerator {
@@ -1924,9 +1916,10 @@ export class ViewElement extends BaseNode {
     ) {
       return '';
     }
+
     // pc事件翻译
     if (self.toHump(tag) === 'lcapLogin') {
-      let code = `new nasl.ui.div({name: __elements.${self.name},\n`;
+      let code = `new nasl.ui.Div({_name: __elements.${self.name},\n`;
       // 事件
       if (Array.isArray(self.bindEvents)) {
         yield* wrapForEach(self.bindEvents, function* warpForEachGenerator(event) {
@@ -1941,32 +1934,21 @@ export class ViewElement extends BaseNode {
       code += `}),\n`;
       return code;
     }
+
     let levelIndex = parentLevel || 0;
-    if (tag === 'template' && self.haveScope()) {
-      const slotTarget = !self.slotTarget ? 'slotDefault' : 'slot' + self.toFirstUpper(self.toHump(self.slotTarget));
-      let code = '';
-      code += `${slotTarget}: (current${levelIndex === 0 ? '' : levelIndex})=> {\n`;
-      code += yield* self.getDatasourceTypeCodeStr(state, self.children);
-      levelIndex++;
-      code += 'return [';
-      yield* wrapForEach(self.children, function* warpForEachGenerator(element) {
-        code += yield* element.toEmbeddedTS(
-          shiftState(state, code, {
-            tabSize: state?.tabSize || 0,
-          }),
-          levelIndex,
-        );
-      });
-      code += ']';
-      code += '\n';
-      code += '},\n';
-      return code;
-    } else if (tag === 'template') {
-      const slotTarget = !self.slotTarget ? 'slotDefault' : 'slot' + self.toFirstUpper(self.toHump(self.slotTarget));
+
+    if (tag === 'template') {
+      const hasScope = self.haveScope();
+      const slotTarget = !self.slotTarget ? 'slotDefault' : `slot${self.toFirstUpper(self.toHump(self.slotTarget))}`;
       let code = '';
-      code += `${slotTarget}: ()=> {\n`;
-      code += yield* self.getDatasourceTypeCodeStr(state, self.children);
-      code += 'return [';
+
+      if (hasScope) {
+        code += `${slotTarget}: (current${levelIndex === 0 ? '' : levelIndex}) => [\n`;
+        levelIndex++;
+      } else {
+        code += `${slotTarget}: () => [\n`;
+      }
+
       yield* wrapForEach(self.children, function* warpForEachGenerator(element) {
         code += yield* element.toEmbeddedTS(
           shiftState(state, code, {
@@ -1976,17 +1958,28 @@ export class ViewElement extends BaseNode {
         );
       });
       code += indent((state?.tabSize || 0) + 2);
-      code += ']';
-      code += '\n';
-      code += '},\n';
+      code += '\n],\n';
+
       return code;
     }
-    let namespace = `nasl.ui.${self.toHump(tag)}`;
+
+    let namespace = `nasl.ui.${utils.kebab2Pascal(tag)}`;
     if (self.isCorrespondingBusinessComponent) {
       namespace = `${self.correspondingBusinessComponentNamespace}.${self.tag.replace('bs-', '')}`;
     }
-    // 后面那个name是为了查找引用的时候用的
-    let code = `new ${namespace}${self.getTypeArgmentsStr(state)}({name: __elements.${name},\n`;
+
+    const { T, V, P, M, T1, C, genericTypes } = this.getGenericTypes(self.tag);
+
+    let code = `new ${namespace}`;
+    if (genericTypes.length > 0) {
+      code += `<`;
+      code += genericTypes.map((i) => `typeof __elementsRef.${self.name}.${i}`).join(', ');
+      code += `>`;
+    }
+
+    // 增加唯一name 后面那个name是为了查找引用的时候用的
+    code += `({_name: __elements.${self.name},\n`;
+
     // 是否开启权限
     // const hasAuth = Array.isArray(bindDirectives)
     //     ? !!bindDirectives.filter((directive) => directive.name === 'auth').length
@@ -2018,33 +2011,58 @@ export class ViewElement extends BaseNode {
     if (Array.isArray(children)) {
       code += indent((state?.tabSize || 0) + 1);
       if (Array.isArray(self.bindAttrs)) {
-        code += `bindAttr: `;
-        if (self.isCorrespondingBusinessComponent) {
-          code += `{\n`;
-        } else {
-          code += `() => [\n`;
-        }
-        yield* wrapForEach(self.bindAttrs, function* warpForEachGenerator(attr) {
-          // 过滤自由布局的key
-          const shouldFilter = self.isCorrespondingBusinessComponent && (attr.name === 'key' && !attr.expression);
+        // 属性
+        const validAttrs = self.bindAttrs.filter((attr) => {
+          // 特殊的一些属性不过滤
+          if (['destination', 'externalDestination', 'rules', 'url'].includes(attr.name)) {
+            return true;
+          }
+
+          const com = config.allNodesAPI[self.tag];
+          if (com) {
+            const { props } = com;
+
+            const prop = props?.find((item) => item.name === attr.name);
+            if (prop) {
+              return true;
+            }
+
+            return false;
+          }
+
+          return true;
+        });
+        yield* wrapForEach(validAttrs, function* warpForEachGenerator(attr) {
+          // 过滤业务组件的非表达式模式的翻译
+          const shouldFilter = self.isCorrespondingBusinessComponent && attr.type !== 'dynamic';
           if (shouldFilter) {
             return;
           }
-          code += (yield* attr.toEmbeddedTS(shiftState(state, code, { tabSize: 1 }))) + ',\n';
+          const propCode = yield* attr.toEmbeddedTS(shiftState(state, code, { tabSize: 1 }));
+          if (propCode.trim()) {
+            code += `${propCode},\n`;
+          }
         });
+
+        // 指令v-if等
         yield* wrapForEach(self.bindDirectives, function* warpForEachGenerator(directive) {
-          code += (yield* directive.toEmbeddedTS(shiftState(state, code, { tabSize: 1 }))) + ',\n';
+          const directiveCode = yield* directive.toEmbeddedTS(shiftState(state, code, { tabSize: 1 }));
+          if (directiveCode.trim()) {
+            code += `${directiveCode},\n`;
+          }
         });
+
+        // 样式绑定
         yield* wrapForEach(self.bindStyles, function* warpForEachGenerator(bindStyle) {
-          code += (yield* bindStyle.toEmbeddedTS(shiftState(state, code, { tabSize: 1 }))) + ',\n';
+          const styleCode = yield* bindStyle.toEmbeddedTS(shiftState(state, code, { tabSize: 1 }));
+          if (styleCode.trim()) {
+            code += `${styleCode},\n`;
+          }
         });
-        code += indent((state?.tabSize || 0) + 2)
-        if (self.isCorrespondingBusinessComponent) {
-          code += '},\n';
-        } else {
-          code += '],\n';
-        }
+
+        code += indent((state?.tabSize || 0) + 2);
       }
+
       // 如果子集中有插槽的就
       if (children.find((item) => item.tag === 'template' && item.slotTarget)) {
         code += indent((state?.tabSize || 0) + 2);
@@ -2065,9 +2083,7 @@ export class ViewElement extends BaseNode {
         // 翻译其余的子集
         if (defaultArr.length) {
           code += indent((state?.tabSize || 0) + 2);
-          code += `slotDefault: ()=> {\n`;
-          code += yield* self.getDatasourceTypeCodeStr(state, defaultArr);
-          code += 'return [';
+          code += `slotDefault: () => [\n`;
           yield* wrapForEach(defaultArr, function* warpForEachGenerator(element) {
             code += yield* element.toEmbeddedTS(
               shiftState(state, code, {
@@ -2078,15 +2094,12 @@ export class ViewElement extends BaseNode {
             code += '\n';
           });
           code += indent((state?.tabSize || 0) + 2);
-          code += ']\n';
           code += indent((state?.tabSize || 0) + 1);
-          code += '}\n';
+          code += ']\n';
         }
-      } else {
+      } else if (children?.length) {
         code += indent((state?.tabSize || 0) + 2);
-        code += `slotDefault: ()=> {\n`;
-        code += yield* self.getDatasourceTypeCodeStr(state, children);
-        code += 'return [';
+        code += `slotDefault: () => [\n`;
         yield* wrapForEach(children, function* warpForEachGenerator(element) {
           code += yield* element.toEmbeddedTS(
             shiftState(state, code, {
@@ -2097,9 +2110,8 @@ export class ViewElement extends BaseNode {
           code += '\n';
         });
         code += indent((state?.tabSize || 0) + 2);
-        code += ']\n';
         code += indent((state?.tabSize || 0) + 1);
-        code += '}\n';
+        code += ']\n';
       }
     }
     code += indent(state?.tabSize || 0) + '})';
@@ -2227,7 +2239,6 @@ export class ViewElement extends BaseNode {
     };
     this.update({
       ...object,
-
     });
   }
 
@@ -2289,7 +2300,7 @@ export class ViewElement extends BaseNode {
           expression: transAstNodeToNaslNode(Object.assign({}, argument)),
         }));
       }
-    } catch (error) { }
+    } catch (error) {}
 
     return {
       concept: 'ValidationRule',
@@ -2391,6 +2402,10 @@ export class ViewElement extends BaseNode {
           this._fromASTNode(item as compiler.ASTElement, newContext),
         ) as unknown as Array<ViewElement>,
       });
+      const attrName2Camel = (name: string) => {
+        if (name.startsWith('vusion-')) return name;
+        return name.replace(/(?:v-)([a-zA-Z0-9])/g, (m, $1) => $1.toUpperCase());
+      };
       astNode?.attrs?.forEach((oldAttr) => {
         let attr: BindAttribute;
         // 获取原始属性
@@ -2401,7 +2416,7 @@ export class ViewElement extends BaseNode {
         if (oldAttr.value === '""' && orginAttrCode.trim() === oldAttr.name) {
           attr = new BindAttribute({
             type: 'static',
-            name: oldAttr.name,
+            name: attrName2Camel(oldAttr.name),
             value: 'true',
           });
         } else {
@@ -2409,12 +2424,23 @@ export class ViewElement extends BaseNode {
             const tmp = json5.parse(oldAttr.value);
             const source: any = {
               type: typeof tmp === 'string' ? 'string' : 'static',
-              name: oldAttr.name,
+              name: attrName2Camel(oldAttr.name),
               value: typeof tmp === 'string' ? tmp : oldAttr.value,
             };
             if (oldAttr.name === 'rules') {
-              source.rules = tmp?.split('|').map((ruleStr: string) => this._parseValidationRule(ruleStr.trim()));
-            } else if (['page-number', 'page-size'].includes(oldAttr.name)) {
+              if (Array.isArray(tmp)) {
+                source.rules = tmp.map((rule) => ({
+                  concept: 'ValidationRule',
+                  name: '',
+                  label: '验证规则',
+                  calleeNamespace: 'nasl.validation',
+                  arguments: [],
+                  calleeName: rule?.validate,
+                }));
+              } else {
+                source.rules = tmp?.split('|').map((ruleStr: string) => this._parseValidationRule(ruleStr.trim()));
+              }
+            } else if (['page-number', 'page-size', 'pageNumber', 'pageSize'].includes(oldAttr.name)) {
               source.value = Number(source.value);
             }
             attr = new BindAttribute(source);
@@ -2422,7 +2448,7 @@ export class ViewElement extends BaseNode {
             const expression = <any>this._parseExpression(oldAttr.value);
             attr = new BindAttribute({
               type: 'dynamic',
-              name: oldAttr.name,
+              name: attrName2Camel(oldAttr.name),
               value: expression ? '' : oldAttr.value,
               expression,
             });
@@ -2596,12 +2622,12 @@ export class ViewElement extends BaseNode {
           !['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);
+          const apiOfAttr = api && api.props && api.props.find((_attr) => _attr.name === attr.name);
           if (['u-form-item', 'u-validator', 'van-field'].includes(element.tag) && attr.name === 'rules') {
             return `${attr.name}=""`;
           }
-          if (apiOfAttr && apiOfAttr['designer-value'] !== undefined) {
-            let designerValue = apiOfAttr['designer-value'];
+          if (apiOfAttr && apiOfAttr['designerValue'] !== undefined) {
+            let designerValue = apiOfAttr['designerValue'];
             //对流程模板拖拽进行特判
             element.bindAttrs.forEach((property) => {
               if (property.name === 'repeat' && property.value === '1') designerValue = '[{}, {}]';
@@ -2610,6 +2636,9 @@ export class ViewElement extends BaseNode {
               designerValue = designerValue.replace(/"/g, "'");
             }
             try {
+              if (Array.isArray(designerValue)) {
+                return `:${attr.name}="${JSON.stringify(designerValue)}"`;
+              }
               json5.parse(designerValue);
               return `:${attr.name}="${designerValue}"`;
             } catch (e) {
@@ -2636,7 +2665,7 @@ export class ViewElement extends BaseNode {
                   return `:${name}="${value.replace(/"/g, "'")}"`;
                 }
               } catch (e) {
-                if (apiOfAttr && !apiOfAttr.type.includes('string')) return '';
+                if (apiOfAttr && apiOfAttr.tsType && !apiOfAttr.tsType.includes('nasl.core.String')) return '';
               }
               value = value
                 .replace(/"/g, "'")
@@ -2647,9 +2676,9 @@ export class ViewElement extends BaseNode {
                 .replace(/\bscope\.item\.\b/g, '')
                 .replace(/\bcurrent\.item\.\b/g, '');
 
-                if (isLockField(element)) {
-                   return element.tag === 'u-text' ? `${name}="--"` : `${name}=""`
-                }
+              if (isLockField(element)) {
+                return element.tag === 'u-text' ? `${name}="--"` : `${name}=""`;
+              }
               return `${name}="{{ ${value} }}"`;
             });
           else return defaultResult;
@@ -2662,7 +2691,7 @@ export class ViewElement extends BaseNode {
 
         const api = config?.allNodesAPI?.[el?.tag];
         const emptySlot =
-          api && api.slots && api.slots.find((slot) => slot.name === 'default' && slot['empty-background']);
+          api && api.slots && api.slots.find((slot) => slot.name === 'default' && slot['emptyBackground']);
         const hasSupport = api && api.slots && api.slots.some((slot) => slot.support);
         if (emptySlot || hasSupport) {
           // 有些限制的组件如侧边栏分组有title插槽但要限制子元素放入
@@ -2677,7 +2706,7 @@ export class ViewElement extends BaseNode {
           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');
+              const hasDataSource = el.bindAttrs.find((attr) => attr.name === 'dataSource');
               addEmpty = !hasDataSource;
             }
             if (el.tag === 'u-crumb') {
@@ -2704,7 +2733,7 @@ export class ViewElement extends BaseNode {
             ) {
               addEmpty = false;
             }
-            const background = (emptySlot && emptySlot['empty-background']) || (hasSupport ? 'add-sub' : '');
+            const background = (emptySlot && emptySlot['emptyBackground']) || (hasSupport ? 'add-sub' : '');
             addEmpty && parts.push(`vusion-empty-background="${background}"`);
           }
         }
@@ -2779,7 +2808,6 @@ export class ViewElement extends BaseNode {
    * 转换成 Vue 的模板格式
    */
   toVue(options?: ElementToVueOptions) {
-
     // lockField 不翻译modal
     if (options?.isDev && this?.tag === 'u-modal' && isLockField(this)) {
       return ``;
@@ -2788,49 +2816,6 @@ export class ViewElement extends BaseNode {
     const { finalCode, asCompontent } = options || {};
     const parts: string[] = [];
     if (finalCode === false) {
-      if (this.tag === 'slot') {
-        if (asCompontent) {
-          return `<div vusion-slot-name="${this.name}">
-            <slot name="${this.name}">
-              <div s-empty="true" bs-empty="true" style="background: #f7f8fa;
-                border: 1px dashed #c3c3c3;
-                text-align: center;
-                color: #999;
-                min-height: 32px;
-                min-width: 32px;
-                width: 100%;
-                align-items: center;
-                display: inline-flex;
-                justify-content: center;">
-                +
-              </div>
-            </slot>
-          </div>`;
-        } else {
-          return `<div vusion-node-path="${this.nodePath}"
-            style="background: linear-gradient(-45deg,#fff 25%,#f3f5fa 0,#f3f5fa 50%,#fff 0,#fff 75%,#f3f5fa 0);
-            background-size: 45px 45px;
-            background-repeat: repeat;
-            line-height: 32px;
-            min-height: 32px;
-            color: var(--font-second-color);
-            text-align: center;">
-            组件占位，可在使用业务组件时插入任意组件
-          </div>`;
-        }
-      } else if (this.businessComponent?.name === this.tag) {
-        // 组件内部使用自身的情况
-        return `<div vusion-node-path="${this.nodePath}"
-          style="background: linear-gradient(-45deg,#fff 25%,#f3f5fa 0,#f3f5fa 50%,#fff 0,#fff 75%,#f3f5fa 0);
-          background-size: 45px 45px;
-          background-repeat: repeat;
-          line-height: 32px;
-          min-height: 32px;
-          color: var(--font-second-color);
-          text-align: center;">
-          在组件内部使用自身可能会导致循环引用，请谨慎使用
-        </div>`;
-      }
       const isRoot = options.isRoot;
       if (isRoot && !options?.asCompontent) {
         parts.push('type="root"');
@@ -2879,18 +2864,15 @@ export class ViewElement extends BaseNode {
     const tabString = ' '.repeat(newOptions.tabSize * newOptions.indentLevel);
     const insideTabString = ' '.repeat(newOptions.tabSize * (newOptions.indentLevel + 1));
     let shouldIndent = true;
-    const content: string = !this.children
+    let 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;
-    }
+          .map((element) => {
+            const childOptions = Object.assign({}, newOptions);
+            childOptions.indentLevel++;
+            return (shouldIndent ? '\n' + insideTabString : '') + element?.toVue(childOptions);
+          })
+          .join('');
     if (newOptions.aslIdAttr) {
       if (newOptions.aslIdAttr === true) {
         newOptions.aslIdAttr = 'asl-id';
@@ -2905,14 +2887,13 @@ export class ViewElement extends BaseNode {
     this.slotTarget &&
       parts.push(
         `#${this.slotTarget}` +
-        (this.slotScope
-          ? `="${currentList.length > 1 ? this.slotScope + (currentList.length - 1) : this.slotScope}"`
-          : ''),
+          (this.slotScope
+            ? `="${currentList.length > 1 ? this.slotScope + (currentList.length - 1) : this.slotScope}"`
+            : ''),
       );
     this.refName && parts.push(`:ref="\`${this.refName}\`"`);
     this.keyName && parts.push(`:key="\`${this.keyName}\`"`);
     this.staticClass && parts.push(`class="${this.staticClass}"`);
-    this.staticStyle && parts.push(`style="${this.staticStyle}"`);
 
     const vIfs: string[] = [];
     []
@@ -2953,8 +2934,44 @@ export class ViewElement extends BaseNode {
     ) {
       this.name && parts.push(`key="${this.name}"`);
     }
+    let tag = this.tag;
+    let staticStyle = this.staticStyle ?? '';
     if (this.tag === 'slot') {
       this.name && parts.push(`name="${this.name}"`);
+      if (finalCode === false) {
+        tag = 'div';
+        if (asCompontent) {
+          parts.push(`vusion-slot-name="${this.name}"`);
+          content = `<slot name="${this.name}">
+          <div s-empty="true" bs-empty="true" style="background: #f7f8fa;
+            border: 1px dashed #c3c3c3;
+            text-align: center;
+            color: #999;
+            min-height: 32px;
+            min-width: 32px;
+            width: 100%;
+            align-items: center;
+            display: inline-flex;
+            justify-content: center;">
+            +
+          </div>
+        </slot>`;
+        } else {
+          parts.push(`vusion-node-path="${this.nodePath}"`);
+          content = `组件占位，可在使用业务组件时插入任意组件`;
+          staticStyle += `background: linear-gradient(-45deg,#fff 25%,#f3f5fa 0,#f3f5fa 50%,#fff 0,#fff 75%,#f3f5fa 0);
+              background-size: 45px 45px;
+              background-repeat: repeat;
+              line-height: 32px;
+              min-height: 32px;
+              color: var(--font-second-color);
+              text-align: center;`;
+        }
+      }
+    }
+    staticStyle && parts.push(`style="${staticStyle}"`);
+    if (!content.length) {
+      shouldIndent = false;
     }
     let partsLength = 0;
     let partsString = '';
@@ -2967,14 +2984,13 @@ export class ViewElement extends BaseNode {
       partsLength += part.length;
     });
 
-
     let htmlContent =
-      `<${this.tag}${partsString.length ? partsString : ''}>` +
+      `<${tag}${partsString.length ? partsString : ''}>` +
       content +
       (shouldIndent ? '\n' + tabString : '') +
-      `</${this.tag}>`;
-    if (!content.trim() && selfClosingTag.includes(this.tag)) {
-      htmlContent = `<${this.tag}${partsString.length ? partsString : ''} />`;
+      `</${tag}>`;
+    if (!content.trim() && selfClosingTag.includes(tag)) {
+      htmlContent = `<${tag}${partsString.length ? partsString : ''} />`;
     }
 
     return htmlContent;