样式统一

2025-12-30 17:02:30 +08:00
parent 8ba279e957
commit 1f01d13ed3
15 changed files with 1528 additions and 929 deletions
--- a/Repository/TransactionRecordRepository.cs
+++ b/Repository/TransactionRecordRepository.cs
@@ -16,6 +16,7 @@ public interface ITransactionRecordRepository : IBaseRepository<TransactionRecor
    /// <param name="type">筛选交易类型</param>
    /// <param name="year">筛选年份</param>
    /// <param name="month">筛选月份</param>
+    /// <param name="reason">筛选交易摘要</param>
    /// <param name="sortByAmount">是否按金额降序排列，默认为false按时间降序</param>
    /// <returns>交易记录列表</returns>
    Task<List<TransactionRecord>> GetPagedListAsync(
@@ -26,6 +27,7 @@ public interface ITransactionRecordRepository : IBaseRepository<TransactionRecor
        TransactionType? type = null,
        int? year = null,
        int? month = null,
+        string? reason = null,
        bool sortByAmount = false);

    /// <summary>
@@ -36,7 +38,8 @@ public interface ITransactionRecordRepository : IBaseRepository<TransactionRecor
        string? classify = null,
        TransactionType? type = null,
        int? year = null,
-        int? month = null);
+        int? month = null,
+        string? reason = null);

    /// <summary>
    /// 获取所有不同的交易分类
@@ -192,6 +195,7 @@ public class TransactionRecordRepository(IFreeSql freeSql) : BaseRepository<Tran
        TransactionType? type = null,
        int? year = null,
        int? month = null,
+        string? reason = null,
        bool sortByAmount = false)
    {
        var query = FreeSql.Select<TransactionRecord>();
@@ -201,7 +205,9 @@ public class TransactionRecordRepository(IFreeSql freeSql) : BaseRepository<Tran
                                t => t.Reason.Contains(searchKeyword!) ||
                                    t.Classify.Contains(searchKeyword!) ||
                                    t.Card.Contains(searchKeyword!) ||
-                                    t.ImportFrom.Contains(searchKeyword!));
+                                    t.ImportFrom.Contains(searchKeyword!))
+                    .WhereIf(!string.IsNullOrWhiteSpace(reason),
+                                t => t.Reason == reason);

        // 按分类筛选
        if (!string.IsNullOrWhiteSpace(classify))
@@ -250,7 +256,8 @@ public class TransactionRecordRepository(IFreeSql freeSql) : BaseRepository<Tran
        string? classify = null,
        TransactionType? type = null,
        int? year = null,
-        int? month = null)
+        int? month = null,
+        string? reason = null)
    {
        var query = FreeSql.Select<TransactionRecord>();

@@ -259,7 +266,9 @@ public class TransactionRecordRepository(IFreeSql freeSql) : BaseRepository<Tran
                                t => t.Reason.Contains(searchKeyword!) ||
                                    t.Classify.Contains(searchKeyword!) ||
                                    t.Card.Contains(searchKeyword!) ||
-                                    t.ImportFrom.Contains(searchKeyword!));
+                                    t.ImportFrom.Contains(searchKeyword!))
+                    .WhereIf(!string.IsNullOrWhiteSpace(reason),
+                                t => t.Reason == reason);

        // 按分类筛选
        if (!string.IsNullOrWhiteSpace(classify))
