feat: modernize frontend architecture with professional UI/UX design
Complete redesign of frontend interface with focus on usability, visual hierarchy, and professional appearance: **Design System:** - Implemented clean blue color theme (#3B82F6) with professional palette - Created consistent spacing, shadows, and typography system - Added reusable utility classes (page-header, section, status-badge-*) - Removed excessive gradients and decorative effects **Layout Architecture:** - Redesigned main layout with 256px sidebar navigation - Sidebar includes logo, navigation with descriptions, and user profile - Main content area with search bar and scrollable content - Replaced horizontal navigation with vertical sidebar pattern **Page Redesigns:** 1. LoginPage: Split-screen design with branding (left) and clean form (right) - Feature highlights with icons and statistics - Mobile responsive design - Professional gradient background with subtle pattern 2. UploadPage: Added 3-step visual progress indicator - Better file organization with summary and status badges - Clear action bar with confirmation message - Improved file list presentation 3. ProcessingPage: Enhanced progress visualization - Large progress bar with percentage display - 4-column stats grid (Completed, Processing, Failed, Total) - Clean file status list with processing times 4. ResultsPage: Improved 5-column layout (2 for list, 3 for preview) - Added stats cards for accuracy, processing time, and text blocks - Better preview panel with detailed metrics - Export and translate action buttons 5. ExportPage: Better organization with 2-column layout - Visual format selection with icons (TXT, JSON, Excel, Markdown, PDF) - Improved form controls and option organization - Sticky preview sidebar showing current configuration **Component Updates:** - Updated Button component with proper variants - Enhanced Card component with hover effects - Maintained FileUpload component functionality - Added lucide-react for modern iconography **Technical Improvements:** - Fixed Tailwind CSS v4 compatibility issues with @apply - Removed decorative animations in favor of functional ones - Improved accessibility with proper labels and ARIA attributes - Better color contrast and readability This redesign transforms the interface from a basic layout to a professional, enterprise-ready application with clear visual hierarchy and excellent usability. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
beabigegg
@@ -9,6 +9,7 @@ import { Badge } from '@/components/ui/badge'
|
||||
import { useToast } from '@/components/ui/toast'
|
||||
import { useUploadStore } from '@/store/uploadStore'
|
||||
import { apiClient } from '@/services/api'
|
||||
import { Play, CheckCircle, FileText, AlertCircle, Clock, Activity, Loader2, TrendingUp } from 'lucide-react'
|
||||
|
||||
export default function ProcessingPage() {
|
||||
const { t } = useTranslation()
|
||||
@@ -84,16 +85,24 @@ export default function ProcessingPage() {
|
||||
// Show helpful message when no batch is selected
|
||||
if (!batchId) {
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto mt-12">
|
||||
<Card>
|
||||
<div className="flex items-center justify-center min-h-[60vh]">
|
||||
<Card className="max-w-md text-center">
|
||||
<CardHeader>
|
||||
<CardTitle>{t('processing.title')}</CardTitle>
|
||||
<div className="flex justify-center mb-4">
|
||||
<div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center">
|
||||
<AlertCircle className="w-8 h-8 text-muted-foreground" />
|
||||
</div>
|
||||
</div>
|
||||
<CardTitle className="text-xl">{t('processing.title')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-center space-y-4">
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-muted-foreground">
|
||||
{t('processing.noBatchMessage', { defaultValue: '尚未選擇任何批次。請先上傳檔案以建立批次。' })}
|
||||
</p>
|
||||
<Button onClick={() => navigate('/upload')}>
|
||||
<Button
|
||||
onClick={() => navigate('/upload')}
|
||||
size="lg"
|
||||
>
|
||||
{t('processing.goToUpload', { defaultValue: '前往上傳頁面' })}
|
||||
</Button>
|
||||
</CardContent>
|
||||
@@ -107,58 +116,150 @@ export default function ProcessingPage() {
|
||||
const isPending = !batchStatus || batchStatus.batch.status === 'pending'
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-foreground mb-2">{t('processing.title')}</h1>
|
||||
<p className="text-muted-foreground">
|
||||
批次 ID: {batchId} - 共 {files.length} 個檔案
|
||||
</p>
|
||||
<div className="space-y-6">
|
||||
{/* Page Header */}
|
||||
<div className="page-header">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="page-title">{t('processing.title')}</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
批次 ID: <span className="font-mono text-primary">{batchId}</span> · 共 {files.length} 個檔案
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
{isCompleted && (
|
||||
<div className="flex items-center gap-2 text-success">
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
<span className="font-semibold">處理完成</span>
|
||||
</div>
|
||||
)}
|
||||
{isProcessing && (
|
||||
<div className="flex items-center gap-2 text-primary">
|
||||
<Loader2 className="w-6 h-6 animate-spin" />
|
||||
<span className="font-semibold">處理中</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overall Progress */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle>{t('processing.progress')}</CardTitle>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<Activity className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<CardTitle>{t('processing.progress')}</CardTitle>
|
||||
</div>
|
||||
{batchStatus && getStatusBadge(batchStatus.batch.status)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<CardContent className="space-y-6">
|
||||
{/* Progress bar */}
|
||||
<div>
|
||||
<div className="flex justify-between text-sm mb-2">
|
||||
<span className="text-muted-foreground">{t('processing.status')}</span>
|
||||
<span className="font-medium">
|
||||
<div className="flex justify-between text-sm mb-3">
|
||||
<span className="text-muted-foreground font-medium">{t('processing.status')}</span>
|
||||
<span className="font-bold text-xl text-primary">
|
||||
{batchStatus?.batch.progress_percentage || 0}%
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={batchStatus?.batch.progress_percentage || 0} max={100} />
|
||||
<Progress value={batchStatus?.batch.progress_percentage || 0} max={100} className="h-4" />
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
{batchStatus && (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{t('processing.filesProcessed', {
|
||||
processed: batchStatus.files.filter((f) => f.status === 'completed').length,
|
||||
total: batchStatus.files.length,
|
||||
})}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="p-4 bg-muted/30 rounded-lg border border-border">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-success/10 rounded-lg">
|
||||
<CheckCircle className="w-5 h-5 text-success" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground mb-0.5">已完成</p>
|
||||
<p className="text-2xl font-bold text-foreground">
|
||||
{batchStatus.files.filter((f) => f.status === 'completed').length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-muted/30 rounded-lg border border-border">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<Loader2 className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground mb-0.5">處理中</p>
|
||||
<p className="text-2xl font-bold text-foreground">
|
||||
{batchStatus.files.filter((f) => f.status === 'processing').length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-muted/30 rounded-lg border border-border">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-destructive/10 rounded-lg">
|
||||
<AlertCircle className="w-5 h-5 text-destructive" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground mb-0.5">失敗</p>
|
||||
<p className="text-2xl font-bold text-foreground">
|
||||
{batchStatus.files.filter((f) => f.status === 'failed').length}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-muted/30 rounded-lg border border-border">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-muted rounded-lg">
|
||||
<FileText className="w-5 h-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground mb-0.5">總計</p>
|
||||
<p className="text-2xl font-bold text-foreground">{batchStatus.files.length}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-3">
|
||||
{isPending && (
|
||||
<Button
|
||||
onClick={handleStartProcessing}
|
||||
disabled={processOCRMutation.isPending}
|
||||
>
|
||||
{processOCRMutation.isPending
|
||||
? t('processing.processing')
|
||||
: t('processing.startProcessing')}
|
||||
</Button>
|
||||
)}
|
||||
{/* Action buttons */}
|
||||
{(isPending || isCompleted) && (
|
||||
<div className="flex gap-3 pt-4 border-t border-border">
|
||||
{isPending && (
|
||||
<Button
|
||||
onClick={handleStartProcessing}
|
||||
disabled={processOCRMutation.isPending}
|
||||
className="gap-2"
|
||||
size="lg"
|
||||
>
|
||||
{processOCRMutation.isPending ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
{t('processing.processing')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Play className="w-4 h-4" />
|
||||
{t('processing.startProcessing')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{isCompleted && (
|
||||
<Button onClick={handleViewResults}>{t('common.next')}</Button>
|
||||
)}
|
||||
</div>
|
||||
{isCompleted && (
|
||||
<Button
|
||||
onClick={handleViewResults}
|
||||
className="gap-2"
|
||||
size="lg"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
{t('common.next')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -166,27 +267,56 @@ export default function ProcessingPage() {
|
||||
{batchStatus && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>檔案處理狀態</CardTitle>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<FileText className="w-5 h-5 text-primary" />
|
||||
</div>
|
||||
<CardTitle>檔案處理狀態</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
{batchStatus.files.map((file) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className="flex items-center justify-between p-3 bg-muted rounded-md"
|
||||
className="flex items-center justify-between p-4 rounded-lg border border-border hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{file.filename}
|
||||
</p>
|
||||
{file.processing_time && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
處理時間: {file.processing_time.toFixed(2)}s
|
||||
<div className="flex items-center gap-4 flex-1 min-w-0">
|
||||
<div className={`p-2 rounded-lg ${
|
||||
file.status === 'completed' ? 'bg-success/10' :
|
||||
file.status === 'processing' ? 'bg-primary/10' :
|
||||
file.status === 'failed' ? 'bg-destructive/10' :
|
||||
'bg-muted'
|
||||
}`}>
|
||||
{file.status === 'completed' ? (
|
||||
<CheckCircle className="w-5 h-5 text-success" />
|
||||
) : file.status === 'processing' ? (
|
||||
<Loader2 className="w-5 h-5 text-primary animate-spin" />
|
||||
) : file.status === 'failed' ? (
|
||||
<AlertCircle className="w-5 h-5 text-destructive" />
|
||||
) : (
|
||||
<FileText className="w-5 h-5 text-muted-foreground" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{file.filename}
|
||||
</p>
|
||||
)}
|
||||
{file.error && (
|
||||
<p className="text-xs text-destructive">{file.error}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
{file.processing_time && (
|
||||
<p className="text-xs text-muted-foreground flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
處理時間: {file.processing_time.toFixed(2)}s
|
||||
</p>
|
||||
)}
|
||||
{file.error && (
|
||||
<p className="text-xs text-destructive flex items-center gap-1">
|
||||
<AlertCircle className="w-3 h-3" />
|
||||
{file.error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{getStatusBadge(file.status)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user