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
@@ -2,12 +2,24 @@ import { useState } from 'react'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useMutation, useQuery } from '@tanstack/react-query'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useToast } from '@/components/ui/toast'
|
||||
import { useUploadStore } from '@/store/uploadStore'
|
||||
import { apiClient } from '@/services/api'
|
||||
import type { ExportRequest, ExportOptions } from '@/types/api'
|
||||
import {
|
||||
Download,
|
||||
FileText,
|
||||
FileJson,
|
||||
FileSpreadsheet,
|
||||
FileCode,
|
||||
FileType,
|
||||
AlertCircle,
|
||||
Settings,
|
||||
CheckCircle2,
|
||||
ArrowLeft
|
||||
} from 'lucide-react'
|
||||
|
||||
type ExportFormat = 'txt' | 'json' | 'excel' | 'markdown' | 'pdf'
|
||||
|
||||
@@ -127,19 +139,32 @@ export default function ExportPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const formatIcons = {
|
||||
txt: FileText,
|
||||
json: FileJson,
|
||||
excel: FileSpreadsheet,
|
||||
markdown: FileCode,
|
||||
pdf: FileType,
|
||||
}
|
||||
|
||||
// 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('export.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('export.title')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-center space-y-4">
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-muted-foreground">
|
||||
{t('export.noBatchMessage', { defaultValue: '尚未選擇任何批次。請先上傳並完成處理檔案。' })}
|
||||
</p>
|
||||
<Button onClick={() => navigate('/upload')}>
|
||||
<Button onClick={() => navigate('/upload')} size="lg">
|
||||
{t('export.goToUpload', { defaultValue: '前往上傳頁面' })}
|
||||
</Button>
|
||||
</CardContent>
|
||||
@@ -149,172 +174,274 @@ export default function ExportPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-foreground mb-2">{t('export.title')}</h1>
|
||||
<p className="text-muted-foreground">批次 ID: {batchId}</p>
|
||||
<div className="space-y-6">
|
||||
{/* Page Header */}
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">{t('export.title')}</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
批次 ID: <span className="font-mono text-primary">{batchId}</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Format Selection */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('export.format')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 md:grid-cols-5 gap-3">
|
||||
{(['txt', 'json', 'excel', 'markdown', 'pdf'] as ExportFormat[]).map((fmt) => (
|
||||
<button
|
||||
key={fmt}
|
||||
onClick={() => handleFormatChange(fmt)}
|
||||
className={`p-4 border rounded-lg text-center transition-colors ${
|
||||
format === fmt
|
||||
? 'border-primary bg-primary/10 text-primary font-semibold'
|
||||
: 'border-gray-200 hover:border-primary/50'
|
||||
}`}
|
||||
>
|
||||
<div className="text-sm">{t(`export.formats.${fmt}`)}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Left Column - Configuration */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
{/* Format Selection */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<FileType className="w-5 h-5" />
|
||||
{t('export.format')}
|
||||
</CardTitle>
|
||||
<CardDescription>選擇要匯出的檔案格式</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
||||
{(['txt', 'json', 'excel', 'markdown', 'pdf'] as ExportFormat[]).map((fmt) => {
|
||||
const Icon = formatIcons[fmt]
|
||||
return (
|
||||
<button
|
||||
key={fmt}
|
||||
onClick={() => handleFormatChange(fmt)}
|
||||
className={`p-4 border-2 rounded-lg transition-all ${
|
||||
format === fmt
|
||||
? 'border-primary bg-primary/10 shadow-md'
|
||||
: 'border-border hover:border-primary/50 hover:bg-muted/50'
|
||||
}`}
|
||||
>
|
||||
<Icon className={`w-6 h-6 mx-auto mb-2 ${format === fmt ? 'text-primary' : 'text-muted-foreground'}`} />
|
||||
<div className={`text-sm font-medium ${format === fmt ? 'text-primary' : 'text-foreground'}`}>
|
||||
{t(`export.formats.${fmt}`)}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Export Rules */}
|
||||
{exportRules && exportRules.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('export.rules.title')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<label className="block text-sm font-medium text-foreground">
|
||||
{t('export.rules.selectRule')}
|
||||
</label>
|
||||
<select
|
||||
value={selectedRuleId || ''}
|
||||
onChange={(e) => handleRuleChange(e.target.value ? Number(e.target.value) : undefined)}
|
||||
className="w-full px-3 py-2 border border-gray-200 rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="">無 (使用預設設定)</option>
|
||||
{exportRules.map((rule) => (
|
||||
<option key={rule.id} value={rule.id}>
|
||||
{rule.rule_name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Export Options */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('export.options.title')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Confidence Threshold */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
{t('export.options.confidenceThreshold')}: {options.confidence_threshold}
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value={options.confidence_threshold}
|
||||
onChange={(e) =>
|
||||
setOptions((prev) => ({
|
||||
...prev,
|
||||
confidence_threshold: Number(e.target.value),
|
||||
}))
|
||||
}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-muted-foreground mt-1">
|
||||
<span>0</span>
|
||||
<span>0.5</span>
|
||||
<span>1.0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Include Metadata */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="include-metadata"
|
||||
checked={options.include_metadata}
|
||||
onChange={(e) =>
|
||||
setOptions((prev) => ({
|
||||
...prev,
|
||||
include_metadata: e.target.checked,
|
||||
}))
|
||||
}
|
||||
className="w-4 h-4 border border-gray-200 rounded"
|
||||
/>
|
||||
<label htmlFor="include-metadata" className="text-sm font-medium text-foreground">
|
||||
{t('export.options.includeMetadata')}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Filename Pattern */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
{t('export.options.filenamePattern')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={options.filename_pattern}
|
||||
onChange={(e) =>
|
||||
setOptions((prev) => ({
|
||||
...prev,
|
||||
filename_pattern: e.target.value,
|
||||
}))
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-200 rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
placeholder="{filename}_ocr"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
可用變數: {'{filename}'}, {'{batch_id}'}, {'{date}'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CSS Template (PDF only) */}
|
||||
{format === 'pdf' && cssTemplates && cssTemplates.length > 0 && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
{t('export.options.cssTemplate')}
|
||||
</label>
|
||||
<select
|
||||
value={options.css_template || 'default'}
|
||||
onChange={(e) =>
|
||||
setOptions((prev) => ({
|
||||
...prev,
|
||||
css_template: e.target.value,
|
||||
}))
|
||||
}
|
||||
className="w-full px-3 py-2 border border-gray-200 rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
{cssTemplates.map((template) => (
|
||||
<option key={template.filename} value={template.filename}>
|
||||
{template.name} - {template.description}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{/* Export Rules */}
|
||||
{exportRules && exportRules.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-5 h-5" />
|
||||
{t('export.rules.title')}
|
||||
</CardTitle>
|
||||
<CardDescription>選擇預設的匯出規則</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<select
|
||||
value={selectedRuleId || ''}
|
||||
onChange={(e) => handleRuleChange(e.target.value ? Number(e.target.value) : undefined)}
|
||||
className="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
|
||||
>
|
||||
<option value="">無 (使用預設設定)</option>
|
||||
{exportRules.map((rule) => (
|
||||
<option key={rule.id} value={rule.id}>
|
||||
{rule.rule_name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Export Button */}
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button variant="outline" onClick={() => navigate('/results')}>
|
||||
{t('common.back')}
|
||||
</Button>
|
||||
<Button onClick={handleExport} disabled={exportMutation.isPending}>
|
||||
{exportMutation.isPending ? t('export.exporting') : t('export.exportButton')}
|
||||
</Button>
|
||||
{/* Export Options */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Settings className="w-5 h-5" />
|
||||
{t('export.options.title')}
|
||||
</CardTitle>
|
||||
<CardDescription>自訂匯出參數</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Confidence Threshold */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<label className="text-sm font-medium text-foreground">
|
||||
{t('export.options.confidenceThreshold')}
|
||||
</label>
|
||||
<span className="text-sm font-bold text-primary">
|
||||
{(options.confidence_threshold * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value={options.confidence_threshold}
|
||||
onChange={(e) =>
|
||||
setOptions((prev) => ({
|
||||
...prev,
|
||||
confidence_threshold: Number(e.target.value),
|
||||
}))
|
||||
}
|
||||
className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-primary"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-muted-foreground mt-2">
|
||||
<span>0%</span>
|
||||
<span>50%</span>
|
||||
<span>100%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Include Metadata */}
|
||||
<div className="flex items-center p-4 bg-muted/30 rounded-lg">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="include-metadata"
|
||||
checked={options.include_metadata}
|
||||
onChange={(e) =>
|
||||
setOptions((prev) => ({
|
||||
...prev,
|
||||
include_metadata: e.target.checked,
|
||||
}))
|
||||
}
|
||||
className="w-5 h-5 border border-border rounded accent-primary"
|
||||
/>
|
||||
<label htmlFor="include-metadata" className="ml-3 text-sm font-medium text-foreground cursor-pointer">
|
||||
{t('export.options.includeMetadata')}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Filename Pattern */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
{t('export.options.filenamePattern')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={options.filename_pattern}
|
||||
onChange={(e) =>
|
||||
setOptions((prev) => ({
|
||||
...prev,
|
||||
filename_pattern: e.target.value,
|
||||
}))
|
||||
}
|
||||
className="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors font-mono text-sm"
|
||||
placeholder="{filename}_ocr"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
可用變數: <code className="bg-muted px-1.5 py-0.5 rounded">{'{filename}'}</code>,{' '}
|
||||
<code className="bg-muted px-1.5 py-0.5 rounded">{'{batch_id}'}</code>,{' '}
|
||||
<code className="bg-muted px-1.5 py-0.5 rounded">{'{date}'}</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* CSS Template (PDF only) */}
|
||||
{format === 'pdf' && cssTemplates && cssTemplates.length > 0 && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
{t('export.options.cssTemplate')}
|
||||
</label>
|
||||
<select
|
||||
value={options.css_template || 'default'}
|
||||
onChange={(e) =>
|
||||
setOptions((prev) => ({
|
||||
...prev,
|
||||
css_template: e.target.value,
|
||||
}))
|
||||
}
|
||||
className="w-full px-4 py-3 border border-border rounded-lg bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
|
||||
>
|
||||
{cssTemplates.map((template) => (
|
||||
<option key={template.filename} value={template.filename}>
|
||||
{template.name} - {template.description}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Preview */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="sticky top-6">
|
||||
<CardHeader>
|
||||
<CardTitle>匯出預覽</CardTitle>
|
||||
<CardDescription>當前設定概覽</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="p-4 bg-muted/30 rounded-lg space-y-3">
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-1">格式</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{(() => {
|
||||
const Icon = formatIcons[format]
|
||||
return <Icon className="w-4 h-4 text-primary" />
|
||||
})()}
|
||||
<span className="text-sm font-medium text-foreground">{format.toUpperCase()}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{selectedRuleId && exportRules && (
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-1">匯出規則</div>
|
||||
<div className="text-sm font-medium text-foreground">
|
||||
{exportRules.find((r) => r.id === selectedRuleId)?.rule_name || '未選擇'}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-1">準確率門檻</div>
|
||||
<div className="text-sm font-medium text-foreground">
|
||||
{(options.confidence_threshold * 100).toFixed(0)}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-1">包含元數據</div>
|
||||
<div className="text-sm font-medium text-foreground">
|
||||
{options.include_metadata ? '是' : '否'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="text-xs text-muted-foreground mb-1">檔名模式</div>
|
||||
<div className="text-xs font-mono bg-background px-2 py-1 rounded border border-border">
|
||||
{options.filename_pattern || '{filename}_ocr'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Button
|
||||
onClick={handleExport}
|
||||
disabled={exportMutation.isPending}
|
||||
className="w-full gap-2"
|
||||
size="lg"
|
||||
>
|
||||
{exportMutation.isPending ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
|
||||
{t('export.exporting')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Download className="w-4 h-4" />
|
||||
{t('export.exportButton')}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate('/results')}
|
||||
className="w-full gap-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
{t('common.back')}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user