|
@@ -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;
|