feat(timestamp): 重构时间戳模块并优化时区处理

- 将时区列表提取到独立常量文件 `timezone.js` 中，便于维护和扩展
- 重构时间戳显示逻辑，将初始化功能从事件处理器中分离
- 引入 timerManager、eventManager 和 scriptManager 进行资源统一管理
- 更新 DOM 操作方式，使用 window.eventManager 替代直接 addEventListener
- 改进时间戳更新函数，支持传入元素引用以提高灵活性
- 在路由加载脚本时增加调试日志，方便追踪组件加载过程
- 移除冗余的 DOM 工具函数（如 getElementById），统一使用原生方法
- 修复计时器清理问题，确保通过 timerManager 正确清除定时任务
- 初始化时间戳和日期输入框默认值，提升用户体验

sidepanel/js/const/timezone.js

@@ -0,0 +1,20 @@
+export const timeZoneList = [
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'America/Anchorage',
+  'America/Honolulu',
+  'Europe/London',
+  'Europe/Paris',
+  'Europe/Berlin',
+  'Europe/Moscow',
+  'Asia/Tokyo',
+  'Asia/Shanghai',
+  'Asia/Hong_Kong',
+  'Asia/Singapore',
+  'Asia/Dubai',
+  'Asia/Kolkata',
+  'Australia/Sydney',
+  'Pacific/Auckland',
+];

sidepanel/js/index.js

@@ -26,8 +26,11 @@ const config = {
   ],
 };
 
+// 注入脚本管理器
 window.scriptManager = new ScriptManager();
+// 注入定时器管理器
 window.timerManager = new TimerManager();
+// 注入事件管理器
 window.eventManager = new EventManager();
 
 const router = new Router();

sidepanel/js/timestamp.js

