706 lines
28 KiB
TypeScript
706 lines
28 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { useRouter } from "next/navigation";
|
||
import { useState } from "react";
|
||
import {
|
||
ChevronDown,
|
||
ChevronUp,
|
||
ExternalLink,
|
||
Flame,
|
||
Loader2,
|
||
MessageSquarePlus,
|
||
ScanSearch,
|
||
Sparkles,
|
||
Table2,
|
||
} from "lucide-react";
|
||
import { ViralAnalysisPanel } from "@/components/viral-analysis-panel";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { FeatureGate } from "@/components/layout/feature-gate";
|
||
import { ScanPipelineSummary } from "@/components/inspiration/scan-pipeline-summary";
|
||
import { EmptyState } from "@/components/layout/empty-state";
|
||
import { notify } from "@/lib/notifications/store";
|
||
import { parseMediaUrls, parseViralAnalysis } from "@/lib/types/viral";
|
||
import { hasProductContext, summarizeProductContext } from "@/lib/types/product-context";
|
||
import { isPlacementGoal } from "@/lib/types/topic-goal";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
interface Reply {
|
||
id: string;
|
||
text: string;
|
||
authorName?: string | null;
|
||
likeCount?: number | null;
|
||
}
|
||
|
||
interface OutreachDraftPreview {
|
||
id: string;
|
||
text: string;
|
||
angle?: string | null;
|
||
rationale?: string | null;
|
||
}
|
||
|
||
interface OutreachTargetPreview {
|
||
id: string;
|
||
reason?: string | null;
|
||
drafts: OutreachDraftPreview[];
|
||
}
|
||
|
||
export interface ScanItem {
|
||
id: string;
|
||
text: string;
|
||
authorName?: string | null;
|
||
permalink?: string | null;
|
||
likeCount?: number | null;
|
||
replyCount?: number | null;
|
||
score: number;
|
||
searchTag?: string | null;
|
||
relevanceScore?: number | null;
|
||
placementScore?: number | null;
|
||
placementReason?: string | null;
|
||
qualityTier?: string | null;
|
||
qualityReason?: string | null;
|
||
combinedScore?: number | null;
|
||
mediaUrls?: string | null;
|
||
mediaType?: string | null;
|
||
viralAnalysis?: string | null;
|
||
replies: Reply[];
|
||
outreachTargets?: OutreachTargetPreview[];
|
||
}
|
||
|
||
export interface Scan {
|
||
id: string;
|
||
createdAt: string;
|
||
scanMode?: string;
|
||
scanGoal?: string | null;
|
||
scanTags?: string | null;
|
||
searchSource?: string | null;
|
||
repliesFetched?: boolean;
|
||
repliesCount?: number;
|
||
topic: {
|
||
id: string;
|
||
label: string;
|
||
query: string;
|
||
topicGoal?: string | null;
|
||
productContext?: string | null;
|
||
};
|
||
items: ScanItem[];
|
||
}
|
||
|
||
function truncateText(text: string, max = 72) {
|
||
const trimmed = (text ?? "").replace(/\s+/g, " ").trim();
|
||
if (!trimmed) return "（無內文）";
|
||
if (trimmed.length <= max) return trimmed;
|
||
return `${trimmed.slice(0, max)}…`;
|
||
}
|
||
|
||
function CollapsibleTrigger({
|
||
onToggle,
|
||
className,
|
||
children,
|
||
}: {
|
||
onToggle: () => void;
|
||
className?: string;
|
||
children: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<div
|
||
role="button"
|
||
tabIndex={0}
|
||
onClick={onToggle}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter" || e.key === " ") {
|
||
e.preventDefault();
|
||
onToggle();
|
||
}
|
||
}}
|
||
className={cn("cursor-pointer text-left outline-none focus-visible:ring-2 focus-visible:ring-ring", className)}
|
||
>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function parseScanTags(raw: string | null | undefined): string[] {
|
||
if (!raw) return [];
|
||
try {
|
||
return JSON.parse(raw) as string[];
|
||
} catch {
|
||
return [];
|
||
}
|
||
}
|
||
|
||
interface TopicScanResultsProps {
|
||
scans: Scan[];
|
||
onReload: () => Promise<void>;
|
||
emptyAction?: React.ReactNode;
|
||
}
|
||
|
||
export function TopicScanResults({ scans, onReload, emptyAction }: TopicScanResultsProps) {
|
||
const router = useRouter();
|
||
const [scanExpanded, setScanExpanded] = useState<Record<string, boolean>>({});
|
||
const [itemExpanded, setItemExpanded] = useState<Record<string, boolean>>({});
|
||
const [expanded, setExpanded] = useState<Record<string, boolean>>({});
|
||
const [generating, setGenerating] = useState<string | null>(null);
|
||
const [matrixGen, setMatrixGen] = useState<string | null>(null);
|
||
const [batchAnalyzing, setBatchAnalyzing] = useState<string | null>(null);
|
||
const [generatingReplyId, setGeneratingReplyId] = useState<string | null>(null);
|
||
const [viralExpanded, setViralExpanded] = useState<Record<string, boolean>>({});
|
||
|
||
async function handleGenerate(scanId: string) {
|
||
setGenerating(scanId);
|
||
const res = await fetch("/api/generate", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ scanId }),
|
||
});
|
||
const data = await res.json();
|
||
setGenerating(null);
|
||
if (!res.ok) {
|
||
notify({ type: "error", title: "生成草稿失敗", message: data.error });
|
||
return;
|
||
}
|
||
notify({
|
||
type: "success",
|
||
title: "草稿已生成",
|
||
message: `共 ${data.drafts?.length ?? 0} 篇`,
|
||
href: "/",
|
||
});
|
||
}
|
||
|
||
async function handleGenerateMatrix(scanId: string) {
|
||
setMatrixGen(scanId);
|
||
const res = await fetch("/api/generate-matrix", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ scanId }),
|
||
});
|
||
const data = await res.json();
|
||
setMatrixGen(null);
|
||
if (!res.ok) {
|
||
notify({ type: "error", title: "生成內容矩陣失敗", message: data.error });
|
||
return;
|
||
}
|
||
notify({
|
||
type: "success",
|
||
title: "內容矩陣已生成",
|
||
message: `共 ${data.drafts?.length ?? 0} 篇`,
|
||
href: "/matrix",
|
||
});
|
||
router.push("/matrix");
|
||
}
|
||
|
||
async function handleGenerateReply(scanItemId: string, productContext: string) {
|
||
if (!hasProductContext(productContext)) {
|
||
notify({
|
||
type: "warning",
|
||
title: "請先填寫品牌與產品",
|
||
message: "請到主題設定選擇品牌與產品後再生成回覆。",
|
||
});
|
||
return;
|
||
}
|
||
|
||
setGeneratingReplyId(scanItemId);
|
||
const res = await fetch("/api/outreach/generate", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ scanItemId, productContext }),
|
||
});
|
||
const data = await res.json();
|
||
setGeneratingReplyId(null);
|
||
if (!res.ok) {
|
||
notify({ type: "error", title: "生成回覆失敗", message: data.error });
|
||
return;
|
||
}
|
||
setItemExpanded((prev) => ({ ...prev, [scanItemId]: true }));
|
||
await onReload();
|
||
notify({
|
||
type: "success",
|
||
title: "回覆草稿已生成",
|
||
message: "請審核後再到主動互動頁發布",
|
||
href: "/outreach",
|
||
});
|
||
}
|
||
|
||
function toggleScan(id: string) {
|
||
setScanExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
|
||
}
|
||
|
||
function toggleItemDetail(id: string) {
|
||
setItemExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
|
||
}
|
||
|
||
function toggleReplies(id: string) {
|
||
setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
|
||
}
|
||
|
||
function toggleViral(id: string) {
|
||
setViralExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
|
||
}
|
||
|
||
function expandAllScans() {
|
||
setScanExpanded(Object.fromEntries(scans.map((s) => [s.id, true])));
|
||
}
|
||
|
||
function collapseAllScans() {
|
||
setScanExpanded(Object.fromEntries(scans.map((s) => [s.id, false])));
|
||
}
|
||
|
||
function revealAnalyzedItems(itemIds: string[], scanId: string) {
|
||
setScanExpanded((prev) => ({ ...prev, [scanId]: true }));
|
||
setItemExpanded((prev) => {
|
||
const next = { ...prev };
|
||
for (const id of itemIds) next[id] = true;
|
||
return next;
|
||
});
|
||
setViralExpanded((prev) => {
|
||
const next = { ...prev };
|
||
for (const id of itemIds) next[id] = true;
|
||
return next;
|
||
});
|
||
}
|
||
|
||
async function handleBatchAnalyze(scanId: string) {
|
||
setBatchAnalyzing(scanId);
|
||
setScanExpanded((prev) => ({ ...prev, [scanId]: true }));
|
||
notify({
|
||
type: "info",
|
||
title: "爆款分析進行中",
|
||
message: "正在分析 Top5 貼文，約需 1～3 分鐘，請稍候…",
|
||
});
|
||
|
||
try {
|
||
const res = await fetch("/api/analyze-viral", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ scanId, limit: 5 }),
|
||
});
|
||
const data = await res.json();
|
||
if (!res.ok) {
|
||
notify({ type: "error", title: "批次爆款分析失敗", message: data.error });
|
||
return;
|
||
}
|
||
|
||
const results = (data.results ?? []) as Array<{ item?: { id?: string } }>;
|
||
const itemIds = results
|
||
.map((row) => row.item?.id)
|
||
.filter((id): id is string => typeof id === "string");
|
||
|
||
if (itemIds.length === 0) {
|
||
notify({
|
||
type: "warning",
|
||
title: "沒有可分析的貼文",
|
||
message: "請確認有通過品質篩選（優質／可參考）的素材。",
|
||
});
|
||
return;
|
||
}
|
||
|
||
revealAnalyzedItems(itemIds, scanId);
|
||
await onReload();
|
||
revealAnalyzedItems(itemIds, scanId);
|
||
|
||
notify({
|
||
type: "success",
|
||
title: "爆款分析完成",
|
||
message: `共 ${itemIds.length} 篇，已自動展開結果`,
|
||
});
|
||
} catch {
|
||
notify({
|
||
type: "error",
|
||
title: "批次爆款分析失敗",
|
||
message: "連線中斷或逾時，請稍後再試。",
|
||
});
|
||
} finally {
|
||
setBatchAnalyzing(null);
|
||
}
|
||
}
|
||
|
||
if (scans.length === 0) {
|
||
return (
|
||
<EmptyState
|
||
icon={ScanSearch}
|
||
title="尚無海巡成果"
|
||
description="到主題設定完成分析與海巡後，成果會顯示在這裡"
|
||
action={emptyAction}
|
||
/>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex flex-wrap gap-2">
|
||
<Button size="sm" variant="ghost" onClick={expandAllScans}>
|
||
全部展開
|
||
</Button>
|
||
<Button size="sm" variant="ghost" onClick={collapseAllScans}>
|
||
全部收合
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="space-y-5">
|
||
{scans.map((scan, si) => {
|
||
const placementScan = isPlacementGoal(scan.scanGoal ?? scan.topic.topicGoal);
|
||
const tags = parseScanTags(scan.scanTags);
|
||
const visibleItems = scan.items;
|
||
|
||
const isScanOpen = scanExpanded[scan.id] ?? false;
|
||
const analyzedCount = scan.items.filter((i) => i.viralAnalysis).length;
|
||
|
||
return (
|
||
<Card key={scan.id} className="animate-fade-in-up" style={{ animationDelay: `${si * 60}ms` }}>
|
||
<CardHeader className="pb-3">
|
||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||
<CollapsibleTrigger
|
||
onToggle={() => toggleScan(scan.id)}
|
||
className="group min-w-0 flex-1"
|
||
>
|
||
<div className="flex items-start gap-2">
|
||
<ChevronDown
|
||
className={cn(
|
||
"mt-1 h-4 w-4 shrink-0 text-muted-foreground transition-transform",
|
||
isScanOpen && "rotate-180"
|
||
)}
|
||
/>
|
||
<div className="min-w-0">
|
||
<CardTitle className="group-hover:text-foreground/90">
|
||
{new Date(scan.createdAt).toLocaleString("zh-TW")}
|
||
</CardTitle>
|
||
<CardDescription>
|
||
{scan.scanMode === "multi-tag" && tags.length > 0 && `${tags.length} 個標籤`}
|
||
{analyzedCount > 0 && `${tags.length > 0 ? " · " : ""}${analyzedCount} 篇已爆款分析`}
|
||
{!isScanOpen && " · 點擊展開貼文"}
|
||
</CardDescription>
|
||
<ScanPipelineSummary
|
||
className="mt-2"
|
||
itemCount={scan.items.length}
|
||
repliesFetched={scan.repliesFetched}
|
||
repliesCount={scan.repliesCount}
|
||
/>
|
||
<div className="mt-2 flex flex-wrap items-center gap-1.5">
|
||
<Badge
|
||
variant={
|
||
scan.searchSource === "browser" || scan.searchSource === "web"
|
||
? "secondary"
|
||
: "default"
|
||
}
|
||
className="text-[10px]"
|
||
>
|
||
{scan.searchSource === "browser"
|
||
? "瀏覽器爬蟲"
|
||
: scan.searchSource === "web"
|
||
? "網路搜尋"
|
||
: scan.searchSource === "hybrid"
|
||
? "API + 網搜"
|
||
: "官方 API"}
|
||
</Badge>
|
||
</div>
|
||
{!isScanOpen && tags.length > 0 && (
|
||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||
{tags.slice(0, 6).map((tag) => (
|
||
<Badge key={tag} variant="outline" className="text-[11px]">
|
||
{tag}
|
||
</Badge>
|
||
))}
|
||
{tags.length > 6 && (
|
||
<Badge variant="outline" className="text-[11px]">
|
||
+{tags.length - 6}
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CollapsibleTrigger>
|
||
<div className="flex flex-wrap gap-2 sm:shrink-0">
|
||
{!placementScan && (
|
||
<>
|
||
<FeatureGate feature="viralAnalysis">
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => handleBatchAnalyze(scan.id)}
|
||
disabled={batchAnalyzing === scan.id}
|
||
>
|
||
{batchAnalyzing === scan.id ? (
|
||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||
) : (
|
||
<Flame className="h-3.5 w-3.5" />
|
||
)}
|
||
{batchAnalyzing === scan.id ? "分析中…" : "爆款分析 Top5"}
|
||
</Button>
|
||
</FeatureGate>
|
||
<FeatureGate feature="generate">
|
||
<Button
|
||
size="sm"
|
||
onClick={() => handleGenerateMatrix(scan.id)}
|
||
disabled={matrixGen === scan.id}
|
||
>
|
||
<Table2 className="h-3.5 w-3.5" />
|
||
{matrixGen === scan.id ? "生成中…" : "內容矩陣"}
|
||
</Button>
|
||
</FeatureGate>
|
||
<FeatureGate feature="generate">
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => handleGenerate(scan.id)}
|
||
disabled={generating === scan.id}
|
||
>
|
||
<Sparkles className="h-3.5 w-3.5" />
|
||
{generating === scan.id ? "生成中…" : "快速草稿"}
|
||
</Button>
|
||
</FeatureGate>
|
||
</>
|
||
)}
|
||
{placementScan && (
|
||
<Button size="sm" variant="outline" asChild>
|
||
<Link href="/outreach">前往主動互動審核</Link>
|
||
</Button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
{isScanOpen && tags.length > 0 && (
|
||
<div className="mt-2 flex flex-wrap gap-1.5 pl-6">
|
||
{tags.map((tag) => (
|
||
<Badge key={tag} variant="outline" className="text-[11px]">
|
||
{tag}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
)}
|
||
{isScanOpen && placementScan && (
|
||
<div className="mt-4 rounded-lg border border-border bg-muted/50 p-4 pl-6">
|
||
<p className="text-sm font-semibold">品牌與產品</p>
|
||
<p className="mt-1 text-[12px] text-muted-foreground">
|
||
{summarizeProductContext(scan.topic.productContext) ??
|
||
"尚未設定，請到主題設定或品牌與產品頁選用"}
|
||
</p>
|
||
<Button size="sm" variant="outline" className="mt-3" asChild>
|
||
<Link href={`/scans/${scan.topic.id}`}>變更品牌</Link>
|
||
</Button>
|
||
</div>
|
||
)}
|
||
</CardHeader>
|
||
{batchAnalyzing === scan.id && (
|
||
<div className="mx-5 mb-2 flex items-center gap-2 rounded-lg border border-border bg-muted/60 px-3 py-2.5 text-[13px] text-muted-foreground">
|
||
<Loader2 className="h-4 w-4 shrink-0 animate-spin" />
|
||
爆款分析 Top5 進行中…完成後會自動展開分析結果（約 1～3 分鐘）
|
||
</div>
|
||
)}
|
||
{isScanOpen && (
|
||
<CardContent className="space-y-2 pt-0">
|
||
{visibleItems.map((item) => {
|
||
const isItemOpen = itemExpanded[item.id] ?? false;
|
||
const outreachTarget = item.outreachTargets?.[0];
|
||
const hasDrafts = (outreachTarget?.drafts.length ?? 0) > 0;
|
||
|
||
return (
|
||
<div
|
||
key={item.id}
|
||
className={cn(
|
||
"rounded-lg border border-border bg-muted transition-colors hover:bg-secondary",
|
||
isItemOpen ? "p-4" : "px-3 py-2.5"
|
||
)}
|
||
>
|
||
<div className="flex items-start justify-between gap-3">
|
||
<CollapsibleTrigger
|
||
onToggle={() => toggleItemDetail(item.id)}
|
||
className="min-w-0 flex-1"
|
||
>
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
{item.searchTag && (
|
||
<Badge variant="default" className="text-[11px]">
|
||
{item.searchTag}
|
||
</Badge>
|
||
)}
|
||
<span className="text-xs font-medium text-muted-foreground">
|
||
@{item.authorName ?? "匿名"}
|
||
</span>
|
||
<Badge variant="outline">{item.likeCount ?? 0} 讚</Badge>
|
||
{(item.replyCount ?? 0) > 0 && (
|
||
<Badge variant="outline">{item.replyCount} 則留言</Badge>
|
||
)}
|
||
{hasDrafts && (
|
||
<Badge variant="success" className="text-[10px]">
|
||
已有草稿
|
||
</Badge>
|
||
)}
|
||
{item.viralAnalysis && !isItemOpen && (
|
||
<Badge variant="success" className="text-[10px]">
|
||
已分析
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
{item.permalink ? (
|
||
<a
|
||
href={item.permalink}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className={cn(
|
||
"mt-1.5 block text-[14px] leading-[1.65] underline-offset-2 hover:underline",
|
||
!isItemOpen && "text-muted-foreground"
|
||
)}
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
{isItemOpen ? item.text : truncateText(item.text)}
|
||
</a>
|
||
) : (
|
||
<p
|
||
className={cn(
|
||
"mt-1.5 text-[14px] leading-[1.65]",
|
||
!isItemOpen && "text-muted-foreground"
|
||
)}
|
||
>
|
||
{isItemOpen ? item.text : truncateText(item.text)}
|
||
</p>
|
||
)}
|
||
</CollapsibleTrigger>
|
||
<div className="flex shrink-0 flex-col items-end gap-1">
|
||
{item.permalink && (
|
||
<a
|
||
href={item.permalink}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<ExternalLink className="h-3 w-3" />
|
||
原文
|
||
</a>
|
||
)}
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
className="h-7 px-2 text-[12px]"
|
||
onClick={() => toggleItemDetail(item.id)}
|
||
>
|
||
{isItemOpen ? (
|
||
<ChevronUp className="h-3.5 w-3.5" />
|
||
) : (
|
||
<ChevronDown className="h-3.5 w-3.5" />
|
||
)}
|
||
{isItemOpen ? "收合" : "展開"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{isItemOpen && (
|
||
<>
|
||
<div className="mt-2 flex flex-wrap items-center gap-2">
|
||
{placementScan ? (
|
||
<FeatureGate feature="outreach">
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
className="h-7 px-2 text-[12px]"
|
||
disabled={generatingReplyId === item.id}
|
||
onClick={() =>
|
||
handleGenerateReply(item.id, scan.topic.productContext ?? "")
|
||
}
|
||
>
|
||
{generatingReplyId === item.id ? (
|
||
<Loader2 className="h-3 w-3 animate-spin" />
|
||
) : (
|
||
<MessageSquarePlus className="h-3 w-3" />
|
||
)}
|
||
{hasDrafts ? "重新生成回覆" : "生成回覆"}
|
||
</Button>
|
||
</FeatureGate>
|
||
) : (
|
||
<FeatureGate feature="viralAnalysis">
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
className="h-7 px-2 text-[12px]"
|
||
onClick={() => toggleViral(item.id)}
|
||
>
|
||
<Flame className="h-3 w-3" />
|
||
{viralExpanded[item.id] ? "收合爆款分析" : "爆款分析"}
|
||
{item.viralAnalysis && (
|
||
<Badge variant="success" className="ml-1 text-[10px]">
|
||
已分析
|
||
</Badge>
|
||
)}
|
||
</Button>
|
||
</FeatureGate>
|
||
)}
|
||
{item.replies.length > 0 && (
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
className="h-7 px-2 text-[12px]"
|
||
onClick={() => toggleReplies(item.id)}
|
||
>
|
||
{expanded[item.id] ? (
|
||
<ChevronUp className="h-3.5 w-3.5" />
|
||
) : (
|
||
<ChevronDown className="h-3.5 w-3.5" />
|
||
)}
|
||
{item.replies.length} 則留言
|
||
</Button>
|
||
)}
|
||
</div>
|
||
{placementScan && hasDrafts && outreachTarget && (
|
||
<div className="mt-3 space-y-2 border-t border-border pt-3">
|
||
{outreachTarget.drafts.map((draft) => (
|
||
<div
|
||
key={draft.id}
|
||
className="rounded-lg bg-background px-3 py-2.5 ring-1 ring-border"
|
||
>
|
||
{draft.angle && (
|
||
<p className="text-[10px] font-semibold text-muted-foreground">
|
||
{draft.angle}
|
||
</p>
|
||
)}
|
||
<p className="mt-1 text-sm leading-relaxed">{draft.text}</p>
|
||
{draft.rationale && (
|
||
<p className="mt-1 text-[11px] text-muted-foreground">
|
||
{draft.rationale}
|
||
</p>
|
||
)}
|
||
</div>
|
||
))}
|
||
<Button size="sm" variant="link" className="h-7 px-0" asChild>
|
||
<Link href="/outreach">到主動互動審核發布</Link>
|
||
</Button>
|
||
</div>
|
||
)}
|
||
{!placementScan && viralExpanded[item.id] && (
|
||
<ViralAnalysisPanel
|
||
scanItemId={item.id}
|
||
mediaUrls={parseMediaUrls(item.mediaUrls)}
|
||
viralAnalysis={parseViralAnalysis(item.viralAnalysis)}
|
||
onUpdate={onReload}
|
||
/>
|
||
)}
|
||
{expanded[item.id] && item.replies.length > 0 && (
|
||
<div className="mt-3 space-y-2 border-t border-border pt-3">
|
||
{item.replies.map((reply) => (
|
||
<div
|
||
key={reply.id}
|
||
className="rounded-lg bg-background px-3 py-2.5 ring-1 ring-border"
|
||
>
|
||
<p className="font-mono text-[10px] text-muted-foreground">
|
||
@{reply.authorName ?? "匿名"} · {reply.likeCount ?? 0} 讚
|
||
</p>
|
||
<p className="mt-1 text-sm leading-relaxed">{reply.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</CardContent>
|
||
)}
|
||
</Card>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|