样式统一

Web/src/views/ClassificationSmart.vue

@@ -11,54 +11,16 @@
       <!-- 统计信息 -->
       <div class="stats-info">
         <span class="stats-label">未分类账单 </span>
-        <span class="stats-value">{{ unclassifiedCount }} 条，本次分类 {{ reasonGroups.length }} 组</span>
+        <span class="stats-value">{{ unclassifiedCount }} 条，共计 {{ totalGroups }} 组</span>
       </div>
 
-      <!-- 分组列表 -->
-      <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>
+      <!-- 分组列表组件 -->
+      <ReasonGroupList
+        ref="groupListRef"
+        :selectable="true"
+        @data-loaded="handleDataLoaded"
+        @data-changed="handleDataChanged"
+      />
 
       <!-- 底部安全距离 -->
       <div style="height: calc(50px + env(safe-area-inset-bottom, 0px))"></div>
@@ -69,11 +31,11 @@
       <van-button 
         type="primary" 
         :loading="classifying"
-        :disabled="selectedReasons.size === 0"
+        :disabled="selectedCount === 0"
         @click="startClassify"
         class="action-btn"
       >
-        {{ classifying ? '分类中...' : `开始分类 (${selectedReasons.size}组)` }}
+        {{ classifying ? '分类中...' : `开始分类 (${selectedCount}组)` }}
       </van-button>
       
       <van-button 
@@ -89,24 +51,56 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast, showLoadingToast, closeToast, showConfirmDialog } from 'vant'
 import { 
   getUnclassifiedCount, 
-  getReasonGroups,
   smartClassify,
   batchUpdateClassify
 } from '@/api/transactionRecord'
+import ReasonGroupList from '@/components/ReasonGroupList.vue'
 
 const router = useRouter()
+const groupListRef = ref(null)
 const unclassifiedCount = ref(0)
-const reasonGroups = ref([]) // 改为分组数据
-const selectedReasons = ref(new Set()) // 选中的分组摘要集合
-const loading = ref(false)
+const totalGroups = ref(0)
 const classifying = ref(false)
 const hasChanges = ref(false)
