From d860176c37a8ca31c3395873a3cc92f564ba45e9 Mon Sep 17 00:00:00 2001
From: Lexcubia <lexcubia@qq.com>
Date: Sun, 20 Apr 2025 20:59:38 +0800
Subject: [PATCH] update: Improve mobile responsiveness of CustomerBackground
 component with dynamic width and enhanced styling

---
 src/components/chat/CustomerBackground.vue | 107 +++++++++++++++++++--
 1 file changed, 98 insertions(+), 9 deletions(-)

diff --git a/src/components/chat/CustomerBackground.vue b/src/components/chat/CustomerBackground.vue
index 1e5d4d6..980844f 100644
--- a/src/components/chat/CustomerBackground.vue
+++ b/src/components/chat/CustomerBackground.vue
@@ -1,10 +1,17 @@
 <template>
   <el-dialog
     v-model="dialogVisible"
-    width="500px"
+    :width="isMobile ? '90%' : '500px'"
     :close-on-click-modal="true"
     destroy-on-close
+    class="customer-background-dialog"
+    :fullscreen="isMobile"
   >
+    <template #header>
+      <div class="dialog-header">
+        <h3 class="dialog-title">客户信息</h3>
+      </div>
+    </template>
     <div class="background-info-content" v-if="currentMode">
       <div v-html="formattedBackground"></div>
     </div>
@@ -20,7 +27,7 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import { useChatStore } from '@/store/chat'
 import { marked } from 'marked'
 
@@ -34,6 +41,20 @@ const props = defineProps({
 const emit = defineEmits(['update:modelValue'])
 
 const chatStore = useChatStore()
+const isMobile = ref(false)
+
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+}
+
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
+})
 
 const dialogVisible = computed({
   get: () => props.modelValue,
@@ -67,44 +88,92 @@ const handleClose = () => {
 </script>
 
 <style lang="scss" scoped>
+.customer-background-dialog {
+  :deep(.el-dialog) {
+    @media screen and (max-width: 768px) {
+      margin: 0 !important;
+      max-width: 100% !important;
+      border-radius: 0;
+      
+      .el-dialog__header {
+        margin: 0;
+        padding: 16px;
+        border-bottom: 1px solid #eee;
+      }
+
+      .el-dialog__body {
+        padding: 16px;
+        max-height: calc(100vh - 120px);
+        overflow-y: auto;
+      }
+
+      .el-dialog__footer {
+        padding: 12px 16px;
+        border-top: 1px solid #eee;
+      }
+    }
+  }
+}
+
+.dialog-header {
+  .dialog-title {
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+    margin: 0;
+  }
+}
+
 .background-info-content {
-  padding: 0 20px;
+  padding: 0;
 
   :deep(h1) {
     font-size: 20px;
     font-weight: 600;
-    margin-bottom: 16px;
+    margin: 0 0 16px 0;
     color: #333;
   }
 
   :deep(h2) {
     font-size: 18px;
     font-weight: 600;
-    margin: 24px 0 16px;
+    margin: 20px 0 12px 0;
     color: #333;
   }
 
   :deep(h3) {
     font-size: 16px;
     font-weight: 600;
-    margin: 20px 0 12px;
+    margin: 16px 0 8px 0;
     color: #333;
   }
 
   :deep(p) {
-    margin-bottom: 12px;
+    margin: 0 0 12px 0;
     line-height: 1.6;
     color: #666;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   :deep(ul), :deep(ol) {
-    margin-bottom: 12px;
+    margin: 0 0 12px 0;
     padding-left: 20px;
     
     li {
       margin-bottom: 8px;
       line-height: 1.6;
       color: #666;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
     }
   }
 
@@ -123,6 +192,26 @@ const handleClose = () => {
 .dialog-footer {
   display: flex;
   justify-content: flex-end;
-  margin-top: 20px;
+  margin-top: 0;
+}
+
+@media screen and (max-width: 768px) {
+  .background-info-content {
+    :deep(h1) {
+      font-size: 18px;
+    }
+
+    :deep(h2) {
+      font-size: 16px;
+    }
+
+    :deep(h3) {
+      font-size: 15px;
+    }
+
+    :deep(p), :deep(ul), :deep(ol) {
+      font-size: 14px;
+    }
+  }
 }
 </style> 
\ No newline at end of file