From ab2df50c0dba7d3796a5e56845ab51c9c789d2b1 Mon Sep 17 00:00:00 2001
From: wlkjyy <wlkjyy@vip.qq.com>
Date: Mon, 15 Dec 2025 20:34:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=94=A8=E6=88=B7=E5=92=8C?=
 =?UTF-8?q?=E5=B7=A5=E5=8D=95=E7=AE=A1=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化用户列表页面，移除头像批量加载导致的大量detail请求
- 移除工单列表自动刷新功能，避免页面跳转问题
- 将用户余额管理整合到用户列表操作菜单中
- 重构用户余额管理页面，采用现代化企业扁平化设计
- 移除用户余额管理独立菜单项
- 优化页面交互体验和视觉效果
---
 src/config/menus.js               |    4 -
 src/views/ticket/TicketDetail.vue |  208 +++-
 src/views/ticket/TicketList.vue   |  193 ++--
 src/views/user/UserBalance.vue    | 1596 +++++++----------------------
 src/views/user/UserDetail.vue     |    6 +
 src/views/user/UserList.vue       |   12 +
 6 files changed, 662 insertions(+), 1357 deletions(-)

diff --git a/src/config/menus.js b/src/config/menus.js
index 842fb99..923d5cb 100644
--- a/src/config/menus.js
+++ b/src/config/menus.js
@@ -24,10 +24,6 @@ export const menus = [
         path: '/user/list',
         title: '用户列表'
       },
-      {
-        path: '/user/balance',
-        title: '用户余额管理'
-      },
       {
         path: '/user/group',
         title: '用户组管理'
diff --git a/src/views/ticket/TicketDetail.vue b/src/views/ticket/TicketDetail.vue
index 3dcbf04..2a35748 100644
--- a/src/views/ticket/TicketDetail.vue
+++ b/src/views/ticket/TicketDetail.vue
@@ -1,9 +1,60 @@
 <template>
   <div class="ticket-detail-page">
-    <!-- 返回按钮和工单信息 -->
+    <!-- 头部信息 -->
     <div class="page-header">
-      <el-button icon="ArrowLeft" @click="goBack">返回列表</el-button>
-      <div class="ticket-info" v-if="ticketInfo">
+      <div class="header-left">
+        <el-button icon="ArrowLeft" @click="goBack">返回列表</el-button>
+        <el-popover placement="bottom-start" :width="300" trigger="click" v-if="ticketInfo" @show="fetchUserDetail">
+          <template #reference>
+            <div class="user-info clickable">
+              <el-avatar :size="36" :src="ticketInfo.avatar">{{ ticketInfo.username?.charAt(0) }}</el-avatar>
+              <div class="user-detail">
+                <div class="username">{{ ticketInfo.username }}</div>
+                <div class="create-time">创建于 {{ ticketInfo.createTime }}</div>
+              </div>
+            </div>
+          </template>
+          <div class="user-popover" v-loading="isLoadingUser">
+            <div class="popover-header">
+              <el-avatar :size="48" :src="userDetail?.Avatar || ticketInfo.avatar">{{ ticketInfo.username?.charAt(0) }}</el-avatar>
+              <div class="popover-info">
+                <div class="popover-name">{{ userDetail?.UserName || ticketInfo.username }}</div>
+                <div class="popover-id">UID: {{ ticketInfo.userId }}</div>
+              </div>
+            </div>
+            <el-divider style="margin: 12px 0" />
+            <div class="popover-items">
+              <div class="popover-item">
+                <span class="label">手机号</span>
+                <span class="value">{{ userDetail?.Phone || '-' }}</span>
+              </div>
+              <div class="popover-item">
+                <span class="label">邮箱</span>
+                <span class="value">{{ userDetail?.Email || '-' }}</span>
+              </div>
+              <div class="popover-item">
+                <span class="label">实名状态</span>
+                <el-tag :type="userDetail?.RealName?.Status === 1 ? 'success' : 'info'" size="small">
+                  {{ userDetail?.RealName?.Status === 1 ? '已实名' : '未实名' }}
+                </el-tag>
+              </div>
+              <div class="popover-item">
+                <span class="label">用户组</span>
+                <span class="value">{{ userDetail?.UserGroup?.Name || '-' }}</span>
+              </div>
+              <!-- <div class="popover-item">
+                <span class="label">管理员组</span>
+                <span class="value">{{ userDetail?.AdminGroup?.name || '-' }}</span>
+              </div> -->
+            </div>
+            <el-button type="primary" size="small" style="width: 100%; margin-top: 12px" @click="goToUserDetail">
+              查看完整资料
+            </el-button>
+          </div>
+        </el-popover>
+        <div class="ticket-title" v-if="ticketInfo">{{ ticketInfo.title }}</div>
+      </div>
+      <div class="header-right" v-if="ticketInfo">
         <span class="ticket-id">工单号: {{ ticketInfo.id }}</span>
         <el-tag :type="getStatusType(ticketInfo.status)" size="small">
           {{ getStatusText(ticketInfo.status) }}
@@ -19,18 +70,6 @@
       </div>
     </div>
 
-    <!-- 工单标题 -->
-    <div class="ticket-title-bar" v-if="ticketInfo">
-      <div class="user-info">
-        <el-avatar :size="40" :src="ticketInfo.avatar">{{ ticketInfo.username?.charAt(0) }}</el-avatar>
-        <div class="user-detail">
-          <div class="username">{{ ticketInfo.username }}</div>
-          <div class="create-time">创建于 {{ ticketInfo.createTime }}</div>
-        </div>
-      </div>
-      <div class="ticket-title">{{ ticketInfo.title }}</div>
-    </div>
-
     <!-- 聊天记录 -->
     <div class="chat-container" v-loading="isLoadingMessages">
       <div class="chat-messages" ref="messagesContainer">
@@ -132,10 +171,11 @@
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick, onBeforeUnmount } from 'vue'
+import { ref, onMounted, nextTick, onBeforeUnmount, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getTicketDetail, replyTicket, closeTicket } from '@/api/ticket'
+import { getUserInfo } from '@/api/admin/user'
 import { useUserStore } from '@/store/userStore'
 import { useTagsViewStore } from '@/store/tagsViewStore'
 
@@ -150,6 +190,10 @@ const messages = ref([])
 const isLoadingMessages = ref(false)
 const isSending = ref(false)
 
+// 用户详情弹窗
+const userDetail = ref(null)
+const isLoadingUser = ref(false)
+
 // 输入相关
 const messageInput = ref('')
 const selectedImages = ref([])
