From 58f7d56f402d67b7f7c0a14f06ab850cbc4f0e7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Wed, 3 Sep 2025 15:13:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E5=8D=95=E5=8E=BB=E6=8E=89=20?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E7=AB=AF=E4=B8=8D=E6=98=BE=E7=A4=BA=E9=99=90?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/work/myOrder/index.vue |  601 +++++-----
 src/views/work/order/index.vue   | 1761 +++++++++++++++---------------
 src/views/work/type/index.vue    |  119 +-
 3 files changed, 1233 insertions(+), 1248 deletions(-)

diff --git a/src/views/work/myOrder/index.vue b/src/views/work/myOrder/index.vue
index bc0ba4b..9cd0830 100644
--- a/src/views/work/myOrder/index.vue
+++ b/src/views/work/myOrder/index.vue
@@ -1,318 +1,313 @@
 <template>
   <div class="page-content">
-    <div v-if="!isMobile">
-      <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>
+    <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">
-            <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="操作" width="240px">
-            <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"
+    <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 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-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
                   >
-                    <el-icon><Close /></el-icon>
-                  </el-button>
+                </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>
-            <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>
+          </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>
-
-        </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>
+          <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>
-        </template>
-      </ElDialog>
+        </div>
 
-      <!-- 图片预览弹窗 -->
-      <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>
-    <div v-else class="mobile-hide-tip">
-      <p>该页面暂不支持移动端访问</p>
-    </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>
 
diff --git a/src/views/work/order/index.vue b/src/views/work/order/index.vue
index 35aee73..9e8c646 100644
--- a/src/views/work/order/index.vue
+++ b/src/views/work/order/index.vue
@@ -1,963 +1,958 @@
 <template>
   <div class="page-content">
-    <div v-if="!isMobile">
-      <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@add')" @click="showDialog('add')" v-ripple>新增</ElButton>
-        </ElCol>
-      </ElRow>
+    <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@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">
-            <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="操作" width="240px">
-            <template #default="scope">
-              <ElRow>
-                <el-button v-if="scope.row.status == 1&&hasAuth('work_order@edit')" link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
-                <el-button v-if="hasAuth('work_order@status')" link @click="statusEdit(scope.row)"> 状态编辑 </el-button>
-                <el-button v-if="hasAuth('work_order@conversation_list')" link @click="openChat(scope.row)"> 查看/回复 </el-button>
-                <!-- <el-button link @click="deleteRole()"> 删除 </el-button> -->
-              </ElRow>
-            </template>
-          </ElTableColumn>
-        </template>
-      </ArtTable>
+    <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@edit')" link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
+              <el-button v-if="hasAuth('work_order@status')" link @click="statusEdit(scope.row)"> 状态编辑 </el-button>
+              <el-button v-if="hasAuth('work_order@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"
+    <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"
+            :on-success="handleUploadSuccess"
+            :headers="uploadHeaders"
+            multiple
+            :limit="3"
+            :on-exceed="handleExceed"
+          >
+            <el-button type="primary">上传</el-button>
+          </ElUpload>
+        </ElFormItem>
+        <ElFormItem label="" prop="">
+          <!-- 附件预览区 -->
+          <div class="attachment-preview" v-if="fileList.length">
+            <div 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'
+              ]"
+            >
+            <!-- :src="String(message.user_id) === String(userid) ? meAvatar : aiAvatar" -->
+              <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@conversation_add')">
+          <!-- 附件上传区域 -->
+          <div class="chat-attachment-upload">
+            <el-upload
+              v-model:file-list="chatFileList"
+              class="chat-upload"
               :action="actionImageUplode"
-              :on-success="handleUploadSuccess"
+              :on-success="handleChatUploadSuccess"
               :headers="uploadHeaders"
               multiple
-              :limit="3"
-              :on-exceed="handleExceed"
+              :limit="5"
+              :on-exceed="handleChatExceed"
+              :show-file-list="false"
             >
