@lcap/nasl-concepts 3.9.0-beta.1

package/out/concepts/BusinessComponent__.js

@@ -0,0 +1,1785 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var BusinessComponent_1;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BusinessComponent = void 0;
+const utils_1 = require("../utils");
+const nasl_translator_1 = require("@lcap/nasl-translator");
+const View__1 = require("./View__");
+const utils_2 = require("../utils");
+const getBranchCopyUniCode = () => window?.BranchCopyUniCode;
+const removedViewElementCache = {}; // 临时记录删除的页面元素计数的最大值
+const decorators_1 = require("../decorators");
+const utils = __importStar(require("../utils"));
+const asserts = __importStar(require("./utils/asserts"));
+const BaseNode_1 = __importDefault(require("../common/BaseNode"));
+/**
+ * 业务组件
+ */
+let BusinessComponent = class BusinessComponent extends BaseNode_1.default {
+    static { BusinessComponent_1 = this; }
+    /** 类名 */
+    static { this.ConceptName = 'BusinessComponent'; }
+    /**
+     * 是否为抽象类
+     * 抽象类不能产生 concept: string
+     */
+    static { this.isAbstract = false; }
+    /** 继承链 */
+    static { this.inheritanceChain = ['BaseNode']; }
+    /**
+     * @param source 需要合并的部分参数
+     */
+    constructor(source) {
+        source = Object.assign({}, BusinessComponent_1.getDefaultOptions(), source);
+        super(source);
+        /**
+         * 组件事件列表
+         */
+        this.events = [];
+        /**
+         * 参数分组列表
+         */
+        this.params = [];
+        /**
+         * 变量列表
+         */
+        this.variables = [];
+        /**
+         * 元素绑定事件列表
+         */
+        this.bindEvents = [];
+        /**
+         * 业务组件逻辑列表
+         */
+        this.logics = [];
+        /**
+         * 页面元素列表
+         */
+        this.elements = [];
+        /**
+         * 获取当前业务组件下所有elements上bindEvents下的logic
+         */
+        this.elementLogicRoot = [];
+        this.existingViewElement = new Set();
+        super.subConstructor(source);
+    }
+    static from(source, parentNode, parentKey) {
+        return super.from(source, parentNode, parentKey);
+    }
+    /**
+     * 设置业务组件名称
+     */
+    setName(name) {
+        const object = {
+            name,
+        };
+        this.update({
+            ...object,
+            field: 'name',
+        });
+    }
+    /**
+     * 设置业务组件标题
+     */
+    setTitle(title) {
+        const object = {
+            title,
+        };
+        this.update({
+            ...object,
+        });
+    }
+    /**
+     * 设置业务组件描述
+     */
+    setDescription(description) {
+        const object = {
+            description,
+        };
+        this.update({
+            ...object,
+        });
+    }
+    /**
+     * 设置icon
+     */
+    setIcon(icon) {
+        const object = {
+            icon,
+        };
+        this.update({
+            ...object,
+        });
+    }
+    getEventExistingNames(excludedList = []) {
+        const excludedSet = new Set(excludedList);
+        return (this.events || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    }
+    getEventUniqueName(name = 'event1') {
+        return utils.unique(name, this.getEventExistingNames(), undefined, false);
+    }
+    _insertEventAt(options, index) {
+        const eventOptions = {};
+        const relationOptions = { parentNode: this, parentKey: 'events' };
+        const Event = (0, decorators_1.getConceptConstructor)('Event');
+        let event;
+        if (!options) {
+            event = Event.from({
+                ...eventOptions,
+                name: this.getEventUniqueName(),
+            }, this, 'events');
+        }
+        else if (typeof options === 'string') {
+            event = Event.from({
+                ...eventOptions,
+                name: options,
+            }, this, 'events');
+        }
+        else if (asserts.isEvent(options)) {
+            options.ensureDelete(); // 同一实例不支持多处存在
+            event = options;
+            Object.assign(event, relationOptions);
+        }
+        else {
+            event = Event.from({
+                ...eventOptions,
+                ...options,
+            }, this, 'events');
+        }
+        this.events.splice(index, 0, event);
+        return event;
+    }
+    insertEventAt(options, index) {
+        const node = this._insertEventAt(options, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'events',
+        });
+        return node;
+    }
+    _addEvent(options) {
+        const index = this.events.length;
+        return this._insertEventAt(options, index);
+    }
+    addEvent(options) {
+        const node = this._addEvent(options);
+        const index = this.events.indexOf(node);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'events',
+        });
+        return node;
+    }
+    getParamUniqueName(name = 'param1') {
+        return utils.unique(name, this.getVarExistingNames(), undefined, false);
+    }
+    _insertParamAt(options, index) {
+        const paramOptions = {};
+        const relationOptions = { parentNode: this, parentKey: 'params' };
+        const ParamWithGroup = (0, decorators_1.getConceptConstructor)('ParamWithGroup');
+        let param;
+        if (!options) {
+            param = ParamWithGroup.from({
+                ...paramOptions,
+                name: this.getParamUniqueName(),
+            }, this, 'params');
+        }
+        else if (typeof options === 'string') {
+            param = ParamWithGroup.from({
+                ...paramOptions,
+                name: options,
+            }, this, 'params');
+        }
+        else if (asserts.isParamWithGroup(options)) {
+            options.ensureDelete(); // 同一实例不支持多处存在
+            param = options;
+            Object.assign(param, relationOptions);
+        }
+        else {
+            param = ParamWithGroup.from({
+                ...paramOptions,
+                ...options,
+            }, this, 'params');
+        }
+        this.params.splice(index, 0, param);
+        return param;
+    }
+    insertParamAt(options, index) {
+        const node = this._insertParamAt(options, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'params',
+        });
+        return node;
+    }
+    _addParam(options) {
+        const index = this.params.length;
+        return this._insertParamAt(options, index);
+    }
+    addParam(options) {
+        const node = this._addParam(options);
+        const index = this.params.indexOf(node);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'params',
+        });
+        return node;
+    }
+    getVariableUniqueName(name = 'variable1') {
+        return utils.unique(name, this.getVarExistingNames(), undefined, false);
+    }
+    _insertVariableAt(options, index) {
+        const variableOptions = {};
+        const relationOptions = { parentNode: this, parentKey: 'variables' };
+        const Variable = (0, decorators_1.getConceptConstructor)('Variable');
+        let variable;
+        if (!options) {
+            variable = Variable.from({
+                ...variableOptions,
+                name: this.getVariableUniqueName(),
+            }, this, 'variables');
+        }
+        else if (typeof options === 'string') {
+            variable = Variable.from({
+                ...variableOptions,
+                name: options,
+            }, this, 'variables');
+        }
+        else if (asserts.isVariable(options)) {
+            options.ensureDelete(); // 同一实例不支持多处存在
+            variable = options;
+            Object.assign(variable, relationOptions);
+        }
+        else {
+            variable = Variable.from({
+                ...variableOptions,
+                ...options,
+            }, this, 'variables');
+        }
+        this.variables.splice(index, 0, variable);
+        return variable;
+    }
+    insertVariableAt(options, index) {
+        const node = this._insertVariableAt(options, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'variables',
+        });
+        return node;
+    }
+    _addVariable(options) {
+        const index = this.variables.length;
+        return this._insertVariableAt(options, index);
+    }
+    addVariable(options) {
+        const node = this._addVariable(options);
+        const index = this.variables.indexOf(node);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'variables',
+        });
+        return node;
+    }
+    getBindEventExistingNames(excludedList = []) {
+        const excludedSet = new Set(excludedList);
+        return (this.bindEvents || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    }
+    getBindEventUniqueName(name = 'bindEvent1') {
+        return utils.unique(name, this.getBindEventExistingNames(), undefined, false);
+    }
+    _insertBindEventAt(options, index) {
+        const bindEventOptions = {};
+        const relationOptions = { parentNode: this, parentKey: 'bindEvents' };
+        const BindEvent = (0, decorators_1.getConceptConstructor)('BindEvent');
+        let bindEvent;
+        if (!options) {
+            bindEvent = BindEvent.from({
+                ...bindEventOptions,
+                name: this.getBindEventUniqueName(),
+            }, this, 'bindEvents');
+        }
+        else if (typeof options === 'string') {
+            bindEvent = BindEvent.from({
+                ...bindEventOptions,
+                name: options,
+            }, this, 'bindEvents');
+        }
+        else if (asserts.isBindEvent(options)) {
+            options.ensureDelete(); // 同一实例不支持多处存在
+            bindEvent = options;
+            Object.assign(bindEvent, relationOptions);
+        }
+        else {
+            bindEvent = BindEvent.from({
+                ...bindEventOptions,
+                ...options,
+            }, this, 'bindEvents');
+        }
+        this.bindEvents.splice(index, 0, bindEvent);
+        return bindEvent;
+    }
+    insertBindEventAt(options, index) {
+        const node = this._insertBindEventAt(options, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindEvents',
+        });
+        return node;
+    }
+    _addBindEvent(options) {
+        const index = this.bindEvents.length;
+        return this._insertBindEventAt(options, index);
+    }
+    addBindEvent(options) {
+        const node = this._addBindEvent(options);
+        const index = this.bindEvents.indexOf(node);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'bindEvents',
+        });
+        return node;
+    }
+    getLogicUniqueName(name = 'logic1') {
+        return utils.unique(name, this.getLogicExistingNames(), undefined, false);
+    }
+    _insertLogicAt(options, index) {
+        const logicOptions = {};
+        const relationOptions = { parentNode: this, parentKey: 'logics' };
+        const BusinessLogic = (0, decorators_1.getConceptConstructor)('BusinessLogic');
+        let logic;
+        if (!options) {
+            logic = BusinessLogic.from({
+                ...logicOptions,
+                name: this.getLogicUniqueName(),
+            }, this, 'logics');
+        }
+        else if (typeof options === 'string') {
+            logic = BusinessLogic.from({
+                ...logicOptions,
+                name: options,
+            }, this, 'logics');
+        }
+        else if (asserts.isBusinessLogic(options)) {
+            options.ensureDelete(); // 同一实例不支持多处存在
+            logic = options;
+            Object.assign(logic, relationOptions);
+        }
+        else {
+            logic = BusinessLogic.from({
+                ...logicOptions,
+                ...options,
+            }, this, 'logics');
+        }
+        this.logics.splice(index, 0, logic);
+        return logic;
+    }
+    insertLogicAt(options, index) {
+        const node = this._insertLogicAt(options, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'logics',
+        });
+        return node;
+    }
+    _addLogic(options) {
+        const index = this.logics.length;
+        return this._insertLogicAt(options, index);
+    }
+    addLogic(options) {
+        const node = this._addLogic(options);
+        const index = this.logics.indexOf(node);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'logics',
+        });
+        return node;
+    }
+    _insertViewElementAt(options, index) {
+        const viewElementOptions = {};
+        const relationOptions = { parentNode: this, parentKey: 'elements' };
+        const ViewElement = (0, decorators_1.getConceptConstructor)('ViewElement');
+        let viewElement;
+        if (!options) {
+            viewElement = ViewElement.from({
+                ...viewElementOptions,
+                name: this.getViewElementUniqueName(),
+            }, this, 'elements');
+        }
+        else if (typeof options === 'string') {
+            viewElement = ViewElement.from({
+                ...viewElementOptions,
+                name: options,
+            }, this, 'elements');
+        }
+        else if (asserts.isViewElement(options)) {
+            options.ensureDelete(); // 同一实例不支持多处存在
+            viewElement = options;
+            Object.assign(viewElement, relationOptions);
+        }
+        else {
+            viewElement = ViewElement.from({
+                ...viewElementOptions,
+                ...options,
+            }, this, 'elements');
+        }
+        this.elements.splice(index, 0, viewElement);
+        return viewElement;
+    }
+    insertViewElementAt(options, index) {
+        const node = this._insertViewElementAt(options, index);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'elements',
+        });
+        return node;
+    }
+    _addViewElement(options) {
+        const index = this.elements.length;
+        return this._insertViewElementAt(options, index);
+    }
+    addViewElement(options) {
+        const node = this._addViewElement(options);
+        const index = this.elements.indexOf(node);
+        node.create({
+            index,
+            parentNode: this,
+            parentKey: 'elements',
+        });
+        return node;
+    }
+    removeEvent(options) {
+        let event;
+        if (typeof options === 'string') {
+            event = this.events.find((item) => item.name === options);
+            if (!event) {
+                throw new Error('找不到组件事件 ' + options);
+            }
+        }
+        else {
+            event = options;
+        }
+        return event.delete();
+    }
+    removeParam(options) {
+        let param;
+        if (typeof options === 'string') {
+            param = this.params.find((item) => item.name === options);
+            if (!param) {
+                throw new Error('找不到带分组的参数 ' + options);
+            }
+        }
+        else {
+            param = options;
+        }
+        return param.delete();
+    }
+    removeVariable(options) {
+        let variable;
+        if (typeof options === 'string') {
+            variable = this.variables.find((item) => item.name === options);
+            if (!variable) {
+                throw new Error('找不到变量 ' + options);
+            }
+        }
+        else {
+            variable = options;
+        }
+        return variable.delete();
+    }
+    removeBindEvent(options) {
+        let bindEvent;
+        if (typeof options === 'string') {
+            bindEvent = this.bindEvents.find((item) => item.name === options);
+            if (!bindEvent) {
+                throw new Error('找不到元素绑定事件 ' + options);
+            }
+        }
+        else {
+            bindEvent = options;
+        }
+        return bindEvent.delete();
+    }
+    removeLogic(options) {
+        let logic;
+        if (typeof options === 'string') {
+            logic = this.logics.find((item) => item.name === options);
+            if (!logic) {
+                throw new Error('找不到业务组件逻辑 ' + options);
+            }
+        }
+        else {
+            logic = options;
+        }
+        return logic.delete();
+    }
+    removeViewElement(options) {
+        let viewElement;
+        if (typeof options === 'string') {
+            viewElement = this.elements.find((item) => item.name === options);
+            if (!viewElement) {
+                throw new Error('找不到页面元素 ' + options);
+            }
+        }
+        else {
+            viewElement = options;
+        }
+        return viewElement.delete();
+    }
+    //================================================================================
+    // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+    // 自动生成的代码已结束。下面可以手动编写。
+    //================================================================================
+    getLogicExistingNames(excludedList = []) {
+        const excludedSet = new Set(excludedList);
+        const varList = [];
+        if (Array.isArray(this.params)) {
+            varList.push(...this.params);
+        }
+        if (Array.isArray(this.variables)) {
+            varList.push(...this.variables);
+        }
+        if (Array.isArray(this.logics)) {
+            varList.push(...this.logics);
+        }
+        if (Array.isArray(this.bindEvents)) {
+            this.bindEvents.forEach((bindEvent) => {
+                if (Array.isArray(bindEvent.logics)) {
+                    varList.push(...bindEvent.logics);
+                }
+            });
+        }
+        return varList.filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    }
+    static getDefaultOptions() {
+        return {
+            title: '业务组件',
+            icon: 'default',
+        };
+    }
+    getNamespace() {
+        if (this.parentNode && this.parentNode.getNamespace) {
+            const parentNamespace = this.parentNode.getNamespace();
+            const parentName = this.parentNode.name;
+            const arr = [parentNamespace];
+            if (this.parentNode.concept !== 'App' && parentName) {
+                arr.push(parentName);
+            }
+            return `${arr.join('.')}.businessComponents`;
+        }
+        throw new Error('无法获取命名空间，请设置 parentNode！');
+    }
+    getTsNamespace() {
+        const parentNodeNamespace = this.getNamespace();
+        let tsCalleeNamespace = parentNodeNamespace.replace(/\.[0-9]/g, (m) => m.replace('.', '.$'));
+        tsCalleeNamespace = tsCalleeNamespace.replace(/-/g, '_');
+        return tsCalleeNamespace;
+    }
+    getElementLogicRoot() {
+        const Param = (0, decorators_1.getConceptConstructor)('Param');
+        const logics = [];
+        // 页面上的绑定的事件
+        this.bindEvents.forEach((bindEvent) => {
+            bindEvent.logics.forEach((logic) => {
+                // 键盘事件
+                if (['keydown', 'keyup'].includes(bindEvent.name)) {
+                    logic.virtualParams = [
+                        Param.from({
+                            name: 'event',
+                            typeAnnotation: null,
+                        }, logic, 'virtualParams'),
+                    ];
+                }
+                // 生命周期没有event
+                logics.push(logic);
+            });
+        });
+        this.elements.forEach((item) => {
+            utils.traverse((current) => {
+                current.node.bindEvents.forEach((bindEvent) => {
+                    bindEvent.logics.forEach((logic) => {
+                        if (logic.name.startsWith('__')) {
+                            return;
+                        }
+                        // 绑定参数才有 event 的 current
+                        logic.virtualParams = bindEvent.getContextRenderLogicParams(logic);
+                        logics.push(logic);
+                    });
+                });
+            }, { node: item });
+        });
+        if (logics.length) {
+            const expanded = (this.elementLogicRoot.length && this.elementLogicRoot[0].expanded) || false;
+            this.elementLogicRoot = [
+                {
+                    concept: 'elementLogicRoot',
+                    expanded,
+                    children: logics,
+                },
+            ];
+        }
+        else {
+            this.elementLogicRoot = [];
+        }
+    }
+    getVarExistingNames(excludedList = []) {
+        const excludedSet = new Set(excludedList);
+        const varList = [];
+        if (Array.isArray(this.params)) {
+            varList.push(...this.params);
+        }
+        if (Array.isArray(this.variables)) {
+            varList.push(...this.variables);
+        }
+        if (Array.isArray(this.logics)) {
+            this.logics.forEach((logic) => {
+                varList.push(logic);
+                if (Array.isArray(logic.params)) {
+                    varList.push(...logic.params);
+                }
+                if (Array.isArray(logic.returns)) {
+                    varList.push(...logic.returns);
+                }
+                if (Array.isArray(logic.variables)) {
+                    varList.push(...logic.variables);
+                }
+            });
+        }
+        // 事件逻辑的变量不允许和页面逻辑下的重复
+        if (Array.isArray(this.elementLogicRoot) && this.elementLogicRoot.length) {
+            this.elementLogicRoot[0]?.children.forEach((logic) => {
+                if (Array.isArray(logic.variables)) {
+                    varList.push(...logic.variables);
+                }
+            });
+        }
+        return varList.filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    }
+    // 收集已经存在的ViewElement
+    collectExistingViewElementName(excludedList = []) {
+        const excludedSet = new Set(excludedList);
+        this.elements.forEach((element) => {
+            utils.traverse(({ node }) => {
+                if (!excludedSet.has(node)) {
+                    this.existingViewElement.add(node.name);
+                }
+            }, {
+                node: element,
+            });
+        });
+    }
+    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 = []) {
+        if (!this.existingViewElement.size) {
+            this.collectExistingViewElementName();
+        }
+        return Array.from(this.existingViewElement);
+    }
+    getViewElementUniqueNameOld(name = 'viewElement1') {
+        this.collectExistingViewElementName();
+        const viewElementUniqueName = utils.unique(name, this.existingViewElement);
+        this.existingViewElement.add(viewElementUniqueName);
+        return viewElementUniqueName;
+    }
+    getViewElementUniqueName(name = 'viewElement_1') {
+        this.collectExistingViewElementName();
+        const BranchCopyUniCode = getBranchCopyUniCode();
+        let newName = name;
+        const prefix = name.replace(/\d*$/, '');
+        if (BranchCopyUniCode && prefix.indexOf(`_${BranchCopyUniCode}_`) === -1) {
+            newName = name.replace(/\d*$/, (m) => `_${BranchCopyUniCode}_${m}`);
+        }
+        // 主分支无 BranchCopyUniCode
+        if (!BranchCopyUniCode && prefix.slice(-1) !== '_') {
+            newName = name.replace(/\d*$/, (m) => `_${m}`);
+        }
+        const newPrefix = newName.replace(/\d*$/, '');
+        const newPrefixNum = removedViewElementCache?.[newPrefix] ? removedViewElementCache[newPrefix] : 1;
+        const startNum = newPrefixNum < Number.MAX_SAFE_INTEGER ? newPrefixNum + 1 : BigInt(newPrefixNum) + BigInt(1);
+        const viewElementUniqueName = utils.uniqueMax(newName, this.existingViewElement, removedViewElementCache?.[newPrefix] ? startNum : newPrefixNum);
+        this.existingViewElement.add(viewElementUniqueName);
+        return viewElementUniqueName;
+    }
+    getViewElementByName(name) {
+        let res = 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, allMethods, parentNodeNames) {
+        if (elements) {
+            elements.forEach((item) => {
+                const { bindAttrs = [], name } = item;
+                const isDataSource = bindAttrs.some((attr) => attr.name === 'dataSource');
+                const isInclude = parentNodeNames.includes(name);
+                allMethods.push(item);
+                if (item.children) {
+                    if (isDataSource) {
+                        if (isInclude) {
+                            this.elementsMethods(item.children, allMethods, parentNodeNames);
+                        }
+                    }
+                    else {
+                        this.elementsMethods(item.children, allMethods, parentNodeNames);
+                    }
+                }
+            });
+        }
+    }
+    mergeBlock({ code, nodePath, position, slotTarget, cb, }) {
+        const ViewElement = (0, decorators_1.getConceptConstructor)('ViewElement');
+        const Logic = (0, decorators_1.getConceptConstructor)('Logic');
+        const ParamWithGroup = (0, decorators_1.getConceptConstructor)('ParamWithGroup');
+        const Variable = (0, decorators_1.getConceptConstructor)('Variable');
+        const BindEvent = (0, decorators_1.getConceptConstructor)('BindEvent');
+        const Structure = (0, decorators_1.getConceptConstructor)('Structure');
+        let template = utils.sliceTagContent(code, 'template');
+        if (slotTarget) {
+            template = `<template #${slotTarget}>${template}</template>`;
+        }
+        let targetNode = this.getAncestor('App')?.findNodeByPath(nodePath);
+        let parentNode = position === 'append' ? targetNode : targetNode.parentNode;
+        const definitionStr = utils.sliceTagContent(code, 'definition') || '{}';
+        const definition = JSON.parse(definitionStr);
+        let node = null;
+        if (template) {
+            node = ViewElement.fromHTML(template, {
+                view: this,
+                definition,
+            });
+            if (!parentNode) {
+                return;
+            }
+            if (position === 'append') {
+                parentNode.addViewElement(node);
+                cb && cb(parentNode, node);
+            }
+            else {
+                const index = targetNode.getIndexOfParent();
+                if (position === 'insertBefore') {
+                    parentNode.insertViewElementAt(node, index);
+                }
+                else if (position === 'insertAfter') {
+                    parentNode.insertViewElementAt(node, index + 1);
+                }
+            }
+        }
+        // 服务端逻辑
+        if (Array.isArray(definition.logics)) {
+            definition.logics.forEach((logicOption) => {
+                const logic = Logic.from({
+                    ...logicOption,
+                }, this.rootNode, 'logics');
+                this.rootNode.addLogic(logic);
+            });
+        }
+        // 全局结构体
+        if (Array.isArray(definition.structures)) {
+            definition.structures.forEach((structureOption) => {
+                const structure = Structure.from({
+                    ...structureOption,
+                }, this.rootNode, 'structures');
+                this.rootNode.addStructure(structure);
+            });
+        }
+        // 页面入参
+        if (Array.isArray(definition.viewParams)) {
+            definition.viewParams.forEach((paramsOption) => {
+                const param = ParamWithGroup.from({
+                    ...paramsOption,
+                }, this, 'params');
+                this._addParam(param);
+                param.addParamsPrepare();
+            });
+        }
+        // 页面变量
+        if (Array.isArray(definition.viewVariables)) {
+            definition.viewVariables.forEach((variableOption) => {
+                const variable = Variable.from({
+                    ...variableOption,
+                }, this, 'variables');
+                this.addVariable(variable);
+            });
+        }
+        // 页面事件
+        if (Array.isArray(definition.viewBindEvents)) {
+            definition.viewBindEvents.forEach((eventOption) => {
+                const newLogic = definition.viewLogics.find((logic) => eventOption.calleeName === logic.name);
+                const bindEvent = this.bindEvents.find((currentEventItem) => currentEventItem.name === eventOption.name);
+                // 如果没有event对象就先新增一个，如果已经有了就在内部添加logic
+                if (!bindEvent) {
+                    const event = BindEvent.from({
+                        ...eventOption,
+                        calleeName: '',
+                        logics: [newLogic],
+                    }, this, 'bindEvents');
+                    this.addBindEvent(event);
+                }
+                else {
+                    bindEvent.addLogic(newLogic);
+                }
+            });
+        }
+        return node;
+    }
+    onChange($event) {
+        this.emit('change', $event);
+    }
+    /**
+     * 转换成设计器中使用的 Vue template 内容
+     * @param options
+     */
+    genDesignerVueTemplate(options) {
+        return this.elements
+            .map((element) => `${element.toDesignerVue({
+            isRoot: true,
+            asCompontent: options?.asCompontent,
+        })}\n`)
+            .join('');
+    }
+    get frontendType() {
+        return this.getAncestor('FrontendType');
+    }
+    get path() {
+        return `/${this.frontendType?.kind}/${this.name}`;
+    }
+    get slotElems() {
+        const slotElems = [];
+        this.elements.forEach((element) => {
+            utils.traverse(({ node }) => {
+                if (node.tag === 'slot') {
+                    slotElems.push(node);
+                }
+            }, {
+                node: element,
+            });
+        });
+        return slotElems;
+    }
+    /**
+     * 转换成 Vue 文件
+     */
+    toVue(options) {
+        let result = '';
+        result += `<template>\n${this.genVueTemplate(options)}\n</template>\n`;
+        result += `<script>\n${this.genScript()}\n</script>\n`;
+        return result;
+    }
+    /**
+     * 生成宿主语言的文件路径
+     * @param name 一般不用传，用于 rename
+     */
+    getEmbeddedFilePath(name = this.name) {
+        return `/embedded/${this.rootNode?.name || this.parentNode.name}/frontendTypes/${this.getAncestor('FrontendType')?.name}/businessComponents/${name}.ts`;
+    }
+    *toEmbeddedTSFile() {
+        let code = `namespace ${this.getTsNamespace()} {\n`;
+        const state = (0, nasl_translator_1.createCompilerState)(code, {
+            tabSize: 1,
+        });
+        try {
+            code += yield* this.toEmbeddedTS(state);
+        }
+        catch (err) {
+            code += '';
+            console.log(err);
+        }
+        code += '}\n';
+        return {
+            code,
+            filePath: this.getEmbeddedFilePath(),
+            sourceMap: state.sourceMap,
+        };
+    }
+    getAncestorViewElementsWithDataSource(logic) {
+        let element = logic;
+        const viewElements = [];
+        while (element) {
+            if (element.concept &&
+                element.concept === 'ViewElement' &&
+                element.bindAttrs.find((bAttr) => bAttr.name === 'dataSource')) {
+                viewElements.push(element);
+            }
+            element = element.parentNode;
+        }
+        return viewElements;
+    }
+    *handleCurrentItemCode(code, logic) {
+        const viewElementsWithDataSource = this.getAncestorViewElementsWithDataSource(logic);
+        yield* (0, utils_1.wrapForEachToGenerator)(viewElementsWithDataSource, function* wrapForEach(viewElement, index) {
+            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 === 'dataSource');
+                if (dataSource) {
+                    const businessComponent = viewElement.getAncestor('BusinessComponent');
+                    const dataSourceTS = yield* dataSource.expression.toEmbeddedTS();
+                    const logic = businessComponent.logics.find((logic) => logic.name === dataSourceTS);
+                    if (logic) {
+                        code = code.replaceAll(currentItemCode, `nasl.ui.getCurrentItemType(${dataSourceTS}(${logic.params.map(() => 'null').join(',')}))`);
+                    }
+                    else {
+                        const variable = businessComponent.variables.find((variable) => variable.name === dataSourceTS);
+                        code = code.replaceAll(currentItemCode, `nasl.ui.getCurrentItemType(${variable ? variable.name : dataSourceTS})`);
+                    }
+                }
+            }
+        });
+        return code;
+    }
+    removeExistingViewElement(viewElement) {
+        if (this.existingViewElement.has(viewElement.name)) {
+            this.existingViewElement.delete(viewElement.name);
+        }
+        const prefix = viewElement?.name.replace(/\d*$/, '');
+        let lastDigit = viewElement?.name.match(/\d+$/)?.[0];
+        if (lastDigit === undefined)
+            return;
+        //@ts-ignore
+        lastDigit = lastDigit < Number.MAX_SAFE_INTEGER ? parseInt(lastDigit) : BigInt(lastDigit);
+        if (removedViewElementCache?.[prefix]) {
+            //@ts-ignore
+            if (lastDigit > removedViewElementCache[prefix])
+                //@ts-ignore
+                removedViewElementCache[prefix] = lastDigit;
+        }
+        else {
+            //@ts-ignore
+            removedViewElementCache[prefix] = lastDigit;
+        }
+    }
+    *getRightCode(code, assignment, rightNode) {
+        code = code.replaceAll('\n', ' ');
+        const logic = assignment.logic;
+        const logicRtn = logic?.returns[0];
+        // 调用接口，参数替换成 null
+        if (asserts.isCallInterface(rightNode)) {
+            const { _interface } = rightNode.getModuleInterface();
+            return _interface
+                ? `${rightNode.tsCalleeKey}(${_interface.params.map(() => 'null').join(',')})`
+                : null;
+        }
+        // 调用服务端逻辑，参数替换成 null
+        if (asserts.isCallLogic(rightNode) && rightNode.calleeNamespace === 'app.logics') {
+            const calleeName = rightNode?.calleeName;
+            const calleeLogic = this.getAncestor('App').logics.find((l) => l.name === calleeName);
+            return calleeLogic ? `app.logics.${calleeName}(${calleeLogic.params.map(() => 'null').join(',')})` : null;
+        }
+        // 调用依赖库逻辑可能会有子逻辑，子逻辑拼接可能有ts忽略先去掉
+        if (asserts.isCallLogic(rightNode) && rightNode.calleeNamespace?.startsWith('extensions.')) {
+            code = code.replaceAll('// @ts-ignore', '');
+        }
+        // view 局部变量，申明提升前增加判断，使用 logic 内的 result 直接替换成对应 logic，logic 内部变量替换成 null
+        if (logicRtn && code.includes(logicRtn.name)) {
+            if (code === logicRtn.name)
+                return `${logic.name}(${logic.params.map(() => 'null').join(',')})`;
+            code = this.handleReplaceCode(code, logicRtn.name, `${logic.name}(${logic.params.map(() => 'null').join(',')})`);
+            logic.params.forEach((param) => {
+                if (code.includes(param.name))
+                    code = this.handleReplaceCode(code, param.name, 'null');
+            });
+            logic.variables.forEach((variable) => {
+                if (code.includes(variable.name))
+                    code = this.handleReplaceCode(code, variable.name, 'null');
+            });
+            return code;
+        }
+        // 处理 current.item、current1.item 等数据
+        if (/current(\d)*\.item/.test(code)) {
+            code = yield* this.handleCurrentItemCode(code, logic);
+            return code;
+        }
+        // 直接赋值 logic 内局部变量、输入参数直接提示系统无法推断类型
+        const useLogicVar = logic.params.find((param) => code.includes(param.name)) ||
+            logic.variables.find((variable) => code.includes(variable.name));
+        return useLogicVar ? 'null' : code;
+    }
+    handleReplaceCode(code, variable, replaceCode) {
+        return code.replace(/\S+/g, ($1) => {
+            if ($1 === `${variable},`)
+                return `${replaceCode},`;
+            if ($1 === variable)
+                return replaceCode;
+            let fnCode = $1;
+            if ($1.startsWith(`${variable}.`))
+                fnCode = $1.replaceAll(`${variable}.`, `${replaceCode}.`);
+            if ($1.startsWith(`${variable},`))
+                fnCode = $1.replaceAll(`${variable},`, `${replaceCode},`);
+            if ($1.includes(`(${variable},`))
+                fnCode = $1.replaceAll(`(${variable},`, `(${replaceCode},`);
+            if ($1.includes(`(${variable}.`))
+                fnCode = $1.replaceAll(`(${variable}.`, `(${replaceCode}.`);
+            if ($1.includes(`(${variable})`))
+                fnCode = $1.replaceAll(`(${variable})`, `(${replaceCode})`);
+            if ($1.includes(`,${variable},`))
+                fnCode = $1.replaceAll(`,${variable},`, `,${replaceCode},`);
+            if ($1.includes(`,${variable}.`))
+                fnCode = $1.replaceAll(`,${variable}.`, `,${replaceCode}.`);
+            if ($1.includes(`,${variable})`))
+                fnCode = $1.replaceAll(`,${variable})`, `,${replaceCode})`);
+            return fnCode;
+        });
+    }
+    // 获取当前element，铺平
+    elementsAttrs(elements, componentList, allComponentList, currentIndex) {
+        if (elements) {
+            elements.forEach((item) => {
+                let index = currentIndex ?? -1;
+                if (item.tag === 'template' && item.haveScope()) {
+                    index += 1;
+                }
+                if (View__1.ComponentCompletionPropertyMap[item.tag]) {
+                    componentList.push(item);
+                }
+                item.currentIndex = index;
+                allComponentList.push(item);
+                if (item.children.length > 0) {
+                    this.elementsAttrs(item.children, componentList, allComponentList, index);
+                }
+            });
+        }
+    }
+    *toEmbeddedTS(state = (0, nasl_translator_1.createCompilerState)()) {
+        const self = this;
+        // 获取虚拟logic的参数和内容
+        // 用作展示和tots查找引用
+        self.getElementLogicRoot();
+        /**
+         * 这部分需要先执行
+         **/
+        // elements类型声明定义
+        let code = `interface IElements {\n`;
+        // 生成所有的name和类型定义
+        yield* (0, utils_1.wrapForEachToGenerator)(self.elements, function* warpForEachGenerator(element) {
+            code += yield* element.toEmbeddedTSDefinition((0, nasl_translator_1.shiftState)(state, code, {
+                tabSize: (state?.tabSize || 0) + 1,
+            }));
+        });
+        code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}}\n`;
+        code += `let __elements: IElements;\n`;
+        const elementsPathMap = {};
+        // 深度遍历拿到element path
+        if (Array.isArray(self.elements)) {
+            self.elements.forEach((item) => {
+                item.toEmbeddedTSRefPath(elementsPathMap);
+            });
+        }
+        if (Array.isArray(self.elements)) {
+            // elementsRefTree
+            code += `function elementsRefTree() {\n`;
+            code += `return {\n`;
+            code += `children: {\n`;
+            yield* (0, utils_1.wrapForEachToGenerator)(self.elements, function* warpForEachGenerator(item) {
+                code += yield* item.toEmbeddedTSRefTree((0, nasl_translator_1.shiftState)(state, code, { inline: true }), { elementsPathMap });
+            });
+            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, cur) => {
+                    return `${prev}.children.${cur}()`;
+                }, 'elementsRefTree()');
+                code += `${(0, nasl_translator_1.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 = new Map();
+        const callFunctionAdvanceMap = new Map();
+        yield* self.traverseChildrenGenerator(function* traverseChildrenGenerator(el) {
+            if (el &&
+                // 批量赋值
+                (asserts.isBatchAssignment(el) ||
+                    // 赋值
+                    (asserts.isAssignment(el) && el.left?.name) ||
+                    // 内置函数对集合类型的推导
+                    (asserts.isCallFunction(el) && el.derivablecollection?.name))) {
+                if (el?.getAncestor('SubLogic')) {
+                    return;
+                }
+                if (asserts.isAssignment(el)) {
+                    const advanceVar = self.variables?.find((variable) => !variable.typeAnnotation && el.left?.name === variable.name);
+                    if (advanceVar && !advanceMap.get(advanceVar)) {
+                        advanceMap.set(advanceVar, el);
+                    }
+                }
+                else if (asserts.isCallFunction(el)) {
+                    // 需要被推导的集合
+                    const expression = el.derivablecollection;
+                    const advanceVar = self.variables?.find((variable) => {
+                        return !variable.typeAnnotation && expression?.name === variable.name;
+                    });
+                    if (advanceVar && !callFunctionAdvanceMap.get(advanceVar)) {
+                        callFunctionAdvanceMap.set(advanceVar, el);
+                    }
+                }
+                else if (asserts.isBatchAssignment(el)) {
+                    yield* (0, utils_1.wrapForEachToGenerator)(el.assignmentLines, function* warpForEachGenerator({ leftIndex }) {
+                        const leftCode = leftIndex.length === 1
+                            ? yield* el.left?.expression?.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true })) ??
+                                (0, utils_1.returnOrigin)('')
+                            : yield* el.left?.members[leftIndex[1]]?.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true })) ??
+                                (0, utils_1.returnOrigin)('');
+                        const advanceVar = self.variables?.find((variable) => !variable.typeAnnotation && leftCode === variable.name);
+                        if (advanceVar && !advanceMap.get(advanceVar)) {
+                            advanceMap.set(advanceVar, el);
+                        }
+                    });
+                }
+            }
+        });
+        // 用来储存默认值翻译结构是__IDENTIFIER__或者__IDENTIFIER__()的节点
+        const IDENTIFIERMAP = new Set();
+        if (Array.isArray(self.params)) {
+            yield* (0, utils_1.wrapForEachToGenerator)(self.params, function* warpForEachGenerator(param) {
+                code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}let `;
+                code += yield* param.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true }));
+                code += ';\n';
+            });
+        }
+        if (Array.isArray(self.variables)) {
+            yield* (0, utils_1.wrapForEachToGenerator)(self.variables, function* warpForEachGenerator(variable) {
+                const ts = yield* variable.defaultValue?.toEmbeddedTS?.() ?? (0, utils_1.returnOrigin)('');
+                if (['__IDENTIFIER__', '__IDENTIFIER__()'].includes(ts)) {
+                    IDENTIFIERMAP.add(variable);
+                }
+                if (!advanceMap.get(variable) && !callFunctionAdvanceMap.get(variable)) {
+                    code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}let `;
+                    code += yield* variable.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true }));
+                    code += ';\n';
+                }
+            });
+        }
+        // 变量提升
+        state.isVariableHost = true;
+        yield* (0, utils_1.wrapIteratorToGenerator)(advanceMap.entries(), function* warpForEachGenerator([variable, assignment]) {
+            // 有默认值的用默认值来推导类型, 但是如果是__IDENTIFIER__或者__IDENTIFIER__()，就不需要默认值来推导了
+            if (variable.defaultValue?.expression && !IDENTIFIERMAP.has(variable)) {
+                code += `let ${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}`;
+                code += yield* variable.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true }));
+                return;
+            }
+            code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}// @ts-ignore\n`;
+            code += `let ${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}`;
+            code += yield* variable.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true }));
+            code += ' = ';
+            if (asserts.isBatchAssignment(assignment)) {
+                yield* (0, utils_1.wrapForEachToGenerator)(assignment.assignmentLines, function* warpForEachGenerator({ leftIndex, rightIndex }) {
+                    const leftCode = leftIndex.length === 1
+                        ? yield* assignment.left.expression.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true }))
+                        : yield* assignment.left.members[leftIndex[1]]?.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true })) ??
+                            (0, utils_1.returnOrigin)('');
+                    if (leftCode === variable.name) {
+                        const rightNode = rightIndex.length === 1
+                            ? assignment.rights[rightIndex[0]]?.expression
+                            : assignment.rights[rightIndex[0]]?.members[rightIndex[1]];
+                        const rightCode = yield* rightNode?.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true })) ??
+                            (0, utils_1.returnOrigin)('');
+                        code += yield* self.getRightCode(rightCode, assignment, rightNode);
+                    }
+                });
+            }
+            else {
+                let rightCode = '';
+                // 因为右侧枚举要赋值就得new 一下；
+                if (assignment.right &&
+                    asserts.isIdentifier(assignment.right) &&
+                    assignment.right.namespace &&
+                    assignment.right.namespace.endsWith('enums')) {
+                    rightCode += 'new ';
+                }
+                rightCode +=
+                    assignment.right && assignment.right.toEmbeddedTS
+                        ? yield* assignment.right.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true }))
+                        : '__RIGHT__';
+                code += yield* self.getRightCode(rightCode, assignment, assignment.right);
+            }
+            code += ';\n';
+        });
+        yield* (0, utils_1.wrapIteratorToGenerator)(callFunctionAdvanceMap.entries(), function* warpForEachGenerator([node, assignment]) {
+            //
+            if (advanceMap.get(node)) {
+                return;
+            }
+            // 有默认值的用默认值来推导类型, 但是如果是__IDENTIFIER__或者__IDENTIFIER__()，就不需要默认值来推导了
+            if (node.defaultValue?.expression && !IDENTIFIERMAP.has(node)) {
+                code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}let `;
+                code += yield* node.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true }));
+                return;
+            }
+            code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}// @ts-ignore\n`;
+            yield* (0, utils_1.wrapForEachToGenerator)([
+                {
+                    key: 'key',
+                    node: assignment.keyOfCollection,
+                },
+                {
+                    key: 'item',
+                    node: assignment.itemOfCollection,
+                },
+            ], function* warpForEachGenerator({ key, node: itemNode }) {
+                if (itemNode) {
+                    code += `const __${key}_${node?.name} = `;
+                    const itemCode = yield* itemNode?.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true })) ??
+                        (0, utils_1.returnOrigin)('');
+                    code += yield* self.getRightCode(itemCode, assignment, itemNode);
+                    code += ';\n';
+                }
+            });
+            code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}let `;
+            code += yield* node.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true }));
+            const nodeName = node?.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}>;`;
+            }
+            code += ';\n';
+        });
+        // 变量提升结束
+        delete state.isVariableHost;
+        /* 默认值草稿区 ---------------------------*/
+        code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}function __playground(){\n`;
+        /* 参数的默认值是__IDENTIFIER__或者__IDENTIFIER__()时不赋默认值，但是需要ts翻译出来进行报错校验 */
+        for (const node of IDENTIFIERMAP.values()) {
+            code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 2)}`;
+            code += yield* node.defaultValue.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { inline: true }));
+            code += '; ';
+        }
+        code += '\n';
+        code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 2)}return\n`;
+        function* setPlaygroundCode(arr, name) {
+            if (arr.length) {
+                code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}/* -----以下是 ${name} 的默认值草稿------ */\n`;
+            }
+            for (const item1 of arr) {
+                for (const item of item1.defaultValue?.playground ?? []) {
+                    code += yield* item.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, { tabSize: (state?.tabSize || 0) + 1 }));
+                    code += ';\n';
+                }
+            }
+        }
+        yield* setPlaygroundCode(self.variables, 'variables');
+        yield* setPlaygroundCode(self.params, 'params');
+        code += `${(0, nasl_translator_1.indent)(state?.tabSize || 0)}}\n`;
+        code += `export class ${self.tsName} extends nasl.ui.ViewComponent {\n`;
+        // 需要类型推导的局部变量/返回值需要调整申明顺序
+        code += `constructor(
+      options?: {
+        [propName: string]: any,
+        bindAttr?: {
+          __NASLIF?: nasl.core.Boolean,
+    `;
+        if (Array.isArray(self.params)) {
+            yield* (0, utils_1.wrapForEachToGenerator)(self.params, function* warpForEachGenerator(param, index) {
+                code += `${param.name}?: `;
+                code += yield* param.typeAnnotation.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code));
+                code += ',\n';
+            });
+        }
+        code += `
+        },
+        slotDefault?: () => Array<any>,
+      }) {
+        super();\n`;
+        // 绑定事件
+        if (Array.isArray(self.bindEvents)) {
+            yield* (0, utils_1.wrapForEachToGenerator)(self.bindEvents, function* warpForEachGenerator(event) {
+                code += yield* event.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, {
+                    tabSize: state?.tabSize || 0,
+                }), true);
+                code += '\n';
+            });
+        }
+        code += `\n}`;
+        // 自定义事件的定义
+        if (Array.isArray(self.events) && self.events.length) {
+            code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 1);
+            yield* (0, utils_1.wrapForEachToGenerator)(self.events, function* warpForEachGenerator(event) {
+                code += yield* event.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, {
+                    tabSize: (state?.tabSize || 0) + 2,
+                }));
+                code += '\n';
+            });
+            code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 1);
+        }
+        // 逻辑
+        if (Array.isArray(self.logics) && self.logics.length) {
+            code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 1);
+            yield* (0, utils_1.wrapForEachToGenerator)(self.logics, function* warpForEachGenerator(logic) {
+                code += yield* logic.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, {
+                    tabSize: (state?.tabSize || 0) + 2,
+                }), 'noExport');
+                code += '\n';
+                code += yield* logic.toInnerEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, {
+                    tabSize: (state?.tabSize || 0) + 2,
+                }));
+            });
+            code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 1);
+        }
+        // render函数
+        code += `\n${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}`;
+        code += `__render(`;
+        code += `){\n`;
+        code += (0, nasl_translator_1.indent)(state?.tabSize || 0);
+        // elements 元素
+        if (Array.isArray(self.elements)) {
+            // 生成嵌套式的内容
+            yield* (0, utils_1.wrapForEachToGenerator)(self.elements, function* warpForEachGenerator(element) {
+                code += yield* element.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, {
+                    tabSize: (state?.tabSize || 0) + 3,
+                }));
+                code += '\n';
+            });
+        }
+        code += `\n${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}}\n`;
+        if (Array.isArray(self.params)) {
+            code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}$destination(options: {`;
+            yield* (0, utils_1.wrapForEachToGenerator)(self.params, function* warpForEachGenerator(param, index) {
+                code += `${param.name}?: `;
+                code += yield* param.typeAnnotation.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code));
+                code += ', ';
+            });
+            // 锚点
+            code += `_anchor?: nasl.core.String`;
+            code += '}){}\n';
+        }
+        code += `${(0, nasl_translator_1.indent)((state?.tabSize || 0) + 1)}}\n`;
+        return code;
+    }
+    *toEmbeddedDeclarationTS(state = (0, nasl_translator_1.createCompilerState)()) {
+        const self = this;
+        let code = `export declare class ${self.tsName} extends nasl.ui.ViewComponent {\n`;
+        // 需要类型推导的局部变量/返回值需要调整申明顺序
+        code += `constructor(
+      options?: {
+        [propName: string]: any,
+        bindAttr?: {
+          __NASLIF?: nasl.core.Boolean,
+    `;
+        if (Array.isArray(self.params)) {
+            yield* (0, utils_1.wrapForEachToGenerator)(self.params, function* warpForEachGenerator(param, index) {
+                code += `${param.name}?: `;
+                code += yield* param.typeAnnotation.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code));
+                code += ',\n';
+            });
+        }
+        code += `
+        },
+        slotDefault?: () => Array<any>,
+      });\n`;
+        // 自定义事件的定义
+        if (Array.isArray(self.events) && self.events.length) {
+            code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 1);
+            yield* (0, utils_1.wrapForEachToGenerator)(self.events, function* warpForEachGenerator(event) {
+                code += yield* event.toEmbeddedTS((0, nasl_translator_1.shiftState)(state, code, {
+                    tabSize: (state?.tabSize || 0) + 2,
+                }));
+                code += '\n';
+            });
+            code += (0, nasl_translator_1.indent)((state?.tabSize || 0) + 1);
+        }
+        code += '}\n';
+        return code;
+    }
+    toEmbeddedDeclarationTSFile() {
+        let code = `namespace ${this.getTsNamespace()} {\n`;
+        try {
+            code += utils.runGeneratorSync(this.toEmbeddedDeclarationTS((0, nasl_translator_1.createCompilerState)(code, {
+                tabSize: 1,
+                onlyDeclaration: true,
+            })));
+        }
+        catch (err) {
+            code += '';
+            console.log(err);
+        }
+        code += '}\n';
+        return {
+            code,
+            filePath: this.getEmbeddedFilePath(),
+        };
+    }
+    /**
+     * 转换成 VueOptions
+     * @TODO 后面 template 可以优化成 render 函数
+     */
+    toVueOptions(options) {
+        return {
+            template: this.genVueTemplate(options),
+            script: this.genScript(),
+        };
+    }
+    genVueTemplate(options) {
+        return this.elements?.map((element) => `${element?.toVue(options)}\n`).join('');
+    }
+    getViewBindEvents() {
+        const bindEvents = [];
+        // 页面上的绑定的事件
+        this.bindEvents.forEach((bindEvent) => {
+            bindEvents.push(bindEvent);
+        });
+        this.elements.forEach((item) => {
+            utils.traverse((current) => {
+                current.node.bindEvents.forEach((bindEvent) => {
+                    bindEvents.push(bindEvent);
+                });
+            }, { node: item });
+        });
+        return bindEvents;
+    }
+    // 获取页面上需要替换的表达式
+    getViewExpressions() {
+        const bindExpressions = [];
+        this.elements.forEach((item) => {
+            utils.traverse((current) => {
+                const { node } = current;
+                const playgroundNodePath = (node?.nodePath || '').split('.').find((nodePathNode) => {
+                    return nodePathNode.match(/(.+)\[.+\]/)?.[1] === 'playground';
+                });
+                if (!playgroundNodePath) {
+                    //// 处理三种情况
+                    //if (
+                    //    ['BindAttribute', 'BindDirective', 'BindStyle'].includes(node.concept)
+                    //    && node.needReplaceWithIdentifier
+                    //) {
+                    //    bindExpressions.push(node);
+                    //}
+                    if (node?.concept === 'Match') {
+                        bindExpressions.push(node);
+                    }
+                }
+            }, {
+                node: item,
+            }, {
+                mode: 'anyObject',
+                depthFirst: true,
+                excludedKeySet: new Set([
+                    'bindEvents',
+                    'parentNode',
+                    'sourceMap',
+                    'storageJSON',
+                    'tsErrorDetail',
+                    'NaslAnnotatedJSON',
+                    'calledFrom',
+                    '_events',
+                    '_collectingList',
+                    '_historyList',
+                ]),
+            });
+        });
+        return bindExpressions;
+    }
+    /**
+     * 生成 Vue 中需要的 JS 代码
+     * @TODO 这一版先做成 componentOptions 式的，后面再美化
+     */
+    genScript() {
+        const componentList = [];
+        const allComponentList = [];
+        this.elementsAttrs(this.elements, componentList, allComponentList, -1);
+        const definition = {
+            params: this.params,
+            variables: this.variables,
+            logics: this.logics,
+            events: this.bindEvents,
+            title: this.title,
+            viewBindEvents: this.getViewBindEvents(),
+            viewExpressions: this.getViewExpressions(),
+            elements: componentList,
+            elementsAll: allComponentList,
+        };
+        let code = '';
+        const keyboardEventMixinCode = `const keyboardEventMixin = {
+            mounted() {
+                document.addEventListener('keydown', this.onKeyDown);
+                document.addEventListener('keyup', this.onKeyUp);
+            },
+            beforeDestory() {
+                document.removeEventListener('keydown', this.onKeyDown);
+                document.removeEventListener('keyup', this.onKeyUp);
+            },
+            methods: {
+                async onKeyDown(e) {
+                    ${this.bindEvents
+            .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')}
+                }
+            }
+        };\n`;
+        code += keyboardEventMixinCode;
+        code += 'export default {\n';
+        code += 'mixins: [';
+        const mixins = [];
+        // 键盘事件mixin
+        mixins.push('keyboardEventMixin');
+        code += mixins.join(',');
+        code += '],';
+        code += (0, utils_2.translator)(definition, this);
+        code += '};\n';
+        return code;
+    }
+    // 生成预览的模板
+    genPreviewTemplate() {
+        return `<template>
+              <bs-${this.name}>
+                ${this.slotElems
+            .map((slotElem) => {
+            const slotName = slotElem.name;
+            return `<template #${slotName}></template>`;
+        })
+            .join('')}
+              </bs-${this.name}>
+            </template>`;
+    }
+    getAllViewElementNames(excludeName) {
+        const res = [];
+        this.elements.forEach((element) => {
+            utils.traverse(({ node }) => {
+                if (node.name !== excludeName)
+                    res.push(node.name);
+            }, {
+                node: element,
+            });
+        });
+        return Array.from(res);
+    }
+    getViewCallLogics() {
+        const callbackLogics = [];
+        this.traverseChildren((el) => {
+            if (asserts.isIdentifier(el) && el.namespace?.endsWith('logics')) {
+                callbackLogics.push(`${el.namespace}.${el.name}`);
+            }
+        });
+        return callbackLogics;
+    }
+    toNaturalTS(state = (0, nasl_translator_1.createCompilerState)()) {
+        let code = `export namespace ${this.name} {\n`;
+        // this.businessComponents.forEach((component) => {
+        //   this.frontends.forEach((frontend) => {
+        //     code += frontend.toNaturalTS(state);
+        //     code += '\n';
+        //   });
+        // });
+        code += '}';
+        return code;
+    }
+    toTextualNASL(state = (0, nasl_translator_1.createCompilerState)()) {
+        let code = '';
+        code += (0, nasl_translator_1.createDecoratorCode)(state, this, ['title', 'description']);
+        code += `viewComponent ${this.name}`;
+        code += `(\n`;
+        this.params.forEach((param, index) => {
+            code += param.toTextualNASL((0, nasl_translator_1.shiftState)(state, code, { tabSize: state.tabSize + 1 }));
+            code += ',\n';
+        });
+        this.events.forEach((event, index) => {
+            code += event.toTextualNASL((0, nasl_translator_1.shiftState)(state, code, { tabSize: state.tabSize + 1 }));
+            code += ',\n';
+        });
+        code += ') {\n';
+        this.variables.forEach((variable) => {
+            code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}let `;
+            code += variable.toTextualNASL((0, nasl_translator_1.shiftState)(state, code, { tabSize: state.tabSize + 1, inline: true }));
+            code += ';\n';
+        });
+        if (this.variables.length)
+            code += '\n';
+        this.logics.forEach((logic) => {
+            code += logic.toTextualNASL((0, nasl_translator_1.shiftState)(state, code, { tabSize: state.tabSize + 1 }));
+            code += '\n';
+        });
+        if (this.logics.length)
+            code += '\n';
+        code += this.elements[0].toTextualNASL((0, nasl_translator_1.shiftState)(state, code, { tabSize: state.tabSize + 1 }));
+        code += `\n${(0, nasl_translator_1.indent)(state.tabSize)}}`;
+        return code;
+    }
+};
+exports.BusinessComponent = BusinessComponent;
+__decorate([
+    (0, decorators_1.property)()
+    // @ts-ignore
+], BusinessComponent.prototype, "concept", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], BusinessComponent.prototype, "name", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], BusinessComponent.prototype, "title", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], BusinessComponent.prototype, "description", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'Event',
+        isArray: true,
+        defaultValue: [],
+    })
+], BusinessComponent.prototype, "events", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'ParamWithGroup',
+        isArray: true,
+        defaultValue: [],
+    })
+], BusinessComponent.prototype, "params", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'Variable',
+        isArray: true,
+        defaultValue: [],
+    })
+], BusinessComponent.prototype, "variables", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'BindEvent',
+        isArray: true,
+        defaultValue: [],
+    })
+], BusinessComponent.prototype, "bindEvents", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'BusinessLogic',
+        isArray: true,
+        defaultValue: [],
+    })
+], BusinessComponent.prototype, "logics", void 0);
+__decorate([
+    (0, decorators_1.property)({
+        objectRef: 'ViewElement',
+        isArray: true,
+        defaultValue: [],
+    })
+], BusinessComponent.prototype, "elements", void 0);
+__decorate([
+    (0, decorators_1.property)()
+], BusinessComponent.prototype, "icon", void 0);
+__decorate([
+    nasl_translator_1.withSourceMapGenerator
+], BusinessComponent.prototype, "toEmbeddedTS", null);
+__decorate([
+    nasl_translator_1.withSourceMapGenerator
+], BusinessComponent.prototype, "toEmbeddedDeclarationTS", null);
+__decorate([
+    (0, nasl_translator_1.withSourceMap)()
+], BusinessComponent.prototype, "toNaturalTS", null);
+__decorate([
+    (0, nasl_translator_1.withSourceMap)()
+], BusinessComponent.prototype, "toTextualNASL", null);
+exports.BusinessComponent = BusinessComponent = BusinessComponent_1 = __decorate([
+    (0, decorators_1.concept)('业务组件')
+], BusinessComponent);
+exports.default = BusinessComponent;
+//================================================================================
+// ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+// 自动生成的代码已结束。下面可以手动编写。
+//================================================================================
+//# sourceMappingURL=BusinessComponent__.js.map