大量的代码格式化

Web/src/views/CalendarView.vue

@@ -10,11 +10,11 @@
       @month-show="onMonthShow"
       @select="onDateSelect"
     />
-    
+
     <ContributionHeatmap ref="heatmapRef" />
 
     <!-- 底部安全距离 -->
-    <div style="height: calc(60px + env(safe-area-inset-bottom, 0px))"></div>
+    <div style="height: calc(60px + env(safe-area-inset-bottom, 0px))" />
 
     <!-- 日期交易列表弹出层 -->
     <PopupContainer
@@ -24,7 +24,7 @@
       height="75%"
     >
       <template #header-actions>
-        <SmartClassifyButton 
+        <SmartClassifyButton
           ref="smartClassifyButtonRef"
           :transactions="dateTransactions"
           @save="onSmartClassifySave"
@@ -50,221 +50,227 @@
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick, onBeforeUnmount } from "vue";
-import { showToast } from "vant";
-import request from "@/api/request";
-import { getTransactionDetail, getTransactionsByDate } from "@/api/transactionRecord";
-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";
+import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
+import { showToast } from 'vant'
+import request from '@/api/request'
+import { getTransactionDetail, getTransactionsByDate } from '@/api/transactionRecord'
+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);
-const detailVisible = ref(false);
-const dateTransactions = ref([]);
-const currentTransaction = ref(null);
-const listLoading = ref(false);
-const selectedDate = ref(null);
-const selectedDateText = ref("");
-const heatmapRef = ref(null);
+const dailyStatistics = ref({})
+const listVisible = ref(false)
+const detailVisible = ref(false)
+const dateTransactions = ref([])
+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日
-const maxDate = new Date(new Date().getFullYear() + 1, 11, 31); // 明年12月31日
+const minDate = new Date(new Date().getFullYear() - 2, 0, 1) // 2年前的1月1日
+const maxDate = new Date(new Date().getFullYear() + 1, 11, 31) // 明年12月31日
 
 onMounted(async () => {
-  await nextTick();
+  await nextTick()
   setTimeout(() => {
     // 计算页面高度，滚动3/4高度以显示更多日期
-    const height = document.querySelector(".calendar-container").clientHeight * 0.43;
-    document.querySelector(".van-calendar__body").scrollBy({
+    const height = document.querySelector('.calendar-container').clientHeight * 0.43
+    document.querySelector('.van-calendar__body').scrollBy({
       top: -height,
-      behavior: "smooth",
-    });
-  }, 300);
-});
+      behavior: 'smooth'
+    })
+  }, 300)
+})
 
 // 获取日历统计数据
 const fetchDailyStatistics = async (year, month) => {
   try {
-    const response = await request.get("/TransactionRecord/GetDailyStatistics", {
-      params: { year, month },
-    });
+    const response = await request.get('/TransactionRecord/GetDailyStatistics', {
+      params: { year, month }
+    })
     if (response.success && response.data) {
       // 将数组转换为对象，key为日期
-      const statsMap = {};
+      const statsMap = {}
       response.data.forEach((item) => {
         statsMap[item.date] = {
           count: item.count,
-          amount: item.amount,
-        };
-      });
+          amount: item.amount
+        }
+      })
       dailyStatistics.value = {
         ...dailyStatistics.value,
-        ...statsMap,
-      };
+        ...statsMap
+      }
     }
   } catch (error) {
-    console.error("获取日历统计数据失败:", error);
+    console.error('获取日历统计数据失败:', error)
   }
-};
+}
 
