385 lines
15 KiB
TypeScript
385 lines
15 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState } from "react";
|
||
import Link from "next/link";
|
||
import { Loader2, Package, PlugZap, Settings2, ShieldCheck, UserRound } from "lucide-react";
|
||
import { ApiKeysForm } from "@/components/settings/api-keys-form";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { PageHeader } from "@/components/layout/page-header";
|
||
import { ThemeToggle } from "@/components/theme-toggle";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
import { InlineAlert } from "@/components/ui/inline-alert";
|
||
import { PROVIDER_OPTIONS } from "@/lib/ai/provider";
|
||
import type { ProviderApiKeys, ProviderId } from "@/lib/ai/keys";
|
||
import { useActionFeedback } from "@/lib/use-action-feedback";
|
||
|
||
interface SettingsData {
|
||
aiProvider: string;
|
||
aiModel: string;
|
||
researchAiProvider?: string | null;
|
||
researchAiModel?: string | null;
|
||
draftsPerScan: number;
|
||
matrixRows: number;
|
||
scanCron: string;
|
||
apiKeys?: ProviderApiKeys;
|
||
apiKeysConfigured?: Partial<Record<ProviderId, boolean>>;
|
||
}
|
||
|
||
export default function SettingsPage() {
|
||
const [settings, setSettings] = useState<SettingsData | null>(null);
|
||
const [apiKeyInputs, setApiKeyInputs] = useState<ProviderApiKeys>({});
|
||
const [saving, setSaving] = useState(false);
|
||
const [loadError, setLoadError] = useState<string | null>(null);
|
||
const { feedback, clearFeedback, showError, showSuccess } = useActionFeedback();
|
||
|
||
async function load() {
|
||
try {
|
||
const res = await fetch("/api/settings");
|
||
const data = (await res.json().catch(() => ({}))) as SettingsData;
|
||
if (!res.ok || !data.aiProvider) {
|
||
setLoadError("無法載入設定，請重新整理頁面");
|
||
return;
|
||
}
|
||
setSettings(data);
|
||
setApiKeyInputs(data.apiKeys ?? {});
|
||
} catch {
|
||
setLoadError("網路連線異常，請重新整理頁面");
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
load();
|
||
}, []);
|
||
|
||
async function handleSave() {
|
||
if (!settings) return;
|
||
clearFeedback();
|
||
setSaving(true);
|
||
try {
|
||
const res = await fetch("/api/settings", {
|
||
method: "PATCH",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
aiProvider: settings.aiProvider,
|
||
aiModel: settings.aiModel,
|
||
researchAiProvider: settings.researchAiProvider,
|
||
researchAiModel: settings.researchAiModel,
|
||
draftsPerScan: settings.draftsPerScan,
|
||
matrixRows: settings.matrixRows,
|
||
scanCron: settings.scanCron,
|
||
apiKeys: apiKeyInputs,
|
||
}),
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
if (!res.ok) {
|
||
showError(data.error ?? "無法儲存設定", "儲存失敗");
|
||
return;
|
||
}
|
||
setSettings(data);
|
||
showSuccess("設定已儲存");
|
||
} catch {
|
||
showError("網路連線異常，請稍後再試", "儲存失敗");
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}
|
||
|
||
if (loadError) {
|
||
return (
|
||
<div>
|
||
<PageHeader eyebrow="SYSTEM" title="設定" description="只留下會直接影響海巡與找 TA 的設定。" />
|
||
<InlineAlert type="error" title="載入失敗" message={loadError} />
|
||
<Button onClick={load} className="mt-4">重試</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (!settings) {
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="skeleton h-12 animate-pulse" />
|
||
<div className="skeleton h-48 animate-pulse" />
|
||
<div className="skeleton h-64 animate-pulse" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const provider = PROVIDER_OPTIONS.find((p) => p.value === settings.aiProvider);
|
||
const researchProvider = PROVIDER_OPTIONS.find(
|
||
(p) => p.value === (settings.researchAiProvider ?? settings.aiProvider)
|
||
);
|
||
const currentProviderConfigured = settings.apiKeysConfigured?.[settings.aiProvider as ProviderId];
|
||
|
||
return (
|
||
<div>
|
||
<PageHeader
|
||
eyebrow="SYSTEM"
|
||
title="設定"
|
||
description="只留下會直接影響海巡與找 TA 的設定。"
|
||
/>
|
||
|
||
{feedback && (
|
||
<InlineAlert
|
||
type={feedback.type}
|
||
title={feedback.title}
|
||
message={feedback.message}
|
||
onDismiss={clearFeedback}
|
||
className="mb-4"
|
||
/>
|
||
)}
|
||
|
||
<div className="space-y-8">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2"><ShieldCheck className="h-4 w-4 text-success" />帳號保護模式</CardTitle>
|
||
<CardDescription>瀏覽器海巡固定採用保守限制；無法保證零風險，遇到平台警告會立即停止。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid gap-3 text-sm sm:grid-cols-2 lg:grid-cols-4">
|
||
<div className="rounded-xl bg-muted/70 p-3"><b className="block">單工執行</b><span className="text-xs text-muted-foreground">同時只開一個抓取頁</span></div>
|
||
<div className="rounded-xl bg-muted/70 p-3"><b className="block">每次最多 4 任務</b><span className="text-xs text-muted-foreground">每個任務最多 12 篇</span></div>
|
||
<div className="rounded-xl bg-muted/70 p-3"><b className="block">留言最多 4 × 5</b><span className="text-xs text-muted-foreground">只抓高分貼文</span></div>
|
||
<div className="rounded-xl bg-muted/70 p-3"><b className="block">每日最多 40 頁</b><span className="text-xs text-muted-foreground">限流／驗證即停</span></div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
<Card>
|
||
<CardContent className="flex items-center gap-4 p-5">
|
||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary"><PlugZap className="h-5 w-5" /></div>
|
||
<div className="min-w-0 flex-1"><p className="font-semibold">連線設定</p><p className="mt-1 text-xs text-muted-foreground">Chrome 同步、Threads API、搜尋來源</p></div>
|
||
<Button asChild variant="outline" size="sm"><Link href="/connections">前往</Link></Button>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardContent className="flex items-center gap-4 p-5">
|
||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary"><UserRound className="h-5 w-5" /></div>
|
||
<div className="min-w-0 flex-1"><p className="font-semibold">人設設定</p><p className="mt-1 text-xs text-muted-foreground">控制語氣、定位與禁用詞</p></div>
|
||
<Button asChild variant="outline" size="sm"><Link href="/accounts">編輯</Link></Button>
|
||
</CardContent>
|
||
</Card>
|
||
<Card>
|
||
<CardContent className="flex items-center gap-4 p-5">
|
||
<div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary"><Package className="h-5 w-5" /></div>
|
||
<div className="min-w-0 flex-1"><p className="font-semibold">品牌與產品</p><p className="mt-1 text-xs text-muted-foreground">找 TA 的置入話術依據</p></div>
|
||
<Button asChild variant="outline" size="sm"><Link href="/products">編輯</Link></Button>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>外觀</CardTitle>
|
||
<CardDescription>深色或淺色，保存在此裝置</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ThemeToggle />
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card id="ai-keys">
|
||
<CardHeader>
|
||
<CardTitle>AI API Key</CardTitle>
|
||
<CardDescription>
|
||
所有 Threads 經營帳號共用。目前選用的服務
|
||
{currentProviderConfigured ? " 已設定 key。" : " 尚未設定 key。"}
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<ApiKeysForm
|
||
values={apiKeyInputs}
|
||
configured={settings.apiKeysConfigured ?? {}}
|
||
onChange={(providerId, value) =>
|
||
setApiKeyInputs((prev) => ({ ...prev, [providerId]: value }))
|
||
}
|
||
/>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>預設模型</CardTitle>
|
||
<CardDescription>草稿、留言回覆與獲客留言使用的 AI 模型。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
<div className="space-y-2">
|
||
<Label>AI 服務</Label>
|
||
<Select
|
||
value={settings.aiProvider}
|
||
onValueChange={(value) => {
|
||
const nextProvider = PROVIDER_OPTIONS.find((option) => option.value === value);
|
||
setSettings({
|
||
...settings,
|
||
aiProvider: value,
|
||
aiModel: nextProvider?.models[0] ?? settings.aiModel,
|
||
});
|
||
}}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{PROVIDER_OPTIONS.map((option) => (
|
||
<SelectItem key={option.value} value={option.value}>
|
||
{option.label}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>預設模型</Label>
|
||
<Select
|
||
value={settings.aiModel}
|
||
onValueChange={(value) => setSettings({ ...settings, aiModel: value })}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{(provider?.models ?? []).map((model) => (
|
||
<SelectItem key={model} value={model}>
|
||
{model}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
<div className="rounded-lg border border-border bg-muted p-4">
|
||
<div className="grid gap-4 sm:grid-cols-2">
|
||
<div className="space-y-2">
|
||
<Label>研究地圖 AI 服務</Label>
|
||
<Select
|
||
value={settings.researchAiProvider ?? settings.aiProvider}
|
||
onValueChange={(value) => {
|
||
const nextProvider = PROVIDER_OPTIONS.find((option) => option.value === value);
|
||
setSettings({
|
||
...settings,
|
||
researchAiProvider: value,
|
||
researchAiModel:
|
||
nextProvider?.models[0] ?? settings.researchAiModel ?? settings.aiModel,
|
||
});
|
||
}}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{PROVIDER_OPTIONS.map((option) => (
|
||
<SelectItem key={option.value} value={option.value}>
|
||
{option.label}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>研究地圖模型</Label>
|
||
<Select
|
||
value={settings.researchAiModel ?? settings.aiModel}
|
||
onValueChange={(value) => setSettings({ ...settings, researchAiModel: value })}
|
||
>
|
||
<SelectTrigger>
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{(researchProvider?.models ?? []).map((model) => (
|
||
<SelectItem key={model} value={model}>
|
||
{model}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>產文偏好</CardTitle>
|
||
<CardDescription>影響每次海巡後生成草稿的數量與排程。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="grid gap-4 sm:grid-cols-3">
|
||
<div className="space-y-2">
|
||
<Label>每次生成草稿數</Label>
|
||
<Input
|
||
type="number"
|
||
min={1}
|
||
max={10}
|
||
value={settings.draftsPerScan}
|
||
onChange={(event) =>
|
||
setSettings({
|
||
...settings,
|
||
draftsPerScan: parseInt(event.target.value, 10) || 4,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>內容規劃列數</Label>
|
||
<Input
|
||
type="number"
|
||
min={3}
|
||
max={20}
|
||
value={settings.matrixRows}
|
||
onChange={(event) =>
|
||
setSettings({
|
||
...settings,
|
||
matrixRows: parseInt(event.target.value, 10) || 7,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>海巡排程（cron）</Label>
|
||
<Input
|
||
value={settings.scanCron}
|
||
onChange={(event) => setSettings({ ...settings, scanCron: event.target.value })}
|
||
placeholder="0 9 * * *"
|
||
className="font-mono"
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>查證搜尋</CardTitle>
|
||
<CardDescription>知識型貼文發布前會自動查證。</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-2 text-[13px] text-muted-foreground">
|
||
<p>
|
||
海巡搜尋來源可在「<strong>連線設定</strong>」選擇：混合模式、僅 Threads API、僅
|
||
Brave、僅爬蟲，或自訂組合。
|
||
</p>
|
||
<p>
|
||
在 <code>.env</code> 設定 <code>BRAVE_SEARCH_API_KEY</code>（
|
||
<a
|
||
href="https://api-dashboard.search.brave.com/"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="underline"
|
||
>
|
||
Brave Search API
|
||
</a>
|
||
）。置入海巡預設最多 8 次 Brave 查詢，可用 <code>SCAN_BRAVE_MAX_QUERIES</code> 調整。
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Button onClick={handleSave} disabled={saving} size="lg" className="w-full sm:w-auto">
|
||
{saving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Settings2 className="h-4 w-4" />}
|
||
{saving ? "儲存中…" : "儲存設定"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|