9a0b16a8f1
- 需求模块：完整 CRUD、状态流转（采纳/拒绝/关闭）、详情抽屉、产品→项目级联选择 - 加班记录：产品→项目→版本三级联动、月份筛选（MonthPicker）、CSV 导出 - 成员管理：左右布局（部门树+成员列表）、手机号脱敏、初始密码自动生成及规则设置 - 角色管理：卡片列表、系统角色保护、CRUD - 通用组件：FilterSelect 下拉、MonthPicker 月份选择器、Pagination 分页 - 样式统一：状态标签加 border、日期输入现代化、筛选组件风格一致 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-[13px] font-semibold text-[var(--ink)]">{product.name}</h3>
|
|
<p className="mt-1 line-clamp-2 text-[12px] 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>
|
|
);
|
|
}
|