-              <el-button type="primary">上传</el-button>
-            </ElUpload>
-          </ElFormItem>
-          <ElFormItem label="" prop="">
-            <!-- 附件预览区 -->
-            <div class="attachment-preview" v-if="fileList.length">
-              <div 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'
-                ]"
-              >
-              <!-- :src="String(message.user_id) === String(userid) ? meAvatar : aiAvatar" -->
-                <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@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 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>
-              </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"
-            />
-            <ElInput v-model="ticket_id" type="hidden" />
-            <div class="chat-input-actions">
-              <el-button type="primary" @click="sendMessage" v-ripple>发送</el-button>
-            </div>
           </div>
-
+          <el-input
+            v-model="messageText"
+            type="textarea"
+            :rows="3"
+            placeholder="输入消息"
+            resize="none"
+          />
+          <ElInput v-model="ticket_id" type="hidden" />
+          <div class="chat-input-actions">
+            <el-button type="primary" @click="sendMessage" v-ripple>发送</el-button>
+          </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>
+      </div>
+    </el-drawer>
 
-             <!-- 图片预览弹窗 -->
-       <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>
-    <div v-else class="mobile-hide-tip">
-      <p>该页面暂不支持移动端访问</p>
-    </div>
+    <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 { hasAuth } = useAuth();
-defineOptions({ name: 'Order' })
-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)
-const { info } = useUserStore()
-const userid = info.user.id
-console.log(userid)
-import meAvatar from '@/assets/img/avatar/avatar5.webp'
-import aiAvatar from '@/assets/img/avatar/avatar10.webp'
+  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 { hasAuth } = useAuth();
+  defineOptions({ name: 'Order' })
+  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)
+  const { info } = useUserStore()
+  const userid = info.user.id
+  console.log(userid)
+  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 () => {
-  try {
-    // 这里调用获取品牌列表的接口
-    const response = await WorkService.getStatus({})
-    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.getWorkList({
-      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
+  // 消息相关数据
+  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
       }
-    }
-    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 = []
+    }, 100)
+  }
+  const openChat = (row: any) => {
+    isDrawerVisible.value = true
+    // 清空数据
+    messageText.value = ''
+    messages.value = []
+    chatFileList.value = []
+    getConversationList(row.id)
   }
-}
 
-const statusform = reactive({
-  id: '',
-  status: '',
-  msg: ''
-})
+  const closeChat = () => {
+    isDrawerVisible.value = false
+  }
+  //获取状态 下拉框 getStatus
+  const statusList = ref<any>()
+  const getstatusList = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      const response = await WorkService.getStatus({})
+      statusList.value = response || []
+    } catch (error) { }
+  }
+  //获取工单分类
+  const categorieSelectList = ref<any>()
+  const getcategorieSelectList = async () => {
+    try {
+      // 这里调用获取品牌列表的接口
+      const response = await WorkService.getcategorieselect()
+      categorieSelectList.value = response || []
+    } catch (error) { }
+  }
 
