feat(ui): UI/交互优化 — 动画系统+Design Token+骨架屏+微反馈

1. Design Token 统一：CategoryIcon/BudgetBar/Numpad/Skeleton/TransactionItem
   硬编码hex颜色替换为 $primary/$border/$danger 等SCSS变量
2. 入场动画：mixins.scss 添加 fade-in-up/bounce-in/count-up 等 mixin+keyframes，
   首页卡片/金额/快捷按钮应用交错入场动画
3. 记账成功动画增强：SaveSuccess 增加纸屑粒子爆发+光环脉冲效果，
   prefers-reduced-motion 下自动隐藏
4. 骨架屏替代文字加载：recurring/group-manage/notifications 三个页面
   从"加载中..."替换为骨架屏；空状态增加图标容器+引导文案
5. 交互微反馈：分类按压0.92缩放、推荐虚线呼吸动画、
   Tab滑块cubic-bezier优化、快捷按钮弹性按压
6. 左滑删除提示：TransactionItem首项1.5s后自动微微左滑再回弹，
   引导用户发现滑动删除功能

client/src/components/BudgetBar/BudgetBar.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="budget-bar-wrap">
     <view class="bar-track">
-      <view class="bar-fill" :style="{ width: percentage + '%', background: fillColor }"></view>
+      <view class="bar-fill" :class="{ over: rawPercentage > 100 }" :style="{ width: percentage + '%' }"></view>
     </view>
     <view class="bar-info" v-if="showLabel">
       <text class="bar-text" v-if="rawPercentage <= 100">预算 {{ formatAmount(total) }} · 剩余 {{ formatAmount(Math.max(0, total - used)) }}</text>
@@ -27,25 +27,25 @@ const rawPercentage = computed(() => {
 })
 
 const percentage = computed(() => Math.min(100, rawPercentage.value))
-
-const fillColor = computed(() => {
-  if (rawPercentage.value > 100) return '#FF6B6B'
-  return 'linear-gradient(90deg, #FF8C69, #FFB89A)'
-})
 </script>
 
 <style lang="scss" scoped>
 .bar-track {
   height: 16rpx;
   border-radius: 8rpx;
-  background: #F0E0D6;
+  background: $border;
   overflow: hidden;
 }
 
 .bar-fill {
   height: 100%;
   border-radius: 8rpx;
-  transition: width 0.6s ease-out;
+  background: linear-gradient(90deg, $primary, lighten($primary, 15%));
+  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &.over {
+    background: $danger;
+  }
 }
 
 .bar-info {
@@ -56,20 +56,20 @@ const fillColor = computed(() => {
 
 .bar-text {
   font-size: 24rpx;
-  color: #8B7E7E;
+  color: $text-sec;
 }
 
 .bar-pct {
   font-family: 'Fredoka', sans-serif;
   font-size: 28rpx;
   font-weight: 500;
-  color: #FF8C69;
+  color: $primary;
 
-  &.over { color: #FF6B6B; }
+  &.over { color: $danger; }
 }
 
 .bar-text.over {
-  color: #FF6B6B;
+  color: $danger;
   font-weight: 500;
 }
 </style>