6045cbe6ad
- 采用Clean Modernity设计哲学 - 优化视觉层次和间距 - 使用indigo/violet渐变主题色 - 简化模式切换按钮 - 美化复选框和下拉选择框 - 添加平滑动画效果 - 自定义滚动条样式 - 更新docs/popup-design-philosophy.md Co-Authored-By: Claude <noreply@anthropic.com>
65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
interface ExtractButtonProps {
|
|
loading: boolean;
|
|
onExtract: () => void;
|
|
mode: 'auto' | 'selection';
|
|
onModeChange: (mode: 'auto' | 'selection') => void;
|
|
}
|
|
|
|
export function ExtractButton({ loading, onExtract, mode, onModeChange }: ExtractButtonProps) {
|
|
return (
|
|
<div className="space-y-3">
|
|
{/* 提取模式切换 */}
|
|
<div className="flex gap-1 p-1 bg-gray-100 dark:bg-gray-800/50 rounded-lg">
|
|
<button
|
|
onClick={() => onModeChange('auto')}
|
|
className={`flex-1 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
|
|
mode === 'auto'
|
|
? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
|
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
|
}`}
|
|
>
|
|
自动提取
|
|
</button>
|
|
<button
|
|
onClick={() => onModeChange('selection')}
|
|
className={`flex-1 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
|
|
mode === 'selection'
|
|
? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
|
|
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
|
|
}`}
|
|
>
|
|
选择区域
|
|
</button>
|
|
</div>
|
|
|
|
{/* 主提取按钮 */}
|
|
<button
|
|
onClick={onExtract}
|
|
disabled={loading}
|
|
className={`w-full py-3 px-4 rounded-xl font-medium text-white transition-all duration-200 ${
|
|
loading
|
|
? 'bg-gray-300 dark:bg-gray-600 cursor-not-allowed'
|
|
: 'bg-gradient-to-r from-indigo-500 to-violet-600 hover:from-indigo-600 hover:to-violet-700 shadow-lg shadow-indigo-500/30 hover:shadow-indigo-500/40 active:scale-[0.98]'
|
|
}`}
|
|
>
|
|
{loading ? (
|
|
<span className="flex items-center justify-center gap-2">
|
|
<svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
</svg>
|
|
提取中...
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center justify-center gap-2">
|
|
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
提取并导出 Markdown
|
|
</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|