@lcap/nasl 1.0.0-alpha.9 → 1.0.2

package/out/concepts/ViewElement__.js

@@ -65,38 +65,62 @@ function genArgumentMemberExpression(arr) {
     }
     return expressionNode;
 }
-function transAstNodeToNaslNode(astNode) {
+function transAstNodeToNaslNode(astNode, namespace) {
     let node = null;
     if (astNode.type === 'CallExpression' && astNode.callee.object.name === '$utils') {
         const calleeName = astNode.callee.property.name || astNode.callee.property.value;
-        node = {
-            concept: 'CallFunction',
-            name: '',
-            label: '调用逻辑',
-            kind: 'Expression',
-            calleeNamespace: 'nasl.util',
-            calleeName,
-            arguments: astNode.arguments.map((argument) => ({
-                concept: 'Argument',
+        if (calleeName === 'EnumList') {
+            const args = astNode.arguments;
+            let name = '';
+            let namespace = 'app.enums';
+            if (Array.isArray(args)) {
+                name = args[0]?.value;
+                namespace = args[1]?.value ? args[1]?.value : 'app.enums';
+            }
+            node = {
+                concept: 'Identifier',
+                name,
+                namespace,
+                kind: 'Expression',
+            };
+        }
+        else {
+            node = {
+                concept: 'CallFunction',
                 name: '',
-                kind: 'Statement',
-                keyword: '',
-                expression: transAstNodeToNaslNode(Object.assign({}, argument)),
-            })),
-        };
+                label: '调用内置函数',
+                kind: 'Expression',
+                calleeNamespace: 'nasl.util',
+                calleeName,
+                arguments: astNode.arguments.map((argument) => ({
+                    concept: 'Argument',
+                    name: '',
+                    kind: 'Statement',
+                    keyword: '',
+                    expression: transAstNodeToNaslNode(Object.assign({}, argument)),
+                })),
+            };
+        }
     }
     else if (astNode.type === 'MemberExpression') {
-        node = {
-            concept: 'MemberExpression',
-            name: '',
-            kind: 'Expression',
-            object: transAstNodeToNaslNode(astNode.object),
-            property: transAstNodeToNaslNode(astNode.property),
-        };
+        if (astNode.object?.name === '$global') {
+            // 目前只有权限相关的
+            node = transAstNodeToNaslNode(astNode.property, 'nasl.auth');
+        }
+        else {
+            node = {
+                concept: 'MemberExpression',
+                name: '',
+                kind: 'Expression',
+                object: transAstNodeToNaslNode(astNode.object),
+                property: transAstNodeToNaslNode(astNode.property),
+            };
+        }
     }
     else if (astNode.type === 'Identifier') {
         node = {
             concept: 'Identifier',
+            namespace: namespace || '',
             name: astNode.name,
             kind: 'Expression',
         };
@@ -116,6 +140,19 @@ function transAstNodeToNaslNode(astNode) {
             value: astNode.value,
         };
     }
+    else if (astNode.type === 'UnaryExpression') {
+        node = {
+            concept: 'UnaryExpression',
+            kind: 'Expression',
+            name: '',
+            operator: astNode.operator,
+            argument: transAstNodeToNaslNode(astNode.argument),
+        };
+    }
+    else {
+        node = astNode;
+        node.concept = astNode.type;
+    }
     return node;
 }
 const decorators_1 = require("../decorators");
@@ -246,7 +283,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         return (this.bindAttrs || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
     }
     getBindAttributeUniqueName(name = 'bindAttribute1') {
-        return utils.unique(name, this.getBindAttributeExistingNames());
+        return utils.unique(name, this.getBindAttributeExistingNames(), undefined, false);
     }
     _insertBindAttributeAt(options, index) {
         const bindAttributeOptions = {};
@@ -265,7 +302,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             }, this, 'bindAttrs');
         }
         else if (options instanceof BindAttribute__1.default) {
-            options.delete(); // 同一实例不支持多处存在
+            options.ensureDelete(); // 同一实例不支持多处存在
             bindAttribute = options;
             Object.assign(bindAttribute, relationOptions);
         }
