diff --git a/sidepanel/js/components/BaseComponet.js b/sidepanel/js/components/BaseComponet.js index dede0ee..18d3ecd 100644 --- a/sidepanel/js/components/BaseComponet.js +++ b/sidepanel/js/components/BaseComponet.js @@ -12,8 +12,6 @@ export class BaseComponent { * @param {Function} handler 回调函数 */ bindEvent(target, type, handler) { - - console.log('Bind 1111;') // 获取目标元素 const ele = typeof target === 'string' ? document.getElementById(target) : target; @@ -33,7 +31,7 @@ export class BaseComponent { * @param {number} ms 定时器间隔时间（毫秒） */ setInterval(fn, ms) { - this._timerManager.setInterval(fn, ms); + return this._timerManager.setInterval(fn, ms); } /** @@ -42,7 +40,7 @@ export class BaseComponent { * @param {number} ms 定时器间隔时间（毫秒） */ setTimeout(fn, ms) { - this._timerManager.setTimeout(fn, ms); + return this._timerManager.setTimeout(fn, ms); } /** diff --git a/sidepanel/js/index.js b/sidepanel/js/index.js index e8c5298..b708d65 100644 --- a/sidepanel/js/index.js +++ b/sidepanel/js/index.js @@ -6,6 +6,7 @@ import {Router} from '../modules/Router.js'; const config = { routerViewId: 'app', stackPages: false, + redirectRoute: '/', routes: [ { path: '/', diff --git a/sidepanel/js/timestamp.js b/sidepanel/js/timestamp.js index 5efff57..752cc8c 100644 --- a/sidepanel/js/timestamp.js +++ b/sidepanel/js/timestamp.js @@ -11,8 +11,7 @@ import { } from '../modules/eventHandlers.js'; import {updateTimestamp} from './utils/timestampUtils.js'; import {timeZoneList} from './const/timezone.js'; - -const BaseComponent = window.BaseComponent; +import {BaseComponent} from './components/BaseComponet.js'; // 获取本地时区 const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone; @@ -20,7 +19,6 @@ const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone; class Timestamp extends BaseComponent { constructor() { super(); - this.init(); // 定义一个全局变量来保存是否显示毫秒 this.showMilliseconds = true; // 定义一个全局变量来保存计时器 @@ -33,14 +31,13 @@ class Timestamp extends BaseComponent { // 初始化时更新一次时间戳 updateTimestamp(currentTimestampValue, this.showMilliseconds); - this.setInterval(() => updateTimestamp(currentTimestampValue, this.showMilliseconds), 100); + this.timestampInterval = this.setInterval(() => + updateTimestamp(currentTimestampValue, this.showMilliseconds), + 100); 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) { // 默认选中本地时区 @@ -68,13 +65,14 @@ class Timestamp extends BaseComponent { 'click', () => (this.showMilliseconds = handleToggleUnit(this.showMilliseconds)) ); - // 绑定计时器相关按钮事件 this.bindEvent('stop-timer-btn', 'click', () => handleStopTimer(this.timestampInterval)); + // 绑定开始计时器事件 this.bindEvent( 'start-timer-btn', 'click', - () => (this.timestampInterval = handleStartTimer(this.timestampInterval, this.showMilliseconds)) + () => + (this.timestampInterval = handleStartTimer(this.timestampInterval, this.showMilliseconds)) ); // 绑定时间戳转换按钮事件 this.bindEvent('convert-timestamp-to-date-btn', 'click', handleConvertTimestamp); @@ -91,4 +89,4 @@ class Timestamp extends BaseComponent { } } -window.timestamp = Timestamp; \ No newline at end of file +window.timestamp = Timestamp; diff --git a/sidepanel/js/utils/timerManager.js b/sidepanel/js/utils/timerManager.js index 4ff5c9b..b339052 100644 --- a/sidepanel/js/utils/timerManager.js +++ b/sidepanel/js/utils/timerManager.js @@ -45,6 +45,7 @@ export class TimerManager { } cleanAll() { + console.log('cleanAll time or interval'); this.timers.forEach((timerId) => { window.clearTimeout(timerId); window.clearInterval(timerId); diff --git a/sidepanel/modules/Router.js b/sidepanel/modules/Router.js index f250e42..3131eac 100644 --- a/sidepanel/modules/Router.js +++ b/sidepanel/modules/Router.js @@ -4,7 +4,7 @@ class Router { this.beforeFun = null; this.afterFun = null; this.routerViewId = 'app'; - this.redirectRoute = null; + this.redirectRoute = '/'; this.stackPages = true; this.routerMap = []; @@ -22,6 +22,7 @@ class Router { this.routerMap = config?.routes || this.routerMap; this.routerViewId = config?.routerViewId || this.routerViewId; this.stackPages = config?.stackPages ?? this.stackPages; + this.redirectRoute = config?.redirectRoute || this.redirectRoute; this.map(); // 监听路由变化 @@ -54,10 +55,10 @@ class Router { */ urlChange() { const path = location.hash.replace('#', '') || this.redirectRoute; - console.log('当前路由：', path); const route = this.routes[path]; if (!route) { + // 当前路由不存在时，返回到设置的重定向页面 location.hash = this.redirectRoute; return; } @@ -93,7 +94,7 @@ class Router { } const newInstance = await this.scriptManager.getComponentInstance(route.name); - console.log(`newInstance${newInstance}`); + console.log(newInstance); if (newInstance) { this.currentinstance = newInstance; if (typeof newInstance.init === 'function') { @@ -106,9 +107,9 @@ class Router { }; if (this.beforeFun) { - this.beforeFun({to: route, next: doChange}); + this.beforeFun({ to: route, next: doChange }); } else { - doChange().then(r => console.log(r)); + doChange().then(r => r); } } @@ -135,4 +136,4 @@ class Router { } } -export {Router}; +export { Router }; diff --git a/sidepanel/modules/eventHandlers.js b/sidepanel/modules/eventHandlers.js index ca56de9..7ed136d 100644 --- a/sidepanel/modules/eventHandlers.js +++ b/sidepanel/modules/eventHandlers.js @@ -53,6 +53,8 @@ export function handleStartTimer(timestampInterval, showMilliseconds) { const stopTimestampBtn = document.getElementById('stop-timer-btn'); const currentTimestampValue = document.getElementById('current-timestamp-value'); + console.log('开始计时器'); + console.log(`timestampInterval:${timestampInterval}`); // 添加计时器 if (timestampInterval) { window.timerManager.clearInterval(timestampInterval);