petty09190/hr-assessment-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

優化手機介面

Browse Source
This commit is contained in:
吳佩庭
2025-10-12 01:55:31 +08:00
parent 6f7ed92a8a
commit fbb423243a
2 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/admin/results/detail/[testResultId]/page.tsx
View File

@@ -344,28 +344,31 @@ function AdminResultDetailContent() {
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
{/* Header */} {/* Header */}
<header className="border-b bg-card/50 backdrop-blur-sm"> <header className="border-b bg-card/50 backdrop-blur-sm">
<div className="container mx-auto px-4 py-4"> <div className="container mx-auto px-3 sm:px-4 py-3 sm:py-4">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
<div className="flex items-center gap-3"> {/* 返回按鈕和標題區域 */}
<Button variant="ghost" size="sm" asChild> <div className="flex items-start gap-3">
<Button variant="ghost" size="sm" asChild className="flex-shrink-0">
<Link href="/admin/results"> <Link href="/admin/results">
<ArrowLeft className="w-4 h-4 mr-2" /> <ArrowLeft className="w-4 h-4 sm:mr-2" />
<span className="hidden sm:inline">返回測試結果</span> <span className="hidden sm:inline">返回測試結果</span>
</Link> </Link>
</Button> </Button>
<div className={`w-10 h-10 ${testTypeInfo.color} rounded-lg flex items-center justify-center`}> <div className={`w-8 h-8 sm:w-10 sm:h-10 ${testTypeInfo.color} rounded-lg flex items-center justify-center flex-shrink-0`}>
<IconComponent className="w-6 h-6 text-white" /> <IconComponent className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
</div> </div>
<div> <div className="min-w-0 flex-1">
<h1 className="text-xl font-bold text-foreground"> <h1 className="text-base sm:text-lg lg:text-xl font-bold text-foreground leading-tight">
{user.name} - {testTypeInfo.name}測試結果 {user.name} - {testTypeInfo.name}測試結果
</h1> </h1>
<p className="text-sm text-muted-foreground"> <p className="text-xs sm:text-sm text-muted-foreground mt-1">
完成時間：{new Date(result.completedAt).toLocaleString("zh-TW")} 完成時間：{new Date(result.completedAt).toLocaleString("zh-TW")}
</p> </p>
</div> </div>
</div> </div>
<div className="flex justify-end gap-2">
{/* 功能按鈕區域 */}
<div className="flex justify-end gap-2 sm:gap-3">
<Button <Button
onClick={() => { onClick={() => {
if (navigator.share) { if (navigator.share) {
@@ -381,7 +384,7 @@ function AdminResultDetailContent() {
}} }}
variant="outline" variant="outline"
size="sm" size="sm"
className="print:hidden" className="print:hidden flex-shrink-0"
> >
<Share2 className="w-4 h-4 sm:mr-2" /> <Share2 className="w-4 h-4 sm:mr-2" />
<span className="hidden sm:inline">分享結果</span> <span className="hidden sm:inline">分享結果</span>
@@ -390,7 +393,7 @@ function AdminResultDetailContent() {
onClick={() => window.print()} onClick={() => window.print()}
variant="outline" variant="outline"
size="sm" size="sm"
className="print:hidden" className="print:hidden flex-shrink-0"
> >
<Printer className="w-4 h-4 sm:mr-2" /> <Printer className="w-4 h-4 sm:mr-2" />
<span className="hidden sm:inline">列印結果</span> <span className="hidden sm:inline">列印結果</span>

14
components/combined-analysis.tsx
View File

@@ -118,24 +118,24 @@ export function CombinedAnalysis({
<Card className="text-center"> <Card className="text-center">
<CardHeader> <CardHeader>
<div <div
className={`w-24 h-24 ${getLevelColor(overallScore)} rounded-full flex items-center justify-center mx-auto mb-4`} className={`w-20 h-20 sm:w-24 sm:h-24 ${getLevelColor(overallScore)} rounded-full flex items-center justify-center mx-auto mb-4`}
> >
<span className="text-3xl font-bold text-white">{overallScore}</span> <span className="text-2xl sm:text-3xl font-bold text-white">{overallScore}</span>
</div> </div>
<CardTitle className="text-3xl mb-2"> <CardTitle className="text-xl sm:text-2xl lg:text-3xl mb-2 px-2">
綜合測試{isTimeout ? '(時間到)' : ''}完成！ 綜合測試{isTimeout ? '(時間到)' : ''}完成！
</CardTitle> </CardTitle>
<div className="flex items-center justify-center gap-2 mb-4"> <div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3 mb-4 px-2">
<Badge variant="secondary" className="text-lg px-4 py-1 bg-gradient-to-r from-blue-500 to-teal-500 text-white"> <Badge variant="secondary" className="text-sm sm:text-base lg:text-lg px-3 sm:px-4 py-1 bg-gradient-to-r from-blue-500 to-teal-500 text-white">
{level} {level}
</Badge> </Badge>
{isTimeout && ( {isTimeout && (
<Badge variant="destructive" className="text-lg px-4 py-1"> <Badge variant="destructive" className="text-sm sm:text-base lg:text-lg px-3 sm:px-4 py-1">
時間到強制提交 時間到強制提交
</Badge> </Badge>
)} )}
</div> </div>
<p className="text-lg text-muted-foreground mb-3">{description}</p> <p className="text-sm sm:text-base lg:text-lg text-muted-foreground mb-3 px-4">{description}</p>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<Progress value={overallScore} className="h-3 mb-4" /> <Progress value={overallScore} className="h-3 mb-4" />