From b5a3a836cb2bfa2a2ed9ac945e962f89e2057594 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E7=AB=8B=E5=B8=AE?= <3294713004@qq.com>
Date: Fri, 2 May 2025 16:31:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(core):=20=E4=BC=98=E5=8C=96Mixly.DropdownM?=
 =?UTF-8?q?enu=E5=AE=9E=E4=BE=8B=E5=8C=96=E6=97=B6=E7=9A=84=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mixly-modules/common/context-menu.js      | 23 ++---
 .../mixly-modules/common/dropdown-menu.js     | 98 ++++++++++++-------
 .../common/statusbars-manager.js              |  8 +-
 common/modules/mixly-modules/deps.json        |  1 +
 4 files changed, 80 insertions(+), 50 deletions(-)

diff --git a/common/modules/mixly-modules/common/context-menu.js b/common/modules/mixly-modules/common/context-menu.js
index c19b949e..20eabcb5 100644
--- a/common/modules/mixly-modules/common/context-menu.js
+++ b/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) {
diff --git a/common/modules/mixly-modules/common/dropdown-menu.js b/common/modules/mixly-modules/common/dropdown-menu.js
index c6220049..e55a2f72 100644
--- a/common/modules/mixly-modules/common/dropdown-menu.js
+++ b/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;
-    #layer_ = null;
+    static {
+        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({
-                    top: 0,
-                    left: 0,
-                    position: 'relative',
-                    margin: 0
-                });
+                opt.$menu.css('margin', 0);
             },
             events: {
-                show: (opt) => {
-                    opt.$menu.detach();
-                    $('body > .mixly-drapdown-menu > .tippy-box > .tippy-content').empty().append(opt.$menu);
-                    this.#layer_.setProps({});
+                show: () => {
                     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], {
-            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: (instance) => {
-                this.show();
-            },
-            onHide: () => {
-                this.#shown_ && this.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;
     }
 }
 
diff --git a/common/modules/mixly-modules/common/statusbars-manager.js b/common/modules/mixly-modules/common/statusbars-manager.js
index e06e7b32..73fac5f6 100644
--- a/common/modules/mixly-modules/common/statusbars-manager.js
+++ b/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();
     }
 }
diff --git a/common/modules/mixly-modules/deps.json b/common/modules/mixly-modules/deps.json
index 37281c1c..4a51e5a8 100644
--- a/common/modules/mixly-modules/deps.json
+++ b/common/modules/mixly-modules/deps.json
@@ -190,6 +190,7 @@
         "path": "/common/dropdown-menu.js",
         "require": [
             "tippy",
+            "Mixly.IdGenerator",
             "Mixly.ContextMenu"
         ],
         "provide": [