Initial commit
This commit is contained in:
3
app/analytics/loading.tsx
Normal file
3
app/analytics/loading.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export default function Loading() {
|
||||
return null
|
||||
}
|
||||
690
app/analytics/page.tsx
Normal file
690
app/analytics/page.tsx
Normal file
@@ -0,0 +1,690 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import {
|
||||
Sparkles,
|
||||
ArrowLeft,
|
||||
BarChart3,
|
||||
TrendingUp,
|
||||
Users,
|
||||
Target,
|
||||
BookOpen,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
TrendingDown,
|
||||
Minus,
|
||||
Shield,
|
||||
Eye,
|
||||
EyeOff,
|
||||
} from "lucide-react"
|
||||
import RadarChart from "@/components/radar-chart"
|
||||
import HeaderMusicControl from "@/components/header-music-control"
|
||||
import { categories, categorizeWishMultiple, type Wish } from "@/lib/categorization"
|
||||
|
||||
interface CategoryData {
|
||||
name: string
|
||||
count: number
|
||||
percentage: number
|
||||
color: string
|
||||
keywords: string[]
|
||||
description?: string
|
||||
difficulty?: {
|
||||
level: number
|
||||
stars: string
|
||||
label: string
|
||||
estimatedTime: string
|
||||
techStack: string[]
|
||||
solutionType: string
|
||||
complexity: string
|
||||
}
|
||||
}
|
||||
|
||||
interface AnalyticsData {
|
||||
totalWishes: number
|
||||
publicWishes: number
|
||||
privateWishes: number
|
||||
categories: CategoryData[]
|
||||
recentTrends: {
|
||||
thisWeek: number
|
||||
lastWeek: number
|
||||
growth: number
|
||||
growthLabel: string
|
||||
growthIcon: "up" | "down" | "flat"
|
||||
growthColor: string
|
||||
}
|
||||
topKeywords: { word: string; count: number }[]
|
||||
}
|
||||
|
||||
export default function AnalyticsPage() {
|
||||
const [wishes, setWishes] = useState<Wish[]>([])
|
||||
const [analytics, setAnalytics] = useState<AnalyticsData | null>(null)
|
||||
const [showCategoryGuide, setShowCategoryGuide] = useState(false)
|
||||
|
||||
// 分析許願內容（包含所有數據，包括私密的）
|
||||
const analyzeWishes = (wishList: (Wish & { isPublic?: boolean })[]): AnalyticsData => {
|
||||
const totalWishes = wishList.length
|
||||
const publicWishes = wishList.filter((wish) => wish.isPublic !== false).length
|
||||
const privateWishes = wishList.filter((wish) => wish.isPublic === false).length
|
||||
|
||||
const categoryStats: { [key: string]: number } = {}
|
||||
const keywordCount: { [key: string]: number } = {}
|
||||
|
||||
// 初始化分類統計
|
||||
categories.forEach((cat) => {
|
||||
categoryStats[cat.name] = 0
|
||||
})
|
||||
categoryStats["其他問題"] = 0
|
||||
|
||||
// 分析每個許願（多標籤統計）- 包含所有數據
|
||||
wishList.forEach((wish) => {
|
||||
const wishCategories = categorizeWishMultiple(wish)
|
||||
|
||||
wishCategories.forEach((category) => {
|
||||
categoryStats[category.name]++
|
||||
|
||||
// 統計關鍵字
|
||||
if (category.keywords) {
|
||||
const fullText =
|
||||
`${wish.title} ${wish.currentPain} ${wish.expectedSolution} ${wish.expectedEffect}`.toLowerCase()
|
||||
category.keywords.forEach((keyword: string) => {
|
||||
if (fullText.includes(keyword.toLowerCase())) {
|
||||
keywordCount[keyword] = (keywordCount[keyword] || 0) + 1
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 計算百分比和準備數據
|
||||
const categoriesData: CategoryData[] = categories.map((cat) => ({
|
||||
name: cat.name,
|
||||
count: categoryStats[cat.name] || 0,
|
||||
percentage: totalWishes > 0 ? Math.round(((categoryStats[cat.name] || 0) / totalWishes) * 100) : 0,
|
||||
color: cat.color,
|
||||
keywords: cat.keywords,
|
||||
description: cat.description,
|
||||
}))
|
||||
|
||||
// 改進的趨勢計算
|
||||
const now = new Date()
|
||||
const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
|
||||
const twoWeeksAgo = new Date(now.getTime() - 14 * 24 * 60 * 60 * 1000)
|
||||
|
||||
const thisWeek = wishList.filter((wish) => new Date(wish.createdAt) >= oneWeekAgo).length
|
||||
const lastWeek = wishList.filter((wish) => {
|
||||
const date = new Date(wish.createdAt)
|
||||
return date >= twoWeeksAgo && date < oneWeekAgo
|
||||
}).length
|
||||
|
||||
// 改進的成長趨勢計算
|
||||
let growth = 0
|
||||
let growthLabel = "持平"
|
||||
let growthIcon: "up" | "down" | "flat" = "flat"
|
||||
let growthColor = "#6B7280"
|
||||
|
||||
if (lastWeek === 0 && thisWeek > 0) {
|
||||
// 上週沒有，本週有 → 全新開始
|
||||
growth = 100
|
||||
growthLabel = "開始增長"
|
||||
growthIcon = "up"
|
||||
growthColor = "#10B981"
|
||||
} else if (lastWeek === 0 && thisWeek === 0) {
|
||||
// 兩週都沒有
|
||||
growth = 0
|
||||
growthLabel = "尚無數據"
|
||||
growthIcon = "flat"
|
||||
growthColor = "#6B7280"
|
||||
} else if (lastWeek > 0) {
|
||||
// 正常計算成長率
|
||||
growth = Math.round(((thisWeek - lastWeek) / lastWeek) * 100)
|
||||
|
||||
if (growth > 0) {
|
||||
growthLabel = "持續增長"
|
||||
growthIcon = "up"
|
||||
growthColor = "#10B981"
|
||||
} else if (growth < 0) {
|
||||
growthLabel = "有所下降"
|
||||
growthIcon = "down"
|
||||
growthColor = "#EF4444"
|
||||
} else {
|
||||
growthLabel = "保持穩定"
|
||||
growthIcon = "flat"
|
||||
growthColor = "#6B7280"
|
||||
}
|
||||
}
|
||||
|
||||
// 取得熱門關鍵字
|
||||
const topKeywords = Object.entries(keywordCount)
|
||||
.sort(([, a], [, b]) => b - a)
|
||||
.slice(0, 15)
|
||||
.map(([word, count]) => ({ word, count }))
|
||||
|
||||
return {
|
||||
totalWishes,
|
||||
publicWishes,
|
||||
privateWishes,
|
||||
categories: categoriesData,
|
||||
recentTrends: {
|
||||
thisWeek,
|
||||
lastWeek,
|
||||
growth,
|
||||
growthLabel,
|
||||
growthIcon,
|
||||
growthColor,
|
||||
},
|
||||
topKeywords,
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const savedWishes = JSON.parse(localStorage.getItem("wishes") || "[]")
|
||||
setWishes(savedWishes)
|
||||
setAnalytics(analyzeWishes(savedWishes))
|
||||
}, [])
|
||||
|
||||
if (!analytics) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 flex items-center justify-center">
|
||||
<div className="text-white text-xl">正在分析數據...</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 根據成長趨勢選擇圖標
|
||||
const GrowthIcon =
|
||||
analytics.recentTrends.growthIcon === "up"
|
||||
? TrendingUp
|
||||
: analytics.recentTrends.growthIcon === "down"
|
||||
? TrendingDown
|
||||
: Minus
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 relative overflow-hidden">
|
||||
{/* 星空背景 */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
{[...Array(30)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute w-0.5 h-0.5 md:w-1 md:h-1 bg-white rounded-full animate-pulse"
|
||||
style={{
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
animationDelay: `${Math.random() * 3}s`,
|
||||
animationDuration: `${2 + Math.random() * 2}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div className="absolute top-1/4 right-1/3 w-64 h-64 md:w-96 md:h-96 bg-gradient-radial from-purple-400/20 via-blue-500/10 to-transparent rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
{/* Header - 修復跑版問題 */}
|
||||
<header className="border-b border-blue-800/50 bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50">
|
||||
<div className="container mx-auto px-3 sm:px-4 py-3 md:py-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
{/* Logo 區域 - 防止文字換行 */}
|
||||
<Link href="/" className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0">
|
||||
<div className="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
||||
<Sparkles className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<h1 className="text-base sm:text-lg md:text-2xl font-bold text-white whitespace-nowrap">心願星河</h1>
|
||||
</Link>
|
||||
|
||||
{/* 導航區域 */}
|
||||
<nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
|
||||
{/* 音樂控制 */}
|
||||
<div className="hidden sm:block">
|
||||
<HeaderMusicControl />
|
||||
</div>
|
||||
<div className="sm:hidden">
|
||||
<HeaderMusicControl mobileSimplified />
|
||||
</div>
|
||||
|
||||
{/* 桌面版完整導航 */}
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
<Link href="/wishes">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-4"
|
||||
>
|
||||
聆聽心聲
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/submit">
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 px-4"
|
||||
>
|
||||
分享困擾
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 平板版導航 */}
|
||||
<div className="hidden sm:flex md:hidden items-center gap-1">
|
||||
<Link href="/">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/wishes">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-2 text-xs"
|
||||
>
|
||||
心聲
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/submit">
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 px-3"
|
||||
>
|
||||
分享
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 手機版導航 - 移除首頁按鈕，避免與 logo 功能重疊 */}
|
||||
<div className="flex sm:hidden items-center gap-1">
|
||||
<Link href="/wishes">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-2 text-xs"
|
||||
>
|
||||
心聲
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/submit">
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 px-3 text-xs"
|
||||
>
|
||||
分享
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="py-8 md:py-12 px-4">
|
||||
<div className="container mx-auto max-w-7xl">
|
||||
{/* 頁面標題 */}
|
||||
<div className="text-center mb-8 md:mb-12">
|
||||
<div className="flex items-center justify-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-full flex items-center justify-center shadow-lg shadow-purple-500/25">
|
||||
<BarChart3 className="w-6 h-6 md:w-8 md:h-8 text-white" />
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-white">問題洞察分析</h2>
|
||||
<Badge className="bg-gradient-to-r from-pink-500/20 to-purple-500/20 text-pink-200 border border-pink-400/30 px-3 py-1">
|
||||
完整數據分析
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-blue-200 text-lg">深入分析職場困擾的分布和趨勢</p>
|
||||
<p className="text-blue-300 text-sm mt-2">包含所有提交的案例數據，協助管理者了解真實狀況</p>
|
||||
</div>
|
||||
|
||||
{/* 隱私說明卡片 */}
|
||||
<Card className="bg-gradient-to-r from-indigo-800/30 to-purple-800/30 backdrop-blur-sm border border-indigo-600/50 mb-8 md:mb-12">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg sm:text-xl md:text-2xl text-white flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-full flex items-center justify-center">
|
||||
<Shield className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
數據隱私說明
|
||||
</CardTitle>
|
||||
<CardDescription className="text-indigo-200 text-sm sm:text-base">
|
||||
本分析包含所有提交的案例，包括選擇保持私密的困擾
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid sm:grid-cols-2 gap-4 text-sm">
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-indigo-200 flex items-center gap-2">
|
||||
<Eye className="w-4 h-4" />
|
||||
公開案例 ({analytics.publicWishes} 個)
|
||||
</h4>
|
||||
<p className="text-indigo-100">這些案例會顯示在「聆聽心聲」頁面，供其他人查看和產生共鳴</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-indigo-200 flex items-center gap-2">
|
||||
<EyeOff className="w-4 h-4" />
|
||||
私密案例 ({analytics.privateWishes} 個)
|
||||
</h4>
|
||||
<p className="text-indigo-100">這些案例保持匿名且私密，僅用於統計分析，幫助了解整體趨勢</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 p-3 bg-slate-800/50 rounded-lg border border-slate-600/30">
|
||||
<p className="text-xs md:text-sm text-slate-300 leading-relaxed">
|
||||
<strong className="text-blue-200">給管理者的說明：</strong>
|
||||
此分析包含完整的問題數據，能幫助您了解團隊面臨的真實挑戰。私密案例雖然不會公開顯示，
|
||||
但其數據對於制定改善策略同樣重要。所有個人身份資訊都已匿名化處理。
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 統計概覽 */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-8 md:mb-12">
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardContent className="p-4 md:p-6 text-center">
|
||||
<div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-3">
|
||||
<Users className="w-5 h-5 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<div className="text-2xl md:text-3xl font-bold text-white mb-1">{analytics.totalWishes}</div>
|
||||
<div className="text-xs md:text-sm text-blue-200">總案例數</div>
|
||||
<div className="text-xs text-slate-400 mt-1">
|
||||
公開 {analytics.publicWishes} + 私密 {analytics.privateWishes}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardContent className="p-4 md:p-6 text-center">
|
||||
<div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-3">
|
||||
<TrendingUp className="w-5 h-5 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<div className="text-2xl md:text-3xl font-bold text-white mb-1">{analytics.recentTrends.thisWeek}</div>
|
||||
<div className="text-xs md:text-sm text-blue-200">本週新增</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardContent className="p-4 md:p-6 text-center">
|
||||
<div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-3">
|
||||
<Target className="w-5 h-5 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<div className="text-2xl md:text-3xl font-bold text-white mb-1">
|
||||
{analytics.categories.filter((c) => c.count > 0).length}
|
||||
</div>
|
||||
<div className="text-xs md:text-sm text-blue-200">問題領域</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardContent className="p-4 md:p-6 text-center">
|
||||
<div
|
||||
className="w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-3"
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${analytics.recentTrends.growthColor}80, ${analytics.recentTrends.growthColor}60)`,
|
||||
}}
|
||||
>
|
||||
<GrowthIcon className="w-5 h-5 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<div className="text-2xl md:text-3xl font-bold text-white mb-1">
|
||||
{analytics.recentTrends.growth > 0 ? "+" : ""}
|
||||
{analytics.recentTrends.growth}%
|
||||
</div>
|
||||
<div className="text-xs md:text-sm" style={{ color: analytics.recentTrends.growthColor }}>
|
||||
{analytics.recentTrends.growthLabel}
|
||||
</div>
|
||||
{/* 詳細說明 */}
|
||||
<div className="text-xs text-slate-400 mt-1">上週: {analytics.recentTrends.lastWeek} 個</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 分類指南 */}
|
||||
<Card className="bg-gradient-to-r from-indigo-800/30 to-purple-800/30 backdrop-blur-sm border border-indigo-600/50 mb-8 md:mb-12">
|
||||
<CardHeader>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<BookOpen className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<CardTitle className="text-lg sm:text-xl md:text-2xl text-white">問題分類說明</CardTitle>
|
||||
<CardDescription className="text-indigo-200 text-sm sm:text-base">
|
||||
了解我們如何分類和分析各種職場困擾
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowCategoryGuide(!showCategoryGuide)}
|
||||
className="text-indigo-200 hover:text-white hover:bg-indigo-800/50 self-start sm:self-auto flex-shrink-0"
|
||||
>
|
||||
{showCategoryGuide ? (
|
||||
<>
|
||||
<ChevronUp className="w-4 h-4 mr-1" />
|
||||
收起
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown className="w-4 h-4 mr-1" />
|
||||
展開
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
{showCategoryGuide && (
|
||||
<CardContent>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{categories.map((category, index) => (
|
||||
<div
|
||||
key={category.name}
|
||||
className="p-4 rounded-lg bg-slate-700/30 border border-slate-600/30 hover:bg-slate-600/40 transition-all duration-200"
|
||||
>
|
||||
<div className="flex items-start gap-3 mb-2">
|
||||
<div className="text-2xl">{category.icon}</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-semibold text-white">{category.name}</h4>
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: category.color }}></div>
|
||||
</div>
|
||||
<p className="text-sm text-slate-300 leading-relaxed">{category.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 關鍵字示例 */}
|
||||
<div className="mt-3 pt-3 border-t border-slate-600/30">
|
||||
<div className="text-xs text-slate-400 mb-2">常見關鍵字：</div>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{category.keywords.slice(0, 6).map((keyword, idx) => (
|
||||
<Badge
|
||||
key={idx}
|
||||
variant="secondary"
|
||||
className="text-xs px-2 py-0.5 bg-slate-600/50 text-slate-300 border-slate-500/50"
|
||||
>
|
||||
{keyword}
|
||||
</Badge>
|
||||
))}
|
||||
{category.keywords.length > 6 && (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-xs px-2 py-0.5 bg-slate-600/30 text-slate-400 border-slate-500/30"
|
||||
>
|
||||
+{category.keywords.length - 6}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* 手機版：垂直佈局，桌面版：並排佈局 */}
|
||||
<div className="space-y-8 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-8 md:gap-12">
|
||||
{/* 雷達圖 - 手機版給予更多高度 */}
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl md:text-2xl text-white flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-full flex items-center justify-center">
|
||||
<BarChart3 className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
問題分布圖譜
|
||||
</CardTitle>
|
||||
<CardDescription className="text-blue-200">各類職場困擾的完整案例分布（包含私密數據）</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* 手機版使用更大的高度，桌面版保持原有高度 */}
|
||||
<div className="h-80 sm:h-96 lg:h-80 xl:h-96">
|
||||
<RadarChart data={analytics.categories} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 分類詳細統計 */}
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl md:text-2xl text-white flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center">
|
||||
<Target className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
完整案例統計
|
||||
<Badge className="bg-gradient-to-r from-pink-500/20 to-purple-500/20 text-pink-200 border border-pink-400/30 text-xs px-2 py-1">
|
||||
含私密數據
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
<CardDescription className="text-blue-200">
|
||||
每個領域的所有案例數量（包含公開和私密案例）
|
||||
{analytics.categories.filter((cat) => cat.count > 0).length > 0 && (
|
||||
<span className="block text-xs text-slate-400 mt-1">
|
||||
共 {analytics.categories.filter((cat) => cat.count > 0).length} 個活躍分類
|
||||
{analytics.categories.filter((cat) => cat.count > 0).length > 4 && "，可滾動查看全部"}
|
||||
</span>
|
||||
)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* 設定固定高度並添加滾動 */}
|
||||
<div className="max-h-80 overflow-y-auto pr-2 space-y-4 scrollbar-thin scrollbar-thumb-slate-600 scrollbar-track-slate-800">
|
||||
{analytics.categories
|
||||
.filter((cat) => cat.count > 0)
|
||||
.sort((a, b) => b.count - a.count)
|
||||
.map((category, index) => (
|
||||
<div
|
||||
key={category.name}
|
||||
className="flex items-center justify-between p-4 rounded-lg bg-slate-700/30 border border-slate-600/30 hover:bg-slate-600/40 transition-all duration-200"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-xl">
|
||||
{categories.find((cat) => cat.name === category.name)?.icon || "❓"}
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-white flex items-center gap-2">
|
||||
{category.name}
|
||||
<div className="w-3 h-3 rounded-full" style={{ backgroundColor: category.color }}></div>
|
||||
{/* 添加排名標示 */}
|
||||
{index < 3 && (
|
||||
<span className="text-xs bg-gradient-to-r from-cyan-500/20 to-blue-500/20 text-cyan-200 px-2 py-0.5 rounded-full border border-cyan-500/30">
|
||||
TOP {index + 1}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm text-slate-300">{category.count} 個案例</div>
|
||||
{category.description && (
|
||||
<div className="text-xs text-slate-400 mt-1 max-w-xs">{category.description}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary" className="bg-slate-600/50 text-slate-200">
|
||||
{category.percentage}%
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 滾動提示 */}
|
||||
{analytics.categories.filter((cat) => cat.count > 0).length > 4 && (
|
||||
<div className="text-center pt-2 border-t border-slate-600/30">
|
||||
<div className="text-xs text-slate-400 flex items-center justify-center gap-2">
|
||||
<div className="w-1 h-1 bg-slate-400 rounded-full animate-bounce"></div>
|
||||
<span>向下滾動查看更多分類</span>
|
||||
<div
|
||||
className="w-1 h-1 bg-slate-400 rounded-full animate-bounce"
|
||||
style={{ animationDelay: "0.5s" }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 多維度分析說明 */}
|
||||
<Card className="bg-gradient-to-r from-purple-800/30 to-indigo-800/30 backdrop-blur-sm border border-purple-600/50 mt-8 md:mt-12">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl md:text-2xl text-white flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-purple-400 to-pink-500 rounded-full flex items-center justify-center">
|
||||
<Sparkles className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
完整數據分析優勢
|
||||
</CardTitle>
|
||||
<CardDescription className="text-purple-200">包含私密案例的全面分析，提供更準確的洞察</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid sm:grid-cols-2 gap-4 text-sm">
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-purple-200">🔍 真實全貌</h4>
|
||||
<p className="text-purple-100">包含所有案例數據，不受公開意願影響，呈現最真實的問題狀況</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-purple-200">📊 精準決策</h4>
|
||||
<p className="text-purple-100">基於完整數據制定改善策略，避免因樣本偏差導致的決策失誤</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-purple-200">🎯 隱藏問題</h4>
|
||||
<p className="text-purple-100">發現那些員工不願公開但確實存在的問題，提前預防和解決</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-semibold text-purple-200">🔒 隱私保護</h4>
|
||||
<p className="text-purple-100">在保護個人隱私的前提下，最大化數據的分析價值</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 熱門關鍵字 */}
|
||||
{analytics.topKeywords.length > 0 && (
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50 mt-8 md:mt-12">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl md:text-2xl text-white flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center">
|
||||
<TrendingUp className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
最常見的問題關鍵字
|
||||
</CardTitle>
|
||||
<CardDescription className="text-blue-200">
|
||||
在所有案例中最常出現的詞彙，反映團隊面臨的核心挑戰
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2 sm:gap-3">
|
||||
{analytics.topKeywords.map((keyword, index) => (
|
||||
<Badge
|
||||
key={keyword.word}
|
||||
variant="secondary"
|
||||
className="bg-gradient-to-r from-cyan-500/20 to-blue-500/20 text-cyan-200 border border-cyan-500/30 px-3 py-1.5 text-sm"
|
||||
>
|
||||
{keyword.word} ({keyword.count})
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
94
app/globals.css
Normal file
94
app/globals.css
Normal file
@@ -0,0 +1,94 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 0 0% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 0 0% 3.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 0 0% 3.9%;
|
||||
--primary: 0 0% 9%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
--secondary: 0 0% 96.1%;
|
||||
--secondary-foreground: 0 0% 9%;
|
||||
--muted: 0 0% 96.1%;
|
||||
--muted-foreground: 0 0% 45.1%;
|
||||
--accent: 0 0% 96.1%;
|
||||
--accent-foreground: 0 0% 9%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 89.8%;
|
||||
--input: 0 0% 89.8%;
|
||||
--ring: 0 0% 3.9%;
|
||||
--chart-1: 12 76% 61%;
|
||||
--chart-2: 173 58% 39%;
|
||||
--chart-3: 197 37% 24%;
|
||||
--chart-4: 43 74% 66%;
|
||||
--chart-5: 27 87% 67%;
|
||||
--radius: 0.5rem;
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
.dark {
|
||||
--background: 0 0% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
--popover: 0 0% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 0 0% 9%;
|
||||
--secondary: 0 0% 14.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
--muted: 0 0% 14.9%;
|
||||
--muted-foreground: 0 0% 63.9%;
|
||||
--accent: 0 0% 14.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
--border: 0 0% 14.9%;
|
||||
--input: 0 0% 14.9%;
|
||||
--ring: 0 0% 83.1%;
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
31
app/layout.tsx
Normal file
31
app/layout.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import type React from "react"
|
||||
import type { Metadata } from "next"
|
||||
import { Inter } from "next/font/google"
|
||||
import "./globals.css"
|
||||
import { ThemeProvider } from "@/components/theme-provider"
|
||||
import { Toaster } from "@/components/ui/toaster"
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] })
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "心願星河 - 職場困擾的專業支援平台",
|
||||
description: "每一個工作困擾都值得被理解和支持。讓我們用科技的力量，為你的職場挑戰找到專業的解決方案。",
|
||||
generator: 'v0.dev'
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="zh-TW">
|
||||
<body className={inter.className}>
|
||||
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
|
||||
{children}
|
||||
<Toaster />
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
391
app/page.tsx
Normal file
391
app/page.tsx
Normal file
@@ -0,0 +1,391 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Sparkles, MessageCircle, Users, BarChart3 } from "lucide-react"
|
||||
import HeaderMusicControl from "@/components/header-music-control"
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 relative overflow-hidden flex flex-col">
|
||||
{/* 星空背景 */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
{/* 星星 */}
|
||||
{[...Array(30)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute w-0.5 h-0.5 md:w-1 md:h-1 bg-white rounded-full animate-pulse"
|
||||
style={{
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
animationDelay: `${Math.random() * 3}s`,
|
||||
animationDuration: `${2 + Math.random() * 2}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* 較大的星星 */}
|
||||
{[...Array(15)].map((_, i) => (
|
||||
<div
|
||||
key={`big-${i}`}
|
||||
className="absolute w-1 h-1 md:w-2 md:h-2 bg-blue-200 rounded-full animate-pulse opacity-60"
|
||||
style={{
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
animationDelay: `${Math.random() * 4}s`,
|
||||
animationDuration: `${3 + Math.random() * 2}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* 光芒效果 */}
|
||||
<div className="absolute top-1/4 left-1/2 transform -translate-x-1/2 w-64 h-64 md:w-96 md:h-96 bg-gradient-radial from-cyan-400/20 via-blue-500/10 to-transparent rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
{/* Header - 手機版優化，修復跑版問題 */}
|
||||
<header className="border-b border-blue-800/50 bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50 flex-shrink-0">
|
||||
<div className="container mx-auto px-3 sm:px-4 py-3 md:py-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
{/* Logo 區域 - 防止文字換行 */}
|
||||
<div className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0">
|
||||
<div className="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
||||
<Sparkles className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<h1 className="text-base sm:text-lg md:text-2xl font-bold text-white whitespace-nowrap">心願星河</h1>
|
||||
</div>
|
||||
|
||||
{/* 導航區域 */}
|
||||
<nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
|
||||
{/* 音樂控制 */}
|
||||
<div className="hidden sm:block">
|
||||
<HeaderMusicControl />
|
||||
</div>
|
||||
<div className="sm:hidden">
|
||||
<HeaderMusicControl mobileSimplified />
|
||||
</div>
|
||||
|
||||
{/* 桌面版完整導航 */}
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
<Link href="/analytics">
|
||||
<Button variant="ghost" className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-4">
|
||||
<BarChart3 className="w-4 h-4 mr-2" />
|
||||
問題洞察
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/wishes">
|
||||
<Button variant="ghost" className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-4">
|
||||
聆聽心聲
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/submit">
|
||||
<Button className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 px-4">
|
||||
分享困擾
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 平板版導航 */}
|
||||
<div className="hidden sm:flex md:hidden items-center gap-2">
|
||||
<Link href="/analytics">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2"
|
||||
>
|
||||
<BarChart3 className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/wishes">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
|
||||
>
|
||||
心聲
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/submit">
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 px-3"
|
||||
>
|
||||
分享
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 手機版導航 - 使用文字而非圖標 */}
|
||||
<div className="flex sm:hidden items-center gap-1">
|
||||
<Link href="/analytics">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
|
||||
>
|
||||
洞察
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/wishes">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
|
||||
>
|
||||
心聲
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/submit">
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 px-3 text-xs"
|
||||
>
|
||||
分享
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content - 使用 flex-1 讓內容區域填滿剩餘空間 */}
|
||||
<main className="flex-1 flex flex-col justify-center py-12 md:py-20 px-4 relative">
|
||||
<div className="container mx-auto text-center max-w-4xl">
|
||||
{/* 主要許願瓶 - 添加呼吸動畫 */}
|
||||
<div className="mb-12 md:mb-16 relative">
|
||||
<div className="relative mx-auto w-48 h-60 md:w-64 md:h-80 mb-6 md:mb-8">
|
||||
{/* 許願瓶主體 - 呼吸動畫 */}
|
||||
<div
|
||||
className="absolute bottom-0 left-1/2 w-32 h-48 md:w-40 md:h-60 bg-gradient-to-b from-cyan-100/20 to-blue-200/30 rounded-t-2xl md:rounded-t-3xl rounded-b-xl md:rounded-b-2xl shadow-2xl shadow-cyan-500/20 backdrop-blur-sm border border-cyan-300/30"
|
||||
style={{
|
||||
transform: "translateX(-50%)",
|
||||
animation: "bottleBreathe 6s ease-in-out infinite",
|
||||
}}
|
||||
>
|
||||
{/* 瓶口 */}
|
||||
<div className="absolute -top-4 md:-top-6 left-1/2 transform -translate-x-1/2 w-8 h-6 md:w-12 md:h-8 bg-gradient-to-b from-slate-700 to-slate-800 rounded-t-md md:rounded-t-lg shadow-lg"></div>
|
||||
|
||||
{/* 瓶內發光效果 - 脈動動畫 */}
|
||||
<div
|
||||
className="absolute inset-3 md:inset-4 bg-gradient-radial from-yellow-300/40 via-cyan-300/20 to-transparent rounded-t-xl md:rounded-t-2xl rounded-b-lg md:rounded-b-xl"
|
||||
style={{
|
||||
animation: "glowPulse 4s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* 瓶內的月亮和人物剪影 */}
|
||||
<div className="absolute bottom-6 md:bottom-8 left-1/2 transform -translate-x-1/2">
|
||||
<div
|
||||
className="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-yellow-300 to-yellow-400 rounded-full shadow-lg shadow-yellow-400/50 flex items-center justify-center"
|
||||
style={{
|
||||
animation: "moonGlow 8s ease-in-out infinite",
|
||||
}}
|
||||
>
|
||||
<div className="w-9 h-9 md:w-12 md:h-12 bg-yellow-200 rounded-full relative">
|
||||
<div className="absolute top-1.5 md:top-2 left-1.5 md:left-2 w-1.5 h-1.5 md:w-2 md:h-2 bg-yellow-400 rounded-full"></div>
|
||||
<div className="absolute bottom-0.5 md:bottom-1 right-1.5 md:right-2 w-0.5 h-0.5 md:w-1 md:h-1 bg-yellow-400 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 小人物剪影 */}
|
||||
<div className="absolute -top-3 md:-top-4 left-1/2 transform -translate-x-1/2 w-3 h-4 md:w-4 md:h-6 bg-slate-800 rounded-t-full"></div>
|
||||
</div>
|
||||
|
||||
{/* 瓶身光澤 */}
|
||||
<div className="absolute top-4 md:top-6 left-2 md:left-3 w-3 h-32 md:w-4 md:h-40 bg-white/20 rounded-full blur-sm"></div>
|
||||
|
||||
{/* 漂浮的光點 - 星光飄散動畫 */}
|
||||
<div
|
||||
className="absolute top-8 md:top-12 right-4 md:right-6 w-1.5 h-1.5 md:w-2 md:h-2 bg-cyan-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleFloat 8s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="absolute top-14 md:top-20 left-6 md:left-8 w-1 h-1 bg-yellow-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleDrift 10s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="absolute bottom-14 md:bottom-20 right-3 md:right-4 w-1 h-1 bg-blue-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleDance 7s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
|
||||
{/* 額外的星光粒子 */}
|
||||
<div
|
||||
className="absolute top-10 md:top-16 left-4 md:left-5 w-0.5 h-0.5 md:w-1 md:h-1 bg-pink-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleTwinkle 5s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="absolute bottom-10 md:bottom-16 left-5 md:left-7 w-0.5 h-0.5 md:w-1 md:h-1 bg-purple-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleGentle 12s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{/* 周圍的光芒 - 呼吸光暈 */}
|
||||
<div
|
||||
className="absolute bottom-0 left-1/2 w-36 h-36 md:w-48 md:h-48 bg-gradient-radial from-cyan-400/30 via-blue-500/20 to-transparent rounded-full blur-2xl -z-10"
|
||||
style={{
|
||||
transform: "translateX(-50%)",
|
||||
animation: "auraBreathe 6s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-4xl md:text-5xl lg:text-7xl font-bold text-white mb-4 md:mb-6 drop-shadow-2xl">
|
||||
心願星河
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl text-blue-100 mb-6 md:mb-8 leading-relaxed max-w-2xl mx-auto px-4">
|
||||
每一個工作困擾都值得被理解和支持
|
||||
<br className="hidden md:block" />
|
||||
<span className="md:hidden"> </span>
|
||||
讓我們用科技的力量，為你的職場挑戰找到解決方案
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 按鈕 */}
|
||||
<div className="flex flex-col gap-4 md:flex-row md:gap-6 justify-center px-4">
|
||||
<Link href="/submit" className="w-full md:w-auto">
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full md:w-auto text-base md:text-lg px-8 md:px-10 py-3 md:py-4 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white font-semibold shadow-xl shadow-cyan-500/25 hover:shadow-2xl hover:shadow-cyan-500/30 transform hover:scale-105 transition-all"
|
||||
>
|
||||
<MessageCircle className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3" />
|
||||
分享工作困擾
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/wishes" className="w-full md:w-auto">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="w-full md:w-auto text-base md:text-lg px-8 md:px-10 py-3 md:py-4 border-2 border-blue-400 bg-slate-800/50 hover:bg-slate-700/50 text-blue-100 hover:text-white font-semibold shadow-lg backdrop-blur-sm transform hover:scale-105 transition-all"
|
||||
>
|
||||
<Users className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3" />
|
||||
聆聽他人經歷
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Footer - 固定在底部 */}
|
||||
<footer className="bg-slate-900/80 backdrop-blur-sm border-t border-blue-800/50 py-6 md:py-8 flex-shrink-0 mt-auto">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<div className="flex items-center justify-center gap-2 md:gap-3 mb-3 md:mb-4">
|
||||
<div className="w-6 h-6 md:w-8 md:h-8 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
||||
<Sparkles className="w-3 h-3 md:w-5 md:h-5 text-white" />
|
||||
</div>
|
||||
<span className="text-lg md:text-xl font-semibold text-white">心願星河</span>
|
||||
</div>
|
||||
<p className="text-sm md:text-base text-blue-200">理解每一份職場困擾，用科技創造更好的工作環境</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* 內聯 CSS 動畫定義 */}
|
||||
<style jsx>{`
|
||||
@keyframes bottleBreathe {
|
||||
0%, 100% {
|
||||
transform: translateX(-50%) translateY(0px);
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-50%) translateY(-3px);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes auraBreathe {
|
||||
0%, 100% {
|
||||
opacity: 0.2;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
transform: translateX(-50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moonGlow {
|
||||
0%, 100% {
|
||||
filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.6));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-2px) scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleDrift {
|
||||
0%, 100% {
|
||||
transform: translateX(0px) translateY(0px) scale(1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(1px) translateY(-1px) scale(1.2);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleDance {
|
||||
0%, 100% {
|
||||
transform: translateX(0px) translateY(0px) scale(1);
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-1px) translateY(-2px) scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleTwinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.2;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleGentle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: translateY(-1px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
541
app/submit/page.tsx
Normal file
541
app/submit/page.tsx
Normal file
@@ -0,0 +1,541 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
import { useRouter } from "next/navigation"
|
||||
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 { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Sparkles, ArrowLeft, Send, BarChart3, Eye, EyeOff, Shield, Info } from "lucide-react"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
import { soundManager } from "@/lib/sound-effects"
|
||||
import HeaderMusicControl from "@/components/header-music-control"
|
||||
|
||||
export default function SubmitPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
title: "",
|
||||
currentPain: "",
|
||||
expectedSolution: "",
|
||||
expectedEffect: "",
|
||||
isPublic: true, // 預設為公開
|
||||
})
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const { toast } = useToast()
|
||||
const router = useRouter()
|
||||
|
||||
// 初始化音效系統
|
||||
useEffect(() => {
|
||||
const initSound = async () => {
|
||||
// 用戶首次點擊時啟動音頻上下文
|
||||
const handleFirstInteraction = async () => {
|
||||
await soundManager.play("hover") // 測試音效
|
||||
document.removeEventListener("click", handleFirstInteraction)
|
||||
}
|
||||
document.addEventListener("click", handleFirstInteraction)
|
||||
}
|
||||
initSound()
|
||||
}, [])
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
// 播放提交音效
|
||||
await soundManager.play("submit")
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 1500))
|
||||
|
||||
const wishes = JSON.parse(localStorage.getItem("wishes") || "[]")
|
||||
const newWish = {
|
||||
id: Date.now(),
|
||||
...formData,
|
||||
createdAt: new Date().toISOString(),
|
||||
}
|
||||
wishes.push(newWish)
|
||||
localStorage.setItem("wishes", JSON.stringify(wishes))
|
||||
|
||||
// 播放成功音效
|
||||
await soundManager.play("success")
|
||||
|
||||
toast({
|
||||
title: "你的困擾已成功提交",
|
||||
description: formData.isPublic
|
||||
? "正在為你準備專業的回饋，其他人也能看到你的分享..."
|
||||
: "正在為你準備專業的回饋，你的分享將保持私密...",
|
||||
})
|
||||
|
||||
setFormData({
|
||||
title: "",
|
||||
currentPain: "",
|
||||
expectedSolution: "",
|
||||
expectedEffect: "",
|
||||
isPublic: true,
|
||||
})
|
||||
setIsSubmitting(false)
|
||||
|
||||
// 跳轉到感謝頁面
|
||||
setTimeout(() => {
|
||||
router.push("/thank-you")
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const handleChange = (field: string, value: string | boolean) => {
|
||||
setFormData((prev) => ({ ...prev, [field]: value }))
|
||||
}
|
||||
|
||||
const handleButtonClick = async () => {
|
||||
await soundManager.play("click")
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 relative overflow-hidden">
|
||||
{/* 星空背景 - 手機優化 */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
{[...Array(25)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute w-0.5 h-0.5 md:w-1 md:h-1 bg-white rounded-full animate-pulse"
|
||||
style={{
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
animationDelay: `${Math.random() * 3}s`,
|
||||
animationDuration: `${2 + Math.random() * 2}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div className="absolute top-1/3 right-1/4 w-64 h-64 md:w-96 md:h-96 bg-gradient-radial from-cyan-400/20 via-blue-500/10 to-transparent rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
{/* Header - 修復跑版問題 */}
|
||||
<header className="border-b border-blue-800/50 bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50">
|
||||
<div className="container mx-auto px-3 sm:px-4 py-3 md:py-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
{/* Logo 區域 - 防止文字換行 */}
|
||||
<Link href="/" className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0">
|
||||
<div className="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
||||
<Sparkles className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<h1 className="text-base sm:text-lg md:text-2xl font-bold text-white whitespace-nowrap">心願星河</h1>
|
||||
</Link>
|
||||
|
||||
{/* 導航區域 */}
|
||||
<nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
|
||||
{/* 音樂控制 */}
|
||||
<div className="hidden sm:block">
|
||||
<HeaderMusicControl />
|
||||
</div>
|
||||
<div className="sm:hidden">
|
||||
<HeaderMusicControl mobileSimplified />
|
||||
</div>
|
||||
|
||||
{/* 桌面版完整導航 */}
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
<Link href="/analytics">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleButtonClick}
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-4"
|
||||
>
|
||||
<BarChart3 className="w-4 h-4 mr-2" />
|
||||
問題洞察
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/wishes">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleButtonClick}
|
||||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-4"
|
||||
>
|
||||
聆聽心聲
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 平板版導航 */}
|
||||
<div className="hidden sm:flex md:hidden items-center gap-1">
|
||||
<Link href="/">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/analytics">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
|
||||
>
|
||||
洞察
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/wishes">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-2 text-xs"
|
||||
>
|
||||
心聲
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 手機版導航 - 移除首頁按鈕，避免與 logo 功能重疊 */}
|
||||
<div className="flex sm:hidden items-center gap-1">
|
||||
<Link href="/analytics">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
|
||||
>
|
||||
洞察
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/wishes">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-2 text-xs"
|
||||
>
|
||||
心聲
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content - 手機優化 */}
|
||||
<main className="py-12 md:py-12 px-4">
|
||||
<div className="container mx-auto max-w-2xl">
|
||||
<div className="text-center mb-8 md:mb-10">
|
||||
{/* 小許願瓶 - 添加呼吸動畫 */}
|
||||
<div className="mb-10 md:mb-12">
|
||||
<div className="relative mx-auto w-16 h-22 md:w-20 md:h-28 mb-8 md:mb-10">
|
||||
<div
|
||||
className="absolute bottom-0 left-1/2 w-10 h-16 md:w-12 md:h-20 bg-gradient-to-b from-cyan-100/30 to-blue-200/40 rounded-t-lg md:rounded-t-xl rounded-b-md md:rounded-b-lg shadow-xl shadow-cyan-500/20 backdrop-blur-sm border border-cyan-300/30"
|
||||
style={{
|
||||
transform: "translateX(-50%)",
|
||||
animation: "bottleBreathe 6s ease-in-out infinite",
|
||||
}}
|
||||
>
|
||||
<div className="absolute -top-1.5 md:-top-2 left-1/2 transform -translate-x-1/2 w-2.5 h-2.5 md:w-3 md:h-3 bg-slate-700 rounded-t-sm md:rounded-t-md"></div>
|
||||
<div
|
||||
className="absolute inset-1.5 md:inset-2 bg-gradient-radial from-yellow-300/40 via-cyan-300/20 to-transparent rounded-t-md md:rounded-t-lg rounded-b-sm md:rounded-b-md"
|
||||
style={{
|
||||
animation: "glowPulse 4s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
<div className="absolute top-0.5 md:top-1 left-0.5 md:left-1 w-0.5 h-10 md:w-1 md:h-12 bg-white/20 rounded-full"></div>
|
||||
|
||||
{/* 小星光粒子 */}
|
||||
<div
|
||||
className="absolute top-2 right-2 w-0.5 h-0.5 bg-cyan-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleFloat 8s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="absolute bottom-3 left-2 w-0.5 h-0.5 bg-yellow-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleDrift 10s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="absolute top-6 left-3 w-0.5 h-0.5 bg-pink-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleTwinkle 5s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="absolute bottom-5 right-3 w-0.5 h-0.5 bg-purple-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleGentle 12s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{/* 呼吸光暈 */}
|
||||
<div
|
||||
className="absolute bottom-0 left-1/2 w-20 h-20 md:w-24 md:h-24 bg-gradient-radial from-cyan-400/20 via-blue-500/10 to-transparent rounded-full blur-xl -z-10"
|
||||
style={{
|
||||
transform: "translateX(-50%)",
|
||||
animation: "auraBreathe 6s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold text-white mb-3 md:mb-4">分享你的工作困擾</h2>
|
||||
<p className="text-blue-200 text-sm sm:text-base px-2 sm:px-4 leading-relaxed">
|
||||
每一個困擾都是改善的起點，我們會用專業的角度為你分析和建議
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-2xl bg-slate-800/50 backdrop-blur-sm border border-blue-700/50 mx-2 sm:mx-4 md:mx-0">
|
||||
<CardHeader className="px-3 sm:px-4 md:px-6 pt-4 md:pt-6 pb-3 md:pb-4">
|
||||
<CardTitle className="flex items-center gap-2 md:gap-3 text-xl md:text-2xl text-white">
|
||||
<div className="w-6 h-6 md:w-8 md:h-8 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
||||
<Send className="w-3 h-3 md:w-5 md:h-5 text-white" />
|
||||
</div>
|
||||
困擾分享
|
||||
</CardTitle>
|
||||
<CardDescription className="text-blue-200 text-sm md:text-base">
|
||||
請詳細描述你的工作困擾，我們會認真分析並提供專業建議
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="px-3 sm:px-4 md:px-6 pb-4 md:pb-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5 md:space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="title" className="text-blue-100 font-semibold text-sm md:text-base">
|
||||
困擾標題 *
|
||||
</Label>
|
||||
<Input
|
||||
id="title"
|
||||
placeholder="簡潔描述你遇到的主要問題..."
|
||||
value={formData.title}
|
||||
onChange={(e) => handleChange("title", e.target.value)}
|
||||
required
|
||||
className="bg-slate-700/50 border-blue-600/50 text-white placeholder:text-blue-300 focus:border-cyan-400 text-sm md:text-base"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="currentPain" className="text-blue-100 font-semibold text-sm md:text-base">
|
||||
具體困擾描述 *
|
||||
</Label>
|
||||
<Textarea
|
||||
id="currentPain"
|
||||
placeholder="詳細說明你在工作中遇到的困難，包括具體情況、影響程度等..."
|
||||
value={formData.currentPain}
|
||||
onChange={(e) => handleChange("currentPain", e.target.value)}
|
||||
rows={3}
|
||||
required
|
||||
className="bg-slate-700/50 border-blue-600/50 text-white placeholder:text-blue-300 focus:border-cyan-400 text-sm md:text-base resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="expectedSolution" className="text-blue-100 font-semibold text-sm md:text-base">
|
||||
期望的解決方式 *
|
||||
</Label>
|
||||
<Textarea
|
||||
id="expectedSolution"
|
||||
placeholder="你希望這個問題能夠如何被解決？有什麼想法或建議嗎？"
|
||||
value={formData.expectedSolution}
|
||||
onChange={(e) => handleChange("expectedSolution", e.target.value)}
|
||||
rows={3}
|
||||
required
|
||||
className="bg-slate-700/50 border-blue-600/50 text-white placeholder:text-blue-300 focus:border-cyan-400 text-sm md:text-base resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="expectedEffect" className="text-blue-100 font-semibold text-sm md:text-base">
|
||||
預期改善效果
|
||||
</Label>
|
||||
<Textarea
|
||||
id="expectedEffect"
|
||||
placeholder="如果問題解決了，你期望工作效率或環境會有什麼具體改善？"
|
||||
value={formData.expectedEffect}
|
||||
onChange={(e) => handleChange("expectedEffect", e.target.value)}
|
||||
rows={2}
|
||||
className="bg-slate-700/50 border-blue-600/50 text-white placeholder:text-blue-300 focus:border-cyan-400 text-sm md:text-base resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 隱私設定區塊 */}
|
||||
<div className="space-y-4 p-4 md:p-5 bg-gradient-to-r from-slate-700/30 to-slate-800/30 rounded-lg border border-slate-600/50">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-6 h-6 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-full flex items-center justify-center">
|
||||
<Shield className="w-3 h-3 text-white" />
|
||||
</div>
|
||||
<Label className="text-white font-semibold text-sm md:text-base">隱私設定</Label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Checkbox
|
||||
id="isPublic"
|
||||
checked={formData.isPublic}
|
||||
onCheckedChange={(checked) => handleChange("isPublic", checked as boolean)}
|
||||
className="mt-1 data-[state=checked]:bg-cyan-500 data-[state=checked]:border-cyan-500"
|
||||
/>
|
||||
<div className="space-y-2 flex-1">
|
||||
<Label
|
||||
htmlFor="isPublic"
|
||||
className="text-blue-100 font-medium text-sm md:text-base cursor-pointer flex items-center gap-2"
|
||||
>
|
||||
{formData.isPublic ? (
|
||||
<>
|
||||
<Eye className="w-4 h-4 text-cyan-400" />
|
||||
公開分享到「聆聽心聲」頁面
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<EyeOff className="w-4 h-4 text-slate-400" />
|
||||
保持私密，不公開分享
|
||||
</>
|
||||
)}
|
||||
</Label>
|
||||
<div className="text-xs md:text-sm text-slate-300 leading-relaxed">
|
||||
{formData.isPublic ? (
|
||||
<span>
|
||||
✅ 你的困擾將會出現在「聆聽心聲」頁面，讓其他人看到並產生共鳴
|
||||
<br />✅ 同時納入「問題洞察」分析，幫助改善整體工作環境
|
||||
</span>
|
||||
) : (
|
||||
<span>
|
||||
🔒 你的困擾將保持私密，不會出現在「聆聽心聲」頁面
|
||||
<br />✅ 仍會納入「問題洞察」分析，幫助開發者和管理者了解問題趨勢
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 說明區塊 */}
|
||||
<div className="mt-4 p-3 bg-slate-800/50 rounded-lg border border-slate-600/30">
|
||||
<div className="flex items-start gap-2">
|
||||
<Info className="w-4 h-4 text-blue-400 mt-0.5 flex-shrink-0" />
|
||||
<div className="text-xs md:text-sm text-slate-300 leading-relaxed">
|
||||
<p className="font-medium text-blue-200 mb-1">隱私保護說明：</p>
|
||||
<ul className="space-y-1 text-slate-400">
|
||||
<li>• 無論選擇公開或私密，你的個人身份都會保持匿名</li>
|
||||
<li>• 私密分享只用於統計分析，幫助了解整體問題狀況</li>
|
||||
<li>• 你可以隨時改變想法，但提交後無法修改此設定</li>
|
||||
<li>• 所有數據都會安全保存，僅用於改善工作環境</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 pt-2 md:pt-4">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting || !formData.title || !formData.currentPain || !formData.expectedSolution}
|
||||
className="flex-1 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 text-sm md:text-base py-2.5 md:py-3 transform hover:scale-105 transition-all"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
|
||||
提交中...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send className="w-4 h-4 mr-2" />
|
||||
{formData.isPublic ? "公開提交困擾" : "私密提交困擾"}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Link href="/wishes" className="md:w-auto">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleButtonClick}
|
||||
className="w-full md:w-auto border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 text-sm md:text-base py-2.5 md:py-3 transform hover:scale-105 transition-all"
|
||||
>
|
||||
查看其他經歷
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* 內聯 CSS 動畫定義 */}
|
||||
<style jsx>{`
|
||||
@keyframes bottleBreathe {
|
||||
0%, 100% {
|
||||
transform: translateX(-50%) translateY(0px);
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-50%) translateY(-3px);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes auraBreathe {
|
||||
0%, 100% {
|
||||
opacity: 0.2;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
transform: translateX(-50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-2px) scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleDrift {
|
||||
0%, 100% {
|
||||
transform: translateX(0px) translateY(0px) scale(1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(1px) translateY(-1px) scale(1.2);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleTwinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.2;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleGentle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: translateY(-1px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
488
app/test/page.tsx
Normal file
488
app/test/page.tsx
Normal file
@@ -0,0 +1,488 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Sparkles, Volume2, VolumeX, Play, Pause, RotateCcw } from "lucide-react"
|
||||
import { soundManager } from "@/lib/sound-effects"
|
||||
|
||||
export default function TestPage() {
|
||||
const [soundEnabled, setSoundEnabled] = useState(true)
|
||||
const [animationPaused, setAnimationPaused] = useState(false)
|
||||
const [animationStatus, setAnimationStatus] = useState<string>("檢查中...")
|
||||
|
||||
useEffect(() => {
|
||||
// 檢查動畫是否正常運作
|
||||
const checkAnimations = () => {
|
||||
const testElement = document.createElement("div")
|
||||
testElement.className = "animate-pulse"
|
||||
testElement.style.position = "absolute"
|
||||
testElement.style.top = "-1000px"
|
||||
document.body.appendChild(testElement)
|
||||
|
||||
const computedStyle = window.getComputedStyle(testElement)
|
||||
const animationName = computedStyle.animationName
|
||||
|
||||
document.body.removeChild(testElement)
|
||||
|
||||
if (animationName && animationName !== "none") {
|
||||
setAnimationStatus("✅ 動畫系統正常")
|
||||
} else {
|
||||
setAnimationStatus("❌ 動畫系統異常")
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(checkAnimations, 1000)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
// 初始化音效系統
|
||||
const initSound = async () => {
|
||||
const handleFirstInteraction = async () => {
|
||||
await soundManager.play("hover")
|
||||
document.removeEventListener("click", handleFirstInteraction)
|
||||
}
|
||||
document.addEventListener("click", handleFirstInteraction)
|
||||
}
|
||||
initSound()
|
||||
}, [])
|
||||
|
||||
const playSound = async (soundName: string) => {
|
||||
if (soundEnabled) {
|
||||
await soundManager.play(soundName)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleSound = () => {
|
||||
setSoundEnabled(!soundEnabled)
|
||||
soundManager.toggle()
|
||||
}
|
||||
|
||||
const toggleAnimation = () => {
|
||||
setAnimationPaused(!animationPaused)
|
||||
const style = document.createElement("style")
|
||||
style.textContent = animationPaused
|
||||
? ""
|
||||
: `
|
||||
* {
|
||||
animation-play-state: paused !important;
|
||||
}
|
||||
`
|
||||
style.id = "animation-control"
|
||||
|
||||
const existing = document.getElementById("animation-control")
|
||||
if (existing) {
|
||||
existing.remove()
|
||||
}
|
||||
|
||||
if (!animationPaused) {
|
||||
document.head.appendChild(style)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 relative overflow-hidden">
|
||||
{/* 星空背景 */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
{[...Array(30)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute w-1 h-1 bg-white rounded-full animate-pulse"
|
||||
style={{
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
animationDelay: `${Math.random() * 3}s`,
|
||||
animationDuration: `${2 + Math.random() * 2}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div className="absolute top-1/4 left-1/2 transform -translate-x-1/2 w-96 h-96 bg-gradient-radial from-cyan-400/20 via-blue-500/10 to-transparent rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<header className="border-b border-blue-800/50 bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50">
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
||||
<Sparkles className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white">音效動畫測試中心</h1>
|
||||
<Badge className="bg-red-500/20 text-red-200 border border-red-400/30">隱藏頁面</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={toggleSound}
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50"
|
||||
>
|
||||
{soundEnabled ? <Volume2 className="w-4 h-4 mr-2" /> : <VolumeX className="w-4 h-4 mr-2" />}
|
||||
{soundEnabled ? "音效開啟" : "音效關閉"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={toggleAnimation}
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50"
|
||||
>
|
||||
{animationPaused ? <Play className="w-4 h-4 mr-2" /> : <Pause className="w-4 h-4 mr-2" />}
|
||||
{animationPaused ? "恢復動畫" : "暫停動畫"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="py-12 px-4">
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<div className="grid lg:grid-cols-2 gap-8">
|
||||
{/* 音效測試區 */}
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-blue-700/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white flex items-center gap-3">
|
||||
<Volume2 className="w-6 h-6 text-cyan-400" />
|
||||
音效測試區
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Button
|
||||
onClick={() => playSound("click")}
|
||||
className="bg-gradient-to-r from-blue-500 to-cyan-600 hover:from-blue-600 hover:to-cyan-700 text-white"
|
||||
>
|
||||
🔘 點擊音效
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => playSound("hover")}
|
||||
className="bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white"
|
||||
>
|
||||
✨ 懸停音效
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => playSound("submit")}
|
||||
className="bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white"
|
||||
>
|
||||
📤 提交音效
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => playSound("success")}
|
||||
className="bg-gradient-to-r from-yellow-500 to-orange-600 hover:from-yellow-600 hover:to-orange-700 text-white"
|
||||
>
|
||||
🎉 成功音效
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 p-4 bg-slate-700/30 rounded-lg">
|
||||
<h4 className="text-white font-semibold mb-2">音效說明：</h4>
|
||||
<ul className="text-blue-200 text-sm space-y-1">
|
||||
<li>
|
||||
• <strong>點擊音效</strong>：溫柔的水滴聲，用於按鈕點擊
|
||||
</li>
|
||||
<li>
|
||||
• <strong>懸停音效</strong>：輕柔的鈴聲，用於滑鼠懸停
|
||||
</li>
|
||||
<li>
|
||||
• <strong>提交音效</strong>：和諧的三音和弦，用於表單提交
|
||||
</li>
|
||||
<li>
|
||||
• <strong>成功音效</strong>：豐富的四音和弦，用於操作成功
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 動畫測試區 */}
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-blue-700/50">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white flex items-center gap-3">
|
||||
<Sparkles className="w-6 h-6 text-cyan-400" />
|
||||
動畫測試區
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{/* 許願瓶動畫展示 - 使用內聯樣式確保動畫運作 */}
|
||||
<div className="text-center mb-8">
|
||||
<h4 className="text-white font-semibold mb-4">許願瓶呼吸動畫</h4>
|
||||
<div className="relative mx-auto w-24 h-32 mb-6">
|
||||
<div
|
||||
className="absolute bottom-0 left-1/2 w-16 h-24 bg-gradient-to-b from-cyan-100/30 to-blue-200/40 rounded-t-xl rounded-b-lg shadow-xl shadow-cyan-500/20 backdrop-blur-sm border border-cyan-300/30"
|
||||
style={{
|
||||
transform: "translateX(-50%)",
|
||||
animation: "bottleBreathe 6s ease-in-out infinite",
|
||||
}}
|
||||
>
|
||||
<div className="absolute -top-2 left-1/2 transform -translate-x-1/2 w-4 h-3 bg-slate-700 rounded-t-md"></div>
|
||||
<div
|
||||
className="absolute inset-2 bg-gradient-radial from-yellow-300/40 via-cyan-300/20 to-transparent rounded-t-lg rounded-b-md"
|
||||
style={{
|
||||
animation: "glowPulse 4s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
<div className="absolute top-1 left-1 w-1 h-16 bg-white/20 rounded-full"></div>
|
||||
|
||||
{/* 星光粒子 - 使用內聯動畫 */}
|
||||
<div
|
||||
className="absolute top-3 right-3 w-1 h-1 bg-cyan-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleFloat 8s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="absolute bottom-4 left-3 w-1 h-1 bg-yellow-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleDrift 10s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="absolute top-8 left-4 w-1 h-1 bg-pink-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleTwinkle 5s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
className="absolute bottom-6 right-4 w-1 h-1 bg-purple-300 rounded-full"
|
||||
style={{
|
||||
animation: "sparkleGentle 12s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{/* 呼吸光暈 */}
|
||||
<div
|
||||
className="absolute bottom-0 left-1/2 w-28 h-28 bg-gradient-radial from-cyan-400/20 via-blue-500/10 to-transparent rounded-full blur-xl -z-10"
|
||||
style={{
|
||||
transform: "translateX(-50%)",
|
||||
animation: "auraBreathe 6s ease-in-out infinite",
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 動畫說明 */}
|
||||
<div className="p-4 bg-slate-700/30 rounded-lg">
|
||||
<h4 className="text-white font-semibold mb-2">動畫說明：</h4>
|
||||
<ul className="text-blue-200 text-sm space-y-1">
|
||||
<li>
|
||||
• <strong>瓶身呼吸</strong>：6秒週期的上下浮動 + 亮度變化
|
||||
</li>
|
||||
<li>
|
||||
• <strong>內部發光</strong>：4秒週期的脈動效果
|
||||
</li>
|
||||
<li>
|
||||
• <strong>光暈呼吸</strong>：6秒週期的透明度和縮放變化
|
||||
</li>
|
||||
<li>
|
||||
• <strong>星光粒子</strong>：4種不同的飄散動畫
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* 動畫狀態顯示 */}
|
||||
<div className="mt-4 p-3 bg-slate-700/50 rounded-lg">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-blue-200 text-sm">動畫系統狀態：</span>
|
||||
<Badge
|
||||
className={
|
||||
animationStatus.includes("✅") ? "bg-green-500/20 text-green-200" : "bg-red-500/20 text-red-200"
|
||||
}
|
||||
>
|
||||
{animationStatus}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 內聯 CSS 動畫定義 */}
|
||||
<style jsx>{`
|
||||
@keyframes bottleBreathe {
|
||||
0%, 100% {
|
||||
transform: translateX(-50%) translateY(0px);
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-50%) translateY(-3px);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes auraBreathe {
|
||||
0%, 100% {
|
||||
opacity: 0.2;
|
||||
transform: translateX(-50%) scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
transform: translateX(-50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
filter: brightness(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-2px) scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleDrift {
|
||||
0%, 100% {
|
||||
transform: translateX(0px) translateY(0px) scale(1);
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(1px) translateY(-1px) scale(1.2);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleTwinkle {
|
||||
0%, 100% {
|
||||
opacity: 0.2;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkleGentle {
|
||||
0%, 100% {
|
||||
opacity: 0.3;
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: translateY(-1px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 星光粒子測試區 */}
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-blue-700/50 mt-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white flex items-center gap-3">✨ 星光粒子動畫測試</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-4 gap-8 text-center">
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-4">Float 飄浮</h4>
|
||||
<div className="relative h-16 flex items-center justify-center">
|
||||
<div
|
||||
className="w-3 h-3 bg-cyan-300 rounded-full"
|
||||
style={{ animation: "sparkleFloat 8s ease-in-out infinite" }}
|
||||
></div>
|
||||
</div>
|
||||
<p className="text-blue-200 text-xs mt-2">8秒週期上下飄動</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-4">Drift 漂移</h4>
|
||||
<div className="relative h-16 flex items-center justify-center">
|
||||
<div
|
||||
className="w-3 h-3 bg-yellow-300 rounded-full"
|
||||
style={{ animation: "sparkleDrift 10s ease-in-out infinite" }}
|
||||
></div>
|
||||
</div>
|
||||
<p className="text-blue-200 text-xs mt-2">10秒週期左右漂移</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-4">Twinkle 閃爍</h4>
|
||||
<div className="relative h-16 flex items-center justify-center">
|
||||
<div
|
||||
className="w-3 h-3 bg-pink-300 rounded-full"
|
||||
style={{ animation: "sparkleTwinkle 5s ease-in-out infinite" }}
|
||||
></div>
|
||||
</div>
|
||||
<p className="text-blue-200 text-xs mt-2">5秒週期透明度變化</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-white font-semibold mb-4">Gentle 溫柔</h4>
|
||||
<div className="relative h-16 flex items-center justify-center">
|
||||
<div
|
||||
className="w-3 h-3 bg-purple-300 rounded-full"
|
||||
style={{ animation: "sparkleGentle 12s ease-in-out infinite" }}
|
||||
></div>
|
||||
</div>
|
||||
<p className="text-blue-200 text-xs mt-2">12秒週期旋轉飄動</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 測試控制區 */}
|
||||
<Card className="bg-slate-800/50 backdrop-blur-sm border border-blue-700/50 mt-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-white flex items-center gap-3">🎛️ 測試控制</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Button
|
||||
onClick={() => window.location.reload()}
|
||||
className="bg-gradient-to-r from-slate-500 to-slate-600 hover:from-slate-600 hover:to-slate-700 text-white"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4 mr-2" />
|
||||
重新載入頁面
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => {
|
||||
playSound("click")
|
||||
setTimeout(() => playSound("submit"), 500)
|
||||
setTimeout(() => playSound("success"), 1000)
|
||||
}}
|
||||
className="bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white"
|
||||
>
|
||||
🎵 播放音效序列
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={() => window.open("/", "_blank")}
|
||||
className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white"
|
||||
>
|
||||
🏠 回到主頁面
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 p-4 bg-slate-700/30 rounded-lg">
|
||||
<h4 className="text-white font-semibold mb-2">測試說明：</h4>
|
||||
<ul className="text-blue-200 text-sm space-y-1">
|
||||
<li>
|
||||
• 這是隱藏的測試頁面，訪問路徑：<code className="bg-slate-600 px-1 rounded">/test</code>
|
||||
</li>
|
||||
<li>• 可以單獨測試每個音效和動畫效果</li>
|
||||
<li>• 使用右上角的控制按鈕來開關音效和暫停動畫</li>
|
||||
<li>• 所有效果都會在實際頁面中正常運作</li>
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
10
app/thank-you/loading.tsx
Normal file
10
app/thank-you/loading.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
export default function Loading() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 border-4 border-pink-400 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
|
||||
<div className="text-white text-xl">正在準備感謝...</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
434
app/thank-you/page.tsx
Normal file
434
app/thank-you/page.tsx
Normal file
@@ -0,0 +1,434 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Sparkles, Heart, Users, ArrowRight, Home, MessageCircle, BarChart3, Eye, EyeOff } from "lucide-react"
|
||||
import HeaderMusicControl from "@/components/header-music-control"
|
||||
|
||||
export default function ThankYouPage() {
|
||||
const [wishes, setWishes] = useState<any[]>([])
|
||||
const [showContent, setShowContent] = useState(false)
|
||||
const [lastWishIsPublic, setLastWishIsPublic] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
const savedWishes = JSON.parse(localStorage.getItem("wishes") || "[]")
|
||||
setWishes(savedWishes)
|
||||
|
||||
// 檢查最後一個提交的願望是否為公開
|
||||
if (savedWishes.length > 0) {
|
||||
const lastWish = savedWishes[savedWishes.length - 1]
|
||||
setLastWishIsPublic(lastWish.isPublic !== false)
|
||||
}
|
||||
|
||||
// 延遲顯示內容，創造進入效果
|
||||
setTimeout(() => setShowContent(true), 300)
|
||||
}, [])
|
||||
|
||||
const totalWishes = wishes.length
|
||||
const publicWishes = wishes.filter((wish) => wish.isPublic !== false).length
|
||||
const privateWishes = wishes.filter((wish) => wish.isPublic === false).length
|
||||
const thisWeek = wishes.filter((wish) => {
|
||||
const wishDate = new Date(wish.createdAt)
|
||||
const oneWeekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)
|
||||
return wishDate >= oneWeekAgo
|
||||
}).length
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 relative overflow-hidden">
|
||||
{/* 增強的星空背景 */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
{/* 更多的星星 */}
|
||||
{[...Array(50)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute w-0.5 h-0.5 md:w-1 md:h-1 bg-white rounded-full animate-pulse"
|
||||
style={{
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
animationDelay: `${Math.random() * 3}s`,
|
||||
animationDuration: `${2 + Math.random() * 2}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* 特殊的感謝星星 */}
|
||||
{[...Array(20)].map((_, i) => (
|
||||
<div
|
||||
key={`special-${i}`}
|
||||
className="absolute w-1 h-1 md:w-2 md:h-2 bg-gradient-to-r from-pink-300 to-yellow-300 rounded-full animate-pulse opacity-80"
|
||||
style={{
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
animationDelay: `${Math.random() * 4}s`,
|
||||
animationDuration: `${3 + Math.random() * 2}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* 光芒效果 */}
|
||||
<div className="absolute top-1/4 left-1/2 transform -translate-x-1/2 w-96 h-96 md:w-[600px] md:h-[600px] bg-gradient-radial from-pink-400/30 via-purple-500/20 to-transparent rounded-full blur-3xl animate-pulse"></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-64 h-64 md:w-96 md:h-96 bg-gradient-radial from-cyan-400/20 via-blue-500/10 to-transparent rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
{/* Header - 修復跑版問題 */}
|
||||
<header className="border-b border-blue-800/50 bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50">
|
||||
<div className="container mx-auto px-3 sm:px-4 py-3 md:py-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
{/* Logo 區域 - 防止文字換行 */}
|
||||
<Link href="/" className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0">
|
||||
<div className="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
||||
<Sparkles className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<h1 className="text-base sm:text-lg md:text-2xl font-bold text-white whitespace-nowrap">心願星河</h1>
|
||||
</Link>
|
||||
|
||||
{/* 導航區域 */}
|
||||
<nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
|
||||
{/* 音樂控制 */}
|
||||
<div className="hidden sm:block">
|
||||
<HeaderMusicControl />
|
||||
</div>
|
||||
<div className="sm:hidden">
|
||||
<HeaderMusicControl mobileSimplified />
|
||||
</div>
|
||||
|
||||
{/* 桌面版完整導航 */}
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
<Link href="/analytics">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-4"
|
||||
>
|
||||
<BarChart3 className="w-4 h-4 mr-2" />
|
||||
問題洞察
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/wishes">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-4"
|
||||
>
|
||||
聆聽心聲
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 平板版導航 */}
|
||||
<div className="hidden sm:flex md:hidden items-center gap-1">
|
||||
<Link href="/">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2"
|
||||
>
|
||||
<Home className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/analytics">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
|
||||
>
|
||||
洞察
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/wishes">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-2 text-xs"
|
||||
>
|
||||
心聲
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 手機版導航 - 移除首頁按鈕，避免與 logo 功能重疊 */}
|
||||
<div className="flex sm:hidden items-center gap-1">
|
||||
<Link href="/analytics">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
|
||||
>
|
||||
洞察
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/wishes">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 px-2 text-xs"
|
||||
>
|
||||
心聲
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="py-8 md:py-16 px-4">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<div
|
||||
className={`transition-all duration-1000 ${showContent ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"}`}
|
||||
>
|
||||
{/* 感謝標題區域 */}
|
||||
<div className="text-center mb-12 md:mb-16">
|
||||
{/* 感謝圖標 */}
|
||||
<div className="mb-6 md:mb-8">
|
||||
<div className="relative mx-auto w-24 h-24 md:w-32 md:h-32 mb-4 md:mb-6">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-pink-400 to-purple-500 rounded-full animate-pulse shadow-2xl shadow-pink-500/50"></div>
|
||||
<div className="absolute inset-2 bg-gradient-to-br from-pink-300 to-purple-400 rounded-full flex items-center justify-center">
|
||||
<Heart className="w-10 h-10 md:w-16 md:h-16 text-white animate-pulse" fill="currentColor" />
|
||||
</div>
|
||||
|
||||
{/* 周圍的小心心 */}
|
||||
{[...Array(8)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute w-3 h-3 md:w-4 md:h-4 text-pink-300 animate-bounce"
|
||||
style={{
|
||||
left: `${50 + 40 * Math.cos((i * Math.PI * 2) / 8)}%`,
|
||||
top: `${50 + 40 * Math.sin((i * Math.PI * 2) / 8)}%`,
|
||||
animationDelay: `${i * 0.2}s`,
|
||||
transform: "translate(-50%, -50%)",
|
||||
}}
|
||||
>
|
||||
<Heart className="w-full h-full" fill="currentColor" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-white mb-4 md:mb-6 bg-gradient-to-r from-pink-300 via-purple-300 to-cyan-300 bg-clip-text text-transparent">
|
||||
感謝你的信任與分享
|
||||
</h1>
|
||||
|
||||
<div className="max-w-2xl mx-auto space-y-4 md:space-y-6">
|
||||
<p className="text-xl md:text-2xl text-blue-100 leading-relaxed">
|
||||
你的困擾已經成功提交，我們會認真分析並提供專業建議
|
||||
</p>
|
||||
<p className="text-lg md:text-xl text-blue-200 leading-relaxed">
|
||||
每一個真實的工作困擾都是改善的起點，你的分享將幫助我們創造更好的解決方案
|
||||
</p>
|
||||
<p className="text-base md:text-lg text-blue-300 leading-relaxed">
|
||||
我們的專業團隊會仔細研究你的案例，用科技的力量為你和更多人解決職場挑戰
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 隱私狀態說明 */}
|
||||
<div className="mt-6 md:mt-8">
|
||||
<div
|
||||
className={`inline-flex items-center gap-2 px-4 py-2 rounded-full border ${
|
||||
lastWishIsPublic
|
||||
? "bg-cyan-500/20 border-cyan-400/50 text-cyan-200"
|
||||
: "bg-slate-600/20 border-slate-500/50 text-slate-300"
|
||||
}`}
|
||||
>
|
||||
{lastWishIsPublic ? (
|
||||
<>
|
||||
<Eye className="w-4 h-4" />
|
||||
<span className="text-sm md:text-base">你的分享已公開，其他人可以看到並產生共鳴</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<EyeOff className="w-4 h-4" />
|
||||
<span className="text-sm md:text-base">你的分享保持私密，僅用於問題分析和改善</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 統計卡片 */}
|
||||
<div className="grid sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6 md:gap-8 mb-8 sm:mb-12 md:mb-16">
|
||||
<Card className="bg-gradient-to-br from-pink-800/30 to-purple-800/30 backdrop-blur-sm border border-pink-600/50 shadow-2xl shadow-pink-500/20 transform hover:scale-105 transition-all duration-300">
|
||||
<CardContent className="p-4 sm:p-6 md:p-8 text-center">
|
||||
<div className="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-pink-400 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-pink-500/30">
|
||||
<Users className="w-6 h-6 md:w-8 md:h-8 text-white" />
|
||||
</div>
|
||||
<div className="text-3xl md:text-4xl font-bold text-white mb-2">{totalWishes}</div>
|
||||
<div className="text-pink-200 text-sm md:text-base">個案例已收集</div>
|
||||
<div className="text-pink-300 text-xs md:text-sm mt-1">包括你剛才分享的經歷</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-br from-cyan-800/30 to-blue-800/30 backdrop-blur-sm border border-cyan-600/50 shadow-2xl shadow-cyan-500/20 transform hover:scale-105 transition-all duration-300">
|
||||
<CardContent className="p-4 sm:p-6 md:p-8 text-center">
|
||||
<div className="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-cyan-500/30">
|
||||
<Sparkles className="w-6 h-6 md:w-8 md:h-8 text-white" />
|
||||
</div>
|
||||
<div className="text-3xl md:text-4xl font-bold text-white mb-2">{thisWeek}</div>
|
||||
<div className="text-cyan-200 text-sm md:text-base">本週新增案例</div>
|
||||
<div className="text-cyan-300 text-xs md:text-sm mt-1">你不是一個人在面對挑戰</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-gradient-to-br from-purple-800/30 to-indigo-800/30 backdrop-blur-sm border border-purple-600/50 shadow-2xl shadow-purple-500/20 transform hover:scale-105 transition-all duration-300">
|
||||
<CardContent className="p-4 sm:p-6 md:p-8 text-center">
|
||||
<div className="w-12 h-12 md:w-16 md:h-16 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg shadow-purple-500/30">
|
||||
<Heart className="w-6 h-6 md:w-8 md:h-8 text-white" fill="currentColor" />
|
||||
</div>
|
||||
<div className="text-3xl md:text-4xl font-bold text-white mb-2">∞</div>
|
||||
<div className="text-purple-200 text-sm md:text-base">無限的可能性</div>
|
||||
<div className="text-purple-300 text-xs md:text-sm mt-1">每個問題都能找到解決方案</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 隱私統計說明 */}
|
||||
{privateWishes > 0 && (
|
||||
<div className="text-center mb-8 md:mb-12">
|
||||
<div className="inline-flex items-center gap-4 bg-slate-800/50 backdrop-blur-sm rounded-lg px-4 md:px-6 py-3 md:py-4 border border-slate-600/50">
|
||||
<div className="flex items-center gap-2 text-cyan-200">
|
||||
<Eye className="w-4 h-4" />
|
||||
<span className="text-sm md:text-base font-medium">{publicWishes} 個公開案例</span>
|
||||
</div>
|
||||
<div className="w-px h-6 bg-slate-600"></div>
|
||||
<div className="flex items-center gap-2 text-slate-300">
|
||||
<EyeOff className="w-4 h-4" />
|
||||
<span className="text-sm md:text-base font-medium">{privateWishes} 個私密案例</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs md:text-sm text-slate-400 mt-2 px-4">
|
||||
所有案例都會用於問題分析，幫助改善整體工作環境
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 激勵訊息卡片 */}
|
||||
<Card className="bg-gradient-to-r from-slate-800/80 to-slate-900/80 backdrop-blur-sm border border-slate-600/50 shadow-2xl mb-12 md:mb-16">
|
||||
<CardContent className="p-4 sm:p-6 md:p-8 lg:p-12">
|
||||
<div className="text-center space-y-4 sm:space-y-6 md:space-y-8">
|
||||
<div className="flex items-center justify-center gap-4 mb-6">
|
||||
<div className="w-2 h-2 bg-pink-400 rounded-full animate-pulse"></div>
|
||||
<div
|
||||
className="w-3 h-3 bg-purple-400 rounded-full animate-pulse"
|
||||
style={{ animationDelay: "0.5s" }}
|
||||
></div>
|
||||
<div
|
||||
className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"
|
||||
style={{ animationDelay: "1s" }}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-6">你的分享推動了積極的改變</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6 md:gap-8 text-left">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg md:text-xl font-semibold text-blue-200 flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5 text-cyan-400" />
|
||||
勇於面對挑戰
|
||||
</h3>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
願意分享工作困擾需要勇氣。你的坦誠讓我們能夠深入了解職場的真實挑戰，這是解決問題的重要第一步。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg md:text-xl font-semibold text-purple-200 flex items-center gap-2">
|
||||
<Heart className="w-5 h-5 text-pink-400" fill="currentColor" />
|
||||
共同的使命
|
||||
</h3>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
在這個平台上，有許多和你面臨相似挑戰的人。你的經驗分享讓大家知道，我們都在為更好的工作環境而努力。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg md:text-xl font-semibold text-green-200 flex items-center gap-2">
|
||||
<ArrowRight className="w-5 h-5 text-green-400" />
|
||||
推動實際改變
|
||||
</h3>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
每一個案例都是我們開發解決方案的重要依據。你的困擾將幫助我們創造更智能、更實用的工作工具。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg md:text-xl font-semibold text-yellow-200 flex items-center gap-2">
|
||||
<Sparkles className="w-5 h-5 text-yellow-400" />
|
||||
創造更好未來
|
||||
</h3>
|
||||
<p className="text-slate-300 leading-relaxed">
|
||||
我們相信科技能夠讓工作變得更有效率、更有意義。你的分享是實現這個目標的重要推動力。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 行動按鈕 */}
|
||||
<div className="text-center space-y-6 md:space-y-8">
|
||||
<h3 className="text-xl md:text-2xl font-semibold text-white mb-6">接下來你可以...</h3>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4 md:gap-6 justify-center max-w-2xl mx-auto">
|
||||
{lastWishIsPublic ? (
|
||||
<Link href="/wishes" className="flex-1">
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full text-base md:text-lg px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white font-semibold shadow-xl shadow-purple-500/25 hover:shadow-2xl hover:shadow-purple-500/30 transform hover:scale-105 transition-all"
|
||||
>
|
||||
<MessageCircle className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3" />
|
||||
查看你的公開分享
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<Link href="/wishes" className="flex-1">
|
||||
<Button
|
||||
size="lg"
|
||||
className="w-full text-base md:text-lg px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white font-semibold shadow-xl shadow-purple-500/25 hover:shadow-2xl hover:shadow-purple-500/30 transform hover:scale-105 transition-all"
|
||||
>
|
||||
<MessageCircle className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3" />
|
||||
查看其他公開經歷
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<Link href="/analytics" className="flex-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="w-full text-base md:text-lg px-6 md:px-8 py-3 md:py-4 border-2 border-cyan-400 bg-slate-800/50 hover:bg-slate-700/50 text-cyan-100 hover:text-white font-semibold shadow-lg backdrop-blur-sm transform hover:scale-105 transition-all"
|
||||
>
|
||||
<Sparkles className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3" />
|
||||
查看問題分析
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="pt-4">
|
||||
<Link href="/">
|
||||
<Button variant="ghost" className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-6 py-2">
|
||||
<Home className="w-4 h-4 mr-2" />
|
||||
回到首頁
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 底部激勵訊息 */}
|
||||
<div className="text-center mt-16 md:mt-20 p-6 md:p-8 bg-gradient-to-r from-slate-800/30 to-slate-900/30 rounded-2xl border border-slate-600/30 backdrop-blur-sm">
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<Heart className="w-5 h-5 text-pink-400 animate-pulse" fill="currentColor" />
|
||||
<Sparkles className="w-5 h-5 text-cyan-400 animate-pulse" />
|
||||
<Heart className="w-5 h-5 text-purple-400 animate-pulse" fill="currentColor" />
|
||||
</div>
|
||||
<p className="text-lg md:text-xl text-blue-200 font-medium mb-2">再次感謝你的信任與分享</p>
|
||||
<p className="text-sm md:text-base text-blue-300">每一份真實的經歷都是推動職場環境改善的重要力量</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
3
app/wishes/loading.tsx
Normal file
3
app/wishes/loading.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export default function Loading() {
|
||||
return null
|
||||
}
|
||||
413
app/wishes/page.tsx
Normal file
413
app/wishes/page.tsx
Normal file
@@ -0,0 +1,413 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Sparkles, ArrowLeft, Search, Plus, Filter, X, BarChart3, Eye, Users } from "lucide-react"
|
||||
import WishCard from "@/components/wish-card"
|
||||
import HeaderMusicControl from "@/components/header-music-control"
|
||||
import { categories, categorizeWishMultiple, getCategoryStats, type Wish } from "@/lib/categorization"
|
||||
|
||||
export default function WishesPage() {
|
||||
const [wishes, setWishes] = useState<Wish[]>([])
|
||||
const [publicWishes, setPublicWishes] = useState<Wish[]>([])
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
const [selectedCategories, setSelectedCategories] = useState<string[]>([])
|
||||
const [filteredWishes, setFilteredWishes] = useState<Wish[]>([])
|
||||
const [categoryStats, setCategoryStats] = useState<{ [key: string]: number }>({})
|
||||
const [showFilters, setShowFilters] = useState(false)
|
||||
const [totalWishes, setTotalWishes] = useState(0)
|
||||
const [privateCount, setPrivateCount] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
const savedWishes = JSON.parse(localStorage.getItem("wishes") || "[]")
|
||||
const publicOnly = savedWishes.filter((wish: Wish & { isPublic?: boolean }) => wish.isPublic !== false)
|
||||
const privateOnly = savedWishes.filter((wish: Wish & { isPublic?: boolean }) => wish.isPublic === false)
|
||||
|
||||
setWishes(savedWishes)
|
||||
setPublicWishes(publicOnly.reverse())
|
||||
setTotalWishes(savedWishes.length)
|
||||
setPrivateCount(privateOnly.length)
|
||||
setCategoryStats(getCategoryStats(publicOnly)) // 只統計公開的困擾
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let filtered = publicWishes
|
||||
|
||||
// 按搜尋詞篩選
|
||||
if (searchTerm) {
|
||||
filtered = filtered.filter(
|
||||
(wish) =>
|
||||
wish.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
wish.currentPain.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
wish.expectedSolution.toLowerCase().includes(searchTerm.toLowerCase()),
|
||||
)
|
||||
}
|
||||
|
||||
// 按分類篩選（支持多標籤）
|
||||
if (selectedCategories.length > 0) {
|
||||
filtered = filtered.filter((wish) => {
|
||||
const wishCategories = categorizeWishMultiple(wish)
|
||||
return selectedCategories.some((selectedCategory) =>
|
||||
wishCategories.some((wishCategory) => wishCategory.name === selectedCategory),
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
setFilteredWishes(filtered)
|
||||
}, [publicWishes, searchTerm, selectedCategories])
|
||||
|
||||
const toggleCategory = (categoryName: string) => {
|
||||
setSelectedCategories((prev) =>
|
||||
prev.includes(categoryName) ? prev.filter((cat) => cat !== categoryName) : [...prev, categoryName],
|
||||
)
|
||||
}
|
||||
|
||||
const clearAllFilters = () => {
|
||||
setSelectedCategories([])
|
||||
setSearchTerm("")
|
||||
}
|
||||
|
||||
const hasActiveFilters = selectedCategories.length > 0 || searchTerm.length > 0
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-blue-900 to-indigo-900 relative overflow-hidden">
|
||||
{/* 星空背景 - 手機優化 */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
{[...Array(25)].map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute w-0.5 h-0.5 md:w-1 md:h-1 bg-white rounded-full animate-pulse"
|
||||
style={{
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 100}%`,
|
||||
animationDelay: `${Math.random() * 3}s`,
|
||||
animationDuration: `${2 + Math.random() * 2}s`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
<div className="absolute top-1/4 left-1/3 w-64 h-64 md:w-96 md:h-96 bg-gradient-radial from-cyan-400/20 via-blue-500/10 to-transparent rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
{/* Header - 修復跑版問題 */}
|
||||
<header className="border-b border-blue-800/50 bg-slate-900/80 backdrop-blur-sm sticky top-0 z-50">
|
||||
<div className="container mx-auto px-3 sm:px-4 py-3 md:py-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
{/* Logo 區域 - 防止文字換行 */}
|
||||
<Link href="/" className="flex items-center gap-2 md:gap-3 min-w-0 flex-shrink-0">
|
||||
<div className="w-7 h-7 sm:w-8 sm:h-8 md:w-10 md:h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center shadow-lg shadow-cyan-500/25">
|
||||
<Sparkles className="w-3.5 h-3.5 sm:w-4 sm:h-4 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
<h1 className="text-base sm:text-lg md:text-2xl font-bold text-white whitespace-nowrap">心願星河</h1>
|
||||
</Link>
|
||||
|
||||
{/* 導航區域 */}
|
||||
<nav className="flex items-center gap-1 sm:gap-2 md:gap-4 flex-shrink-0">
|
||||
{/* 音樂控制 */}
|
||||
<div className="hidden sm:block">
|
||||
<HeaderMusicControl />
|
||||
</div>
|
||||
<div className="sm:hidden">
|
||||
<HeaderMusicControl mobileSimplified />
|
||||
</div>
|
||||
|
||||
{/* 桌面版完整導航 */}
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
<Link href="/analytics">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-4"
|
||||
>
|
||||
<BarChart3 className="w-4 h-4 mr-2" />
|
||||
問題洞察
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/submit">
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 px-4"
|
||||
>
|
||||
分享困擾
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 平板版導航 */}
|
||||
<div className="hidden sm:flex md:hidden items-center gap-1">
|
||||
<Link href="/">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/analytics">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
|
||||
>
|
||||
洞察
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/submit">
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 px-3"
|
||||
>
|
||||
分享
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* 手機版導航 - 移除首頁按鈕，避免與 logo 功能重疊 */}
|
||||
<div className="flex sm:hidden items-center gap-1">
|
||||
<Link href="/analytics">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-blue-200 hover:text-white hover:bg-blue-800/50 px-2 text-xs"
|
||||
>
|
||||
洞察
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/submit">
|
||||
<Button
|
||||
size="sm"
|
||||
className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 px-3 text-xs"
|
||||
>
|
||||
分享
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content - 手機優化 */}
|
||||
<main className="py-8 md:py-12 px-4">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<div className="text-center mb-6 md:mb-8">
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-3 md:mb-4">聆聽每一份真實經歷</h2>
|
||||
<p className="text-blue-200 mb-4 md:mb-6 text-sm md:text-base px-4">
|
||||
這裡收集了許多職場工作者願意公開分享的真實困擾和經驗
|
||||
</p>
|
||||
|
||||
{/* Search Bar and Filter Button - 並排布局 */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto px-2 md:px-0 mb-4">
|
||||
{/* Search Input */}
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-300 w-4 h-4" />
|
||||
<Input
|
||||
placeholder="搜尋相似的工作困擾..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-10 bg-slate-700/50 border-blue-600/50 text-white placeholder:text-blue-300 focus:border-cyan-400 text-sm md:text-base"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter Button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className={`
|
||||
border-blue-400/50 bg-slate-800/50 text-blue-200 hover:bg-slate-700/50 hover:text-white
|
||||
flex-shrink-0 px-4 py-2 h-10
|
||||
${showFilters ? "bg-slate-700/70 border-cyan-400/70 text-cyan-200" : ""}
|
||||
`}
|
||||
>
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
<span className="hidden sm:inline">篩選器</span>
|
||||
<span className="sm:hidden">篩選</span>
|
||||
{selectedCategories.length > 0 && (
|
||||
<Badge className="ml-2 bg-cyan-500 text-white text-xs px-1.5 py-0.5 min-w-[20px] h-5">
|
||||
{selectedCategories.length}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Filters */}
|
||||
{showFilters && (
|
||||
<div className="mb-6 md:mb-8 p-4 md:p-6 bg-slate-800/30 backdrop-blur-sm rounded-xl border border-slate-600/50 animate-in slide-in-from-top-2 duration-200">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-white flex items-center gap-2">
|
||||
<Filter className="w-5 h-5" />
|
||||
按問題類型篩選
|
||||
<Badge className="bg-blue-600/20 text-blue-200 text-xs px-2 py-1">支持多標籤</Badge>
|
||||
</h3>
|
||||
{hasActiveFilters && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={clearAllFilters}
|
||||
className="text-blue-300 hover:text-white hover:bg-blue-800/50"
|
||||
>
|
||||
<X className="w-4 h-4 mr-1" />
|
||||
清除篩選
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{categories.map((category) => {
|
||||
const count = categoryStats[category.name] || 0
|
||||
const isSelected = selectedCategories.includes(category.name)
|
||||
|
||||
return (
|
||||
<button
|
||||
key={category.name}
|
||||
onClick={() => toggleCategory(category.name)}
|
||||
disabled={count === 0}
|
||||
className={`
|
||||
relative p-3 rounded-lg border transition-all duration-200 text-left
|
||||
${
|
||||
isSelected
|
||||
? `bg-gradient-to-r ${category.bgColor} ${category.borderColor} ${category.textColor} border-2 shadow-lg transform scale-[1.02]`
|
||||
: count > 0
|
||||
? "bg-slate-700/30 border-slate-600/50 text-slate-300 hover:bg-slate-600/40 hover:border-slate-500/70 hover:scale-[1.01]"
|
||||
: "bg-slate-800/20 border-slate-700/30 text-slate-500 cursor-not-allowed opacity-50"
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">{category.icon}</span>
|
||||
<div>
|
||||
<div className="font-medium text-sm">{category.name}</div>
|
||||
<div className="text-xs opacity-75">{count} 個公開案例</div>
|
||||
</div>
|
||||
</div>
|
||||
{isSelected && <div className="w-2 h-2 rounded-full bg-current opacity-80 animate-pulse"></div>}
|
||||
</div>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Active Filters Display */}
|
||||
{selectedCategories.length > 0 && (
|
||||
<div className="mt-4 pt-4 border-t border-slate-600/30">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm text-blue-200">正在查看：</span>
|
||||
{selectedCategories.map((categoryName) => {
|
||||
const category = categories.find((cat) => cat.name === categoryName)
|
||||
return (
|
||||
<Badge
|
||||
key={categoryName}
|
||||
className={`bg-gradient-to-r ${category?.bgColor} ${category?.borderColor} ${category?.textColor} border cursor-pointer hover:opacity-80 transition-opacity`}
|
||||
onClick={() => toggleCategory(categoryName)}
|
||||
>
|
||||
<span className="mr-1">{category?.icon}</span>
|
||||
{categoryName}
|
||||
<X className="w-3 h-3 ml-1" />
|
||||
</Badge>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats - 手機優化，增加隱私說明 */}
|
||||
<div className="text-center mb-6 md:mb-8">
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-3 mb-4">
|
||||
<div className="inline-flex items-center gap-2 bg-slate-800/50 backdrop-blur-sm rounded-full px-3 md:px-4 py-2 text-blue-200 border border-blue-700/50 text-xs md:text-sm">
|
||||
<Eye className="w-3 h-3 md:w-4 md:h-4 text-cyan-400" />
|
||||
<span className="hidden sm:inline">
|
||||
公開分享 {publicWishes.length} 個案例
|
||||
{hasActiveFilters && `，找到 ${filteredWishes.length} 個相關經歷`}
|
||||
</span>
|
||||
<span className="sm:hidden">
|
||||
{publicWishes.length} 個公開案例
|
||||
{hasActiveFilters && ` (${filteredWishes.length})`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{privateCount > 0 && (
|
||||
<div className="inline-flex items-center gap-2 bg-slate-700/50 backdrop-blur-sm rounded-full px-3 md:px-4 py-2 text-slate-300 border border-slate-600/50 text-xs md:text-sm">
|
||||
<Users className="w-3 h-3 md:w-4 md:h-4 text-slate-400" />
|
||||
<span className="hidden sm:inline">另有 {privateCount} 個私密案例用於分析</span>
|
||||
<span className="sm:hidden">{privateCount} 個私密案例</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{privateCount > 0 && (
|
||||
<p className="text-xs md:text-sm text-slate-400 px-4">
|
||||
私密案例不會顯示在此頁面，但會納入問題洞察分析，幫助了解整體趨勢
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Wishes Grid - 手機優化 */}
|
||||
{filteredWishes.length > 0 ? (
|
||||
<div className="grid gap-4 md:gap-6 lg:grid-cols-1">
|
||||
{filteredWishes.map((wish) => (
|
||||
<WishCard key={wish.id} wish={wish} />
|
||||
))}
|
||||
</div>
|
||||
) : publicWishes.length === 0 ? (
|
||||
<div className="text-center py-8 sm:py-12 md:py-16 px-4">
|
||||
<div className="mb-4 sm:mb-6">
|
||||
<div className="relative mx-auto w-16 h-20 sm:w-20 sm:h-26 md:w-24 md:h-32">
|
||||
<div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-14 h-20 md:w-16 md:h-24 bg-gradient-to-b from-cyan-100/20 to-blue-200/30 rounded-t-xl md:rounded-t-2xl rounded-b-md md:rounded-b-lg shadow-xl shadow-cyan-500/20 backdrop-blur-sm border border-cyan-300/30 opacity-50">
|
||||
<div className="absolute -top-1.5 md:-top-2 left-1/2 transform -translate-x-1/2 w-3 h-2.5 md:w-4 md:h-3 bg-slate-700 rounded-t-sm md:rounded-t-md"></div>
|
||||
<div className="absolute top-0.5 md:top-1 left-0.5 md:left-1 w-1.5 h-14 md:w-2 md:h-16 bg-white/20 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-base sm:text-lg md:text-xl font-semibold text-blue-100 mb-2">
|
||||
{totalWishes > 0 ? "還沒有人公開分享經歷" : "還沒有人分享經歷"}
|
||||
</h3>
|
||||
<p className="text-blue-300 mb-4 sm:mb-6 text-sm sm:text-base leading-relaxed px-2">
|
||||
{totalWishes > 0
|
||||
? `目前有 ${totalWishes} 個案例，但都選擇保持私密。成為第一個公開分享的人吧！`
|
||||
: "成為第一個分享工作困擾的人，幫助更多人找到解決方案"}
|
||||
</p>
|
||||
<Link href="/submit">
|
||||
<Button className="bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 text-sm md:text-base">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
{totalWishes > 0 ? "公開分享第一個案例" : "分享第一個案例"}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 sm:py-12 md:py-16 px-4">
|
||||
<Search className="w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-blue-400 mx-auto mb-3 sm:mb-4 opacity-50" />
|
||||
<h3 className="text-base sm:text-lg md:text-xl font-semibold text-blue-100 mb-2">沒有找到相關案例</h3>
|
||||
<p className="text-blue-300 mb-4 md:mb-6 text-sm md:text-base">
|
||||
{hasActiveFilters ? "試試調整篩選條件，或分享你的獨特經歷" : "試試其他關鍵字，或分享你的困擾"}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-3 md:gap-4 justify-center">
|
||||
{hasActiveFilters && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={clearAllFilters}
|
||||
className="border-blue-400 bg-slate-800/50 text-blue-100 hover:bg-slate-700/50 text-sm md:text-base"
|
||||
>
|
||||
查看所有公開案例
|
||||
</Button>
|
||||
)}
|
||||
<Link href="/submit">
|
||||
<Button className="w-full sm:w-auto bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 text-white shadow-lg shadow-cyan-500/25 text-sm md:text-base">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
分享你的經歷
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user