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/TransactionItem/TransactionItem.vue

@@ -108,6 +108,8 @@ function onTouchEnd() {
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins.scss';
+
 .tx-item-wrap {
   position: relative;
   overflow: hidden;
@@ -121,22 +123,33 @@ function onTouchEnd() {
   gap: 24rpx;
   border-radius: 20rpx;
   transition: transform 0.2s ease;
-  background: #FFFFFF;
+  background: $surface;
   position: relative;
   z-index: 1;
 
   &:active {
-    background: #FFF0E6;
+    background: $surface-warm;
   }
 }
 
+// 左滑提示：首次加载时微微露出删除按钮
+.tx-item-wrap:first-child .tx-item:not(.no-hint) {
+  animation: swipe-hint 0.6s ease 1.5s both;
+}
+
+@keyframes swipe-hint {
+  0% { transform: translateX(0); }
+  40% { transform: translateX(-40rpx); }
+  100% { transform: translateX(0); }
+}
+
 .delete-btn {
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   width: 160rpx;
-  background: #FF6B6B;
+  background: $danger;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -169,9 +182,9 @@ function onTouchEnd() {
   width: 28rpx;
   height: 28rpx;
   border-radius: 50%;
-  background: #FFF0E6;
+  background: $primary-light;
   font-size: 16rpx;
-  color: #FF8C69;
+  color: $primary;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
@@ -185,22 +198,20 @@ function onTouchEnd() {
 .name {
   font-size: 28rpx;
   font-weight: 500;
-  color: #2D1B1B;
+  color: $text;
   display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  @include text-ellipsis;
 }
 
 .meta {
   font-size: 24rpx;
-  color: #8B7E7E;
+  color: $text-sec;
   display: block;
   margin-top: 4rpx;
 }
 
 .creator-name {
-  color: #FF8C69;
+  color: $primary;
   font-weight: 500;
 }
 
@@ -211,7 +222,13 @@ function onTouchEnd() {
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 
-  &.expense { color: #2D1B1B; }
-  &.income { color: #7BC67E; }
+  &.expense { color: $text; }
+  &.income { color: $success; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tx-item-wrap:first-child .tx-item {
+    animation: none;
+  }
 }
 </style>