-const statusEdit = (row: any) => {
-  getstatusList()
-  dialogVisiblestatus.value = true
-  statusform.id = row.id
-}
-const deleteRole = () => {
-  ElMessageBox.confirm('确定删除该角色吗？', '删除确认', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'error'
-  }).then(() => {
-    ElMessage.success('删除成功')
+
+
+  const fileList = ref<any[]>([])
+  const form = reactive<Order>({
+    id: '',
+    categorie_id: '',
+    content: '',
+    attachment: []
   })
-}
-const delCodeTrim = (content: string): string => {
-  return content.replace(/(\s*)<\/code>/g, '</code>')
-}
-//添加工单
-const handleExceed = () => {
-  ElMessage.warning('最多上传3个文件')
-}
-const uploadedFiles = ref<any[]>([])
-const handleUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
-  // 只处理上传成功的文件
-  uploadedFiles.value = uploadFiles.filter(item => item.status === 'success').map(item => {
-      const data = item.response?.data
+  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.getWorkList({
+        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 {
-          id: data.id?data.id:'',
           original_name: data.original_name,
-          storage_path: data.storage_path?data.storage_path:data.file_name
+          storage_path: data.storage_path || data.file_name
         }
       }
       return null
-    })
-    .filter(Boolean)
-}
-const handleSubmit = async (formEl: FormInstance | undefined) => {
-  const { categorie_id} = form
-  editorHtml.value = delCodeTrim(editorHtml.value)
-  if(dialogType.value === 'add'){
-    const { message } = await WorkService.WorkAdd({
-      content: editorHtml.value,
-      categorie_id: categorie_id,
-      attachment:uploadedFiles.value
+    }).filter(Boolean)
+    
+    const { message } = await WorkService.conversationAdd({
+      content: text,
+      ticket_id: ids,
+      attachment: attachments
     })
     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()
-  }
-  
+    messageText.value = ''
+    chatFileList.value = [] // 清空附件列表
+    getConversationList(ids)
+    scrollToBottom()
+  }    
 
-}
-// 处理表格分页变化
-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 dialogType = ref('add')
 
-// 图片预览相关
-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,
+  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: data }
-      }
+        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()
+    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 handleUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
+    // 只处理上传成功的文件
+    uploadedFiles.value = uploadFiles.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) => {
+    const { categorie_id} = form
+    editorHtml.value = delCodeTrim(editorHtml.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) => {
+    try {
+      const fileName = attachment.original_name || 'download'
+      const link = document.createElement('a')
+      link.href = attachment.storage_path_full
+      link.download = fileName
+      link.target = '_blank'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      ElMessage.success('开始下载')
+    } catch (error) {
+      ElMessage.error('下载失败')
+      console.error('下载失败:', error)
     }
-    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) => {
-  try {
-    const fileName = attachment.original_name || 'download'
-    const link = document.createElement('a')
-    link.href = attachment.storage_path_full
-    link.download = fileName
-    link.target = '_blank'
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-    ElMessage.success('开始下载')
-  } catch (error) {
-    ElMessage.error('下载失败')
-    console.error('下载失败:', error)
   }
-}
 </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 {
+  :deep(.el-table__empty-block) {
+        height: 100% !important;
+        min-height: 200px;
         display: flex;
-        flex-direction: column;
-        max-width: 70%;
+        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;
+    }
+  }
 
-        .message-info {
-          display: flex;
-          gap: 8px;
-          margin-bottom: 4px;
-          font-size: 12px;
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 20px;
 
-          .message-time {
-            color: var(--el-text-color-secondary);
-          }
+    .header-left {
+      .name {
+        font-size: 16px;
+        font-weight: 500;
+      }
+    }
 
-          .sender-name {
-            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 {
-          padding: 10px 14px;
-          line-height: 1.4;
-          white-space: pre-line;
+          font-size: 14px;
+          color: var(--art-gray-900);
+          border-radius: 6px;
         }
-      }
-    }
-  }
 
-  .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;
+          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 {
-            background-color: #182331 !important;
+            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-preview {
+    margin-top: 12px;
+    .attachment-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
     }
-  }
-  .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;
+    .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;
-      border: 1px solid var(--el-border-color-lighter);
-      transition: transform 0.2s;
-      
       &:hover {
-        transform: scale(1.05);
+        box-shadow: 0 4px 16px rgba(0,0,0,0.10);
+        transform: translateY(-2px) scale(1.03);
       }
     }
-    
-    .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;
-      }
+    .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;
     }
   }
-}
 
