From 5df910c9f1fcf85d5faa106706713290cd3f585d Mon Sep 17 00:00:00 2001
From: wangxiaogang <1433729587@qq.com>
Date: Wed, 10 Jun 2026 15:59:42 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20UI/=E4=BA=A4=E4=BA=92=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=20=E2=80=94=20=E5=8A=A8=E7=94=BB=E7=B3=BB=E7=BB=9F+De?=
 =?UTF-8?q?sign=20Token+=E9=AA=A8=E6=9E=B6=E5=B1=8F+=E5=BE=AE=E5=8F=8D?=
 =?UTF-8?q?=E9=A6=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  24 ++--
 .../components/CategoryIcon/CategoryIcon.vue  |   4 +-
 client/src/components/Numpad/Numpad.vue       |   4 +-
 .../components/SaveSuccess/SaveSuccess.vue    | 117 ++++++++++++++++--
 client/src/components/Skeleton/Skeleton.vue   |   2 +-
 .../TransactionItem/TransactionItem.vue       |  43 +++++--
 client/src/pages/add/index.vue                |  17 ++-
 client/src/pages/group-manage/index.vue       |  47 ++++++-
 client/src/pages/index/index.vue              |   7 +-
 client/src/pages/notifications/index.vue      |  48 ++++++-
 client/src/pages/recurring/index.vue          |  44 +++++--
 client/src/styles/mixins.scss                 |  62 ++++++++++
 12 files changed, 360 insertions(+), 59 deletions(-)

diff --git a/client/src/components/BudgetBar/BudgetBar.vue b/client/src/components/BudgetBar/BudgetBar.vue
index e31d456..275c594 100644
--- a/client/src/components/BudgetBar/BudgetBar.vue
+++ b/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>
diff --git a/client/src/components/CategoryIcon/CategoryIcon.vue b/client/src/components/CategoryIcon/CategoryIcon.vue
index e873533..42e9a75 100644
--- a/client/src/components/CategoryIcon/CategoryIcon.vue
+++ b/client/src/components/CategoryIcon/CategoryIcon.vue
@@ -22,6 +22,7 @@ const iconStyle = computed(() => ({
   background: props.selected ? '#FFE8E0' : (props.bgColor || (props.color + '15')),
   width: (sizeMap[props.size || 'md']) + 'rpx',
   height: (sizeMap[props.size || 'md']) + 'rpx',
+  boxShadow: props.selected ? '0 0 0 4rpx rgba(255, 140, 105, 0.15)' : 'none',
 }))
 
 const fontSize = computed(() => (fontMap[props.size || 'md']) + 'rpx')
@@ -42,6 +43,7 @@ const fontSize = computed(() => (fontMap[props.size || 'md']) + 'rpx')
 }
 
 .selected {
-  border-color: #FF8C69;
+  border-color: $primary;
+  transform: scale(1.05);
 }
 </style>
