e0120c470c
- 调色板：zinc 中性色 + 冷静蓝色（#3b82f6）+ 卡片阴影 token - Sidebar：紧凑 60 宽度，加入顶部搜索框，分组导航，圆角 8px - 卡片：rounded-2xl + shadow-sm/md，留白节奏统一 - 表格：圆角卡片包裹，灰色表头小写大写字母 tracking - 表单：h-9 输入框，圆角 8px，focus ring 用半透明蓝 - 按钮分级：实心蓝（主操作）/ 边框白底（次操作）/ 暗黑实心（对比强调） - 状态徽章：ring-1 inset 内边框，色板更柔和 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { Package } from 'lucide-react';
|
|
|
|
interface ProductWithCount {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
createdAt: string | Date;
|
|
_count?: { requirements: number; projects: number };
|
|
}
|
|
|
|
interface Props {
|
|
product: ProductWithCount;
|
|
onClick: (id: string) => void;
|
|
}
|
|
|
|
export function ProductCard({ product, onClick }: Props) {
|
|
const reqCount = product._count?.requirements ?? 0;
|
|
const projCount = product._count?.projects ?? 0;
|
|
|
|
return (
|
|
<div
|
|
onClick={() => onClick(product.id)}
|
|
className="group cursor-pointer rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] p-5 transition-all hover:border-[var(--ink-muted)] hover:shadow-[var(--shadow-md)]"
|
|
>
|
|
<div className="mb-4 flex items-start gap-3">
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--accent-soft)]">
|
|
<Package className="h-[18px] w-[18px] text-[var(--accent-hover)]" strokeWidth={1.75} />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<h3 className="truncate text-[14px] font-semibold text-[var(--ink)]">{product.name}</h3>
|
|
<p className="mt-1 line-clamp-2 text-[12.5px] leading-relaxed text-[var(--ink-muted)]">
|
|
{product.description || '暂无描述'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 border-t border-[var(--line-soft)] pt-3">
|
|
<div className="flex items-baseline gap-1">
|
|
<span className="text-[13px] font-semibold tabular-nums text-[var(--ink)]">{reqCount}</span>
|
|
<span className="text-[11px] text-[var(--ink-muted)]">需求</span>
|
|
</div>
|
|
<div className="h-3 w-px bg-[var(--line)]" />
|
|
<div className="flex items-baseline gap-1">
|
|
<span className="text-[13px] font-semibold tabular-nums text-[var(--ink)]">{projCount}</span>
|
|
<span className="text-[11px] text-[var(--ink-muted)]">项目</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|