添加功能

Web/src/views/ClassificationSmart.vue

@@ -10,42 +10,70 @@
     <div class="scroll-content" style="padding-top: 5px;">
       <!-- 统计信息 -->
       <div class="stats-info">
-        <span class="stats-label">未分类账单：</span>
-        <span class="stats-value">{{ records.length }} / {{ unclassifiedCount }}</span>
+        <span class="stats-label">未分类账单 </span>
+        <span class="stats-value">{{ unclassifiedCount }} 条，本次分类 {{ reasonGroups.length }} 组</span>
       </div>
 
-      <!-- 账单列表 -->
-      <TransactionList
-        :transactions="records"
-        :loading="false"
-        :show-delete="false"
-        :show-checkbox="true"
-        :selected-ids="selectedIds"
-        @click="viewDetail"
-        @update:selected-ids="selectedIds = $event"
-      />
+      <!-- 分组列表 -->
+      <van-empty v-if="reasonGroups.length === 0 && !loading" description="暂无未分类账单" />
+      
+      <van-cell-group v-else inset>
+        <van-cell 
+          v-for="group in reasonGroups" 
+          :key="group.reason"
+          clickable
+        >
+          <template #title>
+            <div class="group-header">
+              <van-checkbox 
+                :model-value="selectedReasons.has(group.reason)"
+                @click.stop="toggleGroupSelection(group.reason)"
+              />
+              <div class="group-title">
+                {{ group.reason }}
+              </div>
+            </div>
+          </template>
+          <template #label>
+            <div class="group-info">
+              <van-tag 
+                :type="getTypeColor(group.sampleType)" 
+                size="medium"
+                style="margin-right: 8px;"
+              >
+                {{ getTypeName(group.sampleType) }}
+              </van-tag>
+              <van-tag 
+                v-if="group.sampleClassify" 
+                type="primary" 
+                size="medium"
+                style="margin-right: 8px;"
+              >
+                {{ group.sampleClassify }}
+              </van-tag>
+              <span class="count-text">{{ group.count }} 条</span>
+              <span class="amount-text" v-if="group.totalAmount">
+                ¥{{ Math.abs(group.totalAmount).toFixed(2) }}
+              </span>
+            </div>
+          </template>
+        </van-cell>
+      </van-cell-group>
 
       <!-- 底部安全距离 -->
       <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
     </div>
 
-    <!-- 详情/编辑弹出层 -->
-    <TransactionDetail
-      v-model:show="detailVisible"
-      :transaction="currentTransaction"
-      @save="onDetailSave"
-    />
-
     <!-- 底部操作按钮 -->
     <div class="action-bar">
       <van-button 
         type="primary" 
         :loading="classifying"
-        :disabled="selectedIds.size === 0"
+        :disabled="selectedReasons.size === 0"
         @click="startClassify"
         class="action-btn"
       >
-        {{ classifying ? '分类中...' : `开始分类 (${selectedIds.size}/${records.length})` }}
+        {{ classifying ? '分类中...' : `开始分类 (${selectedReasons.size}组)` }}
       </van-button>
       
       <van-button 
@@ -66,22 +94,18 @@ import { useRouter } from 'vue-router'
 import { showToast, showLoadingToast, closeToast, showConfirmDialog } from 'vant'
 import { 
   getUnclassifiedCount, 
-  getUnclassified, 
+  getReasonGroups,
   smartClassify,
-  batchUpdateClassify,
-  getTransactionDetail
+  batchUpdateClassify
 } from '@/api/transactionRecord'
-import TransactionList from '@/components/TransactionList.vue'
-import TransactionDetail from '@/components/TransactionDetail.vue'
 
 const router = useRouter()
 const unclassifiedCount = ref(0)
-const records = ref([])
-const selectedIds = ref(new Set()) // 选中的账单ID集合
+const reasonGroups = ref([]) // 改为分组数据
+const selectedReasons = ref(new Set()) // 选中的分组摘要集合
+const loading = ref(false)
 const classifying = ref(false)
 const hasChanges = ref(false)
