355 lines
12 KiB
TypeScript
355 lines
12 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { useEffect, useMemo, useState } from "react";
|
|||
|
|
import { ChevronDown, ChevronUp } from "lucide-react";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|||
|
|
import { Input } from "@/components/ui/input";
|
|||
|
|
import { Label } from "@/components/ui/label";
|
|||
|
|
import { Switch } from "@/components/ui/switch";
|
|||
|
|
import {
|
|||
|
|
SEARCH_SOURCE_MODE_OPTIONS,
|
|||
|
|
searchSourceModeLabel,
|
|||
|
|
type SearchSourceMode,
|
|||
|
|
} from "@/lib/search/source-mode";
|
|||
|
|
|
|||
|
|
export type ConnectionPreset = "sync" | "api" | "hybrid" | "custom";
|
|||
|
|
|
|||
|
|
export interface ThreadsConnectionSettingsData {
|
|||
|
|
searchViaApi?: boolean;
|
|||
|
|
searchSourceMode?: SearchSourceMode;
|
|||
|
|
publishViaApi?: boolean;
|
|||
|
|
devMode?: boolean;
|
|||
|
|
scrapeReplies?: boolean;
|
|||
|
|
repliesPerPost?: number;
|
|||
|
|
publishHeaded?: boolean;
|
|||
|
|
playwrightDebug?: boolean;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface ThreadsConnectionSettingsProps {
|
|||
|
|
settings: ThreadsConnectionSettingsData;
|
|||
|
|
accountName?: string | null;
|
|||
|
|
onChange: (patch: Partial<ThreadsConnectionSettingsData>) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const PRIMARY_SOURCE_MODES: SearchSourceMode[] = [
|
|||
|
|
"mixed",
|
|||
|
|
"threads",
|
|||
|
|
"brave",
|
|||
|
|
"crawler",
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const COMBO_SOURCE_MODES: SearchSourceMode[] = [
|
|||
|
|
"threads_brave",
|
|||
|
|
"threads_crawler",
|
|||
|
|
"brave_crawler",
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
function detectPreset(data: ThreadsConnectionSettingsData): ConnectionPreset {
|
|||
|
|
const searchApi = data.searchViaApi ?? false;
|
|||
|
|
const publishApi = data.publishViaApi ?? false;
|
|||
|
|
const dev = data.devMode ?? false;
|
|||
|
|
|
|||
|
|
if (searchApi && publishApi && !dev) return "api";
|
|||
|
|
if (!searchApi && !publishApi && dev) return "sync";
|
|||
|
|
if (searchApi && dev) return "hybrid";
|
|||
|
|
return "custom";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function presetPatch(preset: ConnectionPreset): Partial<ThreadsConnectionSettingsData> {
|
|||
|
|
switch (preset) {
|
|||
|
|
case "api":
|
|||
|
|
return {
|
|||
|
|
searchViaApi: true,
|
|||
|
|
publishViaApi: true,
|
|||
|
|
devMode: false,
|
|||
|
|
scrapeReplies: false,
|
|||
|
|
searchSourceMode: "threads",
|
|||
|
|
};
|
|||
|
|
case "sync":
|
|||
|
|
return {
|
|||
|
|
searchViaApi: false,
|
|||
|
|
publishViaApi: false,
|
|||
|
|
devMode: true,
|
|||
|
|
scrapeReplies: true,
|
|||
|
|
searchSourceMode: "crawler",
|
|||
|
|
};
|
|||
|
|
case "hybrid":
|
|||
|
|
return {
|
|||
|
|
searchViaApi: true,
|
|||
|
|
publishViaApi: false,
|
|||
|
|
devMode: true,
|
|||
|
|
scrapeReplies: true,
|
|||
|
|
searchSourceMode: "mixed",
|
|||
|
|
};
|
|||
|
|
default:
|
|||
|
|
return {};
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function sourceModeHint(mode: SearchSourceMode): string {
|
|||
|
|
return SEARCH_SOURCE_MODE_OPTIONS.find((o) => o.value === mode)?.hint ?? "";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function FlowSummary({ settings }: { settings: ThreadsConnectionSettingsData }) {
|
|||
|
|
const mode = settings.searchSourceMode ?? "mixed";
|
|||
|
|
|
|||
|
|
const lines = useMemo(() => {
|
|||
|
|
const sourceLine = `海巡來源：${searchSourceModeLabel(mode)}（${sourceModeHint(mode)}）`;
|
|||
|
|
|
|||
|
|
const search = settings.searchViaApi
|
|||
|
|
? "Threads API：已開啟（需 OAuth + keyword search 權限）"
|
|||
|
|
: settings.devMode
|
|||
|
|
? "Threads API：關閉，改走下方選定的來源"
|
|||
|
|
: "Threads API：關閉";
|
|||
|
|
|
|||
|
|
const replies =
|
|||
|
|
settings.scrapeReplies && settings.devMode
|
|||
|
|
? `留言：瀏覽器爬取（每篇最多 ${settings.repliesPerPost ?? 10} 則）`
|
|||
|
|
: settings.scrapeReplies
|
|||
|
|
? "留言：已開啟但 devMode 關閉，實際不會爬留言"
|
|||
|
|
: "留言：不抓取（僅用貼文與互動數）";
|
|||
|
|
|
|||
|
|
const publish = settings.publishViaApi
|
|||
|
|
? "發文：Meta API 優先，失敗時改瀏覽器"
|
|||
|
|
: "發文：Playwright 瀏覽器（需 Chrome 同步 session）";
|
|||
|
|
|
|||
|
|
return [sourceLine, search, replies, publish];
|
|||
|
|
}, [settings, mode]);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="rounded-lg border border-border bg-muted/40 px-3.5 py-3 text-xs leading-relaxed text-muted-foreground">
|
|||
|
|
<p className="mb-2 font-semibold text-foreground">目前流程預覽</p>
|
|||
|
|
<ul className="list-inside list-disc space-y-1">
|
|||
|
|
{lines.map((line) => (
|
|||
|
|
<li key={line}>{line}</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function ThreadsConnectionSettings({
|
|||
|
|
settings,
|
|||
|
|
accountName,
|
|||
|
|
onChange,
|
|||
|
|
}: ThreadsConnectionSettingsProps) {
|
|||
|
|
const [preset, setPreset] = useState<ConnectionPreset>("sync");
|
|||
|
|
const [showAdvanced, setShowAdvanced] = useState(false);
|
|||
|
|
const [showComboModes, setShowComboModes] = useState(false);
|
|||
|
|
|
|||
|
|
const currentMode = settings.searchSourceMode ?? "mixed";
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setPreset(detectPreset(settings));
|
|||
|
|
setShowComboModes(COMBO_SOURCE_MODES.includes(currentMode));
|
|||
|
|
}, [settings, currentMode]);
|
|||
|
|
|
|||
|
|
function applyPreset(next: ConnectionPreset) {
|
|||
|
|
setPreset(next);
|
|||
|
|
if (next !== "custom") {
|
|||
|
|
onChange(presetPatch(next));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function applySourceMode(mode: SearchSourceMode) {
|
|||
|
|
setPreset("custom");
|
|||
|
|
const patch: Partial<ThreadsConnectionSettingsData> = { searchSourceMode: mode };
|
|||
|
|
|
|||
|
|
if (mode === "threads" || mode === "threads_brave" || mode === "threads_crawler") {
|
|||
|
|
patch.searchViaApi = true;
|
|||
|
|
}
|
|||
|
|
if (mode === "crawler" || mode === "threads_crawler" || mode === "brave_crawler") {
|
|||
|
|
patch.devMode = true;
|
|||
|
|
}
|
|||
|
|
if (mode === "mixed") {
|
|||
|
|
patch.searchViaApi = true;
|
|||
|
|
patch.devMode = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onChange(patch);
|
|||
|
|
setShowComboModes(COMBO_SOURCE_MODES.includes(mode));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-5">
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle>海巡搜尋來源</CardTitle>
|
|||
|
|
<CardDescription>
|
|||
|
|
選擇要用哪個 provider，或混合模式。Brave 需設定 BRAVE_SEARCH_API_KEY；爬蟲需 Chrome
|
|||
|
|
同步。
|
|||
|
|
</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-4">
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{SEARCH_SOURCE_MODE_OPTIONS.filter((o) =>
|
|||
|
|
PRIMARY_SOURCE_MODES.includes(o.value)
|
|||
|
|
).map((option) => (
|
|||
|
|
<Button
|
|||
|
|
key={option.value}
|
|||
|
|
type="button"
|
|||
|
|
variant={currentMode === option.value ? "default" : "outline"}
|
|||
|
|
className="h-auto flex-col items-start gap-0.5 px-3 py-2"
|
|||
|
|
onClick={() => applySourceMode(option.value)}
|
|||
|
|
>
|
|||
|
|
<span className="text-sm font-semibold">{option.label}</span>
|
|||
|
|
<span className="text-[10px] font-normal opacity-80">{option.hint}</span>
|
|||
|
|
</Button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="text-xs text-muted-foreground underline-offset-2 hover:underline"
|
|||
|
|
onClick={() => setShowComboModes((v) => !v)}
|
|||
|
|
>
|
|||
|
|
{showComboModes ? "收合組合模式" : "顯示組合模式（API + Brave、API + 爬蟲…）"}
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
{showComboModes && (
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{SEARCH_SOURCE_MODE_OPTIONS.filter((o) =>
|
|||
|
|
COMBO_SOURCE_MODES.includes(o.value)
|
|||
|
|
).map((option) => (
|
|||
|
|
<Button
|
|||
|
|
key={option.value}
|
|||
|
|
type="button"
|
|||
|
|
variant={currentMode === option.value ? "default" : "outline"}
|
|||
|
|
size="sm"
|
|||
|
|
className="h-auto flex-col items-start gap-0.5 px-3 py-2"
|
|||
|
|
onClick={() => applySourceMode(option.value)}
|
|||
|
|
>
|
|||
|
|
<span className="text-sm font-semibold">{option.label}</span>
|
|||
|
|
<span className="text-[10px] font-normal opacity-80">{option.hint}</span>
|
|||
|
|
</Button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle>連線預設</CardTitle>
|
|||
|
|
<CardDescription>
|
|||
|
|
{accountName
|
|||
|
|
? `目前帳號「${accountName}」的抓取策略。側欄切換帳號會載入各自的設定。`
|
|||
|
|
: "請先在側欄建立並選擇經營帳號。"}
|
|||
|
|
</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-4">
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{(
|
|||
|
|
[
|
|||
|
|
["sync", "Chrome 同步", "全爬蟲：海巡 + 留言 + 發文"],
|
|||
|
|
["api", "API Key 優先", "全官方 API：不爬留言"],
|
|||
|
|
["hybrid", "混合模式", "API 海巡 + 瀏覽器留言/發文"],
|
|||
|
|
["custom", "自訂", "手動調整下方開關"],
|
|||
|
|
] as const
|
|||
|
|
).map(([value, label, hint]) => (
|
|||
|
|
<Button
|
|||
|
|
key={value}
|
|||
|
|
type="button"
|
|||
|
|
variant={preset === value ? "default" : "outline"}
|
|||
|
|
className="h-auto flex-col items-start gap-0.5 px-3 py-2"
|
|||
|
|
onClick={() => applyPreset(value)}
|
|||
|
|
>
|
|||
|
|
<span className="text-sm font-semibold">{label}</span>
|
|||
|
|
<span className="text-[10px] font-normal opacity-80">{hint}</span>
|
|||
|
|
</Button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<FlowSummary settings={settings} />
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="flex w-full items-center justify-between text-left"
|
|||
|
|
onClick={() => setShowAdvanced((v) => !v)}
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<CardTitle>進階開關</CardTitle>
|
|||
|
|
<CardDescription>直接控制底層行為。變更後會切換為「自訂」預設。</CardDescription>
|
|||
|
|
</div>
|
|||
|
|
{showAdvanced ? (
|
|||
|
|
<ChevronUp className="h-5 w-5 shrink-0 text-muted-foreground" />
|
|||
|
|
) : (
|
|||
|
|
<ChevronDown className="h-5 w-5 shrink-0 text-muted-foreground" />
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
</CardHeader>
|
|||
|
|
{showAdvanced && (
|
|||
|
|
<CardContent className="space-y-3">
|
|||
|
|
{(
|
|||
|
|
[
|
|||
|
|
{
|
|||
|
|
key: "searchViaApi" as const,
|
|||
|
|
title: "海巡走官方 API",
|
|||
|
|
desc: "關閉則用 Playwright 瀏覽器搜尋",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "publishViaApi" as const,
|
|||
|
|
title: "發文走官方 API",
|
|||
|
|
desc: "關閉則只用瀏覽器發文",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "devMode" as const,
|
|||
|
|
title: "瀏覽器模式（devMode）",
|
|||
|
|
desc: "開啟才允許瀏覽器海巡與爬留言",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "scrapeReplies" as const,
|
|||
|
|
title: "抓取他人貼文留言",
|
|||
|
|
desc: "需 devMode 開啟才會實際執行",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "publishHeaded" as const,
|
|||
|
|
title: "發文時顯示瀏覽器視窗",
|
|||
|
|
desc: "除錯用，server 上通常保持關閉",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
key: "playwrightDebug" as const,
|
|||
|
|
title: "Playwright 除錯截圖",
|
|||
|
|
desc: "卡住時保留瀏覽器截圖",
|
|||
|
|
},
|
|||
|
|
] as const
|
|||
|
|
).map((item) => (
|
|||
|
|
<div
|
|||
|
|
key={item.key}
|
|||
|
|
className="flex items-center justify-between rounded-lg border border-border bg-muted/50 px-3.5 py-3"
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<p className="text-sm font-semibold">{item.title}</p>
|
|||
|
|
<p className="mt-0.5 text-xs text-muted-foreground">{item.desc}</p>
|
|||
|
|
</div>
|
|||
|
|
<Switch
|
|||
|
|
checked={settings[item.key] ?? false}
|
|||
|
|
onCheckedChange={(checked) => {
|
|||
|
|
setPreset("custom");
|
|||
|
|
onChange({ [item.key]: checked });
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
<div className="space-y-2 pt-1">
|
|||
|
|
<Label>每篇熱門文讀取幾則留言</Label>
|
|||
|
|
<Input
|
|||
|
|
type="number"
|
|||
|
|
min={1}
|
|||
|
|
max={30}
|
|||
|
|
value={settings.repliesPerPost ?? 10}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
onChange({ repliesPerPost: parseInt(e.target.value, 10) || 10 })
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
)}
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|