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

package/out/concepts/ViewElement__.js

@@ -43,7 +43,6 @@ const compiler = __importStar(require("vue-template-compiler"));
 const LogicItem__1 = require("./LogicItem__");
 const Logic__1 = require("./Logic__");
 const config_1 = require("../config");
-const View__1 = require("./View__");
 const utils_1 = require("../utils");
 /**
  * 自闭合标签
@@ -253,6 +252,14 @@ function transAstNodeToNaslNode(astNode, namespace) {
             ...tempNode,
         }, undefined, 'logics');
     }
+    else if (astNode.type === 'LogicalExpression' || astNode.type === 'BinaryExpression') {
+        node = {
+            concept: 'BinaryExpression',
+            operator: astNode.operator,
+            left: transAstNodeToNaslNode(astNode.left),
+            right: transAstNodeToNaslNode(astNode.right),
+        };
+    }
     else {
         node = astNode;
         node.concept = astNode.type;
@@ -299,6 +306,10 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     constructor(source) {
         source = Object.assign({}, ViewElement_1.getDefaultOptions(), source);
         super(source);
+        /**
+         * 页面元素名称
+         */
+        this.name = '';
         /**
          * 元素绑定属性列表
          */
@@ -326,41 +337,6 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         this.computedStyle = {};
         super.subConstructor(source);
     }
-    /**
-     * 祖先 View
-     */
-    get view() {
-        return this.getAncestor('View');
-    }
-    /**
-     * 祖先 Module
-     */
-    get module() {
-        return this.getAncestor('Module');
-    }
-    /**
-     * 祖先 App
-     */
-    get app() {
-        return this.getAncestor('App');
-    }
-    /**
-     * 祖先 Frontend
-     */
-    get frontend() {
-        return this.getAncestor('Frontend');
-    }
-    /**
-     * 从父级删除该节点
-     * @internal
-     */
-    _delete() {
-        let params = null;
-        if (this.parentNode) {
-            params = this.parentNode?.__removeViewElement?.(this);
-        }
-        return params;
-    }
     /**
      * 设置页面元素名称
      */
@@ -399,7 +375,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         const excludedSet = new Set(excludedList);
         return (this.bindAttrs || [])
             .filter((item) => !excludedSet.has(item))
-            .map((item) => item?.name);
+            .map((item) => item.name);
     }
     getBindAttributeUniqueName(name = 'bindAttribute1') {
         return utils.unique(name, this.getBindAttributeExistingNames(), undefined, false);
@@ -460,7 +436,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     }
     getBindEventExistingNames(excludedList = []) {
         const excludedSet = new Set(excludedList);
-        return (this.bindEvents || []).filter((item) => !excludedSet.has(item)).map((item) => item?.name);
+        return (this.bindEvents || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
     }
     getBindEventUniqueName(name = 'bindEvent1') {
         return utils.unique(name, this.getBindEventExistingNames(), undefined, false);
@@ -523,7 +499,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         const excludedSet = new Set(excludedList);
         return (this.bindDirectives || [])
             .filter((item) => !excludedSet.has(item))
-            .map((item) => item?.name);
+            .map((item) => item.name);
     }
     getBindDirectiveUniqueName(name = 'bindDirective1') {
         return utils.unique(name, this.getBindDirectiveExistingNames(), undefined, false);
@@ -584,7 +560,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     }
     getBindStyleExistingNames(excludedList = []) {
         const excludedSet = new Set(excludedList);
-        return (this.bindStyles || []).filter((item) => !excludedSet.has(item)).map((item) => item?.name);
+        return (this.bindStyles || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
     }
     getBindStyleUniqueName(name = 'bindStyle1') {
         return utils.unique(name, this.getBindStyleExistingNames(), undefined, false);
@@ -710,37 +686,6 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         return bindAttribute.delete();
     }
-    __removeBindAttribute(bindAttribute) {
-        const parentKey = bindAttribute.parentKey;
-        const params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: bindAttribute,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            // @ts-ignore
-            const t = this.__v_raw || this;
-            // @ts-ignore
-            const n = bindAttribute.__v_raw || bindAttribute;
-            if (Array.isArray(t[parentKey])) {
-                // @ts-ignore
-                const index = t[parentKey].findIndex((el) => (el.__v_raw || el) === n);
-                ~index && this[parentKey].splice(index, 1);
-                params.index = index;
-            }
-            else {
-                const q = t[parentKey];
-                if ((q.__v_raw || q) === n) {
-                    params.index = 0;
-                    this[parentKey] = undefined;
-                }
-            }
-        }
-        return params;
-    }
     removeBindEvent(options) {
         let bindEvent;
         if (typeof options === 'string') {
@@ -754,37 +699,6 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         return bindEvent.delete();
     }
-    __removeBindEvent(bindEvent) {
-        const parentKey = bindEvent.parentKey;
-        const 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[parentKey])) {
-                // @ts-ignore
-                const index = t[parentKey].findIndex((el) => (el.__v_raw || el) === n);
-                ~index && this[parentKey].splice(index, 1);
-                params.index = index;
-            }
-            else {
-                const q = t[parentKey];
-                if ((q.__v_raw || q) === n) {
-                    params.index = 0;
-                    this[parentKey] = undefined;
-                }
-            }
-        }
-        return params;
-    }
     removeBindDirective(options) {
         let bindDirective;
         if (typeof options === 'string') {
@@ -798,37 +712,6 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         return bindDirective.delete();
     }
-    __removeBindDirective(bindDirective) {
-        const parentKey = bindDirective.parentKey;
-        const params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: bindDirective,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            // @ts-ignore
-            const t = this.__v_raw || this;
-            // @ts-ignore
-            const n = bindDirective.__v_raw || bindDirective;
-            if (Array.isArray(t[parentKey])) {
-                // @ts-ignore
-                const index = t[parentKey].findIndex((el) => (el.__v_raw || el) === n);
-                ~index && this[parentKey].splice(index, 1);
-                params.index = index;
-            }
-            else {
-                const q = t[parentKey];
-                if ((q.__v_raw || q) === n) {
-                    params.index = 0;
-                    this[parentKey] = undefined;
-                }
-            }
-        }
-        return params;
-    }
     removeBindStyle(options) {
         let bindStyle;
         if (typeof options === 'string') {
@@ -842,37 +725,6 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         return bindStyle.delete();
     }
-    __removeBindStyle(bindStyle) {
-        const parentKey = bindStyle.parentKey;
-        const params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: bindStyle,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            // @ts-ignore
-            const t = this.__v_raw || this;
-            // @ts-ignore
-            const n = bindStyle.__v_raw || bindStyle;
-            if (Array.isArray(t[parentKey])) {
-                // @ts-ignore
-                const index = t[parentKey].findIndex((el) => (el.__v_raw || el) === n);
-                ~index && this[parentKey].splice(index, 1);
-                params.index = index;
-            }
-            else {
-                const q = t[parentKey];
-                if ((q.__v_raw || q) === n) {
-                    params.index = 0;
-                    this[parentKey] = undefined;
-                }
-            }
-        }
-        return params;
-    }
     removeViewElement(options) {
         let viewElement;
         if (typeof options === 'string') {
@@ -886,41 +738,28 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         return viewElement.delete();
     }
-    __removeViewElement(viewElement) {
-        const parentKey = viewElement.parentKey;
-        const 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[parentKey])) {
-                // @ts-ignore
-                const index = t[parentKey].findIndex((el) => (el.__v_raw || el) === n);
-                ~index && this[parentKey].splice(index, 1);
-                params.index = index;
-            }
-            else {
-                const q = t[parentKey];
-                if ((q.__v_raw || q) === n) {
-                    params.index = 0;
-                    this[parentKey] = undefined;
-                }
-            }
-        }
-        return params;
-    }
     //================================================================================
     // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
     // 自动生成的代码已结束。下面可以手动编写。
     //================================================================================
