feat: 统一交易详情组件，替换为 TransactionDetailSheet，增强功能并删除旧组件

Web/src/App.vue

@@ -150,7 +150,8 @@ const isShowAddBill = computed(() => {
     route.path === '/' ||
     route.path === '/balance' ||
     route.path === '/message' ||
-    route.path === '/calendar-v2'
+    route.path === '/calendar-v2' ||
+    route.path === '/statistics-v2'
   )
 })
 

Web/src/components/Common/ReasonGroupList.vue

@@ -99,10 +99,11 @@
     </PopupContainerV2>
 
     <!-- 账单详情弹窗 -->
-    <TransactionDetail
+    <TransactionDetailSheet
       v-model:show="showTransactionDetail"
       :transaction="selectedTransaction"
       @save="handleTransactionSaved"
+      @delete="handleGroupTransactionDelete"
     />
 
     <!-- 批量设置对话框 -->
@@ -198,7 +199,7 @@ import { showToast, showSuccessToast, showLoadingToast, closeToast, showConfirmD
 import { getReasonGroups, batchUpdateByReason, getTransactionList } from '@/api/transactionRecord'
 import ClassifySelector from './ClassifySelector.vue'
 import BillListComponent from '@/components/Bill/BillListComponent.vue'
-import TransactionDetail from '@/components/Transaction/TransactionDetail.vue'
+import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
 import PopupContainerV2 from './PopupContainerV2.vue'
 
 const props = defineProps({

Web/src/components/Transaction/TransactionDetail.vue

@@ -1,407 +0,0 @@
-<template>
-  <PopupContainerV2
-    v-model:show="visible"
-    title="交易详情"
-    :height="'75%'"
-  >
-    <div style="padding: 0">
-      <van-form style="margin-top: 12px">
-        <van-cell-group inset>
-          <van-cell
-            title="记录时间"
-            :value="formatDate(transaction.createTime)"
-          />
-        </van-cell-group>
-
-        <van-cell-group
-          inset
-          title="交易明细"
-        >
-          <van-field
-            v-model="occurredAtLabel"
-            name="occurredAt"
-            label="交易时间"
-            readonly
-            is-link
-            placeholder="请选择交易时间"
-            :rules="[{ required: true, message: '请选择交易时间' }]"
-            @click="showDatePicker = true"
-          />
-          <van-field
-            v-model="editForm.reason"
-            name="reason"
-            label="交易摘要"
-            placeholder="请输入交易摘要"
-            type="textarea"
-            rows="2"
-            autosize
-            maxlength="200"
-            show-word-limit
-          />
-          <van-field
-            v-model="editForm.amount"
-            name="amount"
-            label="交易金额"
-            placeholder="请输入交易金额"
-            type="number"
-            :rules="[{ required: true, message: '请输入交易金额' }]"
-          />
-          <van-field
-            v-model="editForm.balance"
-            name="balance"
-            label="交易后余额"
-            placeholder="请输入交易后余额"
-            type="number"
-            :rules="[{ required: true, message: '请输入交易后余额' }]"
-          />
-
-          <van-field
-            name="type"
-            label="交易类型"
-          >
-            <template #input>
-              <van-radio-group
-                v-model="editForm.type"
-                direction="horizontal"
-                @change="handleTypeChange"
-              >
-                <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>
-              <div style="flex: 1">
-                <div
-                  v-if="
-                    transaction &&
-                      transaction.unconfirmedClassify &&
-                      transaction.unconfirmedClassify !== editForm.classify
-                  "
-                  class="suggestion-tip"
-                  @click="applySuggestion"
-                >
-                  <van-icon
-                    name="bulb-o"
-                    class="suggestion-icon"
-                  />
-                  <span class="suggestion-text">
-                    建议: {{ transaction.unconfirmedClassify }}
-                    <span
-                      v-if="
-                        transaction.unconfirmedType !== null &&
-                          transaction.unconfirmedType !== undefined &&
-                          transaction.unconfirmedType !== editForm.type
-                      "
-                    >
-                      ({{ getTypeName(transaction.unconfirmedType) }})
-                    </span>
-                  </span>
-                  <div class="suggestion-apply">
-                    应用
-                  </div>
-                </div>
-                <span
-                  v-else-if="!editForm.classify"
-                  style="color: var(--van-gray-5)"
-                >请选择交易分类</span>
-                <span v-else>{{ editForm.classify }}</span>
-              </div>
-            </template>
-          </van-field>
-
-          <ClassifySelector
-            v-model="editForm.classify"
-            :type="editForm.type"
-            @change="handleClassifyChange"
-          />
-        </van-cell-group>
-      </van-form>
-    </div>
-
-    <template #footer>
-      <van-button
-        round
-        block
-        type="primary"
-        :loading="submitting"
-        @click="onSubmit"
-      >
-        保存修改
-      </van-button>
-    </template>
-  </PopupContainerV2>
-
-  <!-- 日期选择弹窗 -->
-  <van-popup
-    v-model:show="showDatePicker"
-    position="bottom"
-    round
-    teleport="body"
-  >
-    <van-date-picker
-      v-model="currentDate"
-      title="选择日期"
-      @confirm="onConfirmDate"
-      @cancel="showDatePicker = false"
-    />
-  </van-popup>
-
-  <!-- 时间选择弹窗 -->
-  <van-popup
-    v-model:show="showTimePicker"
-    position="bottom"
-    round
-    teleport="body"
-  >
-    <van-time-picker
-      v-model="currentTime"
-      title="选择时间"
-      @confirm="onConfirmTime"
-      @cancel="showTimePicker = false"
-    />
-  </van-popup>
-</template>
-
-<script setup>
-import { ref, reactive, watch, defineProps, defineEmits, computed, nextTick } from 'vue'
-import { showToast } from 'vant'
-import dayjs from 'dayjs'
-import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
-import ClassifySelector from '@/components/Common/ClassifySelector.vue'
-import { updateTransaction } from '@/api/transactionRecord'
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false
-  },
-  transaction: {
-    type: Object,
-    default: null
-  }
-})
-
-const emit = defineEmits(['update:show', 'save'])
-
-const visible = ref(false)
-const submitting = ref(false)
-const isSyncing = ref(false)
-
-// 日期选择相关
-const showDatePicker = ref(false)
-const showTimePicker = ref(false)
-const currentDate = ref([])
-const currentTime = ref([])
-
-// 编辑表单
-const editForm = reactive({
-  id: 0,
-  reason: '',
-  amount: '',
-  balance: '',
-  type: 0,
-  classify: '',
-  occurredAt: ''
-})
-
-// 显示用的日期格式化
-const occurredAtLabel = computed(() => {
-  return formatDate(editForm.occurredAt)
-})
-
-// 监听props变化
-watch(
-  () => props.show,
-  (newVal) => {
-    visible.value = newVal
-  }
-)
-
-watch(
-  () => props.transaction,
-  (newVal) => {
-    if (newVal) {
-      isSyncing.value = true
-      // 填充编辑表单
-      editForm.id = newVal.id
-      editForm.reason = newVal.reason || ''
-      editForm.amount = String(newVal.amount)
-      editForm.balance = String(newVal.balance)
-      editForm.type = newVal.type
-      editForm.classify = newVal.classify || ''
-
-      // 初始化日期时间
-      if (newVal.occurredAt) {
-        editForm.occurredAt = newVal.occurredAt
-        const dt = dayjs(newVal.occurredAt)
-        currentDate.value = dt.format('YYYY-MM-DD').split('-')
-        currentTime.value = dt.format('HH:mm').split(':')
-      }
-
-      // 在下一个 tick 结束同步状态，确保 van-radio-group 的 @change 已触发完毕
-      nextTick(() => {
-        isSyncing.value = false
-      })
-    }
-  }
-)
-
-watch(visible, (newVal) => {
-  emit('update:show', newVal)
-})
-
-// 处理类型切换
-const handleTypeChange = () => {
-  if (!isSyncing.value) {
-    editForm.classify = ''
-  }
-}
-
-// 处理日期确认
-const onConfirmDate = ({ selectedValues }) => {
-  const dateStr = selectedValues.join('-')
-  const timeStr = currentTime.value.join(':')
-  editForm.occurredAt = dayjs(`${dateStr} ${timeStr}`).format('YYYY-MM-DDTHH:mm:ss')
-  showDatePicker.value = false
-  // 接着选时间
-  showTimePicker.value = true
-}
-
-const onConfirmTime = ({ selectedValues }) => {
-  currentTime.value = selectedValues
-  const dateStr = currentDate.value.join('-')
-  const timeStr = selectedValues.join(':')
-  editForm.occurredAt = dayjs(`${dateStr} ${timeStr}`).format('YYYY-MM-DDTHH:mm:ss')
-  showTimePicker.value = false
-}
-
-const applySuggestion = () => {
-  if (props.transaction.unconfirmedClassify) {
-    editForm.classify = props.transaction.unconfirmedClassify
-    if (
-      props.transaction.unconfirmedType !== null &&
-      props.transaction.unconfirmedType !== undefined
-    ) {
-      editForm.type = props.transaction.unconfirmedType
-    }
-  }
-}
-
-const getTypeName = (type) => {
-  const typeMap = {
-    0: '支出',
-    1: '收入',
-    2: '不计'
-  }
-  return typeMap[type] || '未知'
-}
-
-// 提交编辑
-const onSubmit = async () => {
-  try {
-    submitting.value = true
-
-    const data = {
-      id: editForm.id,
-      reason: editForm.reason,
-      amount: parseFloat(editForm.amount),
-      balance: parseFloat(editForm.balance),
-      type: editForm.type,
-      classify: editForm.classify,
-      occurredAt: editForm.occurredAt
-    }
-
-    const response = await updateTransaction(data)
-    if (response.success) {
-      showToast('保存成功')
-      visible.value = false
-      emit('save', data)
-    } else {
-      showToast(response.message || '保存失败')
-    }
-  } catch (error) {
-    console.error('保存出错:', error)
-    showToast('保存失败')
-  } finally {
-    submitting.value = false
-  }
-}
-
-// 分类选择变化
-const handleClassifyChange = () => {
-  if (editForm.id > 0 && editForm.type >= 0) {
-    // 直接保存
-    onSubmit()
-  }
-}
-
-// 清空分类
-const formatDate = (dateString) => {
-  if (!dateString) {
-    return ''
-  }
-  const date = new Date(dateString)
-  return date.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
-</script>
-
-<style scoped>
-.suggestion-tip {
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  padding: 6px 10px;
-  background: var(--van-active-color);
-  color: var(--van-primary-color);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: opacity 0.2s;
-  border: 1px solid var(--van-primary-color);
-  width: fit-content;
-  opacity: 0.1;
-}
-
-.suggestion-tip:active {
-  opacity: 0.2;
-}
-
-.suggestion-icon {
-  margin-right: 4px;
-  font-size: 14px;
-}
-
-.suggestion-text {
-  font-weight: 500;
-}
-
-.suggestion-apply {
-  margin-left: 8px;
-  padding: 0 6px;
-  background: var(--van-primary-color);
-  color: var(--van-white);
-  border-radius: 4px;
-  font-size: 10px;
-  height: 18px;
-  line-height: 18px;
-  font-weight: bold;
-}
-</style>

Web/src/components/Transaction/TransactionDetailSheet.vue

@@ -99,15 +99,40 @@
         <div class="form-label">
           分类
         </div>
-        <div
-          class="form-value clickable"
-          @click="showClassifySelector = !showClassifySelector"
-        >
-          <span v-if="editForm.classify">{{ editForm.classify }}</span>
-          <span
-            v-else
-            class="placeholder"
-          >请选择分类</span>
+        <div class="form-value">
+          <div style="flex: 1">
+            <!-- 建议分类提示 -->
+            <div
+              v-if="showSuggestionTip"
+              class="suggestion-tip"
+              @click="applySuggestion"
+            >
+              <van-icon
+                name="bulb-o"
+                class="suggestion-icon"
+              />
+              <span class="suggestion-text">
+                建议: {{ props.transaction?.unconfirmedClassify }}
+                <span v-if="showSuggestedType">
+                  ({{ getTypeName(props.transaction?.unconfirmedType) }})
+                </span>
+              </span>
+              <div class="suggestion-apply">
+                应用
+              </div>
+            </div>
+            <div
+              v-else
+              class="classify-value clickable"
+              @click="showClassifySelector = !showClassifySelector"
+            >
+              <span v-if="editForm.classify">{{ editForm.classify }}</span>
+              <span
+                v-else
+                class="placeholder"
+              >请选择分类</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -149,26 +174,39 @@
     </template>
   </PopupContainerV2>
 
-  <!-- 日期时间选择器 -->
+  <!-- 日期选择器 -->
   <van-popup
     v-model:show="showDatePicker"
     position="bottom"
     round
   >
-    <van-datetime-picker
-      v-model="currentDateTime"
-      type="datetime"
-      title="选择日期时间"
+    <van-date-picker
+      v-model="currentDate"
+      title="选择日期"
       :min-date="minDate"
       :max-date="maxDate"
-      @confirm="handleDateTimeConfirm"
+      @confirm="onDateConfirm"
       @cancel="showDatePicker = false"
     />
   </van-popup>
+
+  <!-- 时间选择器 -->
+  <van-popup
+    v-model:show="showTimePicker"
+    position="bottom"
+    round
+  >
+    <van-time-picker
+      v-model="currentTime"
+      title="选择时间"
+      @confirm="onTimeConfirm"
+      @cancel="showTimePicker = false"
+    />
+  </van-popup>
 </template>
 
 <script setup>
-import { ref, reactive, watch } from 'vue'
+import { ref, reactive, watch, computed } from 'vue'
 import { showToast, showDialog } from 'vant'
 import dayjs from 'dayjs'
 import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
@@ -192,16 +230,18 @@ const visible = ref(false)
 const saving = ref(false)
 const deleting = ref(false)
 const showDatePicker = ref(false)
+const showTimePicker = ref(false)
 const showClassifySelector = ref(false)
 const isEditingAmount = ref(false)
 
 // 金额输入框引用
 const amountInputRef = ref(null)
 
-// 日期时间选择器配置
+// 日期选择器配置
 const minDate = new Date(2020, 0, 1)
 const maxDate = new Date(2030, 11, 31)
-const currentDateTime = ref(new Date())
+const currentDate = ref(['2024', '01', '01'])
+const currentTime = ref(['00', '00'])
 
 // 编辑表单
 const editForm = reactive({
@@ -213,6 +253,45 @@ const editForm = reactive({
   reason: ''
 })
 
+// 建议分类提示相关
+const showSuggestionTip = computed(() => {
+  const txn = props.transaction
+  return (
+    txn &&
+    txn.unconfirmedClassify &&
+    txn.unconfirmedClassify !== editForm.classify
+  )
+})
+
+const showSuggestedType = computed(() => {
+  const txn = props.transaction
+  return (
+    txn &&
+    txn.unconfirmedType !== null &&
+    txn.unconfirmedType !== undefined &&
+    txn.unconfirmedType !== editForm.type
+  )
+})
+
+const getTypeName = (type) => {
+  const typeMap = {
+    0: '支出',
+    1: '收入',
+    2: '不计'
+  }
+  return typeMap[type] || '未知'
+}
+
+const applySuggestion = () => {
+  const txn = props.transaction
+  if (txn?.unconfirmedClassify) {
+    editForm.classify = txn.unconfirmedClassify
+    if (txn.unconfirmedType !== null && txn.unconfirmedType !== undefined) {
+      editForm.type = txn.unconfirmedType
+    }
+  }
+}
+
 // 监听 props 变化
 watch(
   () => props.show,
@@ -233,9 +312,15 @@ watch(
       editForm.occurredAt = newVal.occurredAt
       editForm.reason = newVal.reason || ''
 
-      // 初始化日期时间
+      // 初始化日期时间选择器
       if (newVal.occurredAt) {
-        currentDateTime.value = new Date(newVal.occurredAt)
+        const dt = dayjs(newVal.occurredAt)
+        currentDate.value = [dt.format('YYYY'), dt.format('MM'), dt.format('DD')]
+        currentTime.value = [dt.format('HH'), dt.format('mm')]
+      } else {
+        const now = dayjs()
+        currentDate.value = [now.format('YYYY'), now.format('MM'), now.format('DD')]
+        currentTime.value = [now.format('HH'), now.format('mm')]
       }
 
       // 收起分类选择器
@@ -298,11 +383,21 @@ const handleClassifyChange = async () => {
   }
 }
 
-// 日期时间确认
-const handleDateTimeConfirm = (value) => {
-  editForm.occurredAt = dayjs(value).format('YYYY-MM-DDTHH:mm:ss')
-  currentDateTime.value = value
+// 日期确认
+const onDateConfirm = ({ selectedValues }) => {
+  currentDate.value = selectedValues
   showDatePicker.value = false
+  // 接着选择时间
+  showTimePicker.value = true
+}
+
+// 时间确认
+const onTimeConfirm = ({ selectedValues }) => {
+  currentTime.value = selectedValues
+  const [year, month, day] = currentDate.value
+  const [hour, minute] = selectedValues
+  editForm.occurredAt = `${year}-${month}-${day}T${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}:00`
+  showTimePicker.value = false
 }
 
 // 保存修改
@@ -549,6 +644,47 @@ const handleDelete = async () => {
   margin: 0 24px 16px;
 }
 
+// 建议分类提示
+.suggestion-tip {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  background: var(--van-active-color);
+  color: var(--van-primary-color);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  border: 1px solid var(--van-primary-color);
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+.suggestion-icon {
+  margin-right: 6px;
+  font-size: 16px;
+}
+
+.suggestion-text {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.suggestion-apply {
+  padding: 2px 10px;
+  background: var(--van-primary-color);
+  color: #fff;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.classify-value {
+  text-align: right;
+}
+
 // 操作按钮
 .actions-section {
   display: flex;
@@ -626,5 +762,9 @@ const handleDelete = async () => {
   .classify-section {
     background: #27272a;
   }
+
+  .suggestion-tip {
+    background: rgba(99, 102, 241, 0.1);
+  }
 }
 </style>

Web/src/views/ClassificationNLP.vue

@@ -64,10 +64,11 @@
     </div>
 
     <!-- 交易详情弹窗 -->
-    <TransactionDetail
+    <TransactionDetailSheet
       v-model:show="showDetail"
       :transaction="currentTransaction"
       @save="handleDetailSave"
+      @delete="handleDetailDelete"
     />
 
     <!-- 记录列表弹窗 -->
@@ -132,7 +133,7 @@ import { useRouter } from 'vue-router'
 import { showToast, showConfirmDialog } from 'vant'
 import { nlpAnalysis, batchUpdateClassify } from '@/api/transactionRecord'
 import BillListComponent from '@/components/Bill/BillListComponent.vue'
-import TransactionDetail from '@/components/Transaction/TransactionDetail.vue'
+import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
 import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
 
 const router = useRouter()
@@ -262,11 +263,15 @@ const handleRecordClick = (transaction) => {
 
 // 详情保存后
 const handleDetailSave = () => {
-  // 详情中的修改已经保存到服务器
-  // 这里可以选择重新分析或者只更新本地显示
   showToast('修改已保存')
 }
 
+// 详情删除后
+const handleDetailDelete = () => {
+  showDetail.value = false
+  showToast('删除成功')
+}
+
 // 提交分类
 const handleSubmit = async () => {
   if (selectedIds.value.size === 0) {

Web/src/views/EmailRecord.vue

@@ -162,11 +162,12 @@
     </PopupContainerV2>
 
     <!-- 账单详情编辑弹出层 -->
-    <TransactionDetail
+    <TransactionDetailSheet
       :show="transactionDetailVisible"
       :transaction="currentTransaction"
       @update:show="transactionDetailVisible = $event"
       @save="handleTransactionSave"
+      @delete="handleTransactionDelete"
     />
   </div>
 </template>
@@ -184,7 +185,7 @@ import {
 } from '@/api/emailRecord'
 import { getTransactionDetail } from '@/api/transactionRecord'
 import BillListComponent from '@/components/Bill/BillListComponent.vue'
-import TransactionDetail from '@/components/Transaction/TransactionDetail.vue'
+import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
 import PopupContainerV2 from '@/components/Common/PopupContainerV2.vue'
 
 const emailList = ref([])

Web/src/views/TransactionsRecord.vue

@@ -43,10 +43,11 @@
     </van-pull-refresh>
 
     <!-- 详情/编辑弹出层 -->
-    <TransactionDetail
+    <TransactionDetailSheet
       v-model:show="detailVisible"
       :transaction="currentTransaction"
       @save="onDetailSave"
+      @delete="handleDelete"
     />
   </div>
 </template>
@@ -56,7 +57,7 @@ import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { showToast } from 'vant'
 import { getTransactionList, getTransactionDetail } from '@/api/transactionRecord'
 import BillListComponent from '@/components/Bill/BillListComponent.vue'
-import TransactionDetail from '@/components/Transaction/TransactionDetail.vue'
+import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
 
 const transactionList = ref([])
 const loading = ref(false)

Web/src/views/UnconfirmedClassification.vue

@@ -91,10 +91,11 @@
     </div>
 
     <!-- 交易详情弹窗 -->
-    <TransactionDetail
+    <TransactionDetailSheet
       v-model:show="showDetail"
       :transaction="currentTransaction"
       @save="handleDetailSave"
+      @delete="handleDetailDelete"
     />
   </div>
 </template>
@@ -104,7 +105,7 @@ import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast, showConfirmDialog } from 'vant'
 import { getUnconfirmedTransactionList, confirmAllUnconfirmed } from '@/api/transactionRecord'
-import TransactionDetail from '@/components/Transaction/TransactionDetail.vue'
+import TransactionDetailSheet from '@/components/Transaction/TransactionDetailSheet.vue'
 import BillListComponent from '@/components/Bill/BillListComponent.vue'
 
 const router = useRouter()
@@ -260,6 +261,10 @@ const handleDetailSave = () => {
   loadData()
 }
 
+const handleDetailDelete = () => {
+  loadData()
+}
+
 onMounted(() => {
   loadData()
 })

Web/src/views/calendarV2/modules/Calendar.vue

@@ -34,6 +34,7 @@
               :aria-label="getAriaLabel(day)"
               @click="onDayClick(day)"
               @touchstart="onTouchStartHoliday($event, day)"
+              @touchmove="onTouchEndHoliday"
               @touchend="onTouchEndHoliday"
             >
               <div