今天的核心任務不是「新增新功能」，而是 整理、優化、驗收，今天是專門拿來優化程式碼 + 改善體驗 + 做里程碑紀錄的日子！讓前面累積的程式碼變乾淨、好用、減少 bug，沒有急著加新功能，反到先幫網站做優化處理，就像是剛剛住進新房子一小段時間一樣，開始發現：燈光是不是太暗？插座是不是該加個保險絲？所以今天的任務，就是把前七天的成果做一次全面驗收，並且小修小補，讓這棟小房子更穩固！
1.程式碼優化：
(1)App.vue
a.localStorage 安全讀寫：以前是直接 JSON.parse，但如果資料壞掉會整個炸掉。現在加上 try/catch 和基本 schema 檢查，壞掉的 JSON 會自動清掉，不會害網站整個壞光光。

b.寫入節流：以前只要任務清單一有更動，馬上就會寫 localStorage。現在加一個 200ms 緩衝，避免它太勤勞，才能使效能更穩定。

c.id 產生更穩：把 Date.now() 換成 crypto.randomUUID()（有後備），就算使用者瘋狂連點，也不怕撞 ID。
(2)TaskList.vue
a.輸入框升級：改成 <form @submit.prevent>，讓使用者按 Enter 也能新增任務。

b.空白任務防呆：按鈕會在空白時自動 disabled，這樣就不會再出現「一堆空白項目」。

c.刪除按鈕無障礙：加上 aria-keyshortcuts="Delete"，讀屏工具會提示使用者能用刪除鍵。

d.空清單提示：加上 aria-live="polite"，畫面更新時能即時朗讀。

2.樣式大掃除
經過驚天的優化檢查，才發現之前 TaskList.vue 裡的 CSS ，跟全域 style.css 有點一咪咪撞到了！所以稍稍做了調整：
a.通用樣式（卡片 .card、新增列 .row.add、按鈕 .btn、列表 ul/li） → 全部搬到全域 style.css。

b.元件獨有樣式（任務完成刪除線、刪除按鈕 hover 紅底、空清單提示、長字自動換行） → 留在 TaskList.vue。

結果做完之後，程式碼變得更乾淨，假使日後要加新頁面（例如 About 頁），風格也會比較自然統一，另外，Footer 也做了一個小升級：年份自動顯示 © 2025，不用再手動改！

3.測試驗收清單
a.新增／勾選／刪除都正常。

b.重新整理後任務仍在。

c.連續快速操作不卡頓（節流生效）。

d..超長任務標題自動換行，不會爆版。

e.空白任務按鈕 disabled，空清單有提示。

這就像幫房子做了一次「水電測試」+「家具擺整齊」，住起來更安心。
4.學到的重點
a.localStorage 只能存字串，要配合 JSON.stringify / JSON.parse。

b.錯誤防呆很重要：壞資料要能自動復原。

c.程式碼職責分明：共用樣式放全域，元件只管自己專屬的部分。

d.小小的 UX 提升（Enter 新增、防空白、無障礙）會讓使用者體驗好很多。

雖然今天的畫面和昨天的差不多，但程式碼部分到是有條理了許多，希望透過今天的整理，在之後的挑戰中能更加順利！