508 lines
18 KiB
TypeScript
508 lines
18 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { useCallback, useEffect, useState } from "react";
|
|||
|
|
import {
|
|||
|
|
AlertTriangle,
|
|||
|
|
Bot,
|
|||
|
|
Clock,
|
|||
|
|
Loader2,
|
|||
|
|
Play,
|
|||
|
|
Power,
|
|||
|
|
RefreshCw,
|
|||
|
|
Square,
|
|||
|
|
Zap,
|
|||
|
|
} from "lucide-react";
|
|||
|
|
import { Badge } from "@/components/ui/badge";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|||
|
|
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
|
|||
|
|
import { EmptyState } from "@/components/layout/empty-state";
|
|||
|
|
import { InlineAlert } from "@/components/ui/inline-alert";
|
|||
|
|
import { Input } from "@/components/ui/input";
|
|||
|
|
import { Label } from "@/components/ui/label";
|
|||
|
|
import { PageHeader } from "@/components/layout/page-header";
|
|||
|
|
import { Switch } from "@/components/ui/switch";
|
|||
|
|
import { useCapabilities } from "@/lib/capabilities/context";
|
|||
|
|
import { useActionFeedback } from "@/lib/use-action-feedback";
|
|||
|
|
import {
|
|||
|
|
AUTOMATION_TASK_TYPES,
|
|||
|
|
AUTOMATION_TASK_META,
|
|||
|
|
OUTBOUND_TASKS,
|
|||
|
|
type AutomationTaskType,
|
|||
|
|
} from "@/lib/automation/types";
|
|||
|
|
import { cn } from "@/lib/utils";
|
|||
|
|
|
|||
|
|
interface AutomationRule {
|
|||
|
|
id: string;
|
|||
|
|
taskType: string;
|
|||
|
|
mode: string;
|
|||
|
|
dailyCap: number;
|
|||
|
|
schedule: string;
|
|||
|
|
enabled: boolean;
|
|||
|
|
lastRunAt?: string | null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface RulesData {
|
|||
|
|
accountId: string;
|
|||
|
|
accountName: string;
|
|||
|
|
automationEnabled: boolean;
|
|||
|
|
rules: AutomationRule[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface ActionLog {
|
|||
|
|
id: string;
|
|||
|
|
taskType: string;
|
|||
|
|
action: string;
|
|||
|
|
mode: string;
|
|||
|
|
status: string;
|
|||
|
|
detail?: string | null;
|
|||
|
|
error?: string | null;
|
|||
|
|
createdAt: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const flowLabels: Record<string, string> = {
|
|||
|
|
A: "流程 A",
|
|||
|
|
B: "流程 B",
|
|||
|
|
both: "流程 A + B",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default function AutomationPage() {
|
|||
|
|
const [rulesData, setRulesData] = useState<RulesData | null>(null);
|
|||
|
|
const [logs, setLogs] = useState<ActionLog[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [busy, setBusy] = useState<string | null>(null);
|
|||
|
|
const [killOpen, setKillOpen] = useState(false);
|
|||
|
|
const { feedback, clearFeedback, showError, showSuccess, showWarning } = useActionFeedback();
|
|||
|
|
const { isReady } = useCapabilities();
|
|||
|
|
|
|||
|
|
const load = useCallback(async (silent = false) => {
|
|||
|
|
if (!silent) setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const [rulesRes, logsRes] = await Promise.all([
|
|||
|
|
fetch("/api/automation/rules"),
|
|||
|
|
fetch("/api/automation/logs"),
|
|||
|
|
]);
|
|||
|
|
const rulesData = await rulesRes.json();
|
|||
|
|
const logsData = await logsRes.json();
|
|||
|
|
if (rulesRes.ok) setRulesData(rulesData);
|
|||
|
|
if (logsRes.ok) setLogs(logsData.logs ?? []);
|
|||
|
|
} catch {
|
|||
|
|
// ignore
|
|||
|
|
} finally {
|
|||
|
|
if (!silent) setLoading(false);
|
|||
|
|
}
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
load();
|
|||
|
|
}, [load]);
|
|||
|
|
|
|||
|
|
async function toggleMaster(enabled: boolean) {
|
|||
|
|
setBusy("master");
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/automation/account", {
|
|||
|
|
method: "PATCH",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({ automationEnabled: enabled }),
|
|||
|
|
});
|
|||
|
|
const data = await res.json();
|
|||
|
|
if (!res.ok) {
|
|||
|
|
showError(data.error ?? "無法切換總開關", "操作失敗");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setRulesData((prev) => (prev ? { ...prev, automationEnabled: enabled } : prev));
|
|||
|
|
showSuccess(enabled ? "自動化已開啟" : "自動化已關閉");
|
|||
|
|
} finally {
|
|||
|
|
setBusy(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function updateRule(taskType: AutomationTaskType, patch: Partial<AutomationRule>) {
|
|||
|
|
setBusy(`rule-${taskType}`);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/automation/rules", {
|
|||
|
|
method: "PATCH",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({ taskType, ...patch }),
|
|||
|
|
});
|
|||
|
|
const data = await res.json();
|
|||
|
|
if (!res.ok) {
|
|||
|
|
showError(data.error ?? "無法更新規則", "儲存失敗");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setRulesData((prev) => {
|
|||
|
|
if (!prev) return prev;
|
|||
|
|
const existing = prev.rules.find((r) => r.taskType === taskType);
|
|||
|
|
const updated = data.rule ?? { ...existing, ...patch };
|
|||
|
|
const others = prev.rules.filter((r) => r.taskType !== taskType);
|
|||
|
|
return { ...prev, rules: [...others, updated] };
|
|||
|
|
});
|
|||
|
|
} finally {
|
|||
|
|
setBusy(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function runNow(taskType: AutomationTaskType) {
|
|||
|
|
setBusy(`run-${taskType}`);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/automation/run", {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({ taskType }),
|
|||
|
|
});
|
|||
|
|
const data = await res.json();
|
|||
|
|
if (!res.ok) {
|
|||
|
|
showError(data.error ?? "執行失敗", "立即執行失敗");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const result = data.result;
|
|||
|
|
if (result?.ok) {
|
|||
|
|
showSuccess(result.summary ?? "執行完成");
|
|||
|
|
} else {
|
|||
|
|
showWarning(result?.summary ?? "執行未完成", "執行結果");
|
|||
|
|
}
|
|||
|
|
load(true);
|
|||
|
|
} finally {
|
|||
|
|
setBusy(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function killAll() {
|
|||
|
|
setBusy("kill");
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/automation/kill", { method: "POST" });
|
|||
|
|
const data = await res.json();
|
|||
|
|
if (!res.ok) {
|
|||
|
|
showError(data.error ?? "殺停失敗", "操作失敗");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setRulesData((prev) => (prev ? { ...prev, automationEnabled: false } : prev));
|
|||
|
|
showSuccess(`已緊急殺停 ${data.disabledAccounts ?? 0} 個帳號的自動化`);
|
|||
|
|
} finally {
|
|||
|
|
setBusy(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (loading) {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<PageHeader title="自動化排程" description="設定定時海巡、生成、發文與互動任務。" />
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="skeleton h-32 animate-pulse" />
|
|||
|
|
<div className="skeleton h-48 animate-pulse" />
|
|||
|
|
<div className="skeleton h-48 animate-pulse" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!rulesData) {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<PageHeader title="自動化排程" description="設定定時海巡、生成、發文與互動任務。" />
|
|||
|
|
<EmptyState
|
|||
|
|
icon={Bot}
|
|||
|
|
title="無法載入自動化設定"
|
|||
|
|
description="請確認已建立經營帳號後重試。"
|
|||
|
|
action={<Button variant="outline" onClick={() => load()}>重新載入</Button>}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<PageHeader
|
|||
|
|
eyebrow="SYSTEM"
|
|||
|
|
title="自動化排程"
|
|||
|
|
description="設定定時海巡、生成、發文與互動任務。需另啟 worker（npm run worker）才會按排程執行。"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{feedback && (
|
|||
|
|
<InlineAlert
|
|||
|
|
type={feedback.type}
|
|||
|
|
title={feedback.title}
|
|||
|
|
message={feedback.message}
|
|||
|
|
onDismiss={clearFeedback}
|
|||
|
|
className="mb-4"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
{/* 總開關 + 緊急殺停 */}
|
|||
|
|
<Card className={cn(rulesData.automationEnabled && "border-primary/30")}>
|
|||
|
|
<CardContent className="flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between">
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<div
|
|||
|
|
className={cn(
|
|||
|
|
"flex h-11 w-11 items-center justify-center rounded-xl",
|
|||
|
|
rulesData.automationEnabled
|
|||
|
|
? "bg-primary/10 text-primary"
|
|||
|
|
: "bg-muted text-muted-foreground"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<Power className="h-5 w-5" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="font-semibold">
|
|||
|
|
自動化總開關
|
|||
|
|
<span className="ml-2 text-sm font-normal text-muted-foreground">
|
|||
|
|
{rulesData.accountName}
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
<p className="mt-1 text-xs text-muted-foreground">
|
|||
|
|
{rulesData.automationEnabled
|
|||
|
|
? "已開啟 — 符合排程的規則會自動執行"
|
|||
|
|
: "已關閉 — 所有自動化任務暫停"}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<Switch
|
|||
|
|
checked={rulesData.automationEnabled}
|
|||
|
|
onCheckedChange={(checked) => toggleMaster(checked)}
|
|||
|
|
disabled={busy === "master"}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
variant="destructive"
|
|||
|
|
size="sm"
|
|||
|
|
onClick={() => setKillOpen(true)}
|
|||
|
|
disabled={!rulesData.automationEnabled}
|
|||
|
|
>
|
|||
|
|
<Square className="h-3.5 w-3.5" />
|
|||
|
|
緊急殺停
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
{/* 規則清單 */}
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{AUTOMATION_TASK_TYPES.map((taskType) => {
|
|||
|
|
const meta = AUTOMATION_TASK_META[taskType];
|
|||
|
|
const rule = rulesData.rules.find((r) => r.taskType === taskType);
|
|||
|
|
const isOutbound = OUTBOUND_TASKS.includes(taskType);
|
|||
|
|
const isAutoMode = rule?.mode === "auto";
|
|||
|
|
const capReady =
|
|||
|
|
taskType === "scan"
|
|||
|
|
? isReady("scan")
|
|||
|
|
: taskType === "generate"
|
|||
|
|
? isReady("generate")
|
|||
|
|
: taskType === "publish"
|
|||
|
|
? isReady("publish")
|
|||
|
|
: taskType === "outreach"
|
|||
|
|
? isReady("outreach")
|
|||
|
|
: isReady("ai");
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Card key={taskType}>
|
|||
|
|
<CardHeader>
|
|||
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|||
|
|
<div>
|
|||
|
|
<CardTitle className="flex flex-wrap items-center gap-2 text-base">
|
|||
|
|
{meta.label}
|
|||
|
|
<Badge variant="outline">{flowLabels[meta.flow]}</Badge>
|
|||
|
|
{isOutbound && isAutoMode && rule?.enabled && (
|
|||
|
|
<Badge variant="warning">
|
|||
|
|
<AlertTriangle className="mr-1 h-3 w-3" />
|
|||
|
|
自動對外
|
|||
|
|
</Badge>
|
|||
|
|
)}
|
|||
|
|
</CardTitle>
|
|||
|
|
<CardDescription className="mt-1">{meta.description}</CardDescription>
|
|||
|
|
</div>
|
|||
|
|
<Switch
|
|||
|
|
checked={rule?.enabled ?? false}
|
|||
|
|
onCheckedChange={(checked) =>
|
|||
|
|
updateRule(taskType, { enabled: checked })
|
|||
|
|
}
|
|||
|
|
disabled={busy === `rule-${taskType}`}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-4">
|
|||
|
|
<div className="grid gap-4 sm:grid-cols-3">
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>模式</Label>
|
|||
|
|
<div className="flex rounded-lg border border-border p-0.5">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => updateRule(taskType, { mode: "manual" })}
|
|||
|
|
className={cn(
|
|||
|
|
"flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
|
|||
|
|
rule?.mode !== "auto"
|
|||
|
|
? "bg-primary text-primary-foreground"
|
|||
|
|
: "text-muted-foreground hover:text-foreground"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
手動審核
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => updateRule(taskType, { mode: "auto" })}
|
|||
|
|
className={cn(
|
|||
|
|
"flex-1 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
|
|||
|
|
rule?.mode === "auto"
|
|||
|
|
? "bg-primary text-primary-foreground"
|
|||
|
|
: "text-muted-foreground hover:text-foreground"
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
全自動
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{isOutbound && isAutoMode && (
|
|||
|
|
<p className="text-[11px] text-warning">
|
|||
|
|
全自動模式會自動發文/留言，請確認內容品質。
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>每日上限</Label>
|
|||
|
|
<Input
|
|||
|
|
type="number"
|
|||
|
|
min={0}
|
|||
|
|
max={500}
|
|||
|
|
value={rule?.dailyCap ?? 0}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
updateRule(taskType, {
|
|||
|
|
dailyCap: Math.max(0, Math.min(500, parseInt(e.target.value, 10) || 0)),
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
className="font-mono"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<Label>排程（cron）</Label>
|
|||
|
|
<Input
|
|||
|
|
value={rule?.schedule ?? ""}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
updateRule(taskType, { schedule: e.target.value })
|
|||
|
|
}
|
|||
|
|
placeholder="0 9 * * *"
|
|||
|
|
className="font-mono"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex flex-wrap items-center justify-between gap-3 border-t border-border pt-3">
|
|||
|
|
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
|||
|
|
{rule?.lastRunAt && (
|
|||
|
|
<span className="flex items-center gap-1">
|
|||
|
|
<Clock className="h-3 w-3" />
|
|||
|
|
上次執行：
|
|||
|
|
{new Date(rule.lastRunAt).toLocaleDateString("zh-TW", {
|
|||
|
|
month: "short",
|
|||
|
|
day: "numeric",
|
|||
|
|
hour: "2-digit",
|
|||
|
|
minute: "2-digit",
|
|||
|
|
})}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
{!capReady && rule?.enabled && (
|
|||
|
|
<span className="text-warning">此任務所需功能尚未就緒</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="outline"
|
|||
|
|
onClick={() => runNow(taskType)}
|
|||
|
|
disabled={busy === `run-${taskType}` || !capReady}
|
|||
|
|
>
|
|||
|
|
{busy === `run-${taskType}` ? (
|
|||
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|||
|
|
) : (
|
|||
|
|
<Play className="h-3.5 w-3.5" />
|
|||
|
|
)}
|
|||
|
|
立即執行
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 執行日誌 */}
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader>
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|||
|
|
<Zap className="h-4 w-4" />
|
|||
|
|
執行紀錄
|
|||
|
|
</CardTitle>
|
|||
|
|
<CardDescription>最近 60 筆自動化動作</CardDescription>
|
|||
|
|
</div>
|
|||
|
|
<Button size="sm" variant="outline" onClick={() => load(true)}>
|
|||
|
|
<RefreshCw className="h-3.5 w-3.5" />
|
|||
|
|
重新整理
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent>
|
|||
|
|
{logs.length === 0 ? (
|
|||
|
|
<p className="py-6 text-center text-sm text-muted-foreground">尚無執行紀錄</p>
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{logs.map((log) => (
|
|||
|
|
<div
|
|||
|
|
key={log.id}
|
|||
|
|
className="flex items-start gap-3 rounded-lg border border-border bg-muted/30 px-3 py-2 text-[13px]"
|
|||
|
|
>
|
|||
|
|
<Badge
|
|||
|
|
variant={
|
|||
|
|
log.status === "success"
|
|||
|
|
? "success"
|
|||
|
|
: log.status === "failed"
|
|||
|
|
? "destructive"
|
|||
|
|
: "secondary"
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{log.status}
|
|||
|
|
</Badge>
|
|||
|
|
<div className="min-w-0 flex-1">
|
|||
|
|
<p className="truncate">
|
|||
|
|
<span className="font-medium">
|
|||
|
|
{AUTOMATION_TASK_META[log.taskType as AutomationTaskType]?.label ?? log.taskType}
|
|||
|
|
</span>
|
|||
|
|
<span className="ml-2 text-muted-foreground">{log.action}</span>
|
|||
|
|
<span className="ml-2 text-muted-foreground">· {log.mode}</span>
|
|||
|
|
</p>
|
|||
|
|
{log.detail && (
|
|||
|
|
<p className="mt-0.5 truncate text-xs text-muted-foreground">{log.detail}</p>
|
|||
|
|
)}
|
|||
|
|
{log.error && (
|
|||
|
|
<p className="mt-0.5 text-xs text-destructive">{log.error}</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<span className="shrink-0 text-xs text-muted-foreground">
|
|||
|
|
{new Date(log.createdAt).toLocaleDateString("zh-TW", {
|
|||
|
|
month: "short",
|
|||
|
|
day: "numeric",
|
|||
|
|
hour: "2-digit",
|
|||
|
|
minute: "2-digit",
|
|||
|
|
})}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<ConfirmDialog
|
|||
|
|
open={killOpen}
|
|||
|
|
onOpenChange={setKillOpen}
|
|||
|
|
title="緊急殺停所有自動化"
|
|||
|
|
description="這會立即關閉所有帳號的自動化總開關，所有排程任務都會暫停。"
|
|||
|
|
confirmText="確認殺停"
|
|||
|
|
danger
|
|||
|
|
onConfirm={killAll}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|