新增列印功能

2025-10-04 21:28:34 +08:00
parent 40562c1bbd
commit e693728695
5 changed files with 527 additions and 48 deletions
--- a/app/admin/results/detail/[testResultId]/page.tsx
+++ b/app/admin/results/detail/[testResultId]/page.tsx
@@ -7,7 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Progress } from "@/components/ui/progress"
-import { CheckCircle, XCircle, Brain, Lightbulb, BarChart3, ArrowLeft, Loader2 } from "lucide-react"
+import { CheckCircle, XCircle, Brain, Lightbulb, BarChart3, ArrowLeft, Loader2, Printer } from "lucide-react"
 import Link from "next/link"
 import { CreativeAnalysis } from "@/components/creative-analysis"
 import { CombinedAnalysis } from "@/components/combined-analysis"
@@ -344,24 +344,35 @@ function AdminResultDetailContent() {
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4">
-          <div className="flex items-center gap-3">
-            <Button variant="ghost" size="sm" asChild>
-              <Link href="/admin/results">
-                <ArrowLeft className="w-4 h-4 mr-2" />
-                <span className="hidden sm:inline">返回測試結果</span>
-              </Link>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Button variant="ghost" size="sm" asChild>
+                <Link href="/admin/results">
+                  <ArrowLeft className="w-4 h-4 mr-2" />
+                  <span className="hidden sm:inline">返回測試結果</span>
+                </Link>
+              </Button>
+              <div className={`w-10 h-10 ${testTypeInfo.color} rounded-lg flex items-center justify-center`}>
+                <IconComponent className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h1 className="text-xl font-bold text-foreground">
+                  {user.name} - {testTypeInfo.name}測試結果
+                </h1>
+                <p className="text-sm text-muted-foreground">
+                  完成時間：{new Date(result.completedAt).toLocaleString("zh-TW")}
+                </p>
+              </div>
+            </div>
+            <Button 
+              onClick={() => window.print()} 
+              variant="outline" 
+              size="sm"
+              className="print:hidden"
+            >
+              <Printer className="w-4 h-4 mr-2" />
+              列印結果
            </Button>
-            <div className={`w-10 h-10 ${testTypeInfo.color} rounded-lg flex items-center justify-center`}>
-              <IconComponent className="w-6 h-6 text-white" />
-            </div>
-            <div>
-              <h1 className="text-xl font-bold text-foreground">
-                {user.name} - {testTypeInfo.name}測試結果
-              </h1>
-              <p className="text-sm text-muted-foreground">
-                完成時間：{new Date(result.completedAt).toLocaleString("zh-TW")}
-              </p>
-            </div>
          </div>
        </div>
      </header>
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,6 +3,441 @@

@custom-variant dark (&:is(.dark *));

+/* 列印樣式 */
+@media print {
+  .print\\:hidden {
+    display: none !important;
+  }
+  
+  body {
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+  }
+  
+  .container {
+    max-width: none !important;
+    padding: 0 !important;
+  }
+  
+  .space-y-8 > * + * {
+    margin-top: 1.5rem !important;
+  }
+  
+  .space-y-6 > * + * {
+    margin-top: 1rem !important;
+  }
+  
+  .space-y-4 > * + * {
+    margin-top: 0.75rem !important;
+  }
+  
+  .space-y-3 > * + * {
+    margin-top: 0.5rem !important;
+  }
+  
+  .space-y-2 > * + * {
+    margin-top: 0.25rem !important;
+  }
+  
+  .space-y-1 > * + * {
+    margin-top: 0.125rem !important;
+  }
+  
+  .gap-4 {
+    gap: 0.75rem !important;
+  }
+  
+  .gap-3 {
+    gap: 0.5rem !important;
+  }
+  
+  .gap-2 {
+    gap: 0.25rem !important;
+  }
+  
+  .gap-1 {
+    gap: 0.125rem !important;
+  }
+  
+  .p-4 {
+    padding: 0.75rem !important;
+  }
+  
+  .p-3 {
+    padding: 0.5rem !important;
+  }
+  
+  .p-2 {
+    padding: 0.25rem !important;
+  }
+  
+  .px-4 {
+    padding-left: 0.75rem !important;
+    padding-right: 0.75rem !important;
+  }
+  
+  .py-4 {
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important;
+  }
+  
+  .py-8 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+  
+  .mb-6 {
+    margin-bottom: 1rem !important;
+  }
+  
+  .mb-4 {
+    margin-bottom: 0.75rem !important;
+  }
+  
+  .mb-3 {
+    margin-bottom: 0.5rem !important;
+  }
+  
+  .mb-2 {
+    margin-bottom: 0.25rem !important;
+  }
+  
+  .mb-1 {
+    margin-bottom: 0.125rem !important;
+  }
+  
+  .mt-8 {
+    margin-top: 1.5rem !important;
+  }
+  
+  .mt-4 {
+    margin-top: 0.75rem !important;
+  }
+  
+  .mt-3 {
+    margin-top: 0.5rem !important;
+  }
+  
+  .mt-2 {
+    margin-top: 0.25rem !important;
+  }
+  
+  .mt-1 {
+    margin-top: 0.125rem !important;
+  }
+  
+  .text-3xl {
+    font-size: 1.5rem !important;
+    line-height: 1.5 !important;
+  }
+  
+  .text-2xl {
+    font-size: 1.25rem !important;
+    line-height: 1.5 !important;
+  }
+  
+  .text-xl {
+    font-size: 1.125rem !important;
+    line-height: 1.5 !important;
+  }
+  
+  .text-lg {
+    font-size: 1rem !important;
+    line-height: 1.5 !important;
+  }
+  
+  .text-sm {
+    font-size: 0.875rem !important;
+    line-height: 1.5 !important;
+  }
+  
+  .text-xs {
+    font-size: 0.75rem !important;
+    line-height: 1.5 !important;
+  }
+  
+  .font-bold {
+    font-weight: 700 !important;
+  }
+  
+  .font-semibold {
+    font-weight: 600 !important;
+  }
+  
+  .font-medium {
+    font-weight: 500 !important;
+  }
+  
+  .rounded-lg {
+    border-radius: 0.375rem !important;
+  }
+  
+  .rounded-md {
+    border-radius: 0.25rem !important;
+  }
+  
+  .rounded-sm {
+    border-radius: 0.125rem !important;
+  }
+  
+  .border {
+    border-width: 1px !important;
+  }
+  
+  .border-2 {
+    border-width: 2px !important;
+  }
+  
+  .bg-card {
+    background-color: white !important;
+  }
+  
+  .bg-muted {
+    background-color: #f5f5f5 !important;
+  }
+  
+  .bg-muted\\/50 {
+    background-color: rgba(245, 245, 245, 0.5) !important;
+  }
+  
+  .bg-muted\\/30 {
+    background-color: rgba(245, 245, 245, 0.3) !important;
+  }
+  
+  .text-muted-foreground {
+    color: #666 !important;
+  }
+  
+  .text-foreground {
+    color: #000 !important;
+  }
+  
+  .text-primary {
+    color: #2563eb !important;
+  }
+  
+  .text-green-600 {
+    color: #16a34a !important;
+  }
+  
+  .text-red-600 {
+    color: #dc2626 !important;
+  }
+  
+  .text-orange-600 {
+    color: #ea580c !important;
+  }
+  
+  .text-blue-600 {
+    color: #2563eb !important;
+  }
+  
+  .text-purple-600 {
+    color: #9333ea !important;
+  }
+  
+  .text-yellow-600 {
+    color: #ca8a04 !important;
+  }
+  
+  .border-primary {
+    border-color: #2563eb !important;
+  }
+  
+  .border-green-200 {
+    border-color: #bbf7d0 !important;
+  }
+  
+  .border-blue-200 {
+    border-color: #bfdbfe !important;
+  }
+  
+  .border-purple-200 {
+    border-color: #e9d5ff !important;
+  }
+  
+  .border-orange-200 {
+    border-color: #fed7aa !important;
+  }
+  
+  .border-gray-200 {
+    border-color: #e5e7eb !important;
+  }
+  
+  .bg-primary {
+    background-color: #2563eb !important;
+  }
+  
+  .bg-green-500 {
+    background-color: #22c55e !important;
+  }
+  
+  .bg-red-500 {
+    background-color: #ef4444 !important;
+  }
+  
+  .bg-orange-500 {
+    background-color: #f97316 !important;
+  }
+  
+  .bg-blue-500 {
+    background-color: #3b82f6 !important;
+  }
+  
+  .bg-purple-500 {
+    background-color: #a855f7 !important;
+  }
+  
+  .bg-yellow-500 {
+    background-color: #eab308 !important;
+  }
+  
+  .bg-gray-500 {
+    background-color: #6b7280 !important;
+  }
+  
+  .text-white {
+    color: white !important;
+  }
+  
+  .grid {
+    display: grid !important;
+  }
+  
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+  }
+  
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+  
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+  }
+  
+  .flex {
+    display: flex !important;
+  }
+  
+  .items-center {
+    align-items: center !important;
+  }
+  
+  .justify-center {
+    justify-content: center !important;
+  }
+  
+  .justify-between {
+    justify-content: space-between !important;
+  }
+  
+  .text-center {
+    text-align: center !important;
+  }
+  
+  .w-full {
+    width: 100% !important;
+  }
+  
+  .h-full {
+    height: 100% !important;
+  }
+  
+  .w-24 {
+    width: 4rem !important;
+  }
+  
+  .h-24 {
+    height: 4rem !important;
+  }
+  
+  .w-12 {
+    width: 2rem !important;
+  }
+  
+  .h-12 {
+    height: 2rem !important;
+  }
+  
+  .w-10 {
+    width: 1.5rem !important;
+  }
+  
+  .h-10 {
+    height: 1.5rem !important;
+  }
+  
+  .w-6 {
+    width: 1rem !important;
+  }
+  
+  .h-6 {
+    height: 1rem !important;
+  }
+  
+  .w-5 {
+    width: 0.75rem !important;
+  }
+  
+  .h-5 {
+    height: 0.75rem !important;
+  }
+  
+  .w-4 {
+    width: 0.5rem !important;
+  }
+  
+  .h-4 {
+    height: 0.5rem !important;
+  }
+  
+  .w-3 {
+    width: 0.375rem !important;
+  }
+  
+  .h-3 {
+    height: 0.375rem !important;
+  }
+  
+  .w-2 {
+    width: 0.25rem !important;
+  }
+  
+  .h-2 {
+    height: 0.25rem !important;
+  }
+  
+  .min-h-screen {
+    min-height: auto !important;
+  }
+  
+  .max-w-4xl {
+    max-width: none !important;
+  }
+  
+  .max-w-6xl {
+    max-width: none !important;
+  }
+  
+  .mx-auto {
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+  
+  .page-break-before {
+    page-break-before: always !important;
+  }
+  
+  .page-break-after {
+    page-break-after: always !important;
+  }
+  
+  .page-break-inside-avoid {
+    page-break-inside: avoid !important;
+  }
+}
+
 :root {
  /* 更新为专业HR系统配色方案 */
  --background: oklch(0.98 0.005 106);
--- a/app/results/combined/page.tsx
+++ b/app/results/combined/page.tsx
@@ -5,7 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Progress } from "@/components/ui/progress"
-import { Brain, Lightbulb, BarChart3, Home, RotateCcw, TrendingUp, Target, Award } from "lucide-react"
+import { Brain, Lightbulb, BarChart3, Home, RotateCcw, TrendingUp, Target, Award, Printer } from "lucide-react"
 import Link from "next/link"
 import { getRecommendations } from "@/lib/utils/score-calculator"
 import { useAuth } from "@/lib/hooks/use-auth"
