626 lines
25 KiB
TypeScript
626 lines
25 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import Link from "next/link";
|
|||
|
|
import { useCallback, useEffect, useState } from "react";
|
|||
|
|
import { ChevronLeft, ChevronRight, Copy, ExternalLink, Loader2, RefreshCw, Radar, ScanSearch, Send, Target, Trash2 } from "lucide-react";
|
|||
|
|
import { ProductContextForm } from "@/components/product-context-form";
|
|||
|
|
import { Badge } from "@/components/ui/badge";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|||
|
|
import { EmptyState } from "@/components/layout/empty-state";
|
|||
|
|
import { PageHeader } from "@/components/layout/page-header";
|
|||
|
|
import { InlineAlert } from "@/components/ui/inline-alert";
|
|||
|
|
import { Textarea } from "@/components/ui/textarea";
|
|||
|
|
import { notify } from "@/lib/notifications/store";
|
|||
|
|
import { useCapabilities } from "@/lib/capabilities/context";
|
|||
|
|
import { useActionFeedback } from "@/lib/use-action-feedback";
|
|||
|
|
import { hasProductContext, summarizeProductContext } from "@/lib/types/product-context";
|
|||
|
|
import { isPlacementGoal } from "@/lib/types/topic-goal";
|
|||
|
|
import { parseFetchJson, THREADS_MAX_CHARS } from "@/lib/utils";
|
|||
|
|
|
|||
|
|
interface OutreachDraft {
|
|||
|
|
id: string;
|
|||
|
|
text: string;
|
|||
|
|
angle?: string | null;
|
|||
|
|
rationale?: string | null;
|
|||
|
|
status: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface OutreachTarget {
|
|||
|
|
id: string;
|
|||
|
|
status: string;
|
|||
|
|
relevance?: number | null;
|
|||
|
|
reason?: string | null;
|
|||
|
|
scanItem: {
|
|||
|
|
id: string;
|
|||
|
|
text: string;
|
|||
|
|
authorName?: string | null;
|
|||
|
|
permalink?: string | null;
|
|||
|
|
likeCount?: number | null;
|
|||
|
|
replyCount?: number | null;
|
|||
|
|
placementReason?: string | null;
|
|||
|
|
placementScore?: number | null;
|
|||
|
|
scan: {
|
|||
|
|
topic: {
|
|||
|
|
id: string;
|
|||
|
|
label: string;
|
|||
|
|
topicGoal?: string | null;
|
|||
|
|
productContext?: string | null;
|
|||
|
|
brief?: string | null;
|
|||
|
|
};
|
|||
|
|
scanGoal?: string | null;
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
drafts: OutreachDraft[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface PlacementTopic {
|
|||
|
|
id: string;
|
|||
|
|
label: string;
|
|||
|
|
query: string;
|
|||
|
|
topicGoal: string;
|
|||
|
|
scanCount: number;
|
|||
|
|
latestScan: {
|
|||
|
|
id: string;
|
|||
|
|
createdAt: string;
|
|||
|
|
itemCount: number;
|
|||
|
|
} | null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const PAGE_SIZE = 10;
|
|||
|
|
|
|||
|
|
export default function OutreachPage() {
|
|||
|
|
const [targets, setTargets] = useState<OutreachTarget[]>([]);
|
|||
|
|
const [page, setPage] = useState(1);
|
|||
|
|
const [total, setTotal] = useState(0);
|
|||
|
|
const [totalPages, setTotalPages] = useState(1);
|
|||
|
|
const [selectMode, setSelectMode] = useState(false);
|
|||
|
|
const [selectedDraftIds, setSelectedDraftIds] = useState<Set<string>>(new Set());
|
|||
|
|
const [batchDeleting, setBatchDeleting] = useState(false);
|
|||
|
|
const [placementTopics, setPlacementTopics] = useState<PlacementTopic[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
const [busy, setBusy] = useState<string | null>(null);
|
|||
|
|
const [draftText, setDraftText] = useState<Record<string, string>>({});
|
|||
|
|
const [productDrafts, setProductDrafts] = useState<Record<string, string>>({});
|
|||
|
|
const { feedback, clearFeedback, showError, showSuccess, showWarning } = useActionFeedback();
|
|||
|
|
const { isReady } = useCapabilities();
|
|||
|
|
const threadsApiReady = isReady("threadsApi");
|
|||
|
|
const load = useCallback(async (silent = false) => {
|
|||
|
|
if (!silent) setLoading(true);
|
|||
|
|
try {
|
|||
|
|
const [outreachRes, topicsRes] = await Promise.all([
|
|||
|
|
fetch(`/api/outreach?page=${page}&limit=${PAGE_SIZE}`),
|
|||
|
|
fetch("/api/topics"),
|
|||
|
|
]);
|
|||
|
|
const [data, topicsData] = await Promise.all([
|
|||
|
|
parseFetchJson<{ targets?: OutreachTarget[]; total?: number; totalPages?: number; error?: string }>(outreachRes),
|
|||
|
|
parseFetchJson<{ topics?: PlacementTopic[]; error?: string }>(topicsRes),
|
|||
|
|
]);
|
|||
|
|
if (!outreachRes.ok) {
|
|||
|
|
showError(data.error ?? "無法載入受眾名單", "載入失敗");
|
|||
|
|
setTargets([]);
|
|||
|
|
setTotal(0);
|
|||
|
|
setTotalPages(1);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const rows = data.targets ?? [];
|
|||
|
|
setTargets(rows);
|
|||
|
|
setTotal(data.total ?? rows.length);
|
|||
|
|
setTotalPages(data.totalPages ?? 1);
|
|||
|
|
if (page > (data.totalPages ?? 1)) setPage(Math.max(1, data.totalPages ?? 1));
|
|||
|
|
setPlacementTopics((topicsData.topics ?? []).filter((t) => isPlacementGoal(t.topicGoal)));
|
|||
|
|
setDraftText(
|
|||
|
|
Object.fromEntries(
|
|||
|
|
rows.flatMap((target: OutreachTarget) => target.drafts.map((draft) => [draft.id, draft.text]))
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
setProductDrafts((prev) => {
|
|||
|
|
const next = { ...prev };
|
|||
|
|
for (const target of rows as OutreachTarget[]) {
|
|||
|
|
const topic = target.scanItem.scan.topic;
|
|||
|
|
if (next[topic.id] === undefined) {
|
|||
|
|
next[topic.id] = topic.productContext ?? "";
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return next;
|
|||
|
|
});
|
|||
|
|
} catch {
|
|||
|
|
showError("網路連線異常，請稍後再試", "載入失敗");
|
|||
|
|
setTargets([]);
|
|||
|
|
setTotal(0);
|
|||
|
|
setTotalPages(1);
|
|||
|
|
} finally {
|
|||
|
|
if (!silent) setLoading(false);
|
|||
|
|
}
|
|||
|
|
}, [page, showError]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
load();
|
|||
|
|
}, [load]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
setSelectedDraftIds(new Set());
|
|||
|
|
}, [page]);
|
|||
|
|
|
|||
|
|
async function saveDraft(draftId: string) {
|
|||
|
|
setBusy(`save-${draftId}`);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/api/outreach/drafts/${draftId}`, {
|
|||
|
|
method: "PATCH",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({ text: draftText[draftId], status: "EDITED" }),
|
|||
|
|
});
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
showError(data.error ?? "無法儲存草稿", "儲存失敗");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
showSuccess("草稿已儲存");
|
|||
|
|
load(true);
|
|||
|
|
} catch {
|
|||
|
|
showError("網路連線異常，請稍後再試", "儲存失敗");
|
|||
|
|
} finally {
|
|||
|
|
setBusy(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function deleteDraft(draft: OutreachDraft) {
|
|||
|
|
if (!confirm("確定刪除這則留言草稿？刪除後無法復原。")) return;
|
|||
|
|
setBusy(`delete-${draft.id}`);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/api/outreach/drafts/${draft.id}`, { method: "DELETE" });
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
showError(data.error ?? "無法刪除留言草稿", "刪除失敗");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setDraftText((prev) => {
|
|||
|
|
const next = { ...prev };
|
|||
|
|
delete next[draft.id];
|
|||
|
|
return next;
|
|||
|
|
});
|
|||
|
|
showSuccess("留言草稿已刪除");
|
|||
|
|
load(true);
|
|||
|
|
} catch {
|
|||
|
|
showError("網路連線異常，請稍後再試", "刪除失敗");
|
|||
|
|
} finally {
|
|||
|
|
setBusy(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toggleDraftSelection(id: string) {
|
|||
|
|
setSelectedDraftIds((prev) => {
|
|||
|
|
const next = new Set(prev);
|
|||
|
|
if (next.has(id)) next.delete(id);
|
|||
|
|
else next.add(id);
|
|||
|
|
return next;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function exitSelectMode() {
|
|||
|
|
setSelectMode(false);
|
|||
|
|
setSelectedDraftIds(new Set());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function deleteSelectedDrafts() {
|
|||
|
|
const ids = [...selectedDraftIds];
|
|||
|
|
if (ids.length === 0) return;
|
|||
|
|
if (!confirm(`確定刪除選取的 ${ids.length} 則留言草稿？刪除後無法復原。`)) return;
|
|||
|
|
setBatchDeleting(true);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/outreach/drafts", {
|
|||
|
|
method: "DELETE",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({ ids }),
|
|||
|
|
});
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
showError(data.error ?? "無法批次刪除留言草稿", "批次刪除失敗");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
showSuccess(`已刪除 ${data.deleted ?? ids.length} 則留言草稿`);
|
|||
|
|
exitSelectMode();
|
|||
|
|
await load(true);
|
|||
|
|
} catch {
|
|||
|
|
showError("網路連線異常，請稍後再試", "批次刪除失敗");
|
|||
|
|
} finally {
|
|||
|
|
setBatchDeleting(false);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function copyText(text: string) {
|
|||
|
|
await navigator.clipboard.writeText(text);
|
|||
|
|
showSuccess("已複製留言");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const placementTopicId = targets.find((t) =>
|
|||
|
|
isPlacementGoal(t.scanItem.scan.scanGoal ?? t.scanItem.scan.topic.topicGoal)
|
|||
|
|
)?.scanItem.scan.topic.id;
|
|||
|
|
|
|||
|
|
async function saveProductContext(topicId: string) {
|
|||
|
|
setBusy(`product-${topicId}`);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/topics", {
|
|||
|
|
method: "PATCH",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({ id: topicId, productContext: productDrafts[topicId] ?? "" }),
|
|||
|
|
});
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
showError(data.error ?? "無法儲存品牌與產品", "儲存失敗");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
showSuccess("品牌與產品已儲存");
|
|||
|
|
load(true);
|
|||
|
|
return true;
|
|||
|
|
} catch {
|
|||
|
|
showError("網路連線異常，請稍後再試", "儲存失敗");
|
|||
|
|
return false;
|
|||
|
|
} finally {
|
|||
|
|
setBusy(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function regenerateTarget(target: OutreachTarget) {
|
|||
|
|
const topicId = target.scanItem.scan.topic.id;
|
|||
|
|
const productContext = productDrafts[topicId] ?? "";
|
|||
|
|
if (!hasProductContext(productContext)) {
|
|||
|
|
showWarning("在上方區塊填寫品牌與產品後，再重新生成。", "請先填寫品牌與產品");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setBusy(`regen-${target.id}`);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch("/api/outreach/generate", {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
scanItemId: target.scanItem.id,
|
|||
|
|
productContext,
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
notify({ type: "error", title: "重新生成失敗", message: data.error });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
notify({ type: "success", title: "已重新生成回覆草稿" });
|
|||
|
|
load(true);
|
|||
|
|
} catch {
|
|||
|
|
notify({ type: "error", title: "重新生成失敗", message: "網路連線異常，請稍後再試" });
|
|||
|
|
} finally {
|
|||
|
|
setBusy(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function publishDraft(draft: OutreachDraft) {
|
|||
|
|
setBusy(`publish-${draft.id}`);
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(`/api/outreach/drafts/${draft.id}/publish`, { method: "POST" });
|
|||
|
|
const data = await res.json().catch(() => ({}));
|
|||
|
|
if (!res.ok) {
|
|||
|
|
notify({ type: "error", title: "發布留言失敗", message: data.error });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
notify({ type: "success", title: "留言已發布到 Threads" });
|
|||
|
|
load(true);
|
|||
|
|
} catch {
|
|||
|
|
notify({ type: "error", title: "發布留言失敗", message: "網路連線異常，請稍後再試" });
|
|||
|
|
} finally {
|
|||
|
|
setBusy(null);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const hasPlacementTargets = targets.some((t) =>
|
|||
|
|
isPlacementGoal(t.scanItem.scan.scanGoal ?? t.scanItem.scan.topic.topicGoal)
|
|||
|
|
);
|
|||
|
|
const deletableDraftIds = targets.flatMap((target) =>
|
|||
|
|
target.drafts.filter((draft) => draft.status !== "PUBLISHED").map((draft) => draft.id)
|
|||
|
|
);
|
|||
|
|
const allPageDraftsSelected =
|
|||
|
|
deletableDraftIds.length > 0 && deletableDraftIds.every((id) => selectedDraftIds.has(id));
|
|||
|
|
|
|||
|
|
function toggleAllPageDrafts() {
|
|||
|
|
setSelectedDraftIds((prev) => {
|
|||
|
|
const next = new Set(prev);
|
|||
|
|
if (allPageDraftsSelected) deletableDraftIds.forEach((id) => next.delete(id));
|
|||
|
|
else deletableDraftIds.forEach((id) => next.add(id));
|
|||
|
|
return next;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<PageHeader
|
|||
|
|
eyebrow="02 / FIND YOUR TA"
|
|||
|
|
title="找出正在需要你的人"
|
|||
|
|
description="從 Threads 訊號辨識高意向受眾，再套入你的人設與產品脈絡，產出自然、不硬銷的開場話術。"
|
|||
|
|
action={<Button asChild size="lg"><Link href="/scans?mode=placement"><Radar className="h-4 w-4" />挖掘新受眾</Link></Button>}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{feedback && (
|
|||
|
|
<InlineAlert
|
|||
|
|
type={feedback.type}
|
|||
|
|
title={feedback.title}
|
|||
|
|
message={feedback.message}
|
|||
|
|
onDismiss={clearFeedback}
|
|||
|
|
className="mb-4"
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{!loading && targets.length > 0 && (
|
|||
|
|
<div className="mb-4 flex flex-wrap items-center justify-between gap-2 rounded-lg border border-border bg-muted/40 px-3 py-2">
|
|||
|
|
<p className="text-xs text-muted-foreground">共 {total} 個目標 · 第 {page}/{totalPages} 頁</p>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{selectMode ? (
|
|||
|
|
<>
|
|||
|
|
<Button size="sm" variant="outline" onClick={toggleAllPageDrafts} disabled={deletableDraftIds.length === 0}>
|
|||
|
|
{allPageDraftsSelected ? "取消全選" : "全選本頁"}
|
|||
|
|
</Button>
|
|||
|
|
<Button size="sm" variant="outline" onClick={deleteSelectedDrafts} disabled={selectedDraftIds.size === 0 || batchDeleting}>
|
|||
|
|
{batchDeleting ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Trash2 className="h-3.5 w-3.5" />}
|
|||
|
|
刪除選取（{selectedDraftIds.size}）
|
|||
|
|
</Button>
|
|||
|
|
<Button size="sm" variant="ghost" onClick={exitSelectMode}>完成</Button>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<Button size="sm" variant="outline" onClick={() => setSelectMode(true)}>
|
|||
|
|
批次管理
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{loading ? (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{[0, 1, 2].map((i) => <div key={i} className="skeleton h-56 animate-pulse" />)}
|
|||
|
|
</div>
|
|||
|
|
) : targets.length === 0 ? (
|
|||
|
|
placementTopics.length > 0 ? (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
<div className="rounded-lg border border-border bg-muted/40 px-4 py-3 text-sm text-muted-foreground">
|
|||
|
|
你已有 {placementTopics.length} 個找 TA 主題。到海巡成果頁點「獲客留言」，生成的對象會出現在這裡。
|
|||
|
|
</div>
|
|||
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|||
|
|
{placementTopics.map((topic) => (
|
|||
|
|
<Card key={topic.id}>
|
|||
|
|
<CardHeader className="pb-3">
|
|||
|
|
<CardTitle className="truncate">{topic.label}</CardTitle>
|
|||
|
|
<CardDescription className="truncate">{topic.query}</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-3">
|
|||
|
|
{topic.latestScan ? (
|
|||
|
|
<p className="text-[13px] text-muted-foreground">
|
|||
|
|
最近海巡 {new Date(topic.latestScan.createdAt).toLocaleDateString("zh-TW", { month: "short", day: "numeric" })}
|
|||
|
|
{" · "}
|
|||
|
|
{topic.latestScan.itemCount} 篇
|
|||
|
|
</p>
|
|||
|
|
) : (
|
|||
|
|
<p className="text-[13px] text-muted-foreground">尚未海巡</p>
|
|||
|
|
)}
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{topic.latestScan ? (
|
|||
|
|
<Button size="sm" asChild>
|
|||
|
|
<Link href={`/scans/${topic.id}/results`}>
|
|||
|
|
<ScanSearch className="h-3.5 w-3.5" />
|
|||
|
|
前往生成留言
|
|||
|
|
</Link>
|
|||
|
|
</Button>
|
|||
|
|
) : (
|
|||
|
|
<Button size="sm" variant="outline" asChild>
|
|||
|
|
<Link href={`/scans/${topic.id}`}>
|
|||
|
|
<ScanSearch className="h-3.5 w-3.5" />
|
|||
|
|
先完成海巡
|
|||
|
|
</Link>
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-center pt-2">
|
|||
|
|
<Button asChild variant="outline" size="sm">
|
|||
|
|
<Link href="/scans?mode=placement"><Radar className="h-4 w-4" />新增更多主題</Link>
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<EmptyState
|
|||
|
|
icon={Target}
|
|||
|
|
title="還沒有高意向受眾"
|
|||
|
|
description="建立找 TA 主題並海巡後，AI 會從中辨識高意向受眾並生成開場話術。"
|
|||
|
|
action={<Button asChild><Link href="/scans?mode=placement"><Radar className="h-4 w-4" />開始挖掘</Link></Button>}
|
|||
|
|
/>
|
|||
|
|
)
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{hasPlacementTargets && placementTopicId && (
|
|||
|
|
<Card>
|
|||
|
|
<CardHeader className="pb-3">
|
|||
|
|
<CardTitle className="text-base">品牌與產品</CardTitle>
|
|||
|
|
<CardDescription>
|
|||
|
|
調整後可重新生成，讓留言更自然帶到你的品牌（不會硬銷）。
|
|||
|
|
</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-3">
|
|||
|
|
<ProductContextForm
|
|||
|
|
compact
|
|||
|
|
value={productDrafts[placementTopicId] ?? ""}
|
|||
|
|
onChange={(value) =>
|
|||
|
|
setProductDrafts((prev) => ({ ...prev, [placementTopicId]: value }))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="outline"
|
|||
|
|
disabled={busy === `product-${placementTopicId}`}
|
|||
|
|
onClick={() => saveProductContext(placementTopicId)}
|
|||
|
|
>
|
|||
|
|
{busy === `product-${placementTopicId}` ? "儲存中…" : "儲存品牌與產品"}
|
|||
|
|
</Button>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{targets.map((target) => {
|
|||
|
|
const isPlacement = isPlacementGoal(
|
|||
|
|
target.scanItem.scan.scanGoal ?? target.scanItem.scan.topic.topicGoal
|
|||
|
|
);
|
|||
|
|
const productSummary = summarizeProductContext(
|
|||
|
|
productDrafts[target.scanItem.scan.topic.id] ?? target.scanItem.scan.topic.productContext
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Card key={target.id}>
|
|||
|
|
<CardHeader>
|
|||
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|||
|
|
<div>
|
|||
|
|
<CardTitle>
|
|||
|
|
@{target.scanItem.authorName ?? "匿名"} · {target.scanItem.scan.topic.label}
|
|||
|
|
</CardTitle>
|
|||
|
|
<CardDescription>
|
|||
|
|
{target.scanItem.likeCount ?? 0} 讚 / {target.scanItem.replyCount ?? 0} 留言
|
|||
|
|
</CardDescription>
|
|||
|
|
<div className="mt-2 flex flex-wrap gap-1.5">
|
|||
|
|
<Badge variant={target.status === "LOW_RELEVANCE" ? "warning" : "success"}>
|
|||
|
|
相關度 {Math.round((target.relevance ?? 0) * 100)}%
|
|||
|
|
</Badge>
|
|||
|
|
<Badge variant="outline">{target.status}</Badge>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{isPlacement && (
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="outline"
|
|||
|
|
disabled={busy === `regen-${target.id}`}
|
|||
|
|
onClick={() => regenerateTarget(target)}
|
|||
|
|
>
|
|||
|
|
{busy === `regen-${target.id}` ? (
|
|||
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|||
|
|
) : (
|
|||
|
|
<RefreshCw className="h-3.5 w-3.5" />
|
|||
|
|
)}
|
|||
|
|
重新生成
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
{target.scanItem.permalink && (
|
|||
|
|
<Button size="sm" variant="outline" asChild>
|
|||
|
|
<a href={target.scanItem.permalink} target="_blank" rel="noreferrer">
|
|||
|
|
<ExternalLink className="h-3.5 w-3.5" />
|
|||
|
|
原貼文
|
|||
|
|
</a>
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-4">
|
|||
|
|
<div className="rounded-lg border border-border bg-muted/50 p-3">
|
|||
|
|
<p className="text-[13px] leading-relaxed">{target.scanItem.text}</p>
|
|||
|
|
{productSummary && (
|
|||
|
|
<p className="mt-2 text-xs text-muted-foreground">置入參考：{productSummary}</p>
|
|||
|
|
)}
|
|||
|
|
{(target.scanItem.placementReason || target.reason) && (
|
|||
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|||
|
|
{target.scanItem.placementReason ?? target.reason}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{target.drafts.map((draft) => {
|
|||
|
|
const value = draftText[draft.id] ?? draft.text;
|
|||
|
|
return (
|
|||
|
|
<div key={draft.id} className="relative space-y-2 rounded-lg border border-border p-3">
|
|||
|
|
{selectMode && draft.status !== "PUBLISHED" && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
aria-label="選取留言草稿"
|
|||
|
|
onClick={() => toggleDraftSelection(draft.id)}
|
|||
|
|
className={`absolute right-3 top-3 flex h-5 w-5 items-center justify-center rounded border text-xs ${
|
|||
|
|
selectedDraftIds.has(draft.id)
|
|||
|
|
? "border-primary bg-primary text-primary-foreground"
|
|||
|
|
: "border-border bg-background"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{selectedDraftIds.has(draft.id) ? "✓" : ""}
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
<div className="flex items-center justify-between gap-2">
|
|||
|
|
<div className={`flex flex-wrap gap-1.5 ${selectMode ? "pr-8" : ""}`}>
|
|||
|
|
<Badge variant={draft.status === "PUBLISHED" ? "success" : "warning"}>{draft.status}</Badge>
|
|||
|
|
{draft.angle && <Badge variant="outline">{draft.angle}</Badge>}
|
|||
|
|
</div>
|
|||
|
|
<span className="text-xs text-muted-foreground">{value.length}/{THREADS_MAX_CHARS}</span>
|
|||
|
|
</div>
|
|||
|
|
<Textarea
|
|||
|
|
value={value}
|
|||
|
|
rows={3}
|
|||
|
|
onChange={(e) => setDraftText((prev) => ({ ...prev, [draft.id]: e.target.value }))}
|
|||
|
|
/>
|
|||
|
|
{draft.rationale && <p className="text-xs text-muted-foreground">{draft.rationale}</p>}
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<Button size="sm" variant="outline" onClick={() => saveDraft(draft.id)} disabled={busy === `save-${draft.id}`}>
|
|||
|
|
儲存
|
|||
|
|
</Button>
|
|||
|
|
<Button size="sm" variant="outline" onClick={() => copyText(value)}>
|
|||
|
|
<Copy className="h-3.5 w-3.5" />
|
|||
|
|
複製
|
|||
|
|
</Button>
|
|||
|
|
{draft.status !== "PUBLISHED" && (
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="outline"
|
|||
|
|
onClick={() => deleteDraft(draft)}
|
|||
|
|
disabled={busy === `delete-${draft.id}`}
|
|||
|
|
>
|
|||
|
|
{busy === `delete-${draft.id}` ? (
|
|||
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|||
|
|
) : (
|
|||
|
|
<Trash2 className="h-3.5 w-3.5" />
|
|||
|
|
)}
|
|||
|
|
刪除
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
{draft.status !== "PUBLISHED" && (
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
onClick={() => publishDraft(draft)}
|
|||
|
|
disabled={busy === `publish-${draft.id}` || !threadsApiReady}
|
|||
|
|
title={!threadsApiReady ? "需先在連線設定綁定 Threads API" : undefined}
|
|||
|
|
>
|
|||
|
|
{busy === `publish-${draft.id}` ? (
|
|||
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|||
|
|
) : (
|
|||
|
|
<Send className="h-3.5 w-3.5" />
|
|||
|
|
)}
|
|||
|
|
發布留言
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
{totalPages > 1 && (
|
|||
|
|
<div className="flex items-center justify-center gap-3 pt-2">
|
|||
|
|
<Button size="sm" variant="outline" disabled={page <= 1} onClick={() => setPage((value) => Math.max(1, value - 1))}>
|
|||
|
|
<ChevronLeft className="h-4 w-4" />上一頁
|
|||
|
|
</Button>
|
|||
|
|
<span className="text-xs text-muted-foreground">第 {page} / {totalPages} 頁</span>
|
|||
|
|
<Button size="sm" variant="outline" disabled={page >= totalPages} onClick={() => setPage((value) => Math.min(totalPages, value + 1))}>
|
|||
|
|
下一頁<ChevronRight className="h-4 w-4" />
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|