From d5e5655b8863ca357066b520e587f4319e8edbe1 Mon Sep 17 00:00:00 2001
From: wangxiaogang <1433729587@qq.com>
Date: Tue, 2 Jun 2026 16:04:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=B8=8E=E4=BB=A3=E7=A0=81=E8=B4=A8=E9=87=8F=E6=94=B9=E8=BF=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SvgIcon 改为 PNG 图标方案，组件重命名为 Icon
- 修复 TransactionItem tap 事件名冲突，改为 item-tap
- 修复 Stats 页面切换 tab 时 overview 不更新
- 修复 CategoryIcon bgColor 必填问题
- 修复 ChartWrapper import 顺序
- 修复 budget onDelete 空字符串问题
- 清理 profile 页面未使用 CSS
- 统一所有页面 header 为 sticky 定位
- 修复导航栏返回按钮不统一
- 添加导出功能 loading 状态
- 优化 scroll-into-view 延迟
---
 .../components/CategoryIcon/CategoryIcon.vue  |   6 +-
 .../components/ChartWrapper/ChartWrapper.vue  |   4 +-
 client/src/components/Icon/Icon.vue           |  90 +++++++
 client/src/components/Numpad/Numpad.vue       |   6 +-
 .../components/SaveSuccess/SaveSuccess.vue    |   4 +-
 client/src/components/SvgIcon/SvgIcon.vue     |  70 ------
 .../TransactionItem/TransactionItem.vue       |  19 +-
 client/src/pages/add/index.vue                |  43 ++--
 client/src/pages/bills/index.vue              |  19 +-
 client/src/pages/budget/index.vue             |  38 ++-
 client/src/pages/category-manage/index.vue    |  34 ++-
 client/src/pages/index/index.vue              |  52 ++--
 client/src/pages/profile/index.vue            |  54 ++--
 client/src/pages/stats/index.vue              |  25 +-
 .../src/static/icons/alert-circle-light.png   | Bin 0 -> 836 bytes
 client/src/static/icons/arrow-left-dark.png   | Bin 0 -> 367 bytes
 client/src/static/icons/arrow-left-gray.png   | Bin 0 -> 380 bytes
 client/src/static/icons/arrow-right-gray.png  | Bin 0 -> 375 bytes
 client/src/static/icons/arrow-right-pale.png  | Bin 0 -> 377 bytes
 client/src/static/icons/bell-gray.png         | Bin 0 -> 713 bytes
 client/src/static/icons/calendar-gray.png     | Bin 0 -> 378 bytes
 client/src/static/icons/check-white.png       | Bin 0 -> 372 bytes
 .../src/static/icons/chevron-right-light.png  | Bin 0 -> 345 bytes
 client/src/static/icons/edit-gray.png         | Bin 0 -> 719 bytes
 client/src/static/icons/edit-light.png        | Bin 0 -> 705 bytes
 client/src/static/icons/trash-orange.png      | Bin 0 -> 369 bytes
 client/src/static/icons/trash-red.png         | Bin 0 -> 354 bytes
 client/src/static/icons/trash-white.png       | Bin 0 -> 322 bytes
 client/src/static/icons/trend-down-red.png    | Bin 0 -> 504 bytes
 client/src/static/icons/trend-up-green.png    | Bin 0 -> 506 bytes
 client/src/static/icons/user-gray.png         | Bin 0 -> 557 bytes
 client/src/static/icons/user-white.png        | Bin 0 -> 480 bytes
 client/src/utils/request.ts                   |  67 ++---
 scripts/gen-icons.js                          | 238 ------------------
 34 files changed, 318 insertions(+), 451 deletions(-)
 create mode 100644 client/src/components/Icon/Icon.vue
 delete mode 100644 client/src/components/SvgIcon/SvgIcon.vue
 create mode 100644 client/src/static/icons/alert-circle-light.png
 create mode 100644 client/src/static/icons/arrow-left-dark.png
 create mode 100644 client/src/static/icons/arrow-left-gray.png
 create mode 100644 client/src/static/icons/arrow-right-gray.png
 create mode 100644 client/src/static/icons/arrow-right-pale.png
 create mode 100644 client/src/static/icons/bell-gray.png
 create mode 100644 client/src/static/icons/calendar-gray.png
 create mode 100644 client/src/static/icons/check-white.png
 create mode 100644 client/src/static/icons/chevron-right-light.png
 create mode 100644 client/src/static/icons/edit-gray.png
 create mode 100644 client/src/static/icons/edit-light.png
 create mode 100644 client/src/static/icons/trash-orange.png
 create mode 100644 client/src/static/icons/trash-red.png
 create mode 100644 client/src/static/icons/trash-white.png
 create mode 100644 client/src/static/icons/trend-down-red.png
 create mode 100644 client/src/static/icons/trend-up-green.png
 create mode 100644 client/src/static/icons/user-gray.png
 create mode 100644 client/src/static/icons/user-white.png
 delete mode 100644 scripts/gen-icons.js

diff --git a/client/src/components/CategoryIcon/CategoryIcon.vue b/client/src/components/CategoryIcon/CategoryIcon.vue
index adf8de1..439b224 100644
--- a/client/src/components/CategoryIcon/CategoryIcon.vue
+++ b/client/src/components/CategoryIcon/CategoryIcon.vue
@@ -7,13 +7,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   label: string
   color: string
-  bgColor: string
+  bgColor?: string
   size?: 'sm' | 'md' | 'lg'
   selected?: boolean
-}>()
+}>(), { bgColor: '' })
 
 const sizeMap = { sm: 64, md: 88, lg: 112 }
 const fontMap = { sm: 28, md: 36, lg: 48 }
diff --git a/client/src/components/ChartWrapper/ChartWrapper.vue b/client/src/components/ChartWrapper/ChartWrapper.vue
index 85ebb08..c5f46d6 100644
--- a/client/src/components/ChartWrapper/ChartWrapper.vue
+++ b/client/src/components/ChartWrapper/ChartWrapper.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, nextTick } from 'vue'
+import { ref, onMounted, watch, nextTick, getCurrentInstance } from 'vue'
 // @ts-ignore
 import uCharts from '@qiun/ucharts/u-charts.min.js'
 
@@ -60,8 +60,6 @@ function drawChart() {
     })
 }
 
-import { getCurrentInstance } from 'vue'
-
 function onTap(e: any) {
   chartInstance?.touchLegend(e)
   emit('tap', e)
diff --git a/client/src/components/Icon/Icon.vue b/client/src/components/Icon/Icon.vue
new file mode 100644
index 0000000..8511cd9
--- /dev/null
+++ b/client/src/components/Icon/Icon.vue
@@ -0,0 +1,90 @@
+<template>
+  <image v-if="iconSrc" class="icon" :src="iconSrc" :style="sizeStyle" mode="aspectFit" />
+  <view v-else class="icon-fallback" :style="sizeStyle">?</view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  name: string
+  size?: number
+  color?: string
+}>(), { size: 40, color: '#2D1B1B' })
+
+// 图标路径映射表：name + color -> PNG 文件路径
+const iconMap: Record<string, Record<string, string>> = {
+  arrowLeft: {
+    '#2D1B1B': '/static/icons/arrow-left-dark.png',
+    '#8B7E7E': '/static/icons/arrow-left-gray.png',
+  },
+  arrowRight: {
+    '#8B7E7E': '/static/icons/arrow-right-gray.png',
+    '#E0D6D0': '/static/icons/arrow-right-pale.png',
+  },
+  calendar: {
+    '#8B7E7E': '/static/icons/calendar-gray.png',
+  },
+  edit: {
+    '#8B7E7E': '/static/icons/edit-gray.png',
+    '#BFB3B3': '/static/icons/edit-light.png',
+  },
+  'alert-circle': {
+    '#BFB3B3': '/static/icons/alert-circle-light.png',
+  },
+  user: {
+    '#8B7E7E': '/static/icons/user-gray.png',
+    '#FFFFFF': '/static/icons/user-white.png',
+  },
+  bell: {
+    '#8B7E7E': '/static/icons/bell-gray.png',
+  },
+  'trend-down': {
+    '#FF6B6B': '/static/icons/trend-down-red.png',
+  },
+  'trend-up': {
+    '#7BC67E': '/static/icons/trend-up-green.png',
+  },
+  chevronRight: {
+    '#BFB3B3': '/static/icons/chevron-right-light.png',
+  },
+  check: {
+    '#FFFFFF': '/static/icons/check-white.png',
+  },
+  trash: {
+    '#FF8C69': '/static/icons/trash-orange.png',
+    '#FF6B6B': '/static/icons/trash-red.png',
+    '#FFFFFF': '/static/icons/trash-white.png',
+  },
+}
+
+const iconSrc = computed(() => {
+  const variants = iconMap[props.name]
+  if (!variants) {
+    console.warn(`[Icon] 图标 "${props.name}" 不存在`)
+    return ''
+  }
+  // 精确匹配颜色，找不到则使用第一个变体
+  return variants[props.color] || Object.values(variants)[0] || ''
+})
+
+const sizeStyle = computed(() => {
+  const s = props.size + 'rpx'
+  return { width: s, height: s }
+})
+</script>
+
+<style scoped>
+.icon {
+  display: inline-block;
+}
+.icon-fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #F0E0D6;
+  border-radius: 4rpx;
+  color: #BFB3B3;
+  font-size: 20rpx;
+}
+</style>
diff --git a/client/src/components/Numpad/Numpad.vue b/client/src/components/Numpad/Numpad.vue
index 7651167..f0b4515 100644
--- a/client/src/components/Numpad/Numpad.vue
+++ b/client/src/components/Numpad/Numpad.vue
@@ -4,16 +4,16 @@
       <text class="key-text">{{ key }}</text>
     </view>
     <view class="key fn" @tap="onDelete">
