Day 27：版面配置更改（RWD 實踐）

在前幾天的開發中，我們的記帳網站在電腦螢幕上展現了極佳的質感與功能性。然而，身為一個手機不離身的大學生，如果打開記帳網站時排版左右擁擠、操作不便，那實用性就會大打折扣。所以，今天的核心任務是透過 CSS Grid 與 RWD 響應式思維，將總覽頁面重新重構為直覺的「上下流動佈局」！

一、 為何要放棄左右雙欄？

早期版本中，我們採用了典型的桌面端左右雙欄設計（左側放清單、右側放快速記帳）。但在實際透過手機瀏覽與操作時發現

• 空間擠壓：手機螢幕較窄，左右並排會讓各個區塊變得狹長，欄位容易發生擁擠。
• 操作直覺性：對於記帳 App 而言，「隨手記錄」應該是第一優先的動作。使用者打開網頁，理應先看到快速記帳的輸入區，接著才是下方的歷史消費紀錄。

二、 HTML 與彈性網格調整

我們將總覽頁面改為上下獨立的區塊，並在快速記帳的輸入欄位中運用了 grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));：

<!-- 上方：快速記帳 (改為橫向寬版區塊) -->
<div class="section-box" style="margin-bottom: 25px;">
    <h3 style="margin-top: 0; margin-bottom: 15px;">快速記帳</h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: center;">
        <input type="date" id="expense-date">
        <input type="text" id="expense-name" placeholder="消費名稱 (例如: 晚餐)">
        <input type="number" id="expense-amount" placeholder="金額 (例如: 120)">
        <select id="expense-category">
            <option value="food">吃的喝的</option>
            <option value="transport">交通</option>
            <option value="entertainment">娛樂</option>
            <option value="clothes">買買買</option>
            <option value="other">其他</option>
        </select>
        <button id="add-btn" style="grid-column: 1 / -1;">新增支出</button>
    </div>
</div>

<!-- 下方：消費紀錄列表 -->
<div class="section-box">
    <h3 style="margin-top: 0; margin-bottom: 15px;">消費紀錄列表</h3>
    <div class="calendar-mock" id="calendar-view"></div>
</div>

Day 28：PWA 漸進式網頁應用程式

在前面的開發中，我們完成了流暢的 RWD 手機響應式排版。但每次都要打開瀏覽器、輸入網址才能記帳，總覺得少了一點「App」的儀式感。所以，今天的核心任務是導入 PWA（Progressive Web App）技術，透過 manifest.json 讓我們的記帳網頁可以像原生 App 一樣「安裝」到手機桌面上，點擊圖示就能直接全螢幕記帳！

一、 核心技術：manifest.json

定義 App 的名稱、外觀主題色，以及啟動方式（display: standalone 可以完美隱藏瀏覽器網址列，帶來沉浸式體驗）：

{
  "name": "大學生的小金庫",
  "short_name": "小金庫",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "#0f172a",
  "theme_color": "#ffffff"
}

Day 29：資料視覺化精進：優化 Chart.js 圓餅圖與百分比互動提示

在我們的記帳與消費分析網站中，「統計」頁面扮演了讓使用者檢視開銷佔比的重要角色。為了讓介面更聚焦，我們移除了冗長的文字明細清單，改由圓餅圖與直覺的提示框來扛起資料呈現的重責大任。今天就來看看如何透過 Chart.js 的回呼函數打造精確的百分比互動提示！

一、 自訂 Chart.js Tooltip 顯示佔比

為了讓大學生使用者能一目了然地知道各項開銷佔總支出的「比例（%）」，我們在 Chart 的選項中加入了自訂的 tooltip.callbacks.label 邏輯：

expenseChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: categoriesInfo.map(cat => cat.name),
        datasets: [{
            data: chartData,
            backgroundColor: chartColors,
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom',
            },
            // 自訂提示框同時顯示百分比與金額
            tooltip: {
                callbacks: {
                    label: function(context) {
                        const value = context.raw || 0;
                        const percentage = totalExpenseSum > 0 ? ((value / totalExpenseSum) * 100).toFixed(1) : 0;
                        return ` ${context.label}: ${percentage}% ($${value})`;
                    }
                }
            }
        }
    }
});