art-design/src/views/work/myOrder/index.vue

<template>
  <div class="page-content">
    <ElRow>
      <!-- <ElCol :xs="24" :sm="12" :lg="6">
        <ElInput placeholder="工单编号"></ElInput>
      </ElCol> -->
      <div style="width: 12px"></div>
      <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
        <!-- <ElButton v-ripple>搜索</ElButton> -->
        <ElButton v-if="hasAuth('work_order_self@add')" @click="showDialog('add')" v-ripple>
          新增
        </ElButton>
      </ElCol>
    </ElRow>

    <ArtTable
      ref="tableRef"
      row-key="id"
      :loading="loading"
      :data="tableData"
      :currentPage="pagination.currentPage"
      :pageSize="pagination.pageSize"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <template #default>
        <ElTableColumn label="工单编号" prop="code" />
        <ElTableColumn label="问题分类" prop="categorie_id">
          <template #default="scope">
            <div v-html="scope.row.categorie ? scope.row.categorie.name : ''"></div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="问题描述" prop="content" min-width="200px">
          <template #default="scope">
            <div class="multi-line-ellipsis" v-html="scope.row.content"></div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="状态" prop="status">
          <template #default="scope">
            <ElTag :type="scope.row.status == 1 ? 'info' : scope.row.status == 2 ?'primary' :scope.row.status == 4 ?'success' : 'danger'">
              {{ scope.row.status == 1 ? '待受理' : scope.row.status == 2 ? '处理中' : 
                scope.row.status == 4 ? "已完成":'关闭' }}
            </ElTag>
          </template>
        </ElTableColumn>
        <ElTableColumn label="创建时间" prop="created_at" />
        <ElTableColumn fixed="right" label="操作" max-width="200px">
          <template #default="scope">
            <ElRow>
              <el-button
                v-if="scope.row.status == 1 && hasAuth('work_order_self@edit')"
                link
                @click="showDialog('edit', scope.row)"
              >
                编辑
              </el-button>
              <el-button
                v-if="hasAuth('work_order_self@status')"
                link
                @click="statusEdit(scope.row)"
              >
                状态编辑
              </el-button>
              <el-button
                v-if="hasAuth('work_order_self@conversation_list')"
                link
                @click="openChat(scope.row)"
              >
                查看/回复
              </el-button>
              <!-- <el-button link @click="deleteRole()"> 删除 </el-button> -->
            </ElRow>
          </template>
        </ElTableColumn>
      </template>
    </ArtTable>

    <ElDialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增' : '编辑'"
      width="60%"
      align-center
    >
      <ElForm ref="formRef" :model="form" label-width="120px" style="padding-right: 30px">
        <ElFormItem label="问题分类" prop="categorie_id">
          <ElSelect v-model="form.categorie_id">
            <ElOption v-for="type in categorieSelectList" :key="type.id" :value="type.id" :label="type.name" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="问题描述" prop="content">
          <!-- <ElInput v-model="form.des" type="textarea" :rows="3" /> -->
          <!-- 富文本编辑器 -->
          <ArtWangEditor class="el-top" v-model="editorHtml" />
        </ElFormItem>
        <ElFormItem label="上传附件" prop="attachment">
          <ElUpload
            v-model:file-list="fileList"
            class="upload-demo"
            :action="actionImageUplode"
            :headers="uploadHeaders"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-button type="primary" :disabled="fileList.length >= 3">上传附件</el-button>
          </ElUpload>
          <!-- <ElUpload
            v-model:file-list="fileList"
            class="upload-demo"
            :action="actionImageUplode"
            :on-success="handleUploadSuccess"
            :headers="uploadHeaders"
            multiple
            :limit="3"
          >
            <el-button type="primary">上传附件</el-button>
          </ElUpload> -->
        </ElFormItem>
        <ElFormItem label="" prop="">
          <!-- 附件预览区 -->
          <div class="attachment-preview">
            <div v-if="fileList.length" class="attachment-list">
              <div v-for="(file, idx) in fileList" :key="file.name" class="attachment-item">
                <template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)">
                  <img
                    :src="file.file_url ? file.file_url : file.response.data.file_url"
                    :alt="file.name"
                    class="attachment-thumb"
                    @click="
                      handleImageClick(
                        imageList.findIndex((url) =>
                          url === file.file_url ? file.file_url : file.response.data.file_url
                        )
                      )
                    "
                  />
                </template>
                <template v-else-if="/\.(mp4|webm|ogg)$/i.test(file.name)">
                  <video
                    :src="file.file_url ? file.file_url : file.response.data.file_url"
                    controls
                    class="attachment-thumb"
                    @click.prevent="
                      handleVideoClick(file.file_url ? file.file_url : file.response.data.file_url)
                    "
                  ></video>
                </template>
                <template v-else>
                  <a
                    :href="file.file_url ? file.file_url : file.response.data.file_url"
                    target="_blank"
                    >{{ file.name }}</a
                  >
                </template>
                <div class="attachment-filename">{{ file.name }}</div>
              </div>
            </div>
          </div>
        </ElFormItem>
      </ElForm>
      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="dialogVisible = false">取消</ElButton>
          <ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
        </div>
      </template>
    </ElDialog>
    <el-drawer v-model="isDrawerVisible" :size="isMobile ? '100%' : '480px'" :with-header="false">
      <div class="chat-container">
        <div class="header">
          <div class="header-left">
            <span class="name">工单记录</span>
          </div>
          <div class="header-right">
            <el-icon class="icon-close" :size="20" @click="closeChat">
              <Close />
            </el-icon>
          </div>
        </div>
        <!-- 聊天消息区域 -->
        <div class="chat-messages" ref="messageContainer">
          <template v-for="(message, index) in messages" :key="index">
            <div :class="['message-item', String(message.user_id) === String(userid) ? 'message-right' : 'message-left']">
              <el-avatar :size="32" :src="message.user_avatar" class="message-avatar" />
              <div class="message-content">
                <div class="message-info">
                  <span class="sender-name">{{ message.user_name }}</span>
                  <span class="message-time">{{ message.updated_at }}</span>
                </div>
                <div class="message-text" v-html="message.content"></div>
                <!-- 附件显示区域 -->
                <div class="message-attachments" v-if="message.attachment && message.attachment.length > 0">
                  <div class="attachment-item" v-for="(attachment, attIndex) in message.attachment" :key="attIndex">
                    <template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(attachment.original_name)">
                      <img 
                        :src="attachment.storage_path_full" 
                        :alt="attachment.original_name" 
                        class="attachment-thumb" 
                        @click="handleChatImageClick(attachment.storage_path_full)"
                      />
                    </template>
                    <template v-else-if="/\.(mp4|webm|ogg)$/i.test(attachment.original_name)">
                      <video 
                        :src="attachment.storage_path_full" 
                        controls 
                        class="attachment-thumb"
                        @click.prevent="handleChatVideoClick(attachment.storage_path_full)"
                      ></video>
                    </template>
                    <template v-else>
                      <div class="file-attachment">
                        <el-icon class="file-icon"><Document /></el-icon>
                        <span class="file-name">{{ attachment.original_name }}</span>
                        <el-button 
                          type="primary" 
                          size="small" 
                          link 
                          @click="downloadAttachment(attachment)"
                        >
                          下载
                        </el-button>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div class="chat-input" v-if="hasAuth('work_order_self@conversation_add')">
          <!-- 附件上传区域 -->
          <div class="chat-attachment-upload">
            <el-upload
              v-model:file-list="chatFileList"
              class="chat-upload"
              :action="actionImageUplode"
              :on-success="handleChatUploadSuccess"
              :headers="uploadHeaders"
              multiple
              :limit="5"
              :on-exceed="handleChatExceed"
              :show-file-list="false"
            >
              <el-button type="primary" link>
                <el-icon><Paperclip /></el-icon>
                添加附件
              </el-button>
            </el-upload>
            <!-- 已上传附件预览 -->
            <div class="uploaded-attachments" v-if="chatFileList.length > 0">
              <div class="attachment-preview-item" v-for="(file, idx) in chatFileList" :key="idx">
                <template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)">
                  <img 
                    :src="file.file_url || file.response?.data?.file_url" 
                    :alt="file.name" 
                    class="preview-thumb"
                  />
                </template>
                <template v-else>
                  <el-icon class="file-icon"><Document /></el-icon>
                </template>
                <span class="file-name">{{ file.name }}</span>
                <el-button 
                  type="danger" 
                  size="small" 
                  link 
                  @click="removeChatFile(idx)"
                >
                  <el-icon><Close /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
          <el-input v-model="messageText" type="textarea" :rows="3" placeholder="输入消息" resize="none"
            @keyup.enter.prevent="sendMessage" />
          <ElInput v-model="ticket_id" type="hidden" />
          <div class="chat-input-actions">
            <el-button type="primary" @click="sendMessage" v-ripple>发送</el-button>
          </div>
        </div>

      </div>
    </el-drawer>

    <ElDialog v-model="dialogVisiblestatus" title="工单状态" width="40%" align-center>
      <ElForm ref="formRef" :model="statusform" label-width="120px">
        <ElFormItem label="状态" prop="status">
          <ElSelect v-model="statusform.status">
            <ElOption v-for="type in statusList" :key="type.value" :value="type.value" :label="type.text" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="描述" prop="msg">
          <ElInput v-model="statusform.msg" type="textarea" :rows="3" />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <div class="dialog-footer">
          <ElButton @click="dialogVisiblestatus = false">取消</ElButton>
          <ElButton type="primary" @click="statusSubmit()">提交</ElButton>
        </div>
      </template>
    </ElDialog>

    <!-- 图片预览弹窗 -->
    <ElImageViewer v-if="imageViewerVisible" :url-list="chatImageList.length > 0 ? chatImageList : imageList" :initial-index="imageViewerIndex" @close="closeImageViewer" />
    <!-- 视频预览弹窗 -->
    <ElDialog v-model="videoDialogVisible" width="60%" top="10vh" :show-close="true" append-to-body>
      <video v-if="currentVideoUrl" :src="currentVideoUrl" controls autoplay style="width:100%;max-height:70vh;display:block;"></video>
    </ElDialog>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage, ElMessageBox } from 'element-plus'
  import type { FormInstance } from 'element-plus'
  import { Order } from '@/mock/temp/formData'
  import { WorkService } from '@/api/workApi'
  import { ElImageViewer } from 'element-plus'
  import { useAuth } from "@/composables/useAuth";
  import { useUserStore } from '@/store/modules/user'
  import { useUploadHeaders } from '@/composables/useUploadHeaders'
  import { Paperclip, Document, Close } from '@element-plus/icons-vue'
  const { uploadHeaders } = useUploadHeaders()
  const { info } = useUserStore()
  const userid = info.user.id
  const { hasAuth } = useAuth()
  defineOptions({ name: 'MyOrder' })
  let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
  const loading = ref(false)
  const editorHtml = ref('') // 编辑器内容
  const dialogVisible = ref(false)
  const dialogVisiblestatus = ref(false)
  const typeList = ref<any[]>([])
  const formRef = ref<FormInstance>()
  const { width } = useWindowSize()
  const isMobile = computed(() => width.value < 500)
  // 抽屉显示状态
  const isDrawerVisible = ref(false)
  import meAvatar from '@/assets/img/avatar/avatar5.webp'
  import aiAvatar from '@/assets/img/avatar/avatar10.webp'
  // 消息相关数据
  const messages = ref<any[]>([])
  const messageText = ref('')
  // 滚动到底部
  const messageContainer = ref<HTMLElement | null>(null)
  const scrollToBottom = () => {
    setTimeout(() => {
      if (messageContainer.value) {
        messageContainer.value.scrollTop = messageContainer.value.scrollHeight
      }
    }, 100)
  }
  const openChat = (row: any) => {
    isDrawerVisible.value = true
    // 清空数据
    messageText.value = ''
    messages.value = []
    chatFileList.value = []
    getConversationList(row.id)
  }

  const closeChat = () => {
    isDrawerVisible.value = false
  }
  //获取状态 下拉框 getStatus
  const statusList = ref<any>()
  const getstatusList = async (id: any) => {
    try {
      // 这里调用获取品牌列表的接口
      const response = await WorkService.getStatus({ id: id })
      statusList.value = response || []
    } catch (error) { }
  }
  //获取工单分类
  const categorieSelectList = ref<any>()
  const getcategorieSelectList = async () => {
    try {
      // 这里调用获取品牌列表的接口
      const response = await WorkService.getcategorieselect()
      categorieSelectList.value = response || []
    } catch (error) { }
  }



  const fileList = ref<any[]>([])
  const form = reactive<Order>({
    id: '',
    categorie_id: '',
    content: '',
    attachment: []
  })
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })
  const paginationmsg = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
  })
  // 表格数据
  const tableData = ref<any[]>([])

  // 表格实例引用
  const tableRef = ref()

  onMounted(() => {
    getWorkList()
  })

  // 获取列表数据
  const getWorkList = async () => {
    loading.value = true
    try {
      const { currentPage, pageSize } = pagination

      const { data, current, size, total } = await WorkService.getWorkselfList({
        current: currentPage,
        size: pageSize
      })
      tableData.value = data.map((item: any, index: number) => ({
        ...item
      }))
      Object.assign(pagination, { currentPage: current, pageSize: size, total })
    } catch (error) {
      console.error('获取用户列表失败:', error)
    } finally {
      loading.value = false
    }
  }

  //获取工单记录 getconversationList
  const ticket_id =ref()
  const getConversationList = async (id:any) => {
    loading.value = true
    try {
      const { currentPage, pageSize } = paginationmsg
      ticket_id.value = id
      const { data, current, size, total } = await WorkService.getconversationList({
        current: currentPage,
        size: pageSize,
        ticket_id: id
      })
      messages.value = data.map((item: any, index: number) => ({
        ...item
      }))
      Object.assign(paginationmsg, { currentPage: current, pageSize: size, total })
    } catch (error) {
      console.error('获取用户列表失败:', error)
    } finally {
      loading.value = false
    }
  }
  // 发送工单记录消息
  const sendMessage = async () => {
    const text = messageText.value.trim()
    const ids = ticket_id.value
    if (!text && chatFileList.value.length === 0) return
    
    // 准备附件数据
    const attachments = chatFileList.value.map(file => {
      const data = file.response?.data
      if (data) {
        return {
          original_name: data.original_name,
          storage_path: data.storage_path || data.file_name
        }
      }
      return null
    }).filter(Boolean)
    
    const { message } = await WorkService.conversationAdd({
      content: text,
      ticket_id: ids,
      attachment: attachments
    })
    ElMessage.success(message)
    messageText.value = ''
    chatFileList.value = [] // 清空附件列表
    getConversationList(ids)
    scrollToBottom()
  }    


  const dialogType = ref('add')

  const showDialog = (type: string, row?: any) => {
    dialogVisible.value = true
    dialogType.value = type
    getcategorieSelectList()
    if (type === 'edit' && row) {
      form.id = row.id
      form.categorie_id = row.categorie_id
      form.content = row.content
      editorHtml.value = row.content
      // 回显附件
      fileList.value = (row.attachments || []).map((item: { original_name: any; storage_path_full: any }) => ({
        name: item.original_name,
        file_url: item.storage_path_full,
        status: 'success',
        response: { data: item }
      }))
      // 如果你有 uploadedFiles 也要同步
      uploadedFiles.value = row.attachments || []
    } else {
      // 新增时清空表单和上传文件
      form.categorie_id = ''
      form.content = ''
      editorHtml.value = ''
      fileList.value = []
      uploadedFiles.value = []
    }
  }

  const statusform = reactive({
    id: '',
    status: '',
    msg: ''
  })

  const statusEdit = (row: any) => {
    getstatusList(row.id)
    dialogVisiblestatus.value = true
    statusform.id = row.id
  }
  const deleteRole = () => {
    ElMessageBox.confirm('确定删除该角色吗？', '删除确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    }).then(() => {
      ElMessage.success('删除成功')
    })
  }
  const delCodeTrim = (content: string): string => {
    return content.replace(/(\s*)<\/code>/g, '</code>')
  }
  //添加工单
  const handleExceed = () => {
    ElMessage.warning('最多上传3个文件')
  }
  const uploadedFiles = ref<any[]>([])
  const getupfiledata = () => {
    uploadedFiles.value = fileList.value
      .filter((item) => item.status === 'success')
      .map((item) => {
        const data = item.response?.data
        if (data) {
          return {
            id: data.id ? data.id : '',
            original_name: data.original_name,
            storage_path: data.storage_path ? data.storage_path : data.file_name
          }
        }
        return null
      })
      .filter(Boolean)
  }
  const handleSubmit = async (formEl: FormInstance | undefined) => {
    getupfiledata()
    const { categorie_id} = form
    editorHtml.value = delCodeTrim(editorHtml.value)
    console.log(uploadedFiles.value)
    if(dialogType.value === 'add'){
      const { message } = await WorkService.WorkAdd({
        content: editorHtml.value,
        categorie_id: categorie_id,
        attachment:uploadedFiles.value
      })
      ElMessage.success(message)
      dialogVisible.value = false
      getWorkList()
    }else{
      const { message } = await WorkService.Workedit({
        id:form.id,
        content: editorHtml.value,
        categorie_id: categorie_id,
        attachment:uploadedFiles.value
      })
      ElMessage.success(message)
      dialogVisible.value = false
      getWorkList()
    }
    

  }
  // 处理表格分页变化
  const handleSizeChange = (newPageSize: number) => {
    pagination.pageSize = newPageSize
    getWorkList()
  }

  const handleCurrentChange = (newCurrentPage: number) => {
    pagination.currentPage = newCurrentPage
    getWorkList()
  }
  //修改状态
  const statusSubmit = async () => {
    // loading.value = true
    const { msg, status, id } = statusform
    const { message } = await WorkService.Workstatus({
      id,
      msg,
      status
    })
    ElMessage.success(message)
    dialogVisiblestatus.value = false
    getWorkList()
  }

  // 图片预览相关
  const imageViewerVisible = ref(false)
  const imageViewerIndex = ref(0)
  const imageList = computed(() => fileList.value.filter(file => /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)).map(file => file.file_url?file.file_url:file.response.data.file_url))
  // 聊天图片预览列表
  const chatImageList = ref<string[]>([])
  function handleImageClick(idx: number) {
    imageViewerIndex.value = idx
    imageViewerVisible.value = true
  }
  // 视频预览相关
  const videoDialogVisible = ref(false)
  const currentVideoUrl = ref('')
  function handleVideoClick(url: string) {
    currentVideoUrl.value = url
    videoDialogVisible.value = true
  }

     // 聊天相关
   const chatFileList = ref<any[]>([])
   const handleChatUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
     chatFileList.value = uploadFiles.filter(item => item.status === 'success').map(item => {
       const data = item.response?.data
       if (data) {
         return {
           name: data.original_name,
           file_url: data.storage_path_full,
           status: 'success',
           response: { data: data }
         }
       }
       return null
     }).filter(Boolean)
   }
  const handleChatExceed = () => {
    ElMessage.warning('最多上传5个文件')
  }
  const removeChatFile = (index: number) => {
    chatFileList.value.splice(index, 1)
  }
  const handleChatImageClick = (url: string) => {
    // 设置聊天图片预览列表
    chatImageList.value = [url]
    imageViewerIndex.value = 0
    imageViewerVisible.value = true
  }
  
  const closeImageViewer = () => {
    imageViewerVisible.value = false
    chatImageList.value = [] // 清空聊天图片列表
  }
  const handleChatVideoClick = (url: string) => {
    currentVideoUrl.value = url
    videoDialogVisible.value = true
  }
  const downloadAttachment = (attachment: any) => {
    const link = document.createElement('a')
    link.href = attachment.storage_path_full
    link.download = attachment.original_name
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }
</script>

