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() {
|
export function useExtractor() {
|
||||||
const {
|
const {
|
||||||
isRunning,
|
isRunning,
|
||||||
|
isComplete,
|
||||||
progress,
|
progress,
|
||||||
error,
|
error,
|
||||||
logs,
|
logs,
|
||||||
setRunning,
|
setRunning,
|
||||||
setProgress,
|
setProgress,
|
||||||
setError,
|
setError,
|
||||||
|
setComplete,
|
||||||
addLog,
|
addLog,
|
||||||
clearLogs,
|
clearLogs,
|
||||||
resetState
|
resetState
|
||||||
@@ -79,6 +81,7 @@ export function useExtractor() {
|
|||||||
} finally {
|
} finally {
|
||||||
setRunning(false)
|
setRunning(false)
|
||||||
setProgress(null)
|
setProgress(null)
|
||||||
|
setComplete(true)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -87,8 +90,10 @@ export function useExtractor() {
|
|||||||
progress,
|
progress,
|
||||||
error,
|
error,
|
||||||
logs,
|
logs,
|
||||||
|
isComplete,
|
||||||
startExtraction,
|
startExtraction,
|
||||||
clearLogs,
|
clearLogs,
|
||||||
setError
|
setError,
|
||||||
|
setComplete
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import React, { useState, useEffect } from 'react'
|
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 OrderNumberInput from '../components/OrderNumberInput'
|
||||||
import { useExtractor } from '../hooks/useExtractor'
|
import { useExtractor } from '../hooks/useExtractor'
|
||||||
import LogPanel from '../components/ui/LogPanel'
|
import LogPanel from '../components/ui/LogPanel'
|
||||||
@@ -10,7 +10,8 @@ const ExtractorPage: React.FC = () => {
|
|||||||
return sessionStorage.getItem('extractor_orderNumbers') || ''
|
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(() => {
|
useEffect(() => {
|
||||||
sessionStorage.setItem('extractor_orderNumbers', orderNumbers)
|
sessionStorage.setItem('extractor_orderNumbers', orderNumbers)
|
||||||
@@ -75,6 +76,13 @@ const ExtractorPage: React.FC = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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 && (
|
{isRunning && progress && (
|
||||||
<SegmentedProgressBar
|
<SegmentedProgressBar
|
||||||
progress={progress.progress}
|
progress={progress.progress}
|
||||||
|
|||||||
@@ -28,12 +28,14 @@ export interface ExtractorState {
|
|||||||
progress: ExtractionProgress | null
|
progress: ExtractionProgress | null
|
||||||
error: string | null
|
error: string | null
|
||||||
logs: LogEntry[]
|
logs: LogEntry[]
|
||||||
|
isComplete: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface ExtractorActions {
|
export interface ExtractorActions {
|
||||||
setRunning: (isRunning: boolean) => void
|
setRunning: (isRunning: boolean) => void
|
||||||
setProgress: (progress: ExtractionProgress | null) => void
|
setProgress: (progress: ExtractionProgress | null) => void
|
||||||
setError: (error: string | null) => void
|
setError: (error: string | null) => void
|
||||||
|
setComplete: (isComplete: boolean) => void
|
||||||
addLog: (level: LogLevel, message: string) => void
|
addLog: (level: LogLevel, message: string) => void
|
||||||
clearLogs: () => void
|
clearLogs: () => void
|
||||||
resetState: () => void
|
resetState: () => void
|
||||||
@@ -43,7 +45,8 @@ const initialState: ExtractorState = {
|
|||||||
isRunning: false,
|
isRunning: false,
|
||||||
progress: null,
|
progress: null,
|
||||||
error: null,
|
error: null,
|
||||||
logs: []
|
logs: [],
|
||||||
|
isComplete: false
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useExtractorStore = create<ExtractorState & ExtractorActions>((set) => ({
|
export const useExtractorStore = create<ExtractorState & ExtractorActions>((set) => ({
|
||||||
@@ -55,6 +58,8 @@ export const useExtractorStore = create<ExtractorState & ExtractorActions>((set)
|
|||||||
|
|
||||||
setError: (error: string | null) => set({ error }),
|
setError: (error: string | null) => set({ error }),
|
||||||
|
|
||||||
|
setComplete: (isComplete: boolean) => set({ isComplete }),
|
||||||
|
|
||||||
addLog: (level: LogLevel, message: string) =>
|
addLog: (level: LogLevel, message: string) =>
|
||||||
set((state) => {
|
set((state) => {
|
||||||
const timestamp = new Date().toLocaleTimeString('zh-CN', { hour12: false })
|
const timestamp = new Date().toLocaleTimeString('zh-CN', { hour12: false })
|
||||||
|
|||||||
Reference in New Issue
Block a user