```

feat(sidepanel): 重构时间戳转换功能并优化用户界面

- 将代码模块化，拆分为 eventHandlers、domUtils 和 timestampUtils 等文件
- 使用 Rollup 配置文件替代内联构建命令，提升可维护性
- 引入页面切换动画与交互反馈动画，增强用户体验
- 更新 HTML 元素 ID 命名以提高语义化和一致性
- 改进 CSS 样式，增加悬停效果、过渡动画和响应式支持
- package.json 中添加 type: module 并升级版本至 1.1
```

sidepanel/utils/domUtils.js

@@ -0,0 +1,78 @@
+/**
+ * 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
+ * @param {string} event - 事件类型
+ * @param {Function} handler - 事件处理函数
+ */
+export function addEventListenerById(id, event, handler) {
+  const element = getElementById(id);
+  if (element) {
+    element.addEventListener(event, handler);
+  }
+}

sidepanel/utils/timestampUtils.js

@@ -0,0 +1,64 @@
+/**
+ * 时间戳工具类函数
+ */
+
+/**
+ * 更新时间戳显示
+ * @param {boolean} showMilliseconds - 是否显示毫秒
+ */
+export function updateTimestamp(showMilliseconds = true) {
+  const currentTimestamp = document.getElementById('current-timestamp-value');
+  const currentTimestampUnit = document.getElementById('current-timestamp-unit');
+  const timestamp = Date.now();
+  const unit = showMilliseconds ? '毫秒' : '秒';
+  currentTimestamp.textContent = showMilliseconds ? timestamp : Math.floor(timestamp / 1000);
+  currentTimestampUnit.textContent = unit;
+}
+
+/**
+ * 转换时间戳为日期格式
+ * @param {string} timestamp - 输入的时间戳
+ * @param {boolean} isSeconds - 是否为秒格式
+ * @returns {string} 格式化后的日期字符串
+ */
+export function convertTimestampToDate(timestamp, isSeconds) {
+  // 转换为数字
+  let timestampNum = Number(timestamp);
+
+  // 如果是秒，转换为毫秒
+  if (isSeconds) {
+    timestampNum = timestampNum * 1000;
+  }
+
+  // 检查是否为有效数字
+  if (isNaN(timestampNum)) {
+    return '请输入有效的时间戳';
+  }
+
+  // 创建日期对象
+  const date = new Date(timestampNum);
+
+  // 检查日期是否有效
+  if (isNaN(date.getTime())) {
+    return '无效的日期';
+  }
+
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hours = date.getHours();
+  const minutes = date.getMinutes();
+  const seconds = date.getSeconds();
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
+/**
+ * 转换日期格式为时间戳
+ * @param {string} date - 输入的日期字符串
+ * @returns {number|string} 时间戳或错误信息
+ */
+export function convertDateToTimestamp(date) {
+  const timestamp = Date.parse(date);
+  return isNaN(timestamp) ? '无效的日期' : timestamp;
+}