```
feat(sidepanel): 优化时间戳工具界面与交互功能 - 调整 CSS 样式,增加 #current-timestamp 区块样式定义,统一阴影写法空格格式 - 重构 HTML 结构,将当前时间戳相关元素包裹进 div 容器中,并调整按钮布局 - 限制时区列表为常用时区,提升选择效率并确保兼容性 - 改进切换单位和复制按钮的反馈效果,添加动画提示增强用户体验 - 精简 updateTimestamp 函数逻辑,移除冗余代码并提高可维护性 ```
This commit is contained in:
@@ -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);
|
||||
|
||||
// 检查扩展上下文是否仍然有效
|
||||
|
||||
Reference in New Issue
Block a user