优化用户和工单管理功能

- 优化用户列表页面，移除头像批量加载导致的大量detail请求
- 移除工单列表自动刷新功能，避免页面跳转问题
- 将用户余额管理整合到用户列表操作菜单中
- 重构用户余额管理页面，采用现代化企业扁平化设计
- 移除用户余额管理独立菜单项
- 优化页面交互体验和视觉效果

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) {