@@ -236,16 +236,27 @@ export default function CombinedResultsPage() {
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-gradient-to-r from-primary to-accent rounded-lg flex items-center justify-center">
-              <BarChart3 className="w-6 h-6 text-white" />
-            </div>
-            <div>
-              <h1 className="text-xl font-bold text-foreground">綜合能力測試結果</h1>
-              <p className="text-sm text-muted-foreground">
-                完成時間：{new Date(results.completedAt).toLocaleString("zh-TW")}
-              </p>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-gradient-to-r from-primary to-accent rounded-lg flex items-center justify-center">
+                <BarChart3 className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h1 className="text-xl font-bold text-foreground">綜合能力測試結果</h1>
+                <p className="text-sm text-muted-foreground">
+                  完成時間：{new Date(results.completedAt).toLocaleString("zh-TW")}
+                </p>
+              </div>
            </div>
+            <Button 
+              onClick={() => window.print()} 
+              variant="outline" 
+              size="sm"
+              className="print:hidden"
+            >
+              <Printer className="w-4 h-4 mr-2" />
+              列印結果
+            </Button>
          </div>
        </div>
      </header>
--- a/app/results/creative/page.tsx
+++ b/app/results/creative/page.tsx
@@ -5,7 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Progress } from "@/components/ui/progress"
-import { Lightbulb, Home, RotateCcw, TrendingUp } from "lucide-react"
+import { Lightbulb, Home, RotateCcw, TrendingUp, Printer } from "lucide-react"
 import Link from "next/link"
 import { creativeQuestions } from "@/lib/questions/creative-questions"
 import { useAuth } from "@/lib/hooks/use-auth"
