feat(ratewise): parkkeeper 風格 UI/UX 重構 #102
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✨ 新增功能 - 底部導覽列（移動端 < 768px） - 側邊欄導航（桌面端 ≥ 768px） - 4 大功能模組：單幣別、多幣別、收藏、設定 - Zustand 狀態管理 + localStorage 持久化 - iOS Safe Area 支援 🔧 新增組件 - src/stores/converterStore.ts - Zustand 狀態管理 - src/components/BottomNavigation.tsx - 移動端底部導覽 - src/components/SideNavigation.tsx - 桌面端側邊欄 - src/components/AppLayout.tsx - 佈局整合器 - src/pages/MultiConverter.tsx - 多幣別轉換器（佔位） - src/pages/Favorites.tsx - 收藏與歷史（佔位） - src/pages/Settings.tsx - 設定頁面（主題切換已實作） 🐛 修復 - 修正 CurrencyCode 類型 import 路徑 - 修正 Settings.tsx 使用 mode 而非 theme（支援 auto 模式） - 修正 aria-hidden 屬性從字串改為布林值 - 新增 iOS Safe Area CSS 支援 ✅ 驗證 - TypeScript: 全通過 - ESLint: 全通過 - 測試: 87/87 通過 - 建置: 生產建置成功 Phase 2.2-2.11 完成。下一步：手動測試 + SingleConverter Zustand 整合 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
變更內容： - App.tsx: 使用 AppLayout 作為根佈局，巢狀路由結構 - App.tsx: 新增 MultiConverter、Favorites、Settings 頁面路由 - AppLayout.tsx: 修正 max-w-content 為 max-w-4xl - RateWise.tsx: 重構為純內容組件（移除頁面級元素） - useTheme.ts: 使用 updater function 避免閃爍 - vite.config.ts: 新增 connect-src CSP 配置 架構改進： - 核心 App 路由（/、/multi、/favorites、/settings）使用 AppLayout - SEO 落地頁（/faq、/about、/usd-twd）保持獨立佈局 - 響應式導覽：桌面側邊欄 + 移動底部導覽列 [refactor:2026-01-15] Phase 2 架構升級 - AppLayout 整合
新增檔案： - src/config/themes.ts: 完整主題定義（4 風格 + 4 配色 + 淺深模式） - src/hooks/useAppTheme.ts: 主題管理 Hook（持久化 + SSR 安全） 變更內容： - index.css: 移除漸層，改用扁平設計 + 語義化 CSS Variables - tailwind.config.ts: 新增現代化語義 token（background, foreground, card 等） - Settings.tsx: 完整主題切換 UI（風格、配色、模式） 設計靈感： - Stripe Design System - Linear UI Redesign 2024 - Vercel Geist - shadcn/ui Theming 風格選項： 1. 現代中性（Default）- 純淨白底、現代感 2. 溫暖舒適（Warm）- 米色調、親和力 3. 冷靜專業（Cool）- 藍灰調、科技感 4. 高對比（Contrast）- 純黑白、最高可讀性 配色選項：品牌紫、專業藍、自然綠、溫暖玫瑰 [feat:2026-01-16] Phase 2 架構升級 - 現代化主題系統
風格選項： 1. Nitro - 深色科技感（深藍+霓虹藍綠） 2. Kawaii - 可愛粉嫩（奶油色+粉紅色調） 3. Zen - 極簡專業（slate-50 + slate-900）預設 4. Classic - 復古書卷（米白色+棕色調） 設計特點： - 圓潤設計語言（rounded-3xl 卡片） - CSS Variables 自動切換（data-style + data-mode） - 毛玻璃效果（backdrop-blur-xl） - 風格預覽卡片（參考 ParkKeeper） 技術變更： - themes.ts: 4 種風格定義 + 預覽色彩 - index.css: 基於 data attributes 的 CSS Variables - useAppTheme.ts: 簡化（移除 colorScheme） - Settings.tsx: ParkKeeper 風格 UI 移除漸層色，採用扁平設計 + 微妙陰影 [feat:2026-01-16] Phase 2 架構升級 - ParkKeeper 風格
變更說明： - 移除多幣別相關測試（功能已拆分到 /multi 路由） - 更新 requestAnimationFrame mock 避免 motion-dom 遞迴 - 調整渲染測試以匹配純單幣別組件 測試結果：1062 passed, 1 skipped [test:2026-01-16] 配合 ParkKeeper 風格重構
UI 變更： - BottomNavigation: 毛玻璃效果 + 選中指示條動畫 - AppLayout: 品牌 Logo SVG + 毛玻璃 Header - 統一使用 text-[9px] + uppercase + tracking-[0.2em] 設計特點： - backdrop-blur-xl + bg-background/80 - border-black/[0.02~0.03] 極細邊框 - max-w-md 內容寬度限制 - h-screen + overflow-hidden 全屏佈局 [style:2026-01-16] Phase 2 架構升級 - ParkKeeper 導覽風格
tailwind.config.ts: - 新增 rounded-4xl (2rem) 超大圓角 - 新增 rounded-3xl (1.5rem) 卡片預設 - 調整 rounded-2xl (1rem) 按鈕/輸入框 RateWise.tsx: - 單幣別卡片改用 .card 類別（rounded-3xl） 設計一致性： - 卡片：rounded-3xl (1.5rem) - 按鈕：rounded-2xl (1rem) - 輸入框：rounded-2xl (1rem) - 小元素：rounded-xl (0.75rem) [style:2026-01-16] Phase 2 架構升級 - 圓角系統
新增 /theme-showcase 頁面展示： - 4 種風格預覽（Nitro/Kawaii/Zen/Classic） - 淺色/深色模式切換 - 元件庫預覽（按鈕、卡片、輸入框） - 排版展示（標題、內文、標籤） - 設計規格（圓角、陰影、毛玻璃） 路由整合： - 添加到 AppLayout 子路由 - 使用 lazy import 延遲載入 [feat:2026-01-16] Phase 2 架構升級 - Theme Showcase
Contributor
|
✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。
|
新增記錄： - 4 種風格系統（Nitro/Kawaii/Zen/Classic） - CSS Variables 自動切換 - 毛玻璃導覽列與 Logo - Theme Showcase 頁面 - 1062 tests passed - PR#102 建立 當前總分：798 → 806 (+8) [docs:2026-01-16]
Contributor
📊 PR 檢查結果✅ 品質檢查
📦 建置資訊
🤖 Automated by GitHub Actions |
Unreleased (2026-01-16): - 4 種風格系統（Nitro/Kawaii/Zen/Classic） - CSS Variables + data 屬性控制 - 毛玻璃導覽列 + Logo - Theme Showcase 頁面 - 測試更新（1062 passed） [docs:2026-01-16]
Contributor
🔦 Lighthouse CI 報告
📊 查看完整報告 門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR） |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ecdbbd7268
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Comment on lines
+120
to
+123
| <div className="flex flex-1 overflow-hidden"> | ||
| <SideNavigation className="hidden md:block" /> | ||
|
|
||
| <div className="flex-1 flex flex-col overflow-hidden"> |
There was a problem hiding this comment.
在 AppLayout 中，外層與內容區域都設定了 overflow-hidden，但沒有任何 overflow-y-auto 的容器。當內容高度超過視窗（例如匯率清單或設定頁的卡片較多時）就會被裁切且無法捲動，導致功能不可達。建議將主內容區改為可捲動（例如在 main 或內層包一個 overflow-y-auto 容器），或移除多層 overflow-hidden。
Useful? React with 👍 / 👎.
Comment on lines
98
to
99
| {/* 主題切換按鈕 */} | ||
| <ThemeToggle /> |
There was a problem hiding this comment.
Header 目前使用 ThemeToggle（舊的 useTheme 只會寫入 data-theme），但新的主題系統在 index.css/config/themes.ts 是依 data-style/data-mode 與 dark class 來切換。結果是使用者在標頭點擊主題切換時，CSS 變數不會變更，畫面看起來「沒有反應」。建議改用 useAppTheme 或 applyTheme 來更新 data-style/data-mode，或同步更新 ThemeToggle 的實作。
Useful? React with 👍 / 👎.
Comment on lines
+91
to
+95
| <Route element={<AppLayout />}> | ||
| <Route path="/" element={<CurrencyConverter />} /> | ||
| <Route path="/faq" element={<FAQ />} /> | ||
| <Route path="/about" element={<About />} /> | ||
| <Route path="/usd-twd" element={<USDToTWD />} /> | ||
| <Route path="/color-scheme" element={<ColorSchemeComparison />} /> | ||
| {/* [SEO Fix 2025-11-25 Phase 2A-2] Catch-all 404 route with noindex */} | ||
| <Route path="*" element={<NotFound />} /> | ||
| </Routes> | ||
| </Suspense> | ||
| </main> | ||
| <Route path="/multi" element={<MultiConverter />} /> | ||
| <Route path="/favorites" element={<Favorites />} /> | ||
| <Route path="/settings" element={<Settings />} /> |
There was a problem hiding this comment.
routes.tsx 已新增 /theme-showcase 的 SSG 路由，但 App.tsx 的 SPA 路由沒有對應項目，因此在開發模式或客戶端導航時會落入 * 的 NotFound，造成頁面無法使用。建議在 App.tsx 的 AppLayout 區塊補上 /theme-showcase 路由，讓 SPA/SSG 行為一致。
Useful? React with 👍 / 👎.
Contributor
|
✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。
|
Contributor
📊 PR 檢查結果✅ 品質檢查
📦 建置資訊
🤖 Automated by GitHub Actions |
Contributor
🔦 Lighthouse CI 報告
📊 查看完整報告 門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR） |
- AppLayout: 移除 backgroundColor/color inline styles - AppLayout: 改用 bg-[rgb(var(--color-*))] 語法 - BottomNavigation: 移除選中指示條的 inline styles - SideNavigation: 統一使用 CSS 變數系統 符合 CSP 安全政策，避免 inline style 違規警告
s123104
changed the title
Contributor
|
✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。
|
Contributor
📊 PR 檢查結果✅ 品質檢查
📦 建置資訊
🤖 Automated by GitHub Actions |
Contributor
|
✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。
|
- themes.ts: 新增 secondary 屬性到 StyleDefinition - index.css: 所有 4 種風格新增 --color-secondary 和 --color-info - 符合 Tailwind CSS Design Token 最佳實踐 語義色彩系統完整度： - primary: 主色（CTA、主要互動） - secondary: 輔色（次要互動、支援元素） - accent: 強調色（高亮、焦點） - info: 資訊提示色 [context7:tailwindlabs/tailwindcss.com:2026-01-16]
Contributor
🔦 Lighthouse CI 報告
📊 查看完整報告 門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR） |
Contributor
📊 PR 檢查結果✅ 品質檢查
📦 建置資訊
🤖 Automated by GitHub Actions |
Contributor
|
✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。
|
- Layout.tsx: overscrollBehaviorY 改用 Tailwind 任意屬性 - Settings.tsx: backgroundColor CSS 變數改用 Tailwind 持續提升 CSP 合規度，減少 inline style 使用
Contributor
|
✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。
|
Contributor
🔦 Lighthouse CI 報告
📊 查看完整報告 門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR） |
Contributor
📊 PR 檢查結果✅ 品質檢查
📦 建置資訊
🤖 Automated by GitHub Actions |
GHSA-36p8-mvp6-cv38 (CVSS 7.7): wrangler 4.51.0 vulnerability - wrangler is a dev-only tool for Cloudflare Workers local testing - Does not affect production environment - Will update when Cloudflare releases a fix
Contributor
🔦 Lighthouse CI 報告
📊 查看完整報告 門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR） |
Contributor
|
✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。
|
Contributor
📊 PR 檢查結果✅ 品質檢查
📦 建置資訊
🤖 Automated by GitHub Actions |
Contributor
🔦 Lighthouse CI 報告
📊 查看完整報告 門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR） |
- Remove waitForSelector('body[data-app-ready]') - unreliable in CI
- Use expect().toBeVisible() for functional UI verification
- Simplify fixture code by removing debug logging
- Follow Playwright best practices for web-first assertions
Ref: context7:/websites/playwright_dev web-first assertions
Contributor
|
✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。
|
Contributor
📊 PR 檢查結果✅ 品質檢查
📦 建置資訊
🤖 Automated by GitHub Actions |
Contributor
🔦 Lighthouse CI 報告
📊 查看完整報告 門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR） |
Contributor
|
✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。
|
Contributor
📊 PR 檢查結果✅ 品質檢查
📦 建置資訊
🤖 Automated by GitHub Actions |
Contributor
🔦 Lighthouse CI 報告
📊 查看完整報告 門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR） |
- Add navigationTokens to design-tokens.ts (Header 48px, Bottom Nav 56px) - Add CSS variables for navigation dimensions in index.css - Reduce Header height from ~56px to 48px (Threads/Instagram reference) - Reduce BottomNavigation height from 80px to 56px (iOS/Material balance) - Remove redundant title block from MultiConverter page - Fix ring overflow clipping on base currency highlight (-m-0.5 p-0.5) Industry standards reference: - iOS HIG: Header 44pt, Tab Bar 49pt - Material Design 3: App Bar 56dp, Nav Bar 56dp - WCAG 2.2: Touch targets min 44px Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Contributor
|
✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。
|
Contributor
📊 PR 檢查結果✅ 品質檢查
📦 建置資訊
🤖 Automated by GitHub Actions |
- SingleConverter From: Neutral variant (surface-elevated → primary/10) - SingleConverter To: Primary variant (primary/15 → primary/25) - MultiConverter: Primary variant (consistent with base currency highlight) Micro-interactions: - hover: scale-[1.03] + shadow-md + color transition - active: scale-[0.97] + shadow-sm (press effect) - Haptic feedback: 30ms vibration on supported devices Design system alignment: - Rounded-xl corners (consistent with card system) - 200ms ease-out transitions (smooth, responsive) - Color-coded variants for visual hierarchy Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Contributor
|
✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。
|
Contributor
🔦 Lighthouse CI 報告
📊 查看完整報告 門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR） |
Contributor
📊 PR 檢查結果✅ 品質檢查
📦 建置資訊
🤖 Automated by GitHub Actions |
Contributor
🔦 Lighthouse CI 報告
📊 查看完整報告 門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR） |
- Updated From Currency button to Outlined variant with refined hover effects. - Updated To Currency button to Filled variant with enhanced visual contrast. - Adjusted button styles for consistency in padding, border, and micro-interactions. - Improved transition durations for a smoother user experience. Design system alignment: - Rounded-lg corners for a modern look. - Transition duration reduced to 150ms for responsiveness.
Contributor
|
✅ SEO 審計通過！所有 2025 標準驗證項目都符合要求。
|
Contributor
📊 PR 檢查結果✅ 品質檢查
📦 建置資訊
🤖 Automated by GitHub Actions |
Contributor
🔦 Lighthouse CI 報告
📊 查看完整報告 門檻：所有類別 ≥ 85 分（軟性警告，不阻擋 PR） |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
參考 ParkKeeper 設計風格，完整重構 RateWise 的 UI/UX 系統
主要變更
4 種風格系統 (
themes.ts)Nitro：深色科技感（深藍 + 霓虹藍綠）Kawaii：可愛粉嫩（奶油色 + 粉紅色調）Zen：極簡專業（slate-50 + slate-900）- 預設Classic：復古書卷（米白色 + 棕色調）CSS Variables 自動切換 (
index.css)data-style+data-mode屬性控制ParkKeeper 風格組件
Settings.tsx：風格預覽卡片 + 顯示模式切換BottomNavigation.tsx：毛玻璃導覽列 + 選中指示條AppLayout.tsx：品牌 Logo SVG + 毛玻璃 HeaderTheme Showcase 頁面 (
/theme-showcase)設計規格
rounded-3xl(1.5rem)rounded-2xl(1rem)backdrop-blur-xl+bg-background/80border-black/[0.02~0.05]text-[9px] uppercase tracking-[0.2em]測試結果
Test plan
/theme-showcase查看所有元件Reference