feat: 交互优化与代码质量改进

- SvgIcon 改为 PNG 图标方案,组件重命名为 Icon
- 修复 TransactionItem tap 事件名冲突,改为 item-tap
- 修复 Stats 页面切换 tab 时 overview 不更新
- 修复 CategoryIcon bgColor 必填问题
- 修复 ChartWrapper import 顺序
- 修复 budget onDelete 空字符串问题
- 清理 profile 页面未使用 CSS
- 统一所有页面 header 为 sticky 定位
- 修复导航栏返回按钮不统一
- 添加导出功能 loading 状态
- 优化 scroll-into-view 延迟
This commit is contained in:
2026-06-02 16:04:17 +08:00
parent 36baa9a2b5
commit d5e5655b88
34 changed files with 318 additions and 451 deletions

View File

@@ -3,11 +3,10 @@
<view
class="tx-item"
:style="{ transform: `translateX(${offsetX}rpx)` }"
@tap="$emit('tap', item)"
@longpress="$emit('longpress', item)"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
@tap="$emit('item-tap', item)"
@touchstart="!disableSwipe && onTouchStart($event)"
@touchmove="!disableSwipe && onTouchMove($event)"
@touchend="!disableSwipe && onTouchEnd()"
>
<view class="icon-wrap" :style="{ background: item.category_color + '20' }">
<text class="icon-text" :style="{ color: item.category_color }">{{ item.category_name?.[0] || '?' }}</text>
@@ -19,7 +18,7 @@
<text class="amount" :class="item.type">{{ item.type === 'expense' ? '-' : '+' }}{{ formatAmount(item.amount) }}</text>
</view>
<view class="delete-btn" :class="{ visible: showDelete }" @tap="$emit('delete', item)">
<SvgIcon name="trash" :size="32" color="#FFFFFF" />
<Icon name="trash" :size="32" color="#FFFFFF" />
</view>
</view>
</template>
@@ -27,7 +26,7 @@
<script setup lang="ts">
import { ref } from 'vue'
import { formatAmount, formatDate } from '@/utils/format'
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
import Icon from '@/components/Icon/Icon.vue'
withDefaults(defineProps<{
item: {
@@ -41,9 +40,11 @@ withDefaults(defineProps<{
category_color?: string
}
hideDate?: boolean
}>(), { hideDate: false })
/** 禁用滑动删除(首页预览等场景) */
disableSwipe?: boolean
}>(), { hideDate: false, disableSwipe: false })
defineEmits(['tap', 'longpress', 'delete'])
defineEmits(['item-tap', 'delete'])
const startX = ref(0)
const offsetX = ref(0)