Petmoir
毛小孩日誌 — 記錄毛孩日常與開銷的離線優先 PWA
關於這個專案
Petmoir 是一個記錄毛小孩日常與開銷的 PWA,自 Punch-PWA fork,沿用其日曆、收支、Gist/Mega 儲存、離線優先同步等成熟基礎設施,改造為以「毛孩」為中心的日誌 App。純前端、離線優先,資料儲存於你自己的 GitHub Gist 或 Mega,零後端、零託管成本。技術上維持 Vanilla JS(classic script + window.X,非 ES modules)。
各大版分水嶺:v0.1 fork 改名換色 → v0.2~0.3 毛孩管理/開銷頁 → v0.4 Mega 照片 → v0.5 主頁日記化 → v0.7 日誌/收支/備忘錄模型 → v0.8 標記/展示頁/深色與快取修正。目前已迭代至 v0.8.5,持續維護中。
核心功能
- 多毛孩管理:可建立多隻毛孩、各自顏色,支援物種、性別、晶片號、生日、認養日、品種、體重、疾病等欄位;顏色會套用到日曆標記與開銷統計。
- 日誌與備忘錄:日誌記錄毛孩日常、可加照片,點開為 IG 版面(大圖在上);備忘錄可設重複/提醒(看醫生、洗澡、打疫苗)。
- 收支(開銷頁):收入/支出記錄可指定毛孩與分類(飼料/醫療/美容/保險/用品),各毛孩支出卡、分類長條圖、逐筆明細。
- 介面:日曆首頁+當日明細,日誌=實心、備忘錄=虛線、收支=空心標記;深色模式;海軍藍+金的品牌色系由 CSS 變數驅動。
- 儲存與分享:離線優先+背景同步、一帳一庫、三種連結方式(Gist/Mega/Gist+Mega)、多資料庫切換。
技術亮點
- 從 Punch-PWA fork 並完全隔離:檔名前綴 petmoir-、Mega 資料夾 Petmoir,與 Punch 資料互不干擾,重用成熟基礎設施大幅加速開發。
- 按年份分檔儲存:petmoir-data.json(設定+索引)+ petmoir-YYYY.json(各年紀錄),繞過 Gist 單檔 1MB 限制,啟動只載入「設定+當前年」。
- 一帳一庫:一個雲端帳號只讀寫一份資料檔,根治「資料存在卻顯示空白」的讀錯檔問題。
- 照片資料流:連結 Mega 後可為日誌/備忘錄加照片(自動壓縮、每張一個檔),離線也看得到。
版本歷程
主要版本的演進里程碑。
專案資訊
- 類型:漸進式網頁應用(PWA)
- 角色:個人專案・獨立開發
- 基礎:自 Punch-PWA fork
- 目前版本:v0.8.5
技術標籤
Vanilla JS
PWA
Service Worker
GitHub Gist
Mega API
Chart.js
離線優先
純前端
設計理念
重用 Punch-PWA 的成熟基礎設施快速打造垂直應用,零後端、零託管成本,資料 100% 由使用者擁有並存放在自己的雲端。