🎈 perf: 优化工单页气泡展示

src/pages/service/orderDetail.vue

@@ -284,6 +284,7 @@ onUnmounted(stopPolling)
   display: flex;
   align-items: flex-start;
   gap: 12px;
+  width: 100%;
 
   &__avatar-wrap {
     flex: 0 0 36px;
@@ -309,7 +310,11 @@ onUnmounted(stopPolling)
   }
 
   &__body {
-    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 0 1 auto;
+    max-width: calc(100% - 48px);
     min-width: 0;
   }
 
@@ -319,6 +324,7 @@ onUnmounted(stopPolling)
     align-items: center;
     gap: 8px;
     margin-bottom: 6px;
+    max-width: 100%;
   }
 
   &__name {
@@ -332,31 +338,51 @@ onUnmounted(stopPolling)
   }
 
   &__content {
+    display: inline-block;
+    width: fit-content;
+    max-width: 100%;
     padding: 12px 14px;
     border-radius: @store-radius-sm;
     background: @store-bg;
     line-height: 1.65;
     white-space: pre-wrap;
+    word-break: break-word;
     color: @store-text-muted;
   }
 
   &__files {
     margin-top: 8px;
-    max-width: 400px;
+    width: fit-content;
+    max-width: 100%;
   }
 
-  &--mine .chat-item__content {
-    background: fade(@store-accent, 12%);
-    border: 1px solid fade(@store-accent, 25%);
+  &--mine {
+    flex-direction: row-reverse;
+
+    .chat-item__body {
+      align-items: flex-end;
+    }
+
+    .chat-item__meta {
+      justify-content: flex-end;
+    }
+
+    .chat-item__content {
+      background: fade(@store-accent, 12%);
+      border: 1px solid fade(@store-accent, 25%);
+      border-top-right-radius: 4px;
+    }
   }
 
   &--staff .chat-item__content {
     background: #f0f6ff;
     border: 1px solid #d6e4ff;
+    border-top-left-radius: 4px;
   }
 
   &--system .chat-item__content {
     background: var(--color-fill-2);
+    border-top-left-radius: 4px;
   }
 }