Feat: Add extraction complete status indicator with success message

This commit is contained in:
Misaka
2026-03-04 22:56:00 +08:00
parent e49191d531
commit 302018f631
3 changed files with 22 additions and 4 deletions

View File

@@ -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
}
}

View File

@@ -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}

View File

@@ -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 })