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

package/src/concepts/View__.ts

@@ -26,34 +26,37 @@ import type BatchAssignment from './BatchAssignment__';
 import type CallInterface from './CallInterface__';
 import type CallLogic from './CallLogic__';
 import type DefaultValue from './DefaultValue__';
-import type Interface from './Interface__';
+import type Interface from './Interface__'; // 临时记录删除的页面元素计数的最大值
+import type LogicItem from './LogicItem__';
+import type CallFunction from './CallFunction__';
+
+import App from './App__';
+import Module from './Module__';
+import Frontend from './Frontend__';
 
 const getBranchCopyUniCode = () => (window as any)?.BranchCopyUniCode;
 const removedViewElementCache: {
   [key: string]: number | bigint;
-} = {}; // 临时记录删除的页面元素计数的最大值
+} = {};
 
 //================================================================================
 // 从这里开始到结尾注释之间的代码由 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 StaticString from './StaticString__';
-import type ViewElement from './ViewElement__';
-import type Param from './Param__';
-import type Variable from './Variable__';
-import type Logic from './Logic__';
-import type BindEvent from './BindEvent__';
-import type Module from './Module__';
-import type Frontend from './Frontend__';
-import type App from './App__';
+import StaticString from './StaticString__';
+import ViewElement from './ViewElement__';
+import Param from './Param__';
+import Variable from './Variable__';
+import Logic from './Logic__';
+import BindEvent from './BindEvent__';
 
 /**
  * 页面
@@ -62,7 +65,11 @@ import type App from './App__';
 export class View extends BaseNode {
   /** 类名 */
   static readonly ConceptName: string = 'View';
-
+  /**
+   * 是否为抽象类
+   * 抽象类不能产生 concept: string
+   */
+  static isAbstract: boolean = false;
   /** 继承链 */
   static readonly inheritanceChain: string[] = ['BaseNode'];
 
@@ -72,30 +79,37 @@ export class View extends BaseNode {
   @property('concept')
   // @ts-ignore
   readonly concept!: 'View';
-
   /**
    * 页面模板 Id
    */
-  @property()
-  pageTemplateId!: string;
+  @property({
+    objectRef: '',
+  })
+  pageTemplateId: string;
 
   /**
    * 页面名称
    */
-  @property()
-  name!: string;
+  @property({
+    objectRef: '',
+  })
+  name: string = '';
 
   /**
    * 唯一标识
    */
-  @property()
-  uuid!: string;
+  @property({
+    objectRef: '',
+  })
+  uuid: string;
 
   /**
    * 页面标题
    */
-  @property()
-  title!: string;
+  @property({
+    objectRef: '',
+  })
+  title: string;
 
   /**
    * 面包屑
@@ -103,43 +117,55 @@ export class View extends BaseNode {
   @property({
     objectRef: 'StaticString',
   })
-  crumb!: StaticString;
+  crumb: StaticString;
 
   /**
    * 权限控制
    */
-  @property()
-  auth!: boolean;
+  @property({
+    objectRef: '',
+  })
+  auth: boolean;
 
   /**
    * 权限资源描述
    */
-  @property()
-  authDescription!: string;
+  @property({
+    objectRef: '',
+  })
+  authDescription: string;
 
   /**
    * 是否是默认跳转的页面
    */
-  @property()
-  isIndex!: boolean;
+  @property({
+    objectRef: '',
+  })
+  isIndex: boolean;
 
   /**
    * 未解析的模板代码
    */
-  @property()
-  template!: string;
+  @property({
+    objectRef: '',
+  })
+  template: string;
 
   /**
    * 未解析的逻辑代码
    */
-  @property()
-  script!: string;
+  @property({
+    objectRef: '',
+  })
+  script: string;
 
   /**
    * 未解析的样式代码
    */
-  @property()
-  style!: string;
+  @property({
+    objectRef: '',
+  })
+  style: string;
 
   /**
    * 页面元素列表
@@ -195,6 +221,7 @@ export class View extends BaseNode {
    * 绑定的角色
    */
   @property({
+    objectRef: '',
     isArray: true,
     defaultValue: [],
   })
@@ -210,25 +237,6 @@ export class View extends BaseNode {
   })
   children: Array<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 需要合并的部分参数
    */
@@ -242,17 +250,6 @@ export class View extends BaseNode {
     return super.from(source, parentNode, parentKey) as View;
   }
 
