268 lines
9.3 KiB
TypeScript
268 lines
9.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { Button } from "@/components/ui/button";
|
|
import { PLATFORM_MAP } from "@/lib/platforms";
|
|
import { Check, X, Quote, Filter } from "lucide-react";
|
|
import { useApi } from "@/lib/hooks/use-api";
|
|
import { LoadingState } from "@/components/ui/api-states";
|
|
|
|
interface CitationItem {
|
|
id: string;
|
|
query_id: string;
|
|
platform: string;
|
|
cited: boolean;
|
|
citation_position: number | null;
|
|
citation_text: string | null;
|
|
competitor_brands: string[];
|
|
queried_at: string;
|
|
}
|
|
|
|
interface QueryOption {
|
|
id: string;
|
|
keyword: string;
|
|
}
|
|
|
|
export default function CitationsPage() {
|
|
const [selectedQuery, setSelectedQuery] = useState<string>("all");
|
|
const [selectedPlatform, setSelectedPlatform] = useState<string>("all");
|
|
const [startDate, setStartDate] = useState<string>("");
|
|
const [endDate, setEndDate] = useState<string>("");
|
|
// 用于手动触发筛选
|
|
const [filterKey, setFilterKey] = useState(0);
|
|
|
|
// 构建引用记录查询 URL
|
|
const citationsUrl = (() => {
|
|
const params = new URLSearchParams();
|
|
if (selectedQuery && selectedQuery !== "all") params.append("query_id", selectedQuery);
|
|
if (selectedPlatform && selectedPlatform !== "all") params.append("platform", selectedPlatform);
|
|
if (startDate) params.append("start_date", startDate);
|
|
if (endDate) params.append("end_date", endDate);
|
|
const qs = params.toString();
|
|
// filterKey 作为虚拟参数，即使筛选条件不变也允许重新请求
|
|
return `/api/v1/citations/${qs ? `?${qs}&_k=${filterKey}` : `?_k=${filterKey}`}`;
|
|
})();
|
|
|
|
const {
|
|
data: citationsData,
|
|
isLoading,
|
|
error: citationsError,
|
|
refresh: refreshCitations,
|
|
} = useApi<{ items: CitationItem[] }>(
|
|
citationsUrl,
|
|
{ dedupingInterval: 0 }
|
|
);
|
|
|
|
const {
|
|
data: queriesData,
|
|
} = useApi<{ items: QueryOption[] }>("/api/v1/queries/");
|
|
|
|
const citations: CitationItem[] = citationsData?.items ?? [];
|
|
const queries: QueryOption[] = queriesData?.items ?? [];
|
|
|
|
function handleFilter() {
|
|
setFilterKey((k) => k + 1);
|
|
}
|
|
|
|
function handleReset() {
|
|
setSelectedQuery("all");
|
|
setSelectedPlatform("all");
|
|
setStartDate("");
|
|
setEndDate("");
|
|
setFilterKey((k) => k + 1);
|
|
}
|
|
|
|
if (isLoading && citations.length === 0) {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h2 className="text-2xl font-bold tracking-tight">引用记录</h2>
|
|
<p className="text-muted-foreground">查看各平台的引用检测结果</p>
|
|
</div>
|
|
<LoadingState rows={4} rowHeight="h-12" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h2 className="text-2xl font-bold tracking-tight">引用记录</h2>
|
|
<p className="text-muted-foreground">查看各平台的引用检测结果</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Filter className="h-4 w-4" />
|
|
筛选条件
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="query-filter">查询词</Label>
|
|
<Select value={selectedQuery} onValueChange={setSelectedQuery}>
|
|
<SelectTrigger id="query-filter">
|
|
<SelectValue placeholder="全部查询词" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">全部查询词</SelectItem>
|
|
{queries.map((q) => (
|
|
<SelectItem key={q.id} value={q.id}>
|
|
{q.keyword}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="platform-filter">平台</Label>
|
|
<Select value={selectedPlatform} onValueChange={setSelectedPlatform}>
|
|
<SelectTrigger id="platform-filter">
|
|
<SelectValue placeholder="全部平台" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">全部平台</SelectItem>
|
|
{Object.entries(PLATFORM_MAP).map(([key, label]) => (
|
|
<SelectItem key={key} value={key}>
|
|
{label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="start-date">开始日期</Label>
|
|
<Input
|
|
id="start-date"
|
|
type="date"
|
|
value={startDate}
|
|
onChange={(e) => setStartDate(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="end-date">结束日期</Label>
|
|
<Input
|
|
id="end-date"
|
|
type="date"
|
|
value={endDate}
|
|
onChange={(e) => setEndDate(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex items-end gap-2">
|
|
<Button onClick={handleFilter} className="flex-1">
|
|
筛选
|
|
</Button>
|
|
<Button variant="outline" onClick={handleReset} className="flex-1">
|
|
重置
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{citationsError && (
|
|
<div className="rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive">
|
|
{citationsError.message}
|
|
</div>
|
|
)}
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">引用记录列表</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{citations.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
|
|
<Quote className="mb-4 h-12 w-12 opacity-20" />
|
|
<p>暂无引用记录</p>
|
|
<p className="text-sm">添加查询词并执行查询后将在此显示结果</p>
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>平台</TableHead>
|
|
<TableHead>是否引用</TableHead>
|
|
<TableHead>引用位置</TableHead>
|
|
<TableHead>引用文本片段</TableHead>
|
|
<TableHead>竞争品牌</TableHead>
|
|
<TableHead>查询时间</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{citations.map((item) => (
|
|
<TableRow key={item.id}>
|
|
<TableCell className="font-medium">
|
|
{PLATFORM_MAP[item.platform] || item.platform}
|
|
</TableCell>
|
|
<TableCell>
|
|
{item.cited ? (
|
|
<div className="flex items-center gap-1 text-emerald-600">
|
|
<Check className="h-4 w-4" />
|
|
<span className="text-sm">已引用</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-1 text-red-500">
|
|
<X className="h-4 w-4" />
|
|
<span className="text-sm">未引用</span>
|
|
</div>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
{item.citation_position !== null
|
|
? `第 ${item.citation_position} 位`
|
|
: "—"}
|
|
</TableCell>
|
|
<TableCell className="max-w-xs truncate">
|
|
{item.citation_text || "—"}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-1">
|
|
{item.competitor_brands?.length > 0 ? (
|
|
item.competitor_brands.map((brand) => (
|
|
<Badge key={brand} variant="secondary" className="text-xs">
|
|
{brand}
|
|
</Badge>
|
|
))
|
|
) : (
|
|
<span className="text-muted-foreground">—</span>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground">
|
|
{new Date(item.queried_at).toLocaleString("zh-CN")}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|