@@ -293,7 +330,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     }
     addBindAttribute(options) {
         const node = this._addBindAttribute(options);
-        const index = this.bindAttrs.length;
+        const index = this.bindAttrs.indexOf(node);
         node.create({
             index,
             parentNode: this,
@@ -306,7 +343,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         return (this.bindEvents || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
     }
     getBindEventUniqueName(name = 'bindEvent1') {
-        return utils.unique(name, this.getBindEventExistingNames());
+        return utils.unique(name, this.getBindEventExistingNames(), undefined, false);
     }
     _insertBindEventAt(options, index) {
         const bindEventOptions = {};
@@ -325,7 +362,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             }, this, 'bindEvents');
         }
         else if (options instanceof BindEvent__1.default) {
-            options.delete(); // 同一实例不支持多处存在
+            options.ensureDelete(); // 同一实例不支持多处存在
             bindEvent = options;
             Object.assign(bindEvent, relationOptions);
         }
@@ -353,7 +390,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     }
     addBindEvent(options) {
         const node = this._addBindEvent(options);
-        const index = this.bindEvents.length;
+        const index = this.bindEvents.indexOf(node);
         node.create({
             index,
             parentNode: this,
@@ -366,7 +403,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         return (this.bindDirectives || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
     }
     getBindDirectiveUniqueName(name = 'bindDirective1') {
-        return utils.unique(name, this.getBindDirectiveExistingNames());
+        return utils.unique(name, this.getBindDirectiveExistingNames(), undefined, false);
     }
     _insertBindDirectiveAt(options, index) {
         const bindDirectiveOptions = {};
@@ -385,7 +422,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             }, this, 'bindDirectives');
         }
         else if (options instanceof BindDirective__1.default) {
-            options.delete(); // 同一实例不支持多处存在
+            options.ensureDelete(); // 同一实例不支持多处存在
             bindDirective = options;
             Object.assign(bindDirective, relationOptions);
         }
@@ -413,7 +450,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     }
     addBindDirective(options) {
         const node = this._addBindDirective(options);
-        const index = this.bindDirectives.length;
+        const index = this.bindDirectives.indexOf(node);
         node.create({
             index,
             parentNode: this,
@@ -438,7 +475,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             }, this, 'children');
         }
         else if (options instanceof ViewElement_1) {
-            options.delete(); // 同一实例不支持多处存在
+            options.ensureDelete(); // 同一实例不支持多处存在
             viewElement = options;
             Object.assign(viewElement, relationOptions);
         }
