处理首页会话功能格式化

src/layouts/default/sider/bottomSider2.vue

@@ -71,9 +71,10 @@
                 <div v-else class="system-message">
                   <div class="answerIcon"></div>
                   <div class="answer-message">
-                    <div>
+                    <!-- <div>
                       <span>{{ message.content }}</span>
-                    </div>
+                    </div> -->
+                    <div v-html="formatMessage(message.content)"></div>
                   </div>
                 </div>
               </div>
@@ -173,47 +174,56 @@ async function handleSend() {
   };
   inputText.value = ''; // 清空输入框
   //将用户输入的内容发送到后端
-  let response = await fetch('http://182.92.126.35:6005/chat', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(params),
-  });
-  const data = await response.json();
-  const assistantReply = data.reply; // 获取助手回复
-  systemMessage.value = assistantReply;
-  // 添加系统回答
-  messageList.value.push({
-    id: `system_${Date.now()}`,
-    type: 'system',
-    content: systemMessage.value,
-    timestamp: Date.now(),
-  });
-  spinning.value = false;
+  try {
+    // 将用户输入的内容发送到后端
+    let response = await fetch('http://182.92.126.35:6005/chat', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(params),
+    });
+
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+
+    const data = await response.json();
+    const assistantReply = data.reply; // 获取助手回复
+    formatMessage(assistantReply);
+    systemMessage.value = assistantReply;
+
+    // 添加系统回答
+    messageList.value.push({
+      id: `system_${Date.now()}`,
+      type: 'system',
+      content: systemMessage.value,
+      timestamp: Date.now(),
+    });
+  } catch (error) {
+    // 请求失败时设置系统消息为"服务器异常"
+    systemMessage.value = '服务器异常';
+    console.error('请求失败:', error);
+  } finally {
+    spinning.value = false; // 无论请求成功与否，都停止加载指示器
+  }
+}
+//格式化消息
+function formatMessage(text: string) {
+  let formatted = text
+    // 处理换行
+    .replace(/\n\n/g, '<br>')
+    .replace(/\n###/g, '<br> ')
+    .replace(/###/g, '')
+    .replace(/---/g, '')
+    // 处理粗体
+    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+    // 处理斜体
+    .replace(/\*(.*?)\*/g, '<em>$1</em>')
+    // 处理行内代码
+    .replace(/`([^`]+)`/g, '<code>$1</code>');
+  return formatted;
 }
-// async function handleSend() {
-//   spinning.value = true;
-//   userMessage.value.push({
-//     msg: inputText.value, // 消息内容
-//   });
-//   inputText.value = ''; // 清空输入框
-//   const params = {
-//     messages: [{ role: 'user', content: inputText.value }],
-//   };
-//   //将用户输入的内容发送到后端
-//   let response = await fetch('http://182.92.126.35:6005/chat', {
-//     method: 'POST',
-//     headers: {
-//       'Content-Type': 'application/json',
-//     },
-//     body: JSON.stringify(params),
-//   });
-//   const data = await response.json();
-//   spinning.value = false;
-//   const assistantReply = data.reply; // 获取助手回复
-//   systemMessage.value = assistantReply;
-// }
 // 初始化按钮定位
 onMounted(() => {});
 </script>
@@ -387,6 +397,7 @@ onMounted(() => {});
   flex-direction: row;
 }
 .answerIcon {
+  flex-shrink: 0;
   margin-top: 10px;
   width: 35px;
   height: 35px;
@@ -395,7 +406,6 @@ onMounted(() => {});
 }
 .answer-message {
   float: left;
-  max-width: 80%;
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
@@ -408,7 +418,7 @@ onMounted(() => {});
   display: flex;
   flex-direction: row;
   align-self: flex-start;
-  max-width: 90%;
+  width: 100%;
   padding: 12px;
   display: flex;
 }
@@ -421,7 +431,7 @@ onMounted(() => {});
 }
 .answer-message {
   float: left;
-  max-width: 80%;
+  width: 100%;
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
@@ -439,7 +449,7 @@ onMounted(() => {});
   min-height: 40px; /* 避免高度塌陷 */
 }
 .message-item.user {
-  margin-bottom: 30px;
+  margin-bottom: 50px;
 }
 .input-area {
   background-color: #043256 !important;