fix: show elapsed time in execution result dialog

- Remove setStartTime(null) from finally block to preserve start time for result display
- Add resetStartTime function to useCleaner hook
- Call resetStartTime when execution report dialog closes
- Add useEffect to update timer when execution completes

Now the total elapsed time (总耗时) will be shown in the result dialog after execution completes.
This commit is contained in:
Misaka_Company
2026-03-17 14:50:57 +08:00
parent b289fb9624
commit defeb01808
3 changed files with 66 additions and 2 deletions

View File

@@ -61,6 +61,7 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
const showProgress = isExecuting && progress
const isProgressing = !!showProgress
// Update timer during progress
React.useEffect(() => {
if (!showProgress || !startTime) return
@@ -71,6 +72,27 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
return () => clearInterval(interval)
}, [showProgress, startTime])
// Update time when execution completes
React.useEffect(() => {
if (showProgress === false && startTime && isExecuting === false) {
setNow(Date.now())
}
}, [showProgress, isExecuting, startTime])
const elapsedTime = React.useMemo(() => {
if (!startTime) return null
const elapsedMs = now - startTime
const elapsedSeconds = Math.floor(elapsedMs / 1000)
const minutes = Math.floor(elapsedSeconds / 60)
const seconds = elapsedSeconds % 60
return {
totalSeconds: elapsedSeconds,
formatted: minutes > 0 ? `${minutes}${seconds}` : `${seconds}`
}
}, [startTime, now])
const estimatedTime = React.useMemo(() => {
if (!showProgress || !startTime || !progress) return null
@@ -204,6 +226,15 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
</div>
)}
{elapsedTime && (
<div className="flex flex-col items-center gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200 mb-2">
<div className="flex items-center gap-2 text-sm">
<span className="text-gray-600"></span>
<span className="font-semibold text-blue-600">{elapsedTime.formatted}</span>
</div>
</div>
)}
{estimatedTime && (
<div className="flex flex-col items-center gap-2 p-3 bg-green-50 rounded-lg border border-green-200">
<div className="flex items-center gap-2 text-sm">
@@ -307,6 +338,29 @@ export const ExecutionReportDialog: React.FC<ExecutionReportDialogProps> = ({
)}
</div>
{elapsedTime && (
<div className="flex items-center justify-center gap-2 p-3 bg-blue-50 rounded-lg border border-blue-200 text-blue-700 text-sm mb-3">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="flex-shrink-0"
>
<circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 16 14" />
</svg>
<span>
<span className="font-semibold">{elapsedTime.formatted}</span>
</span>
</div>
)}
{hasErrors && (
<div className="mt-4 pt-4 border-t border-gray-200">
<div className="text-sm font-semibold text-red-600 mb-2"></div>

View File

@@ -471,10 +471,15 @@ export function useCleaner() {
setIsRunning(false)
setIsExecuting(false)
setProgress(null)
setStartTime(null)
// Note: Don't clear startTime here - it's needed for the execution report dialog
// startTime will be reset when the dialog closes and a new execution starts
}
}
const resetStartTime = useCallback(() => {
setStartTime(null)
}, [])
const handleExportResults = async () => {
if (filteredResults.length === 0) {
showWarning('没有数据可导出')
@@ -554,6 +559,7 @@ export function useCleaner() {
handleAssignManagerOnSelect,
progress,
startTime,
resetStartTime,
handleValidation,
handleCheckboxToggle,
handleConfirmDeletion,

View File

@@ -64,6 +64,7 @@ const CleanerPage: React.FC = () => {
handleAssignManagerOnSelect,
progress,
startTime,
resetStartTime,
handleValidation,
handleCheckboxToggle,
handleConfirmDeletion,
@@ -509,7 +510,10 @@ const CleanerPage: React.FC = () => {
{/* Execution Report Dialog */}
<ExecutionReportDialog
isOpen={isReportDialogOpen}
onClose={() => setIsReportDialogOpen(false)}
onClose={() => {
setIsReportDialogOpen(false)
resetStartTime()
}}
ordersProcessed={reportData?.ordersProcessed}
materialsDeleted={reportData?.materialsDeleted}
materialsSkipped={reportData?.materialsSkipped}