refactor: 整理组件目录结构

- TransactionDetail, CategoryBillPopup 移入 Transaction/
- BudgetTypeTabs 移入 Budget/
- GlassBottomNav, ModernEmpty 移入 Global/
- Icon, IconSelector, ClassifySelector 等 8 个通用组件移入 Common/
- 更新所有相关引用路径

Web/src/components/Common/ReasonGroupList.vue

@@ -0,0 +1,694 @@
+<template>
+  <div class="reason-group-list-v2">
+    <van-empty
+      v-if="groups.length === 0 && !loading"
+      description="暂无数据"
+    />
+
+    <van-cell-group
+      v-else
+      inset
+    >
+      <van-cell
+        v-for="group in groups"
+        :key="group.reason"
+        clickable
+        @click="handleGroupClick(group)"
+        @long-press="handleLongPress(group)"
+      >
+        <template #title>
+          <div class="group-header">
+            <van-checkbox
+              v-if="selectable"
+              :model-value="isSelected(group.reason)"
+              @click.stop="handleToggleSelection(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
+              v-if="group.totalAmount"
+              class="amount-text"
+            >
+              ¥{{ Math.abs(group.totalAmount).toFixed(2) }}
+            </span>
+          </div>
+        </template>
+        <template #right-icon>
+          <van-icon name="arrow" />
+        </template>
+      </van-cell>
+    </van-cell-group>
+
+    <!-- 账单列表弹窗 -->
+    <PopupContainerV2
+      v-model:show="showTransactionList"
+      :title="selectedGroup?.reason || '交易记录'"
+      :height="'75%'"
+    >
+      <div style="padding: 0">
+        <!-- Subtitle 和操作按钮 -->
+        <div style="padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--van-border-color)">
+          <span
+            v-if="groupTransactionsTotal"
+            style="color: #999; font-size: 14px"
+          >
+            共 {{ groupTransactionsTotal }} 笔交易
+          </span>
+          <van-button
+            type="primary"
+            size="small"
+            class="batch-classify-btn"
+            @click.stop="handleBatchClassify(selectedGroup)"
+          >
+            批量分类
+          </van-button>
+        </div>
+
+        <BillListComponent
+          data-source="custom"
+          :transactions="groupTransactions"
+          :loading="transactionLoading"
+          :finished="transactionFinished"
+          :enable-filter="false"
+          @load="loadGroupTransactions"
+          @click="handleTransactionClick"
+          @delete="handleGroupTransactionDelete"
+        />
+      </div>
+    </PopupContainerV2>
+
+    <!-- 账单详情弹窗 -->
+    <TransactionDetail
+      v-model:show="showTransactionDetail"
+      :transaction="selectedTransaction"
+      @save="handleTransactionSaved"
+    />
+
+    <!-- 批量设置对话框 -->
+    <PopupContainerV2
+      v-model:show="showBatchDialog"
+      title="批量设置分类"
+      :height="'60%'"
+    >
+      <div style="padding: 0">
+        <van-form
+          ref="batchFormRef"
+          class="setting-form"
+        >
+          <van-cell-group inset>
+            <!-- 显示选中的摘要 -->
+            <van-field
+              :model-value="batchGroup?.reason"
+              label="交易摘要"
+              readonly
+              input-align="left"
+            />
+
+            <!-- 显示记录数量 -->
+            <van-field
+              :model-value="`${batchGroup?.count || 0} 条`"
+              label="记录数量"
+              readonly
+              input-align="left"
+            />
+
+            <!-- 交易类型 -->
+            <van-field
+              name="type"
+              label="交易类型"
+            >
+              <template #input>
+                <van-radio-group
+                  v-model="batchForm.type"
+                  direction="horizontal"
+                >
+                  <van-radio :name="0">
+                    支出
+                  </van-radio>
+                  <van-radio :name="1">
+                    收入
+                  </van-radio>
+                  <van-radio :name="2">
+                    不计
+                  </van-radio>
+                </van-radio-group>
+              </template>
+            </van-field>
+
+            <!-- 分类选择 -->
+            <van-field
+              name="classify"
+              label="分类"
+            >
+              <template #input>
+                <span
+                  v-if="!batchForm.classify"
+                  style="opacity: 0.4"
+                >请选择分类</span>
+                <span v-else>{{ batchForm.classify }}</span>
+              </template>
+            </van-field>
+
+            <!-- 分类选择组件 -->
+            <ClassifySelector
+              v-model="batchForm.classify"
+              :type="batchForm.type"
+            />
+          </van-cell-group>
+        </van-form>
+      </div>
+      <template #footer>
+        <van-button
+          round
+          block
+          type="primary"
+          @click="handleConfirmBatchUpdate"
+        >
+          确定
+        </van-button>
+      </template>
+    </PopupContainerV2>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onBeforeUnmount } from 'vue'
+import { showToast, showSuccessToast, showLoadingToast, closeToast, showConfirmDialog } from 'vant'
+import { getReasonGroups, batchUpdateByReason, getTransactionList } from '@/api/transactionRecord'
+import ClassifySelector from './ClassifySelector.vue'
+import BillListComponent from './Bill/BillListComponent.vue'
+import TransactionDetail from './TransactionDetail.vue'
+import PopupContainerV2 from './PopupContainerV2.vue'
+
+const props = defineProps({
+  // 是否支持多选
+  selectable: {
+    type: Boolean,
+    default: false
+  },
+  // 每页数量
+  pageSize: {
+    type: Number,
+    default: 20
+  }
+})
+
+const emit = defineEmits(['long-press', 'data-loaded', 'data-changed'])
+
+// 数据状态
+const groups = ref([])
+const loading = ref(false)
+const selectedReasons = ref(new Set())
+const pageIndex = ref(1)
+const finished = ref(false)
+const total = ref(0)
+// 弹窗状态
+const showTransactionList = ref(false)
+const showTransactionDetail = ref(false)
+const selectedGroup = ref(null)
+const selectedTransaction = ref(null)
+
+// 交易记录列表状态
+const groupTransactions = ref([])
+const groupTransactionsTotal = ref(0)
+const transactionLoading = ref(false)
+const transactionFinished = ref(false)
+const transactionPageIndex = ref(1)
+const transactionPageSize = ref(20)
+
+// 批量分类相关状态
+const showBatchDialog = ref(false)
+const batchFormRef = ref(null)
+const batchGroup = ref(null)
+const batchForm = ref({
+  type: null,
+  typeName: '',
+  classify: ''
+})
+
+// 监听交易类型变化，重新加载分类
+watch(
+  () => batchForm.value.type,
+  (newVal) => {
+    batchForm.value.classify = ''
+  }
+)
+
+// 获取类型名称
+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 isSelected = (reason) => {
+  return selectedReasons.value.has(reason)
+}
+
+// 处理分组点击 - 显示账单列表
+const handleGroupClick = async (group) => {
+  selectedGroup.value = group
+  // 重置状态
+  groupTransactions.value = []
+  groupTransactionsTotal.value = 0
+  transactionPageIndex.value = 1
+  transactionFinished.value = false
+  showTransactionList.value = true
+  // 加载第一页数据
+  await loadGroupTransactions()
+}
+
+// 加载分组的交易记录
+const loadGroupTransactions = async () => {
+  if (transactionFinished.value || !selectedGroup.value) {
+    return
+  }
+
+  transactionLoading.value = true
+  try {
+    const res = await getTransactionList({
+      reason: selectedGroup.value.reason,
+      pageIndex: transactionPageIndex.value,
+      pageSize: transactionPageSize.value
+    })
+
+    if (res.success) {
+      const newData = res.data || []
+      groupTransactions.value = [...groupTransactions.value, ...newData]
+      groupTransactionsTotal.value = res.total || 0
+
+      // 判断是否还有更多数据
+      if (newData.length < transactionPageSize.value) {
+        transactionFinished.value = true
+      }
+
+      transactionPageIndex.value++
+    } else {
+      showToast(res.message || '获取交易记录失败')
+    }
+  } catch (error) {
+    console.error('加载交易记录失败:', error)
+    showToast('加载交易记录失败')
+  } finally {
+    transactionLoading.value = false
+  }
+}
+
+// 处理长按 - 触发父组件的长按事件
+const handleLongPress = (group) => {
+  emit('long-press', group)
+}
+
+// 处理切换选择
+// 处理切换选择
+const handleToggleSelection = (reason) => {
+  if (selectedReasons.value.has(reason)) {
+    selectedReasons.value.delete(reason)
+  } else {
+    selectedReasons.value.add(reason)
+  }
+  // 触发响应式更新
+  selectedReasons.value = new Set(selectedReasons.value)
+}
+
+// ========== 批量分类相关方法 ==========
+
+// 处理批量分类按钮点击
+const handleBatchClassify = (group) => {
+  batchGroup.value = group
+  batchForm.value = {
+    type: group.sampleType,
+    typeName: getTypeName(group.sampleType),
+    classify: group.sampleClassify || ''
+  }
+  showBatchDialog.value = true
+}
+
+// 确认批量更新
+const handleConfirmBatchUpdate = async () => {
+  try {
+    // 表单验证
+    await batchFormRef.value?.validate()
+
+    // 二次确认
+    await showConfirmDialog({
+      title: '确认批量设置',
+      message: `确定要将「${batchGroup.value.reason}」的 ${batchGroup.value.count} 条记录设置为「${batchForm.value.typeName} - ${batchForm.value.classify}」吗？`
+    })
+
+    showLoadingToast({
+      message: '更新中...',
+      forbidClick: true,
+      duration: 0
+    })
+
+    const res = await batchUpdateByReason({
+      reason: batchGroup.value.reason,
+      type: batchForm.value.type,
+      classify: batchForm.value.classify
+    })
+
+    closeToast()
+
+    if (res.success) {
+      showSuccessToast(res.message || `成功更新 ${res.data} 条记录`)
+      showBatchDialog.value = false
+      resetBatchForm()
+      // 刷新列表数据
+      await refresh()
+      // 通知父组件数据已更改
+      emit('data-changed')
+      try {
+        window.dispatchEvent(
+          new CustomEvent('transactions-changed', {
+            detail: {
+              reason: batchGroup.value.reason
+            }
+          })
+        )
+      } catch (e) {
+        console.error('触发全局 transactions-changed 事件失败:', e)
+      }
+      // 关闭弹窗
+      showTransactionList.value = false
+    } else {
+      showToast(res.message || '批量更新失败')
+    }
+  } catch (error) {
+    closeToast()
+    if (error !== 'cancel') {
+      console.error('批量更新失败:', error)
+      showToast(error.message || '批量更新失败')
+    }
+  }
+}
+
+// 重置批量表单
+const resetBatchForm = () => {
+  batchGroup.value = null
+  batchForm.value = {
+    type: null,
+    typeName: '',
+    classify: ''
+  }
+  batchFormRef.value?.resetValidation()
+}
+
+// 处理账单项点击 - 显示账单详情
+const handleTransactionClick = (transaction) => {
+  selectedTransaction.value = transaction
+  showTransactionDetail.value = true
+}
+
+// 处理分组中的删除事件
+const handleGroupTransactionDelete = async (transactionId) => {
+  groupTransactions.value = groupTransactions.value.filter((t) => t.id !== transactionId)
+  groupTransactionsTotal.value = Math.max(0, (groupTransactionsTotal.value || 0) - 1)
+
+  if (groupTransactions.value.length === 0 && !transactionFinished.value) {
+    // 如果当前页数据为空且未加载完，则尝试加载下一页
+    await loadGroupTransactions()
+  }
+
+  if (groupTransactions.value.length === 0) {
+    // 如果删除后当前分组没有交易了，关闭弹窗
+    showTransactionList.value = false
+    groups.value = groups.value.filter((g) => g.reason !== selectedGroup.value.reason)
+    selectedGroup.value = null
+    total.value--
+  }
+
+  // 重新加载当前页统计（如果需要）并通知父组件数据已更改
+  emit('data-changed')
+}
+
+// 全局删除事件监听，刷新当前分组交易或分组数据
+const onGlobalTransactionDeleted = () => {
+  // 如果当前弹窗打开并存在 selectedGroup，则重新加载分组交易
+  if (showTransactionList.value && selectedGroup.value) {
+    // 重新加载从第一页开始
+    groupTransactions.value = []
+    transactionPageIndex.value = 1
+    transactionFinished.value = false
+    loadGroupTransactions()
+  } else {
+    // 否则刷新分组列表
+    refresh()
+  }
+}
+
+window.addEventListener &&
+  window.addEventListener('transaction-deleted', onGlobalTransactionDeleted)
+
+onBeforeUnmount(() => {
+  window.removeEventListener &&
+    window.removeEventListener('transaction-deleted', onGlobalTransactionDeleted)
+})
+
+// 当有交易新增/修改/批量更新时的刷新监听
+const onGlobalTransactionsChanged = () => {
+  if (showTransactionList.value && selectedGroup.value) {
+    groupTransactions.value = []
+    transactionPageIndex.value = 1
+    transactionFinished.value = false
+    loadGroupTransactions()
+  } else {
+    refresh()
+  }
+}
+
+window.addEventListener &&
+  window.addEventListener('transactions-changed', onGlobalTransactionsChanged)
+
+onBeforeUnmount(() => {
+  window.removeEventListener &&
+    window.removeEventListener('transactions-changed', onGlobalTransactionsChanged)
+})
+
+// 处理账单保存后的回调
+const handleTransactionSaved = async () => {
+  // 通知父组件数据已更改
+  emit('data-changed')
+  // 重新加载当前页数据
+  await refresh()
+}
+
+// ========== 公开方法 ==========
+
+/**
+ * 加载数据（支持分页）
+ */
+const loadData = async () => {
+  if (finished.value) {
+    return
+  }
+
+  loading.value = true
+  try {
+    const res = await getReasonGroups(pageIndex.value, props.pageSize)
+    if (res.success) {
+      const newData = res.data || []
+      groups.value = [...groups.value, ...newData]
+      total.value = res.total || 0
+
+      // 判断是否还有更多数据
+      if (groups.value.length >= total.value) {
+        finished.value = true
+      }
+
+      pageIndex.value++
+
+      emit('data-loaded', {
+        groups: groups.value,
+        total: total.value,
+        finished: finished.value
+      })
+    } else {
+      showToast(res.message || '获取数据失败')
+    }
+  } catch (error) {
+    console.error('加载数据失败:', error)
+    showToast('加载数据失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+/**
+ * 刷新数据（重新加载）
+ */
+const refresh = async () => {
+  groups.value = []
+  pageIndex.value = 1
+  finished.value = false
+  selectedReasons.value = new Set()
+  await loadData()
+}
+
+/**
+ * 获取列表数据
+ * @param {boolean} onlySelected - 是否只获取已选中的
+ * @returns {Array} 分组列表
+ */
+const getList = (onlySelected = false) => {
+  if (onlySelected && props.selectable) {
+    return groups.value.filter((g) => selectedReasons.value.has(g.reason))
+  }
+  return [...groups.value]
+}
+
+/**
+ * 设置列表数据
+ * @param {Array} newGroups - 新的分组列表
+ */
+const setList = (newGroups) => {
+  groups.value = newGroups || []
+  total.value = groups.value.length
+  emit('data-changed')
+}
+
+/**
+ * 获取已选中的分组reason集合
+ * @returns {Set} 已选中的reason集合
+ */
+const getSelectedReasons = () => {
+  return new Set(selectedReasons.value)
+}
+
+/**
+ * 设置已选中的分组
+ * @param {Array|Set} reasons - reason数组或Set
+ */
+const setSelectedReasons = (reasons) => {
+  selectedReasons.value = new Set(reasons)
+}
+
+/**
+ * 清空选择
+ */
+const clearSelection = () => {
+  selectedReasons.value = new Set()
+}
+
+/**
+ * 全选
+ */
+const selectAll = () => {
+  selectedReasons.value = new Set(groups.value.map((g) => g.reason))
+}
+
+// 暴露方法给父组件
+defineExpose({
+  loadData,
+  refresh,
+  getList,
+  setList,
+  getSelectedReasons,
+  setSelectedReasons,
+  clearSelection,
+  selectAll
+})
+</script>
+
+<style scoped>
+.reason-group-list-v2 {
+  width: 100%;
+}
+
+/* 分组头部 */
+.group-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.group-title {
+  flex: 1;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.batch-classify-btn {
+  flex-shrink: 0;
+  border-radius: 12px;
+  padding: 0 12px;
+  height: 28px;
+}
+
+.popup-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.popup-actions .van-button {
+  flex: 1;
+  min-width: auto;
+}
+
+.group-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  flex-wrap: wrap;
+}
+
+.count-text {
+  font-size: 13px;
+  color: var(--van-text-color-2);
+}
+
+.amount-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--van-orange);
+}
+
+:deep(.van-cell-group--inset) {
+  margin: 16px;
+}
+
+/* 批量分类表单 */
+.setting-form {
+  padding: 16px 0;
+}
+
+/* 交易列表弹窗 - 自定义样式 */
+</style>