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

package/src/concepts/BusinessComponent__.ts

@@ -11,7 +11,10 @@ import type Interface from './Interface__';
 import type App from './App__';
 import type FrontendType from './FrontendType__';
 import type Match from './Match__';
+import type Logic from './Logic__';
+import type Param from './Param__';
 import { ElementToVueOptions } from './ViewElement__';
+import { ComponentCompletionPropertyMap } from './View__';
 import translator from '../bak/translator';
 
 type AttrObject = {
@@ -19,213 +22,6 @@ type AttrObject = {
   label: string;
 };
 
-const PAGE_COMPONENT_INCLUDE_TAG_MAP: Record<string, Record<string, AttrObject>> = {
-  'u-list-view': {
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'u-grid-view': {
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'u-list-components': {
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'u-table-view': {
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
-    sorting: {
-      value: 'sort',
-      label: '排序属性',
-    },
-    value: {
-      value: 'value',
-      label: '单选选中值',
-    },
-    values: {
-      value: 'values',
-      label: '多选选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'u-radios': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'u-checkboxes': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'u-select': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-    opened: {
-      value: 'opened',
-      label: '弹出状态',
-    },
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
-  },
-  'u-cascader': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'u-tree-select-new': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'van-radio-group': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'van-checkbox-group': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'van-pickerson': {
-    pvalue: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
-  },
-  'van-cascader': {
-    value: {
-      value: 'value',
-      label: '选中值',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'van-list-view': {
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'van-grid-view': {
-    'page-size': {
-      value: 'size',
-      label: '分页大小',
-    },
-    'page-number': {
-      value: 'page',
-      label: '当前页数',
-    },
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-  'van-for-components': {
-    'data-source': {
-      value: 'data',
-      label: '数据',
-    },
-  },
-};
-
 const getBranchCopyUniCode = () => (window as any)?.BranchCopyUniCode;
 const removedViewElementCache: {
   [key: string]: number | bigint;
@@ -236,21 +32,19 @@ const removedViewElementCache: {
 // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
 //================================================================================
 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 Event from './Event__';
-import type ParamWithGroup from './ParamWithGroup__';
-import type Variable from './Variable__';
-import type BindEvent from './BindEvent__';
-import type BusinessLogic from './BusinessLogic__';
-import type ViewElement from './ViewElement__';
-import type Param from './Param__';
-import type Logic from './Logic__';
+import Event from './Event__';
+import ParamWithGroup from './ParamWithGroup__';
+import Variable from './Variable__';
+import BindEvent from './BindEvent__';
+import BusinessLogic from './BusinessLogic__';
+import ViewElement from './ViewElement__';
 
 /**
  * 业务组件
@@ -259,7 +53,11 @@ import type Logic from './Logic__';
 export class BusinessComponent extends BaseNode {
   /** 类名 */
   static readonly ConceptName: string = 'BusinessComponent';
-
+  /**
+   * 是否为抽象类
+   * 抽象类不能产生 concept: string
+   */
+  static isAbstract: boolean = false;
   /** 继承链 */
   static readonly inheritanceChain: string[] = ['BaseNode'];
 
@@ -269,24 +67,29 @@ export class BusinessComponent extends BaseNode {
   @property('concept')
   // @ts-ignore
   readonly concept!: 'BusinessComponent';
-
   /**
    * 业务组件名称
    */
-  @property()
-  name!: string;
+  @property({
+    objectRef: '',
+  })
+  name: string;
 
   /**
    * 业务组件标题
    */
-  @property()
-  title!: string;
+  @property({
+    objectRef: '',
+  })
+  title: string;
 
   /**
    * 业务组件描述
    */
-  @property()
-  description!: string;
+  @property({
+    objectRef: '',
+  })
+  description: string;
 
   /**
    * 组件事件列表
@@ -351,8 +154,10 @@ export class BusinessComponent extends BaseNode {
   /**
    * icon
    */
-  @property()
-  icon!: string;
+  @property({
+    objectRef: '',
+  })
+  icon: string;
 
   /**
    * @param source 需要合并的部分参数
@@ -367,17 +172,6 @@ export class BusinessComponent extends BaseNode {
     return super.from(source, parentNode, parentKey) as BusinessComponent;
   }
 
-  /**
-   * 从父级删除该节点
-   * @internal
-   */
-  _delete() {
-    let params: Params = null;
-    if (this.parentNode) {
-      params = (this.parentNode as any)?.__removeBusinessComponent?.(this);
-    }
-    return params;
-  }
   /**
    * 设置业务组件名称
    */
@@ -429,7 +223,7 @@ export class BusinessComponent extends BaseNode {
 
   getEventExistingNames(excludedList: Array<Event> = []) {
     const excludedSet = new Set(excludedList);
-    return ((this.events as Event[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item?.name);
+    return ((this.events as Event[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
   }
   getEventUniqueName(name = 'event1') {
     return utils.unique(name, this.getEventExistingNames(), undefined, false);
@@ -586,23 +380,23 @@ export class BusinessComponent extends BaseNode {
   }
 
   /**
-   * 插入参数分组
+   * 插入带分组的参数
    * @internal
-   * @param name 参数分组名称，如果不填会自动生成一个唯一名称
+   * @param name 带分组的参数名称，如果不填会自动生成一个唯一名称
    */
   _insertParamAt(name: string, index: number): ParamWithGroup;
 
   /**
-   * 插入参数分组
+   * 插入带分组的参数
    * @internal
-   * @param paramOptions 参数分组参数
+   * @param paramOptions 带分组的参数参数
    */
   _insertParamAt(paramOptions: Partial<ParamWithGroup>, index: number): ParamWithGroup;
 
   /**
-   * 插入参数分组
+   * 插入带分组的参数
    * @internal
-   * @param param 已有的参数分组实例
+   * @param param 已有的带分组的参数实例
    */
   _insertParamAt(param: ParamWithGroup, index: number): ParamWithGroup;
 
@@ -648,20 +442,20 @@ export class BusinessComponent extends BaseNode {
   }
 
   /**
-   * 插入参数分组
-   * @param name 参数分组名称，如果不填会自动生成一个唯一名称
+   * 插入带分组的参数
+   * @param name 带分组的参数名称，如果不填会自动生成一个唯一名称
    */
   insertParamAt(name: string, index: number): ParamWithGroup;
 
   /**
-   * 插入参数分组
-   * @param paramOptions 参数分组参数
+   * 插入带分组的参数
+   * @param paramOptions 带分组的参数参数
    */
   insertParamAt(paramOptions: Partial<ParamWithGroup>, index: number): ParamWithGroup;
 
   /**
-   * 插入参数分组
-   * @param param 已有的参数分组实例
+   * 插入带分组的参数
+   * @param param 已有的带分组的参数实例
    */
   insertParamAt(param: ParamWithGroup, index: number): ParamWithGroup;
 
@@ -676,23 +470,23 @@ export class BusinessComponent extends BaseNode {
   }
 
   /**
-   * 添加参数分组
+   * 添加带分组的参数
    * @internal
-   * @param name 参数分组名称，如果不填会自动生成一个唯一名称
+   * @param name 带分组的参数名称，如果不填会自动生成一个唯一名称
    */
   _addParam(name?: string): ParamWithGroup;
 
   /**
-   * 添加参数分组
+   * 添加带分组的参数
    * @internal
-   * @param paramOptions 参数分组参数
+   * @param paramOptions 带分组的参数参数
    */
   _addParam(paramOptions: Partial<ParamWithGroup>): ParamWithGroup;
 
   /**
-   * 添加参数分组
+   * 添加带分组的参数
    * @internal
-   * @param param 已有的参数分组实例
+   * @param param 已有的带分组的参数实例
    */
   _addParam(param: ParamWithGroup): ParamWithGroup;
 
@@ -702,21 +496,21 @@ export class BusinessComponent extends BaseNode {
   }
 
   /**
-   * 添加参数分组
+   * 添加带分组的参数
    * @internal
-   * @param name 参数分组名称，如果不填会自动生成一个唯一名称
+   * @param name 带分组的参数名称，如果不填会自动生成一个唯一名称
    */
   addParam(name?: string): ParamWithGroup;
 
   /**
-   * 添加参数分组
-   * @param paramOptions 参数分组参数
+   * 添加带分组的参数
+   * @param paramOptions 带分组的参数参数
    */
   addParam(paramOptions: Partial<ParamWithGroup>): ParamWithGroup;
 
   /**
-   * 添加参数分组
-   * @param param 已有的参数分组实例
+   * 添加带分组的参数
+   * @param param 已有的带分组的参数实例
    */
   addParam(param: ParamWithGroup): ParamWithGroup;
 
@@ -883,7 +677,7 @@ export class BusinessComponent 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);
@@ -1356,46 +1150,15 @@ export class BusinessComponent extends BaseNode {
     return event.delete();
   }
 
-  __removeEvent(event: Event) {
-    const parentKey = event.parentKey;
-    const params: Params = {
-      parentNode: this,
-      parentKey,
-      index: -1,
-      object: null,
-      oldObject: event,
-    };
-    if (parentKey) {
-      params.parentKey = parentKey;
-      // @ts-ignore
-      const t = this.__v_raw || this;
-      // @ts-ignore
-      const n = event.__v_raw || event;
-      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 参数分组名称
+   * 删除带分组的参数
+   * @param name 带分组的参数名称
    */
   removeParam(name: string): void;
 
   /**
-   * 删除参数分组
-   * @param param 已有的参数分组实例
+   * 删除带分组的参数
+   * @param param 已有的带分组的参数实例
    */
   removeParam(param: ParamWithGroup): void;
 
@@ -1404,7 +1167,7 @@ export class BusinessComponent extends BaseNode {
     if (typeof options === 'string') {
       param = (this.params as ParamWithGroup[]).find((item) => item.name === options);
       if (!param) {
-        throw new Error('找不到参数分组 ' + options);
+        throw new Error('找不到带分组的参数 ' + options);
       }
     } else {
       param = options;
@@ -1412,37 +1175,6 @@ export class BusinessComponent 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 变量名称
@@ -1468,37 +1200,6 @@ export class BusinessComponent 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 元素绑定事件名称
@@ -1524,37 +1225,6 @@ export class BusinessComponent 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 业务组件逻辑名称
@@ -1580,37 +1250,6 @@ export class BusinessComponent 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 页面元素名称
@@ -1636,37 +1275,6 @@ export class BusinessComponent 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;
-  }
-
   //================================================================================
   // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
   // 自动生成的代码已结束。下面可以手动编写。
@@ -1696,6 +1304,7 @@ export class BusinessComponent extends BaseNode {
   static getDefaultOptions() {
     return {
       title: '业务组件',
+      icon: 'default',
     };
   }
 
@@ -1831,6 +1440,23 @@ export class BusinessComponent extends BaseNode {
     });
   }
 
+  collectExistingBusinessComponent() {
+    const excludedSet = new Set();
+    // 先把自身加进去
+    excludedSet.add(this);
+    this.elements.forEach((element) => {
+      const set = element.collectExistingBusinessComponent();
+      if (set.size) {
+        set.forEach((value) => {
+          if (!excludedSet.has(value)) {
+            excludedSet.add(value);
+          }
+        });
+      }
+    });
+    return excludedSet;
+  }
+
   // 获取当前业务组件的所有组件的名字
   getViewElementExistingNames(excludedList: Array<ViewElement> = []) {
     if (!this.existingViewElement.size) {
@@ -1855,7 +1481,7 @@ export class BusinessComponent 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*$/, '');
@@ -1871,12 +1497,37 @@ export class BusinessComponent extends BaseNode {
     return viewElementUniqueName;
   }
 
+  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;
+  }
+
   // 获取当前element，铺平
   elementsMethods(elements: Array<ViewElement>, allMethods: Array<ViewElement>, parentNodeNames: Array<string>) {
     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);
@@ -1893,14 +1544,29 @@ export class BusinessComponent extends BaseNode {
     }
   }
 
-  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 ParamWithGroup = getConceptConstructor('ParamWithGroup');
     const Variable = getConceptConstructor('Variable');
     const BindEvent = getConceptConstructor('BindEvent');
     const Structure = getConceptConstructor('Structure');
-    const template = utils.sliceTagContent(code, 'template');
+    let template = utils.sliceTagContent(code, 'template');
+    if (slotTarget) {
+      template = `<template #${slotTarget}>${template}</template>`;
+    }
     let targetNode = (this.getAncestor('App') as App)?.findNodeByPath(nodePath);
     let parentNode = position === 'append' ? targetNode : targetNode.parentNode;
     const definitionStr = utils.sliceTagContent(code, 'definition') || '{}';
@@ -2069,8 +1735,9 @@ export class BusinessComponent extends BaseNode {
    * @param name 一般不用传，用于 rename
    */
   getEmbeddedFilePath(name = this.name) {
-    return `/embedded/${this.rootNode?.name || this.parentNode.name}/frontendTypes/${this.getAncestor('FrontendType')?.name
-      }/${name}.ts`;
+    return `/embedded/${this.rootNode?.name || this.parentNode.name}/frontendTypes/${
+      this.getAncestor('FrontendType')?.name
+    }/${name}.ts`;
   }
 
   *toEmbeddedTSFile(): EmbeddedTSFileGenerator {
@@ -2102,7 +1769,7 @@ export class BusinessComponent extends BaseNode {
       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);
       }
@@ -2117,7 +1784,7 @@ export class BusinessComponent extends BaseNode {
       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 businessComponent = viewElement.getAncestor('BusinessComponent') as BusinessComponent;
           const dataSourceTS = yield* dataSource.expression.toEmbeddedTS();
@@ -2231,7 +1898,7 @@ export class BusinessComponent 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) {
@@ -2244,7 +1911,7 @@ export class BusinessComponent 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) {
@@ -2265,7 +1932,7 @@ export class BusinessComponent extends BaseNode {
      * 这部分需要先执行
      **/
     // elements类型声明定义
-    let code = `interface __elements {\n`;
+    let code = `interface IElements {\n`;
     // 生成所有的name和类型定义
     yield* wrapForEach(self.elements, function* warpForEachGenerator(element) {
       code += yield* element.toEmbeddedTSDefinition(
@@ -2275,33 +1942,64 @@ export class BusinessComponent 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 += 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 += yield* item.toEmbeddedTSRefTree(shiftState(state, code, { inline: true }), { elementsPathMap });
       });
-      code += indent((state?.tabSize || 0) + 1) + `}\n`;
+      code += `},\n`;
+      code += `};\n`;
+      code += `};\n`;
+
+      code += `const __elementsRef = {\n`;
+      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`;
+
+      // 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);
+      // });
+      // 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`;
+      // yield* wrapForEach(self.elements, function* warpForEachGenerator(item) {
+      //   code += yield* item.toEmbeddedTSVariableFunctionDefinition(shiftState(state, code, { inline: true }));
+      // });
+      // 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`;
     }
 
     const advanceMap: Map<Variable, Assignment | BatchAssignment> = new Map();
@@ -2319,9 +2017,9 @@ export class BusinessComponent extends BaseNode {
             const leftCode =
               leftIndex.length === 1
                 ? yield* el.left?.expression?.toEmbeddedTS(shiftState(state, code, { inline: true })) ??
-                returnOrigin('')
+                    returnOrigin('')
                 : yield* el.left?.members[leftIndex[1]]?.toEmbeddedTS(shiftState(state, code, { inline: true })) ??
-                returnOrigin('');
+                    returnOrigin('');
             const advanceVar = self.variables?.find(
               (variable) => !variable.typeAnnotation && leftCode === variable.name,
             );
@@ -2372,7 +2070,7 @@ export class BusinessComponent extends BaseNode {
             leftIndex.length === 1
               ? yield* assignment.left.expression.toEmbeddedTS(shiftState(state, code, { inline: true }))
               : yield* assignment.left.members[leftIndex[1]]?.toEmbeddedTS(shiftState(state, code, { inline: true })) ??
-              returnOrigin('');
+                  returnOrigin('');
           if (leftCode === variable.name) {
             const rightNode =
               rightIndex.length === 1
@@ -2416,7 +2114,6 @@ export class BusinessComponent extends BaseNode {
     code += '\n';
     code += `${indent((state?.tabSize || 0) + 2)}return\n`;
 
-
     function* setPlaygroundCode(arr: Variable[] | ParamWithGroup[], name: string) {
       if (arr.length) {
         code += `${indent((state?.tabSize || 0) + 1)}/* -----以下是 ${name} 的默认值草稿------ */\n`;
@@ -2434,7 +2131,7 @@ export class BusinessComponent extends BaseNode {
 
     code += `${indent(state?.tabSize || 0)}}\n`;
 
-    code += `export class ${self.tsName} extends nasl.ui.VueComponent {\n`;
+    code += `export class ${self.tsName} extends nasl.ui.ViewComponent {\n`;
 
     // 需要类型推导的局部变量/返回值需要调整申明顺序
     code += `constructor(
@@ -2643,15 +2340,15 @@ export class BusinessComponent extends BaseNode {
             methods: {
                 async onKeyDown(e) {
                     ${this.bindEvents
-        .filter((event) => ['keydown'].includes(event.name))
-        .map((event) => `await this.${event.view.name}_${event.name}(e);`)
-        .join('\n')}
+                      .filter((event) => ['keydown'].includes(event.name))
+                      .map((event) => `await this.${event.view.name}_${event.name}(e);`)
+                      .join('\n')}
                 },
                 async onKeyUp(e) {
                     ${this.bindEvents
-        .filter((event) => ['keyup'].includes(event.name))
-        .map((event) => `await this.${event.view.name}_${event.name}(e);`)
-        .join('\n')}
+                      .filter((event) => ['keyup'].includes(event.name))
+                      .map((event) => `await this.${event.view.name}_${event.name}(e);`)
+                      .join('\n')}
                 }
             }
         };\n`;
@@ -2672,10 +2369,12 @@ export class BusinessComponent extends BaseNode {
   genPreviewTemplate() {
     return `<template>
               <bs-${this.name}>
-                ${this.slotElems.map((slotElem) => {
-      const slotName = slotElem.name;
-      return `<template #${slotName}></template>`;
-    }).join('')}
+                ${this.slotElems
+                  .map((slotElem) => {
+                    const slotName = slotElem.name;
+                    return `<template #${slotName}></template>`;
+                  })
+                  .join('')}
               </bs-${this.name}>
             </template>`;
   }