diff --git a/.gitea/workflows/build-service-server.yaml b/.gitea/workflows/build-service-server.yaml
index 9c09511..c68901b 100644
--- a/.gitea/workflows/build-service-server.yaml
+++ b/.gitea/workflows/build-service-server.yaml
@@ -37,7 +37,7 @@ jobs:
 
   deploy:
     needs: build
-    runs-on: ubuntu-latest
+    runs-on: hongKong
     steps:
       - name: Download Artifact
         uses: actions/download-artifact@v3
diff --git a/src/api/ticket.js b/src/api/ticket.js
index 47f9dbd..7ea0668 100644
--- a/src/api/ticket.js
+++ b/src/api/ticket.js
@@ -5,8 +5,13 @@ import request from "@/utils/request.js";
  * @returns {Promise}
  */
 
-export function getTickerList(count, page, status) {
-  return request.get('/api/v1/admin/work_order/list', { count, page, status })
+export function getTickerList(count, page, status, orderBy, order) {
+  const params = { count, page }
+  if (status !== undefined && status !== '') params.status = status
+  if (orderBy) params.orderBy = orderBy
+  if (order) params.order = order
+  console.log('工单列表请求参数:', params) // 调试日志
+  return request.get('/api/v1/admin/work_order/list', params)
 }
 
 // 待处理
diff --git a/src/config/menus.js b/src/config/menus.js
index d889424..adabf4f 100644
--- a/src/config/menus.js
+++ b/src/config/menus.js
@@ -6,8 +6,14 @@ export const menus = [
   },
   {
     path: '/ticket',
-    title: '工单处理',
-    icon: 'DataBoard'
+    title: '工单管理',
+    icon: 'Tickets',
+    children: [
+      {
+        path: '/ticket/list',
+        title: '工单列表'
+      }
+    ]
   },
   {
     path: '/user',
@@ -18,10 +24,6 @@ export const menus = [
         path: '/user/list',
         title: '用户列表'
       },
-      {
-        path: '/user/balance',
-        title: '用户余额管理'
-      },
       {
         path: '/user/group',
         title: '用户组管理'
diff --git a/src/router/index.js b/src/router/index.js
index 61ae1b1..5af0bf8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -39,7 +39,27 @@ const routes = [
           title: '工单管理',
           icon: 'Tickets'
         },
-        component: () => import('../views/ticket/TicketChat.vue'),
+        redirect: '/ticket/list',
+        children: [
+          {
+            path: 'list',
+            name: 'TicketList',
+            component: () => import('../views/ticket/TicketList.vue'),
+            meta: {
+              title: '工单列表'
+            }
+          },
+          {
+            path: 'detail',
+            name: 'TicketDetail',
+            component: () => import('../views/ticket/TicketDetail.vue'),
+            meta: {
+              title: '工单详情',
+              hidden: true,
+              activeMenu: '/ticket/list'
+            }
+          }
+        ]
       },
 
       // ACS管理路由
diff --git a/src/views/product/ProductList.vue b/src/views/product/ProductList.vue
index c950298..0ec3de4 100644
--- a/src/views/product/ProductList.vue
+++ b/src/views/product/ProductList.vue
@@ -706,7 +706,10 @@ const paramValueForm = reactive({
   attr_id: undefined,
   attr_name: '',
   attr_value: '',
-  attr_price: 0
+  attr_price: 0,
+  index: 0,
+  attr_range: 0,
+  range_type: 'equal'
 })
 
 const paramValueRules = {
@@ -853,7 +856,10 @@ const handleAddParamValue = () => {
     attr_id: undefined,
     attr_name: '',
     attr_value: '',
-    attr_price: 0
+    attr_price: 0,
+    index: 0,
+    attr_range: 0,
+    range_type: 'equal'
   })
   paramValueFormRef.value?.resetFields()
 }
@@ -866,7 +872,10 @@ const handleEditParamValue = (row) => {
     attr_id: row.id,
     attr_name: row.name,
     attr_value: row.value,
-    attr_price: row.price / 100
+    attr_price: row.price / 100,
+    index: row.index || 0,
+    attr_range: row.attr_range || 0,
+    range_type: row.range_type || 'equal'
   })
 }
 
