296 lines
9.6 KiB
TypeScript
296 lines
9.6 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { useSession } from "next-auth/react";
|
||
import Link from "next/link";
|
||
import { useRouter } from "next/navigation";
|
||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import {
|
||
BrandFormDialog,
|
||
AddBrandButton,
|
||
} from "@/components/brand/BrandFormDialog";
|
||
import { api } from "@/lib/api";
|
||
import { PLATFORM_MAP } from "@/lib/platforms";
|
||
import { useNotificationStore, useBrandStore } from "@/lib/stores";
|
||
import type { BrandListItem, BrandListResponse } from "@/types/brand";
|
||
import { Search, Star, Calendar, Edit, Trash2 } from "lucide-react";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import { useApi } from "@/lib/hooks/use-api";
|
||
import { LoadingState, ErrorState, EmptyState } from "@/components/ui/api-states";
|
||
|
||
export default function BrandsPage() {
|
||
const { data: session } = useSession();
|
||
const router = useRouter();
|
||
const [deleteBrand, setDeleteBrand] = useState<BrandListItem | null>(null);
|
||
const [deleting, setDeleting] = useState(false);
|
||
|
||
const { data: brandsResponse, isLoading: loading, error: apiError, refresh: fetchBrands } =
|
||
useApi<BrandListResponse>("/api/v1/brands/");
|
||
|
||
const brands: BrandListItem[] = brandsResponse?.items ?? [];
|
||
const error = apiError?.message ?? null;
|
||
|
||
// 同步 SWR 数据到 brand-store
|
||
const syncFromSWR = useBrandStore((s) => s.syncFromSWR);
|
||
useEffect(() => {
|
||
if (brands.length > 0) {
|
||
syncFromSWR(brands);
|
||
}
|
||
}, [brands, syncFromSWR]);
|
||
|
||
const addNotification = useNotificationStore((s) => s.addNotification);
|
||
const optimisticDelete = useBrandStore((s) => s.optimisticDelete);
|
||
|
||
const handleDelete = async () => {
|
||
if (!deleteBrand || !session?.accessToken) return;
|
||
|
||
try {
|
||
setDeleting(true);
|
||
const success = await optimisticDelete(
|
||
session.accessToken,
|
||
deleteBrand.id,
|
||
fetchBrands
|
||
);
|
||
if (success) {
|
||
setDeleteBrand(null);
|
||
}
|
||
} catch (err) {
|
||
addNotification({
|
||
type: "error",
|
||
message: err instanceof Error ? err.message : "删除失败",
|
||
});
|
||
} finally {
|
||
setDeleting(false);
|
||
}
|
||
};
|
||
|
||
const formatDate = (dateString: string | null) => {
|
||
if (!dateString) return "暂无";
|
||
const date = new Date(dateString);
|
||
return date.toLocaleDateString("zh-CN", {
|
||
year: "numeric",
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
});
|
||
};
|
||
|
||
const getFrequencyLabel = (frequency: string) => {
|
||
const labels: Record<string, string> = {
|
||
daily: "每日",
|
||
weekly: "每周",
|
||
monthly: "每月",
|
||
};
|
||
return labels[frequency] || frequency;
|
||
};
|
||
|
||
const getStatusBadge = (status: string) => {
|
||
switch (status) {
|
||
case "active":
|
||
return <Badge variant="default">活跃</Badge>;
|
||
case "inactive":
|
||
return <Badge variant="secondary">停用</Badge>;
|
||
case "pending":
|
||
return <Badge variant="outline">待处理</Badge>;
|
||
default:
|
||
return <Badge variant="outline">{status}</Badge>;
|
||
}
|
||
};
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="space-y-6">
|
||
<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={3} grid cols={3} rowHeight="h-40" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="space-y-6">
|
||
<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={fetchBrands} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (brands.length === 0) {
|
||
return (
|
||
<div className="space-y-6">
|
||
<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>
|
||
<EmptyState
|
||
icon={<Star className="h-6 w-6 text-primary" />}
|
||
message="暂无品牌"
|
||
description="添加您的第一个品牌，开始监控其在AI搜索中的表现"
|
||
action={<AddBrandButton onSuccess={fetchBrands} />}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h2 className="text-2xl font-bold tracking-tight">品牌管理</h2>
|
||
<p className="text-muted-foreground">管理您的品牌监控列表</p>
|
||
</div>
|
||
<AddBrandButton onSuccess={fetchBrands} />
|
||
</div>
|
||
|
||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||
{brands.map((brand) => (
|
||
<Card
|
||
key={brand.id}
|
||
className="cursor-pointer transition-shadow hover:shadow-md"
|
||
onClick={() => router.push(`/brands/${brand.id}`)}
|
||
>
|
||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||
<CardTitle className="text-lg font-semibold">
|
||
{brand.name}
|
||
</CardTitle>
|
||
{getStatusBadge(brand.status)}
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-3">
|
||
{/* 评分 */}
|
||
<div className="flex items-center gap-2">
|
||
<Star className="h-4 w-4 text-amber-500" />
|
||
<span className="text-sm">
|
||
<span className="font-semibold text-lg">
|
||
{brand.score ?? "-"}
|
||
</span>
|
||
{brand.score !== null && (
|
||
<span className="text-muted-foreground"> 分</span>
|
||
)}
|
||
</span>
|
||
</div>
|
||
|
||
{/* 平台 */}
|
||
<div className="flex flex-wrap gap-1">
|
||
{brand.platforms.map((platform) => (
|
||
<Badge
|
||
key={platform}
|
||
variant="secondary"
|
||
className="text-xs"
|
||
>
|
||
{PLATFORM_MAP[platform] || platform}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
|
||
{/* 查询频率 */}
|
||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||
<Calendar className="h-4 w-4" />
|
||
<span>{getFrequencyLabel(brand.frequency)}查询</span>
|
||
</div>
|
||
|
||
{/* 上次查询 */}
|
||
<div className="text-xs text-muted-foreground">
|
||
上次查询: {formatDate(brand.last_queried_at)}
|
||
</div>
|
||
|
||
{/* 操作按钮 */}
|
||
<div
|
||
className="flex gap-2 pt-2"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
asChild
|
||
className="flex-1"
|
||
>
|
||
<Link href={`/brands/${brand.id}`}>
|
||
<Search className="mr-1 h-3 w-3" />
|
||
查看详情
|
||
</Link>
|
||
</Button>
|
||
<BrandFormDialog
|
||
editBrand={{
|
||
id: brand.id,
|
||
name: brand.name,
|
||
aliases: brand.aliases,
|
||
website: null,
|
||
industry: null,
|
||
platforms: brand.platforms,
|
||
frequency: brand.frequency,
|
||
}}
|
||
onSuccess={fetchBrands}
|
||
trigger={
|
||
<Button variant="outline" size="icon" className="h-9 w-9">
|
||
<Edit className="h-4 w-4" />
|
||
</Button>
|
||
}
|
||
/>
|
||
<Button
|
||
variant="outline"
|
||
size="icon"
|
||
className="h-9 w-9 text-destructive hover:text-destructive"
|
||
onClick={() => setDeleteBrand(brand)}
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
|
||
{/* 删除确认对话框 */}
|
||
<Dialog open={!!deleteBrand} onOpenChange={() => setDeleteBrand(null)}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>确认删除</DialogTitle>
|
||
<DialogDescription>
|
||
确定要删除品牌 “{deleteBrand?.name}”
|
||
吗？此操作不可恢复， 所有相关的引用记录也将被删除。
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<DialogFooter>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => setDeleteBrand(null)}
|
||
disabled={deleting}
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button
|
||
variant="destructive"
|
||
onClick={handleDelete}
|
||
disabled={deleting}
|
||
>
|
||
{deleting ? "删除中..." : "确认删除"}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
}
|