From a6d85962b75f800a1f50fe75c0d743566a7cc123 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=A8=E9=9C=96=E9=93=83?= <rsgltzyd@hotmail.com>
Date: Mon, 2 Feb 2026 20:58:56 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8=20dayjs=20=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2=E6=97=B6=E9=97=B4=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E6=97=A5=E6=9C=9F=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E8=BD=AC=E6=8D=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E4=B8=8D=E5=86=8D=E4=BD=BF=E7=94=A8=E7=9A=84=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../popup/components/DatetimeToTimestamp.tsx  | 89 +++++++++---------
 .../popup/components/TimestampToDatetime.tsx  | 92 +++++++++----------
 package-lock.json                             |  7 ++
 package.json                                  |  1 +
 tsconfig.json                                 |  2 +-
 utils/dayjs.ts                                |  8 ++
 utils/timeUtils.tsx                           | 58 ------------
 7 files changed, 100 insertions(+), 157 deletions(-)
 create mode 100644 utils/dayjs.ts
 delete mode 100644 utils/timeUtils.tsx

diff --git a/entrypoints/popup/components/DatetimeToTimestamp.tsx b/entrypoints/popup/components/DatetimeToTimestamp.tsx
index 885e4ec..52885c0 100644
--- a/entrypoints/popup/components/DatetimeToTimestamp.tsx
+++ b/entrypoints/popup/components/DatetimeToTimestamp.tsx
@@ -1,5 +1,5 @@
-import { formatWithDate, formatWithZone } from '../../../utils/timeUtils';
 import { useState, useCallback } from 'react';
