From ef640e9bdb8492fda9361a656abe92799efe4ba0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B3=E4=BD=A9=E5=BA=AD?= Date: Sun, 12 Oct 2025 03:35:50 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=88=97=E5=8D=B0=E5=91=88?= =?UTF-8?q?=E7=8F=BE=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../results/detail/[testResultId]/page.tsx | 541 +++++++++++++++++- app/globals.css | 173 ++++++ 2 files changed, 707 insertions(+), 7 deletions(-) diff --git a/app/admin/results/detail/[testResultId]/page.tsx b/app/admin/results/detail/[testResultId]/page.tsx index 8c69294..72d69a6 100644 --- a/app/admin/results/detail/[testResultId]/page.tsx +++ b/app/admin/results/detail/[testResultId]/page.tsx @@ -82,6 +82,7 @@ function AdminResultDetailContent() { const [detailData, setDetailData] = useState(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) + const [showDetailedResults, setShowDetailedResults] = useState(true) useEffect(() => { const loadDetailData = async () => { @@ -341,7 +342,7 @@ function AdminResultDetailContent() { const displayScorePercentage = creativeScorePercentage > 0 ? creativeScorePercentage : result.score return ( -
+
{/* Header */}
@@ -390,7 +391,532 @@ function AdminResultDetailContent() { 分享結果 + +
+ + + ` + + printWindow.document.write(printContent) + printWindow.document.close() + + // 等待內容載入後自動列印 + printWindow.onload = () => { + setTimeout(() => { + printWindow.print() + }, 500) + } + } else { + // 如果無法打開新窗口，使用原始方法 + window.print() + } + }} variant="outline" size="sm" className="print:hidden flex-shrink-0" @@ -403,10 +929,11 @@ function AdminResultDetailContent() {
+
{/* User Info */} - + 用戶資訊 @@ -434,7 +961,7 @@ function AdminResultDetailContent() { {/* Logic Test Overview */} {result.type === 'logic' && ( - +
+
0 && ( - + {questions.length > 0 && showDetailedResults && ( + 詳細結果 diff --git a/app/globals.css b/app/globals.css index 917310d..8ef1ee6 100644 --- a/app/globals.css +++ b/app/globals.css @@ -19,6 +19,179 @@ padding: 0 !important; } + /* 管理員結果頁面專用樣式 - 並排佈局 */ + .admin-result-print { + + /* 整體佈局調整 */ + .container { + max-width: none !important; + padding: 0 !important; + margin: 0 !important; + } + + /* 主容器調整 */ + .admin-result-print .max-w-4xl { + max-width: none !important; + margin: 0 !important; + padding: 0 !important; + } + + /* 主頁面並排佈局（非列印時） */ + .admin-result-print .print-user-info { + width: 48% !important; + display: inline-block !important; + vertical-align: top !important; + margin: 0 !important; + margin-right: 2% !important; + margin-bottom: 1rem !important; + } + + .admin-result-print .print-logic-test { + width: 48% !important; + display: inline-block !important; + vertical-align: top !important; + margin: 0 !important; + margin-right: 2% !important; + margin-bottom: 1rem !important; + } + + .admin-result-print .print-creative-test { + width: 48% !important; + display: inline-block !important; + vertical-align: top !important; + margin: 0 !important; + margin-left: 2% !important; + margin-bottom: 1rem !important; + } + + /* 測驗結果卡片（綜合測試） */ + .admin-result-print .text-center.mb-6:not(.print-logic-test):not(.print-creative-test) { + width: 48% !important; + display: inline-block !important; + vertical-align: top !important; + margin: 0 !important; + margin-left: 2% !important; + margin-bottom: 1rem !important; + } + + /* 其他卡片保持全寬度 */ + .admin-result-print .card:not(.print-user-info):not(.print-logic-test):not(.print-creative-test) { + width: 100% !important; + display: block !important; + margin: 1rem 0 !important; + } + + /* 卡片樣式調整 */ + .card { + margin: 0 !important; + padding: 0.3rem !important; + border: 1px solid #ccc !important; + page-break-inside: avoid !important; + } + + .card-header, + .card-content { + padding: 0.2rem !important; + margin: 0 !important; + } + + /* 分數圓圈縮小 */ + .w-24.h-24, + .w-20.h-20, + .w-16.h-16 { + width: 2rem !important; + height: 2rem !important; + } + + /* 文字大小調整 */ + .text-3xl { + font-size: 1rem !important; + } + + .text-2xl { + font-size: 0.875rem !important; + } + + .text-xl { + font-size: 0.75rem !important; + } + + .text-lg { + font-size: 0.7rem !important; + } + + .text-base { + font-size: 0.65rem !important; + } + + .text-sm { + font-size: 0.6rem !important; + } + + .text-xs { + font-size: 0.55rem !important; + } + + /* 網格佈局緊湊 */ + .grid { + gap: 0.2rem !important; + } + + .grid-cols-3 { + grid-template-columns: repeat(3, 1fr) !important; + } + + .grid-cols-2 { + grid-template-columns: repeat(2, 1fr) !important; + } + + /* 進度條縮小 */ + .h-3, + .h-2 { + height: 0.3rem !important; + } + + /* 徽章縮小 */ + .badge { + font-size: 0.5rem !important; + padding: 0.1rem 0.2rem !important; + } + + /* 按鈕隱藏 */ + .button, + button { + display: none !important; + } + + /* 間距調整 */ + .space-y-8 > * + * { + margin-top: 0 !important; + } + + .space-y-6 > * + * { + margin-top: 0.1rem !important; + } + + .space-y-4 > * + * { + margin-top: 0.05rem !important; + } + + /* 列印時隱藏不需要的元素 */ + @media print { + header, + .print\\:hidden, + .hide-in-print, + #detailed-results-card { + display: none !important; + } + + @page { + size: A4; + margin: 0.8cm; + } + } + } + .space-y-8 > * + * { margin-top: 1.5rem !important; }