petty09190/wish-pool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增教學按鈕

Browse Source
This commit is contained in:
吳佩庭
2025-07-25 00:01:24 +08:00
parent 916e97b35e
commit e54de2f682
5 changed files with 902 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
app/analytics/page.tsx
View File

@@ -20,11 +20,14 @@ import {
Shield,
Eye,
EyeOff,
HelpCircle,
} from "lucide-react"
import RadarChart from "@/components/radar-chart"
import HeaderMusicControl from "@/components/header-music-control"
import { categories, categorizeWishMultiple, type Wish } from "@/lib/categorization"
import { WishService } from "@/lib/supabase-service"
import { driver } from "driver.js"
import "driver.js/dist/driver.css"
interface CategoryData {
name: string
@@ -66,6 +69,87 @@ export default function AnalyticsPage() {
const [showCategoryGuide, setShowCategoryGuide] = useState(false)
const [showPrivacyDetails, setShowPrivacyDetails] = useState(false) // 新增：隱私說明收放狀態
// 教學功能
const startTutorial = () => {
const driverObj = driver({
showProgress: true,
progressText: "步驟 {{current}} / {{total}}",
nextBtnText: "下一步",
prevBtnText: "上一步",
doneBtnText: "完成教學",
steps: [
{
element: "#analytics-title",
popover: {
title: "🔍 洞察分析首頁",
description: "這裡提供職場困擾的完整數據分析，包含公開和私密案例，幫助管理者了解真實狀況並制定改善策略。",
side: "bottom",
align: "start"
}
},
{
element: "#privacy-section",
popover: {
title: "🔒 數據隱私說明",
description: "點擊展開查看分析數據的隱私政策。分析包含所有案例（公開+私密），但保護個人身份資訊。",
side: "bottom",
align: "center"
}
},
{
element: "#stats-overview",
popover: {
title: "📊 統計概覽",
description: "快速查看總案例數、本週新增、問題領域數量和成長趨勢。這些數字幫助您掌握整體狀況。",
side: "bottom",
align: "center"
}
},
{
element: "#category-guide",
popover: {
title: "📖 分類指南",
description: "點擊「展開」按鈕可查看各問題分類的詳細說明和關鍵字示例，了解分析系統如何歸類不同困擾。",
side: "top",
align: "center"
}
},
{
element: "#radar-chart",
popover: {
title: "🎯 問題分布圖譜",
description: "雷達圖直觀顯示各類問題的分布情況。面積越大表示該類問題越多，幫助識別重點改善領域。",
side: "left",
align: "center"
}
},
{
element: "#category-stats",
popover: {
title: "📈 詳細統計",
description: "列出所有問題分類的具體案例數和百分比，並標示TOP排名，方便優先處理高頻問題。",
side: "right",
align: "center"
}
},
{
element: "#keyword-section",
popover: {
title: "🔖 熱門關鍵字",
description: "顯示在所有案例中最常出現的詞彙，反映團隊面臨的核心挑戰，有助於深入理解問題本質。",
side: "top",
align: "center"
}
}
],
onDestroyStarted: () => {
driverObj.destroy();
},
});
driverObj.drive();
};
// 分析許願內容（包含所有數據，包括私密的）
const analyzeWishes = (wishList: (Wish & { isPublic?: boolean })[]): AnalyticsData => {
const totalWishes = wishList.length
@@ -355,7 +439,7 @@ export default function AnalyticsPage() {
<main className="py-6 md:py-12 px-1 sm:px-3 md:px-4">
<div className="container mx-auto max-w-7xl">
{/* 頁面標題 - 手機優化 */}
<div className="text-center mb-6 md:mb-12">
<div id="analytics-title" className="text-center mb-6 md:mb-12">
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3 mb-3 md:mb-4">
<div className="w-10 h-10 md:w-12 md:h-12 bg-gradient-to-br from-purple-600 to-indigo-700 rounded-full flex items-center justify-center shadow-lg shadow-purple-500/25">
<BarChart3 className="w-5 h-5 md:w-6 md:h-6 text-white" />
@@ -370,7 +454,7 @@ export default function AnalyticsPage() {
</div>
{/* 隱私說明卡片 - 手機版可收放 */}
<Card className="bg-gradient-to-r from-blue-900/80 to-indigo-800/80 backdrop-blur-sm border border-blue-500/50 mb-6 md:mb-12">
<Card id="privacy-section" className="bg-gradient-to-r from-blue-900/80 to-indigo-800/80 backdrop-blur-sm border border-blue-500/50 mb-6 md:mb-12">
<CardHeader className="pb-3 md:pb-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2 md:gap-3 min-w-0 flex-1">
@@ -431,7 +515,7 @@ export default function AnalyticsPage() {
</Card>
{/* 統計概覽 - 手機優化 */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-6 mb-6 md:mb-12">
<div id="stats-overview" className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-6 mb-6 md:mb-12">
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
<CardContent className="p-3 md:p-6 text-center">
<div className="w-8 h-8 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">
@@ -491,7 +575,7 @@ export default function AnalyticsPage() {
</div>
{/* 分類指南 - 手機優化 */}
<Card className="bg-gradient-to-r from-blue-900/80 to-indigo-800/80 backdrop-blur-sm border border-blue-500/50 mb-6 md:mb-12">
<Card id="category-guide" className="bg-gradient-to-r from-blue-900/80 to-indigo-800/80 backdrop-blur-sm border border-blue-500/50 mb-6 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-2 md:gap-3 min-w-0 flex-1">
@@ -581,7 +665,7 @@ export default function AnalyticsPage() {
{/* 手機版：垂直佈局，桌面版：並排佈局 */}
<div className="space-y-6 md: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">
<Card id="radar-chart" className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
<CardHeader>
<CardTitle className="text-lg md:text-xl lg:text-2xl text-white flex items-center gap-2 md:gap-3">
<div className="w-6 h-6 md:w-8 md:h-8 bg-gradient-to-br from-purple-600 to-indigo-700 rounded-full flex items-center justify-center">
@@ -602,7 +686,7 @@ export default function AnalyticsPage() {
</Card>
{/* 分類詳細統計 */}
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
<Card id="category-stats" className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50">
<CardHeader>
<CardTitle className="text-lg md:text-xl lg:text-2xl text-white flex items-center gap-2 md:gap-3">
<div className="w-6 h-6 md:w-8 md:h-8 bg-gradient-to-br from-cyan-600 to-blue-700 rounded-full flex items-center justify-center">
@@ -725,7 +809,7 @@ export default function AnalyticsPage() {
{/* 熱門關鍵字 */}
{analytics.topKeywords.length > 0 && (
<Card className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50 mt-6 md:mt-12">
<Card id="keyword-section" className="bg-slate-800/50 backdrop-blur-sm border border-slate-600/50 mt-6 md:mt-12">
<CardHeader>
<CardTitle className="text-lg md:text-xl lg:text-2xl text-white flex items-center gap-2 md:gap-3">
<div className="w-6 h-6 md:w-8 md:h-8 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center">
@@ -754,6 +838,206 @@ export default function AnalyticsPage() {
)}
</div>
</main>
{/* 固定在右下角的教学按钮 */}
<Button
onClick={startTutorial}
className="fixed bottom-4 right-4 z-50 flex flex-col items-center gap-0.5 px-2.5 py-2 h-auto min-h-[48px] rounded-lg 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 hover:shadow-xl hover:shadow-cyan-500/30 transition-all duration-300 transform hover:scale-105 border border-cyan-400/30"
title="點擊開始使用教學"
>
<HelpCircle className="w-4 h-4" />
<span className="text-[10px] font-medium leading-tight">使用教學</span>
</Button>
{/* Driver.js 自定义样式 */}
<style jsx global>{`
.driver-popover {
background: rgba(15, 23, 42, 0.98) !important;
backdrop-filter: blur(16px);
border: 2px solid rgba(59, 130, 246, 0.6) !important;
border-radius: 12px !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}
.driver-popover-title {
color: white !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
margin-bottom: 8px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.driver-popover-description {
color: rgba(226, 232, 240, 0.95) !important;
font-size: 0.95rem !important;
line-height: 1.6 !important;
margin-bottom: 16px !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}
.driver-popover-progress-text {
color: rgba(147, 197, 253, 0.9) !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}
.driver-popover-navigation-btns {
gap: 8px !important;
}
.driver-popover-next-btn, .driver-popover-done-btn {
background: linear-gradient(to right, #06b6d4, #3b82f6) !important;
color: white !important;
border: 2px solid rgba(59, 130, 246, 0.3) !important;
padding: 10px 18px !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
transition: all 0.2s ease !important;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
text-shadow: none !important;
letter-spacing: 0.02em !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
.driver-popover-next-btn:hover, .driver-popover-done-btn:hover {
background: linear-gradient(to right, #0891b2, #2563eb) !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5) !important;
color: white !important;
text-shadow: none !important;
}
.driver-popover-prev-btn, .driver-popover-close-btn {
background: rgba(51, 65, 85, 0.95) !important;
color: rgba(255, 255, 255, 0.95) !important;
border: 2px solid rgba(71, 85, 105, 0.7) !important;
padding: 10px 18px !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
transition: all 0.2s ease !important;
text-shadow: none !important;
letter-spacing: 0.02em !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
.driver-popover-prev-btn:hover, .driver-popover-close-btn:hover {
background: rgba(71, 85, 105, 0.95) !important;
border-color: rgba(59, 130, 246, 0.5) !important;
color: white !important;
text-shadow: none !important;
}
/* 调整关闭按钮大小 */
.driver-popover-close-btn {
position: absolute !important;
top: 8px !important;
right: 8px !important;
width: 28px !important;
height: 28px !important;
padding: 0 !important;
border-radius: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
line-height: 1 !important;
background: rgba(71, 85, 105, 0.7) !important;
border: 1px solid rgba(71, 85, 105, 0.5) !important;
color: rgba(156, 163, 175, 0.8) !important;
z-index: 10 !important;
}
.driver-popover-close-btn:hover {
background: rgba(239, 68, 68, 0.8) !important;
border-color: rgba(239, 68, 68, 0.6) !important;
color: white !important;
transform: none !important;
}
.driver-overlay {
background: transparent !important;
backdrop-filter: none !important;
}
.driver-highlighted-element {
box-shadow:
0 0 0 2px rgba(59, 130, 246, 0.8) !important,
0 0 0 4px rgba(59, 130, 246, 0.3) !important;
border-radius: 6px !important;
position: relative !important;
z-index: 9999 !important;
background: transparent !important;
}
.driver-highlighted-element::before {
content: '' !important;
position: absolute !important;
top: -3px !important;
left: -3px !important;
right: -3px !important;
bottom: -3px !important;
border: 2px solid rgba(59, 130, 246, 0.7) !important;
border-radius: 8px !important;
z-index: -1 !important;
background: transparent !important;
animation: driver-gentle-pulse 3s ease-in-out infinite !important;
}
.driver-highlighted-element::after {
display: none !important;
}
/* 确保内部内容完全不受影响 */
.driver-highlighted-element * {
position: relative !important;
z-index: 1 !important;
background: inherit !important;
opacity: inherit !important;
filter: none !important;
color: inherit !important;
}
/* 完全移除对输入框的任何样式修改 */
.driver-highlighted-element input,
.driver-highlighted-element textarea,
.driver-highlighted-element label,
.driver-highlighted-element div,
.driver-highlighted-element span {
background: inherit !important;
opacity: inherit !important;
filter: none !important;
box-shadow: inherit !important;
color: inherit !important;
}
@keyframes driver-pulse {
0%, 100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.02);
}
}
@keyframes driver-gentle-pulse {
0%, 100% {
border-color: rgba(59, 130, 246, 0.5);
}
50% {
border-color: rgba(59, 130, 246, 0.9);
}
}
`}</style>
</div>
)
}

313
app/submit/page.tsx
View File

@@ -13,7 +13,7 @@ import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"
import { Sparkles, ArrowLeft, Send, BarChart3, Eye, EyeOff, Shield, Info, Mail, ImageIcon, Lightbulb } from "lucide-react"
import { Sparkles, ArrowLeft, Send, BarChart3, Eye, EyeOff, Shield, Info, Mail, ImageIcon, Lightbulb, HelpCircle } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { soundManager } from "@/lib/sound-effects"
import HeaderMusicControl from "@/components/header-music-control"
@@ -23,6 +23,8 @@ import ImageUpload from "@/components/image-upload"
import type { ImageFile } from "@/lib/image-utils"
import { WishService } from "@/lib/supabase-service"
import { categorizeWish, type Wish } from "@/lib/categorization"
import { driver } from "driver.js"
import "driver.js/dist/driver.css"
export default function SubmitPage() {
const [formData, setFormData] = useState({
@@ -91,6 +93,94 @@ export default function SubmitPage() {
}
}, [formData.title, formData.currentPain, formData.expectedSolution, formData.expectedEffect, formData.isPublic])
// 教学指引配置
const startTutorial = () => {
const driverObj = driver({
showProgress: true,
progressText: "步驟 {{current}} / {{total}}",
nextBtnText: "下一步",
prevBtnText: "上一步",
doneBtnText: "完成教學",
popoverClass: "driverjs-theme",
steps: [
{
element: "#tutorial-welcome",
popover: {
title: "歡迎來到心願星河 ✨",
description: "這是一個讓您分享工作困擾並獲得專業建議的平台。讓我們一起了解如何使用吧！",
side: "bottom",
align: "center"
}
},
{
element: "#wish-title",
popover: {
title: "困擾標題 📝",
description: "請用簡潔的文字描述您遇到的主要問題，這樣其他人能快速了解您的困擾。",
side: "bottom",
align: "start"
}
},
{
element: "#current-pain",
popover: {
title: "具體困擾描述 📋",
description: "詳細說明您在工作中遇到的困難，包括具體情況、影響程度等。越詳細越能幫助管理者理解問題。",
side: "bottom",
align: "start"
}
},
{
element: "#expected-solution",
popover: {
title: "期望的解決方式 💡",
description: "分享您對解決這個問題的想法或建議，這有助於找到最適合的解決方案。",
side: "bottom",
align: "start"
}
},
{
element: "#expected-effect",
popover: {
title: "預期改善效果 🎯",
description: "描述問題解決後您期望的工作效率或環境改善，這能幫助評估解決方案的價值。",
side: "bottom",
align: "start"
}
},
{
element: "#image-upload",
popover: {
title: "相關圖片上傳 📸",
description: "您可以上傳與困擾相關的截圖、照片或文件圖片，視覺化的資料能幫助更好地理解問題。",
side: "top",
align: "start"
}
},
{
element: "#privacy-settings",
popover: {
title: "隱私設定 🔐",
description: "選擇是否公開分享您的困擾。公開分享能讓其他人看到並產生共鳴，私密分享只會用於數據分析。",
side: "top",
align: "start"
}
},
{
element: "#submit-button",
popover: {
title: "提交困擾 🚀",
description: "完成填寫後點擊這裡提交。系統會智能分析您的困擾類型，並為您準備專業的建議！",
side: "top",
align: "center"
}
}
]
})
driverObj.drive()
}
// 实际的提交逻辑
const performSubmit = async () => {
setIsSubmitting(true)
@@ -265,7 +355,7 @@ export default function SubmitPage() {
</div>
{/* 平板版導航 */}
<div className="hidden sm:flex md:hidden items-center gap-1">
<div className="hidden sm:flex md:hidden items-center gap-2">
<Link href="/">
<Button
variant="ghost"
@@ -326,7 +416,7 @@ export default function SubmitPage() {
<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="mb-10 md:mb-12" id="tutorial-welcome">
<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"
@@ -407,7 +497,7 @@ export default function SubmitPage() {
困擾標題 *
</Label>
<Input
id="title"
id="wish-title"
placeholder="簡潔描述你遇到的主要問題..."
value={formData.title}
onChange={(e) => handleChange("title", e.target.value)}
@@ -421,7 +511,7 @@ export default function SubmitPage() {
具體困擾描述 *
</Label>
<Textarea
id="currentPain"
id="current-pain"
placeholder="詳細說明你在工作中遇到的困難，包括具體情況、影響程度等..."
value={formData.currentPain}
onChange={(e) => handleChange("currentPain", e.target.value)}
@@ -436,7 +526,7 @@ export default function SubmitPage() {
期望的解決方式 *
</Label>
<Textarea
id="expectedSolution"
id="expected-solution"
placeholder="你希望這個問題能夠如何被解決？有什麼想法或建議嗎？"
value={formData.expectedSolution}
onChange={(e) => handleChange("expectedSolution", e.target.value)}
@@ -451,7 +541,7 @@ export default function SubmitPage() {
預期改善效果
</Label>
<Textarea
id="expectedEffect"
id="expected-effect"
placeholder="如果問題解決了，你期望工作效率或環境會有什麼具體改善？"
value={formData.expectedEffect}
onChange={(e) => handleChange("expectedEffect", e.target.value)}
@@ -461,7 +551,7 @@ export default function SubmitPage() {
</div>
{/* 圖片上傳區域 */}
<div className="space-y-2">
<div className="space-y-2" id="image-upload">
<Label className="text-blue-100 font-semibold text-sm md:text-base flex items-center gap-2">
<ImageIcon className="w-4 h-4" />
相關圖片 (可選)
@@ -545,7 +635,7 @@ export default function SubmitPage() {
)}
{/* 隱私設定區塊 */}
<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="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" id="privacy-settings">
<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" />
@@ -618,6 +708,7 @@ export default function SubmitPage() {
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"
id="submit-button"
>
{isSubmitting ? (
<>
@@ -686,6 +777,16 @@ export default function SubmitPage() {
</AlertDialogContent>
</AlertDialog>
</div>
{/* 固定在右下角的教学按钮 */}
<Button
onClick={startTutorial}
className="fixed bottom-4 right-4 z-50 flex flex-col items-center gap-0.5 px-2.5 py-2 h-auto min-h-[48px] rounded-lg 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 hover:shadow-xl hover:shadow-cyan-500/30 transition-all duration-300 transform hover:scale-105 border border-cyan-400/30"
title="點擊開始使用教學"
>
<HelpCircle className="w-4 h-4" />
<span className="text-[10px] font-medium leading-tight">使用教學</span>
</Button>
</main>
{/* 內聯 CSS 動畫定義 */}
@@ -759,11 +860,201 @@ export default function SubmitPage() {
@keyframes sparkleGentle {
0%, 100% {
opacity: 0.3;
transform: translateY(0px) rotate(0deg);
transform: scale(0.9);
}
50% {
opacity: 0.7;
transform: scale(1.15);
}
}
`}</style>
{/* Driver.js 自定义样式 */}
<style jsx global>{`
.driver-popover {
background: rgba(15, 23, 42, 0.98) !important;
backdrop-filter: blur(16px);
border: 2px solid rgba(59, 130, 246, 0.6) !important;
border-radius: 12px !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}
.driver-popover-title {
color: white !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
margin-bottom: 8px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.driver-popover-description {
color: rgba(226, 232, 240, 0.95) !important;
font-size: 0.95rem !important;
line-height: 1.6 !important;
margin-bottom: 16px !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}
.driver-popover-progress-text {
color: rgba(147, 197, 253, 0.9) !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}
.driver-popover-navigation-btns {
gap: 8px !important;
}
.driver-popover-next-btn, .driver-popover-done-btn {
background: linear-gradient(to right, #06b6d4, #3b82f6) !important;
color: white !important;
border: 2px solid rgba(59, 130, 246, 0.3) !important;
padding: 10px 18px !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
transition: all 0.2s ease !important;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
text-shadow: none !important;
letter-spacing: 0.02em !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
.driver-popover-next-btn:hover, .driver-popover-done-btn:hover {
background: linear-gradient(to right, #0891b2, #2563eb) !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5) !important;
color: white !important;
text-shadow: none !important;
}
.driver-popover-prev-btn, .driver-popover-close-btn {
background: rgba(51, 65, 85, 0.95) !important;
color: rgba(255, 255, 255, 0.95) !important;
border: 2px solid rgba(71, 85, 105, 0.7) !important;
padding: 10px 18px !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
transition: all 0.2s ease !important;
text-shadow: none !important;
letter-spacing: 0.02em !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
.driver-popover-prev-btn:hover, .driver-popover-close-btn:hover {
background: rgba(71, 85, 105, 0.95) !important;
border-color: rgba(59, 130, 246, 0.5) !important;
color: white !important;
text-shadow: none !important;
}
/* 调整关闭按钮大小 */
.driver-popover-close-btn {
position: absolute !important;
top: 8px !important;
right: 8px !important;
width: 28px !important;
height: 28px !important;
padding: 0 !important;
border-radius: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
line-height: 1 !important;
background: rgba(71, 85, 105, 0.7) !important;
border: 1px solid rgba(71, 85, 105, 0.5) !important;
color: rgba(156, 163, 175, 0.8) !important;
z-index: 10 !important;
}
.driver-popover-close-btn:hover {
background: rgba(239, 68, 68, 0.8) !important;
border-color: rgba(239, 68, 68, 0.6) !important;
color: white !important;
transform: none !important;
}
.driver-overlay {
background: transparent !important;
backdrop-filter: none !important;
}
.driver-highlighted-element {
box-shadow:
0 0 0 2px rgba(59, 130, 246, 0.8) !important,
0 0 0 4px rgba(59, 130, 246, 0.3) !important;
border-radius: 6px !important;
position: relative !important;
z-index: 9999 !important;
background: transparent !important;
}
.driver-highlighted-element::before {
content: '' !important;
position: absolute !important;
top: -3px !important;
left: -3px !important;
right: -3px !important;
bottom: -3px !important;
border: 2px solid rgba(59, 130, 246, 0.7) !important;
border-radius: 8px !important;
z-index: -1 !important;
background: transparent !important;
animation: driver-gentle-pulse 3s ease-in-out infinite !important;
}
.driver-highlighted-element::after {
display: none !important;
}
/* 确保内部内容完全不受影响 */
.driver-highlighted-element * {
position: relative !important;
z-index: 1 !important;
background: inherit !important;
opacity: inherit !important;
filter: none !important;
color: inherit !important;
}
/* 完全移除对输入框的任何样式修改 */
.driver-highlighted-element input,
.driver-highlighted-element textarea,
.driver-highlighted-element label,
.driver-highlighted-element div,
.driver-highlighted-element span {
background: inherit !important;
opacity: inherit !important;
filter: none !important;
box-shadow: inherit !important;
color: inherit !important;
}
@keyframes driver-pulse {
0%, 100% {
opacity: 0.6;
transform: translateY(-1px) rotate(180deg);
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.02);
}
}
@keyframes driver-gentle-pulse {
0%, 100% {
border-color: rgba(59, 130, 246, 0.5);
}
50% {
border-color: rgba(59, 130, 246, 0.9);
}
}
`}</style>

310
app/wishes/page.tsx
View File

@@ -5,11 +5,26 @@ 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, ChevronLeft, ChevronRight } from "lucide-react"
import {
Sparkles,
ArrowLeft,
Search,
Plus,
Filter,
X,
BarChart3,
Eye,
Users,
ChevronLeft,
ChevronRight,
HelpCircle
} 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"
import { WishService } from "@/lib/supabase-service"
import { driver } from "driver.js"
import "driver.js/dist/driver.css"
// 分頁組件
interface PaginationProps {
@@ -195,6 +210,78 @@ export default function WishesPage() {
const [paginatedWishes, setPaginatedWishes] = useState<Wish[]>([])
const [totalPages, setTotalPages] = useState(0)
// 教學功能
const startTutorial = () => {
const driverObj = driver({
showProgress: true,
progressText: "步驟 {{current}} / {{total}}",
nextBtnText: "下一步",
prevBtnText: "上一步",
doneBtnText: "完成教學",
steps: [
{
element: "#wishes-title",
popover: {
title: "💬 聆聽心聲首頁",
description: "這裡收集了員工願意公開分享的真實困擾和經驗，讓您了解團隊面臨的挑戰，也讓員工知道他們並不孤單。",
side: "bottom",
align: "center"
}
},
{
element: "#search-section",
popover: {
title: "🔍 搜尋功能",
description: "在搜索框中輸入關鍵字，快速找到相似的工作困擾。支援搜尋標題、問題描述和期望解決方案。",
side: "bottom",
align: "center"
}
},
{
element: "#filter-button",
popover: {
title: "🏷️ 篩選器",
description: "點擊篩選按鈕可按問題類型篩選案例。支援多標籤選擇，幫助您聚焦特定領域的問題。",
side: "bottom",
align: "center"
}
},
{
element: "#stats-info",
popover: {
title: "📊 統計資訊",
description: "顯示公開案例數量和私密案例數量。私密案例不會在此顯示，但會用於整體分析。",
side: "bottom",
align: "center"
}
},
{
element: "#wishes-grid",
popover: {
title: "📋 案例展示",
description: "這裡顯示所有公開分享的困擾案例。每個案例包含問題描述、期望解決方案和分類標籤。",
side: "top",
align: "center"
}
},
{
element: "#pagination-section",
popover: {
title: "📄 分頁導覽",
description: "當案例較多時，使用分頁功能瀏覽所有內容。每頁顯示3個案例，避免頁面過長。",
side: "top",
align: "center"
}
}
],
onDestroyStarted: () => {
driverObj.destroy();
},
});
driverObj.drive();
};
useEffect(() => {
const fetchWishes = async () => {
try {
@@ -422,14 +509,14 @@ export default function WishesPage() {
{/* Main Content - 手機優化 */}
<main className="py-8 md:py-12 px-1 sm:px-4">
<div className="container mx-auto max-w-4xl">
<div className="text-center mb-6 md:mb-8">
<div id="wishes-title" 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-1 sm:px-4">
這裡收集了許多職場工作者願意公開分享的真實困擾和經驗
</p>
{/* Search Bar and Filter Button - 並排布局 */}
<div className="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto px-0 sm:px-2 md:px-0 mb-4">
<div id="search-section" className="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto px-0 sm: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" />
@@ -443,6 +530,7 @@ export default function WishesPage() {
{/* Filter Button */}
<Button
id="filter-button"
variant="outline"
onClick={() => setShowFilters(!showFilters)}
className={`
@@ -567,7 +655,7 @@ export default function WishesPage() {
)}
{/* Stats - 手機優化，增加隱私說明 */}
<div className="text-center mb-6 md:mb-8">
<div id="stats-info" 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" />
@@ -606,7 +694,7 @@ export default function WishesPage() {
{/* Wishes Grid - 手機優化 */}
{paginatedWishes.length > 0 ? (
<>
<div className="grid gap-4 md:gap-6 lg:grid-cols-1">
<div id="wishes-grid" className="grid gap-4 md:gap-6 lg:grid-cols-1">
{paginatedWishes.map((wish) => (
<WishCard key={wish.id} wish={wish} />
))}
@@ -614,11 +702,13 @@ export default function WishesPage() {
{/* 分頁組件 */}
{totalPages > 1 && (
<PaginationComponent
currentPage={currentPage}
totalPages={totalPages}
onPageChange={setCurrentPage}
/>
<div id="pagination-section">
<PaginationComponent
currentPage={currentPage}
totalPages={totalPages}
onPageChange={setCurrentPage}
/>
</div>
)}
</>
) : publicWishes.length === 0 ? (
@@ -674,6 +764,206 @@ export default function WishesPage() {
)}
</div>
</main>
{/* 固定在右下角的教学按钮 */}
<Button
onClick={startTutorial}
className="fixed bottom-4 right-4 z-50 flex flex-col items-center gap-0.5 px-2.5 py-2 h-auto min-h-[48px] rounded-lg 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 hover:shadow-xl hover:shadow-cyan-500/30 transition-all duration-300 transform hover:scale-105 border border-cyan-400/30"
title="點擊開始使用教學"
>
<HelpCircle className="w-4 h-4" />
<span className="text-[10px] font-medium leading-tight">使用教學</span>
</Button>
{/* Driver.js 自定义样式 */}
<style jsx global>{`
.driver-popover {
background: rgba(15, 23, 42, 0.98) !important;
backdrop-filter: blur(16px);
border: 2px solid rgba(59, 130, 246, 0.6) !important;
border-radius: 12px !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}
.driver-popover-title {
color: white !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
margin-bottom: 8px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
.driver-popover-description {
color: rgba(226, 232, 240, 0.95) !important;
font-size: 0.95rem !important;
line-height: 1.6 !important;
margin-bottom: 16px !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}
.driver-popover-progress-text {
color: rgba(147, 197, 253, 0.9) !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important;
}
.driver-popover-navigation-btns {
gap: 8px !important;
}
.driver-popover-next-btn, .driver-popover-done-btn {
background: linear-gradient(to right, #06b6d4, #3b82f6) !important;
color: white !important;
border: 2px solid rgba(59, 130, 246, 0.3) !important;
padding: 10px 18px !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
transition: all 0.2s ease !important;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
text-shadow: none !important;
letter-spacing: 0.02em !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
.driver-popover-next-btn:hover, .driver-popover-done-btn:hover {
background: linear-gradient(to right, #0891b2, #2563eb) !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5) !important;
color: white !important;
text-shadow: none !important;
}
.driver-popover-prev-btn, .driver-popover-close-btn {
background: rgba(51, 65, 85, 0.95) !important;
color: rgba(255, 255, 255, 0.95) !important;
border: 2px solid rgba(71, 85, 105, 0.7) !important;
padding: 10px 18px !important;
border-radius: 8px !important;
font-weight: 700 !important;
font-size: 0.9rem !important;
transition: all 0.2s ease !important;
text-shadow: none !important;
letter-spacing: 0.02em !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
.driver-popover-prev-btn:hover, .driver-popover-close-btn:hover {
background: rgba(71, 85, 105, 0.95) !important;
border-color: rgba(59, 130, 246, 0.5) !important;
color: white !important;
text-shadow: none !important;
}
/* 调整关闭按钮大小 */
.driver-popover-close-btn {
position: absolute !important;
top: 8px !important;
right: 8px !important;
width: 28px !important;
height: 28px !important;
padding: 0 !important;
border-radius: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
line-height: 1 !important;
background: rgba(71, 85, 105, 0.7) !important;
border: 1px solid rgba(71, 85, 105, 0.5) !important;
color: rgba(156, 163, 175, 0.8) !important;
z-index: 10 !important;
}
.driver-popover-close-btn:hover {
background: rgba(239, 68, 68, 0.8) !important;
border-color: rgba(239, 68, 68, 0.6) !important;
color: white !important;
transform: none !important;
}
.driver-overlay {
background: transparent !important;
backdrop-filter: none !important;
}
.driver-highlighted-element {
box-shadow:
0 0 0 2px rgba(59, 130, 246, 0.8) !important,
0 0 0 4px rgba(59, 130, 246, 0.3) !important;
border-radius: 6px !important;
position: relative !important;
z-index: 9999 !important;
background: transparent !important;
}
.driver-highlighted-element::before {
content: '' !important;
position: absolute !important;
top: -3px !important;
left: -3px !important;
right: -3px !important;
bottom: -3px !important;
border: 2px solid rgba(59, 130, 246, 0.7) !important;
border-radius: 8px !important;
z-index: -1 !important;
background: transparent !important;
animation: driver-gentle-pulse 3s ease-in-out infinite !important;
}
.driver-highlighted-element::after {
display: none !important;
}
/* 确保内部内容完全不受影响 */
.driver-highlighted-element * {
position: relative !important;
z-index: 1 !important;
background: inherit !important;
opacity: inherit !important;
filter: none !important;
color: inherit !important;
}
/* 完全移除对输入框的任何样式修改 */
.driver-highlighted-element input,
.driver-highlighted-element textarea,
.driver-highlighted-element label,
.driver-highlighted-element div,
.driver-highlighted-element span {
background: inherit !important;
opacity: inherit !important;
filter: none !important;
box-shadow: inherit !important;
color: inherit !important;
}
@keyframes driver-pulse {
0%, 100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.02);
}
}
@keyframes driver-gentle-pulse {
0%, 100% {
border-color: rgba(59, 130, 246, 0.5);
}
50% {
border-color: rgba(59, 130, 246, 0.9);
}
}
`}</style>
</div>
)
}