iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

微光採集瓶:用 Vue 3 打造每日美好記錄網頁 系列

現代人生活步調緊湊,很容易忽略生活中的小美好。這個專案希望透過一個溫柔的每日記錄儀式,讓使用者在一天的最後,回想並寫下一件當日的小小美好,系統會將這句話化作一顆光珠,緩緩落進專屬的玻璃採樣瓶中。

我將使用 Vue 3 搭配 Vite 從零開始打造這個網頁,內容涵蓋元件化開發、響應式資料、動態互動效果,並串接 LocalStorage 讓所有紀錄安全留在使用者自己的瀏覽器裡。每個月的最後一天,瓶中光珠會化作一張專屬的色譜回顧卡片,可下載保存。希望能藉由這 30 天的實作紀錄,練習 Vue 3 的核心概念,同時也做出一個真正可以讓自己使用的小網頁。

參賽天數 22 天 | 共 22 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 11

【Day 11】動態互動:讓光珠從瓶口落下的進場動畫

昨天我們成功利用 v-for,把採集到的資料轉化為一顆顆彩色光珠呈現在瓶子裡。但目前點擊按鈕,光珠都是瞬間出現在瓶中,看起來少了一點「被放進瓶子」的互動感。 今...

2026-09-25 ‧ 由 y0yi9ue 分享
DAY 12

【Day 12】自然散落效果:用隨機微位移打破過度整齊的堆疊

現在瓶子裡的光珠,雖然會沉底、往上堆疊,但每一顆都排成一整齊的橫排,像是被尺量過一樣,這在真實世界裡幾乎不可能發生,一把珠子灑進瓶子,一定不會是這麼整齊的。今天...

2026-09-26 ‧ 由 y0yi9ue 分享
DAY 13

【Day 13】點亮記憶:光珠懸浮回饋與點擊預覽卡片

「微光採集瓶」最重要的核心,不只是收集,而是重溫記憶。當初在輸入框裡寫下的那句「今天的美好小事」,如果存進瓶子後就再也看不到了,那過一陣子之後很有可能會忘記,當...

2026-09-27 ‧ 由 y0yi9ue 分享
DAY 14

【Day 14】別讓記憶消失:用 LocalStorage 實現資料持久化儲存

現在我們已經可以讓光珠被採集至玻璃瓶中,但如果刷新了頁面,裡面的光珠就會馬上消失,沒有辦法真的儲存下來或是被記得,所以今天要說明 LocalStorage 並使...

2026-09-28 ‧ 由 y0yi9ue 分享
DAY 15

【Day 15】時間的設置:當日編輯撤回與歷史過期鎖定

在昨天的實作中,我們透過 Vue 3 的 watch 深度監聽與 localStorage,成功讓掉進玻璃瓶裡的微光可以在網頁重新整理後依然保存下來。 但隨著系...

2026-09-29 ‧ 由 y0yi9ue 分享
DAY 16

【Day 16】重新定義「今天」:睡前才算一天結束的時間邏輯

你是夜貓子嗎?我是。所以我的「一天」其實不適合以凌晨十二點做分隔,我想應該也有很多人像我一樣吧!白天忙著工作、上課,晚上可能還要處理一些白天處理不完的事情,一直...

2026-09-30 ‧ 由 y0yi9ue 分享
DAY 17

【Day 17】忘了填寫怎麼辦:自動生成缺席的微光

市面上大多數的習慣打卡工具,往往帶著一種隱形的心理壓迫感:一旦中斷連續天數,畫面就會跳出刺眼的紅色警示,甚至歸零重來。這種機制很容易讓人從「想記錄生活」變成「害...

2026-10-01 ‧ 由 y0yi9ue 分享
DAY 18

【Day 18】時光篩選器:快速找到特定日子的回憶

昨天我們實作了「凌晨兩點跨日判定」與「自動補上純白光珠」的邏輯,整個系統在基本功能方面已經差不多具備。但也因為瓶子會如實記錄親手採集與留白補發的微光,瓶底的光珠...

2026-10-02 ‧ 由 y0yi9ue 分享
DAY 19

【Day 19】封存月份的美好:月度色卡的誕生及儀式感動畫

隨著日子一天天過去,瓶底積累了每天最幸福的痕跡,以及忙著生活的象徵。如果只是任由它們堆在瓶底,是不是少了一點儀式感。 今天我們要實作一個重磅功能:在月底最後一天...

2026-10-03 ‧ 由 y0yi9ue 分享
DAY 20

【Day 20】拒絕千篇一律:顏色佔比演算法與色卡調整

昨天做完開瓶跟光珠飛出去的動畫後,回頭看了一下產生的色卡,我發現一個很明顯的盲點:昨天的做法是用 new Set() 把有出現過的顏色抓出來,然後每個顏色都給一...

2026-10-04 ‧ 由 y0yi9ue 分享