feat(core): 优化Mixly.DropdownMenu实例化时的输入参数

common/modules/mixly-modules/common/context-menu.js

@@ -41,10 +41,11 @@ class ContextMenu {
         }
     }
 
+    #selector_ = null;
     #menus_ = new Registry();
     #events_ = new Events(['getMenu']);
     constructor(selector, config = {}) {
-        this.selector = selector;
+        this.#selector_ = selector;
         this.menu = $.contextMenu({
             selector,
             build: ($trigger) => {
@@ -67,20 +68,20 @@ class ContextMenu {
         return ContextMenu.generate(menu, $trigger, e);
     }
 
-    dispose() {
-        $.contextMenu('destroy', this.selector);
-        this.#events_.reset();
-        this.#menus_.reset();
-        this.menu = null;
-        this.selector = null;
-    }
-
     show() {
-        $(this.selector).contextMenu();
+        $(this.#selector_).contextMenu();
     }
 
     hide() {
-        $(this.selector).contextMenu('hide');
+        $(this.#selector_).contextMenu('hide');
+    }
+
+    dispose() {
+        $.contextMenu('destroy', this.#selector_);
+        this.#events_.reset();
+        this.#menus_.reset();
+        this.menu = null;
+        this.#selector_ = null;
     }
 
     bind(type, func) {

common/modules/mixly-modules/common/dropdown-menu.js

@@ -1,35 +1,66 @@
 goog.loadJs('common', () => {
 
 goog.require('tippy');
+goog.require('Mixly.IdGenerator');
 goog.require('Mixly.ContextMenu');
 goog.provide('Mixly.DropdownMenu');
 
-const { ContextMenu } = Mixly;
+const {
+    IdGenerator,
+    ContextMenu
+} = Mixly;
 
 
 class DropdownMenu extends ContextMenu {
-    #contextMenu_ = null;
+    static {
-    #layer_ = null;
+        this.$container = $('<div class="mixly-dropdown-menus"></div>');
+        $(document.body).append(this.$container);
+    }
+
     #shown_ = false;
-    constructor(selector) {
+    #layer_ = null;
+    #contextMenuId_ = '';
+    #$contextMenuElem_ = null;
+    constructor(elem) {
+        const layer = tippy(elem, {
+            allowHTML: true,
+            content: '',
+            trigger: 'click',
+            interactive: true,
+            maxWidth: 'none',
+            offset: [0, 0],
+            appendTo: document.body,
+            arrow: false,
+            placement: 'bottom-start',
+            delay: 0,
+            duration: [0, 0],
+            onCreate: (instance) => {
+                $(instance.popper).addClass('mixly-drapdown-menu');
+            },
+            onMount: () => {
+                this.show();
+            },
+            onHide: () => {
+                this.#shown_ && this.hide();
+            }
+        });
+
+        const contextMenuId = IdGenerator.generate();
+        const selector = `body > .mixly-dropdown-menus > div[m-id="${contextMenuId}"]`;
+
         super(selector, {
             trigger: 'none',
+            appendTo: $(layer.popper).children().children(),
+            zIndex: 1001,
             position: (opt) => {
-                opt.$menu.css({
+                opt.$menu.css('margin', 0);
-                    top: 0,
-                    left: 0,
-                    position: 'relative',
-                    margin: 0
-                });
             },
             events: {
-                show: (opt) => {
+                show: () => {
-                    opt.$menu.detach();
-                    $('body > .mixly-drapdown-menu > .tippy-box > .tippy-content').empty().append(opt.$menu);
-                    this.#layer_.setProps({});
                     this.#shown_ = true;
+                    this.#layer_.setProps({});
                 },
-                hide: (opt) => {
+                hide: () => {
                     this.#shown_ = false;
                     if (this.#layer_.state.isShown) {
                         this.#layer_.hide();
@@ -38,33 +69,26 @@ class DropdownMenu extends ContextMenu {
             }
         });
 
-        this.#layer_ = tippy($(selector)[0], {
+        this.#$contextMenuElem_ = $(`<div m-id="${contextMenuId}"><div>`);
-            allowHTML: true,
+        DropdownMenu.$container.append(this.#$contextMenuElem_);
-            content: '',
+        this.#contextMenuId_ = contextMenuId;
-            trigger: 'click',
+        this.#layer_ = layer;
-            interactive: true,
+    }
-            maxWidth: 'none',
+
-            offset: [ 0, 0 ],
+    show() {
-            appendTo: document.body,
+        this.#$contextMenuElem_.contextMenu();
-            arrow: false,
+    }
-            placement: 'bottom-start',
+
-            delay: 0,
+    hide() {
-            duration: [ 0, 0 ],
+        this.#$contextMenuElem_.contextMenu('hide');
-            onCreate: (instance) => {
-                $(instance.popper).addClass('mixly-drapdown-menu');
-            },
-            onMount: (instance) => {
-                this.show();
-            },
-            onHide: () => {
-                this.#shown_ && this.hide();
-            }
-        });
     }
 
     dispose() {
         super.dispose();
         this.#layer_.destroy();
+        this.#layer_ = null;
+        this.#$contextMenuElem_.remove();
+        this.#$contextMenuElem_ = null;
     }
 }
 

common/modules/mixly-modules/common/statusbars-manager.js

@@ -86,6 +86,7 @@ class StatusBarsManager extends PagesManager {
 
     #shown_ = false;
     #dropdownMenu_ = null;
+    #$dropdownBtn_ = null;
 
     constructor(element) {
         const managerHTMLTemplate = HTMLTemplate.get('html/statusbar/statusbars-manager.html');
@@ -103,6 +104,7 @@ class StatusBarsManager extends PagesManager {
         this.tabId = tabHTMLTemplate.id;
         this.id = IdGenerator.generate();
         this.addEventsType(['show', 'hide', 'onSelectMenu', 'getMenu']);
+        this.#$dropdownBtn_ = $tab.find('.statusbar-dropdown-menu > button');
         $tab.find('.statusbar-close > button').click(() => this.hide());
         this.#addDropdownMenu_();
         this.#addEventsListener_();
@@ -146,7 +148,6 @@ class StatusBarsManager extends PagesManager {
     }
 
     #addDropdownMenu_() {
-        const selector = `div[m-id="${this.tabId}"] > .statusbar-dropdown-menu > .layui-btn`;
         let menu = new Menu();
         let serialChildMenu = new Menu(true);
         menu.add({
@@ -239,7 +240,7 @@ class StatusBarsManager extends PagesManager {
                 });
             }
         });
-        this.#dropdownMenu_ = new DropdownMenu(selector);
+        this.#dropdownMenu_ = new DropdownMenu(this.#$dropdownBtn_[0]);
         this.#dropdownMenu_.register('menu', menu);
         this.#dropdownMenu_.bind('getMenu', () => 'menu');
     }
@@ -277,6 +278,9 @@ class StatusBarsManager extends PagesManager {
 
     dispose() {
         StatusBarsManager.remove(this);
+        this.#dropdownMenu_.dispose();
+        this.#$dropdownBtn_.remove();
+        this.#$dropdownBtn_ = null;
         super.dispose();
     }
 }

common/modules/mixly-modules/deps.json

@@ -190,6 +190,7 @@
         "path": "/common/dropdown-menu.js",
         "require": [
             "tippy",
+            "Mixly.IdGenerator",
             "Mixly.ContextMenu"
         ],
         "provide": [