@@ -466,7 +503,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     }
     addViewElement(options) {
         const node = this._addViewElement(options);
-        const index = this.children.length;
+        const index = this.children.indexOf(node);
         node.create({
             index,
             parentNode: this,
@@ -622,6 +659,18 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
     // 自动生成的代码已结束。下面可以手动编写。
     //================================================================================
+    /* 主页面有没有权限 */
+    get parentAuth() {
+        const _nameSpace = this.view.getNamespace();
+        const mainViewName = _nameSpace.split('.')[2];
+        return this.view.parentNode.concept === 'App' ? this.view.auth : this.app.views.find((item) => item.name === mainViewName)?.auth;
+    }
+    /**
+     * 权限领域的资源路径
+     */
+    get authPath() {
+        return `${this.view.path}/${this.name}`;
+    }
     getViewElementUniqueName(name = 'viewElement1') {
         return this.view?.getViewElementUniqueName(name);
     }
@@ -648,43 +697,24 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     getBindAttribute(name) {
         return this.bindAttrs.find((bindAttr) => bindAttr.name === name);
     }
-    /**
-     * 角色
-     */
-    roles = [];
-    toggleRole(role) {
-        const index = this.roles.findIndex((roleItem) => roleItem.name === role.name);
-        const roles = [...this.roles];
-        if (index !== -1) {
-            roles.splice(index, 1);
-        }
-        else {
-            roles.push({
-                namespace: role.getNamespace(),
-                name: role.name,
-            });
-        }
-        const object = {
-            roles,
-        };
-        this.update({
-            ...object,
-        });
-    }
     toHump(name) {
         return name.replace(/\-(\w)/g, (all, letter) => letter.toUpperCase());
     }
     haveScope(node) {
-        const dataSourcePcList = ['uGallery', 'uTableView', 'uListView', 'uGridView', 'uCalendarView', 'uListComponents', 'uSelect'];
-        const dataSourceH5List = ['vanListView', 'vanForComponents', 'lcapEchartsLine', 'lcapEchartsBar', 'lcapEchartsPie'];
+        // uGallery 没有子集不需要scope
+        const dataSourcePcList = ['uTableView', 'uListView', 'uGridView', 'uCalendarView', 'uListComponents', 'uSelect', 'devopsDragTable'];
+        const dataSourceH5List = ['vanRadioGroup', 'vanCheckboxGroup', 'vanListView', 'vanGridView', 'vanForComponents', 'lcapEchartsLine', 'lcapEchartsBar', 'lcapEchartsPie'];
         const dataSourceList = [...dataSourcePcList, ...dataSourceH5List];
         return dataSourceList.includes(node.toHump(node.tag));
     }
     toEmbeddedTSDefinition(state) {
+        // 登录组件不翻译
+        if (this.toHump(this.tag) === 'lcapLogin' || this.staticClass === 'login-form')
+            return '';
         let code = '';
         // formItem的单独处理
         if (this.tag === 'u-form-item') {
-            code = (0, translator_1.indent)(state.tabSize) + `${this.name}: <nasl.ui.${this.toHump(this.tag)}`;
+            code = (0, translator_1.indent)(state.tabSize) + `${this.name}: nasl.ui.${this.toHump(this.tag)}`;
             if (Array.isArray(this.children) && this.children.length) {
                 const tag = this.children[0].tag;
                 if (tag === 'u-input') {
@@ -697,7 +727,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                     code += '<nasl.core.Any>';
                 }
             }
-            code += '> null,\n';
+            code += ';\n';
         }
         if (this.haveScope(this)) {
             let genericType = 'any';
@@ -714,9 +744,13 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                         let parentNode = this.parentNode;
                         let haveScopeFlag = false;
                         while (!haveScopeFlag && parentNode.concept !== 'View') {
-                            if (this.haveScope((parentNode))) {
+                            if (this.haveScope(parentNode)) {
                                 // type d = nasl.ui.GetItemTypeFromDataSource<typeof listStructure>['tableRelation']
-                                const tsArr = expressionTs.split('.');
+                                const tsArr = expressionTs.replace('scope.item.', '').split('.');
+                                let itemStr = '';
+                                tsArr.forEach((item) => {
+                                    itemStr += `['${item}']`;
+                                });
                                 const parentbindAttrs = parentNode.bindAttrs;
                                 if (parentbindAttrs && parentbindAttrs.length) {
                                     const parentAttr = parentbindAttrs.find((item) => item.name === 'data-source');
@@ -724,7 +758,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                                         let parentExpressionTs = parentAttr.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code));
                                         parentExpressionTs = parentExpressionTs.replaceAll(' ', '');
                                         // 如果是逻辑就推导出逻辑类型
-                                        genericType = `nasl.ui.GetItemTypeFromDataSource<nasl.ui.GetItemTypeFromDataSource<typeof ${parentExpressionTs}>['${tsArr[tsArr.length - 1]}']>`;
+                                        genericType = `nasl.ui.GetItemTypeFromDataSource<nasl.ui.GetItemTypeFromDataSource<typeof ${parentExpressionTs}>${itemStr}>`;
                                     }
                                 }
                                 haveScopeFlag = true;
@@ -734,10 +768,10 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                     }
                 }
             }
-            code += (0, translator_1.indent)(state.tabSize) + `${this.name}: <nasl.ui.${this.toHump(this.tag)}<${genericType}>> null,\n`;
+            code += (0, translator_1.indent)(state.tabSize) + `${this.name}: nasl.ui.${this.toHump(this.tag)}<${genericType}>;\n`;
         }
         else {
-            code = (0, translator_1.indent)(state.tabSize) + `${this.name}: <nasl.ui.${this.toHump(this.tag)}<any>> null,\n`;
+            code = (0, translator_1.indent)(state.tabSize) + `${this.name}: nasl.ui.${this.toHump(this.tag)}<any>;\n`;
         }
         if (Array.isArray(this.children)) {
             this.children.forEach((element) => {
@@ -747,13 +781,15 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         return code;
     }
     toEmbeddedTS(state, parentLevel) {
+        if (this.toHump(this.tag) === 'lcapLogin' || this.staticClass === 'login-form')
+            return '';
         function chineseTsName(name) {
             let tsName = name;
+            // 匹配所有特殊字符都转为_
+            tsName = tsName.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '_');
             if (/^\d/.test(tsName)) {
                 tsName = '$' + tsName;
             }
-            // 匹配所有特殊字符都转为_
-            tsName = tsName.replace(/\W/g, '_');
             return tsName;
         }
         let code = `__elements.${this.name} = new nasl.ui.${this.toHump(this.tag)}({\n`;
@@ -763,7 +799,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             hasAuth = !!this.bindDirectives.filter((directive) => directive.name === 'auth').length;
         }
         // 角色
-        if (hasAuth && Array.isArray(this.bindRoles)) {
+        if (Array.isArray(this.bindRoles) && this.bindRoles.length) {
             code += (0, translator_1.indent)(state.tabSize + 2);
             code += 'roles = [\n';
             this.bindRoles.forEach((role) => {
@@ -798,26 +834,39 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         // 子元素
         if (Array.isArray(this.children)) {
             code += (0, translator_1.indent)(state.tabSize + 1);
-            let levelIndex = parentLevel || 0;
-            if (this.haveScope(this)) {
-                code += `slotDefault: (scope${levelIndex || ''})=> [\n`;
-                levelIndex++;
-            }
-            else {
-                code += `slotDefault: ()=> [\n`;
-            }
             if (Array.isArray(this.bindAttrs)) {
-                code += (0, translator_1.indent)(state.tabSize + 2) + `() => [\n`;
+                code += `bindAttr: () => [\n`;
                 this.bindAttrs.forEach((attr) => {
                     if (attr.expression) {
                         code
                             += attr.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code, {
-                                tabSize: state.tabSize + 3,
+                                tabSize: state.tabSize + 2,
+                            })) + ',\n';
+                    }
+                    if (Array.isArray(attr.rules) && attr.rules.length) {
+                        attr.rules.forEach((item) => {
+                            code += item.toEmbeddedTS((0, translator_1.shiftState)(state, code)) + ',\n';
+                        });
+                    }
+                });
+                this.bindDirectives.forEach((directive) => {
+                    if (directive.expression) {
+                        code
+                            += directive.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code, {
+                                tabSize: state.tabSize + 2,
                             })) + ',\n';
                     }
                 });
                 code += (0, translator_1.indent)(state.tabSize + 2) + '],\n';
             }
+            let levelIndex = parentLevel || 0;
+            if (this.haveScope(this)) {
+                code += `slotDefault: (scope)=> [\n`;
+                levelIndex++;
+            }
+            else {
+                code += `slotDefault: ()=> [\n`;
+            }
             this.children.forEach((element) => {
                 code += element.toEmbeddedTS((0, translator_1.shiftState)(state, code, {
                     tabSize: state.tabSize + 2,
@@ -830,12 +879,9 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         code += (0, translator_1.indent)(state.tabSize) + '}),\n';
         return code;
     }
-    _duplicate(options) {
-        const code = this.toVue(options);
-        const element = ViewElement_1.fromHTML(code, {
-            view: this.view,
-        });
-        element.deepRenameElements();
+    _duplicate() {
+        const element = ViewElement_1.from(this.toTemplateJSON());
+        element.deepRenameElements(this);
         return element;
     }
     // 递归遍历组件
@@ -845,10 +891,10 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }, { node: this });
     }
     // 递归生成组件名
-    deepRenameElements() {
+    deepRenameElements(node) {
         return this.traverseChildren((ele) => {
             const tagName = ele.tag.replace(ViewElement_1.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
-            ele.name = this.getViewElementUniqueName(`${tagName}1`);
+            ele.name = node.getViewElementUniqueName(`${tagName}1`);
         });
     }
     /**
@@ -888,7 +934,6 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             concept: 'ValidationRule',
             name: '',
             label: '验证规则',
-            folded: true,
             kind: 'Expression',
             calleeNamespace: 'nasl.validation',
             arguments: args,
@@ -917,8 +962,9 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         if (astNode.scopedSlots) {
             astNode.children = astNode.children || [];
             Object.keys(astNode.scopedSlots).forEach((key) => {
-                if (!astNode.children.find((child) => key === child.slotTarget))
+                if (!astNode.children.find((child) => key === child.slotTarget)) {
                     astNode.children.unshift(astNode.scopedSlots[key]);
+                }
             });
             delete astNode.scopedSlots;
         }
@@ -938,6 +984,12 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 }
             }
             const tagName = astNode.tag.replace(ViewElement_1.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            let newContext = {};
+            if (context) {
+                newContext = {
+                    ...context,
+                };
+            }
             element = new ViewElement_1({
                 tag: astNode.tag,
                 name: astNode.attrsMap.ref || view.getViewElementUniqueName(`${tagName}1`),
@@ -945,46 +997,45 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 staticStyle: astNode.attrsMap.style,
                 slotTarget: astNode.slotTarget && json5.parse(astNode.slotTarget),
                 slotScope: astNode.slotScope === '_empty_' ? '' : astNode.slotScope,
-                children: astNode.children.map((item) => this._fromASTNode(item, context)),
+                children: astNode.children.map((item) => this._fromASTNode(item, newContext)),
             });
-            astNode.attrs
-                && astNode.attrs.forEach((oldAttr) => {
-                    let attr;
-                    if (oldAttr.value === '""' && oldAttr.end - oldAttr.start === oldAttr.name.length) {
-                        attr = BindAttribute__1.default.from({
-                            type: 'static',
+            astNode?.attrs?.forEach((oldAttr) => {
+                let attr;
+                if (oldAttr.value === '""' && oldAttr.end - oldAttr.start === oldAttr.name.length) {
+                    attr = new BindAttribute__1.default({
+                        type: 'static',
+                        name: oldAttr.name,
+                        value: 'true',
+                    });
+                }
+                else {
+                    try {
+                        const tmp = json5.parse(oldAttr.value);
+                        const source = {
+                            type: typeof tmp === 'string' ? 'string' : 'static',
                             name: oldAttr.name,
-                            value: 'true',
-                        }, element);
-                    }
-                    else {
-                        try {
-                            const tmp = json5.parse(oldAttr.value);
-                            const source = {
-                                type: typeof tmp === 'string' ? 'string' : 'static',
-                                name: oldAttr.name,
-                                value: typeof tmp === 'string' ? tmp : oldAttr.value,
-                            };
-                            if (oldAttr.name === 'rules') {
-                                source.rules = tmp?.split('|').map((ruleStr) => this._parseValidationRule(ruleStr.trim()));
-                            }
-                            attr = BindAttribute__1.default.from(source, element);
+                            value: typeof tmp === 'string' ? tmp : oldAttr.value,
+                        };
+                        if (oldAttr.name === 'rules') {
+                            source.rules = tmp?.split('|').map((ruleStr) => this._parseValidationRule(ruleStr.trim()));
                         }
-                        catch (e) {
-                            const expression = this._parseExpression(oldAttr.value);
-                            attr = BindAttribute__1.default.from({
-                                type: 'dynamic',
-                                name: oldAttr.name,
-                                value: expression ? '' : oldAttr.value,
-                                expression,
-                            }, element);
-                            if (astNode.attrsMap[`:${attr.name}.sync`]) {
-                                attr.sync = true;
-                            }
+                        attr = new BindAttribute__1.default(source);
+                    }
+                    catch (e) {
+                        const expression = this._parseExpression(oldAttr.value);
+                        attr = new BindAttribute__1.default({
+                            type: 'dynamic',
+                            name: oldAttr.name,
+                            value: expression ? '' : oldAttr.value,
+                            expression,
+                        });
+                        if (astNode.attrsMap[`:${attr.name}.sync`]) {
+                            attr.sync = true;
                         }
                     }
-                    element.bindAttrs.push(attr);
-                });
+                }
+                element.addBindAttribute(attr);
+            });
             // compiler 处理:value.sync 时会加上update:value事件，需要过滤
             astNode.events
                 && Object.keys(astNode.events)
@@ -993,24 +1044,23 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                     const oldEvent = astNode.events[name];
                     const str = oldEvent.value;
                     let calleeName = str.split('(')[0];
-                    const matchArr = str.match(/\(([^)]*)\)/);
+                    const matchArr = str.match(/\(([^)]*)\)/) || [];
                     let argsStr = '';
-                    if (matchArr.length >= 2) {
+                    if (matchArr?.length >= 2) {
                         argsStr = matchArr[1];
                     }
                     let args = [];
-                    if (argsStr) {
-                        args = argsStr.split(',').map((argStr) => {
-                            const keyword = argStr.trim().split('.');
-                            return {
-                                concept: 'Argument',
-                                expression: genArgumentMemberExpression(keyword),
-                            };
-                        });
-                    }
-                    const viewNamespace = view?.getNamespace();
-                    const viewName = `${view?.name}`;
-                    let calleeNamespace = `${viewNamespace}.${viewName}.logics`;
+                    const argStrs = argsStr.split(',');
+                    args = argStrs
+                        .filter((argStr) => !!argStr && argStr !== '_empty_')
+                        .map((argStr) => {
+                        const keyword = argStr.trim().split('.');
+                        return {
+                            concept: 'Argument',
+                            expression: genArgumentMemberExpression(keyword),
+                        };
+                    });
+                    let calleeNamespace = '';
                     if (calleeName) {
                         const namespaceArr = calleeName.split('.');
                         const start = namespaceArr.shift();
@@ -1019,12 +1069,12 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                             calleeName = namespaceArr[1];
                         }
                     }
-                    element.bindEvents.push(BindEvent__1.default.from({
+                    element.addBindEvent(new BindEvent__1.default({
                         name,
                         calleeNamespace,
                         calleeName,
                         arguments: args,
-                    }, element));
+                    }));
                 });
             astNode.directives
                 && astNode.directives.forEach((directive) => {
@@ -1032,52 +1082,48 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                         const valueAttr = astNode.attrs && astNode.attrs.find((attr) => attr.name === 'value');
                         if (!valueAttr) {
                             const expression = this._parseExpression(directive.value);
-                            element.bindAttrs.push(BindAttribute__1.default.from({
+                            element.addBindAttribute(new BindAttribute__1.default({
                                 type: 'dynamic',
                                 name: 'value',
                                 value: expression ? '' : directive.value,
                                 expression,
                                 sync: true,
-                            }, element));
+                            }));
                         }
                     }
                     else {
                         const expression = this._parseExpression(directive.value);
-                        element.bindDirectives.push(BindDirective__1.default.from({
+                        element.addBindDirective(new BindDirective__1.default({
                             type: expression ? 'string' : 'dynamic',
                             name: directive.name,
                             rawName: directive.rawName,
                             value: expression ? '' : directive.value,
                             expression,
                             arg: directive.arg,
-                            modifiers: directive.modifiers,
-                        }, element));
+                            // modifiers: directive.modifiers,
+                        }));
                     }
                 });
             if (astNode.if) {
-                element.bindDirectives.push(BindDirective__1.default.from({
+                element.addBindDirective(new BindDirective__1.default({
                     type: 'dynamic',
                     name: 'if',
                     rawName: 'v-if',
                     value: '',
                     expression: this._parseExpression(astNode.if),
-                }, element));
+                }));
             }
         }
         else if (astNode.type === 2) {
-            if (__1.config.scope === 'h5') {
-                element = new ViewElement_1({
-                    tag: 'van-text',
-                });
-            }
-            else {
-                element = new ViewElement_1({
-                    tag: 'u-text',
-                });
-            }
+            const tagName = __1.config.scope === 'h5' ? 'van-text' : 'u-text';
+            const baseName = tagName.replace(ViewElement_1.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            element = new ViewElement_1({
+                tag: tagName,
+                name: view.getViewElementUniqueName(`${baseName}1`),
+            });
             const value = astNode.text.match(/{{(.*?)}}/)[1].trim();
             const expression = this._parseExpression(value);
-            element.bindAttrs.push(new BindAttribute__1.default({
+            element.addBindAttribute(new BindAttribute__1.default({
                 type: 'dynamic',
                 name: 'text',
                 value: expression ? '' : value,
@@ -1085,17 +1131,13 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             }));
         }
         else if (astNode.type === 3) {
-            if (__1.config.scope === 'h5') {
-                element = new ViewElement_1({
-                    tag: 'van-text',
-                });
-            }
-            else {
-                element = new ViewElement_1({
-                    tag: 'u-text',
-                });
-            }
-            element.bindAttrs.push(new BindAttribute__1.default({
+            const tagName = __1.config.scope === 'h5' ? 'van-text' : 'u-text';
+            const baseName = tagName.replace(ViewElement_1.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            element = new ViewElement_1({
+                tag: tagName,
+                name: view.getViewElementUniqueName(`${baseName}1`),
+            });
+            element.addBindAttribute(new BindAttribute__1.default({
                 name: 'text',
                 type: 'string',
                 value: astNode.text,
@@ -1118,22 +1160,13 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         let ast = compiler.compile(html, compilerOptions).ast;
         if (ast.tag === 'template' && !ast.slotTarget)
             ast = ast.children[0];
-        let root;
-        utils.traverse((current) => {
-            // 处理 scopedSlots;
-            if (!current.parent)
-                root = this._fromASTNode(current.node, context);
-            else
-                current.parent.children[current.index] = this._fromASTNode(current.node, context);
-        }, { node: ast });
-        return root;
+        return this._fromASTNode(ast, context);
     }
     /**
      * 从模板生成规范的 ViewElement 对象
      */
     static fromHTML(html, context) {
-        const element = this.parse(html, context);
-        return element;
+        return this.parse(html, context);
     }
     /**
      * 转换成设计器中使用的 Vue 文件
@@ -1161,7 +1194,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                         }
                     }
                     if (attr.type === 'dynamic' && !(element.tag === 'u-cascade-select' && attr.name === 'categories'))
-                        return defaultResult.replace(/:?(\w+)(?:.*?)="(.*)"/, (m, name, value) => {
+                        return defaultResult.replace(/:?([\w-]+)(?:.*?)="(.*)"/, (m, name, value) => {
                             try {
                                 const tempValue = json5.parse(value);
                                 if (typeof tempValue === 'boolean' || typeof tempValue === 'number') {
@@ -1173,7 +1206,12 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                                 if (apiOfAttr && !apiOfAttr.type.includes('string'))
                                     return '';
                             }
-                            return `${name}="{{ ${value.replace(/"/g, "'")} }}"`;
+                            value = value
+                                .replace(/"/g, "'")
+                                .replace(/\$utils\['(.+?)'\]/g, '$1')
+                                .replace(/\$refs./g, 'elements.')
+                                .replace(/\$global./g, 'nasl.auth.');
+                            return `${name}="{{ ${value} }}"`;
                         });
                     else
                         return defaultResult;
@@ -1184,13 +1222,31 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 const parts = [];
                 const api = __1.config.allNodesAPI[el.tag];
                 const emptySlot = api && api.slots && api.slots.find((slot) => slot.name === 'default' && slot['empty-background']);
-                if (!el.children.length && emptySlot) {
-                    let addEmpty = true;
-                    if (el.tag === 'u-grid-view' || el.tag === 'u-list-view' || el.tag === 'van-list-view') {
-                        const hasDataSource = el.bindAttrs.find((attr) => attr.name === 'data-source');
-                        addEmpty = !hasDataSource;
+                const hasSupport = api && api.slots && api.slots.some((slot) => slot.support);
+                if (emptySlot || hasSupport) {
+                    let childEmpty = !el.children.length;
+                    const defaultSlot = el.children.find((elem) => elem.tag === 'template' && elem.slotTarget === 'default');
+                    if (defaultSlot) {
+                        childEmpty = !defaultSlot.children.length;
+                    }
+                    if (childEmpty) {
+                        let addEmpty = true;
+                        if (el.tag === 'u-grid-view' || el.tag === 'u-list-view' || el.tag === 'van-list-view' || el.tag === 'van-grid-view') {
+                            const hasDataSource = el.bindAttrs.find((attr) => attr.name === 'data-source');
+                            addEmpty = !hasDataSource;
+                        }
+                        if (el.tag === 'u-crumb') {
+                            const attrList = el.bindAttrs;
+                            const hasAuto = attrList.some((attr) => attr.name === 'auto' && String(attr.value) === 'true');
+                            if (hasAuto)
+                                addEmpty = false;
+                        }
+                        if (['u-select', 'u-dropdown', 'u-panel'].includes(el.tag)) {
+                            addEmpty = false;
+                        }
+                        const background = (emptySlot && emptySlot['empty-background']) || (hasSupport ? 'add-sub' : '');
+                        addEmpty && parts.push(`vusion-empty-background="${background}"`);
                     }
-                    addEmpty && parts.push(`vusion-empty-background="${emptySlot['empty-background']}"`);
                 }
                 return parts;
             },
@@ -1200,7 +1256,14 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
      * 转换成 Vue 的模板格式
      */
     toVue(options) {
-        options = Object.assign({
+        let scopeList = [];
+        if (Array.isArray(options?.scopeList)) {
+            scopeList = [...options?.scopeList];
+        }
+        if (this.slotScope) {
+            scopeList.unshift(this.slotScope);
+        }
+        const newOptions = Object.assign({
             indentStyle: 'space',
             tabSize: 4,
             indentLevel: 0,
@@ -1208,26 +1271,30 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             nodePathAttr: false,
             getExtraParts: () => [],
             attrFormat: (attr, element, defaultResult) => defaultResult,
-        }, options);
-        const tabString = ' '.repeat(options.tabSize * options.indentLevel);
-        const insideTabString = ' '.repeat(options.tabSize * (options.indentLevel + 1));
+        }, options, {
+            scopeList,
+        });
+        const tabString = ' '.repeat(newOptions.tabSize * newOptions.indentLevel);
+        const insideTabString = ' '.repeat(newOptions.tabSize * (newOptions.indentLevel + 1));
         let shouldIndent = true;
         const content = !this.children ? '' : this.children
             .map((element) => {
-            const childOptions = Object.assign({}, options);
+            const childOptions = Object.assign({}, newOptions);
             childOptions.indentLevel++;
-            return (shouldIndent ? '\n' + insideTabString : '') + element.toVue(childOptions);
+            return (shouldIndent ? '\n' + insideTabString : '') + element?.toVue(childOptions);
         })
             .join('');
-        if (!content.length)
+        if (!content.length) {
             shouldIndent = false;
+        }
         const parts = [];
-        if (options.aslIdAttr) {
-            if (options.aslIdAttr === true)
-                options.aslIdAttr = 'asl-id';
-            parts.push(`${options.aslIdAttr}="${this.id}"`);
+        if (newOptions.aslIdAttr) {
+            if (newOptions.aslIdAttr === true) {
+                newOptions.aslIdAttr = 'asl-id';
+            }
+            parts.push(`${newOptions.aslIdAttr}="${this.id}"`);
         }
-        if (options.nodePathAttr) {
+        if (newOptions.nodePathAttr) {
             // 注入 asl 的 node-path
             parts.push(`vusion-node-path="${this.nodePath}"`);
         }
@@ -1236,10 +1303,10 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         this.staticClass && parts.push(`class="${this.staticClass}"`);
         this.staticStyle && parts.push(`style="${this.staticStyle}"`);
         [].concat(this.bindAttrs, this.bindDirectives, this.bindEvents).forEach((attr) => {
-            const result = options.attrFormat(attr, this, attr.toVue(options));
+            const result = newOptions.attrFormat(attr, this, attr?.toVue(newOptions));
             result && parts.push(result);
         });
-        options.getExtraParts(this).forEach((part) => parts.push(part));
+        newOptions.getExtraParts(this).forEach((part) => parts.push(part));
         let partsLength = 0;
         let partsString = '';
         parts.forEach((part) => {
@@ -1252,6 +1319,37 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         });
         return `<${this.tag}${partsString.length ? partsString : ''}>` + content + (shouldIndent ? '\n' + tabString : '') + `</${this.tag}>`;
     }
+    /**
+     * 从父级删除该节点
+     * @internal
+     */
+    delete() {
+        super.delete();
+        if (this.parentNode) {
+            this.traverseChildren((ele) => {
+                this.view?.removeExistingViewElement(ele);
+            });
+        }
+    }
+    findElementByName(name) {
+        return utils.traverse((current) => {
+            if (current.node.name === name)
+                return current.node;
+        }, { node: this });
+    }
+    findElementByTag(tag) {
+        return utils.traverse((current) => {
+            if (current.node.tag === tag)
+                return current.node;
+        }, { node: this });
+    }
+    findElementByAttr(name, value) {
+        return utils.traverse((current) => {
+            if (current.node.bindAttrs.some((attr) => attr.name === name && attr.value === value))
+                return current.node;
+        }, { node: this });
+    }
+    computedStyle = {};
 };
 __decorate([
     (0, decorators_1.property)()
@@ -1292,12 +1390,12 @@ __decorate([
 __decorate([
     (0, decorators_1.property)('ViewElement')
 ], ViewElement.prototype, "children", void 0);
-__decorate([
-    (0, decorators_1.property)()
-], ViewElement.prototype, "roles", void 0);
 __decorate([
     (0, translator_1.withSourceMap)()
 ], ViewElement.prototype, "toEmbeddedTS", null);
+__decorate([
+    (0, decorators_1.excludedInJSON)()
+], ViewElement.prototype, "computedStyle", void 0);
 ViewElement = ViewElement_1 = __decorate([
     (0, decorators_1.concept)('页面元素')
 ], ViewElement);