添加功能

Web/src/views/CalendarView.vue

@@ -17,15 +17,26 @@
       position="bottom"
       :style="{ height: '85%' }"
       round
-      closeable
     >
       <div class="popup-container">
         <div class="popup-header-fixed">
-          <h3>{{ selectedDateText }}</h3>
-          <p v-if="dateTransactions.length">
-            共 {{ dateTransactions.length }} 笔交易，
-            <span v-html="getBalance(dateTransactions)" />
-          </p>
+          <van-icon 
+            name="cross" 
+            class="close-icon" 
+            @click="listVisible = false"
+          />
+          <h3 class="date-title">{{ selectedDateText }}</h3>
+          <div class="header-stats">
+            <p v-if="dateTransactions.length">
+              共 {{ dateTransactions.length }} 笔交易，
+              <span v-html="getBalance(dateTransactions)" />
+            </p>
+            <SmartClassifyButton 
+              ref="smartClassifyButtonRef"
+              :transactions="dateTransactions"
+              @save="onSmartClassifySave"
+            />
+          </div>
         </div>
 
       <div class="popup-scroll-content">
@@ -56,6 +67,7 @@ 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";
 
 const dailyStatistics = ref({});
 const listVisible = ref(false);
@@ -107,6 +119,7 @@ const fetchDailyStatistics = async (year, month) => {
   }
 };
 
+const smartClassifyButtonRef = ref(null);
 // 获取指定日期的交易列表
 const fetchDateTransactions = async (date) => {
   try {
@@ -122,6 +135,8 @@ const fetchDateTransactions = async (date) => {
       dateTransactions.value = response
         .data
         .sort((a, b) => b.amount - a.amount);
+      // 重置智能分类按钮
+      smartClassifyButtonRef.value.reset()
     } else {
       dateTransactions.value = [];
       showToast(response.message || "获取交易列表失败");
@@ -205,6 +220,17 @@ const onDetailSave = () => {
   fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
 };
 
+// 智能分类保存回调
+const onSmartClassifySave = async () => {
+  // 保存完成后重新加载数据
+  if (selectedDate.value) {
+    await fetchDateTransactions(selectedDate.value);
+  }
+  // 重新加载统计数据
+  const now = selectedDate.value || new Date();
+  fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
+};
+
 const formatterCalendar = (day) => {
   const dayCopy = { ...day };
   if (dayCopy.date.toDateString() === new Date().toDateString()) {
@@ -264,4 +290,45 @@ fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
   background: transparent !important;
 }
 
+/* 弹窗头部样式 */
+.popup-header-fixed {
+  padding: 16px;
+  position: relative;
+}
+
+.close-icon {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  font-size: 18px;
+  color: #969799;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.date-title {
+  text-align: center;
+  margin: 0 0 12px;
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.header-stats {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-stats p {
+  flex: 1;
+  margin: 0;
+  font-size: 14px;
+  color: #646566;
+}
+
+.popup-scroll-content {
+  padding-top: 8px;
+}
+
 </style>