From 8d2ee29a7014b642fb09109ce1658d7bdc3f9264 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B3=E4=BD=A9=E5=BA=AD?= Date: Sat, 19 Jul 2025 03:28:27 +0800 Subject: [PATCH] =?UTF-8?q?=E5=84=AA=E5=8C=96=E6=89=8B=E6=A9=9F=E7=95=AB?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/analytics/page.tsx | 2 +- app/page.tsx | 2 +- app/submit/page.tsx | 2 +- app/thank-you/page.tsx | 2 +- app/wishes/page.tsx | 245 +++++++++++++++++++++++++++++++++++---- components/wish-card.tsx | 117 ++++++++++--------- 6 files changed, 292 insertions(+), 78 deletions(-) diff --git a/app/analytics/page.tsx b/app/analytics/page.tsx index 7eea8a6..2c48614 100644 --- a/app/analytics/page.tsx +++ b/app/analytics/page.tsx @@ -352,7 +352,7 @@ export default function AnalyticsPage() { {/* Main Content */} -
+
{/* 頁面標題 - 手機優化 */}
diff --git a/app/page.tsx b/app/page.tsx index d044a53..5384199 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -181,7 +181,7 @@ export default function HomePage() { {/* Main Content - 使用 flex-1 讓內容區域填滿剩餘空間 */} -
+
{/* 主要許願瓶 - 添加呼吸動畫 */}
diff --git a/app/submit/page.tsx b/app/submit/page.tsx index fe408eb..81ded11 100644 --- a/app/submit/page.tsx +++ b/app/submit/page.tsx @@ -261,7 +261,7 @@ export default function SubmitPage() { {/* Main Content - 手機優化 */} -
+
{/* 小許願瓶 - 添加呼吸動畫 */} diff --git a/app/thank-you/page.tsx b/app/thank-you/page.tsx index 54153c3..dc667c4 100644 --- a/app/thank-you/page.tsx +++ b/app/thank-you/page.tsx @@ -209,7 +209,7 @@ export default function ThankYouPage() { {/* Main Content */} -
+
void +} + +function PaginationComponent({ currentPage, totalPages, onPageChange }: PaginationProps) { + // 根據螢幕尺寸調整顯示策略 + const getMobilePageNumbers = () => { + const pages = [] + + if (totalPages <= 3) { + // 小於等於3頁，全部顯示 + for (let i = 1; i <= totalPages; i++) { + pages.push(i) + } + } else { + // 手機端簡化邏輯：只顯示當前頁和相鄰頁 + if (currentPage === 1) { + pages.push(1, 2, '...', totalPages) + } else if (currentPage === totalPages) { + pages.push(1, '...', totalPages - 1, totalPages) + } else { + if (currentPage === 2) { + pages.push(1, 2, 3, '...', totalPages) + } else if (currentPage === totalPages - 1) { + pages.push(1, '...', totalPages - 2, totalPages - 1, totalPages) + } else { + pages.push(1, '...', currentPage, '...', totalPages) + } + } + } + + return pages + } + + const getDesktopPageNumbers = () => { + const pages = [] + const maxVisiblePages = 5 + + if (totalPages <= maxVisiblePages) { + for (let i = 1; i <= totalPages; i++) { + pages.push(i) + } + } else { + if (currentPage <= 3) { + for (let i = 1; i <= 4; i++) { + pages.push(i) + } + pages.push('...') + pages.push(totalPages) + } else if (currentPage >= totalPages - 2) { + pages.push(1) + pages.push('...') + for (let i = totalPages - 3; i <= totalPages; i++) { + pages.push(i) + } + } else { + pages.push(1) + pages.push('...') + for (let i = currentPage - 1; i <= currentPage + 1; i++) { + pages.push(i) + } + pages.push('...') + pages.push(totalPages) + } + } + + return pages + } + + return ( +
+ {/* 上一頁按鈕 */} + + + {/* 桌面端頁數按鈕 */} +
+ {getDesktopPageNumbers().map((page, index) => { + if (page === '...') { + return ( + + ... + + ) + } + + const pageNumber = page as number + const isActive = pageNumber === currentPage + + return ( + + ) + })} +
+ + {/* 手機端頁數按鈕 */} +
+ {getMobilePageNumbers().map((page, index) => { + if (page === '...') { + return ( + + ... + + ) + } + + const pageNumber = page as number + const isActive = pageNumber === currentPage + + return ( + + ) + })} +
+ + {/* 下一頁按鈕 */} + +
+ ) +} + export default function WishesPage() { const [wishes, setWishes] = useState([]) const [publicWishes, setPublicWishes] = useState([]) @@ -21,6 +188,12 @@ export default function WishesPage() { const [showFilters, setShowFilters] = useState(false) const [totalWishes, setTotalWishes] = useState(0) const [privateCount, setPrivateCount] = useState(0) + + // 分頁相關狀態 + const [currentPage, setCurrentPage] = useState(1) + const [itemsPerPage] = useState(5) + const [paginatedWishes, setPaginatedWishes] = useState([]) + const [totalPages, setTotalPages] = useState(0) useEffect(() => { const fetchWishes = async () => { @@ -100,6 +273,21 @@ export default function WishesPage() { setFilteredWishes(filtered) }, [publicWishes, searchTerm, selectedCategories]) + // 分頁計算 useEffect + useEffect(() => { + const startIndex = (currentPage - 1) * itemsPerPage + const endIndex = startIndex + itemsPerPage + const wishesToPaginate = filteredWishes.length > 0 ? filteredWishes : publicWishes + + setPaginatedWishes(wishesToPaginate.slice(startIndex, endIndex)) + setTotalPages(Math.ceil(wishesToPaginate.length / itemsPerPage)) + }, [filteredWishes, publicWishes, currentPage, itemsPerPage]) + + // 重置分頁當篩選條件改變時 + useEffect(() => { + setCurrentPage(1) + }, [searchTerm, selectedCategories]) + const toggleCategory = (categoryName: string) => { setSelectedCategories((prev) => prev.includes(categoryName) ? prev.filter((cat) => cat !== categoryName) : [...prev, categoryName], @@ -232,16 +420,16 @@ export default function WishesPage() { {/* Main Content - 手機優化 */} -
+

聆聽每一份真實經歷

-

+

這裡收集了許多職場工作者願意公開分享的真實困擾和經驗

{/* Search Bar and Filter Button - 並排布局 */} -
+
{/* Search Input */}
@@ -277,7 +465,7 @@ export default function WishesPage() { {/* Category Filters */} {showFilters && ( -
+

@@ -364,12 +552,18 @@ export default function WishesPage() {
- 公開分享 {publicWishes.length} 個案例 - {hasActiveFilters && `，找到 ${filteredWishes.length} 個相關經歷`} + {hasActiveFilters ? ( + <>找到 {filteredWishes.length} / {publicWishes.length} 個相關案例 + ) : ( + <>公開分享 {publicWishes.length} 個案例 + )} + {totalPages > 1 && ( + <> · 第 {currentPage}/{totalPages} 頁 + )} - {publicWishes.length} 個公開案例 - {hasActiveFilters && ` (${filteredWishes.length})`} + {hasActiveFilters ? `${filteredWishes.length}/${publicWishes.length}` : `${publicWishes.length} 個案例`} + {totalPages > 1 && ` (${currentPage}/${totalPages})`}
@@ -383,21 +577,32 @@ export default function WishesPage() {

{privateCount > 0 && ( -

+

私密案例不會顯示在此頁面，但會納入問題洞察分析，幫助了解整體趨勢

)}
{/* Wishes Grid - 手機優化 */} - {filteredWishes.length > 0 ? ( -
- {filteredWishes.map((wish) => ( - - ))} -
+ {paginatedWishes.length > 0 ? ( + <> +
+ {paginatedWishes.map((wish) => ( + + ))} +
+ + {/* 分頁組件 */} + {totalPages > 1 && ( + + )} + ) : publicWishes.length === 0 ? ( -
+
@@ -409,7 +614,7 @@ export default function WishesPage() {

{totalWishes > 0 ? "還沒有人公開分享經歷" : "還沒有人分享經歷"}

-

+

{totalWishes > 0 ? `目前有 ${totalWishes} 個案例，但都選擇保持私密。成為第一個公開分享的人吧！` : "成為第一個分享工作困擾的人，幫助更多人找到解決方案"} @@ -422,10 +627,10 @@ export default function WishesPage() {

) : ( -
+

沒有找到相關案例

-

+

{hasActiveFilters ? "試試調整篩選條件，或分享你的獨特經歷" : "試試其他關鍵字，或分享你的困擾"}

diff --git a/components/wish-card.tsx b/components/wish-card.tsx index 1c74e13..dfa217a 100644 --- a/components/wish-card.tsx +++ b/components/wish-card.tsx @@ -343,31 +343,34 @@ export default function WishCard({ wish }: WishCardProps) {
-
-
-
+ {/* 手機端優化：標題和按鈕分開布局 */} +
+
+
-
-

AI 解決方案建議

-
- +
+
+

AI 解決方案建議

+ +
+
+ 信心度 {solutionRecommendation.confidence}% - + 智能分析
-
{/* 個人化訊息 */} @@ -386,54 +389,61 @@ export default function WishCard({ wish }: WishCardProps) { className="p-3 md:p-4 bg-slate-800/60 rounded-lg border border-slate-600/50 hover:bg-slate-700/60 hover:border-slate-500/70 transition-all duration-200 cursor-pointer" onClick={() => setSelectedSolution(selectedSolution?.id === solution.id ? null : solution)} > -
-
-
{solution.icon}
-
-
-
{solution.name}
- - {getDifficultyLabel(solution.difficulty)} - + {/* 手機端優化：重新設計布局結構 */} +
+
{solution.icon}
+
+ {/* 標題行：標題和時間 */} +
+
+ {solution.name} +
+
+ + {solution.timeframe}
-

{solution.description}

-
-
- - {solution.timeframe} + + {/* 標籤和描述 */} +
+ + {getDifficultyLabel(solution.difficulty)} + +

+ {solution.description} +

+
- {/* 展開的詳細資訊 */} + {/* 展開的詳細資訊 - 手機端優化 */} {selectedSolution?.id === solution.id && ( -
+
-
+
✨ 主要效益
-
+
{solution.benefits.map((benefit, idx) => ( -
-
- {benefit} +
+
+ {benefit}
))}
-
+
🛠️ 技術方案
-
+
{solution.techStack.map((tech, idx) => ( {tech} @@ -442,14 +452,14 @@ export default function WishCard({ wish }: WishCardProps) {
-
+
💡 應用實例
-
+
{solution.examples.map((example, idx) => ( -
-
- {example} +
+
+ {example}
))}
@@ -459,15 +469,14 @@ export default function WishCard({ wish }: WishCardProps) {
))} - {/* 專業團隊協助訊息 */} -
+ {/* 專業團隊協助訊息 - 手機端優化 */} +
- - 專業團隊支援 + + 專業團隊支援

- 我們的 AI - 團隊和技術專家會根據這些建議，為你制定具體的實施方案。團隊將主動與你聯繫，協助你逐步改善工作流程！ + 我們的 AI 團隊和技術專家會根據這些建議，為你制定具體的實施方案。團隊將主動與你聯繫，協助你逐步改善工作流程！