Quellcode durchsuchen

Update:更新移动端样式

XieXing vor 3 Monaten
Ursprung
Commit
0cb50df972
1 geänderte Dateien mit 25 neuen und 68 gelöschten Zeilen
  1. 25 68
      shudao-vue-frontend/src/views/mobile/m-Chat.vue

+ 25 - 68
shudao-vue-frontend/src/views/mobile/m-Chat.vue

@@ -133,11 +133,6 @@
             
             <!-- AI消息主体 -->
             <div class="ai-message-main">
-              <!-- AI头像 -->
-              <div class="ai-avatar-small">
-                <img :src="aiAvatarIcon" alt="AI" class="ai-icon">
-              </div>
-              
               <!-- 白色气泡容器 - 所有内容都在里面 -->
               <div class="message-content" :data-message-index="index" :ref="el => messageContentRefs[index] = el">
                 <!-- AI响应内容 -->
@@ -1355,8 +1350,8 @@ const getConversationMessages = async (conversationId) => {
           currentStatus: 'completed',
           statusMessage: totalFiles > 0 
             ? (message.webSearchRaw?.total > 0 
-                ? ` <span class="ai-name">蜀道安全管理AI智能助手</span>已为您分析 <span class="file-count">${totalFiles}</span> 个知识库文件,以及 <span class="file-count">${message.webSearchRaw.total}</span> 个相关网络资源`
-                : ` <span class="ai-name">蜀道安全管理AI智能助手</span>已为您分析 <span class="file-count">${totalFiles}</span> 个知识库文件`)
+                ? `已为您分析 <span class="file-count">${totalFiles}</span> 个知识库文件,以及 <span class="file-count">${message.webSearchRaw.total}</span> 个相关网络资源`
+                : `已为您分析 <span class="file-count">${totalFiles}</span> 个知识库文件`)
             : ''
         }
       }))
