```

feat(sidepanel): 优化时间戳工具界面与交互功能 - 调整 CSS 样式，增加 #current-timestamp 区块样式定义，统一阴影写法空格格式 - 重构 HTML 结构，将当前时间戳相关元素包裹进 div 容器中，并调整按钮布局 - 限制时区列表为常用时区，提升选择效率并确保兼容性 - 改进切换单位和复制按钮的反馈效果，添加动画提示增强用户体验 - 精简 updateTimestamp 函数逻辑，移除冗余代码并提高可维护性 ```
2025-11-19 22:18:48 +08:00
parent 951a0579ce
commit 1e83988b72
4 changed files with 104 additions and 32 deletions
@@ -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);
 }

@@ -173,8 +212,8 @@
  .input-text {
    width: 100%;
  }
-  
+
  .page {
    padding: 0.5rem;
  }
-}
+}
@@ -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">
@@ -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);

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

 /**