517 lines
18 KiB
TypeScript
517 lines
18 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 { Button } from "@/components/ui/button";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import { Input } from "@/components/ui/input";
|
||
import { Label } from "@/components/ui/label";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from "@/components/ui/dialog";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select";
|
||
import { fetchWithAuth } from "@/lib/api/client";
|
||
import type { QueryListResponse, ApiQueryItem } from "@/lib/api/queries";
|
||
import { PLATFORM_MAP, PLATFORMS } from "@/lib/platforms";
|
||
import { useApi } from "@/lib/hooks/use-api";
|
||
import { LoadingState, ErrorState, EmptyState } from "@/components/ui/api-states";
|
||
import {
|
||
Plus,
|
||
Pencil,
|
||
Trash2,
|
||
Play,
|
||
Loader2,
|
||
Search,
|
||
CheckCircle,
|
||
} from "lucide-react";
|
||
|
||
interface QueryFormData {
|
||
keyword: string;
|
||
target_brand: string;
|
||
brand_aliases: string;
|
||
platforms: string[];
|
||
frequency: string;
|
||
}
|
||
|
||
const FREQUENCY_MAP: Record<string, string> = {
|
||
daily: "每日",
|
||
weekly: "每周",
|
||
};
|
||
|
||
const emptyForm: QueryFormData = {
|
||
keyword: "",
|
||
target_brand: "",
|
||
brand_aliases: "",
|
||
platforms: [],
|
||
frequency: "weekly",
|
||
};
|
||
|
||
export default function QueriesPage() {
|
||
const { data: queriesResponse, isLoading: loading, error: apiError, refresh: refreshQueries } =
|
||
useApi<QueryListResponse>("/api/v1/queries/");
|
||
|
||
const queries: ApiQueryItem[] = (queriesResponse?.items ?? []);
|
||
const error = apiError?.message ?? null;
|
||
|
||
const [dialogOpen, setDialogOpen] = useState(false);
|
||
const [editingId, setEditingId] = useState<string | null>(null);
|
||
const [formData, setFormData] = useState<QueryFormData>(emptyForm);
|
||
const [saving, setSaving] = useState(false);
|
||
|
||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||
const [deleting, setDeleting] = useState(false);
|
||
|
||
const [actionLoading, setActionLoading] = useState<string | null>(null);
|
||
const [formErrors, setFormErrors] = useState<Record<string, string>>({});
|
||
const [successMsg, setSuccessMsg] = useState<string | null>(null);
|
||
const [mutationError, setMutationError] = useState<string | null>(null);
|
||
|
||
function showSuccess(msg: string) {
|
||
setSuccessMsg(msg);
|
||
setTimeout(() => setSuccessMsg(null), 3000);
|
||
}
|
||
|
||
function openAddDialog() {
|
||
setEditingId(null);
|
||
setFormData(emptyForm);
|
||
setFormErrors({});
|
||
setMutationError(null);
|
||
setDialogOpen(true);
|
||
}
|
||
|
||
function openEditDialog(item: ApiQueryItem) {
|
||
setEditingId(item.id);
|
||
setFormErrors({});
|
||
setMutationError(null);
|
||
setFormData({
|
||
keyword: item.keyword,
|
||
target_brand: item.target_brand,
|
||
brand_aliases: item.brand_aliases?.join(", ") || "",
|
||
platforms: item.platforms || [],
|
||
frequency: item.frequency,
|
||
});
|
||
setDialogOpen(true);
|
||
}
|
||
|
||
function validateForm(): boolean {
|
||
const errors: Record<string, string> = {};
|
||
if (!formData.keyword.trim()) {
|
||
errors.keyword = "请输入关键词";
|
||
}
|
||
if (!formData.target_brand.trim()) {
|
||
errors.target_brand = "请输入目标品牌";
|
||
}
|
||
if (formData.platforms.length === 0) {
|
||
errors.platforms = "请至少选择一个平台";
|
||
}
|
||
setFormErrors(errors);
|
||
return Object.keys(errors).length === 0;
|
||
}
|
||
|
||
async function handleSave() {
|
||
if (!validateForm()) return;
|
||
|
||
try {
|
||
setSaving(true);
|
||
setMutationError(null);
|
||
const payload = {
|
||
keyword: formData.keyword.trim(),
|
||
target_brand: formData.target_brand.trim(),
|
||
brand_aliases: formData.brand_aliases
|
||
.split(",")
|
||
.map((s) => s.trim())
|
||
.filter(Boolean),
|
||
platforms: formData.platforms,
|
||
frequency: formData.frequency,
|
||
};
|
||
|
||
if (editingId) {
|
||
await fetchWithAuth(`/api/v1/queries/${editingId}`, {
|
||
method: "PUT",
|
||
body: JSON.stringify(payload),
|
||
});
|
||
} else {
|
||
await fetchWithAuth("/api/v1/queries/", {
|
||
method: "POST",
|
||
body: JSON.stringify(payload),
|
||
});
|
||
}
|
||
setDialogOpen(false);
|
||
showSuccess(editingId ? "修改成功" : "添加成功");
|
||
refreshQueries();
|
||
} catch (err) {
|
||
setMutationError(err instanceof Error ? err.message : "保存失败");
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}
|
||
|
||
function openDeleteDialog(id: string) {
|
||
setDeletingId(id);
|
||
setDeleteDialogOpen(true);
|
||
}
|
||
|
||
async function handleDelete() {
|
||
if (!deletingId) return;
|
||
try {
|
||
setDeleting(true);
|
||
await fetchWithAuth(`/api/v1/queries/${deletingId}`, { method: "DELETE" });
|
||
setDeleteDialogOpen(false);
|
||
setDeletingId(null);
|
||
showSuccess("删除成功");
|
||
refreshQueries();
|
||
} catch (err) {
|
||
setMutationError(err instanceof Error ? err.message : "删除失败");
|
||
} finally {
|
||
setDeleting(false);
|
||
}
|
||
}
|
||
|
||
async function handleRunQuery(id: string) {
|
||
setActionLoading(id);
|
||
setMutationError(null);
|
||
try {
|
||
await fetchWithAuth(`/api/v1/queries/${id}/run-now`, { method: "POST" });
|
||
showSuccess("查询已执行");
|
||
refreshQueries();
|
||
} catch (err) {
|
||
setMutationError(err instanceof Error ? err.message : "立即查询失败");
|
||
} finally {
|
||
setActionLoading(null);
|
||
}
|
||
}
|
||
|
||
function togglePlatform(platform: string) {
|
||
setFormData((prev) => {
|
||
const platforms = prev.platforms.includes(platform)
|
||
? prev.platforms.filter((p) => p !== platform)
|
||
: [...prev.platforms, platform];
|
||
return { ...prev, platforms };
|
||
});
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h2 className="text-2xl font-bold tracking-tight">查询词管理</h2>
|
||
<p className="text-muted-foreground">管理您的关键词查询任务</p>
|
||
</div>
|
||
</div>
|
||
<LoadingState rows={5} rowHeight="h-14" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h2 className="text-2xl font-bold tracking-tight">查询词管理</h2>
|
||
<p className="text-muted-foreground">管理您的关键词查询任务</p>
|
||
</div>
|
||
</div>
|
||
<ErrorState error={error} onRetry={refreshQueries} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h2 className="text-2xl font-bold tracking-tight">查询词管理</h2>
|
||
<p className="text-muted-foreground">管理您的关键词查询任务</p>
|
||
</div>
|
||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||
<DialogTrigger asChild>
|
||
<Button onClick={openAddDialog}>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
添加查询词
|
||
</Button>
|
||
</DialogTrigger>
|
||
<DialogContent className="max-w-lg">
|
||
<DialogHeader>
|
||
<DialogTitle>{editingId ? "编辑查询词" : "添加查询词"}</DialogTitle>
|
||
<DialogDescription>
|
||
{editingId ? "修改查询词配置" : "配置新的关键词查询任务"}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="space-y-4 py-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="keyword">
|
||
关键词 <span className="text-destructive">*</span>
|
||
</Label>
|
||
<Input
|
||
id="keyword"
|
||
placeholder="例如：个人养老金推荐"
|
||
value={formData.keyword}
|
||
onChange={(e) => {
|
||
setFormData((prev) => ({ ...prev, keyword: e.target.value }));
|
||
if (formErrors.keyword) {
|
||
setFormErrors((prev) => ({ ...prev, keyword: "" }));
|
||
}
|
||
}}
|
||
/>
|
||
{formErrors.keyword && (
|
||
<p className="text-xs text-destructive">{formErrors.keyword}</p>
|
||
)}
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="target_brand">
|
||
目标品牌 <span className="text-destructive">*</span>
|
||
</Label>
|
||
<Input
|
||
id="target_brand"
|
||
placeholder="例如：中国平安"
|
||
value={formData.target_brand}
|
||
onChange={(e) => {
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
target_brand: e.target.value,
|
||
}));
|
||
if (formErrors.target_brand) {
|
||
setFormErrors((prev) => ({ ...prev, target_brand: "" }));
|
||
}
|
||
}}
|
||
/>
|
||
{formErrors.target_brand && (
|
||
<p className="text-xs text-destructive">{formErrors.target_brand}</p>
|
||
)}
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label htmlFor="brand_aliases">品牌别名（逗号分隔）</Label>
|
||
<Input
|
||
id="brand_aliases"
|
||
placeholder="例如：平安保险, Ping An"
|
||
value={formData.brand_aliases}
|
||
onChange={(e) =>
|
||
setFormData((prev) => ({
|
||
...prev,
|
||
brand_aliases: e.target.value,
|
||
}))
|
||
}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<Label>
|
||
查询平台 <span className="text-destructive">*</span>
|
||
</Label>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
{PLATFORMS.map((p) => (
|
||
<label
|
||
key={p.key}
|
||
className="flex cursor-pointer items-center space-x-2 rounded-md border p-2 hover:bg-muted"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
className="h-4 w-4 rounded border-gray-300 text-primary"
|
||
checked={formData.platforms.includes(p.key)}
|
||
onChange={() => togglePlatform(p.key)}
|
||
/>
|
||
<span className="text-sm">{p.label}</span>
|
||
</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
{formErrors.platforms && (
|
||
<p className="text-xs text-destructive">{formErrors.platforms}</p>
|
||
)}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="frequency">查询频率</Label>
|
||
<Select
|
||
value={formData.frequency}
|
||
onValueChange={(value) =>
|
||
setFormData((prev) => ({ ...prev, frequency: value }))
|
||
}
|
||
>
|
||
<SelectTrigger id="frequency">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
<SelectItem value="daily">每日</SelectItem>
|
||
<SelectItem value="weekly">每周</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
{mutationError && (
|
||
<p className="text-xs text-destructive">{mutationError}</p>
|
||
)}
|
||
</div>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setDialogOpen(false)}>
|
||
取消
|
||
</Button>
|
||
<Button onClick={handleSave} disabled={saving}>
|
||
{saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||
{editingId ? "保存修改" : "添加"}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
|
||
{successMsg && (
|
||
<div className="flex items-center gap-2 rounded-md bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
|
||
<CheckCircle className="h-4 w-4 shrink-0" />
|
||
{successMsg}
|
||
</div>
|
||
)}
|
||
|
||
{mutationError && !dialogOpen && (
|
||
<div className="rounded-md bg-destructive/10 px-4 py-3 text-sm text-destructive">
|
||
{mutationError}
|
||
</div>
|
||
)}
|
||
|
||
{queries.length === 0 ? (
|
||
<EmptyState
|
||
icon={<Search className="h-6 w-6 text-gray-400" />}
|
||
message="暂无查询词"
|
||
description="点击右上角按钮添加您的第一个查询词"
|
||
/>
|
||
) : (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="text-base">查询词列表</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="overflow-x-auto">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>关键词</TableHead>
|
||
<TableHead>目标品牌</TableHead>
|
||
<TableHead>平台</TableHead>
|
||
<TableHead>频率</TableHead>
|
||
<TableHead>状态</TableHead>
|
||
<TableHead>最后查询</TableHead>
|
||
<TableHead className="text-right">操作</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{queries.map((item: ApiQueryItem) => (
|
||
<TableRow key={item.id}>
|
||
<TableCell className="font-medium">
|
||
{item.keyword}
|
||
</TableCell>
|
||
<TableCell>{item.target_brand}</TableCell>
|
||
<TableCell>
|
||
<div className="flex flex-wrap gap-1">
|
||
{item.platforms.map((p) => (
|
||
<Badge key={p} variant="secondary" className="text-xs">
|
||
{PLATFORM_MAP[p] || p}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell>{FREQUENCY_MAP[item.frequency] || item.frequency}</TableCell>
|
||
<TableCell>
|
||
<Badge
|
||
variant={item.status === "active" ? "default" : "secondary"}
|
||
className={
|
||
item.status === "active"
|
||
? "bg-emerald-100 text-emerald-700 hover:bg-emerald-100"
|
||
: "bg-amber-100 text-amber-700 hover:bg-amber-100"
|
||
}
|
||
>
|
||
{item.status === "active" ? "运行中" : "已暂停"}
|
||
</Badge>
|
||
</TableCell>
|
||
<TableCell className="text-muted-foreground">
|
||
{item.last_queried_at
|
||
? new Date(item.last_queried_at).toLocaleString("zh-CN")
|
||
: "从未"}
|
||
</TableCell>
|
||
<TableCell className="text-right">
|
||
<div className="flex justify-end gap-1">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-8 w-8"
|
||
onClick={() => handleRunQuery(item.id)}
|
||
disabled={actionLoading === item.id}
|
||
>
|
||
{actionLoading === item.id ? (
|
||
<Loader2 className="h-4 w-4 animate-spin" />
|
||
) : (
|
||
<Play className="h-4 w-4" />
|
||
)}
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-8 w-8"
|
||
onClick={() => openEditDialog(item)}
|
||
>
|
||
<Pencil className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-8 w-8 text-destructive hover:text-destructive"
|
||
onClick={() => openDeleteDialog(item.id)}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
)}
|
||
|
||
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>确认删除</DialogTitle>
|
||
<DialogDescription>
|
||
删除后无法恢复，确定要删除这个查询词吗？
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
variant="destructive"
|
||
onClick={handleDelete}
|
||
disabled={deleting}
|
||
>
|
||
{deleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||
删除
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
}
|