diff --git a/client/src/components/Numpad/Numpad.vue b/client/src/components/Numpad/Numpad.vue
index 11f1b47..6578ba9 100644
--- a/client/src/components/Numpad/Numpad.vue
+++ b/client/src/components/Numpad/Numpad.vue
@@ -207,10 +207,10 @@ function onConfirm() {
 
 .key.fn {
   background: $primary-light;
-  border-color: #FFD0C0;
+  border-color: darken($primary-light, 8%);
 
   &:active {
-    background: #FFD0C0;
+    background: darken($primary-light, 8%);
     box-shadow: $shadow-clay-pressed;
     transform: scale(0.96);
   }
diff --git a/client/src/components/SaveSuccess/SaveSuccess.vue b/client/src/components/SaveSuccess/SaveSuccess.vue
index 4903c5f..a6a6251 100644
--- a/client/src/components/SaveSuccess/SaveSuccess.vue
+++ b/client/src/components/SaveSuccess/SaveSuccess.vue
@@ -1,8 +1,22 @@
 <template>
   <view class="save-success" v-if="visible">
+    <!-- 纸屑粒子 -->
+    <view class="confetti-container" v-if="animating">
+      <view
+        v-for="i in 20"
+        :key="i"
+        class="confetti"
+        :class="`confetti-${i}`"
+        :style="confettiStyle(i)"
+      ></view>
+    </view>
+
     <view class="success-content" :class="{ show: animating }">
-      <view class="success-icon">
-        <Icon name="check" :size="80" color="#FFFFFF" />
+      <view class="success-icon-wrap">
+        <view class="success-ring"></view>
+        <view class="success-icon">
+          <Icon name="check" :size="80" color="#FFFFFF" />
+        </view>
       </view>
       <text class="success-text">{{ text }}</text>
       <view class="success-actions" v-if="showContinue">
@@ -31,12 +45,33 @@ const emit = defineEmits(['update:visible', 'continue', 'back'])
 
 const animating = ref(false)
 
+// 纸屑样式：随机位置、颜色、动画延迟
+const confettiColors = ['#FF8C69', '#FFD166', '#7BC67E', '#6C9BCF', '#FF69B4', '#FFB89A']
+function confettiStyle(i: number) {
+  const angle = (i / 20) * 360
+  const distance = 120 + Math.random() * 200
+  const color = confettiColors[i % confettiColors.length]
+  const delay = Math.random() * 0.3
+  const size = 8 + Math.random() * 12
+  const isRect = i % 3 === 0
+  return {
+    '--tx': `${Math.cos(angle * Math.PI / 180) * distance}rpx`,
+    '--ty': `${Math.sin(angle * Math.PI / 180) * distance - 100}rpx`,
+    '--rot': `${Math.random() * 720 - 360}deg`,
+    background: color,
+    width: isRect ? `${size}rpx` : `${size * 0.6}rpx`,
+    height: `${size}rpx`,
+    borderRadius: isRect ? '2rpx' : '50%',
+    animationDelay: `${delay}s`,
+  }
+}
+
 watch(() => props.visible, (val) => {
   if (val) {
     setTimeout(() => { animating.value = true }, 50)
     // 如果不显示继续按钮，自动关闭
     if (!props.showContinue) {
-      setTimeout(() => { onBack() }, 2000)
+      setTimeout(() => { onBack() }, 2200)
     }
   } else {
     animating.value = false
@@ -74,13 +109,44 @@ function onBack() {
   z-index: 9999;
 }
 
+// 纸屑容器
+.confetti-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  z-index: 1;
+}
+
+.confetti {
+  position: absolute;
+  opacity: 0;
+  animation: confetti-burst 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+}
+
+@keyframes confetti-burst {
+  0% {
+    transform: translate(0, 0) rotate(0deg) scale(0);
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1);
+    opacity: 0;
+  }
+}
+
 .success-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   transform: scale(0.8);
   opacity: 0;
-  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  z-index: 2;
 
   &.show {
     transform: scale(1);
@@ -88,12 +154,42 @@ function onBack() {
   }
 }
 
+// 图标外环脉冲
+.success-icon-wrap {
+  position: relative;
+  @include flex-center;
+}
+
+.success-ring {
+  position: absolute;
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  border: 4rpx solid rgba(123, 198, 126, 0.3);
+  animation: ring-pulse 1s ease-out 0.3s both;
+}
+
+@keyframes ring-pulse {
+  0% {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
 .success-icon {
   width: 160rpx;
   height: 160rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, $success, #5BA85E);
+  background: linear-gradient(135deg, $success, darken($success, 10%));
   @include flex-center;
+  box-shadow: 0 8rpx 32rpx rgba(123, 198, 126, 0.4);
 }
 
 .success-text {
@@ -114,15 +210,16 @@ function onBack() {
   border-radius: $radius-xl;
   min-width: 200rpx;
   @include flex-center;
+  transition: transform $transition-fast, opacity $transition-fast;
 
   &.continue {
     background: $primary;
-    &:active { opacity: 0.8; }
+    &:active { opacity: 0.8; transform: scale(0.96); }
   }
 
   &.back {
     background: rgba(255, 255, 255, 0.2);
-    &:active { background: rgba(255, 255, 255, 0.3); }
+    &:active { background: rgba(255, 255, 255, 0.3); transform: scale(0.96); }
   }
 }
 
@@ -131,4 +228,10 @@ function onBack() {
   font-weight: 600;
   color: $surface;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .confetti { animation: none !important; display: none; }
+  .success-ring { animation: none !important; display: none; }
+  .success-content { transition: opacity 0.2s ease; }
+}
 </style>
diff --git a/client/src/components/Skeleton/Skeleton.vue b/client/src/components/Skeleton/Skeleton.vue
index 16911c8..31ec4fe 100644
--- a/client/src/components/Skeleton/Skeleton.vue
+++ b/client/src/components/Skeleton/Skeleton.vue
@@ -19,7 +19,7 @@ const style = computed(() => ({
 
 <style lang="scss" scoped>
 .skeleton {
-  background: linear-gradient(90deg, #F0E0D6 25%, #F8EDE4 50%, #F0E0D6 75%);
+  background: linear-gradient(90deg, $border 25%, $surface-warm 50%, $border 75%);
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite;
   border-radius: 8rpx;
diff --git a/client/src/components/TransactionItem/TransactionItem.vue b/client/src/components/TransactionItem/TransactionItem.vue
index 440ff71..a8609e9 100644
--- a/client/src/components/TransactionItem/TransactionItem.vue
+++ b/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>
diff --git a/client/src/pages/add/index.vue b/client/src/pages/add/index.vue
index 2b5dd0f..b43d5c6 100644
--- a/client/src/pages/add/index.vue
+++ b/client/src/pages/add/index.vue
@@ -328,7 +328,11 @@ function goBack() {
 
 .title { font-size: $font-xl; font-weight: 500; color: $text; }
 
-.type-toggle-wrap { display: flex; justify-content: center; margin: $space-sm 0; }
+.type-toggle-wrap {
+  display: flex; justify-content: center;
+  margin: $space-sm 0;
+  @include fade-in-up;
+}
 
 .type-toggle {
   display: inline-flex;
@@ -363,7 +367,7 @@ function goBack() {
   background: $surface;
   border-radius: $radius-lg;
   box-shadow: $shadow-sm;
-  transition: transform $transition-normal;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .income .slider { transform: translateX(160rpx); }
@@ -387,8 +391,9 @@ function goBack() {
   gap: 6rpx;
   padding: 12rpx 0;
   position: relative;
+  -webkit-tap-highlight-color: transparent;
 
-  &:active { transform: scale(0.95); }
+  &:active { transform: scale(0.92); }
 
   &.suggested {
     .cat-icon-wrap {
@@ -396,10 +401,16 @@ function goBack() {
       border-radius: $radius-lg;
       padding: 6rpx;
       margin: -6rpx;
+      animation: suggest-pulse 2s ease-in-out infinite;
     }
   }
 }
 
+@keyframes suggest-pulse {
+  0%, 100% { border-color: $primary; }
+  50% { border-color: lighten($primary, 30%); }
+}
+
 .cat-icon-wrap {
   position: relative;
   transition: all $transition-normal;
diff --git a/client/src/pages/group-manage/index.vue b/client/src/pages/group-manage/index.vue
index b0a85fc..b306b64 100644
--- a/client/src/pages/group-manage/index.vue
+++ b/client/src/pages/group-manage/index.vue
@@ -45,13 +45,22 @@
       <text class="section-title">我的群组</text>
     </view>
 
-    <view v-if="groupStore.loading" class="loading-box">
-      <text class="loading-text">加载中...</text>
+    <view v-if="groupStore.loading" class="skeleton-list">
+      <view v-for="i in 2" :key="i" class="skeleton-card">
+        <Skeleton width="80rpx" height="80rpx" variant="circle" />
+        <view class="skeleton-info">
+          <Skeleton width="200rpx" height="28rpx" variant="text" />
+          <Skeleton width="280rpx" height="24rpx" variant="text" />
+        </view>
+      </view>
     </view>
 
     <view v-else-if="groupStore.groups.length === 0" class="empty-box">
-      <Icon name="user" :size="48" color="#BFB3B3" />
+      <view class="empty-icon-wrap">
+        <Icon name="user" :size="48" color="#BFB3B3" />
+      </view>
       <text class="empty-text">还没有加入任何群组</text>
+      <text class="empty-hint">创建或加入一个群组，和家人朋友一起记账</text>
     </view>
 
     <view v-else class="group-list">
@@ -147,6 +156,7 @@ import { waitForReady } from '@/utils/app-ready'
 import { statusBarHeight, capsuleRight } from '@/utils/system'
 import { API_BASE } from '@/config'
 import Icon from '@/components/Icon/Icon.vue'
+import Skeleton from '@/components/Skeleton/Skeleton.vue'
 import type { GroupMember, Group } from '@/api/group'
 
 const groupStore = useGroupStore()
@@ -473,7 +483,20 @@ function handleDissolve(group: Group) {
   color: $text-sec;
 }
 
-.loading-box, .empty-box {
+// 骨架屏
+.skeleton-list { padding: 0 $space-xl; }
+.skeleton-card {
+  display: flex; align-items: center; gap: $space-md;
+  padding: $space-lg; margin-bottom: $space-sm;
+  background: $surface; border-radius: $radius-xl;
+  border: 2rpx solid $border;
+}
+.skeleton-info {
+  flex: 1; display: flex; flex-direction: column; gap: $space-xs;
+}
+
+// 空状态
+.empty-box {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -482,8 +505,20 @@ function handleDissolve(group: Group) {
   padding: 80rpx 0;
 }
 
-.loading-text, .empty-text {
-  font-size: $font-lg;
+.empty-icon-wrap {
+  width: 120rpx; height: 120rpx; border-radius: 50%;
+  background: $surface-warm; @include flex-center;
+  margin-bottom: $space-sm;
+}
+
+.empty-text {
+  font-size: $font-xl;
+  font-weight: 600;
+  color: $text;
+}
+
+.empty-hint {
+  font-size: $font-md;
   color: $text-muted;
 }
 
diff --git a/client/src/pages/index/index.vue b/client/src/pages/index/index.vue
index da5d97a..72ed80b 100644
--- a/client/src/pages/index/index.vue
+++ b/client/src/pages/index/index.vue
@@ -364,6 +364,7 @@ function goBills() {
   padding: $space-2xl;
   @include card($radius-2xl);
   box-shadow: $shadow-clay;
+  @include fade-in-up;
 }
 
 .card-label {
@@ -393,6 +394,7 @@ function goBills() {
   font-weight: 600;
   color: $text;
   font-variant-numeric: tabular-nums;
+  @include count-up;
 }
 
 .mini-stats {
@@ -434,6 +436,7 @@ function goBills() {
   display: flex;
   align-items: center;
   gap: $space-md;
+  @include fade-in-up(0.1s);
 }
 
 .today-item {
@@ -475,6 +478,7 @@ function goBills() {
   gap: $space-md;
   padding: 0 $space-xl;
   margin-top: $space-xl;
+  @include fade-in-up(0.15s);
 }
 
 .quick-btn {
@@ -485,9 +489,10 @@ function goBills() {
   flex-direction: column;
   @include flex-center;
   gap: $space-xs;
+  transition: transform $transition-fast, box-shadow $transition-fast;
 
   &:active {
-    transform: scale(0.97);
+    transform: scale(0.94);
     box-shadow: $shadow-clay-pressed;
   }
 }
diff --git a/client/src/pages/notifications/index.vue b/client/src/pages/notifications/index.vue
index 4bdde31..94acc7f 100644
--- a/client/src/pages/notifications/index.vue
+++ b/client/src/pages/notifications/index.vue
@@ -23,13 +23,23 @@
     </view>
 
     <!-- 通知列表 -->
-    <view v-if="loading && list.length === 0" class="loading-box">
-      <text class="loading-text">加载中...</text>
+    <view v-if="loading && list.length === 0" class="skeleton-list">
+      <view v-for="i in 4" :key="i" class="skeleton-notif">
+        <Skeleton width="64rpx" height="64rpx" variant="circle" />
+        <view class="skeleton-info">
+          <Skeleton width="240rpx" height="28rpx" variant="text" />
+          <Skeleton width="400rpx" height="24rpx" variant="text" />
+          <Skeleton width="120rpx" height="20rpx" variant="text" />
+        </view>
+      </view>
     </view>
 
     <view v-else-if="list.length === 0" class="empty-box">
-      <Icon name="bell" :size="48" color="#BFB3B3" />
+      <view class="empty-icon-wrap">
+        <Icon name="bell" :size="48" color="#BFB3B3" />
+      </view>
       <text class="empty-text">暂无通知</text>
+      <text class="empty-hint">新的通知会在这里显示</text>
     </view>
 
     <view v-else class="notification-list">
@@ -87,6 +97,7 @@ import { getNotifications, markRead, markAllRead, getNotificationImageUrl } from
 import { waitForReady } from '@/utils/app-ready'
 import { statusBarHeight, capsuleRight } from '@/utils/system'
 import Icon from '@/components/Icon/Icon.vue'
+import Skeleton from '@/components/Skeleton/Skeleton.vue'
 import type { Notification } from '@/api/notification'
 
 const notifStore = useNotificationStore()
@@ -305,7 +316,20 @@ onReachBottom(() => {
   }
 }
 
-.loading-box, .empty-box {
+// 骨架屏
+.skeleton-list { padding: 0 $space-xl; }
+.skeleton-notif {
+  display: flex; align-items: flex-start; gap: $space-lg;
+  padding: $space-lg; margin-bottom: $space-sm;
+  background: $surface; border-radius: $radius-xl;
+  border: 2rpx solid $border;
+}
+.skeleton-info {
+  flex: 1; display: flex; flex-direction: column; gap: $space-xs;
+}
+
+// 空状态
+.empty-box {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -313,8 +337,20 @@ onReachBottom(() => {
   padding: 120rpx 0;
 }
 
-.loading-text, .empty-text {
-  font-size: $font-lg;
+.empty-icon-wrap {
+  width: 120rpx; height: 120rpx; border-radius: 50%;
+  background: $surface-warm; @include flex-center;
+  margin-bottom: $space-sm;
+}
+
+.empty-text {
+  font-size: $font-xl;
+  font-weight: 600;
+  color: $text;
+}
+
+.empty-hint {
+  font-size: $font-md;
   color: $text-muted;
 }
 
diff --git a/client/src/pages/recurring/index.vue b/client/src/pages/recurring/index.vue
index 9b66678..5318108 100644
--- a/client/src/pages/recurring/index.vue
+++ b/client/src/pages/recurring/index.vue
@@ -20,15 +20,25 @@
     </view>
 
     <!-- 加载/空/列表 -->
-    <view v-if="loading" class="loading-box">
-      <text class="loading-text">加载中...</text>
+    <view v-if="loading" class="skeleton-list">
+      <view v-for="i in 3" :key="i" class="skeleton-card">
+        <Skeleton width="88rpx" height="88rpx" variant="circle" />
+        <view class="skeleton-info">
+          <Skeleton width="200rpx" height="28rpx" variant="text" />
+          <Skeleton width="300rpx" height="24rpx" variant="text" />
+        </view>
+        <Skeleton width="120rpx" height="32rpx" variant="rect" />
+      </view>
     </view>
 
     <view v-else-if="list.length === 0" class="empty-box">
-      <Icon name="edit" :size="48" color="#BFB3B3" />
+      <view class="empty-icon-wrap">
+        <Icon name="edit" :size="48" color="#BFB3B3" />
+      </view>
       <text class="empty-text">暂无周期账单</text>
       <text class="empty-hint">设置房租、订阅、工资等定期收支</text>
       <view class="empty-btn" @tap="openAddModal">
+        <Icon name="plus" :size="24" color="#FFFFFF" />
         <text class="empty-btn-text">添加周期账单</text>
       </view>
     </view>
@@ -162,6 +172,7 @@ import { getRecurringTemplates, createRecurringTemplate, updateRecurringTemplate
 import Icon from '@/components/Icon/Icon.vue'
 import CategoryIcon from '@/components/CategoryIcon/CategoryIcon.vue'
 import AmountEditor from '@/components/AmountEditor/AmountEditor.vue'
+import Skeleton from '@/components/Skeleton/Skeleton.vue'
 import type { RecurringTemplate } from '@/api/recurring'
 
 const catStore = useCategoryStore()
@@ -361,16 +372,35 @@ function goBack() { uni.navigateBack() }
 }
 .sync-text { font-size: $font-md; color: #43A047; font-weight: 500; }
 
-.loading-box, .empty-box {
+// 骨架屏
+.skeleton-list { padding: 0 $space-xl; }
+.skeleton-card {
+  display: flex; align-items: center; gap: $space-md;
+  padding: $space-lg; margin-bottom: $space-sm;
+  background: $surface; border-radius: $radius-xl;
+  border: 2rpx solid $border;
+}
+.skeleton-info {
+  flex: 1; display: flex; flex-direction: column; gap: $space-xs;
+}
+
+// 空状态
+.empty-box {
   display: flex; flex-direction: column; align-items: center;
   padding: 120rpx 0; gap: $space-sm;
 }
-.loading-text, .empty-text { font-size: $font-lg; color: $text-muted; }
+.empty-icon-wrap {
+  width: 120rpx; height: 120rpx; border-radius: 50%;
+  background: $surface-warm; @include flex-center;
+  margin-bottom: $space-sm;
+}
+.empty-text { font-size: $font-xl; font-weight: 600; color: $text; }
 .empty-hint { font-size: $font-md; color: $text-muted; margin-top: -$space-xs; }
 .empty-btn {
   margin-top: $space-lg; padding: $space-sm $space-xl;
-  background: $primary; border-radius: $radius-lg;
-  &:active { opacity: 0.8; }
+  background: linear-gradient(135deg, $primary, $primary-dark);
+  border-radius: $radius-lg; display: flex; align-items: center; gap: $space-xs;
+  &:active { opacity: 0.8; transform: scale(0.96); }
 }
 .empty-btn-text { font-size: $font-base; color: $surface; font-weight: 600; }
 
diff --git a/client/src/styles/mixins.scss b/client/src/styles/mixins.scss
index 84dc698..7dfa195 100644
--- a/client/src/styles/mixins.scss
+++ b/client/src/styles/mixins.scss
@@ -247,3 +247,65 @@
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
 }
+
+// ===== 入场动画 =====
+
+// 卡片淡入上浮
+@mixin fade-in-up($delay: 0s) {
+  animation: fadeInUp 0.4s cubic-bezier(0.23, 1, 0.32, 1) $delay both;
+}
+
+// 列表项交错淡入
+@mixin stagger-item($index: 0, $base-delay: 0.05s) {
+  opacity: 0;
+  animation: fadeInUp 0.35s cubic-bezier(0.23, 1, 0.32, 1) ($index * $base-delay) both;
+}
+
+// 数字跳动
+@mixin count-up {
+  animation: countPulse 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+// 弹性缩放
+@mixin bounce-in($delay: 0s) {
+  animation: bounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) $delay both;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(24rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes bounceIn {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes countPulse {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.08); }
+  100% { transform: scale(1); }
+}
+
+// 尊重减弱动画偏好
+@media (prefers-reduced-motion: reduce) {
+  .fade-in-up,
+  .stagger-item,
+  .bounce-in {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+}