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,44 +1,28 @@
 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>');
-    #shown_ = false;
+        $(document.body).append(this.$container);
-    constructor(selector) {
-        super(selector, {
-            trigger: 'none',
-            position: (opt) => {
-                opt.$menu.css({
-                    top: 0,
-                    left: 0,
-                    position: 'relative',
-                    margin: 0
-                });
-            },
-            events: {
-                show: (opt) => {
-                    opt.$menu.detach();
-                    $('body > .mixly-drapdown-menu > .tippy-box > .tippy-content').empty().append(opt.$menu);
-                    this.#layer_.setProps({});
-                    this.#shown_ = true;
-                },
-                hide: (opt) => {
-                    this.#shown_ = false;
-                    if (this.#layer_.state.isShown) {
-                        this.#layer_.hide();
     }
-                }
-            }
-        });
 
-        this.#layer_ = tippy($(selector)[0], {
+    #shown_ = false;
+    #layer_ = null;
+    #contextMenuId_ = '';
+    #$contextMenuElem_ = null;
+    constructor(elem) {
+        const layer = tippy(elem, {
             allowHTML: true,
             content: '',
             trigger: 'click',
@@ -53,18 +37,58 @@ class DropdownMenu extends ContextMenu {
             onCreate: (instance) => {
                 $(instance.popper).addClass('mixly-drapdown-menu');
             },
-            onMount: (instance) => {
+            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('margin', 0);
+            },
+            events: {
+                show: () => {
+                    this.#shown_ = true;
+                    this.#layer_.setProps({});
+                },
+                hide: () => {
+                    this.#shown_ = false;
+                    if (this.#layer_.state.isShown) {
+                        this.#layer_.hide();
+                    }
+                }
+            }
+        });
+
+        this.#$contextMenuElem_ = $(`<div m-id="${contextMenuId}"><div>`);
+        DropdownMenu.$container.append(this.#$contextMenuElem_);
+        this.#contextMenuId_ = contextMenuId;
+        this.#layer_ = layer;
+    }
+
+    show() {
+        this.#$contextMenuElem_.contextMenu();
+    }
+
+    hide() {
+        this.#$contextMenuElem_.contextMenu('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": [