<style lang="scss" scoped>
  :deep(.el-table__empty-block) {
        height: 100% !important;
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
  .multi-line-ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
  }
  .page-content {
    .svg-icon {
      width: 1.8em;
      height: 1.8em;
      overflow: hidden;
      vertical-align: -8px;
      fill: currentcolor;
    }
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    .header-left {
      .name {
        font-size: 16px;
        font-weight: 500;
      }
    }

    .header-right {
      .icon-close {
        cursor: pointer;
      }
    }
  }

  .chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100% - 70px);

    .chat-messages {
      flex: 1;
      padding: 30px 16px;
      overflow-y: auto;
      border-top: 1px solid var(--el-border-color-lighter);

      &::-webkit-scrollbar {
        width: 5px !important;
      }

      .message-item {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 30px;

        .message-text {
          font-size: 14px;
          color: var(--art-gray-900);
          border-radius: 6px;
        }

        &.message-left {
          justify-content: flex-start;

          .message-content {
            align-items: flex-start;

            .message-info {
              flex-direction: row;
              align-items: center;
            }

            .message-text {
              background-color: #f8f5ff;
            }
          }
        }

        &.message-right {
          flex-direction: row-reverse;

          .message-content {
            align-items: flex-end;

            .message-info {
              flex-direction: row-reverse;
              align-items: center;
            }

            .message-text {
              background-color: #e9f3ff;
            }
          }
        }

        .message-avatar {
          flex-shrink: 0;
        }

        .message-content {
          display: flex;
          flex-direction: column;
          max-width: 70%;

          .message-info {
            display: flex;
            gap: 8px;
            margin-bottom: 4px;
            font-size: 12px;

            .message-time {
              color: var(--el-text-color-secondary);
            }

            .sender-name {
              font-weight: 500;
            }
          }

          .message-text {
            padding: 10px 14px;
            line-height: 1.4;
            white-space: pre-line;
          }
        }
      }
    }

    .chat-input {
      padding: 16px 16px 0;

      .input-actions {
        display: flex;
        gap: 8px;
        padding: 8px 0;
      }

      .chat-input-actions {
        display: flex;
        align-items: center; // 修正为单数
        justify-content: right;
        margin-top: 12px;

        // 确保发送按钮与输入框对齐
        el-button {
          min-width: 80px;
        }
      }
    }
  }

  .dark {
    .chat-container {
      .chat-messages {
        .message-item {
          &.message-left {
            .message-text {
              background-color: #232323 !important;
            }
          }

          &.message-right {
            .message-text {
              background-color: #182331 !important;
            }
          }
        }
      }
    }
  }

  .attachment-preview {
    margin-top: 12px;
    .attachment-list {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }
    .attachment-item {
      width: 130px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fafbfc;
      border-radius: 8px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
      padding: 10px 8px 6px 8px;
      transition: box-shadow 0.2s, transform 0.2s;
      cursor: pointer;
      &:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
        transform: translateY(-2px) scale(1.03);
      }
    }
    .attachment-thumb {
      max-width: 110px;
      max-height: 90px;
      border-radius: 4px;
      border: 1px solid #eee;
      margin-bottom: 6px;
      object-fit: cover;
      background: #fff;
    }
    .attachment-filename {
      font-size: 12px;
      color: #666;
      text-align: center;
      word-break: break-all;
      margin-top: 2px;
    }
  }

  // 聊天附件样式
  .message-right .message-attachments{
    text-align: right;
  }
  .message-left .message-attachments{
    text-align: left;
  }
  .message-attachments {
    margin-top: 8px;
    
    .attachment-item {
      margin-bottom: 8px;
      
      .attachment-thumb {
        max-width: 200px;
        max-height: 150px;
        border-radius: 6px;
        cursor: pointer;
        border: 1px solid var(--el-border-color-lighter);
        transition: transform 0.2s;
        
        &:hover {
          transform: scale(1.05);
        }
      }
      
      .file-attachment {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: var(--el-fill-color-light);
        border-radius: 6px;
        border: 1px solid var(--el-border-color-lighter);
        
        .file-icon {
          font-size: 16px;
          color: var(--el-text-color-regular);
        }
        
        .file-name {
          flex: 1;
          font-size: 14px;
          color: var(--el-text-color-regular);
          word-break: break-all;
        }
      }
    }
  }

  .chat-attachment-upload {
    margin-bottom: 12px;
    
    .chat-upload {
      margin-bottom: 8px;
    }
    
    .uploaded-attachments {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      
      .attachment-preview-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        background: var(--el-fill-color-light);
        border-radius: 6px;
        border: 1px solid var(--el-border-color-lighter);
        max-width: 200px;
        
        .preview-thumb {
          width: 40px;
          height: 40px;
          border-radius: 4px;
          object-fit: cover;
        }
        
        .file-icon {
          font-size: 16px;
          color: var(--el-text-color-regular);
        }
        
        .file-name {
          flex: 1;
          font-size: 12px;
          color: var(--el-text-color-regular);
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>