# 記帳本

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

## 概要

| 項目 | 內容 |
|---|---|
| 製作日期 | 2023-04-18 |
| 分類 | App 與平台範例 |
| HTML 檔案 | `index.html` |
| 原始碼 | [target/20230418](https://github.com/pardnio/demo-web/tree/main/target/20230418) |

## 即時預覽

<iframe src="/target/20230418/" title="記帳本" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[在新分頁開啟範例](/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] 的雙半圓圓環旋轉。

```bash
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)

## 相關頁面

- [專案結構](/zh/project-structure)
- [樣式工作流程](/zh/styling-workflow)
- [框架使用](/zh/frameworks)