From 6859753470e3e4b9dbf20656a21158a057659888 Mon Sep 17 00:00:00 2001
From: wlkjyy <wlkjyy@vip.qq.com>
Date: Mon, 15 Dec 2025 16:25:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A5=E5=8D=95=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E5=88=97=E8=A1=A8=E5=BD=A2=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E5=9B=9E=E5=A4=8D=E8=BF=9B=E5=85=A5=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/menus.js               |  10 +-
 src/router/index.js               |  22 +-
 src/views/ticket/TicketDetail.vue | 592 ++++++++++++++++++++++++++++++
 src/views/ticket/TicketList.vue   | 388 ++++++++++++++++++++
 4 files changed, 1009 insertions(+), 3 deletions(-)
 create mode 100644 src/views/ticket/TicketDetail.vue
 create mode 100644 src/views/ticket/TicketList.vue

diff --git a/src/config/menus.js b/src/config/menus.js
index 24093e7..842fb99 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',
diff --git a/src/router/index.js b/src/router/index.js
index 571f32a..4f4f41b 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/ticket/TicketDetail.vue b/src/views/ticket/TicketDetail.vue
new file mode 100644
index 0000000..3dcbf04
--- /dev/null
+++ b/src/views/ticket/TicketDetail.vue
@@ -0,0 +1,592 @@
+<template>
+  <div class="ticket-detail-page">
+    <!-- 返回按钮和工单信息 -->
+    <div class="page-header">
+      <el-button icon="ArrowLeft" @click="goBack">返回列表</el-button>
+      <div class="ticket-info" v-if="ticketInfo">
+        <span class="ticket-id">工单号: {{ ticketInfo.id }}</span>
+        <el-tag :type="getStatusType(ticketInfo.status)" size="small">
+          {{ getStatusText(ticketInfo.status) }}
+        </el-tag>
+        <el-button
+          v-if="ticketInfo.status !== 'completed'"
+          type="success"
+          size="small"
+          @click="handleComplete"
+        >
+          结束工单
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 工单标题 -->
+    <div class="ticket-title-bar" v-if="ticketInfo">
+      <div class="user-info">
+        <el-avatar :size="40" :src="ticketInfo.avatar">{{ ticketInfo.username?.charAt(0) }}</el-avatar>
+        <div class="user-detail">
+          <div class="username">{{ ticketInfo.username }}</div>
+          <div class="create-time">创建于 {{ ticketInfo.createTime }}</div>
+        </div>
+      </div>
+      <div class="ticket-title">{{ ticketInfo.title }}</div>
+    </div>
+
+    <!-- 聊天记录 -->
+    <div class="chat-container" v-loading="isLoadingMessages">
+      <div class="chat-messages" ref="messagesContainer">
+        <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 }}</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">
+        <el-input
+          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="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 } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getTicketDetail, replyTicket, closeTicket } from '@/api/ticket'
+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 messageInput = ref('')
+const selectedImages = ref([])
+const messagesContainer = ref(null)
+
+// 图片查看
+const imageViewerVisible = ref(false)
+const currentViewImage = ref('')
+
+// 定时刷新
+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 fetchTicketDetail = async () => {
+  const workId = route.query.id
+  if (!workId) {
+    ElMessage.error('工单ID不存在')
+    router.push('/ticket')
+    return
+  }
+
+  try {
+    isLoadingMessages.value = true
+    const res = await getTicketDetail(workId)
+
+    if (res.code === 200) {
+      const detail = res.data
+      ticketInfo.value = {
+        id: detail.work_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)
+      }
+
+      // 处理消息列表
+      if (detail.content && detail.content.length > 0) {
+        messages.value = detail.content.map((msg) => ({
+          id: msg.id,
+          content: msg.content !== 'empty' ? msg.content : null,
+          images: msg.flies ? msg.flies.map(file => file.url) : [],
+          time: msg.created_at || msg.updated_at || new Date().toLocaleString(),
+          isAdmin: isAdmin(msg.user?.userId),
+          userId: msg.user?.userId,
+          avatar: msg.user?.coverUrl || ''
+        }))
+      }
+
+      nextTick(() => scrollToBottom())
+    } else {
+      ElMessage.error(res.message || '获取工单详情失败')
+    }
+  } catch (error) {
+    console.error('获取工单详情出错:', error)
+    ElMessage.error('网络错误，请稍后重试')
+  } finally {
+    isLoadingMessages.value = false
+  }
+}
+
+// 发送消息
+const sendMessage = async () => {
+  if ((!messageInput.value.trim() && selectedImages.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]
+
+    messageInput.value = ''
+    selectedImages.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, '')
+
+    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
+      ElMessage.error(res.message || '发送失败')
+    }
+  } catch (error) {
+    console.error('发送消息出错:', error)
+    ElMessage.error('网络错误，请稍后重试')
+    messages.value = messages.value.filter(msg => !msg.isTempMessage)
+  } finally {
+    isSending.value = false
+  }
+}
+
+// 结束工单
+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
+  const reader = new FileReader()
+  reader.onload = (e) => selectedImages.value.push(e.target.result)
+  reader.readAsDataURL(file.raw)
+}
+
+const removeImage = (index) => selectedImages.value.splice(index, 1)
+
+const openImage = (img) => {
+  currentViewImage.value = img
+  imageViewerVisible.value = true
+}
+
+// 快捷回复
+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 ''
+    return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+  } catch (e) {
+    return ''
+  }
+}
+
+// 返回列表
+const goBack = () => {
+  // 关闭当前tab
+  tagsViewStore.delVisitedView(route)
+  router.push('/ticket/list')
+}
+
+// 定时刷新
+const startAutoRefresh = () => {
+  refreshTimer.value = setInterval(() => {
+    if (ticketInfo.value?.status !== 'completed') {
+      fetchTicketDetail()
+    }
+  }, 10000)
+}
+
+const stopAutoRefresh = () => {
+  if (refreshTimer.value) {
+    clearInterval(refreshTimer.value)
+    refreshTimer.value = null
+  }
+}
+
+onMounted(() => {
+  fetchTicketDetail()
+  startAutoRefresh()
+})
+
+onBeforeUnmount(() => {
+  stopAutoRefresh()
+})
+</script>
+
+<style scoped>
+.ticket-detail-page {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 120px);
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  background: #fff;
+  padding: 16px;
+  border-radius: 8px;
+}
+
+.ticket-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.ticket-id {
+  font-weight: 500;
+  color: #606266;
+}
+
+.ticket-title-bar {
+  background: #fff;
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.user-detail .username {
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.user-detail .create-time {
+  font-size: 12px;
+  color: #909399;
+}
+
+.ticket-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.chat-container {
+  flex: 1;
+  background: #f5f7fa;
+  border-radius: 8px;
+  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);
+}
+
+.message-admin .message-text {
+  background: #409eff;
+  color: #fff;
+}
+
+.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;
+  border-radius: 8px;
+  margin-top: 16px;
+}
+
+.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;
+}
+
+.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 {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/ticket/TicketList.vue b/src/views/ticket/TicketList.vue
new file mode 100644
index 0000000..e578ae5
--- /dev/null
+++ b/src/views/ticket/TicketList.vue
@@ -0,0 +1,388 @@
+<template>
+  <div class="ticket-list-page">
+    <!-- 统计卡片 -->
+    <div class="stats-cards">
+      <div class="stat-card" :class="{ active: activeStatus === '' }" @click="filterByStatus('')">
+        <div class="stat-number">{{ stats.total }}</div>
+        <div class="stat-label">全部工单</div>
+      </div>
+      <div class="stat-card pending" :class="{ active: activeStatus === 'pending' }" @click="filterByStatus('pending')">
+        <div class="stat-number">{{ stats.pending }}</div>
+        <div class="stat-label">待处理</div>
+      </div>
+      <div class="stat-card processing" :class="{ active: activeStatus === 'processing' }" @click="filterByStatus('processing')">
+        <div class="stat-number">{{ stats.processing }}</div>
+        <div class="stat-label">处理中</div>
+      </div>
+      <div class="stat-card replied" :class="{ active: activeStatus === 'replied' }" @click="filterByStatus('replied')">
+        <div class="stat-number">{{ stats.replied }}</div>
+        <div class="stat-label">已回复</div>
+      </div>
+      <div class="stat-card completed" :class="{ active: activeStatus === 'completed' }" @click="filterByStatus('completed')">
+        <div class="stat-number">{{ stats.completed }}</div>
+        <div class="stat-label">已完成</div>
+      </div>
+    </div>
+
+    <!-- 搜索和筛选 -->
+    <div class="filter-bar">
+      <el-input
+        v-model="searchKeyword"
+        placeholder="搜索工单号、标题、用户名"
+        prefix-icon="Search"
+        clearable
+        style="width: 300px"
+        @input="handleSearch"
+      />
+      <el-button type="primary" icon="Refresh" @click="refreshList">刷新</el-button>
+    </div>
+
+    <!-- 工单表格 -->
+    <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, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  getTickerList,
+  closeTicket,
+  getTicketCount
+} from '@/api/ticket'
+import notificationSound from '@/assets/7.wav'
+
+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('')
+
+// 统计数据
+const stats = reactive({
+  pending: 0,
+  processing: 0,
+  replied: 0,
+  completed: 0,
+  total: 0
+})
+
+// 定时刷新
+const refreshTimer = ref(null)
+const refreshInterval = 10000
+const previousPendingCount = ref(0)
+const audio = new Audio(notificationSound)
+
+// 状态转换
+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] || ''
+    }
+
+    const res = await getTickerList(pageSize.value, currentPage.value, statusParam)
+
+    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
+      if (data.wait_count > previousPendingCount.value && previousPendingCount.value !== 0) {
+        audio.play().catch(e => console.error('播放提示音失败:', e))
+      }
+      previousPendingCount.value = data.wait_count
+      stats.total = data.all_count
+      stats.pending = data.wait_count
+      stats.replied = data.reply_count
+      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 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(() => {})
+}
+
+// 定时刷新
+const startAutoRefresh = () => {
+  refreshTimer.value = setInterval(() => {
+    fetchStats()
+  }, refreshInterval)
+}
+
+const stopAutoRefresh = () => {
+  if (refreshTimer.value) {
+    clearInterval(refreshTimer.value)
+    refreshTimer.value = null
+  }
+}
+
+onMounted(() => {
+  fetchTicketList()
+  fetchStats()
+  startAutoRefresh()
+})
+
+onBeforeUnmount(() => {
+  stopAutoRefresh()
+})
+</script>
+
+<style scoped>
+.ticket-list-page {
+  padding: 20px;
+}
+
+.stats-cards {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  flex: 1;
+  background: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 2px solid transparent;
+}
+
+.stat-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stat-card.active {
+  border-color: #409eff;
+}
+
+.stat-card.pending .stat-number { color: #e6a23c; }
+.stat-card.processing .stat-number { color: #409eff; }
+.stat-card.replied .stat-number { color: #909399; }
+.stat-card.completed .stat-number { color: #67c23a; }
+
+.stat-number {
+  font-size: 32px;
+  font-weight: bold;
+  color: #303133;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: #909399;
+  margin-top: 8px;
+}
+
+.filter-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  background: #fff;
+  padding: 16px;
+  border-radius: 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;
+  margin-top: 16px;
+  padding: 16px;
+  background: #fff;
+  border-radius: 8px;
+}
+
+:deep(.el-table) {
+  border-radius: 8px;
+}
+
+:deep(.el-table tr) {
+  cursor: pointer;
+}
+</style>