@lcap/nasl 3.6.0-alpha.6 → 3.6.0-alpha.7

package/src/concepts/ViewElement__.ts

@@ -1622,6 +1622,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 +1631,44 @@ 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;
@@ -1638,164 +1677,303 @@ export class ViewElement extends BaseNode {
     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`;
+      code += `${self.name}: nasl.ui.Div;\n`;
+    }
+    // else if (self.tag === 'u-table-view-column-dynamic') {
+    //   code += `${self.name}: nasl.ui.${utils.kebab2Pascal(self.tag)}<any, any>;\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 += `>`
       }
-    } else {
-      code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<any>;\n`;
+
+      code += ';\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.${utils.kebab2Pascal(self.tag)};\n`;
+    //   }
+    // }
+    else {
+      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 {
+  //   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 (Array.isArray(self.children)) {
+  //     yield* wrapForEach(self.children, function* warpForEachGenerator(element) {
+  //       code += yield* element.toEmbeddedTSVariableDefinition(shiftState(state, code), variableList, currentLevel);
+  //     });
+  //   }
+  //   return code;
+  // }
+
   @withGenerator
-  *toEmbeddedTSVariableDefinition(
-    state = createCompilerState(),
-    variableList?: string[],
-    nameLevel?: string,
-  ): TranslatorGenerator {
+  *toEmbeddedTSRefTree(state = createCompilerState(), elementsPathMap: Record<string, any>, parentLevel?: number): TranslatorGenerator {
     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 (Array.isArray(self.children)) {
-      yield* wrapForEach(self.children, function* warpForEachGenerator(element) {
-        code += yield* element.toEmbeddedTSVariableDefinition(shiftState(state, code), variableList, currentLevel);
-      });
+
+    if (asserts.isViewElement(self.parentNode)) {
+      elementsPathMap[self.name] = `${elementsPathMap[self.parentNode.name]}.${self.name}`;
+    } else {
+      elementsPathMap[self.name] = `${self.name}`;
     }
-    return code;
-  }
 
-  @withGenerator
-  *toEmbeddedTSVariableFunctionDefinition(state = createCompilerState(), parentLevel?: number): TranslatorGenerator {
-    const self = this;
+    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
+      } 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 = self.bindAttrs?.findIndex((attr) => ['dataSource', 'data-source'].includes(attr.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,
+            } : {}),
+          );
+
+          code += `let ${key}: nasl.ui.GetItemTypeFromDataSource<typeof ${value}>;\n`
+        } else {
+
+          code += `const _load = () => { return `;
+          code += yield* dataSourceAttr.expression.toEmbeddedTS(shiftState(state, code));
+          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,
-          callLogicNoIife: true,
-        };
-        const 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';
+      // const _this = self.parentNode;
+      // let genericity = '';
+      // if (_this.tag === 'u-table-view-column-dynamic') {
+      //   genericity += `<${(_this.parentNode as any).__tsVariableDataSourceTypeName}, ${(_this as any).__tsVariableDataSourceTypeName
+      //     }>`;
+      // } else {
+      //   let targetNode: any = _this;
+      //   while ((!targetNode.__tsVariableDataSourceTypeName || targetNode.__tsVariableDataSourceTypeName === 'any') && asserts.isViewElement(targetNode?.parentNode)) {
+      //     targetNode = targetNode.parentNode;
+      //   }
+      //   genericity += `<${(targetNode as any).__tsVariableDataSourceTypeName ?? 'any'}>`;
+      // }
+      code += indent((state?.tabSize || 0) + 3);
+      code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}<typeof item${currentType === 'CurrentDynamic' ? ', typeof columnItem' : ''}>;\n`;
+      levelIndex++;
+    }
+
+    // const attr = self.bindAttrs?.find((item) => item.name === 'dataSource');
+    // 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`;
+    //   } 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`;
+    //   }
+    // } else {
+    //   (self as any).__tsVariableDataSourceTypeName = 'any';
+    // }
+
     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.bindAttrs)) {
+    //   yield* wrapForEach(
+    //     self.bindAttrs.filter((attr) => PAGE_COMPONENT_INCLUDE_TAG_MAP[self.tag]?.[attr.name]),
+    //     function* warpForEachGenerator(attr) {
+    //       code += yield* attr.toEmbeddedTSRefTree(shiftState(state, code, { inline: true }));
+    //     },
+    //   );
+    // }
+
     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;
@@ -1825,7 +2003,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}>`;
@@ -1841,7 +2019,7 @@ export class ViewElement extends BaseNode {
     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;
@@ -1903,7 +2081,6 @@ export class ViewElement extends BaseNode {
     }
   }
 
-
   @withSourceMapGenerator
   *toEmbeddedTS(state = createCompilerState(), parentLevel?: number): TranslatorGenerator {
     const self = this;
@@ -1926,9 +2103,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) {
@@ -1943,32 +2121,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, {
@@ -1978,17 +2145,74 @@ 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)}`;
+
+    // 老逻辑注释掉
+    if (false) {
+      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));
+        let code = '';
+        code += `${slotTarget}: () => [\n`;
+        // code += yield* self.getDatasourceTypeCodeStr(state, self.children);
+        // code += 'return [';
+        yield* wrapForEach(self.children, function* warpForEachGenerator(element) {
+          code += yield* element.toEmbeddedTS(
+            shiftState(state, code, {
+              tabSize: state?.tabSize || 0,
+            }),
+            levelIndex,
+          );
+        });
+        code += indent((state?.tabSize || 0) + 2);
+        // code += ']';
+        code += '\n';
+        code += '],\n';
+        return code;
+      }
+    }
+
+    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
@@ -2020,33 +2244,64 @@ 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) {
+        // code += `bindAttr: `;
+        // if (self.isCorrespondingBusinessComponent) {
+        //   code += `{\n`;
+        // } else {
+        //   code += `() => [\n`;
+        // }
+        // 属性
+        const validAttrs = self.bindAttrs.filter((attr) => {
+          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';
-        }
+        // if (self.isCorrespondingBusinessComponent) {
+        //   code += '},\n';
+        // } else {
+        //   code += '],\n';
+        // }
       }
+
       // 如果子集中有插槽的就
       if (children.find((item) => item.tag === 'template' && item.slotTarget)) {
         code += indent((state?.tabSize || 0) + 2);
@@ -2067,9 +2322,9 @@ 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`;
+          // code += yield* self.getDatasourceTypeCodeStr(state, defaultArr);
+          // code += 'return [';
           yield* wrapForEach(defaultArr, function* warpForEachGenerator(element) {
             code += yield* element.toEmbeddedTS(
               shiftState(state, code, {
@@ -2080,15 +2335,15 @@ export class ViewElement extends BaseNode {
             code += '\n';
           });
           code += indent((state?.tabSize || 0) + 2);
-          code += ']\n';
+          // 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`;
+        // code += yield* self.getDatasourceTypeCodeStr(state, children);
+        // code += 'return [';
         yield* wrapForEach(children, function* warpForEachGenerator(element) {
           code += yield* element.toEmbeddedTS(
             shiftState(state, code, {
@@ -2099,9 +2354,9 @@ export class ViewElement extends BaseNode {
           code += '\n';
         });
         code += indent((state?.tabSize || 0) + 2);
-        code += ']\n';
+        // code += ']\n';
         code += indent((state?.tabSize || 0) + 1);
-        code += '}\n';
+        code += ']\n';
       }
     }
     code += indent(state?.tabSize || 0) + '})';
@@ -2393,6 +2648,11 @@ 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;
         // 获取原始属性
@@ -2403,7 +2663,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 {
@@ -2411,12 +2671,12 @@ 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)) {
+            } else if (['page-number', 'page-size', 'pageNumber', 'pageSize'].includes(oldAttr.name)) {
               source.value = Number(source.value);
             }
             attr = new BindAttribute(source);
@@ -2424,7 +2684,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,
             });
@@ -2598,12 +2858,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 = '[{}, {}]';
@@ -2612,6 +2872,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) {
@@ -2638,7 +2901,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, "'")
@@ -2664,7 +2927,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插槽但要限制子元素放入
@@ -2679,7 +2942,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') {
@@ -2706,7 +2969,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}"`);
           }
         }