petty09190/ai-showcase-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

建立檔案

Browse Source
This commit is contained in:
吳佩庭
2025-08-05 08:22:44 +08:00
commit 042d03aff7
122 changed files with 34763 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
components/auth/activity-records-dialog.tsx Normal file
View File

@@ -0,0 +1,168 @@
"use client"
import { useAuth } from "@/contexts/auth-context"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import { BarChart3, Clock, Heart, ImageIcon, MessageSquare, FileText, TrendingUp } from "lucide-react"
interface ActivityRecordsDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
}
// Recent apps data - empty for production
const recentApps: any[] = []
// Category data - empty for production
const categoryData: any[] = []
export function ActivityRecordsDialog({ open, onOpenChange }: ActivityRecordsDialogProps) {
const { user } = useAuth()
if (!user) return null
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-5xl max-h-[85vh] overflow-hidden">
<DialogHeader>
<DialogTitle className="text-2xl font-bold flex items-center gap-2">
<BarChart3 className="w-6 h-6" />
活動紀錄
</DialogTitle>
</DialogHeader>
<Tabs defaultValue="recent" className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="recent">最近使用</TabsTrigger>
<TabsTrigger value="statistics">個人統計</TabsTrigger>
</TabsList>
<TabsContent value="recent" className="space-y-4 max-h-[60vh] overflow-y-auto">
<div>
<h3 className="text-lg font-semibold mb-2">最近使用的應用</h3>
<p className="text-sm text-muted-foreground mb-4">您最近體驗過的 AI 應用</p>
<div className="grid gap-4">
{recentApps.map((app) => {
const IconComponent = app.icon
return (
<Card key={app.id} className="hover:shadow-md transition-shadow">
<CardContent className="flex items-center justify-between p-4">
<div className="flex items-center space-x-4">
<div className={`p-3 rounded-lg ${app.color}`}>
<IconComponent className="w-6 h-6 text-white" />
</div>
<div>
<h4 className="font-semibold">{app.name}</h4>
<p className="text-sm text-muted-foreground">by {app.author}</p>
<div className="flex items-center gap-4 mt-1">
<Badge variant="secondary" className="text-xs">
{app.category}
</Badge>
<span className="text-xs text-muted-foreground flex items-center gap-1">
<BarChart3 className="w-3 h-3" />
使用 {app.usageCount} 次
</span>
<span className="text-xs text-muted-foreground flex items-center gap-1">
<Clock className="w-3 h-3" />
{app.timeSpent}
</span>
</div>
</div>
</div>
<div className="text-right">
<p className="text-xs text-muted-foreground mb-2">{app.lastUsed}</p>
<Button size="sm" variant="outline">
再次體驗
</Button>
</div>
</CardContent>
</Card>
)
})}
</div>
</div>
</TabsContent>
<TabsContent value="statistics" className="space-y-6 max-h-[60vh] overflow-y-auto">
<div>
<h3 className="text-lg font-semibold mb-2">個人統計</h3>
<p className="text-sm text-muted-foreground mb-4">您在平台上的活動概覽</p>
{/* Statistics Cards */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">總使用次數</CardTitle>
<TrendingUp className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">41</div>
<p className="text-xs text-muted-foreground">比上週增加 12%</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">使用時長</CardTitle>
<Clock className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">9.2小時</div>
<p className="text-xs text-muted-foreground">本月累計</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">收藏應用</CardTitle>
<Heart className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">6</div>
<p className="text-xs text-muted-foreground">個人收藏</p>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="text-base">加入天數</CardTitle>
<CardDescription>天</CardDescription>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">0</div>
</CardContent>
</Card>
</div>
{/* Category Usage */}
<Card>
<CardHeader>
<CardTitle className="text-base">最常使用的類別</CardTitle>
<CardDescription>根據您的使用頻率統計的應用類別分布</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
{categoryData.map((category, index) => (
<div key={index} className="space-y-2">
<div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-2">
<div className={`w-3 h-3 rounded-full ${category.color}`} />
<span className="font-medium">{category.name}</span>
</div>
<span className="text-muted-foreground">{category.usage}%</span>
</div>
<Progress value={category.usage} className="h-2" />
</div>
))}
</CardContent>
</Card>
</div>
</TabsContent>
</Tabs>
</DialogContent>
</Dialog>
)
}

