```

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

- 调整 CSS 样式，增加 #current-timestamp 区块样式定义，统一阴影写法空格格式
- 重构 HTML 结构，将当前时间戳相关元素包裹进 div 容器中，并调整按钮布局
- 限制时区列表为常用时区，提升选择效率并确保兼容性
- 改进切换单位和复制按钮的反馈效果，添加动画提示增强用户体验
- 精简 updateTimestamp 函数逻辑，移除冗余代码并提高可维护性
```

sidepanel/index.css

@@ -30,7 +30,7 @@
   background-color: #007bff;
   color: white;
   transform: translateY(-2px);
-  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
 
 .close-button {
@@ -49,6 +49,36 @@
   transform: scale(1.05);
 }
 
+#current-timestamp {
+  p a {
+    box-sizing: border-box;
+    color: #2b2b2b;
+    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
+  }
+  
+  button {
+    padding: 0.5rem 1rem;
+    background-color: #28a745;
+    color: white;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    height: 2rem;
+    align-self: flex-start;
+    transition: all 0.3s ease;
+  }
+
+  button:active {
+    transform: scale(0.95);
+  }
+
+  button:hover {
+    background-color: #218838;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+}
+
 .datetime-box {
   display: flex;
   align-items: center;
@@ -110,7 +140,7 @@
 .convert-button:hover {
   background-color: #218838;
   transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
 .content {
@@ -142,26 +172,35 @@
 }
 
 /* 按钮点击效果 */
-.button:active, .convert-button:active, .nav-button:active, .close-button:active {
+.button:active,
+.convert-button:active,
+.nav-button:active,
+.close-button:active {
   transform: scale(0.95);
 }
 
 /* 输入框动画 */
-.input-text, .select-box {
+.input-text,
+.select-box {
   transition: all 0.2s ease-in-out;
 }
 
-.input-text:hover, .select-box:hover {
+.input-text:hover,
+.select-box:hover {
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 /* 结果显示动画 */
-#timestamp-conversion-result, #date-conversion-result, #current-timestamp-value {
+#timestamp-conversion-result,
+#date-conversion-result,
+#current-timestamp-value {
   transition: all 0.3s ease;
 }
 
-#timestamp-conversion-result:focus, #date-conversion-result:focus, #current-timestamp-value:focus {
+#timestamp-conversion-result:focus,
+#date-conversion-result:focus,
+#current-timestamp-value:focus {
   transform: scale(1.02);
 }
 

sidepanel/index.html

@@ -21,16 +21,18 @@
         <!-- 时间戳工具页面 -->
         <div id="page-timestamp" class="page active">
           <h2>时间戳工具</h2>
-          <div>
+          <div id="current-timestamp">
             <h2>当前时间戳</h2>
             <p>
               <a href="javascript:;" id="current-timestamp-value">1762873747965</a>
               <span id="current-timestamp-unit">毫秒</span>
+            </p>
+            <div>
               <button id="toggle-unit-btn">切换单位</button>
               <button id="copy-timestamp-btn">复制</button>
-              <button id="stop-timer-btn">停止</button>
+              <button id="stop-timer-btn" style="background-color: red;">停止</button>
               <button id="start-timer-btn" style="display: none">开始</button>
-            </p>
+            </div>
           </div>
 
           <!-- 时间戳转日期时间 -->
@@ -61,8 +63,7 @@
                   placeholder="转换结果"
                   class="input-text"
                 />
-                <select class="select-box" id="timezone-result">
-                </select>
+                <select class="select-box" id="timezone-result"></select>
               </div>
             </div>
           </div>
@@ -78,8 +79,7 @@
                   placeholder="输入日期时间"
                   class="input-text"
                 />
-                <select class="select-box" id="timezone-input">
-                </select>
+                <select class="select-box" id="timezone-input"></select>
               </div>
 
               <div class="input-group">

sidepanel/modules/eventHandlers.js

@@ -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);
 
   // 检查扩展上下文是否仍然有效

sidepanel/utils/timestampUtils.js

@@ -3,16 +3,13 @@
  */
 
 /**
- * 更新时间戳显示
+ * 更新时间戳
  * @param {boolean} showMilliseconds - 是否显示毫秒
  */
 export function updateTimestamp(showMilliseconds = true) {
   const currentTimestamp = document.getElementById('current-timestamp-value');
-  const currentTimestampUnit = document.getElementById('current-timestamp-unit');
   const timestamp = Date.now();
-  const unit = showMilliseconds ? '毫秒' : '秒';
   currentTimestamp.textContent = showMilliseconds ? timestamp : Math.floor(timestamp / 1000);
-  currentTimestampUnit.textContent = unit;
 }
 
 /**