Feat: Add extraction complete status indicator with success message
This commit is contained in:
@@ -4,12 +4,14 @@ import { useExtractorStore } from '../stores/extractorStore'
|
||||
export function useExtractor() {
|
||||
const {
|
||||
isRunning,
|
||||
isComplete,
|
||||
progress,
|
||||
error,
|
||||
logs,
|
||||
setRunning,
|
||||
setProgress,
|
||||
setError,
|
||||
setComplete,
|
||||
addLog,
|
||||
clearLogs,
|
||||
resetState
|
||||
@@ -79,6 +81,7 @@ export function useExtractor() {
|
||||
} finally {
|
||||
setRunning(false)
|
||||
setProgress(null)
|
||||
setComplete(true)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -87,8 +90,10 @@ export function useExtractor() {
|
||||
progress,
|
||||
error,
|
||||
logs,
|
||||
isComplete,
|
||||
startExtraction,
|
||||
clearLogs,
|
||||
setError
|
||||
setError,
|
||||
setComplete
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { Download, Play } from 'lucide-react'
|
||||
import { Download, Play, CheckCircle } from 'lucide-react'
|
||||
import OrderNumberInput from '../components/OrderNumberInput'
|
||||
import { useExtractor } from '../hooks/useExtractor'
|
||||
import LogPanel from '../components/ui/LogPanel'
|
||||
@@ -10,7 +10,8 @@ const ExtractorPage: React.FC = () => {
|
||||
return sessionStorage.getItem('extractor_orderNumbers') || ''
|
||||
})
|
||||
|
||||
const { isRunning, progress, error, logs, startExtraction, clearLogs, setError } = useExtractor()
|
||||
const { isRunning, progress, error, logs, startExtraction, clearLogs, setError, isComplete } =
|
||||
useExtractor()
|
||||
|
||||
useEffect(() => {
|
||||
sessionStorage.setItem('extractor_orderNumbers', orderNumbers)
|
||||
@@ -75,6 +76,13 @@ const ExtractorPage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isRunning && isComplete && (
|
||||
<div className="bg-green-50 rounded-xl p-8 flex items-center justify-center gap-4 shadow-md">
|
||||
<CheckCircle className="text-green-600" size={35} />
|
||||
<p className="text-4xl font-bold text-green-600">提取完毕</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isRunning && progress && (
|
||||
<SegmentedProgressBar
|
||||
progress={progress.progress}
|
||||
|
||||
@@ -28,12 +28,14 @@ export interface ExtractorState {
|
||||
progress: ExtractionProgress | null
|
||||
error: string | null
|
||||
logs: LogEntry[]
|
||||
isComplete: boolean
|
||||
}
|
||||
|
||||
export interface ExtractorActions {
|
||||
setRunning: (isRunning: boolean) => void
|
||||
setProgress: (progress: ExtractionProgress | null) => void
|
||||
setError: (error: string | null) => void
|
||||
setComplete: (isComplete: boolean) => void
|
||||
addLog: (level: LogLevel, message: string) => void
|
||||
clearLogs: () => void
|
||||
resetState: () => void
|
||||
@@ -43,7 +45,8 @@ const initialState: ExtractorState = {
|
||||
isRunning: false,
|
||||
progress: null,
|
||||
error: null,
|
||||
logs: []
|
||||
logs: [],
|
||||
isComplete: false
|
||||
}
|
||||
|
||||
export const useExtractorStore = create<ExtractorState & ExtractorActions>((set) => ({
|
||||
@@ -55,6 +58,8 @@ export const useExtractorStore = create<ExtractorState & ExtractorActions>((set)
|
||||
|
||||
setError: (error: string | null) => set({ error }),
|
||||
|
||||
setComplete: (isComplete: boolean) => set({ isComplete }),
|
||||
|
||||
addLog: (level: LogLevel, message: string) =>
|
||||
set((state) => {
|
||||
const timestamp = new Date().toLocaleTimeString('zh-CN', { hour12: false })
|
||||
|
||||
Reference in New Issue
Block a user