-const smartClassifyButtonRef = ref(null);
+const smartClassifyButtonRef = ref(null)
 // 获取指定日期的交易列表
 const fetchDateTransactions = async (date) => {
   try {
-    listLoading.value = true;
+    listLoading.value = true
     const dateStr = date
-      .toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
-      .replace(/\//g, "-");
+      .toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+      })
+      .replace(/\//g, '-')
 
-    const response = await getTransactionsByDate(dateStr);
+    const response = await getTransactionsByDate(dateStr)
 
     if (response.success && response.data) {
       // 根据金额从大到小排序
-      dateTransactions.value = response
-        .data
-        .sort((a, b) => b.amount - a.amount);
+      dateTransactions.value = response.data.sort((a, b) => b.amount - a.amount)
       // 重置智能分类按钮
       smartClassifyButtonRef.value?.reset()
     } else {
-      dateTransactions.value = [];
-      showToast(response.message || "获取交易列表失败");
+      dateTransactions.value = []
+      showToast(response.message || '获取交易列表失败')
     }
   } catch (error) {
-    console.error("获取日期交易列表失败:", error);
-    dateTransactions.value = [];
-    showToast("获取交易列表失败");
+    console.error('获取日期交易列表失败:', error)
+    dateTransactions.value = []
+    showToast('获取交易列表失败')
   } finally {
-    listLoading.value = false;
+    listLoading.value = false
   }
-};
+}
 
 const getBalance = (transactions) => {
-  let balance = 0;
-  transactions.forEach(tx => {
-    if(tx.type === 1) {
-      balance += tx.amount;
-    } else if(tx.type === 0) {
-      balance -= tx.amount;
+  let balance = 0
+  transactions.forEach((tx) => {
+    if (tx.type === 1) {
+      balance += tx.amount
+    } else if (tx.type === 0) {
+      balance -= tx.amount
     }
-  });
+  })
 
-  if(balance >= 0) {
-    return `结余收入 ${balance.toFixed(1)} 元`;
+  if (balance >= 0) {
+    return `结余收入 ${balance.toFixed(1)} 元`
   } else {
-    return `结余支出 ${(-balance).toFixed(1)} 元`;
+    return `结余支出 ${(-balance).toFixed(1)} 元`
   }
-};
+}
 
 // 当月份显示时触发
 const onMonthShow = ({ date }) => {
-  const year = date.getFullYear();
-  const month = date.getMonth() + 1;
-  fetchDailyStatistics(year, month);
-};
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  fetchDailyStatistics(year, month)
+}
 
 // 日期选择事件
 const onDateSelect = (date) => {
-  selectedDate.value = date;
-  selectedDateText.value = formatSelectedDate(date);
-  fetchDateTransactions(date);
-  listVisible.value = true;
-};
+  selectedDate.value = date
+  selectedDateText.value = formatSelectedDate(date)
+  fetchDateTransactions(date)
+  listVisible.value = true
+}
 
 // 格式化选中的日期
 const formatSelectedDate = (date) => {
-  return date.toLocaleDateString("zh-CN", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-    weekday: "long",
-  });
-};
+  return date.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    weekday: 'long'
+  })
+}
 
 // 查看详情
 const viewDetail = async (transaction) => {
   try {
-    const response = await getTransactionDetail(transaction.id);
+    const response = await getTransactionDetail(transaction.id)
     if (response.success) {
-      currentTransaction.value = response.data;
-      detailVisible.value = true;
+      currentTransaction.value = response.data
+      detailVisible.value = true
     } else {
-      showToast(response.message || "获取详情失败");
+      showToast(response.message || '获取详情失败')
     }
   } catch (error) {
-    console.error("获取详情出错:", error);
-    showToast("获取详情失败");
+    console.error('获取详情出错:', error)
+    showToast('获取详情失败')
   }
-};
+}
 
 // 详情保存后的回调
 const onDetailSave = async (saveData) => {
-  var item = dateTransactions.value.find(tx => tx.id === saveData.id);
-  if(!item) return
+  const item = dateTransactions.value.find((tx) => tx.id === saveData.id)
+  if (!item) {
+    return
+  }
 
   // 如果分类发生了变化 移除智能分类的内容，防止被智能分类覆盖
-  if(item.classify !== saveData.classify) {
+  if (item.classify !== saveData.classify) {
     // 通知智能分类按钮组件移除指定项
     smartClassifyButtonRef.value?.removeClassifiedTransaction(saveData.id)
     item.upsetedClassify = ''
   }
 
   // 更新当前日期交易列表中的数据
-  Object.assign(item, saveData);
-
-
+  Object.assign(item, saveData)
 
   // 重新加载当前月份的统计数据
-  const now = selectedDate.value || new Date();
-  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
-};
+  const now = selectedDate.value || new Date()
+  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
+}
 
 // 处理删除事件：从当前日期交易列表中移除，并刷新当日和当月统计
 const handleDateTransactionDelete = async (transactionId) => {
-  dateTransactions.value = dateTransactions.value.filter(t => t.id !== transactionId)
+  dateTransactions.value = dateTransactions.value.filter((t) => t.id !== transactionId)
 
   // 刷新当前日期以及当月的统计数据
-  const now = selectedDate.value || new Date();
-  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
-};
+  const now = selectedDate.value || new Date()
+  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
+}
 
 // 智能分类保存回调
 const onSmartClassifySave = async () => {
   // 保存完成后重新加载数据
   if (selectedDate.value) {
-    await fetchDateTransactions(selectedDate.value);
+    await fetchDateTransactions(selectedDate.value)
   }
   // 重新加载统计数据
-  const now = selectedDate.value || new Date();
-  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
-};
+  const now = selectedDate.value || new Date()
+  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
+}
 
 const formatterCalendar = (day) => {
-  const dayCopy = { ...day };
+  const dayCopy = { ...day }
   if (dayCopy.date.toDateString() === new Date().toDateString()) {
-    dayCopy.text = "今天";
+    dayCopy.text = '今天'
   }
 
   // 格式化日期为 yyyy-MM-dd
   const dateKey = dayCopy.date
-    .toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
-    .replace(/\//g, "-");
-  const stats = dailyStatistics.value[dateKey];
+    .toLocaleString('zh-CN', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit'
+    })
+    .replace(/\//g, '-')
+  const stats = dailyStatistics.value[dateKey]
 
   if (stats) {
-    dayCopy.topInfo = `${stats.count}笔`; // 展示消费笔数
-    dayCopy.bottomInfo = `${stats.amount.toFixed(1)}元`; // 展示消费金额
+    dayCopy.topInfo = `${stats.count}笔` // 展示消费笔数
+    dayCopy.bottomInfo = `${(stats.amount || 0).toFixed(1)}元` // 展示消费金额
   }
 
-  return dayCopy;
-};
+  return dayCopy
+}
 
 // 初始加载当前月份数据
-const now = new Date();
-fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
+const now = new Date()
+fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1)
 
 // 全局删除事件监听，确保日历页面数据一致
 const onGlobalTransactionDeleted = () => {
@@ -276,10 +282,12 @@ const onGlobalTransactionDeleted = () => {
   heatmapRef.value?.refresh()
 }
 
-window.addEventListener && window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
+window.addEventListener &&
+  window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
 
 onBeforeUnmount(() => {
-  window.removeEventListener && window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
+  window.removeEventListener &&
+    window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
 })
 
 // 当有交易被新增/修改/批量更新时刷新
@@ -292,15 +300,17 @@ const onGlobalTransactionsChanged = () => {
   heatmapRef.value?.refresh()
 }
 
-window.addEventListener && window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
+window.addEventListener &&
+  window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
 
 onBeforeUnmount(() => {
-  window.removeEventListener && window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
+  window.removeEventListener &&
+    window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
 })
 </script>
 
 <style scoped>
-.van-calendar{
+.van-calendar {
   background: transparent !important;
 }
 
@@ -340,5 +350,4 @@ onBeforeUnmount(() => {
 :deep(.heatmap-card) {
   flex-shrink: 0; /* Prevent heatmap from shrinking */
 }
-
 </style>