import { updateTimestamp, convertTimestampToDate, convertDateToTimestamp, } from '../utils/timestampUtils.js'; import { getElementById } from '../utils/domUtils.js'; // 定义一个全局变量来保存是否显示毫秒 let showMilliseconds = true; // 定义一个全局变量来保存计时器 let timestampInterval; // 定义时区列表 const timeZoneList = Intl.supportedValuesOf('timeZone'); // 获取本地时区 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)); } 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'); // 使用适合的格式 } /** * 切换单位按钮事件处理器 */ export function handleToggleUnit() { showMilliseconds = !showMilliseconds; updateTimestamp(showMilliseconds); } /** * 停止计时器事件处理器 */ export function handleStopTimer() { clearInterval(timestampInterval); const stopTimestampBtn = getElementById('stop-timer-btn'); const startTimestampBtn = getElementById('start-timer-btn'); stopTimestampBtn.style.display = 'none'; startTimestampBtn.style.display = 'inline-block'; } /** * 开始计时器事件处理器 */ export function handleStartTimer() { const startTimestampBtn = getElementById('start-timer-btn'); const stopTimestampBtn = getElementById('stop-timer-btn'); timestampInterval = setInterval(() => updateTimestamp(showMilliseconds), 100); startTimestampBtn.style.display = 'none'; stopTimestampBtn.style.display = 'inline-block'; } /** * 时间戳转换事件处理器 */ export function handleConvertTimestamp() { const inputTimestamp = getElementById('timestamp-input'); const timestampInputResult = getElementById('timestamp-conversion-result'); const timestampUnitSelect = document.querySelector( '#page-timestamp #timestamp-input-unit-select' ); const timezoneResultSelect = getElementById('timezone-result'); // 获取时区选择器 const timestamp = inputTimestamp.value.trim(); console.log('输入时间戳:', timestamp); if (!timestamp) { timestampInputResult.value = '请输入时间戳'; // 添加动画效果 timestampInputResult.style.borderColor = '#dc3545'; setTimeout(() => { timestampInputResult.style.borderColor = ''; }, 1000); return; } // 获取选择的时间戳单位(秒或毫秒) const isSeconds = timestampUnitSelect.value === 'seconds'; // 获取选择的时区 const selectedTimezone = timeZoneList[timezoneResultSelect.value]; console.log('选择的时区:', selectedTimezone); const result = convertTimestampToDate(timestamp, isSeconds, selectedTimezone); timestampInputResult.value = result; // 添加成功反馈动画 if (result.includes('无效') || result.includes('请输入')) { timestampInputResult.style.borderColor = '#dc3545'; } else { timestampInputResult.style.borderColor = '#28a745'; } // 添加闪烁动画效果 timestampInputResult.style.transition = 'all 0.3s'; timestampInputResult.style.transform = 'scale(1.02)'; setTimeout(() => { timestampInputResult.style.transform = 'scale(1)'; }, 300); } /** * 日期转换事件处理器 */ export function handleConvertDateToTimestamp() { const inputDate = getElementById('datetime-input'); const dateInputResult = getElementById('date-conversion-result'); const timestampUnitSelect = document.querySelector('#page-timestamp #date-result-unit-select'); const timezoneInputSelect = getElementById('timezone-input'); // 获取时区选择器 const dateStr = inputDate.value.trim(); console.log('输入日期字符串:', dateStr); if (!dateStr) { dateInputResult.value = '请输入日期字符串'; // 添加动画效果 dateInputResult.style.borderColor = '#dc3545'; setTimeout(() => { dateInputResult.style.borderColor = ''; }, 1000); return; } // 获取选择的时区 const selectedTimezone = timeZoneList[timezoneInputSelect.value]; console.log('选择的时区:', selectedTimezone); const date = new Date(dateStr); // 转换为时间戳 const timestamp = convertDateToTimestamp(date, selectedTimezone); console.log('转换后的时间戳:', timestamp); if (isNaN(timestamp)) { dateInputResult.value = '无效的日期字符串'; dateInputResult.style.borderColor = '#dc3545'; return; } // 根据选择的单位决定显示秒还是毫秒 const isSeconds = timestampUnitSelect.value === 'seconds'; const finalTimestamp = isSeconds ? Math.floor(timestamp / 1000) : timestamp; dateInputResult.value = finalTimestamp; // 添加成功反馈动画 dateInputResult.style.borderColor = '#28a745'; // 添加闪烁动画效果 dateInputResult.style.transition = 'all 0.3s'; dateInputResult.style.transform = 'scale(1.02)'; setTimeout(() => { dateInputResult.style.transform = 'scale(1)'; }, 300); } /** * 复制时间戳事件处理器 */ export function handleCopyTimestamp() { // 获取时间戳文本 const currentTimestamp = getElementById('current-timestamp-value'); const timestampText = currentTimestamp.textContent; // 添加复制反馈动画 const originalText = currentTimestamp.textContent; currentTimestamp.textContent = '已复制!'; currentTimestamp.style.color = '#28a745'; currentTimestamp.style.fontWeight = 'bold'; setTimeout(() => { currentTimestamp.textContent = originalText; currentTimestamp.style.color = ''; currentTimestamp.style.fontWeight = ''; }, 1000); // 检查扩展上下文是否仍然有效 if (chrome.runtime && chrome.runtime.sendMessage) { chrome.runtime.sendMessage({ action: 'copyText', data: timestampText }, (res) => { if (chrome.runtime.lastError) { console.error('❌ 传送时间戳文本失败:', chrome.runtime.lastError); } else if (res?.success) { console.log('✅ 已复制:', timestampText); } else { console.error('❌ 复制失败:', res); } }); } } /** * 关闭面板事件处理器 */ export function handleClosePanel() { // 向父页面发送消息请求关闭 window.parent.postMessage({ action: 'closeSidebar' }, '*'); } /** * 时间区域选择事件处理器 */ export function handleTimezoneResult() { const timezoneResult = getElementById('timezone-result'); console.log(timeZoneList[timezoneResult.value]); // 获取当前时间戳输入框的值 const inputTimestamp = getElementById('timestamp-input').value.trim(); const timestampInputResult = getElementById('timestamp-conversion-result'); const timestampUnitSelect = document.querySelector( '#page-timestamp #timestamp-input-unit-select' ); // 如果有输入时间戳,则重新计算结果 if (inputTimestamp) { const isSeconds = timestampUnitSelect.value === 'seconds'; const selectedTimezone = timeZoneList[timezoneResult.value]; const result = convertTimestampToDate(inputTimestamp, isSeconds, selectedTimezone); timestampInputResult.value = result; } } /** * 处理时区输入事件 * 该函数获取时区输入元素的值,并在控制台输出对应的时区信息 */ export function handleTimezoneInput() { const timezoneInput = 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 timestampUnitSelect = document.querySelector('#page-timestamp #date-result-unit-select'); // 如果有输入日期,则重新计算结果 if (inputDate) { console.log('输入的日期:', inputDate); const date = new Date(inputDate); // 转换为时间戳 const timestamp = convertDateToTimestamp(date, selectedTimezone); if (!isNaN(timestamp)) { const timestamp = date.getTime(); const isSeconds = timestampUnitSelect.value === 'seconds'; const finalTimestamp = isSeconds ? Math.floor(timestamp / 1000) : timestamp; dateInputResult.value = finalTimestamp; } } }