From 7fdd11b598d67ec008ea20c982fbf93f603d9809 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, 23 Jan 2026 09:57:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(core):=20Mixly.Component=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=8D=B8=E8=BD=BD=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/mixly-modules/common/component.js | 17 ++++++++++++---
 .../mixly-modules/common/pages-manager.js     | 21 +++++++------------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/common/modules/mixly-modules/common/component.js b/common/modules/mixly-modules/common/component.js
index 12b57cbd..49de1fd8 100644
--- a/common/modules/mixly-modules/common/component.js
+++ b/common/modules/mixly-modules/common/component.js
@@ -20,10 +20,18 @@ class Component {
     constructor() {}
 
     mountOn($container) {
-        $container.append(this.getContent());
+        if (this.#mounted_) {
+            this.unmount();
+        }
+        $container.append(this.#$content_);
         this.onMounted();
     }
 
+    unmount() {
+        this.#$content_ && this.#$content_.detach();
+        this.onUnmounted();
+    }
+
     onMounted() {
         this.#mounted_ = true;
     }
@@ -64,9 +72,12 @@ class Component {
 
     dispose() {
         this.#$content_.remove();
-        this.resetEvent();
-        this.#disposed_ = true;
+        this.#$content_ = null;
         this.runEvent('destroyed');
+        this.resetEvent();
+        this.#events_ = null;
+        this.#disposed_ = true;
+        this.#mounted_ = false;
     }
 
     bind(type, func) {
diff --git a/common/modules/mixly-modules/common/pages-manager.js b/common/modules/mixly-modules/common/pages-manager.js
index 0ec2c666..aaecf27a 100644
--- a/common/modules/mixly-modules/common/pages-manager.js
+++ b/common/modules/mixly-modules/common/pages-manager.js
@@ -16,6 +16,7 @@ class PagesManager extends Component {
     #welcomePage_ = null;
     #$editorContainer_ = null;
     #$tabsContainer_ = null;
+    #$parentContainer_ = null;
     #pagesRegistry_ = new Registry();
     #page_ = 'welcome';
     #activeId_ = null;
@@ -33,7 +34,7 @@ class PagesManager extends Component {
      **/
     constructor(config) {
         super();
-        const $parentContainer = $(config.parentElem);
+        this.#$parentContainer_ = $(config.parentElem);
         const $content = $(config.managerContentElem);
         this.#typesRegistry_ = config.typesRegistry;
         this.#$tabsContainer_ = $(config.tabElem);
@@ -44,7 +45,7 @@ class PagesManager extends Component {
         });
         $content.append(this.#$editorContainer_);
         this.setContent($content);
-        this.mountOn($parentContainer);
+        this.mountOn(this.#$parentContainer_);
         let PageType = this.#typesRegistry_.getItem('#welcome');
         if (PageType) {
             this.#welcomePage_ = new PageType();
@@ -67,8 +68,7 @@ class PagesManager extends Component {
             if (prevEditor) {
                 const $prevTab = prevEditor.getTab();
                 $prevTab.find('.chrome-tab-favicon').removeClass('active');
-                prevEditor.getContent().detach();
-                prevEditor.onUnmounted();
+                prevEditor.unmount();
             }
             this.#$editorContainer_.empty();
             this.#$editorContainer_.append(page.getContent());
@@ -115,19 +115,14 @@ class PagesManager extends Component {
     }
 
     #showWelcomePage_() {
-        const $parent = this.getContent().parent();
-        this.getContent().detach();
-        $parent.append(this.#welcomePage_.getContent());
-        this.#welcomePage_.onMounted();
+        this.unmount();
+        this.#welcomePage_.mountOn(this.#$parentContainer_);
         this.#page_ = 'welcome';
     }
 
     #hideWelcomePage_() {
-        const $page = this.#welcomePage_.getContent();
-        const $parent = $page.parent();
-        $page.detach();
-        this.#welcomePage_.onUnmounted();
-        $parent.append(this.getContent());
+        this.#welcomePage_.unmount();
+        this.mountOn(this.#$parentContainer_);
         this.#page_ = 'editor';
     }