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