feat(sidepanel): 实现基于组件的架构并优化路由管理

- 引入 BaseComponent 基类统一管理事件、定时器和脚本加载 - 重构 timestamp 模块为继承自 BaseComponent 的类组件 - 新增 ScriptManager 工具类用于动态加载和卸载脚本 - 修改路由配置支持按需加载页面对应的 JS 模块 - 路由切换时自动销毁旧组件实例以防止内存泄漏 - 更新文件引用路径适配新的目录结构 - 修复 rollup 配置中的语法问题及端口配置 - 移除无用的日志输出和冗余代码提升性能
2025-12-12 00:01:00 +08:00
parent 4a76561a85
commit aaefc9c3fc
12 changed files with 281 additions and 245 deletions
@@ -0,0 +1,98 @@
+export class ScriptManager {
+  constructor() {
+    this._loadedClasses = new Map();
+    this.currentScriptEl = null;
+    this.currentModule = null;
+    this.currentName = null;
+  }
+
+  async loadScript({path, name, isModule = false, deps = []}) {
+    console.log('loadScript', name);
+    if (this._loadedClasses.has(name)) {
+      console.log(`Component ${name} loaded from cache`);
+      return this._loadedClasses.get(name);
+    }
+
+    for (const dep of deps) {
+      await this._appendScript({path: dep, isModule: false});
+    }
+
+    let componentReference = null;
+
+    console.log(isModule);
+    if (isModule) {
+      const module = await import(path);
+      this.currentModule = module;
+      componentReference = module;
+    } else {
+      await this._appendScript({path, isModule: false});
+      componentReference = window[name] || null;
+    }
+
+    if (componentReference) {
+      this._loadedClasses.set(name, componentReference);
+    }
+
+    this.currentName = name;
+    return componentReference;
+  }
+
+  async _appendScript({path, isModule}) {
+    const s = document.createElement('script');
+    s.src = path;
+    s.type = isModule ? 'module' : 'text/javascript';
+    s.async = false;
+
+    return new Promise((resolve, reject) => {
+      s.onload = () => {
+        this.currentScriptEl = s;
+        console.log(s);
+        resolve();
+      };
+      s.onerror = () => {
+        reject(new Error(`Failed to load script: ${path}`));
+      }
+      document.body.appendChild(s);
+    });
+  }
+
+  async unloadScript() {
+    console.log('unloadScript');
+    if (this.currentScriptEl) {
+      try {
+        this.currentScriptEl.remove();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+
+    this.currentModule = null;
+    this.currentName = null;
+    this.currentScriptEl = null;
+  }
+
+  async getComponentInstance(name) {
+    const ComponentClassReference = this._loadedClasses.get(name);
+    const BaseClassForCheck = window.BaseComponent;
+
+    if (!ComponentClassReference) {
+      console.error('ComponentClassReference not found');
+      return null
+    }
+
+    const ComponentClass = ComponentClassReference.default
+      || ComponentClassReference;
+
+    if (typeof ComponentClass === 'function') {
+      if (!(ComponentClass.prototype instanceof BaseClassForCheck)) {
+        console.error(`Component ${name} does not inherit BaseComponent.`);
+        return null;
+      }
+
+      return new ComponentClass();
+    }
+
+    console.error(`Component ${name} does not exist`);
+    return null;
+  }
+}