現金流風險圖鑑 (Cashflow Risk Atlas)

An interactive project about time, compounding, and the real risk of not having cash when life happens.

一個互動式的金融風險教育工具，幫助使用者理解時間、複利與現金流動性之間的關係。

🌐 線上體驗： https://ddio.github.io/cashflow-risk-atlas

🎯 專案目標

本專案旨在透過互動式複合圖表，以視覺化方式呈現不同金融工具的特性與風險，並模擬真實生活中的財務風險情境。

圖表整合了以下功能：

• 投資工具成長比較：展示定存、儲蓄險、大盤ETF在相同本金下的成長差異
• 風險情境模擬：模擬醫療支出、長期照護等生活事件對現金流的影響
• 波動性分析：展示ETF投資的波動特性與長期報酬

🛠️ 技術棧

• Framework: Nuxt 4
• Language: TypeScript
• UI: Vue 3 (Composition API)
• Charts: Chart.js + vue-chartjs
• Design: Mobile-first responsive design
• Locale: 繁體中文 (zh-TW)

📱 功能特色

互動式複合圖表

• 投資年數調整：可設定 0-20 年的投資期間
• 投資工具比較：同時比較定存、儲蓄險、大盤ETF 三種工具的成長曲線
• 通貨膨脹調整：可選擇是否記入歷史平均通膨 2%
• ETF 波動模擬：模擬 ETF 投資的年度波動（-40% ~ +40%），展示真實市場起伏
• 多種報酬情境：可切換 ETF 低年化報酬（4%）情境
• 生活事件模擬：
  • 醫療支出：隨機發生於第 2-5 年，一次性支出 20 萬
  • 長期照護：隨機起始於第 5-15 年，每年支出 10 萬
• 即時結果呈現：顯示各投資工具的最終價值與成長百分比
• 可折疊側邊欄：便於在不同螢幕尺寸下操作

🚀 快速開始

安裝依賴

npm install

開發模式

npm run dev

專案將在 http://localhost:3000 啟動

建置生產版本

npm run build

預覽生產版本

npm run preview

📂 專案結構

cashflow-risk-atlas/
├── app/
│   ├── app.vue                        # 主應用程式進入點
│   └── components/
│       └── InvestmentGrowthChart.vue  # 互動式複合圖表（整合投資比較、風險模擬、波動分析）
├── assets/
│   └── css/
│       └── main.css                   # 全域樣式（mobile-first）
├── nuxt.config.ts                     # Nuxt 設定檔
└── package.json                       # 專案依賴

🎨 設計原則

Mobile-First

• 所有互動元素至少 44x44px (符合觸控標準)
• 使用大型、易點擊的按鈕和滑桿
• 響應式設計，優先考慮行動裝置體驗

無障礙設計

• 語意化 HTML
• 適當的色彩對比
• 鍵盤導航支援

繁體中文優先

• 所有文字內容使用繁體中文
• 金額格式使用台灣慣例
• 數字格式使用千分位分隔

⚠️ 免責聲明

本網站僅供教育與資訊用途，不構成任何投資建議。所有數據僅為示例，實際投資報酬會因市場條件而有所不同。投資有風險，請謹慎評估個人財務狀況並諮詢專業財務顧問。

📊 數據說明

假設參數

• 定存年化報酬率: 1.5%
• 儲蓄險年化報酬率: 2.2%
• 大盤ETF年化報酬率: 8% (中位數)
• 通貨膨脹率: 2%
• ETF報酬範圍: 3% (保守) 至 12% (樂觀)

這些數字基於歷史數據的簡化估算，實際結果可能有顯著差異。

🤝 貢獻

歡迎提出問題和建議！請透過 GitHub Issues 進行討論。

📄 授權

請參閱 LICENSE 檔案。

👨‍💻 開發資訊

相依套件

• nuxt: ^4.2.2
• vue: ^3.5.27
• chart.js: 用於圖表渲染
• vue-chartjs: Vue 3 的 Chart.js 包裝器

瀏覽器支援

• Chrome (最新版本)
• Firefox (最新版本)
• Safari (最新版本)
• Edge (最新版本)
• 主流行動瀏覽器

---

現金流風險圖鑑 - 了解金融工具特性，做出適合自己的決策 🎯