initial release

src/tools/TimestampTool.tsx

@@ -0,0 +1,87 @@
+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>
+  )
+}