iT邦幫忙

2025 iThome 鐵人賽

DAY 24
0
Modern Web

FlowNest系列 第 24

Day24_小調整UI與全域音樂控制

  • 分享至 

  • xImage
  •  

修改UI

  • 首頁:拿掉「WELCOME TO FLOWNEST」的橫幅。
  • 專注設定頁(/setup):整塊「專注儀式 + 說明文字」移除,表單直接頂上來。
  • 完成頁(/done):去掉上方標題與「體驗模式保存」說明,只留下核心資訊。
  • 社群頁(/wall):刪掉頁首大標與「開始一段專注」按鈕。
  • 私訊頁(/chat):一樣簡化文字。
  • 全站音樂控制:把播放/暫停/音量控制條做成「全域停靠條」,固定在導覽列下方。桌機靠右、手機置中,隨時能看到、點得到。

修復bug(原本音樂會頓一下)

問題:播放音樂時,從 Navbar 點進「專注計時」,音樂會停一拍再繼續。
原因:設定頁會在載入時重新指定音源。
解法

  • 音樂播放器改成全域單例,控制條固定在全域層,路由切換不會重建。
  • 只有在「真的換曲目」時才變更來源;若是同一條音樂就不重設,確保不中斷。

樣式與體驗

  • 控制條固定在導覽列下方,避開安全區。
  • 事件監聽只綁在控制條本體,不干擾其他操作。
  • 排版與視覺重量全站統一。

音樂區塊還是要調整,現在的樣式還是會擋到字
今天的畫面


上一篇
Day23_生成文字模型
下一篇
Day25_底部播放器上線
系列文
FlowNest25
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言