优化用户和工单管理功能

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

src/config/menus.js

@@ -24,10 +24,6 @@ export const menus = [
         path: '/user/list',
         title: '用户列表'
       },
-      {
-        path: '/user/balance',
-        title: '用户余额管理'
-      },
       {
         path: '/user/group',
         title: '用户组管理'

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>

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

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

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