隨著測試與使用的資料越來越多，如果使用者想要一口氣清空所有紀錄、重新開始記帳該怎麼辦呢？
所以今天我們會為專案加入 「清除全部紀錄與重設金庫」 功能。透過 localStorage 的清理機制，並搭配安全防呆的 confirm() 彈窗，讓使用者能一鍵重置所有狀態與畫面。

一、 在預算設定頁面加入危險重設按鈕

我們在原先的「預算管理設定」頁面下方，新增了一個紅色的危險按鈕（Danger Button），讓使用者能夠執行清空與重設的操作：

<清除全部紀錄與重設按鈕 >
                    <button id="reset-all-btn" style="margin-top: 10px; background-color: #e74c3c; color: white; font-weight: 500; border: none; padding: 10px; border-radius: 4px; cursor: pointer;"> 清除全部紀錄與重設</button>

二、 核心邏輯：防呆確認與資料清除重渲染

在 script.js 中，我們綁定了點擊事件。為了防止使用者手殘誤觸，我們加上了 confirm() 二次確認。確認後會清空記憶體陣列、移除 localStorage 的儲存資料，並同步呼叫各個渲染函式讓畫面瞬間歸零：

// 清除全部紀錄與重設功能
const resetAllBtn = document.getElementById('reset-all-btn');

resetAllBtn.addEventListener('click', function() {
    // 彈出二次確認視窗，防止誤觸
    const isConfirmed = confirm("確定要清空所有記帳紀錄與預算設定嗎？這個動作無法復原喔！");
    
    if (isConfirmed) {
        // 1. 清空記憶體中的資料
        expenses = [];
        budgets = { weekly: 0, monthly: 0 };

        // 2. 移除 localStorage 裡的資料
        localStorage.removeItem('my_expenses');
        localStorage.removeItem('my_budgets');

        // 3. 清空預算輸入框
        weeklyBudgetInput.value = '';
        monthlyBudgetInput.value = '';

        // 4. 重新渲染所有畫面（總覽、月曆、圖表）
        renderExpenses();
        renderCalendar();
        renderChart();

        alert("已成功清空所有資料，小金庫已重設！");
    }
});