wangxiaogang
5df910c9f1
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后自动微微左滑再回弹， 引导用户发现滑动删除功能
47 lines
943 B
Vue
47 lines
943 B
Vue
<template>
|
|
<view class="skeleton" :style="style" :class="[variant]"></view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
width?: string
|
|
height?: string
|
|
variant?: 'text' | 'rect' | 'circle'
|
|
}>(), { variant: 'rect' })
|
|
|
|
const style = computed(() => ({
|
|
width: props.width || (props.variant === 'circle' ? props.height : '100%'),
|
|
height: props.height || '32rpx',
|
|
}))
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.skeleton {
|
|
background: linear-gradient(90deg, $border 25%, $surface-warm 50%, $border 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite;
|
|
border-radius: 8rpx;
|
|
|
|
&.text {
|
|
border-radius: 4rpx;
|
|
}
|
|
|
|
&.circle {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: 200% 0; }
|
|
100% { background-position: -200% 0; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.skeleton {
|
|
animation: none;
|
|
}
|
|
}
|
|
</style>
|