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 延迟

client/src/pages/add/index.vue

@@ -1,12 +1,14 @@
 <template>
   <view class="page">
-    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
-    <view class="header">
-      <view class="close" @tap="goBack">
-        <SvgIcon name="close" :size="36" color="#8B7E7E" />
+    <view class="header-fixed">
+      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+      <view class="header">
+        <view class="nav-back" @tap="goBack">
+          <Icon name="arrowLeft" :size="36" color="#2D1B1B" />
+        </view>
+        <text class="title">{{ editId ? '编辑记录' : '记一笔' }}</text>
+        <view style="width: 88rpx;"></view>
       </view>
-      <text class="title">{{ editId ? '编辑记录' : '记一笔' }}</text>
-      <view style="width: 64rpx;"></view>
     </view>
 
     <view class="type-toggle-wrap">
@@ -34,12 +36,12 @@
     <view class="extra-fields">
       <picker mode="date" :value="selectedDate" :end="todayStr" @change="onDateChange">
         <view class="extra-row">
-          <SvgIcon name="calendar" :size="28" color="#8B7E7E" />
+          <Icon name="calendar" :size="28" color="#8B7E7E" />
           <text class="extra-text">{{ dateLabel }}</text>
         </view>
       </picker>
       <view class="extra-row">
-        <SvgIcon name="edit" :size="28" color="#8B7E7E" />
+        <Icon name="edit" :size="28" color="#8B7E7E" />
         <input class="extra-input" v-model="note" placeholder="添加备注..." placeholder-class="placeholder" maxlength="50" />
       </view>
     </view>
@@ -51,12 +53,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue'
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
 import { useCategoryStore } from '@/stores/category'
 import { useTransactionStore } from '@/stores/transaction'
 import Numpad from '@/components/Numpad/Numpad.vue'
 import CategoryIcon from '@/components/CategoryIcon/CategoryIcon.vue'
-import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
+import Icon from '@/components/Icon/Icon.vue'
 import SaveSuccess from '@/components/SaveSuccess/SaveSuccess.vue'
 import { statusBarHeight } from '@/utils/system'
 
@@ -131,8 +133,10 @@ onMounted(async () => {
       lastCatByType[existing.type] = existing.category_id
       note.value = existing.note || ''
       selectedDate.value = existing.date.slice(0, 10)
-      // Scroll to selected category
-      setTimeout(() => { scrollToCat.value = 'cat-' + existing.category_id }, 100)
+      // 等待分类列表渲染完成后滚动到选中项
+      nextTick(() => {
+        setTimeout(() => { scrollToCat.value = 'cat-' + existing.category_id }, 200)
+      })
     } else {
       uni.showToast({ title: '记录不存在', icon: 'none' })
       setTimeout(() => uni.navigateBack(), 1500)
@@ -233,6 +237,13 @@ function goBack() {
   flex-direction: column;
 }
 
+.header-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: #FFF8F0;
+}
+
 .status-bar {
   background: #FFF8F0;
 }
@@ -244,12 +255,15 @@ function goBack() {
   padding: 16rpx 40rpx;
 }
 
-.close {
+.nav-back {
   width: 88rpx;
   height: 88rpx;
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: 50%;
+
+  &:active { background: #F0E0D6; }
 }
 
 .title { font-size: 32rpx; font-weight: 500; color: #2D1B1B; }
@@ -317,13 +331,12 @@ function goBack() {
 
 .category-scroll {
   max-height: 320rpx;
-  padding: 0 40rpx;
 }
 
 .category-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 20rpx;
+  gap: 16rpx;
   padding: 8rpx 0;
 }