-const classifyBuffer = ref('') // SSE数据缓冲区
+const classifyBuffer = ref('')
+
+// 计算已选中的数量
+const selectedCount = computed(() => {
+  if (!groupListRef.value) return 0
+  return groupListRef.value.getSelectedReasons().size
+})
+
+// 加载未分类账单数量
+const loadUnclassifiedCount = async () => {
+  try {
+    const res = await getUnclassifiedCount()
+    if (res.success) {
+      unclassifiedCount.value = res.data
+    }
+  } catch (error) {
+    console.error('获取未分类数量失败', error)
+  }
+}
+
+// 处理数据加载完成
+const handleDataLoaded = ({ groups, total }) => {
+  totalGroups.value = total
+  // 默认全选所有分组
+  if (groupListRef.value) {
+    groupListRef.value.selectAll()
+  }
+}
+
+// 处理数据变更
+const handleDataChanged = async () => {
+  await loadUnclassifiedCount()
+  hasChanges.value = false
+}
 
 const onClickLeft = () => {
   if (hasChanges.value) {
@@ -121,88 +115,17 @@ const onClickLeft = () => {
   }
 }
 
-// 加载未分类账单数量
-const loadUnclassifiedCount = async () => {
-  try {
-    const res = await getUnclassifiedCount()
-    if (res.success) {
-      unclassifiedCount.value = res.data
-    }
-  } catch (error) {
-    console.error('获取未分类数量失败', error)
-  }
-}
-
-// 加载分组数据
-const loadReasonGroups = async () => {
-  showLoadingToast({
-    message: '加载中...',
-    forbidClick: true,
-    duration: 0
-  })
-  
-  loading.value = true
-  
-  try {
-    // 获取所有未分类的分组，设置较大的pageSize以获取所有数据
-    const res = await getReasonGroups(1, 20)
-    if (res.success) {
-      // 后端已经按数量排序，我们需要计算每个分组的总金额并重新排序
-      // 但是后端DTO没有返回总金额，我们先按数量排序即可
-      reasonGroups.value = res.data || []
-      // 默认全选所有分组
-      selectedReasons.value = new Set(reasonGroups.value.map(g => g.reason))
-    } else {
-      showToast(res.message || '加载失败')
-    }
-  } catch (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 () => {
+  if (!groupListRef.value) return
+  
+  // 获取所有选中分组
+  const selectedGroups = groupListRef.value.getList(true)
+  
   // 获取所有选中分组的账单ID
   const idsToClassify = []
-  for (const group of reasonGroups.value) {
-    if (selectedReasons.value.has(group.reason)) {
-      idsToClassify.push(...group.transactionIds)
-    }
+  for (const group of selectedGroups) {
+    idsToClassify.push(...group.transactionIds)
   }
   
   if (idsToClassify.length === 0) {
@@ -217,10 +140,10 @@ const startClassify = async () => {
   })
 
   classifying.value = true
-  classifyBuffer.value = '' // 重置缓冲区
+  classifyBuffer.value = ''
   
   // 用于存储分类结果的临时对象
-  const classifyResults = new Map() // id -> {classify, type}
+  const classifyResults = new Map()
   
   try {
     const response = await smartClassify(idsToClassify)
@@ -270,10 +193,8 @@ const startClassify = async () => {
 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)
@@ -282,7 +203,6 @@ const handleSSEEvent = (eventType, data, classifyResults) => {
           break
         }
 
-        // 尝试找到匹配的闭合括号
         let braceCount = 0
         let closeBrace = -1
         for (let i = openBrace; i < classifyBuffer.value.length; i++) {
@@ -302,15 +222,15 @@ const handleSSEEvent = (eventType, data, classifyResults) => {
           try {
             const result = JSON.parse(jsonStr)
             
-            if (result.id) {
-              // 存储分类结果
+            if (result.id && groupListRef.value) {
               classifyResults.set(result.id, {
                 classify: result.classify || '',
                 type: result.type !== undefined ? result.type : null
               })
               
-              // 更新对应分组的显示状态
-              for (const group of reasonGroups.value) {
+              // 更新组件内的分组显示状态
+              const groups = groupListRef.value.getList()
+              for (const group of groups) {
                 if (group.transactionIds.includes(result.id)) {
                   group.sampleClassify = result.classify || ''
                   if (result.type !== undefined && result.type !== null) {
@@ -320,6 +240,8 @@ const handleSSEEvent = (eventType, data, classifyResults) => {
                   break
                 }
               }
+              // 更新回组件
+              groupListRef.value.setList(groups)
             }
           } catch (e) {
             console.error('JSON解析失败:', e)
@@ -347,9 +269,13 @@ const handleSSEEvent = (eventType, data, classifyResults) => {
 
 // 保存分类
 const saveClassifications = async () => {
+  if (!groupListRef.value) return
+  
   // 收集所有已分类的账单
+  const groups = groupListRef.value.getList()
   const itemsToUpdate = []
-  for (const group of reasonGroups.value) {
+  
+  for (const group of groups) {
     if (group.sampleClassify) {
       // 为该分组的所有账单添加分类
       for (const id of group.transactionIds) {
@@ -380,7 +306,7 @@ const saveClassifications = async () => {
       hasChanges.value = false
       // 重新加载数据
       await loadUnclassifiedCount()
-      await loadReasonGroups()
+      await groupListRef.value.refresh()
     } else {
       showToast(res.message || '保存失败')
     }
@@ -392,16 +318,19 @@ const saveClassifications = async () => {
   }
 }
 
-onMounted(() => {
-  loadUnclassifiedCount()
-  loadReasonGroups()
+onMounted(async () => {
+  await loadUnclassifiedCount()
+  // 触发组件加载数据
+  if (groupListRef.value) {
+    await groupListRef.value.loadData()
+  }
 })
 </script>
 
 <style scoped>
 /* 统计信息 */
 .stats-info {
-  padding: 12px 16px;
+  padding: 12px 12px 0 16px;
   font-size: 14px;
   color: #969799;
 }
@@ -410,39 +339,6 @@ 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;