优化移动端ui

backend/internal/modules/order/handler.go

@@ -375,6 +375,7 @@ func parseID(c *gin.Context) (uint64, bool) {
 }
 
 func writeOrderError(c *gin.Context, err error) {
+	println("DEBUG ORDER ERROR:", err.Error())
 	switch {
 	case errors.Is(err, ErrDependencyUnavailable):
 		response.ServiceUnavailable(c, "数据库未连接")

backend/internal/modules/wallet/repository.go

@@ -171,6 +171,7 @@ func ensureAccount(tx *gorm.DB, userID uint64) error {
 }
 
 func applyEntry(account *model.WalletAccount, entry Entry) (float64, error) {
+	println("DEBUG APPLY:", entry.UserID, "type:", entry.BalanceType, "dir:", entry.Direction, "amt:", fmt.Sprintf("%.2f", entry.Amount), "avail:", fmt.Sprintf("%.2f", account.AvailableBalance), "frozen:", fmt.Sprintf("%.2f", account.FrozenBalance))
 	entry.Amount = roundWalletMoney(entry.Amount)
 	account.AvailableBalance = roundWalletMoney(account.AvailableBalance)
 	account.FrozenBalance = roundWalletMoney(account.FrozenBalance)

frontend/components.d.ts

@@ -44,6 +44,7 @@ declare module 'vue' {
     VanEmpty: typeof import('vant/es')['Empty']
     VanField: typeof import('vant/es')['Field']
     VanIcon: typeof import('vant/es')['Icon']
+    VanList: typeof import('vant/es')['List']
     VanLoading: typeof import('vant/es')['Loading']
     VanNoticeBar: typeof import('vant/es')['NoticeBar']
     VanPopup: typeof import('vant/es')['Popup']

frontend/src/views/mobile/MobileMessagesView.vue

@@ -1,22 +1,184 @@
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { ref, computed, onMounted } from 'vue'
-import MobileBottomNav from "@/components/MobileBottomNav.vue";
+import { useRouter } from 'vue-router'
+import { showToast } from 'vant'
+import MobileBottomNav from '@/components/MobileBottomNav.vue'
+import { fetchNotifications, markNotificationRead, type NotificationItem } from '@/api/notifications'
+import { formatDateMinute } from '@/utils/time'
 
-const router = useRouter();
+const router = useRouter()
+const loading = ref(false)
+const refreshing = ref(false)
+const finished = ref(false)
+const notifications = ref<NotificationItem[]>([])
+const page = ref(1)
+const pageSize = 15
+const total = ref(0)
+
+onMounted(() => {
+  onRefresh()
+})
+
+async function loadNotifications(isRefresh = false) {
+  if (isRefresh) {
+    page.value = 1
+    finished.value = false
+  }
+
+  loading.value = true
+  try {
+    const res = await fetchNotifications(page.value, pageSize)
+    if (isRefresh) {
+      notifications.value = res.items
+    } else {
+      notifications.value = [...notifications.value, ...res.items]
+    }
+    total.value = res.total
+
+    if (notifications.value.length >= res.total || res.items.length === 0) {
+      finished.value = true
+    } else {
+      page.value += 1
+    }
+  } catch {
+    showToast({ message: '获取消息失败', icon: 'cross' })
+    finished.value = true
+  } finally {
+    loading.value = false
+    refreshing.value = false
+  }
+}
+
+function onRefresh() {
+  refreshing.value = true
+  loadNotifications(true)
+}
+
+function onLoad() {
+  if (loading.value || finished.value) return
+  loadNotifications(false)
+}
+
+async function handleMarkRead(id: number) {
+  try {
+    await markNotificationRead(id)
+    const index = notifications.value.findIndex(item => item.id === id)
+    if (index !== -1) {
+      // 局部更新状态，避免整站刷新
+      const item = notifications.value[index]
+      if (item) {
+        item.read_at = new Date().toISOString()
+      }
+    }
+  } catch {
+    showToast({ message: '标记已读失败', icon: 'cross' })
+  }
+}
+
+// 全部已读逻辑
+const hasUnread = computed(() => notifications.value.some(item => !item.read_at))
+
+async function markAllRead() {
+  const unreadItems = notifications.value.filter(item => !item.read_at)
+  if (unreadItems.length === 0) return
+
+  showToast({
+    type: 'loading',
+    message: '处理中...',
+    forbidClick: true,
+    duration: 0
+  })
+
+  try {
+    await Promise.all(unreadItems.map(item => markNotificationRead(item.id)))
+    showToast({ message: '已全部标记为已读', icon: 'passed' })
+    onRefresh()
+  } catch {
+    showToast({ message: '操作失败，请重试', icon: 'cross' })
+  }
+}
+
+function getNotificationBadge(type: string) {
+  const map: Record<string, { text: string; class: string }> = {
+    listing_review: { text: '上架审核', class: 'badge-review' },
+    listing_admin: { text: '后台管控', class: 'badge-admin' },
+    order_state: { text: '订单状态', class: 'badge-order' },
+    dispute_state: { text: '纠纷仲裁', class: 'badge-dispute' }
+  }
+  return map[type] || { text: '通知', class: 'badge-system' }
+}
 </script>
 
 <template>
   <main class="mobile-messages">
+    <!-- 顶部导航栏 -->
     <header class="page-header">
       <button class="back-btn" @click="router.back()">
         <van-icon name="arrow-left" :size="20" />
       </button>
-      <h1>消息</h1>
+      <h1>消息中心</h1>
-      <span class="header-spacer"></span>
+      <button v-if="hasUnread" class="header-action-btn" @click="markAllRead">
+        全部已读
+      </button>
+      <span v-else class="header-spacer"></span>
     </header>
 
-    <!-- 空状态 -->
+    <!-- 下拉刷新 + 上拉加载列表 -->
-    <van-empty description="暂无消息" image="search" />
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="scroll-container">
+      <van-list
+        v-model:loading="loading"
+        :finished="finished"
+        finished-text="没有更多消息了"
+        @load="onLoad"
+        :immediate-check="false"
+      >
+        <!-- 空状态 -->
+        <van-empty
+          v-if="!loading && notifications.length === 0"
+          description="暂无消息记录"
+          class="empty-state"
+        />
+
+        <div v-else class="messages-list">
+          <div
+            v-for="item in notifications"
+            :key="item.id"
+            class="message-card"
+            :class="{ unread: !item.read_at }"
+            @click="!item.read_at && handleMarkRead(item.id)"
+          >
+            <!-- 头部类型与未读红点 -->
+            <div class="card-header-row">
+              <span class="type-badge" :class="getNotificationBadge(item.type).class">
+                {{ getNotificationBadge(item.type).text }}
+              </span>
+              <span class="time-label">{{ formatDateMinute(item.created_at) }}</span>
+            </div>
+
+            <!-- 消息主体 -->
+            <h3 class="message-title">
+              <span v-if="!item.read_at" class="unread-dot"></span>
+              {{ item.title }}
+            </h3>
+            <p class="message-content">{{ item.content }}</p>
+
+            <!-- 操作按钮 -->
+            <div class="card-actions" v-if="item.biz_type === 'order' && item.biz_id">
+              <van-button
+                size="mini"
+                type="primary"
+                plain
+                round
+                class="action-btn"
+                @click.stop="router.push(`/m/orders/${item.biz_id}`)"
+              >
+                查看订单
+              </van-button>
+            </div>
+          </div>
+        </div>
+      </van-list>
+    </van-pull-refresh>
 
     <!-- 底部导航 -->
     <MobileBottomNav />
@@ -26,21 +188,23 @@ const router = useRouter();
 <style scoped>
 .mobile-messages {
   min-height: 100dvh;
-  background: #f5f7fa;
+  background: #f6f8fa;
-  padding-bottom: calc(56px + env(safe-area-inset-bottom));
+  padding-bottom: calc(64px + env(safe-area-inset-bottom));
 }
 
 /* ========== 顶部导航 ========== */
 .page-header {
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: 100;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   height: 48px;
   padding: 0 12px;
-  background: #fff;
+  background: rgba(255, 255, 255, 0.94);
-  border-bottom: 1px solid #eee;
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(243, 244, 246, 0.8);
 }
 
 .page-header h1 {
@@ -48,6 +212,7 @@ const router = useRouter();
   margin: 0;
   font-size: 17px;
   font-weight: 700;
+  color: #111827;
   text-align: center;
 }
 
@@ -58,11 +223,128 @@ const router = useRouter();
   place-items: center;
   border: none;
   background: none;
-  color: #333;
+  color: #374151;
   cursor: pointer;
 }
 
+.header-action-btn {
+  border: none;
+  background: none;
+  color: #1477ff;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  padding: 0 8px;
+  white-space: nowrap;
+}
+
 .header-spacer {
   width: 36px;
 }
+
+/* ========== 列表内容 ========== */
+.scroll-container {
+  min-height: calc(100dvh - 48px - 64px - env(safe-area-inset-bottom));
+}
+
+.empty-state {
+  padding: 80px 0;
+}
+
+.messages-list {
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* ========== 消息卡片 ========== */
+.message-card {
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 14px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02), 0 1px 4px rgba(0, 0, 0, 0.02);
+  border: 1px solid rgba(243, 244, 246, 0.9);
+  transition: transform 0.15s ease, background 0.15s ease;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.message-card:active {
+  transform: scale(0.98);
+}
+
+/* 未读态加点微弱阴影背景 */
+.message-card.unread {
+  border-color: rgba(20, 119, 255, 0.15);
+  background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
+}
+
+.card-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.type-badge {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  font-weight: 700;
+}
+
+/* 消息类型徽章颜色 */
+.badge-review { color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
+.badge-admin { color: #ef4444; background: rgba(239, 68, 68, 0.08); }
+.badge-order { color: #1477ff; background: rgba(20, 119, 255, 0.08); }
+.badge-dispute { color: #8b5cf6; background: rgba(139, 92, 246, 0.08); }
+.badge-system { color: #6b7280; background: rgba(107, 114, 128, 0.08); }
+
+.time-label {
+  font-size: 10px;
+  color: #9ca3af;
+}
+
+.message-title {
+  margin: 2px 0 0;
+  font-size: 14px;
+  font-weight: 800;
+  color: #111827;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.unread-dot {
+  width: 6px;
+  height: 6px;
+  background-color: #ef4444;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.message-content {
+  margin: 0;
+  font-size: 12px;
+  color: #4b5563;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+.card-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 4px;
+  padding-top: 8px;
+  border-top: 1px solid #f3f4f6;
+}
+
+.action-btn {
+  height: 24px !important;
+  padding: 0 10px !important;
+  font-size: 11px !important;
+  font-weight: 700 !important;
+}
 </style>