分包

src/components/ChatDialog.vue

@@ -2,15 +2,12 @@
     <div v-if="visible" class="dialog-overlay" @click.self="close">
         <div class="dialog-content">
             <h3 class="text-lg font-bold mb-4">最近一条的消息翻译</h3>
-            <div class="chat-box">
-                <div class="left-message">
-                    <div class="bubble left">{{ leftMsg }}</div>
+            <el-scrollbar class="chat-box">
+                <div v-for="(msg, index) in messages" :key="index"
+                    :class="msg.position === 'left' ? 'left-message' : 'right-message'">
+                    <div :class="['bubble', msg.position]">{{ msg.text }}</div>
                 </div>
-                <div class="right-message">
-                    <div class="bubble right">{{ rightMsg }}</div>
-                </div>
-            </div>
-            <!-- <button class="close-btn" @click="close">关闭</button> -->
+            </el-scrollbar>
         </div>
     </div>
 </template>
@@ -19,24 +16,21 @@
 import { defineProps, defineEmits } from 'vue'
 
 const props = defineProps({
-    leftMsg: String,
-    rightMsg: String,
-    visible: Boolean
+    visible: Boolean,
+    messages: {
+        type: Array,
+        required: true,
+        default: () => [],
+    },
 })
 
-// const emit = defineEmits(['close'])
+const emit = defineEmits(['close'])
 
-// const close = () => emit('close')
+const close = () => emit('close')
 </script>
 
 <style scoped>
 .dialog-overlay {
-    /* position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0; */
-    /* background: rgba(0, 0, 0, 0.5); */
     display: flex;
     justify-content: center;
     align-items: center;
@@ -53,29 +47,27 @@ const props = defineProps({
     display: flex;
     flex-direction: column;
     gap: 10px;
+    height: 80vh;
 }
 
 .left-message {
     align-self: flex-start;
+    margin-bottom: 20px;
 }
 
 .right-message {
     align-self: flex-end;
     text-align: right;
+    margin-bottom: 20px;
+
 }
 
 .bubble {
     padding: 10px 14px;
     border-radius: 18px;
     max-width: 70%;
-
     display: inline-block;
-    /* 👈 使气泡宽度自适应内容 */
-    padding: 10px 14px;
-    border-radius: 18px;
-    max-width: 70%;
     word-break: break-word;
-    /* 防止英文单词太长撑爆 */
 }
 
 .bubble.left {
@@ -85,7 +77,8 @@ const props = defineProps({
 .bubble.right {
     background-color: rgb(0, 169, 214);
     color: white;
-
+    text-align: left;
+    /* ✅ 关键：强制文字左对齐 */
 }
 
 .close-btn {