-const detailVisible = ref(false)
-const currentTransaction = ref(null)
 const classifyBuffer = ref('') // SSE数据缓冲区
 
 const onClickLeft = () => {
@@ -109,37 +133,80 @@ const loadUnclassifiedCount = async () => {
   }
 }
 
-// 加载未分类账单列表
-const loadUnclassified = async () => {
+// 加载分组数据
+const loadReasonGroups = async () => {
   showLoadingToast({
     message: '加载中...',
     forbidClick: true,
     duration: 0
   })
   
+  loading.value = true
+  
   try {
-    const res = await getUnclassified(10)
+    // 获取所有未分类的分组，设置较大的pageSize以获取所有数据
+    const res = await getReasonGroups(1, 20)
     if (res.success) {
-      records.value = res.data
-      // 默认全选所有账单
-      selectedIds.value = new Set(res.data.map(r => r.id))
+      // 后端已经按数量排序，我们需要计算每个分组的总金额并重新排序
+      // 但是后端DTO没有返回总金额，我们先按数量排序即可
+      reasonGroups.value = res.data || []
+      // 默认全选所有分组
+      selectedReasons.value = new Set(reasonGroups.value.map(g => g.reason))
     } else {
       showToast(res.message || '加载失败')
     }
   } catch (error) {
-    console.error('加载账单失败', error)
+    console.error('加载分组失败', error)
     showToast('加载失败')
   } finally {
+    loading.value = false
     closeToast()
   }
 }
 
+// 切换分组选择状态
+const toggleGroupSelection = (reason) => {
+  if (selectedReasons.value.has(reason)) {
+    selectedReasons.value.delete(reason)
+  } else {
+    selectedReasons.value.add(reason)
+  }
+  // 触发响应式更新
+  selectedReasons.value = new Set(selectedReasons.value)
+}
+
+// 获取类型名称
+const getTypeName = (type) => {
+  const typeMap = {
+    0: '支出',
+    1: '收入',
+    2: '不计收支'
+  }
+  return typeMap[type] || '未知'
+}
+
+// 获取类型对应的标签颜色
+const getTypeColor = (type) => {
+  const colorMap = {
+    0: 'danger',    // 支出 - 红色
+    1: 'success',   // 收入 - 绿色
+    2: 'default'    // 不计收支 - 灰色
+  }
+  return colorMap[type] || 'default'
+}
+
 // 开始智能分类
 const startClassify = async () => {
-  const idsToClassify = Array.from(selectedIds.value)
+  // 获取所有选中分组的账单ID
+  const idsToClassify = []
+  for (const group of reasonGroups.value) {
+    if (selectedReasons.value.has(group.reason)) {
+      idsToClassify.push(...group.transactionIds)
+    }
+  }
   
   if (idsToClassify.length === 0) {
-    showToast('请先选择要分类的账单')
+    showToast('请先选择要分类的账单组')
     return
   }
 
@@ -152,6 +219,9 @@ const startClassify = async () => {
   classifying.value = true
   classifyBuffer.value = '' // 重置缓冲区
   
+  // 用于存储分类结果的临时对象
+  const classifyResults = new Map() // id -> {classify, type}
+  
   try {
     const response = await smartClassify(idsToClassify)
     
@@ -182,7 +252,7 @@ const startClassify = async () => {
           const eventType = eventMatch[1]
           const data = dataMatch[1]
           
-          handleSSEEvent(eventType, data)
+          handleSSEEvent(eventType, data, classifyResults)
         }
       }
     }
@@ -197,19 +267,17 @@ const startClassify = async () => {
 }
 
 // 处理SSE事件
-const handleSSEEvent = (eventType, data) => {
+const handleSSEEvent = (eventType, data, classifyResults) => {
   if (eventType === 'data') {
     try {
       // 累积AI输出的JSON片段
       classifyBuffer.value += data
 
       // 尝试查找并提取完整的JSON对象
-      // 使用更精确的方式：查找 { 和匹配的 }
       let startIndex = 0
       while (startIndex < classifyBuffer.value.length) {
         const openBrace = classifyBuffer.value.indexOf('{', startIndex)
         if (openBrace === -1) {
-          // 没有找到开始的 {，清理前面的无用字符
           classifyBuffer.value = ''
           break
         }
@@ -229,32 +297,37 @@ const handleSSEEvent = (eventType, data) => {
         }
 
         if (closeBrace !== -1) {
-          // 找到了完整的JSON
           const jsonStr = classifyBuffer.value.substring(openBrace, closeBrace + 1)
           
           try {
             const result = JSON.parse(jsonStr)
             
             if (result.id) {
-              const record = records.value.find(r => r.id === result.id)
-              if (record) {
-                record.classify = result.classify || ''
-                // 如果AI返回了type字段，也更新type
-                if (result.type !== undefined && result.type !== null) {
-                  record.type = result.type
+              // 存储分类结果
+              classifyResults.set(result.id, {
+                classify: result.classify || '',
+                type: result.type !== undefined ? result.type : null
+              })
+              
+              // 更新对应分组的显示状态
+              for (const group of reasonGroups.value) {
+                if (group.transactionIds.includes(result.id)) {
+                  group.sampleClassify = result.classify || ''
+                  if (result.type !== undefined && result.type !== null) {
+                    group.sampleType = result.type
+                  }
+                  hasChanges.value = true
+                  break
                 }
-                hasChanges.value = true
               }
             }
           } catch (e) {
             console.error('JSON解析失败:', e)
           }
           
-          // 移除已处理的部分
           classifyBuffer.value = classifyBuffer.value.substring(closeBrace + 1)
-          startIndex = 0 // 从头开始查找下一个JSON
+          startIndex = 0
         } else {
-          // 没有找到闭合括号，说明JSON还不完整，等待更多数据
           break
         }
       }
@@ -274,13 +347,20 @@ const handleSSEEvent = (eventType, data) => {
 
 // 保存分类
 const saveClassifications = async () => {
-  const itemsToUpdate = records.value
-    .filter(r => r.classify)
-    .map(r => ({
-      id: r.id,
-      classify: r.classify,
-      type: r.type
-    }))
+  // 收集所有已分类的账单
+  const itemsToUpdate = []
+  for (const group of reasonGroups.value) {
+    if (group.sampleClassify) {
+      // 为该分组的所有账单添加分类
+      for (const id of group.transactionIds) {
+        itemsToUpdate.push({
+          id: id,
+          classify: group.sampleClassify,
+          type: group.sampleType
+        })
+      }
+    }
+  }
 
   if (itemsToUpdate.length === 0) {
     showToast('没有需要保存的分类')
@@ -300,7 +380,7 @@ const saveClassifications = async () => {
       hasChanges.value = false
       // 重新加载数据
       await loadUnclassifiedCount()
-      await loadUnclassified()
+      await loadReasonGroups()
     } else {
       showToast(res.message || '保存失败')
     }
@@ -312,32 +392,9 @@ const saveClassifications = async () => {
   }
 }
 
-// 查看详情
-const viewDetail = async (transaction) => {
-  try {
-    const response = await getTransactionDetail(transaction.id)
-    if (response.success) {
-      currentTransaction.value = response.data
-      detailVisible.value = true
-    } else {
-      showToast(response.message || '获取详情失败')
-    }
-  } catch (error) {
-    console.error('获取详情出错:', error)
-    showToast('获取详情失败')
-  }
-}
-
-// 详情保存后的回调
-const onDetailSave = async () => {
-  // 重新加载数据
-  await loadUnclassifiedCount()
-  await loadUnclassified()
-}
-
 onMounted(() => {
   loadUnclassifiedCount()
-  loadUnclassified()
+  loadReasonGroups()
 })
 </script>
 
@@ -353,6 +410,39 @@ onMounted(() => {
   font-weight: 500;
 }
 
+/* 分组头部 */
+.group-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.group-title {
+  flex: 1;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.group-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  flex-wrap: wrap;
+}
+
+.count-text {
+  font-size: 13px;
+  color: #969799;
+}
+
+.amount-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: #ff976a;
+}
+
 /* 底部操作栏 */
 .action-bar {
   position: fixed;