-      <SvgIcon name="trash" :size="36" color="#FF8C69" />
+      <Icon name="trash" :size="36" color="#FF8C69" />
     </view>
     <view class="key eq" @tap="onConfirm">
-      <SvgIcon name="check" :size="36" color="#FFFFFF" />
+      <Icon name="check" :size="36" color="#FFFFFF" />
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
+import Icon from '@/components/Icon/Icon.vue'
 
 const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '00']
 
diff --git a/client/src/components/SaveSuccess/SaveSuccess.vue b/client/src/components/SaveSuccess/SaveSuccess.vue
index a6e350d..b087db2 100644
--- a/client/src/components/SaveSuccess/SaveSuccess.vue
+++ b/client/src/components/SaveSuccess/SaveSuccess.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="save-success" v-if="visible" @tap="hide">
     <view class="success-icon" :class="{ show: animating }">
-      <SvgIcon name="check" :size="80" color="#FFFFFF" />
+      <Icon name="check" :size="80" color="#FFFFFF" />
     </view>
     <text class="success-text" :class="{ show: animating }">{{ text }}</text>
   </view>
@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
+import Icon from '@/components/Icon/Icon.vue'
 
 const props = withDefaults(defineProps<{
   visible: boolean
diff --git a/client/src/components/SvgIcon/SvgIcon.vue b/client/src/components/SvgIcon/SvgIcon.vue
deleted file mode 100644
index add8383..0000000
--- a/client/src/components/SvgIcon/SvgIcon.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <!-- #ifdef H5 -->
-  <image class="svg-icon" :src="svgData" :style="sizeStyle" mode="aspectFit" />
-  <!-- #endif -->
-  <!-- #ifdef MP-WEIXIN -->
-  <view class="svg-icon-wrap" :style="sizeStyle">
-    <rich-text :nodes="svgNode" :style="sizeStyle"></rich-text>
-  </view>
-  <!-- #endif -->
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  name: string
-  size?: number
-  color?: string
-}>(), { size: 40, color: '#2D1B1B' })
-
-const icons: Record<string, string> = {
-  close: '<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
-  bell: '<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  user: '<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  'trend-down': '<path d="M23 18l-9.5-9.5-5 5L1 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 18h6v-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  'trend-up': '<path d="M23 6l-9.5 9.5-5-5L1 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 6h6v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  calendar: '<rect x="3" y="4" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2"/><path d="M16 2v4M8 2v4M3 10h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
-  edit: '<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  budget: '<path d="M12 2v20M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  category: '<rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/><rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/><rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/><rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/>',
-  export: '<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  moon: '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  'alert-circle': '<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 8v4M12 16h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
-  info: '<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 16v-4M12 8h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
-  chevronRight: '<path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  chevronLeft: '<path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  arrowLeft: '<path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  arrowRight: '<path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  trash: '<path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-  check: '<path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
-}
-
-const svgData = computed(() => {
-  const path = icons[props.name] || ''
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${props.color}" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`
-  return 'data:image/svg+xml;base64,' + btoa(svg)
-})
-
-const svgNode = computed(() => {
-  const path = icons[props.name] || ''
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="${props.color}" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`
-})
-
-const sizeStyle = computed(() => {
-  const s = props.size + 'rpx'
-  return { width: s, height: s }
-})
-</script>
-
-<style scoped>
-.svg-icon {
-  display: inline-block;
-}
-.svg-icon-wrap {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-</style>
diff --git a/client/src/components/TransactionItem/TransactionItem.vue b/client/src/components/TransactionItem/TransactionItem.vue
index dfe60ea..b5b8a44 100644
--- a/client/src/components/TransactionItem/TransactionItem.vue
+++ b/client/src/components/TransactionItem/TransactionItem.vue
@@ -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)
diff --git a/client/src/pages/add/index.vue b/client/src/pages/add/index.vue
index 510f992..5fd4079 100644
--- a/client/src/pages/add/index.vue
+++ b/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;
 }
 
diff --git a/client/src/pages/bills/index.vue b/client/src/pages/bills/index.vue
index 94c531d..9bcc24a 100644
--- a/client/src/pages/bills/index.vue
+++ b/client/src/pages/bills/index.vue
@@ -1,7 +1,9 @@
 <template>
   <view class="page">
-    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
-    <text class="page-title">全部账单</text>
+    <view class="header-fixed">
+      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+      <text class="page-title">全部账单</text>
+    </view>
 
     <view class="tabs-wrap">
       <view class="tabs">
@@ -25,7 +27,7 @@
           :key="item.id"
           :item="item"
           :hideDate="true"
-          @tap="onEdit(item)"
+          @item-tap="onEdit(item)"
           @delete="onDelete(item)"
         />
       </view>
@@ -57,7 +59,7 @@
     </view>
 
     <view class="state-box" v-if="loadError">
-      <SvgIcon name="alert-circle" :size="48" color="#BFB3B3" />
+      <Icon name="alert-circle" :size="48" color="#BFB3B3" />
       <text class="state-text">加载失败，下拉刷新重试</text>
     </view>
 
@@ -72,7 +74,7 @@ import { ref, computed, onMounted } from 'vue'
 import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
 import { useTransactionStore } from '@/stores/transaction'
 import TransactionItem from '@/components/TransactionItem/TransactionItem.vue'
-import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
+import Icon from '@/components/Icon/Icon.vue'
 import Skeleton from '@/components/Skeleton/Skeleton.vue'
 import { statusBarHeight } from '@/utils/system'
 import { formatAmount, formatDate } from '@/utils/format'
@@ -180,6 +182,13 @@ onPullDownRefresh(() => {
   padding: 0 0 180rpx;
 }
 
+.header-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: #FFF8F0;
+}
+
 .status-bar {
   background: #FFF8F0;
 }
diff --git a/client/src/pages/budget/index.vue b/client/src/pages/budget/index.vue
index 385f02a..b0dabb7 100644
--- a/client/src/pages/budget/index.vue
+++ b/client/src/pages/budget/index.vue
@@ -1,12 +1,14 @@
 <template>
   <view class="page">
-    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
-    <view class="nav-bar">
-      <view class="nav-back" @tap="goBack">
-        <SvgIcon name="chevronLeft" :size="40" color="#2D1B1B" />
+    <view class="header-fixed">
+      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+      <view class="nav-bar">
+        <view class="nav-back" @tap="goBack">
+          <Icon name="arrowLeft" :size="36" color="#2D1B1B" />
+        </view>
+        <text class="nav-title">预算设置</text>
+        <view class="nav-placeholder"></view>
       </view>
-      <text class="nav-title">预算设置</text>
-      <view class="nav-placeholder"></view>
     </view>
 
     <view class="content">
@@ -64,14 +66,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useBudgetStore } from '@/stores/budget'
 import { useStatsStore } from '@/stores/stats'
 import { formatAmount, getCurrentMonth } from '@/utils/format'
 import { statusBarHeight } from '@/utils/system'
 import BudgetBar from '@/components/BudgetBar/BudgetBar.vue'
 import Numpad from '@/components/Numpad/Numpad.vue'
-import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
+import Icon from '@/components/Icon/Icon.vue'
 
 const budgetStore = useBudgetStore()
 const statsStore = useStatsStore()
@@ -130,7 +132,11 @@ function onInput(key: string) {
 }
 
 function onDelete() {
-  amountStr.value = amountStr.value.slice(0, -1)
+  if (amountStr.value.length > 1) {
+    amountStr.value = amountStr.value.slice(0, -1)
+  } else {
+    amountStr.value = '0'
+  }
 }
 
 async function onConfirm() {
@@ -164,6 +170,13 @@ function goBack() {
   padding-bottom: 120rpx;
 }
 
+.header-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: #FFF8F0;
+}
+
 .status-bar {
   background: #FFF8F0;
 }
@@ -175,11 +188,14 @@ function goBack() {
 }
 
 .nav-back {
-  width: 72rpx;
-  height: 72rpx;
+  width: 88rpx;
+  height: 88rpx;
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: 50%;
+
+  &:active { background: #F0E0D6; }
 }
 
 .nav-title {
diff --git a/client/src/pages/category-manage/index.vue b/client/src/pages/category-manage/index.vue
index db8d2f4..3072362 100644
--- a/client/src/pages/category-manage/index.vue
+++ b/client/src/pages/category-manage/index.vue
@@ -1,12 +1,14 @@
 <template>
   <view class="page">
-    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
-    <view class="header">
-      <view class="back" @tap="uni.navigateBack()">
-        <SvgIcon name="arrowLeft" :size="36" color="#2D1B1B" />
+    <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">分类管理</text>
+        <view style="width: 88rpx;"></view>
       </view>
-      <text class="title">分类管理</text>
-      <view style="width: 88rpx;"></view>
     </view>
 
     <view class="tabs-wrap">
@@ -24,7 +26,7 @@
           <text class="cat-badge" v-if="cat.is_custom">自定义</text>
         </view>
         <view class="cat-actions" v-if="cat.is_custom" @tap="onDelete(cat)">
-          <SvgIcon name="trash" :size="28" color="#FF6B6B" />
+          <Icon name="trash" :size="28" color="#FF6B6B" />
         </view>
       </view>
     </view>
@@ -52,7 +54,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useCategoryStore } from '@/stores/category'
 import CategoryIcon from '@/components/CategoryIcon/CategoryIcon.vue'
-import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
+import Icon from '@/components/Icon/Icon.vue'
 import { statusBarHeight } from '@/utils/system'
 
 const catStore = useCategoryStore()
@@ -65,6 +67,10 @@ const currentCategories = computed(() => catStore.getByType(tabType.value))
 
 onMounted(() => catStore.fetchCategories())
 
+function goBack() {
+  uni.navigateBack()
+}
+
 async function onAdd() {
   const name = newName.value.trim()
   if (!name) return
@@ -132,6 +138,13 @@ async function onDelete(cat: any) {
   padding: 0 0 180rpx;
 }
 
+.header-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: #FFF8F0;
+}
+
 .status-bar { background: #FFF8F0; }
 
 .header {
@@ -141,12 +154,15 @@ async function onDelete(cat: any) {
   padding: 16rpx 40rpx;
 }
 
-.back {
+.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: 600; color: #2D1B1B; }
diff --git a/client/src/pages/index/index.vue b/client/src/pages/index/index.vue
index 2b17426..19dc47c 100644
--- a/client/src/pages/index/index.vue
+++ b/client/src/pages/index/index.vue
@@ -1,13 +1,15 @@
 <template>
   <view class="page">
-    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
-    <view class="header">
-      <view class="avatar-wrap">
-        <SvgIcon name="user" :size="36" color="#8B7E7E" />
-      </view>
-      <text class="greeting">{{ greeting }}，小菜</text>
-      <view class="bell" @tap="uni.showToast({ title: '暂无通知', icon: 'none' })">
-        <SvgIcon name="bell" :size="40" color="#8B7E7E" />
+    <view class="header-fixed">
+      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+      <view class="header">
+        <view class="avatar-wrap">
+          <Icon name="user" :size="36" color="#8B7E7E" />
+        </view>
+        <text class="greeting">{{ greeting }}，小菜</text>
+        <view class="bell" @tap="showNotification">
+          <Icon name="bell" :size="40" color="#8B7E7E" />
+        </view>
       </view>
     </view>
 
@@ -68,11 +70,11 @@
 
     <view class="quick-actions">
       <view class="quick-btn" @tap="goAdd('expense')">
-        <SvgIcon name="trend-down" :size="48" color="#FF6B6B" />
+        <Icon name="trend-down" :size="48" color="#FF6B6B" />
         <text class="quick-text">记支出</text>
       </view>
       <view class="quick-btn" @tap="goAdd('income')">
-        <SvgIcon name="trend-up" :size="48" color="#7BC67E" />
+        <Icon name="trend-up" :size="48" color="#7BC67E" />
         <text class="quick-text">记收入</text>
       </view>
     </view>
@@ -83,7 +85,7 @@
     </view>
 
     <view class="tx-list" v-if="!loading && !loadError && recentTx.length > 0">
-      <TransactionItem v-for="item in recentTx" :key="item.id" :item="item" @tap="onTxTap(item)" />
+      <TransactionItem v-for="item in recentTx" :key="item.id" :item="item" :disableSwipe="true" @item-tap="onTxTap(item)" />
     </view>
 
     <view class="tx-list" v-if="loading">
@@ -98,12 +100,12 @@
     </view>
 
     <view class="state-box" v-if="loadError">
-      <SvgIcon name="alert-circle" :size="48" color="#BFB3B3" />
+      <Icon name="alert-circle" :size="48" color="#BFB3B3" />
       <text class="state-text">加载失败，下拉刷新重试</text>
     </view>
 
     <view class="state-box" v-if="!loading && !loadError && recentTx.length === 0">
-      <SvgIcon name="edit" :size="48" color="#BFB3B3" />
+      <Icon name="edit" :size="48" color="#BFB3B3" />
       <text class="state-text">还没有记录，快去记一笔吧</text>
     </view>
   </view>
@@ -119,7 +121,7 @@ import { formatAmount, formatAmountRaw } from '@/utils/format'
 import { statusBarHeight } from '@/utils/system'
 import BudgetBar from '@/components/BudgetBar/BudgetBar.vue'
 import TransactionItem from '@/components/TransactionItem/TransactionItem.vue'
-import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
+import Icon from '@/components/Icon/Icon.vue'
 import Skeleton from '@/components/Skeleton/Skeleton.vue'
 
 const txStore = useTransactionStore()
@@ -201,6 +203,10 @@ function goAdd(type: string) {
   uni.navigateTo({ url: `/pages/add/index?type=${type}` })
 }
 
+function showNotification() {
+  uni.showToast({ title: '暂无通知', icon: 'none' })
+}
+
 function onTxTap(item: any) {
   uni.navigateTo({ url: `/pages/add/index?editId=${item.id}` })
 }
@@ -217,6 +223,13 @@ function goBills() {
   padding: 0 0 180rpx;
 }
 
+.header-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: #FFF8F0;
+}
+
 .status-bar {
   background: #FFF8F0;
 }
@@ -301,7 +314,8 @@ function goBills() {
 
 .mini-stat {
   flex: 1;
-  padding: 24rpx;
+  min-width: 0;
+  padding: 24rpx 12rpx;
   border-radius: 24rpx;
   background: #FFF8F0;
   text-align: center;
@@ -316,8 +330,11 @@ function goBills() {
 
 .mini-value {
   font-family: 'Fredoka', sans-serif;
-  font-size: 36rpx;
+  font-size: 32rpx;
   font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   &.income { color: #7BC67E; }
   &.expense { color: #FF6B6B; }
@@ -413,6 +430,9 @@ function goBills() {
 .section-more {
   font-size: 24rpx;
   color: #FF8C69;
+  padding: 8rpx 0;
+
+  &:active { opacity: 0.6; }
 }
 
 .tx-list {
diff --git a/client/src/pages/profile/index.vue b/client/src/pages/profile/index.vue
index 0821ed5..377acdf 100644
--- a/client/src/pages/profile/index.vue
+++ b/client/src/pages/profile/index.vue
@@ -1,11 +1,13 @@
 <template>
   <view class="page">
-    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
-    <text class="page-title">我的</text>
+    <view class="header-fixed">
+      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+      <text class="page-title">我的</text>
+    </view>
 
     <view class="profile-card">
       <view class="p-avatar">
-        <SvgIcon name="user" :size="64" color="#FFFFFF" />
+        <Icon name="user" :size="64" color="#FFFFFF" />
       </view>
       <view class="p-info">
         <text class="p-name">小菜</text>
@@ -31,22 +33,22 @@
       <view class="menu-item" @tap="goBudget">
         <text class="mi-label">预算设置</text>
         <text class="mi-extra" v-if="budget">{{ formatAmount(budget.amount) }}</text>
-        <SvgIcon name="chevronRight" :size="24" color="#BFB3B3" />
+        <Icon name="chevronRight" :size="24" color="#BFB3B3" />
       </view>
       <view class="menu-item" @tap="goCategoryManage">
         <text class="mi-label">分类管理</text>
-        <SvgIcon name="chevronRight" :size="24" color="#BFB3B3" />
+        <Icon name="chevronRight" :size="24" color="#BFB3B3" />
       </view>
       <view class="menu-item" @tap="exportData">
         <text class="mi-label">数据导出</text>
-        <SvgIcon name="chevronRight" :size="24" color="#BFB3B3" />
+        <Icon name="chevronRight" :size="24" color="#BFB3B3" />
       </view>
     </view>
 
     <view class="menu-card mt">
       <view class="menu-item" @tap="showAbout = true">
         <text class="mi-label">关于小菜</text>
-        <SvgIcon name="chevronRight" :size="24" color="#BFB3B3" />
+        <Icon name="chevronRight" :size="24" color="#BFB3B3" />
       </view>
     </view>
 
@@ -55,7 +57,7 @@
       <view class="modal" @tap.stop>
         <text class="about-title">小菜记账</text>
         <text class="about-version">v1.0.0</text>
-        <text class="about-desc">可爱 x 高级的个人记账小程序</text>
+        <text class="about-desc">温暖 x 轻松的个人记账小程序</text>
         <text class="about-desc">让记账从负担变成享受</text>
         <view class="modal-btns" style="margin-top: 40rpx;">
           <view class="modal-btn confirm" @tap="showAbout = false">知道了</view>
@@ -73,7 +75,7 @@ import { useBudgetStore } from '@/stores/budget'
 import { formatAmount } from '@/utils/format'
 import { statusBarHeight } from '@/utils/system'
 import { request } from '@/utils/request'
-import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
+import Icon from '@/components/Icon/Icon.vue'
 
 const txStore = useTransactionStore()
 const statsStore = useStatsStore()
@@ -115,6 +117,7 @@ function getLocalDateStr(): string {
 }
 
 async function exportData() {
+  uni.showLoading({ title: '导出中...' })
   try {
     const data = await request<any>({ url: '/transactions', data: { page: 1, pageSize: 9999 } })
     const list = data.list
@@ -149,6 +152,7 @@ async function exportData() {
     a.download = `小菜记账_${getLocalDateStr()}.csv`
     a.click()
     URL.revokeObjectURL(url)
+    uni.hideLoading()
     uni.showToast({ title: '导出成功', icon: 'success' })
     // #endif
 
@@ -156,6 +160,7 @@ async function exportData() {
     const fs = uni.getFileSystemManager()
     const filePath = `${wx.env.USER_DATA_PATH}/小菜记账_${getLocalDateStr()}.csv`
     fs.writeFileSync(filePath, csv, 'utf-8')
+    uni.hideLoading()
     uni.openDocument({
       filePath,
       fileType: 'csv',
@@ -164,6 +169,7 @@ async function exportData() {
     })
     // #endif
   } catch {
+    uni.hideLoading()
     uni.showToast({ title: '导出失败', icon: 'none' })
   }
 }
@@ -176,6 +182,13 @@ async function exportData() {
   padding: 0 0 180rpx;
 }
 
+.header-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: #FFF8F0;
+}
+
 .status-bar {
   background: #FFF8F0;
 }
@@ -346,24 +359,6 @@ async function exportData() {
   padding: 48rpx;
 }
 
-.modal-title {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: #2D1B1B;
-  display: block;
-  text-align: center;
-  margin-bottom: 32rpx;
-}
-
-.modal-input {
-  height: 96rpx;
-  background: #FFF8F0;
-  border-radius: 24rpx;
-  padding: 0 32rpx;
-  font-size: 28rpx;
-  margin-bottom: 32rpx;
-}
-
 .modal-btns {
   display: flex;
   gap: 24rpx;
@@ -379,11 +374,6 @@ async function exportData() {
   font-size: 28rpx;
   font-weight: 600;
 
-  &.cancel {
-    background: #FFF8F0;
-    color: #8B7E7E;
-  }
-
   &.confirm {
     background: linear-gradient(135deg, #FF8C69, #E67355);
     color: #FFFFFF;
diff --git a/client/src/pages/stats/index.vue b/client/src/pages/stats/index.vue
index 4c7542b..ccb3b61 100644
--- a/client/src/pages/stats/index.vue
+++ b/client/src/pages/stats/index.vue
@@ -1,15 +1,17 @@
 <template>
   <view class="page">
-    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
-    <text class="page-title">统计分析</text>
+    <view class="header-fixed">
+      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+      <text class="page-title">统计分析</text>
+    </view>
 
     <view class="month-picker">
       <view class="arrow" @tap="prevMonth">
-        <SvgIcon name="arrowLeft" :size="32" color="#8B7E7E" />
+        <Icon name="arrowLeft" :size="32" color="#8B7E7E" />
       </view>
       <text class="month-text">{{ formatMonth(currentMonth) }}</text>
       <view class="arrow" :class="{ disabled: isCurrentMonth }" @tap="nextMonth">
-        <SvgIcon name="arrowRight" :size="32" :color="isCurrentMonth ? '#E0D6D0' : '#8B7E7E'" />
+        <Icon name="arrowRight" :size="32" :color="isCurrentMonth ? '#E0D6D0' : '#8B7E7E'" />
       </view>
     </view>
 
@@ -74,7 +76,7 @@
     </view>
 
     <view class="state-box" v-if="loadError">
-      <SvgIcon name="alert-circle" :size="48" color="#BFB3B3" />
+      <Icon name="alert-circle" :size="48" color="#BFB3B3" />
       <text class="state-text">加载失败，请稍后重试</text>
     </view>
 
@@ -121,7 +123,7 @@ import { onPullDownRefresh } from '@dcloudio/uni-app'
 import { useStatsStore } from '@/stores/stats'
 import { formatAmount, formatMonth, getCurrentMonth } from '@/utils/format'
 import { statusBarHeight } from '@/utils/system'
-import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
+import Icon from '@/components/Icon/Icon.vue'
 import Skeleton from '@/components/Skeleton/Skeleton.vue'
 import ChartWrapper from '@/components/ChartWrapper/ChartWrapper.vue'
 
@@ -235,15 +237,17 @@ async function loadData() {
   }
 }
 
-// Only re-fetch category/trend data (not overview) when tab switches
+// Re-fetch all data when tab switches
 async function loadTabData() {
   try {
     await Promise.all([
+      statsStore.fetchOverview(currentMonth.value),
       statsStore.fetchCategoryStats(currentMonth.value, tabType.value),
       statsStore.fetchTrend(currentMonth.value, tabType.value),
       fetchMaxSingle(),
       fetchPrevMonthData()
     ])
+    overview.value = statsStore.overview
     categoryStats.value = statsStore.categoryStats
     trendData.value = statsStore.trendData
   } catch (e) {
@@ -311,6 +315,13 @@ function getBarWidth(amount: number) {
   padding: 0 0 180rpx;
 }
 
+.header-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: #FFF8F0;
+}
+
 .status-bar {
   background: #FFF8F0;
 }
diff --git a/client/src/static/icons/alert-circle-light.png b/client/src/static/icons/alert-circle-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..bced4e932f61abfa38a9ad8601438cb9dbb5723f
GIT binary patch
literal 836
zcmV-K1H1f*P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0008{Nkl<ZcmcFk
z&ubGw6rS0w(8Qw$g{Yv%o}>|a5ZaAYFHMtz(u+U-1bgsM&`T}~J@jDz1b<wLLX)N!
z2_`LgD460YM+I#_4<1blW_SF)H<MtJZWKeq`}Vzg^L_8l?9OgHb;7@q4fZRQGw({J
z2i5KEGH?iV91g4Ha=C^%az?E&wn432e$r~UziX|Zp}+!=0(^&*GG@VGjvR84Kh}mC
zRJOLJu*wg{m`70fO6#JEqI;e(msP!fDrmPSBt}l=l=8`?hFWO)tgitHzVE*UBMsCc
z3^Lj5QYN2&IhV_Q&J+qAy}TSsj2!34As0wf%NmG#*4F@p=a@-xWmxIV^;~Wj<B>)V
zxzvD|ay1ZI>osuqQC1$bTDQ1TOZoeiTx!6q18G+ap;FR-CjnbsWd{Bs1&jxQ`&=ak
z^Bhw{Eo1mq)?_RV+O5_d4CH}w%ZTGFzytv|Y@+3%P|E*lYuX(c&$}t~Fnle3oQtcW
zwU(N)1DxqAtm$d}o_-wsQNz}B#m>>s9vyw59|zIF!B?l3nsx^+Q)@J|3*#J*Z6$7!
z`Cw|w(09>o@Qn#?dinx=95RcG0dOO3p837W$&2)Wt%-p4k(bDrYxLuwS3_&5DLcTq
z<>x^u-@iSoINt$aZxp9nLr0O+lm@4h$yX4CI8Awcp63w%mx<PxJj7wb*0k@z%>4Wh
zoZB@_;FF@)&E}@hco4Y%8DMrW&oMQqvCbHNjWrp|4j2U4>|=QQElDQdP=N728M!rR
zK(^m9TMI*FcOVfiVHn<rYw}jr5{Z4;G7_VV9CE1vujy(awAR}Jhx1EI4G{Q>%TBP>
z8vYu$s>R~n-BRfiS6VF;CKxlvIdY(tl~c<a827BN0kb6FK3|3KDaN6!%=2DET7SYy
zJ1U+2#aJOHb4rEeQbR2?eKypfJIiO1OeD@~V^;9wcaU!ap#$R`9Pbr!$VL8Gi)}zQ
zPePE(ZQ!plixr*+CL9=N@p;}Lhuk>)1^@v6|F)x#5C8xG21!IgR09By>SsXvO(cZ?
O0000<MNUMnLSTa12ZWRW

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/arrow-left-dark.png b/client/src/static/icons/arrow-left-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..e46bb257da71d43cd0d6101115e879a5c3908e11
GIT binary patch
literal 367
zcmV-#0g(QQP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0003bNkl<ZcmeE^
zI}5@<5QHz1l(s%dA;dxiwXqOHEG?}4u~uTCR(1-4h+q+X)K(@KXFwsun5=RZf?<c-
zBYX25dz(>T{{Dc}28&x%%jNQQ+nz(?RM${}2v9ARiiTxPajpqvA#tPvcyrVDCvYr7
z+rabsSjCYDpgC?ngPQ}<yuCb~j>yIF5}?DJw}=JkGLHr5G>-!q8Os{t2YZf1Ie3Eu
zMl+D8VcR1f3hSvwSEbJ3f_L&jDL+~t1q90T1}NG>3{FmA;kt%UJst`x3Q!zF%z7I|
zgs??3z6<sr#S?%oIw7$DosgFRU64e;1LB)z2l)na?qiHp7O4Q*taiISAYJ5ZjPV7l
zI79%t5rR>zEM2$7y;Nd=)G%82`+yq&00960_;~i900006Nkl<Z0|3}#r7@ko$M*mL
N002ovPDHLkV1gNvl(7H+

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/arrow-left-gray.png b/client/src/static/icons/arrow-left-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..8bb24379f7cd6af5401510b733d21d87f15ecab9
GIT binary patch
literal 380
zcmV-?0fYXDP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0003oNkl<ZcmeE^
zv919@6ozMS=HBks_ukemJb*$XqEx6o2nmWUwwPiY5*|k-3RIpzM2lX<#QOh2vRL+z
zQAlj&&z#Ae`M=pS=R-aDdjnDnEG|*c_kY?!FolMxuCW9WpzHg8JFUk!mxI0`@kj;m
z<}e?@@jp^(@o8-Zv3T4B(0r@)#8WCm^Dk=)wJ=<Z-H~_|;KCgKDiPqyJQ3j1`~rYF
zdw9@3YtBv1Sg+8Ukwl#!81P(NNhR9E6Yh!kO4;-L698@;p$)6}lLZqwWBuDS#*?UJ
zOqu86IstHlZOC?{Ie;0qDc^;AkLUtG6PJ)gfJ?|#fGfyNz!8FnE+U@uP0+S|#Nv?(
zpi?~zm)hDA;u#=Y%;F&e(2WqZYPMlao@=SZ0IA`5-s=Mn00030|Cl0SX8-^I21!Ig
aR09B{y|OVrz(jul0000<MNUMnLSTYisit56

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/arrow-right-gray.png b/client/src/static/icons/arrow-right-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..2850cb8d65e9c82b8599d69423e4a6e696f31a02
GIT binary patch
literal 375
zcmV--0f_#IP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0003jNkl<ZcmeE^
zv1$TA5QgW%nl5#cHfizzRv{45<r(r6NnvxKg~Bx!$<qX^1W_BGKm=R0v(}aM|G`4<
zl$|-S5IlC+U3TXGZfE}+IrDb~L>sJbQ4mSmjYbbK`b*P$QGRN`PVWwLb?w~XH%%Y0
zjt(^-5eXIVKXH>ORG$IqYi^<jKvcf7Y;o)TD<J?rt(+UiASOT=h#6polmb{F1wgxA
z@4|{f6L{!3--1BS*#C3A9|gevp?Mv`GG9{w)LN~NTC<sG0=9h!BDAe=u5316Q9wT7
z)SmXFP1zcX)4sHEKEH5-e8RE4R-CnFfJNL4u!@@i=yL)acGz<iPVm5Q$9j&lgJErv
zNA=iw|NfI@GpwUS4ZxoVShtFJ(TbC<1~9oyTs~k600960?Cm+X00006Nkl<Z0{|X5
Vv@!f?{#yV5002ovPDHLkV1hx0p1%M9

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/arrow-right-pale.png b/client/src/static/icons/arrow-right-pale.png
new file mode 100644
index 0000000000000000000000000000000000000000..63b503812475ba6aee4845815553cd411d380617
GIT binary patch
literal 377
zcmV-<0fzpGP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0003lNkl<ZcmeE`
zF-yci5QX3DUTdv(;cO&ua6&2(#LnN~4;8EgQ5!8z4gw;a>D102u*tX+ES8J7Gl44(
zZplj~$?p5e<gpGL9y>s`!Ri(<GriY~yQY45S}m9RS?AvgYJkiqU=QHR`S8%x&xi6X
zCpCbGxNH3-7%PB|z>|B;m#6`VV>+9Cb)7%$A%v-O?PCsN0z?L^5Hr9E83nLF27sns
z+(xlR&bOb4|3ZLrjrZ4moty@M<ej}Fd}D1407W^!h$4+*Y!CWGiD`^)7yOl!sRn@b
z<$txrQ(`Ku5s1WB61Ki(6hLb(Ff+hnZU$J*O#s<V-K4#do-^<U3TJ=yTuf8hTEraU
z;#WdAFUsm8*4aZ1klnN>PpYDvA8XBpt_H~DG1`8>4*&oF|NojAu5thX00v1!K~w_(
Xr{uUXwf7bz00000NkvXXu0mjfGlrnz

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/bell-gray.png b/client/src/static/icons/bell-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..1eaaf85a6e0e8a3d030b8100baabda64ae0501f1
GIT binary patch
literal 713
zcmV;)0yh1LP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0007hNkl<ZcmcFk
z&ubGw6rPzh5)ie$D9u4oDb|Capa|+wMDfQ(@Tj*Qi<UM-NVCHRv1uX^J&8a515ZUk
zRJ<#SC#_QNih|V$HL;o3?@f{=$!@Y!XqWlsy_xyueX~0=Z<W~OCsv@M_3*ss6-u+S
z&rA9IcZ;U4i<!)}xb+PbDChHM{~NO?iE={9(+IZHqUn1om0B!meF}YjOJ4!3^c)HC
zObW3Jvlk$8WJswI2K(rH3Z#WGFXpvA13$7v3f#(OM-co`YesR#_b*Nt3h%CKz06=A
zedocs%^YdW<GWgKXTKMb0z=8<RbDyp8iBICliF>J%?P5GXphz!jVrLB5-A|1JkCrA
z++^Di7$-_3>{|$>PDJq{1@P)8nOv{e-?NRu2Rlw=7iIm9DkPw_-h%N_VCBZ#+%MRH
zC8PB>5dHzX?@vr5VY^C5V5<<rqWS!88mIaXv#ROz4z`^L3DD|lo3z|XjPdPa5G-_(
z(APaxDYduN^R;E;4Uy%NF?)K+Apsn_qfEkOdc)QUQodzggUHThzm1RpNqNZ*wkBCW
zzOn*1-j{o+T>@p#<KuY<q@RD4dIjrL64feSwjUrLMp8Tm8<aqRGb0f_<Pq2sj%%HL
z7fe+uEBK^$n2Rs)pfha*0y33)0>XYk;8lxAcC;QKu)X!T-3M#NEN~n~AfSk9+_4cr
zCJ15$0?3dTki6tZAmjV|@33nP1Z-;)DklM)jBD7BFJ-OAi@DqZ_)F-UbXkv+05*<O
zz!+}oC*1Up2)qv`A@+X^o^TSt{`e4?!h|K@Gd6J&du2}z+5?M|07sbi{R)DP0pr-j
vd)()OH2?qr|NkSJsnq}g00v1!K~w_(O-2Ji_WB5~00000NkvXXu0mjfeW*h9

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/calendar-gray.png b/client/src/static/icons/calendar-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..ab3f2809e44055f75a48b49eea5669964c64e306
GIT binary patch
literal 378
zcmV-=0fqjFP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0003mNkl<ZcmeEH
zK@Ng25Ny5cZ}e!q_zXXwS2?0lj(F7%_ze@|Reu8ys51>M1quX+i3bdmc6WAXHkFi#
z`0=mNAU+&kaTq@9W@zKt*Jyx(rI2!kweD%-MZq9G9<P`x0Tf|Wx%a`tC)6-`uGT;k
zN^Oyx0)3yUfQHt}6s!S=4RcbdMQ}b#f-%9p59A2Lv6r#Y;yyPJLQlSrq7R7-FBCtr
zy>BV-POsKtgKNOJ08F+DqG(-6Izb!H(nbRo3`NDj_qKG&l?SRAlnaK&6$6~BeuMh1
z<$)>&<$|H{XwZ6s;}QMW5v3gG5{7fGec<$JEo$U{vXplwl$7r-caK}kUTWYotF^ed
z2EpmH193yrx?|t<NvWZ=vQBHjm;~;i8PNAWno)yV244UG0RR7<yX`0d000I_L_t&o
Y0DT$oF?phDR{#J207*qoM6N<$f|}u>1^@s6

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/check-white.png b/client/src/static/icons/check-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa9ecf644c51eb0ea8ba9a1506ed5c1c69193fcf
GIT binary patch
literal 372
zcmV-)0gL{LP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0003gNkl<ZcmeE^
zy$ZrW5QL4rwOFc%_FAc6D?YXOTj&d@Xe&NN{05Hm&Y$E=Od%xfaGTw|8Fp{0m4d%g
zAa%h1Gom<->tGM&Zd*U;0MZ7eYtRQZU@f-*<aO9qpbaiy2CU^0FytH9T0rE(D2i_Q
z)-nr(kV_?#Kq$E<z@-Q*zz%4x%D=$mmLxQm6X*DOEX1rmcc2XzkX=Kh&A@$_iD_Fp
zM9*LX`IYmdSpf=Ts-{4XrHxoYXge{!yDcN`B$C5bu>$(xf;M1?FA<GkBVvJA;<k`~
zYo35AjK~;Y^OeXJUy!d@;>@Y_>_tFXMAZ5OUxZCgL4NAYsrBrwfGQl3BmW2RH92?u
zH&DQZL_inxfVy(iLH@@Mf^G*Cl>(_lDtttD00030|ALgP_y7O^21!IgR09C0;cPJu
S3&er|0000<MNUMnLSTYyeV<tX

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/chevron-right-light.png b/client/src/static/icons/chevron-right-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..d99f9e42d126b6df17e2c1d7eb1c107c9ca91436
GIT binary patch
literal 345
zcmV-f0jB<mP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0003FNkl<ZcmeE`
zF$=;l5QTH89i7Eh7k_{*B8uQp5b?LF2nvEA>f$dD!ByPc)x>*);!rM0i@3C0;AoHc
zC9jWY_2Z`iI1T=<Mb=tc&t{wTbb44#CKcy)QwDraP*z0Eh-kN2EUGCQ;wuqAMD}S+
zLQ0((QaAVeHuNMS09zZ3$Jd83Z9uG2wUXBR5Qr0y7vcrT1MvpDAv%sb+@D}qr1hM8
zv4Q|!O1H0GY=Z#!xkwT#w(!$AVMFf4@&-U034%2cN3xJGQJp_}0kVp-zH$Qch&ute
zi#RDu*uujnB*@1Wp8b^b1U&iRb&TS;*G-ZO_dz8Ba2NGQqb9FL7IExE1YjWVDgaIg
rUjP6A|Nn0Ln#lkF00v1!K~w_(DQ0#t54qw300000NkvXXu0mjf_B)H?

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/edit-gray.png b/client/src/static/icons/edit-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3ba7c433cce325379c1faf179e95de268f5ad0a
GIT binary patch
literal 719
zcmV;=0x<oFP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0007nNkl<Zcmcds
zO>fgM7<QZlZX7_c0XN1F0)#klg3<D|AFwk*@Dqx*R$8@2UZUmDF){wa4jd6DkkF=4
zzK%%TfWj^u*v6z?rX7~V-t(qO)pm*%wbLp;b^QAE^SriS+ngQZZ$XGl^_iKGPRc_O
zSgclu=4-VTDdkUt^WSyHdGAk8pC+M!1zuFEX9LUn!VKd+2zP*8gRybjw%-aNcq~vC
zVtC$hmY}?jT4kbETLnS8P~@RyHDI7+Y4Rw#qNKczb^zQw5k*&H0WRet43D8agj!d^
zw6h&KW23PBvBI!8IXCy$RB8`x2{37zK`fvcdq@VXU$N}EMkYLOoct(qEX!wnk6`SY
z9fr4``Tjq$N2d7!_T#|2DItEu0%)897z`h&)`3Vs{t2_a0KX>4$4b7x(Q9X%KSe*|
z^p_VzvS(Re;Xj&0ekYB**IpK46Mp#xQgVu%$d85Ltu%5X@3j*-A=eE0CC?==2zf36
zZ0IsgAI|L!O;Ys0M#JYo(Js+*AueOYHDHtSoHmrmlfy;%-%RcBVK|@-Tp3-5Q7eGE
z<sJ>h3|5JpmJ2hY{O`&l@<~v@m2o%ujw`JII*a6mtT~V9UW5D_#JcjI`gH(Db~ny@
z8qFBICV+DgTkBjF*tA6}fM|bV^tMv!4ZcfUsT;UPF4A(ro~vjDKvn=wRy=QF%5`5(
zdfs;ksa(v7lU5+{8K^okfh`IXd0(KqA1pY|gJfLHm3+4@JFM#p8Sol4kdE0en&V{l
zA>)>b1LvSs#|_pJkerv$@d~#8KwkwrzX6UVI|xdh1e_WbA=b;YvyYH5XMpS%P4n7S
zTz428Pv{CK&J_Cq00960htdeG00006Nkl<Z0|2DBh(J1^8AkvB002ovPDHLkV1jg^
BLNfpW

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/edit-light.png b/client/src/static/icons/edit-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..f37dd8eeca7c71e55eb212801b3a4dd80cd1b373
GIT binary patch
literal 705
zcmV;y0zUnTP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0007ZNkl<Zcmcds
z%We}f6tz8#*n^-2c9b9l2(h3WD4C`YQ7Ikuu|)_zA)k;>fM4i>C8C|qP@#lL!()lW
z4hVF^g0>*BK`b&EyXU&&C{0^;+Ek5vV$b#UId`tF$AX>UuNnl`YGF9sO?e^$)upAu
zy6@K<DZh#&`5vvTylI5tc@pYdps~7o(c%1qVr(3Q|2Sj+nNm|pyB$_46`=*9AQ*b<
z`-_q9Zve`I2qc|GktcDy#yF?6G!gxc#BpvzAcpO3ab)DC7GP37gYsjn90Y8wZ6;0R
zc+P|Hhm*^>?%dqZfmW*patS+VWxON6*rYZH;TAoQTQEg_6uFG!_aGWZVC#ue_Y2e0
zzsRl}rw*Spz-#b)F#_jcU=yWMgL)f?#1Y~ha()GVO_9ruPR`D5_S#!<{1o%d2+;UY
z5XpcLAK{qSkxTi&MBZzExUjGVzw82roFXUkwv_iw<V4<UCvrljH#jbNCV_s)GYMcr
ztMvMC?rf+o(S0@=K6{!qML2NRvEmkTzD0FT8%pH*a50w0T+`SwX7%OeHLTfn7_9=F
z^CB(88$?7->C*KNa)_=cX%&$VL2+I{KL&J~RX{1_rk<A(*-KQ*Cy4E;|8)Mq&MJUa
zCYn)<=RtmnBJWNM?ACUez&EV^3%ml#5V+&c%v_~(;W<;Y3gBB(0L}vQ!1Hm>`^-6q
zP9|>cWEIdJeg2)Az#j^<76epgG(0kJVNIlqG*>$AeC%pu5K_`XvE66~&Y`-h!~vKd
zLzW5%QRa-jfaN!E+_njhMI63zH-VssVyUz-=6R1$DHj0Sjb@u00>=~jgcGO1HUIzs
n|Nl;T=9T~e00v1!K~w_(wON5ctLG?V00000NkvXXu0mjf%soRb

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/trash-orange.png b/client/src/static/icons/trash-orange.png
new file mode 100644
index 0000000000000000000000000000000000000000..7fb75efbb9525cba5376590cdc7244f848923883
GIT binary patch
literal 369
zcmV-%0gnEOP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0003dNkl<ZcmeEH
zOK!q25S@v7fl5`&Y5GysUZO%>7dBB#dx$EPx+&Rol?A5&Avg^PZUD+Kjy)!r$PN;0
zP^?UzXZ$8Fev0A<PCUE<^xbJu@|IE3nK9CC6tzroeDCNLfQWv%xeY)!jLucm+J@t-
zZBxGhz_X@Cci2m@91y`h=<%qb`W_OvRBhP%n<^{^zNZtDUm2_fE5QDaId*)O4!173
zXMHSdRzM0z!nHid3b4Nq94HHFen>cdPm)^!DI6OcfuN&}MU6#42ZDt2{EC)p-;{K3
z71jy*>B^x~^p<<7EE;J-K9T=^2!ZmU?g2rQ0v~*KY9=|xfG_}pg{jm4oHIXzi&gBB
z_jZ6^{TY6wFZh{W*FO*XE#|*s{6BXEHUIzs|NnDO%hmt@00v1!K~w_(+Z?bl=MbS_
P00000NkvXXu0mjf_CS{a

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/trash-red.png b/client/src/static/icons/trash-red.png
new file mode 100644
index 0000000000000000000000000000000000000000..4bc34284aead4347ad4baf48ce2b19aa231dbe98
GIT binary patch
literal 354
zcmV-o0iFJdP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0003ONkl<ZcmeE{
zT@JxO5XWc41tfyg_=s=`5%0V>3JLYz2d5yyX$VIU>px9r({0(3)QeR1XF6Z|ZzoN+
zLO=d_1<Z8XGP79-&cLLQSSU5Vd-MvRaRJ7l3DQeql9QTr&iZ}<=3!jf;q{u6(BsjK
za?Jh6zWMVD5Y?m)8=u4`;mzh4`}NqqG*$rfJpgCU+L4Z{@5vuDX9YA+h&AS}`&a>t
zp$AwKa{UcXUl0t`w*nd{+Li*j6D>znjwp8mxds3E7Tx5z@kwrr{RGtNp%e8cd$J=k
zW*-+E(de8H?|jtnfGo9g9g!6vniJ6$T*0U7Ld+pmtJ3TAWCS<}&Nv4~paGn7*yFc&
zwVLp9d2x0pq9*_V0RR8Pcs)%3000I_L_t&o0CGF4F+)de5C8xG07*qoM6N<$g1kPL
A!2kdN

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/trash-white.png b/client/src/static/icons/trash-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..887f54452416c3742b7ccdcc03f0d016d158002c
GIT binary patch
literal 322
zcmV-I0lof-P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0002@Nkl<ZcmeE{
zZ3==w5QeQA1W}%*527v+(G@yMXYfa-D8x=<)DZ%EMx0eQb2qR*q0HmB^RcfEqQl_F
zN2@@VWg$e6f^8C$T-bJxtpYS2VFy#NO=6Oh8arp!E`d!^IUiUD@db#j<n#%bz(^X|
z`zpQ)v7}g!3*YFB00WMpX4+8;Ru(P!SaU`|10DIN?qdXa<RuI=A=lqv^{sVn1T@gK
z?**I_?MKv)$T<OL!GFF*4|#6B$}{mkP^&+kytmrZG@?sUkkII5)Sp32y<F!s2^`3r
z;10faqc8&L#g+CZz&{{`Elj}ILJIdFLgns35WD~Y0RR8@2}=k7000I_L_t&o00Wz)
UG1oua2LJ#707*qoM6N<$g16U!@Bjb+

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/trend-down-red.png b/client/src/static/icons/trend-down-red.png
new file mode 100644
index 0000000000000000000000000000000000000000..76ce42003c2b4bc6bd20adfb9716c2a72f0c6778
GIT binary patch
literal 504
zcmV<U0SEqxP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00054Nkl<ZcmeEE
zy-or_5T4!KmBvnEi_&UiWsqp+lMsFi9>K&npx{V&8G|B?mA1mQVr#n>#&3p$$Q{QS
z4>~scWp`%3oo{D$EbVyg1#%0#`x0@p`NXZ(E4SOnxzG6r!ICitxOYiW^uo2;3HDo^
zmOSr{m_LZ<6#GG*h-8Yan_RCS;ZE+frqlT%-@gWPjBLs(l2I-Rj!cK(b;;VH+PJuB
zS~*k^=c<~CF=cY@Ihl#t@PmH_5JcAUC^1w(e5T+3j57)KvhOcns4s=Bexi_OvkTlw
z@!(6%rGT7hCZ2bNeF&6LjuAH+=d!9T!EtVSy?2yym6s?hI&%O#t_UCqsfcqG>?c48
zwSLo;XoAvJ^c)UdfAi8^SOx7SB>*RBxtyDSyf~!GV5?v37;3{0a}3P8Fp<ex0g&e+
z%p!6RyQ;ykNlx`kgAk4NkI)GEXE8BTK+a7NOij1@AgkC}P!Z3QvW6-WMWY3Gqrign
zmsS4+4FGNklmMND1*B5|7NFavh`J1pJrx#^AemtPE-ZjQx&_Qy1i@ipfy~#(2YZ3I
u5ZTKQ00030|94f@!~g&Q21!IgR09A8$Hy_!jP=9-0000<MNUMnLSTa2HsN^y

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/trend-up-green.png b/client/src/static/icons/trend-up-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..81460c70e5ac99ae5fbe2d568de5658a835f3c52
GIT binary patch
literal 506
zcmV<W0R{evP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00056Nkl<ZcmeEE
z%}&BV5Z>L?yC;9HDv2k(7(*HXJ@_&{LJ8Ou=^OYkCMHIq4OhJxgsXb;0j#axx3o?9
zsU;8+50IJ8&g^{i&CH_2ihpZ@!Ug~T71jO5L)~viGu3N;t#$$_HkT%7o2`qs=}2m%
zf*m}{5Sq%;1W6^UXKl;S@Zs-4Q<6Uk2&#LHE8DZT0Lm5X$=XHn4iZ?rk4a3Nwd4}8
zI6z$?<?Xi&yYw|;;={N!j7Nk^P!_MaW%m<jEi(x+9UbT_Axa?YFdqBb&}SUZsCW?6
zvc(Y>Qv`8GU0f10jFdXYnL90^({z&QyrAM%-FM__kwRdq=zfeqgE9}rUAkrag%&81
z?4e`d>e)xMh;ip=A}}XAzcHQjw%NK&3F2|R7&M52;4A^r(#PEZ3X<@d7CM#(e@Zlg
z?tJu6`^e~{*x0y;369S=&Tml4%sgIXRq5iP!M_-HPEd`-vPsFA@eM;&gov(TtMrq*
zJgel7afi#o;>girpV}YTtwXB=1s@ej5g_Lk<L7pc`-MfhrgPFZox^#?U4%tH@*==_
wF>8XtP5lA@0RR8sv+Owl000I_L_t&o0Bp3_F&+9kGynhq07*qoM6N<$f&#PY)c^nh

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/user-gray.png b/client/src/static/icons/user-gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..dcdbb42b83b8e9c3191f8e570d38bb95f6cfbbfe
GIT binary patch
literal 557
zcmV+|0@D47P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0005vNkl<Zcmd2*
zu}Z^G6uqxa5nNnU&_Qq(6vPh@MI6L05Oi~K5Ye_!Xb5ScVq2B2ofN-7L=bfF14JC%
z1VQQ`D7aKhp67-Xnl`zqRl$<edvkB@IeB@>iP0bb{)a%(G?#%J;MD`?OWiC!as?nv
zgXk2P1_nHEepWKgZJdjTC;);*Oz#3Ut@WCY#YS8pcWXqYvT4pE4?RQyt@VyOsr6<m
zmpe{bR?P)+LXCS4k+=#`fRvhHlKy!7oMS6K8;vXPe9DV~K^7qT;HkHIy^muMG*LXL
z-mHlN7{22RjYMLOV=EGd;XZq%^=)gtJr@PgEc1XOs$j!cik3BekjaefWwWbVsS5XE
zN|iW<0UTj1q8;15z-IC$4q-JX<T%d_!+26k9YJ&uy{&EAZtg`Okto0u$y{#VahwU{
zRp1fC4~SK+p?8Q}JR${nI-SqoCvAHj7{jW@5!boKy(n}g5Je*O0|j6Yt=^+?E`j|i
z)SEg4K-TU((hYKt{VCL&d;)kCJG=+aTS<uWCZ9l%_wX%Bi1H?%0K8|C$%4Fx>k`7e
z$uB@O%p@C@_0I7-$P@}M-u0tibVIv<Tl~$xc7bbr{+B-x=$Q8j;BA@3=fBXaK+wET
vpjTpP?h60_|Nq!N3|9aE00v1!K~w_(0hi}7wqwU{00000NkvXXu0mjf%`@?+

literal 0
HcmV?d00001

diff --git a/client/src/static/icons/user-white.png b/client/src/static/icons/user-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..e07e5274cebd54300fe1127ff772b1e55f355b21
GIT binary patch
literal 480
zcmV<60U!Q}P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0004%Nkl<Zcmd3m
zu}T9$5QaT1ENwIp3&A>|AU=R7Vj(_(pq*_H1z*7;ilntN_yi(?poI@0Vwp}5Bo=~&
zmCgB0n1j3B+u3*|kTBoP?(EL|x3^>_Cr11m4}mmIci<Vm6&Y_2a`@;8D0o7l8(4uE
zMaH+R9Wgh}6rjKs*{9HheW)ukmRO5D8^nTU3XpXSV$CE;I?z)(1e+jco+2i&Diz=k
zTzk~OviedN6ZqAvY4v4psw|krVgj$aab11hW#9fKA9Tktfiq2LbD6tPgF5UHZ-ZD%
z9wAHtF7%#6xx_jAHGIMcT)`|HvM0L>roNd1vYi6w_y%0UJG_C68?0S0HZ3Y3*%a!+
z0W82G$ha$OF$NNd6|vS!1-Qg~?_p}1^rv8N@&qX5_8#j6Wlj21us0P1DDL$hzPD*8
zNPi0Urh)*Qz1~C2G}NU(1$&b#u%y+>dXFvzUG{${^d?uJCh5G@kNE#U&X?|=SKoK8
zKtDLlhb!<z@dv1CUVcG<W3Itw)#~JW`2~Thg{{0l00030|4X5ft^fc421!IgR09An
WwWTo+2%u{K0000<MNUMnLSTZfLdz2X

literal 0
HcmV?d00001

diff --git a/client/src/utils/request.ts b/client/src/utils/request.ts
index 3406882..148f5bc 100644
--- a/client/src/utils/request.ts
+++ b/client/src/utils/request.ts
@@ -1,9 +1,5 @@
-// API 基础地址 - 上线后改成真实域名
-let BASE_URL = 'http://106.14.208.43:3000/api'
-if (typeof wx !== 'undefined' && wx.getSystemInfoSync) {
-  // 微信小程序环境使用 HTTPS 域名（上线后配置）
-  // BASE_URL = 'https://your-domain.com/api'
-}
+// API 基础地址
+const BASE_URL = 'https://xiaocai.j35.site/api'
 
 interface RequestOptions {
   url: string
@@ -48,10 +44,12 @@ export function request<T = any>(options: RequestOptions): Promise<T> {
                 reject({ code: 40100, message: '未登录' })
               }).finally(() => { isRedirectingToLogin = false })
             } else {
-              // 小程序环境重新触发 wx.login
-              uni.showToast({ title: '请重新登录', icon: 'none' })
-              setTimeout(() => { reLogin(); isRedirectingToLogin = false }, 1500)
-              reject({ code: 40100, message: '未登录' })
+              // 小程序环境自动重新登录
+              reLogin().then(() => {
+                request(options).then(resolve).catch(reject)
+              }).catch(() => {
+                reject({ code: 40100, message: '未登录' })
+              }).finally(() => { isRedirectingToLogin = false })
             }
           } else {
             reject({ code: 40100, message: '未登录' })
@@ -76,25 +74,38 @@ export function request<T = any>(options: RequestOptions): Promise<T> {
 }
 
 // 微信小程序自动重新登录
-function reLogin() {
-  // #ifdef MP-WEIXIN
-  uni.login({
-    provider: 'weixin',
-    success: async (loginRes) => {
-      if (loginRes.code) {
-        try {
-          const data = await request<{ token: string; userId: number }>({
-            url: '/auth/login',
-            method: 'POST',
-            data: { code: loginRes.code }
-          })
-          uni.setStorageSync('xc:token', data.token)
-          uni.setStorageSync('xc:userId', data.userId)
-        } catch (e) {
-          console.error('[Auth] Re-login failed:', e)
+function reLogin(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    // #ifdef MP-WEIXIN
+    uni.login({
+      provider: 'weixin',
+      success: async (loginRes) => {
+        if (loginRes.code) {
+          try {
+            const data = await request<{ token: string; userId: number }>({
+              url: '/auth/login',
+              method: 'POST',
+              data: { code: loginRes.code }
+            })
+            uni.setStorageSync('xc:token', data.token)
+            uni.setStorageSync('xc:userId', data.userId)
+            resolve()
+          } catch (e) {
+            console.error('[Auth] Re-login failed:', e)
+            reject(e)
+          }
+        } else {
+          reject(new Error('wx.login failed'))
         }
+      },
+      fail: (err) => {
+        console.error('[Auth] wx.login failed:', err)
+        reject(err)
       }
-    }
+    })
+    // #endif
+    // #ifndef MP-WEIXIN
+    resolve()
+    // #endif
   })
-  // #endif
 }
diff --git a/scripts/gen-icons.js b/scripts/gen-icons.js
deleted file mode 100644
index 9ed25d9..0000000
--- a/scripts/gen-icons.js
+++ /dev/null
@@ -1,238 +0,0 @@
-/**
- * 生成 Tab Bar 图标 PNG 文件 (81x81)
- * 使用 Node.js 内置模块，无需安装额外依赖
- */
-const fs = require('fs')
-const path = require('path')
-const zlib = require('zlib')
-
-const SIZE = 81
-const OUT_DIR = path.join(__dirname, '../client/src/static/icons')
-
-// 颜色
-const INACTIVE = [191, 179, 179]   // #BFB3B3
-const ACTIVE = [255, 140, 105]     // #FF8C69
-const TRANSPARENT = [0, 0, 0, 0]
-
-function createPNG(pixels) {
-  // PNG signature
-  const signature = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10])
-
-  // IHDR chunk
-  const ihdr = Buffer.alloc(13)
-  ihdr.writeUInt32BE(SIZE, 0)
-  ihdr.writeUInt32BE(SIZE, 4)
-  ihdr[8] = 8   // bit depth
-  ihdr[9] = 6   // color type: RGBA
-  ihdr[10] = 0  // compression
-  ihdr[11] = 0  // filter
-  ihdr[12] = 0  // interlace
-
-  // Raw image data: filter byte (0) + RGBA pixels per row
-  const rawData = Buffer.alloc(SIZE * (1 + SIZE * 4))
-  for (let y = 0; y < SIZE; y++) {
-    const rowOffset = y * (1 + SIZE * 4)
-    rawData[rowOffset] = 0 // no filter
-    for (let x = 0; x < SIZE; x++) {
-      const srcIdx = (y * SIZE + x) * 4
-      const dstIdx = rowOffset + 1 + x * 4
-      rawData[dstIdx] = pixels[srcIdx]
-      rawData[dstIdx + 1] = pixels[srcIdx + 1]
-      rawData[dstIdx + 2] = pixels[srcIdx + 2]
-      rawData[dstIdx + 3] = pixels[srcIdx + 3]
-    }
-  }
-
-  const compressed = zlib.deflateSync(rawData)
-
-  function makeChunk(type, data) {
-    const typeBuffer = Buffer.from(type, 'ascii')
-    const length = Buffer.alloc(4)
-    length.writeUInt32BE(data.length, 0)
-    const combined = Buffer.concat([typeBuffer, data])
-    const crc = crc32(combined)
-    return Buffer.concat([length, combined, crc])
-  }
-
-  const ihdrChunk = makeChunk('IHDR', ihdr)
-  const idatChunk = makeChunk('IDAT', compressed)
-  const iendChunk = makeChunk('IEND', Buffer.alloc(0))
-
-  return Buffer.concat([signature, ihdrChunk, idatChunk, iendChunk])
-}
-
-// CRC32 table
-const crcTable = new Uint32Array(256)
-for (let n = 0; n < 256; n++) {
-  let c = n
-  for (let k = 0; k < 8; k++) {
-    c = (c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1)
-  }
-  crcTable[n] = c
-}
-
-function crc32(buf) {
-  let crc = 0xFFFFFFFF
-  for (let i = 0; i < buf.length; i++) {
-    crc = crcTable[(crc ^ buf[i]) & 0xFF] ^ (crc >>> 8)
-  }
-  const result = Buffer.alloc(4)
-  result.writeUInt32BE((crc ^ 0xFFFFFFFF) >>> 0, 0)
-  return result
-}
-
-function makePixels(drawFn, color) {
-  const pixels = new Uint8Array(SIZE * SIZE * 4)
-  // Fill transparent
-  for (let i = 0; i < pixels.length; i += 4) {
-    pixels[i + 3] = 0
-  }
-  drawFn(pixels, color)
-  return pixels
-}
-
-function setPixel(pixels, x, y, r, g, b, a = 255) {
-  if (x < 0 || x >= SIZE || y < 0 || y >= SIZE) return
-  const idx = (y * SIZE + x) * 4
-  // Alpha blending
-  const srcA = a / 255
-  const dstA = pixels[idx + 3] / 255
-  const outA = srcA + dstA * (1 - srcA)
-  if (outA > 0) {
-    pixels[idx] = Math.round((r * srcA + pixels[idx] * dstA * (1 - srcA)) / outA)
-    pixels[idx + 1] = Math.round((g * srcA + pixels[idx + 1] * dstA * (1 - srcA)) / outA)
-    pixels[idx + 2] = Math.round((b * srcA + pixels[idx + 2] * dstA * (1 - srcA)) / outA)
-    pixels[idx + 3] = Math.round(outA * 255)
-  }
-}
-
-function drawLine(pixels, x0, y0, x1, y1, r, g, b, thickness = 2) {
-  const dx = Math.abs(x1 - x0)
-  const dy = Math.abs(y1 - y0)
-  const sx = x0 < x1 ? 1 : -1
-  const sy = y0 < y1 ? 1 : -1
-  let err = dx - dy
-  while (true) {
-    for (let tx = -thickness; tx <= thickness; tx++) {
-      for (let ty = -thickness; ty <= thickness; ty++) {
-        if (tx * tx + ty * ty <= thickness * thickness) {
-          setPixel(pixels, x0 + tx, y0 + ty, r, g, b)
-        }
-      }
-    }
-    if (x0 === x1 && y0 === y1) break
-    const e2 = 2 * err
-    if (e2 > -dy) { err -= dy; x0 += sx }
-    if (e2 < dx) { err += dx; y0 += sy }
-  }
-}
-
-function drawCircle(pixels, cx, cy, radius, r, g, b, filled = true) {
-  for (let y = -radius; y <= radius; y++) {
-    for (let x = -radius; x <= radius; x++) {
-      const dist = Math.sqrt(x * x + y * y)
-      if (filled ? dist <= radius : (dist >= radius - 1.5 && dist <= radius + 0.5)) {
-        setPixel(pixels, cx + x, cy + y, r, g, b)
-      }
-    }
-  }
-}
-
-function drawRect(pixels, x, y, w, h, r, g, b) {
-  for (let dy = 0; dy < h; dy++) {
-    for (let dx = 0; dx < w; dx++) {
-      setPixel(pixels, x + dx, y + dy, r, g, b)
-    }
-  }
-}
-
-// === Icon drawing functions ===
-
-function drawHome(pixels, color) {
-  const [r, g, b] = color
-  const cx = 40, cy = 40
-  // House body (rectangle)
-  drawRect(pixels, 24, 38, 34, 26, r, g, b)
-  // Roof (triangle)
-  for (let i = 0; i < 20; i++) {
-    drawLine(pixels, cx, 18, cx - 20 + i * 2, 38, r, g, b, 1)
-  }
-  // Door
-  drawRect(pixels, 35, 50, 12, 14, 255, 248, 240)
-}
-
-function drawChart(pixels, color) {
-  const [r, g, b] = color
-  // Three bars
-  drawRect(pixels, 18, 45, 12, 20, r, g, b)
-  drawRect(pixels, 35, 30, 12, 35, r, g, b)
-  drawRect(pixels, 52, 20, 12, 45, r, g, b)
-  // Base line
-  drawRect(pixels, 14, 65, 54, 2, r, g, b)
-}
-
-function drawBill(pixels, color) {
-  const [r, g, b] = color
-  // Document shape
-  drawRect(pixels, 22, 14, 38, 54, r, g, b)
-  // Inner white area
-  drawRect(pixels, 28, 22, 26, 38, 255, 248, 240)
-  // Lines on document
-  drawRect(pixels, 31, 30, 20, 2, r, g, b)
-  drawRect(pixels, 31, 38, 16, 2, r, g, b)
-  drawRect(pixels, 31, 46, 20, 2, r, g, b)
-  drawRect(pixels, 31, 54, 12, 2, r, g, b)
-  // Corner fold
-  drawLine(pixels, 52, 14, 60, 22, r, g, b, 1)
-}
-
-function drawUser(pixels, color) {
-  const [r, g, b] = color
-  // Head (circle)
-  drawCircle(pixels, 40, 28, 12, r, g, b)
-  // Body (half circle / arc)
-  for (let x = -24; x <= 24; x++) {
-    const y = Math.round(Math.sqrt(Math.max(0, 24 * 24 - x * x)))
-    for (let dy = 0; dy < 3; dy++) {
-      setPixel(pixels, 40 + x, 58 - y + dy, r, g, b)
-    }
-  }
-  // Fill body
-  for (let y = 48; y <= 66; y++) {
-    for (let x = 16; x <= 64; x++) {
-      const dx = x - 40
-      const dy = y - 58
-      if (dy * dy + dx * dx <= 26 * 26) {
-        setPixel(pixels, x, y, r, g, b)
-      }
-    }
-  }
-}
-
-// Generate all icons
-const icons = [
-  { name: 'home', draw: drawHome },
-  { name: 'chart', draw: drawChart },
-  { name: 'bill', draw: drawBill },
-  { name: 'user', draw: drawUser },
-]
-
-if (!fs.existsSync(OUT_DIR)) {
-  fs.mkdirSync(OUT_DIR, { recursive: true })
-}
-
-for (const icon of icons) {
-  // Inactive
-  const inactivePixels = makePixels(icon.draw, INACTIVE)
-  const inactivePNG = createPNG(inactivePixels)
-  fs.writeFileSync(path.join(OUT_DIR, `${icon.name}.png`), inactivePNG)
-
-  // Active
-  const activePixels = makePixels(icon.draw, ACTIVE)
-  const activePNG = createPNG(activePixels)
-  fs.writeFileSync(path.join(OUT_DIR, `${icon.name}-active.png`), activePNG)
-
-  console.log(`Generated: ${icon.name}.png, ${icon.name}-active.png`)
-}
-
-console.log('All icons generated successfully!')