chore: 移除未使用的前端组件
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 16s
Docker Build & Deploy / Deploy to Production (push) Successful in 7s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 16s
Docker Build & Deploy / Deploy to Production (push) Successful in 7s
Docker Build & Deploy / Cleanup Dangling Images (push) Successful in 1s
Docker Build & Deploy / WeChat Notification (push) Successful in 1s
- 删除 SmartClassifyButton.vue (无引用) - 删除 BudgetSummary.vue (无引用) - 归档变更记录
This commit is contained in:
SunCheng
@@ -1,309 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="summary-container">
|
|
||||||
<transition
|
|
||||||
:name="transitionName"
|
|
||||||
mode="out-in"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="stats && (stats.month || stats.year)"
|
|
||||||
:key="dateKey"
|
|
||||||
class="summary-card common-card"
|
|
||||||
>
|
|
||||||
<!-- 左切换按钮 -->
|
|
||||||
<div
|
|
||||||
class="nav-arrow left"
|
|
||||||
@click.stop="changeMonth(-1)"
|
|
||||||
>
|
|
||||||
<van-icon name="arrow-left" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="summary-content">
|
|
||||||
<template
|
|
||||||
v-for="(config, key) in periodConfigs"
|
|
||||||
:key="key"
|
|
||||||
>
|
|
||||||
<div class="summary-item">
|
|
||||||
<div class="label">
|
|
||||||
{{ config.label }}{{ title }}率
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="value"
|
|
||||||
:class="getValueClass(stats[key]?.rate || '0.0')"
|
|
||||||
>
|
|
||||||
{{ stats[key]?.rate || '0.0' }}<span class="unit">%</span>
|
|
||||||
</div>
|
|
||||||
<div class="sub-info">
|
|
||||||
<span class="amount">¥{{ formatMoney(stats[key]?.current || 0) }}</span>
|
|
||||||
<span class="separator">/</span>
|
|
||||||
<span class="amount">¥{{ formatMoney(stats[key]?.limit || 0) }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
v-if="config.showDivider"
|
|
||||||
class="divider"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右切换按钮 -->
|
|
||||||
<div
|
|
||||||
class="nav-arrow right"
|
|
||||||
:class="{ disabled: isCurrentMonth }"
|
|
||||||
@click.stop="!isCurrentMonth && changeMonth(1)"
|
|
||||||
>
|
|
||||||
<van-icon name="arrow" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 非本月时显示的日期标识 -->
|
|
||||||
<div
|
|
||||||
v-if="!isCurrentMonth"
|
|
||||||
class="date-tag"
|
|
||||||
>
|
|
||||||
{{ props.date.getFullYear() }}年{{ props.date.getMonth() + 1 }}月
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed, ref } from 'vue'
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
stats: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
getValueClass: {
|
|
||||||
type: Function,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
date: {
|
|
||||||
type: Date,
|
|
||||||
default: () => new Date()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits(['update:date'])
|
|
||||||
|
|
||||||
const transitionName = ref('slide-right')
|
|
||||||
const dateKey = computed(() => props.date.getFullYear() + '-' + props.date.getMonth())
|
|
||||||
|
|
||||||
const isCurrentMonth = computed(() => {
|
|
||||||
const now = new Date()
|
|
||||||
return props.date.getFullYear() === now.getFullYear() && props.date.getMonth() === now.getMonth()
|
|
||||||
})
|
|
||||||
|
|
||||||
const periodConfigs = computed(() => ({
|
|
||||||
month: {
|
|
||||||
label: isCurrentMonth.value ? '本月' : `${props.date.getMonth() + 1}月`,
|
|
||||||
showDivider: true
|
|
||||||
},
|
|
||||||
year: {
|
|
||||||
label: isCurrentMonth.value ? '年度' : `${props.date.getFullYear()}年`,
|
|
||||||
showDivider: false
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
|
|
||||||
const changeMonth = (delta) => {
|
|
||||||
transitionName.value = delta > 0 ? 'slide-left' : 'slide-right'
|
|
||||||
const newDate = new Date(props.date)
|
|
||||||
newDate.setMonth(newDate.getMonth() + delta)
|
|
||||||
emit('update:date', newDate)
|
|
||||||
}
|
|
||||||
|
|
||||||
const formatMoney = (val) => {
|
|
||||||
return parseFloat(val || 0).toLocaleString(undefined, {
|
|
||||||
minimumFractionDigits: 0,
|
|
||||||
maximumFractionDigits: 0
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.summary-container {
|
|
||||||
margin-top: 12px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-card {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 16px 36px;
|
|
||||||
margin: 0 12px 8px;
|
|
||||||
min-height: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-content {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 40px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 18px;
|
|
||||||
color: var(--van-gray-5);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow:active {
|
|
||||||
color: var(--van-primary-color);
|
|
||||||
background-color: rgba(0, 0, 0, 0.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow.disabled {
|
|
||||||
color: #c8c9cc;
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.35;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow.disabled:active {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow.left {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow.right {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-arrow.disabled {
|
|
||||||
color: var(--van-gray-3);
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-tag {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
font-size: 10px;
|
|
||||||
color: var(--van-primary-color);
|
|
||||||
background-color: var(--van-primary-color-light);
|
|
||||||
padding: 1px 8px;
|
|
||||||
border-radius: 0 0 8px 8px;
|
|
||||||
font-weight: 500;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 动画效果 */
|
|
||||||
.slide-left-enter-active,
|
|
||||||
.slide-left-leave-active,
|
|
||||||
.slide-right-enter-active,
|
|
||||||
.slide-right-leave-active {
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-left-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(30px);
|
|
||||||
}
|
|
||||||
.slide-left-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-right-enter-from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-30px);
|
|
||||||
}
|
|
||||||
.slide-right-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-item {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-item .label {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--van-text-color-2);
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-item .value {
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: var(--van-text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-item :deep(.value.expense) {
|
|
||||||
color: var(--van-danger-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-item :deep(.value.income) {
|
|
||||||
color: var(--van-success-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-item :deep(.value.warning) {
|
|
||||||
color: var(--van-warning-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-item .unit {
|
|
||||||
font-size: 11px;
|
|
||||||
margin-left: 1px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-item .sub-info {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--van-text-color-3);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-item .amount {
|
|
||||||
color: var(--van-text-color-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.summary-item .separator {
|
|
||||||
color: var(--van-text-color-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.divider {
|
|
||||||
width: 1px;
|
|
||||||
height: 24px;
|
|
||||||
background-color: var(--van-border-color);
|
|
||||||
margin: 0 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* @media (prefers-color-scheme: dark) {
|
|
||||||
.nav-arrow:active {
|
|
||||||
background-color: rgba(255, 255, 255, 0.05);
|
|
||||||
}
|
|
||||||
.nav-arrow.disabled {
|
|
||||||
color: var(--van-text-color);
|
|
||||||
}
|
|
||||||
.summary-item .value {
|
|
||||||
color: var(--van-text-color);
|
|
||||||
}
|
|
||||||
.summary-item .amount {
|
|
||||||
color: var(--van-text-color-3);
|
|
||||||
}
|
|
||||||
.divider {
|
|
||||||
background-color: var(--van-border-color);
|
|
||||||
}
|
|
||||||
} */
|
|
||||||
</style>
|
|
||||||
@@ -1,399 +0,0 @@
|
|||||||
<template>
|
|
||||||
<van-button
|
|
||||||
v-if="hasTransactions"
|
|
||||||
:type="buttonType"
|
|
||||||
size="small"
|
|
||||||
:loading="loading || saving"
|
|
||||||
:loading-text="loadingText"
|
|
||||||
:disabled="loading || saving"
|
|
||||||
class="smart-classify-btn"
|
|
||||||
@click="handleClick"
|
|
||||||
>
|
|
||||||
<template v-if="!loading && !saving">
|
|
||||||
<van-icon :name="buttonIcon" />
|
|
||||||
<span style="margin-left: 4px">{{ buttonText }}</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 lockClassifiedResults = ref(false)
|
|
||||||
const isAllCompleted = ref(false)
|
|
||||||
let toastInstance = null
|
|
||||||
|
|
||||||
const hasTransactions = computed(() => {
|
|
||||||
return props.transactions && props.transactions.length > 0
|
|
||||||
})
|
|
||||||
|
|
||||||
const hasClassifiedResults = computed(() => {
|
|
||||||
// Show save state once we have any classified result, even if not all batches finished
|
|
||||||
return classifiedResults.value.length > 0 && lockClassifiedResults.value === false
|
|
||||||
})
|
|
||||||
|
|
||||||
// 按钮类型
|
|
||||||
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 () => {
|
|
||||||
if (saving.value || loading.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
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 (loading.value || saving.value) {
|
|
||||||
showToast('当前有任务正在进行，请稍后再试')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
loading.value = true
|
|
||||||
|
|
||||||
if (!props.transactions || props.transactions.length === 0) {
|
|
||||||
showToast('没有可分类的交易记录')
|
|
||||||
loading.value = false
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (lockClassifiedResults.value) {
|
|
||||||
showToast('当前有分类任务正在进行，请稍后再试')
|
|
||||||
loading.value = false
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// 清空之前的分类结果
|
|
||||||
isAllCompleted.value = false
|
|
||||||
classifiedResults.value = []
|
|
||||||
|
|
||||||
const batchSize = 3
|
|
||||||
let processedCount = 0
|
|
||||||
|
|
||||||
try {
|
|
||||||
lockClassifiedResults.value = true
|
|
||||||
// 等待父组件的 beforeClassify 事件处理完成（如果有返回 Promise）
|
|
||||||
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
|
|
||||||
lockClassifiedResults.value = false
|
|
||||||
// 确保Toast被清除
|
|
||||||
if (toastInstance) {
|
|
||||||
setTimeout(() => {
|
|
||||||
closeToast()
|
|
||||||
toastInstance = null
|
|
||||||
}, 100)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const removeClassifiedTransaction = (transactionId) => {
|
|
||||||
// 从已分类结果中移除指定ID的项
|
|
||||||
classifiedResults.value = classifiedResults.value.filter((item) => item.id !== transactionId)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 重置组件状态
|
|
||||||
*/
|
|
||||||
const reset = () => {
|
|
||||||
if (lockClassifiedResults.value) {
|
|
||||||
showToast('当前有分类任务正在进行，无法重置')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
isAllCompleted.value = false
|
|
||||||
classifiedResults.value = []
|
|
||||||
loading.value = false
|
|
||||||
saving.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
reset,
|
|
||||||
removeClassifiedTransaction
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.smart-classify-btn {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 6px 12px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
## Context
|
||||||
|
|
||||||
|
前端组件库存在两个未被引用的组件：
|
||||||
|
- `SmartClassifyButton.vue` - 智能分类按钮，历史上可能用于快速分类功能，现已无引用
|
||||||
|
- `BudgetSummary.vue` - 预算汇总卡片，功能已被 budgetV2 模块的子组件替代
|
||||||
|
|
||||||
|
当前打包工具（Vite）的 tree-shaking 会移除未引用代码，但保留源文件会增加维护困惑和代码审查负担。
|
||||||
|
|
||||||
|
## Goals / Non-Goals
|
||||||
|
|
||||||
|
**Goals:**
|
||||||
|
- 移除确认无引用的组件文件
|
||||||
|
- 保持代码库整洁，降低维护成本
|
||||||
|
|
||||||
|
**Non-Goals:**
|
||||||
|
- 不涉及 `TransactionDetail.vue` vs `TransactionDetailSheet.vue` 的重构（两者虽然功能相似，但均有活跃引用）
|
||||||
|
- 不涉及其他代码清理（如未使用的 composables、utils）
|
||||||
|
|
||||||
|
## Decisions
|
||||||
|
|
||||||
|
### 1. 删除策略：直接删除 vs 废弃标记
|
||||||
|
|
||||||
|
**决策**: 直接删除
|
||||||
|
|
||||||
|
**理由**:
|
||||||
|
- 两个组件均无任何 import 引用，删除零风险
|
||||||
|
- 无需废弃过渡期，因为没有使用方需要迁移
|
||||||
|
- 简化变更流程，避免留下无效的废弃代码
|
||||||
|
|
||||||
|
**备选方案**: 添加 `@deprecated` 注释并在下个版本删除 - 过度工程化，不必要
|
||||||
|
|
||||||
|
### 2. 回归验证范围
|
||||||
|
|
||||||
|
**决策**: 仅验证打包成功和页面正常渲染
|
||||||
|
|
||||||
|
**理由**:
|
||||||
|
- 删除的是零引用组件，理论上不会有任何运行时影响
|
||||||
|
- 全量 E2E 测试成本过高，性价比低
|
||||||
|
|
||||||
|
## Risks / Trade-offs
|
||||||
|
|
||||||
|
| 风险 | 影响 | 缓解措施 |
|
||||||
|
|------|------|----------|
|
||||||
|
| 误删有引用的组件 | 页面报错 | 已通过 grep 全量搜索确认无引用 |
|
||||||
|
| 动态引用未被发现 | 运行时报错 | 检查了 `:is` 动态组件和字符串引用模式 |
|
||||||
|
|
||||||
|
## Migration Plan
|
||||||
|
|
||||||
|
1. 删除 `SmartClassifyButton.vue`
|
||||||
|
2. 删除 `BudgetSummary.vue`
|
||||||
|
3. 运行 `pnpm build` 验证打包成功
|
||||||
|
4. 运行 `pnpm dev` 启动开发服务器，访问主要页面验证无报错
|
||||||
|
|
||||||
|
**回滚策略**: Git revert 即可恢复
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
## Why
|
||||||
|
|
||||||
|
前端代码库中存在未使用的组件，增加了维护成本和打包体积。作为大版本迭代的清理工作，需要识别并移除这些无效代码，保持代码库整洁。
|
||||||
|
|
||||||
|
## What Changes
|
||||||
|
|
||||||
|
- 删除 `SmartClassifyButton.vue` - 无任何引用
|
||||||
|
- 删除 `BudgetSummary.vue` - 无任何引用
|
||||||
|
- 评估 `TransactionDetail.vue` 与 `TransactionDetailSheet.vue` 的重复问题（两者功能相似，需确认是否可合并）
|
||||||
|
|
||||||
|
## Capabilities
|
||||||
|
|
||||||
|
### New Capabilities
|
||||||
|
|
||||||
|
无新增能力。
|
||||||
|
|
||||||
|
### Modified Capabilities
|
||||||
|
|
||||||
|
无需求变更。此变更为代码清理，不影响业务功能。
|
||||||
|
|
||||||
|
## Impact
|
||||||
|
|
||||||
|
- **删除文件**:
|
||||||
|
- `Web/src/components/SmartClassifyButton.vue`
|
||||||
|
- `Web/src/components/Budget/BudgetSummary.vue`
|
||||||
|
- **风险评估**: 低风险。两个组件均无任何导入引用
|
||||||
|
- **打包体积**: 减少无效代码约 ~5KB (gzip)
|
||||||
|
- **测试影响**: 无需新增测试，仅需回归验证
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
## Overview
|
||||||
|
|
||||||
|
此变更为代码清理，不涉及业务需求变更。
|
||||||
|
|
||||||
|
## REMOVED Components
|
||||||
|
|
||||||
|
### Requirement: SmartClassifyButton component
|
||||||
|
**Reason**: 组件无任何引用，已被废弃
|
||||||
|
**Migration**: 无需迁移，该组件从未被使用
|
||||||
|
|
||||||
|
### Requirement: BudgetSummary component
|
||||||
|
**Reason**: 功能已被 budgetV2 模块的子组件替代
|
||||||
|
**Migration**: 使用 `BudgetCard.vue` 和 `BudgetChartAnalysis.vue` 替代
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
## 1. 移除未使用组件
|
||||||
|
|
||||||
|
- [x] 1.1 删除 `Web/src/components/SmartClassifyButton.vue`
|
||||||
|
- [x] 1.2 删除 `Web/src/components/Budget/BudgetSummary.vue`
|
||||||
|
|
||||||
|
## 2. 验证
|
||||||
|
|
||||||
|
- [x] 2.1 运行 `pnpm build` 验证打包成功
|
||||||
|
- [x] 2.2 运行 `pnpm dev` 启动开发服务器，访问主要页面验证无报错
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
schema: spec-driven
|
||||||
|
created: 2026-02-20
|
||||||
@@ -11,6 +11,54 @@
|
|||||||
- **WHEN** CalendarV2 需要展示交易列表
|
- **WHEN** CalendarV2 需要展示交易列表
|
||||||
- **THEN** 使用 `BillListComponent.vue` 或保留其特有实现（如有特殊需求）
|
- **THEN** 使用 `BillListComponent.vue` 或保留其特有实现（如有特殊需求）
|
||||||
|
|
||||||
|
### Requirement: CategoryBillPopup 统一样式
|
||||||
|
统计页面分类账单弹窗必须使用 BillListComponent，样式与 Balance 页面一致。
|
||||||
|
|
||||||
|
#### Scenario: 使用 BillListComponent
|
||||||
|
- **WHEN** 用户在统计页面点击分类卡片
|
||||||
|
- **THEN** 弹窗使用 `BillListComponent` 展示账单列表，配置为 `dataSource="api"` 模式
|
||||||
|
|
||||||
|
#### Scenario: 列表项样式对齐
|
||||||
|
- **WHEN** 账单列表渲染
|
||||||
|
- **THEN** 使用与 `TransactionsRecord.vue` 相同的卡片样式（图标、金额、标签布局）
|
||||||
|
|
||||||
|
#### Scenario: 左滑删除
|
||||||
|
- **WHEN** 用户在账单项上左滑
|
||||||
|
- **THEN** 显示红色删除按钮，点击后确认删除
|
||||||
|
|
||||||
|
#### Scenario: 点击查看详情
|
||||||
|
- **WHEN** 用户点击账单项
|
||||||
|
- **THEN** 打开 `TransactionDetailSheet` 查看详情
|
||||||
|
|
||||||
|
### Requirement: CalendarV2 TransactionList 对齐
|
||||||
|
日历页面的交易列表样式必须与 Balance 页面一致。
|
||||||
|
|
||||||
|
#### Scenario: 紧凑布局
|
||||||
|
- **WHEN** 日历页面展示当天账单列表
|
||||||
|
- **THEN** 使用 `compact={true}` 紧凑布局
|
||||||
|
|
||||||
|
#### Scenario: 删除交互
|
||||||
|
- **WHEN** 用户左滑删除账单
|
||||||
|
- **THEN** 与 Balance 页面删除交互一致
|
||||||
|
|
||||||
|
### Requirement: BudgetCard 关联账单对齐
|
||||||
|
预算页面的关联账单弹窗样式必须与 Balance 页面一致。
|
||||||
|
|
||||||
|
#### Scenario: 统一卡片样式
|
||||||
|
- **WHEN** 预算卡片展示关联账单
|
||||||
|
- **THEN** 账单项样式与 Balance 页面一致
|
||||||
|
|
||||||
|
### Requirement: EmailRecord 关联账单对齐
|
||||||
|
邮件记录页面的关联账单弹窗样式必须与 Balance 页面一致。
|
||||||
|
|
||||||
|
#### Scenario: 统一卡片样式
|
||||||
|
- **WHEN** 邮件记录展示关联账单
|
||||||
|
- **THEN** 账单项样式与 Balance 页面一致
|
||||||
|
|
||||||
|
#### Scenario: 删除功能
|
||||||
|
- **WHEN** 用户删除账单
|
||||||
|
- **THEN** 删除交互与 Balance 页面一致
|
||||||
|
|
||||||
### Requirement: 功能对等性
|
### Requirement: 功能对等性
|
||||||
新组件必须保持旧版所有功能，确保迁移不丢失特性。
|
新组件必须保持旧版所有功能，确保迁移不丢失特性。
|
||||||
|
|
||||||
@@ -26,12 +74,16 @@
|
|||||||
- **WHEN** 页面需要展示离线或缓存数据
|
- **WHEN** 页面需要展示离线或缓存数据
|
||||||
- **THEN** 新组件通过 `dataSource="custom"` 和 `transactions` prop 支持自定义数据
|
- **THEN** 新组件通过 `dataSource="custom"` 和 `transactions` prop 支持自定义数据
|
||||||
|
|
||||||
|
#### Scenario: 弹窗场景数据源
|
||||||
|
- **WHEN** 弹窗组件（CategoryBillPopup、BudgetCard、EmailRecord）展示账单
|
||||||
|
- **THEN** 使用 `dataSource="api"` 或 `dataSource="custom"`，并配置 `enableFilter={false}` 禁用筛选
|
||||||
|
|
||||||
### Requirement: 视觉升级
|
### Requirement: 视觉升级
|
||||||
新组件必须基于 v2 的现代化设计，提供更好的视觉体验。
|
新组件必须基于 v2 的现代化设计，提供更好的视觉体验。
|
||||||
|
|
||||||
#### Scenario: 卡片样式
|
#### Scenario: 卡片样式
|
||||||
- **WHEN** 展示账单列表
|
- **WHEN** 展示账单列表
|
||||||
- **THEN** 使用 v2 的卡片样式（圆角、阴影、图标），但调整为紧凑间距
|
- **THEN** 使用 v2 的卡片样式（圆角、阴影、图标），调整为紧凑间距
|
||||||
|
|
||||||
#### Scenario: 图标展示
|
#### Scenario: 图标展示
|
||||||
- **WHEN** 账单有分类信息
|
- **WHEN** 账单有分类信息
|
||||||
@@ -41,6 +93,10 @@
|
|||||||
- **WHEN** 显示账单类型
|
- **WHEN** 显示账单类型
|
||||||
- **THEN** 使用彩色标签（支出红色、收入绿色），位于卡片右上角
|
- **THEN** 使用彩色标签（支出红色、收入绿色），位于卡片右上角
|
||||||
|
|
||||||
|
#### Scenario: 空状态展示
|
||||||
|
- **WHEN** 账单列表为空
|
||||||
|
- **THEN** 显示统一的空状态图标和提示文案
|
||||||
|
|
||||||
### Requirement: 迁移计划
|
### Requirement: 迁移计划
|
||||||
系统必须按阶段迁移，确保平滑过渡。
|
系统必须按阶段迁移，确保平滑过渡。
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user