@@ -2315,11 +2310,11 @@ const getAvatarStatus = (currentStatus, progress) => {
 const updateMessageStatus = (aiMessage, status, customMessage = null) => {
   const statusConfig = {
     querying_kb: {
-      message: '🔍 <span class="ai-name">蜀道安全管理AI智能助手</span>正在为您分析知识库……',
+      message: '正在为您分析知识库……',
       progress: 10
     },
     web_searching: {
-      message: '🌐 <span class="ai-name">蜀道安全管理AI智能助手</span>正在为您联网分析……',
+      message: '正在为您联网分析……',
       progress: 15
     },
     data_retrieved: {
@@ -2327,19 +2322,19 @@ const updateMessageStatus = (aiMessage, status, customMessage = null) => {
       progress: 30
     },
     analyzing_files: {
-      message: '😊 <span class="ai-name">蜀道安全管理AI智能助手</span>正在为您分析文件内容……',
+      message: '正在为您分析文件内容……',
       progress: 45
     },
     analyzing_web: {
-      message: '🤔 <span class="ai-name">蜀道安全管理AI智能助手</span>正在分析联网数据……',
+      message: '正在分析联网数据……',
       progress: 70
     },
     deep_thinking: {
-      message: '❓ <span class="ai-name">蜀道安全管理AI智能助手</span>正在深度思考中,请您稍等片刻……',
+      message: '正在深度思考中,请您稍等片刻……',
       progress: 75
     },
     outputting: {
-      message: '😄 <span class="ai-name">蜀道安全管理AI智能助手</span>正在整理分析中!',
+      message: '正在整理分析中!',
       progress: 90
     },
     completed: {
@@ -2357,18 +2352,18 @@ const updateMessageStatus = (aiMessage, status, customMessage = null) => {
       const webCount = aiMessage.webSearchTotal || 0
       
       if (webCount > 0) {
-        aiMessage.statusMessage = `<span class="ai-name">蜀道安全管理AI智能助手</span>正在为您分析 <span class="file-count">${kbCount}</span> 个知识库文件,以及 <span class="file-count">${webCount}</span> 个相关网络资源`
+        aiMessage.statusMessage = `正在为您分析 <span class="file-count">${kbCount}</span> 个知识库文件,以及 <span class="file-count">${webCount}</span> 个相关网络资源`
       } else {
-        aiMessage.statusMessage = `<span class="ai-name">蜀道安全管理AI智能助手</span>正在为您分析 <span class="file-count">${kbCount}</span> 个知识库文件`
+        aiMessage.statusMessage = `正在为您分析 <span class="file-count">${kbCount}</span> 个知识库文件`
       }
     } else if (status === 'completed') {
       const kbCount = aiMessage.totalFiles || 0
       const webCount = aiMessage.webSearchTotal || 0
       
       if (webCount > 0) {
-        aiMessage.statusMessage = `✅ <span class="ai-name">蜀道安全管理AI智能助手</span>已为您检索到 <span class="file-count">${kbCount}</span> 个知识库文件,以及 <span class="file-count">${webCount}</span> 个相关网络资源`
+        aiMessage.statusMessage = `已为您分析 <span class="file-count">${kbCount}</span> 个知识库文件,以及 <span class="file-count">${webCount}</span> 个相关网络资源`
       } else {
-        aiMessage.statusMessage = `✅ <span class="ai-name">蜀道安全管理AI智能助手</span>已为您检索到 <span class="file-count">${kbCount}</span> 个知识库文件`
+        aiMessage.statusMessage = `已为您分析 <span class="file-count">${kbCount}</span> 个知识库文件`
       }
     } else {
       aiMessage.statusMessage = customMessage || config.message
@@ -2802,13 +2797,13 @@ const handleSSEMessage = (data, aiMessageIndex) => {
         aiMessage.webSearchTotal = data.total || 0
         
         // 更新状态显示:已检索到数据(联网搜索完成)
-        const statusMsg = `<span class="ai-name">蜀道安全管理AI智能助手</span>已为您检索到 <span class="file-count">${aiMessage.totalFiles || 0}</span> 个知识库文件,以及 <span class="file-count">${aiMessage.webSearchTotal}</span> 个相关网络资源`
+        const statusMsg = `已为您检索到 <span class="file-count">${aiMessage.totalFiles || 0}</span> 个知识库文件,以及 <span class="file-count">${aiMessage.webSearchTotal}</span> 个相关网络资源`
         updateMessageStatus(aiMessage, 'data_retrieved', statusMsg)
         
         console.log(`[网络搜索] 收到原始数据: ${data.total} 条结果`)
       } else {
         // 如果没有搜索结果,也要更新状态,但只显示知识库文件数
-        const statusMsg = `<span class="ai-name">蜀道安全管理AI智能助手</span>已为您检索到 <span class="file-count">${aiMessage.totalFiles || 0}</span> 个知识库文件`
+        const statusMsg = `已为您检索到 <span class="file-count">${aiMessage.totalFiles || 0}</span> 个知识库文件`
         updateMessageStatus(aiMessage, 'data_retrieved', statusMsg)
         console.log('[网络搜索] 无搜索结果,仅使用知识库')
       }
@@ -3249,7 +3244,7 @@ const handleReportGeneratorSubmit = async (data) => {
     timestamp: new Date().toISOString(),
     // 新增:状态管理
     currentStatus: 'querying_kb', // 当前状态
-    statusMessage: '🔍 蜀道安全管理AI智能助手正在为您分析知识库……', // 状态消息
+    statusMessage: '正在为您分析知识库……', // 状态消息
     showStats: true, // 是否显示统计卡片
     // 新增:后端消息ID(初始为null,从SSE接收后赋值)
     ai_message_id: null,
@@ -4712,26 +4707,15 @@ onActivated(async () => {
   display: flex;
   flex-direction: column;
   gap: 0;
-  overflow-x: hidden;
+  overflow-x: visible;
   max-width: 100%;
+  margin-right: -20px;
 
   .ai-message-main {
     display: flex;
-    gap: 12px;
-    overflow-x: hidden;
-    max-width: 100%;
-  }
-
-  .ai-avatar-small {
-    width: 52px;
-    height: 52px;
-    flex-shrink: 0;
-
-    .ai-icon {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
+    margin-bottom: 16px;
+    overflow-x: visible;
+    max-width: calc(100%+20px);
   }
 
   // 网络搜索胶囊外层容器
@@ -4739,7 +4723,6 @@ onActivated(async () => {
     margin-bottom: 8px;
     display: flex;
     justify-content: flex-start;
-    padding-left: 62px; // 为头像留空间
     overflow-x: hidden;
     max-width: 100%;
   }
@@ -4747,40 +4730,15 @@ onActivated(async () => {
   // AI消息主体容器
   .ai-message-main {
     display: flex;
-    gap: 10px;
-    align-items: flex-start;
     margin-bottom: 16px;
-    overflow-x: hidden;
+    overflow-x: visible;
     max-width: 100%;
   }
 
-  // AI头像样式 - 移动端(用户已设置为52px)
-  .ai-avatar-small {
-    width: 52px;
-    height: 52px;
-    flex-shrink: 0;
-    animation: avatar-pulse 2s ease-in-out infinite;
-
-    .ai-icon {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      filter: drop-shadow(0 2px 8px rgba(91, 141, 239, 0.15));
-    }
-  }
-
-  @keyframes avatar-pulse {
-    0%, 100% {
-      transform: scale(1);
-    }
-    50% {
-      transform: scale(1.05);
-    }
-  }
-
-  // 白色气泡容器 - 包裹所有AI内容
+  // 白色气泡容器 - 包裹所有AI内容,占据全宽
   .message-content {
     flex: 1;
+    width: 100%;
     min-width: 0;
     max-width: 100%;
     background: white;
@@ -5000,7 +4958,7 @@ onActivated(async () => {
     color: #374151;
     padding: 12px 6px;
     border-radius: 0px 18px 18px 18px;
-    max-width: calc(100vw - 120px);
+    max-width: calc(100vw - 40px);
     width: fit-content;
     min-width: 120px;
     word-wrap: break-word;
@@ -5532,9 +5490,8 @@ onActivated(async () => {
 .related-questions {
   margin: 0px 0 12px 0;
   // margin-top: 0px;
-  margin-left: 62px; /* 与AI消息白色气泡对齐 (52px头像 + 10px gap) */
   width: fit-content;
-  max-width: calc(100vw - 120px);
+  max-width: calc(100vw - 40px);
   
   .related-question-item {
     background: rgba(0,0,0,.05); /* 与PC端一致的背景色 */