@@ -257,16 +257,27 @@ export default function CreativeResultsPage() {
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-accent rounded-lg flex items-center justify-center">
-              <Lightbulb className="w-6 h-6 text-accent-foreground" />
-            </div>
-            <div>
-              <h1 className="text-xl font-bold text-foreground">創意能力測試結果</h1>
-              <p className="text-sm text-muted-foreground">
-                完成時間：{new Date(results.completedAt).toLocaleString("zh-TW")}
-              </p>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-accent rounded-lg flex items-center justify-center">
+                <Lightbulb className="w-6 h-6 text-accent-foreground" />
+              </div>
+              <div>
+                <h1 className="text-xl font-bold text-foreground">創意能力測試結果</h1>
+                <p className="text-sm text-muted-foreground">
+                  完成時間：{new Date(results.completedAt).toLocaleString("zh-TW")}
+                </p>
+              </div>
            </div>
+            <Button 
+              onClick={() => window.print()} 
+              variant="outline" 
+              size="sm"
+              className="print:hidden"
+            >
+              <Printer className="w-4 h-4 mr-2" />
+              列印結果
+            </Button>
          </div>
        </div>
      </header>
--- a/app/results/logic/page.tsx
+++ b/app/results/logic/page.tsx
@@ -5,7 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Progress } from "@/components/ui/progress"
-import { CheckCircle, XCircle, Brain, Home, RotateCcw } from "lucide-react"
+import { CheckCircle, XCircle, Brain, Home, RotateCcw, Printer } from "lucide-react"
 import Link from "next/link"

 interface LogicQuestion {
@@ -131,16 +131,27 @@ export default function LogicResultsPage() {
      {/* Header */}
      <header className="border-b bg-card/50 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
-              <Brain className="w-6 h-6 text-primary-foreground" />
-            </div>
-            <div>
-              <h1 className="text-xl font-bold text-foreground">邏輯思維測試結果</h1>
-              <p className="text-sm text-muted-foreground">
-                完成時間：{new Date(results.completedAt).toLocaleString("zh-TW")}
-              </p>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
+                <Brain className="w-6 h-6 text-primary-foreground" />
+              </div>
+              <div>
+                <h1 className="text-xl font-bold text-foreground">邏輯思維測試結果</h1>
+                <p className="text-sm text-muted-foreground">
+                  完成時間：{new Date(results.completedAt).toLocaleString("zh-TW")}
+                </p>
+              </div>
            </div>
+            <Button 
+              onClick={() => window.print()} 
+              variant="outline" 
+              size="sm"
+              className="print:hidden"
+            >
+              <Printer className="w-4 h-4 mr-2" />
+              列印結果
+            </Button>
          </div>
        </div>
      </header>