From e54de2f68287f32550f3272cab75deab1bfeb9c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B3=E4=BD=A9=E5=BA=AD?= Date: Fri, 25 Jul 2025 00:01:24 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=95=99=E5=AD=B8=E6=8C=89?= =?UTF-8?q?=E9=88=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/analytics/page.tsx | 298 ++++++++++++++++++++++++++++++++++++++- app/submit/page.tsx | 313 +++++++++++++++++++++++++++++++++++++++-- app/wishes/page.tsx | 310 ++++++++++++++++++++++++++++++++++++++-- package.json | 1 + pnpm-lock.yaml | 8 ++ 5 files changed, 902 insertions(+), 28 deletions(-) diff --git a/app/analytics/page.tsx b/app/analytics/page.tsx index 3ae6a65..092b25c 100644 --- a/app/analytics/page.tsx +++ b/app/analytics/page.tsx @@ -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() {
{/* 頁面標題 - 手機優化 */} -
+
@@ -370,7 +454,7 @@ export default function AnalyticsPage() {
{/* 隱私說明卡片 - 手機版可收放 */} - +
@@ -431,7 +515,7 @@ export default function AnalyticsPage() { {/* 統計概覽 - 手機優化 */} -
+
@@ -491,7 +575,7 @@ export default function AnalyticsPage() {
{/* 分類指南 - 手機優化 */} - +
@@ -581,7 +665,7 @@ export default function AnalyticsPage() { {/* 手機版：垂直佈局，桌面版：並排佈局 */}
{/* 雷達圖 - 手機版給予更多高度 */} - +
@@ -602,7 +686,7 @@ export default function AnalyticsPage() { {/* 分類詳細統計 */} - +
@@ -725,7 +809,7 @@ export default function AnalyticsPage() { {/* 熱門關鍵字 */} {analytics.topKeywords.length > 0 && ( - +
@@ -754,6 +838,206 @@ export default function AnalyticsPage() { )}
+ + {/* 固定在右下角的教学按钮 */} + + + {/* Driver.js 自定义样式 */} + ) } diff --git a/app/submit/page.tsx b/app/submit/page.tsx index 1aafbd7..398e691 100644 --- a/app/submit/page.tsx +++ b/app/submit/page.tsx @@ -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() { {/* 平板版導航 */} -
+