@@ -900,7 +909,10 @@ const submitParamValueForm = () => {
           arg_id: Number(currentParam.value.id),
           attr_name: paramValueForm.attr_name,
           attr_value: paramValueForm.attr_value,
-          attr_price: paramValueForm.attr_price
+          attr_price: paramValueForm.attr_price,
+          index: Number(paramValueForm.index),
+          attr_range: Number(paramValueForm.attr_range),
+          range_type: paramValueForm.range_type
         }
         if (paramValueFormType.value === 'edit') {
           submitData.attr_id = paramValueForm.attr_id
diff --git a/src/views/ticket/TicketDetail.vue b/src/views/ticket/TicketDetail.vue
new file mode 100644
index 0000000..ce79c8c
--- /dev/null
+++ b/src/views/ticket/TicketDetail.vue
@@ -0,0 +1,1322 @@
+<template>
+  <div class="ticket-detail-page">
+    <!-- 头部信息 -->
+    <div class="page-header">
+      <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-select 
+          v-model="ticketInfo.status" 
+          size="small" 
+          style="width: 120px"
+          @change="handleStatusChange"
+        >
+          <el-option label="待处理" value="pending" />
+          <el-option label="处理中" value="processing" />
+          <el-option label="已回复" value="replied" />
+          <el-option label="已完成" value="completed" />
+        </el-select>
+        <el-button
+          v-if="ticketInfo.status !== 'completed'"
+          type="success"
+          size="small"
+          @click="handleComplete"
+        >
+          结束工单
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 聊天记录 -->
+    <div class="chat-container" v-loading="isLoadingMessages">
+      <div class="chat-messages" ref="messagesContainer">
+        <div
+          v-for="(message, index) in messages"
+          :key="index"
+          :class="['message-item', message.isAdmin ? 'message-admin' : 'message-user']"
+        >
+          <div class="message-avatar" v-if="!message.isAdmin">
+            <el-avatar :size="36" :src="message.avatar">{{ ticketInfo?.username?.charAt(0) || 'U' }}</el-avatar>
+          </div>
+          <div class="message-content">
+            <div class="message-text" v-if="message.content">
+              {{ message.content }}
+              <span 
+                v-if="message.isAdmin && !message.isTempMessage"
+                class="edit-btn"
+                @click="handleEditMessage(message)"
+                title="编辑消息"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+                </svg>
+              </span>
+            </div>
+            <div class="message-images" v-if="message.images && message.images.length">
+              <img
+                v-for="(img, imgIndex) in message.images"
+                :key="imgIndex"
+                :src="img"
+                class="message-image"
+                @click="openImage(img)"
+              />
+            </div>
+            <div class="message-time">{{ formatMessageTime(message.time) }}</div>
+          </div>
+          <div class="message-avatar" v-if="message.isAdmin">
+            <el-avatar :size="36" :src="message.avatar">A</el-avatar>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 回复输入区域 -->
+    <div class="reply-container" v-if="ticketInfo && ticketInfo.status !== 'completed'">
+      <!-- 图片预览 -->
+      <div class="upload-preview" v-if="selectedImages.length > 0">
+        <div class="preview-item" v-for="(image, index) in selectedImages" :key="index">
+          <img :src="image" alt="预览图片" />
+          <div class="delete-preview" @click="removeImage(index)">×</div>
+        </div>
+      </div>
+
+      <!-- 快捷回复 -->
+      <div class="quick-replies">
+        <el-button
+          v-for="(reply, index) in quickReplies"
+          :key="index"
+          size="small"
+          @click="useQuickReply(reply)"
+        >
+          {{ reply.title }}
+        </el-button>
+      </div>
+
+      <!-- 输入框 -->
+      <div 
+        class="input-area"
+        @drop.prevent="handleDrop"
+        @dragover.prevent="handleDragOver"
+        @dragleave.prevent="handleDragLeave"
+        :class="{ 'drag-over': isDragOver }"
+      >
+        <el-input
+          ref="textareaRef"
+          v-model="messageInput"
+          type="textarea"
+          :rows="3"
+          placeholder="请输入回复内容（支持粘贴图片和拖拽图片）..."
+          @keyup.ctrl.enter="sendMessage"
+        />
+        <div class="input-actions">
+          <div class="left-actions">
+            <el-upload
+              action="#"
+              :auto-upload="false"
+              :show-file-list="false"
+              :on-change="handleFileChange"
+              multiple
+              accept="image/*"
+            >
+              <el-button type="primary" plain icon="Plus">图片</el-button>
+            </el-upload>
+          </div>
+          <span class="hint-text">Ctrl + Enter 发送</span>
+          <el-button
+            type="primary"
+            :disabled="!messageInput.trim() && selectedImages.length === 0"
+            :loading="isSending"
+            @click="sendMessage"
+          >
+            发送
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 已结束提示 -->
+    <div class="closed-notice" v-else-if="ticketInfo && ticketInfo.status === 'completed'">
+      <el-alert title="该工单已结束，无法继续回复" type="info" :closable="false" />
+    </div>
+
+    <!-- 编辑消息对话框 -->
+    <el-dialog v-model="editDialogVisible" title="编辑消息" width="600px">
+      <el-form>
+        <el-form-item label="消息内容">
+          <el-input
+            v-model="editMessageContent"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入消息内容"
+          />
+        </el-form-item>
+        <el-form-item label="图片">
+          <!-- 现有图片预览 -->
+          <div class="edit-images-container">
+            <div class="edit-preview-item" v-for="(image, index) in editMessageImages" :key="index">
+              <img :src="image" alt="图片" />
+              <div class="delete-preview" @click="removeEditImage(index)">×</div>
+            </div>
+            <!-- 添加图片按钮 -->
+            <el-upload
+              action="#"
+              :auto-upload="false"
+              :show-file-list="false"
+              :on-change="handleEditFileChange"
+              multiple
+              accept="image/*"
+            >
+              <div class="add-image-btn">
+                <el-icon :size="24"><Plus /></el-icon>
+                <div class="add-text">添加图片</div>
+              </div>
+            </el-upload>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="editDialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="isEditingSaving" @click="saveEditMessage">保存</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 图片查看器 -->
+    <el-dialog v-model="imageViewerVisible" width="auto" destroy-on-close>
+      <img :src="currentViewImage" style="max-width: 100%; max-height: 80vh;" />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, onBeforeUnmount, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getTicketDetail, replyTicket, closeTicket, updateTicketInfo, updateTicketReplayInfo } from '@/api/ticket'
+import { Plus } from '@element-plus/icons-vue'
+import { getUserInfo } from '@/api/admin/user'
+import { uploadFile } from '@/api/admin/file'
+import { useUserStore } from '@/store/userStore'
+import { useTagsViewStore } from '@/store/tagsViewStore'
+
+const route = useRoute()
+const router = useRouter()
+const userStore = useUserStore()
+const tagsViewStore = useTagsViewStore()
+
+// 工单信息
+const ticketInfo = ref(null)
+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([])
+const selectedFiles = ref([]) // 存储原始文件对象
+const messagesContainer = ref(null)
+const textareaRef = ref(null)
+const isDragOver = ref(false)
+
+// 图片查看
+const imageViewerVisible = ref(false)
+const currentViewImage = ref('')
+
+// 编辑消息
+const editDialogVisible = ref(false)
+const editMessageContent = ref('')
+const editMessageImages = ref([])
+const editMessageFiles = ref([])
+const editOriginalFileIds = ref([]) // 保存原始文件ID
+const editingMessage = ref(null)
+const isEditingSaving = ref(false)
+
+// 定时刷新
+const refreshTimer = ref(null)
+
+// 快捷回复
+const quickReplies = [
+  { title: '您好，有什么可以帮助您的？', content: '您好，有什么可以帮助您的？' },
+  { title: '正在处理中', content: '您的问题正在处理中，请稍等片刻，我们会尽快给您答复。' },
+  { title: '需要更多信息', content: '为了更好地解决您的问题，请您提供更多相关信息。' },
+  { title: '问题已解决', content: '您的问题已解决，感谢您的反馈。如有其他问题，请随时联系我们。' }
+]
+
+// 状态转换
+const convertStatusToString = (status) => {
+  const statusMap = { 0: 'pending', 1: 'processing', 2: 'replied', 3: 'completed' }
+  return statusMap[status] || 'processing'
+}
+
+const getStatusText = (status) => {
+  const statusMap = { pending: '待处理', processing: '处理中', replied: '已回复', completed: '已完成' }
+  return statusMap[status] || status
+}
+
+const getStatusType = (status) => {
+  const typeMap = { pending: 'warning', processing: 'primary', replied: 'info', completed: 'success' }
+  return typeMap[status] || ''
+}
+
+// 判断是否是管理员
+const isAdmin = (userId) => {
+  return userId === userStore.userInfo?.user_id
+}
+
+// 比较两个消息列表是否相同
+const messagesEqual = (oldMessages, newMessages) => {
+  if (oldMessages.length !== newMessages.length) return false
+  
+  for (let i = 0; i < oldMessages.length; i++) {
+    const oldMsg = oldMessages[i]
+    const newMsg = newMessages[i]
+    
+    // 比较关键字段
+    if (oldMsg.id !== newMsg.id ||
+        oldMsg.content !== newMsg.content ||
+        oldMsg.images?.length !== newMsg.images?.length) {
+      return false
+    }
+    
+    // 比较图片URL
+    if (oldMsg.images && newMsg.images) {
+      for (let j = 0; j < oldMsg.images.length; j++) {
+        if (oldMsg.images[j] !== newMsg.images[j]) {
+          return false
+        }
+      }
+    }
+  }
+  
+  return true
+}
+
+// 获取工单详情
+const fetchTicketDetail = async (showLoading = true) => {
+  const workId = route.query.id
+  if (!workId) {
+    // 没有ID时静默跳转到列表页
+    router.replace('/ticket/list')
+    return
+  }
+
+  try {
+    if (showLoading) {
+      isLoadingMessages.value = true
+    }
+    const res = await getTicketDetail(workId)
+
+    if (res.code === 200) {
+      const detail = res.data
+      ticketInfo.value = {
+        id: detail.id,
+        title: detail.name,
+        username: detail.user?.userName || `用户${detail.user?.userId || 'Unknown'}`,
+        userId: detail.user?.userId,
+        avatar: detail.user?.coverUrl || '',
+        createTime: new Date(detail.created_at).toLocaleString(),
+        status: convertStatusToString(detail.status)
+      }
+
+      // 处理消息列表并按ID排序
+      if (detail.content && detail.content.length > 0) {
+        const newMessages = detail.content
+          .map((msg) => ({
+            id: msg.id,
+            content: msg.content !== 'empty' ? msg.content : null,
+            images: msg.flies ? msg.flies.map(file => file.url) : [],
+            fileIds: msg.flies ? msg.flies.map(file => file.id) : [], // 保存文件ID
+            time: msg.created_at || msg.updated_at || new Date().toLocaleString(),
+            isAdmin: isAdmin(msg.user?.userId),
+            userId: msg.user?.userId,
+            avatar: msg.user?.coverUrl || ''
+          }))
+          .sort((a, b) => a.id - b.id) // 按ID从小到大排序
+        
+        // 比较新旧消息列表，只有在有变化时才更新
+        const hasChanges = !messagesEqual(messages.value, newMessages)
+        
+        if (hasChanges) {
+          const shouldScroll = showLoading || newMessages.length > messages.value.length
+          messages.value = newMessages
+          
+          if (shouldScroll) {
+            nextTick(() => scrollToBottom())
+          }
+        }
+      }
+    } else {
+      ElMessage.error(res.message || '获取工单详情失败')
+    }
+  } catch (error) {
+    console.error('获取工单详情出错:', error)
+    if (showLoading) {
+      ElMessage.error('网络错误，请稍后重试')
+    }
+  } finally {
+    if (showLoading) {
+      isLoadingMessages.value = false
+    }
+  }
+}
+
+// 发送消息
+const sendMessage = async () => {
+  if ((!messageInput.value.trim() && selectedImages.value.length === 0) || isSending.value) return
+
+  const workId = route.query.id
+  const content = messageInput.value.trim() || 'empty'
+
+  try {
+    isSending.value = true
+    const inputMsg = messageInput.value.trim()
+    const inputImages = [...selectedImages.value]
+    const inputFiles = [...selectedFiles.value]
+
+    // 上传图片并获取文件ID
+    let fileIds = []
+    if (inputFiles.length > 0) {
+      try {
+        const formData = new FormData()
+        
+        // 添加所有文件
+        inputFiles.forEach((file) => {
+          formData.append('files', file)
+          formData.append('file_names', file.name)
+        })
+        
+        // 设置上传类型为工单
+        formData.append('update_type', 'work_order')
+        formData.append('open_down', 'true')
+        
+        const uploadRes = await uploadFile(formData)
+        
+        if (uploadRes.data?.code === 200) {
+          // 从返回的数据中提取文件ID（字段名是 id）
+          const data = uploadRes.data.data
+          if (Array.isArray(data)) {
+            fileIds = data.map(item => String(item.id))
+          } else if (data.id) {
+            fileIds = [String(data.id)]
+          }
+          
+          if (fileIds.length === 0) {
+            ElMessage.error('未获取到文件ID')
+            isSending.value = false
+            return
+          }
+        } else {
+          ElMessage.error(uploadRes.data?.message || '图片上传失败')
+          isSending.value = false
+          return
+        }
+      } catch (error) {
+        console.error('图片上传失败:', error)
+        ElMessage.error('图片上传失败，请重试')
+        isSending.value = false
+        return
+      }
+    }
+
+    messageInput.value = ''
+    selectedImages.value = []
+    selectedFiles.value = []
+
+    // 临时消息
+    const tempMsg = {
+      id: Date.now(),
+      content: inputMsg || null,
+      images: inputImages,
+      time: new Date().toLocaleString(),
+      isAdmin: true,
+      userId: userStore.userInfo?.user_id,
+      avatar: userStore.userInfo?.cover_url || '',
+      isTempMessage: true
+    }
+    messages.value.push(tempMsg)
+    await nextTick()
+    scrollToBottom()
+
+    const res = await replyTicket(workId, content, fileIds.join(','))
+
+    if (res.code === 200) {
+      messages.value = messages.value.filter(msg => !msg.isTempMessage)
+      await fetchTicketDetail()
+      ElMessage.success('回复成功')
+    } else {
+      messages.value = messages.value.filter(msg => !msg.isTempMessage)
+      messageInput.value = inputMsg
+      selectedImages.value = inputImages
+      selectedFiles.value = inputFiles
+      ElMessage.error(res.message || '发送失败')
+    }
+  } catch (error) {
+    console.error('发送消息出错:', error)
+    ElMessage.error('网络错误，请稍后重试')
+    messages.value = messages.value.filter(msg => !msg.isTempMessage)
+  } finally {
+    isSending.value = false
+  }
+}
+
+// 修改工单状态
+const handleStatusChange = async (newStatus) => {
+  const statusMap = {
+    'pending': 0,
+    'processing': 1,
+    'replied': 2,
+    'completed': 3
+  }
+  
+  const oldStatus = ticketInfo.value.status
+  
+  try {
+    const formData = new FormData()
+    formData.append('work_id', route.query.id)
+    formData.append('Status', statusMap[newStatus])
+    
+    const res = await updateTicketInfo(formData)
+    
+    if (res.code === 200) {
+      ElMessage.success('工单状态已更新')
+      ticketInfo.value.status = newStatus
+    } else {
+      ElMessage.error(res.message || '更新失败')
+      ticketInfo.value.status = oldStatus // 恢复原状态
+    }
+  } catch (error) {
+    console.error('更新工单状态出错:', error)
+    ElMessage.error('网络错误，请稍后重试')
+    ticketInfo.value.status = oldStatus // 恢复原状态
+  }
+}
+
+// 结束工单
+const handleComplete = () => {
+  ElMessageBox.confirm('确定要结束此工单吗？结束后将无法继续回复。', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const res = await closeTicket(route.query.id)
+      if (res.code === 200) {
+        ElMessage.success('工单已成功结束')
+        ticketInfo.value.status = 'completed'
+      } else {
+        ElMessage.error(res.message || '结束工单失败')
+      }
+    } catch (error) {
+      ElMessage.error('网络错误，请稍后重试')
+    }
+  }).catch(() => {})
+}
+
+// 图片处理
+const handleFileChange = (file) => {
+  if (!file) return
+  addImageFile(file.raw)
+}
+
+// 添加图片文件（统一处理函数）
+const addImageFile = (file) => {
+  // 验证文件类型
+  if (!file.type.startsWith('image/')) {
+    ElMessage.warning('只支持图片格式')
+    return
+  }
+  
+  // 验证文件大小（限制10MB）
+  if (file.size > 10 * 1024 * 1024) {
+    ElMessage.warning('图片大小不能超过10MB')
+    return
+  }
+  
+  // 保存原始文件对象用于上传
+  selectedFiles.value.push(file)
+  
+  // 读取文件用于预览
+  const reader = new FileReader()
+  reader.onload = (e) => selectedImages.value.push(e.target.result)
+  reader.readAsDataURL(file)
+}
+
+// 处理粘贴事件
+const handlePaste = (e) => {
+  const items = e.clipboardData?.items
+  if (!items) return
+  
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    if (item.type.indexOf('image') !== -1) {
+      e.preventDefault()
+      const file = item.getAsFile()
+      if (file) {
+        addImageFile(file)
+        ElMessage.success('图片已添加')
+      }
+    }
+  }
+}
+
+// 处理拖拽进入
+const handleDragOver = (e) => {
+  isDragOver.value = true
+}
+
+// 处理拖拽离开
+const handleDragLeave = (e) => {
+  isDragOver.value = false
+}
+
+// 处理文件拖放
+const handleDrop = (e) => {
+  isDragOver.value = false
+  
+  const files = e.dataTransfer?.files
+  if (!files || files.length === 0) return
+  
+  let addedCount = 0
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i]
+    if (file.type.startsWith('image/')) {
+      addImageFile(file)
+      addedCount++
+    }
+  }
+  
+  if (addedCount > 0) {
+    ElMessage.success(`已添加 ${addedCount} 张图片`)
+  } else {
+    ElMessage.warning('未找到图片文件')
+  }
+}
+
+const removeImage = (index) => {
+  selectedImages.value.splice(index, 1)
+  selectedFiles.value.splice(index, 1)
+}
+
+const openImage = (img) => {
+  currentViewImage.value = img
+  imageViewerVisible.value = true
+}
+
+// 编辑消息
+const handleEditMessage = (message) => {
+  editingMessage.value = message
+  editMessageContent.value = message.content || ''
+  editMessageImages.value = message.images ? [...message.images] : []
+  editOriginalFileIds.value = message.fileIds ? [...message.fileIds] : []
+  editMessageFiles.value = []
+  editDialogVisible.value = true
+}
+
+// 处理编辑对话框中的文件选择
+const handleEditFileChange = (file) => {
+  if (!file) return
+  
+  // 验证文件类型
+  if (!file.raw.type.startsWith('image/')) {
+    ElMessage.warning('只支持图片格式')
+    return
+  }
+  
+  // 验证文件大小（限制10MB）
+  if (file.raw.size > 10 * 1024 * 1024) {
+    ElMessage.warning('图片大小不能超过10MB')
+    return
+  }
+  
+  // 保存原始文件对象用于上传
+  editMessageFiles.value.push(file.raw)
+  
+  // 读取文件用于预览
+  const reader = new FileReader()
+  reader.onload = (e) => editMessageImages.value.push(e.target.result)
+  reader.readAsDataURL(file.raw)
+}
+
+// 删除编辑对话框中的图片
+const removeEditImage = (index) => {
+  const originalImagesCount = editingMessage.value?.images?.length || 0
+  
+  // 如果删除的是原始图片，从原始文件ID列表中删除
+  if (index < originalImagesCount) {
+    editOriginalFileIds.value.splice(index, 1)
+  } else {
+    // 如果删除的是新添加的图片，从新文件列表中删除
+    const fileIndex = index - originalImagesCount
+    if (fileIndex >= 0 && fileIndex < editMessageFiles.value.length) {
+      editMessageFiles.value.splice(fileIndex, 1)
+    }
+  }
+  
+  // 从预览列表中删除
+  editMessageImages.value.splice(index, 1)
+}
+
+// 保存编辑的消息
+const saveEditMessage = async () => {
+  if (!editMessageContent.value.trim()) {
+    ElMessage.warning('消息内容不能为空')
+    return
+  }
+  
+  if (!editingMessage.value || !editingMessage.value.id) {
+    ElMessage.error('无法获取消息ID')
+    return
+  }
+  
+  try {
+    isEditingSaving.value = true
+    
+    // 如果有新添加的图片，先上传
+    let newFileIds = []
+    if (editMessageFiles.value.length > 0) {
+      try {
+        const formData = new FormData()
+        
+        editMessageFiles.value.forEach((file) => {
+          formData.append('files', file)
+          formData.append('file_names', file.name)
+        })
+        
+        formData.append('update_type', 'work_order')
+        formData.append('open_down', 'true')
+        
+        const uploadRes = await uploadFile(formData)
+        
+        if (uploadRes.data?.code === 200) {
+          const data = uploadRes.data.data
+          if (Array.isArray(data)) {
+            newFileIds = data.map(item => String(item.id))
+          } else if (data.id) {
+            newFileIds = [String(data.id)]
+          }
+        } else {
+          ElMessage.error(uploadRes.data?.message || '图片上传失败')
+          isEditingSaving.value = false
+          return
+        }
+      } catch (error) {
+        console.error('图片上传失败:', error)
+        ElMessage.error('图片上传失败，请重试')
+        isEditingSaving.value = false
+        return
+      }
+    }
+    
+    // 合并原始文件ID和新上传的文件ID
+    const allFileIds = [...editOriginalFileIds.value, ...newFileIds]
+    
+    const formData = new FormData()
+    formData.append('id', editingMessage.value.id)
+    formData.append('content', editMessageContent.value.trim())
+    formData.append('files', allFileIds.join(','))
+    
+    const res = await updateTicketReplayInfo(formData)
+    
+    if (res.code === 200) {
+      ElMessage.success('消息已更新')
+      editDialogVisible.value = false
+      
+      // 重新获取工单详情以确保数据同步
+      await fetchTicketDetail(false)
+    } else {
+      ElMessage.error(res.message || '更新失败')
+    }
+  } catch (error) {
+    console.error('更新消息出错:', error)
+    ElMessage.error('网络错误，请稍后重试')
+  } finally {
+    isEditingSaving.value = false
+  }
+}
+
+// 快捷回复
+const useQuickReply = (reply) => {
+  messageInput.value = reply.content
+}
+
+// 滚动到底部
+const scrollToBottom = () => {
+  if (messagesContainer.value) {
+    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+  }
+}
+
+// 格式化时间
+const formatMessageTime = (timeStr) => {
+  if (!timeStr) return ''
+  try {
+    const date = new Date(timeStr)
+    if (isNaN(date.getTime())) return ''
+    
+    const now = new Date()
+    const time = `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+    
+    // 判断是否是今天
+    const isToday = date.getFullYear() === now.getFullYear() &&
+                    date.getMonth() === now.getMonth() &&
+                    date.getDate() === now.getDate()
+    
+    if (isToday) {
+      return time
+    }
+    
+    // 判断是否是昨天
+    const yesterday = new Date(now)
+    yesterday.setDate(yesterday.getDate() - 1)
+    const isYesterday = date.getFullYear() === yesterday.getFullYear() &&
+                        date.getMonth() === yesterday.getMonth() &&
+                        date.getDate() === yesterday.getDate()
+    
+    if (isYesterday) {
+      return `昨天 ${time}`
+    }
+    
+    // 判断是否是本周（周一到周日）
+    // 获取本周一的日期（0点）
+    const currentDay = now.getDay() // 0-6，0是周日
+    const mondayOffset = currentDay === 0 ? -6 : 1 - currentDay // 周日的话往前推6天，其他往前推到周一
+    const monday = new Date(now)
+    monday.setDate(now.getDate() + mondayOffset)
+    monday.setHours(0, 0, 0, 0)
+    
+    // 获取本周日的日期（23:59:59）
+    const sunday = new Date(monday)
+    sunday.setDate(monday.getDate() + 6)
+    sunday.setHours(23, 59, 59, 999)
+    
+    // 判断消息日期是否在本周范围内
+    if (date >= monday && date <= sunday) {
+      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      return `${weekdays[date.getDay()]} ${time}`
+    }
+    
+    // 其他情况显示完整日期时间
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    return `${year}-${month}-${day} ${time}`
+  } catch (e) {
+    return ''
+  }
+}
+
+// 返回列表
+const goBack = () => {
+  // 关闭当前tab
+  tagsViewStore.delVisitedView(route)
+  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(() => {
+    if (ticketInfo.value?.status !== 'completed') {
+      fetchTicketDetail(false) // 定时刷新时不显示 loading
+    }
+  }, 10000)
+}
+
+const stopAutoRefresh = () => {
+  if (refreshTimer.value) {
+    clearInterval(refreshTimer.value)
+    refreshTimer.value = null
+  }
+}
+
+// 监听路由query变化，重新加载数据
+watch(
+  () => route.query.id,
+  (newId) => {
+    if (newId) {
+      fetchTicketDetail()
+    }
+  }
+)
+
+onMounted(() => {
+  fetchTicketDetail()
+  startAutoRefresh()
+  
+  // 绑定粘贴事件到原生 textarea
+  nextTick(() => {
+    const textarea = textareaRef.value?.$el?.querySelector('textarea')
+    if (textarea) {
+      textarea.addEventListener('paste', handlePaste)
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  stopAutoRefresh()
+  
+  // 移除粘贴事件监听
+  const textarea = textareaRef.value?.$el?.querySelector('textarea')
+  if (textarea) {
+    textarea.removeEventListener('paste', handlePaste)
+  }
+})
+</script>
+
+<style scoped>
+.ticket-detail-page {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 100px);
+  min-height: 600px;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.ticket-id {
+  font-weight: 500;
+  color: #303133;
+  font-size: 14px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.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;
+}
+
+.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 {
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.user-detail .create-time {
+  font-size: 12px;
+  color: #909399;
+}
+
+.ticket-title {
+  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;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+.message-item {
+  display: flex;
+  margin-bottom: 16px;
+  gap: 12px;
+}
+
+.message-user {
+  justify-content: flex-start;
+}
+
+.message-admin {
+  justify-content: flex-end;
+}
+
+.message-content {
+  max-width: 60%;
+}
+
+.message-text {
+  background: #fff;
+  padding: 12px 16px;
+  border-radius: 8px;
+  word-break: break-word;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.message-text .edit-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  padding: 4px;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: all 0.2s;
+  border-radius: 4px;
+  vertical-align: middle;
+}
+
+.message-text .edit-btn:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.message-text:hover .edit-btn {
+  opacity: 1;
+}
+
+.message-admin .message-text {
+  background: #409eff;
+  color: #fff;
+}
+
+.message-admin .message-text .edit-btn {
+  color: #fff;
+  opacity: 0.7;
+}
+
+.message-admin .message-text .edit-btn:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.message-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.message-image {
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.message-time {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+}
+
+.message-admin .message-time {
+  text-align: right;
+}
+
+.reply-container {
+  background: #fff;
+  padding: 16px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+.upload-preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.preview-item {
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+
+.preview-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.delete-preview {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 20px;
+  height: 20px;
+  background: #f56c6c;
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.quick-replies {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.input-area {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  position: relative;
+  transition: all 0.3s;
+}
+
+.input-area.drag-over {
+  background: #f0f9ff;
+  border: 2px dashed #409eff;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.input-area.drag-over::before {
+  content: '释放以添加图片';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #409eff;
+  font-size: 14px;
+  font-weight: 500;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.input-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.left-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.hint-text {
+  font-size: 12px;
+  color: #909399;
+}
+
+.closed-notice {
+  padding: 16px 20px;
+  background: #fff;
+  border-top: 1px solid #ebeef5;
+}
+
+.edit-images-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.edit-preview-item {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid #dcdfe6;
+}
+
+.edit-preview-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.edit-preview-item .delete-preview {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 24px;
+  height: 24px;
+  background: #f56c6c;
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.add-image-btn {
+  width: 100px;
+  height: 100px;
+  border: 2px dashed #dcdfe6;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  color: #909399;
+}
+
+.add-image-btn:hover {
+  border-color: #409eff;
+  color: #409eff;
+}
+
+.add-image-btn .add-text {
+  font-size: 12px;
+  margin-top: 4px;
+}
+</style>
diff --git a/src/views/ticket/TicketList.vue b/src/views/ticket/TicketList.vue
new file mode 100644
index 0000000..64fd0d9
--- /dev/null
+++ b/src/views/ticket/TicketList.vue
@@ -0,0 +1,394 @@
+<template>
+  <div class="ticket-list-page">
+    <!-- 顶部工具栏 -->
+    <div class="toolbar">
+      <div class="status-tabs">
+        <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 class="tab-item" :class="{ active: activeStatus === '' }" @click="filterByStatus('')">
+          全部 <span class="count">{{ stats.total }}</span>
+        </div>
+      </div>
+      <div class="toolbar-right">
+        <el-select v-model="sortBy" placeholder="排序方式" clearable style="width: 140px" @change="handleSortChange">
+          <el-option label="不排序" value="" />
+          <el-option label="创建时间" value="created_at" />
+          <el-option label="更新时间" value="updated_at" />
+          <el-option label="工单号" value="id" />
+        </el-select>
+        <el-select v-model="sortOrder" placeholder="排序顺序" clearable style="width: 100px" @change="handleSortChange">
+          <el-option label="默认" value="" />
+          <el-option label="降序" value="desc" />
+          <el-option label="升序" value="asc" />
+        </el-select>
+        <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>
+
+    <!-- 工单表格 -->
+    <el-table
+      v-loading="isLoading"
+      :data="filteredTickets"
+      stripe
+      style="width: 100%"
+      @row-click="handleRowClick"
+    >
+      <el-table-column prop="id" label="工单号" width="100" />
+      <el-table-column label="用户" width="180">
+        <template #default="{ row }">
+          <div class="user-info">
+            <el-avatar :size="32" :src="row.avatar">{{ row.username?.charAt(0) }}</el-avatar>
+            <span class="username">{{ row.username }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="title" label="工单标题" min-width="200" show-overflow-tooltip />
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">
+          <el-tag :type="getStatusType(row.status)" size="small">
+            {{ getStatusText(row.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" label="创建时间" width="180" />
+      <el-table-column prop="lastReplyTime" label="最后回复" width="180" />
+      <el-table-column label="操作" width="150" fixed="right">
+        <template #default="{ row }">
+          <el-button type="primary" size="small" @click.stop="goToDetail(row)">
+            回复
+          </el-button>
+          <el-button
+            v-if="row.status !== 'completed'"
+            type="success"
+            size="small"
+            @click.stop="handleComplete(row)"
+          >
+            结束
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <div class="pagination-wrapper">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50, 100]"
+        :total="totalCount"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, onActivated } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  getTickerList,
+  closeTicket,
+  getTicketCount
+} from '@/api/ticket'
+
+const router = useRouter()
+
+// 分页
+const currentPage = ref(1)
+const pageSize = ref(10)
+const totalCount = ref(0)
+const isLoading = ref(false)
+
+// 工单数据
+const ticketList = ref([])
+const searchKeyword = ref('')
+const activeStatus = ref('pending') // 默认选中"待处理"
+
+// 排序
+const sortBy = ref('') // 默认不排序
+const sortOrder = ref('') // 默认不选择排序顺序
+
+// 统计数据
+const stats = reactive({
+  pending: 0,
+  processing: 0,
+  replied: 0,
+  completed: 0,
+  total: 0
+})
+
+
+
+
+
+// 状态转换
+const convertStatusToString = (status) => {
+  const statusMap = { 0: 'pending', 1: 'processing', 2: 'replied', 3: 'completed' }
+  return statusMap[status] || 'processing'
+}
+
+const getStatusText = (status) => {
+  const statusMap = { pending: '待处理', processing: '处理中', replied: '已回复', completed: '已完成' }
+  return statusMap[status] || status
+}
+
+const getStatusType = (status) => {
+  const typeMap = { pending: 'warning', processing: 'primary', replied: 'info', completed: 'success' }
+  return typeMap[status] || ''
+}
+
+// 获取工单列表
+const fetchTicketList = async () => {
+  try {
+    isLoading.value = true
+    let statusParam = ''
+    if (activeStatus.value) {
+      const statusMap = { pending: '0', processing: '1', replied: '2', completed: '3' }
+      statusParam = statusMap[activeStatus.value] || ''
+    }
+
+    console.log('调用getTickerList，排序参数:', { sortBy: sortBy.value, sortOrder: sortOrder.value })
+    const res = await getTickerList(
+      pageSize.value, 
+      currentPage.value, 
+      statusParam,
+      sortBy.value,
+      sortOrder.value
+    )
+
+    if (res.code === 200) {
+      ticketList.value = (res.data.data || []).map(item => ({
+        id: item.work_id,
+        title: item.name,
+        username: item.user?.userName || `用户${item.user?.userId || 'Unknown'}`,
+        userId: item.user?.userId,
+        avatar: item.user?.coverUrl || '',
+        createTime: new Date(item.created_at).toLocaleString(),
+        lastReplyTime: new Date(item.update_time).toLocaleString(),
+        status: convertStatusToString(item.status)
+      }))
+      totalCount.value = res.data.all_count || 0
+    } else {
+      ElMessage.error(res.message || '获取工单列表失败')
+    }
+  } catch (error) {
+    console.error('获取工单列表出错:', error)
+    ElMessage.error('网络错误，请稍后重试')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// 获取统计数据
+const fetchStats = async () => {
+  try {
+    const res = await getTicketCount()
+    if (res.code === 200) {
+      const data = res.data
+      stats.total = data.all_count
+      stats.pending = data.wait_count
+      stats.replied = data.reply_count
+      stats.completed = data.close_count
+      stats.processing = data.all_count - data.wait_count - data.reply_count - data.close_count
+    }
+  } catch (error) {
+    console.error('获取统计数据出错:', error)
+  }
+}
+
+// 过滤后的工单列表
+const filteredTickets = computed(() => {
+  if (!searchKeyword.value) return ticketList.value
+  const keyword = searchKeyword.value.toLowerCase()
+  return ticketList.value.filter(ticket =>
+    ticket.title.toLowerCase().includes(keyword) ||
+    ticket.username.toLowerCase().includes(keyword) ||
+    String(ticket.id).includes(keyword)
+  )
+})
+
+// 按状态过滤
+const filterByStatus = (status) => {
+  if (activeStatus.value === status) return
+  activeStatus.value = status
+  currentPage.value = 1
+  fetchTicketList()
+}
+
+// 排序变化处理
+const handleSortChange = () => {
+  currentPage.value = 1
+  fetchTicketList()
+}
+
+// 搜索处理
+const handleSearch = () => {}
+
+// 分页处理
+const handleSizeChange = () => {
+  currentPage.value = 1
+  fetchTicketList()
+}
+
+const handlePageChange = () => {
+  fetchTicketList()
+}
+
+// 刷新列表
+const refreshList = () => {
+  fetchTicketList()
+  fetchStats()
+}
+
+// 跳转到详情页
+const goToDetail = (row) => {
+  router.push({ path: '/ticket/detail', query: { id: row.id } })
+}
+
+const handleRowClick = (row) => {
+  goToDetail(row)
+}
+
+// 结束工单
+const handleComplete = (ticket) => {
+  ElMessageBox.confirm('确定要结束此工单吗？结束后将无法继续回复。', '确认操作', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async () => {
+    try {
+      const res = await closeTicket(ticket.id)
+      if (res.code === 200) {
+        ElMessage.success('工单已成功结束')
+        refreshList()
+      } else {
+        ElMessage.error(res.message || '结束工单失败')
+      }
+    } catch (error) {
+      ElMessage.error('网络错误，请稍后重试')
+    }
+  }).catch(() => {})
+}
+
+let isFirstLoad = true
+
+onMounted(() => {
+  fetchTicketList()
+  fetchStats()
+})
+
+// 当页面被激活时（从详情页返回时）
+onActivated(() => {
+  // 跳过首次加载，只在从其他页面返回时刷新
+  if (!isFirstLoad) {
+    refreshList()
+  }
+  isFirstLoad = false
+})
+</script>
+
+<style scoped>
+.ticket-list-page {
+  padding: 0;
+  height: calc(100vh - 100px);
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  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 {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.username {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pagination-wrapper {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+:deep(.el-table) {
+  flex: 1;
+}
+
+:deep(.el-table tr) {
+  cursor: pointer;
+}
+</style>
diff --git a/src/views/user/UserBalance.vue b/src/views/user/UserBalance.vue
index 0bd1f4a..252784a 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,70 @@
 </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: '',
+  balance_type: '', // 初始化为空字符串，避免 undefined
   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 +235,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 +377,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 +388,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 +403,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 +431,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 +449,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..d3c8083 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>
@@ -512,12 +513,24 @@ const fetchUserList = async () => {
     const res = await getUserList(queryParams)
     console.log("获取用户列表：", res)
     if (res.data.code === 200) {
-      userList.value = res.data.data.data || []
+      // 映射 API 返回的字段到组件使用的字段格式
+      userList.value = (res.data.data.data || []).map(user => ({
+        UserId: user.user_id,
+        UserName: user.user_name,
+        Phone: user.phone,
+        Email: user.email,
+        Sex: user.sex,
+        Age: user.age,
+        IsAdmin: user.is_admin,
+        CoverID: user.cover_id,
+        avatarUrl: user.cover || '', // 直接使用 cover 字段作为头像 URL
+        UserGroup: user.user_group,
+        RealName: user.real_name,
+        IsDeleted: user.is_deleted,
+        CreatedAt: user.created_at
+      }))
       console.log("用户列表：", userList.value)
       total.value = res.data.data.all_count || 0
-      
-      // 为每个用户加载头像URL
-      await loadAvatarsForUsers()
     }
   } catch (error) {
     ElMessage.error('获取用户列表失败')
@@ -526,26 +539,6 @@ const fetchUserList = async () => {
   }
 }
 
-// 为用户列表加载头像URL
-const loadAvatarsForUsers = async () => {
-  const promises = userList.value.map(async (user) => {
-    if (user.CoverID) {
-      try {
-        const res = await getFileDetail({ file_id: user.CoverID })
-        if (res.data.code === 200) {
-          user.avatarUrl = res.data.data.url
-        }
-      } catch (error) {
-        console.error('加载头像失败:', error)
-        user.avatarUrl = ''
-      }
-    } else {
-      user.avatarUrl = ''
-    }
-  })
-  await Promise.all(promises)
-}
-
 // 查询用户列表
 const handleQuery = () => {
   queryParams.page = 1
@@ -676,6 +669,9 @@ const handleCommand = (command, row) => {
     case 'realname':
       handleRealnameModify(row)
       break
+    case 'balance':
+      handleBalanceManage(row)
+      break
     case 'loginHistory':
       handleLoginHistory(row)
       break
@@ -691,6 +687,14 @@ const handleCommand = (command, row) => {
   }
 }
 
+// 余额管理
+const handleBalanceManage = (row) => {
+  router.push({
+    path: '/user/balance',
+    query: { user_id: row.UserId }
+  })
+}
+
 
 // 模拟登录
 const handleSimulateLogin = async (row) => {