117 lines
4.4 KiB
TypeScript
117 lines
4.4 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { Timer, Info } 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 { toast } from "sonner";
|
||
|
||
export default function CronPage() {
|
||
const [expression, setExpression] = useState("*/5 * * * *");
|
||
|
||
const parts = expression.split(/\s+/);
|
||
const labels = ["分钟", "小时", "日期", "月份", "星期"];
|
||
|
||
const decodePart = (part: string, type: string) => {
|
||
if (!part) return "-";
|
||
if (part === "*") return `每${type}`;
|
||
if (part.includes("/")) {
|
||
const [start, step] = part.split("/");
|
||
return `每隔 ${step} ${type}${start !== "*" ? ` (从第 ${start} 开始)` : ""}`;
|
||
}
|
||
if (part.includes("-")) {
|
||
return `从 ${part.replace("-", " 到 ")} ${type}`;
|
||
}
|
||
if (part.includes(",")) {
|
||
return `第 ${part} ${type}`;
|
||
}
|
||
return `第 ${part} ${type}`;
|
||
};
|
||
|
||
return (
|
||
<div className="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||
<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-orange-500 to-red-600 shadow-lg">
|
||
<Timer className="h-6 w-6 text-white" />
|
||
</div>
|
||
<div>
|
||
<h1 className="text-2xl font-bold tracking-tight">Cron 表达式解析</h1>
|
||
<p className="text-muted-foreground">解析并说明 Cron 计划任务表达式</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-6">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-base">输入表达式</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="flex gap-4">
|
||
<Input
|
||
value={expression}
|
||
onChange={(e) => setExpression(e.target.value)}
|
||
placeholder="如: */5 * * * *"
|
||
className="font-mono text-lg"
|
||
/>
|
||
<Button onClick={() => toast.success("解析成功")}>解析</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<div className="grid md:grid-cols-5 gap-4">
|
||
{labels.map((label, i) => (
|
||
<Card key={label} className="bg-muted/30 border-none">
|
||
<CardContent className="pt-6 text-center space-y-2">
|
||
<p className="text-xs text-muted-foreground font-bold">{label}</p>
|
||
<p className="font-mono text-xl font-bold text-primary">{parts[i] || "*"}</p>
|
||
<p className="text-xs text-muted-foreground">{decodePart(parts[i], label)}</p>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-base flex items-center gap-2">
|
||
<Info className="h-4 w-4" />
|
||
解析说明
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="p-4 rounded-lg bg-primary/5 border border-primary/10">
|
||
<p className="text-lg">
|
||
该表达式意味着：
|
||
<span className="font-bold text-primary ml-2">
|
||
{parts.length >= 5
|
||
? labels.map((l, i) => decodePart(parts[i], l)).join("，")
|
||
: "请输入完整的 5 位 Cron 表达式"}
|
||
</span>
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm text-muted-foreground">
|
||
<div className="space-y-1">
|
||
<p className="font-bold text-foreground">*</p>
|
||
<p>匹配该字段的所有值</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="font-bold text-foreground">/n</p>
|
||
<p>指定数值增量 (每隔 n)</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="font-bold text-foreground">-</p>
|
||
<p>指定数值范围 (从 x 到 y)</p>
|
||
</div>
|
||
<div className="space-y-1">
|
||
<p className="font-bold text-foreground">,</p>
|
||
<p>指定多个值</p>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|