🐞 fix: 修复工单头像被挤扁的问题

src/pages/service/orderDetail.vue

@@ -43,10 +43,12 @@
                 class="chat-item"
                 :class="messageClass(msg.type)"
               >
-                <a-avatar :size="36" class="chat-item__avatar">
-                  <icon-user v-if="!data.userInfo?.[msg.uuid]?.avatar" />
-                  <img v-else :src="data.userInfo[msg.uuid].avatar" alt="" />
-                </a-avatar>
+                <div class="chat-item__avatar-wrap">
+                  <a-avatar :size="36">
+                    <icon-user v-if="!data.userInfo?.[msg.uuid]?.avatar" />
+                    <img v-else :src="data.userInfo[msg.uuid].avatar" alt="" />
+                  </a-avatar>
+                </div>
                 <div class="chat-item__body">
                   <div class="chat-item__meta">
                     <span class="chat-item__name">{{ data.userInfo?.[msg.uuid]?.username || '用户' }}</span>
@@ -280,8 +282,37 @@ onUnmounted(stopPolling)
 
 .chat-item {
   display: flex;
+  align-items: flex-start;
   gap: 12px;
 
+  &__avatar-wrap {
+    flex: 0 0 36px;
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+    overflow: hidden;
+    border-radius: 50%;
+
+    :deep(.arco-avatar) {
+      display: block;
+      width: 36px;
+      height: 36px;
+      line-height: 36px;
+    }
+
+    :deep(.arco-avatar-image),
+    :deep(img) {
+      width: 36px;
+      height: 36px;
+      object-fit: cover;
+    }
+  }
+
+  &__body {
+    flex: 1;
+    min-width: 0;
+  }
+
   &__meta {
     display: flex;
     flex-wrap: wrap;