--- a/Web/src/components/PopupContainer.vue
+++ b/Web/src/components/PopupContainer.vue
@@ -0,0 +1,117 @@
+<template>
+  <van-popup
+    v-model:show="visible"
+    position="bottom"
+    :style="{ height: height }"
+    round
+    :closeable="closeable"
+  >
+    <div class="popup-container">
+      <!-- 头部区域 -->
+      <div class="popup-header-fixed">
+        <h3 class="popup-title">{{ title }}</h3>
+        
+        <!-- 子标题/统计信息 -->
+        <div v-if="subtitle || hasActions" class="header-stats">
+          <span v-if="subtitle" class="stats-text" v-html="subtitle" />
+          <!-- 额外操作插槽 -->
+          <slot name="header-actions"></slot>
+        </div>
+      </div>
+
+      <!-- 内容区域（可滚动） -->
+      <div class="popup-scroll-content">
+        <slot></slot>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    required: true
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  subtitle: {
+    type: String,
+    default: ''
+  },
+  height: {
+    type: String,
+    default: '80%'
+  },
+  closeable: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const slots = useSlots()
+
+// 双向绑定
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+// 判断是否有操作按钮
+const hasActions = computed(() => !!slots['header-actions'])
+</script>
+
+<style scoped>
+.popup-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.popup-header-fixed {
+  flex-shrink: 0;
+  padding: 16px;
+  background-color: var(--van-background-2, #f7f8fa);
+  border-bottom: 1px solid var(--van-border-color, #ebedf0);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.popup-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0;
+  text-align: center;
+  color: var(--van-text-color, #323233);
+}
+
+.header-stats {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 12px;
+}
+
+.stats-text {
+  margin: 0;
+  font-size: 14px;
+  color: var(--van-text-color-2, #646566);
+  flex: 1;
+  text-align: center;
+}
+
+.popup-scroll-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+</style>
--- a/Web/src/components/ReasonGroupList.vue
+++ b/Web/src/components/ReasonGroupList.vue
@@ -0,0 +1,707 @@
+<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 class="amount-text" v-if="group.totalAmount">
+              ¥{{ Math.abs(group.totalAmount).toFixed(2) }}
+            </span>
+          </div>
+        </template>
+        <template #right-icon>
+          <van-icon name="arrow" />
+        </template>
+      </van-cell>
+    </van-cell-group>
+
+    <!-- 账单列表弹窗 -->
+    <PopupContainer
+      v-model="showTransactionList"
+      :title="selectedGroup?.reason || '交易记录'"
+      :subtitle="groupTransactionsTotal ? `共 ${groupTransactionsTotal} 笔交易` : ''"
+      height="80%"
+    >
+      <template #header-actions>
+        <van-button 
+          type="primary" 
+          size="small"
+          class="batch-classify-btn"
+          @click.stop="handleBatchClassify(selectedGroup)"
+        >
+          批量分类
+        </van-button>
+      </template>
+      
+      <TransactionList
+        :transactions="groupTransactions"
+        :loading="transactionLoading"
+        :finished="transactionFinished"
+        @load="loadGroupTransactions"
+        @click="handleTransactionClick"
+      />
+    </PopupContainer>
+
+    <!-- 账单详情弹窗 -->
+    <TransactionDetailDialog
+      v-model="showTransactionDetail"
+      :transaction="selectedTransaction"
+      @saved="handleTransactionSaved"
+    />
+
+    <!-- 批量设置对话框 -->
+    <van-dialog
+      v-model:show="showBatchDialog"
+      title="批量设置分类"
+      :show-cancel-button="true"
+      @confirm="handleConfirmBatchUpdate"
+      @cancel="resetBatchForm"
+    >
+      <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
+            v-model="batchForm.typeName"
+            is-link
+            readonly
+            name="type"
+            label="交易类型"
+            placeholder="请选择交易类型"
+            @click="showTypePicker = true"
+            :rules="[{ required: true, message: '请选择交易类型' }]"
+          />
+
+          <!-- 分类选择 -->
+          <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>
+          
+          <!-- 分类按钮网格 -->
+          <div class="classify-buttons">
+            <van-button
+              v-for="item in classifyOptions"
+              :key="item.id"
+              :type="batchForm.classify === item.text ? 'primary' : 'default'"
+              size="small"
+              class="classify-btn"
+              @click="selectClassify(item.text)"
+            >
+              {{ item.text }}
+            </van-button>
+            <van-button
+              type="success"
+              size="small"
+              class="classify-btn"
+              @click="showAddClassify = true"
+            >
+              + 新增
+            </van-button>
+            <van-button
+              v-if="batchForm.classify"
+              type="warning"
+              size="small"
+              class="classify-btn"
+              @click="clearClassify"
+            >
+              清空
+            </van-button>
+          </div>
+        </van-cell-group>
+      </van-form>
+    </van-dialog>
+
+    <!-- 交易类型选择器 -->
+    <van-popup v-model:show="showTypePicker" position="bottom" round>
+      <van-picker
+        show-toolbar
+        :columns="typeOptions"
+        @confirm="handleConfirmType"
+        @cancel="showTypePicker = false"
+      />
+    </van-popup>
+
+    <!-- 新增分类对话框 -->
+    <van-dialog 
+      v-model:show="showAddClassify" 
+      title="新增交易分类" 
+      show-cancel-button
+      @confirm="addNewClassify"
+    >
+      <van-field v-model="newClassify" placeholder="请输入新的交易分类" />
+    </van-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { 
+  showToast, 
+  showSuccessToast, 
+  showLoadingToast, 
+  closeToast,
+  showConfirmDialog
+} from 'vant'
+import { getReasonGroups, batchUpdateByReason, getTransactionList } from '@/api/transactionRecord'
+import { getCategoryList, createCategory } from '@/api/transactionCategory'
+import TransactionList from './TransactionList.vue'
+import TransactionDetailDialog from './TransactionDetailDialog.vue'
+import PopupContainer from './PopupContainer.vue'
+
+const props = defineProps({
+  // 是否支持多选
+  selectable: {
+    type: Boolean,
+    default: false
+  },
+  // 每页数量
+  pageSize: {
+    type: Number,
+    default: 20
+  }
+})
+
+const emit = defineEmits(['long-press', 'data-loaded', 'data-changed'])
+
+// 交易类型选项
+const typeOptions = [
+  { text: '支出', value: 0 },
+  { text: '收入', value: 1 },
+  { text: '不计收支', value: 2 }
+]
+
+// 数据状态
+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 categories = ref([])
+
+// 弹窗状态
+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 showTypePicker = ref(false)
+const showAddClassify = ref(false)
+const batchFormRef = ref(null)
+const batchGroup = ref(null)
+const newClassify = ref('')
+const batchForm = ref({
+  type: null,
+  typeName: '',
+  classify: ''
+})
+
+// 根据选中的类型过滤分类选项
+const classifyOptions = computed(() => {
+  if (batchForm.value.type === null) return []
+  return categories.value
+    .filter(c => c.type === batchForm.value.type)
+    .map(c => ({ text: c.name, value: c.name, id: c.id }))
+})
+
+// 监听交易类型变化，重新加载分类
+watch(() => batchForm.value.type, (newVal) => {
+  batchForm.value.classify = ''
+  if (newVal !== null) {
+    loadCategories(newVal)
+  }
+})
+
+// 获取类型名称
+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 || ''
+  }
+  // 加载对应类型的分类列表
+  loadCategories(group.sampleType)
+  showBatchDialog.value = true
+}
+
+// 获取所有分类
+const loadCategories = async (type = null) => {
+  try {
+    const res = await getCategoryList(type)
+    if (res.success) {
+      categories.value = res.data || []
+    }
+  } catch (error) {
+    console.error('获取分类列表失败:', error)
+  }
+}
+
+// 选择分类
+const selectClassify = (classify) => {
+  batchForm.value.classify = classify
+}
+
+// 确认选择交易类型
+const handleConfirmType = ({ selectedOptions }) => {
+  batchForm.value.type = selectedOptions[0].value
+  batchForm.value.typeName = selectedOptions[0].text
+  showTypePicker.value = false
+}
+
+// 新增分类
+const addNewClassify = async () => {
+  if (!newClassify.value.trim()) {
+    showToast('请输入分类名称')
+    return
+  }
+  
+  if (batchForm.value.type === null) {
+    showToast('请先选择交易类型')
+    return
+  }
+  
+  try {
+    const categoryName = newClassify.value.trim()
+    
+    // 调用API创建分类
+    const response = await createCategory({
+      name: categoryName,
+      type: batchForm.value.type
+    })
+    
+    if (response.success) {
+      showToast('分类创建成功')
+      // 重新加载分类列表
+      await loadCategories(batchForm.value.type)
+      batchForm.value.classify = categoryName
+    } else {
+      showToast(response.message || '创建分类失败')
+    }
+  } catch (error) {
+    console.error('创建分类出错:', error)
+    showToast('创建分类失败')
+  } finally {
+    newClassify.value = ''
+    showAddClassify.value = false
+  }
+}
+
+// 清空分类
+const clearClassify = () => {
+  batchForm.value.classify = ''
+  showToast('已清空分类')
+}
+
+// 确认批量更新
+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')
+    } 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 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;
+}
+
+.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;
+}
+
+:deep(.van-cell-group--inset) {
+  margin: 16px;
+}
+
+/* 批量分类表单 */
+.setting-form {
+  padding: 16px 0;
+}
+
+.classify-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px 16px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.classify-btn {
+  flex: 0 0 auto;
+  min-width: 70px;
+  border-radius: 16px;
+}
+
+/* 交易列表弹窗 - 自定义样式 */
+</style>
--- a/Web/src/components/TransactionDetailDialog.vue
+++ b/Web/src/components/TransactionDetailDialog.vue
@@ -0,0 +1,410 @@
+<template>
+  <van-popup 
+    v-model:show="visible" 
+    position="bottom" 
+    :style="{ height: '70%' }"
+    round
+    closeable
+    @closed="handleClosed"
+  >
+    <div class="transaction-detail-dialog">
+      <div class="dialog-header">
+        <h3 class="dialog-title">账单详情</h3>
+      </div>
+
+      <div class="dialog-content">
+        <van-form ref="formRef">
+          <van-cell-group inset>
+            <!-- 交易摘要 -->
+            <van-field
+              :model-value="formData.reason"
+              label="交易摘要"
+              readonly
+              input-align="left"
+            />
+
+            <!-- 交易时间 -->
+            <van-field
+              :model-value="formatDateTime(formData.occurredAt)"
+              label="交易时间"
+              readonly
+              input-align="left"
+            />
+
+            <!-- 卡号 -->
+            <van-field
+              v-if="formData.card"
+              :model-value="formData.card"
+              label="卡号"
+              readonly
+              input-align="left"
+            />
+
+            <!-- 交易金额 -->
+            <van-field
+              v-model.number="formData.amount"
+              label="交易金额"
+              type="number"
+              placeholder="请输入金额"
+              input-align="left"
+              :rules="[{ required: true, message: '请输入交易金额' }]"
+            />
+
+            <!-- 交易后余额 -->
+            <van-field
+              v-model.number="formData.balance"
+              label="交易后余额"
+              type="number"
+              placeholder="请输入余额"
+              input-align="left"
+            />
+
+            <!-- 交易类型 -->
+            <van-field
+              v-model="typeText"
+              is-link
+              readonly
+              label="交易类型"
+              placeholder="请选择交易类型"
+              @click="showTypePicker = true"
+              :rules="[{ required: true, message: '请选择交易类型' }]"
+            />
+
+            <!-- 分类选择 -->
+            <van-field label="分类">
+              <template #input>
+                <span v-if="!formData.classify" style="opacity: 0.4;">请选择分类</span>
+                <span v-else>{{ formData.classify }}</span>
+              </template>
+            </van-field>
+            
+            <!-- 分类按钮网格 -->
+            <div class="classify-buttons">
+              <van-button
+                v-for="item in classifyOptions"
+                :key="item.id"
+                :type="formData.classify === item.name ? 'primary' : 'default'"
+                size="small"
+                class="classify-btn"
+                @click="selectClassify(item.name)"
+              >
+                {{ item.name }}
+              </van-button>
+              <van-button
+                type="success"
+                size="small"
+                class="classify-btn"
+                @click="showAddClassify = true"
+              >
+                + 新增
+              </van-button>
+              <van-button
+                v-if="formData.classify"
+                type="warning"
+                size="small"
+                class="classify-btn"
+                @click="clearClassify"
+              >
+                清空
+              </van-button>
+            </div>
+          </van-cell-group>
+        </van-form>
+      </div>
+
+      <div class="dialog-footer">
+        <van-button 
+          type="primary" 
+          block 
+          :loading="saving"
+          @click="handleSave"
+        >
+          保存
+        </van-button>
+      </div>
+    </div>
+
+    <!-- 交易类型选择器 -->
+    <van-popup v-model:show="showTypePicker" position="bottom" round>
+      <van-picker
+        show-toolbar
+        :columns="typeOptions"
+        @confirm="handleConfirmType"
+        @cancel="showTypePicker = false"
+      />
+    </van-popup>
+
+    <!-- 新增分类对话框 -->
+    <van-dialog 
+      v-model:show="showAddClassify" 
+      title="新增交易分类" 
+      show-cancel-button
+      @confirm="addNewClassify"
+    >
+      <van-field v-model="newClassify" placeholder="请输入新的交易分类" />
+    </van-dialog>
+  </van-popup>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue'
+import { showToast, showSuccessToast } from 'vant'
+import { updateTransaction } from '@/api/transactionRecord'
+import { getCategoryList, createCategory } from '@/api/transactionCategory'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  transaction: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'saved'])
+
+const visible = ref(props.modelValue)
+const formRef = ref(null)
+const saving = ref(false)
+const showTypePicker = ref(false)
+const showAddClassify = ref(false)
+const newClassify = ref('')
+const categories = ref([])
+
+// 交易类型选项
+const typeOptions = [
+  { text: '支出', value: 0 },
+  { text: '收入', value: 1 },
+  { text: '不计收支', value: 2 }
+]
+
+// 表单数据
+const formData = ref({
+  id: null,
+  reason: '',
+  occurredAt: '',
+  card: '',
+  amount: 0,
+  balance: 0,
+  type: 0,
+  classify: ''
+})
+
+// 类型文本
+const typeText = computed(() => {
+  const option = typeOptions.find(o => o.value === formData.value.type)
+  return option?.text || ''
+})
+
+// 根据选中的类型过滤分类选项
+const classifyOptions = computed(() => {
+  return categories.value.filter(c => c.type === formData.value.type)
+})
+
+// 监听modelValue变化
+watch(() => props.modelValue, (val) => {
+  visible.value = val
+  if (val && props.transaction) {
+    initFormData()
+    loadCategories()
+  }
+})
+
+// 监听visible变化
+watch(visible, (val) => {
+  emit('update:modelValue', val)
+})
+
+// 监听交易类型变化
+watch(() => formData.value.type, () => {
+  // 清空已选的分类（如果当前分类不属于新类型）
+  const hasCurrentClassify = classifyOptions.value.some(
+    c => c.name === formData.value.classify
+  )
+  if (!hasCurrentClassify) {
+    formData.value.classify = ''
+  }
+})
+
+// 初始化表单数据
+const initFormData = () => {
+  if (props.transaction) {
+    formData.value = {
+      id: props.transaction.id,
+      reason: props.transaction.reason || '',
+      occurredAt: props.transaction.occurredAt || '',
+      card: props.transaction.card || '',
+      amount: props.transaction.amount || 0,
+      balance: props.transaction.balance || 0,
+      type: props.transaction.type ?? 0,
+      classify: props.transaction.classify || ''
+    }
+  }
+}
+
+// 加载分类列表
+const loadCategories = async () => {
+  try {
+    const res = await getCategoryList()
+    if (res.success) {
+      categories.value = res.data || []
+    }
+  } catch (error) {
+    console.error('获取分类列表失败:', error)
+  }
+}
+
+// 格式化日期时间
+const formatDateTime = (dateStr) => {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  return date.toLocaleString('zh-CN', { 
+    year: 'numeric', 
+    month: '2-digit', 
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  })
+}
+
+// 选择分类
+const selectClassify = (classify) => {
+  formData.value.classify = classify
+}
+
+// 确认选择交易类型
+const handleConfirmType = ({ selectedOptions }) => {
+  formData.value.type = selectedOptions[0].value
+  showTypePicker.value = false
+}
+
+// 新增分类
+const addNewClassify = async () => {
+  if (!newClassify.value.trim()) {
+    showToast('请输入分类名称')
+    return
+  }
+  
+  try {
+    const categoryName = newClassify.value.trim()
+    
+    const response = await createCategory({
+      name: categoryName,
+      type: formData.value.type
+    })
+    
+    if (response.success) {
+      showToast('分类创建成功')
+      await loadCategories()
+      formData.value.classify = categoryName
+    } else {
+      showToast(response.message || '创建分类失败')
+    }
+  } catch (error) {
+    console.error('创建分类出错:', error)
+    showToast('创建分类失败')
+  } finally {
+    newClassify.value = ''
+    showAddClassify.value = false
+  }
+}
+
+// 清空分类
+const clearClassify = () => {
+  formData.value.classify = ''
+}
+
+// 保存
+const handleSave = async () => {
+  try {
+    await formRef.value?.validate()
+    
+    saving.value = true
+    
+    const res = await updateTransaction({
+      id: formData.value.id,
+      amount: formData.value.amount,
+      balance: formData.value.balance,
+      type: formData.value.type,
+      classify: formData.value.classify || ''
+    })
+    
+    if (res.success) {
+      showSuccessToast('保存成功')
+      visible.value = false
+      emit('saved', formData.value)
+    } else {
+      showToast(res.message || '保存失败')
+    }
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('保存失败:', error)
+      showToast(error.message || '保存失败')
+    }
+  } finally {
+    saving.value = false
+  }
+}
+
+// 处理弹窗关闭
+const handleClosed = () => {
+  formRef.value?.resetValidation()
+}
+</script>
+
+<style scoped>
+.transaction-detail-dialog {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-header {
+  padding: 20px 16px 12px;
+  border-bottom: 1px solid var(--van-border-color, #ebedf0);
+}
+
+.dialog-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  text-align: center;
+}
+
+.dialog-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 0;
+}
+
+.dialog-footer {
+  padding: 12px 16px;
+  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid var(--van-border-color, #ebedf0);
+}
+
+.classify-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px 16px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.classify-btn {
+  flex: 0 0 auto;
+  min-width: 70px;
+  border-radius: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dialog-header,
+  .dialog-footer {
+    border-color: var(--van-border-color, #3a3a3a);
+  }
+}
+</style>
--- a/Web/src/views/CalendarView.vue
+++ b/Web/src/views/CalendarView.vue
@@ -12,44 +12,27 @@
    />

    <!-- 日期交易列表弹出层 -->
-    <van-popup
-      v-model:show="listVisible"
-      position="bottom"
-      :style="{ height: '85%' }"
-      round
+    <PopupContainer
+      v-model="listVisible"
+      :title="selectedDateText"
+      :subtitle="getBalance(dateTransactions)"
+      height="85%"
    >
-      <div class="popup-container">
-        <div class="popup-header-fixed">
-          <van-icon 
-            name="cross" 
-            class="close-icon" 
-            @click="listVisible = false"
-          />
-          <h3 class="date-title">{{ selectedDateText }}</h3>
-          <div class="header-stats">
-            <p v-if="dateTransactions.length">
-              共 {{ dateTransactions.length }} 笔交易，
-              <span v-html="getBalance(dateTransactions)" />
-            </p>
-            <SmartClassifyButton 
-              ref="smartClassifyButtonRef"
-              :transactions="dateTransactions"
-              @save="onSmartClassifySave"
-            />
-          </div>
-        </div>
-
-      <div class="popup-scroll-content">
-        <TransactionList
+      <template #header-actions>
+        <SmartClassifyButton 
+          ref="smartClassifyButtonRef"
          :transactions="dateTransactions"
-          :loading="listLoading"
-          :finished="true"
-          :show-delete="false"
-          @click="viewDetail"
+          @save="onSmartClassifySave"
        />
-      </div>
-      </div>
-    </van-popup>
+      </template>
+      <TransactionList
+        :transactions="dateTransactions"
+        :loading="listLoading"
+        :finished="true"
+        :show-delete="false"
+        @click="viewDetail"
+      />
+    </PopupContainer>

    <!-- 交易详情组件 -->
    <TransactionDetail
@@ -68,6 +51,7 @@ import { getTransactionDetail, getTransactionsByDate } from "@/api/transactionRe
 import TransactionList from "@/components/TransactionList.vue";
 import TransactionDetail from "@/components/TransactionDetail.vue";
 import SmartClassifyButton from "@/components/SmartClassifyButton.vue";
+import PopupContainer from "@/components/PopupContainer.vue";

 const dailyStatistics = ref({});
 const listVisible = ref(false);
@@ -161,9 +145,9 @@ const getBalance = (transactions) => {
  });

  if(balance >= 0) {
-    return `结余<span style="color: var(--van-tag-success-color);">收入 ${balance.toFixed(1)} 元</span>`;
+    return `结余收入 ${balance.toFixed(1)} 元`;
  } else {
-    return `结余<span style="color: var(--van-tag-danger-color);">支出 ${(-balance).toFixed(1)} 元</span>`;
+    return `结余支出 ${(-balance).toFixed(1)} 元`;
  }
 };

