55 lines
1.7 KiB
JavaScript
55 lines
1.7 KiB
JavaScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
|
export default function ScanProgressModal({ scanProgress, onCancel }) {
|
|
return (
|
|
<motion.div
|
|
className="modal-overlay"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="识别进度"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
className="glass card modal"
|
|
style={{ width: 320, maxWidth: '90vw', textAlign: 'center', padding: '24px' }}
|
|
>
|
|
<div style={{ marginBottom: 16 }}>
|
|
<div className="loading-spinner" style={{
|
|
width: 40,
|
|
height: 40,
|
|
border: '3px solid var(--muted)',
|
|
borderTopColor: 'var(--primary)',
|
|
borderRadius: '50%',
|
|
margin: '0 auto',
|
|
animation: 'spin 1s linear infinite'
|
|
}} />
|
|
</div>
|
|
<div className="title" style={{ justifyContent: 'center', marginBottom: 8 }}>
|
|
{scanProgress.stage === 'verify' ? '正在验证基金…' : '正在识别中…'}
|
|
</div>
|
|
{scanProgress.total > 0 && (
|
|
<div className="muted" style={{ marginBottom: 20 }}>
|
|
{scanProgress.stage === 'verify'
|
|
? `已验证 ${scanProgress.current} / ${scanProgress.total} 只基金`
|
|
: `已处理 ${scanProgress.current} / ${scanProgress.total} 张图片`}
|
|
</div>
|
|
)}
|
|
<button
|
|
className="button danger"
|
|
onClick={onCancel}
|
|
style={{ width: '100%' }}
|
|
>
|
|
终止识别
|
|
</button>
|
|
</motion.div>
|
|
</motion.div>
|
|
);
|
|
}
|