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

.doc/popup-migration-checklist.md

@@ -19,7 +19,7 @@
 | MessageView.vue | 时间戳 (createTime) | 移至内容区域顶部，使用灰色小字 |
 | CategoryBillPopup.vue | 待检查 | 待定 |
 | BudgetChartAnalysis.vue | 待检查 | 待定 |
-| TransactionDetail.vue | 待检查 | 待定 |
+| TransactionDetail.vue | 已删除 | 已被 TransactionDetailSheet.vue 替代 |
 | ReasonGroupList.vue | 待检查 | 待定 |
 
 ### 第三批：带确认/取消按钮

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
+        <div class="form-value">
-          class="form-value clickable"
+          <div style="flex: 1">
-          @click="showClassifySelector = !showClassifySelector"
+            <!-- 建议分类提示 -->
-        >
+            <div
-          <span v-if="editForm.classify">{{ editForm.classify }}</span>
+              v-if="showSuggestionTip"
-          <span
+              class="suggestion-tip"
-            v-else
+              @click="applySuggestion"
-            class="placeholder"
+            >
-          >请选择分类</span>
+              <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
+    <van-date-picker
-      v-model="currentDateTime"
+      v-model="currentDate"
-      type="datetime"
+      title="选择日期"
-      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) => {
+const onDateConfirm = ({ selectedValues }) => {
-  editForm.occurredAt = dayjs(value).format('YYYY-MM-DDTHH:mm:ss')
+  currentDate.value = selectedValues
-  currentDateTime.value = value
   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

openspec/changes/archive/2026-02-21-unify-bill-detail-component/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-02-21

openspec/changes/archive/2026-02-21-unify-bill-detail-component/design.md

@@ -0,0 +1,78 @@
+## Context
+
+当前项目存在两个交易详情组件，视觉样式和功能存在差异：
+
+| 组件 | 使用位置 | 特点 |
+|------|---------|------|
+| `TransactionDetailSheet.vue` | calendarV2, CategoryBillPopup | 简洁卡片式设计，点击金额可编辑，无建议分类提示 |
+| `TransactionDetail.vue` | TransactionsRecord | 传统表单设计，有建议分类提示，支持余额编辑 |
+
+**核心差异**：
+1. 视觉样式：TransactionDetailSheet 更现代简洁
+2. 建议分类提示：仅 TransactionDetail.vue 支持显示 AI 建议的分类
+3. 余额编辑：TransactionDetail.vue 支持余额编辑
+
+## Goals / Non-Goals
+
+**Goals:**
+- 统一所有页面的交易详情视觉样式，使用 TransactionDetailSheet 的设计
+- 保留 TransactionDetail.vue 中的必要功能（建议分类提示）
+- 简化组件维护，减少重复代码
+
+**Non-Goals:**
+- 不修改 API 接口
+- 不修改后端逻辑
+- 不增加新功能（仅整合现有功能）
+
+## Decisions
+
+### 决策 1：选择 TransactionDetailSheet 作为基准组件
+
+**理由**：
+- 视觉设计更现代，用户体验更好
+- 已被 calendarV2（主要入口）和 CategoryBillPopup 使用
+- 代码结构更清晰，使用 Composition API
+
+**替代方案**：
+- 方案 A：合并两个组件为一个，通过 props 控制样式 → 拒绝，增加复杂度
+- 方案 B：保持两个组件分别维护 → 拒绝，维护成本高，用户体验不一致
+
+### 决策 2：将建议分类提示功能迁移到 TransactionDetailSheet
+
+**理由**：
+- 该功能是智能分类体验的核心部分
+- 用户在 TransactionsRecord 页面查看未确认分类的交易时需要此提示
+
+**实现方式**：
+- 在 TransactionDetailSheet 的分类选择区域上方添加建议提示条
+- 点击"应用"后自动填充建议的分类和类型
+
+### 决策 3：删除旧的 TransactionDetail.vue 组件
+
+**理由**：
+- 功能已完全迁移到 TransactionDetailSheet
+- 避免代码冗余和维护负担
+
+## Risks / Trade-offs
+
+| 风险 | 缓解措施 |
+|-----|---------|
+| 用户习惯旧界面样式 | 新界面更简洁直观，学习成本低 |
+| 迁移过程中遗漏功能 | 详细对比两个组件功能，确保无遗漏 |
+| 建议分类提示功能迁移不完整 | 测试未确认分类交易的显示和交互 |
+
+## Migration Plan
+
+1. **Phase 1**: 增强 TransactionDetailSheet
+   - 添加建议分类提示功能
+   - 确保所有功能完整
+
+2. **Phase 2**: 更新 TransactionsRecord 页面
+   - 替换组件引用
+   - 调整事件处理
+
+3. **Phase 3**: 清理
+   - 删除 TransactionDetail.vue
+   - 更新相关文档
+
+**回滚策略**：Git revert 即可，无数据迁移风险

openspec/changes/archive/2026-02-21-unify-bill-detail-component/proposal.md

@@ -0,0 +1,33 @@
+## Why
+
+当前项目中存在两个交易详情组件：`TransactionDetailSheet.vue`（calendarV2 使用）和 `TransactionDetail.vue`（TransactionsRecord 使用），导致用户在不同页面查看交易详情时视觉体验不一致。需要统一为 calendarV2 页面的详情样式，提升用户体验一致性并减少维护成本。
+
+## What Changes
+
+- **统一交易详情组件**：将所有页面的交易详情统一使用 `TransactionDetailSheet.vue` 组件
+- **更新 TransactionsRecord 页面**：将详情组件从 `TransactionDetail.vue` 替换为 `TransactionDetailSheet.vue`
+- **弃用旧组件**：移除不再使用的 `TransactionDetail.vue` 组件
+- **增强 TransactionDetailSheet**：确保组件具备完整功能（余额编辑支持、建议分类提示等）
+
+## Capabilities
+
+### New Capabilities
+
+- `unified-transaction-detail`: 统一的交易详情弹窗组件，支持金额编辑、分类选择、时间修改、删除操作，所有页面共用同一视觉样式
+
+### Modified Capabilities
+
+- 无（现有功能保持不变，仅统一样式）
+
+## Impact
+
+**受影响的文件**：
+- `Web/src/views/TransactionsRecord.vue` - 替换详情组件引用
+- `Web/src/components/Transaction/TransactionDetail.vue` - 删除或标记弃用
+
+**不受影响的文件**：
+- `Web/src/views/calendarV2/Index.vue` - 已使用 TransactionDetailSheet
+- `Web/src/components/Transaction/CategoryBillPopup.vue` - 已使用 TransactionDetailSheet
+- `Web/src/components/Transaction/TransactionDetailSheet.vue` - 基准组件，保持不变
+
+**API 无变更**：仅前端组件层面的统一

openspec/changes/archive/2026-02-21-unify-bill-detail-component/specs/unified-transaction-detail/spec.md

@@ -0,0 +1,74 @@
+## ADDED Requirements
+
+### Requirement: 统一的交易详情弹窗组件
+
+系统 SHALL 提供统一的交易详情弹窗组件 `TransactionDetailSheet.vue`，所有页面使用同一组件查看和编辑交易详情。
+
+#### Scenario: 从任意页面打开交易详情
+- **WHEN** 用户在 calendarV2、TransactionsRecord 或其他页面点击交易记录
+- **THEN** 系统显示统一的 TransactionDetailSheet 弹窗组件
+
+#### Scenario: 详情弹窗显示交易信息
+- **WHEN** 弹窗打开
+- **THEN** 显示金额（可点击编辑）、时间、备注、类型、分类
+
+#### Scenario: 编辑金额
+- **WHEN** 用户点击金额区域
+- **THEN** 进入金额编辑模式，显示数字输入框
+- **AND** 失焦后自动保存格式化的金额值
+
+### Requirement: 建议分类提示功能
+
+系统 SHALL 在交易详情弹窗中显示 AI 建议的分类提示（当存在未确认分类时）。
+
+#### Scenario: 显示建议分类提示
+- **WHEN** 交易存在 `unconfirmedClassify` 字段且与当前分类不同
+- **THEN** 在分类选择区域上方显示建议提示条
+- **AND** 提示条包含建议的分类名称和应用按钮
+
+#### Scenario: 应用建议分类
+- **WHEN** 用户点击"应用"按钮
+- **THEN** 自动填充建议的分类到分类字段
+- **AND** 如果存在 `unconfirmedType`，同时更新交易类型
+
+### Requirement: 交易保存功能
+
+系统 SHALL 允许用户修改交易详情并保存。
+
+#### Scenario: 保存修改的交易
+- **WHEN** 用户修改交易信息后点击"保存"按钮
+- **AND** 必填字段（金额、分类、时间）已填写
+- **THEN** 系统调用更新 API 并显示成功提示
+- **AND** 关闭弹窗并刷新交易列表
+
+#### Scenario: 保存时验证失败
+- **WHEN** 用户点击"保存"但必填字段未填写
+- **THEN** 显示对应的错误提示信息
+
+### Requirement: 交易删除功能
+
+系统 SHALL 允许用户删除交易记录。
+
+#### Scenario: 删除交易确认
+- **WHEN** 用户点击"删除"按钮
+- **THEN** 显示确认对话框
+
+#### Scenario: 确认删除交易
+- **WHEN** 用户在确认对话框中点击"删除"
+- **THEN** 系统调用删除 API
+- **AND** 成功后关闭弹窗并刷新交易列表
+- **AND** 显示删除成功提示
+
+### Requirement: 页面兼容性
+
+系统 SHALL 确保统一组件在所有使用场景正常工作。
+
+#### Scenario: TransactionsRecord 页面使用详情组件
+- **WHEN** 用户在 TransactionsRecord 页面点击交易记录
+- **THEN** 显示 TransactionDetailSheet 弹窗
+- **AND** 功能与原 TransactionDetail 组件一致
+
+#### Scenario: calendarV2 页面使用详情组件
+- **WHEN** 用户在 calendarV2 页面点击交易记录
+- **THEN** 显示 TransactionDetailSheet 弹窗
+- **AND** 保持原有功能和交互不变

openspec/changes/archive/2026-02-21-unify-bill-detail-component/tasks.md

@@ -0,0 +1,25 @@
+## 1. 增强组件功能
+
+- [x] 1.1 在 TransactionDetailSheet.vue 中添加建议分类提示功能
+- [x] 1.2 添加建议提示 UI 组件（显示 unconfirmedClassify 和应用按钮）
+- [x] 1.3 实现应用建议分类逻辑（更新 classify 和 type 字段）
+
+## 2. 迁移页面引用
+
+- [x] 2.1 修改 TransactionsRecord.vue，将 TransactionDetail 组件替换为 TransactionDetailSheet
+- [x] 2.2 更新 TransactionsRecord.vue 中的事件处理（save → save, delete → delete）
+- [x] 2.3 测试 TransactionsRecord 页面的详情功能
+
+## 3. 清理旧代码
+
+- [x] 3.1 确认无其他页面引用 TransactionDetail.vue
+- [x] 3.2 删除 TransactionDetail.vue 组件文件
+- [x] 3.3 更新相关文档（如有）
+
+## 4. 测试验证
+
+- [x] 4.1 测试 calendarV2 页面交易详情功能（无回归）
+- [x] 4.2 测试 TransactionsRecord 页面交易详情功能
+- [x] 4.3 测试 CategoryBillPopup 中交易详情功能
+- [x] 4.4 测试建议分类提示功能
+- [x] 4.5 运行前端 lint 检查

openspec/specs/unified-transaction-detail/spec.md

@@ -0,0 +1,74 @@
+## Requirements
+
+### Requirement: 统一的交易详情弹窗组件
+
+系统 SHALL 提供统一的交易详情弹窗组件 `TransactionDetailSheet.vue`，所有页面使用同一组件查看和编辑交易详情。
+
+#### Scenario: 从任意页面打开交易详情
+- **WHEN** 用户在 calendarV2、TransactionsRecord 或其他页面点击交易记录
+- **THEN** 系统显示统一的 TransactionDetailSheet 弹窗组件
+
+#### Scenario: 详情弹窗显示交易信息
+- **WHEN** 弹窗打开
+- **THEN** 显示金额（可点击编辑）、时间、备注、类型、分类
+
+#### Scenario: 编辑金额
+- **WHEN** 用户点击金额区域
+- **THEN** 进入金额编辑模式，显示数字输入框
+- **AND** 失焦后自动保存格式化的金额值
+
+### Requirement: 建议分类提示功能
+
+系统 SHALL 在交易详情弹窗中显示 AI 建议的分类提示（当存在未确认分类时）。
+
+#### Scenario: 显示建议分类提示
+- **WHEN** 交易存在 `unconfirmedClassify` 字段且与当前分类不同
+- **THEN** 在分类选择区域上方显示建议提示条
+- **AND** 提示条包含建议的分类名称和应用按钮
+
+#### Scenario: 应用建议分类
+- **WHEN** 用户点击"应用"按钮
+- **THEN** 自动填充建议的分类到分类字段
+- **AND** 如果存在 `unconfirmedType`，同时更新交易类型
+
+### Requirement: 交易保存功能
+
+系统 SHALL 允许用户修改交易详情并保存。
+
+#### Scenario: 保存修改的交易
+- **WHEN** 用户修改交易信息后点击"保存"按钮
+- **AND** 必填字段（金额、分类、时间）已填写
+- **THEN** 系统调用更新 API 并显示成功提示
+- **AND** 关闭弹窗并刷新交易列表
+
+#### Scenario: 保存时验证失败
+- **WHEN** 用户点击"保存"但必填字段未填写
+- **THEN** 显示对应的错误提示信息
+
+### Requirement: 交易删除功能
+
+系统 SHALL 允许用户删除交易记录。
+
+#### Scenario: 删除交易确认
+- **WHEN** 用户点击"删除"按钮
+- **THEN** 显示确认对话框
+
+#### Scenario: 确认删除交易
+- **WHEN** 用户在确认对话框中点击"删除"
+- **THEN** 系统调用删除 API
+- **AND** 成功后关闭弹窗并刷新交易列表
+- **AND** 显示删除成功提示
+
+### Requirement: 页面兼容性
+
+系统 SHALL 确保统一组件在所有使用场景正常工作。
+
+#### Scenario: TransactionsRecord 页面使用详情组件
+- **WHEN** 用户在 TransactionsRecord 页面点击交易记录
+- **THEN** 显示 TransactionDetailSheet 弹窗
+- **AND** 功能与原 TransactionDetail 组件一致
+
+#### Scenario: calendarV2 页面使用详情组件
+- **WHEN** 用户在 calendarV2 页面点击交易记录
+- **THEN** 显示 TransactionDetailSheet 弹窗
+- **AND** 保持原有功能和交互不变