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

Web/src/components/Budget/BudgetCard.vue

@@ -15,6 +15,9 @@
                 </van-tag>
               </slot>
               <h3 class="card-title">{{ budget.name }}</h3>
+              <span v-if="budget.selectedCategories?.length" class="card-subtitle">
+                ({{ budget.selectedCategories.join('、') }})
+              </span>
             </div>
           <van-icon name="arrow-down" class="expand-icon" />
         </div>
@@ -85,6 +88,18 @@
           </div>
           
           <div class="budget-body">
+            <div v-if="budget.selectedCategories?.length" class="category-tags">
+              <van-tag 
+                v-for="cat in budget.selectedCategories" 
+                :key="cat"
+                size="mini"
+                class="category-tag"
+                plain
+                round
+              >
+                {{ cat }}
+              </van-tag>
+            </div>
             <div class="amount-info">
               <slot name="amount-info"></slot>
             </div>
@@ -425,12 +440,29 @@ const timePercentage = computed(() => {
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0;
+  flex: 1;
 }
 
 .card-title {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+  max-width: 120px;
+}
+
+.card-subtitle {
+  font-size: 12px;
+  color: #969799;
+  font-weight: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
 }
 
 .header-actions {
@@ -438,6 +470,18 @@ const timePercentage = computed(() => {
   gap: 8px;
 }
 
+.category-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 8px 0 4px;
+}
+
+.category-tag {
+  opacity: 0.7;
+  font-size: 10px;
+}
+
 .amount-info {
   display: flex;
   justify-content: space-between;