▍寫在最前
轉眼又到年底,去年的年度征文獲獎仿佛還在昨天。那段時間網站的訪問量激增,GitHub 星標數的跳動也讓一度我興奮得徹夜難眠。
然而那個項目的推進卻陷入了漫長的停滯:我已經解決了第一時間遇到的痛點——把支付寶賬單可視化。但下一步該往哪里走?
![]()
如何讓賬單不僅僅是數字的堆砌,而是更敏銳地反映消費習慣、挖掘出自己都未曾察覺的「月之背面」?這個問題讓我犯了難。恰逢項目在發文后代碼量膨脹到了一個微妙的臨界點,舊有的 AI 輔助編程模式開始顯得力不從心——改動一個功能往往引發數十個連鎖錯誤。于是這個項目便擱置至今。
直到年末,各大 App 紛紛推出年度盤點,又提醒了我還有這樣一個未完成的任務。但不同的是,這一次 Google Gemini 推出的新 IDE —— AntiGravity,給了我重啟項目的能力與底氣。
▍微信賬單的支持
在之前的評論區和公眾號后臺,「支持微信賬單」的呼聲從未斷絕。其實在項目伊始,我便考慮過兼容性,但支付寶和微信的體驗天差地別:支付寶支持按年導出,格式規整;微信最多僅支持 3 個月,單是導出就要付出 4 倍的工作量。
更致命的是,微信賬單的分類信息非常有限,只有「商戶消費」、「紅包」這類標簽,無法針對消費進行分類。基于此前項目推進的經驗,賬單格式分析需要自己來完成,并且寫成一長串文字喂給 AI,如何做好兩種異構數據的有機融合也是一道難題。
然而,隨著大模型能力的躍升,一切似乎又變得舉重若輕:我原本只是試著讓 AntiGravity 讀取一下微信賬單的文件結構,詢問處理思路,結果它「自作主張」完成了幾乎所有工作。在不超過 20 輪的對話后,微信賬單便水靈靈地顯示在網頁中——數據切分、自動標簽化、混合分析,一氣呵成。技術壁壘的消融,讓我的創作激情得以重燃。針對雙平臺賬單,我最終確立了分離上傳、并行分析的架構。
誠然,從技術上限來看,引入大模型 API 對微信那語焉不詳的流水逐筆分類,進而與支付寶分類體系實現「融合」,無疑才是更優解。但作為一個堅持輕量化、本地化的工具項目,我不希望引入沉重的 API 調用成本或復雜的配置門檻。
因此目前的思路是克制的:在保持兩者數據源獨立的前提下,通過視覺與交互層面的優化,實現邏輯上的統一分析。
項目介紹
為了方便大家體驗,項目倉庫現已更新至 GitHub,線上演示站也已同步部署在 pythonanywhere 上,地址與原先一致。以下是本次更新的核心亮點。
https://github.com/Hessel2333/payment_record_analysis
線上演示站:https://hessel.pythonanywhere.com/
全局交互優化
總之,有了彈窗和篩選這兩個交互,我可以在任意界面元素點開我感興趣的內容,并分離大額和小額交易來進行分析,這帶來的體驗和功能提升讓我回顧數據和分析消費行為的效率大大增加。
為了讓數據分析更具顆粒度,本次更新針對彈窗和篩選的交互邏輯,做了全局的適配和優化。
全局金額篩選:現在的「全部/大額/小額」交易篩選按鈕已全局適配。你可以在任何頁面(包括下文提到的消費洞察),一鍵剝離干擾項。例如剔除大額的數碼產品消費后,你可能會發現看似溫和的日常餐飲支出,才是每月「月光」的元兇。
深層穿透彈窗:絕大多數圖表元素,現在支持點擊展開。你看到某個月份柱狀圖異常高,點它,彈窗會直接列出該月明細;看到某個分類占比過大,點開它,直接看看到底是哪幾筆交易在作祟。針對消費洞察新增的部分圖表,則以圖表中標簽的形式進行數據展示。
首頁
為了解決部分朋友擔心隱私或嫌上傳麻煩的顧慮,首頁新增了「查看示例數據」按鈕。點擊即可進入全功能的演示模式,上方會有醒目的黃色提示框。
在這里你可以體驗所有頁面的交互邏輯、圖表聯動和分析深度,確認這個工具是否趁手,再決定是否上傳自己的數據或本地部署。
![]()
首頁-新增【查看示例數據】
![]()
演示模式-右上方退出
設置頁面
微信賬單的加入讓文件管理稍微復雜了一些,因此設置頁面進行了分區。目前微信導出的賬單有.xlsx和.csv兩種格式(從導出體驗上來看.xlsx文件更為便捷),本項目已做全格式兼容,且支持多文件同時上傳。由于微信賬單自帶月份區間信息,你甚至不需要像處理支付寶那樣重命名文件,直接丟進去、點擊「開始分析」即可。
![]()
設置頁面-新增微信賬單支持
![]()
設置頁面-上傳后文件分開管理
年度&月度分析頁面
為了解決支付寶與微信分類邏輯的差異,在年度和月度分析的餅圖中,我采用了分列展示的設計。右側圖例清晰地標示了數據來源,配合鼠標懸浮的高亮聯動,你既能看到總覽,也能快速厘清某一類支出究竟是來自支付寶還是微信。
![]()
年度總覽-支出分類
分類分析頁面的分類選擇器同樣做了分區處理。另外分類排序引入了「金額×頻次」的協同權重排序——你花錢最多、頻率最高的分類,會自動排在最顯眼的位置。
![]()
分類分析-分類選擇器
此外,時間分析頁面的每日消費熱力圖更新為 GitHub 風格,支持在支出、收入、交易筆數之間切換。借助深淺不一的綠色方塊,你仿佛能看到自己一年生活消費的「commit 記錄」。也可以給我一個錯覺——只看消費記錄的話,我也是全年筆耕不輟的骨灰級程序員了。
![]()
時間頁面-熱力圖
消費洞察
這是本次更新的重頭戲。
如果說之前的頁面是「統計」,那么這個頁面就是「敘事」。我引入了許多實驗性的 fancy 圖表,試圖講述數據背后的故事。
![]()
消費洞察頁面
資金流向全景圖
錢到底去哪了?桑基圖是最好的答案。我構建了「總支出 -> 分類 -> TOP 商家」的三級結構。一眼望去,你就能看到資金如水流般,是如何從總盤子分流到「餐飲美食」,最后匯入「瑞幸咖啡」或「麥當勞」的口袋里的。
![]()
資金流向全景——展示支出-分類-商家三級結構
年度消費故事
蹭個年底的熱度,我也做了一個點擊彈窗的年度消費回顧。雖然簡單,但儀式感不能少。
![]()
![]()
年度消費故事
![]()
![]()
年度消費故事
消費畫像、最常光顧、消費場景、消費習慣等與之前保持一致,進行了部分細節優化,也支持大額/小額交易的篩選。
![]()
消費畫像&最常光顧
![]()
消費場景&消費習慣
增加了幾個有趣的小指標。
![]()
消費指標
消費趨勢河流
用于展示主要分類在年度時間軸上的流動占比。不同于折線圖的剛硬,河流圖的起伏更能體現出消費重心的推移——比如年初的河流主干是「置辦年貨」,到了暑期則變成了「旅游出行」。
![]()
消費趨勢河流
消費關聯和弦
和弦圖是一個非常有趣的視角,展示了分類消費與一周七天的相關性。消費金額漏斗則顯示各個金額區間下的占比。
![]()
消費關聯和弦與消費金額漏斗
交互體驗:鼠標懸浮在「周六」上,與之關聯的分類連線會高亮變粗,反之亦然。
消費習慣挖掘:例如,我發現我的「餐飲美食」與「周六/周日」的連接線顯著粗于周中,這印證了周末是我的「大餐日」,周一則要勒緊褲腰帶。同樣的,我周六與各個分類的連接線也可以看出,周六與餐飲美食的連接線是明顯更粗的,這也說明周末的總花費中,餐飲美食占了大頭。同樣的,消費關聯和弦可以進行大小額交易篩選,可以看到大額以及小額交易分別的相關性。
![]()
![]()
消費關聯和弦
消費生物鐘熱力圖
將一周七天與 24 小時映射為頻次熱力圖,然后發現數據出賣了我:我在周三晚上 9 點的消費頻次最高。這可能是周中工作壓力大,回家后的「報復性下單」。更有可能是因為我每周三晚上去打球,9 點結束后的夜宵最為規律。
這就是數據的魅力,它在不經意間記錄了你的生活節律。
季度消費結構則展示了每年四個季度下各個分類消費金額的占比變化:
![]()
消費生物鐘 & 季度消費結構
核心支出來源
基于帕累托法則(80/20 法則),我繪制了占比柱狀圖與累積占比 80% 的虛線。 結合篩選功能,這幅圖變得極具洞察力:
小額視角:我的日常主要由「餐飲美食」、「日用百貨」等構成,充滿了煙火氣。
大額視角:80% 的大額支出集中在「服飾裝扮」和「生活服務」,非常典型的悅己型消費。
![]()
核心支出來源-小額交易
![]()
核心支出來源-大額交易
消費象限
針對商家標簽,我畫出了頻次(X軸) vs 均價(Y軸)的二維分布圖(雙對數坐標防止堆積)。
第一象限(高頻高價):幸好這里幾乎是空的。
第四象限(高頻低價): 「美團」「瑞幸咖啡」「打車」在這里一騎絕塵。
第二象限(低頻高價): 「得物」「海底撈」等占據了這里。 通過色塊的大小(代表總金額)和顏色(代表消費分類),你可以清晰地看到哪些分類的哪些商家在你的生活中占據了「統治地位」。
![]()
消費象限(頻次 vs 均價)消費分布云圖
將 TOP8 分類的每一筆消費打散成點,投射在坐標軸上。點擊某個分類可以展開細節,左側懸浮可展示數據概況(最大值、最小值、均值、中位數),右側則為每筆消費的點圖。你可以直觀地看到「餐飲美食」雖然點多,但密集分布在 10-50 元區間;而「數碼產品」的點雖然稀疏,卻個個位置極高。
![]()
![]()
消費分布云圖
另外也增加了消費熱詞云展示。
![]()
消費熱詞云(示例數據)
小結:讓隱性趨勢「顯影」
誠然,消費洞察頁面所呈現的數據,或許你在年度或分類視圖中,通過繁瑣的參數篩選也能拼湊出來。但這個頁面的核心價值在于「顯影」——它將那些潛伏在日常流水之下、不易察覺的行為慣性,直觀地拉出水面。
這恰恰回歸了本項目的初衷。如我反復提及的:我們分析的不僅僅是賬單,而是生活的切片。在這個算法與消費主義合謀裹挾的時代,我希望這個趁手的工具能成為一面「數字棱鏡」,幫你折射出真實的習慣;在看清賬單的同時,也能透過那些數字,看清自己的內心。
這一年是大模型「大爆發」的一年。從半年一個新王,到現在一周一個新王,多模態、視頻生成讓人眼花繚亂。然而對于開發者而言,實際體驗往往是「雷聲大,雨點小」。
年初我還是 Cursor 的忠實擁躉,但在經歷了它制度改革、Token 限制收緊的拉鋸戰后,我不得不面對一個現實:當項目涉及到 10 多個文件、數萬行代碼時,它超出了當時大模型的上下文邊界。
我曾嘗試在廢墟上重建——加功能、優架構,甚至想用 React 重寫,但最終都以失敗告終。往往費盡心機告訴 AI 修改一個點,它卻刪掉了我大段的邏輯;好不容易修好了 A 功能,B 功能又莫名崩壞。
Vibe Coding的弊端在此刻展露無遺:我失去了對項目的掌控。
直到 11 月下旬,Google Gemini 3 Pro 發布,伴隨而來的新 IDE AntiGravity 給了我新的希望。起初我以為它只是又一個 VSCode 的套殼,但試用之后,我找回了久違的掌控感。
不知道是 Gemini 3 Pro 的推理能力過強,還是 AntiGravity 針對 Vibe Coding 的理念更先進,我終于不用再像教小學生一樣,截圖、畫圈、解釋控件。它仿佛有了記憶,讀懂了我的心思。
在之前的留言區,很多朋友對大模型編程感到好奇。因此,我將本次使用 AntiGravity 進行 Vibe Coding 的部分過程記錄了下來,并同步在了 GitHub 上。
或許,關于 AntiGravity 如何拯救一個項目,值得我再寫一篇文章來好好聊聊。但現在,請先享受你的賬單分析之旅吧。
![]()
AntiGravity-增加微信賬單支持時的任務清單
https://sspai.com/post/104232?utm_source=wechat&utm_medium=social
作者:Hessel
責編:克萊德
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.