feat(timestamp): 实现时间戳与日期时间转换功能

- 新增日期时间转时间戳组件 DatetimeToTimestamp
- 新增时间戳转日期时间组件 TimestampToDatetime
- 新增当前时间戳显示组件 TimestampExecution
- 重构 TimestampPage 页面,拆分功能到独立组件
- 扩展 timeUtils 工具函数,支持时区处理和格式化
- 添加时区选择器和时间单位切换功能
- 优化时间戳转换逻辑,支持毫秒和秒单位切换
- 改进 App.css 样式宽度设置
This commit is contained in:
雨霖铃
2025-12-19 22:25:27 +08:00
parent 4f1a78ebb5
commit d05a8a7065
6 changed files with 243 additions and 159 deletions
+45
View File
@@ -0,0 +1,45 @@
import {useEffect, useState} from "react";
import CopyButton from "./CopyButton";
export function TimestampExecution() {
const [currentTimestamp, setCurrentTimestamp] = useState(Math.floor(Date.now()));
const [showMilliseconds, setShowMilliseconds] = useState(true);
const [isRunningTimestamp, setIsRunningTimestamp] = useState(true);
// 定时更新时间戳
useEffect(() => {
const timerId = isRunningTimestamp ? setInterval(() => {
setCurrentTimestamp(Math.floor(Date.now()));
}, showMilliseconds ? 100 : 1000) : null;
return () => clearInterval(timerId);
}, [isRunningTimestamp, showMilliseconds]);
const toggleUnit = () => setShowMilliseconds(prev => !prev);
const toggleTimestamp = () => setIsRunningTimestamp(prev => !prev);
return (<div>
<h2>当前时间戳</h2>
<p>
<span>{Math.floor(currentTimestamp / (showMilliseconds ? 1 : 1000))}</span>
<span>{showMilliseconds ? '毫秒' : '秒'}</span>
</p>
<div>
<button type="button"
className="action-btn"
onClick={toggleUnit}
aria-label={showMilliseconds ? '切换为秒' : '切换为毫秒'}
>
切换单位
</button>
<CopyButton text={currentTimestamp.toString()} buttonText='复制'></CopyButton>
<button
type="button" // 明确指定类型,防止在 Form 中意外触发提交
className={`btn ${isRunningTimestamp ? 'stop-btn' : 'action-btn'}`}
onClick={toggleTimestamp}
aria-label={isRunningTimestamp ? '停止时间戳更新' : '开始时间戳更新'}
>
{isRunningTimestamp ? '停止' : '开始'}
</button>
</div>
</div>)
}