@@ -1,5 +1,4 @@
 import {
-  initTimestampDisplay,
   handleToggleUnit,
   handleStopTimer,
   handleStartTimer,
@@ -10,30 +9,100 @@ import {
   handleTimezoneResult,
   handleTimezoneInput,
 } from '../modules/eventHandlers.js';
+import { updateTimestamp } from '../utils/timestampUtils.js';
 import { addEventListenerById } from '../utils/domUtils.js';
+import { timeZoneList } from './const/timezone.js';
 
-(function (global) {
-  global.timestampInit = async function () {
-    // 初始化时间戳显示
-    initTimestampDisplay();
+// 定义一个全局变量来保存是否显示毫秒
+let showMilliseconds = true;
+// 定义一个全局变量来保存计时器
+let timestampInterval;
+// 获取本地时区
+const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
 
-    // 绑定事件处理器
-    // 绑定时间戳相关按钮事件
-    addEventListenerById('toggle-unit-btn', 'click', handleToggleUnit);
-    // 绑定计时器相关按钮事件
-    addEventListenerById('stop-timer-btn', 'click', handleStopTimer);
-    addEventListenerById('start-timer-btn', 'click', handleStartTimer);
-    // 绑定时间戳转换按钮事件
-    addEventListenerById('convert-timestamp-to-date-btn', 'click', handleConvertTimestamp);
-    // 绑定日期转换按钮事件
-    addEventListenerById('convert-date-to-timestamp-btn', 'click', handleConvertDateToTimestamp);
-    // 绑定复制时间戳按钮事件
-    addEventListenerById('copy-timestamp-btn', 'click', handleCopyTimestamp);
-    // 绑定关闭面板按钮事件
-    addEventListenerById('close-panel-btn', 'click', handleClosePanel);
-    // 绑定切换时区事件
-    addEventListenerById('timezone-result', 'change', handleTimezoneResult);
-    // 绑定输入时区事件
-    addEventListenerById('timezone-input', 'change', handleTimezoneInput);
-  };
-})(window);
+/**
+ * 初始化时间戳显示
+ */
+function initTimestampDisplay() {
+  const currentTimestampValue = document.getElementById('current-timestamp-value');
+
+  // 初始化时更新一次时间戳
+  updateTimestamp(currentTimestampValue, showMilliseconds);
+
+  // 添加时间戳定时器
+  if (timestampInterval) {
+    console.log('clearInterval');
+    clearInterval(timestampInterval);
+    window.timerManager.clearInterval(timestampInterval);
+  }
+  timestampInterval = setInterval(
+    () => updateTimestamp(currentTimestampValue, showMilliseconds),
+    100
+  );
+  window.timerManager.setInterval(timestampInterval);
+
+  initTimeZoneList();
+  initTimestampAndDate();
+}
+
+/**
+ * 初始化时区列表
+ */
+function initTimeZoneList() {
+  const timezoneResultSelect = document.getElementById('timezone-result');
+  const timezoneInputSelect = document.getElementById('timezone-input');
+
+  // 获取本地时区在列表中的索引
+  const localTimeZoneIndex = timeZoneList.indexOf(localTimeZone);
+
+  for (let i = 0; i < timeZoneList.length; i++) {
+    if (i === localTimeZoneIndex) {
+      // 默认选中本地时区
+      timezoneResultSelect.add(new Option(timeZoneList[i], i, true, true));
+      timezoneInputSelect.add(new Option(timeZoneList[i], i, true, true));
+    } else {
+      timezoneResultSelect.add(new Option(timeZoneList[i], i));
+      timezoneInputSelect.add(new Option(timeZoneList[i], i));
+    }
+  }
+}
+
+/**
+ * 初始化时间戳和日期输入框
+ */
+function initTimestampAndDate() {
+  const timestampInput = document.getElementById('timestamp-input');
+  const dateInput = document.getElementById('datetime-input');
+
+  timestampInput.value = Date.now();
+  dateInput.value = new Date().toLocaleString('sv-SE');
+}
+
+// 初始化时间戳显示
+initTimestampDisplay();
+
+// 绑定时间戳相关按钮事件
+addEventListenerById(
+  'toggle-unit-btn',
+  'click',
+  () => (showMilliseconds = handleToggleUnit(showMilliseconds))
+);
+// 绑定计时器相关按钮事件
+addEventListenerById('stop-timer-btn', 'click', () => handleStopTimer(timestampInterval));
+addEventListenerById(
+  'start-timer-btn',
+  'click',
+  () => (timestampInterval = handleStartTimer(timestampInterval, showMilliseconds))
+);
+// 绑定时间戳转换按钮事件
+addEventListenerById('convert-timestamp-to-date-btn', 'click', handleConvertTimestamp);
+// 绑定日期转换按钮事件
+addEventListenerById('convert-date-to-timestamp-btn', 'click', handleConvertDateToTimestamp);
+// 绑定复制时间戳按钮事件
+addEventListenerById('copy-timestamp-btn', 'click', handleCopyTimestamp);
+// 绑定关闭面板按钮事件
+addEventListenerById('close-panel-btn', 'click', handleClosePanel);
+// 绑定切换时区事件
+addEventListenerById('timezone-result', 'change', handleTimezoneResult);
+// 绑定输入时区事件
+addEventListenerById('timezone-input', 'change', handleTimezoneInput);

sidepanel/modules/Router.js

@@ -87,6 +87,7 @@ class Router {
         }
       }
 
