root
88 lines
3.5 KiB
TypeScript
88 lines
3.5 KiB
TypeScript
import { useState, useCallback } from 'react'
|
|
|
|
function timestampToDate(ts: number): string {
|
|
const d = new Date(ts * 1000)
|
|
return d.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' })
|
|
}
|
|
|
|
function dateToTimestamp(dateStr: string): number {
|
|
return Math.floor(new Date(dateStr).getTime() / 1000)
|
|
}
|
|
|
|
export default function TimestampTool() {
|
|
const [timestamp, setTimestamp] = useState('')
|
|
const [dateStr, setDateStr] = useState('')
|
|
const [tsResult, setTsResult] = useState('')
|
|
const [dateResult, setDateResult] = useState('')
|
|
const [now, setNow] = useState(Math.floor(Date.now() / 1000))
|
|
|
|
const handleTsToDate = useCallback(() => {
|
|
const ts = parseInt(timestamp, 10)
|
|
if (isNaN(ts)) {
|
|
setTsResult('请输入有效的时间戳')
|
|
return
|
|
}
|
|
setTsResult(timestampToDate(ts))
|
|
}, [timestamp])
|
|
|
|
const handleDateToTs = useCallback(() => {
|
|
if (!dateStr) {
|
|
setDateResult('请选择日期时间')
|
|
return
|
|
}
|
|
const ts = dateToTimestamp(dateStr)
|
|
setDateResult(String(ts))
|
|
}, [dateStr])
|
|
|
|
const refreshNow = useCallback(() => {
|
|
const n = Math.floor(Date.now() / 1000)
|
|
setNow(n)
|
|
}, [])
|
|
|
|
const copyToTsInput = useCallback(() => {
|
|
setTimestamp(String(now))
|
|
}, [now])
|
|
|
|
return (
|
|
<div className="h-full flex flex-col gap-6">
|
|
<div className="bg-gray-900 border border-gray-700 rounded-lg p-4">
|
|
<div className="text-sm text-gray-400 mb-2">当前时间戳</div>
|
|
<div className="flex items-center gap-3">
|
|
<code className="text-lg font-mono text-blue-400">{now}</code>
|
|
<button onClick={refreshNow} className="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-xs transition-colors">刷新</button>
|
|
<button onClick={copyToTsInput} className="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-xs transition-colors">填入</button>
|
|
<span className="text-sm text-gray-400">{timestampToDate(now)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-gray-900 border border-gray-700 rounded-lg p-4">
|
|
<label className="text-sm text-gray-400 mb-2 block">时间戳 → 日期</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
className="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 font-mono text-sm outline-none focus:border-blue-500"
|
|
value={timestamp}
|
|
onChange={(e) => setTimestamp(e.target.value)}
|
|
placeholder="输入时间戳（秒）"
|
|
/>
|
|
<button onClick={handleTsToDate} className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition-colors shrink-0">转换</button>
|
|
</div>
|
|
{tsResult && <p className="mt-2 text-sm font-mono text-green-400">{tsResult}</p>}
|
|
</div>
|
|
|
|
<div className="bg-gray-900 border border-gray-700 rounded-lg p-4">
|
|
<label className="text-sm text-gray-400 mb-2 block">日期 → 时间戳</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="datetime-local"
|
|
className="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500 [color-scheme:dark]"
|
|
value={dateStr}
|
|
onChange={(e) => setDateStr(e.target.value)}
|
|
/>
|
|
<button onClick={handleDateToTs} className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-sm transition-colors shrink-0">转换</button>
|
|
</div>
|
|
{dateResult && <p className="mt-2 text-sm font-mono text-green-400">{dateResult}</p>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|