first commit

app/cron/page.tsx

@@ -0,0 +1,116 @@
+"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>
+  );
+}