259 lines
9.0 KiB
TypeScript
259 lines
9.0 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { Clock, ArrowLeftRight, Copy, RefreshCw } from "lucide-react";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||
import { toast } from "sonner";
|
||
import dayjs from "dayjs";
|
||
|
||
export default function TimestampPage() {
|
||
const [timestamp, setTimestamp] = useState("");
|
||
const [dateTime, setDateTime] = useState<string>("");
|
||
const [unit, setUnit] = useState<"seconds" | "milliseconds">("seconds");
|
||
const [currentTimestamp, setCurrentTimestamp] = useState("");
|
||
|
||
useEffect(() => {
|
||
// Initialize date time with current time
|
||
setDateTime(dayjs().format("YYYY-MM-DDTHH:mm:ss"));
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
const updateCurrent = () => {
|
||
const now = Date.now();
|
||
setCurrentTimestamp(
|
||
unit === "seconds" ? Math.floor(now / 1000).toString() : now.toString()
|
||
);
|
||
};
|
||
updateCurrent();
|
||
const timer = setInterval(updateCurrent, 1000);
|
||
return () => clearInterval(timer);
|
||
}, [unit]);
|
||
|
||
const handleUnitChange = (newUnit: "seconds" | "milliseconds") => {
|
||
if (timestamp && !isNaN(Number(timestamp))) {
|
||
const ts = Number(timestamp);
|
||
if (unit === "seconds" && newUnit === "milliseconds") {
|
||
setTimestamp((ts * 1000).toString());
|
||
} else if (unit === "milliseconds" && newUnit === "seconds") {
|
||
setTimestamp(Math.floor(ts / 1000).toString());
|
||
}
|
||
}
|
||
setUnit(newUnit);
|
||
};
|
||
|
||
const timestampToDate = () => {
|
||
if (!timestamp) {
|
||
toast.warning("请输入时间戳");
|
||
return;
|
||
}
|
||
const ts = parseInt(timestamp);
|
||
if (isNaN(ts)) {
|
||
toast.error("无效的时间戳");
|
||
return;
|
||
}
|
||
const date = unit === "seconds" ? dayjs.unix(ts) : dayjs(ts);
|
||
if (!date.isValid()) {
|
||
toast.error("无效的时间戳");
|
||
return;
|
||
}
|
||
setDateTime(date.format("YYYY-MM-DDTHH:mm:ss"));
|
||
toast.success("转换成功");
|
||
};
|
||
|
||
const dateToTimestamp = () => {
|
||
if (!dateTime) {
|
||
toast.warning("请选择日期时间");
|
||
return;
|
||
}
|
||
const date = dayjs(dateTime);
|
||
const ts = unit === "seconds" ? date.unix() : date.valueOf();
|
||
setTimestamp(ts.toString());
|
||
toast.success("转换成功");
|
||
};
|
||
|
||
const copyToClipboard = async (text: string) => {
|
||
try {
|
||
await navigator.clipboard.writeText(text);
|
||
toast.success("已复制到剪贴板");
|
||
} catch {
|
||
toast.error("复制失败");
|
||
}
|
||
};
|
||
|
||
const setNow = () => {
|
||
const now = dayjs();
|
||
setDateTime(now.format("YYYY-MM-DDTHH:mm:ss"));
|
||
const ts = unit === "seconds" ? now.unix() : now.valueOf();
|
||
setTimestamp(ts.toString());
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||
{/* Page Header */}
|
||
<div className="flex items-center space-x-4 border-b pb-4">
|
||
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-amber-500 to-orange-600 shadow-lg">
|
||
<Clock className="h-6 w-6 text-white" />
|
||
</div>
|
||
<div>
|
||
<h1 className="text-2xl font-bold tracking-tight">时间戳转换</h1>
|
||
<p className="text-muted-foreground">
|
||
Unix 时间戳与日期时间互相转换
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Current Timestamp */}
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="flex items-center gap-2 text-base font-medium">
|
||
<Clock className="h-4 w-4" />
|
||
当前时间戳
|
||
</CardTitle>
|
||
<Tabs
|
||
value={unit}
|
||
onValueChange={(v) => handleUnitChange(v as "seconds" | "milliseconds")}
|
||
className="w-45"
|
||
>
|
||
<TabsList className="grid w-full grid-cols-2 h-8">
|
||
<TabsTrigger value="seconds" className="text-xs">秒(s)</TabsTrigger>
|
||
<TabsTrigger value="milliseconds" className="text-xs">毫秒(ms)</TabsTrigger>
|
||
</TabsList>
|
||
</Tabs>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex items-center gap-4">
|
||
<div className="font-mono text-3xl font-bold text-primary tracking-wider">
|
||
{currentTimestamp}
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
size="icon"
|
||
onClick={() => copyToClipboard(currentTimestamp)}
|
||
>
|
||
<Copy className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<div className="grid gap-6 lg:grid-cols-2">
|
||
{/* Timestamp to Date */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-base font-medium">时间戳 → 日期时间</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="space-y-2">
|
||
<div className="relative">
|
||
<Input
|
||
placeholder={`输入时间戳 (${unit === "seconds" ? "秒" : "毫秒"})`}
|
||
value={timestamp}
|
||
onChange={(e) => setTimestamp(e.target.value)}
|
||
className="pr-20 font-mono"
|
||
/>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="absolute right-1 top-1 h-7 text-xs text-muted-foreground hover:text-primary"
|
||
onClick={() => setTimestamp(currentTimestamp)}
|
||
>
|
||
使用当前
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<Button onClick={timestampToDate} className="w-full gap-2">
|
||
<ArrowLeftRight className="h-4 w-4" />
|
||
转换为日期时间
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Date to Timestamp */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-base font-medium">日期时间 → 时间戳</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="space-y-2">
|
||
<div className="relative">
|
||
<Input
|
||
type="datetime-local"
|
||
step="1"
|
||
value={dateTime}
|
||
onChange={(e) => setDateTime(e.target.value)}
|
||
className="font-mono"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<Button onClick={dateToTimestamp} className="w-full gap-2">
|
||
<ArrowLeftRight className="h-4 w-4" />
|
||
转换为时间戳
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Result Display */}
|
||
<Card>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-base font-medium">转换结果</CardTitle>
|
||
<Button variant="ghost" size="sm" onClick={setNow} className="gap-2 h-8">
|
||
<RefreshCw className="h-3.5 w-3.5" />
|
||
设为当前时间
|
||
</Button>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid gap-4 md:grid-cols-2">
|
||
<div className="rounded-lg bg-muted p-4 space-y-1">
|
||
<p className="text-xs text-muted-foreground">
|
||
时间戳 ({unit === "seconds" ? "秒" : "毫秒"})
|
||
</p>
|
||
<div className="font-mono text-lg font-semibold truncate">
|
||
{timestamp || "-"}
|
||
</div>
|
||
</div>
|
||
<div className="rounded-lg bg-muted p-4 space-y-1">
|
||
<p className="text-xs text-muted-foreground">
|
||
日期时间
|
||
</p>
|
||
<div className="font-mono text-lg font-semibold truncate">
|
||
{dateTime ? dayjs(dateTime).format("YYYY-MM-DD HH:mm:ss") : "-"}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Info Card */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2 text-base">
|
||
<span className="text-xl">💡</span> 使用说明
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<div className="space-y-2">
|
||
<ul className="list-disc pl-4 text-sm text-muted-foreground space-y-1">
|
||
<li>Unix 时间戳是从 1970-01-01 00:00:00 UTC 开始的秒数</li>
|
||
<li>支持秒级和毫秒级时间戳转换</li>
|
||
<li>JavaScript 通常使用毫秒级时间戳</li>
|
||
</ul>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<ul className="list-disc pl-4 text-sm text-muted-foreground space-y-1">
|
||
<li>后端语言（如 PHP、Python）通常使用秒级时间戳</li>
|
||
<li>点击"使用当前"可快速填入当前时间戳</li>
|
||
<li>支持复制当前实时时间戳</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
);
|
||
}
|