@lcap/nasl 1.0.0-alpha.7 → 1.0.0

package/src/concepts/ViewElement__.ts

@@ -46,38 +46,62 @@ export interface ElementToVueOptions {
     getExtraParts?: (element?: ViewElement) => Array<string>;
     attrFormat?: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => string | false;
     finalCode?: boolean;
+    scopeList?: string[];
 }
 
-function transAstNodeToNaslNode(astNode: any): any {
+function transAstNodeToNaslNode(astNode: any, namespace?: string): any {
     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: any) => ({
-                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: any) => ({
+                    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',
         };
@@ -94,6 +118,17 @@ function transAstNodeToNaslNode(astNode: any): any {
             name: '',
             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;
 }
@@ -309,7 +344,7 @@ export class ViewElement extends BaseNode {
                 name: options,
             }, this, 'bindAttrs');
         } else if (options instanceof BindAttribute) {
-            options.delete(); // 同一实例不支持多处存在
+            options.ensureDelete(); // 同一实例不支持多处存在
             bindAttribute = options;
             Object.assign(bindAttribute, relationOptions);
         } else {
@@ -397,7 +432,7 @@ export class ViewElement extends BaseNode {
 
     addBindAttribute(options?: string | Partial<BindAttribute> | BindAttribute) {
         const node = this._addBindAttribute(options as any);
-        const index = this.bindAttrs.length;
+        const index = this.bindAttrs.indexOf(node);
         node.create({
             index,
             parentNode: this,
@@ -451,7 +486,7 @@ export class ViewElement extends BaseNode {
                 name: options,
             }, this, 'bindEvents');
         } else if (options instanceof BindEvent) {
-            options.delete(); // 同一实例不支持多处存在
+            options.ensureDelete(); // 同一实例不支持多处存在
             bindEvent = options;
             Object.assign(bindEvent, relationOptions);
         } else {
@@ -539,7 +574,7 @@ export class ViewElement extends BaseNode {
 
     addBindEvent(options?: string | Partial<BindEvent> | BindEvent) {
         const node = this._addBindEvent(options as any);
-        const index = this.bindEvents.length;
+        const index = this.bindEvents.indexOf(node);
         node.create({
             index,
             parentNode: this,
@@ -593,7 +628,7 @@ export class ViewElement extends BaseNode {
                 name: options,
             }, this, 'bindDirectives');
         } else if (options instanceof BindDirective) {
-            options.delete(); // 同一实例不支持多处存在
+            options.ensureDelete(); // 同一实例不支持多处存在
             bindDirective = options;
             Object.assign(bindDirective, relationOptions);
         } else {
@@ -681,7 +716,7 @@ export class ViewElement extends BaseNode {
 
     addBindDirective(options?: string | Partial<BindDirective> | BindDirective) {
         const node = this._addBindDirective(options as any);
-        const index = this.bindDirectives.length;
+        const index = this.bindDirectives.indexOf(node);
         node.create({
             index,
             parentNode: this,
@@ -731,7 +766,7 @@ export class ViewElement extends BaseNode {
                 name: options,
             }, this, 'children');
         } else if (options instanceof ViewElement) {
-            options.delete(); // 同一实例不支持多处存在
+            options.ensureDelete(); // 同一实例不支持多处存在
             viewElement = options;
             Object.assign(viewElement, relationOptions);
         } else {
@@ -819,7 +854,7 @@ export class ViewElement extends BaseNode {
 
     addViewElement(options?: string | Partial<ViewElement> | ViewElement) {
         const node = this._addViewElement(options as any);
-        const index = this.children.length;
+        const index = this.children.indexOf(node);
         node.create({
             index,
             parentNode: this,
@@ -1033,6 +1068,21 @@ export class ViewElement extends BaseNode {
     // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
     // 自动生成的代码已结束。下面可以手动编写。
     //================================================================================
+
+    /* 主页面有没有权限 */
+    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);
     }
@@ -1064,48 +1114,25 @@ export class ViewElement extends BaseNode {
         return this.bindAttrs.find((bindAttr) => bindAttr.name === name);
     }
 
-    /**
-     * 角色
-     */
-    @property()
-    roles: Array<{
-        namespace: string;
-        name: string;
-    }> = [];
-
-    toggleRole(role: 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: string): string {
         return name.replace(/\-(\w)/g, (all, letter) => letter.toUpperCase());
     }
 
     haveScope(node: ViewElement): boolean {
-        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'];
+        const dataSourceH5List = ['vanRadioGroup', 'vanCheckboxGroup', 'vanListView', 'vanGridView', 'vanForComponents', 'lcapEchartsLine', 'lcapEchartsBar', 'lcapEchartsPie'];
         const dataSourceList = [...dataSourcePcList, ...dataSourceH5List];
         return dataSourceList.includes(node.toHump(node.tag));
     }
     toEmbeddedTSDefinition(state?: TranslatorState): string {
+        // 登录组件不翻译
+        if (this.toHump(this.tag) === 'lcapLogin' || this.staticClass === 'login-form')
+            return '';
         let code = '';
         // formItem的单独处理
         if (this.tag === 'u-form-item') {
-            code = indent(state.tabSize) + `${this.name}: <nasl.ui.${this.toHump(this.tag)}`;
+            code = 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') {
@@ -1116,7 +1143,7 @@ export class ViewElement extends BaseNode {
                     code += '<nasl.core.Any>';
                 }
             }
-            code += '> null,\n';
+            code += ';\n';
         }
         if (this.haveScope(this)) {
             let genericType = 'any';
@@ -1134,9 +1161,13 @@ export class ViewElement extends BaseNode {
                         let parentNode = this.parentNode;
                         let haveScopeFlag = false;
                         while (!haveScopeFlag && parentNode.concept !== 'View') {
-                            if (this.haveScope((parentNode) as ViewElement)) {
+                            if (this.haveScope(parentNode as ViewElement)) {
                                 // 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 as ViewElement).bindAttrs;
                                 if (parentbindAttrs && parentbindAttrs.length) {
                                     const parentAttr = parentbindAttrs.find((item) => item.name === 'data-source');
@@ -1144,7 +1175,7 @@ export class ViewElement extends BaseNode {
                                         let parentExpressionTs = parentAttr.expression.toEmbeddedTS(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;
@@ -1154,9 +1185,9 @@ export class ViewElement extends BaseNode {
                     }
                 }
             }
-            code += indent(state.tabSize) + `${this.name}: <nasl.ui.${this.toHump(this.tag)}<${genericType}>> null,\n`;
+            code += indent(state.tabSize) + `${this.name}: nasl.ui.${this.toHump(this.tag)}<${genericType}>;\n`;
         } else {
-            code = indent(state.tabSize) + `${this.name}: <nasl.ui.${this.toHump(this.tag)}<any>> null,\n`;
+            code = indent(state.tabSize) + `${this.name}: nasl.ui.${this.toHump(this.tag)}<any>;\n`;
         }
         if (Array.isArray(this.children)) {
             this.children.forEach((element) => {
@@ -1167,13 +1198,15 @@ export class ViewElement extends BaseNode {
     }
     @withSourceMap()
     toEmbeddedTS(state?: TranslatorState, parentLevel?: number): string {
+        if (this.toHump(this.tag) === 'lcapLogin' || this.staticClass === 'login-form')
+            return '';
         function chineseTsName(name: string) {
             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`;
@@ -1183,7 +1216,7 @@ export class ViewElement extends BaseNode {
             hasAuth = !!this.bindDirectives.filter((directive) => directive.name === 'auth').length;
         }
         // 角色
-        if (hasAuth && Array.isArray(this.bindRoles)) {
+        if (Array.isArray(this.bindRoles) && this.bindRoles.length) {
             code += indent(state.tabSize + 2);
             code += 'roles = [\n';
             this.bindRoles.forEach((role) => {
@@ -1221,25 +1254,40 @@ export class ViewElement extends BaseNode {
         if (Array.isArray(this.children)) {
             code += 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 += indent(state.tabSize + 2) + `() => [\n`;
+                code += `bindAttr: () => [\n`;
                 this.bindAttrs.forEach((attr) => {
                     if (attr.expression) {
                         code
                             += attr.expression.toEmbeddedTS(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(shiftState(state, code)) + ',\n';
+                        });
+                    }
+                });
+                this.bindDirectives.forEach((directive) => {
+                    if (directive.expression) {
+                        code
+                            += directive.expression.toEmbeddedTS(shiftState(state, code, {
+                                tabSize: state.tabSize + 2,
                             })) + ',\n';
                     }
                 });
                 code += 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(shiftState(state, code, {
                     tabSize: state.tabSize + 2,
@@ -1255,12 +1303,9 @@ export class ViewElement extends BaseNode {
         return code;
     }
 
-    _duplicate(options?: ElementToVueOptions) {
-        const code = this.toVue(options);
-        const element = ViewElement.fromHTML(code, {
-            view: this.view,
-        });
-        element.deepRenameElements();
+    _duplicate() {
+        const element = ViewElement.from(this.toTemplateJSON());
+        element.deepRenameElements(this);
         return element;
     }
 
@@ -1272,10 +1317,10 @@ export class ViewElement extends BaseNode {
     }
 
     // 递归生成组件名
-    public deepRenameElements(): void {
+    public deepRenameElements(node: ViewElement): void {
         return this.traverseChildren((ele: ViewElement) => {
             const tagName = ele.tag.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
-            ele.name = this.getViewElementUniqueName(`${tagName}1`);
+            ele.name = node.getViewElementUniqueName(`${tagName}1`);
         });
     }
 
@@ -1315,7 +1360,6 @@ export class ViewElement extends BaseNode {
             concept: 'ValidationRule',
             name: '',
             label: '验证规则',
-            folded: true,
             kind: 'Expression',
             calleeNamespace: 'nasl.validation',
             arguments: args,
@@ -1343,13 +1387,13 @@ export class ViewElement extends BaseNode {
             });
             astNode.children = [];
         }
-
         // 将 scopedSlots 合并到 children 中
         if (astNode.scopedSlots) {
             astNode.children = astNode.children || [];
             Object.keys(astNode.scopedSlots).forEach((key) => {
-                if (!astNode.children.find((child) => key === (child as compiler.ASTElement).slotTarget))
+                if (!astNode.children.find((child) => key === (child as compiler.ASTElement).slotTarget)) {
                     astNode.children.unshift(astNode.scopedSlots[key]);
+                }
             });
             delete astNode.scopedSlots;
         }
@@ -1370,6 +1414,12 @@ export class ViewElement extends BaseNode {
                 }
             }
             const tagName = astNode.tag.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            let newContext: any = {};
+            if (context) {
+                newContext = {
+                    ...context,
+                };
+            }
             element = new ViewElement({
                 tag: astNode.tag,
                 name: astNode.attrsMap.ref || view.getViewElementUniqueName(`${tagName}1`),
@@ -1377,45 +1427,43 @@ export class ViewElement extends BaseNode {
                 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 as compiler.ASTElement, context)) as unknown as Array<ViewElement>,
+                children: astNode.children.map((item) => this._fromASTNode(item as compiler.ASTElement, newContext)) as unknown as Array<ViewElement>,
             });
-
-            astNode.attrs
-                && astNode.attrs.forEach((oldAttr) => {
-                    let attr: BindAttribute;
-                    if (oldAttr.value === '""' && (oldAttr as any).end - (oldAttr as any).start === oldAttr.name.length) {
-                        attr = BindAttribute.from({
-                            type: 'static',
+            astNode?.attrs?.forEach((oldAttr) => {
+                let attr: BindAttribute;
+                if (oldAttr.value === '""' && (oldAttr as any).end - (oldAttr as any).start === oldAttr.name.length) {
+                    attr = new BindAttribute({
+                        type: 'static',
+                        name: oldAttr.name,
+                        value: 'true',
+                    });
+                } else {
+                    try {
+                        const tmp = json5.parse(oldAttr.value);
+                        const source: any = {
+                            type: typeof tmp === 'string' ? 'string' : 'static',
                             name: oldAttr.name,
-                            value: 'true',
-                        }, element);
-                    } else {
-                        try {
-                            const tmp = json5.parse(oldAttr.value);
-                            const source: any = {
-                                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: string) => this._parseValidationRule(ruleStr.trim()));
-                            }
-                            attr = BindAttribute.from(source, element);
-                        } catch (e) {
-                            const expression = <any> this._parseExpression(oldAttr.value);
-                            attr = BindAttribute.from({
-                                type: 'dynamic',
-                                name: oldAttr.name,
-                                value: expression ? '' : oldAttr.value,
-                                expression,
-                            }, element);
-                            if (astNode.attrsMap[`:${attr.name}.sync`]) {
-                                attr.sync = true;
-                            }
+                            value: typeof tmp === 'string' ? tmp : oldAttr.value,
+                        };
+                        if (oldAttr.name === 'rules') {
+                            source.rules = tmp?.split('|').map((ruleStr: string) => this._parseValidationRule(ruleStr.trim()));
+                        }
+                        attr = new BindAttribute(source);
+                    } catch (e) {
+                        const expression = <any> this._parseExpression(oldAttr.value);
+                        attr = new BindAttribute({
+                            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
@@ -1425,24 +1473,23 @@ export class ViewElement extends BaseNode {
                         const oldEvent = astNode.events[name] as compiler.ASTElementHandler;
                         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: any[] = [];
-                        if (argsStr) {
-                            args = argsStr.split(',').map((argStr) => {
+                        const argStrs: string[] = argsStr.split(',');
+                        args = argStrs
+                            .filter((argStr) => !!argStr && argStr !== '_empty_')
+                            .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`;
+                        let calleeNamespace = '';
                         if (calleeName) {
                             const namespaceArr = calleeName.split('.');
                             const start = namespaceArr.shift();
@@ -1451,12 +1498,12 @@ export class ViewElement extends BaseNode {
                                 calleeName = namespaceArr[1];
                             }
                         }
-                        element.bindEvents.push(BindEvent.from({
+                        element.addBindEvent(new BindEvent({
                             name,
                             calleeNamespace,
                             calleeName,
                             arguments: args,
-                        }, element));
+                        }));
                     });
 
             astNode.directives
@@ -1465,73 +1512,65 @@ export class ViewElement extends BaseNode {
                         const valueAttr = astNode.attrs && astNode.attrs.find((attr) => attr.name === 'value');
                         if (!valueAttr) {
                             const expression = <any> this._parseExpression(directive.value);
-                            element.bindAttrs.push(BindAttribute.from({
+                            element.addBindAttribute(new BindAttribute({
                                 type: 'dynamic',
                                 name: 'value',
                                 value: expression ? '' : directive.value,
                                 expression,
                                 sync: true,
-                            }, element));
+                            }));
                         }
                     } else {
                         const expression = <any> this._parseExpression(directive.value);
-                        element.bindDirectives.push(BindDirective.from({
+                        element.addBindDirective(new BindDirective({
                             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.from({
+                element.addBindDirective(new BindDirective({
                     type: 'dynamic',
                     name: 'if',
                     rawName: 'v-if',
                     value: '',
                     expression: <any> this._parseExpression(astNode.if),
-                }, element));
+                }));
             }
         } else if (astNode.type === 2) {
-            if (config.scope === 'h5') {
-                element = new ViewElement({
-                    tag: 'van-text',
-                });
-            } else {
-                element = new ViewElement({
-                    tag: 'u-text',
-                });
-            }
+            const tagName = config.scope === 'h5' ? 'van-text' : 'u-text';
+            const baseName = tagName.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            element = new ViewElement({
+                tag: tagName,
+                name: view.getViewElementUniqueName(`${baseName}1`),
+            });
             const value = astNode.text.match(/{{(.*?)}}/)[1].trim();
             const expression = <any> this._parseExpression(value);
-            element.bindAttrs.push(new BindAttribute({
+            element.addBindAttribute(new BindAttribute({
                 type: 'dynamic',
                 name: 'text',
                 value: expression ? '' : value,
                 expression,
             }));
         } else if (astNode.type === 3) {
-            if (config.scope === 'h5') {
-                element = new ViewElement({
-                    tag: 'van-text',
-                });
-            } else {
-                element = new ViewElement({
-                    tag: 'u-text',
-                });
-            }
-
-            element.bindAttrs.push(new BindAttribute({
+            const tagName = config.scope === 'h5' ? 'van-text' : 'u-text';
+            const baseName = tagName.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
+            element = new ViewElement({
+                tag: tagName,
+                name: view.getViewElementUniqueName(`${baseName}1`),
+            });
+            element.addBindAttribute(new BindAttribute({
                 name: 'text',
                 type: 'string',
                 value: astNode.text,
             }));
         }
-
         return element;
     }
 
@@ -1552,24 +1591,14 @@ export class ViewElement extends BaseNode {
         let ast = compiler.compile(html, compilerOptions).ast;
         if (ast.tag === 'template' && !ast.slotTarget)
             ast = ast.children[0] as compiler.ASTElement;
-
-        let root: ViewElement;
-        utils.traverse((current) => {
-            // 处理 scopedSlots;
-            if (!current.parent)
-                root = this._fromASTNode(current.node, context);
-            else
-                (current.parent.children as any)[current.index] = this._fromASTNode(current.node, context);
-        }, { node: ast });
-        return root;
+        return this._fromASTNode(ast, context);
     }
 
     /**
      * 从模板生成规范的 ViewElement 对象
      */
     public static fromHTML(html: string, context?: ParseContext) {
-        const element = this.parse(html, context);
-        return element;
+        return this.parse(html, context);
     }
 
     /**
@@ -1597,7 +1626,7 @@ export class ViewElement extends BaseNode {
                         }
                     }
                     if ((attr as BindAttribute).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') {
@@ -1608,7 +1637,12 @@ export class ViewElement extends BaseNode {
                                 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;
@@ -1620,13 +1654,31 @@ export class ViewElement extends BaseNode {
 
                 const api = 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;
@@ -1638,7 +1690,14 @@ export class ViewElement extends BaseNode {
      * 转换成 Vue 的模板格式
      */
     toVue(options?: ElementToVueOptions) {
-        options = Object.assign({
+        let scopeList: string[] = [];
+        if (Array.isArray(options?.scopeList)) {
+            scopeList = [...options?.scopeList];
+        }
+        if (this.slotScope) {
+            scopeList.unshift(this.slotScope);
+        }
+        const newOptions: ElementToVueOptions = Object.assign({
             indentStyle: 'space',
             tabSize: 4,
             indentLevel: 0,
@@ -1646,27 +1705,30 @@ export class ViewElement extends BaseNode {
             nodePathAttr: false,
             getExtraParts: () => [],
             attrFormat: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => 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: string = !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}"`);
         }
@@ -1677,11 +1739,10 @@ export class ViewElement extends BaseNode {
         this.staticStyle && parts.push(`style="${this.staticStyle}"`);
 
         [].concat(this.bindAttrs, this.bindDirectives, this.bindEvents).forEach((attr: BindAttribute | BindDirective | BindEvent) => {
-            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 = '';
@@ -1697,6 +1758,43 @@ export class ViewElement extends BaseNode {
         return `<${this.tag}${partsString.length ? partsString : ''}>` + content + (shouldIndent ? '\n' + tabString : '') + `</${this.tag}>`;
     }
 
+    /**
+     * 从父级删除该节点
+     * @internal
+     */
+    delete() {
+        super.delete();
+        if (this.parentNode) {
+            this.traverseChildren((ele: ViewElement) => {
+                (this.view as any)?.removeExistingViewElement(ele);
+            });
+        }
+    }
+
+    findElementByName(name: string): ViewElement {
+        return utils.traverse((current) => {
+            if (current.node.name === name)
+                return current.node;
+        }, { node: this });
+    }
+
+    findElementByTag(tag: string): ViewElement {
+        return utils.traverse((current) => {
+            if (current.node.tag === tag)
+                return current.node;
+        }, { node: this });
+    }
+
+    findElementByAttr(name: string, value: string): ViewElement {
+        return utils.traverse((current) => {
+            if (current.node.bindAttrs.some((attr) => attr.name === name && attr.value === value))
+                return current.node;
+        }, { node: this });
+    }
+
+    @excludedInJSON()
+    computedStyle: object = {};
+
     //================================================================================
     // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
     // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