时间戳转换工具（使用claude code开发）-程序员充电站

在线网址

https://chat.xutongbao.top/nextjs/light/time

参考网站

https://www.songcj.com/tools/timestamp

提示词

E:\source\m-yuying-nextjs\app\light\time\page.tsx文件，这个页面功能是【时间戳转换工具】，具体功能参考这个在线网页：https://www.songcj.com/tools/timestamp 要求界面炫酷，页面原来的返回按钮需要保留，编码风格符合目前项目原有的风格

源码

'use client' import { useState, useEffect } from 'react' import Header from '@/components/header' import { ArrowLeft, Clock, Copy, RefreshCw, Globe, Check, ArrowRightLeft, } from 'lucide-react' import { useRouter } from 'next/navigation' //参考网站： https://www.songcj.com/tools/timestamp export default function TimestampToolPage() { const router = useRouter() const [currentTime, setCurrentTime] = useState<Date>(new Date()) const [timestampInput, setTimestampInput] = useState('') const [timestampResult, setTimestampResult] = useState({ local: '', utc: '' }) const [dateInput, setDateInput] = useState('') const [dateResult, setDateResult] = useState({ seconds: '', milliseconds: '' }) const [copiedText, setCopiedText] = useState('') const [selectedTimezone, setSelectedTimezone] = useState('UTC+8') // 时区列表 const timezones = [ { offset: 'UTC-11', label: 'UTC-11:00', cities: ['Pacific/Midway', 'Pacific/Niue'] }, { offset: 'UTC-10', label: 'UTC-10:00', cities: ['Pacific/Honolulu', 'Pacific/Tahiti'] }, { offset: 'UTC-9', label: 'UTC-09:00', cities: ['America/Anchorage', 'America/Juneau'] }, { offset: 'UTC-8', label: 'UTC-08:00', cities: ['America/Los_Angeles', 'America/Vancouver'] }, { offset: 'UTC-7', label: 'UTC-07:00', cities: ['America/Denver', 'America/Phoenix'] }, { offset: 'UTC-6', label: 'UTC-06:00', cities: ['America/Chicago', 'America/Mexico_City'] }, { offset: 'UTC-5', label: 'UTC-05:00', cities: ['America/New_York', 'America/Toronto'] }, { offset: 'UTC-4', label: 'UTC-04:00', cities: ['America/Caracas', 'America/Santiago'] }, { offset: 'UTC-3', label: 'UTC-03:00', cities: ['America/Sao_Paulo', 'America/Argentina/Buenos_Aires'] }, { offset: 'UTC-2', label: 'UTC-02:00', cities: ['America/Noronha', 'Atlantic/South_Georgia'] }, { offset: 'UTC-1', label: 'UTC-01:00', cities: ['Atlantic/Azores', 'Atlantic/Cape_Verde'] }, { offset: 'UTC+0', label: 'UTC±00:00', cities: ['Europe/London', 'Africa/Casablanca'] }, { offset: 'UTC+1', label: 'UTC+01:00', cities: ['Europe/Paris', 'Europe/Berlin'] }, { offset: 'UTC+2', label: 'UTC+02:00', cities: ['Europe/Athens', 'Africa/Cairo'] }, { offset: 'UTC+3', label: 'UTC+03:00', cities: ['Europe/Moscow', 'Africa/Nairobi'] }, { offset: 'UTC+4', label: 'UTC+04:00', cities: ['Asia/Dubai', 'Asia/Baku'] }, { offset: 'UTC+5', label: 'UTC+05:00', cities: ['Asia/Karachi', 'Asia/Tashkent'] }, { offset: 'UTC+5:30', label: 'UTC+05:30', cities: ['Asia/Kolkata', 'Asia/Colombo'] }, { offset: 'UTC+6', label: 'UTC+06:00', cities: ['Asia/Dhaka', 'Asia/Almaty'] }, { offset: 'UTC+7', label: 'UTC+07:00', cities: ['Asia/Bangkok', 'Asia/Jakarta'] }, { offset: 'UTC+8', label: 'UTC+08:00', cities: ['Asia/Shanghai', 'Asia/Singapore', 'Asia/Hong_Kong'] }, { offset: 'UTC+9', label: 'UTC+09:00', cities: ['Asia/Tokyo', 'Asia/Seoul'] }, { offset: 'UTC+10', label: 'UTC+10:00', cities: ['Australia/Sydney', 'Pacific/Guam'] }, { offset: 'UTC+11', label: 'UTC+11:00', cities: ['Pacific/Noumea', 'Asia/Vladivostok'] }, { offset: 'UTC+12', label: 'UTC+12:00', cities: ['Pacific/Auckland', 'Pacific/Fiji'] }, { offset: 'UTC+13', label: 'UTC+13:00', cities: ['Pacific/Tongatapu', 'Pacific/Apia'] }, { offset: 'UTC+14', label: 'UTC+14:00', cities: ['Pacific/Kiritimati'] }, ] // 更新当前时间 useEffect(() => { const timer = setInterval(() => { setCurrentTime(new Date()) }, 1000) return () => clearInterval(timer) }, []) // 时间戳转日期 useEffect(() => { if (timestampInput) { try { const timestamp = parseInt(timestampInput) if (isNaN(timestamp)) { setTimestampResult({ local: '无效的时间戳', utc: '无效的时间戳' }) return } // 自动识别10位或13位时间戳 const date = timestamp.toString().length === 10 ? new Date(timestamp * 1000) : new Date(timestamp) if (isNaN(date.getTime())) { setTimestampResult({ local: '无效的时间戳', utc: '无效的时间戳' }) return } const local = date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false, }) const utc = date.toISOString().replace('T', ' ').replace('Z', '') setTimestampResult({ local, utc }) } catch (error) { setTimestampResult({ local: '转换失败', utc: '转换失败' }) } } else { setTimestampResult({ local: '', utc: '' }) } }, [timestampInput]) // 日期转时间戳 useEffect(() => { if (dateInput) { try { const date = new Date(dateInput) if (isNaN(date.getTime())) { setDateResult({ seconds: '无效的日期格式', milliseconds: '无效的日期格式' }) return } const seconds = Math.floor(date.getTime() / 1000).toString() const milliseconds = date.getTime().toString() setDateResult({ seconds, milliseconds }) } catch (error) { setDateResult({ seconds: '转换失败', milliseconds: '转换失败' }) } } else { setDateResult({ seconds: '', milliseconds: '' }) } }, [dateInput]) // 复制到剪贴板 const copyToClipboard = async (text: string) => { try { await navigator.clipboard.writeText(text) setCopiedText(text) setTimeout(() => setCopiedText(''), 2000) } catch (error) { console.error('复制失败:', error) } } // 格式化日期显示 const formatDate = (date: Date) => { const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${weekdays[date.getDay()]}` } // 获取时区时间 const getTimezoneTime = (offset: string) => { const offsetMinutes = parseOffset(offset) const utcTime = new Date(currentTime.getTime() + currentTime.getTimezoneOffset() * 60000) const timezoneTime = new Date(utcTime.getTime() + offsetMinutes * 60000) return timezoneTime.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false, }) } // 解析时区偏移量 const parseOffset = (offset: string): number => { if (offset === 'UTC+0') return 0 const match = offset.match(/UTC([+-])(\d+)(?::(\d+))?/) if (!match) return 0 const sign = match[1] === '+' ? 1 : -1 const hours = parseInt(match[2]) const minutes = match[3] ? parseInt(match[3]) : 0 return sign * (hours * 60 + minutes) } return ( <> <Header /> <main className="min-h-screen bg-linear-to-br from-primary/5 via-background to-secondary/5 relative overflow-hidden"> {/* 背景装饰 */} <div className="absolute inset-0 overflow-hidden pointer-events-none"> <div className="absolute top-20 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl animate-pulse-slow" /> <div className="absolute bottom-20 right-1/4 w-96 h-96 bg-secondary/5 rounded-full blur-3xl animate-pulse-slow" style={{ animationDelay: '2s' }} /> </div> {/* 内容区域 */} <div className="relative max-w-7xl mx-auto px-4 py-12"> {/* 返回按钮 */} <button onClick={() => router.push('/light')} className="group top24 left24 z-40 flex items-center gap-2 px-4 py-3 rounded-2xl bg-card/80 backdrop-blur-xl border-2 border-border hover:border-primary shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 animate-fade-in" > <div className="relative"> <div className="absolute inset-0 bg-primary/20 rounded-full blur-md scale-0 group-hover:scale-150 transition-transform duration-500" /> <ArrowLeft className="relative w-5 h-5 text-primary group-hover:text-primary transition-all duration-300 group-hover:-translate-x-1" /> </div> <span className="text-sm font-medium text-foreground group-hover:text-primary transition-colors duration-300"> 返回 </span> </button> {/* 页面标题 */} <div className="text-center mb-12 mt-8 animate-fade-in"> <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 mb-4"> <Clock className="w-4 h-4 text-primary" /> <span className="text-sm font-medium text-primary">时间工具</span> </div> <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4"> 时间戳 <span className="bg-linear-to-r from-primary via-secondary to-accent bg-clip-text text-transparent"> {' '} 转换工具{' '} </span> </h1> <p className="text-lg text-muted-foreground">快速转换时间戳与日期时间，支持全球时区查看</p> </div> {/* 当前时间显示 */} <div className="bg-card rounded-3xl p-8 shadow-xl border border-border mb-8 animate-fade-in-up"> <div className="flex items-center justify-between mb-6"> <h2 className="text-2xl font-bold text-foreground flex items-center gap-2"> <Clock className="w-6 h-6 text-primary" /> 当前时间 </h2> <button onClick={() => setCurrentTime(new Date())} className="p-2 rounded-lg bg-primary/10 hover:bg-primary/20 text-primary transition-all duration-200 hover:scale-110" > <RefreshCw className="w-5 h-5" /> </button> </div> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="bg-linear-to-br from-primary/10 to-primary/5 rounded-2xl p-6 border border-primary/20"> <div className="text-sm text-muted-foreground mb-2">本地时间</div> <div className="text-2xl font-bold text-foreground mb-2"> {currentTime.toLocaleTimeString('zh-CN', { hour12: false })} </div> <div className="text-sm text-muted-foreground">{formatDate(currentTime)}</div> </div> <div className="bg-linear-to-br from-secondary/10 to-secondary/5 rounded-2xl p-6 border border-secondary/20"> <div className="text-sm text-muted-foreground mb-2 flex items-center justify-between"> 秒级时间戳（10位） <button onClick={() => copyToClipboard(Math.floor(currentTime.getTime() / 1000).toString())} className="p-1 rounded hover:bg-secondary/20 transition-colors" > {copiedText === Math.floor(currentTime.getTime() / 1000).toString() ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4 text-secondary" /> )} </button> </div> <div className="text-2xl font-bold text-foreground"> {Math.floor(currentTime.getTime() / 1000)} </div> </div> <div className="bg-linear-to-br from-accent/10 to-accent/5 rounded-2xl p-6 border border-accent/20"> <div className="text-sm text-muted-foreground mb-2 flex items-center justify-between"> 毫秒级时间戳（13位） <button onClick={() => copyToClipboard(currentTime.getTime().toString())} className="p-1 rounded hover:bg-accent/20 transition-colors" > {copiedText === currentTime.getTime().toString() ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4 text-accent" /> )} </button> </div> <div className="text-2xl font-bold text-foreground">{currentTime.getTime()}</div> </div> </div> </div> {/* 转换工具区域 */} <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> {/* 时间戳转日期 */} <div className="bg-card rounded-3xl p-8 shadow-xl border border-border animate-fade-in-up"> <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-2"> <ArrowRightLeft className="w-6 h-6 text-primary" /> 时间戳 → 日期时间 </h2> <div className="space-y-4"> <div> <label className="block text-sm font-medium text-muted-foreground mb-2"> 输入时间戳（10位或13位） </label> <div className="flex gap-2"> <input type="text" value={timestampInput} onChange={(e) => setTimestampInput(e.target.value)} placeholder="例如：1704067200 或 1704067200000" className="flex-1 px-4 py-3 rounded-xl bg-muted border border-border focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all" /> <button onClick={() => setTimestampInput(Math.floor(currentTime.getTime() / 1000).toString())} className="px-4 py-3 rounded-xl bg-primary text-white hover:bg-primary/90 transition-all duration-200 hover:scale-105 whitespace-nowrap" > 当前时间戳 </button> </div> </div> {timestampResult.local && ( <div className="space-y-3 animate-fade-in"> <div className="bg-muted/50 rounded-xl p-4"> <div className="text-sm text-muted-foreground mb-2 flex items-center justify-between"> 本地时间 <button onClick={() => copyToClipboard(timestampResult.local)} className="p-1 rounded hover:bg-muted transition-colors" > {copiedText === timestampResult.local ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4 text-muted-foreground" /> )} </button> </div> <div className="text-lg font-semibold text-foreground">{timestampResult.local}</div> </div> <div className="bg-muted/50 rounded-xl p-4"> <div className="text-sm text-muted-foreground mb-2 flex items-center justify-between"> UTC时间 <button onClick={() => copyToClipboard(timestampResult.utc)} className="p-1 rounded hover:bg-muted transition-colors" > {copiedText === timestampResult.utc ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4 text-muted-foreground" /> )} </button> </div> <div className="text-lg font-semibold text-foreground">{timestampResult.utc}</div> </div> </div> )} </div> </div> {/* 日期转时间戳 */} <div className="bg-card rounded-3xl p-8 shadow-xl border border-border animate-fade-in-up"> <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-2"> <ArrowRightLeft className="w-6 h-6 text-secondary" /> 日期时间 → 时间戳 </h2> <div className="space-y-4"> <div> <label className="block text-sm font-medium text-muted-foreground mb-2"> 输入日期时间 </label> <div className="flex gap-2"> <input type="datetime-local" value={dateInput} onChange={(e) => setDateInput(e.target.value)} className="flex-1 px-4 py-3 rounded-xl bg-muted border border-border focus:border-secondary focus:ring-2 focus:ring-secondary/20 outline-none transition-all" /> <button onClick={() => { const now = new Date() const offset = now.getTimezoneOffset() * 60000 const localISOTime = new Date(now.getTime() - offset).toISOString().slice(0, 16) setDateInput(localISOTime) }} className="px-4 py-3 rounded-xl bg-secondary text-white hover:bg-secondary/90 transition-all duration-200 hover:scale-105 whitespace-nowrap" > 当前时间 </button> </div> </div> {dateResult.seconds && ( <div className="space-y-3 animate-fade-in"> <div className="bg-muted/50 rounded-xl p-4"> <div className="text-sm text-muted-foreground mb-2 flex items-center justify-between"> 秒级时间戳（10位） <button onClick={() => copyToClipboard(dateResult.seconds)} className="p-1 rounded hover:bg-muted transition-colors" > {copiedText === dateResult.seconds ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4 text-muted-foreground" /> )} </button> </div> <div className="text-lg font-semibold text-foreground">{dateResult.seconds}</div> </div> <div className="bg-muted/50 rounded-xl p-4"> <div className="text-sm text-muted-foreground mb-2 flex items-center justify-between"> 毫秒级时间戳（13位） <button onClick={() => copyToClipboard(dateResult.milliseconds)} className="p-1 rounded hover:bg-muted transition-colors" > {copiedText === dateResult.milliseconds ? ( <Check className="w-4 h-4 text-green-500" /> ) : ( <Copy className="w-4 h-4 text-muted-foreground" /> )} </button> </div> <div className="text-lg font-semibold text-foreground">{dateResult.milliseconds}</div> </div> </div> )} </div> </div> </div> {/* 世界时区 */} <div className="bg-card rounded-3xl p-8 shadow-xl border border-border animate-fade-in-up"> <h2 className="text-2xl font-bold text-foreground mb-6 flex items-center gap-2"> <Globe className="w-6 h-6 text-accent" /> 世界时区 </h2> <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4"> {timezones.map((tz) => ( <div key={tz.offset} className="bg-muted/50 rounded-xl p-4 hover:bg-muted transition-all duration-200 hover:scale-105 cursor-pointer border border-transparent hover:border-accent/50" onClick={() => setSelectedTimezone(tz.offset)} > <div className="text-sm font-medium text-primary mb-1">{tz.label}</div> <div className="text-xs text-muted-foreground mb-2">{tz.cities[0].split('/')[1]}</div> <div className="text-sm font-semibold text-foreground">{getTimezoneTime(tz.offset)}</div> </div> ))} </div> {/* 时区详情 */} {selectedTimezone && ( <div className="mt-6 p-6 bg-linear-to-br from-accent/10 to-accent/5 rounded-2xl border border-accent/20 animate-fade-in"> <h3 className="text-lg font-bold text-foreground mb-4"> {timezones.find((tz) => tz.offset === selectedTimezone)?.label} 时区详情 </h3> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3"> {timezones .find((tz) => tz.offset === selectedTimezone) ?.cities.map((city) => ( <div key={city} className="bg-card/50 rounded-lg px-4 py-2"> <div className="text-sm font-medium text-foreground">{city}</div> </div> ))} </div> </div> )} </div> </div> </main> {/* 复制成功提示 */} {copiedText && ( <div className="fixed bottom-8 right-8 bg-green-500 text-white px-6 py-3 rounded-xl shadow-lg animate-fade-in flex items-center gap-2 z-50"> <Check className="w-5 h-5" /> 已复制到剪贴板 </div> )} {/* 自定义动画样式 */} <style jsx global>{` @keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-slow { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } } .animate-fade-in { animation: fade-in 0.8s ease-out; } .animate-fade-in-up { animation: fade-in-up 0.6s ease-out; animation-fill-mode: both; } .animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; } `}</style> </> ) }

完美！我已经为你创建了一个炫酷的时间戳转换工具页面。功能包括：