+      console.log('当前组件：', route.script);
       if (route.script) {
         await this.scriptManager.loadScript({
           path: route.script,
@@ -96,6 +97,7 @@ class Router {
         });
       }
 
+      console.log('当前组件：', route.name);
       await this.scriptManager.runInit(route.name);
 
       this.currentRoute = route;

sidepanel/modules/eventHandlers.js

@@ -3,85 +3,24 @@ import {
   convertTimestampToDate,
   convertDateToTimestamp,
 } from '../utils/timestampUtils.js';
-import { getElementById } from '../utils/domUtils.js';
 
-// 定义一个全局变量来保存是否显示毫秒
-let showMilliseconds = true;
-// 定义一个全局变量来保存计时器
-let timestampInterval;
-// 定义时区列表
-const timeZoneList = [
-  'America/New_York',
-  'America/Chicago',
-  'America/Denver',
-  'America/Los_Angeles',
-  'America/Anchorage',
-  'America/Honolulu',
-  'Europe/London',
-  'Europe/Paris',
-  'Europe/Berlin',
-  'Europe/Moscow',
-  'Asia/Tokyo',
-  'Asia/Shanghai',
-  'Asia/Hong_Kong',
-  'Asia/Singapore',
-  'Asia/Dubai',
-  'Asia/Kolkata',
-  'Australia/Sydney',
-  'Pacific/Auckland',
-];
-// 获取本地时区
-const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-/**
- * 初始化时间戳显示
- */
-export function initTimestampDisplay() {
-  updateTimestamp(showMilliseconds); // 初始化时更新一次时间戳
-  timestampInterval = setInterval(() => updateTimestamp(showMilliseconds), 100);
-  initTimeZoneList();
-  initTimestampAndDate();
-}
-
-/**
- * 初始化时区列表
- */
-export function initTimeZoneList() {
-  const timezoneResultSelect = getElementById('timezone-result');
-  const timezoneInputSelect = getElementById('timezone-input');
-
-  // 获取本地时区在列表中的索引
-  const localTimeZoneIndex = timeZoneList.indexOf(localTimeZone);
-
-  for (let i = 0; i < timeZoneList.length; i++) {
-    if (i === localTimeZoneIndex) {
-      timezoneResultSelect.add(new Option(timeZoneList[i], i, true, true));
-      timezoneInputSelect.add(new Option(timeZoneList[i], i, true, true));
-    } else {
-      timezoneResultSelect.add(new Option(timeZoneList[i], i));
-      timezoneInputSelect.add(new Option(timeZoneList[i], i));
-    }
-  }
-}
-
-export function initTimestampAndDate() {
-  const timestampInput = getElementById('timestamp-input');
-  const dateInput = getElementById('datetime-input');
-
-  timestampInput.value = Date.now();
-  dateInput.value = new Date().toLocaleString('sv-SE'); // 使用适合<input type="datetime-local">的格式
-}
+import { timeZoneList } from '../js/const/timezone.js';
 
 /**
  * 切换单位按钮事件处理器
  */
-export function handleToggleUnit() {
-  const currentTimestampUnit = getElementById('current-timestamp-unit');
-  const toggleUnitBtn = getElementById('toggle-unit-btn');
+export function handleToggleUnit(showMilliseconds) {
+  const currentTimestampUnit = document.getElementById('current-timestamp-unit');
+  const toggleUnitBtn = document.getElementById('toggle-unit-btn');
 
+  // 更新showMilliseconds
   showMilliseconds = !showMilliseconds;
+
+  // 更新时间戳显示
   currentTimestampUnit.textContent = showMilliseconds ? '毫秒' : '秒';
-  updateTimestamp(showMilliseconds);
+  const currentTimestamp = document.getElementById('current-timestamp-value');
+  const timestamp = Date.now();
+  currentTimestamp.textContent = showMilliseconds ? timestamp : Math.floor(timestamp / 1000);
 
   // 添加闪烁动画效果
   toggleUnitBtn.style.transition = 'all 0.3s';
@@ -89,15 +28,23 @@ export function handleToggleUnit() {
   setTimeout(() => {
     toggleUnitBtn.style.transform = 'scale(1)';
   }, 300);
+
+  // 返回更新的showMilliseconds
+  return showMilliseconds;
 }
 
 /**
  * 停止计时器事件处理器
  */
-export function handleStopTimer() {
-  clearInterval(timestampInterval);
-  const stopTimestampBtn = getElementById('stop-timer-btn');
-  const startTimestampBtn = getElementById('start-timer-btn');
+export function handleStopTimer(timestampInterval) {
+  console.log('停止计时器');
+  if (timestampInterval) {
+    clearInterval(timestampInterval);
+    window.timerManager.clearInterval(timestampInterval);
+  }
+
+  const stopTimestampBtn = document.getElementById('stop-timer-btn');
+  const startTimestampBtn = document.getElementById('start-timer-btn');
   stopTimestampBtn.style.display = 'none';
   startTimestampBtn.style.display = 'inline-block';
 }
@@ -105,27 +52,40 @@ export function handleStopTimer() {
 /**
  * 开始计时器事件处理器
  */
-export function handleStartTimer() {
-  const startTimestampBtn = getElementById('start-timer-btn');
-  const stopTimestampBtn = getElementById('stop-timer-btn');
-  timestampInterval = setInterval(() => updateTimestamp(showMilliseconds), 100);
+export function handleStartTimer(timestampInterval, showMilliseconds) {
+  const startTimestampBtn = document.getElementById('start-timer-btn');
+  const stopTimestampBtn = document.getElementById('stop-timer-btn');
+  const currentTimestampValue = document.getElementById('current-timestamp-value');
+
+  // 添加计时器
+  if (timestampInterval) {
+    window.timerManager.clearInterval(timestampInterval);
+  }
+  timestampInterval = setInterval(
+    () => updateTimestamp(currentTimestampValue, showMilliseconds),
+    100
+  );
+  window.timerManager.setInterval(timestampInterval);
+
+  // 切换按钮样式
   startTimestampBtn.style.display = 'none';
   stopTimestampBtn.style.display = 'inline-block';
+
+  return timestampInterval;
 }
 
 /**
  * 时间戳转换事件处理器
  */
 export function handleConvertTimestamp() {
-  const inputTimestamp = getElementById('timestamp-input');
-  const timestampInputResult = getElementById('timestamp-conversion-result');
+  const inputTimestamp = document.getElementById('timestamp-input');
+  const timestampInputResult = document.getElementById('timestamp-conversion-result');
   const timestampUnitSelect = document.querySelector(
     '#page-timestamp #timestamp-input-unit-select'
   );
-  const timezoneResultSelect = getElementById('timezone-result'); // 获取时区选择器
+  const timezoneResultSelect = document.getElementById('timezone-result'); // 获取时区选择器
 
   const timestamp = inputTimestamp.value.trim();
-  console.log('输入时间戳：', timestamp);
 
   if (!timestamp) {
     timestampInputResult.value = '请输入时间戳';
@@ -167,10 +127,10 @@ export function handleConvertTimestamp() {
  * 日期转换事件处理器
  */
 export function handleConvertDateToTimestamp() {
-  const inputDate = getElementById('datetime-input');
-  const dateInputResult = getElementById('date-conversion-result');
+  const inputDate = document.getElementById('datetime-input');
+  const dateInputResult = document.getElementById('date-conversion-result');
   const timestampUnitSelect = document.querySelector('#page-timestamp #date-result-unit-select');
-  const timezoneInputSelect = getElementById('timezone-input'); // 获取时区选择器
+  const timezoneInputSelect = document.getElementById('timezone-input'); // 获取时区选择器
 
   const dateStr = inputDate.value.trim();
   console.log('输入日期字符串：', dateStr);
@@ -221,8 +181,8 @@ export function handleConvertDateToTimestamp() {
  */
 export function handleCopyTimestamp() {
   // 获取时间戳文本
-  const currentTimestamp = getElementById('current-timestamp-value');
-  const copyTimestampBtn = getElementById('copy-timestamp-btn');
+  const currentTimestamp = document.getElementById('current-timestamp-value');
+  const copyTimestampBtn = document.getElementById('copy-timestamp-btn');
   const timestampText = currentTimestamp.textContent;
 
   copyTimestampBtn.textContent = '已复制';
@@ -259,12 +219,12 @@ export function handleClosePanel() {
  * 时间区域选择事件处理器
  */
 export function handleTimezoneResult() {
-  const timezoneResult = getElementById('timezone-result');
+  const timezoneResult = document.getElementById('timezone-result');
   console.log(timeZoneList[timezoneResult.value]);
 
   // 获取当前时间戳输入框的值
-  const inputTimestamp = getElementById('timestamp-input').value.trim();
-  const timestampInputResult = getElementById('timestamp-conversion-result');
+  const inputTimestamp = document.getElementById('timestamp-input').value.trim();
+  const timestampInputResult = document.getElementById('timestamp-conversion-result');
   const timestampUnitSelect = document.querySelector(
     '#page-timestamp #timestamp-input-unit-select'
   );
@@ -283,13 +243,13 @@ export function handleTimezoneResult() {
  * 该函数获取时区输入元素的值，并在控制台输出对应的时区信息
  */
 export function handleTimezoneInput() {
-  const timezoneInput = getElementById('timezone-input');
+  const timezoneInput = document.getElementById('timezone-input');
   const selectedTimezone = timeZoneList[timezoneInput.value];
   console.log('选择的时区：', selectedTimezone);
 
   // 获取当前日期输入框的值
-  const inputDate = getElementById('datetime-input').value.trim();
-  const dateInputResult = getElementById('date-conversion-result');
+  const inputDate = document.getElementById('datetime-input').value.trim();
+  const dateInputResult = document.getElementById('date-conversion-result');
   const timestampUnitSelect = document.querySelector('#page-timestamp #date-result-unit-select');
 
   // 如果有输入日期，则重新计算结果

sidepanel/utils/domUtils.js

@@ -2,69 +2,6 @@
  * DOM工具类函数
  */
 
-/**
- * 切换页面显示（带动画效果）
- * @param {string} pageName - 页面名称
- */
-export function switchPage(pageName) {
-  // 先隐藏当前活跃页面（如果有）
-  const currentPage = document.querySelector('.page.active');
-  if (currentPage) {
-    currentPage.classList.remove('active');
-
-    // 添加离开动画
-    currentPage.style.opacity = '0';
-    currentPage.style.transform = 'translateX(20px)';
-
-    // 等待动画完成后真正隐藏
-    setTimeout(() => {
-      if (!currentPage.classList.contains('active')) {
-        currentPage.style.display = 'none';
-      }
-    }, 300);
-  }
-
-  // 移除所有导航按钮的 active 状态
-  document.querySelectorAll('.nav-button').forEach((button) => {
-    button.classList.remove('active');
-  });
-
-  // 显示目标页面
-  const targetPage = document.getElementById(`page-${pageName}`);
-  if (targetPage) {
-    targetPage.style.display = 'block';
-
-    // 触发重排以确保display变化生效
-    targetPage.offsetHeight;
-
-    // 添加进入动画
-    targetPage.style.opacity = '0';
-    targetPage.style.transform = 'translateX(-20px)';
-
-    setTimeout(() => {
-      targetPage.classList.add('active');
-      targetPage.style.opacity = '1';
-      targetPage.style.transform = 'translateX(0)';
-    }, 10);
-  }
-
-  // 激活对应的导航按钮
-  const navButton =
-    document.getElementById(`nav-${pageName}-btn`) || document.getElementById(`nav-${pageName}`);
-  if (navButton) {
-    navButton.classList.add('active');
-  }
-}
-
-/**
- * 根据ID获取元素的便捷方法
- * @param {string} id - 元素ID
- * @returns {HTMLElement} - DOM元素
- */
-export function getElementById(id) {
-  return document.getElementById(id);
-}
-
 /**
  * 为元素添加事件监听器
  * @param {string} id - 元素ID
@@ -72,9 +9,9 @@ export function getElementById(id) {
  * @param {Function} handler - 事件处理函数
  */
 export function addEventListenerById(id, event, handler) {
-  const element = getElementById(id);
-  if (element) {
-    element.addEventListener(event, handler);
+  const ele = document.getElementById(id);
+  if (ele) {
+    window.eventManager.add(ele, event, handler);
   }
 }
 

sidepanel/utils/scriptManager.js

@@ -6,7 +6,8 @@ export class ScriptManager {
   }
 
   async loadScript({ path, name, isModule = false, deps = [] }) {
-    // 卸载现脚本
+    console.log('loadScript');
+    console.log({ path, name, isModule, deps })
     await this.unloadScript();
 
     for (const dep of deps) {
@@ -43,6 +44,7 @@ export class ScriptManager {
   }
 
   async unloadScript() {
+    console.log('unloadScript');
     try {
       if (this.currentName && window[this.currentName]) {
         const mod = window[this.currentName];

sidepanel/utils/timerManager.js

@@ -25,6 +25,7 @@ export class TimerManager {
    * @returns
    */
   setInterval(fn, delay, ...args) {
+    console.log('setInterval in TimerManager');
     const id = window.setInterval(fn, delay, ...args);
     this.timers.push(id);
     return id;

sidepanel/utils/timestampUtils.js

@@ -3,13 +3,13 @@
  */
 
 /**
- * 更新时间戳
- * @param {boolean} showMilliseconds - 是否显示毫秒
+ * 更新时间戳显示
+ * @param {*} ele
+ * @param {*} showMilliseconds
  */
-export function updateTimestamp(showMilliseconds = true) {
-  const currentTimestamp = document.getElementById('current-timestamp-value');
+export function updateTimestamp(ele, showMilliseconds = true) {
   const timestamp = Date.now();
-  currentTimestamp.textContent = showMilliseconds ? timestamp : Math.floor(timestamp / 1000);
+  ele.textContent = showMilliseconds ? timestamp : Math.floor(timestamp / 1000);
 }
 
 /**