From e110cd5c5d7cc06b2e12b14c9cbc875994a3c4a9 Mon Sep 17 00:00:00 2001
From: wangxiaogang <1433729587@qq.com>
Date: Thu, 4 Jun 2026 17:06:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=85=A8=E9=9D=A2=E4=BF=AE=E5=A4=8D=202?=
 =?UTF-8?q?2=20=E9=A1=B9=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

严重 Bug:
- NaN 金额校验绕过（add 页面 parseFloat 空字符串）
- 4 个页面补充 waitForReady（add/budget/category-manage/group-manage）
- 导出 Loading 遮罩不消失（profile exportData 缺 hideLoading）
- Store 吞掉请求错误不 re-throw（transaction/stats/budget/user）
- 分类排序 SQL 拼接改参数化查询（category PUT /sort）
- 备份接口添加管理员权限检查（backup requireAdmin）

中等问题:
- 群组加入竞态条件改为 INSERT IGNORE
- 统计页切月/切Tab添加 loadSeq 防竞态
- stats store 补全 loading 状态 + Overview 初始值补全 7 字段
- 保存成功后返回不再弹「放弃修改」确认框
- 群组管理创建/加入添加 saving 双重提交保护
- 预算页添加 onShow 刷新
- 服务端输入校验（name/color/invite_code/微信code）

UI/样式:
- 触摸目标: bell/nav-back/nav-save→88rpx, avatar-badge→64rpx, action-btn→80rpx
- :active 反馈: bell/profile-card/identity-card/id-manage/arrow/action-btn/group-btn/cat-info
- 内联样式改动态绑定（4处 spacer 使用 capsuleRight）
- FAB 文字+改用 Icon 组件
- prefers-reduced-motion 动画降级（Skeleton/profile/budget/add）
- 胶囊适配（add/category-manage/group-manage）
- CategoryIcon !important 改为 iconStyle 计算属性

文档:
- CLAUDE.md 补充 SaveSuccess/ChartWrapper 组件 + category/budget/index API
---
 CLAUDE.md                                     |  7 +-
 client/src/api/stats.ts                       |  3 +
 client/src/api/transaction.ts                 |  2 +
 .../components/CategoryIcon/CategoryIcon.vue  |  3 +-
 .../components/ChartWrapper/ChartWrapper.vue  |  2 +-
 client/src/components/Skeleton/Skeleton.vue   |  6 ++
 .../TransactionItem/TransactionItem.vue       | 68 +++++++++++++++++--
 client/src/pages/add/index.vue                | 19 ++++--
 client/src/pages/bills/index.vue              | 14 ++++
 client/src/pages/budget/index.vue             | 25 +++++++
 client/src/pages/category-manage/index.vue    | 26 +++----
 client/src/pages/group-manage/index.vue       | 33 +++++++--
 client/src/pages/index/index.vue              | 15 ++--
 client/src/pages/profile-edit/index.vue       | 20 ++++--
 client/src/pages/profile/index.vue            | 21 +++++-
 client/src/pages/stats/index.vue              | 29 +++++---
 client/src/stores/budget.ts                   |  3 +-
 client/src/stores/stats.ts                    | 24 +++++--
 client/src/stores/transaction.ts              |  3 +-
 client/src/stores/user.ts                     |  1 +
 server/src/routes/auth.ts                     |  4 +-
 server/src/routes/backup.ts                   | 20 +++++-
 server/src/routes/category.ts                 | 29 ++++++--
 server/src/routes/group.ts                    | 21 +++---
 server/src/routes/transaction.ts              |  4 +-
 25 files changed, 314 insertions(+), 88 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 86eb176..c3721e7 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -75,8 +75,10 @@ client/src/
 ├── components/         # 公共组件
 │   ├── BudgetBar/      # 预算进度条
 │   ├── CategoryIcon/   # 分类图标 (首字+颜色)
+│   ├── ChartWrapper/   # uCharts 图表封装
 │   ├── Icon/           # 图标组件 (PNG 映射)
 │   ├── Numpad/         # 数字键盘
+│   ├── SaveSuccess/    # 保存成功动画
 │   ├── Skeleton/       # 骨架屏
 │   └── TransactionItem/ # 交易列表项
 ├── stores/             # Pinia stores
@@ -89,9 +91,12 @@ client/src/
 ├── api/                # API 封装
 │   ├── auth.ts         # 登录接口
 │   ├── transaction.ts  # 交易接口
+│   ├── category.ts     # 分类接口
+│   ├── budget.ts       # 预算接口
 │   ├── stats.ts        # 统计接口
 │   ├── user.ts         # 用户信息接口 (含头像上传)
-│   └── group.ts        # 群组接口
+│   ├── group.ts        # 群组接口
+│   └── index.ts        # barrel 导出
 ├── utils/
 │   ├── format.ts       # 金额/日期格式化
 │   ├── request.ts      # HTTP 请求封装 (401 自动重登录+队列重试)
diff --git a/client/src/api/stats.ts b/client/src/api/stats.ts
index 482eb7f..1165250 100644
--- a/client/src/api/stats.ts
+++ b/client/src/api/stats.ts
@@ -4,8 +4,11 @@ import { request } from '@/utils/request'
 export interface Overview {
   expense: number
   income: number
+  expenseCount: number
+  incomeCount: number
   count: number
   daily: number
+  dailyIncome: number
 }
 
 /** 分类统计 */
