90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import Button from '../ui/Button';
|
|
import Card from '../ui/Card';
|
|
|
|
export interface SchemeData {
|
|
id: string;
|
|
title: string | null;
|
|
weaponName: string | null;
|
|
category: string | null;
|
|
viewsCount: number;
|
|
downloadsCount: number;
|
|
likesCount: number;
|
|
favoritesCount: number;
|
|
price: number;
|
|
isOfficial: boolean;
|
|
user?: { username: string };
|
|
}
|
|
|
|
interface SchemeCardProps {
|
|
scheme: SchemeData;
|
|
isFavorited?: boolean;
|
|
onFavorite?: (id: string) => void;
|
|
onUse?: (id: string) => void;
|
|
onClick?: (id: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export default function SchemeCard({ scheme, isFavorited, onFavorite, onUse, onClick, className = '' }: SchemeCardProps) {
|
|
return (
|
|
<Card
|
|
hoverable
|
|
onClick={() => onClick?.(scheme.id)}
|
|
className={`flex flex-col p-4 gap-2 ${className}`}
|
|
serial={scheme.isOfficial ? 'OFFICIAL' : undefined}
|
|
>
|
|
{/* 标题 */}
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="min-w-0 flex-1">
|
|
<h3 className="text-[15px] font-bold tracking-[0.08em] uppercase text-[#e0e0e0] truncate">
|
|
{scheme.title || '未命名方案'}
|
|
</h3>
|
|
<p className="text-[15px] font-mono text-[#555] mt-0.5">{scheme.weaponName || scheme.category || '通用'}</p>
|
|
</div>
|
|
{scheme.isOfficial && (
|
|
<span className="text-[15px] font-semibold tracking-[0.1em] uppercase text-[#ff4500] border border-[#ff4500]/30 px-1 py-0.5">
|
|
官方
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* 作者 */}
|
|
{scheme.user?.username && (
|
|
<p className="text-[15px] font-mono text-[#555]">作者: {scheme.user.username}</p>
|
|
)}
|
|
|
|
{/* 价格 */}
|
|
{scheme.price > 0 && (
|
|
<p className="text-[15px] font-mono text-[#555]">💰 {scheme.price}</p>
|
|
)}
|
|
|
|
{/* 操作按钮 */}
|
|
<div className="flex items-center gap-2 mt-auto pt-1 border-t border-[#333]">
|
|
<button
|
|
onClick={e => { e.stopPropagation(); onFavorite?.(scheme.id); }}
|
|
className={`text-[15px] font-mono px-2 py-1 border transition-colors duration-75
|
|
${isFavorited
|
|
? 'border-[#ff4500] text-[#ff4500]'
|
|
: 'border-[#333] text-[#555] hover:border-[#555]'}`}
|
|
>
|
|
{isFavorited ? '★' : '☆'} {scheme.favoritesCount}
|
|
</button>
|
|
<button
|
|
onClick={e => { e.stopPropagation(); onUse?.(scheme.id); }}
|
|
className="ml-auto text-[15px] font-semibold tracking-[0.1em] uppercase text-[#888] border border-[#333] px-2 py-1
|
|
hover:border-[#ff4500] hover:text-[#ff4500] transition-colors duration-75"
|
|
>
|
|
使用
|
|
</button>
|
|
</div>
|
|
|
|
{/* 统计数据 */}
|
|
<div className="flex items-center gap-4 text-[15px] font-mono text-[#555]">
|
|
<span>👁 {scheme.viewsCount}</span>
|
|
<span>⬇ {scheme.downloadsCount}</span>
|
|
<span>👍 {scheme.likesCount}</span>
|
|
</div>
|
|
</Card>
|
|
);
|
|
}
|