添加功能

Web/src/components/SmartClassifyButton.vue

@@ -0,0 +1,287 @@
+<template>
+  <van-button
+    v-if="hasTransactions"
+    :type="hasClassifiedResults ? 'success' : 'primary'"
+    size="small"
+    :loading="loading || saving"
+    :disabled="loading || saving"
+    @click="handleClick"
+    class="smart-classify-btn"
+  >
+    <template v-if="!loading && !saving">
+      <van-icon :name="hasClassifiedResults ? 'success' : 'fire'" />
+      <span style="margin-left: 4px;">{{ hasClassifiedResults ? '保存分类' : '智能分类' }}</span>
+    </template>
+    <template v-else>
+      {{ saving ? '保存中...' : '分类中...' }}
+    </template>
+  </van-button>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { showToast, closeToast } from 'vant'
+import { smartClassify, batchUpdateClassify } from '@/api/transactionRecord'
+
+const props = defineProps({
+  transactions: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['update', 'save'])
+
+const loading = ref(false)
+const saving = ref(false)
+const classifiedResults = ref([])
+let toastInstance = null
+
+const hasTransactions = computed(() => {
+  return props.transactions && props.transactions.length > 0
+})
+
+const hasClassifiedResults = computed(() => {
+  return classifiedResults.value.length > 0
+})
+
+/**
+ * 点击按钮处理
+ */
+const handleClick = () => {
+  if (hasClassifiedResults.value) {
+    handleSaveClassify()
+  } else {
+    handleSmartClassify()
+  }
+}
+
+/**
+ * 保存分类结果
+ */
+const handleSaveClassify = async () => {
+  try {
+    saving.value = true
+    showToast({
+      message: '正在保存...',
+      duration: 0,
+      forbidClick: true,
+      loadingType: 'spinner'
+    })
+
+    // 准备批量更新数据
+    const items = classifiedResults.value.map(item => ({
+      id: item.id,
+      classify: item.classify,
+      type: item.type
+    }))
+
+    const response = await batchUpdateClassify(items)
+    
+    closeToast()
+    
+    if (response.success) {
+      showToast({
+        type: 'success',
+        message: `保存成功，已更新 ${items.length} 条记录`,
+        duration: 2000
+      })
+      
+      // 清空已分类结果
+      classifiedResults.value = []
+      
+      // 通知父组件刷新数据
+      emit('save')
+    } else {
+      showToast({
+        type: 'fail',
+        message: response.message || '保存失败',
+        duration: 2000
+      })
+    }
+  } catch (error) {
+    console.error('保存分类失败:', error)
+    closeToast()
+    showToast({
+      type: 'fail',
+      message: '保存失败，请重试',
+      duration: 2000
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+/**
+ * 处理智能分类
+ */
+const handleSmartClassify = async () => {
+  if (!props.transactions || props.transactions.length === 0) {
+    showToast('没有可分类的交易记录')
+    return
+  }
+
+  // 清空之前的分类结果
+  classifiedResults.value = []
+  
+  const transactionIds = props.transactions.map(t => t.id)
+  
+  try {
+    loading.value = true
+    // 清除之前的Toast
+    if (toastInstance) {
+      closeToast()
+    }
+    
+    toastInstance = showToast({
+      message: '正在智能分类...',
+      duration: 0,
+      forbidClick: true,
+      loadingType: 'spinner'
+    })
+
+    const response = await smartClassify(transactionIds)
+    
+    if (!response.ok) {
+      throw new Error('智能分类请求失败')
+    }
+
+    // 读取流式响应
+    const reader = response.body.getReader()
+    const decoder = new TextDecoder()
+    let buffer = ''
+    let processedCount = 0
+
+    while (true) {
+      const { done, value } = await reader.read()
+      
+      if (done) break
+      
+      buffer += decoder.decode(value, { stream: true })
+      
+      // 处理完整的事件（SSE格式：event: type\ndata: data\n\n）
+      const events = buffer.split('\n\n')
+      buffer = events.pop() || '' // 保留最后一个不完整的部分
+      
+      for (const eventBlock of events) {
+        if (!eventBlock.trim()) continue
+        
+        try {
+          const lines = eventBlock.split('\n')
+          let eventType = ''
+          let eventData = ''
+          
+          for (const line of lines) {
+            if (line.startsWith('event: ')) {
+              eventType = line.slice(7).trim()
+            } else if (line.startsWith('data: ')) {
+              eventData = line.slice(6).trim()
+            }
+          }
+          
+          if (eventType === 'start') {
+            // 开始分类
+            closeToast()
+            toastInstance = showToast({
+              message: eventData,
+              duration: 0,
+              forbidClick: true,
+              loadingType: 'spinner'
+            })
+          } else if (eventType === 'data') {
+            // 收到分类结果
+            const data = JSON.parse(eventData)
+            processedCount++
+            
+            // 记录分类结果
+            classifiedResults.value.push({
+              id: data.id,
+              classify: data.Classify,
+              type: data.Type
+            })
+            
+            // 实时更新交易记录的分类信息
+            const index = props.transactions.findIndex(t => t.id === data.id)
+            if (index !== -1) {
+              const transaction = props.transactions[index]
+              transaction.upsetedClassify = data.Classify
+              transaction.upsetedType = data.Type
+            }
+            
+            // 更新进度
+            closeToast()
+            toastInstance = showToast({
+              message: `已分类 ${processedCount} 条`,
+              duration: 0,
+              forbidClick: true,
+              loadingType: 'spinner'
+            })
+          } else if (eventType === 'end') {
+            // 分类完成
+            closeToast()
+            toastInstance = null
+            showToast({
+              type: 'success',
+              message: `分类完成，请点击"保存分类"按钮保存结果`,
+              duration: 3000
+            })
+          } else if (eventType === 'error') {
+            // 处理错误
+            closeToast()
+            toastInstance = null
+            showToast({
+              type: 'fail',
+              message: eventData || '分类失败',
+              duration: 2000
+            })
+          }
+        } catch (e) {
+          console.error('解析SSE事件失败:', e, eventBlock)
+        }
+      }
+    }
+  } catch (error) {
+    console.error('智能分类失败:', error)
+    closeToast()
+    toastInstance = null
+    showToast({
+      type: 'fail',
+      message: '智能分类失败，请重试',
+      duration: 2000
+    })
+  } finally {
+    loading.value = false
+    // 确保Toast被清除
+    if (toastInstance) {
+      setTimeout(() => {
+        closeToast()
+        toastInstance = null
+      }, 100)
+    }
+  }
+}
+
+/**
+ * 重置组件状态
+ */
+const reset = () => {
+  classifiedResults.value = []
+  loading.value = false
+  saving.value = false
+}
+
+defineExpose({
+  reset
+});
+
+</script>
+
+<style scoped>
+.smart-classify-btn {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: 16px;
+  padding: 6px 12px;
+}
+</style>