361 lines
9.4 KiB
Vue
361 lines
9.4 KiB
Vue
<template>
|
||
<van-button
|
||
v-if="hasTransactions"
|
||
:type="buttonType"
|
||
size="small"
|
||
:loading="loading || saving"
|
||
:disabled="loading || saving"
|
||
@click="handleClick"
|
||
class="smart-classify-btn"
|
||
>
|
||
<template v-if="!loading && !saving">
|
||
<van-icon :name="buttonIcon" />
|
||
<span style="margin-left: 4px;">{{ buttonText }}</span>
|
||
</template>
|
||
<template v-else>
|
||
<span>{{ loadingText }}</span>
|
||
</template>
|
||
</van-button>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, nextTick } from 'vue'
|
||
import { showToast, closeToast } from 'vant'
|
||
import { smartClassify, batchUpdateClassify } from '@/api/transactionRecord'
|
||
|
||
const props = defineProps({
|
||
transactions: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
onBeforeClassify: {
|
||
type: Function,
|
||
default: null
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['update', 'save', 'notifyDonedTransactionId'])
|
||
|
||
const loading = ref(false)
|
||
const saving = ref(false)
|
||
const classifiedResults = ref([])
|
||
const isAllCompleted = ref(false)
|
||
let toastInstance = null
|
||
|
||
const hasTransactions = computed(() => {
|
||
return props.transactions && props.transactions.length > 0
|
||
})
|
||
|
||
const hasClassifiedResults = computed(() => {
|
||
return isAllCompleted.value && classifiedResults.value.length > 0
|
||
})
|
||
|
||
// 按钮类型
|
||
const buttonType = computed(() => {
|
||
if (saving.value) return 'warning'
|
||
if (loading.value) return 'primary'
|
||
if (hasClassifiedResults.value) return 'success'
|
||
return 'primary'
|
||
})
|
||
|
||
// 按钮图标
|
||
const buttonIcon = computed(() => {
|
||
if (hasClassifiedResults.value) return 'success'
|
||
return 'fire'
|
||
})
|
||
|
||
// 按钮文字（非加载状态）
|
||
const buttonText = computed(() => {
|
||
if (hasClassifiedResults.value) return '保存分类'
|
||
return '智能分类'
|
||
})
|
||
|
||
// 加载中文字
|
||
const loadingText = computed(() => {
|
||
if (saving.value) return '保存中...'
|
||
if (loading.value) return '分类中...'
|
||
return ''
|
||
})
|
||
|
||
/**
|
||
* 点击按钮处理
|
||
*/
|
||
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 = []
|
||
isAllCompleted.value = false
|
||
|
||
// 通知父组件刷新数据
|
||
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
|
||
}
|
||
|
||
// 清空之前的分类结果
|
||
isAllCompleted.value = false
|
||
classifiedResults.value = []
|
||
|
||
const batchSize = 30
|
||
let processedCount = 0
|
||
|
||
try {
|
||
loading.value = true
|
||
// 清除之前的Toast
|
||
if (toastInstance) {
|
||
closeToast()
|
||
}
|
||
|
||
// 等待父组件的 beforeClassify 事件处理完成（如果有返回 Promise） TODO 没有生效
|
||
if (props.onBeforeClassify) {
|
||
const shouldContinue = await props.onBeforeClassify()
|
||
if (shouldContinue === false) {
|
||
loading.value = false
|
||
return
|
||
}
|
||
}
|
||
|
||
await nextTick()
|
||
|
||
const allTransactions = props.transactions
|
||
const totalCount = allTransactions.length
|
||
|
||
toastInstance = showToast({
|
||
message: '正在智能分类...',
|
||
duration: 0,
|
||
forbidClick: false, // 允许用户点击页面其他地方
|
||
loadingType: 'spinner'
|
||
})
|
||
|
||
// 分批处理
|
||
for (let i = 0; i < allTransactions.length; i += batchSize) {
|
||
const batch = allTransactions.slice(i, i + batchSize)
|
||
const transactionIds = batch.map(t => t.id)
|
||
const currentBatch = Math.floor(i / batchSize) + 1
|
||
const totalBatches = Math.ceil(allTransactions.length / batchSize)
|
||
|
||
// 更新批次进度
|
||
closeToast()
|
||
toastInstance = showToast({
|
||
message: `正在处理第 ${currentBatch}/${totalBatches} 批 (${i + 1}-${Math.min(i + batchSize, totalCount)} / ${totalCount})...`,
|
||
duration: 0,
|
||
forbidClick: false, // 允许用户点击
|
||
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 lastUpdateTime = 0
|
||
const updateInterval = 300 // 最多每300ms更新一次Toast，减少DOM操作
|
||
|
||
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} (批次 ${currentBatch}/${totalBatches})`,
|
||
duration: 0,
|
||
forbidClick: false, // 允许用户点击
|
||
loadingType: 'spinner'
|
||
})
|
||
lastUpdateTime = Date.now()
|
||
} 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
|
||
emit('notifyDonedTransactionId', data.id)
|
||
}
|
||
|
||
// 限制Toast更新频率，避免频繁的DOM操作
|
||
const now = Date.now()
|
||
if (now - lastUpdateTime > updateInterval) {
|
||
closeToast()
|
||
toastInstance = showToast({
|
||
message: `已分类 ${processedCount}/${totalCount} 条 (批次 ${currentBatch}/${totalBatches})...`,
|
||
duration: 0,
|
||
forbidClick: false, // 允许用户点击
|
||
loadingType: 'spinner'
|
||
})
|
||
lastUpdateTime = now
|
||
}
|
||
} else if (eventType === 'end') {
|
||
// 当前批次完成
|
||
console.log(`批次 ${currentBatch}/${totalBatches} 完成`)
|
||
} else if (eventType === 'error') {
|
||
// 处理错误
|
||
throw new Error(eventData || '分类失败')
|
||
}
|
||
} catch (e) {
|
||
console.error('解析SSE事件失败:', e, eventBlock)
|
||
throw e
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 所有批次完成
|
||
closeToast()
|
||
toastInstance = null
|
||
isAllCompleted.value = true
|
||
showToast({
|
||
type: 'success',
|
||
message: `分类完成，共处理 ${processedCount} 条记录，请点击"保存分类"按钮保存结果`,
|
||
duration: 3000
|
||
})
|
||
} 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 = () => {
|
||
isAllCompleted.value = false
|
||
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>
|