diff --git a/client/src/api/transaction.ts b/client/src/api/transaction.ts
index 5f0e5e4..bb130d5 100644
--- a/client/src/api/transaction.ts
+++ b/client/src/api/transaction.ts
@@ -3,6 +3,7 @@ import { request } from '@/utils/request'
 /** 交易记录 */
 export interface Transaction {
   id: number
+  user_id: number
   amount: number
   type: 'expense' | 'income'
   category_id: number
@@ -13,6 +14,7 @@ export interface Transaction {
   category_color?: string
   group_id?: number | null
   creator_nickname?: string
+  creator_avatar?: string
 }
 
 /** 交易列表响应 */
diff --git a/client/src/components/CategoryIcon/CategoryIcon.vue b/client/src/components/CategoryIcon/CategoryIcon.vue
index 439b224..e873533 100644
--- a/client/src/components/CategoryIcon/CategoryIcon.vue
+++ b/client/src/components/CategoryIcon/CategoryIcon.vue
@@ -19,7 +19,7 @@ const sizeMap = { sm: 64, md: 88, lg: 112 }
 const fontMap = { sm: 28, md: 36, lg: 48 }
 
 const iconStyle = computed(() => ({
-  background: props.bgColor || (props.color + '15'),
+  background: props.selected ? '#FFE8E0' : (props.bgColor || (props.color + '15')),
   width: (sizeMap[props.size || 'md']) + 'rpx',
   height: (sizeMap[props.size || 'md']) + 'rpx',
 }))
@@ -43,6 +43,5 @@ const fontSize = computed(() => (fontMap[props.size || 'md']) + 'rpx')
 
 .selected {
   border-color: #FF8C69;
-  background: #FFE8E0 !important;
 }
 </style>
diff --git a/client/src/components/ChartWrapper/ChartWrapper.vue b/client/src/components/ChartWrapper/ChartWrapper.vue
index 0c99479..08d2fee 100644
--- a/client/src/components/ChartWrapper/ChartWrapper.vue
+++ b/client/src/components/ChartWrapper/ChartWrapper.vue
@@ -53,7 +53,7 @@ function buildConfig(ctx: any, canvas2d: boolean, cssWidth: number, cssHeight: n
     height: cssHeight,
     animation: true,
     background: '#FFFFFF',
-    padding: [20, 20, 20, 20],
+    padding: [10, 10, 10, 10],
     fontSize: 10,
     fontColor: '#8B7E7E',
     title: { show: false },
diff --git a/client/src/components/Skeleton/Skeleton.vue b/client/src/components/Skeleton/Skeleton.vue
index ef1e1f2..16911c8 100644
--- a/client/src/components/Skeleton/Skeleton.vue
+++ b/client/src/components/Skeleton/Skeleton.vue
@@ -37,4 +37,10 @@ const style = computed(() => ({
   0% { background-position: 200% 0; }
   100% { background-position: -200% 0; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+}
 </style>
diff --git a/client/src/components/TransactionItem/TransactionItem.vue b/client/src/components/TransactionItem/TransactionItem.vue
index ab56da3..a561384 100644
--- a/client/src/components/TransactionItem/TransactionItem.vue
+++ b/client/src/components/TransactionItem/TransactionItem.vue
@@ -8,7 +8,13 @@
       @touchmove="!disableSwipe && onTouchMove($event)"
       @touchend="!disableSwipe && onTouchEnd()"
     >
+      <!-- 头像（群组模式下显示他人创建者） -->
+      <view v-if="isOtherCreator" class="creator-avatar">
+        <image v-if="creatorAvatarUrl" :src="creatorAvatarUrl" class="creator-img" mode="aspectFill" />
+        <text v-else class="creator-initial">{{ item.creator_nickname?.[0] }}</text>
+      </view>
       <CategoryIcon
+        v-else
         :label="item.category_name?.[0] || '?'"
         :color="item.category_color || '#BFB3B3'"
         :bg-color="(item.category_color || '#BFB3B3') + '20'"
@@ -16,7 +22,10 @@
       />
       <view class="info">
         <text class="name">{{ item.note || item.category_name || '未分类' }}</text>
-        <text class="meta">{{ item.category_name || '未分类' }}{{ hideDate ? '' : ' · ' + formatDate(item.date) }}</text>
+        <text class="meta">
+          <text v-if="isOtherCreator" class="creator-name">{{ item.creator_nickname }} · </text>
+          {{ item.category_name || '未分类' }}{{ hideDate ? '' : ' · ' + formatDate(item.date) }}
+        </text>
       </view>
       <text class="amount" :class="item.type">{{ item.type === 'expense' ? '-' : '+' }}{{ formatAmount(item.amount) }}</text>
     </view>
@@ -27,14 +36,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { formatAmount, formatDate } from '@/utils/format'
+import { API_BASE } from '@/config'
 import Icon from '@/components/Icon/Icon.vue'
 import CategoryIcon from '@/components/CategoryIcon/CategoryIcon.vue'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   item: {
     id: number
+    user_id: number
     amount: number
     type: 'expense' | 'income'
     note?: string
@@ -42,14 +53,33 @@ withDefaults(defineProps<{
     category_name?: string
     category_icon?: string
     category_color?: string
+    creator_nickname?: string
+    creator_avatar?: string
   }
   hideDate?: boolean
-  /** 禁用滑动删除（首页预览等场景） */
   disableSwipe?: boolean
-}>(), { hideDate: false, disableSwipe: false })
+  /** 是否显示创建者信息（群组模式） */
+  showCreator?: boolean
+  /** 当前用户 ID，用于判断是否为本人记录 */
+  currentUserId?: number
+}>(), { hideDate: false, disableSwipe: false, showCreator: false, currentUserId: 0 })
+
+/** 是否为他人的记录（群组模式下，非本人的才显示创建者信息） */
+const isOtherCreator = computed(() => {
+  if (!props.showCreator || !props.item.creator_nickname) return false
+  return !props.currentUserId || props.item.user_id !== props.currentUserId
+})
 
 defineEmits(['item-tap', 'delete'])
 
+const creatorAvatarUrl = computed(() => {
+  if (!props.item.creator_avatar) return ''
+  if (props.item.creator_avatar.startsWith('http')) return props.item.creator_avatar
+  // 截取服务端根地址（去掉 /api）
+  const base = API_BASE.replace(/\/api$/, '')
+  return base + '/api/user/avatar/' + props.item.creator_avatar
+})
+
 const startX = ref(0)
 const offsetX = ref(0)
 const showDelete = ref(false)
@@ -121,6 +151,29 @@ function onTouchEnd() {
   }
 }
 
+.creator-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background: #FFF0E6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.creator-img {
+  width: 100%;
+  height: 100%;
+}
+
+.creator-initial {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #FF8C69;
+}
+
 .info {
   flex: 1;
   min-width: 0;
@@ -143,6 +196,11 @@ function onTouchEnd() {
   margin-top: 4rpx;
 }
 
+.creator-name {
+  color: #FF8C69;
+  font-weight: 500;
+}
+
 .amount {
   font-family: 'Fredoka', sans-serif;
   font-size: 32rpx;
diff --git a/client/src/pages/add/index.vue b/client/src/pages/add/index.vue
index fdd9415..11cc0e4 100644
--- a/client/src/pages/add/index.vue
+++ b/client/src/pages/add/index.vue
@@ -7,7 +7,7 @@
           <Icon name="arrowLeft" :size="36" color="#2D1B1B" />
         </view>
         <text class="title">{{ editId ? '编辑记录' : '记一笔' }}</text>
-        <view style="width: 88rpx;"></view>
+        <view :style="{ width: capsuleRight + 88 + 'px' }"></view>
       </view>
     </view>
 
@@ -57,11 +57,12 @@
 import { ref, computed, watch, onMounted, nextTick } from 'vue'
 import { useCategoryStore } from '@/stores/category'
 import { useTransactionStore } from '@/stores/transaction'
+import { waitForReady } from '@/utils/app-ready'
 import Numpad from '@/components/Numpad/Numpad.vue'
 import CategoryIcon from '@/components/CategoryIcon/CategoryIcon.vue'
 import Icon from '@/components/Icon/Icon.vue'
 import SaveSuccess from '@/components/SaveSuccess/SaveSuccess.vue'
-import { statusBarHeight } from '@/utils/system'
+import { statusBarHeight, capsuleRight } from '@/utils/system'
 
 const catStore = useCategoryStore()
 const txStore = useTransactionStore()
@@ -114,6 +115,7 @@ watch(currentCategories, (cats) => {
 })
 
 onMounted(async () => {
+  await waitForReady()
   await catStore.fetchCategories()
   const pages = getCurrentPages()
   const page = pages[pages.length - 1] as any
@@ -154,8 +156,8 @@ function onDateChange(e: any) {
 
 async function save() {
   if (saving.value) return
-  const amount = Math.round(parseFloat(amountStr.value) * 100)
-  if (amount <= 0) {
+  const amount = Math.round(parseFloat(amountStr.value || '0') * 100)
+  if (isNaN(amount) || amount <= 0) {
     uni.showToast({ title: '请输入金额', icon: 'none' })
     return
   }
@@ -188,6 +190,8 @@ async function save() {
 }
 
 function goBack() {
+  // 保存成功后直接返回，不弹确认框
+  if (showSuccess.value) return
   const hasInput = amountStr.value !== '0' || note.value
   if (hasInput) {
     uni.showModal({
@@ -365,4 +369,11 @@ function goBack() {
 .extra-input { font-size: 28rpx; color: #2D1B1B; flex: 1; }
 
 .placeholder { color: #BFB3B3; }
+
+@media (prefers-reduced-motion: reduce) {
+  .cursor {
+    animation: none;
+    opacity: 1;
+  }
+}
 </style>
diff --git a/client/src/pages/bills/index.vue b/client/src/pages/bills/index.vue
index fae420f..701c788 100644
--- a/client/src/pages/bills/index.vue
+++ b/client/src/pages/bills/index.vue
@@ -27,6 +27,8 @@
           :key="item.id"
           :item="item"
           :hideDate="true"
+          :showCreator="groupStore.isGroupMode"
+          :currentUserId="userStore.userInfo?.id"
           @item-tap="onEdit(item)"
           @delete="onDelete(item)"
         />
@@ -73,6 +75,8 @@
 import { ref, computed, onMounted } from 'vue'
 import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
 import { useTransactionStore } from '@/stores/transaction'
+import { useUserStore } from '@/stores/user'
+import { useGroupStore } from '@/stores/group'
 import { waitForReady } from '@/utils/app-ready'
 import TransactionItem from '@/components/TransactionItem/TransactionItem.vue'
 import Icon from '@/components/Icon/Icon.vue'
@@ -81,6 +85,8 @@ import { statusBarHeight } from '@/utils/system'
 import { formatAmount, formatDate } from '@/utils/format'
 
 const txStore = useTransactionStore()
+const userStore = useUserStore()
+const groupStore = useGroupStore()
 const filterType = ref('all')
 const page = ref(1)
 const pageSize = 20
@@ -151,10 +157,18 @@ async function loadTx(reset = false) {
 }
 
 function onEdit(item: any) {
+  if (groupStore.isGroupMode && item.user_id !== userStore.userInfo?.id) {
+    uni.showToast({ title: '只能编辑自己的记录', icon: 'none' })
+    return
+  }
   uni.navigateTo({ url: `/pages/add/index?editId=${item.id}` })
 }
 
 async function onDelete(item: any) {
+  if (groupStore.isGroupMode && item.user_id !== userStore.userInfo?.id) {
+    uni.showToast({ title: '只能删除自己的记录', icon: 'none' })
+    return
+  }
   uni.showModal({
     title: '删除记录',
     content: `确定删除这笔 ${item.type === 'expense' ? '支出' : '收入'} ¥${(item.amount / 100).toFixed(2)}？`,
diff --git a/client/src/pages/budget/index.vue b/client/src/pages/budget/index.vue
index 7c4aca2..d270d00 100644
--- a/client/src/pages/budget/index.vue
+++ b/client/src/pages/budget/index.vue
@@ -62,8 +62,10 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
 import { useBudgetStore } from '@/stores/budget'
 import { useStatsStore } from '@/stores/stats'
+import { waitForReady } from '@/utils/app-ready'
 import { formatAmount, getCurrentMonth } from '@/utils/format'
 import { statusBarHeight } from '@/utils/system'
 import BudgetBar from '@/components/BudgetBar/BudgetBar.vue'
@@ -86,6 +88,7 @@ function formatPreset(val: number) {
 }
 
 onMounted(async () => {
+  await waitForReady()
   loading.value = true
   try {
     await Promise.all([
@@ -104,6 +107,18 @@ onMounted(async () => {
   }
 })
 
+// 返回页面时刷新预算数据
+onShow(async () => {
+  try {
+    await Promise.all([
+      budgetStore.fetchBudget(currentMonth),
+      statsStore.fetchOverview(currentMonth)
+    ])
+    budget.value = budgetStore.budget
+    monthExpense.value = statsStore.overview.expense
+  } catch {}
+})
+
 function selectPreset(val: number) {
   amountStr.value = String(val)
 }
@@ -330,4 +345,14 @@ function goBack() {
 @keyframes blink {
   50% { opacity: 0; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .preview-skeleton {
+    animation: none;
+  }
+  .cursor {
+    animation: none;
+    opacity: 1;
+  }
+}
 </style>
diff --git a/client/src/pages/category-manage/index.vue b/client/src/pages/category-manage/index.vue
index b975755..19a027b 100644
--- a/client/src/pages/category-manage/index.vue
+++ b/client/src/pages/category-manage/index.vue
@@ -7,7 +7,7 @@
           <Icon name="arrowLeft" :size="36" color="#2D1B1B" />
         </view>
         <text class="title">分类管理</text>
-        <view style="width: 88rpx;"></view>
+        <view :style="{ width: capsuleRight + 88 + 'px' }"></view>
       </view>
     </view>
 
@@ -38,7 +38,7 @@
 
     <!-- 浮动添加按钮 -->
     <view class="fab" @tap="showAddModal = true">
-      <text class="fab-icon">+</text>
+      <Icon name="plus" :size="48" color="#FFFFFF" />
     </view>
 
     <!-- 添加弹窗 -->
@@ -112,10 +112,11 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useCategoryStore, type Category } from '@/stores/category'
+import { waitForReady } from '@/utils/app-ready'
 import { getCategoryTransactionCount } from '@/api/category'
 import CategoryIcon from '@/components/CategoryIcon/CategoryIcon.vue'
 import Icon from '@/components/Icon/Icon.vue'
-import { statusBarHeight } from '@/utils/system'
+import { statusBarHeight, capsuleRight } from '@/utils/system'
 
 const catStore = useCategoryStore()
 const tabType = ref<'expense' | 'income'>('expense')
@@ -143,7 +144,10 @@ const migrateTargets = computed(() => {
   return currentCategories.value.filter(c => c.id !== deletingCat.value?.id)
 })
 
-onMounted(() => catStore.fetchCategories())
+onMounted(async () => {
+  await waitForReady()
+  catStore.fetchCategories()
+})
 
 function goBack() {
   uni.navigateBack()
@@ -331,6 +335,9 @@ async function onMigrateConfirm() {
   align-items: center;
   gap: 16rpx;
   flex: 1;
+  padding: 8rpx 0;
+
+  &:active { opacity: 0.6; }
 }
 
 .cat-name { font-size: 28rpx; color: #2D1B1B; font-weight: 500; }
@@ -349,8 +356,8 @@ async function onMigrateConfirm() {
 }
 
 .action-btn {
-  width: 64rpx;
-  height: 64rpx;
+  width: 80rpx;
+  height: 80rpx;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -376,13 +383,6 @@ async function onMigrateConfirm() {
   &:active { transform: scale(0.95); }
 }
 
-.fab-icon {
-  font-size: 56rpx;
-  color: #FFFFFF;
-  font-weight: 300;
-  line-height: 1;
-}
-
 .color-picker {
   display: flex;
   gap: 20rpx;
diff --git a/client/src/pages/group-manage/index.vue b/client/src/pages/group-manage/index.vue
index 825c118..ef25356 100644
--- a/client/src/pages/group-manage/index.vue
+++ b/client/src/pages/group-manage/index.vue
@@ -7,7 +7,7 @@
           <Icon name="arrowLeft" :size="40" color="#2D1B1B" />
         </view>
         <text class="nav-title">一起记</text>
-        <view style="width: 72rpx;"></view>
+        <view :style="{ width: capsuleRight + 72 + 'px' }"></view>
       </view>
     </view>
 
@@ -77,15 +77,18 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useGroupStore } from '@/stores/group'
-import { statusBarHeight } from '@/utils/system'
+import { waitForReady } from '@/utils/app-ready'
+import { statusBarHeight, capsuleRight } from '@/utils/system'
 import Icon from '@/components/Icon/Icon.vue'
 
 const groupStore = useGroupStore()
 
 const newGroupName = ref('')
 const inviteCode = ref('')
+const saving = ref(false)
 
-onMounted(() => {
+onMounted(async () => {
+  await waitForReady()
   groupStore.fetchGroups()
 })
 
@@ -101,11 +104,13 @@ function copyInviteCode(code: string) {
 }
 
 async function handleCreate() {
+  if (saving.value) return
   const name = newGroupName.value.trim()
   if (!name) {
     uni.showToast({ title: '请输入群组名称', icon: 'none' })
     return
   }
+  saving.value = true
   try {
     const result = await groupStore.createGroup(name)
     newGroupName.value = ''
@@ -121,21 +126,27 @@ async function handleCreate() {
     })
   } catch (e: any) {
     uni.showToast({ title: e.message || '创建失败', icon: 'none' })
+  } finally {
+    saving.value = false
   }
 }
 
 async function handleJoin() {
+  if (saving.value) return
   const code = inviteCode.value.trim().toUpperCase()
   if (!code) {
     uni.showToast({ title: '请输入邀请码', icon: 'none' })
     return
   }
+  saving.value = true
   try {
     const result = await groupStore.joinGroup(code)
     inviteCode.value = ''
     uni.showToast({ title: `已加入「${result.name}」`, icon: 'success' })
   } catch (e: any) {
     uni.showToast({ title: e.message || '加入失败', icon: 'none' })
+  } finally {
+    saving.value = false
   }
 }
 
@@ -197,11 +208,13 @@ function handleDissolve(group: any) {
 }
 
 .nav-back {
-  width: 72rpx;
-  height: 72rpx;
+  width: 88rpx;
+  height: 88rpx;
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &:active { opacity: 0.6; }
 }
 
 .nav-title {
@@ -336,6 +349,8 @@ function handleDissolve(group: any) {
   display: flex;
   align-items: center;
   margin-top: 8rpx;
+  padding: 8rpx 0;
+  min-height: 48rpx;
   gap: 4rpx;
 }
 
@@ -363,11 +378,17 @@ function handleDissolve(group: any) {
 }
 
 .group-btn {
-  padding: 12rpx 24rpx;
+  padding: 16rpx 28rpx;
   border-radius: 16rpx;
+  min-height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &.leave { background: #FFF0E6; }
   &.dissolve { background: #FFE8E8; }
+
+  &:active { opacity: 0.7; }
 }
 
 .group-btn-text {
diff --git a/client/src/pages/index/index.vue b/client/src/pages/index/index.vue
index d211334..a135582 100644
--- a/client/src/pages/index/index.vue
+++ b/client/src/pages/index/index.vue
@@ -86,7 +86,7 @@
     </view>
 
     <view class="tx-list" v-if="!loading && !loadError && recentTx.length > 0">
-      <TransactionItem v-for="item in recentTx" :key="item.id" :item="item" :disableSwipe="true" @item-tap="onTxTap(item)" />
+      <TransactionItem v-for="item in recentTx" :key="item.id" :item="item" :disableSwipe="true" :showCreator="groupStore.isGroupMode" :currentUserId="userStore.userInfo?.id" @item-tap="onTxTap(item)" />
     </view>
 
     <view class="tx-list" v-if="loading">
@@ -214,6 +214,10 @@ function showNotification() {
 }
 
 function onTxTap(item: any) {
+  if (groupStore.isGroupMode && item.user_id !== userStore.userInfo?.id) {
+    uni.showToast({ title: '只能编辑自己的记录', icon: 'none' })
+    return
+  }
   uni.navigateTo({ url: `/pages/add/index?editId=${item.id}` })
 }
 
@@ -272,11 +276,13 @@ function goBills() {
 }
 
 .bell {
-  width: 72rpx;
-  height: 72rpx;
+  width: 88rpx;
+  height: 88rpx;
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &:active { opacity: 0.6; }
 }
 
 .overview-card {
@@ -442,7 +448,8 @@ function goBills() {
 .section-more {
   font-size: 24rpx;
   color: #FF8C69;
-  padding: 8rpx 0;
+  padding: 16rpx 24rpx;
+  margin: -16rpx -24rpx;
 
   &:active { opacity: 0.6; }
 }
diff --git a/client/src/pages/profile-edit/index.vue b/client/src/pages/profile-edit/index.vue
index a212af8..53bb887 100644
--- a/client/src/pages/profile-edit/index.vue
+++ b/client/src/pages/profile-edit/index.vue
@@ -42,6 +42,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useUserStore } from '@/stores/user'
+import { waitForReady } from '@/utils/app-ready'
 import { statusBarHeight, capsuleRight } from '@/utils/system'
 import Icon from '@/components/Icon/Icon.vue'
 
@@ -51,7 +52,8 @@ const previewUrl = ref('')
 const uploading = ref(false)
 const saving = ref(false)
 
-onMounted(() => {
+onMounted(async () => {
+  await waitForReady()
   formNickname.value = userStore.nickname
   previewUrl.value = userStore.avatarUrl
 })
@@ -125,11 +127,13 @@ async function saveProfile() {
 }
 
 .nav-back {
-  width: 72rpx;
-  height: 72rpx;
+  width: 88rpx;
+  height: 88rpx;
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &:active { opacity: 0.6; }
 }
 
 .nav-title {
@@ -141,11 +145,13 @@ async function saveProfile() {
 }
 
 .nav-save {
-  width: 72rpx;
-  height: 72rpx;
+  width: 88rpx;
+  height: 88rpx;
   display: flex;
   align-items: center;
   justify-content: center;
+
+  &:active { opacity: 0.6; }
 }
 
 .save-text {
@@ -180,8 +186,8 @@ async function saveProfile() {
   position: absolute;
   bottom: 0;
   right: 0;
-  width: 48rpx;
-  height: 48rpx;
+  width: 64rpx;
+  height: 64rpx;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.4);
   display: flex;
diff --git a/client/src/pages/profile/index.vue b/client/src/pages/profile/index.vue
index 2fb630d..a01fd0f 100644
--- a/client/src/pages/profile/index.vue
+++ b/client/src/pages/profile/index.vue
@@ -71,7 +71,7 @@
         <text class="about-version">v1.0.0</text>
         <text class="about-desc">温暖 x 轻松的个人记账小程序</text>
         <text class="about-desc">让记账从负担变成享受</text>
-        <view class="modal-btns" style="margin-top: 40rpx;">
+        <view class="modal-btns modal-btns-top">
           <view class="modal-btn confirm" @tap="showAbout = false">知道了</view>
         </view>
       </view>
@@ -275,6 +275,7 @@ async function exportData() {
     } while (allList.length < total)
 
     if (allList.length === 0) {
+      uni.hideLoading()
       uni.showToast({ title: '暂无数据', icon: 'none' })
       return
     }
@@ -361,6 +362,8 @@ async function exportData() {
   display: flex;
   align-items: center;
   gap: 32rpx;
+
+  &:active { opacity: 0.85; }
 }
 
 .p-avatar {
@@ -443,6 +446,12 @@ async function exportData() {
   100% { background-position: -200% 0; }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .p-skeleton {
+    animation: none;
+  }
+}
+
 .menu-card {
   margin: 40rpx 40rpx 0;
   background: #FFFFFF;
@@ -514,6 +523,10 @@ async function exportData() {
   gap: 24rpx;
 }
 
+.modal-btns-top {
+  margin-top: 40rpx;
+}
+
 .modal-btn {
   flex: 1;
   height: 88rpx;
@@ -546,6 +559,8 @@ async function exportData() {
   display: flex;
   align-items: center;
   gap: 20rpx;
+
+  &:active { background: #FFF0E6; }
 }
 
 .id-info {
@@ -646,8 +661,10 @@ async function exportData() {
 
 .id-manage {
   margin-top: 16rpx;
-  padding: 20rpx;
+  padding: 24rpx 20rpx;
   text-align: center;
+
+  &:active { background: #FFF0E6; border-radius: 16rpx; }
 }
 
 .id-manage-text {
diff --git a/client/src/pages/stats/index.vue b/client/src/pages/stats/index.vue
index 9a26517..cc9b128 100644
--- a/client/src/pages/stats/index.vue
+++ b/client/src/pages/stats/index.vue
@@ -30,12 +30,12 @@
       </view>
       <view class="ov-item">
         <text class="ov-label">日均</text>
-        <text class="ov-value" v-if="!loading">{{ formatAmount(overview.daily) }}</text>
+        <text class="ov-value" v-if="!loading">{{ formatAmount(tabType === 'expense' ? overview.daily : overview.dailyIncome) }}</text>
         <Skeleton v-else width="120rpx" height="40rpx" variant="rect" />
       </view>
       <view class="ov-item">
         <text class="ov-label">笔数</text>
-        <text class="ov-value" v-if="!loading">{{ overview.count }}笔</text>
+        <text class="ov-value" v-if="!loading">{{ (tabType === 'expense' ? overview.expenseCount : overview.incomeCount) }}笔</text>
         <Skeleton v-else width="80rpx" height="40rpx" variant="rect" />
       </view>
     </view>
@@ -57,8 +57,8 @@
         canvasId="categoryChart"
         type="pie"
         :chartData="categoryChartData"
-        :width="650"
-        :height="400"
+        :width="690"
+        :height="450"
       />
       <view class="chart-legend">
         <view v-for="item in categoryStats" :key="item.id" class="legend-item">
@@ -90,8 +90,8 @@
         canvasId="trendChart"
         type="line"
         :chartData="trendChartData"
-        :width="650"
-        :height="400"
+        :width="690"
+        :height="420"
       />
       <view class="trend-list">
         <view v-for="(point, i) in trendData" :key="i" class="trend-item">
@@ -140,6 +140,7 @@ const trendData = computed(() => statsStore.trendData)
 const loading = ref(true)
 const loadError = ref(false)
 const maxSingle = ref(0)
+let loadSeq = 0 // 请求序号，防止并发覆盖
 const prevMonthData = ref<any>(null)
 
 const isCurrentMonth = computed(() => currentMonth.value === getCurrentMonth())
@@ -151,9 +152,9 @@ const categoryChartData = computed(() => {
       data: categoryStats.value.map(item => ({
         name: item.name,
         value: item.amount / 100
-      })),
-      color: categoryStats.value.map(item => item.color)
+      }))
     }],
+    color: categoryStats.value.map(item => item.color),
     extra: {
       pie: {
         activeOpacity: 0.5,
@@ -238,6 +239,7 @@ watch(currentMonth, () => loadData())
 watch(tabType, () => loadTabData())
 
 async function loadData(silent = false) {
+  const seq = ++loadSeq
   try {
     if (!silent) loading.value = true
     loadError.value = false
@@ -248,16 +250,20 @@ async function loadData(silent = false) {
       fetchMaxSingle(),
       fetchPrevMonthData()
     ])
+    if (seq !== loadSeq) return
   } catch (e) {
+    if (seq !== loadSeq) return
     console.error('Stats load error:', e)
     loadError.value = true
   } finally {
-    loading.value = false
+    if (seq === loadSeq) loading.value = false
   }
 }
 
 // Re-fetch all data when tab switches
 async function loadTabData() {
+  const seq = ++loadSeq
+  loadError.value = false
   try {
     await Promise.all([
       statsStore.fetchOverview(currentMonth.value),
@@ -266,8 +272,11 @@ async function loadTabData() {
       fetchMaxSingle(),
       fetchPrevMonthData()
     ])
+    if (seq !== loadSeq) return
   } catch (e) {
+    if (seq !== loadSeq) return
     console.error('Stats tab load error:', e)
+    loadError.value = true
   }
 }
 
@@ -365,6 +374,8 @@ function getBarWidth(amount: number) {
   justify-content: center;
 
   &.disabled { opacity: 0.5; }
+
+  &:active { opacity: 0.6; }
 }
 
 .month-text {
diff --git a/client/src/stores/budget.ts b/client/src/stores/budget.ts
index a620e43..7fa3655 100644
--- a/client/src/stores/budget.ts
+++ b/client/src/stores/budget.ts
@@ -16,8 +16,9 @@ export const useBudgetStore = defineStore('budget', () => {
     try {
       const groupStore = useGroupStore()
       budget.value = await api.getBudget(month || getCurrentMonth(), groupStore.currentGroupId)
-    } catch {
+    } catch (err) {
       budget.value = null
+      throw err
     } finally {
       loading.value = false
     }
diff --git a/client/src/stores/stats.ts b/client/src/stores/stats.ts
index d99d6cc..cd56412 100644
--- a/client/src/stores/stats.ts
+++ b/client/src/stores/stats.ts
@@ -10,11 +10,13 @@ export type CategoryStat = api.CategoryStat
 export type TrendPoint = api.TrendPoint
 
 export const useStatsStore = defineStore('stats', () => {
-  const overview = ref<api.Overview>({ expense: 0, income: 0, count: 0, daily: 0 })
+  const overview = ref<api.Overview>({ expense: 0, income: 0, expenseCount: 0, incomeCount: 0, count: 0, daily: 0, dailyIncome: 0 })
   const categoryStats = ref<api.CategoryStat[]>([])
   const trendData = ref<api.TrendPoint[]>([])
+  const loading = ref(false)
 
   async function fetchOverview(month?: string) {
+    loading.value = true
     try {
       const groupStore = useGroupStore()
       const data = await api.getOverview({
@@ -24,11 +26,17 @@ export const useStatsStore = defineStore('stats', () => {
       overview.value = {
         expense: Number(data?.expense) || 0,
         income: Number(data?.income) || 0,
+        expenseCount: Number(data?.expenseCount) || 0,
+        incomeCount: Number(data?.incomeCount) || 0,
         count: Number(data?.count) || 0,
-        daily: Number(data?.daily) || 0
+        daily: Number(data?.daily) || 0,
+        dailyIncome: Number(data?.dailyIncome) || 0
       }
-    } catch {
-      overview.value = { expense: 0, income: 0, count: 0, daily: 0 }
+    } catch (err) {
+      overview.value = { expense: 0, income: 0, expenseCount: 0, incomeCount: 0, count: 0, daily: 0, dailyIncome: 0 }
+      throw err
+    } finally {
+      loading.value = false
     }
   }
 
@@ -41,8 +49,9 @@ export const useStatsStore = defineStore('stats', () => {
         amount: Number(item.amount) || 0,
         count: Number(item.count) || 0
       })) : []
-    } catch {
+    } catch (err) {
       categoryStats.value = []
+      throw err
     }
   }
 
@@ -54,10 +63,11 @@ export const useStatsStore = defineStore('stats', () => {
         ...item,
         amount: Number(item.amount) || 0
       })) : []
-    } catch {
+    } catch (err) {
       trendData.value = []
+      throw err
     }
   }
 
-  return { overview, categoryStats, trendData, fetchOverview, fetchCategoryStats, fetchTrend }
+  return { overview, categoryStats, trendData, loading, fetchOverview, fetchCategoryStats, fetchTrend }
 })
diff --git a/client/src/stores/transaction.ts b/client/src/stores/transaction.ts
index d209c4c..bd212b5 100644
--- a/client/src/stores/transaction.ts
+++ b/client/src/stores/transaction.ts
@@ -21,9 +21,10 @@ export const useTransactionStore = defineStore('transaction', () => {
       transactions.value = data.list
       total.value = data.total
       currentPage.value = data.page
-    } catch {
+    } catch (err) {
       transactions.value = []
       total.value = 0
+      throw err
     } finally {
       loading.value = false
     }
diff --git a/client/src/stores/user.ts b/client/src/stores/user.ts
index c55492c..9d9ac4c 100644
--- a/client/src/stores/user.ts
+++ b/client/src/stores/user.ts
@@ -30,6 +30,7 @@ export const useUserStore = defineStore('user', () => {
       }
     } catch (e) {
       console.error('[UserStore] fetchUserInfo error:', e)
+      throw e
     } finally {
       loading.value = false
     }
diff --git a/server/src/routes/auth.ts b/server/src/routes/auth.ts
index 0f3a9fd..2448fad 100644
--- a/server/src/routes/auth.ts
+++ b/server/src/routes/auth.ts
@@ -36,8 +36,8 @@ router.post('/demo-login', async (_req: Request, res: Response) => {
 router.post('/login', async (req: Request, res: Response) => {
   try {
     const { code } = req.body
-    if (!code) {
-      return res.status(400).json({ code: 40001, message: '缺少code参数' })
+    if (!code || typeof code !== 'string' || code.length > 128 || !/^[a-zA-Z0-9_-]+$/.test(code)) {
+      return res.status(400).json({ code: 40001, message: 'code参数无效' })
     }
 
     // 调用微信 code2session 接口
diff --git a/server/src/routes/backup.ts b/server/src/routes/backup.ts
index 4ddde0b..b42bf3a 100644
--- a/server/src/routes/backup.ts
+++ b/server/src/routes/backup.ts
@@ -4,8 +4,23 @@ import { backupDatabase, getBackupList } from '../utils/backup'
 
 const router = Router()
 
+// 管理员用户 ID 列表（逗号分隔），未配置时默认仅 ID=1
+const ADMIN_IDS = process.env.ADMIN_USER_IDS
+  ? process.env.ADMIN_USER_IDS.split(',').map(Number)
+  : [1]
+
+/** 检查是否为管理员，非管理员返回 403 */
+function requireAdmin(req: AuthRequest, res: Response): boolean {
+  if (!req.userId || !ADMIN_IDS.includes(req.userId)) {
+    res.status(403).json({ code: 40300, message: '无权限' })
+    return false
+  }
+  return true
+}
+
 // 手动触发备份
-router.post('/', async (_req: AuthRequest, res: Response) => {
+router.post('/', async (req: AuthRequest, res: Response) => {
+  if (!requireAdmin(req, res)) return
   try {
     const filepath = await backupDatabase()
     res.json({ code: 0, data: { filepath } })
@@ -16,7 +31,8 @@ router.post('/', async (_req: AuthRequest, res: Response) => {
 })
 
 // 获取备份列表
-router.get('/', async (_req: AuthRequest, res: Response) => {
+router.get('/', async (req: AuthRequest, res: Response) => {
+  if (!requireAdmin(req, res)) return
   try {
     const list = getBackupList()
     res.json({ code: 0, data: list })
diff --git a/server/src/routes/category.ts b/server/src/routes/category.ts
index 11e5645..d4253fe 100644
--- a/server/src/routes/category.ts
+++ b/server/src/routes/category.ts
@@ -24,6 +24,12 @@ router.post('/', async (req: AuthRequest, res: Response) => {
     if (!name || !icon || !color || !type) {
       return res.status(400).json({ code: 40001, message: '缺少必要参数' })
     }
+    if (typeof name !== 'string' || name.length > 50) {
+      return res.status(400).json({ code: 40001, message: '分类名称不能超过50字' })
+    }
+    if (typeof color !== 'string' || color.length > 20) {
+      return res.status(400).json({ code: 40001, message: '颜色值无效' })
+    }
     if (!['expense', 'income'].includes(type)) {
       return res.status(400).json({ code: 40002, message: '类型无效' })
     }
@@ -45,6 +51,12 @@ router.put('/:id', async (req: AuthRequest, res: Response) => {
     if (!name || !color) {
       return res.status(400).json({ code: 40001, message: '缺少必要参数' })
     }
+    if (typeof name !== 'string' || name.length > 50) {
+      return res.status(400).json({ code: 40001, message: '分类名称不能超过50字' })
+    }
+    if (typeof color !== 'string' || color.length > 20) {
+      return res.status(400).json({ code: 40001, message: '颜色值无效' })
+    }
     const [result] = await pool.query(
       'UPDATE categories SET name = ?, color = ? WHERE id = ? AND is_custom = 1 AND user_id = ?',
       [name, color, req.params.id, req.userId]
@@ -121,16 +133,21 @@ router.post('/:id/migrate', async (req: AuthRequest, res: Response) => {
 router.put('/sort', async (req: AuthRequest, res: Response) => {
   try {
     const { ids } = req.body // [id1, id2, id3, ...]
-    if (!Array.isArray(ids) || ids.length === 0) {
+    if (!Array.isArray(ids) || ids.length === 0 || ids.length > 100) {
+      return res.status(400).json({ code: 40001, message: '参数无效' })
+    }
+    // 校验每个元素必须是正整数
+    if (!ids.every((id: any) => Number.isInteger(id) && id > 0)) {
       return res.status(400).json({ code: 40001, message: '参数无效' })
     }
 
-    // 构建 CASE WHEN 语句批量更新
-    const cases = ids.map((id: number, index: number) => `WHEN ${Number(id)} THEN ${index}`).join(' ')
-    const idList = ids.map((id: number) => Number(id)).join(',')
+    // 使用参数化查询构建 CASE WHEN 语句
+    const whenClauses = ids.map(() => `WHEN ? THEN ?`).join(' ')
+    const whenParams: number[] = ids.flatMap((id: number, index: number) => [id, index])
+    const placeholders = ids.map(() => '?').join(',')
     await pool.query(
-      `UPDATE categories SET sort_order = CASE id ${cases} END WHERE id IN (${idList}) AND (user_id = 0 OR user_id = ?)`,
-      [req.userId]
+      `UPDATE categories SET sort_order = CASE id ${whenClauses} END WHERE id IN (${placeholders}) AND (user_id = 0 OR user_id = ?)`,
+      [...whenParams, ...ids, req.userId]
     )
     res.json({ code: 0 })
   } catch (err) {
diff --git a/server/src/routes/group.ts b/server/src/routes/group.ts
index 522ee40..c7cb8a1 100644
--- a/server/src/routes/group.ts
+++ b/server/src/routes/group.ts
@@ -129,8 +129,8 @@ router.get('/:id', async (req: AuthRequest, res: Response) => {
 router.post('/join', async (req: AuthRequest, res: Response) => {
   try {
     const { invite_code } = req.body
-    if (!invite_code || typeof invite_code !== 'string') {
-      return res.status(400).json({ code: 40001, message: '邀请码不能为空' })
+    if (!invite_code || typeof invite_code !== 'string' || invite_code.length > 10) {
+      return res.status(400).json({ code: 40001, message: '邀请码无效' })
     }
 
     const [groupRows] = await pool.query(
@@ -142,19 +142,14 @@ router.post('/join', async (req: AuthRequest, res: Response) => {
       return res.status(404).json({ code: 40400, message: '邀请码无效' })
     }
 
-    // 检查是否已是成员
-    const [existing] = await pool.query(
-      'SELECT id FROM group_members WHERE group_id = ? AND user_id = ?',
-      [group.id, req.userId]
-    )
-    if ((existing as any[]).length > 0) {
-      return res.status(400).json({ code: 40002, message: '你已经是该群组成员' })
-    }
-
-    await pool.query(
-      'INSERT INTO group_members (group_id, user_id, role) VALUES (?, ?, ?)',
+    // 使用 INSERT IGNORE 避免并发加入时的竞态条件
+    const [result] = await pool.query(
+      'INSERT IGNORE INTO group_members (group_id, user_id, role) VALUES (?, ?, ?)',
       [group.id, req.userId, 'member']
     )
+    if ((result as any).affectedRows === 0) {
+      return res.status(400).json({ code: 40002, message: '你已经是该群组成员' })
+    }
 
     res.json({ code: 0, data: { group_id: group.id, name: group.name } })
   } catch (err) {
diff --git a/server/src/routes/transaction.ts b/server/src/routes/transaction.ts
index 605cbb6..d3cdc8f 100644
--- a/server/src/routes/transaction.ts
+++ b/server/src/routes/transaction.ts
@@ -18,7 +18,7 @@ router.get('/:id', async (req: AuthRequest, res: Response) => {
     const [rows] = await pool.query(
       `SELECT t.id, t.user_id, t.amount, t.type, t.category_id, t.note, DATE_FORMAT(t.date, '%Y-%m-%d') as date, t.created_at, t.updated_at, t.group_id,
               c.name as category_name, c.icon as category_icon, c.color as category_color,
-              u.nickname as creator_nickname
+              u.nickname as creator_nickname, u.avatar_url as creator_avatar
        FROM transactions t
        LEFT JOIN categories c ON t.category_id = c.id
        LEFT JOIN users u ON t.user_id = u.id
@@ -85,7 +85,7 @@ router.get('/', async (req: AuthRequest, res: Response) => {
     const [rows] = await pool.query(
       `SELECT t.id, t.user_id, t.amount, t.type, t.category_id, t.note, DATE_FORMAT(t.date, '%Y-%m-%d') as date, t.created_at, t.updated_at, t.group_id,
               c.name as category_name, c.icon as category_icon, c.color as category_color,
-              u.nickname as creator_nickname
+              u.nickname as creator_nickname, u.avatar_url as creator_avatar
        FROM transactions t
        LEFT JOIN categories c ON t.category_id = c.id
        LEFT JOIN users u ON t.user_id = u.id