@lcap/nasl 0.3.9-beta → 0.3.10-beta.10

package/src/types/page/Element.ts

@@ -1,14 +1,14 @@
-// import stringify = require('json-stringify-safe');
 import { action, circular, excludedInJSON, immutable } from '../decorators';
-import { config, history, utils, LEVEL_ENUM, Vertex, PackageJSON, App, Page, DataNode, View, Attr, Directive, Event, ExpressionNode, Logic, dataTypesMap, Entity, LogicItem, ActionOptions, ACTION_MODE, Nuims, Structure } from '..';
+import { config, utils, LEVEL_ENUM, Vertex, View, Attr, Directive, Event, ExpressionNode, dataTypesMap, LogicItem, ActionOptions, ACTION_MODE, Nuims, Structure } from '..';
 import * as compiler from 'vue-template-compiler';
 import * as json5 from 'json5';
-import { elementService, attributeService, eventService, directiveService } from '../../service/page';
+import { elementService } from '../../service/page';
 import { vertexsMap } from '../cacheData';
 import Variable from '../logic/Variable';
 import * as babelParser from '@babel/parser';
-import { traverse } from '../utils';
-import { isPlainObject, cloneDeep } from 'lodash';
+import { isPlainObject, cloneDeep, mapValues } from 'lodash';
+import { refreshHtml } from '../cache';
+import { BusinessCode } from '../enum';
 
 export interface ElementToVueOptions {
     indentStyle?: 'space' | 'tab';
@@ -28,6 +28,18 @@ export interface ParseContext {
     [key: string]: any;
 }
 
+export function catchFn(view: View) {
+    return async (err: any) => {
+        if (err.code !== BusinessCode.HasReferenced) // 节点被引用，不用刷新数据
+            await refreshHtml(view);
+        else
+            config.defaultApp?.emit('saved', err);
+
+        config.defaultApp?.history.load();
+        throw err;
+    };
+}
+
 /**
  * 前端页面元素
  * @example
@@ -63,6 +75,12 @@ export class Element extends Vertex {
      */
     @immutable()
     public readonly name: string = undefined;
+
+    /*
+    * 描述信息
+    */
+    @immutable()
+    public readonly description: string = undefined;
     /**
      * 属性列表
      * 和原来的 attrsList 不同，注意区分
@@ -142,15 +160,23 @@ export class Element extends Vertex {
      */
     @immutable()
     public readonly children?: Array<Element> = [];
+    /**
+     * 标签名前缀
+     */
+    @immutable()
+    public static readonly TAG_NAME_REG?: RegExp = /^([lieu]|van)[-_]/;
+    /**
+     * 忽略命名的标签
+     */
+    @immutable()
+    public static readonly ignoreTag?: Array<string> = ['div', 'span'];
+
     /**
      * @param source 需要合并的部分参数
      */
     constructor(source?: Partial<Element>) {
         super();
         source && this.assign(source);
-        // 为了给生成的节点使用
-        // !this.id && this.assign({ id: uuidv4() });
-        // this.assign({ id: 'temp-' + uuidv4() });
     }
     assign(source?: any) {
         ['attrList', 'eventList', 'directiveList', 'children'].forEach((key) => {
@@ -170,62 +196,45 @@ export class Element extends Vertex {
         }
 
         config.defaultApp?.emit('saving');
-        try {
-            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,
-                });
-
-                // Nuims createResource
-                // Element 对应资源增删在 undo/redo 情况下可能存在权限丢失的情况
-                // 暂时只增不减
-                // new Nuims({
-                //     domainName: this.view.page.service.app.name,
-                //     element: this,
-                // }).createResource();
-
-                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,expression需要合并
+            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;
-        } catch (err) {
-            if (this.view) {
-                await this.view.load();
-                this.view.emit('change');
-                config.defaultApp?.emit('saved');
-            }
-            throw err;
         }
+        return this;
     }
     /**
      * 删除元素
@@ -235,6 +244,7 @@ export class Element extends Vertex {
         if (actionOptions?.actionMode === ACTION_MODE.local) {
             const index = this.parent.children.indexOf(this);
             ~index && this.parent.children.splice(index, 1);
+            this.deepRemoveElementsName();
             this.view && this.view.emit('local-change');
             return this;
         }
@@ -246,34 +256,24 @@ export class Element extends Vertex {
 
         if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
             if (this.id) {
-                try {
-                    await elementService.delete({
-                        headers: {
-                            appId: config.defaultApp?.id,
-                            operationAction: 'Element.delete',
-                            operationDesc: `删除组件"${this.getElementTitle()}"`,
-                        },
-                        query: {
-                            id: this.id,
-                        },
-                    });
-                } catch (err) {
-                    await config.defaultApp?.history.load();
-                    throw err;
-                }
-
-                // Nuims deleteResource
-                // Element 对应资源增删在 undo/redo 情况下可能存在权限丢失的情况
-                // 暂时只增不减
-                // new Nuims({
-                //     domainName: this.view.page.service.app.name,
-                //     element: this,
-                // }).deleteResources();
+                await elementService.delete({
+                    headers: {
+                        appId: config.defaultApp?.id,
+                        operationAction: 'Element.delete',
+                        operationDesc: `删除组件"${this.getElementTitle()}"`,
+                    },
+                    query: {
+                        id: this.id,
+                    },
+                }).catch(catchFn(this.view));
             }
         }
 
         const index = this.parent.children.indexOf(this);
         ~index && this.parent.children.splice(index, 1);
+
+        // 递归删除组件名的缓存
+        this.deepRemoveElementsName();
         this.destroy();
         this.view && this.view.emit('change');
         if (actionOptions?.loadHistory !== false) {
@@ -293,39 +293,51 @@ export class Element extends Vertex {
             config.defaultApp?.emit('saving');
 
             source && this.assign(source);
-            try {
-                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,
-                    });
-                }
+            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, // JSON.parse(JSON.stringify(this)),
-                    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;
-            } catch (err) {
-                if (this.view) {
-                    await this.view.load();
-                    this.view.emit('change');
-                    config.defaultApp?.emit('saved');
-                }
-                throw err;
-            }
     }
+
+    /**
+     * 按当前 id 加载逻辑数据
+     */
+    async load() {
+        if (!this.id)
+            return;
+
+        const result = await elementService.load({
+            headers: {
+                appId: config.defaultApp?.id,
+            },
+            query: {
+                id: this.id,
+            },
+            config: { noErrorTip: true },
+        });
+        const newElement = Element.from(result, this.parent, this.view);
+        this.assign(newElement);
+    }
+
     async move(options: {
         parentId?: string,
         _posIndex?: number,
@@ -363,11 +375,16 @@ export class Element extends Vertex {
             }
 
             config.defaultApp?.emit('element.moved');
+            config.defaultApp?.emit('saved');
         } catch (err) {
             if (this.view) {
                 await this.view.load();
                 this.view.emit('change');
             }
+            config.defaultApp?.emit('saved', {
+                action: 'move',
+                err,
+            });
             throw err;
         }
     }
@@ -381,6 +398,9 @@ export class Element extends Vertex {
 
         const index = this.parent.children.indexOf(this);
         const newNode = Element.fromHTML(code, this.parent, this.view);
+        // 复制的元素需重新命名
+        newNode.deepRenameElements();
+
         const mergeExpression = (originList: Array<Attr|Directive>, newList: Array<Attr|Directive>) => {
             newList.forEach((item) => {
                 const originItem = originList.find((originItem) => originItem.name === item.name);
@@ -432,6 +452,15 @@ export class Element extends Vertex {
             }
         };
 
+        const arrayComp = this.findElementsByTag('u-modal');
+        const existingNames = Object.values(mapValues(arrayComp, (o) => o.name));
+        // 处理弹窗组件的命名问题
+        if (newNode.tag === 'u-modal') {
+            Object.assign(newNode, {
+                name: utils.unique('saveModal1', existingNames as any),
+            });
+        }
+
         traverseMergeNode(this, newNode);
         ~index && this.parent.children.splice(index + 1, 0, newNode);
         this.parent.children.forEach((item, index) => {
@@ -457,6 +486,8 @@ export class Element extends Vertex {
         }
         if (isPlainObject(child)) {
             child = Element.from(child, this, this.view);
+            child.initElementName();
+            child.deepRenameElements();
         }
         if (!this.children.includes(child)) {
             const index = child._posIndex === undefined ? this.children.length : child._posIndex;
@@ -488,17 +519,36 @@ export class Element extends Vertex {
         await this.update(undefined, {
             actionDesc: `设置组件"${this.getElementTitle()}"的名称为"${name}"`,
         });
-        // 同步权限
-        new Nuims({
-            domainName: this.view.page.service.app.name,
-            element: this,
-        }).editResourceFromResourceValue(oldName ? `${this.view.tempPath}/${oldName}` : null);
+
+        if (!(window as any).globalData.hasUserCenter) {
+            // 同步权限
+            new Nuims({
+                domainName: this.view.page.service.app.name,
+                element: this,
+            }).editResourceFromResourceValue(oldName ? `${this.view.tempPath}/${oldName}` : null);
+        }
 
         this.view && this.view.emit('change');
         if (this.view && this.view.page && this.view.page.service) {
             this.view.page.service.emit('vertexIdToNameChange', this.id, this.name);
         }
     }
+
+    /**
+     * 更新描述信息
+     * @param description 
+     */
+    async setDescription(description: string) {
+        this.assign({ description });
+        await this.update(undefined, {
+            actionDesc: `设置组件"${this.getElementTitle()}"的描述为"${description}"`,
+        });
+
+        this.view && this.view.emit('change');
+        if (this.view && this.view.page && this.view.page.service) {
+            this.view.page.service.emit('vertexIdToNameChange', this.id, this.name);
+        } 
+    }
     /**
      * 添加组件属性
      */
@@ -541,9 +591,7 @@ export class Element extends Vertex {
     async setAttr(name: string, type: 'string' | 'static' | 'dynamic', value?: any) {
         let attr = this.getAttr(name);
         //
-        if (value === undefined) {
-
-        } else {
+        if (value !== undefined) {
             if (typeof value !== 'string')
                 value = JSON.stringify(value);
 
@@ -554,7 +602,7 @@ export class Element extends Vertex {
                 });
                 await attr.update(undefined, {
                     actionDesc: `设置组件"${this.getElementTitle()}"属性"${attr.name}"的值为"${attr.value}"`,
-                });
+                }).catch(catchFn(this.view));
             } else {
                 attr = Attr.from({
                     name,
@@ -564,7 +612,7 @@ export class Element extends Vertex {
                 }, this);
                 await attr.create(undefined, {
                     actionDesc: `设置组件"${this.getElementTitle()}"属性"${attr.name}"的值为"${attr.value}"`,
-                });
+                }).catch(catchFn(this.view));
                 this.attrList.push(attr);
             }
         }
@@ -581,7 +629,7 @@ export class Element extends Vertex {
 
         await event.create(undefined, Object.assign({
             actionDesc: `添加组件"${this.getElementTitle()}"事件"${event.name}"`,
-        }, actionOptions));
+        }, actionOptions)).catch(catchFn(this.view));
         event = Event.from(event, this);
         this.eventList.push(event);
 
@@ -604,7 +652,7 @@ export class Element extends Vertex {
 
         await event.delete(undefined, Object.assign({
             actionDesc: `删除组件"${this.getElementTitle()}"事件"${event.name}"`,
-        }, actionOptions));
+        }, actionOptions)).catch(catchFn(this.view));
         const index = this.eventList.indexOf(event);
         ~index && this.eventList.splice(index, 1);
 
@@ -622,7 +670,7 @@ export class Element extends Vertex {
         const directive = new Directive(data);
         await directive.create(undefined, Object.assign({
             actionDesc: `添加组件"${this.getElementTitle()}"指令"${directive.name}"`,
-        }, actionOptions));
+        }, actionOptions)).catch(catchFn(this.view));
         this.directiveList.push(Directive.from(directive, this));
 
         this.view && this.view.emit('change');
