374 lines
14 KiB
TypeScript
374 lines
14 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useCallback } from "react"
|
||
import { Sidebar } from "@/components/sidebar"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Textarea } from "@/components/ui/textarea"
|
||
import { Progress } from "@/components/ui/progress"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||
import { Upload, FileText, Video, LinkIcon, X, CheckCircle, AlertCircle, Play, ExternalLink } from "lucide-react"
|
||
import { useToast } from "@/hooks/use-toast"
|
||
import { useDropzone } from "react-dropzone"
|
||
|
||
interface UploadedFile {
|
||
id: string
|
||
name: string
|
||
size: number
|
||
type: string
|
||
status: "uploading" | "completed" | "error"
|
||
progress: number
|
||
url?: string
|
||
}
|
||
|
||
export default function UploadPage() {
|
||
const [files, setFiles] = useState<UploadedFile[]>([])
|
||
const [websiteUrl, setWebsiteUrl] = useState("")
|
||
const [projectTitle, setProjectTitle] = useState("")
|
||
const [projectDescription, setProjectDescription] = useState("")
|
||
const [isAnalyzing, setIsAnalyzing] = useState(false)
|
||
const { toast } = useToast()
|
||
|
||
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||
const newFiles: UploadedFile[] = acceptedFiles.map((file) => ({
|
||
id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
|
||
name: file.name,
|
||
size: file.size,
|
||
type: file.type,
|
||
status: "uploading",
|
||
progress: 0,
|
||
}))
|
||
|
||
setFiles((prev) => [...prev, ...newFiles])
|
||
|
||
// 模擬上傳進度
|
||
newFiles.forEach((file) => {
|
||
simulateUpload(file.id)
|
||
})
|
||
}, [])
|
||
|
||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||
onDrop,
|
||
accept: {
|
||
"application/vnd.ms-powerpoint": [".ppt"],
|
||
"application/vnd.openxmlformats-officedocument.presentationml.presentation": [".pptx"],
|
||
"video/*": [".mp4", ".avi", ".mov", ".wmv", ".flv", ".webm"],
|
||
"application/pdf": [".pdf"],
|
||
},
|
||
maxSize: 100 * 1024 * 1024, // 100MB
|
||
})
|
||
|
||
const simulateUpload = (fileId: string) => {
|
||
const interval = setInterval(() => {
|
||
setFiles((prev) =>
|
||
prev.map((file) => {
|
||
if (file.id === fileId) {
|
||
const newProgress = Math.min(file.progress + Math.random() * 30, 100)
|
||
const status = newProgress === 100 ? "completed" : "uploading"
|
||
return { ...file, progress: newProgress, status }
|
||
}
|
||
return file
|
||
}),
|
||
)
|
||
}, 500)
|
||
|
||
setTimeout(() => {
|
||
clearInterval(interval)
|
||
setFiles((prev) =>
|
||
prev.map((file) => (file.id === fileId ? { ...file, progress: 100, status: "completed" } : file)),
|
||
)
|
||
}, 3000)
|
||
}
|
||
|
||
const removeFile = (fileId: string) => {
|
||
setFiles((prev) => prev.filter((file) => file.id !== fileId))
|
||
}
|
||
|
||
const formatFileSize = (bytes: number) => {
|
||
if (bytes === 0) return "0 Bytes"
|
||
const k = 1024
|
||
const sizes = ["Bytes", "KB", "MB", "GB"]
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||
return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
|
||
}
|
||
|
||
const getFileIcon = (type: string) => {
|
||
if (type.includes("presentation") || type.includes("powerpoint")) {
|
||
return <FileText className="h-8 w-8 text-orange-500" />
|
||
}
|
||
if (type.includes("video")) {
|
||
return <Video className="h-8 w-8 text-blue-500" />
|
||
}
|
||
return <FileText className="h-8 w-8 text-gray-500" />
|
||
}
|
||
|
||
const startAnalysis = () => {
|
||
if (files.length === 0 && !websiteUrl.trim()) {
|
||
toast({
|
||
title: "請上傳文件或提供網站連結",
|
||
description: "至少需要提供一種評審內容",
|
||
variant: "destructive",
|
||
})
|
||
return
|
||
}
|
||
|
||
if (!projectTitle.trim()) {
|
||
toast({
|
||
title: "請填寫專案標題",
|
||
description: "專案標題是必填欄位",
|
||
variant: "destructive",
|
||
})
|
||
return
|
||
}
|
||
|
||
setIsAnalyzing(true)
|
||
|
||
// 模擬分析過程
|
||
setTimeout(() => {
|
||
setIsAnalyzing(false)
|
||
toast({
|
||
title: "分析完成",
|
||
description: "評審結果已生成，請查看結果頁面",
|
||
})
|
||
// 這裡會導向到結果頁面
|
||
window.location.href = "/results"
|
||
}, 5000)
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background">
|
||
<Sidebar />
|
||
|
||
<main className="md:ml-64 p-6">
|
||
<div className="max-w-4xl mx-auto">
|
||
{/* Header */}
|
||
<div className="mb-8 pt-8 md:pt-0">
|
||
<h1 className="text-3xl font-bold text-foreground mb-2 font-[var(--font-playfair)]">上傳評審內容</h1>
|
||
<p className="text-muted-foreground">上傳您的 PPT、影片或提供網站連結，開始 AI 智能評審</p>
|
||
</div>
|
||
|
||
{/* Project Info */}
|
||
<Card className="mb-6">
|
||
<CardHeader>
|
||
<CardTitle>專案資訊</CardTitle>
|
||
<CardDescription>請填寫專案的基本資訊，這將幫助 AI 更好地理解評審內容</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div>
|
||
<Label htmlFor="project-title">專案標題 *</Label>
|
||
<Input
|
||
id="project-title"
|
||
value={projectTitle}
|
||
onChange={(e) => setProjectTitle(e.target.value)}
|
||
placeholder="輸入專案標題"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<Label htmlFor="project-description">專案描述</Label>
|
||
<Textarea
|
||
id="project-description"
|
||
value={projectDescription}
|
||
onChange={(e) => setProjectDescription(e.target.value)}
|
||
placeholder="簡要描述專案內容、目標或背景（選填）"
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Upload Tabs */}
|
||
<Tabs defaultValue="files" className="mb-6">
|
||
<TabsList className="grid w-full grid-cols-2">
|
||
<TabsTrigger value="files">文件上傳</TabsTrigger>
|
||
<TabsTrigger value="website">網站連結</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="files">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<Upload className="h-5 w-5" />
|
||
上傳文件
|
||
</CardTitle>
|
||
<CardDescription>支援 PPT、PPTX、MP4、AVI、MOV 等格式，單檔最大 100MB</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
{/* Drop Zone */}
|
||
<div
|
||
{...getRootProps()}
|
||
className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors ${
|
||
isDragActive
|
||
? "border-primary bg-primary/5"
|
||
: "border-muted-foreground/25 hover:border-primary/50"
|
||
}`}
|
||
>
|
||
<input {...getInputProps()} />
|
||
<Upload className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
|
||
{isDragActive ? (
|
||
<p className="text-primary font-medium">放開以上傳文件</p>
|
||
) : (
|
||
<div>
|
||
<p className="font-medium mb-2">拖拽文件到此處或點擊選擇</p>
|
||
<p className="text-sm text-muted-foreground">支援 PPT、影片等多種格式</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* File List */}
|
||
{files.length > 0 && (
|
||
<div className="mt-6 space-y-3">
|
||
<h4 className="font-medium">已上傳文件</h4>
|
||
{files.map((file) => (
|
||
<div key={file.id} className="flex items-center gap-4 p-4 bg-muted rounded-lg">
|
||
{getFileIcon(file.type)}
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center gap-2 mb-1">
|
||
<p className="font-medium truncate">{file.name}</p>
|
||
<Badge
|
||
variant={
|
||
file.status === "completed"
|
||
? "default"
|
||
: file.status === "error"
|
||
? "destructive"
|
||
: "secondary"
|
||
}
|
||
>
|
||
{file.status === "completed" && <CheckCircle className="h-3 w-3 mr-1" />}
|
||
{file.status === "error" && <AlertCircle className="h-3 w-3 mr-1" />}
|
||
{file.status === "uploading" ? "上傳中" : file.status === "completed" ? "完成" : "錯誤"}
|
||
</Badge>
|
||
</div>
|
||
<div className="flex items-center gap-4">
|
||
<span className="text-sm text-muted-foreground">{formatFileSize(file.size)}</span>
|
||
{file.status === "uploading" && (
|
||
<div className="flex-1 max-w-xs">
|
||
<Progress value={file.progress} className="h-2" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => removeFile(file.id)}
|
||
className="text-muted-foreground hover:text-destructive"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="website">
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center gap-2">
|
||
<LinkIcon className="h-5 w-5" />
|
||
網站連結
|
||
</CardTitle>
|
||
<CardDescription>提供網站 URL，AI 將分析網站內容進行評審</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="space-y-4">
|
||
<div>
|
||
<Label htmlFor="website-url">網站 URL</Label>
|
||
<div className="flex gap-2">
|
||
<Input
|
||
id="website-url"
|
||
value={websiteUrl}
|
||
onChange={(e) => setWebsiteUrl(e.target.value)}
|
||
placeholder="https://example.com"
|
||
type="url"
|
||
/>
|
||
<Button variant="outline" size="icon">
|
||
<ExternalLink className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{websiteUrl && (
|
||
<div className="p-4 bg-muted rounded-lg">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<LinkIcon className="h-4 w-4 text-primary" />
|
||
<span className="font-medium">預覽網站</span>
|
||
</div>
|
||
<p className="text-sm text-muted-foreground truncate">{websiteUrl}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</TabsContent>
|
||
</Tabs>
|
||
|
||
{/* Analysis Button */}
|
||
<Card>
|
||
<CardContent className="pt-6">
|
||
<div className="text-center">
|
||
<Button onClick={startAnalysis} disabled={isAnalyzing} size="lg" className="w-full sm:w-auto px-8">
|
||
{isAnalyzing ? (
|
||
<>
|
||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
|
||
分析中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Play className="h-4 w-4 mr-2" />
|
||
開始 AI 評審
|
||
</>
|
||
)}
|
||
</Button>
|
||
|
||
{isAnalyzing && (
|
||
<div className="mt-4 max-w-md mx-auto">
|
||
<div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
|
||
<span>正在分析內容...</span>
|
||
<span>預計 3-5 分鐘</span>
|
||
</div>
|
||
<Progress value={33} className="h-2" />
|
||
<p className="text-xs text-muted-foreground mt-2">AI 正在深度分析您的內容，請稍候</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* Tips */}
|
||
<Card className="mt-6">
|
||
<CardHeader>
|
||
<CardTitle className="text-lg">上傳小貼士</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<div className="grid md:grid-cols-2 gap-4 text-sm">
|
||
<div>
|
||
<h4 className="font-medium mb-2">文件格式建議</h4>
|
||
<ul className="space-y-1 text-muted-foreground">
|
||
<li>• PPT/PPTX：確保內容清晰完整</li>
|
||
<li>• 影片：建議 1080p 以上畫質</li>
|
||
<li>• 檔案大小：建議不超過 50MB</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-medium mb-2">網站連結注意事項</h4>
|
||
<ul className="space-y-1 text-muted-foreground">
|
||
<li>• 確保網站可正常訪問</li>
|
||
<li>• 避免需要登入的頁面</li>
|
||
<li>• 建議提供完整的 URL</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
)
|
||
}
|