記帳本

以 PDRenderKit 資料綁定製作的手機記帳 App 原型：月曆／圓餅檢視、側邊選單與新增紀錄計算鍵盤。

概要

項目	內容
製作日期	2023-04-18
分類	App 與平台範例
HTML 檔案	`index.html`
原始碼	target/20230418

即時預覽

在新分頁開啟範例

頁面區塊

區塊	說明
頂部列（#nav）	選單按鈕、{{ year }}年{{ month }}月月份選擇開關、模式切換圖示（:if / :else 切換圓餅／月曆）
月份選擇（#month-selector）	年份列含左右按鈕，:for 產生 12 個月份按鈕（當月 .sel）
新增按鈕	浮動 + 按鈕，開啟新增紀錄面板
月曆檢視（.index-calendar）	mode == calendar 時顯示：週日至週六表頭，JS 產生每週日期按鈕列（:for + :html）
圓餅檢視（.index-pie）	預設檢視：月支出／月收入與 percent="65" 的 CSS 圓環圖
紀錄列表（.index-list）	靜態日期群組 2023/04/18 與三筆支出；日期與金額由屬性輸出
側邊選單（#app-tab）	滑入面板：頭像、姓名、信箱連結、GitHub/LinkedIn/Facebook/Instagram 與版權
新增紀錄面板（#add-item）	支出/收入切換、type_list（:for）分類格、描述輸入、日期列與 19 鍵計算鍵盤

互動行為

js/index.js：new PD({ id: "app", data, event }) 綁定 {{ }} 文字、:for 列表、:if/:else、:class、:html 與 @click 事件
模式取自 ?mode= 參數（location.href.$query，預設 pie）；changeMode 以 ?mode=pie / ?mode=calendar 重新載入
月曆資料以 PDRenderKit 日期擴充（$date start/end/pre、$d、$D）計算，含前後月補位日（.unmonth）
addShow / tabShow / selectorShow 切換 #add-item / #app-tab / #month-selector 的 .show；selectorShow 旋轉箭頭圖示
changeIncome 在支出與收入分類間切換 app.data.type_list（響應式重繪）；changeType 移動 .sel
numVal：鍵盤在 #num-input data-value 組算式（上限 16 字，÷/x 轉 / *），AC 清除、← 刪除、OK 以 eval() 計算或提示「成功新增紀錄」並關閉面板
年份與日期左右按鈕無事件處理

相依資源

名稱	版本	來源
Font Awesome Free	6.5.2	https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css
PDRenderKit	1.2.0	https://cdn.jsdelivr.net/npm/pdrenderkit@1.2.0/dist/PDRenderKit.js
Google Analytics (gtag.js)	G-L5VYEZPVXX	https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX
Page stylesheet (compiled SCSS)	-	./css/index.css
Page script (type=module)	-	./js/index.js

樣式

項目	內容
SCSS 入口	`sass/index.scss`
輸出 CSS	`css/index.css`

單一 SCSS 檔（無 partial）。:root 變數 --main-color、--content-max-width（480px）、--num-pad-color、--num-pad-enter；固定全螢幕面板搭配 backdrop-filter 模糊；@for 1..100 產生 [percent=N] 的雙半圓圓環旋轉。

cd target/20230418
npx sass sass/index.scss css/index.css --no-source-map || exit 1

使用技巧

PDRenderKit 模板語法：{{ }}、:for="e in list"、:if / :else、:class、:html、@click
以元素建構器 "td".(["button.sel".(i)]).$html 產生月曆格 HTML
純 CSS 圓環：兩個半圓 span 以 SCSS @for 產生 3.6deg × percent 旋轉
以 CSS content 輸出數值："$" attr(data-value)、attr(date)、attr(percent) "％"
行動優先固定版面，寬度上限 480px；min-width 480px media query；backdrop-filter 毛玻璃面板
腳本以 ES module 載入（type="module"）

外部資源

https://pardn.io/image/head.png (favicon)
https://pardn.io/web-template/image/20230418.jpg (og:image / twitter:image)
https://pardn.io/web-template/target/20230418 (canonical / og:url)
https://fakeimg.pl/1024/282828/eae0d0/?text=sample (placeholder images)

記帳本

概要