@lcap/nasl 0.3.10-beta → 0.3.10-beta.5

package/src/types/page/Element.ts

@@ -7,7 +7,6 @@ import { vertexsMap } from '../cacheData';
 import Variable from '../logic/Variable';
 import * as babelParser from '@babel/parser';
 import { isPlainObject, cloneDeep, mapValues } from 'lodash';
-import * as utilsAll from '../../../src/types/utils/string';
 import { refreshHtml } from '../cache';
 import { BusinessCode } from '../enum';
 
@@ -31,14 +30,14 @@ export interface ParseContext {
 
 export function catchFn(view: View) {
     return async (err: any) => {
-        if(err.code !== BusinessCode.HasReferenced)  // 节点被引用，不用刷新数据
+        if (err.code !== BusinessCode.HasReferenced) // 节点被引用，不用刷新数据
             await refreshHtml(view);
         else
             config.defaultApp?.emit('saved', err);
 
         config.defaultApp?.history.load();
         throw err;
-    }
+    };
 }
 
 /**
@@ -155,6 +154,11 @@ export class Element extends Vertex {
      */
     @immutable()
     public readonly children?: Array<Element> = [];
+    /**
+     * 标签名前缀
+     */
+    @immutable()
+    public static readonly TAG_NAME_REG?: RegExp = /^([lieu]|van)[-_]/;
 
     /**
      * @param source 需要合并的部分参数
@@ -181,45 +185,45 @@ export class Element extends Vertex {
         }
 
         config.defaultApp?.emit('saving');
-            if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
-                const body = this.toJSON();
-                body.parentId = this.parent && this.parent.id;
-                body._posIndex = this.parent && this.parent.children.indexOf(this);
-                utils.logger.debug('添加元素', body);
-                const result = await elementService.create({
-                    headers: {
-                        appId: config.defaultApp?.id,
-                        operationAction: 'Element.create',
-                        operationDesc: `添加组件"${this.getElementTitle()}"`,
-                    },
-                    body,
-                }).catch(catchFn(this.view));
-
-                this.deepPick(result, ['id', 'parentId', 'elementId']);
-                // attr,directive,event的id,exprssion需要合并
-                this.attrList.forEach((attr, index) => {
-                    attr.deepPick(result.attrList[index], ['id', 'expression']);
-                });
-                this.directiveList.forEach((directive, index) => {
-                    directive.deepPick(result.directiveList[index], ['id', 'expression']);
-                });
-                this.eventList.forEach((event, index) => {
-                    event.deepPick(result.eventList[index], ['id']);
-                });
-            }
-
-            this.view && this.view.emit('change');
-
-            if (actionOptions?.loadHistory !== false) {
-                await config.defaultApp?.history.load(actionOptions?.actionMode !== ACTION_MODE.undoRedo && {
+        if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
+            const body = this.toJSON();
+            body.parentId = this.parent && this.parent.id;
+            body._posIndex = this.parent && this.parent.children.indexOf(this);
+            utils.logger.debug('添加元素', body);
+            const result = await elementService.create({
+                headers: {
+                    appId: config.defaultApp?.id,
                     operationAction: 'Element.create',
-                    operationBeforeImage: null,
-                    operationAfterImage: JSON.parse(JSON.stringify(this)),
                     operationDesc: `添加组件"${this.getElementTitle()}"`,
-                });
+                },
+                body,
+            }).catch(catchFn(this.view));
+
+            this.deepPick(result, ['id', 'parentId', 'elementId']);
+            // attr,directive,event的id,exprssion需要合并
+            this.attrList.forEach((attr, index) => {
+                attr.deepPick(result.attrList[index], ['id', 'expression']);
+            });
+            this.directiveList.forEach((directive, index) => {
+                directive.deepPick(result.directiveList[index], ['id', 'expression']);
+            });
+            this.eventList.forEach((event, index) => {
+                event.deepPick(result.eventList[index], ['id']);
+            });
+        }
+
+        this.view && this.view.emit('change');
+
+        if (actionOptions?.loadHistory !== false) {
+            await config.defaultApp?.history.load(actionOptions?.actionMode !== ACTION_MODE.undoRedo && {
+                operationAction: 'Element.create',
+                operationBeforeImage: null,
+                operationAfterImage: JSON.parse(JSON.stringify(this)),
+                operationDesc: `添加组件"${this.getElementTitle()}"`,
+            });
             config.defaultApp?.emit('saved');
-            }
-            return this;
+        }
+        return this;
     }
     /**
      * 删除元素
@@ -230,6 +234,7 @@ export class Element extends Vertex {
             const index = this.parent.children.indexOf(this);
             ~index && this.parent.children.splice(index, 1);
             this.view && this.view.emit('local-change');
+            this.view.removeComponentName(this.name);
             return this;
         }
 
@@ -240,16 +245,16 @@ export class Element extends Vertex {
 
         if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
             if (this.id) {
-                    await elementService.delete({
-                        headers: {
-                            appId: config.defaultApp?.id,
-                            operationAction: 'Element.delete',
-                            operationDesc: `删除组件"${this.getElementTitle()}"`,
-                        },
-                        query: {
-                            id: this.id,
-                        },
-                    }).catch(catchFn(this.view));
+                await elementService.delete({
+                    headers: {
+                        appId: config.defaultApp?.id,
+                        operationAction: 'Element.delete',
+                        operationDesc: `删除组件"${this.getElementTitle()}"`,
+                    },
+                    query: {
+                        id: this.id,
+                    },
+                }).catch(catchFn(this.view));
             }
         }
 
@@ -266,6 +271,8 @@ export class Element extends Vertex {
             });
             config.defaultApp?.emit('saved');
         }
+        // 递归删除组件名的缓存
+        this.deepRemoveComponentName();
     }
     /**
       * 修改元素
@@ -274,32 +281,32 @@ export class Element extends Vertex {
             config.defaultApp?.emit('saving');
 
             source && this.assign(source);
-                if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
-                    const body = this.toPlainJSON();
-                    utils.logger.debug('修改组件', body);
-                    await elementService.update({
-                        headers: {
-                            appId: config.defaultApp?.id,
-                            operationAction: actionOptions?.actionName || 'Element.update',
-                            operationDesc: actionOptions?.actionDesc || `修改组件"${this.getElementTitle()}"`,
-                        },
-                        body,
-                    }).catch(catchFn(this.view));
-                }
+            if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
+                const body = this.toPlainJSON();
+                utils.logger.debug('修改组件', body);
+                await elementService.update({
+                    headers: {
+                        appId: config.defaultApp?.id,
+                        operationAction: actionOptions?.actionName || 'Element.update',
+                        operationDesc: actionOptions?.actionDesc || `修改组件"${this.getElementTitle()}"`,
+                    },
+                    body,
+                }).catch(catchFn(this.view));
+            }
 
-                this.view && this.view.emit('change');
-                await config.defaultApp?.history.load(actionOptions?.actionMode !== ACTION_MODE.undoRedo && {
-                    operationAction: 'Element.update',
-                    operationBeforeImage: null,
-                    operationAfterImage: null,
-                    operationDesc: `修改组件"${this.getElementTitle()}"`,
-                });
+            this.view && this.view.emit('change');
+            await config.defaultApp?.history.load(actionOptions?.actionMode !== ACTION_MODE.undoRedo && {
+                operationAction: 'Element.update',
+                operationBeforeImage: null,
+                operationAfterImage: null,
+                operationDesc: `修改组件"${this.getElementTitle()}"`,
+            });
 
                 config.defaultApp?.emit('saved');
                 return this;
     }
 
-        /**
+    /**
      * 按当前 id 加载逻辑数据
      */
     async load() {
@@ -379,6 +386,8 @@ export class Element extends Vertex {
 
         const index = this.parent.children.indexOf(this);
         const newNode = Element.fromHTML(code, this.parent, this.view);
+        // 复制的元素需重新命名
+        newNode.initComponentName();
 
         const mergeExpression = (originList: Array<Attr|Directive>, newList: Array<Attr|Directive>) => {
             newList.forEach((item) => {
@@ -436,7 +445,7 @@ export class Element extends Vertex {
         // 处理弹窗组件的命名问题
         if (newNode.tag === 'u-modal') {
             Object.assign(newNode, {
-                name: utilsAll.unique('saveModal1', existingNames as any),
+                name: utils.unique('saveModal1', existingNames as any),
             });
         }
 
@@ -496,7 +505,7 @@ export class Element extends Vertex {
         await this.update(undefined, {
             actionDesc: `设置组件"${this.getElementTitle()}"的名称为"${name}"`,
         });
-        
+
         if (!(window as any).globalData.hasUserCenter) {
             // 同步权限
             new Nuims({
@@ -844,6 +853,39 @@ export class Element extends Vertex {
             }
         }
     }
+
+    // 初始化组件名
+    public initComponentName() {
+        const name = this.genComponentName();
+        this.assign({ name });
+        this.view.addComponentName(name);
+    }
+
+    // 生成新的组件名
+    public genComponentName(): string {
+        const compNameSet = this.view.componentNameSet;
+        const tagName = this.tag.replace(Element.TAG_NAME_REG, '').replace(/-/g, '_');
+        const componentName = utils.unique(tagName + '1', compNameSet);
+        return componentName;
+    }
+
+    // 递归删除组件名的缓存
+    public deepRemoveComponentName(): void {
+        return this.traverseChildren((ele: Element) => {
+            this.view.removeComponentName(ele.name);
+        });
+    }
+
+    // 递归遍历组件
+    public traverseChildren(cb: (ele: Element) => void): void {
+        return (function loop(item: Element) {
+            cb(item);
+            if (item.children?.length) {
+                item.children.forEach(loop);
+            }
+        })(this);
+    }
+
     /**
      * 从 Vue 的 ASTNode 转换成 ASL 元素
      * @param astNode Vue 的 ASTNode
@@ -1322,6 +1364,10 @@ export class Element extends Vertex {
         const element = this.parse(html, context);
         utils.traverse((current) => {
             current.node.assign({ view, parent: current.parent });
+            // 生成唯一组件名 依赖element.view
+            if (!current.node.name) {
+                current.node.initComponentName();
+            }
         }, { node: element, parent });
         return element;
     }
@@ -1340,6 +1386,10 @@ export class Element extends Vertex {
             view,
             parent,
         });
+        // // 生成唯一组件名 依赖element.view
+        // if (!element.name) {
+        //     element.initComponentName();
+        // }
 
         return element;
     }

package/src/types/page/View.ts

@@ -1,6 +1,5 @@
-
 import { immutable, circular, action, excludedInJSON } from '../decorators';
-import { config, history, LEVEL_ENUM, Vertex, PackageJSON, App, Enum, Service, WebService, Structure, Page, Element, utils, ViewParam, ViewVariable, Lifecycle, genFinalCode, generator, Nuims, ActionOptions, ACTION_MODE, vertexsMap, updateDataTypeList, Interface, LogicItem } from '..';
+import { config, history, LEVEL_ENUM, Vertex, PackageJSON, App, Enum, Service, WebService, Structure, Page, Element, utils, ViewParam, ViewVariable, Lifecycle, genFinalCode, generator, Nuims, ActionOptions, ACTION_MODE, vertexsMap, updateDataTypeList, Interface } from '..';
 import Block from './Block';
 import { viewService } from '../../service/page';
 import { Param } from '../logic/Param';
@@ -17,14 +16,6 @@ import * as babel from '@babel/core';
 import view from '@/service/page/view';
 import Entity from '../data/Entity';
 import { postServiceType } from '../../service/common/preprocess';
-export interface FrontEndsourceMap {
-    [id: string]: {
-        isLogic: boolean,
-        node: LogicItem,
-        from: number,
-        to: number,
-    }
-}
 import { catchFn } from './Page';
 
 /**
@@ -121,9 +112,6 @@ export class View extends Block {
      */
     @excludedInJSON()
     public contentPromise: Promise<any> = undefined;
-
-    @excludedInJSON()
-    public sourceMap: FrontEndsourceMap = {};
     /**
      * 输入参数
      */
@@ -140,6 +128,12 @@ export class View extends Block {
      */
     @immutable()
     public readonly moreChildrenFields: Array<string> = ['$def.params', '$def.variables', '$def.logics'];
+    /**
+     * 当前View中所有组件名的缓存
+     */
+    @immutable()
+    public readonly componentNameSet: Set<string> = new Set();
+
     /**
      * @param source 需要合并的部分参数
      */
@@ -208,7 +202,6 @@ export class View extends Block {
                 // def 情况比较特殊，需要单独处理，防止逻辑重新加载
                 this._syncDef($def);
                 this.attachNodePath(true);
-                this.toVueOptions();
                 return this;
             } catch (err) { }
         })().finally(() => this.contentPromise = undefined);
@@ -219,30 +212,30 @@ export class View extends Block {
             return this.contentPromise;
 
         return this.contentPromise = (async () => {
-                const result: View = await viewService.load({
-                    path: {
-                        id: this.id,
-                    },
-                    query: {
-                        enableCache,
-                    },
-                    config: { noErrorTip: true },
-                });
-                const oldLogics = this.$def.logics;
-                Object.assign(result, {
-                    children: this.children,
-                })
-                const temp = View.from(result, this.parent, this.page, this);
-                const newLogics = temp.$def.logics;
-                oldLogics.forEach((logic) => {
-                    if(!newLogics.find((item) => item.id === logic.id))
-                        logic.destroy();
-                });
-                this.assign(temp);
-                utils.traverse((current) => {
-                    current.node.attachNodePath(true);
-                }, { node: this });
-                return this;
+            const result: View = await viewService.load({
+                path: {
+                    id: this.id,
+                },
+                query: {
+                    enableCache,
+                },
+                config: { noErrorTip: true },
+            });
+            const oldLogics = this.$def.logics;
+            Object.assign(result, {
+                children: this.children,
+            });
+            const temp = View.from(result, this.parent, this.page, this);
+            const newLogics = temp.$def.logics;
+            oldLogics.forEach((logic) => {
+                if (!newLogics.find((item) => item.id === logic.id))
+                    logic.destroy();
+            });
+            this.assign(temp);
+            utils.traverse((current) => {
+                current.node.attachNodePath(true);
+            }, { node: this });
+            return this;
         })().finally(() => this.contentPromise = undefined);
     }
     isContentLoaded() {
@@ -430,16 +423,16 @@ export class View extends Block {
         if (!this.parent)
             throw Error('该子页面为根节点！');
 
-            await viewService.delete({
-                headers: {
-                    appId: config.defaultApp?.id,
-                    operationAction: actionOptions?.actionName || 'View.delete',
-                    operationDesc: actionOptions?.actionDesc || `删除子页面"${this.name}${this.title ? `(${this.title})` : ''}"`,
-                },
-                path: {
-                    id: this.id,
-                },
-            }).catch(catchFn());
+        await viewService.delete({
+            headers: {
+                appId: config.defaultApp?.id,
+                operationAction: actionOptions?.actionName || 'View.delete',
+                operationDesc: actionOptions?.actionDesc || `删除子页面"${this.name}${this.title ? `(${this.title})` : ''}"`,
+            },
+            path: {
+                id: this.id,
+            },
+        }).catch(catchFn());
 
         const index = this.parent.children.indexOf(this);
         ~index && this.parent.children.splice(index, 1);
@@ -681,6 +674,7 @@ export class View extends Block {
         let componentOptions = 'const componentOptions = {};';
         if (this.script)
             componentOptions = this.script.trim().replace(/export default |module\.exports +=/, 'const componentOptions = ');
+
         const $def = JSON.parse(JSON.stringify(this.$def));
         $def.title = this.title;
         $def.crumb = this.crumb;
@@ -706,16 +700,10 @@ export class View extends Block {
         //         );
         //     }
         // }, { node: $def }, { mode: 'anyObject' });
-        const {
-            output,
-            sourceMap,
-        } = translator($def, this.script);
-        return {
-            script: `${componentOptions}${genFinalCode(output, options && options.finalCode)}
+        return `${componentOptions}
+        ${genFinalCode(translator($def), options && options.finalCode)}
         export default componentOptions;
-`,
-            sourceMap,
-        };
+`;
     }
     /**
      * 转换成 Vue 文件
@@ -749,12 +737,9 @@ export class View extends Block {
      * @TODO 后面 template 可以优化成 render 函数
      */
     toVueOptions(options?: ElementToVueOptions) {
-        const { script, sourceMap } = this.toScript(options);
-        this.sourceMap = sourceMap;
         return {
             template: this.$html.toVue(options),
-            script,
-            sourceMap,
+            script: this.toScript(options),
             // definition: JSON.stringify(this.$def),
         };
     }
@@ -928,6 +913,39 @@ export class View extends Block {
         // config.defaultApp?.emit('saved');
     }
 
+    // 遍历页面缓存所有组件名
+    traverseAllComponentName(): void {
+        utils.traverse(({ node }) => {
+            node && this.componentNameSet.add(node.name);
+        }, { node: this.$html });
+    }
+
+    // 组件名是否有效
+    isValidComponentName(name: string): boolean {
+        if (name) {
+            return !this.componentNameSet.has(name);
+        }
+        return false;
+    }
+
+    // 保存组件名至缓存
+    addComponentName(nameOrElement: string | Element) {
+        let name: string = nameOrElement as string;
+        if (nameOrElement instanceof Element) {
+            name = nameOrElement.name;
+        }
+        return this.componentNameSet.add(name);
+    }
+
+    // 在缓存中移除组件名
+    removeComponentName(nameOrElement: string | Element): void {
+        let name: string = nameOrElement as string;
+        if (nameOrElement instanceof Element) {
+            name = nameOrElement.name;
+        }
+        this.componentNameSet.delete(name);
+    }
+
     _removeDef($def: View['$def']) {
         const removedParams = this.$def.params.filter((param) => $def.params?.find((item) => param.id === item.id));
         this.$def.params = this.$def.params.filter((param) => !$def.params?.find((item) => param.id === item.id));