55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
"use client";
|
||
|
||
import { ArrowRight, Database, Sparkles } from "lucide-react";
|
||
|
||
import { Badge } from "@/components/ui/Badge";
|
||
import type { ToolDescriptorView } from "@/lib/api/types";
|
||
import { isLegacyTool } from "@/lib/toolbox/toolbox";
|
||
import { cardClass } from "@/lib/ui/variants";
|
||
|
||
interface ToolCardProps {
|
||
tool: ToolDescriptorView;
|
||
// 点击：legacy 工具导航到现有页面；新工具开 GeneratorRunner。
|
||
onOpen: (tool: ToolDescriptorView) => void;
|
||
}
|
||
|
||
// 工具箱卡片（对齐 ProjectCard 纸感视觉）：标题 + 副标题 + 题材徽标 + NEW/可入库标。
|
||
// 纯展示；点击交由 ToolboxPage 分派（legacy 跳转 / 新工具开 runner）。
|
||
export function ToolCard({ tool, onOpen }: ToolCardProps) {
|
||
const legacy = isLegacyTool(tool);
|
||
// legacy 工具跳现有页面；新工具进结构化预览流，提示语据此分支（不暴露内部 key）。
|
||
const hint = legacy
|
||
? "前往现有页面"
|
||
: `${tool.input_fields?.[0]?.label ?? "需求"} → 结构化预览`;
|
||
return (
|
||
<button
|
||
type="button"
|
||
onClick={() => onOpen(tool)}
|
||
className={cardClass(
|
||
"group flex h-full min-h-[164px] flex-col p-5 text-left motion-safe:transition-colors hover:border-cinnabar focus-visible:border-cinnabar focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cinnabar/30",
|
||
)}
|
||
>
|
||
<div className="mb-2 flex flex-wrap items-center gap-2">
|
||
<h2 className="font-serif text-xl text-ink">{tool.title}</h2>
|
||
{tool.genre ? <Badge>{tool.genre}</Badge> : null}
|
||
{tool.is_legacy ? null : <Badge variant="accent">新</Badge>}
|
||
{tool.ingestable ? (
|
||
<Badge variant="info">
|
||
<Database className="h-3 w-3" aria-hidden="true" />
|
||
可入库
|
||
</Badge>
|
||
) : null}
|
||
</div>
|
||
<p className="line-clamp-2 text-sm text-ink-soft">{tool.subtitle}</p>
|
||
<div className="mt-auto flex items-center gap-2 pt-4 text-xs text-ink-soft">
|
||
<Sparkles className="h-3.5 w-3.5 text-cinnabar" aria-hidden="true" />
|
||
<span className="truncate">{hint}</span>
|
||
<ArrowRight
|
||
className="ml-auto h-3.5 w-3.5 text-cinnabar opacity-0 motion-safe:transition-opacity group-hover:opacity-100"
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
</button>
|
||
);
|
||
}
|