123 lines
4.2 KiB
TypeScript
123 lines
4.2 KiB
TypeScript
import { Layout } from "@/components/Layout";
|
||
import { useState } from "react";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Label } from "@/components/ui/label";
|
||
import { formatDateTime } from "@/components/SearchResults";
|
||
|
||
export default function Home() {
|
||
const now = new Date();
|
||
const [time1Input, setTime1Input] = useState(formatDateTime(now));
|
||
const [time2Input, setTime2Input] = useState(formatDateTime(now));
|
||
|
||
const time1 = new Date(time1Input);
|
||
const time2 = new Date(time2Input);
|
||
const difference = time2.getTime() - time1.getTime();
|
||
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
|
||
const hours = Math.floor(difference / (1000 * 60 * 60)) % 24;
|
||
const minutes = Math.floor((difference / (1000 * 60)) % 60);
|
||
const seconds = Math.floor((difference / 1000) % 60);
|
||
|
||
const diffString = `${Math.abs(days) || 0} 天 ${Math.abs(hours) || 0} 时 ${Math.abs(minutes) || 0} 分`;
|
||
const isNegative = difference < 0;
|
||
|
||
const setQuickTime = (hoursOffset: number) => {
|
||
const newTime = new Date(time1Input);
|
||
newTime.setHours(newTime.getHours() + hoursOffset);
|
||
setTime2Input(formatDateTime(newTime));
|
||
};
|
||
|
||
return (
|
||
<Layout>
|
||
<div className="max-w-4xl mx-auto space-y-6">
|
||
<div className="space-y-2 mt-8">
|
||
<h2 className="text-2xl font-bold tracking-tight">时间计算器</h2>
|
||
<p className="text-muted-foreground">输入两个时间点，计算精确的时间差</p>
|
||
</div>
|
||
|
||
{/* 时间输入区域 */}
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>时间设置</CardTitle>
|
||
<CardDescription>选择或输入开始时间和结束时间</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-6">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div className="space-y-3">
|
||
<Label htmlFor="start-time">开始时间</Label>
|
||
<Input
|
||
id="start-time"
|
||
value={time1Input}
|
||
onChange={(e) => setTime1Input(e.target.value)}
|
||
/>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setTime1Input(formatDateTime(now))}
|
||
className="w-full"
|
||
>
|
||
设为当前时间
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="space-y-3">
|
||
<Label htmlFor="end-time">结束时间</Label>
|
||
<Input
|
||
id="end-time"
|
||
value={time2Input}
|
||
onChange={(e) => setTime2Input(e.target.value)}
|
||
/>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setTime2Input(formatDateTime(now))}
|
||
className="w-full"
|
||
>
|
||
设为当前时间
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>计算结果</CardTitle>
|
||
<CardDescription>两个时间点之间的精确时间差</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="text-center space-y-4">
|
||
<div className="space-y-2">
|
||
<div className="text-2xl font-bold">{isNegative ? "时间差为负值" : diffString}</div>
|
||
{isNegative && (
|
||
<div className="text-lg text-muted-foreground">结束时间早于开始时间</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 pt-4">
|
||
<div className="space-y-2">
|
||
<div className="text-2xl font-bold">{Math.abs(days)}</div>
|
||
<div className="text-sm text-muted-foreground">天数</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="text-2xl font-bold">{Math.abs(hours)}</div>
|
||
<div className="text-sm text-muted-foreground">小时</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="text-2xl font-bold">{Math.abs(minutes)}</div>
|
||
<div className="text-sm text-muted-foreground">分钟</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="text-2xl font-bold">{Math.abs(seconds)}</div>
|
||
<div className="text-sm text-muted-foreground">秒数</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|