@lcap/nasl 3.5.0-alpha.1 → 3.5.0-beta.2

package/src/concepts/ParamWithGroup__.ts

@@ -0,0 +1,101 @@
+//================================================================================
+// 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
+// ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
+//================================================================================
+import { EventPayload, Params } from '../common/EventEmitter';
+import { concept, excludedInJSON, property, getConceptConstructor, getBaseNode } 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 Param from './Param__';
+
+/**
+ * 参数分组
+ */
+@concept('参数分组')
+export class ParamWithGroup extends Param {
+  /** 类名 */
+  static readonly ConceptName: string = 'ParamWithGroup';
+
+  /** 继承链 */
+  static readonly inheritanceChain: string[] = ['Param', 'BaseNode'];
+
+  /**
+   * 产品概念
+   */
+  @property('concept')
+  // @ts-ignore
+  readonly concept!: 'ParamWithGroup';
+
+  /**
+   * 参数分组标题
+   */
+  @property()
+  title!: string;
+
+  /**
+   * 类别
+   */
+  @property()
+  group!: string;
+
+  /**
+   * @param source 需要合并的部分参数
+   */
+  constructor(source?: Partial<any>) {
+    source = Object.assign({}, ParamWithGroup.getDefaultOptions(), source);
+    super(source);
+    super.subConstructor(source);
+  }
+
+  static from(source: any, parentNode?: any, parentKey?: string): any {
+    return super.from(source, parentNode, parentKey) as any;
+  }
+
+  /**
+   * 设置参数分组标题
+   */
+  setTitle(title: string) {
+    const object = {
+      title,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置类别
+   */
+  setGroup(group: string) {
+    const object = {
+      group,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  //================================================================================
+  // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+  // 自动生成的代码已结束。下面可以手动编写。
+  //================================================================================
+  static getDefaultOptions() {
+    return {
+      group: '主要属性',
+    };
+  }
+
+  //================================================================================
+  // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
+  // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
+  //================================================================================
+}
+
+export default ParamWithGroup;
+//================================================================================
+// ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+// 自动生成的代码已结束。下面可以手动编写。
+//================================================================================

package/src/concepts/Param__.ts

@@ -361,17 +361,25 @@ export class Param extends BaseNode {
   toJS(state?: TranslatorState): string {
     if (this.view) {
       const typeAnnotation = this.typeAnnotation || this.__TypeAnnotation;
+      let { sortedTypeKey, typeKind, typeName, typeNamespace } = typeAnnotation || {};
+      if (typeNamespace?.endsWith('.metadataTypes')) {
+        const referenceNode = this.app.findNodeByCompleteName(typeNamespace + '.' + typeName) || {};
+        const typeAn = referenceNode.typeAnnotation || {};
+        sortedTypeKey = `${typeAn.typeNamespace}.${typeAn.typeName}`;
+        typeKind = typeAn.typeKind;
+        typeName = typeAn.typeName;
+      }
       const needGenInitFromSchema =
         typeAnnotation &&
-        (!['primitive', 'union'].includes(typeAnnotation.typeKind) || typeAnnotation.typeName === 'DateTime');
+        (!['primitive', 'union'].includes(typeKind) || typeName === 'DateTime');
       let code = `${this.name} = `;
       if (needGenInitFromSchema) {
-        code += `this.$genInitFromSchema('${typeAnnotation?.sortedTypeKey}',`;
+        code += `this.$genInitFromSchema('${sortedTypeKey}',`;
       }
 
       const expressionJS = this.defaultValue?.toJS?.();
 
-      code += `${this.name} || (this.$route.query.hasOwnProperty('${this.name}') ? this.$genInitFromSchema('${typeAnnotation?.sortedTypeKey}', this.$route.query.${this.name}) : ${expressionJS})`;
+      code += `${this.name} || (this.$route.query.hasOwnProperty('${this.name}') ? this.$genInitFromSchema('${sortedTypeKey}', this.$route.query.${this.name}) : ${expressionJS})`;
       if (needGenInitFromSchema) {
         code += `)`;
       }

package/src/concepts/Return__.ts

@@ -322,12 +322,20 @@ export class Return extends BaseNode {
   toJS(state?: TranslatorState): string {
     const context = this.view ? 'this' : 'Vue.prototype';
     const typeAnnotation = this.typeAnnotation || this.__TypeAnnotation;
+    let { sortedTypeKey, typeKind, typeName, typeNamespace } = typeAnnotation || {};
+    if (typeNamespace?.endsWith('.metadataTypes')) {
+      const referenceNode = this.app.findNodeByCompleteName(typeNamespace + '.' + typeName) || {};
+      const typeAn = referenceNode.typeAnnotation || {};
+      sortedTypeKey = `${typeAn.typeNamespace}.${typeAn.typeName}`;
+      typeKind = typeAn.typeKind;
+      typeName = typeAn.typeName;
+    }
     const needGenInitFromSchema =
       typeAnnotation &&
-      (!['primitive', 'union'].includes(typeAnnotation.typeKind) || typeAnnotation.typeName === 'DateTime');
+      (!['primitive', 'union'].includes(typeKind) || typeName === 'DateTime');
     let code = `${this.name} = `;
     if (needGenInitFromSchema) {
-      code += `${context}.$genInitFromSchema('${typeAnnotation?.sortedTypeKey}',`;
+      code += `${context}.$genInitFromSchema('${sortedTypeKey}',`;
     }
 
     if (this.defaultValue?.expression) {
@@ -401,18 +409,13 @@ export class Return extends BaseNode {
     let code = this.name;
     if (this.typeAnnotation) {
       code += `: `;
-      if (
-        this.defaultValue?.expression &&
-        !(
-          this.typeAnnotation &&
-          ['nasl.core.DateTime', 'nasl.core.Time', 'nasl.core.Date'].includes(this.typeAnnotation.typeKey)
-        )
-      ) {
-        code += `${yield* this.defaultValue.toEmbeddedTS(shiftState(state, code))}`;
-      } else {
-        if (['nasl.core.DateTime', 'nasl.core.Time', 'nasl.core.Date'].includes(this.typeAnnotation?.typeKey)) {
+      if (this.defaultValue?.expression) {
+        if (['nasl.core.DateTime', 'nasl.core.Time', 'nasl.core.Date'].includes(this.typeAnnotation.typeKey)) {
           code += yield* this.defaultValue.toEmbeddedTS(shiftState(state, code), true);
+        } else {
+          code += `${yield* this.defaultValue.toEmbeddedTS(shiftState(state, code))}`;
         }
+      } else {
         code += 'undefined';
       }
       code += ' as ';

package/src/concepts/TypeAnnotation__.ts

@@ -1247,7 +1247,7 @@ export class TypeAnnotation extends BaseNode {
         return undefined; // 忽略此属性
       }
       return value; // 其他情况下返回原始值
-    }
+    };
     if (typeAnnotation1.typeArguments) {
       typeAnnotation1.typeArguments = this.sortedTypeKey;
     }

package/src/concepts/Variable__.ts

@@ -342,12 +342,20 @@ export class Variable extends BaseNode {
   toJS(state?: TranslatorState): string {
     const context = this.view ? 'this' : 'Vue.prototype';
     const typeAnnotation = this.typeAnnotation || this.__TypeAnnotation;
+    let { sortedTypeKey, typeKind, typeName, typeNamespace } = typeAnnotation || {};
+    if (typeNamespace?.endsWith('.metadataTypes')) {
+      const referenceNode = this.app.findNodeByCompleteName(typeNamespace + '.' + typeName) || {};
+      const typeAn = referenceNode.typeAnnotation || {};
+      sortedTypeKey = `${typeAn.typeNamespace}.${typeAn.typeName}`;
+      typeKind = typeAn.typeKind;
+      typeName = typeAn.typeName;
+    }
     const needGenInitFromSchema =
       typeAnnotation &&
-      (!['primitive', 'union'].includes(typeAnnotation.typeKind) || typeAnnotation.typeName === 'DateTime');
+      (!['primitive', 'union'].includes(typeKind) || typeName === 'DateTime');
     let code = `${this.name} = `;
     if (needGenInitFromSchema) {
-      code += `${context}.$genInitFromSchema('${typeAnnotation?.sortedTypeKey}',`;
+      code += `${context}.$genInitFromSchema('${sortedTypeKey}',`;
     }
 
     if (this.defaultValue?.expression) {
@@ -457,7 +465,9 @@ export class Variable extends BaseNode {
    * @param name 一般不用传，用于 rename
    */
   getEmbeddedFilePath(name = this.name) {
-    return `/embedded/${this.app.name}/frontends/${this.parentNode.name}/variables/${name}.ts`;
+    return `/embedded/${this.getAncestor('App')?.name}/frontendTypes/${
+      this.getAncestor('FrontendType')?.name
+    }/frontends/${this.getAncestor('Frontend')?.name}/variables/${name}.ts`;
   }
 
   *toEmbeddedTSFile(): EmbeddedTSFileGenerator {
@@ -490,15 +500,13 @@ export class Variable extends BaseNode {
     }
     if (this.typeAnnotation) {
       code += `: `;
-      if (
-        this.defaultValue?.expression &&
-        !(this.typeAnnotation && ['nasl.core.DateTime', 'nasl.core.Time', 'nasl.core.Date'].includes(typeKey))
-      ) {
-        code += `${yield* this.defaultValue.toEmbeddedTS(shiftState(state, code))}`;
-      } else {
+      if (this.defaultValue?.expression) {
         if (['nasl.core.DateTime', 'nasl.core.Time', 'nasl.core.Date'].includes(typeKey)) {
           code += yield* this.defaultValue.toEmbeddedTS(shiftState(state, code), true);
+        } else {
+          code += `${yield* this.defaultValue.toEmbeddedTS(shiftState(state, code))}`;
         }
+      } else {
         code += 'undefined';
       }
       code += ' as ';

package/src/concepts/ViewElement__.ts

@@ -21,6 +21,8 @@ import { config } from '../config';
 import type MemberExpression from './MemberExpression__';
 import type Identifier from './Identifier__';
 import { PAGE_COMPONENT_INCLUDE_TAG_MAP } from './View__';
+import type BusinessComponent from './BusinessComponent__';
+import type FrontendType from './FrontendType__';
 
 import { kebab2Camel } from '../utils';
 export interface ParseContext {
@@ -72,6 +74,8 @@ function genArgumentMemberExpression(arr: string[]) {
   return expressionNode;
 }
 export interface ElementToVueOptions {
+  isRoot?: boolean;
+  asCompontent?: boolean;
   indentStyle?: 'space' | 'tab';
   tabSize?: number;
   indentLevel?: number;
@@ -1542,6 +1546,10 @@ export class ViewElement extends BaseNode {
   // 自动生成的代码已结束。下面可以手动编写。
   //================================================================================
 
+  get likeComponent(): View | BusinessComponent {
+    return this.view || (this?.getAncestor('BusinessComponent') as BusinessComponent);
+  }
+
   /* 主页面有没有权限 */
   get parentAuth() {
     const _nameSpace = this.view.getNamespace();
@@ -1568,11 +1576,11 @@ export class ViewElement extends BaseNode {
   }
 
   getViewElementUniqueName(name = 'viewElement1') {
-    return this.view?.getViewElementUniqueName(name);
+    return this.likeComponent?.getViewElementUniqueName(name);
   }
 
   getViewElementUniqueNameOld(name = 'viewElement1') {
-    return this.view?.getViewElementUniqueNameOld(name);
+    return this.likeComponent?.getViewElementUniqueNameOld(name);
   }
 
   public static readonly TAG_NAME_PREFIX_REG?: RegExp = /^([lieu]|van)[-_]/;
@@ -1618,16 +1626,16 @@ export class ViewElement extends BaseNode {
     const self = this;
     let code = '';
     code += indent((state?.tabSize || 0) + 1);
-    // 登录组件不翻译
-    if (self.toHump(self.tag) === 'lcapLogin' || self.staticClass === 'login-form') {
+    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`;
+        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`;
       }
@@ -1713,9 +1721,8 @@ export class ViewElement extends BaseNode {
       const _this = self.parentNode;
       let genericity = '';
       if (_this.tag === 'u-table-view-column-dynamic') {
-        genericity += `<${(_this.parentNode as any).__tsVariableDataSourceTypeName}, ${
-          (_this as any).__tsVariableDataSourceTypeName
-        }>`;
+        genericity += `<${(_this.parentNode as any).__tsVariableDataSourceTypeName}, ${(_this as any).__tsVariableDataSourceTypeName
+          }>`;
       } else {
         let targetNode: any = _this;
         while (!targetNode.__tsVariableDataSourceTypeName && asserts.isViewElement(targetNode?.parentNode)) {
@@ -1857,10 +1864,39 @@ export class ViewElement extends BaseNode {
     code += indent((state?.tabSize || 0) + 2);
     return code;
   }
+
+  // 获取端类型
+  get frontendType() {
+    return this.getAncestor('FrontendType') as FrontendType;
+  }
+
+  // 对应业务组件
+  get isCorrespondingBusinessComponent() {
+    return this.tag.startsWith('bs-');
+  }
+
+  // 对应的业务组件的Namespace
+  get correspondingBusinessComponentNamespace() {
+    return `${this.frontendType?.getNamespace()}.${this.frontendType?.name}.businessComponents`;
+  }
+
+  // 获取对应的业务组件
+  get correspondingBusinessComponent() {
+    if (this.isCorrespondingBusinessComponent) {
+      // 端下的业务组件
+      const businessComponents = this.frontendType?.businessComponents;
+      const businessComponent = businessComponents.find((businessComponent) => {
+        return `bs-${businessComponent?.name}` === this.tag;
+      });
+      return businessComponent;
+    }
+  }
+
+
   @withSourceMapGenerator
   *toEmbeddedTS(state = createCompilerState(), parentLevel?: number): TranslatorGenerator {
     const self = this;
-    const { parentNode, app, tag, staticClass, name, bindDirectives, bindRoles, bindEvents, children } = self;
+    const { parentNode, app, tag, staticClass, name, bindRoles, bindEvents, children } = self;
     const chineseTsName = (name: string) => {
       let tsName = name;
       // 匹配所有特殊字符都转为_
@@ -1936,8 +1972,12 @@ export class ViewElement extends BaseNode {
       code += '},\n';
       return code;
     }
+    let namespace = `nasl.ui.${self.toHump(tag)}`;
+    if (self.isCorrespondingBusinessComponent) {
+      namespace = `${self.correspondingBusinessComponentNamespace}.${self.tag.replace('bs-', '')}`;
+    }
     // 后面那个name是为了查找引用的时候用的
-    let code = `new nasl.ui.${self.toHump(tag)}${self.getTypeArgmentsStr(state)}({name: __elements.${name},\n`;
+    let code = `new ${namespace}${self.getTypeArgmentsStr(state)}({name: __elements.${name},\n`;
     // 是否开启权限
     // const hasAuth = Array.isArray(bindDirectives)
     //     ? !!bindDirectives.filter((directive) => directive.name === 'auth').length
@@ -1969,8 +2009,18 @@ export class ViewElement extends BaseNode {
     if (Array.isArray(children)) {
       code += indent((state?.tabSize || 0) + 1);
       if (Array.isArray(self.bindAttrs)) {
-        code += `bindAttr: () => [\n`;
+        code += `bindAttr: `;
+        if (self.isCorrespondingBusinessComponent) {
+          code += `{\n`;
+        } else {
+          code += `() => [\n`;
+        }
         yield* wrapForEach(self.bindAttrs, function* warpForEachGenerator(attr) {
+          // 过滤自由布局的key
+          const shouldFilter = self.isCorrespondingBusinessComponent && !(name === 'key' && !attr.expression);
+          if (shouldFilter) {
+            return;
+          }
           code += (yield* attr.toEmbeddedTS(shiftState(state, code, { tabSize: 1 }))) + ',\n';
         });
         yield* wrapForEach(self.bindDirectives, function* warpForEachGenerator(directive) {
@@ -1979,7 +2029,12 @@ export class ViewElement extends BaseNode {
         yield* wrapForEach(self.bindStyles, function* warpForEachGenerator(bindStyle) {
           code += (yield* bindStyle.toEmbeddedTS(shiftState(state, code, { tabSize: 1 }))) + ',\n';
         });
-        code += indent((state?.tabSize || 0) + 2) + '],\n';
+        code += indent((state?.tabSize || 0) + 2)
+        if (self.isCorrespondingBusinessComponent) {
+          code += '},\n';
+        } else {
+          code += '],\n';
+        }
       }
       // 如果子集中有插槽的就
       if (children.find((item) => item.tag === 'template' && item.slotTarget)) {
@@ -2040,7 +2095,7 @@ export class ViewElement extends BaseNode {
     }
     code += indent(state?.tabSize || 0) + '})';
     // 顶层元素是单独的表达式
-    if (parentNode.concept === 'View') {
+    if (parentNode.concept === 'View' || asserts.isBusinessComponent(parentNode)) {
       code += ';\n';
     } else {
       code += ',\n';
@@ -2153,10 +2208,20 @@ export class ViewElement extends BaseNode {
       { mode: 'anyObject', excludedKeySet: element.JSON_EXCLUDED_KEYS },
     );
 
-    this.view.existingViewElement.clear();
+    this.likeComponent?.existingViewElement.clear();
     return element;
   }
 
+  setTag(tag: string) {
+    const object = {
+      tag,
+    };
+    this.update({
+      ...object,
+
+    });
+  }
+
   // 递归遍历组件
   public traverseChildren(cb: (ele: ViewElement) => void): void {
     utils.traverse(
@@ -2215,7 +2280,7 @@ export class ViewElement extends BaseNode {
           expression: transAstNodeToNaslNode(Object.assign({}, argument)),
         }));
       }
-    } catch (error) {}
+    } catch (error) { }
 
     return {
       concept: 'ValidationRule',
@@ -2510,8 +2575,10 @@ export class ViewElement extends BaseNode {
    * 转换成设计器中使用的 Vue 文件
    * @param options
    */
-  toDesignerVue() {
+  toDesignerVue(options?: { isRoot: boolean; asCompontent?: boolean }) {
     return this.toVue({
+      isRoot: options?.isRoot,
+      asCompontent: options?.asCompontent,
       finalCode: false,
       nodePathAttr: true,
       attrFormat: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => {
@@ -2641,12 +2708,16 @@ export class ViewElement extends BaseNode {
     });
   }
 
+  isLikeComponent(node: types.SyntaxNode) {
+    return ['View', 'BusinessComponent'].includes(node?.concept);
+  }
+
   // 获取currentList
   getCurrentList() {
     const argsList: string[] = [];
     let parent = this.parentNode;
     let index = 0;
-    while (parent && parent.concept !== 'View') {
+    while (parent && !this.isLikeComponent(parent)) {
       if ((parent as ViewElement).slotScope) {
         argsList.push(index === 0 ? 'current' : 'current' + index);
         index++;
@@ -2686,10 +2757,73 @@ export class ViewElement extends BaseNode {
     return null;
   }
 
+  get businessComponent() {
+    return this.getAncestor('BusinessComponent');
+  }
+
   /**
    * 转换成 Vue 的模板格式
    */
   toVue(options?: ElementToVueOptions) {
+    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" 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"');
+        if (this.frontendType?.kind === 'h5') {
+          parts.push('class="l-root-h5"');
+        } else {
+          parts.push('style="height:100%; --custom-start: auto; min-height: 200px;"');
+        }
+      }
+    }
+    if (options) {
+      options.isRoot = false;
+    }
     let currentList: string[] = [];
     if (Array.isArray(options?.currentList)) {
       currentList = [...options?.currentList];
@@ -2728,16 +2862,15 @@ export class ViewElement extends BaseNode {
     const content: string = !this.children
       ? ''
       : this.children
-          .map((element) => {
-            const childOptions = Object.assign({}, newOptions);
-            childOptions.indentLevel++;
-            return (shouldIndent ? '\n' + insideTabString : '') + element?.toVue(childOptions);
-          })
-          .join('');
+        .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';
@@ -2752,9 +2885,9 @@ 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}\`"`);
@@ -2830,7 +2963,7 @@ export class ViewElement extends BaseNode {
     super.delete();
     if (this.parentNode) {
       this.traverseChildren((ele: ViewElement) => {
-        (this.view as any)?.removeExistingViewElement(ele);
+        (this.likeComponent as any)?.removeExistingViewElement(ele);
       });
     }
   }
@@ -2868,7 +3001,7 @@ export class ViewElement extends BaseNode {
     let current = 'current';
     let parent = this.parentNode;
     let index = 0;
-    while (parent && parent.concept !== 'View') {
+    while (parent && !this.isLikeComponent(parent)) {
       if ((parent as ViewElement).slotScope) {
         index++;
       }

package/src/concepts/View__.ts

@@ -1690,7 +1690,7 @@ export class View extends BaseNode {
       newName = name.replace(/\d*$/, (m) => `_${BranchCopyUniCode}_${m}`);
     }
     // 主分支无 BranchCopyUniCode
-    if (!BranchCopyUniCode && prefix.at(-1) !== '_') {
+    if (!BranchCopyUniCode && prefix?.at(-1) !== '_') {
       newName = name.replace(/\d*$/, (m) => `_${m}`);
     }
     const newPrefix = newName.replace(/\d*$/, '');
@@ -1867,7 +1867,7 @@ export class View extends BaseNode {
               logics: [newLogic],
             },
             this,
-            'events',
+            'bindEvents',
           );
           this.addBindEvent(event);
         } else {
@@ -1990,7 +1990,7 @@ export class View extends BaseNode {
                       .join('\n')}
                 }
             }
-        };`;
+        };\n`;
     code += keyboardEventMixinCode;
     if (this.script) {
       mixin = this.script.trim().replace(/export default |module\.exports +=/, 'const mixin = ');
@@ -2069,7 +2069,9 @@ export class View extends BaseNode {
         parent = parent.parentNode;
       }
     }
-    return `/embedded/${this.app.name}/frontends/${this.frontend.name}/views/${pathName}.ts`;
+    return `/embedded/${this.getAncestor('App')?.name}/frontendTypes/${
+      this.getAncestor('FrontendType')?.name
+    }/frontends/${this.getAncestor('Frontend')?.name}/views/${pathName}.ts`;
   }
 
   getNamespace(): string {

package/src/concepts/index__.ts

@@ -1,6 +1,7 @@
 export * from './App__';
 export * from './Module__';
 export * from './Namespace__';
+export * from './FrontendType__';
 export * from './Frontend__';
 export * from './Backend__';
 export * from './Integration__';
@@ -24,6 +25,7 @@ export * from './BindDirective__';
 export * from './BindEvent__';
 export * from './BindStyle__';
 export * from './ViewComponent__';
+export * from './BusinessComponent__';
 export * from './Attribute__';
 export * from './Event__';
 export * from './Slot__';
@@ -31,10 +33,12 @@ export * from './Theme__';
 export * from './StaticString__';
 export * from './Logic__';
 export * from './AuthLogic__';
+export * from './BusinessLogic__';
 export * from './AuthLogicForCallInterface__';
 export * from './OverriddenLogic__';
 export * from './AbstractInterface__';
 export * from './Param__';
+export * from './ParamWithGroup__';
 export * from './Return__';
 export * from './Variable__';
 export * from './BackendVariable__';
@@ -60,6 +64,7 @@ export * from './Assignment__';
 export * from './BatchAssignment__';
 export * from './Comment__';
 export * from './CallLogic__';
+export * from './CallEvent__';
 export * from './CallFunction__';
 export * from './CallInterface__';
 export * from './Destination__';