284 lines
10 KiB
TypeScript
284 lines
10 KiB
TypeScript
|
import * as React from "react"
|
|||
|
|
import { AlertCircle, CheckCircle2, Clock, Filter, Plus, RefreshCw, Search } from "lucide-react"
|
|||
|
|
|
|||
|
|
import type { RoleView, WorkflowConfig } from "@/App"
|
|||
|
|
import { Badge } from "@/components/ui/badge"
|
|||
|
|
import { Button } from "@/components/ui/button"
|
|||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|||
|
|
import { Input } from "@/components/ui/input"
|
|||
|
|
import { Progress } from "@/components/ui/progress"
|
|||
|
|
import {
|
|||
|
|
Table,
|
|||
|
|
TableBody,
|
|||
|
|
TableCell,
|
|||
|
|
TableHead,
|
|||
|
|
TableHeader,
|
|||
|
|
TableRow,
|
|||
|
|
} from "@/components/ui/table"
|
|||
|
|
|
|||
|
|
type SyncStatus = "synced" | "pending" | "error"
|
|||
|
|
|
|||
|
|
type SourceCar = {
|
|||
|
|
id: string
|
|||
|
|
name: string
|
|||
|
|
officialTagline: string
|
|||
|
|
sourceUpdatedAt: string
|
|||
|
|
syncStatus: SyncStatus
|
|||
|
|
imageCount: number
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type SyncLog = {
|
|||
|
|
id: string
|
|||
|
|
time: string
|
|||
|
|
status: "success" | "failed"
|
|||
|
|
message: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
type CarLibraryProps = {
|
|||
|
|
roleView: RoleView
|
|||
|
|
workflowConfig: WorkflowConfig
|
|||
|
|
onAddAuditLog: (message: string) => void
|
|||
|
|
onCreateContent?: (sourceCarId: string, sourceCarName: string) => void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const SOURCE_CARS: SourceCar[] = [
|
|||
|
|
{
|
|||
|
|
id: "a3",
|
|||
|
|
name: "Audi A3 Sportback",
|
|||
|
|
officialTagline: "进取，不负期待",
|
|||
|
|
sourceUpdatedAt: "2026-04-11 09:30",
|
|||
|
|
syncStatus: "synced",
|
|||
|
|
imageCount: 8,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "a4l",
|
|||
|
|
name: "Audi A4L",
|
|||
|
|
officialTagline: "做更强大的自己",
|
|||
|
|
sourceUpdatedAt: "2026-04-11 09:30",
|
|||
|
|
syncStatus: "synced",
|
|||
|
|
imageCount: 6,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "a6l",
|
|||
|
|
name: "Audi A6L",
|
|||
|
|
officialTagline: "懂你，更懂未来",
|
|||
|
|
sourceUpdatedAt: "2026-04-10 14:20",
|
|||
|
|
syncStatus: "pending",
|
|||
|
|
imageCount: 5,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "q5l",
|
|||
|
|
name: "Audi Q5L",
|
|||
|
|
officialTagline: "自由，由我定义",
|
|||
|
|
sourceUpdatedAt: "2026-04-10 09:15",
|
|||
|
|
syncStatus: "error",
|
|||
|
|
imageCount: 0,
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
const INITIAL_LOGS: SyncLog[] = [
|
|||
|
|
{ id: "l1", time: "2026-04-11 09:30", status: "success", message: "同步成功：4 个车型，素材 19 张" },
|
|||
|
|
{ id: "l2", time: "2026-04-10 09:15", status: "failed", message: "Audi Q5L 图片拉取失败：CDN 超时" },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
function syncBadge(status: SyncStatus) {
|
|||
|
|
if (status === "synced") {
|
|||
|
|
return (
|
|||
|
|
<Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200 gap-1">
|
|||
|
|
<CheckCircle2 className="h-3 w-3" />已同步
|
|||
|
|
</Badge>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
if (status === "pending") {
|
|||
|
|
return (
|
|||
|
|
<Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 gap-1">
|
|||
|
|
<Clock className="h-3 w-3" />待同步
|
|||
|
|
</Badge>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
<Badge variant="outline" className="bg-rose-50 text-rose-700 border-rose-200 gap-1">
|
|||
|
|
<AlertCircle className="h-3 w-3" />同步失败
|
|||
|
|
</Badge>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function nowString() {
|
|||
|
|
return new Date().toLocaleString("zh-CN", { hour12: false })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function CarLibrary({ onAddAuditLog, onCreateContent }: CarLibraryProps) {
|
|||
|
|
const [sourceCars, setSourceCars] = React.useState<SourceCar[]>(SOURCE_CARS)
|
|||
|
|
const [query, setQuery] = React.useState("")
|
|||
|
|
const [isSyncing, setIsSyncing] = React.useState(false)
|
|||
|
|
const [progress, setProgress] = React.useState(0)
|
|||
|
|
const [syncLogs, setSyncLogs] = React.useState<SyncLog[]>(INITIAL_LOGS)
|
|||
|
|
|
|||
|
|
const filtered = sourceCars.filter((car) => car.name.toLowerCase().includes(query.toLowerCase()))
|
|||
|
|
|
|||
|
|
const handleSync = () => {
|
|||
|
|
setIsSyncing(true)
|
|||
|
|
setProgress(0)
|
|||
|
|
|
|||
|
|
const interval = setInterval(() => {
|
|||
|
|
setProgress((prev) => {
|
|||
|
|
if (prev >= 100) {
|
|||
|
|
clearInterval(interval)
|
|||
|
|
const time = nowString()
|
|||
|
|
setSourceCars((curr) =>
|
|||
|
|
curr.map((car) => ({
|
|||
|
|
...car,
|
|||
|
|
sourceUpdatedAt: time,
|
|||
|
|
syncStatus: "synced",
|
|||
|
|
imageCount: car.imageCount || 4,
|
|||
|
|
}))
|
|||
|
|
)
|
|||
|
|
setSyncLogs((curr) => [
|
|||
|
|
{ id: String(Date.now()), time, status: "success", message: "手动同步完成：4 个车型已更新" },
|
|||
|
|
...curr,
|
|||
|
|
])
|
|||
|
|
onAddAuditLog("内容运营专员执行官网车型同步")
|
|||
|
|
setTimeout(() => setIsSyncing(false), 300)
|
|||
|
|
return 100
|
|||
|
|
}
|
|||
|
|
return prev + 4
|
|||
|
|
})
|
|||
|
|
}, 45)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const retryFailedSync = (logId: string) => {
|
|||
|
|
const time = nowString()
|
|||
|
|
setSyncLogs((curr) =>
|
|||
|
|
curr.map((log) =>
|
|||
|
|
log.id === logId ? { ...log, status: "success", time, message: `${log.message} -> 已重试成功` } : log
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
setSourceCars((curr) =>
|
|||
|
|
curr.map((car) => (car.syncStatus === "error" ? { ...car, syncStatus: "synced", sourceUpdatedAt: time, imageCount: 4 } : car))
|
|||
|
|
)
|
|||
|
|
onAddAuditLog("项目与运维负责人重试官网同步失败任务")
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col gap-6 p-8">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="flex flex-col gap-1">
|
|||
|
|
<h1 className="text-3xl font-bold tracking-tight">车型库（官网同步源）</h1>
|
|||
|
|
<p className="text-muted-foreground">本页仅管理官网同步原始数据。编辑、审核、发布请前往“小程序内容库”。</p>
|
|||
|
|
</div>
|
|||
|
|
<Button onClick={handleSync} disabled={isSyncing} className="bg-audi-black hover:bg-audi-dark-gray text-white px-6">
|
|||
|
|
{isSyncing ? <RefreshCw className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
|
|||
|
|
从官网同步
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{isSyncing && (
|
|||
|
|
<Card className="border-audi-red/20 bg-audi-red/5">
|
|||
|
|
<CardContent className="pt-6">
|
|||
|
|
<div className="flex flex-col gap-2">
|
|||
|
|
<div className="flex items-center justify-between text-sm">
|
|||
|
|
<span className="font-medium text-audi-red">正在同步官网车型素材...</span>
|
|||
|
|
<span className="text-muted-foreground">{Math.round(progress)}%</span>
|
|||
|
|
</div>
|
|||
|
|
<Progress value={progress} className="h-2 bg-audi-red/10" />
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<Card className="border-none shadow-sm bg-white">
|
|||
|
|
<CardHeader className="pb-3">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<CardTitle className="text-lg font-bold">官网车型列表</CardTitle>
|
|||
|
|
<Badge variant="outline" className="text-xs">Source Entity: SourceCar</Badge>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2 w-full max-w-sm">
|
|||
|
|
<Search className="h-4 w-4 text-muted-foreground absolute ml-3" />
|
|||
|
|
<Input
|
|||
|
|
value={query}
|
|||
|
|
onChange={(e) => setQuery(e.target.value)}
|
|||
|
|
placeholder="搜索官网车型名称..."
|
|||
|
|
className="pl-9 bg-gray-50/50 border-none"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent>
|
|||
|
|
<Table>
|
|||
|
|
<TableHeader>
|
|||
|
|
<TableRow className="hover:bg-transparent border-b border-gray-100">
|
|||
|
|
<TableHead className="font-bold text-audi-black">车型名称</TableHead>
|
|||
|
|
<TableHead className="font-bold text-audi-black">官网文案</TableHead>
|
|||
|
|
<TableHead className="font-bold text-audi-black">图片数量</TableHead>
|
|||
|
|
<TableHead className="font-bold text-audi-black">同步状态</TableHead>
|
|||
|
|
<TableHead className="font-bold text-audi-black">最近同步</TableHead>
|
|||
|
|
<TableHead className="text-right font-bold text-audi-black">操作</TableHead>
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHeader>
|
|||
|
|
<TableBody>
|
|||
|
|
{filtered.map((car) => (
|
|||
|
|
<TableRow key={car.id} className="hover:bg-gray-50/50 border-b border-gray-50 transition-colors">
|
|||
|
|
<TableCell className="font-medium">{car.name}</TableCell>
|
|||
|
|
<TableCell className="text-muted-foreground">{car.officialTagline}</TableCell>
|
|||
|
|
<TableCell>{car.imageCount} 张</TableCell>
|
|||
|
|
<TableCell>{syncBadge(car.syncStatus)}</TableCell>
|
|||
|
|
<TableCell className="text-muted-foreground text-xs">{car.sourceUpdatedAt}</TableCell>
|
|||
|
|
<TableCell className="text-right">
|
|||
|
|
{car.syncStatus === "synced" ? (
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="outline"
|
|||
|
|
onClick={() => {
|
|||
|
|
onCreateContent?.(car.id, car.name)
|
|||
|
|
onAddAuditLog(`内容运营专员基于官网 ${car.name} 新建内容草稿`)
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Plus className="mr-1 h-3.5 w-3.5" />新建内容
|
|||
|
|
</Button>
|
|||
|
|
) : (
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="outline"
|
|||
|
|
disabled
|
|||
|
|
title={car.syncStatus === "pending" ? "车型待同步，完成同步后可新建内容" : "车型同步失败，请先重试同步"}
|
|||
|
|
>
|
|||
|
|
<Plus className="mr-1 h-3.5 w-3.5" />新建内容
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
))}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card className="border-none shadow-sm bg-white">
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle className="text-lg font-bold">同步记录</CardTitle>
|
|||
|
|
<CardDescription>同步异常可重试，重试结果将写入本页日志。</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-2">
|
|||
|
|
{syncLogs.map((log) => (
|
|||
|
|
<div key={log.id} className="flex items-center gap-3 rounded-lg border p-3 text-sm">
|
|||
|
|
{log.status === "success" ? (
|
|||
|
|
<CheckCircle2 className="h-4 w-4 text-emerald-600" />
|
|||
|
|
) : (
|
|||
|
|
<AlertCircle className="h-4 w-4 text-rose-600" />
|
|||
|
|
)}
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<p className="font-medium">{log.message}</p>
|
|||
|
|
<p className="text-xs text-muted-foreground">{log.time}</p>
|
|||
|
|
</div>
|
|||
|
|
{log.status === "failed" && (
|
|||
|
|
<Button size="sm" variant="outline" onClick={() => retryFailedSync(log.id)}>
|
|||
|
|
<RefreshCw className="mr-1 h-3.5 w-3.5" />重试
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|