src/components/chat/CustomerBackground.vue

@@ -1,17 +1,10 @@
 <template>
   <el-dialog
     v-model="dialogVisible"
-    :width="isMobile ? '90%' : '500px'"
+    width="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>
@@ -27,7 +20,7 @@
 </template>
 
 <script setup>
-import { computed, ref, onMounted, onUnmounted } from 'vue'
+import { computed } from 'vue'
 import { useChatStore } from '@/store/chat'
 import { marked } from 'marked'
 
@@ -41,20 +34,6 @@ 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,
@@ -88,92 +67,44 @@ 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;
+  padding: 0 20px;
 
   :deep(h1) {
     font-size: 20px;
     font-weight: 600;
-    margin: 0 0 16px 0;
+    margin-bottom: 16px;
     color: #333;
   }
 
   :deep(h2) {
     font-size: 18px;
     font-weight: 600;
-    margin: 20px 0 12px 0;
+    margin: 24px 0 16px;
     color: #333;
   }
 
   :deep(h3) {
     font-size: 16px;
     font-weight: 600;
-    margin: 16px 0 8px 0;
+    margin: 20px 0 12px;
     color: #333;
   }
 
   :deep(p) {
-    margin: 0 0 12px 0;
+    margin-bottom: 12px;
     line-height: 1.6;
     color: #666;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
   }
 
   :deep(ul), :deep(ol) {
-    margin: 0 0 12px 0;
+    margin-bottom: 12px;
     padding-left: 20px;
     
     li {
       margin-bottom: 8px;
       line-height: 1.6;
       color: #666;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    &:last-child {
-      margin-bottom: 0;
     }
   }
 
@@ -192,26 +123,6 @@ const handleClose = () => {
 .dialog-footer {
   display: flex;
   justify-content: flex-end;
-  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;
-    }
-  }
+  margin-top: 20px;
 }
 </style> 

src/views/chat/ChatHeader.vue

@@ -20,7 +20,7 @@
         <HistoryButton v-if="settingsStore.sidebarCollapsed" :icon-only="false" class="title-history-btn" />
       </div>
       <div class="actions">
-        <el-tooltip content="删除会话" placement="bottom" v-if="chatStore.conversationId">
+        <el-tooltip content="删除会话" placement="bottom">
           <el-button 
             class="action-btn delete-btn" 
             :icon="Delete"
@@ -38,12 +38,13 @@
           >
           </el-button>
         </el-tooltip>
-        <el-tooltip :content="hasBackground ? '客户背景' : '暂无客户背景信息'" placement="bottom" v-if="hasBackground">
+        <el-tooltip :content="hasBackground ? '客户背景' : '暂无客户背景信息'" placement="bottom">
           <el-button 
             class="action-btn" 
             :icon="User"
             @click="showUserInfo = true"
             text
+            :disabled="!hasBackground"
           >
           </el-button>
         </el-tooltip>