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
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user