|
|
|
@ -17,10 +17,8 @@ |
|
|
|
</div> |
|
|
|
<div v-else-if="msg.role === 'assistant'"> |
|
|
|
<div v-if="msg.isKG" class="kg-card"> |
|
|
|
<h4>🔬 病历结构化分析结果</h4> |
|
|
|
|
|
|
|
<div v-if="msg.content.entities?.length" class="kg-section"> |
|
|
|
<h5>识别出的实体</h5> |
|
|
|
<h5 style="text-align: left">识别出的实体</h5> |
|
|
|
<div class="entity-list"> |
|
|
|
<span |
|
|
|
v-for="(ent, i) in msg.content.entities" |
|
|
|
@ -34,7 +32,7 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div v-if="msg.content.relations?.length" class="kg-section"> |
|
|
|
<h5>识别出的关系</h5> |
|
|
|
<h5 style="text-align: left">识别出的关系</h5> |
|
|
|
<ul class="relation-list"> |
|
|
|
<li v-for="(rel, i) in msg.content.relations" :key="i"> |
|
|
|
<span class="rel-subject">{{ rel.e1 }}</span> |
|
|
|
@ -58,36 +56,23 @@ |
|
|
|
<div class="input-area"> |
|
|
|
<textarea |
|
|
|
v-model="inputText" |
|
|
|
placeholder="向千问提问" |
|
|
|
placeholder="有什么可以帮助您？" |
|
|
|
class="input-box" |
|
|
|
@keyup.enter.exact.prevent="sendMessage" |
|
|
|
rows="1" |
|
|
|
></textarea> |
|
|
|
|
|
|
|
<div class="action-buttons"> |
|
|
|
<button class="btn" @click="insertPrefix('深度思考：')"> |
|
|
|
<span>☰</span> 深度思考 |
|
|
|
</button> |
|
|
|
<button class="btn" @click="insertPrefix('深度研究：')"> |
|
|
|
<span>🔍</span> 深度研究 |
|
|
|
</button> |
|
|
|
<button class="btn" @click="insertPrefix('```代码\n')"> |
|
|
|
<span><></span> 代码 |
|
|
|
</button> |
|
|
|
<button class="btn" @click="insertPrefix('生成一张图片：')"> |
|
|
|
<span>🖼️</span> 图像 |
|
|
|
</button> |
|
|
|
<button class="btn" @click="insertPrefix('翻译成英文：')"> |
|
|
|
<span>🌐</span> 翻译 |
|
|
|
</button> |
|
|
|
<button class="btn more-btn">...</button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<img |
|
|
|
src="../assets/upload.png" |
|
|
|
alt="用户头像" |
|
|
|
class="avatar" |
|
|
|
style="border-radius: 50%;width: 30px;box-shadow: 0 2px 8px rgba(0,0,0,0.05); " |
|
|
|
> |
|
|
|
<div class="icon-group"> |
|
|
|
<span class="icon" title="切换语言">🌍</span> |
|
|
|
<span class="icon" title="编辑模式">✏️</span> |
|
|
|
|
|
|
|
<button class="send-btn" @click="sendMessage" title="发送"> |
|
|
|
<span>📤</span> |
|
|
|
发送 |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -140,16 +125,18 @@ export default { |
|
|
|
} |
|
|
|
// this.pollAIStatus() |
|
|
|
// 添加用户消息 |
|
|
|
this.messages.push({ role: 'user', content: text }); |
|
|
|
let message={ role: 'user', content: text } |
|
|
|
this.messages.push(message); |
|
|
|
this.inputText = ''; |
|
|
|
// analyze(data).then(res=>{ |
|
|
|
// console.log(res) |
|
|
|
// this.messages.push({ role: 'assistant', |
|
|
|
// content: res,entities:res.entities,relations:res.relations,isKG:true }); |
|
|
|
// }) |
|
|
|
qaAnalyze(data).then(res=>{ |
|
|
|
|
|
|
|
analyze(data).then(res=>{ |
|
|
|
console.log(res) |
|
|
|
let message={ role: 'assistant', |
|
|
|
content: res,entities:res.entities,relations:res.relations,isKG:true } |
|
|
|
this.messages.push(message); |
|
|
|
}) |
|
|
|
// qaAnalyze(data).then(res=>{ |
|
|
|
// |
|
|
|
// }) |
|
|
|
}, |
|
|
|
insertPrefix(prefix) { |
|
|
|
this.inputText += prefix; |
|
|
|
@ -166,6 +153,23 @@ export default { |
|
|
|
container.scrollTop = container.scrollHeight; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
saveMessage(message) { |
|
|
|
const messages = JSON.parse(localStorage.getItem('messages')) || []; |
|
|
|
messages.push(message); // 将新消息添加到消息数组中 |
|
|
|
localStorage.setItem('messages', JSON.stringify(messages)); |
|
|
|
}, |
|
|
|
loadMessages() { |
|
|
|
const savedMessages = JSON.parse(localStorage.getItem('messages')) || []; |
|
|
|
this.messages = savedMessages; // 加载之前存储的消息 |
|
|
|
}, |
|
|
|
handleBeforeUnload() { |
|
|
|
localStorage.removeItem('messages'); |
|
|
|
// 页面刷新或关闭前，保存所有消息 |
|
|
|
console.log("页面刷新或关闭前，保存消息..."); |
|
|
|
this.messages.forEach((message) => { |
|
|
|
this.saveMessage(message); |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -173,9 +177,13 @@ export default { |
|
|
|
this.scrollToBottom(); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
this.loadMessages(); |
|
|
|
this.scrollToBottom(); |
|
|
|
} |
|
|
|
window.addEventListener('beforeunload', this.handleBeforeUnload); |
|
|
|
}, |
|
|
|
|
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
@ -189,6 +197,7 @@ export default { |
|
|
|
border: 1px solid #e0e0e0; |
|
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); |
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
|
|
|
background-color: #F3F3F3; |
|
|
|
} |
|
|
|
|
|
|
|
/* === 消息区域 === */ |
|
|
|
@ -196,7 +205,6 @@ export default { |
|
|
|
flex: 1; |
|
|
|
padding: 16px; |
|
|
|
overflow-y: auto; |
|
|
|
background-color: #f9f9f9; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
@ -220,33 +228,36 @@ export default { |
|
|
|
max-width: 75%; |
|
|
|
word-break: break-word; |
|
|
|
line-height: 1.5; |
|
|
|
font-size: 14px; |
|
|
|
font-size: 12px; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
|
|
|
|
.message.user .bubble { |
|
|
|
background-color: #007bff; |
|
|
|
background-color: #155DFF; |
|
|
|
color: white; |
|
|
|
border-bottom-right-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.message.assistant .bubble { |
|
|
|
background-color: #e9ecef; |
|
|
|
background-color: #fff; |
|
|
|
color: #333; |
|
|
|
border-bottom-left-radius: 4px; |
|
|
|
} |
|
|
|
|
|
|
|
/* === 输入区域 === */ |
|
|
|
.input-area { |
|
|
|
padding: 16px; |
|
|
|
background: white; |
|
|
|
border-top: 1px solid #eee; |
|
|
|
border-top-left-radius: 24px; |
|
|
|
border-top-right-radius: 24px; |
|
|
|
box-shadow: 2px -1px 14px 0px rgb(159 160 161 / 22%); |
|
|
|
} |
|
|
|
.input-box::placeholder { |
|
|
|
color: #AFAFAF; /* 设置字体颜色为红色 */ |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.input-box { |
|
|
|
width: 100%; |
|
|
|
padding: 12px 16px; |
|
|
|
border: 1px solid #d9d9d9; |
|
|
|
border: none; |
|
|
|
border-radius: 12px; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 1.5; |
|
|
|
@ -264,22 +275,23 @@ export default { |
|
|
|
display: flex; |
|
|
|
gap: 8px; |
|
|
|
margin: 12px 0; |
|
|
|
overflow-x: auto; |
|
|
|
white-space: nowrap; |
|
|
|
padding: 0 4px; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
padding: 6px 12px; |
|
|
|
background: #f5f5f5; |
|
|
|
border: 1px solid #ddd; |
|
|
|
border-radius: 12px; |
|
|
|
font-size: 12px; |
|
|
|
color: #333; |
|
|
|
cursor: pointer; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 4px; |
|
|
|
display: flex; /* 使用flex布局 */ |
|
|
|
justify-content: center; /* 水平居中 */ |
|
|
|
align-items: center; /* 垂直居中 */ |
|
|
|
width: 20px; /* 设置按钮的宽度为20px */ |
|
|
|
height: 20px; /* 设置按钮的高度为20px */ |
|
|
|
border-radius: 50%; /* 圆形按钮 */ |
|
|
|
background-color: white; /* 背景色为白色 */ |
|
|
|
font-size: 18px; /* 设置加号的字体大小 */ |
|
|
|
line-height: 20px; /* 设置行高，确保加号垂直居中 */ |
|
|
|
color: #333; /* 加号的颜色 */ |
|
|
|
font-weight: bold; /* 加号字体加粗 */ |
|
|
|
cursor: pointer; /* 鼠标悬停时显示为点击效果 */ |
|
|
|
} |
|
|
|
|
|
|
|
.btn:hover { |
|
|
|
@ -317,21 +329,21 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.send-btn { |
|
|
|
background: #9b68ff; |
|
|
|
background: #B9CDFF; |
|
|
|
border: none; |
|
|
|
width: 32px; |
|
|
|
height: 32px; |
|
|
|
border-radius: 50%; |
|
|
|
width: 50px; |
|
|
|
height: 20px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
color: white; |
|
|
|
cursor: pointer; |
|
|
|
transition: background-color 0.2s; |
|
|
|
font-size: 11px; |
|
|
|
} |
|
|
|
|
|
|
|
.send-btn:hover { |
|
|
|
background: #8a53e0; |
|
|
|
background: #155DFF; |
|
|
|
} |
|
|
|
/* === 自定义助手 KG 卡片 === */ |
|
|
|
.kg-card { |
|
|
|
@ -428,6 +440,5 @@ export default { |
|
|
|
.assistant-text { |
|
|
|
background-color: #e9ecef; |
|
|
|
color: #333; |
|
|
|
border-bottom-left-radius: 4px; |
|
|
|
} |
|
|
|
</style> |
