全國技能練習紀錄 (skill-practice-tracker)

一個 VS Code 側邊欄小工具，用來記錄你的全國技能競賽練習： 按「開始」計時 → 練習中可「暫停/繼續」→ 按「結束」時輸入這次的進度/心得 → 自動存成一筆歷史紀錄。

資料存在 VS Code 全域儲存 (globalState)，所以不管你在哪個專案資料夾打開 VS Code，都看得到同一份練習紀錄。

功能

• 開始 / 暫停 / 繼續 / 結束 的計時器，暫停時間不會被算進練習時數
• 開始時可輸入「這次要練習什麼」（項目/科目，可留空），結束時強制輸入「這次練習的進度」文字，兩者一起存成一筆紀錄
• 每 30 分鐘自動關心：練習中每隔一段時間（預設 30 分鐘，可調整）會跳出通知詢問「你還在練習嗎？」，若 5 分鐘內沒有回應（預設，可調整），會自動幫你按下暫停，並跳出通知告訴你已自動暫停
  • 可在 VS Code 設定裡搜尋 skillPracticeTracker 調整這兩個時間：
    • skillPracticeTracker.checkInIntervalMinutes（預設 30）
    • skillPracticeTracker.idleTimeoutMinutes（預設 5）
  • 小提醒：這個計時器存在記憶體中，如果練習中重開 VS Code，這次的關心週期會重新算起（正式的練習時數不受影響，因為時數是用時間戳計算的）
• 右下角狀態列計時：練習中不用打開側邊欄，右下角狀態列就會常駐顯示目前計時（暫停時圖示會變），點一下可以快速「暫停/繼續」「結束並填寫進度」或「開啟練習面板」
  • 技術限制說明：VS Code 擴充套件沒有「浮動視窗可拖到螢幕任意位置」的 API，狀態列是官方支援、最貼近「右下角常駐」需求的做法；你可以把它拖曳到狀態列中的其他順序位置（VS Code 原生支援拖曳排序狀態列項目）
• 側邊欄列表顯示所有歷史紀錄（練習項目、時間、時長、進度筆記），可個別刪除
• 歷史紀錄上方會顯示「總練習時數」與各項目的累積時數標籤，一眼看出練多久、練什麼
• 指令面板 (Ctrl+Shift+P) 提供「匯出練習紀錄 (JSON)」與「清空所有練習紀錄」
• 就算重開 VS Code，正在進行中的計時也不會遺失（狀態存在全域儲存）

有趣但不分心的小設計

練習中的畫面刻意保持安靜（不會一直跳動、閃爍），有趣的元素都只在「開始」「暫停/繼續」「結束」這些你主動操作的瞬間出現：

• 吉祥物表情：🌙 尚未開始 / 💪 練習中 / ☕ 暫停中，狀態切換時輕輕彈跳一下，之後就靜止不動
• 開場小語：按下開始時隨機顯示一句短短的激勵語
• 結束慶祝：結束並填完進度後，會依練習時長跳出對應的鼓勵訊息（例如練超過1小時會有不同的稱讚），2秒後自動淡出，不會卡住畫面
• 等級與經驗值：每累積 5 小時練習升一級，側邊欄有一條 XP 進度條，讓你知道離下一級還差多少
• 連續天數 🔥：只要有連續每天練習就會顯示「連續 N 天」
• 成就徽章：解鎖「跨出第一步」「累積 5/20/50/100 小時」「連續 3/7/30 天」「馬拉松選手(單次練習超過2小時)」等成就，第一次達成時會跳出通知慶祝，並在面板上跳出金色彩帶動畫，之後徽章會永久保留在成就列（滑鼠移上去可看說明，未解鎖是灰色鎖頭），下方還有「解鎖時間軸」記錄每個成就是哪天達成的

這次新增的功能

