-
当前时间戳
-
- {Math.floor(currentTimestamp / (showMilliseconds ? 1 : 1000))}
- {showMilliseconds ? '毫秒' : '秒'}
-
-
-
-
-
+ /**
+ * 切换时间戳自动更新状态（启动/停止）
+ * @type {function(): void}
+ */
+ const toggleTimestamp = useCallback(() => {
+ setIsRunningTimestamp(prev => !prev);
+ }, []);
+
+ /**
+ * 切换单位按钮的辅助文本
+ * @type {string}
+ */
+ const unitButtonLabel = showMilliseconds ? '切换为秒显示' : '切换为毫秒显示';
+
+ /**
+ * 启动/停止按钮的辅助文本
+ * @type {string}
+ */
+ const toggleButtonLabel = isRunningTimestamp ? '停止时间戳自动更新' : '开始时间戳自动更新';
+
+ /**
+ * 启动/停止按钮的显示文本
+ * @type {string}
+ */
+ const toggleButtonText = isRunningTimestamp ? '停止' : '开始';
+
+ return (
+
+
+ {displayTimestamp}
+ {unitText}
+
+
+
+
+
+
+
+
+
-
)
+ );
}
\ No newline at end of file
diff --git a/src/components/TimestampToDatetime.js b/src/components/TimestampToDatetime.js
index 5b50936..8f14bcc 100644
--- a/src/components/TimestampToDatetime.js
+++ b/src/components/TimestampToDatetime.js
@@ -1,66 +1,183 @@
-import {useMemo, useState} from "react";
+import {useState, useCallback} from "react";
import {formatWithZone, TimezoneOptions} from "../utils/timeUtils";
+/**
+ * 时间戳转日期时间组件
+ *
+ * 功能特性：
+ * 1. 将时间戳转换为日期时间字符串
+ * 2. 支持多种时区选择
+ * 3. 支持毫秒和秒单位切换
+ * 4. 提供输入验证和错误提示
+ *
+ * @component
+ * @example
+ * ```jsx
+ *
+ * ```
+ *
+ * @returns {JSX.Element} 时间戳转日期时间组件
+ */
+
+// 常用时区列表
+const TIME_ZONE_LIST = [
+ '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 TIMESTAMP_UNITS = [
+ {value: 'milliseconds', label: '毫秒(ms)'},
+ {value: 'seconds', label: '秒(s)'},
+];
+
export function TimestampToDatetime() {
+ /** @type {[string, function]} 输入的时间戳值 */
const [timestampValue, setTimestampValue] = useState(Date.now());
+
+ /** @type {[string, function]} 转换结果 */
const [timestampResult, setTimestampResult] = useState('');
+
+ /** @type {[string, function]} 时间戳单位 ('milliseconds' | 'seconds') */
const [unit, setUnit] = useState('milliseconds');
+
+ /** @type {[string, function]} 选择的时区 */
const [selectedZone, setSelectedZone] = useState('Asia/Shanghai');
- const timeZoneList = useMemo(() => ['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',], []);
- function handleConvertTimestampToDate() {
- if (!timestampValue) {
- setTimestampResult('请输入时间戳');
- return;
+ /** @type {[string, function]} 错误信息 */
+ const [error, setError] = useState('');
+
+ /**
+ * 转换时间戳为日期时间
+ * @type {function(): void}
+ */
+ const handleConvertTimestampToDate = useCallback(() => {
+ try {
+ setError('');
+
+ if (!timestampValue) {
+ setError('请输入时间戳');
+ setTimestampResult('');
+ return;
+ }
+
+ const numericValue = Number(timestampValue);
+ if (isNaN(numericValue)) {
+ setError('无效的时间戳格式');
+ setTimestampResult('');
+ return;
+ }
+
+ const result = formatWithZone(numericValue, selectedZone, unit);
+ setTimestampResult(result);
+ } catch (err) {
+ setError('转换失败，请检查输入格式');
+ setTimestampResult('');
}
-
- const result = formatWithZone(timestampValue, selectedZone, unit);
- setTimestampResult(result);
- }
+ }, [timestampValue, selectedZone, unit]);
- const handleInputChange = (e) => setTimestampValue(e.target.value);
+ /**
+ * 处理时间戳输入变化
+ * @type {function(React.ChangeEvent
): void}
+ */
+ const handleInputChange = useCallback((e) => {
+ setTimestampValue(e.target.value);
+ setError(''); // 清除错误信息
+ }, []);
+
+ /**
+ * 处理时区选择变化
+ * @type {function(React.ChangeEvent): void}
+ */
+ const handleZoneChange = useCallback((e) => {
+ setSelectedZone(e.target.value);
+ }, []);
+
+ /**
+ * 处理时间戳单位变化
+ * @type {function(React.ChangeEvent): void}
+ */
+ const handleUnitChange = useCallback((e) => {
+ setUnit(e.target.value);
+ }, []);
return (
-
-
时间戳转日期时间
-
-
+
+
时间戳转日期时间
+
+
+
-
-