-  /**
-   * 从父级删除该节点
-   * @internal
-   */
-  _delete() {
-    let params: Params = null;
-    if (this.parentNode) {
-      params = (this.parentNode as any)?.__removeView?.(this);
-    }
-    return params;
-  }
   /**
    * 设置页面名称
    */
@@ -927,7 +924,7 @@ export class View 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);
@@ -1081,7 +1078,7 @@ export class View extends BaseNode {
 
   getViewExistingNames(excludedList: Array<View> = []) {
     const excludedSet = new Set(excludedList);
-    return ((this.children as View[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item?.name);
+    return ((this.children as View[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
   }
   getViewUniqueName(name = 'view1') {
     return utils.unique(name, this.getViewExistingNames(), undefined, false);
@@ -1233,62 +1230,6 @@ export class View extends BaseNode {
     return node;
   }
 
-  /**
-   * 删除静态字符串
-   * @param name 静态字符串名称
-   */
-  removeCrumb(name: string): void;
-
-  /**
-   * 删除静态字符串
-   * @param crumb 已有的静态字符串实例
-   */
-  removeCrumb(crumb: StaticString): void;
-
-  removeCrumb(options: string | StaticString) {
-    let crumb: StaticString;
-    if (typeof options === 'string') {
-      crumb = this.crumb;
-      if (!crumb) {
-        throw new Error('找不到静态字符串 ' + options);
-      }
-    } else {
-      crumb = options;
-    }
-    return crumb.delete();
-  }
-
-  __removeStaticString(staticString: StaticString) {
-    const parentKey = staticString.parentKey;
-    const params: Params = {
-      parentNode: this,
-      parentKey,
-      index: -1,
-      object: null,
-      oldObject: staticString,
-    };
-    if (parentKey) {
-      params.parentKey = parentKey;
-      // @ts-ignore
-      const t = this.__v_raw || this;
-      // @ts-ignore
-      const n = staticString.__v_raw || staticString;
-      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 页面元素名称
@@ -1314,37 +1255,6 @@ export class View 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;
-  }
-
   /**
    * 删除输入参数
    * @param name 输入参数名称
@@ -1370,37 +1280,6 @@ export class View extends BaseNode {
     return param.delete();
   }
 
-  __removeParam(param: Param) {
-    const parentKey = param.parentKey;
-    const params: Params = {
-      parentNode: this,
-      parentKey,
-      index: -1,
-      object: null,
-      oldObject: param,
-    };
-    if (parentKey) {
-      params.parentKey = parentKey;
-      // @ts-ignore
-      const t = this.__v_raw || this;
-      // @ts-ignore
-      const n = param.__v_raw || param;
-      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 变量名称
@@ -1426,37 +1305,6 @@ export class View extends BaseNode {
     return variable.delete();
   }
 
-  __removeVariable(variable: Variable) {
-    const parentKey = variable.parentKey;
-    const params: Params = {
-      parentNode: this,
-      parentKey,
-      index: -1,
-      object: null,
-      oldObject: variable,
-    };
-    if (parentKey) {
-      params.parentKey = parentKey;
-      // @ts-ignore
-      const t = this.__v_raw || this;
-      // @ts-ignore
-      const n = variable.__v_raw || variable;
-      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 逻辑名称
@@ -1482,37 +1330,6 @@ export class View extends BaseNode {
     return logic.delete();
   }
 
-  __removeLogic(logic: Logic) {
-    const parentKey = logic.parentKey;
-    const params: Params = {
-      parentNode: this,
-      parentKey,
-      index: -1,
-      object: null,
-      oldObject: logic,
-    };
-    if (parentKey) {
-      params.parentKey = parentKey;
-      // @ts-ignore
-      const t = this.__v_raw || this;
-      // @ts-ignore
-      const n = logic.__v_raw || logic;
-      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 元素绑定事件名称
@@ -1538,37 +1355,6 @@ export class View 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 页面名称
@@ -1594,41 +1380,23 @@ export class View extends BaseNode {
     return view.delete();
   }
 
-  __removeView(view: View) {
-    const parentKey = view.parentKey;
-    const params: Params = {
-      parentNode: this,
-      parentKey,
-      index: -1,
-      object: null,
-      oldObject: view,
-    };
-    if (parentKey) {
-      params.parentKey = parentKey;
-      // @ts-ignore
-      const t = this.__v_raw || this;
-      // @ts-ignore
-      const n = view.__v_raw || view;
-      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;
-  }
-
   //================================================================================
   // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
   // 自动生成的代码已结束。下面可以手动编写。
   //================================================================================
+  /**
+   * 祖先 Module
+   */
+  get module() {
+    return this.getAncestor('Module') as Module;
+  }
+  /**
+   * 祖先 Frontend
+   */
+  get frontend() {
+    return this.getAncestor('Frontend') as Frontend;
+  }
+
   /* 主页面有没有权限 */
   get parentAuth() {
     const _nameSpace = this.getTsNamespace();
@@ -1690,7 +1458,7 @@ export class View extends BaseNode {
       newName = name.replace(/\d*$/, (m) => `_${BranchCopyUniCode}_${m}`);
     }
     // 主分支无 BranchCopyUniCode
-    if (!BranchCopyUniCode && prefix?.at(-1) !== '_') {
+    if (!BranchCopyUniCode && prefix?.slice(-1) !== '_') {
       newName = name.replace(/\d*$/, (m) => `_${m}`);
     }
     const newPrefix = newName.replace(/\d*$/, '');
@@ -1736,15 +1504,55 @@ export class View extends BaseNode {
     return false;
   }
 
+  getViewElementByName(name: string) {
+    let res: ViewElement | null = null;
+
+    for (let i = 0; i < (this.elements || []).length; i += 1) {
+      const element = this.elements[i];
+      // eslint-disable-next-line @typescript-eslint/no-loop-func
+      utils.traverse(
+        ({ node }) => {
+          if (node.concept === 'ViewElement' && node.name === name) {
+            res = node;
+          }
+        },
+        {
+          node: element,
+        },
+      );
+
+      if (res) {
+        break;
+      }
+    }
+
+    return res;
+  }
+
   public static readonly TAG_NAME_PREFIX_REG?: RegExp = /^([lieu]|van)[-_]/;
 
-  mergeBlock({ code, nodePath, position, cb }: { code: string; nodePath: string; position: string; cb?: Function }) {
+  mergeBlock({
+    code,
+    nodePath,
+    position,
+    slotTarget,
+    cb,
+  }: {
+    code: string;
+    nodePath: string;
+    position: string;
+    slotTarget?: string;
+    cb?: Function;
+  }) {
     const ViewElement = getConceptConstructor('ViewElement');
     const Logic = getConceptConstructor('Logic');
     const Param = getConceptConstructor('Param');
     const Variable = getConceptConstructor('Variable');
     const BindEvent = getConceptConstructor('BindEvent');
-    const template = utils.sliceTagContent(code, 'template');
+    let template = utils.sliceTagContent(code, 'template');
+    if (slotTarget) {
+      template = `<template #${slotTarget}>${template}</template>`;
+    }
     let targetNode = this.app.findNodeByPath(nodePath);
     let parentNode = position === 'append' ? targetNode : targetNode.parentNode;
     if (parentNode.concept === 'View') {
@@ -1949,7 +1757,7 @@ export class View extends BaseNode {
     this.elementsAttrs(this.elements, componentList);
     this.elementsAttrsAll(this.elements, componentListExtra);
 
-    let crumbI18n = this.frontend?.i18nInfo?.enabled && this.crumb?.i18nKey ? this.crumb?.i18nKey : undefined;
+    const crumbI18n = this.frontend?.i18nInfo?.enabled && this.crumb?.i18nKey ? this.crumb?.i18nKey : undefined;
 
     const definition = {
       params: this.params,
@@ -1958,7 +1766,7 @@ export class View extends BaseNode {
       events: this.bindEvents,
       title: this.title,
       crumb: this.crumb?.value,
-      crumbI18n: crumbI18n,
+      crumbI18n,
       first: this.children.find((child) => child.isIndex)?.name,
       auth: this.auth ? 'loginAuth' : undefined,
       viewBindEvents: this.getViewBindEvents(),
@@ -2100,7 +1908,7 @@ export class View extends BaseNode {
     if (elements) {
       elements.forEach((item: ViewElement) => {
         const { bindAttrs = [], name } = item;
-        const isDataSource = bindAttrs.some((attr) => attr.name === 'data-source');
+        const isDataSource = bindAttrs.some((attr) => attr.name === 'dataSource');
         const isInclude = parentNodeNames.includes(name);
 
         allMethods.push(item);
@@ -2121,7 +1929,7 @@ export class View extends BaseNode {
   elementsAttrs(elements: Array<ViewElement>, componentList: Array<ViewElement>) {
     if (elements) {
       elements.forEach((item: ViewElement) => {
-        if (PAGE_COMPONENT_INCLUDE_TAG_MAP?.[item.tag]) {
+        if (ComponentCompletionPropertyMap[item.tag]) {
           componentList.push(item);
         }
         if (item.children.length > 0) {
@@ -2134,7 +1942,7 @@ export class View extends BaseNode {
   elementsAttrsAll(elements: Array<ViewElement>, componentListExtra: Array<ViewElement>) {
     if (elements) {
       elements.forEach((item: ViewElement) => {
-        if (!PAGE_COMPONENT_INCLUDE_TAG_MAP?.[item.tag]) {
+        if (!ComponentCompletionPropertyMap[item.tag]) {
           componentListExtra.push(item);
         }
         if (item.children.length > 0) {
@@ -2171,15 +1979,32 @@ export class View extends BaseNode {
       code += '];\n';
     }
     // 需要类型推导的局部变量/返回值需要调整申明顺序
-    const advanceMap: Map<Variable, Assignment | BatchAssignment> = new Map();
+    const advanceMap: Map<Variable, Assignment | BatchAssignment | CallFunction> = new Map();
     yield* self.traverseChildrenGenerator(function* traverseChildrenGenerator(el) {
-      if (el && (asserts.isBatchAssignment(el) || (asserts.isAssignment(el) && el.left?.name))) {
+      if (el && (
+        // 批量赋值
+        asserts.isBatchAssignment(el)
+        // 赋值
+        || (asserts.isAssignment(el) && el.left?.name)
+        // 内置函数对集合类型的推导
+        || (
+          asserts.isCallFunction(el) && el.derivablecollection?.name
+        )
+      )) {
         // 子页面内部逻辑过滤
         if (el.view !== self) return;
-        if (asserts.isAssignment(el)) {
-          const advanceVar = self.variables?.find(
-            (variable) => !variable.typeAnnotation && el.left?.name === variable.name,
-          );
+        if (asserts.isAssignment(el) || asserts.isCallFunction(el)) {
+          let expression: LogicItem;
+          if (asserts.isAssignment(el)) {
+            // 需要被推导的赋值左侧
+            expression = el.left;
+          } else if (asserts.isCallFunction(el)) {
+            // 需要被推导的集合
+            expression = el.derivablecollection;
+          }
+          const advanceVar = self.variables?.find((variable) => {
+            return !variable.typeAnnotation && expression?.name === variable.name;
+          });
           if (advanceVar && !advanceMap.get(advanceVar)) {
             advanceMap.set(advanceVar, el);
           }
@@ -2232,10 +2057,30 @@ export class View extends BaseNode {
         return;
       }
       code += `${indent((state?.tabSize || 0) + 1)}// @ts-ignore\n`;
+      if (asserts.isCallFunction(assignment)) {
+        yield* wrapForEach([
+          {
+            key: 'key',
+            node: assignment.keyOfCollection
+          },
+          {
+            key: 'item',
+            node: assignment.itemOfCollection
+          }
+        ], function* warpForEachGenerator({ key, node: itemNode }) {
+          if (itemNode) {
+            code += `const __${key}_${variable?.name} = `;
+            const itemCode = yield* itemNode?.toEmbeddedTS(shiftState(state, code, { inline: true })) ??
+              returnOrigin('');
+            code += yield* self.getRightCode(itemCode, assignment, itemNode);
+            code += ';\n';
+          }
+        });
+      }
       code += `${indent((state?.tabSize || 0) + 1)}let `;
       code += yield* variable.toEmbeddedTS(shiftState(state, code, { inline: true }));
-      code += ' = ';
       if (asserts.isBatchAssignment(assignment)) {
+        code += ' = ';
         yield* wrapForEach(assignment.assignmentLines, function* warpForEachGenerator({ leftIndex, rightIndex }) {
           const leftCode =
             leftIndex.length === 1
@@ -2252,27 +2097,37 @@ export class View extends BaseNode {
             code += yield* self.getRightCode(rightCode, assignment, rightNode);
           }
         });
+      } else if (asserts.isCallFunction(assignment)) {
+        const nodeName = variable?.name;
+        const keyNode = assignment.keyOfCollection;
+        const itemNode = assignment.itemOfCollection;
+        if (assignment.isDerivableMap && keyNode && itemNode) {
+          code += `: nasl.collection.Map<typeof __key_${nodeName}, typeof __item_${nodeName}>`;
+        } else if (assignment.isDerivableList && itemNode) {
+          code += `: nasl.collection.List<typeof __item_${nodeName}>`;
+        }
       } else {
+        code += ' = ';
         let rightCode = '';
         // 因为右侧枚举要赋值就得new 一下；
         if (
-          assignment.right &&
-          asserts.isIdentifier(assignment.right) &&
-          assignment.right.namespace &&
-          assignment.right.namespace.endsWith('enums')
+          (assignment as Assignment).right &&
+          asserts.isIdentifier((assignment as Assignment).right) &&
+          ((assignment as Assignment).right as any).namespace &&
+          ((assignment as Assignment).right as any).namespace.endsWith('enums')
         ) {
           rightCode += 'new ';
         }
         rightCode +=
-          assignment.right && assignment.right.toEmbeddedTS
-            ? yield* assignment.right.toEmbeddedTS(shiftState(state, code, { inline: true }))
+          (assignment as Assignment).right && (assignment as Assignment).right.toEmbeddedTS
+          ? yield* (assignment as Assignment).right.toEmbeddedTS(shiftState(state, code, { inline: true }))
             : '__RIGHT__';
-        code += yield* self.getRightCode(rightCode, assignment, assignment.right);
+        code += yield* self.getRightCode(rightCode, assignment, (assignment as Assignment).right);
       }
       code += ';\n';
     });
     // elements类型声明定义
-    code += `interface __elements {\n`;
+    code += `interface IElements {\n`;
     // 生成所有的name和类型定义
     yield* wrapForEach(self.elements, function* warpForEachGenerator(element) {
       code += yield* element.toEmbeddedTSDefinition(
@@ -2282,32 +2137,40 @@ export class View extends BaseNode {
       );
     });
     code += `${indent((state?.tabSize || 0) + 1)}}\n`;
-    code += `let __elements: __elements;\n`;
+    code += `let __elements: IElements;\n`;
+
+    const elementsPathMap: Record<string, string> = {};
+
+    // 深度遍历拿到element path
     if (Array.isArray(self.elements)) {
-      code += `${indent((state?.tabSize || 0) + 1)}interface `;
-      code += `__elements_completionProperty {\n`;
-      const componentList: Array<ViewElement> = [];
-      self.elementsAttrs(self.elements, componentList);
-      const variableList: string[] = [];
-      yield* wrapForEach(self.elements, function* warpForEachGenerator(item) {
-        code += yield* item.toEmbeddedTSVariableDefinition(shiftState(state, code, { inline: true }), variableList);
+      self.elements.forEach((item) => {
+        item.toEmbeddedTSRefPath(elementsPathMap);
       });
-      code += indent((state?.tabSize || 0) + 1) + `}\n`;
-      code += indent((state?.tabSize || 0) + 1);
-      code += `let __elements_completionProperty: __elements_completionProperty;\n`;
-      code += indent((state?.tabSize || 0) + 1);
-      code += `let __elements_variable_function = {\n`;
+    }
+
+    if (Array.isArray(self.elements)) {
+      // elementsRefTree
+      code += `function elementsRefTree() {\n`;
+      code += `return {\n`;
+      code += `children: {\n`;
       yield* wrapForEach(self.elements, function* warpForEachGenerator(item) {
-        code += yield* item.toEmbeddedTSVariableFunctionDefinition(shiftState(state, code, { inline: true }));
+        code += yield* item.toEmbeddedTSRefTree(shiftState(state, code, { inline: true }), { elementsPathMap });
       });
-      code += indent((state?.tabSize || 0) + 1) + `}\n`;
-      code += indent((state?.tabSize || 0) + 1);
-      code += `let __elements_stashFunctionVariable = {\n`;
-      yield* wrapForEach(variableList, function* warpForEachGenerator(item) {
-        code += indent((state?.tabSize || 0) + 2);
-        code += `${item}`;
-      });
-      code += indent((state?.tabSize || 0) + 1) + `}\n`;
+      code += `},\n`;
+      code += `};\n`;
+      code += `};\n`;
+
+      code += `const __elementsRef = {\n`;
+      // eslint-disable-next-line no-restricted-syntax, guard-for-in
+      for (const key in elementsPathMap) {
+        const pathStr = elementsPathMap[key];
+        const pathArr = pathStr.split('.');
+        const path = pathArr.reduce((prev: string, cur: string) => {
+          return `${prev}.children.${cur}()`;
+        }, 'elementsRefTree()');
+        code += `${indent((state?.tabSize || 0) + 1)}${key}: ${path},\n`;
+      }
+      code += `};\n`;
     }
     // 逻辑
     if (Array.isArray(self.logics) && self.logics.length) {
@@ -2352,6 +2215,7 @@ export class View extends BaseNode {
         code += '\n';
       });
     }
+
     code += `\n${indent((state?.tabSize || 0) + 1)}}\n`;
     if (Array.isArray(self.params)) {
       code += `${indent((state?.tabSize || 0) + 1)}export function $destination(options: {`;
@@ -2788,9 +2652,16 @@ ${indent(state.tabSize)}export function ${this.tsName}_view`;
     }
   }
 
-  *getRightCode(code: string, assignment: Assignment | BatchAssignment, rightNode: any) {
+  *getRightCode(code: string, assignment: Assignment | BatchAssignment | CallFunction, rightNode: any) {
     code = code.replaceAll('\n', ' ');
-    const logic = assignment.logic;
+    // 赋值语句的右侧或者集合内置函数的参数
+    if (
+      (asserts.isAssignment(assignment) && !assignment.right)
+      || (asserts.isCallFunction(assignment) && ((assignment.isDerivableList && !assignment.itemOfCollection) || (assignment.isDerivableMap && !(assignment.keyOfCollection && assignment.itemOfCollection))))
+    ) {
+      return code;
+    }
+    const { logic } = assignment;
     const logicRtn = logic?.returns[0];
     // 调用接口，参数替换成 null
     if (asserts.isCallInterface(rightNode)) {
@@ -2859,7 +2730,7 @@ ${indent(state.tabSize)}export function ${this.tsName}_view`;
       if (
         element.concept &&
         element.concept === 'ViewElement' &&
-        (element as ViewElement).bindAttrs.find((bAttr) => bAttr.name === 'data-source')
+        (element as ViewElement).bindAttrs.find((bAttr) => bAttr.name === 'dataSource')
       ) {
         viewElements.push(element as ViewElement);
       }
@@ -2874,7 +2745,7 @@ ${indent(state.tabSize)}export function ${this.tsName}_view`;
       const currentIndex = viewElementsWithDataSource.length - 1 - index;
       const currentItemCode = `current${currentIndex === 0 ? '' : currentIndex}.item`;
       if (code.includes(currentItemCode)) {
-        const dataSource = viewElement.bindAttrs.find((bAttr) => bAttr.name === 'data-source');
+        const dataSource = viewElement.bindAttrs.find((bAttr) => bAttr.name === 'dataSource');
         if (dataSource) {
           const view = viewElement.getAncestor('View') as View;
           const dataSourceTS = yield* dataSource.expression.toEmbeddedTS();
@@ -2897,11 +2768,27 @@ ${indent(state.tabSize)}export function ${this.tsName}_view`;
     return code;
   }
 
+  /**
+   * 该视图是否有子页面容器
+   */
+  hasRouterView() {
+    let res = false;
+    utils.traverse(
+      (current: any) => {
+        if (current.node.tag === 'u-router-view' || current.node.tag === 'van-router-view') {
+          res = true;
+        }
+      },
+      { node: { children: this.elements } },
+    );
+    return res;
+  }
+
   getViewCallLogics(): string[] {
     const callbackLogics: string[] = [];
     this.traverseChildren((el) => {
       if (asserts.isIdentifier(el) && el.namespace?.endsWith('logics')) {
-        callbackLogics.push(el.namespace + '.' + el.name);
+        callbackLogics.push(`${el.namespace}.${el.name}`);
       }
     });
     return callbackLogics;
@@ -2922,47 +2809,49 @@ type AttrObject = {
   value: string;
   label: string;
 };
+
+// 不再使用
 export const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrObject>> = {
   'u-list-view': {
-    'page-size': {
+    pageSize: {
       value: 'size',
       label: '分页大小',
     },
-    'page-number': {
+    pageNumber: {
       value: 'page',
       label: '当前页数',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
   },
   'u-grid-view': {
-    'page-size': {
+    pageSize: {
       value: 'size',
       label: '分页大小',
     },
-    'page-number': {
+    pageNumber: {
       value: 'page',
       label: '当前页数',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
   },
   'u-list-components': {
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
   },
   'u-table-view': {
-    'page-size': {
+    pageSize: {
       value: 'size',
       label: '分页大小',
     },
-    'page-number': {
+    pageNumber: {
       value: 'page',
       label: '当前页数',
     },
@@ -2978,7 +2867,7 @@ export const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrO
       value: 'values',
       label: '多选选中值',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
@@ -2988,7 +2877,7 @@ export const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrO
       value: 'value',
       label: '选中值',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
@@ -2998,7 +2887,7 @@ export const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrO
       value: 'value',
       label: '选中值',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
@@ -3008,7 +2897,7 @@ export const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrO
       value: 'value',
       label: '选中值',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
@@ -3016,11 +2905,11 @@ export const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrO
       value: 'opened',
       label: '弹出状态',
     },
-    'page-size': {
+    pageSize: {
       value: 'size',
       label: '分页大小',
     },
-    'page-number': {
+    pageNumber: {
       value: 'page',
       label: '当前页数',
     },
@@ -3030,7 +2919,7 @@ export const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrO
       value: 'value',
       label: '选中值',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
@@ -3040,17 +2929,18 @@ export const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrO
       value: 'value',
       label: '选中值',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
   },
+
   'van-radio-group': {
     value: {
       value: 'value',
       label: '选中值',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
@@ -3060,7 +2950,7 @@ export const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrO
       value: 'value',
       label: '选中值',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
@@ -3070,15 +2960,15 @@ export const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrO
       value: 'value',
       label: '选中值',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
-    'page-size': {
+    pageSize: {
       value: 'size',
       label: '分页大小',
     },
-    'page-number': {
+    pageNumber: {
       value: 'page',
       label: '当前页数',
     },
@@ -3088,43 +2978,340 @@ export const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrO
       value: 'value',
       label: '选中值',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
   },
   'van-list-view': {
-    'page-size': {
+    pageSize: {
       value: 'size',
       label: '分页大小',
     },
-    'page-number': {
+    pageNumber: {
       value: 'page',
       label: '当前页数',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
   },
   'van-grid-view': {
-    'page-size': {
+    pageSize: {
       value: 'size',
       label: '分页大小',
     },
-    'page-number': {
+    pageNumber: {
       value: 'page',
       label: '当前页数',
     },
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
   },
   'van-for-components': {
-    'data-source': {
+    dataSource: {
       value: 'data',
       label: '数据',
     },
   },
 };
+
+/**
+ * 组件支持补全取值的属性映射
+ * prop 组件属性
+ * state 组件内部状态
+ */
+export const ComponentCompletionPropertyMap: Record<string, any> = {
+  // h5
+  'van-list-view': {
+    page: {
+      prop: 'pageNumber',
+      state: 'paging?.number',
+      label: '当前页数',
+    },
+    size: {
+      prop: 'pageSize',
+      state: 'paging?.size',
+      label: '分页大小',
+    },
+    filterText: {
+      prop: 'filterText',
+      state: 'filterText',
+      label: '过滤文本',
+    },
+    data: {
+      prop: 'dataSource',
+      state: 'currentData',
+      label: '数据',
+    },
+  },
+  'van-grid-view': {
+    page: {
+      prop: 'pageNumber',
+      state: 'paging?.number',
+      label: '当前页数',
+    },
+    size: {
+      prop: 'pageSize',
+      state: 'paging?.size',
+      label: '分页大小',
+    },
+    filterText: {
+      prop: 'filterText',
+      state: 'filterText',
+      label: '过滤文本',
+    },
+    data: {
+      prop: 'dataSource',
+      state: 'currentData',
+      label: '数据',
+    },
+  },
+  'van-for-components': {
+    data: {
+      prop: 'dataSource',
+      state: 'options',
+      label: '数据',
+    },
+  },
+  'van-pickerson': {
+    value: {
+      prop: 'value',
+      state: 'value',
+      label: '选中值',
+    },
+    page: {
+      prop: 'pageNumber',
+      state: 'paging?.number',
+      label: '当前页数',
+    },
+    size: {
+      prop: 'pageSize',
+      state: 'paging?.size',
+      label: '分页大小',
+    },
+    filterText: {
+      prop: 'filterText',
+      state: 'filterText',
+      label: '过滤文本',
+    },
+    data: {
+      prop: 'dataSource',
+      state: 'currentData',
+      label: '数据',
+    },
+  },
+  'van-cascader': {
+    value: {
+      prop: 'value',
+      state: 'value',
+      label: '选中值',
+    },
+    filterText: {
+      prop: 'filterText',
+      state: 'filterText',
+      label: '过滤文本',
+    },
+  },
+  'van-radio-group': {
+    value: {
+      prop: 'value',
+      state: 'value',
+      label: '选中值',
+    },
+    data: {
+      prop: 'dataSource',
+      state: 'options',
+      label: '数据',
+    },
+  },
+  'van-checkbox-group': {
+    value: {
+      prop: 'value',
+      state: 'value',
+      label: '选中值',
+    },
+    data: {
+      prop: 'dataSource',
+      state: 'options',
+      label: '数据',
+    },
+  },
+
+  // pc
+  'u-table-view': {
+    page: {
+      prop: 'pageNumber',
+      state: 'paging?.number',
+      label: '当前页数',
+    },
+    size: {
+      prop: 'pageSize',
+      state: 'paging?.size',
+      label: '分页大小',
+    },
+    sort: {
+      prop: 'sorting',
+      state: 'currentSorting?.field',
+      label: '排序属性',
+    },
+    order: {
+      prop: 'sorting',
+      state: 'currentSorting?.order',
+      label: '排序方式',
+    },
+    data: {
+      prop: 'dataSource',
+      state: 'currentData',
+      label: '数据',
+    },
+  },
+  'u-grid-view': {
+    page: {
+      prop: 'pageNumber',
+      state: 'paging?.number',
+      label: '当前页数',
+    },
+    size: {
+      prop: 'pageSize',
+      state: 'paging?.size',
+      label: '分页大小',
+    },
+    data: {
+      prop: 'dataSource',
+      state: 'currentData',
+      label: '数据',
+    },
+  },
+  'u-list-view': {
+    page: {
+      prop: 'pageNumber',
+      state: 'paging?.number',
+      label: '当前页数',
+    },
+    size: {
+      prop: 'pageSize',
+      state: 'paging?.size',
+      label: '分页大小',
+    },
+    filterText: {
+      prop: 'filterText',
+      state: 'filterText',
+      label: '过滤文本',
+    },
+  },
+  'u-list-components': {
+    data: {
+      prop: 'dataSource',
+      state: 'options',
+      label: '数据',
+    },
+  },
+  'u-radios': {
+    value: {
+      prop: 'value',
+      state: 'value',
+      label: '选中值',
+    },
+    data: {
+      prop: 'dataSource',
+      state: 'currentDataSource?.data',
+      label: '数据',
+    },
+  },
+  'u-checkboxes': {
+    value: {
+      prop: 'value',
+      state: 'value',
+      label: '选中值',
+    },
+    data: {
+      prop: 'dataSource',
+      state: 'currentDataSource?.data',
+      label: '数据',
+    },
+  },
+  'u-select': {
+    value: {
+      prop: 'value',
+      state: 'value',
+      label: '选中值',
+    },
+    page: {
+      prop: 'pageNumber',
+      state: 'paging?.number',
+      label: '当前页数',
+    },
+    size: {
+      prop: 'pageSize',
+      state: 'paging?.size',
+      label: '分页大小',
+    },
+    filterText: {
+      prop: 'filterText',
+      state: 'filterText',
+      label: '过滤文本',
+    },
+    data: {
+      prop: 'dataSource',
+      state: 'currentData',
+      label: '数据',
+    },
+    opened: {
+      prop: 'opened',
+      state: 'popperOpened',
+      label: '弹出状态',
+    },
+  },
+  'u-cascader': {
+    value: {
+      prop: 'value',
+      state: 'value',
+      label: '选中值',
+    },
+    filterText: {
+      prop: 'filterText',
+      state: 'filterText',
+      label: '过滤文本',
+    },
+    data: {
+      prop: 'dataSource',
+      state: 'currentData',
+      label: '数据',
+    },
+  },
+  'u-tree-select-new': {
+    value: {
+      prop: 'value',
+      state: 'value',
+      label: '选中值',
+    },
+    data: {
+      prop: 'dataSource',
+      state: 'currentDataSource?.data',
+      label: '数据',
+    },
+  },
+};
+
+export const FrontendTypeComponentNamePerfixMap: Record<string, string> = {
+  h5: 'van-',
+  pc: 'u-',
+};
+
+export function getComponentNameFromElementName(name: string, frontendType: string = 'pc') {
+  const prefix = FrontendTypeComponentNamePerfixMap[frontendType];
+
+  // radio_group_1 =>  radio_group
+  let componentName = name.replace(/_\d+$/, '');
+  // radio_group => radioGroup
+  componentName = utils.snake2Camel(componentName, true);
+  // radioGroup => radio-group
+  componentName = utils.Camel2kebab(componentName);
+  componentName = `${prefix}${componentName}`;
+
+  return componentName;
+}