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

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;
@@ -271,8 +275,8 @@ import { EventPayload, Params } from '../common/EventEmitter';
 import { concept, excludedInJSON, property, getConceptConstructor, getBaseNode } from '../decorators';
 
 import * as utils from '../utils';
-import * as Type from './utils/types';
-import * as Assert from './utils/asserts';
+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__';
@@ -288,13 +292,12 @@ import type Frontend from './Frontend__';
  * 页面元素
  */
 @concept('页面元素')
-// @ts-ignore
 export class ViewElement extends BaseNode {
   /** 类名 */
-  static readonly ConceptName = 'ViewElement';
+  static readonly ConceptName: string = 'ViewElement';
 
   /** 继承链 */
-  static readonly inheritanceChain = ['BaseNode'];
+  static readonly inheritanceChain: string[] = ['BaseNode'];
 
   /**
    * 产品概念
@@ -307,56 +310,48 @@ export class ViewElement extends BaseNode {
    * 类型
    */
   @property()
-  // @ts-ignore
   type!: 0;
 
   /**
    * 元素标签
    */
   @property()
-  // @ts-ignore
   tag!: string;
 
   /**
    * 页面元素名称
    */
   @property()
-  // @ts-ignore
   name!: string;
 
   /**
    * 静态 class 名
    */
   @property()
-  // @ts-ignore
   staticClass!: string;
 
   /**
    * 静态 style
    */
   @property()
-  // @ts-ignore
   staticStyle!: string;
 
   /**
    * 权限资源描述
    */
   @property()
-  // @ts-ignore
   authDescription!: string;
 
   /**
    * 插槽目标
    */
   @property()
-  // @ts-ignore
   slotTarget!: string;
 
   /**
    * 插槽 scope 表达式
    */
   @property()
-  // @ts-ignore
   slotScope!: string;
 
   /**
@@ -554,7 +549,7 @@ export class ViewElement extends BaseNode {
         this,
         'bindAttrs',
       );
-    } else if (Assert.isBindAttribute(options)) {
+    } else if (asserts.isBindAttribute(options)) {
       options.ensureDelete(); // 同一实例不支持多处存在
       bindAttribute = options;
       Object.assign(bindAttribute, relationOptions);
@@ -708,7 +703,7 @@ export class ViewElement extends BaseNode {
         this,
         'bindEvents',
       );
-    } else if (Assert.isBindEvent(options)) {
+    } else if (asserts.isBindEvent(options)) {
       options.ensureDelete(); // 同一实例不支持多处存在
       bindEvent = options;
       Object.assign(bindEvent, relationOptions);
@@ -864,7 +859,7 @@ export class ViewElement extends BaseNode {
         this,
         'bindDirectives',
       );
-    } else if (Assert.isBindDirective(options)) {
+    } else if (asserts.isBindDirective(options)) {
       options.ensureDelete(); // 同一实例不支持多处存在
       bindDirective = options;
       Object.assign(bindDirective, relationOptions);
@@ -1018,7 +1013,7 @@ export class ViewElement extends BaseNode {
         this,
         'bindStyles',
       );
-    } else if (Assert.isBindStyle(options)) {
+    } else if (asserts.isBindStyle(options)) {
       options.ensureDelete(); // 同一实例不支持多处存在
       bindStyle = options;
       Object.assign(bindStyle, relationOptions);
@@ -1164,7 +1159,7 @@ export class ViewElement extends BaseNode {
         this,
         'children',
       );
-    } else if (Assert.isViewElement(options)) {
+    } else if (asserts.isViewElement(options)) {
       options.ensureDelete(); // 同一实例不支持多处存在
       viewElement = options;
       Object.assign(viewElement, relationOptions);
@@ -1551,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();
@@ -1577,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)[-_]/;
@@ -1627,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`;
       }
@@ -1717,17 +1716,16 @@ export class ViewElement extends BaseNode {
     code += indent((state?.tabSize || 0) + 2);
     let levelIndex = parentLevel || 0;
     code += `${self.name}: () => {\n`;
-    if (self.tag === 'template' && self.haveScope() && Assert.isViewElement(self.parentNode)) {
+    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
-        }>`;
+        genericity += `<${(_this.parentNode as any).__tsVariableDataSourceTypeName}, ${(_this as any).__tsVariableDataSourceTypeName
+          }>`;
       } else {
         let targetNode: any = _this;
-        while (!targetNode.__tsVariableDataSourceTypeName && Assert.isViewElement(targetNode?.parentNode)) {
+        while (!targetNode.__tsVariableDataSourceTypeName && asserts.isViewElement(targetNode?.parentNode)) {
           targetNode = targetNode.parentNode;
         }
         genericity += `<${(targetNode as any).__tsVariableDataSourceTypeName ?? 'any'}>`;
@@ -1741,9 +1739,9 @@ export class ViewElement extends BaseNode {
       const datasourceName = `datasourceName${self.name}`;
       (self as any).__tsVariableDataSourceTypeName = datasourceName;
       if (
-        Assert.isMemberExpression(attr.expression) ||
-        Assert.isIdentifier(attr.expression) ||
-        Assert.isCallLogic(attr.expression)
+        asserts.isMemberExpression(attr.expression) ||
+        asserts.isIdentifier(attr.expression) ||
+        asserts.isCallLogic(attr.expression)
       ) {
         const extraParams = {
           tabSize: 4,
@@ -1838,9 +1836,9 @@ export class ViewElement extends BaseNode {
           const datasourceName = `datasourceName${element.name}`;
           (element as any).__tsDataSourceTypeName = datasourceName;
           if (
-            Assert.isMemberExpression(attr.expression) ||
-            Assert.isIdentifier(attr.expression) ||
-            Assert.isCallLogic(attr.expression)
+            asserts.isMemberExpression(attr.expression) ||
+            asserts.isIdentifier(attr.expression) ||
+            asserts.isCallLogic(attr.expression)
           ) {
             const extraParams = {
               tabSize: 4,
@@ -1866,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;
       // 匹配所有特殊字符都转为_
@@ -1945,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
@@ -1978,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) {
@@ -1988,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)) {
@@ -2049,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';
@@ -2162,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(
@@ -2224,7 +2280,7 @@ export class ViewElement extends BaseNode {
           expression: transAstNodeToNaslNode(Object.assign({}, argument)),
         }));
       }
-    } catch (error) {}
+    } catch (error) { }
 
     return {
       concept: 'ValidationRule',
@@ -2519,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) => {
@@ -2551,7 +2609,7 @@ export class ViewElement extends BaseNode {
           }
           if (
             attr.name === 'text' &&
-            Assert.isMemberExpression((attr as BindAttribute)?.expression) &&
+            asserts.isMemberExpression((attr as BindAttribute)?.expression) &&
             ((attr?.expression as MemberExpression)?.object as Identifier)?.namespace?.startsWith('elements.') &&
             ((attr?.expression as MemberExpression)?.object as Identifier)?.namespace?.endsWith('.property')
           ) {
@@ -2650,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++;
@@ -2695,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];
@@ -2737,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';
@@ -2761,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}\`"`);
@@ -2777,7 +2901,7 @@ export class ViewElement extends BaseNode {
         const result = newOptions.attrFormat(attr, this, attr?.toVue(newOptions));
 
         // v-auth v-if 都翻译成 v-if
-        if (Assert.isBindDirective(attr) && ['if', 'auth'].includes(attr.name) && result !== false) {
+        if (asserts.isBindDirective(attr) && ['if', 'auth'].includes(attr.name) && result !== false) {
           const expr = result.replace(/v-(if|auth)="(.*)"/, (match, p1, p2) => p2);
           if (expr) vIfs.push(attr.name === 'if' ? expr : `$auth.has(${expr})`);
 
@@ -2839,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);
       });
     }
   }
@@ -2877,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++;
       }