[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"seo":3,"site":24,"contact":28,"portfolio:loaninsight":36},{"titleTemplate":4,"description":5,"keywords":6,"organizationName":7,"personName":7,"personJobTitle":8,"bingVerification":9,"customMeta":10,"googleVerification":15,"headInjections":16},"%s | 全端系統開發 | 網頁設計 | 伺服器託管","全端系統開發、網頁設計、伺服器託管一站式服務 — 韓滷 ozakboy","全端開發,網頁設計,伺服器託管,韓滷,ozakboy,C#,Vue,Nuxt,微服務","韓滷","全端系統工程師","4928B4223346F74DB53D9754C37164AB",[11],{"kind":12,"key":13,"content":14},"name","google-adsense-account","ca-pub-5488118663607574","npSud3_qj3nhajB0DeUEYYZbdflOR4vLDaLWnXD2liU",[17,21],{"label":18,"content":19,"enabled":20},"GA Google tag","\u003C!-- Google tag (gtag.js) -->\n\u003Cscript async src=\"https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=G-L0QNGPN253\">\u003C\u002Fscript>\n\u003Cscript>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n\n  gtag('config', 'G-L0QNGPN253');\n\u003C\u002Fscript>",true,{"label":22,"content":23,"enabled":20},"Google Syndication","\u003Cscript async src=\"https:\u002F\u002Fpagead2.googlesyndication.com\u002Fpagead\u002Fjs\u002Fadsbygoogle.js?client=ca-pub-5488118663607574\"\n     crossorigin=\"anonymous\">\u003C\u002Fscript>",{"siteTitle":7,"subtitle":25,"copyright":26,"favicon":27},"全端系統開發 \u002F 網頁設計 \u002F 伺服器託管","© 2026 韓滷 ozakboy. All rights reserved.","\u002Fdata\u002Fimages\u002Fsite\u002F33752408-36e1e0da1af5.ico",{"name":7,"title":8,"tagline":25,"email":29,"telegram":30,"line":31,"github":32,"intro":33,"website":34,"threads":35},"ozakboy@ozakboy.life","https:\u002F\u002Ftelegram.me\u002Fminksaki64","https:\u002F\u002Fline.me\u002Fti\u002Fp\u002FllWJZ4iuiJ","https:\u002F\u002Fgithub.com\u002Fozakboy","## 關於我\n\n我是韓滷,全端系統工程師。\n\n具備紮實的軟體開發基礎,擅長專案開發規劃、流程設計、各種 Bot 開發、網頁前後端開發、高頻交易系統、微服務架構等。主要開發語言為 C# .NET,擁有豐富的系統架構設計與實作經驗。\n\n## 聯絡方式\n\n歡迎透過 Email 或 Telegram 聯繫,討論您的專案需求。","https:\u002F\u002Fwww.ozakboy.life","https:\u002F\u002Fwww.threads.com\u002F@ozakboy",{"title":37,"description":38,"category":39,"status":40,"date":41,"gallery":42,"duration":58,"teamSize":59,"github":60,"demo":61,"technologies":62,"features":72,"seoTitle":80,"seoDescription":81,"coverImage":44,"ogImage":44,"slug":82,"body":83},"LoanInsight 智貸見解 — 真實貸款成本與財務診斷工具","一款全前端、零後端的現代化貸款試算工具。首創結合「真實 APR（含開辦費攤還）」與「分階段 DSR 收支診斷」，並支援兩段式利率與雙銀行同屏 PK，讓隱藏的貸款成本無所遁形。","Web 應用","production","2026-05-27",[43,46,49,52,55],{"path":44,"alt":45},"\u002Fdata\u002Fimages\u002Fportfolio\u002Floaninsight-a4e2f52dea6d.svg","圖標",{"path":47,"alt":48},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fimg-164871008832.png","首頁",{"path":50,"alt":51},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fimg-516158307cfc.png","利率設定",{"path":53,"alt":54},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fimg-bdcf3cd51efb.png","對比畫面",{"path":56,"alt":57},"\u002Fdata\u002Fimages\u002Fportfolio\u002Fimg-98efefc5a10b.png","對比圖表","約 1 週","個人 ","https:\u002F\u002Fgithub.com\u002Fozakboy\u002FLoanInsight","https:\u002F\u002Floaninsight.ozakboy.life",[63,64,65,66,67,68,69,70,71],"Vue 3","TypeScript","Vite","Tailwind CSS","Chart.js","vue-chartjs","GitHub Actions","GitHub Pages","Cloudflare",[73,74,75,76,77,78,79],"真實 APR 演算法：以牛頓迭代法 (Newton-Raphson) 求解含開辦費的內部報酬率，揭露隱藏成本","一段式 \u002F 兩段式利率自由切換，並支援寬限期（只繳息）攤還排程","分階段 DSR 收支動態診斷，分級提示安全 \u002F 警戒 \u002F 紅線區","雙銀行方案同屏 PK，自動高亮最省錢的推薦方案","Chart.js 視覺化本金遞減與累積利息曲線","全前端即時計算，不蒐集、不上傳任何個人財務資料","GitHub Actions 自動 CI\u002FCD 部署，Cloudflare 自訂網域託管","LoanInsight 智貸見解｜真實 APR 貸款試算與財務診斷工具","結合真實 APR（含開辦費攤還）與分階段 DSR 收支診斷的現代化貸款試算工具，支援兩段式利率、寬限期與雙銀行同屏 PK。以 Vue 3 + TypeScript 全前端打造，資料不外流。","loaninsight","## 專案簡介\n\n**LoanInsight（智貸見解）** 是一款定位為「極簡、現代化、完全免費」的理財工程工具。市面上的貸款試算器多半介面老舊、不支援階梯式利率，更**忽略開辦費對實質利率的衝擊**。LoanInsight 的核心目標是打破資訊不對稱，讓使用者掌握「真正的貸款成本」並評估未來的財務承載力。\n\n## 解決的痛點\n\n- 一般試算只看「牌告利率」，卻忽略信用查詢費、手續費、代書費等**開辦費**，導致實質成本被低估。\n- 主流青安、行庫方案多為**兩段式利率**，傳統工具無法精準試算前後期月付差異。\n- 使用者難以評估貸款後的**收支壓力**是否在安全範圍。\n\n## 核心功能\n\n1. **真實 APR（總費用年百分率）**：將「貸款額 − 開辦費」視為現值，未來各期還款視為現金流，以**牛頓迭代法**即時解出內部報酬率 (IRR) 並年化，呈現含費用的真實利率。\n2. **兩段式 \u002F 一段式利率 + 寬限期**：可設定第一階段月數與利率、第二階段調升後利率；寬限期內只繳息不還本，攤還排程逐期精算、階段切換時自動重算月付。\n3. **分階段 DSR 收支診斷**：依可支配收入計算各階段月付佔比，分級提示安全（≤30%）\u002F 警戒（31–45%）\u002F 紅線（>45%）。\n4. **雙銀行同屏 PK**：同時比較兩套方案的 APR、總利息、最高月付與總成本，並自動推薦最省錢方案。\n5. **資料視覺化**：以 Chart.js 動態呈現本金遞減與累積利息曲線。\n\n## 技術架構\n\n- **前端框架**：Vue 3（Composition API）+ TypeScript，核心金融邏輯封裝於純函式模組，易於測試與維護。\n- **建構工具**：Vite，毫秒級 HMR、生產環境 Tree-shaking 與程式碼分割。\n- **樣式**：Tailwind CSS，Mobile-first 響應式設計。\n- **圖表**：Chart.js \u002F vue-chartjs。\n- **部署**：GitHub Actions 自動打包並部署至 GitHub Pages，搭配 Cloudflare DNS 託管自訂網域。\n\n## 技術亮點與挑戰\n\n- **金融數學落地**：APR 需求解非線性方程式，採牛頓迭代法在前端即時收斂，並處理零利率、末期浮點誤差等邊界情況。\n- **兩段式利率攤還**：逐期建立攤還表，於寬限期結束與利率切換時重新計算等額本息月付，確保期末本金精準歸零。\n- **隱私優先**：所有計算皆於瀏覽器端完成，無後端、不蒐集任何個人財務資料。\n- **零成本維運**：全靜態託管於 CDN，面對流量亦能穩定運作。\n\n## 成果\n\n打造出一款功能領先同質網站的貸款試算工具，將原本不透明的「開辦費 + 階梯利率」成本完整揭露，並提供可立即理解的收支風險分級與雙方案決策建議。\n"]