148
components/auth/forgot-password-dialog.tsx Normal file
View File

@@ -0,0 +1,148 @@
"use client"
import type React from "react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Mail, ArrowLeft, CheckCircle } from "lucide-react"
interface ForgotPasswordDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
onBackToLogin: () => void
}
export function ForgotPasswordDialog({ open, onOpenChange, onBackToLogin }: ForgotPasswordDialogProps) {
const [email, setEmail] = useState("")
const [isLoading, setIsLoading] = useState(false)
const [isSuccess, setIsSuccess] = useState(false)
const [error, setError] = useState("")
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setError("")
if (!email) {
setError("請輸入電子郵件地址")
return
}
if (!email.includes("@")) {
setError("請輸入有效的電子郵件地址")
return
}
setIsLoading(true)
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 2000))
setIsLoading(false)
setIsSuccess(true)
}
const handleClose = () => {
setEmail("")
setError("")
setIsSuccess(false)
onOpenChange(false)
}
const handleResend = async () => {
setIsLoading(true)
await new Promise((resolve) => setTimeout(resolve, 1000))
setIsLoading(false)
}
if (isSuccess) {
return (
<Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<div className="flex flex-col items-center space-y-4">
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
<CheckCircle className="w-8 h-8 text-green-600" />
</div>
<DialogTitle className="text-2xl font-bold text-center">重設密碼郵件已發送</DialogTitle>
<DialogDescription className="text-center">我們已將重設密碼的連結發送到您的電子郵件</DialogDescription>
</div>
</DialogHeader>
<div className="space-y-4">
<div className="bg-blue-50 p-4 rounded-lg">
<p className="text-sm text-blue-800 mb-2">請檢查您的電子郵件：</p>
<p className="text-sm text-blue-700 font-medium">{email}</p>
</div>
<div className="text-sm text-gray-600 space-y-2">
<p>• 請檢查您的收件匣和垃圾郵件資料夾</p>
<p>• 重設連結將在 24 小時後過期</p>
<p>• 如果您沒有收到郵件，請點擊下方重新發送</p>
</div>
<div className="flex space-x-3">
<Button onClick={onBackToLogin} variant="outline" className="flex-1 bg-transparent">
<ArrowLeft className="w-4 h-4 mr-2" />
返回登入
</Button>
<Button onClick={handleResend} disabled={isLoading} className="flex-1">
{isLoading ? "發送中..." : "重新發送"}
</Button>
</div>
</div>
</DialogContent>
</Dialog>
)
}
return (
<Dialog open={open} onOpenChange={handleClose}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle className="text-2xl font-bold text-center">忘記密碼</DialogTitle>
<DialogDescription className="text-center">
請輸入您的電子郵件地址，我們將發送重設密碼的連結給您
</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="reset-email">電子郵件</Label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input
id="reset-email"
type="email"
placeholder="請輸入您的電子郵件"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="pl-10"
required
/>
</div>
</div>
{error && (
<Alert variant="destructive">
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<div className="flex space-x-3">
<Button type="button" onClick={onBackToLogin} variant="outline" className="flex-1 bg-transparent">
<ArrowLeft className="w-4 h-4 mr-2" />
返回登入
</Button>
<Button type="submit" disabled={isLoading} className="flex-1">
{isLoading ? "發送中..." : "發送重設連結"}
</Button>
</div>
</form>
</DialogContent>
</Dialog>
)
}

134
components/auth/login-dialog.tsx Normal file
View File

@@ -0,0 +1,134 @@
"use client"
import type React from "react"
import { useState } from "react"
import { useAuth } from "@/contexts/auth-context"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Eye, EyeOff, Mail, Lock } from "lucide-react"
interface LoginDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
onSwitchToRegister: () => void
onSwitchToForgotPassword: () => void
}
export function LoginDialog({ open, onOpenChange, onSwitchToRegister, onSwitchToForgotPassword }: LoginDialogProps) {
const { login, isLoading } = useAuth()
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [showPassword, setShowPassword] = useState(false)
const [error, setError] = useState("")
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setError("")
if (!email || !password) {
setError("請填寫所有欄位")
return
}
const success = await login(email, password)
if (success) {
onOpenChange(false)
setEmail("")
setPassword("")
} else {
setError("登入失敗，請檢查您的電子郵件和密碼")
}
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle className="text-2xl font-bold text-center">登入帳號</DialogTitle>
<DialogDescription className="text-center">歡迎回到強茂集團 AI 展示平台</DialogDescription>
</DialogHeader>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="email">電子郵件</Label>
<div className="relative">
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input
id="email"
type="email"
placeholder="請輸入您的電子郵件"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="pl-10"
required
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="password">密碼</Label>
<div className="relative">
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<Input
id="password"
type={showPassword ? "text" : "password"}
placeholder="請輸入您的密碼"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="pl-10 pr-10"
required
/>
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
>
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
</button>
</div>
<div className="flex justify-end">
<button
type="button"
onClick={onSwitchToForgotPassword}
className="text-sm text-blue-600 hover:text-blue-800"
>
忘記密碼？
</button>
</div>
</div>
{error && (
<Alert variant="destructive">
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<div className="bg-gray-50 p-4 rounded-lg">
<p className="text-sm text-gray-600 mb-2">測試帳號：</p>
<p className="text-sm">Email: zhang@panjit.com</p>
<p className="text-sm">Password: password123</p>
</div>
<Button type="submit" className="w-full" disabled={isLoading}>
{isLoading ? "登入中..." : "登入"}
</Button>
<div className="text-center">
<span className="text-sm text-gray-600">還沒有帳號？</span>
<button
type="button"
onClick={onSwitchToRegister}
className="text-sm text-blue-600 hover:text-blue-800 ml-1"
>
立即註冊
</button>
</div>
</form>
</DialogContent>
</Dialog>
)
}

193
components/auth/profile-dialog.tsx Normal file
View File

@@ -0,0 +1,193 @@
"use client"
import { useState } from "react"
import { useAuth } from "@/contexts/auth-context"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, AlertTriangle, Loader2, User, Camera } from "lucide-react"
interface ProfileDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
}
export function ProfileDialog({ open, onOpenChange }: ProfileDialogProps) {
const { user, updateProfile } = useAuth()
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState("")
const [success, setSuccess] = useState("")
const [profileData, setProfileData] = useState({
name: user?.name || "",
email: user?.email || "",
department: user?.department || "",
bio: user?.bio || "",
phone: user?.phone || "",
location: user?.location || "",
})
const departments = ["HQBU", "ITBU", "MBU1", "MBU2", "SBU", "財務部", "人資部", "法務部"]
const handleSave = async () => {
setError("")
setSuccess("")
setIsLoading(true)
try {
await updateProfile(profileData)
setSuccess("個人資料更新成功！")
setTimeout(() => setSuccess(""), 3000)
} catch (err) {
setError("更新失敗，請稍後再試")
} finally {
setIsLoading(false)
}
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="flex items-center space-x-2">
<User className="w-5 h-5" />
<span>個人資料</span>
</DialogTitle>
<DialogDescription>管理您的個人資料和帳號設定</DialogDescription>
</DialogHeader>
<div className="space-y-6">
{error && (
<Alert variant="destructive">
<AlertTriangle className="h-4 w-4" />
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
{success && (
<Alert className="border-green-200 bg-green-50">
<CheckCircle className="h-4 w-4 text-green-600" />
<AlertDescription className="text-green-800">{success}</AlertDescription>
</Alert>
)}
<div className="flex items-center space-x-6">
<div className="relative">
<Avatar className="w-24 h-24">
<AvatarImage src={user?.avatar || "/placeholder.svg"} />
<AvatarFallback className="text-2xl bg-gradient-to-r from-blue-600 to-purple-600 text-white">
{user?.name?.charAt(0) || "U"}
</AvatarFallback>
</Avatar>
<Button
size="sm"
variant="outline"
className="absolute -bottom-2 -right-2 rounded-full w-8 h-8 p-0 bg-transparent"
>
<Camera className="w-4 h-4" />
</Button>
</div>
<div>
<h3 className="text-xl font-semibold">{user?.name}</h3>
<p className="text-gray-600">{user?.email}</p>
<Badge variant="outline" className="mt-2">
{user?.department}
</Badge>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<Label htmlFor="name">姓名</Label>
<Input
id="name"
value={profileData.name}
onChange={(e) => setProfileData({ ...profileData, name: e.target.value })}
/>
</div>
<div className="space-y-2">
<Label htmlFor="email">電子郵件</Label>
<Input
id="email"
type="email"
value={profileData.email}
onChange={(e) => setProfileData({ ...profileData, email: e.target.value })}
/>
</div>
<div className="space-y-2">
<Label htmlFor="department">部門</Label>
<Select
value={profileData.department}
onValueChange={(value) => setProfileData({ ...profileData, department: value })}
>
<SelectTrigger>
<SelectValue placeholder="選擇部門" />
</SelectTrigger>
<SelectContent>
{departments.map((dept) => (
<SelectItem key={dept} value={dept}>
{dept}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="phone">電話</Label>
<Input
id="phone"
value={profileData.phone}
onChange={(e) => setProfileData({ ...profileData, phone: e.target.value })}
placeholder="輸入電話號碼"
/>
</div>
<div className="space-y-2">
<Label htmlFor="location">地點</Label>
<Input
id="location"
value={profileData.location}
onChange={(e) => setProfileData({ ...profileData, location: e.target.value })}
placeholder="輸入工作地點"
/>
</div>
<div className="space-y-2 md:col-span-2">
<Label htmlFor="bio">個人簡介</Label>
<Input
id="bio"
value={profileData.bio}
onChange={(e) => setProfileData({ ...profileData, bio: e.target.value })}
placeholder="簡單介紹一下自己..."
/>
</div>
</div>
<div className="flex justify-end space-x-3">
<Button variant="outline" onClick={() => onOpenChange(false)}>
取消
</Button>
<Button onClick={handleSave} disabled={isLoading}>
{isLoading ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
儲存中...
</>
) : (
"儲存變更"
)}
</Button>
</div>
</div>
</DialogContent>
</Dialog>
)
}

183
components/auth/register-dialog.tsx Normal file
View File

@@ -0,0 +1,183 @@
"use client"
import type React from "react"
import { useState } from "react"
import { useAuth } from "@/contexts/auth-context"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { CheckCircle, AlertTriangle, Loader2 } from "lucide-react"
interface RegisterDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
}
export function RegisterDialog({ open, onOpenChange }: RegisterDialogProps) {
const { register } = useAuth()
const [formData, setFormData] = useState({
name: "",
email: "",
password: "",
confirmPassword: "",
department: "",
})
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState("")
const [success, setSuccess] = useState(false)
const departments = ["HQBU", "ITBU", "MBU1", "MBU2", "SBU", "財務部", "人資部", "法務部"]
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setError("")
if (formData.password !== formData.confirmPassword) {
setError("密碼確認不符")
return
}
if (formData.password.length < 6) {
setError("密碼至少需要6個字符")
return
}
setIsLoading(true)
try {
await register({
name: formData.name,
email: formData.email,
password: formData.password,
department: formData.department,
})
setSuccess(true)
setTimeout(() => {
setSuccess(false)
onOpenChange(false)
setFormData({
name: "",
email: "",
password: "",
confirmPassword: "",
department: "",
})
}, 2000)
} catch (err) {
setError("註冊失敗，請稍後再試")
} finally {
setIsLoading(false)
}
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>註冊帳號</DialogTitle>
<DialogDescription>填寫以下資訊創建您的帳號</DialogDescription>
</DialogHeader>
{success ? (
<div className="text-center py-6">
<CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
<h3 className="text-lg font-semibold text-green-700 mb-2">註冊成功！</h3>
<p className="text-gray-600">您的帳號已創建，請等待管理員審核。</p>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-4">
{error && (
<Alert variant="destructive">
<AlertTriangle className="h-4 w-4" />
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<div className="space-y-2">
<Label htmlFor="name">姓名</Label>
<Input
id="name"
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="email">電子郵件</Label>
<Input
id="email"
type="email"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="department">部門</Label>
<Select
value={formData.department}
onValueChange={(value) => setFormData({ ...formData, department: value })}
>
<SelectTrigger>
<SelectValue placeholder="選擇部門" />
</SelectTrigger>
<SelectContent>
{departments.map((dept) => (
<SelectItem key={dept} value={dept}>
{dept}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="password">密碼</Label>
<Input
id="password"
type="password"
value={formData.password}
onChange={(e) => setFormData({ ...formData, password: e.target.value })}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="confirmPassword">確認密碼</Label>
<Input
id="confirmPassword"
type="password"
value={formData.confirmPassword}
onChange={(e) => setFormData({ ...formData, confirmPassword: e.target.value })}
required
/>
</div>
<div className="flex justify-end space-x-3 pt-4">
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
取消
</Button>
<Button type="submit" disabled={isLoading}>
{isLoading ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
註冊中...
</>
) : (
"註冊"
)}
</Button>
</div>
</form>
)}
</DialogContent>
</Dialog>
)
}

125
components/auth/settings-dialog.tsx Normal file
View File

@@ -0,0 +1,125 @@
"use client"
import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Loader2, Settings, Palette } from "lucide-react"
interface SettingsDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
}
export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
const [settings, setSettings] = useState({
language: "zh-TW",
theme: "system",
})
const [isLoading, setIsLoading] = useState(false)
const [success, setSuccess] = useState("")
const handleSave = async () => {
setIsLoading(true)
setSuccess("")
// Simulate API call
await new Promise((resolve) => setTimeout(resolve, 1500))
setSuccess("設定已儲存成功！")
setIsLoading(false)
setTimeout(() => setSuccess(""), 3000)
}
const updateSetting = (key: string, value: any) => {
setSettings((prev) => ({
...prev,
[key]: value,
}))
}
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl font-bold flex items-center gap-2">
<Settings className="w-6 h-6" />
設定
</DialogTitle>
</DialogHeader>
<div className="space-y-6">
{success && (
<Alert className="border-green-200 bg-green-50">
<AlertDescription className="text-green-800">{success}</AlertDescription>
</Alert>
)}
{/* Interface Settings */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Palette className="w-5 h-5" />
介面設定
</CardTitle>
<CardDescription>自訂您的使用者介面偏好設定</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="language">語言</Label>
<Select value={settings.language} onValueChange={(value) => updateSetting("language", value)}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="zh-TW">繁體中文</SelectItem>
<SelectItem value="zh-CN">简体中文</SelectItem>
<SelectItem value="en">English</SelectItem>
<SelectItem value="ja">日本語</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="theme">主題</Label>
<Select value={settings.theme} onValueChange={(value) => updateSetting("theme", value)}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">淺色主題</SelectItem>
<SelectItem value="dark">深色主題</SelectItem>
<SelectItem value="system">跟隨系統</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</CardContent>
</Card>
{/* Save Button */}
<div className="flex justify-end">
<Button
onClick={handleSave}
disabled={isLoading}
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
>
{isLoading ? (
<>
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
儲存中...
</>
) : (
"儲存設定"
)}
</Button>
</div>
</div>
</DialogContent>
</Dialog>
)
}

196
components/auth/user-menu.tsx Normal file
View File

@@ -0,0 +1,196 @@
"use client"
import { useState } from "react"
import { useAuth } from "@/contexts/auth-context"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { User, BarChart3, Settings, LogOut, Code, Shield, Upload } from "lucide-react"
import { LoginDialog } from "./login-dialog"
import { RegisterDialog } from "./register-dialog"
import { ForgotPasswordDialog } from "./forgot-password-dialog"
import { ProfileDialog } from "./profile-dialog"
import { ActivityRecordsDialog } from "./activity-records-dialog"
import { SettingsDialog } from "./settings-dialog"
import { AppSubmissionDialog } from "../app-submission-dialog"
export function UserMenu() {
const { user, logout, canAccessAdmin, canSubmitApp } = useAuth()
const [loginOpen, setLoginOpen] = useState(false)
const [registerOpen, setRegisterOpen] = useState(false)
const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false)
const [profileOpen, setProfileOpen] = useState(false)
const [activityOpen, setActivityOpen] = useState(false)
const [settingsOpen, setSettingsOpen] = useState(false)
const [showAppSubmission, setShowAppSubmission] = useState(false)
const handleSwitchToRegister = () => {
setLoginOpen(false)
setRegisterOpen(true)
}
const handleSwitchToLogin = () => {
setRegisterOpen(false)
setForgotPasswordOpen(false)
setLoginOpen(true)
}
const handleSwitchToForgotPassword = () => {
setLoginOpen(false)
setForgotPasswordOpen(true)
}
const getRoleText = (role: string) => {
switch (role) {
case "admin":
return "管理員"
case "developer":
return "開發者"
case "user":
return "一般用戶"
default:
return role
}
}
const getRoleIcon = (role: string) => {
switch (role) {
case "admin":
return <Shield className="w-3 h-3" />
case "developer":
return <Code className="w-3 h-3" />
case "user":
return <User className="w-3 h-3" />
default:
return <User className="w-3 h-3" />
}
}
const getRoleColor = (role: string) => {
switch (role) {
case "admin":
return "bg-purple-100 text-purple-800"
case "developer":
return "bg-green-100 text-green-800"
case "user":
return "bg-blue-100 text-blue-800"
default:
return "bg-gray-100 text-gray-800"
}
}
if (!user) {
return (
<>
<Button
onClick={() => setLoginOpen(true)}
className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white"
>
登入
</Button>
<LoginDialog
open={loginOpen}
onOpenChange={setLoginOpen}
onSwitchToRegister={handleSwitchToRegister}
onSwitchToForgotPassword={handleSwitchToForgotPassword}
/>
<RegisterDialog open={registerOpen} onOpenChange={setRegisterOpen} onSwitchToLogin={handleSwitchToLogin} />
<ForgotPasswordDialog
open={forgotPasswordOpen}
onOpenChange={setForgotPasswordOpen}
onBackToLogin={handleSwitchToLogin}
/>
</>
)
}
return (
<>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="relative h-10 w-10 rounded-full">
<Avatar className="h-10 w-10">
<AvatarFallback className="bg-gradient-to-r from-blue-600 to-purple-600 text-white">
{user.name.charAt(0)}
</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-80" align="end" forceMount>
<div className="flex items-center justify-start gap-2 p-4">
<Avatar className="h-12 w-12">
<AvatarFallback className="bg-gradient-to-r from-blue-600 to-purple-600 text-white text-lg">
{user.name.charAt(0)}
</AvatarFallback>
</Avatar>
<div className="flex flex-col space-y-1 leading-none">
<p className="font-medium">{user.name}</p>
<p className="text-xs text-muted-foreground">{user.email}</p>
<div className="flex items-center gap-2">
<span className="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">
{user.department}
</span>
<span
className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${getRoleColor(user.role)}`}
>
{getRoleIcon(user.role)}
<span className="ml-1">{getRoleText(user.role)}</span>
</span>
</div>
</div>
</div>
<DropdownMenuSeparator />
{canAccessAdmin() && (
<>
<DropdownMenuItem onClick={() => window.open("/admin", "_blank")}>
<Settings className="mr-2 h-4 w-4" />
<span>管理後台</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
</>
)}
{canSubmitApp() && (
<>
<DropdownMenuItem onClick={() => setShowAppSubmission(true)}>
<Upload className="mr-2 h-4 w-4" />
<span>提交應用</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
</>
)}
<DropdownMenuItem onClick={() => setProfileOpen(true)}>
<User className="mr-2 h-4 w-4" />
<span>個人資料</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setActivityOpen(true)}>
<BarChart3 className="mr-2 h-4 w-4" />
<span>活動紀錄</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setSettingsOpen(true)}>
<Settings className="mr-2 h-4 w-4" />
<span>設定</span>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={logout} className="text-red-600">
<LogOut className="mr-2 h-4 w-4" />
<span>登出</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<ProfileDialog open={profileOpen} onOpenChange={setProfileOpen} />
<ActivityRecordsDialog open={activityOpen} onOpenChange={setActivityOpen} />
<SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
<AppSubmissionDialog open={showAppSubmission} onOpenChange={setShowAppSubmission} />
</>
)
}