@@ -300,45 +284,4 @@ fetchDailyStatistics(now.getFullYear(), now.getMonth() + 1);
  background: transparent !important;
 }

-/* 弹窗头部样式 */
-.popup-header-fixed {
-  padding: 16px;
-  position: relative;
-}
-
-.close-icon {
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  font-size: 18px;
-  color: #969799;
-  cursor: pointer;
-  z-index: 10;
-}
-
-.date-title {
-  text-align: center;
-  margin: 0 0 12px;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.header-stats {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-}
-
-.header-stats p {
-  flex: 1;
-  margin: 0;
-  font-size: 14px;
-  color: #646566;
-}
-
-.popup-scroll-content {
-  padding-top: 8px;
-}
-
 </style>
--- a/Web/src/views/ClassificationBatch.vue
+++ b/Web/src/views/ClassificationBatch.vue
@@ -9,14 +9,13 @@
    />

    <div class="scroll-content">
-    <!-- 未分类账单统计 -->
-    <div class="unclassified-stat">
-      <span>未分类账单数: {{ unclassifiedCount }}</span>
-    </div>
+      <!-- 未分类账单统计 -->
+      <div class="unclassified-stat">
+        <span>未分类账单数: {{ unclassifiedCount }}</span>
+      </div>

-    <!-- 分组列表 -->
-    <div>
-      <van-empty v-if="reasonGroups.length === 0 && !listLoading && finished" description="暂无数据" />
+      <!-- 分组列表 -->
+      <van-empty v-if="!hasData && finished" description="暂无数据" />
      
      <van-list
        v-model:loading="listLoading"
@@ -26,264 +25,31 @@
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
-        <van-cell-group inset>
-          <van-cell 
-            v-for="group in reasonGroups" 
-            :key="group.reason"
-            clickable
-            @click="handleSelectGroup(group)"
-          >
-            <template #title>
-              <div class="group-title">
-                {{ group.reason }}
-              </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>
-            <template #right-icon>
-              <van-icon name="arrow" />
-            </template>
-          </van-cell>
-        </van-cell-group>
+        <ReasonGroupList
+          ref="groupListRef"
+          @data-loaded="handleDataLoaded"
+          @data-changed="handleDataChanged"
+        />
      </van-list>
    </div>
-
-    <!-- 批量设置对话框 -->
-    <van-dialog
-      v-model:show="showSettingDialog"
-      title="批量设置分类"
-      :show-cancel-button="true"
-      @confirm="handleConfirmUpdate"
-      @cancel="resetForm"
-    >
-      <van-form ref="formRef" class="setting-form">
-        <van-cell-group inset>
-          <!-- 显示选中的摘要 -->
-          <van-field
-            :model-value="selectedGroup?.reason"
-            label="交易摘要"
-            readonly
-            input-align="left"
-          />
-          
-          <!-- 显示记录数量 -->
-          <van-field
-            :model-value="`${selectedGroup?.count || 0} 条`"
-            label="记录数量"
-            readonly
-            input-align="left"
-          />
-
-          <!-- 交易类型选择 -->
-          <van-field
-            v-model="form.typeName"
-            is-link
-            readonly
-            name="type"
-            label="交易类型"
-            placeholder="请选择交易类型"
-            @click="showTypePicker = true"
-            :rules="[{ required: true, message: '请选择交易类型' }]"
-          />
-
-          <!-- 分类选择 -->
-          <van-field name="classify" label="分类">
-            <template #input>
-              <span v-if="!form.classify" style="opacity: 0.4;">请选择分类</span>
-              <span v-else>{{ form.classify }}</span>
-            </template>
-          </van-field>
-          
-          <!-- 分类按钮网格 -->
-          <div class="classify-buttons">
-            <van-button
-              v-for="item in classifyOptions"
-              :key="item.id"
-              :type="form.classify === item.text ? 'primary' : 'default'"
-              size="small"
-              class="classify-btn"
-              @click="selectClassify(item.text)"
-            >
-              {{ item.text }}
-            </van-button>
-            <van-button
-              type="success"
-              size="small"
-              class="classify-btn"
-              @click="showAddClassify = true"
-            >
-              + 新增
-            </van-button>
-            <van-button
-              v-if="form.classify"
-              type="warning"
-              size="small"
-              class="classify-btn"
-              @click="clearClassify"
-            >
-              清空
-            </van-button>
-          </div>
-        </van-cell-group>
-      </van-form>
-    </van-dialog>
-
-    <!-- 交易类型选择器 -->
-    <van-popup v-model:show="showTypePicker" position="bottom" round>
-      <van-picker
-        show-toolbar
-        :columns="typeOptions"
-        @confirm="handleConfirmType"
-        @cancel="showTypePicker = false"
-      />
-    </van-popup>
-
-    <!-- 新增分类对话框 -->
-    <van-dialog 
-      v-model:show="showAddClassify" 
-      title="新增交易分类" 
-      show-cancel-button
-      @confirm="addNewClassify"
-    >
-      <van-field v-model="newClassify" placeholder="请输入新的交易分类" />
-    </van-dialog>
-    </div>
  </div>
 </template>

 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { 
-  showSuccessToast, 
-  showToast, 
-  showLoadingToast, 
-  closeToast,
-  showConfirmDialog
-} from 'vant'
-import { getReasonGroups, batchUpdateByReason, getUnclassifiedCount } from '@/api/transactionRecord'
-import { getCategoryList, createCategory } from '@/api/transactionCategory'
+import { getUnclassifiedCount } from '@/api/transactionRecord'
+import ReasonGroupList from '@/components/ReasonGroupList.vue'

 const router = useRouter()
-
-// 交易类型选项
-const typeOptions = [
-  { text: '支出', value: 0 },
-  { text: '收入', value: 1 },
-  { text: '不计收支', value: 2 }
-]
+const groupListRef = ref(null)

 // 数据状态
 const listLoading = ref(false)
 const error = ref(false)
 const finished = ref(false)
-const reasonGroups = ref([])
-const categories = ref([])
-const pageIndex = ref(1)
-const pageSize = 20
+const hasData = ref(false)
 const unclassifiedCount = ref(0)
-const total = ref(0)
-
-// 对话框状态
-const showSettingDialog = ref(false)
-const showTypePicker = ref(false)
-const showAddClassify = ref(false)
-
-// 表单状态
-const formRef = ref(null)
-const selectedGroup = ref(null)
-const newClassify = ref('')
-const form = ref({
-  type: null,
-  typeName: '',
-  classify: ''
-})
-
-// 根据选中的类型过滤分类选项
-const classifyOptions = computed(() => {
-  if (form.value.type === null) return []
-  return categories.value
-    .filter(c => c.type === form.value.type)
-    .map(c => ({ text: c.name, value: c.name, id: c.id }))
-})
-
-// 监听交易类型变化，重新加载分类
-watch(() => form.value.type, (newVal) => {
-  // 清空已选的分类
-  form.value.classify = ''
-  // 重新加载对应类型的分类列表
-  loadCategories(newVal)
-})
-
-// 获取类型名称
-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 loadReasonGroups = async () => {
-  try {
-    const res = await getReasonGroups(pageIndex.value, pageSize)
-    if (res.success) {
-      const newData = res.data || []
-      reasonGroups.value = [...reasonGroups.value, ...newData]
-      total.value = res.total || 0
-      
-      // 判断是否还有更多数据
-      if (reasonGroups.value.length >= total.value) {
-        finished.value = true
-      }
-      
-      // 加载成功后，页码+1，为下次加载做准备
-      pageIndex.value++
-      
-      error.value = false
-    } else {
-      error.value = true
-      showToast(res.message || '获取分组数据失败')
-    }
-  } catch (err) {
-    console.error('获取分组数据失败:', err)
-    error.value = true
-    showToast('获取分组数据失败')
-  }
-}

 // 获取未分类账单统计
 const loadUnclassifiedCount = async () => {
@@ -297,233 +63,62 @@ const loadUnclassifiedCount = async () => {
  }
 }

+// 处理数据加载完成
+const handleDataLoaded = ({ groups, total, finished: isFinished }) => {
+  hasData.value = groups.length > 0
+  finished.value = isFinished
+}
+
+// 处理数据变更
+const handleDataChanged = async () => {
+  await loadUnclassifiedCount()
+}
+
 // 加载更多
 const onLoad = async () => {
-  await loadReasonGroups()
-  
-  // 首次加载时获取统计信息
-  if (pageIndex.value === 2) {
-    await loadUnclassifiedCount()
-  }
-  
-  listLoading.value = false
-}
-
-// 获取所有分类
-const loadCategories = async (type = null) => {
-  try {
-    const res = await getCategoryList(type)
-    if (res.success) {
-      categories.value = res.data || []
-    }
-  } catch (error) {
-    console.error('获取分类列表失败:', error)
-  }
-}
-
-// 选择分组
-const handleSelectGroup = (group) => {
-  selectedGroup.value = group
-  form.value = {
-    type: group.sampleType,
-    typeName: getTypeName(group.sampleType),
-    classify: group.sampleClassify
-  }
-  // 加载对应类型的分类列表
-  loadCategories(group.sampleType)
-  showSettingDialog.value = true
-}
-
-// 选择分类
-const selectClassify = (classify) => {
-  form.value.classify = classify
-}
-
-// 确认选择交易类型
-const handleConfirmType = ({ selectedOptions }) => {
-  form.value.type = selectedOptions[0].value
-  form.value.typeName = selectedOptions[0].text
-  showTypePicker.value = false
-}
-
-// 新增分类
-const addNewClassify = async () => {
-  if (!newClassify.value.trim()) {
-    showToast('请输入分类名称')
-    return
-  }
-  
-  if (form.value.type === null) {
-    showToast('请先选择交易类型')
+  if (!groupListRef.value) {
+    listLoading.value = false
    return
  }
  
  try {
-    const categoryName = newClassify.value.trim()
+    await groupListRef.value.loadData()
    
-    // 调用API创建分类
-    const response = await createCategory({
-      name: categoryName,
-      type: form.value.type
-    })
-    
-    if (response.success) {
-      showToast('分类创建成功')
-      // 重新加载分类列表
-      await loadCategories(form.value.type)
-      form.value.classify = categoryName
-    } else {
-      showToast(response.message || '创建分类失败')
-    }
-  } catch (error) {
-    console.error('创建分类出错:', error)
-    showToast('创建分类失败')
-  } finally {
-    newClassify.value = ''
-    showAddClassify.value = false
-  }
-}
-
-// 清空分类
-const clearClassify = () => {
-  form.value.classify = ''
-  showToast('已清空分类')
-}
-
-// 确认批量更新
-const handleConfirmUpdate = async () => {
-  try {
-    // 表单验证
-    await formRef.value?.validate()
-    
-    // 二次确认
-    await showConfirmDialog({
-      title: '确认批量设置',
-      message: `确定要将「${selectedGroup.value.reason}」的 ${selectedGroup.value.count} 条记录设置为「${form.value.typeName} - ${form.value.classify}」吗？`
-    })
-
-    showLoadingToast({
-      message: '更新中...',
-      forbidClick: true,
-      duration: 0
-    })
-
-    const res = await batchUpdateByReason({
-      reason: selectedGroup.value.reason,
-      type: form.value.type,
-      classify: form.value.classify
-    })
-
-    closeToast()
-
-    if (res.success) {
-      showSuccessToast(res.message || `成功更新 ${res.data} 条记录`)
-      showSettingDialog.value = false
-      resetForm()
-      // 重新加载数据
-      reasonGroups.value = []
-      pageIndex.value = 1
-      finished.value = false
-      listLoading.value = true
-      await loadReasonGroups()
+    // 首次加载时获取统计信息
+    if (!hasData.value) {
      await loadUnclassifiedCount()
-      listLoading.value = false
-    } else {
-      showToast(res.message || '批量更新失败')
-    }
-  } catch (error) {
-    closeToast()
-    if (error !== 'cancel') {
-      console.error('批量更新失败:', error)
-      showToast(error.message || '批量更新失败')
    }
+    
+    error.value = false
+  } catch (err) {
+    error.value = true
+  } finally {
+    listLoading.value = false
  }
 }

-// 重置表单
-const resetForm = () => {
-  selectedGroup.value = null
-  form.value = {
-    type: null,
-    typeName: '',
-    classify: ''
-  }
-  formRef.value?.resetValidation()
-}
-
 // 返回上一页
 const handleBack = () => {
  router.back()
 }

 // 页面加载
-onMounted(() => {
-  // onLoad 会自动触发首次加载
+onMounted(async () => {
+  // 初始加载数据
+  listLoading.value = true
+  await onLoad()
 })
 </script>

 <style scoped>
-.loading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 200px;
-}
-
-.group-title {
-  font-size: 15px;
-  font-weight: 500;
-  margin-bottom: 4px;
-}
-
-.group-info {
-  align-items: center;
-  margin-top: 4px;
-}
-
-.count-text {
-  font-size: 13px;
-  opacity: 0.6;
-}
-
-.amount-text {
-  font-size: 14px;
-  font-weight: 500;
-  color: #ff976a;
-}
-
 .unclassified-stat {
  padding-left: 16px;
  padding-top: 12px;
  font-size: 14px;
  font-weight: 500;
-  opacity: 0.83px;
  opacity: 0.6;
 }

-.setting-form {
-  padding: 16px 0;
-}
-
-.classify-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 12px 16px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.classify-btn {
-  flex: 0 0 auto;
-  min-width: 70px;
-  border-radius: 16px;
-}
-
-:deep(.van-cell-group--inset) {
-  margin: 16px;
-}
-
 /* 设置页面容器背景色 */
 :deep(.van-nav-bar) {
  background: transparent !important;
--- a/Web/src/views/ClassificationNLP.vue
+++ b/Web/src/views/ClassificationNLP.vue
@@ -59,19 +59,12 @@
    />

    <!-- 记录列表弹窗 -->
-    <van-popup 
-      v-model:show="showRecordsList" 
-      position="bottom" 
-      :style="{ height: '80%' }"
-      round
-      closeable
+    <PopupContainer
+      v-model="showRecordsList"
+      title="交易记录列表"
+      height="80%"
    >
-      <div class="popup-container">
-        <div class="popup-header-fixed">
-          <h3>交易记录列表</h3>
-        </div>
-        
-        <div class="popup-scroll-content" style="background: var(--van-background, #f7f8fa);">
+      <div style="background: var(--van-background, #f7f8fa);">
        <!-- 批量操作按钮 -->
        <div class="batch-actions">
          <van-button 
@@ -114,9 +107,8 @@
            :show-delete="false"
          />
        </div>
-        </div>
      </div>
-    </van-popup>
+    </PopupContainer>
  </div>
 </template>

@@ -127,6 +119,7 @@ import { showToast, showConfirmDialog } from 'vant'
 import { nlpAnalysis, batchUpdateClassify } from '@/api/transactionRecord'
 import TransactionList from '@/components/TransactionList.vue'
 import TransactionDetail from '@/components/TransactionDetail.vue'
+import PopupContainer from '@/components/PopupContainer.vue'

 const router = useRouter()
 const userInput = ref('')
--- a/Web/src/views/ClassificationSmart.vue
+++ b/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;
--- a/Web/src/views/EmailRecord.vue
+++ b/Web/src/views/EmailRecord.vue
@@ -118,28 +118,19 @@
    </van-popup>

    <!-- 账单列表弹出层 -->
-    <van-popup 
-      v-model:show="transactionListVisible" 
-      position="bottom"
-      :style="{ height: '70%' }"
-      round
-      closeable
+    <PopupContainer
+      v-model="transactionListVisible"
+      title="关联账单列表"
+      height="70%"
    >
-      <div class="popup-container">
-        <div class="popup-header-fixed">
-          <h3>关联账单列表</h3>
-        </div>
-        <div class="popup-scroll-content">
-          <TransactionList
-            :transactions="transactionList"
-            :loading="false"
-            :finished="true"
-            :show-delete="false"
-            @click="handleTransactionClick"
-          />
-        </div>
-      </div>
-    </van-popup>
+      <TransactionList
+        :transactions="transactionList"
+        :loading="false"
+        :finished="true"
+        :show-delete="false"
+        @click="handleTransactionClick"
+      />
+    </PopupContainer>

    <!-- 账单详情编辑弹出层 -->
    <TransactionDetail
@@ -158,6 +149,7 @@ import { getEmailList, getEmailDetail, deleteEmail, refreshTransactionRecords, s
 import { getTransactionDetail } from '@/api/transactionRecord'
 import TransactionList from '@/components/TransactionList.vue'
 import TransactionDetail from '@/components/TransactionDetail.vue'
+import PopupContainer from '@/components/PopupContainer.vue'

 const emailList = ref([])
 const loading = ref(false)
--- a/Web/src/views/MessageView.vue
+++ b/Web/src/views/MessageView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container-flex message-page">
+  <div class="page-container-flex">
    <van-nav-bar title="消息中心">
      <template #right>
        <van-icon name="passed" size="18" @click="handleMarkAllRead" />
@@ -42,23 +42,17 @@
    </van-pull-refresh>

    <!-- 详情弹出层 -->
-    <van-popup 
-      v-model:show="detailVisible" 
-      position="bottom"
-      :style="{ height: '50%' }"
-      round
-      closeable
+    <PopupContainer
+      v-model="detailVisible"
+      :title="currentMessage.title"
+      :subtitle="currentMessage.createTime"
+      height="50%"
+      :closeable="true"
    >
-      <div class="popup-container">
-        <div class="popup-header-fixed">
-          <h3>{{ currentMessage.title }}</h3>
-          <p class="detail-time">{{ currentMessage.createTime }}</p>
-        </div>
-        <div class="popup-scroll-content detail-content">
-          {{ currentMessage.content }}
-        </div>
+      <div class="detail-content">
+        {{ currentMessage.content }}
      </div>
-    </van-popup>
+    </PopupContainer>
  </div>
 </template>

@@ -67,6 +61,7 @@ import { ref, onMounted } from 'vue';
 import { showToast, showDialog } from 'vant';
 import { getMessageList, markAsRead, deleteMessage, markAllAsRead } from '@/api/message';
 import { useMessageStore } from '@/stores/message';
+import PopupContainer from '@/components/PopupContainer.vue';

 const messageStore = useMessageStore();
 const list = ref([]);
@@ -204,16 +199,11 @@ onMounted(() => {
 </script>

 <style scoped>
-.message-page {
-  background-color: var(--van-background-2);
-}
-
 .message-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
-  background-color: var(--van-background);
  cursor: pointer;
 }

@@ -277,4 +267,15 @@ onMounted(() => {
  color: var(--van-text-color);
  white-space: pre-wrap;
 }
+
+:deep(.van-pull-refresh) {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 设置页面容器背景色 */
+:deep(.van-nav-bar) {
+  background: transparent !important;
+}
 </style>
--- a/Web/src/views/PeriodicRecord.vue
+++ b/Web/src/views/PeriodicRecord.vue
@@ -85,20 +85,12 @@
    </div>

    <!-- 新增/编辑弹窗 -->
-    <van-popup 
-      v-model:show="dialogVisible" 
-      position="bottom"
-      :style="{ height: '85%' }"
-      round
-      closeable
+    <PopupContainer
+      v-model="dialogVisible"
+      :title="isEdit ? '编辑周期账单' : '新增周期账单'"
+      height="85%"
    >
-      <div class="popup-container">
-        <div class="popup-header-fixed">
-          <h3>{{ isEdit ? '编辑周期账单' : '新增周期账单' }}</h3>
-        </div>
-        
-        <div class="popup-scroll-content">
-        <van-form @submit="onSubmit">
+      <van-form @submit="onSubmit">
          <van-cell-group inset title="周期设置">
            <van-field
              v-model="form.periodicTypeText"
@@ -235,9 +227,7 @@
            </van-button>
          </div>
        </van-form>
-        </div>
-      </div>
-    </van-popup>
+    </PopupContainer>

    <!-- 交易类型选择器 -->
    <van-popup v-model:show="showTypePicker" position="bottom" round>
@@ -299,6 +289,7 @@ import {
  togglePeriodicEnabled
 } from '@/api/transactionPeriodic'
 import { getCategoryList, createCategory } from '@/api/transactionCategory'
+import PopupContainer from '@/components/PopupContainer.vue'

 const router = useRouter()
 const navTitle = ref('周期账单')
--- a/Web/src/views/StatisticsView.vue
+++ b/Web/src/views/StatisticsView.vue
@@ -277,40 +277,31 @@
    </van-popup>

    <!-- 分类账单列表弹出层 -->
-    <van-popup
-      v-model:show="billListVisible"
-      position="bottom"
-      :style="{ height: '85%' }"
-      round
-      closeable
+    <PopupContainer
+      v-model="billListVisible"
+      :title="selectedCategoryTitle"
+      :subtitle="categoryBillsTotal ? `共 ${categoryBillsTotal} 笔交易` : ''"
+      height="85%"
    >
-      <div class="popup-container">
-        <div class="popup-header-fixed">
-          <h3 class="category-title">{{ selectedCategoryTitle }}</h3>
-          <div class="header-stats">
-            <p v-if="categoryBillsTotal">共 {{ categoryBillsTotal }} 笔交易</p>
-            <SmartClassifyButton
-              ref="smartClassifyButtonRef"
-              v-if="isUnclassified"
-              :transactions="categoryBills"
-              :onBeforeClassify="beforeSmartClassify"
-              @save="onSmartClassifySave"
-            />
-          </div>
-        </div>
-
-        <div class="popup-scroll-content">
-          <TransactionList
-            :transactions="categoryBills"
-            :loading="billListLoading"
-            :finished="billListFinished"
-            :show-delete="false"
-            @load="loadCategoryBills"
-            @click="viewBillDetail"
-          />
-        </div>
-      </div>
-    </van-popup>
+      <template #header-actions>
+        <SmartClassifyButton
+          ref="smartClassifyButtonRef"
+          v-if="isUnclassified"
+          :transactions="categoryBills"
+          :onBeforeClassify="beforeSmartClassify"
+          @save="onSmartClassifySave"
+        />
+      </template>
+      
+      <TransactionList
+        :transactions="categoryBills"
+        :loading="billListLoading"
+        :finished="billListFinished"
+        :show-delete="false"
+        @load="loadCategoryBills"
+        @click="viewBillDetail"
+      />
+    </PopupContainer>

    <!-- 交易详情编辑组件 -->
    <TransactionDetail
@@ -330,6 +321,7 @@ import { getTransactionList, getTransactionDetail } from '@/api/transactionRecor
 import TransactionList from '@/components/TransactionList.vue'
 import TransactionDetail from '@/components/TransactionDetail.vue'
 import SmartClassifyButton from '@/components/SmartClassifyButton.vue'
+import PopupContainer from '@/components/PopupContainer.vue'

 const router = useRouter()

@@ -1147,44 +1139,4 @@ onActivated(() => {
  background: transparent !important;
 }

-/* 弹出层样式 */
-.popup-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.popup-header-fixed {
-  padding: 16px;
-  position: relative;
-}
-
-.category-title {
-  text-align: center;
-  margin: 0 0 12px;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.header-stats {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-}
-
-.header-stats p {
-  margin: 0;
-  font-size: 13px;
-  color: var(--van-text-color-2);
-  flex: 1;
-}
-
-.popup-scroll-content {
-  flex: 1;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
 </style>
--- a/Web/src/views/TransactionsRecord.vue
+++ b/Web/src/views/TransactionsRecord.vue
@@ -29,83 +29,73 @@
    />

    <!-- 新增交易记录弹出层 -->
-    <van-popup 
-      v-model:show="addDialogVisible" 
-      position="bottom"
-      :style="{ height: '85%' }"
-      round
-      closeable
+    <PopupContainer
+      v-model="addDialogVisible"
+      title="手动录账单"
+      height="85%"
    >
-      <div class="popup-container">
-        <div class="popup-header-fixed">
-          <h3>手动录账单</h3>
-        </div>
-        
-        <div class="popup-scroll-content">
-        <van-form @submit="onAddSubmit">
-          <van-cell-group inset title="基本信息">
-            <van-field
-              v-model="addForm.occurredAt"
-              is-link
-              readonly
-              name="occurredAt"
-              label="交易时间"
-              placeholder="请选择交易时间"
-              @click="showDateTimePicker = true"
-              :rules="[{ required: true, message: '请选择交易时间' }]"
-            />
-          </van-cell-group>
+      <van-form @submit="onAddSubmit">
+        <van-cell-group inset title="基本信息">
+          <van-field
+            v-model="addForm.occurredAt"
+            is-link
+            readonly
+            name="occurredAt"
+            label="交易时间"
+            placeholder="请选择交易时间"
+            @click="showDateTimePicker = true"
+            :rules="[{ required: true, message: '请选择交易时间' }]"
+          />
+        </van-cell-group>

-          <van-cell-group inset title="交易明细">
-            <van-field
-              v-model="addForm.reason"
-              name="reason"
-              label="交易摘要"
-              placeholder="请输入交易摘要"
-              type="textarea"
-              rows="2"
-              autosize
-              maxlength="200"
-              show-word-limit
-            />
-            <van-field
-              v-model="addForm.amount"
-              name="amount"
-              label="交易金额"
-              placeholder="请输入交易金额"
-              type="number"
-              :rules="[{ required: true, message: '请输入交易金额' }]"
-            />
-            <van-field
-              v-model="addForm.typeText"
-              is-link
-              readonly
-              name="type"
-              label="交易类型"
-              placeholder="请选择交易类型"
-              @click="showAddTypePicker = true"
-              :rules="[{ required: true, message: '请选择交易类型' }]"
-            />
-            <van-field
-              v-model="addForm.classify"
-              is-link
-              readonly
-              name="classify"
-              label="交易分类"
-              placeholder="请选择或输入交易分类"
-              @click="showAddClassifyPicker = true"
-            />
-          </van-cell-group>
+        <van-cell-group inset title="交易明细">
+          <van-field
+            v-model="addForm.reason"
+            name="reason"
+            label="交易摘要"
+            placeholder="请输入交易摘要"
+            type="textarea"
+            rows="2"
+            autosize
+            maxlength="200"
+            show-word-limit
+          />
+          <van-field
+            v-model="addForm.amount"
+            name="amount"
+            label="交易金额"
+            placeholder="请输入交易金额"
+            type="number"
+            :rules="[{ required: true, message: '请输入交易金额' }]"
+          />
+          <van-field
+            v-model="addForm.typeText"
+            is-link
+            readonly
+            name="type"
+            label="交易类型"
+            placeholder="请选择交易类型"
+            @click="showAddTypePicker = true"
+            :rules="[{ required: true, message: '请选择交易类型' }]"
+          />
+          <van-field
+            v-model="addForm.classify"
+            is-link
+            readonly
+            name="classify"
+            label="交易分类"
+            placeholder="请选择或输入交易分类"
+            @click="showAddClassifyPicker = true"
+          />
+        </van-cell-group>

-          <div style="margin: 16px;">
-            <van-button round block type="primary" native-type="submit" :loading="addSubmitting">
-              确认添加
-            </van-button>
-          </div>
-        </van-form>
+        <div style="margin: 16px;">
+          <van-button round block type="primary" native-type="submit" :loading="addSubmitting">
+            确认添加
+          </van-button>
        </div>
-      </div>
-    </van-popup>
+      </van-form>
+    </PopupContainer>

    <!-- 新增交易 - 日期时间选择器 -->
    <van-popup v-model:show="showDateTimePicker" position="bottom" round>
@@ -182,6 +172,7 @@ import {
 import { getCategoryList, createCategory } from '@/api/transactionCategory'
 import TransactionList from '@/components/TransactionList.vue'
 import TransactionDetail from '@/components/TransactionDetail.vue'
+import PopupContainer from '@/components/PopupContainer.vue'

 const transactionList = ref([])
 const loading = ref(false)
--- a/WebApi/Controllers/JobController.cs
+++ b/WebApi/Controllers/JobController.cs
@@ -1,5 +1,4 @@
 using Microsoft.AspNetCore.Authorization;
-using Microsoft.AspNetCore.Mvc;
 using Quartz;

 namespace WebApi.Controllers;
--- a/WebApi/Controllers/TransactionRecordController.cs
+++ b/WebApi/Controllers/TransactionRecordController.cs
@@ -24,6 +24,7 @@ public class TransactionRecordController(
        [FromQuery] int? type = null,
        [FromQuery] int? year = null,
        [FromQuery] int? month = null,
+        [FromQuery] string? reason = null,
        [FromQuery] bool sortByAmount = false
    )
    {
@@ -38,13 +39,15 @@ public class TransactionRecordController(
                transactionType,
                year,
                month,
+                reason,
                sortByAmount);
            var total = await transactionRepository.GetTotalCountAsync(
                searchKeyword,
                classify,
                transactionType,
                year,
-                month);
+                month,
+                reason);

            return new PagedResponse<TransactionRecord>
            {