feat: 工单系统优化 - 改为列表形式，添加排序、状态修改、图片粘贴拖拽等功能

src/views/ticket/TicketDetail.vue

@@ -56,9 +56,17 @@
       </div>
       <div class="header-right" v-if="ticketInfo">
         <span class="ticket-id">工单号: {{ ticketInfo.id }}</span>
-        <el-tag :type="getStatusType(ticketInfo.status)" size="small">
-          {{ getStatusText(ticketInfo.status) }}
-        </el-tag>
+        <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"
@@ -124,13 +132,21 @@
       </div>
 
       <!-- 输入框 -->
-      <div class="input-area">
+      <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="请输入回复内容..."
+          placeholder="请输入回复内容（支持粘贴图片和拖拽图片）..."
           @keyup.ctrl.enter="sendMessage"
+          @paste="handlePaste"
         />
         <div class="input-actions">
           <div class="left-actions">
@@ -174,7 +190,7 @@
 import { ref, onMounted, nextTick, onBeforeUnmount, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { getTicketDetail, replyTicket, closeTicket } from '@/api/ticket'
+import { getTicketDetail, replyTicket, closeTicket, updateTicketInfo } from '@/api/ticket'
 import { getUserInfo } from '@/api/admin/user'
 import { uploadFile } from '@/api/admin/file'
 import { useUserStore } from '@/store/userStore'
@@ -200,6 +216,8 @@ 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)
@@ -283,7 +301,7 @@ const fetchTicketDetail = async (showLoading = true) => {
     if (res.code === 200) {
       const detail = res.data
       ticketInfo.value = {
-        id: detail.work_id,
+        id: detail.id,
         title: detail.name,
         username: detail.user?.userName || `用户${detail.user?.userId || 'Unknown'}`,
         userId: detail.user?.userId,
@@ -432,6 +450,38 @@ const sendMessage = async () => {
   }
 }
 
+// 修改工单状态
+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('确定要结束此工单吗？结束后将无法继续回复。', '确认操作', {
@@ -456,14 +506,81 @@ const handleComplete = () => {
 // 图片处理
 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.raw)
+  selectedFiles.value.push(file)
   
   // 读取文件用于预览
   const reader = new FileReader()
   reader.onload = (e) => selectedImages.value.push(e.target.result)
-  reader.readAsDataURL(file.raw)
+  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) => {
@@ -606,10 +723,24 @@ watch(
 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>
 
@@ -645,7 +776,10 @@ onBeforeUnmount(() => {
 
 .ticket-id {
   font-weight: 500;
-  color: #606266;
+  color: #303133;
+  font-size: 14px;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .user-info {
@@ -849,6 +983,28 @@ onBeforeUnmount(() => {
   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 {