```

feat(router): 引入路由系统并重构页面结构

- 为项目引入基于 hash 的前端路由系统，支持多页面切换与动态加载
- 将原有单一 bundle 拆分为多个入口打包（index.js 和 timestamp.js）
- 修改 Rollup 配置以支持多输出文件及插件共享
- 更新 HTML 结构以适配路由容器和页面占位元素
- 调整 CSS 样式，移除旧的页面切换动画，交由路由控制
- 优化 domUtils 工具函数，并迁移部分样式处理逻辑
- 在 timestamp.js 中封装初始化函数以便路由调用
- todolist 页面模板新增，用于后续功能开发
```

sidepanel/js/index.js

@@ -1,17 +1,58 @@
-// 导入时间戳工具的初始化函数和事件处理
-import './timestamp.js';
+console.log('Before creating router');
+import { Router } from '../modules/Router.js';
 
-// 导入页面切换功能
-import { switchPage } from '../utils/domUtils.js';
+import * as PageModules from '../../dist/timestamp.js';
 
-// 页面切换逻辑
-import { addEventListenerById } from '../utils/domUtils.js';
+const config = {
+  routerViewId: 'app', // 路由切换的挂载点 id
+  stackPages: false, // 多级页面缓存
+  animationName: 'fade', // 切换页面时的动画
+  routes: [
+    {
+      path: '/home',
+      name: 'home',
+      callback: async () => {
+        // 1. 加载 HTML
+        const html = await fetch('pages/timestamp.html').then((r) => r.text());
+        document.getElementById('home').innerHTML = html;
 
-addEventListenerById('nav-timestamp-btn', 'click', () => {
-  switchPage('timestamp');
+        // 2. 动态加载对应 JS
+        const script = document.createElement('script');
+        script.src = '/dist/timestamp.js'; // IIFE 打包后的文件
+        script.onload = () => {
+          // 3. 执行 IIFE 暴露的全局对象方法
+          TimestampPage.init(); // 假设 timestamp.js 输出 name: 'TimestampPage'
+        };
+        document.body.appendChild(script);
+      },
+    },
+    {
+      path: '/todo',
+      name: 'todo',
+      callback: async () => {
+        // 1. 加载 HTML
+        const html = await fetch('pages/todolist.html').then((r) => r.text());
+        document.getElementById('todo').innerHTML = html;
+
+        // 2. 动态加载对应 JS
+        const script = document.createElement('script');
+        script.src = '/dist/timestamp.js'; // IIFE 打包后的文件
+        script.onload = () => {
+          // 3. 执行 IIFE 暴露的全局对象方法
+          TimestampPage.init(); // 假设 timestamp.js 输出 name: 'TimestampPage'
+        };
+        document.body.appendChild(script);
+      },
+    },
+  ],
+};
+
+const router = new Router();
+console.log('Router created:', router);
+router.init(config);
+console.log('Router initialized');
+
+document.getElementById('todo-jump').addEventListener('click', () => {
+  console.log('Jumping to todo page');
+  window.linkTo('#/todo');
 });
-
-// 计时器页面切换
-addEventListenerById('nav-other-tools-btn', 'click', () => {
-  switchPage('other-tools');
-});

sidepanel/js/timestamp.js

@@ -12,24 +12,27 @@ import {
 } from '../modules/eventHandlers.js';
 import { addEventListenerById } from '../utils/domUtils.js';
 
-// 初始化时间戳显示
-initTimestampDisplay();
+export function init() {
+  console.log('timestamp init')
+  // 初始化时间戳显示
+  initTimestampDisplay();
 
-// 绑定事件处理器
-// 绑定时间戳相关按钮事件
-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);
+  // 绑定事件处理器
+  // 绑定时间戳相关按钮事件
+  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);
+}