feat:

1、移动popup的page、components 2、更新wxt的host权限 3、验证message传递逻辑
2026-02-01 00:21:36 +08:00
parent 4213e70697
commit 0b70c0c0c1
12 changed files with 83 additions and 85 deletions
@@ -0,0 +1,121 @@
+import { useEffect, useState, useCallback } from 'react';
+import CopyButton from './CopyButton';
+
+/**
+ * 时间戳显示和执行组件
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <TimestampExecution />
+ * ```
+ *
+ * @returns {JSX.Element} 时间戳组件
+ */
+export function TimestampExecution() {
+  /** @type {[number, function]} 当前时间戳（毫秒）和更新函数 */
+  const [currentTimestamp, setCurrentTimestamp] = useState(() => Math.floor(Date.now()));
+
+  /** @type {[boolean, function]} 是否显示毫秒（true=毫秒，false=秒） */
+  const [showMilliseconds, setShowMilliseconds] = useState(true);
+
+  /** @type {[boolean, function]} 时间戳是否正在自动更新 */
+  const [isRunningTimestamp, setIsRunningTimestamp] = useState(true);
+
+  /**
+   * 计算显示的时间戳值
+   * @type {number}
+   */
+  const displayTimestamp = showMilliseconds
+    ? currentTimestamp
+    : Math.floor(currentTimestamp / 1000);
+
+  const unitText = showMilliseconds ? '毫秒' : '秒';
+
+  /**
+   * 定时更新时间戳的副作用
+   * 根据 isRunningTimestamp 和 showMilliseconds 控制定时器的启停和间隔
+   */
+  useEffect(() => {
+    let timer: number;
+
+    if (isRunningTimestamp) {
+      const interval = showMilliseconds ? 100 : 1000;
+      timer = window.setInterval(() => {
+        setCurrentTimestamp(Math.floor(Date.now()));
+      }, interval);
+    }
+
+    // 清理函数
+    return () => clearInterval(timer);
+  }, [isRunningTimestamp, showMilliseconds]);
+
+  /**
+   * 切换时间戳显示单位（毫秒/秒）
+   */
+  const toggleUnit = useCallback(() => {
+    setShowMilliseconds((prev) => !prev);
+  }, []);
+
+  /**
+   * 切换时间戳自动更新状态（启动/停止）
+   */
+  const toggleTimestamp = useCallback(() => {
+    setIsRunningTimestamp((prev) => !prev);
+  }, []);
+
+  /**
+   * 切换单位按钮的辅助文本
+   * @type {string}
+   */
+  const unitButtonLabel = showMilliseconds ? '切换为秒显示' : '切换为毫秒显示';
+
+  /**
+   * 启动/停止按钮的辅助文本
+   * @type {string}
+   */
+  const toggleButtonLabel = isRunningTimestamp ? '停止时间戳自动更新' : '开始时间戳自动更新';
+
+  /**
+   * 启动/停止按钮的显示文本
+   * @type {string}
+   */
+  const toggleButtonText = isRunningTimestamp ? '停止' : '开始';
+
+  return (
+    <div className="timestamp-container">
+      <div className="timestamp-display">
+        <span className="timestamp-value">{displayTimestamp}</span>
+        <span className="timestamp-unit">{unitText}</span>
+      </div>
+
+      <div className="timestamp-controls">
+        <button
+          type="button"
+          className="action-btn"
+          onClick={toggleUnit}
+          aria-label={unitButtonLabel}
+          title={unitButtonLabel}
+        >
+          切换单位
+        </button>
+
+        <CopyButton
+          text={String(currentTimestamp)}
+          buttonText="复制时间戳"
+          aria-label="复制当前时间戳到剪贴板"
+        />
+
+        <button
+          type="button"
+          className={`${isRunningTimestamp ? 'stop-btn' : 'action-btn'}`}
+          onClick={toggleTimestamp}
+          aria-label={toggleButtonLabel}
+          title={toggleButtonLabel}
+        >
+          {toggleButtonText}
+        </button>
+      </div>
+    </div>
+  );
+}