-.chat-attachment-upload {
-  margin-bottom: 12px;
-  
-  .chat-upload {
-    margin-bottom: 8px;
+  // 聊天附件样式
+  .message-right .message-attachments{
+    text-align: right;
   }
-  
-  .uploaded-attachments {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
+  .message-left .message-attachments{
+    text-align: left;
+  }
+  .message-attachments {
+    margin-top: 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;
+    .attachment-item {
+      margin-bottom: 8px;
       
-      .preview-thumb {
-        width: 40px;
-        height: 40px;
-        border-radius: 4px;
-        object-fit: cover;
+      .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-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;
+      .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>
\ No newline at end of file
diff --git a/src/views/work/type/index.vue b/src/views/work/type/index.vue
index 0b38ba1..da58d09 100644
--- a/src/views/work/type/index.vue
+++ b/src/views/work/type/index.vue
@@ -1,70 +1,65 @@
 <template>
     <div class="page-content">
-      <div v-if="!isMobile">
-        <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 @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"
-        >
-          <template #default>
-            <ElTableColumn label="ID" prop="id" />
-            <ElTableColumn label="分类名称" prop="name" />
-            <ElTableColumn label="状态" prop="status">
+      <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 @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"
+      >
+        <template #default>
+          <ElTableColumn label="ID" prop="id" />
+          <ElTableColumn label="分类名称" prop="name" />
+          <ElTableColumn label="状态" prop="status">
+          <template #default="scope">
+            <ElTag :type="scope.row.status ? 'primary' : 'info'">
+              {{ scope.row.status ? '启用' : '禁用' }}
+            </ElTag>
+          </template>
+        </ElTableColumn>
+          <ElTableColumn label="创建时间" prop="created_at" />
+          <ElTableColumn fixed="right" label="操作" max-width="160px">
             <template #default="scope">
-              <ElTag :type="scope.row.status ? 'primary' : 'info'">
-                {{ scope.row.status ? '启用' : '禁用' }}
-              </ElTag>
+              <ElRow>
+                <el-button link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
+                <el-button link @click="deleteRole(scope.row)"> 删除 </el-button>
+              </ElRow>
             </template>
           </ElTableColumn>
-            <ElTableColumn label="创建时间" prop="created_at" />
-            <ElTableColumn fixed="right" label="操作" width="200px">
-              <template #default="scope">
-                <ElRow>
-                  <el-button link @click="showDialog('edit', scope.row)"> 编辑 </el-button>
-                  <el-button link @click="deleteRole(scope.row)"> 删除 </el-button>
-                </ElRow>
-              </template>
-            </ElTableColumn>
-          </template>
-        </ArtTable>
-    
-        <ElDialog
-          v-model="dialogVisible"
-          :title="dialogType === 'add' ? '新增' : '编辑'"
-          width="40%"
-          align-center
-        >
-          <ElForm ref="formRef" :model="form" :rules="rules" label-width="160px">
-            <ElFormItem label="分类名称" prop="name">
-              <ElInput v-model="form.name" />
-            </ElFormItem>
-          </ElForm>
-          <template #footer>
-            <div class="dialog-footer">
-              <ElButton @click="dialogVisible = false">取消</ElButton>
-              <ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
-            </div>
-          </template>
-        </ElDialog>
-      </div>
-      <div v-else class="mobile-hide-tip">
-        <p>该页面暂不支持移动端访问</p>
-      </div>
+        </template>
+      </ArtTable>
+  
+      <ElDialog
+        v-model="dialogVisible"
+        :title="dialogType === 'add' ? '新增' : '编辑'"
+        width="40%"
+        align-center
+      >
+        <ElForm ref="formRef" :model="form" :rules="rules" label-width="160px">
+          <ElFormItem label="分类名称" prop="name">
+            <ElInput v-model="form.name" />
+          </ElFormItem>
+        </ElForm>
+        <template #footer>
+          <div class="dialog-footer">
+            <ElButton @click="dialogVisible = false">取消</ElButton>
+            <ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
+          </div>
+        </template>
+      </ElDialog>
     </div>
   </template>