feat(console): automation panel edit and richer list

- AutomationPanel rows now show title, prompt content (160-char preview with expand/collapse), repo_url, last/next run, run_once badge and cancelled time.

- Active automations get an inline edit form (name/prompt/interval/repo) that PATCHes only changed fields via the existing automation_update endpoint; backend semantics unchanged (no last_run_at reset, cancelled stays terminal).

- Rebuilt cloud/console.html with tsc + vite (build green); automation python tests 18/18 OK.
This commit is contained in:
host committed 2026-10-30 15:31:21 +08:00
1 parent e2ce04ce4f
commit 2d644f901b
7 files changed
+117 -35

No files matched your search

@@ -2,6 +2,17 @@ import { useState } from "react";
import { useConsole } from "../../context";
import { Bar, DataList } from "../../components/ui";
import { fmt, shortId } from "../../api/client";
import type { Automation } from "../../api/types";
const PROMPT_PREVIEW = 160;
function humanInterval(s?: number): string {
if (!s) return "";
if (s % 86400 === 0) return "(每天)";
if (s % 3600 === 0) return "(每小时)";
if (s % 60 === 0) return "(每 " + s / 60 + " 分钟)";
return "";
}
export function AutomationPanel() {
const ctx = useConsole();
@@ -9,6 +20,19 @@ export function AutomationPanel() {
const [prompt, setPrompt] = useState("");
const [interval, setInterval] = useState("");
const [repo, setRepo] = useState("");
const [editingId, setEditingId] = useState("");
const [editName, setEditName] = useState("");
const [editPrompt, setEditPrompt] = useState("");
const [editInterval, setEditInterval] = useState("");
const [editRepo, setEditRepo] = useState("");
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
const startEdit = (a: Automation) => {
setEditingId(a.id);
setEditName(a.name || "");
setEditPrompt(a.prompt || "");
setEditInterval(a.interval_seconds ? String(a.interval_seconds) : "");
setEditRepo(a.repo_url || "");
};
return (
<>
<input placeholder="自动化名称(同项目内启用中的名称唯一)" style={{ width: "100%" }} value={name} onChange={(e) => setName(e.target.value)} />
@@ -20,12 +44,42 @@ export function AutomationPanel() {
<button onClick={ctx.refreshAutomations}>刷新自动化</button>
<span className="muted">{ctx.autoMsg}</span>
</Bar>
<DataList empty="(暂无自动化)" items={ctx.automations.map((a) => (
<span key={a.id} className="row-main">
[{a.status}{a.due ? "|到期" : ""}] {a.name}|每 {a.interval_seconds} 秒|下次 {fmt(a.next_run_at)}
{a.status === "active" ? <> <button onClick={() => ctx.cancelAutomation(a.id)}>取消</button></> : null}
</span>
))} />
<DataList empty="(暂无自动化)" items={ctx.automations.map((a) => {
const full = a.prompt || "";
const showFull = !!expanded[a.id];
const tooLong = full.length > PROMPT_PREVIEW;
const shown = !full ? "(无内容)" : (showFull || !tooLong ? full : full.slice(0, PROMPT_PREVIEW) + "…");
return (
<div key={a.id}>
<div className="row-main">
[{a.status}{a.due ? "|到期" : ""}{a.run_once ? "|一次性" : ""}] {a.name}|每 {a.interval_seconds} 秒{humanInterval(a.interval_seconds)}|上次 {fmt(a.last_run_at) || "未运行"}|下次 {fmt(a.next_run_at)}
{a.status === "active" ? <> <button onClick={() => startEdit(a)}>编辑</button> <button onClick={() => ctx.cancelAutomation(a.id)}>取消</button></> : null}
</div>
{a.repo_url ? <div className="muted">仓库:{a.repo_url}</div> : null}
{a.status === "cancelled" && a.cancelled_at ? <div className="muted">已取消于 {fmt(a.cancelled_at)}</div> : null}
<div className="muted" style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>
{shown}
{tooLong ? <button onClick={() => setExpanded((prev) => ({ ...prev, [a.id]: !prev[a.id] }))}>{showFull ? "收起" : "展开"}</button> : null}
</div>
{editingId === a.id ? (
<div>
<input placeholder="自动化名称" style={{ width: "100%" }} value={editName} onChange={(e) => setEditName(e.target.value)} />
<textarea placeholder="定时任务内容" value={editPrompt} onChange={(e) => setEditPrompt(e.target.value)} />
<Bar>
<input placeholder="间隔秒数(最小 60,留空保持原值)" style={{ width: "40%" }} value={editInterval} onChange={(e) => setEditInterval(e.target.value)} />
<input placeholder="仓库(可选,清空则清除)" style={{ width: "40%" }} value={editRepo} onChange={(e) => setEditRepo(e.target.value)} />
<button className="primary" onClick={async () => {
const cur = ctx.automations.find((x) => x.id === editingId) || a;
const ok = await ctx.updateAutomation(cur, editName, editPrompt, editInterval, editRepo);
if (ok) setEditingId("");
}}>保存</button>
<button onClick={() => setEditingId("")}>取消</button>
</Bar>
</div>
) : null}
</div>
);
})} />
</>
);
}