优化用户和工单管理功能

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

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>