+import dayjs from '@/utils/dayjs';
 
 /**
  * 日期时间转时间戳组件
@@ -49,7 +49,7 @@ const TIMESTAMP_UNITS = [
 ];
 
 export function DatetimeToTimestamp() {
-  const [dateValue, setDateValue] = useState(() => formatWithZone(Date.now(), 'Asia/Shanghai'));
+  const [dateValue, setDateValue] = useState(() => dayjs().format('YYYY/MM/DD HH:mm:ss'));
 
   const [selectedZone, setSelectedZone] = useState('Asia/Shanghai');
 
@@ -59,64 +59,54 @@ export function DatetimeToTimestamp() {
 
   const [error, setError] = useState('');
 
-  /**
-   * 转换日期时间为时间戳
-   */
-  const handleConvertDatetimeToTimestamp = useCallback(() => {
-    try {
-      setError('');
-      const timestamp = formatWithDate(dateValue, selectedZone);
+  const performConversion = useCallback(
+    (currentDate: string, zone: string, currentUnit: string) => {
+      try {
+        if (!currentDate) {
+          setError('请输入有效的日期时间');
+          return '';
+        }
 
-      if (typeof timestamp !== 'number' || isNaN(timestamp)) {
-        setError('无效的日期时间格式');
-        setResult('');
-        return;
+        const timestamp = dayjs.tz(currentDate, zone);
+
+        if (!timestamp.isValid()) {
+          setError('无效的日期时间格式');
+          return '';
+        }
+
+        setError('');
+
+        const ms = timestamp.valueOf();
+        return currentUnit === TIMESTAMP_UNITS[0].value
+          ? ms.toString()
+          : Math.floor(ms / 1000).toString();
+      } catch (err) {
+        console.error('转换错误:', err);
+        return '';
       }
+    },
+    [],
+  );
 
-      const finalResult = unit === 'milliseconds' ? timestamp : Math.floor(timestamp / 1000);
-
-      setResult(finalResult.toString());
-    } catch (err) {
-      console.error('转换错误:', err);
-      setError('转换失败，请检查输入格式');
-      setResult('');
-    }
-  }, [dateValue, selectedZone, unit]);
-
-  /**
-   * 处理日期时间输入变化
-   */
-  const handleDateChange = useCallback((e) => {
-    setDateValue(e.target.value);
-    setError(''); // 清除错误信息
-  }, []);
-
-  /**
-   * 处理时区选择变化
-   */
-  const handleZoneChange = useCallback((e) => {
-    setSelectedZone(e.target.value);
-  }, []);
+  const handleConvert = useCallback(() => {
+    const newResult = performConversion(dateValue, selectedZone, unit);
+    setResult(newResult);
+  }, [dateValue, selectedZone, unit, performConversion]);
 
   /**
    * 处理时间戳单位变化
    */
   const handleUnitChange = useCallback(
-    (e) => {
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
       const newUnit = e.target.value;
       setUnit(newUnit);
 
       // 如果已有结果，重新计算
       if (result) {
-        const currentResult = parseInt(result, 10);
-        if (!isNaN(currentResult)) {
-          const newResult =
-            newUnit === 'milliseconds' ? currentResult * 1000 : Math.floor(currentResult / 1000);
-          setResult(newResult.toString());
-        }
+        setResult(performConversion(dateValue, selectedZone, newUnit) || '');
       }
     },
-    [result],
+    [dateValue, selectedZone, result, performConversion],
   );
 
   return (
@@ -130,14 +120,17 @@ export function DatetimeToTimestamp() {
             placeholder="输入日期时间 (如: 2024-01-01 12:00:00)"
             value={dateValue}
             className="datetime-input"
-            onChange={handleDateChange}
+            onChange={(e) => {
+              setDateValue(e.target.value);
+              if (error) setError('');
+            }}
             aria-label="输入要转换的日期时间"
             title="支持格式: YYYY-MM-DD HH:mm:ss"
           />
           <select
             value={selectedZone}
             className="timezone-select"
-            onChange={handleZoneChange}
+            onChange={(e) => setSelectedZone(e.target.value)}
             aria-label="选择时区"
           >
             {TIME_ZONE_LIST.map((zone) => (
@@ -157,7 +150,7 @@ export function DatetimeToTimestamp() {
         <div className="action-group">
           <button
             className="converter-btn action-btn"
-            onClick={handleConvertDatetimeToTimestamp}
+            onClick={handleConvert}
             aria-label="转换日期时间为时间戳"
           >
             转换
diff --git a/entrypoints/popup/components/TimestampToDatetime.tsx b/entrypoints/popup/components/TimestampToDatetime.tsx
index 662a39f..264c9ef 100644
--- a/entrypoints/popup/components/TimestampToDatetime.tsx
+++ b/entrypoints/popup/components/TimestampToDatetime.tsx
@@ -1,5 +1,4 @@
 import { useState, useCallback } from 'react';
-import { formatWithZone } from '../../../utils/timeUtils';
 
 /**
  * 时间戳转日期时间组件
@@ -9,11 +8,6 @@ import { formatWithZone } from '../../../utils/timeUtils';
  * 2. 支持多种时区选择
  * 3. 支持毫秒和秒单位切换
  * 4. 提供输入验证和错误提示
- *
- * @component
- * @example
- * ```jsx
- * <TimestampToDatetime />
  * ```
  *
  * @returns {JSX.Element} 时间戳转日期时间组件
@@ -48,54 +42,52 @@ const TIMESTAMP_UNITS = [
 ];
 
 export function TimestampToDatetime() {
-  /** @type {[string, function]} 输入的时间戳值 */
-  const [timestampValue, setTimestampValue] = useState(() => Date.now());
-
-  /** @type {[string, function]} 转换结果 */
+  const [timestampValue, setTimestampValue] = useState(() => dayjs().valueOf().toString());
   const [timestampResult, setTimestampResult] = useState('');
-
-  /** @type {[string, function]} 时间戳单位 ('milliseconds' | 'seconds') */
   const [unit, setUnit] = useState('milliseconds');
-
-  /** @type {[string, function]} 选择的时区 */
   const [selectedZone, setSelectedZone] = useState('Asia/Shanghai');
-
-  /** @type {[string, function]} 错误信息 */
   const [error, setError] = useState('');
 
-  /**
-   * 转换时间戳为日期时间
-   * @type {function(): void}
-   */
-  const handleConvertTimestampToDate = useCallback(() => {
-    try {
-      setError('');
-
-      if (!timestampValue) {
-        setError('请输入时间戳');
-        setTimestampResult('');
-        return;
+  const performConversion = useCallback(
+    (timestampValue: string, selectedZone: string, unit: string) => {
+      if (!timestampValue || timestampValue.trim() === '') {
+        setError('请输入有效的日期时间');
+        return '';
       }
 
-      const numericValue = Number(timestampValue);
-      if (isNaN(numericValue)) {
-        setError('无效的时间戳格式');
-        setTimestampResult('');
-        return;
-      }
+      try {
+        const numberValue = Number(timestampValue);
+        if (isNaN(numberValue)) {
+          setError('时间戳必须是数字');
+          return '';
+        }
 
-      const result = formatWithZone(numericValue, selectedZone, unit);
-      setTimestampResult(result);
-    } catch (err) {
-      console.error('转换时间戳出错:', err);
-      setError('转换失败，请检查输入格式');
-      setTimestampResult('');
-    }
-  }, [timestampValue, selectedZone, unit]);
+        const d = unit === TIMESTAMP_UNITS[0].value ? dayjs(numberValue) : dayjs.unix(numberValue);
+
+        if (!d.isValid()) {
+          setError('无效的时间戳格式');
+          return '';
+        }
+
+        const dateTime = d.tz(selectedZone).format('YYYY/MM/DD HH:mm:ss');
+
+        setError('');
+        return dateTime;
+      } catch (err) {
+        console.error('转换错误:', err);
+        return '';
+      }
+    },
+    [],
+  );
+
+  const handleConvert = useCallback(() => {
+    const newResult = performConversion(timestampValue, selectedZone, unit);
+    setTimestampResult(newResult);
+  }, [timestampValue, selectedZone, unit, performConversion]);
 
   /**
    * 处理时间戳输入变化
-   * @type {function(React.ChangeEvent<HTMLInputElement>): void}
    */
   const handleInputChange = useCallback((e) => {
     setTimestampValue(e.target.value);
@@ -104,18 +96,18 @@ export function TimestampToDatetime() {
 
   /**
    * 处理时区选择变化
-   * @type {function(React.ChangeEvent<HTMLSelectElement>): void}
    */
-  const handleZoneChange = useCallback((e) => {
-    setSelectedZone(e.target.value);
+  const handleZoneChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newZone = e.target.value;
+    setSelectedZone(newZone);
   }, []);
 
   /**
    * 处理时间戳单位变化
-   * @type {function(React.ChangeEvent<HTMLSelectElement>): void}
    */
-  const handleUnitChange = useCallback((e) => {
-    setUnit(e.target.value);
+  const handleUnitChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newUnit = e.target.value;
+    setUnit(newUnit);
   }, []);
 
   return (
@@ -156,7 +148,7 @@ export function TimestampToDatetime() {
         <div className="action-group">
           <button
             className="converter-btn action-btn"
-            onClick={handleConvertTimestampToDate}
+            onClick={handleConvert}
             aria-label="转换时间戳为日期时间"
           >
             转换
diff --git a/package-lock.json b/package-lock.json
index ce55aa7..dc8261d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@testing-library/react": "^16.3.1",
         "@testing-library/user-event": "^13.5.0",
         "date-fns": "^4.1.0",
+        "dayjs": "^1.11.19",
         "dexie": "^4.2.1",
         "dexie-react-hooks": "^4.2.0",
         "react": "^19.2.3",
@@ -3744,6 +3745,12 @@
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.19",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
+      "license": "MIT"
+    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/debounce/-/debounce-1.2.1.tgz",
diff --git a/package.json b/package.json
index 3422bbd..7e3c9d6 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^13.5.0",
     "date-fns": "^4.1.0",
+    "dayjs": "^1.11.19",
     "dexie": "^4.2.1",
     "dexie-react-hooks": "^4.2.0",
     "react": "^19.2.3",
diff --git a/tsconfig.json b/tsconfig.json
index 15fd669..2ac5e7c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -35,7 +35,7 @@
     // 如果你的 @/utils/... 爆红，可以手动添加这个映射。
     // WXT 通常会自动处理，但在这里显式声明有助于 VS Code 智能提示。
     "paths": {
-      "@/*": ["./entrypoints/*", "./components/*", "./utils/*", "./assets/*"]
+      "@/*": ["./*"]
     },
     "types": ["chrome", "webextension-polyfill"],
     "noImplicitAny": false
diff --git a/utils/dayjs.ts b/utils/dayjs.ts
new file mode 100644
index 0000000..2a452a0
--- /dev/null
+++ b/utils/dayjs.ts
@@ -0,0 +1,8 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export default dayjs;
diff --git a/utils/timeUtils.tsx b/utils/timeUtils.tsx
deleted file mode 100644
index e425a18..0000000
--- a/utils/timeUtils.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-export const formatWithZone = (
-  timestamp: number | string,
-  zone = 'Asia/Shanghai',
-  unit = 'milliseconds',
-) => {
-  try {
-    const ms = unit === 'milliseconds' ? Number(timestamp) : Number(timestamp) * 1000;
-    return new Intl.DateTimeFormat('zh-CN', {
-      year: 'numeric',
-      month: 'numeric',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: 'numeric',
-      second: 'numeric',
-      timeZone: zone,
-    }).format(ms);
-  } catch (e) {
-    console.error('formatWithZone error:', e);
-    return '格式错误';
-  }
-};
-
-export const getTimeZoneOffset = (timeZone: string) => {
-  const now = new Date();
-  const utc = new Date(now.toLocaleString('en-US', { timeZone: 'UTC' }));
-  const target = new Date(now.toLocaleString('en-US', { timeZone: timeZone }));
-  return target.getTime() - utc.getTime();
-};
-
-export const formatWithDate = (
-  date: string,
-  timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
-) => {
-  try {
-    // 创建日期对象
-    const dateObj = new Date(date);
-
-    // 检查日期是否有效
-    if (isNaN(dateObj.getTime())) {
-      return '无效的日期';
-    }
-
-    // 如果提供了时区，则需要特殊处理
-    if (timeZone) {
-      // 获取给定时区相对于UTC的时间差（毫秒）
-      const utc = dateObj.getTime() + dateObj.getTimezoneOffset() * 60000;
-
-      // 计算目标时区相对于UTC的偏移量
-      const targetOffset = getTimeZoneOffset(timeZone);
-
-      return utc + targetOffset;
-    } else {
-      return dateObj.getTime();
-    }
-  } catch (error) {
-    return '日期转换错误: ' + error;
-  }
-};