优化 Loading 状态

This commit is contained in:
xianyi
2025-12-15 16:26:19 +08:00
parent 263ab18aed
commit c2b9819dd8
2 changed files with 25 additions and 418 deletions

View File

@@ -7,9 +7,10 @@ import { Button, SignaturePad } from '../ui';
interface ExamSignPanelProps {
examId?: number;
onBusyChange?: (busy: boolean) => void;
}
export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
export const ExamSignPanel = ({ examId, onBusyChange }: ExamSignPanelProps) => {
const [idCardFile, setIdCardFile] = useState<File | null>(null);
const [previewImage, setPreviewImage] = useState<string | null>(null);
const [showImagePreview, setShowImagePreview] = useState(false);
@@ -25,6 +26,12 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
const [submitLoading, setSubmitLoading] = useState(false);
const [submitMessage, setSubmitMessage] = useState<string | null>(null);
const [signedCombinationCodes, setSignedCombinationCodes] = useState<number[]>([]);
const busy = signLoading || submitLoading || consentLoading;
useEffect(() => {
onBusyChange?.(busy);
return () => onBusyChange?.(false);
}, [busy, onBusyChange]);
const SIGN_STORAGE_KEY = 'yh_signed_consents';
@@ -205,7 +212,7 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
<div className='font-medium'></div>
<div className='text-xs text-gray-500'></div>
<div className='flex items-center gap-3'>
<Button className='py-1.5 px-3' onClick={handlePickFile} disabled={signLoading}>
<Button className='py-1.5 px-3' onClick={handlePickFile} disabled={busy}>
{idCardFile ? '重新拍照' : '拍照'}
</Button>
<input
@@ -224,7 +231,7 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
<img src={previewImage} alt='身份证预览' className='w-full h-full object-cover' />
</div>
)}
<Button className='py-1.5 px-4 flex-1' onClick={handleSign} disabled={signLoading || !idCardFile}>
<Button className='py-1.5 px-4 flex-1' onClick={handleSign} disabled={busy || !idCardFile}>
{signLoading ? '签到中...' : '签到'}
</Button>
</div>
@@ -266,7 +273,7 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
/>
)}
</div>
<Button className='py-1.5 px-3' onClick={() => setPreviewPdf(item)}>
<Button className='py-1.5 px-3' onClick={() => !busy && setPreviewPdf(item)} disabled={busy}>
</Button>
</div>
@@ -280,10 +287,10 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
<div className='flex items-center justify-between p-4 text-white bg-gray-900/80'>
<div className='text-sm font-medium truncate pr-3'>{previewPdf.pdf_name}</div>
<div className='flex items-center gap-2'>
<Button className='py-1 px-3' onClick={() => setShowSignature(true)}>
<Button className='py-1 px-3' onClick={() => !busy && setShowSignature(true)} disabled={busy}>
</Button>
<Button className='py-1 px-3' onClick={() => setPreviewPdf(null)}>
<Button className='py-1 px-3' onClick={() => !busy && setPreviewPdf(null)} disabled={busy}>
</Button>
</div>
@@ -299,7 +306,7 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
<div className='flex items-center justify之间'>
<div className='text-base font-semibold text-gray-900'></div>
<div className='flex items-center gap-2'>
<Button className='py-1 px-3' onClick={() => setShowSignature(false)}>
<Button className='py-1 px-3' onClick={() => setShowSignature(false)} disabled={busy}>
</Button>
</div>
@@ -311,7 +318,7 @@ export const ExamSignPanel = ({ examId }: ExamSignPanelProps) => {
/>
<div className='flex items-center justify-between px-3 py-2 bg-gray-50 border-t'>
<div className='text-xs text-gray-500'></div>
<Button className='ui7-clear-button py-1 px-3' onClick={() => signaturePadRef.current?.clear()}>
<Button className='ui7-clear-button py-1 px-3' onClick={() => signaturePadRef.current?.clear()} disabled={submitLoading}>
</Button>
</div>