@@ -195,8 +239,8 @@ const isAdmin = (userId) => {
 const fetchTicketDetail = async () => {
   const workId = route.query.id
   if (!workId) {
-    ElMessage.error('工单ID不存在')
-    router.push('/ticket')
+    // 没有ID时静默跳转到列表页
+    router.replace('/ticket/list')
     return
   }
 
@@ -359,6 +403,29 @@ const goBack = () => {
   router.push('/ticket/list')
 }
 
+// 获取用户详情
+const fetchUserDetail = async () => {
+  if (!ticketInfo.value?.userId) return
+  try {
+    isLoadingUser.value = true
+    const res = await getUserInfo({ user_id: ticketInfo.value.userId })
+    if (res.data?.code === 200) {
+      userDetail.value = res.data.data
+    }
+  } catch (error) {
+    console.error('获取用户详情失败:', error)
+  } finally {
+    isLoadingUser.value = false
+  }
+}
+
+// 跳转用户详情
+const goToUserDetail = () => {
+  if (ticketInfo.value?.userId) {
+    router.push({ path: '/user/detail', query: { user_id: ticketInfo.value.userId } })
+  }
+}
+
 // 定时刷新
 const startAutoRefresh = () => {
   refreshTimer.value = setInterval(() => {
@@ -375,6 +442,16 @@ const stopAutoRefresh = () => {
   }
 }
 
+// 监听路由query变化，重新加载数据
+watch(
+  () => route.query.id,
+  (newId) => {
+    if (newId) {
+      fetchTicketDetail()
+    }
+  }
+)
+
 onMounted(() => {
   fetchTicketDetail()
   startAutoRefresh()
@@ -387,23 +464,29 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .ticket-detail-page {
-  padding: 20px;
+  padding: 0;
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 120px);
+  height: calc(100vh - 100px);
+  min-height: 600px;
 }
 
 .page-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 16px;
   background: #fff;
-  padding: 16px;
-  border-radius: 8px;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
 }
 
-.ticket-info {
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.header-right {
   display: flex;
   align-items: center;
   gap: 12px;
@@ -414,18 +497,62 @@ onBeforeUnmount(() => {
   color: #606266;
 }
 
-.ticket-title-bar {
-  background: #fff;
-  padding: 16px;
-  border-radius: 8px;
-  margin-bottom: 16px;
-}
-
 .user-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.user-info.clickable {
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.user-info.clickable:hover {
+  background: #f5f7fa;
+}
+
+.user-popover .popover-header {
   display: flex;
   align-items: center;
   gap: 12px;
-  margin-bottom: 12px;
+}
+
+.user-popover .popover-info .popover-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.user-popover .popover-info .popover-id {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+.user-popover .popover-items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.user-popover .popover-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  color: #606266;
+}
+
+.user-popover .popover-item .label {
+  color: #909399;
+}
+
+.user-popover .popover-item .value.highlight {
+  color: #e6a23c;
+  font-weight: 500;
 }
 
 .user-detail .username {
@@ -439,15 +566,19 @@ onBeforeUnmount(() => {
 }
 
 .ticket-title {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 500;
   color: #303133;
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .chat-container {
   flex: 1;
+  min-height: 400px;
   background: #f5f7fa;
-  border-radius: 8px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -516,9 +647,8 @@ onBeforeUnmount(() => {
 
 .reply-container {
   background: #fff;
-  padding: 16px;
-  border-radius: 8px;
-  margin-top: 16px;
+  padding: 16px 20px;
+  border-top: 1px solid #ebeef5;
 }
 
 .upload-preview {
@@ -587,6 +717,8 @@ onBeforeUnmount(() => {
 }
 
 .closed-notice {
-  margin-top: 16px;
+  padding: 16px 20px;
+  background: #fff;
+  border-top: 1px solid #ebeef5;
 }
 </style>
diff --git a/src/views/ticket/TicketList.vue b/src/views/ticket/TicketList.vue
index e578ae5..c09bc62 100644
--- a/src/views/ticket/TicketList.vue
+++ b/src/views/ticket/TicketList.vue
@@ -1,40 +1,35 @@
 <template>
   <div class="ticket-list-page">
-    <!-- 统计卡片 -->
-    <div class="stats-cards">
-      <div class="stat-card" :class="{ active: activeStatus === '' }" @click="filterByStatus('')">
-        <div class="stat-number">{{ stats.total }}</div>
-        <div class="stat-label">全部工单</div>
+    <!-- 顶部工具栏 -->
+    <div class="toolbar">
+      <div class="status-tabs">
+        <div class="tab-item" :class="{ active: activeStatus === '' }" @click="filterByStatus('')">
+          全部 <span class="count">{{ stats.total }}</span>
+        </div>
+        <div class="tab-item pending" :class="{ active: activeStatus === 'pending' }" @click="filterByStatus('pending')">
+          待处理 <span class="count">{{ stats.pending }}</span>
+        </div>
+        <div class="tab-item processing" :class="{ active: activeStatus === 'processing' }" @click="filterByStatus('processing')">
+          处理中 <span class="count">{{ stats.processing }}</span>
+        </div>
+        <div class="tab-item replied" :class="{ active: activeStatus === 'replied' }" @click="filterByStatus('replied')">
+          已回复 <span class="count">{{ stats.replied }}</span>
+        </div>
+        <div class="tab-item completed" :class="{ active: activeStatus === 'completed' }" @click="filterByStatus('completed')">
+          已完成 <span class="count">{{ stats.completed }}</span>
+        </div>
       </div>
-      <div class="stat-card pending" :class="{ active: activeStatus === 'pending' }" @click="filterByStatus('pending')">
-        <div class="stat-number">{{ stats.pending }}</div>
-        <div class="stat-label">待处理</div>
+      <div class="toolbar-right">
+        <el-input
+          v-model="searchKeyword"
+          placeholder="搜索工单号、标题、用户名"
+          prefix-icon="Search"
+          clearable
+          style="width: 240px"
+          @input="handleSearch"
+        />
+        <el-button icon="Refresh" @click="refreshList">刷新</el-button>
       </div>
-      <div class="stat-card processing" :class="{ active: activeStatus === 'processing' }" @click="filterByStatus('processing')">
-        <div class="stat-number">{{ stats.processing }}</div>
-        <div class="stat-label">处理中</div>
-      </div>
-      <div class="stat-card replied" :class="{ active: activeStatus === 'replied' }" @click="filterByStatus('replied')">
-        <div class="stat-number">{{ stats.replied }}</div>
-        <div class="stat-label">已回复</div>
-      </div>
-      <div class="stat-card completed" :class="{ active: activeStatus === 'completed' }" @click="filterByStatus('completed')">
-        <div class="stat-number">{{ stats.completed }}</div>
-        <div class="stat-label">已完成</div>
-      </div>
-    </div>
-
-    <!-- 搜索和筛选 -->
-    <div class="filter-bar">
-      <el-input
-        v-model="searchKeyword"
-        placeholder="搜索工单号、标题、用户名"
-        prefix-icon="Search"
-        clearable
-        style="width: 300px"
-        @input="handleSearch"
-      />
-      <el-button type="primary" icon="Refresh" @click="refreshList">刷新</el-button>
     </div>
 
     <!-- 工单表格 -->
@@ -97,7 +92,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
+import { ref, reactive, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
@@ -105,7 +100,6 @@ import {
   closeTicket,
   getTicketCount
 } from '@/api/ticket'
-import notificationSound from '@/assets/7.wav'
 
 const router = useRouter()
 
@@ -129,11 +123,7 @@ const stats = reactive({
   total: 0
 })
 
-// 定时刷新
-const refreshTimer = ref(null)
-const refreshInterval = 10000
-const previousPendingCount = ref(0)
-const audio = new Audio(notificationSound)
+
 
 // 状态转换
 const convertStatusToString = (status) => {
@@ -192,10 +182,6 @@ const fetchStats = async () => {
     const res = await getTicketCount()
     if (res.code === 200) {
       const data = res.data
-      if (data.wait_count > previousPendingCount.value && previousPendingCount.value !== 0) {
-        audio.play().catch(e => console.error('播放提示音失败:', e))
-      }
-      previousPendingCount.value = data.wait_count
       stats.total = data.all_count
       stats.pending = data.wait_count
       stats.replied = data.reply_count
@@ -275,86 +261,67 @@ const handleComplete = (ticket) => {
   }).catch(() => {})
 }
 
-// 定时刷新
-const startAutoRefresh = () => {
-  refreshTimer.value = setInterval(() => {
-    fetchStats()
-  }, refreshInterval)
-}
-
-const stopAutoRefresh = () => {
-  if (refreshTimer.value) {
-    clearInterval(refreshTimer.value)
-    refreshTimer.value = null
-  }
-}
-
 onMounted(() => {
   fetchTicketList()
   fetchStats()
-  startAutoRefresh()
-})
-
-onBeforeUnmount(() => {
-  stopAutoRefresh()
 })
 </script>
 
 <style scoped>
 .ticket-list-page {
-  padding: 20px;
-}
-
-.stats-cards {
+  padding: 0;
+  height: calc(100vh - 100px);
   display: flex;
-  gap: 16px;
-  margin-bottom: 20px;
-}
-
-.stat-card {
-  flex: 1;
+  flex-direction: column;
   background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.3s;
-  border: 2px solid transparent;
 }
 
-.stat-card:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.stat-card.active {
-  border-color: #409eff;
-}
-
-.stat-card.pending .stat-number { color: #e6a23c; }
-.stat-card.processing .stat-number { color: #409eff; }
-.stat-card.replied .stat-number { color: #909399; }
-.stat-card.completed .stat-number { color: #67c23a; }
-
-.stat-number {
-  font-size: 32px;
-  font-weight: bold;
-  color: #303133;
-}
-
-.stat-label {
-  font-size: 14px;
-  color: #909399;
-  margin-top: 8px;
-}
-
-.filter-bar {
+.toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16px;
-  background: #fff;
-  padding: 16px;
-  border-radius: 8px;
+  padding: 0 20px;
+  height: 50px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.status-tabs {
+  display: flex;
+  gap: 8px;
+}
+
+.tab-item {
+  padding: 6px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  color: #606266;
+  transition: all 0.2s;
+}
+
+.tab-item:hover {
+  background: #f5f7fa;
+}
+
+.tab-item.active {
+  background: #409eff;
+  color: #fff;
+}
+
+.tab-item.pending.active { background: #e6a23c; }
+.tab-item.processing.active { background: #409eff; }
+.tab-item.replied.active { background: #909399; }
+.tab-item.completed.active { background: #67c23a; }
+
+.tab-item .count {
+  margin-left: 4px;
+  font-weight: 500;
+}
+
+.toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .user-info {
@@ -372,14 +339,12 @@ onBeforeUnmount(() => {
 .pagination-wrapper {
   display: flex;
   justify-content: flex-end;
-  margin-top: 16px;
-  padding: 16px;
-  background: #fff;
-  border-radius: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid #ebeef5;
 }
 
 :deep(.el-table) {
-  border-radius: 8px;
+  flex: 1;
 }
 
 :deep(.el-table tr) {
diff --git a/src/views/user/UserBalance.vue b/src/views/user/UserBalance.vue
index 0bd1f4a..8504664 100644
--- a/src/views/user/UserBalance.vue
+++ b/src/views/user/UserBalance.vue
@@ -1,315 +1,112 @@
 <template>
   <div class="user-balance-container">
-    <!-- 用户搜索 -->
-    <el-card class="filter-container" shadow="never">
-      <el-form :inline="true" :model="queryParams">
-        <el-form-item label="选择用户">
-          <el-select 
-            v-model="queryParams.user_id" 
-            placeholder="请选择用户（支持搜索）" 
-            clearable 
-            filterable
-            remote
-            :remote-method="handleUserSearch"
-            style="width: 350px"
-            :loading="userListLoading"
-            popper-class="user-select-dropdown"
-            @visible-change="handleSelectVisibleChange"
-            ref="userSelectRef"
-          >
-            <!-- 下拉框顶部信息 -->
-            <template #header>
-              <div class="select-header">
-                <div class="select-header-info">
-                  <el-icon class="info-icon"><InfoFilled /></el-icon>
-                  <span>已加载 {{ userList.length }} / {{ userTotalCount }} 个用户</span>
-                </div>
-                <el-divider style="margin: 8px 0;" />
-              </div>
-            </template>
-            
-            <el-option 
-              v-for="item in userList" 
-              :key="item.UserId" 
-              :label="`${item.UserName} (ID: ${item.UserId})`" 
-              :value="item.UserId"
-              class="user-option"
-            >
-              <div class="user-option-content">
-                <div class="user-option-left">
-                  <div class="user-option-name">
-                    <el-icon class="user-icon"><User /></el-icon>
-                    {{ item.UserName }}
-                  </div>
-                  <div class="user-option-email" v-if="item.Email">
-                    <el-icon class="email-icon"><Message /></el-icon>
-                    {{ item.Email }}
-                  </div>
-                </div>
-                <el-tag size="small" type="info" effect="plain">ID: {{ item.UserId }}</el-tag>
-              </div>
-            </el-option>
-            
-            <!-- 加载状态提示 -->
-            <el-option 
-              v-if="loadingMoreUsers" 
-              :value="null" 
-              disabled
-              class="loading-option"
-            >
-              <div class="loading-content">
-                <el-icon class="is-loading"><Loading /></el-icon>
-                <span>正在加载更多用户...</span>
-              </div>
-            </el-option>
-            
-            <!-- 加载更多按钮 -->
-            <el-option 
-              v-if="hasMoreUsers && !loadingMoreUsers" 
-              :value="null" 
-              disabled
-              class="load-more-option"
-            >
-              <div class="load-more-content" @click.stop="loadMoreUsers">
-                <el-button 
-                  type="primary" 
-                  link 
-                  size="small"
-                >
-                  <el-icon><Bottom /></el-icon>
-                  点击加载更多用户
-                </el-button>
-              </div>
-            </el-option>
-            
-            <!-- 全部加载完成提示 -->
-            <el-option 
-              v-if="!hasMoreUsers && userList.length > 0 && userTotalCount > 0" 
-              :value="null" 
-              disabled
-              class="no-more-option"
-            >
-              <div class="no-more-content">
-                <el-icon><CircleCheck /></el-icon>
-                <span>已加载全部 {{ userTotalCount }} 个用户</span>
-              </div>
-            </el-option>
-            
-            <!-- 空状态 -->
-            <template #empty>
-              <div class="empty-content">
-                <el-icon class="empty-icon"><User /></el-icon>
-                <p>{{ userSearchKey ? '未找到匹配的用户' : '暂无用户数据' }}</p>
-              </div>
-            </template>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleQuery">
-            <el-icon><Search /></el-icon>查询
-          </el-button>
-          <el-button @click="handleReset">重置</el-button>
-          <el-button type="success" @click="fetchUserBalance">
-            <el-icon><Refresh /></el-icon>刷新
-          </el-button>
-        </el-form-item>
-      </el-form>
-      <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 10px;">
-        <div>
-          <el-alert 
-            v-if="userList.length === 0 && !userListLoading" 
-            type="warning" 
-            :closable="false"
-            show-icon
-          >
-            暂无用户数据，请先添加用户
-          </el-alert>
-          <el-alert 
-            v-if="userList.length > 0 && !queryParams.user_id" 
-            type="info" 
-            :closable="false"
-            show-icon
-          >
-            共加载 {{ countData }} 个用户，请选择要查询的用户
-          </el-alert>
-          <el-alert 
-            v-if="queryParams.user_id && getCurrentUserName()" 
-            type="success" 
-            :closable="false"
-            show-icon
-          >
-            当前选中: {{ getCurrentUserName() }} (ID: {{ queryParams.user_id }})
-          </el-alert>
+    <!-- 顶部信息栏 -->
+    <div class="page-header">
+      <div class="header-left">
+        <h2 class="page-title">用户余额管理</h2>
+        <div class="user-info">
+          <span class="user-name">{{ getCurrentUserName() }}</span>
+          <span class="user-id">ID: {{ queryParams.user_id }}</span>
         </div>
       </div>
-    </el-card>
+      <el-button type="primary" @click="fetchUserBalance">
+        <el-icon><Refresh /></el-icon>刷新数据
+      </el-button>
+    </div>
 
-    <!-- 用户余额信息 -->
-    <div v-if="balanceInfo && balanceList.length > 0" class="balance-cards-container">
-      <el-row :gutter="16">
-        <el-col :span="8" v-for="balance in balanceList" :key="balance.type">
-          <el-card class="balance-card" :class="`balance-card-${balance.type}`" shadow="never">
-            <div class="balance-card-content">
-              <div class="balance-header">
-                <div class="balance-icon-wrapper" :class="`icon-${balance.type}`">
-                  <el-icon :size="24">
-                    <component :is="getBalanceIcon(balance.type)" />
-                  </el-icon>
-                </div>
-                <div class="balance-type-info">
-                  <div class="balance-type-name">{{ getBalanceTypeName(balance.type) }}</div>
-                  <div class="balance-type-desc">{{ getBalanceTypeDesc(balance.type) }}</div>
-                </div>
-              </div>
-              
-              <div class="balance-amount-section">
-                <div class="amount-label">当前余额</div>
-                <div class="amount-value">
-                  <span class="currency">¥</span>
-                  <span class="amount">{{ (balance.price/100).toFixed(2) || 0 }}</span>
-                </div>
-              </div>
-              
-              <div class="balance-meta">
-                <div class="meta-item">
-                  <span class="meta-label">余额ID</span>
-                  <span class="meta-value">{{ balance.id }}</span>
-                </div>
-                <div class="meta-item">
-                  <span class="meta-label">更新时间</span>
-                  <span class="meta-value">{{ formatDateTime(balance.UpdatedAt) }}</span>
-                </div>
-              </div>
-              
-              <div class="balance-actions">
-                <el-button type="primary" size="small" @click="handleEditBalance(balance.type)" plain>
-                  <el-icon><Edit /></el-icon>修改
-                </el-button>
-                <el-button type="success" size="small" @click="handleAddRecord(balance.type)" plain>
-                  <el-icon><Plus /></el-icon>记录
-                </el-button>
-              </div>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
+    <!-- 余额卡片 -->
+    <div class="balance-cards" v-loading="loading">
+      <div 
+        v-for="balance in balanceList" 
+        :key="balance.type" 
+        class="balance-card"
+        :class="`balance-card-${balance.type}`"
+      >
+        <div class="card-header">
+          <span class="balance-type">{{ getBalanceTypeName(balance.type) }}</span>
+          <span class="balance-id">ID: {{ balance.id }}</span>
+        </div>
+        <div class="card-body">
+          <div class="balance-amount">
+            <span class="currency">¥</span>
+            <span class="amount">{{ (balance.price / 100).toFixed(2) }}</span>
+          </div>
+          <div class="balance-time">更新于 {{ formatDateTime(balance.UpdatedAt) }}</div>
+        </div>
+        <div class="card-footer">
+          <el-button size="small" @click="handleEditBalance(balance.type)">修改余额</el-button>
+          <el-button size="small" @click="handleAddRecord(balance.type)">添加记录</el-button>
+        </div>
+      </div>
     </div>
 
     <!-- 余额记录 -->
-    <el-card v-if="balanceInfo" class="table-container" shadow="never">
-      <template #header>
-        <div class="card-header">
-          <span>余额变动记录</span>
-          <el-button type="success" @click="handleAddRecord('general')">
-            <el-icon><Plus /></el-icon>添加记录
-          </el-button>
-        </div>
-      </template>
-      <el-table
-        v-loading="loading"
-        :data="recordList"
-        style="width: 100%"
-      >
-        <el-table-column prop="Id" label="记录ID" width="100" />
-        <el-table-column label="余额ID" width="100">
-          <template #default="{ row }">
-            <el-tag size="small" type="info" effect="plain">
-              {{ row.BalanceId || '-' }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="余额类型" width="140">
-          <template #default="{ row }">
-            <div class="balance-type-cell">
-              <el-tag 
-                :type="getBalanceTagType(row.BalanceId)" 
-                effect="dark"
-                size="small"
-              >
-                <el-icon style="margin-right: 4px;">
-                  <component :is="getBalanceIconByRecordId(row.BalanceId)" />
-                </el-icon>
-                {{ getBalanceTypeByRecordId(row.BalanceId) }}
-              </el-tag>
-              <span class="balance-type-hint" v-if="row.Type">
-                ({{ row.Type }})
+    <div class="record-section">
+      <div class="section-header">
+        <h3 class="section-title">余额变动记录</h3>
+      </div>
+      <div class="table-wrapper">
+        <el-table 
+          :data="recordList" 
+          v-loading="loading" 
+          style="width: 100%"
+          :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
+        >
+          <el-table-column prop="Id" label="记录ID" width="100" />
+          <el-table-column label="余额类型" width="120">
+            <template #default="{ row }">
+              <el-tag size="small">{{ getBalanceTypeByRecordId(row.BalanceId) }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="变动类型" width="100">
+            <template #default="{ row }">
+              <el-tag v-if="row.Change" type="success" size="small">增加</el-tag>
+              <el-tag v-else type="danger" size="small">减少</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="变动金额" width="150">
+            <template #default="{ row }">
+              <span :class="row.Change ? 'amount-plus' : 'amount-minus'">
+                {{ row.Change ? '+' : '-' }}¥{{ (row.Price / 100).toFixed(2) }}
               </span>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="变动类型" width="100">
-          <template #default="{ row }">
-            <el-tag v-if="row.Change == true" type="success" effect="dark">
-              <el-icon style="margin-right: 4px;"><Plus /></el-icon>
-              增加
-            </el-tag>
-            <el-tag v-else-if="row.Change == false" type="danger" effect="dark">
-              <el-icon style="margin-right: 4px;"><Minus /></el-icon>
-              减少
-            </el-tag>
-            <el-tag v-else type="info">{{ row.Change }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="变动金额" width="150">
-          <template #default="{ row }">
-            <span :class="row.Change == true ? 'amount-plus' : 'amount-minus'">
-              {{ row.Change == true ? '+' : '-' }}¥{{ (row.Price/100).toFixed(2) || 0 }}
-            </span>
-          </template>
-        </el-table-column>
-        <el-table-column label="变动后余额" width="150">
-          <template #default="{ row }">
-            <span class="balance-after">
-              ¥{{ ((row.BalanceAfter || 0) / 100).toFixed(2) }}
-            </span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="Note" label="备注" min-width="200" show-overflow-tooltip />
-        <el-table-column label="创建时间" width="180">
-          <template #default="{ row }">
-            {{ formatDateTime(row.CreatedAt) }}
-          </template>
-        </el-table-column>
-      </el-table>
-      
-      <!-- 分页 -->
-      <el-pagination
-        v-model:current-page="recordParams.page"
-        v-model:page-size="recordParams.count"
-        :page-sizes="[10, 20, 50, 100]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="recordTotal"
-        @size-change="handleRecordSizeChange"
-        @current-change="handleRecordCurrentChange"
-        background
-        class="pagination"
-      />
-    </el-card>
+            </template>
+          </el-table-column>
+          <el-table-column label="变动后余额" width="150">
+            <template #default="{ row }">
+              <span class="balance-after">¥{{ ((row.BalanceAfter || 0) / 100).toFixed(2) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="Note" label="备注" min-width="200" show-overflow-tooltip />
+          <el-table-column label="创建时间" width="180">
+            <template #default="{ row }">
+              {{ formatDateTime(row.CreatedAt) }}
+            </template>
+          </el-table-column>
+        </el-table>
+        
+        <div class="pagination-wrapper">
+          <el-pagination
+            v-model:current-page="recordParams.page"
+            v-model:page-size="recordParams.count"
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="recordTotal"
+            @size-change="handleRecordSizeChange"
+            @current-change="handleRecordCurrentChange"
+            background
+          />
+        </div>
+      </div>
+    </div>
 
     <!-- 修改余额对话框 -->
-    <el-dialog
-      v-model="balanceDialogVisible"
-      title="修改用户余额"
-      width="500px"
-    >
-      <el-form
-        ref="balanceFormRef"
-        :model="balanceForm"
-        :rules="balanceRules"
-        label-width="100px"
-      >
-        <el-form-item label="用户ID">
-          <el-input v-model="balanceForm.user_id" disabled />
-        </el-form-item>
-        <el-form-item label="余额类型" prop="balance_type">
-          <el-select v-model="balanceForm.balance_type" placeholder="请选择余额类型" style="width: 100%">
-            <el-option label="云币" value="cloud_coin" />
-            <el-option label="云点" value="cloud_points" />
-            <el-option label="云钻" value="cloud_diamond" />
-          </el-select>
+    <el-dialog v-model="balanceDialogVisible" title="修改用户余额" width="500px">
+      <el-form ref="balanceFormRef" :model="balanceForm" :rules="balanceRules" label-width="100px">
+        <el-form-item label="余额类型">
+          <el-input :value="getBalanceTypeNameByApiType(balanceForm.balance_type)" disabled />
         </el-form-item>
         <el-form-item label="当前余额">
-          <el-input v-model="balanceInfo.balance" disabled>
+          <el-input :value="currentBalanceDisplay" disabled>
             <template #prepend>¥</template>
           </el-input>
         </el-form-item>
@@ -335,45 +132,25 @@
     </el-dialog>
 
     <!-- 添加记录对话框 -->
-    <el-dialog
-      v-model="recordDialogVisible"
-      title="添加消费记录"
-      width="500px"
-    >
-      <el-form
-        ref="recordFormRef"
-        :model="recordForm"
-        :rules="recordRules"
-        label-width="120px"
-      >
-        <el-form-item label="用户ID">
-          <el-input v-model="recordForm.user_id" disabled />
+    <el-dialog v-model="recordDialogVisible" title="添加消费记录" width="500px">
+      <el-form ref="recordFormRef" :model="recordForm" :rules="recordRules" label-width="120px">
+        <el-form-item label="余额类型">
+          <el-input :value="getBalanceTypeNameByApiType(recordForm.balance_type)" disabled />
         </el-form-item>
-        <el-form-item label="余额类型" prop="balance_type">
-          <el-select v-model="recordForm.balance_type" placeholder="请选择余额类型" style="width: 100%">
-            <el-option label="云币" value="cloud_coin" />
-            <el-option label="云点" value="cloud_points" />
-            <el-option label="云钻" value="cloud_diamond" />
-          </el-select>
+        <el-form-item label="是否执行到余额" prop="apply_balance">
+          <el-switch v-model="recordForm.apply_balance" active-text="是" inactive-text="否" />
         </el-form-item>
-        <el-form-item label="是否执行到应余额" prop="apply_balance">
-          <el-switch 
-            v-model="recordForm.apply_balance" 
-            active-text="是" 
-            inactive-text="否"
-          />
-        </el-form-item>
-        <el-form-item label="消费金额" prop="price">
-          <el-input v-model.number="recordForm.price" placeholder="请输入消费金额">
-            <template #prepend>¥</template>
-          </el-input>
-        </el-form-item>
-        <el-form-item label="状态类型" prop="state">
+        <el-form-item label="变动类型" prop="state">
           <el-radio-group v-model="recordForm.state">
             <el-radio label="add">增加</el-radio>
             <el-radio label="sub">减少</el-radio>
           </el-radio-group>
         </el-form-item>
+        <el-form-item label="变动金额" prop="price">
+          <el-input v-model.number="recordForm.price" placeholder="请输入金额">
+            <template #prepend>¥</template>
+          </el-input>
+        </el-form-item>
         <el-form-item label="备注" prop="note">
           <el-input v-model="recordForm.note" type="textarea" :rows="3" placeholder="请输入备注" />
         </el-form-item>
@@ -387,71 +164,69 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue'
-import { ElMessage } from 'element-plus'
-import { Plus, Search, Money, Medal, Ticket, Edit, Refresh, Bottom, User, Message, InfoFilled, Loading, CircleCheck, Minus } from '@element-plus/icons-vue'
-import { getUserBalance, getUserBalanceRecord, editUserBalance, addUserConsumption } from '@/api/admin/user'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { getUserList,getUserBalanceCount } from '@/api/admin/user'
-import { closeAllMessage } from '../../utils/message'
+import { ElMessage } from 'element-plus'
+import { Refresh } from '@element-plus/icons-vue'
+import { getUserBalance, getUserBalanceRecord, editUserBalance, addUserConsumption, getUserBalanceCount, getUserList } from '@/api/admin/user'
 
 const route = useRoute()
 
 // 余额类型映射
 const userBalance = {
-  entity: {name: '云钻', value: 0, type: 'cloud_diamond', reName: 'entity', icon: "Money"},
-  general: {name: '云币', value: 0, type: 'cloud_coin', reName: 'general', icon: "Medal"},
-  withdraw: {name: '云点', value: 0, type: 'cloud_points', reName: 'withdraw', icon: "Ticket"}
+  entity: { name: '云钻', type: 'cloud_diamond' },
+  general: { name: '云币', type: 'cloud_coin' },
+  withdraw: { name: '云点', type: 'cloud_points' }
 }
 
 // 查询参数
 const queryParams = reactive({
-  user_id: route.query.user_id || '',
-  
+  user_id: route.query.user_id || ''
 })
-const countData = ref(0)
-const balanceList = ref([]) // 余额列表
 
 // 余额记录查询参数
 const recordParams = reactive({
   user_id: '',
-  balance_type: '',
   page: 1,
   count: 10
 })
 
-// 余额信息
+// 状态数据
+const loading = ref(false)
 const balanceInfo = ref(null)
+const balanceList = ref([])
+const recordList = ref([])
+const recordTotal = ref(0)
+const userList = ref([])
+
+// 对话框
+const balanceDialogVisible = ref(false)
+const recordDialogVisible = ref(false)
+const balanceFormRef = ref(null)
+const recordFormRef = ref(null)
 
 // 余额表单
 const balanceForm = reactive({
   user_id: '',
-  balance_type: 'general',
+  balance_type: '',
   price: 0,
   state: 'add',
   note: ''
 })
 
 const balanceRules = {
-  balance_type: [
-    { required: true, message: '请选择余额类型', trigger: 'change' }
-  ],
   price: [
     { required: true, message: '请输入变动金额', trigger: 'blur' },
     { type: 'number', message: '请输入数字', trigger: 'blur' }
   ],
-  state: [
-    { required: true, message: '请选择变动类型', trigger: 'change' }
-  ],
-  note: [
-    { required: true, message: '请输入备注', trigger: 'blur' }
-  ]
+  state: [{ required: true, message: '请选择变动类型', trigger: 'change' }],
+  note: [{ required: true, message: '请输入备注', trigger: 'blur' }]
 }
 
 // 记录表单
 const recordForm = reactive({
   user_id: '',
-  balance_type: 'general',
+  balance_type: '',
   apply_balance: false,
   price: 0,
   state: 'add',
@@ -459,175 +234,137 @@ const recordForm = reactive({
 })
 
 const recordRules = {
-  balance_type: [
-    { required: true, message: '请选择余额类型', trigger: 'change' }
-  ],
   price: [
-    { required: true, message: '请输入消费金额', trigger: 'blur' },
+    { required: true, message: '请输入金额', trigger: 'blur' },
     { type: 'number', message: '请输入数字', trigger: 'blur' }
   ],
-  state: [
-    { required: true, message: '请选择状态类型', trigger: 'change' }
-  ],
-  note: [
-    { required: true, message: '请输入备注', trigger: 'blur' }
-  ]
+  state: [{ required: true, message: '请选择状态类型', trigger: 'change' }],
+  note: [{ required: true, message: '请输入备注', trigger: 'blur' }]
 }
 
-// 状态数据
-const loading = ref(false)
-const recordList = ref([])
-const recordTotal = ref(0)
-const balanceDialogVisible = ref(false)
-const recordDialogVisible = ref(false)
-const balanceFormRef = ref(null)
-const recordFormRef = ref(null)
-const userList = ref([])
-const userListLoading = ref(false)
-const loadingMoreUsers = ref(false)
-const userListPage = ref(1)
-const userListPageSize = ref(50)
-const userTotalCount = ref(0)
-const userSearchKey = ref('')
-const userSelectRef = ref(null)
-const hasMoreUsers = computed(() => userList.value.length < userTotalCount.value)
+// 当前余额显示
+const currentBalanceDisplay = computed(() => {
+  const balance = balanceList.value.find(b => userBalance[b.type]?.type === balanceForm.balance_type)
+  return balance ? (balance.price / 100).toFixed(2) : '0.00'
+})
 
-// 查询用户余额
+// 获取用户列表（用于显示用户名）
+const getUserListData = async () => {
+  try {
+    const res = await getUserList({ page: 1, count: 1000, key: '' })
+    if (res.data.code === 200) {
+      userList.value = res.data.data.data || []
+    }
+  } catch (error) {
+    console.error('获取用户列表错误:', error)
+  }
+}
+
+// 获取当前用户名
+const getCurrentUserName = () => {
+  if (!queryParams.user_id) return '未知用户'
+  const user = userList.value.find(u => u.UserId === queryParams.user_id)
+  return user ? user.UserName : `用户${queryParams.user_id}`
+}
+
+// 获取余额类型名称
+const getBalanceTypeName = (type) => {
+  return userBalance[type]?.name || type
+}
+
+// 通过API类型获取余额类型名称
+const getBalanceTypeNameByApiType = (apiType) => {
+  const entry = Object.values(userBalance).find(b => b.type === apiType)
+  return entry ? entry.name : apiType
+}
+
+// 通过记录的BalanceId获取余额类型名称
+const getBalanceTypeByRecordId = (balanceId) => {
+  if (!balanceId) return '未知类型'
+  const balance = balanceList.value.find(b => b.id === balanceId)
+  return balance ? getBalanceTypeName(balance.type) : '未知类型'
+}
+
+// 格式化时间
+const formatDateTime = (dateStr) => {
+  if (!dateStr) return '-'
+  const date = new Date(dateStr)
+  return date.toLocaleString('zh-CN', { hour12: false })
+}
+
+// 获取用户余额
 const fetchUserBalance = async () => {
   if (!queryParams.user_id) {
-    ElMessage.warning('请选择用户')
+    ElMessage.warning('缺少用户ID参数')
     return
   }
-  
-  console.log('=== 查询用户余额 ===')
-  console.log('查询参数:', queryParams)
-  
-  // 获取选中的用户信息
-  const selectedUser = userList.value.find(u => u.UserId === queryParams.user_id)
-  if (selectedUser) {
-    console.log('选中的用户:', selectedUser.UserName, '(ID:', selectedUser.UserId, ')')
-  }
-  
+
+  loading.value = true
   try {
     const res = await getUserBalanceCount({ user_id: queryParams.user_id })
-    console.log('用户余额响应:', res)
-    
     if (res.data.code === 200) {
       balanceInfo.value = res.data.data
+      const returnedData = Array.isArray(res.data.data) ? res.data.data : []
       
-      // 定义所有需要的余额类型
-      const requiredTypes = ['entity', 'general', 'withdraw']
+      // 定义默认余额
       const defaultBalances = [
         { id: '-', userId: queryParams.user_id, price: 0, type: 'entity', CreatedAt: new Date().toISOString(), UpdatedAt: new Date().toISOString() },
         { id: '-', userId: queryParams.user_id, price: 0, type: 'general', CreatedAt: new Date().toISOString(), UpdatedAt: new Date().toISOString() },
         { id: '-', userId: queryParams.user_id, price: 0, type: 'withdraw', CreatedAt: new Date().toISOString(), UpdatedAt: new Date().toISOString() }
       ]
       
-      // 检查返回的数据
-      const returnedData = Array.isArray(res.data.data) ? res.data.data : []
-      console.log('API返回的余额数据:', returnedData)
-      console.log('返回的余额类型:', returnedData.map(item => item.type))
+      // 检查缺失的余额类型
+      const requiredTypes = ['entity', 'general', 'withdraw']
+      const missingTypes = requiredTypes.filter(type => !returnedData.some(item => item.type === type))
       
-      // 找出缺失的余额类型
-      // API 返回的数据类型字段就是：entity, general, withdraw
-      // 所以直接比较这些类型即可
-      const missingTypes = requiredTypes.filter(type => {
-        const exists = returnedData.some(item => item.type === type)
-        console.log(`检查余额类型: ${type} (${userBalance[type]?.name}) - ${exists ? '✅ 存在' : '❌ 缺失'}`)
-        return !exists
-      })
-      
-      console.log('缺失的余额类型:', missingTypes)
-      
-      // 如果有缺失的类型，自动初始化
+      // 初始化缺失的余额类型
       if (missingTypes.length > 0) {
-        console.log(`检测到 ${missingTypes.length} 个缺失的余额类型，开始初始化...`)
+        const initPromises = missingTypes.map(type => 
+          editUserBalance({
+            user_id: queryParams.user_id,
+            balance_type: userBalance[type].type,
+            price: 0,
+            state: 'add',
+            note: `系统自动初始化${getBalanceTypeName(type)}余额`
+          })
+        )
+        await Promise.all(initPromises)
         
-        // 并行初始化所有缺失的余额类型
-        const initPromises = missingTypes.map(async (type) => {
-          try {
-            // 将数据库类型转换为 API 类型参数
-            const apiType = userBalance[type]?.type || type
-            console.log(`初始化余额类型: ${type} -> API类型: ${apiType}`)
-            
-            const initRes = await editUserBalance({
-              user_id: queryParams.user_id,
-              balance_type: apiType,
-              price: 0,
-              state: 'add',
-              note: `系统自动初始化${getBalanceTypeName(type)}余额`
-            })
-            
-            if (initRes.data.code === 200) {
-              console.log(`${type} (${apiType}) 余额初始化成功`)
-              return { success: true, type }
-            } else {
-              console.error(`${type} (${apiType}) 余额初始化失败:`, initRes.data.message)
-              return { success: false, type }
-            }
-          } catch (error) {
-            console.error(`${type} 余额初始化错误:`, error)
-            return { success: false, type }
-          }
-        })
-        
-        const initResults = await Promise.all(initPromises)
-        const successCount = initResults.filter(r => r.success).length
-        
-        if (successCount > 0) {
-          ElMessage.success(`已自动初始化 ${successCount} 个余额类型`)
-          
-          // 重新获取余额数据
-          const newRes = await getUserBalanceCount({ user_id: queryParams.user_id })
-          if (newRes.data.code === 200) {
-            balanceInfo.value = newRes.data.data
-            const newReturnedData = Array.isArray(newRes.data.data) ? newRes.data.data : []
-            
-            // 合并最新的数据（API 返回的类型字段已经是 entity, general, withdraw）
-            balanceList.value = defaultBalances.map(defaultItem => {
-              const apiItem = newReturnedData.find(item => item.type === defaultItem.type)
-              return apiItem || defaultItem
-            })
-          }
+        // 重新获取余额
+        const newRes = await getUserBalanceCount({ user_id: queryParams.user_id })
+        if (newRes.data.code === 200) {
+          const newReturnedData = Array.isArray(newRes.data.data) ? newRes.data.data : []
+          balanceList.value = defaultBalances.map(defaultItem => 
+            newReturnedData.find(item => item.type === defaultItem.type) || defaultItem
+          )
         }
       } else {
-        // 没有缺失类型，直接合并数据（API 返回的类型字段已经是 entity, general, withdraw）
-        balanceList.value = defaultBalances.map(defaultItem => {
-          const apiItem = returnedData.find(item => item.type === defaultItem.type)
-          return apiItem || defaultItem
-        })
+        balanceList.value = defaultBalances.map(defaultItem => 
+          returnedData.find(item => item.type === defaultItem.type) || defaultItem
+        )
       }
       
-      console.log('最终余额列表:', balanceList.value)
-      
       recordParams.user_id = queryParams.user_id
-      // recordParams.balance_type = queryParams.balance_type
       fetchBalanceRecord()
-      console.log('余额信息:', balanceInfo.value)
     } else {
       ElMessage.error(res.data.message || '获取用户余额失败')
     }
   } catch (error) {
     console.error('获取用户余额错误:', error)
     ElMessage.error('获取用户余额失败')
+  } finally {
+    loading.value = false
   }
 }
 
 // 获取余额记录
 const fetchBalanceRecord = async () => {
   loading.value = true
-  console.log('=== 获取余额记录 ===')
-  console.log('记录查询参数:', recordParams)
-  
   try {
     const res = await getUserBalanceRecord(recordParams)
-    console.log('余额记录响应:', res)
-    
     if (res.data.code === 200) {
       recordList.value = res.data.data.data || []
       recordTotal.value = res.data.data.all_count || 0
-      console.log('记录列表:', recordList.value)
-      console.log('记录总数:', recordTotal.value)
     } else {
       ElMessage.error(res.data.message || '获取余额记录失败')
     }
@@ -639,50 +376,10 @@ const fetchBalanceRecord = async () => {
   }
 }
 
-// 查询
-const handleQuery = () => {
-  fetchUserBalance()
-}
-
-// 重置
-const handleReset = () => {
-  queryParams.user_id = route.query.user_id || ''
-  queryParams.balance_type = 'general'
-  balanceInfo.value = null
-  balanceList.value = []
-  recordList.value = []
-  recordTotal.value = 0
-  ElMessage.info('已重置查询条件')
-}
-
-// 获取当前选中用户名
-const getCurrentUserName = () => {
-  if (!queryParams.user_id) return ''
-  const user = userList.value.find(u => u.UserId === queryParams.user_id)
-  return user ? user.UserName : ''
-}
-
 // 修改余额
-const handleEditBalance = (balanceType = null) => {
-  if (!queryParams.user_id) {
-    ElMessage.warning('请先选择用户')
-    return
-  }
-  
-  const dbType = balanceType || queryParams.balance_type
-  // 将数据库类型转换为 API 类型参数
-  const apiType = userBalance[dbType]?.type || dbType
-  const typeName = userBalance[dbType]?.name || dbType
-  console.log('修改余额:', `${typeName} (数据库: ${dbType}, API: ${apiType})`)
-  
-  // 获取当前选中类型的余额
-  const currentBalance = balanceList.value.find(b => b.type === dbType)
-  const currentPrice = currentBalance ? (currentBalance.price / 100).toFixed(2) : '0.00'
-  
-  // 先重置表单
+const handleEditBalance = (balanceType) => {
+  const apiType = userBalance[balanceType]?.type
   balanceFormRef.value?.resetFields()
-  
-  // 设置表单值
   Object.assign(balanceForm, {
     user_id: queryParams.user_id,
     balance_type: apiType,
@@ -690,39 +387,13 @@ const handleEditBalance = (balanceType = null) => {
     state: 'add',
     note: ''
   })
-  
-  // 更新显示的当前余额（用于显示）
-  if (balanceInfo.value) {
-    balanceInfo.value.balance = currentPrice
-  }
-  
-  // 最后打开对话框
   balanceDialogVisible.value = true
-  
-  console.log(`已设置余额类型为: ${apiType} (${typeName}), 当前余额: ¥${currentPrice}`)
 }
 
 // 添加记录
-const handleAddRecord = (balanceType = null) => {
-  if (!queryParams.user_id) {
-    ElMessage.warning('请先选择用户')
-    return
-  }
-  
-  const dbType = balanceType || queryParams.balance_type
-  // 将数据库类型转换为 API 类型参数
-  const apiType = userBalance[dbType]?.type || dbType
-  const typeName = userBalance[dbType]?.name || dbType
-  console.log('添加记录:', `${typeName} (数据库: ${dbType}, API: ${apiType})`)
-  
-  // 获取当前选中类型的余额（用于参考）
-  const currentBalance = balanceList.value.find(b => b.type === dbType)
-  const currentPrice = currentBalance ? (currentBalance.price / 100).toFixed(2) : '0.00'
-  
-  // 先重置表单
+const handleAddRecord = (balanceType) => {
+  const apiType = userBalance[balanceType]?.type
   recordFormRef.value?.resetFields()
-  
-  // 设置表单值
   Object.assign(recordForm, {
     user_id: queryParams.user_id,
     balance_type: apiType,
@@ -731,24 +402,15 @@ const handleAddRecord = (balanceType = null) => {
     state: 'add',
     note: ''
   })
-  
-  // 最后打开对话框
   recordDialogVisible.value = true
-  
-  console.log(`已设置余额类型为: ${apiType} (${typeName}), 当前余额: ¥${currentPrice}`)
 }
 
 // 提交余额修改
 const submitBalanceForm = () => {
   balanceFormRef.value?.validate(async (valid) => {
     if (valid) {
-      console.log('=== 提交余额修改 ===')
-      console.log('提交数据:', balanceForm)
-      
       try {
         const res = await editUserBalance(balanceForm)
-        console.log('修改余额响应:', res)
-        
         if (res.data.code === 200) {
           ElMessage.success('修改成功')
           balanceDialogVisible.value = false
@@ -768,13 +430,8 @@ const submitBalanceForm = () => {
 const submitRecordForm = () => {
   recordFormRef.value?.validate(async (valid) => {
     if (valid) {
-      console.log('=== 添加消费记录 ===')
-      console.log('提交数据:', recordForm)
-      
       try {
         const res = await addUserConsumption(recordForm)
-        console.log('添加记录响应:', res)
-        
         if (res.data.code === 200) {
           ElMessage.success('添加成功')
           recordDialogVisible.value = false
@@ -791,726 +448,263 @@ const submitRecordForm = () => {
 }
 
 // 分页
-const handleRecordSizeChange = (size) => {
-  recordParams.count = size
+const handleRecordSizeChange = () => {
   fetchBalanceRecord()
 }
 
-const handleRecordCurrentChange = (page) => {
-  recordParams.page = page
+const handleRecordCurrentChange = () => {
   fetchBalanceRecord()
 }
 
-// 获取余额类型文本
-const getBalanceTypeText = (type) => {
-  const typeMap = {
-    'entity': '云钻',
-    'general': '云币',
-    'withdraw': '云点'
-  }
-  return typeMap[type] || type
-}
-
-// 获取余额类型名称
-const getBalanceTypeName = (type) => {
-  return userBalance[type]?.name || type
-}
-
-// 获取余额类型描述
-const getBalanceTypeDesc = (type) => {
-  return userBalance[type]?.type || ''
-}
-
-// 获取余额类型图标
-const getBalanceIcon = (type) => {
-  const iconMap = {
-    'entity': Money,
-    'general': Medal,
-    'withdraw': Ticket
-  }
-  return iconMap[type] || Money
-}
-
-// 通过记录的BalanceId获取余额类型中文名称
-const getBalanceTypeByRecordId = (balanceId) => {
-  console.log('查找余额类型，BalanceId:', balanceId, '余额列表:', balanceList.value)
-  
-  if (!balanceId) {
-    return '未知类型'
-  }
-  
-  // 在余额列表中查找匹配的余额
-  const balance = balanceList.value.find(b => b.id === balanceId)
-  
-  if (balance && balance.type) {
-    // 使用余额类型映射获取中文名称
-    const typeName = userBalance[balance.type]?.name
-    console.log(`BalanceId ${balanceId} -> type: ${balance.type} -> 名称: ${typeName}`)
-    return typeName || balance.type
-  }
-  
-  console.log(`未找到BalanceId ${balanceId} 对应的余额`)
-  return '未知类型'
-}
-
-// 通过记录的BalanceId获取余额图标
-const getBalanceIconByRecordId = (balanceId) => {
-  if (!balanceId) {
-    return Money
-  }
-  
-  // 在余额列表中查找匹配的余额
-  const balance = balanceList.value.find(b => b.id === balanceId)
-  
-  if (balance && balance.type) {
-    return getBalanceIcon(balance.type)
-  }
-  
-  return Money
-}
-
-// 通过记录的BalanceId获取标签颜色类型
-const getBalanceTagType = (balanceId) => {
-  if (!balanceId) {
-    return 'info'
-  }
-  
-  // 在余额列表中查找匹配的余额
-  const balance = balanceList.value.find(b => b.id === balanceId)
-  
-  if (balance && balance.type) {
-    const typeMap = {
-      'entity': 'success',   // 云钻 - 绿色
-      'general': 'primary',  // 云币 - 蓝色
-      'withdraw': 'warning'  // 云点 - 橙色
-    }
-    return typeMap[balance.type] || 'info'
-  }
-  
-  return 'info'
-}
-
-// 格式化时间
-const formatDateTime = (dateStr) => {
-  if (!dateStr) return '-'
-  const date = new Date(dateStr)
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  const hours = String(date.getHours()).padStart(2, '0')
-  const minutes = String(date.getMinutes()).padStart(2, '0')
-  return `${year}-${month}-${day} ${hours}:${minutes}`
-}
-// 获取用户列表
-const getUserListData = async (isLoadMore = false) => {
-  console.log('=== 获取用户列表 ===')
-  console.log('加载更多:', isLoadMore)
-  console.log('当前页:', userListPage.value)
-  console.log('搜索关键字:', userSearchKey.value)
-  
-  if (isLoadMore) {
-    loadingMoreUsers.value = true
-  } else {
-    userListLoading.value = true
-  }
-  
-  try {
-    const res = await getUserList({
-      page: userListPage.value,
-      count: userListPageSize.value,
-      key: userSearchKey.value
-    })
-    console.log('用户列表响应:', res)
-    
-    if (res.data.code === 200) {
-      const newData = res.data.data.data || []
-      userTotalCount.value = res.data.data.all_count || 0
-      countData.value = userTotalCount.value
-      
-      if (isLoadMore) {
-        // 加载更多时，追加数据
-        userList.value = [...userList.value, ...newData]
-      } else {
-        // 初始加载或搜索时，替换数据
-        userList.value = newData
-      }
-      
-      console.log('用户列表数据:', userList.value.length, '/', userTotalCount.value)
-      
-      if (userList.value.length > 0) {
-        console.log('第一个用户示例:', userList.value[0])
-      }
-    } else {
-      console.error('获取用户列表失败:', res.data)
-      ElMessage.error(res.data.message || '获取用户列表失败')
-      if (!isLoadMore) {
-        userList.value = []
-      }
-    }
-  } catch (error) {
-    console.error('获取用户列表错误:', error)
-    ElMessage.error('获取用户列表失败')
-    if (!isLoadMore) {
-      userList.value = []
-    }
-  } finally {
-    userListLoading.value = false
-    loadingMoreUsers.value = false
-  }
-}
-
-// 加载更多用户
-const loadMoreUsers = async () => {
-  if (loadingMoreUsers.value || !hasMoreUsers.value) {
-    return
-  }
-  
-  userListPage.value++
-  await getUserListData(true)
-}
-
-// 处理用户搜索
-const handleUserSearch = async (query) => {
-  console.log('搜索用户:', query)
-  userSearchKey.value = query || ''
-  userListPage.value = 1
-  userList.value = []
-  await getUserListData(false)
-}
-
-// 处理下拉框显示/隐藏
-const handleSelectVisibleChange = (visible) => {
-  if (visible) {
-    if (userList.value.length === 0) {
-      // 打开下拉框且列表为空时，加载初始数据
-      getUserListData(false)
-    }
-    // 添加滚动监听
-    setTimeout(() => {
-      setupScrollListener()
-    }, 100)
-  } else {
-    // 关闭下拉框时移除滚动监听
-    removeScrollListener()
-  }
-}
-
-// 滚动监听变量
-let scrollElement = null
-
-// 设置滚动监听
-const setupScrollListener = () => {
-  // 获取下拉框的滚动容器
-  const selectPopper = document.querySelector('.user-select-dropdown .el-select-dropdown__wrap')
-  if (selectPopper) {
-    scrollElement = selectPopper
-    scrollElement.addEventListener('scroll', handleScroll)
-    console.log('✅ 滚动监听已添加')
-  }
-}
-
-// 移除滚动监听
-const removeScrollListener = () => {
-  if (scrollElement) {
-    scrollElement.removeEventListener('scroll', handleScroll)
-    scrollElement = null
-    console.log('✅ 滚动监听已移除')
-  }
-}
-
-// 处理滚动事件
-const handleScroll = (e) => {
-  const { scrollTop, scrollHeight, clientHeight } = e.target
-  
-  // 距离底部 50px 时触发加载
-  const threshold = 50
-  const isNearBottom = scrollHeight - scrollTop - clientHeight < threshold
-  
-  if (isNearBottom && hasMoreUsers.value && !loadingMoreUsers.value && !userListLoading.value) {
-    console.log('📍 滚动到底部，自动加载更多...')
-    loadMoreUsers()
-  }
-}
-
 // 初始化
-onMounted(async() => {
-  console.log('=== 页面初始化 ===')
-  
-  // 优先获取用户列表
-  await getUserListData()
-  
-  // 如果有用户ID参数，自动查询
+onMounted(() => {
+  getUserListData()
   if (queryParams.user_id) {
-    console.log('检测到用户ID参数，自动查询:', queryParams.user_id)
     fetchUserBalance()
   } else {
-    console.log('未检测到用户ID，请从下拉框选择用户')
+    ElMessage.warning('缺少用户ID参数')
   }
 })
-
-// 组件销毁时清理
-onBeforeUnmount(() => {
-  console.log('=== 组件销毁，清理滚动监听 ===')
-  removeScrollListener()
-})
 </script>
 
 <style scoped>
 .user-balance-container {
   padding: 0;
+  background: #f5f7fa;
+  min-height: 100vh;
 }
 
-.filter-container {
-  margin-bottom: 20px;
-  border: 1px solid #e1e8ed;
-  background: #fafbfc;
-}
-
-.balance-info-card {
-  margin-bottom: 20px;
-  border-radius: 8px;
-}
-
-.table-container {
-  border: 1px solid #e1e8ed;
-  background: #ffffff;
-}
-
-.card-header {
+/* 页面头部 */
+.page-header {
+  background: #fff;
+  padding: 24px 32px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  border-bottom: 1px solid #e4e7ed;
+  margin-bottom: 24px;
 }
 
-.balance-amount {
-  font-size: 18px;
-  font-weight: bold;
-  color: #67c23a;
-}
-
-.amount-plus {
-  color: #67c23a;
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.amount-minus {
-  color: #f56c6c;
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.balance-after {
-  color: #409eff;
-  font-weight: 500;
-  font-size: 14px;
-}
-
-.balance-type-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.balance-type-hint {
-  font-size: 11px;
-  color: #909399;
-  font-style: italic;
-}
-
-.pagination {
-  margin-top: 24px;
-  justify-content: flex-end;
-}
-
-/* 用户选择下拉框样式 */
-.select-header {
-  padding: 8px 12px 0;
-  background-color: #f5f7fa;
-}
-
-.select-header-info {
+.header-left {
   display: flex;
   align-items: center;
-  gap: 8px;
-  color: #606266;
-  font-size: 13px;
+  gap: 24px;
 }
 
-.select-header-info .info-icon {
-  color: #409eff;
-  font-size: 16px;
-}
-
-.user-option {
-  padding: 0;
-}
-
-.user-option-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding: 10px 12px;
-  transition: all 0.2s;
-}
-
-.user-option-content:hover {
-  background-color: #f5f7fa;
-}
-
-.user-option-left {
-  flex: 1;
-  min-width: 0;
-}
-
-.user-option-name {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-weight: 500;
-  font-size: 14px;
-  color: #303133;
-  margin-bottom: 6px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.user-option-name .user-icon {
-  color: #409eff;
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.user-option-email {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: #909399;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.user-option-email .email-icon {
-  color: #909399;
-  font-size: 12px;
-  flex-shrink: 0;
-}
-
-.loading-option,
-.load-more-option,
-.no-more-option {
-  padding: 0 !important;
-  height: auto !important;
-  line-height: normal !important;
-}
-
-.loading-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px;
-  color: #409eff;
-  font-size: 13px;
-  border-top: 1px solid #ebeef5;
-  background-color: #f0f9ff;
-}
-
-.loading-content .is-loading {
-  font-size: 16px;
-  animation: rotating 2s linear infinite;
-}
-
-@keyframes rotating {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.load-more-content {
-  padding: 12px;
-  text-align: center;
-  border-top: 1px solid #ebeef5;
-  background-color: #fafafa;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.load-more-content:hover {
-  background-color: #e8f4ff;
-}
-
-.no-more-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px;
-  color: #67c23a;
-  font-size: 13px;
-  border-top: 1px solid #ebeef5;
-  background-color: #f0f9ef;
-}
-
-.no-more-content .el-icon {
-  font-size: 16px;
-}
-
-.empty-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 40px 20px;
-  color: #909399;
-}
-
-.empty-content .empty-icon {
-  font-size: 48px;
-  color: #dcdfe6;
-  margin-bottom: 12px;
-}
-
-.empty-content p {
+.page-title {
   margin: 0;
-  font-size: 14px;
-  color: #909399;
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
 }
 
-/* 余额卡片容器 */
-.balance-cards-container {
-  margin-bottom: 20px;
-}
-
-/* 余额卡片基础样式 */
-.balance-card {
-  border-radius: 8px;
-  transition: all 0.3s ease;
-  border: 1px solid #e4e7ed;
-  overflow: hidden;
-}
-
-.balance-card:hover {
-  border-color: #c0c4cc;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-.balance-card-content {
-  padding: 20px;
-}
-
-/* 卡片头部 */
-.balance-header {
+.user-info {
   display: flex;
   align-items: center;
   gap: 12px;
+  padding: 8px 16px;
+  background: #f5f7fa;
+  border-radius: 4px;
+}
+
+.user-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.user-id {
+  font-size: 13px;
+  color: #909399;
+}
+
+/* 余额卡片 */
+.balance-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  padding: 0 32px 24px;
+}
+
+.balance-card {
+  background: #fff;
+  border-radius: 8px;
+  padding: 24px;
+  border: 1px solid #e4e7ed;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.balance-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #409eff, #66b1ff);
+}
+
+.balance-card-entity::before {
+  background: linear-gradient(90deg, #67c23a, #85ce61);
+}
+
+.balance-card-general::before {
+  background: linear-gradient(90deg, #409eff, #66b1ff);
+}
+
+.balance-card-withdraw::before {
+  background: linear-gradient(90deg, #e6a23c, #f0c78a);
+}
+
+.balance-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
+}
+
+.balance-card .card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   margin-bottom: 20px;
 }
 
-.balance-icon-wrapper {
-  width: 48px;
-  height: 48px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: white;
-  flex-shrink: 0;
-}
-
-.icon-entity {
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-}
-
-.icon-general {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-}
-
-.icon-withdraw {
-  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
-}
-
-.balance-type-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.balance-type-name {
+.balance-type {
   font-size: 16px;
   font-weight: 600;
   color: #303133;
-  margin-bottom: 4px;
 }
 
-.balance-type-desc {
+.balance-id {
   font-size: 12px;
   color: #909399;
+  background: #f5f7fa;
+  padding: 4px 8px;
+  border-radius: 4px;
 }
 
-/* 余额金额区域 */
-.balance-amount-section {
-  margin-bottom: 16px;
-  padding: 16px 0;
-  border-top: 1px solid #f0f0f0;
-  border-bottom: 1px solid #f0f0f0;
+.balance-card .card-body {
+  margin-bottom: 20px;
 }
 
-.amount-label {
-  font-size: 12px;
-  color: #909399;
+.balance-amount {
+  display: flex;
+  align-items: baseline;
   margin-bottom: 8px;
 }
 
-.amount-value {
-  display: flex;
-  align-items: baseline;
-}
-
-.amount-value .currency {
+.balance-amount .currency {
   font-size: 20px;
   color: #606266;
   margin-right: 4px;
 }
 
-.amount-value .amount {
+.balance-amount .amount {
   font-size: 32px;
   font-weight: 600;
   color: #303133;
 }
 
-/* 元数据区域 */
-.balance-meta {
-  margin-bottom: 16px;
-}
-
-.meta-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6px 0;
-}
-
-.meta-label {
-  font-size: 12px;
+.balance-time {
+  font-size: 13px;
   color: #909399;
 }
 
-.meta-value {
-  font-size: 12px;
-  color: #606266;
-  font-weight: 500;
-}
-
-/* 操作按钮区域 */
-.balance-actions {
+.balance-card .card-footer {
   display: flex;
   gap: 8px;
 }
 
-.balance-actions .el-button {
+.balance-card .card-footer .el-button {
   flex: 1;
 }
 
-/* 不同类型卡片的边框颜色 */
-.balance-card-entity:hover {
-  border-color: #f5576c;
+/* 记录区域 */
+.record-section {
+  background: #fff;
+  margin: 0 32px 32px;
+  border-radius: 8px;
+  border: 1px solid #e4e7ed;
+  overflow: hidden;
 }
 
-.balance-card-general:hover {
-  border-color: #00f2fe;
+.section-header {
+  padding: 20px 24px;
+  border-bottom: 1px solid #e4e7ed;
 }
 
-.balance-card-withdraw:hover {
-  border-color: #38f9d7;
-}
-
-/* 响应式设计 */
-@media screen and (max-width: 1200px) {
-  .balance-cards-container .el-col {
-    margin-bottom: 16px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .amount-value .amount {
-    font-size: 24px;
-  }
-  
-  .balance-type-name {
-    font-size: 14px;
-  }
-  
-  .balance-actions {
-    flex-direction: column;
-  }
-}
-
-/* 表格样式优化 */
-:deep(.el-table) {
-  border: none;
-  color: #2c3e50;
-}
-
-:deep(.el-table__header) {
-  background: #f8f9fa;
-}
-
-:deep(.el-table th) {
-  background: #f8f9fa !important;
-  border-bottom: 2px solid #e1e8ed;
-  color: #2c3e50;
+.section-title {
+  margin: 0;
+  font-size: 16px;
   font-weight: 600;
-  font-size: 13px;
+  color: #303133;
 }
 
-:deep(.el-table td) {
-  border-bottom: 1px solid #f0f2f5;
-  color: #34495e;
-}
-
-:deep(.el-table tr:hover > td) {
-  background-color: #f8f9fa !important;
-}
-
-:deep(.el-card__body) {
-  padding: 20px;
-}
-
-.pagination {
-  margin-top: 20px;
-  padding: 16px 20px;
-  border-top: 1px solid #e1e8ed;
-  background: #fafbfc;
-  justify-content: flex-end;
-}
-</style>
-
-<style>
-/* 全局样式 - 用户选择下拉框 */
-.user-select-dropdown {
-  max-height: 400px;
-}
-
-.user-select-dropdown .el-select-dropdown__item {
+.table-wrapper {
   padding: 0;
-  height: auto;
-  line-height: normal;
 }
 
-.user-select-dropdown .el-select-dropdown__item.is-disabled {
-  cursor: default;
-  background-color: transparent;
+.table-wrapper :deep(.el-table) {
+  border: none;
 }
 
-.user-select-dropdown .el-select-dropdown__item.is-disabled:hover {
-  background-color: transparent;
+.table-wrapper :deep(.el-table td),
+.table-wrapper :deep(.el-table th) {
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.table-wrapper :deep(.el-table tr:hover > td) {
+  background-color: #fafafa;
+}
+
+.amount-plus {
+  color: #67c23a;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.amount-minus {
+  color: #f56c6c;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.balance-after {
+  color: #303133;
+  font-weight: 500;
+}
+
+.pagination-wrapper {
+  padding: 16px 24px;
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid #e4e7ed;
+  background: #fafafa;
+}
+
+/* 响应式 */
+@media (max-width: 1200px) {
+  .balance-cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .balance-cards {
+    grid-template-columns: 1fr;
+  }
+  
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+  }
+  
+  .header-left {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
 }
 </style>
-
diff --git a/src/views/user/UserDetail.vue b/src/views/user/UserDetail.vue
index 3784779..f9f456e 100644
--- a/src/views/user/UserDetail.vue
+++ b/src/views/user/UserDetail.vue
@@ -393,6 +393,10 @@ const Edit = EditIcon
 const route = useRoute()
 const router = useRouter()
 
+// 引入tagsViewStore
+import { useTagsViewStore } from '@/store/tagsViewStore'
+const tagsViewStore = useTagsViewStore()
+
 // 用户信息
 const userInfo = ref({})
 const loading = ref(false)
@@ -546,6 +550,8 @@ const refreshData = () => {
 
 // 返回上一页
 const goBack = () => {
+  // 关闭当前tab
+  tagsViewStore.delVisitedView(route)
   router.go(-1)
 }
 
diff --git a/src/views/user/UserList.vue b/src/views/user/UserList.vue
index f298ae6..259d12f 100644
--- a/src/views/user/UserList.vue
+++ b/src/views/user/UserList.vue
@@ -129,6 +129,7 @@
                     <el-dropdown-item command="password">修改密码</el-dropdown-item>
                     <el-dropdown-item command="group">修改用户组</el-dropdown-item>
                     <el-dropdown-item command="realname">实名信息</el-dropdown-item>
+                    <el-dropdown-item command="balance">余额管理</el-dropdown-item>
                     <el-dropdown-item command="loginHistory">登录记录</el-dropdown-item>
                     <el-dropdown-item command="operationHistory">操作记录</el-dropdown-item>
                     <el-dropdown-item command="simulateLogin">模拟登录</el-dropdown-item>
@@ -676,6 +677,9 @@ const handleCommand = (command, row) => {
     case 'realname':
       handleRealnameModify(row)
       break
+    case 'balance':
+      handleBalanceManage(row)
+      break
     case 'loginHistory':
       handleLoginHistory(row)
       break
@@ -691,6 +695,14 @@ const handleCommand = (command, row) => {
   }
 }
 
+// 余额管理
+const handleBalanceManage = (row) => {
+  router.push({
+    path: '/user/balance',
+    query: { user_id: row.UserId }
+  })
+}
+
 
 // 模拟登录
 const handleSimulateLogin = async (row) => {