+    /**
+     * 祖先 View
+     */
+    get view() {
+        return this.getAncestor('View');
+    }
+    /**
+     * 祖先 Module
+     */
+    get module() {
+        return this.getAncestor('Module');
+    }
+    /**
+     * 祖先 Frontend
+     */
+    get frontend() {
+        return this.getAncestor('Frontend');
+    }
     get likeComponent() {
         return this.view || this?.getAncestor('BusinessComponent');
     }
@@ -982,6 +821,57 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     haveScope() {
         return Boolean(this.slotScope);
     }
+    getGenericTypes(tag) {
+        let T;
+        let V;
+        let P;
+        let M;
+        let T1;
+        let C;
+        const genericTypes = [];
+        if (config_1.config?.allNodesAPI[tag]) {
+            const { tsTypeParams = '' } = config_1.config?.allNodesAPI[tag];
+            const tsTypes = tsTypeParams?.split(',');
+            tsTypes.forEach((item) => {
+                const reg = /^(\w+)\s?/;
+                const result = reg.exec(item.trim());
+                const t = result?.[1];
+                if (t === 'T') {
+                    T = true;
+                    genericTypes.push('__item');
+                }
+                if (t === 'V') {
+                    V = true;
+                    genericTypes.push('__V');
+                }
+                if (t === 'P') {
+                    P = true;
+                    genericTypes.push('__pageable');
+                }
+                if (t === 'M') {
+                    M = true;
+                    genericTypes.push('__multiple');
+                }
+                if (t === 'C') {
+                    C = true;
+                    genericTypes.push('__converter');
+                }
+                if (t === 'T1') {
+                    T1 = true;
+                    genericTypes.push('__columnItem');
+                }
+            });
+        }
+        return {
+            T,
+            V,
+            P,
+            M,
+            T1,
+            C,
+            genericTypes,
+        };
+    }
     *toEmbeddedTSDefinition(state = (0, translator_1.createCompilerState)()) {
         const self = this;
         let code = '';
@@ -989,22 +879,22 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         if (self.isCorrespondingBusinessComponent) {
             code += `${self.name}: ${self.correspondingBusinessComponentNamespace}.${self.tag.replace('bs-', '')};\n`;
         }
-        else if (self.toHump(self.tag) === 'lcapLogin' || self.staticClass === 'login-form') { // 登录组件不翻译
-            code += `${self.name}: nasl.ui.div<any>;\n`;
-        }
-        else if (self.tag === 'u-table-view-column-dynamic') {
-            code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<any, any>;\n`;
-        }
-        else if (Object.keys(View__1.PAGE_COMPONENT_INCLUDE_TAG_MAP).includes(self.tag)) {
-            if (self.bindAttrs?.findIndex((attr) => attr.name === 'data-source') > -1) {
-                code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<__elements_completionProperty['${self.name}']['dataSource']>;\n`;
-            }
-            else {
-                code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<any>;\n`;
+        else if (self.toHump(self.tag) === 'lcapLogin' || self.staticClass === 'login-form') {
+            // 登录组件不翻译
+            code += `${self.name}: nasl.ui.Div;\n`;
+        }
+        else if (config_1.config?.allNodesAPI[self.tag]) {
+            const { T, V, P, M, T1, C, genericTypes } = this.getGenericTypes(self.tag);
+            code += `${self.name}: nasl.ui.${utils.kebab2Pascal(self.tag)}`;
+            if (genericTypes.length > 0) {
+                code += `<`;
+                code += genericTypes.map((i) => `typeof __elementsRef.${self.name}.${i}`).join(', ');
+                code += `>`;
             }
+            code += ';\n';
         }
         else {
-            code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<any>;\n`;
+            code += `${self.name}: nasl.ui.${utils.kebab2Pascal(self.tag)};\n`;
         }
         if (Array.isArray(self.children)) {
             yield* (0, time_slicing_1.wrapForEachToGenerator)(self.children, function* warpForEachGenerator(element) {
@@ -1013,119 +903,161 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         return code;
     }
-    *toEmbeddedTSVariableDefinition(state = (0, translator_1.createCompilerState)(), variableList, nameLevel) {
+    toEmbeddedTSRefPath(elementsPathMap) {
         const self = this;
-        let code = '';
-        let currentLevel = nameLevel ? `${nameLevel}?.` : '';
-        currentLevel += `${self.name}?.()`;
-        if (View__1.PAGE_COMPONENT_INCLUDE_TAG_MAP?.[self.tag]) {
-            code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-            code += `${self.name}: {\n`;
-            if (Array.isArray(self.bindAttrs)) {
-                yield* (0, time_slicing_1.wrapForEachToGenerator)(self.bindAttrs.filter((attr) => View__1.PAGE_COMPONENT_INCLUDE_TAG_MAP[self.tag]?.[attr.name]), function* warpForEachGenerator(attr) {
-                    code += yield* attr.toEmbeddedTSVariableDefinition((0, translator_1.shiftState)(state, code, { inline: true }), variableList, self.name, currentLevel);
-                });
-                if (['u-select', 'van-pickerson'].includes(self.tag)) {
-                    code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                    code += `pageNumber: nasl.core.Long\n`;
-                    code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                    code += `filterText: nasl.core.String\n`;
-                }
-                else if (['u-list-view', 'u-grid-view', 'u-table-view', 'van-list-view', 'van-grid-view'].includes(self.tag) &&
-                    self.bindAttrs?.findIndex((attr) => attr.name === 'sorting') === -1) {
-                    if (['u-list-view', 'van-grid-view', 'van-list-view'].includes(self.tag)) {
-                        code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                        code += `filterText: nasl.core.String\n`;
-                    }
-                    code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                    code += `sorting: {
-                      field: nasl.core.String
-                      order: nasl.core.String
-                  }\n`;
-                }
-                else if (['u-cascader', 'van-cascader'].includes(self.tag)) {
-                    code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                    code += `filterText: nasl.core.String\n`;
-                }
-            }
-            code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-            code += `};\n`;
+        if (asserts.isViewElement(self.parentNode)) {
+            elementsPathMap[self.name] = `${elementsPathMap[self.parentNode.name]}.${self.name}`;
+        }
+        else {
+            elementsPathMap[self.name] = `${self.name}`;
         }
         if (Array.isArray(self.children)) {
-            yield* (0, time_slicing_1.wrapForEachToGenerator)(self.children, function* warpForEachGenerator(element) {
-                code += yield* element.toEmbeddedTSVariableDefinition((0, translator_1.shiftState)(state, code), variableList, currentLevel);
+            self.children.forEach((element) => {
+                element.toEmbeddedTSRefPath(elementsPathMap);
             });
         }
-        return code;
     }
-    *toEmbeddedTSVariableFunctionDefinition(state = (0, translator_1.createCompilerState)(), parentLevel) {
+    *toEmbeddedTSRefTree(state = (0, translator_1.createCompilerState)(), options, parentLevel) {
         const self = this;
+        const { elementsPathMap } = options;
+        const { T, V, P, M, T1, C } = this.getGenericTypes(self.tag);
         let code = '';
         code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
         let levelIndex = parentLevel || 0;
         code += `${self.name}: () => {\n`;
-        if (self.tag === 'template' && self.haveScope() && asserts.isViewElement(self.parentNode)) {
-            const currentType = self.parentNode.tag === 'u-table-view-column-dynamic' ? 'CurrentDynamic' : 'Current';
-            const _this = self.parentNode;
-            let genericity = '';
-            if (_this.tag === 'u-table-view-column-dynamic') {
-                genericity += `<${_this.parentNode.__tsVariableDataSourceTypeName}, ${_this.__tsVariableDataSourceTypeName}>`;
+        const getType = (name) => {
+            let t;
+            const attr = self.bindAttrs?.find((attr) => attr.name === name);
+            if (['static', 'string'].includes(attr?.type)) {
+                t = attr.value ? 'true' : 'false';
+            }
+            else if (['dynamic'].includes(attr?.type)) {
+                t = 'nasl.core.Boolean';
             }
             else {
-                let targetNode = _this;
-                while ((!targetNode.__tsVariableDataSourceTypeName || targetNode.__tsVariableDataSourceTypeName === 'any') && asserts.isViewElement(targetNode?.parentNode)) {
-                    targetNode = targetNode.parentNode;
+                t = false;
+            }
+            return t;
+        };
+        const hasDataSource = config_1.config?.allNodesAPI?.[self.tag]?.props?.findIndex((prop) => ['dataSource', 'data-source'].includes(prop.name)) >
+            -1;
+        // 有数据源属性的组件 才需要生成 item
+        if (hasDataSource && T) {
+            const key = T1 ? '__columnItem' : '__item';
+            const dataSourceAttr = self.bindAttrs?.find((attr) => attr.name === 'dataSource');
+            if (dataSourceAttr?.expression) {
+                if (asserts.isMemberExpression(dataSourceAttr.expression) ||
+                    asserts.isIdentifier(dataSourceAttr.expression) ||
+                    asserts.isCallLogic(dataSourceAttr.expression)) {
+                    const value = yield* dataSourceAttr.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code, dataSourceAttr.expression.concept === 'CallLogic'
+                        ? {
+                            tabSize: 4,
+                            inline: true,
+                            noNeedParams: true,
+                        }
+                        : {}));
+                    // 用别的组件的data当数据源
+                    if (dataSourceAttr.expression?.property?.name === 'data' &&
+                        dataSourceAttr.expression?.object?.namespace?.startsWith('elements.')) {
+                        const componentName = dataSourceAttr.expression?.object.name;
+                        const componentPath = elementsPathMap[componentName]?.split('.');
+                        const component = componentPath?.reduce((prev, cur) => {
+                            return `${prev}.children.${cur}()`;
+                        }, 'elementsRefTree()');
+                        if (component) {
+                            code += `let t = ${component}.__item;\n`;
+                            code += `let ${key}: typeof t;\n`;
+                        }
+                        else {
+                            code += `let ${key}: any;\n`;
+                        }
+                    }
+                    else {
+                        code += `let ${key}: nasl.ui.GetItemTypeFromDataSource<typeof ${value}>;\n`;
+                    }
+                }
+                else {
+                    const returnCode = yield* dataSourceAttr.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code));
+                    code += `const _load = () => { return `;
+                    code += returnCode;
+                    code += '};\n';
+                    code += `let ${key}: nasl.ui.GetItemTypeFromDataSource<ReturnType<typeof _load>>;\n`;
                 }
-                genericity += `<${targetNode.__tsVariableDataSourceTypeName ?? 'any'}>`;
             }
-            code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-            code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}${genericity}\n`;
-            levelIndex++;
+            else {
+                code += `let ${key}: any;\n`;
+            }
         }
-        const attr = self.bindAttrs?.find((item) => item.name === 'data-source');
-        if (attr && attr.expression) {
-            const datasourceName = `datasourceName${self.name}`;
-            self.__tsVariableDataSourceTypeName = datasourceName;
-            if (asserts.isMemberExpression(attr.expression) ||
-                asserts.isIdentifier(attr.expression) ||
-                asserts.isCallLogic(attr.expression)) {
-                const extraParams = {
-                    tabSize: 4,
-                    inline: true,
-                    noNeedParams: true,
-                };
-                let value = yield* attr.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code, attr.expression.concept === 'CallLogic' ? extraParams : {}));
-                code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                code += `type ${datasourceName} = nasl.ui.GetItemTypeFromDataSource<typeof ${value}>;\n`;
-                // code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}<nasl.ui.GetItemTypeFromDataSource<typeof ${value}>>;\n`;
+        // 值
+        let valueType;
+        if (hasDataSource && V && !T1) {
+            const valueFieldAttr = self.bindAttrs?.find((attr) => attr.name === 'valueField');
+            if (['static', 'string'].includes(valueFieldAttr?.type)) {
+                valueType = `typeof __item.${valueFieldAttr.value}`;
             }
             else {
-                code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                code += `const __funcName = () => { return `;
-                code += yield* attr.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code));
-                code += '};\n';
-                code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                code += `type ${datasourceName} = nasl.ui.GetItemTypeFromDataSource<ReturnType<typeof __funcName>>;\n`;
-                // code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}<nasl.ui.GetItemTypeFromDataSource<ReturnType<typeof __funcName>>>;\n`;
+                valueType = 'any';
             }
         }
-        else {
-            self.__tsVariableDataSourceTypeName = 'any';
+        // 分页
+        let pageableType;
+        if (hasDataSource && P && !T1) {
+            pageableType = getType('pageable');
+            code += `let __pageable: ${pageableType};\n`;
+        }
+        // 多选
+        let multipleType;
+        if (hasDataSource && M && !T1) {
+            multipleType = getType('multiple');
+            code += `let __multiple: ${multipleType};\n`;
+        }
+        if (hasDataSource && V && !T1) {
+            code += `// @ts-ignore
+      let __value: ${valueType}${[true, 'true'].includes(multipleType) ? '[]' : ''};\n`;
+            code += `// @ts-ignore
+      let __V: ${valueType};\n`;
+        }
+        if (C) {
+            // code += `let converter: ${getType('converter')};\n`;
+            code += `let __converter: any;\n`;
+        }
+        if (self.tag === 'template' && self.haveScope() && asserts.isViewElement(self.parentNode)) {
+            const currentType = self.parentNode.tag === 'u-table-view-column-dynamic' ? 'CurrentDynamic' : 'Current';
+            code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
+            code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}<typeof __item${currentType === 'CurrentDynamic' ? ', typeof __columnItem' : ''}>;\n`;
+            levelIndex++;
         }
         code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
         code += `return {\n`;
-        if (Array.isArray(self.bindAttrs)) {
-            yield* (0, time_slicing_1.wrapForEachToGenerator)(self.bindAttrs.filter((attr) => View__1.PAGE_COMPONENT_INCLUDE_TAG_MAP[self.tag]?.[attr.name]), function* warpForEachGenerator(attr) {
-                code += yield* attr.toEmbeddedTSVariableFunctionDefinition((0, translator_1.shiftState)(state, code, { inline: true }));
-            });
+        if (T) {
+            code += `__item,\n`;
+        }
+        if (V) {
+            code += `__value, __V,\n`;
+        }
+        if (P) {
+            code += `__pageable,\n`;
+        }
+        if (M) {
+            code += `__multiple,\n`;
+        }
+        if (T1) {
+            code += `__columnItem,\n`;
+        }
+        if (C) {
+            code += `__converter,\n`;
         }
         if (Array.isArray(self.children)) {
+            code += (0, translator_1.indent)((state?.tabSize || 0) + 4);
+            code += `children: {\n`;
             yield* (0, time_slicing_1.wrapForEachToGenerator)(self.children, function* warpForEachGenerator(element) {
-                code += yield* element.toEmbeddedTSVariableFunctionDefinition((0, translator_1.shiftState)({ ...state, tabSize: state.tabSize + 2 }, code), levelIndex);
+                code += yield* element.toEmbeddedTSRefTree((0, translator_1.shiftState)({ ...state, tabSize: state.tabSize + 2 }, code), { elementsPathMap }, levelIndex);
             });
+            code += (0, translator_1.indent)((state?.tabSize || 0) + 4);
+            code += `},\n`;
         }
         code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-        code += `}\n`;
+        code += `};\n`;
         code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
         code += `},\n`;
         return code;
@@ -1157,7 +1089,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         const bindAttrs = this.bindAttrs;
         if (bindAttrs && bindAttrs.length) {
-            const attr = bindAttrs.find((item) => item.name === 'data-source');
+            const attr = bindAttrs.find((item) => item.name === 'dataSource');
             if (attr && attr.expression) {
                 if (this.tag === 'u-table-view-column-dynamic') {
                     code += `<${this.parentNode.__tsDataSourceTypeName}, ${this.__tsDataSourceTypeName}>`;
@@ -1169,12 +1101,13 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         return code;
     }
+    // 应该没有再使用了
     *getDatasourceTypeCodeStr(state, eleArr) {
         let code = '';
         yield* (0, time_slicing_1.wrapForEachToGenerator)(eleArr ?? [], function* wrapForEach(element, index) {
             const bindAttrs = element.bindAttrs;
             if (bindAttrs && bindAttrs.length) {
-                const attr = bindAttrs.find((item) => item.name === 'data-source');
+                const attr = bindAttrs.find((item) => item.name === 'dataSource');
                 if (attr && attr.expression) {
                     const datasourceName = `datasourceName${element.name}`;
                     element.__tsDataSourceTypeName = datasourceName;
@@ -1185,8 +1118,9 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                             tabSize: 4,
                             inline: true,
                             noNeedParams: true,
+                            callLogicNoIife: true,
                         };
-                        let value = yield* attr.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code, attr.expression.concept === 'CallLogic' ? extraParams : {}));
+                        const value = yield* attr.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code, attr.expression.concept === 'CallLogic' ? extraParams : {}));
                         code += `type ${datasourceName} = `;
                         code += `nasl.ui.GetItemTypeFromDataSource<typeof ${value}>;\n`;
                     }
@@ -1227,6 +1161,26 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             return businessComponent;
         }
     }
+    // 收集页面元素中的业务组件
+    collectExistingBusinessComponent() {
+        const excludedSet = new Set();
+        utils.traverse(({ node }) => {
+            const correspondingBusinessComponent = node.correspondingBusinessComponent;
+            if (correspondingBusinessComponent && !excludedSet.has(correspondingBusinessComponent)) {
+                const set = correspondingBusinessComponent.collectExistingBusinessComponent();
+                if (set.size) {
+                    set.forEach((value) => {
+                        if (!excludedSet.has(value)) {
+                            excludedSet.add(value);
+                        }
+                    });
+                }
+            }
+        }, {
+            node: this,
+        });
+        return excludedSet;
+    }
     *toEmbeddedTS(state = (0, translator_1.createCompilerState)(), parentLevel) {
         const self = this;
         const { parentNode, app, tag, staticClass, name, bindRoles, bindEvents, children } = self;
@@ -1248,7 +1202,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         // pc事件翻译
         if (self.toHump(tag) === 'lcapLogin') {
-            let code = `new nasl.ui.div({name: __elements.${self.name},\n`;
+            let code = `new nasl.ui.Div({_name: __elements.${self.name},\n`;
             // 事件
             if (Array.isArray(self.bindEvents)) {
                 yield* (0, time_slicing_1.wrapForEachToGenerator)(self.bindEvents, function* warpForEachGenerator(event) {
@@ -1262,46 +1216,39 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             return code;
         }
         let levelIndex = parentLevel || 0;
-        if (tag === 'template' && self.haveScope()) {
-            const slotTarget = !self.slotTarget ? 'slotDefault' : 'slot' + self.toFirstUpper(self.toHump(self.slotTarget));
+        if (tag === 'template') {
+            const hasScope = self.haveScope();
+            const slotTarget = !self.slotTarget ? 'slotDefault' : `slot${self.toFirstUpper(self.toHump(self.slotTarget))}`;
             let code = '';
-            code += `${slotTarget}: (current${levelIndex === 0 ? '' : levelIndex})=> {\n`;
-            code += yield* self.getDatasourceTypeCodeStr(state, self.children);
-            levelIndex++;
-            code += 'return [';
-            yield* (0, time_slicing_1.wrapForEachToGenerator)(self.children, function* warpForEachGenerator(element) {
-                code += yield* element.toEmbeddedTS((0, translator_1.shiftState)(state, code, {
-                    tabSize: state?.tabSize || 0,
-                }), levelIndex);
-            });
-            code += ']';
-            code += '\n';
-            code += '},\n';
-            return code;
-        }
-        else if (tag === 'template') {
-            const slotTarget = !self.slotTarget ? 'slotDefault' : 'slot' + self.toFirstUpper(self.toHump(self.slotTarget));
-            let code = '';
-            code += `${slotTarget}: ()=> {\n`;
-            code += yield* self.getDatasourceTypeCodeStr(state, self.children);
-            code += 'return [';
+            if (hasScope) {
+                code += `${slotTarget}: (current${levelIndex === 0 ? '' : levelIndex}) => [\n`;
+                levelIndex++;
+            }
+            else {
+                code += `${slotTarget}: () => [\n`;
+            }
             yield* (0, time_slicing_1.wrapForEachToGenerator)(self.children, function* warpForEachGenerator(element) {
                 code += yield* element.toEmbeddedTS((0, translator_1.shiftState)(state, code, {
                     tabSize: state?.tabSize || 0,
                 }), levelIndex);
             });
             code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-            code += ']';
-            code += '\n';
-            code += '},\n';
+            code += '\n],\n';
             return code;
         }
-        let namespace = `nasl.ui.${self.toHump(tag)}`;
+        let namespace = `nasl.ui.${utils.kebab2Pascal(tag)}`;
         if (self.isCorrespondingBusinessComponent) {
             namespace = `${self.correspondingBusinessComponentNamespace}.${self.tag.replace('bs-', '')}`;
         }
-        // 后面那个name是为了查找引用的时候用的
-        let code = `new ${namespace}${self.getTypeArgmentsStr(state)}({name: __elements.${name},\n`;
+        const { T, V, P, M, T1, C, genericTypes } = this.getGenericTypes(self.tag);
+        let code = `new ${namespace}`;
+        if (genericTypes.length > 0) {
+            code += `<`;
+            code += genericTypes.map((i) => `typeof __elementsRef.${self.name}.${i}`).join(', ');
+            code += `>`;
+        }
+        // 增加唯一name 后面那个name是为了查找引用的时候用的
+        code += `({_name: __elements.${self.name},\n`;
         // 是否开启权限
         // const hasAuth = Array.isArray(bindDirectives)
         //     ? !!bindDirectives.filter((directive) => directive.name === 'auth').length
@@ -1331,34 +1278,49 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         if (Array.isArray(children)) {
             code += (0, translator_1.indent)((state?.tabSize || 0) + 1);
             if (Array.isArray(self.bindAttrs)) {
-                code += `bindAttr: `;
-                if (self.isCorrespondingBusinessComponent) {
-                    code += `{\n`;
-                }
-                else {
-                    code += `() => [\n`;
-                }
-                yield* (0, time_slicing_1.wrapForEachToGenerator)(self.bindAttrs, function* warpForEachGenerator(attr) {
-                    // 过滤自由布局的key
-                    const shouldFilter = self.isCorrespondingBusinessComponent && (attr.name === 'key' && !attr.expression);
+                // 属性
+                const validAttrs = self.bindAttrs.filter((attr) => {
+                    // 特殊的一些属性不过滤
+                    if (['destination', 'externalDestination', 'rules', 'url'].includes(attr.name)) {
+                        return true;
+                    }
+                    const com = config_1.config.allNodesAPI[self.tag];
+                    if (com) {
+                        const { props } = com;
+                        const prop = props?.find((item) => item.name === attr.name);
+                        if (prop) {
+                            return true;
+                        }
+                        return false;
+                    }
+                    return true;
+                });
+                yield* (0, time_slicing_1.wrapForEachToGenerator)(validAttrs, function* warpForEachGenerator(attr) {
+                    // 过滤业务组件的非表达式模式的翻译
+                    const shouldFilter = self.isCorrespondingBusinessComponent && attr.type !== 'dynamic';
                     if (shouldFilter) {
                         return;
                     }
-                    code += (yield* attr.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 }))) + ',\n';
+                    const propCode = yield* attr.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 }));
+                    if (propCode.trim()) {
+                        code += `${propCode},\n`;
+                    }
                 });
+                // 指令v-if等
                 yield* (0, time_slicing_1.wrapForEachToGenerator)(self.bindDirectives, function* warpForEachGenerator(directive) {
-                    code += (yield* directive.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 }))) + ',\n';
+                    const directiveCode = yield* directive.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 }));
+                    if (directiveCode.trim()) {
+                        code += `${directiveCode},\n`;
+                    }
                 });
+                // 样式绑定
                 yield* (0, time_slicing_1.wrapForEachToGenerator)(self.bindStyles, function* warpForEachGenerator(bindStyle) {
-                    code += (yield* bindStyle.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 }))) + ',\n';
+                    const styleCode = yield* bindStyle.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 }));
+                    if (styleCode.trim()) {
+                        code += `${styleCode},\n`;
+                    }
                 });
                 code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-                if (self.isCorrespondingBusinessComponent) {
-                    code += '},\n';
-                }
-                else {
-                    code += '],\n';
-                }
             }
             // 如果子集中有插槽的就
             if (children.find((item) => item.tag === 'template' && item.slotTarget)) {
@@ -1378,9 +1340,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 // 翻译其余的子集
                 if (defaultArr.length) {
                     code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-                    code += `slotDefault: ()=> {\n`;
-                    code += yield* self.getDatasourceTypeCodeStr(state, defaultArr);
-                    code += 'return [';
+                    code += `slotDefault: () => [\n`;
                     yield* (0, time_slicing_1.wrapForEachToGenerator)(defaultArr, function* warpForEachGenerator(element) {
                         code += yield* element.toEmbeddedTS((0, translator_1.shiftState)(state, code, {
                             tabSize: (state?.tabSize || 0) + 2,
@@ -1388,16 +1348,13 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                         code += '\n';
                     });
                     code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-                    code += ']\n';
                     code += (0, translator_1.indent)((state?.tabSize || 0) + 1);
-                    code += '}\n';
+                    code += ']\n';
                 }
             }
-            else {
+            else if (children?.length) {
                 code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-                code += `slotDefault: ()=> {\n`;
-                code += yield* self.getDatasourceTypeCodeStr(state, children);
-                code += 'return [';
+                code += `slotDefault: () => [\n`;
                 yield* (0, time_slicing_1.wrapForEachToGenerator)(children, function* warpForEachGenerator(element) {
                     code += yield* element.toEmbeddedTS((0, translator_1.shiftState)(state, code, {
                         tabSize: (state?.tabSize || 0) + 2,
@@ -1405,9 +1362,8 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                     code += '\n';
                 });
                 code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-                code += ']\n';
                 code += (0, translator_1.indent)((state?.tabSize || 0) + 1);
-                code += '}\n';
+                code += ']\n';
             }
         }
         code += (0, translator_1.indent)(state?.tabSize || 0) + '})';
@@ -1660,6 +1616,11 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 slotScope: astNode.slotScope === '_empty_' ? '' : astNode.slotScope,
                 children: astNode.children.map((item) => this._fromASTNode(item, newContext)),
             });
+            const attrName2Camel = (name) => {
+                if (name.startsWith('vusion-'))
+                    return name;
+                return name.replace(/(?:v-)([a-zA-Z0-9])/g, (m, $1) => $1.toUpperCase());
+            };
             astNode?.attrs?.forEach((oldAttr) => {
                 let attr;
                 // 获取原始属性
@@ -1667,7 +1628,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 if (oldAttr.value === '""' && orginAttrCode.trim() === oldAttr.name) {
                     attr = new BindAttribute({
                         type: 'static',
-                        name: oldAttr.name,
+                        name: attrName2Camel(oldAttr.name),
                         value: 'true',
                     });
                 }
@@ -1676,13 +1637,25 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                         const tmp = json5.parse(oldAttr.value);
                         const source = {
                             type: typeof tmp === 'string' ? 'string' : 'static',
-                            name: oldAttr.name,
+                            name: attrName2Camel(oldAttr.name),
                             value: typeof tmp === 'string' ? tmp : oldAttr.value,
                         };
                         if (oldAttr.name === 'rules') {
-                            source.rules = tmp?.split('|').map((ruleStr) => this._parseValidationRule(ruleStr.trim()));
+                            if (Array.isArray(tmp)) {
+                                source.rules = tmp.map((rule) => ({
+                                    concept: 'ValidationRule',
+                                    name: '',
+                                    label: '验证规则',
+                                    calleeNamespace: 'nasl.validation',
+                                    arguments: [],
+                                    calleeName: rule?.validate,
+                                }));
+                            }
+                            else {
+                                source.rules = tmp?.split('|').map((ruleStr) => this._parseValidationRule(ruleStr.trim()));
+                            }
                         }
-                        else if (['page-number', 'page-size'].includes(oldAttr.name)) {
+                        else if (['page-number', 'page-size', 'pageNumber', 'pageSize'].includes(oldAttr.name)) {
                             source.value = Number(source.value);
                         }
                         attr = new BindAttribute(source);
@@ -1691,7 +1664,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                         const expression = this._parseExpression(oldAttr.value);
                         attr = new BindAttribute({
                             type: 'dynamic',
-                            name: oldAttr.name,
+                            name: attrName2Camel(oldAttr.name),
                             value: expression ? '' : oldAttr.value,
                             expression,
                         });
@@ -1847,12 +1820,12 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 if (attr.concept === 'BindAttribute' &&
                     !['href', 'destination', 'externalDestination', 'download'].includes(attr.name)) {
                     const api = config_1.config?.allNodesAPI?.[element.tag];
-                    const apiOfAttr = api && api.attrs && api.attrs.find((_attr) => _attr.name === attr.name);
+                    const apiOfAttr = api && api.props && api.props.find((_attr) => _attr.name === attr.name);
                     if (['u-form-item', 'u-validator', 'van-field'].includes(element.tag) && attr.name === 'rules') {
                         return `${attr.name}=""`;
                     }
-                    if (apiOfAttr && apiOfAttr['designer-value'] !== undefined) {
-                        let designerValue = apiOfAttr['designer-value'];
+                    if (apiOfAttr && apiOfAttr['designerValue'] !== undefined) {
+                        let designerValue = apiOfAttr['designerValue'];
                         //对流程模板拖拽进行特判
                         element.bindAttrs.forEach((property) => {
                             if (property.name === 'repeat' && property.value === '1')
@@ -1862,6 +1835,9 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                             designerValue = designerValue.replace(/"/g, "'");
                         }
                         try {
+                            if (Array.isArray(designerValue)) {
+                                return `:${attr.name}="${JSON.stringify(designerValue)}"`;
+                            }
                             json5.parse(designerValue);
                             return `:${attr.name}="${designerValue}"`;
                         }
@@ -1886,7 +1862,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                                 }
                             }
                             catch (e) {
-                                if (apiOfAttr && !apiOfAttr.type.includes('string'))
+                                if (apiOfAttr && apiOfAttr.tsType && !apiOfAttr.tsType.includes('nasl.core.String'))
                                     return '';
                             }
                             value = value
@@ -1911,7 +1887,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             getExtraParts: (el) => {
                 const parts = [];
                 const api = config_1.config?.allNodesAPI?.[el?.tag];
-                const emptySlot = api && api.slots && api.slots.find((slot) => slot.name === 'default' && slot['empty-background']);
+                const emptySlot = api && api.slots && api.slots.find((slot) => slot.name === 'default' && slot['emptyBackground']);
                 const hasSupport = api && api.slots && api.slots.some((slot) => slot.support);
                 if (emptySlot || hasSupport) {
                     // 有些限制的组件如侧边栏分组有title插槽但要限制子元素放入
@@ -1924,7 +1900,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                     if (childEmpty) {
                         let addEmpty = true;
                         if (['u-grid-view', 'u-list-view', 'van-list-view', 'van-grid-view', 'u-carousel'].includes(el.tag)) {
-                            const hasDataSource = el.bindAttrs.find((attr) => attr.name === 'data-source');
+                            const hasDataSource = el.bindAttrs.find((attr) => attr.name === 'dataSource');
                             addEmpty = !hasDataSource;
                         }
                         if (el.tag === 'u-crumb') {
@@ -1950,7 +1926,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                         ].includes(el.tag)) {
                             addEmpty = false;
                         }
-                        const background = (emptySlot && emptySlot['empty-background']) || (hasSupport ? 'add-sub' : '');
+                        const background = (emptySlot && emptySlot['emptyBackground']) || (hasSupport ? 'add-sub' : '');
                         addEmpty && parts.push(`vusion-empty-background="${background}"`);
                     }
                 }
@@ -2022,51 +1998,6 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         const { finalCode, asCompontent } = options || {};
         const parts = [];
         if (finalCode === false) {
-            if (this.tag === 'slot') {
-                if (asCompontent) {
-                    return `<div vusion-slot-name="${this.name}">
-            <slot name="${this.name}">
-              <div s-empty="true" bs-empty="true" style="background: #f7f8fa;
-                border: 1px dashed #c3c3c3;
-                text-align: center;
-                color: #999;
-                min-height: 32px;
-                min-width: 32px;
-                width: 100%;
-                align-items: center;
-                display: inline-flex;
-                justify-content: center;">
-                +
-              </div>
-            </slot>
-          </div>`;
-                }
-                else {
-                    return `<div vusion-node-path="${this.nodePath}"
-            style="background: linear-gradient(-45deg,#fff 25%,#f3f5fa 0,#f3f5fa 50%,#fff 0,#fff 75%,#f3f5fa 0);
-            background-size: 45px 45px;
-            background-repeat: repeat;
-            line-height: 32px;
-            min-height: 32px;
-            color: var(--font-second-color);
-            text-align: center;">
-            组件占位，可在使用业务组件时插入任意组件
-          </div>`;
-                }
-            }
-            else if (this.businessComponent?.name === this.tag) {
-                // 组件内部使用自身的情况
-                return `<div vusion-node-path="${this.nodePath}"
-          style="background: linear-gradient(-45deg,#fff 25%,#f3f5fa 0,#f3f5fa 50%,#fff 0,#fff 75%,#f3f5fa 0);
-          background-size: 45px 45px;
-          background-repeat: repeat;
-          line-height: 32px;
-          min-height: 32px;
-          color: var(--font-second-color);
-          text-align: center;">
-          在组件内部使用自身可能会导致循环引用，请谨慎使用
-        </div>`;
-            }
             const isRoot = options.isRoot;
             if (isRoot && !options?.asCompontent) {
                 parts.push('type="root"');
@@ -2110,7 +2041,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         const tabString = ' '.repeat(newOptions.tabSize * newOptions.indentLevel);
         const insideTabString = ' '.repeat(newOptions.tabSize * (newOptions.indentLevel + 1));
         let shouldIndent = true;
-        const content = !this.children
+        let content = !this.children
             ? ''
             : this.children
                 .map((element) => {
@@ -2119,9 +2050,6 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 return (shouldIndent ? '\n' + insideTabString : '') + element?.toVue(childOptions);
             })
                 .join('');
-        if (!content.length) {
-            shouldIndent = false;
-        }
         if (newOptions.aslIdAttr) {
             if (newOptions.aslIdAttr === true) {
                 newOptions.aslIdAttr = 'asl-id';
@@ -2141,7 +2069,6 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         this.refName && parts.push(`:ref="\`${this.refName}\`"`);
         this.keyName && parts.push(`:key="\`${this.keyName}\`"`);
         this.staticClass && parts.push(`class="${this.staticClass}"`);
-        this.staticStyle && parts.push(`style="${this.staticStyle}"`);
         const vIfs = [];
         []
             .concat(this.bindAttrs, this.bindDirectives, this.bindEvents)
@@ -2176,8 +2103,45 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             ['u-table-view', 'u-list-view', 'u-grid-view', 'u-list-components', 'u-form', 'u-select'].includes(this.tag)) {
             this.name && parts.push(`key="${this.name}"`);
         }
+        let tag = this.tag;
+        let staticStyle = this.staticStyle ?? '';
         if (this.tag === 'slot') {
             this.name && parts.push(`name="${this.name}"`);
+            if (finalCode === false) {
+                tag = 'div';
+                if (asCompontent) {
+                    parts.push(`vusion-slot-name="${this.name}"`);
+                    content = `<slot name="${this.name}">
+          <div s-empty="true" bs-empty="true" style="background: #f7f8fa;
+            border: 1px dashed #c3c3c3;
+            text-align: center;
+            color: #999;
+            min-height: 32px;
+            min-width: 32px;
+            width: 100%;
+            align-items: center;
+            display: inline-flex;
+            justify-content: center;">
+            +
+          </div>
+        </slot>`;
+                }
+                else {
+                    parts.push(`vusion-node-path="${this.nodePath}"`);
+                    content = `组件占位，可在使用业务组件时插入任意组件`;
+                    staticStyle += `background: linear-gradient(-45deg,#fff 25%,#f3f5fa 0,#f3f5fa 50%,#fff 0,#fff 75%,#f3f5fa 0);
+              background-size: 45px 45px;
+              background-repeat: repeat;
+              line-height: 32px;
+              min-height: 32px;
+              color: var(--font-second-color);
+              text-align: center;`;
+                }
+            }
+        }
+        staticStyle && parts.push(`style="${staticStyle}"`);
+        if (!content.length) {
+            shouldIndent = false;
         }
         let partsLength = 0;
         let partsString = '';
@@ -2189,12 +2153,12 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             partsString += ' ' + part;
             partsLength += part.length;
         });
-        let htmlContent = `<${this.tag}${partsString.length ? partsString : ''}>` +
+        let htmlContent = `<${tag}${partsString.length ? partsString : ''}>` +
             content +
             (shouldIndent ? '\n' + tabString : '') +
-            `</${this.tag}>`;
-        if (!content.trim() && selfClosingTag.includes(this.tag)) {
-            htmlContent = `<${this.tag}${partsString.length ? partsString : ''} />`;
+            `</${tag}>`;
+        if (!content.trim() && selfClosingTag.includes(tag)) {
+            htmlContent = `<${tag}${partsString.length ? partsString : ''} />`;
         }
         return htmlContent;
     }
@@ -2379,6 +2343,11 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
 };
 /** 类名 */
 ViewElement.ConceptName = 'ViewElement';
+/**
+ * 是否为抽象类
+ * 抽象类不能产生 concept: string
+ */
+ViewElement.isAbstract = false;
 /** 继承链 */
 ViewElement.inheritanceChain = ['BaseNode'];
 ViewElement.TAG_NAME_PREFIX_REG = /^([lieu]|van)[-_]/;
@@ -2386,28 +2355,44 @@ __decorate([
     (0, decorators_1.property)('concept')
 ], ViewElement.prototype, "concept", void 0);
 __decorate([
-    (0, decorators_1.property)()
+    (0, decorators_1.property)({
+        objectRef: '',
+    })
 ], ViewElement.prototype, "type", void 0);
 __decorate([
-    (0, decorators_1.property)()
+    (0, decorators_1.property)({
+        objectRef: '',
+    })
 ], ViewElement.prototype, "tag", void 0);
 __decorate([
-    (0, decorators_1.property)()
+    (0, decorators_1.property)({
+        objectRef: '',
+    })
 ], ViewElement.prototype, "name", void 0);
 __decorate([
-    (0, decorators_1.property)()
+    (0, decorators_1.property)({
+        objectRef: '',
+    })
 ], ViewElement.prototype, "staticClass", void 0);
 __decorate([
-    (0, decorators_1.property)()
+    (0, decorators_1.property)({
+        objectRef: '',
+    })
 ], ViewElement.prototype, "staticStyle", void 0);
 __decorate([
-    (0, decorators_1.property)()
+    (0, decorators_1.property)({
+        objectRef: '',
+    })
 ], ViewElement.prototype, "authDescription", void 0);
 __decorate([
-    (0, decorators_1.property)()
+    (0, decorators_1.property)({
+        objectRef: '',
+    })
 ], ViewElement.prototype, "slotTarget", void 0);
 __decorate([
-    (0, decorators_1.property)()
+    (0, decorators_1.property)({
+        objectRef: '',
+    })
 ], ViewElement.prototype, "slotScope", void 0);
 __decorate([
     (0, decorators_1.property)({
@@ -2432,6 +2417,7 @@ __decorate([
 ], ViewElement.prototype, "bindDirectives", void 0);
 __decorate([
     (0, decorators_1.property)({
+        objectRef: '',
         isArray: true,
         defaultValue: [],
     })
@@ -2455,10 +2441,7 @@ __decorate([
 ], ViewElement.prototype, "toEmbeddedTSDefinition", null);
 __decorate([
     translator_1.withGenerator
-], ViewElement.prototype, "toEmbeddedTSVariableDefinition", null);
-__decorate([
-    translator_1.withGenerator
-], ViewElement.prototype, "toEmbeddedTSVariableFunctionDefinition", null);
+], ViewElement.prototype, "toEmbeddedTSRefTree", null);
 __decorate([
     translator_1.withSourceMapGenerator
 ], ViewElement.prototype, "toEmbeddedTS", null);