feat: 更新未读消息计数的刷新频率，优化消息视图；添加分类标签显示功能，增强预算卡片的可读性

Web/src/components/TransactionDetail.vue

@@ -55,7 +55,7 @@
 
           <van-field name="type" label="交易类型">
             <template #input>
-              <van-radio-group v-model="editForm.type" direction="horizontal">
+              <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>
@@ -149,7 +149,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, watch, defineProps, defineEmits, computed } from 'vue'
+import { ref, reactive, watch, defineProps, defineEmits, computed, nextTick } from 'vue'
 import { showToast, showConfirmDialog } from 'vant'
 import dayjs from 'dayjs'
 import PopupContainer from '@/components/PopupContainer.vue'
@@ -171,6 +171,7 @@ const emit = defineEmits(['update:show', 'save'])
 
 const visible = ref(false)
 const submitting = ref(false)
+const isSyncing = ref(false)
 
 // 日期选择相关
 const showDatePicker = ref(false)
@@ -201,6 +202,7 @@ watch(() => props.show, (newVal) => {
 
 watch(() => props.transaction, (newVal) => {
   if (newVal) {
+    isSyncing.value = true
     // 填充编辑表单
     editForm.id = newVal.id
     editForm.reason = newVal.reason || ''
@@ -216,6 +218,11 @@ watch(() => props.transaction, (newVal) => {
       currentDate.value = dt.format('YYYY-MM-DD').split('-')
       currentTime.value = dt.format('HH:mm').split(':')
     }
+
+    // 在下一个 tick 结束同步状态，确保 van-radio-group 的 @change 已触发完毕
+    nextTick(() => {
+      isSyncing.value = false
+    })
   }
 })
 
@@ -223,6 +230,13 @@ watch(visible, (newVal) => {
   emit('update:show', newVal)
 })
 
+// 处理类型切换
+const handleTypeChange = () => {
+  if (!isSyncing.value) {
+    editForm.classify = ''
+  }
+}
+
 // 处理日期确认
 const onConfirmDate = ({ selectedValues }) => {
   const dateStr = selectedValues.join('-')
@@ -241,12 +255,6 @@ const onConfirmTime = ({ selectedValues }) => {
   showTimePicker.value = false
 }
 
-// 监听交易类型变化，重新加载分类
-watch(() => editForm.type, (newVal) => {
-  // 清空已选的分类
-  editForm.classify = ''
-})
-
 const applySuggestion = () => {
   if (props.transaction.unconfirmedClassify) {
     editForm.classify = props.transaction.unconfirmedClassify