@@ -639,7 +687,7 @@ export class Element extends Vertex {
 
         await directive.delete(undefined, Object.assign({
             actionDesc: `删除组件"${this.getElementTitle()}"属性"${directive.name}"`,
-        }, actionOptions));
+        }, actionOptions)).catch(catchFn(this.view));
         const index = this.directiveList.indexOf(directive);
         ~index && this.directiveList.splice(index, 1);
 
@@ -721,8 +769,11 @@ export class Element extends Vertex {
                 if (attr.level === LEVEL_ENUM.attr) {
                     const api = config.allNodesAPI[el.tag];
                     const apiOfAttr = api && api.attrs && api.attrs.find((_attr) => _attr.name === attr.name);
-                    if (apiOfAttr && apiOfAttr['designer-value']) {
-                        const designerValue = apiOfAttr['designer-value'].replace(/"/g, '\'');
+                    if (apiOfAttr && apiOfAttr['designer-value'] !== undefined) {
+                        let designerValue = apiOfAttr['designer-value'];
+                        if (typeof designerValue === 'string') {
+                            designerValue = designerValue.replace(/"/g, '\'');
+                        }
                         try {
                             json5.parse(designerValue);
                             return `:${attr.name}="${designerValue}"`;
@@ -808,6 +859,73 @@ export class Element extends Vertex {
             }
         }
     }
+
+    findElementsByTag(tag: string): Array<any> {
+        let existingNames: Array<any> = [];
+        existingNames = this.findElementsByTagCurrent(tag, existingNames);
+        this.findElementsByTagInChildren(this.view.$html.children, tag, existingNames);
+        return existingNames;
+    }
+
+    findElementsByTagCurrent(tag: string, existingNames: Array<any>) {
+        if (this.tag === tag) {
+            existingNames.push(this);
+        }
+        return existingNames;
+    }
+
+    findElementsByTagInChildren(children: Array<any>, tag: string, existingNames: Array<any>) {
+        for (const child of children) {
+            const result = child.findElementByTag(tag);
+
+            if (child.children) {
+                this.findElementsByTagInChildren(child.children, tag, existingNames);
+            }
+            if (result) {
+                existingNames.push(result);
+            }
+        }
+    }
+
+    // 初始化组件名
+    public initElementName() {
+        if (Element.ignoreTag.includes(this.tag)) {
+            return;
+        }
+        const name = this.genElementName();
+        this.assign({ name });
+        this.view.addElementName(name);
+    }
+
+    // 生成新的组件名
+    public genElementName(): string {
+        const compNameSet = this.view.elementNameSet;
+        const tagName = this.tag.replace(Element.TAG_NAME_REG, '').replace(/-/g, '_');
+        const componentName = utils.unique(tagName + '1', compNameSet);
+        return componentName;
+    }
+
+    // 递归生成组件名
+    public deepRenameElements(): void {
+        return this.traverseChildren((ele: Element) => {
+            ele.initElementName();
+        });
+    }
+
+    // 递归删除组件名的缓存
+    public deepRemoveElementsName(): void {
+        return this.traverseChildren((ele: Element) => {
+            this.view.removeElementName(ele.name);
+        });
+    }
+
+    // 递归遍历组件
+    public traverseChildren(cb: (ele: Element) => void): void {
+        utils.traverse((current) => {
+            cb(current.node);
+        }, { node: this });
+    }
+
     /**
      * 从 Vue 的 ASTNode 转换成 ASL 元素
      * @param astNode Vue 的 ASTNode
@@ -852,8 +970,6 @@ export class Element extends Vertex {
                 }
             }
 
-            // if (astNode.tag === 'template')
-            //     astNode.tag = 'div';
             element = new Element({
                 tag: astNode.tag,
                 name: astNode.attrsMap.ref,
@@ -894,7 +1010,6 @@ export class Element extends Vertex {
                     }
                 }
                 element.attrList.push(attr);
-                // element.attrMap[attr.name] = attr;
             });
 
             // compiler 处理:value.sync 时会加上update:value事件，需要过滤
@@ -906,10 +1021,6 @@ export class Element extends Vertex {
                     value,
                     logicId: value[0] === '$' ? undefined : value,
                 }, element));
-                // element.eventMap[name] = new Event({
-                //     name,
-                //     value: oldEvent.value,
-                // });
             });
 
             astNode.directives && astNode.directives.forEach((directive) => {
@@ -936,7 +1047,6 @@ export class Element extends Vertex {
                         arg: directive.arg,
                         modifiers: directive.modifiers,
                     }, element));
-                    // element.directiveMap[directive.name] = );
                 }
             });
 
@@ -1294,6 +1404,11 @@ 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.initElementName();
+            }
         }, { node: element, parent });
         return element;
     }

package/src/types/page/Event.ts

@@ -3,10 +3,7 @@ import { action, circular, excludedInJSON, immutable } from '../decorators';
 import { config, history, utils, LEVEL_ENUM, Vertex, PackageJSON, App, Page, DataNode, View, Element, ExpressionNode, Logic, genFinalCode, ActionOptions, ACTION_MODE } from '..';
 import { elementService, attributeService, eventService, directiveService } from '../../service/page';
 import * as babel from '@babel/core';
-import { traverse } from '../utils';
-import generate from '@babel/generator';
 import { vertexsMap } from '../cacheData';
-import Variable from '../logic/Variable';
 
 /**
  * 前端组件事件