系統架構摘要 (Executive Summary)
本報告統整了「萬用計算機 (Omni Calculator)」的專案開發與優化脈絡。記錄了我們如何從傳統「用完即走」的單調計算機中跳脫，透過修復 JavaScript 原生浮點數精度缺陷，實作純前端的本息攤還演算法，並導入 3D 物理防誤觸按鍵與動態圓餅圖，成功打造出一個具備極佳使用者體驗與超高網頁停留時間 (Dwell Time) 的現代化生產力 Web App。
市面上的計算機工具要不就是太過陽春，要不就是介面複雜難懂、廣告滿天飛。我們最初的構想是打造一個「極速、免安裝、跨平台完美適應」的聚合型計算中心，將日常買賣、工程科學、高階金融試算三大功能合而為一。
然而，在開發與擴充功能的過程中，我們立刻撞上了所有前端工程師都會遇到的經典痛點：浮點數精度災難與介面資訊過載。
一、 克服精度災難：純前端財務精算引擎
本章核心：修補 0.1 + 0.2 !== 0.3 的底層缺陷
分析為何傳統 JS 無法直接應用於金融計算，以及我們如何建構大數乘除轉換與純前端房貸陣列迴圈，達成 0 延遲的財務結算。
JavaScript 原生的浮點數運算存在著名的 IEEE 754 精度問題（例如 0.1 + 0.2 = 0.30000000000000004）。若直接將這種原生運算應用於動輒千萬台幣的高額房貸試算，會產生嚴重的複利誤差，完全無法作為財務參考。
架構師決策：「所有的金融計算，都必須經過大數放大、四捨五入後再縮小的嚴格修正。」
在「財富金融模式」中，我們徹底捨棄了依賴後端（如 Python）進行運算的傳統思路。所有的「本息平均攤還」與「寬限期遞延」等複雜財務演算法，全數在前端的 JS 沙盒中透過陣列迴圈 (Array Loop) 執行。
搭配千分位動態防呆（輸入 1000000 會瞬間變為 1,000,000），使用者輸入參數的瞬間，系統能在 0 毫秒內噴出多達 360 期的每月還款明細表。這不僅達成真正的零伺服器成本，更給予了使用者極致流暢的操作體驗。
圖 1.1：支援千分位動態防呆的前端財務精算面板
二、 避免資訊過載：模組化 UI 與 3D 防誤觸設計
本章核心：行動優先 (Mobile-First) 與物理回饋
探討如何利用分頁機制 (Tabs) 解決「飛機儀表板效應」，並透過 CSS 打造具備按壓阻尼感的 3D 按鍵，確保單手操作不失誤。
隨著功能擴充（常規計算、工程函數、房貸試算），如果把所有輸入框與面板放在同一頁，畫面看起來會像飛機儀表板一樣複雜，讓使用者產生強烈的視覺壓迫感與操作焦慮。
我們引入了流暢的 模組化 UI 架構 (Modular Views)，配合懸浮底部導覽列，將不同屬性的計算機徹底隔離。確保使用者在「房貸試算」頁面時，絕對不會看到「三角函數」的干擾。
而在常規買賣模式中，我們針對行動裝置單手操作，利用 CSS 的 box-shadow 與 active:translate-y 技巧，刻劃了 3D 物理防誤觸大按鍵。不僅極大化了數字與等號的點擊區間，使用者在敲擊時更能感受到明顯的「阻尼回饋感」，大幅降低了在菜市場或網購比價時按錯數字的機率。
圖 2.1：結合 CSS 物理下壓回饋感的 3D 防誤觸按鍵
三、 留存率魔法：高階變現與生態系串接
LocalStorage 無縫存檔
在前端利用 localStorage 實作自動記憶功能（Auto-Save），並將工具 ID 標準化為 omni-calculator。這使得它能與我們在 大腦救星的快取機制 中所實作的「我的最愛」全局按鈕完美融合，達成 0 秒置頂。
高轉換的金融變現漏斗
引入 Chart.js 動態圓餅圖。當使用者觀察「本息攤還表」時，頁面停留時間往往高達 3~5 分鐘。這種高純度的流量特性，與 飆股探測器的財經受眾 一致，非常適合安插券商開戶與數位帳戶的聯盟行銷 (Affiliate) 連結。
<!-- Chart.js for Financial Visualization -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
四、 結語：微型工具的巨大生產力
「萬用計算機」證明了：只要能精準掌握使用者的痛點，即便是最古老、最基礎的工具，也能煥發出全新的生命力。
透過純 JavaScript 精度控制與財務演算法矩陣，我們在沒有任何後端運算資源的情況下，實現了毫秒級、零誤差的高階商業模型器。利用模組化視圖與本機狀態記憶，成功在「功能強大」與「介面極簡」之間找到完美平衡，打造出了這款辦公室與生活理財必備的全能樞紐。