feat(日历): 添加交易热力图组件展示每日交易统计
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 25s
Docker Build & Deploy / Deploy to Production (push) Successful in 10s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 2s
Docker Build & Deploy / WeChat Notification (push) Successful in 2s

- 新增 ContributionHeatmap 组件实现类似 GitHub 贡献热力图的可视化
- 添加 getDailyStatisticsRange API 接口获取日期范围内的每日统计数据
- 调整日历页面布局以容纳热力图组件
- 热力图支持动态阈值计算和暗黑模式适配
- 交易变更时自动刷新热力图数据
This commit is contained in:
孙诚
2026-01-15 17:48:17 +08:00
parent 69298c2ffa
commit 667358fa0b
6 changed files with 479 additions and 3 deletions

View File

@@ -10,6 +10,8 @@
@month-show="onMonthShow"
@select="onDateSelect"
/>
<ContributionHeatmap ref="heatmapRef" />
<!-- 日期交易列表弹出层 -->
<PopupContainer
@@ -53,6 +55,7 @@ import TransactionList from "@/components/TransactionList.vue";
import TransactionDetail from "@/components/TransactionDetail.vue";
import SmartClassifyButton from "@/components/SmartClassifyButton.vue";
import PopupContainer from "@/components/PopupContainer.vue";
import ContributionHeatmap from "@/components/ContributionHeatmap.vue";
const dailyStatistics = ref({});
const listVisible = ref(false);
@@ -62,6 +65,7 @@ const currentTransaction = ref(null);
const listLoading = ref(false);
const selectedDate = ref(null);
const selectedDateText = ref("");
const heatmapRef = ref(null);
// 设置日历可选范围例如过去2年到未来1年
const minDate = new Date(new Date().getFullYear() - 2, 0, 1); // 2年前的1月1日
@@ -71,7 +75,7 @@ onMounted(async () => {
await nextTick();
setTimeout(() => {
// 计算页面高度滚动3/4高度以显示更多日期
const height = document.querySelector(".calendar-container").clientHeight * 0.45;
const height = document.querySelector(".calendar-container").clientHeight * 0.55;
document.querySelector(".van-calendar__body").scrollBy({
top: -height,
behavior: "smooth",
@@ -266,6 +270,7 @@ const onGlobalTransactionDeleted = () => {
}
const now = selectedDate.value || new Date()
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
heatmapRef.value?.refresh()
}
window.addEventListener && window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
@@ -281,6 +286,7 @@ const onGlobalTransactionsChanged = () => {
}
const now = selectedDate.value || new Date()
fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
heatmapRef.value?.refresh()
}
window.addEventListener && window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
@@ -304,10 +310,11 @@ onBeforeUnmount(() => {
overflow: hidden;
margin: 0;
padding: 0;
background-color: var(--van-background);
}
.calendar-container :deep(.van-calendar) {
height: 100% !important;
height: auto !important;
flex: 1;
overflow: auto;
margin: 0;