76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
|
|
export interface OptimizeItemData {
|
|
id: string;
|
|
label: string;
|
|
description: string;
|
|
category: string;
|
|
icon: string;
|
|
status: 'pending' | 'optimized' | 'restored' | 'error';
|
|
}
|
|
|
|
interface OptimizeItemProps {
|
|
item: OptimizeItemData;
|
|
onToggle: (id: string, action: 'optimize' | 'restore') => void;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
const statusStyles: Record<string, string> = {
|
|
pending: 'border-[#333]',
|
|
optimized: 'border-[#ff4500]/50 bg-[#ff4500]/5',
|
|
restored: 'border-[#333]',
|
|
error: 'border-[#cc3300]/50 bg-[#cc3300]/5',
|
|
};
|
|
|
|
const statusTextStyles: Record<string, string> = {
|
|
pending: 'text-[#555]',
|
|
optimized: 'text-[#ff4500]',
|
|
restored: 'text-[#555]',
|
|
error: 'text-[#cc3300]',
|
|
};
|
|
|
|
const statusLabels: Record<string, string> = {
|
|
pending: '待优化',
|
|
optimized: '已优化',
|
|
restored: '已恢复',
|
|
error: '失败',
|
|
};
|
|
|
|
export default function OptimizeItem({ item, onToggle, disabled }: OptimizeItemProps) {
|
|
const isOptimized = item.status === 'optimized';
|
|
|
|
return (
|
|
<div className={`border transition-colors duration-75 bg-[#1a1a1a]/60 ${statusStyles[item.status]}`}>
|
|
<div className="flex items-center gap-3 px-3 py-2.5">
|
|
<div className={`w-1.5 h-1.5 shrink-0 rounded-full ${isOptimized ? 'bg-[#ff4500]' : 'bg-[#333]'}`} />
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="material-symbols-outlined text-[14px] text-[#555]">{item.icon}</span>
|
|
<span className="text-[13px] font-semibold tracking-[0.1em] uppercase text-[#e0e0e0] truncate">
|
|
{item.label}
|
|
</span>
|
|
<span className={`text-[12px] font-mono tracking-wider px-1.5 py-[1px] border ${statusTextStyles[item.status]} border-current/30`}>
|
|
{statusLabels[item.status]}
|
|
</span>
|
|
</div>
|
|
<p className="text-[12px] text-[#555] mt-0.5 truncate">{item.description}</p>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => onToggle(item.id, isOptimized ? 'restore' : 'optimize')}
|
|
disabled={disabled || item.status === 'error'}
|
|
className={`w-[80px] shrink-0 py-2 text-[12px] font-semibold tracking-[0.1em] uppercase border transition-colors duration-75
|
|
${isOptimized
|
|
? 'border-[#555] text-[#555] hover:border-[#ff4500] hover:text-[#ff4500]'
|
|
: 'border-[#555] text-[#888] hover:border-[#ff4500] hover:text-[#ff4500]'
|
|
}
|
|
disabled:opacity-40 disabled:cursor-not-allowed`}
|
|
>
|
|
{isOptimized ? '恢复' : '优化'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|