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>

frontend/src/pages/ResultsPage.tsx

@@ -9,6 +9,7 @@ import MarkdownPreview from '@/components/MarkdownPreview'
 import { useToast } from '@/components/ui/toast'
 import { useUploadStore } from '@/store/uploadStore'
 import { apiClient } from '@/services/api'
+import { FileText, Download, Languages, AlertCircle, TrendingUp, Clock, Layers } from 'lucide-react'
 
 export default function ResultsPage() {
   const { t } = useTranslation()
@@ -68,16 +69,21 @@ export default function ResultsPage() {
   // 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('results.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('results.title')}</CardTitle>
           </CardHeader>
-          <CardContent className="text-center space-y-4">
+          <CardContent className="space-y-4">
             <p className="text-muted-foreground">
               {t('results.noBatchMessage', { defaultValue: '尚未選擇任何批次。請先上傳並處理檔案。' })}
             </p>
-            <Button onClick={() => navigate('/upload')}>
+            <Button onClick={() => navigate('/upload')} size="lg">
               {t('results.goToUpload', { defaultValue: '前往上傳頁面' })}
             </Button>
           </CardContent>
@@ -89,33 +95,40 @@ export default function ResultsPage() {
   const completedFiles = batchStatus?.files.filter((f) => f.status === 'completed') || []
 
   return (
-    <div className="max-w-6xl mx-auto space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold text-foreground mb-2">{t('results.title')}</h1>
-          <p className="text-muted-foreground">
-            批次 ID: {batchId} - 已完成 {completedFiles.length} 個檔案
-          </p>
-        </div>
-        <div className="flex gap-2">
-          <Button onClick={handleExport}>{t('nav.export')}</Button>
-          <Button
-            variant="outline"
-            disabled
-            title={t('translation.comingSoon')}
-            className="relative"
-          >
-            {t('translation.title')}
-            <span className="ml-2 text-xs bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded">
-              {t('translation.comingSoon')}
-            </span>
-          </Button>
+    <div className="space-y-6">
+      {/* Page Header */}
+      <div className="page-header">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="page-title">{t('results.title')}</h1>
+            <p className="text-muted-foreground mt-1">
+              批次 ID: <span className="font-mono text-primary">{batchId}</span> · 已完成 {completedFiles.length} 個檔案
+            </p>
+          </div>
+          <div className="flex gap-3">
+            <Button onClick={handleExport} className="gap-2">
+              <Download className="w-4 h-4" />
+              {t('nav.export')}
+            </Button>
+            <Button
+              variant="outline"
+              disabled
+              title={t('translation.comingSoon')}
+              className="gap-2"
+            >
+              <Languages className="w-4 h-4" />
+              {t('translation.title')}
+              <span className="text-xs bg-warning/20 text-warning px-2 py-0.5 rounded ml-1">
+                即將推出
+              </span>
+            </Button>
+          </div>
         </div>
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Results Table */}
-        <div>
+      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
+        {/* Results Table - Takes 2 columns */}
+        <div className="lg:col-span-2">
           <ResultsTable
             files={batchStatus?.files || []}
             onViewResult={handleViewResult}
@@ -123,32 +136,78 @@ export default function ResultsPage() {
           />
         </div>
 
-        {/* Preview Panel */}
-        <div>
+        {/* Preview Panel - Takes 3 columns */}
+        <div className="lg:col-span-3">
           {selectedFileId && ocrResult ? (
             <div className="space-y-4">
+              {/* Preview Card */}
               <MarkdownPreview
                 title={`${t('results.viewMarkdown')} - ${ocrResult.filename}`}
                 content={ocrResult.markdown_content}
               />
-              <div className="text-sm text-muted-foreground space-y-1">
-                <p>
-                  {t('results.confidence')}: {((ocrResult.confidence || 0) * 100).toFixed(2)}%
-                </p>
-                <p>
-                  {t('results.processingTime')}: {(ocrResult.processing_time || 0).toFixed(2)}s
-                </p>
-                <p>
-                  {t('results.textBlocks')}: {ocrResult.json_data?.total_text_regions || 0}
-                </p>
+
+              {/* Stats Grid */}
+              <div className="grid grid-cols-3 gap-3">
+                <Card>
+                  <CardContent className="p-4">
+                    <div className="flex items-center gap-3">
+                      <div className="p-2 bg-success/10 rounded-lg">
+                        <TrendingUp className="w-5 h-5 text-success" />
+                      </div>
+                      <div>
+                        <p className="text-xs text-muted-foreground">準確率</p>
+                        <p className="text-lg font-bold text-foreground">
+                          {((ocrResult.confidence || 0) * 100).toFixed(1)}%
+                        </p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardContent className="p-4">
+                    <div className="flex items-center gap-3">
+                      <div className="p-2 bg-primary/10 rounded-lg">
+                        <Clock className="w-5 h-5 text-primary" />
+                      </div>
+                      <div>
+                        <p className="text-xs text-muted-foreground">處理時間</p>
+                        <p className="text-lg font-bold text-foreground">
+                          {(ocrResult.processing_time || 0).toFixed(2)}s
+                        </p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardContent className="p-4">
+                    <div className="flex items-center gap-3">
+                      <div className="p-2 bg-accent/10 rounded-lg">
+                        <Layers className="w-5 h-5 text-accent" />
+                      </div>
+                      <div>
+                        <p className="text-xs text-muted-foreground">文字區塊</p>
+                        <p className="text-lg font-bold text-foreground">
+                          {ocrResult.json_data?.total_text_regions || 0}
+                        </p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
               </div>
             </div>
           ) : (
-            <div className="h-full flex items-center justify-center border rounded-lg bg-muted/50">
-              <p className="text-muted-foreground">
-                {isLoadingResult ? t('common.loading') : '選擇檔案以查看結果'}
-              </p>
-            </div>
+            <Card className="h-full min-h-[400px]">
+              <CardContent className="h-full flex flex-col items-center justify-center p-12">
+                <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
+                  <FileText className="w-8 h-8 text-muted-foreground" />
+                </div>
+                <p className="text-muted-foreground text-center">
+                  {isLoadingResult ? t('common.loading') : '選擇左側檔案以查看詳細結果'}
+                </p>
+              </CardContent>
+            </Card>
           )}
         </div>
       </div>