feat(sidepanel): 优化时间戳工具界面与交互功能

- 调整 CSS 样式,增加 #current-timestamp 区块样式定义,统一阴影写法空格格式
- 重构 HTML 结构,将当前时间戳相关元素包裹进 div 容器中,并调整按钮布局
- 限制时区列表为常用时区,提升选择效率并确保兼容性
- 改进切换单位和复制按钮的反馈效果,添加动画提示增强用户体验
- 精简 updateTimestamp 函数逻辑,移除冗余代码并提高可维护性
```
This commit is contained in:
雨霖铃
2025-11-19 22:18:48 +08:00
parent 951a0579ce
commit 1e83988b72
4 changed files with 104 additions and 32 deletions
+47 -11
View File
@@ -10,7 +10,26 @@ let showMilliseconds = true;
// 定义一个全局变量来保存计时器
let timestampInterval;
// 定义时区列表
const timeZoneList = Intl.supportedValuesOf('timeZone');
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;
@@ -38,9 +57,10 @@ export function initTimeZoneList() {
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));
}
timezoneResultSelect.add(new Option(timeZoneList[i], i));
timezoneInputSelect.add(new Option(timeZoneList[i], i));
}
}
@@ -56,8 +76,19 @@ export function initTimestampAndDate() {
* 切换单位按钮事件处理器
*/
export function handleToggleUnit() {
const currentTimestampUnit = getElementById('current-timestamp-unit');
const toggleUnitBtn = getElementById('toggle-unit-btn');
showMilliseconds = !showMilliseconds;
currentTimestampUnit.textContent = showMilliseconds ? '毫秒' : '秒';
updateTimestamp(showMilliseconds);
// 添加闪烁动画效果
toggleUnitBtn.style.transition = 'all 0.3s';
toggleUnitBtn.style.transform = 'scale(1.02)';
setTimeout(() => {
toggleUnitBtn.style.transform = 'scale(1)';
}, 300);
}
/**
@@ -191,18 +222,23 @@ export function handleConvertDateToTimestamp() {
export function handleCopyTimestamp() {
// 获取时间戳文本
const currentTimestamp = getElementById('current-timestamp-value');
const copyTimestampBtn = getElementById('copy-timestamp-btn');
const timestampText = currentTimestamp.textContent;
// 添加复制反馈动画
const originalText = currentTimestamp.textContent;
currentTimestamp.textContent = '已复制!';
currentTimestamp.style.color = '#28a745';
currentTimestamp.style.fontWeight = 'bold';
copyTimestampBtn.textContent = '已复制';
copyTimestampBtn.style.fontWeight = 'bold';
// 添加闪烁动画效果
copyTimestampBtn.style.transition = 'all 0.3s';
copyTimestampBtn.style.transform = 'scale(1.02)';
setTimeout(() => {
copyTimestampBtn.style.transform = 'scale(1)';
}, 300);
setTimeout(() => {
currentTimestamp.textContent = originalText;
currentTimestamp.style.color = '';
currentTimestamp.style.fontWeight = '';
copyTimestampBtn.textContent = '复制';
copyTimestampBtn.style.color = '';
copyTimestampBtn.style.fontWeight = '';
}, 1000);
// 检查扩展上下文是否仍然有效