• 🎯 每日/每週目標進度條：點「⚙️ 設定」輸入每日/每週想練習的分鐘數，面板上會顯示今日、本週累積時數與進度條
• 🏆 競賽倒數日：設定競賽的完整日期時間（年/月/日/上午下午/時/分）後，最上方會常駐顯示精確到分鐘的倒數「距離比賽還有 X 天 Y 小時 Z 分」，可隨時點✏️修改或清除
• 🍅 番茄鐘倒數模式：開始練習時可選擇 25/45/60/90 分鐘倒數，時間到會跳出通知問你要「繼續衝刺」「暫停休息」還是「結束並記錄」；倒數期間面板會顯示剩餘時間，超時後改顯示「已超時 +...」
• 📊 趨勢圖表：練習歷史下方新增「近7天」「近8週」長條圖，一眼看出練習時數的趨勢
• ✏️ 編輯歷史紀錄：每筆紀錄旁邊多了「編輯」按鈕，可以直接修改項目名稱、時長(分鐘)、進度筆記，不用整筆刪除重來
• 🕰️ 成就解鎖時間軸：成就區塊下方會列出每個已解鎖成就的達成日期

第五版新增

• ⚠️ 漏練提醒：每天會自動檢查一次，如果昨天完全沒有練習紀錄，會跳出通知提醒你，並附上目前競賽倒數「目前全國賽僅剩 X 天 Y 小時 Z 分」（需先設定競賽時間才會顯示倒數）
• ⏰ 上班/上課時段提醒：平日 9:00~17:00（時間可調整）之間，如果今天都還沒開始計時練習，每小時最多提醒一次「您是否尚未開啟計時？」，點通知上的「點我開啟」就會直接跳到練習面板
• 這兩個提醒都可以在 VS Code 設定裡搜尋 skillPracticeTracker 個別開關或調整時間：
  • skillPracticeTracker.enableMissedDayReminder（預設開啟）
  • skillPracticeTracker.enableWorkHoursReminder（預設開啟）
  • skillPracticeTracker.workHoursStart / skillPracticeTracker.workHoursEnd（預設 9 與 17）

本次修正的 Bug

• 修正按「結束」時，進度輸入框跟「暫停/結束」按鈕會同時疊在畫面上、容易誤按的問題：現在打開輸入框時會先收起計時按鈕，取消或送出後才恢復
• 開始/結束的輸入面板改成平滑滑入滑出，不再是生硬的直接出現/消失
• 統一「詢問是否還在使用」的間隔與其設定預設值（30 分鐘），避免程式碼與設定畫面預設值不一致

本機安裝方式 (最簡單，不需要上架)

專案裡已經打包好 skill-practice-tracker-0.0.1.vsix，你只要：

1. 打開 VS Code
2. 左側「擴充功能」面板右上角「...」→「從 VSIX 安裝...」
3. 選擇 skill-practice-tracker-0.0.1.vsix
4. 安裝完成後，左側活動列會出現一個時鐘圖示，點開就是練習紀錄面板

或用指令列安裝：

code --install-extension skill-practice-tracker-0.0.1.vsix

開發模式（想改程式碼時）

npm install
npm run watch      # 背景監看並自動編譯 TypeScript

接著在 VS Code 打開這個資料夾，按 F5 會開一個「Extension Development Host」視窗做即時測試，改完程式碼後在該視窗按 Ctrl+R (或 Cmd+R) 重新載入即可看到最新效果。

之後想要免費上架到 VS Code Marketplace

上架完全免費，只需要：

1. 到 Azure DevOps 建立一個免費帳號，並在「User settings → Personal Access Tokens」建立一組 PAT（權限勾選 Marketplace: Manage）
2. 到 VS Code Marketplace 發佈者管理頁 建立一個發佈者代號 Sean008166（package.json 裡的 publisher 已經設定為這個名稱，記得申請時要用同樣的名稱）
3. 補上 repository 欄位（指向你的 GitHub repo）跟一個 LICENSE 檔案（消除打包警告，非必要但建議）
4. 建議另外準備一張 128x128 的 PNG 圖示，在 package.json 加回 "icon": "media/marketplace-icon.png"，上架頁面比較好看
5. 登入並發佈：

npx vsce login <你的publisher代號>
npx vsce publish

之後每次更新版本號 (npm version patch) 再 vsce publish 就會自動更新上架的版本。

資料格式

每筆紀錄長這樣（存在 VS Code 的 globalState，鍵名 skillPracticeTracker.records）：

{
  "id": "1751800000000-1751803600000",
  "startTime": 1751800000000,
  "endTime": 1751803600000,
  "durationMs": 3600000,
  "note": "完成第3題配線,但超時5分鐘,下次要加快"
}

可以透過指令面板「匯出練習紀錄 (JSON)」隨時把資料備份成檔案。