feat: add crontab component

Author: sunls24

README.md

@@ -1,11 +1,10 @@
 # 💬 概述
 
-一款简洁高效的在线工具箱｜JSON 在线解析及格式化验证、Base64 编解码、URL 编解码
+一款简洁高效的在线工具箱
 
 - [x] JSON 在线解析及格式化验证
-- [x] Base64 编解码
-- [x] URL 编解码
-- [ ] Crontab 执行时间计算
+- [x] Base64 / URL 编解码
+- [x] Crontab 时间计算
 - [ ] RGB 颜色值转换
 
 ## 🚀 本地运行

app/layout.tsx

@@ -11,7 +11,7 @@ export const metadata: Metadata = {
     template: "%s - 在线工具箱",
   },
   description:
-    "一款简洁高效的在线工具箱｜JSON 在线解析及格式化验证、Base64 编解码、URL 编解码",
+    "一款简洁高效的在线工具箱｜JSON 在线解析及格式化验证，Crontab 执行时间计算，Base64 / URL 编解码。",
   appleWebApp: {
     title: "在线工具箱",
   },

app/server.ts

@@ -0,0 +1,46 @@
+"use server";
+import { CronJob } from "cron";
+import { createStreamableValue } from "ai/rsc";
+import { CoreMessage, streamText } from "ai";
+import { createOpenAI } from "@ai-sdk/openai";
+import { CrontabPrompt } from "@/lib/constants";
+
+export async function crontab(cron: string): Promise<any> {
+  try {
+    const job = new CronJob(cron, () => {});
+    return job.nextDates(7).map((v) => v.toFormat("yyyy-LL-dd HH:mm:ss"));
+  } catch (err: any) {
+    return { error: err.message };
+  }
+}
+
+const model = process.env.OPENAI_MODEL ?? "gpt-3.5-turbo";
+const openai = createOpenAI({ baseURL: process.env.OPENAI_BASE_URL });
+
+export async function crontabAI(prompt: string) {
+  return await askAI(CrontabPrompt(prompt));
+}
+
+async function askAI(messages: CoreMessage[]) {
+  const stream = createStreamableValue();
+  try {
+    const { textStream } = await streamText({
+      temperature: 0.2,
+      model: openai(model),
+      messages,
+    });
+
+    (async () => {
+      for await (const text of textStream) {
+        stream.update(text);
+      }
+    })()
+      .catch(console.log)
+      .finally(stream.done);
+
+    return { data: stream.value };
+  } catch (err: any) {
+    stream.done();
+    return { error: err.message ?? err };
+  }
+}

components/crontab.tsx

@@ -0,0 +1,119 @@
+"use client";
+import React, { useRef, useState } from "react";
+import { Timer } from "lucide-react";
+import { crontab, crontabAI } from "@/app/server";
+import { readStreamableValue } from "ai/rsc";
+
+function Crontab() {
+  const [isLoading, setIsLoading] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [list, setList] = useState<string[]>([]);
+  const [err, setErr] = useState("");
+
+  async function onClick() {
+    if (!inputRef.current?.value) {
+      return;
+    }
+    try {
+      const ret = await crontab(inputRef.current.value);
+      if (ret.error) {
+        throw ret.error;
+      }
+      err && setErr("");
+      setList(ret);
+    } catch (err: any) {
+      list.length && setList([]);
+      setErr(err.message ?? err);
+    }
+  }
+
+  async function onClickAI() {
+    if (!inputRef.current?.value) {
+      return;
+    }
+    err && setErr("");
+    list.length && setList([]);
+    setIsLoading(true);
+    try {
+      const { data, error } = await crontabAI(inputRef.current.value);
+      if (error) {
+        setErr(error);
+        return;
+      }
+      let ret = "";
+      for await (const delta of readStreamableValue(data!)) {
+        ret += delta;
+        inputRef.current.value = ret;
+      }
+      await onClick();
+    } catch (err: any) {
+      setErr(err.message ?? err);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key !== "Enter" || e.nativeEvent.isComposing) {
+      return;
+    }
+    e.preventDefault();
+    if (isLoading) {
+      return;
+    }
+    await onClick();
+  }
+
+  return (
+    <>
+      <div className="flex w-full gap-2 sm:gap-4">
+        <label className="input input-bordered flex grow items-center gap-2 px-3">
+          <Timer className="opacity-70" />
+          <input
+            ref={inputRef}
+            className="grow"
+            placeholder={`Crontab 或 "每两小时执行一次"`}
+            onKeyDown={onKeyDown}
+            disabled={isLoading}
+          />
+        </label>
+        {isLoading ? (
+          <span className="loading loading-infinity loading-lg mx-3" />
+        ) : (
+          <button className="btn-normal" onClick={onClickAI}>
+            问问 AI
+          </button>
+        )}
+      </div>
+      <button className="btn-normal" onClick={onClick} disabled={isLoading}>
+        查看执行时间
+      </button>
+      {list.length !== 0 && (
+        <div className="flex flex-col gap-2 rounded-md bg-base-200 p-3 font-medium">
+          <span>接下来 7 次的执行时间：</span>
+          {list.map((v, i) => (
+            <div className="rounded-md bg-base-300 p-2" key={i}>
+              {i + 1} - {v}
+            </div>
+          ))}
+        </div>
+      )}
+      {err && (
+        <div className="rounded-md bg-warning/50 p-3 text-warning-content">
+          {err}
+        </div>
+      )}
+      <pre className="shrink-0 overflow-x-auto rounded-md bg-base-200 p-3">
+        {`*  *  *  *  *
+|  |  |  |  |
+|  |  |  |  +----- day of week (0 - 7) (Sunday=0 or 7) OR sun,mon,tue,wed,thu,fri,sat
+|  |  |  +-------- month (1 - 12) OR jan,feb,mar,apr ...
+|  |  +----------- day of month (1 - 31)
+|  +-------------- hour (0 - 23)
++----------------- minute (0 - 59)`}
+      </pre>
+    </>
+  );
+}
+
+export default Crontab;

lib/constants.ts

@@ -1,2 +1,23 @@
-export const VERSION = "0.1.0";
+import { CoreMessage } from "ai";
+
+export const VERSION = "0.1.1";
 export const GITHUB_URL = "https://github.com/sunls24/online-tools";
+
+export function CrontabPrompt(prompt: string): CoreMessage[] {
+  return [
+    {
+      role: "system",
+      content:
+        "You are a professional Crontab generator. Don't do any interpretation, just reply to the expression. If the user sends a crontab, it is returned as is.",
+    },
+    {
+      role: "user",
+      content: "每两个小时执行一次",
+    },
+    { role: "assistant", content: "0 */2 * * *" },
+    {
+      role: "user",
+      content: `${prompt}`,
+    },
+  ];
+}

lib/tools.ts

@@ -10,6 +10,11 @@ export const tools: readonly ToolItem[] = [
     image: "img/json-tree-viewer.svg",
     route: "json",
   },
+  {
+    name: "Crontab 时间计算",
+    image: "img/letter-counter.svg",
+    route: "crontab",
+  },
   {
     name: "Base64 编解码",
     image: "img/base64-encoder-decoder.svg",

package.json

@@ -9,7 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ai-sdk/openai": "^0.0.34",
+    "ai": "^3.2.16",
     "clsx": "^2.1.1",
+    "cron": "^3.1.7",
     "lucide-react": "^0.399.0",
     "next": "^14.2.4",
     "react": "^18.3.1",