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,70 @@
+export class BaseComponent {
+  constructor() {
+    this._timerManager = window.timerManager;
+    this._scriptManager = window.scriptManager;
+    this._eventManager = window.eventManager;
+  }
+
+  /**
+   * 安全绑定事件，并自动记录以记录销毁
+   * @param {string | HTMLElement} target 目标元素
+   * @param {string} type 事件类型
+   * @param {Function} handler 回调函数
+   */
+  bindEvent(target, type, handler) {
+
+    console.log('Bind 1111;')
+    // 获取目标元素
+    const ele = typeof target === 'string' ? document.getElementById(target) : target;
+
+    if (!ele) {
+      console.error(`Element with ID ${target} not found.`);
+      return;
+    }
+
+    ele.addEventListener(type, handler);
+
+    this._eventManager.add(ele, type, handler);
+  }
+
+  /**
+   * 创建定时器
+   * @param {Function} fn 定时器回调函数
+   * @param {number} ms 定时器间隔时间（毫秒）
+   */
+  setInterval(fn, ms) {
+    this._timerManager.setInterval(fn, ms);
+  }
+
+  /**
+   * 创建定时器
+   * @param {Function} fn 定时器回调函数
+   * @param {number} ms 定时器间隔时间（毫秒）
+   */
+  setTimeout(fn, ms) {
+    this._timerManager.setTimeout(fn, ms);
+  }
+
+  /**
+   * 加载脚本
+   * @param {string} path 脚本路径
+   * @param {string} name 脚本名称
+   * @param {boolean} isModule 是否为模块
+   * @param {string[]} deps 依赖的脚本
+   */
+  loadScript(path, name, isModule = false, deps = []) {
+    this._scriptManager.loadScript({path, name, isModule, deps});
+  }
+
+  /**
+   * 销毁组件
+   */
+  destroy() {
+    this._eventManager.removeAll();
+    this._timerManager.cleanAll();
+    this._scriptManager.unloadScript().then(r => console.log(r));
+    console.log('destroy success');
+  }
+}
+
+window.BaseComponent = BaseComponent;