前言

基本上我們這個記帳 App 算是有一個雛形出來了，儘管也有一個分類佔比在那邊，可以讓你看出哪個分類花費特別多。

但...人類是視覺生物，如果畫面可以美美的、有圖表，會比你用一堆數字呈現更好，所以這一篇將會教你製作出一個統計頁面，讓這些看似流水帳的數字真的活起來。

同時面對不熟悉的技術，如 Chart.js 該怎麼樣選擇以及搭配就是我們這一篇要介紹的。

請 AI 推薦菜色

面對不熟悉的技術我們該怎麼做呢？這邊我用上餐廳吃飯來舉例。

假設我們今天去一間餐廳，菜單上有很多菜色，但我們不確定要點什麼，這時候我們就會請服務生推薦幾道菜，而這個時候我們也是一樣。

因此當要製作不熟悉的東西時，其實你也是可以請 AI 推薦幾個選項，並且列出優缺點，最後再由你做決定使用哪一套技術。

那...該怎麼做呢？這邊我準備好了一個 Prompt 範例給你參考（別忘了切 Plan Mode）：

我想要製作一個統計頁，顯示本月的支出統計：
- App 加兩個分頁：記帳（現有畫面）跟統計。
- 統計頁顯示本月總支出、本月記帳筆數，跟本月各分類占比的圓餅圖。
- 圓餅圖旁同時列出分類名稱、金額和百分比，不能只靠顏色看資料。
- 統計的計算邏輯請抽成純函式，不要跟畫面、儲存綁在一起。
- 驗收標準：新增一筆支出後切到統計頁，總額跟圓餅圖都要反映最新資料。

技術面的話，你可以閱讀 SPEC.md 了解我當前專案的技術，閱讀完畢後幫我列出兩三個 Vue 生態常用的圖表套件選項，並各自列出優缺點，選項先跟我確認，我決定了你再寫計畫。
考量：這個專案很小，我要最簡單夠用的，不要殺雞用牛刀。

這段 Prompt 比前幾天稍微長一點點，前半段是功能需求跟驗收標準，後半段才是點菜：

1. 請它先推薦
2. 我來決定。

需求之所以要一次講完，是因為等一下計劃書出來、你一按放行它就會整包做下去，中間不會再有讓你補需求的空檔。

基本上你應該會看到 AI 推薦你 Chart.js 或 ECharts 這幾個主流套件：

儘管 Chart.js + vue-chartjs 不是推薦選項，但我個人還是會選這個，畢竟上面都有講了「Vue 生態最主流，文件跟範例最多，圓餅圖是內建型別」，而且它的 API 也很簡單，對於小型專案來說是最適合的。

到這邊為止，請先不要急著按下「Yes, and use auto mode」，好好看完它吧！

Note
只要有不懂的地方，就大膽的按下 ESC 或者在 「Tell Claude what to change」中請 AI 幫你解釋，這樣你就可以更了解它的做法，對於你之後的開發也會有幫助。

開始動工

選完之後它就會開始寫計劃書，一樣不用逐字精讀，抓幾個重點看就好：

• 用的套件是不是你剛剛選的那一個？
• 「算」的部分有沒有照要求抽成純函式，而不是全部塞在元件裡？
• SPEC.md 有沒有跟著更新？像我的 SPEC.md 原本寫的是不裝圖表套件，現在決定要裝了，這條就要一起改掉。

這邊也提供我完整的計劃書給你參考。

順帶一提，我的計劃書還多做了一個我沒要求的決定：把記帳頁那排分類佔比橫條拿掉、搬到統計頁，理由是同一份資料不留兩種畫法，改一邊容易忘另一邊。所以做完之後你會發現首頁的橫條不見了，別以為它做壞了。這種它自己多加的決定，理由看得懂就放行，看不懂就問，別默默讓它過。

看完沒問題就按下 「Yes, and use auto mode」，它會先跑安裝（有跳權限確認的話，看一眼再放行就好），再開發。

這邊也提醒一下，套件版本通常是 AI 最容易記憶過時的東西，所以會建議你當它安裝完畢後，可以看一下 package.json 的版本號，確認一下是否是最新的版本，或是你想要的版本。

然後你會看到它長出兩塊東西：

• 一個是負責「算」的檔案（我這邊是 src/utils/stats.js）
• 一個是負責「畫」的圖表元件（src/components/CategoryPieChart.vue）

檔案名稱可能跟你的不完全一樣，但程式碼你不用看懂，只要知道它們的分工就好，前者專門算「每個分類花了多少、各佔幾成」，只吃資料、吐數字，完全不管畫面，後者拿這些數字去畫圓餅圖。

想確認它有沒有照做，打開專案資料夾看看有沒有長出類似的兩個檔案就好。

真的好奇裡面在幹嘛，直接問它「用白話跟我講 stats.js 在做什麼」，比你自己硬去讀程式碼快很多。

驗收：圖會不會跟著動

接下來我們當然要來驗收結果，不是看到底下這畫面就當作驗收通過了：

所以我們該怎麼驗收這件事情呢？這邊我們先把之前練習的資料清除乾淨：

• 打開開發者工具（F12，macOS 是 Cmd+Option+I）
• 切到 Application 分頁，在左邊的 Local Storage 底下找到你的網址（正常會是 http://localhost:5173）
• 刪掉 money-note:records:v1 這個 key，再重新整理頁面。

這時候畫面應該會是乾淨的，接著來加入一些模擬資料：

1. 新增本月飲食 120 元
2. 新增本月交通 80 元
3. 新增上個月娛樂 999 元
4. 切到統計頁

那預期來講會是這樣：

1. 本月總額 200 元、筆數 2
2. 飲食 60%
3. 交通 40%
4. 上個月的 999 元完全不計入

確定這邊沒問題後，接著回到記帳頁面再增加一筆「本月娛樂 200 元」，然後切回統計頁，這時候預期會是：

1. 本月總額 400 元、筆數 3
2. 飲食 30%
3. 交通 20%
4. 娛樂 50%

到這邊為止，我們已經把 Week 2 的核心 MVP 完工了，記得別忘了請 AI 進行 commit。

結語

那麼統計頁也做完了，最後我們也來總結一下：

• 遇到不熟的技術就請 AI 推薦菜色：給需求跟限制、要它列選項跟優缺點，聽得懂理由再點頭，不一定要選它標推薦的那個。
• Plan Mode 一按放行就是整包做下去，所以需求要一次講完；計劃書裡它自己多加的決定，看得懂理由再放行，看不懂就問。
• 套件裝完看一眼 package.json 的版本，別信 AI 的記憶。
• 驗收看數字不看圖形：固定幾筆資料、先算好預期值再比對，圖看起來「好像有變」不算數。

到今天為止 SPEC.md 上的核心功能都長出來了，這個記帳 App 算是一個基本能用的 MVP 了。

那麼我們明天見～